/* =============================================================================
   BridgeMesh — админка.
   Единый дизайн с лендингом: mesh + cyan/green неон + glass.
   Классы (sb-nav, panel, stat-card, btn-*, chip, file-drop) сохранены —
   менять вёрстку админки не нужно.
   ============================================================================= */
:root{
    --bg:#07090F;
    --bg-2:#0B0F1B;
    --bg-3:#111827;
    --panel:#0E1424;
    --panel-2:#131B2D;
    --card:#0F1626;
    --border:rgba(255,255,255,.07);
    --border-2:rgba(255,255,255,.14);

    --text:#EEF2F8;
    --muted:#9AA7BD;
    --muted-2:#6B7689;

    --brand:#22D3EE;
    --brand-strong:#0EA5E9;
    --accent:#34D399;
    --accent-strong:#10B981;
    --danger:#FF5B6E;
    --warn:#F6C76B;
    --grad:linear-gradient(135deg,#22D3EE 0%,#34D399 100%);
    --grad-soft:linear-gradient(135deg,rgba(34,211,238,.12),rgba(52,211,153,.10));

    --e1:0 1px 2px rgba(0,0,0,.4);
    --e2:0 6px 16px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
    --e3:0 18px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
    --shadow-card:0 18px 40px -16px rgba(0,0,0,.55);

    --r-sm:12px;
    --r-md:18px;
    --r-lg:24px;
    --r-full:999px;

    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --ease-smooth:cubic-bezier(.4,0,.2,1);
    --d-base:280ms;

    --sb:260px;
    --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-head:'Unbounded',var(--font);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{min-height:100vh}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand);text-decoration:none;transition:color var(--d-base) var(--ease-smooth)}
a:hover{color:var(--accent)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.86em}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}

/* ---------- Sidebar (glass) ---------- */
.sidebar{
    width:var(--sb);
    flex:none;
    background:rgba(11,15,27,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    overflow-y:auto;
    transition:transform var(--d-base) var(--ease-spring);
}
.sb-logo{
    display:flex;align-items:center;gap:11px;
    padding:24px 22px 22px;
}
.sb-logo .logo-txt{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:.2px}
.sb-logo small{display:block;color:var(--muted-2);font-size:11px;margin-top:2px;font-family:var(--font)}
.sb-nav{display:flex;flex-direction:column;gap:3px;padding:0 12px;flex:1}
.sb-nav a{
    display:flex;align-items:center;gap:12px;
    color:var(--muted);
    padding:12px 14px;
    border-radius:var(--r-sm);
    font-weight:600;font-size:14.5px;
    transition:background var(--d-base) var(--ease-smooth),color var(--d-base) var(--ease-smooth),transform var(--d-base) var(--ease-spring);
    position:relative;
}
.sb-nav a::before{
    content:'';position:absolute;left:0;top:50%;
    width:3px;height:0;
    border-radius:0 3px 3px 0;
    background:var(--grad);
    transform:translateY(-50%);
    transition:height var(--d-base) var(--ease-spring);
}
.sb-nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.sb-nav a:hover::before{height:50%}
.sb-nav a.active{
    background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(52,211,153,.12));
    color:var(--text);
    font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(34,211,238,.20);
}
.sb-nav a.active::before{height:24px}
.sb-nav .ico{font-size:17px;width:22px;text-align:center}
.sb-foot{padding:16px;border-top:1px solid var(--border)}
.sb-foot a{
    display:flex;align-items:center;gap:10px;
    color:var(--muted);
    font-size:13.5px;
    padding:8px 10px;
    border-radius:10px;
    transition:color var(--d-base) var(--ease-smooth),background var(--d-base) var(--ease-smooth);
}
.sb-foot a:hover{color:var(--text);background:rgba(255,255,255,.04)}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{
    display:flex;align-items:center;gap:16px;
    padding:18px 28px;
    border-bottom:1px solid var(--border);
    position:sticky;top:0;
    background:rgba(11,15,27,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    z-index:50;
}
.menu-btn{
    display:none;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border-2);
    color:var(--text);
    width:42px;height:42px;
    border-radius:11px;
    font-size:20px;
    cursor:pointer;
    transition:background var(--d-base) var(--ease-smooth);
}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.page-title{
    font-family:var(--font-head);
    font-size:19px;
    font-weight:700;
    letter-spacing:-.01em;
}
.page-crumb{color:var(--muted-2);font-size:13px;margin-left:6px}
.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}

