@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#181B22;
  --paper:#F7F6F2;
  --card:#FFFFFF;
  --line: rgba(20,22,28,0.10);
  --muted:#767C8C;
  --blue:#4C6FEA; --blue-dim:#EEF1FE;
  --green:#1F9C74; --green-dim:#E7F7F1;
  --amber:#B9791F; --amber-dim:#FBF1DF;
  --coral:#D14A35; --coral-dim:#FCEBE8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Fraunces',serif;}
input, select, button{font-family:'Inter',sans-serif;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15); border-radius:8px;}

/* ---------- Flash messages ---------- */
.flash{max-width:1400px; margin:0 auto; padding:14px 18px 0;}
.flash-msg{font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:11px 16px; border-radius:8px; margin-bottom:10px;}
.flash-success{background:var(--green-dim); color:var(--green); border:1px solid rgba(31,156,116,0.25);}
.flash-error{background:var(--coral-dim); color:var(--coral); border:1px solid rgba(209,74,53,0.25);}

/* ================= AUTH PAGES ================= */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:
  radial-gradient(circle at 15% 10%, rgba(76,111,234,0.08), transparent 45%),
  radial-gradient(circle at 85% 90%, rgba(31,156,116,0.08), transparent 45%), var(--paper);}
.auth-card{width:100%; max-width:400px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 28px; box-shadow:0 20px 45px rgba(20,22,28,0.06);}
.auth-brand{display:flex; align-items:center; gap:9px; margin-bottom:26px;}
.auth-brand .dot{width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-dim);}
.auth-brand span{font-family:'Fraunces',serif; font-weight:600; font-size:18px;}
.auth-card h1{font-family:'Fraunces',serif; font-weight:600; font-size:22px; margin-bottom:4px;}
.auth-card p.sub{color:var(--muted); font-size:13px; margin-bottom:22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; font-size:13.5px; background:var(--paper);}
.field input:focus{outline:none; border-color:var(--blue); background:#fff;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; font-size:13px; padding:11px 16px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-weight:500;}
.btn:hover{background:var(--paper);}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff; width:100%;}
.btn-primary:hover{background:#3E5FDB;}
.btn-block{width:100%;}
.auth-foot{margin-top:18px; text-align:center; font-size:12.5px; color:var(--muted);}
.auth-foot a{color:var(--blue); font-weight:500;}
.demo-hint{margin-top:16px; background:var(--paper); border:1px dashed var(--line); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); line-height:1.6;}

/* ================= APP SHELL ================= */
.app{min-height:100vh; display:flex;}
.sidebar{width:250px; flex-shrink:0; background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:fixed; top:0; bottom:0; left:0; z-index:50; transform:translateX(-100%); transition:transform .2s ease;}
.sidebar.open{transform:translateX(0);}
.brand{display:flex; align-items:center; gap:10px; padding:22px 22px 18px;}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-dim);}
.brand span{font-family:'Fraunces',serif; font-weight:600; font-size:18px;}
.nav{padding:0 12px;}
.nav-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin:18px 10px 8px;}
.nav-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#4A5064;}
.nav-item.active{background:var(--blue-dim); color:var(--blue); font-weight:600;}
.nav-item:hover:not(.active){background:var(--paper);}
.nav-item .count{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted);}
.status-box{margin:16px; padding:14px; border-radius:10px; background:var(--green-dim); border:1px solid rgba(31,156,116,0.15);}
.status-box .t{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--green); margin-bottom:6px; font-weight:600;}
.status-box .d{width:6px; height:6px; border-radius:50%; background:var(--green);}
.status-box p{font-size:11px; color:#3C7A63; line-height:1.5;}

.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(20,22,28,0.4); z-index:45;}
.sidebar-overlay.show{display:block;}

