/* === ANCIENT SECTION === */

@font-face {
    font-family: "Ancient";
    src: url("/gatelist/fonts/ancient.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.ancient-section {
    font-family: "Ancient";
    font-size: 20px;
    margin-top: 60px;
    line-height: 1.6;
    color: rgba(255,204,0,.4);
    letter-spacing: 1px;
}

/* === RESET === */
*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === COLORS === */
:root {
    --c:   #00f5ff;
    --m:   #ff00aa;
    --g:   #00ff88;
    --r:   #ff2244;
    --y:   #ffcc00;
    --bg:  #020608;
    --bg2: #050d10;
    --bg3: #0a1a1f;
    --bd:  #0d3040;
    --t:   #8ab8c0;
    --th:  #c8eef5;

    /* Teal-Palette (Map + Additions) */
    --teal:      #03a58f;
    --teal-dim:  rgba(3,165,143,.33);
    --bg-card:   #041a16;
    --border:    rgba(3,165,143,.25);
    --text:      #8efde8;
    --text-dim:  rgba(3,165,143,.6);
}

/* === GLOBAL === */
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--t);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    overflow: hidden;
}

/* Scanline Overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.15) 2px,
        rgba(0,0,0,.15) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Grid Overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* === TOPBAR === */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 52px;
    background: rgba(2,6,8,.97);
    border-bottom: 1px solid var(--bd);
    position: relative;
}
.topbar::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c), var(--m), transparent);
    animation: glow 4s linear infinite;
}
@keyframes glow {
    0%   { opacity: .4; }
    50%  { opacity: 1;  }
    100% { opacity: .4; }
}

/* === LOGO === */
.logo {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--c);
    text-shadow: 0 0 18px var(--c);
    animation: glitch 7s infinite;
}
.logo em {
    color: var(--m);
    font-style: normal;
    text-shadow: 0 0 18px var(--m);
}
@keyframes glitch {
    0%,94%,100% { text-shadow: 0 0 18px var(--c); transform: none; }
    95%          { transform: translate(-2px,0); text-shadow:  2px 0 var(--m), -2px 0 var(--c); }
    96%          { transform: translate( 2px,0); text-shadow: -2px 0 var(--m),  2px 0 var(--c); }
    97%          { transform: none; }
}

/* === TOPBAR RIGHT === */
.topbar-r {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 11px;
}

.dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--g);
    box-shadow: 0 0 8px var(--g);
    animation: pulse 2s ease-in-out infinite;
    margin-right: 5px;
}
@keyframes pulse {
    0%,100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .5; transform: scale(.8); }
}

#syncLbl {
    color: var(--t);
    font-size: 10px;
}

/* === CLOCKS === */
.clocks { display: flex; gap: 14px; }
.ck     { display: flex; flex-direction: column; align-items: flex-end; }
.ck-lbl { font-size: 8px; letter-spacing: 2px; opacity: .6; }
.ck-val { font-size: 11px; letter-spacing: 2px; }
#ck-sl    { color: var(--c); }
#ck-local { color: var(--y); }

/* === LAYOUT === */
.layout {
    display: grid;
    grid-template-columns: 10% 90%;
    height: calc(100vh - 52px);
}

/* === NAV LEFT === */
.nav-left {
    background: rgba(5,13,16,.98);
    border-right: 1px solid var(--bd);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-left .btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
}

.nav-left .btn.active {
    background: var(--teal) !important;
    color: #000 !important;
    border-color: var(--teal) !important;
}

.nav-btn {
    padding: 10px 14px;
    background: rgba(0,245,255,.05);
    border: 1px solid rgba(0,245,255,.15);
    border-radius: 4px;
    color: var(--th);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
}
.nav-btn:hover {
    background: rgba(0,245,255,.12);
    border-color: rgba(0,245,255,.4);
    color: var(--c);
    box-shadow: 0 0 10px rgba(0,245,255,.2);
}

.nav-bottom         { margin-top: auto; }
.nav-left-secondary { margin-top: 15px; padding-top: 10px; }

.nav-separator {
    width: 100%;
    height: 1px;
    background: #0af;
    margin: 15px 0;
    opacity: .4;
}

/* === MAIN === */
.main {
    background: rgba(0,10,12,.65);
    border: 1px solid rgba(3,165,143,.33);
    box-shadow: 0 0 25px rgba(3,165,143,.2), inset 0 0 15px rgba(3,165,143,.13);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 22px;
    margin: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.main::-webkit-scrollbar       { width: 4px; }
.main::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

.iframe-panel {
    background: linear-gradient(135deg, #021010aa, #001a1faa);
    border: 1px solid rgba(3,165,143,.53);
    border-radius: 10px;
    box-shadow:
        0 0 12px rgba(3,165,143,.33),
        0 0 40px rgba(3,165,143,.13),
        inset 0 0 25px rgba(3,165,143,.2);
    backdrop-filter: blur(6px);
    padding: 0;
    margin: 12px;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* === PAGE HEADER === */
.ph{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.psub{font-size:10px;color:var(--t);letter-spacing:2px;margin-top:3px}
.pactions{display:flex;gap:8px;flex-wrap:wrap}
.tag-live{font-size:9px;padding:2px 7px;border-radius:2px;letter-spacing:2px;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);color:var(--g)}
.tag-live::before{content:"● ";animation:pulse 1s infinite}

/* === PAGE TITLE === */
.ptitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--th);
    letter-spacing: 3px;
}
.ptitle span {
    color: var(--c);
    text-shadow: 0 0 12px rgba(0,245,255,.5);
}
.small {
    font-size: 10px;
    letter-spacing: 2px;
}

/* === DEVICE STATS === */
.device-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
    width: 100%;
}

