:root{
    --brand-navy:#082b57;
    --brand-navy-dark:#051d3b;
    --brand-navy-soft:#123f73;
    --brand-orange:#f5a623;
    --brand-orange-dark:#df8b08;
    --brand-orange-soft:#fff4df;

    --sidebar:var(--brand-navy-dark);
    --sidebar-2:var(--brand-navy);
    --surface:#ffffff;
    --surface-soft:#f8fafc;
    --border:#e5e7eb;
    --text:#172033;
    --muted:#6b7280;
    --accent:var(--brand-orange);

    --good:#16a34a;
    --mid:#f59e0b;
    --bad:#dc2626;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
    margin:0;
    background:#f5f7fa;
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:var(--brand-navy)}
a:hover{color:var(--brand-orange-dark)}

.app-shell{min-height:100vh;display:flex}

.sidebar{
    width:250px;
    background:
        radial-gradient(circle at 15% 0%, rgba(245,166,35,.12), transparent 32%),
        linear-gradient(180deg,var(--sidebar-2),var(--sidebar));
    color:#fff;
    position:fixed;
    inset:0 auto 0 0;
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    z-index:20;
}

.brand{
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 8px 28px;
}
.brand:hover{color:#fff}
.brand-mark-img{
    width:42px;
    height:42px;
    object-fit:contain;
}
.brand strong{display:block;font-size:16px}
.brand span{display:block;color:#b8c6d8;font-size:13px}

.side-nav{display:flex;flex-direction:column;gap:6px}
.side-nav a{
    color:#d6dfeb;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 13px;
    border-radius:10px;
    font-weight:650;
    font-size:14px;
    border:1px solid transparent;
}
.side-nav a:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
}
.side-nav a.active{
    background:linear-gradient(135deg,var(--brand-orange),#ffb83f);
    color:#251602;
    box-shadow:0 8px 24px rgba(245,166,35,.16);
}
.side-nav i{font-size:17px}
.sidebar-footer{margin-top:auto;padding:10px 8px}

.app-main{margin-left:250px;width:calc(100% - 250px)}

.topbar{
    height:84px;
    padding:0 32px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:10;
}
.eyebrow{
    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
    color:var(--brand-orange-dark);
}
.page-title{font-size:23px;font-weight:780;letter-spacing:-.02em}
.live-dot{
    width:8px;height:8px;border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12)
}

.content-wrap{padding:28px 32px 42px}

.stat-card,.panel,.site-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 3px 10px rgba(8,43,87,.035);
}
.stat-card{padding:20px}
.stat-label{font-size:13px;color:var(--muted);font-weight:650}
.stat-value{font-size:30px;font-weight:820;letter-spacing:-.04em;margin-top:4px}
.stat-icon{
    width:42px;height:42px;border-radius:12px;
    display:grid;place-items:center;
    background:var(--brand-orange-soft);
    color:var(--brand-orange-dark);
    font-size:18px;
}

.panel{padding:22px}
.panel-title{font-weight:780;font-size:16px}
.panel-subtitle{color:var(--muted);font-size:13px}

