:root{
  --navy:#141b2e; --navy2:#1e2740; --gold:#c9a961; --gold2:#dcc188; --gold-soft:#faf6ec;
  --bg:#f7f8fa; --card:#fefefe; --ink:#252b38; --ink-soft:#4a5266; --muted:#7c8496; --line:#e9ebf0;
  --ok:#3d8b63; --ok-bg:#f0f9f4; --warn:#b8792e; --warn-bg:#fdf8f0; --err:#b5453d; --err-bg:#fdf3f2;
  --shadow-sm:0 1px 2px rgba(20,27,46,.04),0 1px 3px rgba(20,27,46,.03);
  --shadow:0 2px 10px rgba(20,27,46,.05),0 1px 3px rgba(20,27,46,.03);
  --shadow-lg:0 10px 32px rgba(20,27,46,.09);
  --r:12px; --r-lg:16px; --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .18s var(--ease),color .18s var(--ease)}
body{background:var(--bg)!important;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif!important;line-height:1.65;letter-spacing:.005em}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

.header{background:linear-gradient(125deg,var(--navy),var(--navy2))!important;box-shadow:0 1px 3px rgba(20,27,46,.12);padding:20px 40px!important}
.header h1{font-weight:700!important;letter-spacing:-.02em;font-size:1.35em!important;color:#f5f6f8!important}
.header p{color:var(--gold)!important;font-weight:400;opacity:.85;font-size:.88em}

.card,.box{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;
 box-shadow:var(--shadow)!important;padding:26px!important;animation:fadeUp .35s var(--ease) both}
.card:hover{box-shadow:var(--shadow-lg)!important;border-color:#dfe3ea!important}
.card h2{font-weight:650!important;font-size:1.18em!important;letter-spacing:-.015em;margin-bottom:5px!important;color:var(--ink)!important}
.card h2+p,.card>p{color:var(--muted)!important;font-size:.9em;margin-bottom:18px!important;line-height:1.6}
h3,h4{color:var(--ink)!important;font-weight:620!important;letter-spacing:-.01em}

.tabs{gap:6px!important;background:var(--card);padding:7px!important;border-radius:14px;box-shadow:var(--shadow-sm);
 display:inline-flex!important;flex-wrap:wrap;border:1px solid var(--line)}
.tab-btn{background:transparent!important;border:none!important;color:var(--muted)!important;padding:10px 17px!important;
 border-radius:9px!important;font-weight:560!important;font-size:.88em!important;letter-spacing:-.01em}
.tab-btn:hover{background:var(--gold-soft)!important;color:var(--ink)!important;transform:none!important}
.tab-btn.active{background:linear-gradient(125deg,var(--navy),var(--navy2))!important;color:#f5f6f8!important;
 box-shadow:0 2px 8px rgba(20,27,46,.18)}
.tab-btn.active::after{display:none!important}

.svc-btn{border:1px solid var(--line)!important;background:var(--card)!important;color:var(--ink-soft)!important;
 padding:13px 15px!important;border-radius:11px!important;font-weight:560!important;font-size:.88em!important;box-shadow:var(--shadow-sm)}
.svc-btn:hover{border-color:var(--gold)!important;transform:translateY(-1px);box-shadow:var(--shadow)}
.svc-btn.active{background:linear-gradient(125deg,var(--navy),var(--navy2))!important;color:#f5f6f8!important;border-color:var(--navy)!important}

button,.btn,.btn-primary,.copy-btn,.action-btn,.calc-tab,.pro-tab{font-family:inherit!important;font-weight:580!important;
 border-radius:9px!important;cursor:pointer;letter-spacing:-.01em;border:none}
.btn-primary,.btn{background:linear-gradient(125deg,var(--gold),var(--gold2))!important;color:#2a2416!important;
 padding:11px 21px!important;box-shadow:0 2px 8px rgba(201,169,97,.22);font-weight:640!important}
.btn-primary:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(201,169,97,.3);filter:brightness(1.02)}
.btn-primary:active,.btn:active{transform:translateY(0)}
button::after,.btn::after,.btn-primary::after{display:none!important}
.action-btn{padding:6px 12px!important;font-size:.79em!important;border-radius:7px!important;font-weight:560!important}
.btn-toggle{background:var(--warn-bg)!important;color:var(--warn)!important}
.btn-toggle:hover{background:var(--warn)!important;color:#fff!important}
.btn-delete{background:var(--err-bg)!important;color:var(--err)!important}
.btn-delete:hover{background:var(--err)!important;color:#fff!important}
.logout-btn{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.14)!important;color:#e8eaef!important;
 font-weight:540!important;padding:9px 17px!important;border-radius:9px!important}
.logout-btn:hover{background:var(--err)!important;border-color:var(--err)!important}

input,select,textarea{font-family:inherit!important;border:1px solid var(--line)!important;border-radius:9px!important;
 padding:10px 13px!important;font-size:.9em!important;background:#fdfdfe!important;color:var(--ink)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--gold)!important;background:#fff!important;
 box-shadow:0 0 0 3px rgba(201,169,97,.12)!important}
input::placeholder,textarea::placeholder{color:#a8b0bf}
label{font-weight:560!important;font-size:.8em!important;color:var(--muted)!important;margin-bottom:5px!important}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%237c8496' d='M5 7L0 0h10z'/%3E%3C/svg%3E")!important;
 background-repeat:no-repeat!important;background-position:right 13px center!important;padding-right:32px!important}

table{border-collapse:separate!important;border-spacing:0!important;width:100%}
th{background:#fafbfc!important;color:var(--muted)!important;font-weight:600!important;font-size:.73em!important;
 text-transform:uppercase;letter-spacing:.06em;padding:11px 14px!important;border-bottom:1px solid var(--line)!important;text-align:left}
td{padding:13px 14px!important;border-bottom:1px solid #f1f3f6!important;font-size:.88em;color:var(--ink-soft);line-height:1.55}
tbody tr{animation:fadeUp .25s var(--ease) both}
tbody tr:hover{background:var(--gold-soft)!important}
tbody tr:last-child td{border-bottom:none!important}

.badge{border-radius:20px!important;font-weight:560!important;font-size:.72em!important;padding:4px 11px!important;letter-spacing:.02em}
.badge-active{background:var(--ok-bg)!important;color:var(--ok)!important}
.badge-inactive{background:var(--err-bg)!important;color:var(--err)!important}
.badge-expiring{background:var(--warn-bg)!important;color:var(--warn)!important}

.stat-box{background:linear-gradient(135deg,var(--navy),var(--navy2))!important;border-radius:var(--r-lg)!important;
 padding:22px!important;box-shadow:var(--shadow);border:none}
.stat-box::before{display:none!important}
.stat-box .number{color:var(--gold)!important;font-weight:700!important;font-size:2.1em!important;letter-spacing:-.03em;
 animation:fadeIn .5s var(--ease) both;text-shadow:none}
.stat-box .label{color:rgba(232,234,239,.62)!important;font-weight:450!important;font-size:.8em!important;margin-top:4px!important}

#msgBox,.msg,.success-badge,.error-badge{border-radius:9px!important;font-weight:560!important;padding:12px 16px!important;
 animation:fadeUp .25s var(--ease) both;font-size:.9em}
#msgBox.success,.msg.ok,.success-badge{background:var(--ok-bg)!important;color:var(--ok)!important;border:1px solid rgba(61,139,99,.16)}
#msgBox.error,.msg.err,.error-badge{background:var(--err-bg)!important;color:var(--err)!important;border:1px solid rgba(181,69,61,.16)}

.modal.show{backdrop-filter:blur(5px);background:rgba(20,27,46,.42)!important}
.modal-content{border-radius:var(--r-lg)!important;box-shadow:var(--shadow-lg)!important;animation:pop .25s var(--ease) both;padding:28px!important}

.match-card{border-radius:var(--r)!important;border:1px solid var(--line)!important;border-left:3px solid var(--gold)!important;
 box-shadow:var(--shadow-sm);padding:18px!important}
.match-card.green{border-left-color:var(--ok)!important}
.match-card.red{border-left-color:var(--err)!important}
.match-card.orange{border-left-color:var(--warn)!important}

.calc-tab,.pro-tab{border:1px solid var(--line)!important;background:#fdfdfe!important;color:var(--muted)!important;
 padding:8px 15px!important;border-radius:8px!important;font-size:.83em!important;font-weight:560!important}
.calc-tab:hover,.pro-tab:hover{border-color:var(--gold)!important;color:var(--ink)!important}

.help-float,#homeBtn,#chatBtn{border-radius:50px!important;font-weight:600!important;padding:12px 19px!important;
 box-shadow:0 3px 14px rgba(20,27,46,.16)!important;font-size:.88em;animation:none!important}
.help-float:hover,#homeBtn:hover,#chatBtn:hover{transform:translateY(-2px)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d4d8e0;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::-webkit-scrollbar-track{background:transparent}

.container{max-width:1320px!important;padding:26px 24px!important}
.panel{animation:fadeUp .3s var(--ease) both}
body{animation:fadeIn .3s var(--ease) both}
a{color:var(--ink)}
strong{font-weight:620}

/* --- final polish --- */
.card{padding:24px!important}
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
td small{color:#8891a3;font-size:.92em}
table{font-variant-numeric:tabular-nums}
.stat-box .number{font-variant-numeric:tabular-nums}
input[type=date]{color:var(--ink-soft)}
.panel .card+.card{margin-top:16px}
h2,h3,h4{text-wrap:balance}
tbody tr:hover td{color:var(--ink)}
.badge{white-space:nowrap}
@media(max-width:900px){.container{padding:16px 12px!important}.card{padding:18px!important}
 .header{padding:16px 18px!important}table{font-size:.82em}
 #chatPanel,#bellPanel{width:calc(100vw - 32px)!important;right:16px!important}}