*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}

.app{display:flex;min-height:100vh;background:#f6f7fb}
.sidebar{width:260px;background:#111827;color:#fff;display:flex;flex-direction:column;padding:16px}
.brand{font-weight:700;font-size:18px;margin-bottom:14px}
.nav{display:flex;flex-direction:column;gap:6px}
.nav__link{padding:10px 12px;border-radius:10px;color:#cbd5e1}
.nav__link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav__link.is-active{background:rgba(255,255,255,.10);color:#fff}
.sidebar__footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.userbox{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.userbox__name{font-weight:600}
.userbox__email{font-size:12px;color:#cbd5e1;margin-top:2px}

.main{flex:1;display:flex;flex-direction:column}
.topbar{height:56px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 18px}
.topbar__title{font-weight:700}
.content{padding:18px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid--modules{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{display:none}}
@media (max-width: 560px){.grid,.grid--modules{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.card__title{font-weight:700}
.card__label{font-size:12px;color:#6b7280}
.card__value{font-size:22px;font-weight:800;margin-top:6px}
.muted{color:#6b7280;font-size:13px;margin-top:6px}
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;background:#111827;color:#fff;border:0;cursor:pointer}
.btn--ghost{background:#f3f4f6;color:#111827}
.btn--ghost:hover{background:#e5e7eb}

.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:12px;padding:6px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb}
.badge--ok{background:#ecfdf5;border-color:#a7f3d0}
.badge--warn{background:#fffbeb;border-color:#fde68a}
.badge--muted{background:#f3f4f6;border-color:#e5e7eb}

.auth{background:#f6f7fb;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.auth__card{width:100%;max-width:420px}
.field{display:block;margin:12px 0}
.field__label{font-size:12px;color:#6b7280;margin-bottom:6px}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;outline:none}
.input:focus{border-color:#9ca3af}
.alert{padding:10px 12px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;margin:10px 0}
.seg{display:inline-flex;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;overflow:hidden}
.seg__item{padding:8px 12px;font-size:13px;color:#111827}
.seg__item:hover{background:#e5e7eb}
.seg__item.is-active{background:#111827;color:#fff}

.chart{height:180px;display:flex;gap:6px;align-items:flex-end;padding:12px;border:1px solid #e5e7eb;border-radius:14px;background:#fafafa}
.chart__col{flex:1;min-width:8px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.chart__bar{border-radius:10px;min-height:2px}
.chart__bar--spend{background:#111827;opacity:.85}
.chart__bar--conv{background:#111827;opacity:.25}
.chart__x{font-size:11px;color:#6b7280;text-align:center;margin-top:4px}

.legend{display:flex;gap:14px;margin-top:10px;color:#6b7280;font-size:13px}
.legend__item{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot--spend{background:#111827;opacity:.85}
.dot--conv{background:#111827;opacity:.25}

.table{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.tr{display:grid;grid-template-columns: 2.2fr 1fr 1fr .8fr 1fr .8fr;gap:10px;padding:10px 12px;border-top:1px solid #e5e7eb;align-items:center;background:#fff}
.tr:first-child{border-top:0}
.th{background:#f9fafb;font-size:12px;color:#6b7280;font-weight:600}
.right{text-align:right}
.tr.is-warn{background:#fffbeb}