.stat-box {
    background: #0a0f18;
    border: 1px solid rgba(0,255,136,.3);
    padding: 12px 18px;
    border-radius: 6px;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 0 10px rgba(0,175,255,.2);
    transition: box-shadow .25s;
}
.stat-box:hover {
    box-shadow: 0 0 18px rgba(0,245,255,.3);
}

.stat-num {
    font-size: 28px;
    font-weight: bold;
    color: rgba(0,255,136,.6);
    font-family: 'Share Tech Mono', monospace;
    transition: color .3s;
}
.stat-label {
    font-size: 12px;
    color: #7ddfff;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === GATE SEARCH === */
#gateSearch {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,245,255,.04);
    border: 1px solid var(--bd);
    border-radius: 4px;
    color: var(--th);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    outline: none;
    letter-spacing: 1px;
    transition: border-color .2s, box-shadow .2s;
}
#gateSearch::placeholder { color: var(--t); opacity: .5; }
#gateSearch:focus {
    border-color: var(--c);
    box-shadow: 0 0 10px rgba(0,245,255,.25);
}

/* === TABLE === */
.dscroll {
    overflow-x: auto;
    overflow-y: auto;
}
.dscroll::-webkit-scrollbar        { width: 4px; height: 4px; }
.dscroll::-webkit-scrollbar-thumb  { background: var(--bd); border-radius: 2px; }

table.dt {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.dt thead {
    background: rgba(0,0,0,.3);
    position: sticky;
    top: 0;
    z-index: 2;
}

.dt th {
    padding: 9px 12px;
    text-align: left;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--t);
    border-bottom: 1px solid var(--bd);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: color .2s;
}
.dt th:hover { color: var(--c); }

/* Sortierpfeil */
.dt th[data-col]::after         { content: " ⇅"; opacity: .3; font-size: .85em; }
.dt th[data-col][data-sort="asc"]::after  { content: " ↑"; opacity: 1; color: var(--c); }
.dt th[data-col][data-sort="desc"]::after { content: " ↓"; opacity: 1; color: var(--c); }

.dt td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(13,48,64,.5);
    color: var(--t);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

.dt tbody tr { transition: background .15s; cursor: pointer; }
.dt tbody tr:hover    { background: rgba(0,245,255,.04); }
.dt tbody tr:hover td { color: var(--th); }

/* === BADGES === */
.badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    min-width: 70px;
}

/* idle */
.bi {
    background: rgba(1,106,133,.6);
    border: 1px solid rgba(4,234,241,.95);
    color: var(--g);
}
/* locked / shielded */
.bb {
    background: rgba(255,0,170,.15);
    border: 1px solid rgba(255,0,170,.4);
    color: var(--m);
}
/* unknown */
.bh {
    background: rgba(0,255,136,.1);
    border: 1px solid rgba(0,255,136,.3);
    color: var(--g);
}
/* red */
.br {
    background: rgba(255,34,68,.1);
    border: 1px solid rgba(255,34,68,.4);
    color: var(--r);
}

/* locked pulsiert */
.badge.locked-pulse {
    animation: lockedPulse 1.2s ease-in-out infinite;
}
@keyframes lockedPulse {
    0%,100% { box-shadow: 0 0 4px currentColor;  opacity: 1;    }
    50%     { box-shadow: 0 0 14px currentColor; opacity: .7; }
}

.badge-admin { background: rgba(255,0,170,.15); border: 1px solid rgba(255,0,170,.4); color: var(--m); }
.badge-trust { background: rgba(0,255,136,.1);  border: 1px solid rgba(0,255,136,.3); color: var(--g); }
.badge-user  { background: rgba(1,106,133,.6);  border: 1px solid rgba(4,234,241,.95); color: var(--c); }

/* === TABLE HEADER NAME-BTN === */
.name-btn {
    background: none;
    border: none;
    color: var(--y);
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    transition: text-shadow .2s;
    white-space: nowrap;
    text-align: left;
}
.name-btn:hover {
    text-shadow: 0 0 10px var(--y);
    text-decoration: underline;
}

/* === SKELETON LOADER === */
.skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}
.skeleton-line {
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--bg2) 25%,
        rgba(3,165,143,.15) 50%,
        var(--bg2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w50 { width: 50%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w80 { width: 80%; }
@keyframes shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* === STATUS CHART === */
#statusChart {
    width: 100%;
    height: 80px;
    display: block;
    margin-top: 12px;
    border-top: 1px solid var(--bd);
    padding-top: 8px;
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}

/* === MODAL BACKDROP === */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9000;
}

/* === MODAL BOX === */
.modal-box {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    max-width: 95vw;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,245,255,.15);
    z-index: 9010;
    animation: fadeIn .2s ease;
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bd);
    background: rgba(0,0,0,.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--c);
}

