:root{
  --bg:#0b0f17; --bg2:#0f1623; --panel:#141c2b; --panel2:#1a2334;
  --line:#26314a; --txt:#e8ecf4; --muted:#8b97ad;
  --accent:#5b8cff; --accent2:#7c5cff;
  --green:#28d07f; --yellow:#f4b740; --red:#ff5d6c; --gray:#6b7793;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:radial-gradient(1200px 600px at 80% -10%, #16203a 0%, var(--bg) 55%);
  color:var(--txt); font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif; font-size:14.5px;}
a{color:var(--accent); text-decoration:none;}
h1{font-size:24px; font-weight:800; margin:0;}
h2{font-size:16px; font-weight:700; margin:0 0 14px;}
h3{font-size:14px; font-weight:700; margin:18px 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.muted{color:var(--muted);}
code{background:#0a0e16; padding:2px 6px; border-radius:6px; font-size:12.5px;
  overflow-wrap:anywhere; word-break:break-all;}

/* ── Layout ── */
.layout{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.sidebar{background:linear-gradient(180deg,var(--bg2),#0c1220); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;}
.logo{font-size:18px; font-weight:800; display:flex; align-items:baseline; gap:6px;
  padding:6px 8px 18px; color:var(--txt); cursor:pointer;}
.logo:hover{opacity:.85;}
.logo span{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo em{font-style:normal; font-size:11px; color:var(--muted); font-weight:600;}
.side-nav{display:flex; flex-direction:column; gap:4px;}
.side-nav a{padding:10px 12px; border-radius:10px; color:var(--txt); font-weight:500;}
.side-nav a:hover{background:var(--panel);}
.sidebar-bottom{margin-top:auto; padding-top:16px; border-top:1px solid var(--line);}
.me{display:flex; gap:10px; align-items:center; padding:6px 4px;}
.avatar{width:38px; height:38px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;}
.me-name{font-weight:600;} .me-role{font-size:12px; color:var(--muted);}
.logout{display:block; margin-top:10px; padding:8px 12px; color:var(--muted);}
.content{padding:28px 32px; max-width:1180px;}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.back{color:var(--muted);}

/* ── Tabs ── */
.tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.tab{padding:9px 15px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; color:var(--txt); font-weight:500;}
.tab:hover{border-color:var(--accent);}
.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff;}
.tab-esc{border-color:#4a3a18;}
.badge{background:rgba(255,255,255,.12); border-radius:20px; padding:0 8px; margin-left:4px; font-size:12px;}

/* ── Ticket grid (queue) ── */
.ticket-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px;}
.tcard{display:block; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px; transition:.15s; box-shadow:var(--shadow);}
.tcard:hover{transform:translateY(-2px); border-color:var(--accent);}
.tcard-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.tid{font-weight:800; color:var(--muted);}
.tcard-subj{font-weight:600; margin-bottom:10px;}
.tcard-meta{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--muted);}

/* ── Pills / tags ── */
.pill{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;}
.pill-open{background:rgba(40,208,127,.16); color:var(--green);}
.pill-in_progress{background:rgba(244,183,64,.16); color:var(--yellow);}
.pill-closed{background:rgba(107,119,147,.2); color:var(--gray);}
.pill-esc{background:rgba(124,92,255,.18); color:#a98bff;}
.tag{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:rgba(255,93,108,.16); color:var(--red);}

/* ── Ticket detail ── */
.flash{background:rgba(40,208,127,.12); border:1px solid #1f5a3e; color:#9af0c2;
  padding:11px 14px; border-radius:12px; margin-bottom:16px; white-space:pre-wrap;}
.ticket-header{margin-bottom:18px;}
.ticket-header h1{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ticket-meta{color:var(--muted); margin-top:8px; font-size:13px;}
.cols{display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start;}
@media(max-width:900px){.cols{grid-template-columns:1fr;} .layout{grid-template-columns:1fr;} .sidebar{position:static;height:auto;}}
.col{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px;
  box-shadow:var(--shadow); min-width:0;}

.chat{max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px;}
.chat-col{display:flex; flex-direction:column; max-width:820px;}
.staff-chat{max-height:none; height:62vh;}
.msg{padding:10px 12px; border-radius:12px; background:#0e1422; border:1px solid var(--line); max-width:88%;}
.msg-operator{align-self:flex-end; background:linear-gradient(135deg,#1c2c52,#1a2440); border-color:#2c4070;}
.msg-client{align-self:flex-start;}
.msg-system{align-self:center; max-width:96%; background:transparent; border-style:dashed; opacity:.85; font-style:italic;}
.msg .meta{font-size:11.5px; color:var(--muted); margin-bottom:3px;}
.msg .text{white-space:pre-wrap; overflow-wrap:anywhere;}
.att-img{display:block; max-width:240px; max-height:240px; margin-top:8px; border-radius:10px; border:1px solid var(--line); cursor:zoom-in;}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.92); display:none;
  align-items:center; justify-content:center; z-index:2000; cursor:zoom-out;}
.lightbox.show{display:flex;}
.lightbox img{max-width:95vw; max-height:95vh; border-radius:8px; box-shadow:0 12px 50px rgba(0,0,0,.7);}
.att-vid{display:block; max-width:280px; max-height:300px; margin-top:8px; border-radius:10px; border:1px solid var(--line); background:#000;}
.att-doc{display:inline-block; margin-top:8px;}

/* notifications control in sidebar */
.notif-box{border-top:1px solid var(--line); padding:12px 4px 4px; margin-top:10px;}
.notif-row{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:8px;}
.notif-box input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer;}
.notif-test{width:100%; margin-top:8px; background:var(--panel2); color:var(--txt);
  border:1px solid var(--line); border-radius:8px; padding:7px; font-size:12.5px; cursor:pointer;}
.notif-test:hover{border-color:var(--accent);}
.switch{position:relative; display:inline-block; width:38px; height:22px;}
.switch input{display:none;}
.slider-sw{position:absolute; inset:0; background:#2a3550; border-radius:20px; transition:.2s;}
.slider-sw::before{content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider-sw{background:linear-gradient(135deg,var(--accent),var(--accent2));}
.switch input:checked + .slider-sw::before{transform:translateX(16px);}

/* toasts */
#toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:1000;}
.toast{display:block; background:var(--panel2); color:var(--txt); border:1px solid var(--accent);
  border-left:4px solid var(--accent); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow);
  max-width:320px; text-decoration:none; transform:translateX(120%); opacity:0; transition:.3s;}
.toast.show{transform:translateX(0); opacity:1;}
.toast:hover{filter:brightness(1.1);}

.quick-replies{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.chip{background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  padding:6px 11px; border-radius:20px; font-size:12.5px; font-weight:500;}
.chip:hover{border-color:var(--accent); color:#fff;}
.reply{margin-top:10px; display:flex; flex-direction:column; gap:10px;}
.reply-bar{display:flex; gap:10px; align-items:center;}
.reply-bar .btn-primary{flex:1;}
.file-label{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-weight:600; white-space:nowrap;}
.file-label input{display:none;}
textarea,input,select{width:100%; background:#0a0e16; color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit;}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--accent);}
.divider{height:1px; background:var(--line); margin:16px 0;}

button{cursor:pointer; font:inherit; font-weight:600; border:0; border-radius:10px; padding:10px 14px;}
.btn{background:var(--panel2); color:var(--txt); border:1px solid var(--line);}
.btn:hover{border-color:var(--accent);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;}
.btn-ok{background:rgba(40,208,127,.16); color:var(--green); border:1px solid #1f5a3e;}
.btn-warn{background:rgba(124,92,255,.16); color:#a98bff; border:1px solid #3b2f6b;}
.btn-danger{background:rgba(255,93,108,.14); color:var(--red); border:1px solid #5a2530;}
.action-row{display:flex; gap:8px; flex-wrap:wrap;}
.action-row form{margin:0;}
.label-form{display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap;}
.label-form input{flex:1; min-width:160px;}
.label-form .quick{display:flex; gap:8px; flex-wrap:wrap; width:100%;}
.label-form .quick a{font-size:12px; color:var(--muted); border:1px dashed var(--line); padding:2px 8px; border-radius:12px;}

/* ── Panel card ── */
.acct{border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; background:rgba(255,255,255,.012);}
.acct[open]{background:rgba(91,140,255,.05); border-color:#2c3a5c;}
.acct-sum{font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  cursor:pointer; list-style:none; user-select:none;}
.acct-sum::-webkit-details-marker{display:none;}
.acct-sum::before{content:'▸'; color:var(--muted); transition:transform .15s;}
.acct[open] .acct-sum::before{transform:rotate(90deg);}
.acct[open] .acct-sum{margin-bottom:12px;}
.acct-hint{margin-left:auto; font-weight:500; font-size:12.5px;}
.panel-card{background:#0e1422; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px;}
.prow{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04);}
.prow:last-child{border-bottom:0;}
.prow span{color:var(--muted);}
.bar{height:6px; background:#0a0e16; border-radius:6px; overflow:hidden; margin:6px 0 2px;}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2));}
.link-block{margin-bottom:12px;}
.link-head{font-size:12px; color:var(--muted); margin-bottom:6px;}
.copyline{display:flex; gap:6px; align-items:center; margin-bottom:6px; min-width:0;}
.copyline .ellip{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.btn-mini{flex:none; background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  padding:5px 9px; border-radius:8px;}
details.links{margin-bottom:12px;}
details.links summary{cursor:pointer; color:var(--accent); margin-bottom:8px;}
.panel-actions{display:flex; flex-direction:column; gap:8px;}
.panel-actions .inline{display:flex; gap:6px;}
.panel-actions .inline input,.panel-actions .inline select{flex:1;}
.panel-actions .inline button{flex:none;}
.btn-line{display:flex; gap:8px;}
.btn-line form{flex:1;} .btn-line button{width:100%;}
.panel-actions form{margin:0;}

/* ── Tables / stats ── */
table.grid{width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.grid th,.grid td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);}
.grid th{color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
.grid tbody tr:hover{background:var(--panel2);}
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px;}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow);}
.stat-num{font-size:32px; font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-num small{font-size:15px; -webkit-text-fill-color:var(--muted); color:var(--muted);}
.stat-lbl{color:var(--muted); margin-top:4px;}
.empty{text-align:center; color:var(--muted); padding:60px; font-size:18px;}
.op-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.op-add input,.op-add select{width:auto; flex:1; min-width:140px;}
.op-add button{flex:none;}
.ops-inline{display:inline-flex; gap:6px; margin:0;}
.ops-inline input{width:130px;}
.ops-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}

/* ── Auth ── */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:380px; background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:34px; box-shadow:var(--shadow); text-align:center;}
.login-logo{font-size:42px;}
.login-card h1{font-size:22px; margin-top:8px;}
.login-sub{color:var(--muted); margin:4px 0 18px;}
.login-card label{display:block; text-align:left; margin:12px 0; font-size:13px; color:var(--muted);}
.login-card input{margin-top:6px;}
.login-card button{width:100%; margin-top:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;}
.login-card .hint{color:var(--muted); font-size:11.5px; margin-top:16px;}
.error-box{background:rgba(255,93,108,.12); border:1px solid #5a2530; color:#ff97a1;
  padding:10px 12px; border-radius:10px;}

/* ───────────────── polish v8 ───────────────── */
body{background:
  radial-gradient(900px 500px at 100% -5%, rgba(124,92,255,.10), transparent 60%),
  radial-gradient(900px 500px at 0% 0%, rgba(91,140,255,.10), transparent 55%),
  var(--bg);}
*{transition:border-color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .15s ease;}
button{box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
button:active{transform:translateY(1px);}
.btn-primary,.login-card button,.op-add .btn-primary{
  background:linear-gradient(135deg,#5b8cff,#7c5cff); box-shadow:0 6px 18px rgba(91,140,255,.25);}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 8px 24px rgba(91,140,255,.35);}
textarea:focus,input:focus,select:focus{box-shadow:0 0 0 3px rgba(91,140,255,.18);}
.col,.tcard,.stat-card,.login-card,table.grid{position:relative; overflow:hidden;}
.col::before,.stat-card::before,.tcard::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(91,140,255,.5),rgba(124,92,255,.5),transparent);
  opacity:.0; transition:opacity .2s;}
.tcard:hover::before{opacity:1;}
.col::before,.stat-card::before{opacity:.5;}
.tcard:hover{box-shadow:0 12px 30px rgba(0,0,0,.45);}
.side-nav a{position:relative;}
.side-nav a:hover{transform:translateX(2px);}
.pill{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
.tab.active{box-shadow:0 6px 18px rgba(91,140,255,.28);}
.stat-card:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.4);}
.chat::-webkit-scrollbar{width:8px;} .chat::-webkit-scrollbar-thumb{background:#26314a; border-radius:8px;}
h1{letter-spacing:-.01em;}
.acct[open]{box-shadow:inset 0 0 0 1px rgba(91,140,255,.12);}
.btn-mini:hover{border-color:var(--accent); color:#fff;}