:root{
  --bg:#0B1930; --surface:#122544; --surface2:#1A3358; --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --text:#F1F5F9; --muted:#94A7C4; --accent:#38BDF8; --on-accent:#0B1930;
  --accent2:#7DD3FC; --danger:#FF6B6B;
  --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Manrope',system-ui,sans-serif; min-height:100vh;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}

.center-screen{min-height:100vh; display:grid; place-items:center; padding:24px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:0 8px 24px rgba(0,0,0,.3);}
.login-card{width:100%; max-width:380px;}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:28px;}
.brand-logo{height:34px; width:auto; display:block; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.brand:hover .brand-logo{transform:scale(1.05);}

label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 6px;}
input, select, textarea{
  width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:9px;
  color:var(--text); padding:11px 12px; font-size:14px; font-family:inherit; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:hover, select:hover, textarea:hover{border-color:var(--border-strong);}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,.22);}
textarea{resize:vertical; min-height:90px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:0; border-radius:9px; padding:11px 18px; font-weight:600; font-size:14px;
  font-family:inherit; transition:transform .15s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(56,189,248,.5);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent2); transform:translateY(-1px);}
.btn-danger{background:rgba(255,107,107,.1); color:var(--danger); border:1px solid rgba(255,107,107,.3);}
.btn-danger:hover{background:rgba(255,107,107,.2); transform:translateY(-1px);}
.btn-block{width:100%; margin-top:22px;}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

.error-msg{color:var(--danger); font-size:13px; margin-top:12px; display:none;}
.error-msg.show{display:block;}

/* Dashboard shell */
.shell{display:flex; min-height:100vh;}
.sidebar{width:220px; background:var(--surface); border-right:1px solid var(--border); padding:24px 16px; flex-shrink:0;}
.sidebar .brand{margin-bottom:36px; padding:0 8px;}
.side-user{font-size:12px; color:var(--muted); padding:0 8px 20px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-wrap:break-word; word-break:break-word;}
.side-user .mono{display:block; margin-top:4px; font-size:11.5px; line-height:1.4;}
.side-link{display:block; padding:10px 8px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:500; margin-bottom:4px; cursor:pointer; transition:background .2s ease, color .2s ease, padding-left .2s ease;}
.side-link:hover{background:var(--surface2); color:var(--text); padding-left:12px;}
.side-link.active{background:rgba(56,189,248,.16); color:var(--accent2);}
.side-logout{margin-top:24px; font-size:13px;}
.side-logout:hover{color:var(--danger); background:transparent; padding-left:8px;}

.main{flex:1; padding:32px 40px; max-width:1180px;}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.page-title{font-family:'Fraunces',serif; font-size:26px; font-weight:600; margin:0;}
.page-sub{color:var(--muted); font-size:13px; margin-top:4px;}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:28px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; transition:transform .2s ease, border-color .2s ease;}
.stat-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.stat-num{font-family:'Fraunces',serif; font-size:28px; font-weight:600;}
.stat-label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}

.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th, td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
th{color:var(--muted); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.05em;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:var(--surface2);}
.prod-cell{display:flex; align-items:center; gap:10px;}
.thumb{width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--surface2); flex-shrink:0; transition:transform .2s ease;}
tbody tr:hover .thumb{transform:scale(1.08);}
.badge{display:inline-block; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:600; font-family:'IBM Plex Mono',monospace;}
.badge-published{background:rgba(0,200,150,.14); color:var(--accent2);}
.badge-draft{background:rgba(155,161,172,.15); color:var(--muted);}
.row-actions{display:flex; gap:8px;}
.row-actions button{padding:6px 12px; font-size:12.5px;}
.empty-state{padding:60px 20px; text-align:center; color:var(--muted);}

/* Modal form */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; z-index:100;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:640px; padding:28px 32px 32px; margin-bottom:40px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.modal-title{font-family:'Fraunces',serif; font-size:19px; font-weight:600; margin:0;}
.close-x{cursor:pointer; color:var(--muted); background:none; border:0; font-size:20px; line-height:1; transition:color .2s ease, transform .2s ease;}
.close-x:hover{color:var(--danger); transform:rotate(90deg);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hint{font-size:11.5px; color:var(--muted); margin-top:4px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:26px;}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:16px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; text-transform:none; font-size:13.5px; color:var(--text);}

/* ============ Filter pills (Clients page) ============ */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.filter-pill{
  padding:8px 16px; border-radius:100px; border:1px solid var(--border-strong); background:transparent;
  color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:all .2s ease;
}
.filter-pill:hover{color:var(--text); border-color:var(--accent);}
.filter-pill.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}

/* ============ Plan / status badges ============ */
.badge-onetime{background:rgba(148,167,196,.16); color:var(--muted);}
.badge-subscription{background:var(--accent-soft, rgba(56,189,248,.16)); color:var(--accent);}
.badge-active{background:rgba(125,211,252,.14); color:var(--accent2);}
.badge-expired{background:rgba(255,107,107,.14); color:var(--danger);}
.badge-cancelled{background:rgba(148,167,196,.14); color:var(--muted);}

/* ============ Urgency row tinting (Renewals page) ============ */
tr.urgency-overdue{background:rgba(255,107,107,.06);}
tr.urgency-overdue:hover{background:rgba(255,107,107,.11);}
tr.urgency-soon{background:rgba(255,193,56,.05);}
tr.urgency-soon:hover{background:rgba(255,193,56,.10);}
.urgency-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 8px; border-radius:100px; font-weight:600;}
.urgency-tag.overdue{background:rgba(255,107,107,.16); color:var(--danger);}
.urgency-tag.soon{background:rgba(255,193,56,.16); color:#FFC138;}
.urgency-tag.later{background:rgba(148,167,196,.14); color:var(--muted);}

/* ============ Dashboard: top products / recent sales ============ */
.dash-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.panel h3{font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:0 0 16px;}
.rank-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); gap:12px;}
.rank-row:last-child{border-bottom:none;}
.rank-info{display:flex; align-items:center; gap:10px; min-width:0;}
.rank-num{width:22px; height:22px; border-radius:6px; background:var(--surface2); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--muted); flex-shrink:0;}
.rank-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank-sub{font-size:11.5px; color:var(--muted);}
.rank-value{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--accent2); flex-shrink:0; white-space:nowrap;}

.recent-row{padding:12px 0; border-bottom:1px solid var(--border);}
.recent-row:last-child{border-bottom:none;}
.recent-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.recent-client{font-size:13.5px; font-weight:600;}
.recent-amount{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent2); white-space:nowrap;}
.recent-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}

.empty-mini{color:var(--muted); font-size:13px; padding:20px 0; text-align:center;}

@media (max-width:980px){
  .dash-grid{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
  .sidebar .brand{margin-bottom:0;}
  .side-user, .side-link:not(.side-logout){display:none;}
  .main{padding:24px 18px;}
  .field-row{grid-template-columns:1fr;}
}