.modal-close {
    background: none;
    border: none;
    color: var(--t);
    font-size: 20px;
    cursor: pointer;
    transition: color .2s;
}
.modal-close:hover { color: var(--r); }

.modal-body {
    padding: 16px;
    max-height: 420px;
    overflow-y: auto;
    color: var(--th);
}
.modal-body::-webkit-scrollbar       { width: 3px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--bd); }

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0);     }
}

/* === GATE DETAIL === */
.gate-detail p {
    margin-bottom: 7px;
    font-size: 12px;
    line-height: 1.6;
}
.gate-detail strong {
    color: var(--t);
    letter-spacing: 1px;
    margin-right: 6px;
}

/* === LOGS / TIMELINE === */
.loglist {
    margin: 5px 0 0 0;
    padding-left: 15px;
    font-size: 13px;
    color: var(--c);
}
.loglist li { margin-bottom: 6px; }

.timeline {
    margin-top: 10px;
    border-left: 2px solid #0af;
    padding-left: 12px;
}
.t-item {
    position: relative;
    margin-bottom: 12px;
    padding-left: 10px;
}
.t-dot {
    width: 10px; height: 10px;
    background: #0af;
    border-radius: 50%;
    position: absolute;
    left: -17px; top: 3px;
}
.t-item.in  .t-dot { background: #eb0234; }
.t-item.out .t-dot { background: #05e2d0; }
.t-line {
    position: absolute;
    left: -12px; top: 18px;
    width: 2px; height: 20px;
    background: #044;
}
.t-info { font-size: 13px; color: var(--c); }
.t-time { opacity: .8; }
.t-dir  { font-weight: bold; }

.addrIcon {
    width: 22px; height: 22px;
    margin-right: 4px;
    vertical-align: middle;
    filter: drop-shadow(0 0 4px var(--c));
}

/* === INPUTS === */
.finp {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0,245,255,.05);
    border: 1px solid var(--bd);
    border-radius: 4px;
    color: var(--th);
    font-family: 'Share Tech Mono', monospace;
    transition: all .2s;
}
.finp:focus {
    border-color: var(--c);
    box-shadow: 0 0 10px rgba(0,245,255,.3);
    outline: none;
}
.dt td .finp { width: 100%; max-width: 180px; }

.fsel {
    width: 100%;
    padding: 8px 10px;
    background: #050d10;
    border: 1px solid var(--bd);
    border-radius: 4px;
    color: var(--th);
    font-family: 'Share Tech Mono', monospace;
    transition: all .2s;
}
.fsel:focus {
    border-color: var(--c);
    box-shadow: 0 0 10px rgba(0,245,255,.3);
    outline: none;
}
.fsel option { background: #050d10; color: var(--th); }

/* === BUTTONS === */
.btn {
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
    border: 1px solid transparent;
    transition: all .2s;
}
.bc { background: rgba(0,245,255,.1);  border-color: rgba(0,245,255,.4); color: var(--c); }
.bc:hover { background: rgba(0,245,255,.2); box-shadow: 0 0 10px rgba(0,245,255,.4); }

.bp { background: rgba(140,0,255,.1); border-color: rgba(140,0,255,.4); color: #c060ff; }
.bp:hover,.bp.on { background: rgba(0,255,136,.1); border-color: rgba(0,255,136,.4); color: var(--g); box-shadow: 0 0 10px rgba(0,255,136,.2); }
.by { background: rgba(255,204,0,.1);  border-color: rgba(255,204,0,.4); color: var(--y); }
.by:hover { background: rgba(255,204,0,.2); box-shadow: 0 0 10px rgba(255,204,0,.4); }

.btn.br { background: rgba(255,34,68,.1);  border-color: rgba(255,34,68,.4); color: var(--r); padding: 7px 12px; margin-top: 10px; }
.btn.br:hover { background: rgba(255,34,68,.2); box-shadow: 0 0 10px rgba(255,34,68,.4); }

.bg { background: rgba(2,145,33,.5);  border-color: rgba(10,241,29,.4); color: var(--g); }
.bg:hover { background: rgba(10,241,29,.4); box-shadow: 0 0 10px rgba(2,145,33,.5); }

/* === CHECKBOXES === */
.perm-chk {
    width: 16px; height: 16px;
    appearance: none;
    border: 1px solid var(--bd);
    background: rgba(0,245,255,.05);
    cursor: pointer;
    border-radius: 3px;
    transition: all .2s;
    position: relative;
}
.perm-chk:hover          { border-color: var(--c); box-shadow: 0 0 6px var(--c); }
.perm-chk:checked        { background: var(--c); border-color: var(--c); box-shadow: 0 0 8px var(--c); }
.perm-chk:checked::after { content: "✔"; color: #000; font-size: 12px; position: absolute; left: 2px; top: -1px; }

/* === FORM === */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0,245,255,.03);
    padding: 8px;
    border: 1px solid var(--bd);
    border-radius: 4px;
}
.perm-box { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* === GRID === */
.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
    background: linear-gradient(135deg, #021010aa, #001a1faa);
    border: 1px solid rgba(3,165,143,.53);
    border-radius: 10px;
    box-shadow:
        0 0 12px rgba(3,165,143,.33),
        0 0 40px rgba(3,165,143,.13),
        inset 0 0 25px rgba(3,165,143,.2);
    backdrop-filter: blur(6px);
    padding: 20px;
    margin: 12px;
}

/* === PANEL === */
.panel {
    background: rgba(0,20,30,.55);
    border: 1px solid rgba(0,245,255,.25);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 14px rgba(0,245,255,.12);
    overflow: hidden;
    transition: .25s ease;
}
.panel:hover {
    box-shadow: 0 0 22px rgba(0,245,255,.28);
    transform: translateY(-2px);
}

.pnl-hdr {
    background: rgba(0,245,255,.08);
    border-bottom: 1px solid rgba(0,245,255,.25);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
}
.pnl-ttl { font-size: 19px; color: var(--c); letter-spacing: 1px; }

/* === REGION BADGES === */
.region-badge   { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }
.region-online  { background: rgba(0,255,180,.15); border: 1px solid rgba(0,255,180,.4);  color: #00ffb4; }
.region-offline { background: rgba(255,0,60,.15);  border: 1px solid rgba(255,0,60,.4);   color: #ff003c; }
.region-degraded{ background: rgba(255,200,0,.15); border: 1px solid rgba(255,200,0,.4);  color: #ffcc00; }
.region-degraded-glow { box-shadow: 0 0 22px rgba(255,200,0,.35); }

.region-item {
    background: rgba(0,20,22,.6);
    border: 1px solid rgba(3,165,143,.33);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 0 10px rgba(3,165,143,.2), inset 0 0 10px rgba(3,165,143,.13);
    backdrop-filter: blur(4px);
    transition: .2s ease;
}
.region-item:hover {
    box-shadow: 0 0 15px rgba(3,165,143,.53), inset 0 0 15px rgba(3,165,143,.27);
    transform: translateY(-2px);
}

/* === CANVAS === */
canvas {
    background: rgba(0,245,255,.05);
    border: 1px solid rgba(0,245,255,.25);
    border-radius: 4px;
    margin-top: 6px;
}

/* === UNIVERSE === */
.universe-canvas {
    width: 100%;
    height: 700px;
    background: radial-gradient(circle at center, #041014, #020608 70%);
    border: 1px solid var(--bd);
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,245,255,.1);
    cursor: grab;
}
.universe-canvas:active { cursor: grabbing; }
.universe-frame { color: white; width: 100%; height: 90vh; border: none; }

/* === RELOAD INDICATOR === */
.reload-indicator {
    position: fixed;
    top: 20px; right: 20px;
    padding: 6px 12px;
    background: rgba(0,245,255,.1);
    border: 1px solid rgba(0,245,255,.4);
    color: var(--c);
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 9999;
}
.reload-indicator.show { opacity: 1; }

/* === ERROR OVERLAY === */
.error-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,0,60,.15);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.error-box {
    background: rgba(40,0,20,.8);
    border: 1px solid rgba(255,0,60,.5);
    padding: 22px 32px;
    border-radius: 6px;
    color: #ff003c;
    font-size: 16px;
    text-align: center;
    max-width: 420px;
}

/* === LOGIN MODAL === */
#loginModal         { position: fixed; bottom: 20px; right: 20px; margin: 0; z-index: 9999; }
#loginModalBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9990; }

/* =========================================================
   DHD — Dialing Computer
   Ergänzungen für styles.css
   ========================================================= */

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.dhd-header {
    margin-bottom: 18px;
}

.dhd-subtitle {
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text-dim, #03a58f66);
    margin-top: 4px;
    font-family: 'Share Tech Mono', monospace;
}

/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */
.dhd-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.dhd-left  { flex: 0 0 auto; }
.dhd-right {
    flex: 1;
    min-width: 220px;
    background: rgba(0, 10, 12, 0.6);
    border: 1px solid var(--bd);
    border-radius: 6px;
    padding: 14px;
    height: 650px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 0 20px rgba(3,165,143,.08);
}

/* ---------------------------------------------------------
   ADRESS-DISPLAY (6 Slots)
   --------------------------------------------------------- */
.dhd-display {
    margin-bottom: 16px;
    text-align: center;
}

.dhd-slots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dhd-slot {
    width: 44px;
    height: 44px;
    border: 1px solid var(--bd);
    border-radius: 4px;
    background: rgba(0,245,255,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}

.dhd-slot.filled {
    border-color: var(--teal, #03a58f);
    background: rgba(3,165,143,.12);
    box-shadow: 0 0 10px rgba(3,165,143,.3);
}

.dhd-slot.filled::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3,165,143,.15) 0%, transparent 60%);
}

.dhd-slot-inner {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--t);
    z-index: 1;
}

.dhd-slot.filled .dhd-slot-inner {
    color: var(--teal, #03a58f);
    font-weight: bold;
}

/* Slot-Bild wenn Symbol gewählt */
.dhd-slot img {
    width: 28px;
    height: 28px;
    filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(600%)
            hue-rotate(130deg) brightness(90%) contrast(90%);
    z-index: 1;
}

.dhd-display-label {
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--text-dim, #03a58f66);
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   KREIS
   --------------------------------------------------------- */
.dhd-circle {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    transform: rotate(-90deg);
}

/* ---------------------------------------------------------
   SYMBOL-BUTTONS
   --------------------------------------------------------- */
.dhd-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: transparent;
    color: rgba(255,204,0,.4);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    padding: 0;
}

.dhd-btn img {
    width: 25px;
    height: 25px;
    filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(600%)
            hue-rotate(130deg) brightness(90%) contrast(90%);
    transition: filter .15s, transform .15s;
    pointer-events: none;
}

.dhd-btn-num {
    display: none; /* versteckt — nur im Hover sichtbar */
    font-size: 8px;
    pointer-events: none;
}

.dhd-btn:hover {
    border-color: var(--teal, #03a58f);
    background: rgba(3,165,143,.12);
    box-shadow: 0 0 8px rgba(3,165,143,.4);
}

.dhd-btn:hover img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(500%)
            hue-rotate(130deg) brightness(110%) contrast(100%);
    transform: scale(1.15);
}

/* Aktiver Zustand — Symbol ist in der Adresse */
.dhd-btn.active {
    border-color: var(--y, #ffcc00);
    background: rgba(255,204,0,.12);
    box-shadow: 0 0 12px rgba(255,204,0,.4);
}

.dhd-btn.active img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(90%) saturate(400%)
            hue-rotate(10deg) brightness(110%) contrast(100%);
}

/* ---------------------------------------------------------
   WORMHOLE
   --------------------------------------------------------- */
.wormhole {
    position: absolute;
    top: 50%; left: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #0a1a1f 0%, #000 70%);
    box-shadow: 0 0 25px rgba(3,165,143,.3);
    transition: all .4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wormhole-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(3,165,143,.2);
    transition: all .4s ease;
}
.wormhole-ring.r1 { width: 260px; height: 260px; }
.wormhole-ring.r2 { width: 200px; height: 200px; border-color: rgba(3,165,143,.15); }
.wormhole-ring.r3 { width: 140px; height: 140px; border-color: rgba(3,165,143,.1); }

/* Aktives Wurmloch */
.wormhole.active {
    background: radial-gradient(circle, #02978388 0%, #001a1f 55%, #000 75%);
    box-shadow:
        0 0 40px rgba(3,165,143,.7),
        0 0 80px rgba(3,165,143,.4),
        inset 0 0 40px rgba(3,165,143,.3);
    animation: wormholePulse 1.5s ease-in-out infinite;
}

.wormhole.active .wormhole-ring {
    animation: ringExpand 2s ease-in-out infinite;
    border-color: rgba(3,165,143,.5);
}
.wormhole.active .r2 { animation-delay: .3s; }
.wormhole.active .r3 { animation-delay: .6s; }

@keyframes wormholePulse {
    0%,100% { box-shadow: 0 0 40px rgba(3,165,143,.7), 0 0 80px rgba(3,165,143,.4); }
    50%      { box-shadow: 0 0 60px rgba(3,165,143,.9), 0 0 120px rgba(3,165,143,.6); }
}

@keyframes ringExpand {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.05); opacity: .6; }
}

/* ---------------------------------------------------------
   CONTROLS
   --------------------------------------------------------- */
.dhd-controls {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.dhd-controls .btn {
    padding: 7px 16px;
    font-size: 12px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-icon { font-size: 14px; line-height: 1; }

/* Admin-Controls */
.dhd-admin-controls {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bd);
    margin-top: 12px;
}

.dhd-admin-label {
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text-dim, #03a58f66);
    width: 100%;
    text-align: center;
}

.dhd-admin-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------------------------------------------------------
   RECHTE SEITE — Gate-Liste
   --------------------------------------------------------- */
.dhd-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.dhd-right-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--teal, #03a58f);
}

.dhd-gate-count {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim, #03a58f66);
    font-family: 'Share Tech Mono', monospace;
}

/* Suchfeld */
.dhd-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,245,255,.04);
    border: 1px solid var(--bd);
    border-radius: 4px;
    color: var(--th);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    padding: 7px 10px;
    outline: none;
    letter-spacing: 1px;
    transition: border-color .2s, box-shadow .2s;
    flex-shrink: 0;
}
.dhd-search::placeholder { color: var(--t); opacity: .4; }
.dhd-search:focus {
    border-color: var(--c);
    box-shadow: 0 0 8px rgba(0,245,255,.2);
}

/* Liste */
.dhd-gate-list {
    flex: 1;
    overflow-y: auto;
}
.dhd-gate-list::-webkit-scrollbar       { width: 3px; }
.dhd-gate-list::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

/* Gate-Eintrag */
.dhd-gate-item {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(13,48,64,.6);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}
.dhd-gate-item:hover {
    background: rgba(0,245,255,.05);
}
.dhd-gate-item:hover .dhd-gate-name {
    color: var(--th);
}

.dhd-gate-name {
    font-size: 11px;
    color: var(--t);
    letter-spacing: 1px;
    transition: color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dhd-gate-addr {
    font-size: 10px;
    color: var(--teal, #03a58f);
    font-family: 'Share Tech Mono', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

.dhd-gate-status {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dhd-gate-status.idle   { background: var(--g); box-shadow: 0 0 4px var(--g); }
.dhd-gate-status.locked { background: var(--m); box-shadow: 0 0 4px var(--m); animation: lockedPulse 1.2s infinite; }
.dhd-gate-status.other  { background: var(--t); }

/* Loading Dots */
.dhd-loading {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 20px;
}
.dhd-loading-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal, #03a58f);
    animation: dotBlink 1.2s ease-in-out infinite;
}
.dhd-loading-dot:nth-child(2) { animation-delay: .2s; }
.dhd-loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink {
    0%,100% { opacity: .2; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1.2); }
}

/* Kein Ergebnis */
.dhd-no-results {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: var(--text-dim, #03a58f66);
    letter-spacing: 2px;
}

/* ── Pager ─────────────────────────────────────────────────── */
.pager{padding:10px 18px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--t)}
.pager-btns{display:flex;gap:3px;flex-wrap:wrap}
.pbtn{padding:3px 9px;background:var(--bg3);border:1px solid var(--bd);color:var(--t);border-radius:2px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:11px;transition:all .15s}
.pbtn:hover,.pbtn.active{border-color:rgba(0,245,255,.4);color:var(--c);background:rgba(0,245,255,.08)}

/* ── Data Table extras ─────────────────────────────────────── */
.cell-edit{background:rgba(0,245,255,.07)!important;outline:1px solid rgba(0,245,255,.4)!important;border-radius:2px}
.dctrl{padding:11px 18px;border-bottom:1px solid var(--bd);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sw{position:relative;flex:1}
.sw::before{content:"⌕";position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--c);font-size:15px;pointer-events:none}
.sinput{width:100%;padding:7px 10px 7px 30px;background:var(--bg3);border:1px solid var(--bd);border-radius:3px;color:var(--th);font-family:'Share Tech Mono',monospace;font-size:12px;outline:none;transition:border-color .2s}
.sinput:focus{border-color:rgba(0,245,255,.4);box-shadow:0 0 0 1px rgba(0,245,255,.1)}.sinput::placeholder{color:rgba(138,184,192,.3)}
select.sel{padding:7px 9px;background:var(--bg3);border:1px solid var(--bd);border-radius:3px;color:var(--t);font-family:'Share Tech Mono',monospace;font-size:11px;outline:none;cursor:pointer}
.badge-bot-sm{font-size:9px;padding:1px 6px;border-radius:2px;background:rgba(255,0,170,.15);border:1px solid rgba(255,0,170,.4);color:var(--m);letter-spacing:2px}
.badge-hum-sm{font-size:9px;padding:1px 6px;border-radius:2px;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);color:var(--g);letter-spacing:2px}
.rlink{color:var(--c);text-decoration:none;font-size:10px;display:block;padding:1px 0}.rlink:hover{text-shadow:0 0 6px var(--c);text-decoration:underline}

/* ── Avatar Profile Modal ──────────────────────────────────── */
#avModalBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998}
#avModalBackdrop.open{display:block}
#avProfileModal{display:none;position:fixed;z-index:9999;top:80px;left:50%;transform:translateX(-50%);width:480px;max-width:95vw;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;box-shadow:0 0 40px rgba(0,245,255,.15);animation:fadeInDt .2s ease;user-select:none}
#avProfileModal.open{display:block}
#avProfileModal::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--c);border-left:2px solid var(--c);pointer-events:none}
#avProfileModal::after{content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:2px solid var(--c);border-right:2px solid var(--c);pointer-events:none}
@keyframes fadeInDt{from{opacity:0;transform:translateX(-50%) translateY(-8px)}}
.modal-drag{padding:10px 16px;background:rgba(0,245,255,.06);border-bottom:1px solid var(--bd);cursor:grab;display:flex;align-items:center;justify-content:space-between;border-radius:8px 8px 0 0}
.modal-drag:active{cursor:grabbing}
.modal-drag-title{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:var(--t)}
.modal-hdr{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.25)}
.modal-pic{width:72px;height:72px;border-radius:4px;object-fit:cover;border:1px solid var(--bd);flex-shrink:0;background:var(--bg3)}
.modal-avname{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:var(--th);letter-spacing:2px}
.modal-uuid{font-size:9px;color:var(--t);margin-top:4px;word-break:break-all;letter-spacing:1px}
.modal-body{padding:14px 16px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column}
.modal-body::-webkit-scrollbar{width:3px}.modal-body::-webkit-scrollbar-thumb{background:var(--bd)}
.mrow{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid rgba(13,48,64,.5);font-size:11px;gap:10px}
.mrow:last-child{border-bottom:none}
.mrow-lbl{color:var(--t);letter-spacing:2px;font-size:9px;text-transform:uppercase;flex-shrink:0;padding-top:1px;min-width:90px}
.mrow-val{color:var(--th);text-align:right;word-break:break-word;flex:1}

/* ── Region Health ─────────────────────────────────────────── */
.rh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rh-card{background:var(--bg2);border:1px solid var(--bd);border-radius:6px;overflow:hidden;transition:border-color .3s,background .3s;position:relative}
.rh-card:hover{border-color:rgba(0,245,255,.25)}
.rh-card.lagging{border-color:rgba(255,34,68,.6)!important;animation:lagPulse 1.4s ease-in-out infinite}
@keyframes lagPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,34,68,0)}50%{box-shadow:0 0 18px 3px rgba(255,34,68,.35)}}
.rh-card.offline{background:#040404!important;border-color:rgba(255,34,68,.2)!important;animation:offlineFlicker 3s linear infinite}
@keyframes offlineFlicker{0%,89%,91%,93%,100%{opacity:1}90%{opacity:.4;filter:brightness(.6) hue-rotate(10deg)}92%{opacity:.85}}
.rh-card.offline .rh-region-name{color:rgba(255,34,68,.5);animation:nameFlicker 3s linear infinite}
@keyframes nameFlicker{0%,88%,92%,95%,100%{text-shadow:none;color:rgba(255,34,68,.45)}89%{text-shadow:2px 0 rgba(255,34,68,.8),-2px 0 rgba(200,0,0,.6);color:rgba(255,34,68,.9)}91%{text-shadow:-1px 0 rgba(200,0,0,.5);color:rgba(255,34,68,.3)}94%{text-shadow:1px 0 rgba(255,34,68,.7);color:rgba(255,34,68,.7)}}
.rh-card-hdr{padding:9px 12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.3)}
.rh-region-name{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:var(--th);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;transition:color .3s}
.rh-status{font-size:9px;letter-spacing:2px;padding:2px 7px;border-radius:2px;white-space:nowrap}
.rh-ok{background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);color:var(--g)}
.rh-lagging{background:rgba(255,34,68,.12);border:1px solid rgba(255,34,68,.5);color:var(--r)}
.rh-offline{background:rgba(80,0,0,.3);border:1px solid rgba(255,34,68,.2);color:rgba(255,34,68,.5);animation:badgeFlicker 3s linear infinite}
@keyframes badgeFlicker{0%,88%,92%,100%{opacity:1}89%{opacity:.2}91%{opacity:.7}}
.rh-inline{display:flex;gap:0;border-bottom:1px solid rgba(13,48,64,.5)}
.rh-inline-m{flex:1;padding:6px 12px;display:flex;flex-direction:column;border-right:1px solid rgba(13,48,64,.5)}
.rh-inline-m:last-child{border-right:none}
.rh-m-lbl{font-size:8px;letter-spacing:2px;color:var(--t);margin-bottom:1px}
.rh-m-val{font-size:13px;font-family:'Orbitron',sans-serif;font-weight:700;line-height:1.2}
.rh-bar-wrap{height:2px;background:var(--bd);border-radius:2px;margin-top:3px;overflow:hidden}
.rh-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}
.rh-bar-ok{background:var(--g)}.rh-bar-warn{background:var(--y)}.rh-bar-crit{background:var(--r)}
.rh-strip{padding:5px 12px;border-bottom:1px solid rgba(13,48,64,.5);display:flex;align-items:center;gap:8px;font-size:9px;color:var(--t);letter-spacing:.5px}
.rh-strip-lbl{flex-shrink:0;letter-spacing:1px;min-width:44px}
.rh-strip-bar{flex:1;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
.rh-strip-fill{height:100%;border-radius:2px;transition:width .6s ease}
.rh-strip-val{flex-shrink:0;min-width:42px;text-align:right}
.rh-strip-delta{flex-shrink:0;min-width:60px;text-align:right;font-family:'Orbitron',sans-serif;font-size:9px}
.rh-spark{display:block;width:100%;height:28px}
.rh-card-foot{padding:5px 12px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--t);letter-spacing:.5px;background:rgba(0,0,0,.15)}
.rh-detail-btn{background:none;border:1px solid var(--bd);color:var(--t);font-family:'Share Tech Mono',monospace;font-size:9px;padding:1px 7px;border-radius:2px;cursor:pointer;letter-spacing:1px;transition:all .15s;white-space:nowrap}
.rh-detail-btn:hover{border-color:var(--c);color:var(--c)}
.rh-no-data{padding:40px;text-align:center;font-size:11px;color:var(--t);letter-spacing:2px}
#rhModal{display:none;position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.75);align-items:center;justify-content:center}
#rhModal.open{display:flex}
.rh-modal-box{width:780px;max-width:96vw;max-height:90vh;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.rh-modal-hdr{padding:12px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.3)}
.rh-modal-title{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:3px;color:var(--c)}
.rh-modal-body{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.rh-modal-body::-webkit-scrollbar{width:3px}.rh-modal-body::-webkit-scrollbar-thumb{background:var(--bd)}
.rh-chart-wrap{background:var(--bg3);border:1px solid var(--bd);border-radius:4px;padding:10px 12px}
.rh-chart-lbl{font-size:9px;letter-spacing:2px;color:var(--t);margin-bottom:6px}
.rh-chart-canvas{display:block;width:100%;height:72px}
.rh-stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rh-stat-box{background:var(--bg3);border:1px solid var(--bd);border-radius:4px;padding:9px 12px}
.rh-stat-lbl{font-size:8px;letter-spacing:2px;color:var(--t);margin-bottom:2px}
.rh-stat-val{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;color:var(--c)}

/* ── Music Floating Panel ──────────────────────────────────── */
#musicPanel{display:none;position:fixed;bottom:24px;right:24px;z-index:8500;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;box-shadow:0 0 32px rgba(0,245,255,.12);width:820px;max-width:96vw;overflow:hidden;flex-direction:column;animation:fadeIn .2s ease}
#musicPanel.open{display:flex}
.music-modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,.4);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:var(--t);cursor:grab;user-select:none}
.music-modal-header:active{cursor:grabbing}
.music-modal-header .modal-close{background:none;border:none;color:var(--t);font-size:18px;cursor:pointer;line-height:1;padding:0 2px}.music-modal-header .modal-close:hover{color:var(--r)}
.mp-top{display:flex;align-items:stretch;gap:0;height:160px}
.mp-eq{width:220px;flex-shrink:0;position:relative;overflow:hidden;border-right:1px solid var(--bd)}
#eqCanvas{width:100%;height:100%;display:block}
.mp-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 20px;gap:6px;border-right:1px solid var(--bd);overflow:hidden}
.mp-title{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:2px;color:var(--th);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-title.marquee{animation:marquee 14s linear infinite}
@keyframes marquee{0%,10%{transform:translateX(0)}80%,90%{transform:translateX(calc(-100% + 180px))}100%{transform:translateX(0)}}
.mp-sub{font-size:9px;letter-spacing:2px;color:var(--t)}
.mp-prog-wrap{position:relative;height:3px;background:var(--bd);border-radius:2px;cursor:pointer;margin-top:6px}
.mp-prog-fill{height:100%;background:linear-gradient(90deg,var(--c),var(--m));border-radius:2px;width:0;pointer-events:none}
.mp-time{display:flex;justify-content:space-between;font-size:9px;color:var(--t);margin-top:3px}
.mp-ctrl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 20px;border-right:1px solid var(--bd)}
.mp-btns{display:flex;align-items:center;gap:8px}
.mpb{background:none;border:1px solid var(--bd);color:var(--t);border-radius:3px;cursor:pointer;font-size:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mpb:hover{border-color:var(--c);color:var(--c);background:rgba(0,245,255,.08)}
.mpb.big{width:38px;height:38px;font-size:18px;border-color:rgba(0,245,255,.4);color:var(--c)}
.mpb.big:hover{background:rgba(0,245,255,.15);box-shadow:0 0 12px rgba(0,245,255,.3)}
.mpb.on{border-color:var(--m)!important;color:var(--m)!important}
.mp-vol{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--t)}
input[type=range].vslider{-webkit-appearance:none;height:3px;background:var(--bd);border-radius:2px;outline:none;width:70px;cursor:pointer}
input[type=range].vslider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:0 0 5px var(--c)}
.mp-list{width:240px;flex-shrink:0;overflow-y:auto;border-left:1px solid var(--bd)}
.mp-list::-webkit-scrollbar{width:3px}.mp-list::-webkit-scrollbar-thumb{background:var(--bd)}
.mp-list-hdr{padding:7px 12px;font-size:8px;letter-spacing:3px;color:var(--t);border-bottom:1px solid var(--bd);background:rgba(0,0,0,.3);position:sticky;top:0}
.mp-track{padding:7px 12px;font-size:10px;color:var(--t);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid rgba(13,48,64,.3);transition:all .15s;letter-spacing:.5px}
.mp-track:hover{color:var(--th);background:rgba(0,245,255,.04)}
.mp-track.active{color:var(--c);background:rgba(0,245,255,.08);border-left:2px solid var(--c);padding-left:10px}
.mp-track.active::before{content:"▶ ";font-size:8px}
#musicNavBtn.playing .nav-icon{color:var(--g);animation:pulse 1s ease-in-out infinite}/* ── Online Monitor ── */
.om-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.om-input{background:var(--bg2);border:1px solid var(--bd);color:var(--th);padding:6px 12px;border-radius:3px;font-family:'Share Tech Mono',monospace;font-size:11px;outline:none;flex:1;min-width:180px}
.om-input:focus{border-color:var(--c)}
.om-select{background:var(--bg2);border:1px solid var(--bd);color:var(--th);padding:6px 10px;border-radius:3px;font-family:'Share Tech Mono',monospace;font-size:11px;outline:none;cursor:pointer}
.om-stats{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.om-badge{padding:3px 10px;border-radius:3px;font-size:10px;letter-spacing:1px;font-family:'Share Tech Mono',monospace}
.om-badge.om-online{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#22c55e}
.om-badge.om-offline{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#ef4444}
.om-badge.om-total{background:rgba(0,245,255,.08);border:1px solid var(--bd);color:var(--t)}
.om-table{width:100%;border-collapse:collapse;font-size:11px}
.om-table th{text-align:left;padding:8px 12px;border-bottom:1px solid var(--bd);font-size:9px;letter-spacing:2px;color:var(--t)}
.om-table td{padding:9px 12px;border-bottom:1px solid rgba(13,48,64,.5);color:var(--th);vertical-align:middle}
.om-table tr:hover td{background:rgba(0,245,255,.03)}
.om-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:3px}
.om-status.om-online{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.om-status.om-offline{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.om-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.om-status.om-online .om-dot{animation:pulse 1.5s ease-in-out infinite}
.om-name{font-family:'Share Tech Mono',monospace;font-size:12px}
.om-ts{color:var(--t);font-size:10px}
.om-link{color:var(--c);text-decoration:none;font-size:10px;letter-spacing:.5px}
.om-link:hover{text-decoration:underline}
.om-empty{color:var(--t);font-size:11px;padding:20px 0}
@keyframes omBlinkGreen{0%{background-color:rgba(34,197,94,.2)}100%{background-color:transparent}}
@keyframes omBlinkRed{0%{background-color:rgba(239,68,68,.2)}100%{background-color:transparent}}
.om-blink-green td{animation:omBlinkGreen 1.2s ease-out}
.om-blink-red   td{animation:omBlinkRed   1.2s ease-out}