.content{padding:30px 28px;flex:1}
.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:24px;
    margin-bottom:22px;
    box-shadow:var(--shadow-card);
    transition:border-color var(--d-base) var(--ease-smooth);
}
.panel:hover{border-color:var(--border-2)}
.panel h2{
    font-family:var(--font-head);
    font-size:17px;
    margin-bottom:16px;
    display:flex;align-items:center;gap:10px;
}
.panel h2 .num{
    background:rgba(34,211,238,.12);
    color:var(--brand);
    border-radius:8px;
    padding:2px 10px;
    font-size:13px;
    border:1px solid rgba(34,211,238,.20);
}
.panel p{color:var(--muted)}
.panel p strong{color:var(--text)}

/* ---------- Stat cards ---------- */
.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:22px;
}
.stat-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:22px 22px;
    box-shadow:var(--shadow-card);
    transition:transform var(--d-base) var(--ease-spring),border-color var(--d-base) var(--ease-smooth),box-shadow var(--d-base) var(--ease-smooth);
    position:relative;
    overflow:hidden;
}
.stat-card::before{
    content:'';
    position:absolute;top:0;left:0;
    width:80px;height:3px;
    background:var(--grad);
    opacity:.7;
    border-radius:0 0 8px 0;
}
.stat-card:hover{
    transform:translateY(-4px);
    border-color:rgba(34,211,238,.30);
    box-shadow:0 24px 50px -16px rgba(0,0,0,.6), 0 4px 12px rgba(34,211,238,.10);
}
.stat-card .lbl{
    color:var(--muted-2);
    font-size:13px;
    display:flex;align-items:center;gap:8px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.stat-card .val{
    font-family:var(--font-head);
    font-size:30px;
    font-weight:700;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-top:8px;
    letter-spacing:-.02em;
}
.stat-card .sub{color:var(--muted-2);font-size:12.5px;margin-top:4px}
.stat-card .ico{font-size:20px}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
th{
    color:var(--muted-2);
    font-weight:700;
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    background:var(--panel-2);
}
tbody tr{transition:background var(--d-base) var(--ease-smooth)}
tr:hover td{background:rgba(34,211,238,.05)}
.table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--panel);
    box-shadow:var(--shadow-card);
}

/* ---------- Chips ---------- */
.chip{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;
    padding:4px 11px;
    border-radius:var(--r-full);
    font-weight:700;
    transition:transform var(--d-base) var(--ease-spring);
}
.chip:hover{transform:translateY(-1px)}
.chip.green{background:rgba(52,211,153,.14);color:var(--accent);border:1px solid rgba(52,211,153,.30)}
.chip.blue{background:rgba(34,211,238,.14);color:var(--brand);border:1px solid rgba(34,211,238,.30)}
.chip.red{background:rgba(255,91,110,.14);color:var(--danger);border:1px solid rgba(255,91,110,.30)}
.chip.gray{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border-2)}
.chip.warn{background:rgba(246,199,107,.14);color:var(--warn);border:1px solid rgba(246,199,107,.30)}
.on{width:9px;height:9px;border-radius:var(--r-full);background:var(--accent);box-shadow:0 0 12px var(--accent)}
.off{width:9px;height:9px;border-radius:var(--r-full);background:var(--muted-2)}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.field label{font-weight:600;font-size:14px;color:var(--muted)}
.field label .req{color:var(--danger)}
.field .hint{color:var(--muted-2);font-size:12.5px}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],input[type=date],select,textarea{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--border-2);
    color:var(--text);
    border-radius:var(--r-sm);
    padding:12px 14px;
    font:inherit;
    font-size:14.5px;
    transition:border-color var(--d-base) var(--ease-smooth),background var(--d-base) var(--ease-smooth),box-shadow var(--d-base) var(--ease-smooth);
}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.22)}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--brand);
    background:var(--card);
    box-shadow:0 0 0 4px rgba(34,211,238,.14);
}
textarea{min-height:140px;resize:vertical}
select{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2322D3EE' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:40px;
}
.checkline{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    font-size:14px;cursor:pointer;user-select:none;
    transition:border-color var(--d-base) var(--ease-smooth);
}
.checkline:hover{border-color:rgba(34,211,238,.30)}
.checkline input{width:auto}
.tog{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tog input{width:auto}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    border:none;cursor:pointer;
    font:inherit;font-weight:700;
    border-radius:var(--r-full);
    padding:12px 20px;
    transition:transform var(--d-fast) var(--ease-spring),box-shadow var(--d-base) var(--ease-smooth),background var(--d-base) var(--ease-smooth),color var(--d-base) var(--ease-smooth),border-color var(--d-base) var(--ease-smooth);
    font-size:14px;
    -webkit-tap-highlight-color:transparent;
    position:relative;overflow:hidden;
}
.btn::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(120% 120% at 50% 50%,rgba(255,255,255,.30),transparent 60%);
    opacity:0;transition:opacity var(--d-base) var(--ease-smooth);
    pointer-events:none;
}
.btn:hover::after{opacity:1}
.btn-primary{
    background:var(--grad);
    color:#04121a;
    box-shadow:0 10px 28px -8px rgba(34,211,238,.5);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(34,211,238,.6)}