.table thead th{
    border-bottom-color:var(--border);
    color:#64748b;
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-weight:780;
    white-space:nowrap;
}
.table tbody td{border-color:#eef2f7;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#fbfcfe}
.table-link{text-decoration:none;color:var(--brand-navy);font-weight:750}
.table-link:hover{color:var(--brand-orange-dark)}
.domain{font-size:12px;color:#64748b;margin-top:2px}

.score-pill{
    width:46px;height:46px;border-radius:50%;
    display:inline-grid;place-items:center;
    font-weight:820;border:4px solid;background:#fff;
}
.score-good{color:var(--good);border-color:#bbf7d0}
.score-mid{color:#b45309;border-color:#fde68a}
.score-bad{color:var(--bad);border-color:#fecaca}
.score-na{color:#94a3b8;border-color:#e2e8f0}

.metric-mini{font-size:12px;color:#64748b}
.metric-mini strong{color:#334155}

.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.form-control,.form-select{
    border-color:#dfe4eb;
    border-radius:10px;
    min-height:42px;
}
.form-control:focus,.form-select:focus{
    border-color:#f3bd61;
    box-shadow:0 0 0 .2rem rgba(245,166,35,.12);
}

.btn-brand{
    background:linear-gradient(135deg,var(--brand-orange),#ffb63a);
    border-color:var(--brand-orange);
    color:#231602;
    font-weight:750;
}
.btn-brand:hover,.btn-brand:focus{
    background:var(--brand-orange-dark);
    border-color:var(--brand-orange-dark);
    color:#fff;
}

.btn-outline-primary{
    --bs-btn-color:var(--brand-navy);
    --bs-btn-border-color:#b6c4d6;
    --bs-btn-hover-bg:var(--brand-navy);
    --bs-btn-hover-border-color:var(--brand-navy);
    --bs-btn-hover-color:#fff;
    --bs-btn-active-bg:var(--brand-navy);
    --bs-btn-active-border-color:var(--brand-navy);
}

.detail-hero{
    background:
        linear-gradient(135deg,rgba(8,43,87,.035),rgba(245,166,35,.05)),
        #fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
}
.detail-domain{color:#64748b;font-size:14px}

.metric-card{
    background:#fff;border:1px solid var(--border);
    border-radius:16px;padding:20px;height:100%;
}
.metric-title{
    font-size:12px;text-transform:uppercase;letter-spacing:.06em;
    color:#64748b;font-weight:780
}
.metric-big{font-size:32px;font-weight:820;letter-spacing:-.04em;margin-top:8px}
.metric-caption{font-size:12px;color:#64748b}

.chart-card{
    background:#fff;border:1px solid var(--border);
    border-radius:16px;padding:20px;height:340px;
}
.chart-card canvas{max-height:260px}

.badge{font-weight:700}

.empty-state{padding:38px;text-align:center;color:#64748b}
.empty-state i{font-size:32px;display:block;margin-bottom:8px;color:#94a3b8}

/* User menu */
.user-menu{
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 8px;
    border-radius:10px;
}
.user-menu:hover{background:#f8fafc}
.user-menu::after{margin-left:4px;color:#94a3b8}
.user-menu strong{display:block;font-size:13px;color:#172033;line-height:1.15}
.user-menu small{display:block;font-size:11px;color:#64748b;margin-top:2px}
.user-avatar{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    color:#fff;background:var(--brand-navy);
    font-size:13px;font-weight:800;
}

/* Login */
.login-body{
    background:#f5f7fa;
    min-height:100vh;
}
.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(360px,42%) 1fr;
}
.login-brand-panel{
    position:relative;
    overflow:hidden;
    padding:56px;
    color:#fff;
    background:
        radial-gradient(circle at 70% 10%, rgba(245,166,35,.25), transparent 28%),
        linear-gradient(145deg,var(--brand-navy),var(--brand-navy-dark));
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.login-brand-panel::after{
    content:"";
    position:absolute;
    width:360px;height:360px;border-radius:50%;
    border:70px solid rgba(245,166,35,.06);
    right:-120px;bottom:-130px;
}
.login-logo{width:74px;height:74px;object-fit:contain;margin-bottom:36px}
.login-kicker{
    color:#ffc45e;
    letter-spacing:.15em;
    font-size:11px;
    font-weight:850;
}
.login-brand-panel h1{
    font-size:52px;
    line-height:.98;
    letter-spacing:-.05em;
    margin:10px 0 18px;
    font-weight:850;
}
.login-brand-panel p{
    color:#c9d5e3;
    max-width:480px;
    font-size:16px;
    line-height:1.6;
}
.login-brand-foot{position:relative;z-index:1;color:#9fb0c3;font-size:13px}
.login-form-panel{
    display:flex;align-items:center;justify-content:center;
    padding:36px;
}
.login-card{
    width:100%;max-width:430px;
    background:#fff;border:1px solid var(--border);
    border-radius:22px;padding:36px;
    box-shadow:0 20px 50px rgba(8,43,87,.08);
}
.password-field{position:relative}
.password-field .form-control{padding-right:52px}
.password-toggle{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;border:0;background:transparent;color:#64748b;
}
.login-security{
    display:flex;align-items:center;justify-content:center;gap:7px;
    color:#7c8798;font-size:12px
}

@media(max-width:991px){
    .sidebar{width:76px;padding:24px 10px}
    .brand{justify-content:center;padding-left:0;padding-right:0}
    .brand>div:last-child,.sidebar-footer{display:none}
    .side-nav a{justify-content:center}
    .side-nav a span{display:none}
    .side-nav i{font-size:19px}
    .app-main{margin-left:76px;width:calc(100% - 76px)}
    .topbar,.content-wrap{padding-left:20px;padding-right:20px}

    .login-shell{grid-template-columns:1fr}
    .login-brand-panel{display:none}
}

@media(max-width:575px){
    .sidebar{display:none}
    .app-main{margin-left:0;width:100%}
    .topbar{height:72px}
    .content-wrap{padding:18px 14px 30px}
    .login-form-panel{padding:20px}
    .login-card{padding:26px 22px}
}


/* v1.3 */
.site-tabs{
    display:flex;
    gap:4px;
    overflow:auto;
    padding:5px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:13px;
    width:max-content;
    max-width:100%;
}
.site-tabs a{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border-radius:9px;
    text-decoration:none;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.site-tabs a:hover{background:#f8fafc;color:var(--brand-navy)}
.site-tabs a.active{
    background:var(--brand-navy);
    color:#fff;
}

.kpi-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.kpi-small{
    padding:15px 16px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
}
.kpi-small .label{
    color:#64748b;
    font-size:11px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.kpi-small .value{
    margin-top:5px;
    font-size:15px;
    font-weight:780;
    color:#172033;
}
.timeline{
    position:relative;
    padding-left:24px;
}
.timeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:6px;
    bottom:6px;
    width:2px;
    background:#e5e7eb;
}
.timeline-item{
    position:relative;
    padding:0 0 22px 10px;
}
.timeline-item::before{
    content:"";
    position:absolute;
    width:11px;height:11px;
    border-radius:50%;
    left:-23px;top:5px;
    background:var(--brand-orange);
    box-shadow:0 0 0 4px var(--brand-orange-soft);
}
.timeline-item:last-child{padding-bottom:0}

.danger-zone{
    border-color:#fecaca;
    background:#fffafa;
}
.url-card{
    border:1px solid var(--border);
    border-radius:14px;
    padding:17px;
    background:#fff;
}
.url-card.inactive{opacity:.65;background:#f8fafc}
.url-main{
    word-break:break-all;
    font-size:13px;
    color:#64748b;
}
.collection-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#64748b;
}
.collection-status .dot{
    width:7px;height:7px;border-radius:50%;
    background:#94a3b8;
}
.collection-status.good .dot{background:#22c55e}
.collection-status.bad .dot{background:#ef4444}
.collection-status.waiting .dot{background:#f59e0b}

.history-table td,.history-table th{white-space:nowrap}
.code-note{
    background:#0f172a;
    color:#dbeafe;
    border-radius:10px;
    padding:12px 14px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
}

@media(max-width:991px){
    .kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:575px){
    .kpi-strip{grid-template-columns:1fr}
}