:root {
    --tofte-navy:#07183d;
    --tofte-muted:#65708a;
    --tofte-line:#dce4f1;
    --tofte-soft:#f4f7fb;
    --tofte-blue:#2f67ff;
    --tofte-green:#0f9f6e;
    --tofte-red:#d14343;
}

body { background:var(--tofte-soft); color:var(--tofte-navy); }
button, input { font:inherit; }
.admin-app[hidden], .install-screen[hidden], .admin-modal[hidden], .admin-tool-modal[hidden] { display:none !important; }

.install-screen {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
    background:linear-gradient(180deg,#f8fbff 0%,#edf3fb 100%);
}
.install-card {
    width:min(390px,100%);
    padding:26px 20px;
    border:1px solid var(--tofte-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 45px rgba(7,24,61,.12);
    text-align:center;
}
.install-card img { width:215px; max-width:80%; height:auto; margin-bottom:14px; }
.install-card h1 { margin:0 0 6px; font-size:24px; color:var(--tofte-navy); }
.install-card p { margin:0 0 18px; color:var(--tofte-muted); line-height:1.45; }
.install-card form { display:grid; gap:10px; }
.install-card input {
    width:100%;
    min-height:48px;
    border:1px solid #c8d4e4;
    border-radius:10px;
    padding:0 14px;
    text-align:center;
    font-size:20px;
    font-weight:900;
    letter-spacing:.08em;
    color:var(--tofte-navy);
    text-transform:uppercase;
}
.install-card button {
    min-height:48px;
    border:0;
    border-radius:10px;
    background:var(--tofte-blue);
    color:#fff;
    font-weight:900;
}
.install-message { min-height:22px; margin-top:12px; color:var(--tofte-red); font-size:13px; font-weight:700; }

.admin-header {
    height:64px;
    border-bottom:1px solid var(--tofte-line);
    box-shadow:0 6px 18px rgba(7,24,61,.06);
}
.admin-logo-link {
    height:64px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
}
.admin-logo-link img {
    width:180px;
    max-width:52vw;
    height:auto;
    display:block;
}
.admin-header .header-icon {
    height:56px;
    width:56px;
    line-height:normal;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--tofte-navy);
    font-size:20px;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin-top:0 !important;
    padding-top:0 !important;
}
.admin-header .header-icon i {
    line-height:1;
    transform:none;
}
.admin-footer {
    border-top:1px solid var(--tofte-line);
    box-shadow:0 -6px 18px rgba(7,24,61,.06);
}
.admin-footer a { color:var(--tofte-muted); }
.admin-footer a.active-nav,
.admin-footer a:active { color:var(--tofte-blue); }
.admin-footer a.is-red { color:var(--tofte-red) !important; }
.admin-footer a.is-red.active-nav { color:var(--tofte-red) !important; }
.admin-footer .footer-svg {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:23px;
    margin:0 auto 0 !important;
    opacity:1 !important;
    position:relative;
    z-index:2;
}
.admin-footer .footer-svg svg {
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:none !important;
}
.admin-footer .footer-label {
    margin-top:-5px !important;
}

.admin-title {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin:4px 0 12px;
}
.admin-title h1 {
    font-size:28px;
    line-height:1;
    color:var(--tofte-navy);
}
.admin-title #device-label {
    color:var(--tofte-muted);
    font-size:12px;
    font-weight:800;
    text-align:right;
}
.admin-start-list {
    display:grid;
    gap:10px;
}

.stat-button {
    appearance:none;
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:74px;
    padding:11px 13px;
    border:1px solid var(--tofte-line);
    border-radius:12px;
    background:#fff;
    color:var(--tofte-navy);
    box-shadow:0 7px 18px rgba(7,24,61,.06);
    text-align:left;
}
.stat-button.is-red {
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
}
.stat-button svg {
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.stat-icon {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:12px;
    background:#eef4ff;
    color:#17234a;
}
.stat-button.is-red .stat-icon { background:rgba(255,255,255,.18); color:#fff; }
.stat-label {
    display:block;
    color:var(--tofte-muted);
    font-size:13px;
    font-weight:900;
}
.stat-button.is-red .stat-label { color:rgba(255,255,255,.82); }
.stat-value {
    display:block;
    margin-top:3px;
    font-size:22px;
    font-weight:1000;
    color:var(--tofte-navy);
}
.stat-button.is-red .stat-value { color:#fff; }
.admin-side-menu {
    background:#fff;
    padding:16px;
}
.admin-menu-head {
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 4px 18px;
    border-bottom:1px solid #edf1f7;
    margin-bottom:12px;
}
.admin-menu-head img { width:42px; height:42px; object-fit:contain; }
.admin-menu-head strong,
.admin-menu-head span { display:block; }
.admin-menu-head strong { color:var(--tofte-navy); }
.admin-menu-head span { color:var(--tofte-muted); font-size:12px; font-weight:700; }
.admin-menu-list { display:grid; gap:8px; }
.menu-item {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:46px;
    padding:0 12px;
    border:1px solid var(--tofte-line);
    border-radius:10px;
    background:#fff;
    color:var(--tofte-navy);
    font-weight:900;
    text-align:left;
}
.menu-item svg {
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.menu-item:active { background:#eef4ff; }
.logout-device {
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    min-height:44px;
    border:1px solid #f1b5b5;
    border-radius:10px;
    background:#fff;
    color:var(--tofte-red);
    font-weight:900;
}

.admin-modal,
.admin-tool-modal {
    position:fixed;
    z-index:10000;
    inset:0;
    display:grid;
    place-items:center;
    padding:16px;
    background:rgba(7,24,61,.36);
    backdrop-filter:blur(3px);
}
.admin-modal-card,
.admin-tool-card {
    width:min(520px,100%);
    max-height:calc(100vh - 32px);
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 55px rgba(7,24,61,.24);
    overflow:hidden;
}
.admin-modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    height:54px;
    padding:0 14px 0 18px;
    border-bottom:1px solid var(--tofte-line);
    background:#fff;
}
.admin-modal-head h2 { margin:0; font-size:16px; color:var(--tofte-navy); }
.admin-modal-close {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid var(--tofte-line);
    border-radius:10px;
    background:#fff;
    color:var(--tofte-navy);
    font-size:26px;
    line-height:1;
}
.admin-tool-modal.child-modal-open #tool-close {
    display:none !important;
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:18px;
}
.quick-tool {
    display:grid;
    place-items:center;
    gap:8px;
    min-height:96px;
    border:1px solid var(--tofte-line);
    border-radius:16px;
    background:#f8fafc;
    color:var(--tofte-navy);
    font-weight:900;
    text-align:center;
}
.quick-tool .stat-icon { width:44px; height:44px; }
.quick-tool .stat-icon svg {
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.quick-tool .stat-icon i {
    font-size:21px;
    line-height:1;
}
.admin-tool-modal { padding:10px; }
.admin-tool-card {
    width:100%;
    height:calc(100vh - 20px);
    border-radius:14px;
    display:flex;
    flex-direction:column;
}
#tool-frame {
    flex:1 1 auto;
    width:100%;
    height:100%;
    border:0;
    background:#fff;
}

@media (min-width:720px) {
    .page-content { max-width:760px; margin:0 auto; }
    .admin-tool-card { max-width:980px; }
}