.main{flex:1; min-width:0;}
.topbar{position:sticky; top:0; z-index:30; background:rgba(247,246,242,0.9); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); padding:14px 18px; display:flex; align-items:center; gap:12px;}
.burger{background:none; border:none; color:#4A5064; padding:4px; display:flex; cursor:pointer;}
.search-box{flex:1; max-width:320px; position:relative; display:none;}
.search-box input{width:100%; background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px 9px 32px; font-size:13px;}
.search-box input::placeholder{color:var(--muted);}
.search-icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted);}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.bell{position:relative; color:#4A5064;}
.bell .badge{position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%; background:var(--coral); font-family:'IBM Plex Mono',monospace; font-size:8.5px; display:flex; align-items:center; justify-content:center; color:#fff;}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:12px; flex-shrink:0;}
.who{line-height:1.2; display:none;}
.who .n{font-size:12.5px; font-weight:600;}
.who .r{font-size:10.5px; color:var(--muted);}
.logout-link{color:var(--coral); font-family:'IBM Plex Mono',monospace; font-size:11px;}

.content{padding:22px 16px 60px;}
.page-head{margin-bottom:22px;}
.page-head h1{font-family:'Fraunces',serif; font-weight:600; font-size:24px;}
.page-head p{color:var(--muted); font-size:12.5px; margin-top:5px;}
.page-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}

/* ================= KPI / CARDS ================= */
.kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px;}
.kpi-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.kpi-top .k{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);}
.kpi-top .tag{font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 6px; border-radius:5px;}
.tag-green{background:var(--green-dim); color:var(--green);}
.tag-amber{background:var(--amber-dim); color:var(--amber);}
.tag-coral{background:var(--coral-dim); color:var(--coral);}
.tag-mute{background:var(--paper); color:var(--muted);}
.kpi .v{font-family:'Fraunces',serif; font-weight:600; font-size:24px;}
.kpi .v.amber{color:var(--amber);} .kpi .v.coral{color:var(--coral);} .kpi .v.green{color:var(--green);}
.kpi .sub{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:8px;}
.kpi svg{width:100%; height:22px; margin-top:6px; display:block;}

.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; overflow:hidden;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap;}
.panel-head h2{font-family:'Fraunces',serif; font-weight:600; font-size:15px;}
.panel-head .sub{font-size:11px; color:var(--muted); margin-top:2px;}
.panel-body{padding:18px;}
.link{color:var(--blue); font-family:'IBM Plex Mono',monospace; font-size:11.5px; cursor:pointer; border:none; background:none;}

.chip-row{display:flex; gap:6px; overflow-x:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px;}
.chip{padding:6px 11px; border-radius:20px; border:1px solid var(--line); color:var(--muted); white-space:nowrap;}
.chip.on{background:var(--blue-dim); border-color:var(--blue); color:var(--blue);}

.donut-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.donut{width:150px; height:150px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center;}
.donut::after{content:""; width:96px; height:96px; border-radius:50%; background:var(--card); position:absolute;}
.donut .mid{position:relative; z-index:2; text-align:center;}
.donut .mid .n{font-family:'Fraunces',serif; font-weight:600; font-size:22px;}
.donut .mid .l{font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--muted); text-transform:uppercase;}
.legend{display:flex; flex-direction:column; gap:8px; width:100%; font-family:'IBM Plex Mono',monospace; font-size:12px;}
.legend div{display:flex; justify-content:space-between;}
.legend .k{display:flex; align-items:center; gap:8px;}
.legend .d{width:8px; height:8px; border-radius:50%;}

.renewal-row{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line);}
.renewal-row:last-child{border-bottom:none;}
.renewal-row.overdue{background:var(--coral-dim);}
.r-avatar{width:34px; height:34px; border-radius:50%; background:var(--blue-dim); color:var(--blue); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:11.5px; flex-shrink:0;}
.r-info{flex:1; min-width:0;}
.r-info .n{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.r-info .s{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);}
.r-right{text-align:right; flex-shrink:0;}
.r-right .d{font-family:'IBM Plex Mono',monospace; font-size:12px;}
.r-right .a{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted);}

.activity-row{display:flex; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); font-size:12px;}
.activity-row:last-child{border-bottom:none;}
.a-dot{width:6px; height:6px; border-radius:50%; margin-top:5px; flex-shrink:0;}
.a-time{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:3px;}

/* ================= TABLE ================= */
table{width:100%; border-collapse:collapse;}
thead th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); font-weight:500; white-space:nowrap;}
tbody td{padding:12px 14px; font-size:12.5px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--paper);}
.cl-cell{display:flex; align-items:center; gap:9px;}
.cl-name{font-weight:600; font-size:12.5px; white-space:nowrap;}
.cl-sub{font-size:10.5px; color:var(--muted);}
.status-pill{display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11px; white-space:nowrap; padding:4px 9px; border-radius:20px;}
.status-pill .d{width:6px; height:6px; border-radius:50%;}
.pill-active{background:var(--green-dim); color:var(--green);}
.pill-due{background:var(--amber-dim); color:var(--amber);}
.pill-overdue{background:var(--coral-dim); color:var(--coral);}
.pill-cancelled{background:var(--paper); color:var(--muted);}
.table-scroll{overflow-x:auto;}
.table-scroll table{min-width:640px;}
.table-foot{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-top:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);}