.btn-ghost{
    background:rgba(255,255,255,.05);
    border:1px solid var(--border-2);
    color:var(--text);
}
.btn-ghost:hover{
    border-color:var(--accent);
    color:var(--accent);
    transform:translateY(-2px);
    background:rgba(52,211,153,.08);
}
.btn-danger{
    background:rgba(255,91,110,.10);
    border:1px solid rgba(255,91,110,.35);
    color:var(--danger);
}
.btn-danger:hover{
    background:rgba(255,91,110,.20);
    transform:translateY(-1px);
}
.btn-sm{
    padding:8px 14px;
    font-size:13px;
    border-radius:10px;
}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Alerts ---------- */
.alert{
    padding:14px 18px;
    border-radius:var(--r-sm);
    margin-bottom:18px;
    font-size:14.5px;
    display:flex;gap:10px;align-items:flex-start;
    border:1px solid transparent;
}
.alert.info{
    background:rgba(34,211,238,.10);
    border-color:rgba(34,211,238,.28);
    color:#cff6ff;
}
.alert.warn{
    background:rgba(246,199,107,.10);
    border-color:rgba(246,199,107,.30);
    color:#ffe9b3;
}
.alert.error{
    background:rgba(255,91,110,.10);
    border-color:rgba(255,91,110,.30);
    color:#ffd9dd;
}
.alert.success{
    background:rgba(52,211,153,.10);
    border-color:rgba(52,211,153,.30);
    color:#d2ffe9;
}

/* ---------- Version rows ---------- */
.vrow{
    display:flex;align-items:center;gap:14px;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--card);
    margin-bottom:14px;
    flex-wrap:wrap;
    transition:transform var(--d-base) var(--ease-spring),border-color var(--d-base) var(--ease-smooth),box-shadow var(--d-base) var(--ease-smooth);
}
.vrow:hover{
    transform:translateY(-2px);
    border-color:rgba(34,211,238,.30);
    box-shadow:var(--shadow-card);
}
.vrow .v-info{flex:1;min-width:220px}
.vrow .v-ver{
    font-family:var(--font-head);
    font-weight:700;
    font-size:18px;
    color:var(--brand);
    letter-spacing:-.01em;
}
.vrow .v-meta{
    color:var(--muted-2);
    font-size:13px;
    margin-top:4px;
    display:flex;gap:10px;
    flex-wrap:wrap;align-items:center;
}
.vrow .v-actions{display:flex;gap:8px;flex-wrap:wrap}

.file-drop{
    border:2px dashed var(--border-2);
    border-radius:var(--r-md);
    padding:28px;
    text-align:center;
    color:var(--muted);
    margin-bottom:14px;
    background:var(--panel-2);
    transition:border-color var(--d-base) var(--ease-smooth),background var(--d-base) var(--ease-smooth),color var(--d-base) var(--ease-smooth);
    cursor:pointer;
}
.file-drop:hover{border-color:rgba(34,211,238,.5)}
.file-drop.drag{
    background:rgba(34,211,238,.10);
    border-color:var(--brand);
    color:var(--text);
}
.file-drop .drop-ico{
    font-size:34px;
    margin-bottom:10px;
    color:var(--brand);
    filter:drop-shadow(0 0 14px rgba(34,211,238,.5));
}

