:root{
    --bg:#0f1229;
    --panel:#ffffff;
    --text:#0f172a;
    --muted:#6b7280;
    --primary:#5b57f3;
    --primary-h:#4a47e2;
    --radius:14px;
    --shadow:0 10px 30px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:#f6f7f9;
    display:flex;
    min-height:100vh;
    font-weight:400;
}

/* ===== sidebar ===== */
.sidebar{
    width:240px;min-width:240px;
    background:var(--panel);
    border-right:1px solid #e5e7eb;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:6px;
    height:100vh; /* як було */
}
.sidebar .brand{
    font-weight:600;
    font-size:18px;
    margin:4px 0 10px
}
.sidebar a{
    padding:8px 10px;
    border-radius:10px;
    color:var(--text);
    text-decoration:none;
    font-weight:500;
}
.sidebar a.active,.sidebar a:hover{background:#eef1ff}
.grow{flex:1}
.user{display:flex;gap:8px;align-items:center;margin-top:auto}
.user-name{color:var(--muted);font-size:14px;font-weight:400}

/* topbar for mobile */
.top{display:none}
@media (max-width: 820px){
    .sidebar{display:none}
    .top{
        display:flex;position:sticky;top:0;z-index:100;
        background:var(--panel);
        border-bottom:1px solid #e5e7eb;
        align-items:center;
        justify-content:space-between;
        padding:12px 16px
    }
    /* показуємо меню як оверлей і дозволяємо скрол усередині */
    body.menu-open .sidebar{
        display:block;
        position:fixed;
        inset:0 auto 0 0;
        z-index:120;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        background:var(--panel);
    }
}

/* backdrop for mobile */
.backdrop{display:none}
body.menu-open .backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:110;
}

/* маленький стиль для кнопки-бургера */
.burger{background:transparent;border:none;font-size:22px;line-height:1;cursor:pointer}

/* ===== main ===== */
main.container{flex:1;padding:28px;max-width:1200px;margin:0 auto}
.page-title{
    font-size:26px;
    font-weight:600;
    margin:0 0 18px
}
.card{
    background:var(--panel);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px
}
.grid{display:grid;gap:16px}
@media (min-width: 960px){ .grid{grid-template-columns:1fr 1fr} }
.input{
    width:220px;max-width:100%;
    padding:.6rem .8rem;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff
}
.form-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.btn{
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:.7rem 1rem;
    font-weight:600;
    cursor:pointer;
    transition:.15s
}
.btn:hover{background:var(--primary-h)}
.btn-outline{
    background:#f5f6ff;
    color:var(--primary);
    font-weight:500;
}
.btn-outline:hover{background:#e8eaff}

/* ===== table ===== */
.table{width:100%;border-collapse:collapse;table-layout:auto}
.table-fixed{table-layout:fixed}
.table th,.table td{
    padding:12px 10px;
    border-bottom:1px solid #eef0f2;
    vertical-align:middle;
    font-weight:400;
}
.ta-left{ text-align:left }
.ta-right{ text-align:right }
.col-date{width:180px}
.col-num{width:140px}
.col-last{width:240px}

/* ===== footer ===== */
.footer{
    position:fixed;
    right:18px;
    bottom:12px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:400;
}

/* ===== auth ===== */
.auth-top{
    position:fixed;inset:0 0 auto 0;
    background:transparent;color:#fff;
    padding:20px 28px;z-index:2
}
.auth-viewport{
    position:relative; flex:1; display:flex; align-items:center; justify-content:center;
    min-height:100vh; width:100%;
    background:
            radial-gradient(1000px 600px at -10% -10%, #6a6cfb33 0%, transparent 70%),
            radial-gradient(900px 500px at 110% 0%, #8a5cfb33 0%, transparent 70%),
            linear-gradient(180deg, #0f1229 0%, #14173a 100%);
}
.auth-card{
    width:100%; max-width:460px; margin:90px 24px 40px;
    background:rgba(255,255,255,.9); backdrop-filter: blur(8px);
    border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.18);
    padding:28px 26px;
}
.auth-title{margin:0 0 6px; font-size:28px; font-weight:700; letter-spacing:.2px}
.auth-sub{margin:0 0 18px; color:#4b5563; font-size:.98rem;font-weight:400}
.form-col{display:flex;flex-direction:column;gap:14px}
.label{font-size:.92rem;font-weight:600;color:#334155}
.input-full{
    width:100%; padding:.8rem 1rem; border:1px solid #e5e7eb; border-radius:14px; background:#fff;
    box-shadow:0 1px 0 rgba(16,24,40,.02); outline:none; transition:border-color .15s, box-shadow .15s;
}
.input-full:focus{border-color:#c7d2fe; box-shadow:0 0 0 3px #e1e7ff}
.actions-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px}
.link{color:var(--primary);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}

/* ===== chart sizing ===== */
.chart-wrap{
    height:320px;
    max-height:60vh;
    width:100%;
    position:relative;
}
#usageChart{
    display:block;
    width:100% !important;
    height:100% !important;
}
@media (max-width: 768px){
    .chart-wrap{ height:240px; }
}

.card-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.m0{ margin:0 }
.link-btn{
    background:transparent; border:none; color:var(--primary); font-weight:500; cursor:pointer;
    padding:6px 8px; border-radius:10px;
}
.link-btn:hover{ background:#eef1ff }

/* API Keys */
.key-banner{border:1px solid #e7eafe;background:#f7f8ff}
.key-banner .kb-title{font-weight:600;margin-bottom:6px}
.key-banner .kb-body{display:flex;gap:10px;align-items:center}
.key-banner .kb-code{
    display:block; padding:10px 12px; background:#fff;
    border:1px dashed #c7ccff; border-radius:10px; word-break:break-all;
    max-width:100%; overflow:auto;
    font-weight:400;
}
.key-banner .kb-note{color:#6b7280;margin-top:6px;font-weight:400}

/* таблиця з фіксованими колонками */
.table-fixed { table-layout: fixed; width: 100% }
.table-fixed .col-name   { width: 32% }
.table-fixed .col-date   { width: 28% }
.table-fixed .col-actions{ width: 12%; text-align: right }
.table-fixed td.col-actions{ text-align: right }

/* утиліти */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace }
.btn-sm{ padding: 6px 10px; font-size: 12px; font-weight:500 }
.table-wrap{overflow:auto}

/* ===== desktop: фіксуємо сайдбар, скролимо лише main ===== */
@media (min-width: 821px){
    /* блокуємо загальний скрол, робимо власні області прокрутки */
    body{ overflow: hidden; align-items: stretch; }

    /* сайдбар завжди “прилиплий” до верху, має власний скрол при потребі */
    .sidebar{
        position: sticky;
        top: 0;
        height: 100dvh;          /* краще за 100vh на iOS/Chrome */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* основний контент займає всю висоту і скролиться */
    main.container{
        height: 100dvh;
        overflow: auto;
    }
}

/* ===== mobile: коли меню відкрите — фіксуємо фон ===== */
body.menu-open{ overflow: hidden; }

/* KPI rows */
.kpi3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:10px;
    align-items:flex-start;
}
.kpi3 > div{display:flex;flex-direction:column;gap:2px}

/* маленька панель лінків справа у заголовку картки */
.card-head .links{display:flex;gap:12px;flex-wrap:wrap}