:root {
  --bg: #0d0e12; --panel: #16171d; --line: #26282f; --text: #d8d9e0;
  --muted: #8b8e98; --accent: #4d8eff; --green: #4fbf7a; --red: #ff6b7a;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column;
       font: 14px -apple-system, system-ui, "Segoe UI", sans-serif;
       background: var(--bg); color: var(--text); }

/* ---- top bar ---- */
header { display: flex; align-items: center; gap: 4px; padding: 0 16px;
         min-height: 52px; flex-wrap: wrap; background: var(--panel);
         border-bottom: 1px solid var(--line); flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 9px; font-size: 17px;
        font-weight: 650; margin-right: 18px; letter-spacing: .2px;
        white-space: nowrap; }
.logo img { width: 30px; height: 30px; }
.logo .accent { color: var(--accent); margin-left: 3px; }
nav { display: flex; gap: 2px; height: 52px; }
nav button { background: none; border: none; border-bottom: 2px solid transparent;
             color: var(--muted); padding: 0 13px; font-size: 13.5px;
             cursor: pointer; height: 100%; }
nav button:hover { color: var(--text); }
nav button.active { color: var(--text); border-bottom-color: var(--accent); }
.spacer { flex: 1; }
select { background: var(--bg); color: var(--text); border: 1px solid var(--line);
         border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.conn { display: flex; align-items: center; gap: 6px; margin-left: 14px;
        font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.dot.ok { background: var(--green); }

/* ---- layout ---- */
main { display: flex; flex: 1; min-height: 0; }
aside { width: 250px; flex-shrink: 0; background: var(--panel);
        border-right: 1px solid var(--line); padding: 14px;
        overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
iframe { flex: 1; border: 0; background: var(--bg); }

/* ---- sidebar ---- */
h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
     letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.sym { display: flex; align-items: center; gap: 8px; padding: 5px 6px;
       border-radius: 6px; }
.sym:hover { background: #1d1f26; }
.sym label { flex: 1; cursor: pointer; display: flex; align-items: center;
             gap: 8px; min-width: 0; }
.sym .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym input[type=checkbox] { accent-color: var(--accent); }
.age { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* always clickable (hover doesn't exist on touch devices), subtle until hover */
.x { background: none; border: none; color: var(--muted); cursor: pointer;
     font-size: 14px; padding: 0 4px; border-radius: 4px; opacity: .35; }
.sym:hover .x, .x:hover { opacity: 1; }
.x:hover { color: var(--red); }

.addrow { display: flex; gap: 6px; }
.addrow input { flex: 1; min-width: 0; background: var(--bg); color: var(--text);
                border: 1px solid var(--line); border-radius: 6px;
                padding: 7px 9px; font-size: 13px; }
.addrow input:focus { outline: none; border-color: var(--accent); }
.addrow button { background: var(--accent); color: #fff; border: 0;
                 border-radius: 6px; padding: 7px 12px; font-size: 13px;
                 cursor: pointer; }
.addrow button:hover { filter: brightness(1.1); }
#msg { font-size: 12.5px; min-height: 30px; line-height: 1.35; margin-top: 10px; }
#msg.err { color: var(--red); } #msg.ok { color: var(--green); }

.pairs { display: none; flex-direction: column; gap: 6px; }
.pairs.visible { display: flex; }
.pairs select { width: 100%; }

/* ---- custom panel grid ---- */
#customview { flex: 1; min-width: 0; display: none; flex-direction: column; }
#customview.visible { display: flex; }
iframe#frame.hidden, select.hidden { display: none; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
           background: var(--panel); border-bottom: 1px solid var(--line); }
.toolbar button { background: var(--accent); color: #fff; border: 0;
                  border-radius: 6px; padding: 6px 12px; font-size: 13px;
                  cursor: pointer; }
.toolbar .hint { color: var(--muted); font-size: 12px; margin-left: 10px; }
#grid { flex: 1; overflow: auto; padding: 12px; display: flex; flex-wrap: wrap;
        gap: 12px; align-content: flex-start; }
.tile { display: flex; flex-direction: column; width: 560px; height: 340px;
        min-width: 260px; min-height: 180px; resize: both; overflow: hidden;
        background: var(--panel); border: 1px solid var(--line);
        border-radius: 8px;
        padding-bottom: 12px; /* keeps the native resize corner clear of the iframe */ }
.tilehead { display: flex; align-items: center; height: 30px; flex-shrink: 0;
            padding: 0 6px 0 11px; font-size: 12.5px; color: var(--muted);
            border-bottom: 1px solid var(--line); }
.tilehead span { flex: 1; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.tilehead .x { opacity: 1; }
.tile iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
footer { margin-top: auto; font-size: 11.5px; color: var(--muted);
         line-height: 1.5; }
footer a { color: var(--accent); text-decoration: none; }