:root{--bg:#f4f7fb;--panel:#fff;--ink:#172033;--muted:#6b7588;--line:#e6eaf0;--primary:#4f46e5;--primary2:#6366f1;--shadow:0 14px 38px rgba(25,35,55,.07);--radius:18px;--danger:#dc3545;--success:#0f9d73;--warning:#c78100;--info:#3867d6}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{min-height:100vh}.container{max-width:1320px;margin:0 auto;padding:0 28px}.topbar{height:76px;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;flex:0 0 auto;white-space:nowrap}.brand-mini,.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;font-weight:900}.brand-mini{width:34px;height:34px;border-radius:10px}.topbar nav{display:flex;gap:6px;flex:1;min-width:0}.topbar nav a{padding:9px 12px;color:#657086;border-radius:9px}.topbar nav a:hover{background:#f1f3f8;color:var(--ink)}.top-user{display:flex;align-items:center;gap:14px;color:#4f596d;flex:0 0 auto;white-space:nowrap}.logout{color:#7a8496}.page{padding:42px 0 70px}.page.narrow{max-width:900px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.page-head h1{margin:4px 0 6px;font-size:32px;line-height:1.15;letter-spacing:-.035em}.eyebrow,.side-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--primary)}.muted{color:var(--muted)}.small{font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;padding:11px 16px;font-weight:750;transition:.18s ease}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(79,70,229,.18)}.btn.primary:hover{background:#4338ca;transform:translateY(-1px)}.btn.secondary{background:#fff;border:1px solid var(--line);color:#354054}.btn.secondary:hover{border-color:#cfd5df;background:#fafbfc}.btn.ghost{background:transparent;color:#6b7588}.btn.danger{background:#d93b4b;color:#fff}.btn.tiny{padding:7px 10px;font-size:12px}.full{width:100%}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.metric-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.metric-card.accent{border-color:#d9d7ff;background:linear-gradient(145deg,#fff,#f8f7ff)}.metric-card span{display:block;color:var(--muted);font-size:12px;font-weight:700}.metric-card strong{display:block;font-size:34px;line-height:1.1;margin:8px 0}.metric-card small{color:#8992a2}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel h2{margin:0;font-size:18px}.panel h3{margin:0 0 10px}.table-wrap{overflow:auto;margin:0 -4px}.table-wrap table{width:100%;border-collapse:collapse;min-width:760px}.table-wrap th{text-align:left;color:#8992a2;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:12px 12px;border-bottom:1px solid var(--line)}.table-wrap td{padding:15px 12px;border-bottom:1px solid #edf0f4;vertical-align:middle}.table-wrap tr:last-child td{border-bottom:0}.ticket-id{font-weight:800;color:var(--primary)}.subline{font-size:11px;color:#9098a7;margin-top:2px}.text-link{color:var(--primary);font-weight:750}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge.large{padding:7px 12px}.badge.success{background:#e7f8f2;color:#087d5a}.badge.warning{background:#fff4d9;color:#9a6500}.badge.info{background:#eaf0ff;color:#2f5bc4}.badge.neutral{background:#f0f2f5;color:#626d80}.priority{font-size:12px;font-weight:750}.priority.urgent{color:#c6283d}.priority.high{color:#b96b00}.priority.normal{color:#49627c}.priority.low{color:#7b8492}.empty{text-align:center;padding:54px 20px;color:var(--muted)}.empty.compact{padding:30px}.empty-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e7f8f2;color:#087d5a;font-weight:900}.empty h3{color:var(--ink);margin:0 0 5px}.empty p{margin:0 0 18px}.empty-cell{text-align:center!important;padding:45px!important;color:var(--muted)}.form-panel{padding:30px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field.full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:800;color:#394356;margin:0 0 7px}input,select,textarea{width:100%;border:1px solid #dfe4eb;background:#fff;color:var(--ink);border-radius:10px;padding:11px 12px;outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:#8e89f2;box-shadow:0 0 0 3px rgba(99,102,241,.1)}textarea{resize:vertical;min-height:120px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.file-hint{font-size:11px;color:#8b94a3;margin-top:7px}.alert{border-radius:11px;padding:12px 14px;margin-bottom:16px;border:1px solid}.alert.success{background:#eaf9f4;color:#087d5a;border-color:#ccefe2}.alert.danger{background:#fff0f2;color:#b42336;border-color:#ffd4da}.filter-bar{display:flex;gap:10px;margin-bottom:18px}.filter-bar input{flex:1}.filter-bar select{width:180px}.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.ticket-meta{display:flex;gap:8px;margin-bottom:18px}.ticket-body{font-size:15px;line-height:1.8;color:#303a4d;white-space:normal}.attachments{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.attachment-grid{display:grid;gap:8px}.attachment{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:10px;background:#fafbfc}.attachment>span{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:#eef0ff;color:var(--primary);font-size:9px;font-weight:900}.attachment strong{display:block;font-size:12px}.attachment small{display:block;color:#8992a2;font-size:10px;margin-top:2px}.comment{display:flex;gap:12px;padding:17px 0;border-bottom:1px solid #edf0f4}.comment:last-child{border-bottom:0}.avatar{width:34px;height:34px;border-radius:10px;background:#eef0ff;color:var(--primary);display:grid;place-items:center;font-weight:850;flex:0 0 auto}.comment-head{display:flex;gap:10px;align-items:center}.comment-head span{font-size:11px;color:#8c95a4}.comment-body{margin-top:6px;color:#3d4657;line-height:1.7}.side-panel{position:sticky;top:95px}.big-number{display:block;font-size:40px;line-height:1.1;margin:8px 0}.big-number small{font-size:13px;color:var(--muted);font-weight:700}.progress{height:8px;background:#edf0f4;border-radius:99px;overflow:hidden;margin:15px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#8b5cf6);border-radius:99px}.closed-note{background:#f5f7fa;border:1px solid var(--line);border-radius:11px;padding:12px;color:#596476;font-size:12px;line-height:1.6}.admin-action{margin-top:18px}.admin-action hr{border:0;border-top:1px solid var(--line);margin:22px 0}.inline-form{display:contents}.small-input{width:100px;padding:7px 8px}.code,code{font-size:11px;white-space:pre-wrap;color:#657086}.auth-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 80% 10%,#e7e8ff 0,#f4f7fb 34%,#eef2f8 100%)}.auth-shell{width:min(1050px,92vw);display:grid;grid-template-columns:1fr .75fr;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 28px 80px rgba(35,43,70,.12);overflow:hidden;position:relative}.auth-card{padding:82px 58px 48px;min-width:0}.auth-card h1{font-size:32px;letter-spacing:-.04em;margin:7px 0}.auth-card form{margin-top:28px}.auth-card form label{margin-top:16px}.password-wrap{position:relative}.password-wrap input{padding-right:42px}.ghost-icon{position:absolute;right:6px;top:5px;border:0;background:transparent;color:#8891a0;padding:8px}.auth-foot{text-align:center;margin-top:22px;color:#7d8797;font-size:12px}.auth-foot a{color:var(--primary);font-weight:750}.brand-mark{width:52px;height:52px;border-radius:16px;position:absolute;top:28px;left:30px;z-index:2;box-shadow:0 10px 24px rgba(79,70,229,.18)}.auth-side{padding:64px 48px;background:linear-gradient(150deg,#171c35,#29306b);color:#fff;display:flex;flex-direction:column;justify-content:center}.auth-side .side-kicker{color:#aab2ff}.auth-side h2{font-size:34px;line-height:1.08;letter-spacing:-.04em;margin:12px 0}.auth-side p{color:#c8cce1;line-height:1.7}.side-stat{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:20px}.side-stat strong{display:block;font-size:25px}.side-stat span{font-size:12px;color:#c8cce1}@media(max-width:850px){.auth-shell{grid-template-columns:1fr}.auth-side{display:none}.auth-card{padding:92px 28px 35px}.metric-grid,.ticket-layout{grid-template-columns:1fr}.topbar{gap:12px}.topbar nav{display:none}.container{padding:0 16px}.page{padding-top:28px}.page-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.filter-bar{flex-wrap:wrap}.filter-bar input,.filter-bar select{width:100%;flex:1}.side-panel{position:static}}

/* VME Support Desk UI polish */
.topbar{box-shadow:0 2px 18px rgba(25,35,55,.04)}
.brand{font-size:15px}.topbar nav a{position:relative}
.nav-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:5px;border-radius:999px;background:#dc3545;color:#fff;font-size:10px;font-weight:900}
.user-chip{display:flex;align-items:center;gap:8px;font-weight:700}.user-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:#20b486;box-shadow:0 0 0 4px #e7f8f2}
.new-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#fff0f2;color:#b42336;font-size:10px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.new-pill.prominent{padding:8px 11px;font-size:11px}
.new-dot{width:6px;height:6px;border-radius:50%;background:#dc3545;box-shadow:0 0 0 3px rgba(220,53,69,.10)}
.ticket-head-actions{display:flex;align-items:center;gap:10px}
.role-label{font-size:10px;font-weight:800;padding:3px 6px;border-radius:6px;background:#eef0ff;color:#4f46e5}
.comment-admin{padding:18px 14px;border-radius:12px;background:#fafaff;margin:8px 0;border:1px solid #eeedff}
.comment-user{padding:18px 14px;border-radius:12px;background:#fff;margin:8px 0}
.reply-box{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.metric-card{position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:50%;background:rgba(99,102,241,.055)}
.panel{transition:box-shadow .18s ease,border-color .18s ease}.panel:hover{box-shadow:0 18px 46px rgba(25,35,55,.08)}
.table-wrap tr:hover td{background:#fbfcff}
@media(max-width:850px){.ticket-head-actions{width:100%;justify-content:flex-start}}

/* UI polish / accessibility */
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(99,102,241,.22);outline-offset:2px
}
.topbar .brand:hover .brand-mini{transform:translateY(-1px)}
.brand-mini{transition:transform .18s ease}
.new-pill{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 7px;border-radius:999px;background:#fff0f2;color:#b42336;font-size:10px;font-weight:850;white-space:nowrap}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:#dc3545;color:#fff;font-size:10px;font-weight:900;line-height:1}
@media(max-width:1050px) and (min-width:851px){
  .container{padding:0 18px}
  .topbar{gap:16px}
  .topbar nav a{padding:8px 9px}
  .top-user{gap:9px;font-size:13px}
}