/* ---------- Toast ---------- */
.toast{
    position:fixed;
    left:50%;bottom:28px;
    transform:translateX(-50%) translateY(30px) scale(.96);
    background:var(--panel-2);
    border:1px solid var(--border-2);
    color:var(--text);
    padding:14px 22px;
    border-radius:var(--r-full);
    box-shadow:var(--shadow-card);
    font-weight:600;font-size:15px;
    z-index:800;
    opacity:0;
    transition:transform var(--d-base) var(--ease-spring),opacity var(--d-base) var(--ease-smooth);
    max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.error{border-color:var(--danger)}

/* ---------- Login ---------- */
.login-wrap{
    min-height:100vh;
    display:grid;place-items:center;
    padding:24px;
    background:
        radial-gradient(900px 500px at 0% 0%,rgba(34,211,238,.18),transparent 60%),
        radial-gradient(700px 400px at 100% 100%,rgba(52,211,153,.16),transparent 60%),
        var(--bg);
}
.login-card{
    width:100%;
    max-width:400px;
    background:var(--panel);
    border:1px solid var(--border-2);
    border-radius:var(--r-lg);
    padding:36px;
    box-shadow:var(--e3);
    animation:cardIn 600ms var(--ease-spring) both;
}
@keyframes cardIn{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:none}
}
.login-logo{
    display:flex;align-items:center;gap:12px;
    margin-bottom:10px;
}
.login-logo .t{font-family:var(--font-head);font-size:20px;font-weight:700}
.login-h{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.login-pw{position:relative}
.login-pw .eye{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;
    color:var(--muted-2);cursor:pointer;
    font-size:18px;
    padding:6px;
    border-radius:6px;
    transition:color var(--d-base) var(--ease-smooth),background var(--d-base) var(--ease-smooth);
}
.login-pw .eye:hover{color:var(--brand);background:rgba(255,255,255,.04)}
.back-link{
    display:block;margin-top:18px;text-align:center;
    color:var(--muted-2);font-size:14px;
    transition:color var(--d-base) var(--ease-smooth);
}
.back-link:hover{color:var(--text)}

/* ---------- Login info box ---------- */
.login-box{
    padding:16px;
    border-radius:var(--r-sm);
    background:var(--panel-2);
    border:1px solid var(--border);
    margin-bottom:22px;
    font-size:13.5px;
}
.login-box p{margin:6px 0}
.login-box code{
    background:rgba(255,255,255,.06);
    padding:1px 7px;
    border-radius:6px;
    color:var(--accent);
}

/* ---------- Misc ---------- */
.flag{font-size:16px}
.empty{text-align:center;color:var(--muted-2);padding:36px;font-size:14px}

/* ---------- Charts ---------- */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bars{
    display:flex;align-items:flex-end;
    gap:6px;height:160px;
    padding:14px 6px 0;
}
.bar{
    flex:1;
    background:var(--grad);
    border-radius:8px 8px 0 0;
    min-height:4px;
    position:relative;
    transition:opacity var(--d-base) var(--ease-smooth),transform var(--d-base) var(--ease-spring);
    opacity:.85;
}
.bar:hover{opacity:1;transform:translateY(-2px)}
.bar.dim{background:rgba(34,211,238,.18)}
.bar-x{display:flex;gap:6px;margin-top:6px}
.bar-x span{
    flex:1;text-align:center;
    color:var(--muted-2);font-size:11px;
    white-space:nowrap;overflow:hidden;
}
.map-line{
    display:flex;align-items:center;gap:10px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    font-size:14px;
    color:var(--muted);
    transition:color var(--d-base) var(--ease-smooth);
}
.map-line:hover{color:var(--text)}
.map-line:last-child{border-bottom:none}
.map-line .cnt{margin-left:auto;color:var(--text);font-weight:700}

/* ---------- Misc ---------- */
.marker{display:flex;gap:8px;align-items:center}
.marker .dot{width:9px;height:9px;border-radius:var(--r-full);background:var(--brand);box-shadow:0 0 8px var(--brand)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .chart-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .sidebar{
        position:fixed;left:0;top:0;
        z-index:300;
        transform:translateX(-100%);
        transition:transform var(--d-base) var(--ease-spring);
    }
    .sidebar.open{transform:translateX(0)}
    .menu-btn{display:grid;place-items:center}
    .content{padding:18px}
    .topbar{padding:14px 18px}
    .backdrop-open{position:fixed;inset:0;background:rgba(4,6,12,.6);z-index:290;backdrop-filter:blur(4px)}
}
@media(max-width:560px){
    .stat-grid{grid-template-columns:1fr}
    .vrow{flex-direction:column;align-items:flex-start}
    .vrow .v-actions{width:100%}
    .btn{width:100%;justify-content:center}
    .btn-row{width:100%}
    .btn-row .btn{flex:1}
    .top-actions .btn{width:auto}
    .hidden-mobile{display:none}
    .login-card{padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important;
        transition-duration:.001ms!important;
    }
}