.btn-sm{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:6px 11px; border-radius:6px; border:1px solid var(--line); background:#fff; cursor:pointer;}
.btn-sm-primary{background:var(--blue); color:#fff; border-color:var(--blue);}

/* ================= FORM ================= */
.form-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.form-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; max-width:560px;}

/* ================= CLIENT PORTAL SPECIFIC ================= */
.plan-hero{position:relative; overflow:hidden; background:var(--ink); color:var(--paper); border-radius:16px; padding:22px; margin-bottom:16px;}
.plan-hero::before{content:""; position:absolute; top:-90px; right:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(31,156,116,0.28), transparent 70%);}
.plan-status{position:relative; display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:#5FE0AC; margin-bottom:10px;}
.plan-status .d{width:7px; height:7px; border-radius:50%; background:#5FE0AC;}
.plan-hero h2{position:relative; font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin-bottom:8px;}
.plan-hero .desc{position:relative; font-size:12.5px; color:rgba(247,246,242,0.6); line-height:1.55; margin-bottom:16px; max-width:380px;}
.cycle-label{position:relative; display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(247,246,242,0.45); margin-bottom:6px;}
.track{position:relative; height:6px; border-radius:5px; background:rgba(255,255,255,0.12);}
.track .fill{height:6px; border-radius:5px; background:#5FE0AC;}
.plan-meta{position:relative; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); display:flex; flex-direction:column; gap:11px;}
.plan-meta .m{display:flex; justify-content:space-between; font-size:12.5px;}
.plan-meta .m .k{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:rgba(247,246,242,0.45);}
.plan-meta .m .v{font-weight:500;}
.plan-btns{display:flex; gap:8px; margin-top:5px;}
.btn-renew{flex:1; background:#5FE0AC; color:var(--ink); border:none; padding:11px; border-radius:8px; font-weight:700; font-size:12.5px; cursor:pointer;}
.btn-ghost-dark{background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,0.2); padding:11px 14px; border-radius:8px; font-size:12.5px; cursor:pointer;}

.usage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
.u-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px;}
.u-card .k{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:8px;}
.u-card .v{font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin-bottom:8px;}
.u-card .v small{font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace; font-weight:400;}
.track-lt{height:6px; border-radius:5px; background:var(--paper);}
.track-lt .fill{height:6px; border-radius:5px; background:var(--blue);}
.u-card .foot{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:8px;}

.side-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px;}
.side-card .k{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:10px;}
.card-chip{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.card-chip .c{width:38px; height:26px; border-radius:5px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:8.5px;}
.card-chip .n{font-size:12.5px; font-weight:600;}
.card-chip .e{font-size:10.5px; color:var(--muted);}
.add-method{width:100%; font-family:'IBM Plex Mono',monospace; font-size:11.5px; border:1px solid var(--line); border-radius:8px; padding:9px; background:none; cursor:pointer;}
.ticket-title{font-size:12.5px; font-weight:600; margin-bottom:4px;}
.ticket-sub{font-size:11px; color:var(--muted); margin-bottom:9px;}
.badge-amber{font-family:'IBM Plex Mono',monospace; font-size:10px; background:var(--amber-dim); color:var(--amber); padding:4px 9px; border-radius:20px;}
.paid-total{font-family:'Fraunces',serif; font-weight:600; font-size:20px;}
.empty-state{padding:40px 20px; text-align:center; color:var(--muted); font-size:13px;}

/* ===== responsive ===== */
@media (min-width: 720px){
  .sidebar{position:sticky; transform:none;}
  .sidebar-overlay{display:none !important;}
  .burger{display:none;}
  .search-box{display:block;}
  .who{display:block;}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .content{padding:28px 32px 60px;}
  .page-head{display:flex; align-items:flex-end; justify-content:space-between;}
  .page-actions{margin-top:0;}
  .two-col{display:grid; grid-template-columns:2fr 1fr; gap:16px;}
  .donut-wrap{flex-direction:row; align-items:center;}
  .usage-grid{grid-template-columns:repeat(4,1fr);}
  .portal-grid{display:grid; grid-template-columns:2fr 1fr; gap:20px;}
  .plan-hero{padding:30px; display:grid; grid-template-columns:1.3fr 1fr; gap:24px;}
  .plan-meta{border-top:none; margin-top:0; padding-top:0; border-left:1px solid rgba(255,255,255,0.12); padding-left:26px; justify-content:center;}
}
@media (min-width: 1000px){
  .kpi-grid{grid-template-columns:repeat(5,1fr);}
}