* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #ddd;
  background: #1e1e1e;
}

body {
  --aside-w: 220px;
  --footer-h: 220px;
  --splitter: 4px;
  display: grid;
  grid-template-columns: var(--aside-w) var(--splitter) 1fr;
  grid-template-rows: 44px 1fr var(--splitter) var(--footer-h) auto;
  grid-template-areas:
    "header header header"
    "aside  vsplit main"
    "hsplit hsplit hsplit"
    "footer footer footer"
    "hint   hint   hint";
  height: 100vh;
}

.splitter {
  background: #1e1e1e;
  user-select: none;
  z-index: 5;
}
.splitter:hover,
.splitter.dragging { background: #0e639c; }
.vsplit {
  grid-area: vsplit;
  cursor: col-resize;
}
.hsplit {
  grid-area: hsplit;
  cursor: row-resize;
}
body.dragging-col,
body.dragging-col * { cursor: col-resize !important; user-select: none; }
body.dragging-row,
body.dragging-row * { cursor: row-resize !important; user-select: none; }

header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #252526;
  border-bottom: 1px solid #333;
}

header strong { color: #fff; margin-right: 8px; }

header .home-link {
  background: #664167;
  color: #fff;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 13px;
  text-decoration: none;
}
header .home-link:hover { background: #805582; }
header .guide-link { color: #c7a6cd; font-size: 13px; white-space: nowrap; }

header button {
  background: #0e639c;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
header button:hover:not(:disabled) { background: #1177bb; }
header button:disabled { opacity: 0.4; cursor: not-allowed; }

#slug-readout { font-size: 12px; color: #888; margin-left: 8px; }
#status { margin-left: auto; font-size: 12px; color: #aaa; }
#status.ok { color: #4ade80; }
#status.err { color: #f87171; }
#status.busy { color: #fbbf24; }

dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  color: #ddd;
  background: #252526;
  border: 1px solid #664167;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
#import-app-dialog { width: min(760px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; }
#import-app-dialog p { line-height: 1.5; }
#import-app-dialog label { display: block; margin: 16px 0 8px; }
#app-source { width: 100%; height: 32vh; min-height: 160px; padding: 12px; background: #1e1e1e; color: #eee; border: 1px solid #666; font: 13px/1.5 monospace; resize: vertical; }
#import-preview.ok { color: #4ade80; }
#import-preview.err { color: #f87171; }
#apply-app-import:disabled { opacity: 0.4; cursor: not-allowed; }
#icon-meta { white-space: pre-line; }
.connect-guide-content { padding: 26px; }
.connect-guide-kicker {
  color: #b087b1;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.connect-guide-content h2 { margin: 8px 0 18px; color: #fff; font-size: 25px; }
.connect-guide-content ol { margin: 0; padding-left: 22px; color: #bbb; line-height: 1.55; }
.connect-guide-content li { padding: 4px 0 4px 6px; }
.connect-guide-content strong { color: #fff; }
.connect-guide-note {
  margin: 18px 0 0;
  padding: 10px 12px;
  color: #d3bed4;
  background: rgba(102, 65, 103, 0.22);
  border-left: 2px solid #805582;
  font-size: 13px;
}
.connect-guide-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.connect-guide-actions button {
  padding: 8px 15px;
  color: #ddd;
  background: #333;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
}
.connect-guide-actions button:hover { background: #3d3d3d; }
.connect-guide-actions button.primary { color: #fff; background: #664167; border-color: #805582; }
.connect-guide-actions button.primary:hover { background: #805582; }

aside {
  grid-area: aside;
  background: #252526;
  border-right: 1px solid #333;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pane-head {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  background: #252526;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}
.pane-head .spacer { flex: 1; }
.pane-head button {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
  padding: 1px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.pane-head button:hover { background: #333; color: #fff; }

#files { list-style: none; margin: 0; padding: 4px 0; }
#files li {
  padding: 4px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  user-select: none;
}
#files li:hover { background: #2a2d2e; }
#files li.active { background: #094771; }
#files li .del {
  background: transparent;
  color: #888;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  visibility: hidden;
  font-size: 14px;
}
#files li:hover .del { visibility: visible; }
#files li .del:hover { color: #f87171; }

main { grid-area: main; overflow: hidden; }

footer {
  grid-area: footer;
  background: #1e1e1e;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#log {
  margin: 0;
  padding: 8px 10px;
  flex: 1;
  overflow-y: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}
#log .sent { color: #4ade80; }
#log .err  { color: #f87171; }
#log .info { color: #fbbf24; }

#console-input {
  flex-shrink: 0;
  background: #1e1e1e;
  color: #ddd;
  border: none;
  border-top: 1px solid #333;
  padding: 6px 10px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  outline: none;
}
#console-input:focus { background: #252526; }
#console-input:disabled { opacity: 0.5; cursor: not-allowed; }

#files li.no-push span:first-child { opacity: 0.55; font-style: italic; }
#files li.no-push::after {
  content: "local";
  font-size: 9px;
  text-transform: uppercase;
  color: #666;
  margin-right: 4px;
  letter-spacing: 0.05em;
}

#hint {
  grid-area: hint;
  font-size: 11px;
  color: #888;
  padding: 6px 12px;
  background: #252526;
  border-top: 1px solid #333;
}
#hint code { background: #1e1e1e; padding: 1px 5px; border-radius: 3px; color: #ccc; }

#icon-panel {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #333;
}
#icon-preview {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  background: repeating-conic-gradient(#2a2d2e 0% 25%, #222 0% 50%) 0 0 / 16px 16px;
  border: 1px solid #444;
  border-radius: 4px;
}
#icon-meta { font-size: 12px; color: #aaa; word-break: break-all; }
#icon-meta .fallback { color: #888; }
.icon-row { display: flex; align-items: center; gap: 8px; }
.icon-upload {
  background: #0e639c;
  color: white;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
.icon-upload:hover { background: #1177bb; }
#icon-remove {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}
#icon-remove:hover { color: #f87171; border-color: #f87171; }
.icon-hint { font-size: 11px; color: #888; line-height: 1.5; }
.icon-hint code { background: #1e1e1e; padding: 1px 5px; border-radius: 3px; color: #ccc; }