:root{
    --base:#E7E7F0;
    --tone-1:#8A8EA7;
    --tone-2:#2C3254;
    --blue:#388DCF;
    --green:#97B94F;
    --red:#B31B41;
    --strong-blue:#0076C7;
    --amber:#C18418;
    --white:#FFFFFF;
    --text:#252943;
    --muted:#666C84;
    --border:#D8DAE6;
    --surface:#F7F7FB;
}

*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--surface);color:var(--text)}
a{color:var(--strong-blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1240px,calc(100% - 32px));margin:0 auto}

header{background:var(--tone-2);color:#fff;padding:15px 0;box-shadow:0 2px 10px rgba(44,50,84,.13)}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:21px;font-weight:700}
nav{display:flex;gap:17px;flex-wrap:wrap}
nav a{color:#fff;font-weight:600}

main{padding:30px 0 42px}
h1{margin:0 0 7px;font-size:36px;color:var(--tone-2)}
h2{margin:0;color:var(--tone-2);font-size:21px}
.subtitle{margin:0;color:var(--muted)}
.page-title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:23px}

.filter-panel,.panel,.hero-card,.metric{
    background:#fff;border:1px solid var(--border);border-radius:14px;
}
.filter-panel{padding:18px;margin-bottom:20px}
.filter-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:15px;margin-bottom:14px}
label{display:block;margin-bottom:6px;font-weight:700;color:var(--tone-2)}
input,select,button{font:inherit}
input[type=date],select,input[type=file],input[type=text],input[type=number]{
    width:100%;padding:11px 12px;border:1px solid var(--tone-1);border-radius:8px;background:#fff;color:var(--text)
}
button,.button{border:0;border-radius:8px;padding:10px 16px;background:var(--strong-blue);color:#fff;cursor:pointer;font-weight:700}
button:hover,.button:hover{background:var(--blue);text-decoration:none}

.alert{padding:13px 15px;margin-bottom:18px;border:1px solid;border-radius:10px}
.alert.info{background:#EEF6FC;color:#245E8E;border-color:#B9D9EF}
.alert.success{background:#F3F8EA;color:#58751D;border-color:#CFE0AC}
.alert.error{background:#FBECEF;color:var(--red);border-color:#EAB4C0}

.hero-metrics{display:grid;grid-template-columns:1.25fr 1fr 1.25fr .65fr;gap:16px;margin-bottom:16px}
.hero-card{padding:20px;min-height:145px;display:flex;flex-direction:column;justify-content:center;border-top:5px solid var(--blue)}
.hero-card.primary{background:var(--tone-2);color:#fff;border:0}
.hero-card.success{border-top-color:var(--green)}
.hero-card.compact{border-top-color:var(--tone-1)}
.hero-card .eyebrow{font-size:13px;opacity:.76;margin-bottom:8px}
.hero-card strong{font-size:31px;line-height:1.1}
.hero-card small{margin-top:9px;opacity:.72;line-height:1.35}

.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric{padding:15px;display:flex;align-items:center;gap:13px}
.metric-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:var(--base);color:var(--tone-2);flex:0 0 auto}
.metric-icon.red{background:#F8E7EB;color:var(--red)}
.metric-icon.blue{background:#E5F2FB;color:var(--strong-blue)}
.metric-icon.green{background:#EFF5E2;color:#657F28}
.metric-icon.amber{background:#FBF1DE;color:#986612}
.metric-icon.dark{background:var(--tone-2);color:#fff}
.metric span{display:block;color:var(--muted);font-size:13px}
.metric strong{display:block;margin-top:5px;color:var(--tone-2);font-size:21px}

.chart-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-bottom:16px}
.chart-grid.lower{grid-template-columns:1.25fr .85fr}
.panel{padding:20px}
.panel-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:15px}
.panel-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}
.chart-wrap{height:310px;position:relative}
.chart-wrap.doughnut{height:310px}

.insight-list{display:grid;gap:0}
.insight-list>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--border)}
.insight-list span{color:var(--muted)}
.insight-list strong{color:var(--tone-2);font-size:18px}
.notice{margin-top:17px;padding:13px;background:var(--base);border-radius:10px;color:var(--tone-2);font-size:13px;line-height:1.45}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:var(--base);color:var(--tone-2);white-space:nowrap}
tbody tr:hover{background:#FAFAFD}
.text-right{text-align:right}
.table-scroll{overflow-x:auto}
.status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.status.released{background:#EFF5E2;color:#657F28}
.status.pending{background:#FBF1DE;color:#986612}
.status.refunded{background:#F8E7EB;color:var(--red)}
.muted{color:var(--muted)}
footer{padding-top:15px;color:var(--muted);font-size:12px}

@media(max-width:1050px){
    .hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
    .filter-grid,.chart-grid,.chart-grid.lower{grid-template-columns:1fr}
}
@media(max-width:560px){
    .hero-metrics,.metrics-grid{grid-template-columns:1fr}
    h1{font-size:30px}
    .chart-wrap{height:280px}
}

.form-group{margin-bottom:15px}
input[type=file]{width:100%;padding:11px;border:1px solid var(--tone-1);border-radius:8px;background:#fff}
.upgrade-wrap{padding-top:60px;max-width:760px}
.highlight-paid{border:2px solid rgba(151,185,79,.65);box-shadow:0 8px 22px rgba(151,185,79,.12)}