@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/PlusJakartaSans-Regular.ttf') format('truetype')}
:root {
    --admin-bg: #07111f;
    --admin-bg-soft: #0b1729;
    --admin-card: #101d31;
    --admin-card-2: #13243b;
    --admin-border: #223653;
    --admin-text: #f6f8fc;
    --admin-muted: #93a4bd;
    --admin-blue: #3d7cff;
    --admin-blue-soft: rgba(61, 124, 255, .13);
    --admin-terra: #d27a58;
    --admin-terra-soft: rgba(210, 122, 88, .13);
    --admin-green: #35c58a;
    --admin-amber: #f2b84b;
    --admin-red: #f36c73;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body[data-admin-ui] {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 86% -10%, rgba(61,124,255,.12), transparent 32rem),
        radial-gradient(circle at 4% 15%, rgba(210,122,88,.08), transparent 25rem),
        var(--admin-bg) !important;
    color: var(--admin-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.admin-shell { width: min(1380px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 60px; }
.admin-topbar {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid rgba(34,54,83,.82);
    background: rgba(7,17,31,.88);
    backdrop-filter: blur(18px);
}
.admin-topbar-inner {
    width: min(1380px, calc(100% - 40px)); min-height: 68px; margin: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.admin-brand { display: flex; align-items: center; gap: 11px; color: white; font-weight: 850; letter-spacing: -.025em; }
.admin-brand-mark {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px;
    background: linear-gradient(145deg, #1c53c5, #3d7cff); box-shadow: 0 8px 20px rgba(24,77,190,.3);
}
.admin-brand-mark img { width: 23px; height: 23px; object-fit: contain; }
.admin-brand small { display: block; color: var(--admin-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.admin-nav { display: flex; align-items: center; gap: 6px; }
.admin-nav a, .admin-nav button {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid transparent;
    border-radius: 10px; color: #aebbd0; background: transparent; font-size: 12px; font-weight: 750; transition: .18s ease;
}
.admin-nav a:hover, .admin-nav a.is-active, .admin-nav button:hover {
    color: white; border-color: var(--admin-border); background: rgba(255,255,255,.045);
}
.admin-nav .logout:hover { color: #ff9aa0; border-color: rgba(243,108,115,.28); background: rgba(243,108,115,.08); }
.mobile-nav-button { display: none; color: white; background: transparent; border: 0; font-size: 20px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-kicker { margin: 0 0 6px; color: var(--admin-terra); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.page-title { margin: 0; color: white; font-size: clamp(25px, 4vw, 36px); line-height: 1.1; font-weight: 850; letter-spacing: -.04em; }
.page-copy { margin: 8px 0 0; max-width: 680px; color: var(--admin-muted); font-size: 13px; line-height: 1.65; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card {
    position: relative; overflow: hidden; min-height: 130px; padding: 18px;
    border: 1px solid var(--admin-border); border-radius: 17px;
    background: linear-gradient(145deg, rgba(19,36,59,.96), rgba(13,27,47,.96));
    box-shadow: 0 12px 32px rgba(0,0,0,.13);
}
.metric-card::after {
    content: ""; position: absolute; width: 90px; height: 90px; right: -35px; top: -35px;
    border-radius: 50%; background: var(--metric-glow, rgba(61,124,255,.12));
}
.metric-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--metric-color, var(--admin-blue)); background: var(--metric-glow, var(--admin-blue-soft)); }
.metric-label { margin: 13px 0 4px; color: var(--admin-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.metric-value { margin: 0; color: white; font-size: 27px; font-weight: 850; letter-spacing: -.035em; }
.metric-sub { color: #7890ad; font-size: 10px; }

.admin-grid { display: grid; gap: 16px; }
.admin-grid.two { grid-template-columns: minmax(0,1.5fr) minmax(290px,.75fr); }
.admin-grid.broadcast { grid-template-columns: minmax(320px,.78fr) minmax(0,1.35fr); }
.admin-card { border: 1px solid var(--admin-border); border-radius: 18px; background: rgba(16,29,49,.92); box-shadow: 0 14px 38px rgba(0,0,0,.13); overflow: hidden; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px 19px; border-bottom: 1px solid var(--admin-border); }
.admin-card-title { margin: 0; display: flex; align-items: center; gap: 9px; color: white; font-size: 14px; font-weight: 820; }
.admin-card-title i { color: var(--admin-blue); }
.admin-card-body { padding: 19px; }
.card-note { color: var(--admin-muted); font-size: 11px; line-height: 1.55; }

.chart-wrap { position: relative; height: 290px; }
.chart-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--admin-border); border-radius: 9px; background: #0b1729; }
.chart-switch button { padding: 6px 9px; border: 0; border-radius: 6px; color: var(--admin-muted); background: transparent; font-size: 10px; font-weight: 800; }
.chart-switch button.active { color: white; background: #1b3457; }

.review-list { display: grid; gap: 9px; }
.review-item { padding: 12px; border: 1px solid rgba(242,184,75,.18); border-radius: 12px; background: rgba(242,184,75,.055); }
.review-item h4 { margin: 0 0 4px; color: #f9cf7b; font-size: 12px; }
.review-item p { margin: 0; color: #95a6bf; font-size: 10px; line-height: 1.5; }
.empty-state { padding: 30px 18px; text-align: center; color: var(--admin-muted); font-size: 12px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-box { position: relative; width: min(100%, 340px); }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #627691; font-size: 12px; }
.field {
    width: 100%; min-height: 41px; padding: 10px 12px; border: 1px solid var(--admin-border);
    border-radius: 10px; outline: 0; background: #0a1627; color: white; font-size: 12px; transition: .18s ease;
}
.search-box .field { padding-left: 34px; }
.field:focus { border-color: rgba(61,124,255,.75); box-shadow: 0 0 0 4px rgba(61,124,255,.09); }
textarea.field { resize: vertical; min-height: 110px; }
.field-label { display: block; margin: 0 0 6px; color: #9babc1; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.field-help { margin: 5px 0 0; color: #6e829d; font-size: 10px; line-height: 1.5; }
.form-grid { display: grid; gap: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; font-size: 11px; font-weight: 800; transition: .18s ease; }
.btn-primary { color: white; background: var(--admin-blue); box-shadow: 0 8px 20px rgba(61,124,255,.2); }
.btn-primary:hover { background: #2f68e2; transform: translateY(-1px); }
.btn-secondary { color: #d5deec; border-color: var(--admin-border); background: #14243a; }
.btn-secondary:hover { color: white; background: #1a2d48; }
.btn-terra { color: #ffe5da; border-color: rgba(210,122,88,.32); background: var(--admin-terra-soft); }
.btn-danger { color: #ffd8db; border-color: rgba(243,108,115,.32); background: rgba(243,108,115,.11); }
.btn-ghost { color: var(--admin-muted); background: transparent; }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }

.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
.admin-table th { padding: 12px 15px; border-bottom: 1px solid var(--admin-border); color: #788ba5; background: rgba(7,17,31,.36); font-size: 9px; font-weight: 850; letter-spacing: .095em; text-transform: uppercase; }
.admin-table td { padding: 14px 15px; border-bottom: 1px solid rgba(34,54,83,.58); color: #c0cbdb; font-size: 11px; vertical-align: middle; }
.admin-table tbody tr:hover { background: rgba(255,255,255,.024); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.entity-name { color: white; font-size: 12px; font-weight: 800; }
.entity-meta { margin-top: 3px; color: #7588a3; font-size: 10px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--admin-border); border-radius: 999px; color: #b6c3d6; background: #14233a; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.pill.active { color: #69d9a9; border-color: rgba(53,197,138,.25); background: rgba(53,197,138,.09); }
.pill.warning { color: #f4ca73; border-color: rgba(242,184,75,.28); background: rgba(242,184,75,.09); }
.pill.danger { color: #ff9da2; border-color: rgba(243,108,115,.29); background: rgba(243,108,115,.1); }
.pill.blue { color: #8ab0ff; border-color: rgba(61,124,255,.3); background: rgba(61,124,255,.1); }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--admin-border); border-radius: 9px; color: #9dafc6; background: #0d1a2c; transition: .18s ease; }
.icon-btn:hover { color: white; border-color: #36557f; background: #172a44; }
.icon-btn.mail:hover { color: #8ab0ff; border-color: rgba(61,124,255,.45); }
.icon-btn.danger:hover { color: #ff9da2; border-color: rgba(243,108,115,.4); background: rgba(243,108,115,.08); }

.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(2,8,18,.82); backdrop-filter: blur(7px); }
.modal-overlay.hidden { display: none; }
.modal-card { width: min(100%, 520px); max-height: calc(100vh - 36px); overflow-y: auto; border: 1px solid #2a4264; border-radius: 19px; background: #101d31; box-shadow: 0 30px 90px rgba(0,0,0,.48); }
.modal-card.wide { width: min(100%, 760px); }
.modal-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--admin-border); }
.modal-head h3 { margin: 0; color: white; font-size: 16px; }
.modal-head p { margin: 4px 0 0; color: var(--admin-muted); font-size: 10px; }
.modal-body { padding: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.confirmation-box { display: flex; gap: 9px; padding: 11px; border: 1px solid rgba(242,184,75,.25); border-radius: 10px; background: rgba(242,184,75,.06); color: #c7b585; font-size: 10px; line-height: 1.5; }
.alert-box { padding: 10px 12px; border-radius: 10px; color: #aebcd0; background: #0a1627; font-size: 11px; }
.alert-box.error { color: #ffabb0; border: 1px solid rgba(243,108,115,.28); background: rgba(243,108,115,.07); }
.alert-box.success { color: #79dfb3; border: 1px solid rgba(53,197,138,.26); background: rgba(53,197,138,.07); }

.login-card { width: min(100% - 28px, 430px); padding: 30px; border: 1px solid var(--admin-border); border-radius: 22px; background: rgba(16,29,49,.95); box-shadow: 0 30px 80px rgba(0,0,0,.34); }

@media (max-width: 980px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-grid.two, .admin-grid.broadcast { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .admin-shell, .admin-topbar-inner { width: min(100% - 24px, 680px); }
    .admin-shell { padding-top: 20px; }
    .mobile-nav-button { display: block; }
    .admin-nav { display: none; position: absolute; top: 61px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid var(--admin-border); border-radius: 13px; background: #0c192b; box-shadow: 0 18px 45px rgba(0,0,0,.35); }
    .admin-nav.open { display: flex; }
    .admin-nav a, .admin-nav button { justify-content: flex-start; width: 100%; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-box { width: 100%; }
    .table-wrap { overflow: visible; }
    .admin-table { display: block; min-width: 0; }
    .admin-table thead { display: none; }
    .admin-table tbody { display: grid; gap: 10px; padding: 10px; }
    .admin-table tr { display: grid; padding: 12px; border: 1px solid var(--admin-border); border-radius: 13px; background: #0d1a2c; }
    .admin-table td { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border: 0; text-align: right !important; }
    .admin-table td::before { content: attr(data-label); color: #7588a3; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; text-align: left; }
    .admin-table td:first-child { display: block; text-align: left !important; padding-top: 0; }
    .admin-table td:first-child::before { display: none; }
    .row-actions { justify-content: flex-end; }
}

@media (max-width: 520px) {
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .metric-card { min-height: 112px; padding: 14px; }
    .metric-value { font-size: 23px; }
    .metric-label { font-size: 9px; }
    .admin-card-head, .admin-card-body { padding: 15px; }
    .chart-wrap { height: 235px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .btn { width: 100%; }
}

body[data-admin-ui]{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-size:14px}
.hidden{display:none!important}.tracking-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.tracking-stat{padding:18px;background:var(--admin-card);border:1px solid var(--admin-border);border-radius:16px;text-align:left;color:var(--admin-text)}
.tracking-stat strong{display:block;font-size:28px;margin:8px 0}.tracking-stat span{color:var(--admin-muted);font-size:12px}
.tracking-layout{align-items:start;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:20px}.tracking-detail{padding:22px}
.usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.usage-grid div{border:1px solid var(--admin-border);border-radius:12px;padding:12px}.usage-grid strong{display:block;font-size:22px}.usage-grid small{color:var(--admin-muted)}
.tracking-form{display:grid;gap:14px;margin-top:20px}.detail-links{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.mini-bar{height:7px;background:var(--admin-border);border-radius:10px;overflow:hidden;margin:6px 0 15px}.mini-bar span{display:block;height:100%;background:var(--admin-blue)}
.admin-table a{color:var(--admin-text)}.btn:disabled{opacity:.5;cursor:wait}.tracking-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.tracking-tools .field{width:auto;flex:1;min-width:150px}dialog{color:var(--admin-text);background:var(--admin-card);border:1px solid var(--admin-border);border-radius:20px;width:min(480px,90vw);padding:24px}dialog::backdrop{background:rgba(0,0,0,.7)}
@media(max-width:1000px){.tracking-layout{grid-template-columns:1fr}.tracking-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.admin-shell{width:calc(100% - 28px)}.tracking-detail{padding:16px}.usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tracking-stat{padding:14px}.tracking-stat strong{font-size:25px}.page-title{font-size:28px}.tracking-tools .field{min-width:100%}}

.tracking-detail h2{font-size:24px}.tracking-detail h3{font-size:16px;margin-top:24px}.tracking-detail .review-item p{font-size:12px}.tracking-detail .card-note{font-size:12px}.entity-name{overflow-wrap:anywhere}

[data-admin-ui] a{text-decoration:none}.tracking-layout .admin-table{font-size:13px}.tracking-layout .entity-meta{font-size:11px}#detail{scroll-margin-top:95px}.detail-back{display:none}@media(max-width:1000px){.detail-back{display:inline-flex;margin-bottom:14px}}
body[data-admin-page="login"]{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
body[data-admin-page="login"] .login-card{width:min(420px,100%)}
body[data-admin-page="login"] form{display:grid;gap:20px}
body[data-admin-page="login"] .field-label{margin-bottom:8px}