:root{
  --bg:#050816; --panel:#0d1426; --panel2:#111a31; --line:#223052;
  --txt:#e7ecf7; --muted:#94a3b8;
  --brand:#6366f1; --brand2:#8b5cf6; --accent:#22d3ee;
  --shadow:0 24px 70px -32px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(circle at 12% -10%,rgba(99,102,241,.16),transparent 32rem),
    radial-gradient(circle at 100% 100%,rgba(34,211,238,.08),transparent 30rem),
    var(--bg);
  color:#e7ecf7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(99,102,241,.4)}
button,input,select,textarea{font:inherit}
img,svg,canvas{max-width:100%}

/* ---------- Animated mesh background ---------- */
.mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 18s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:#6366f1;top:-160px;left:-120px}
.blob.b2{width:460px;height:460px;background:#8b5cf6;bottom:-160px;right:-100px;animation-delay:-6s}
.blob.b3{width:380px;height:380px;background:#22d3ee;top:40%;left:55%;opacity:.32;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.08)}66%{transform:translate(-40px,50px) scale(.95)}}

/* ---------- Glass ---------- */
.glass{background:rgba(10,16,34,.82);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.07)}
.card{
  background:linear-gradient(145deg,rgba(20,30,58,.9),rgba(10,16,33,.92));
  border:1px solid rgba(148,163,184,.1);border-radius:20px;box-shadow:var(--shadow);
}
.card:hover{border-color:rgba(129,140,248,.32)}
.lift{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.lift:hover{transform:translateY(-3px);box-shadow:0 24px 55px -28px rgba(99,102,241,.72)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;border-radius:13px;padding:.64rem 1rem;
  font-size:.875rem;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#5b5fe8,#8b5cf6);color:#fff;box-shadow:0 14px 30px -14px rgba(99,102,241,.95)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:rgba(255,255,255,.04);color:#cbd5e1;border-color:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-danger{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.35)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn:focus-visible,.nav-item:focus-visible,.input:focus-visible{
  outline:2px solid #a5b4fc;outline-offset:2px;
}

/* ---------- Inputs ---------- */
.input,select.input,textarea.input{width:100%;background:rgba(7,11,22,.6);border:1px solid var(--line);color:#e7ecf7;
  border-radius:13px;padding:.7rem .85rem;font-size:.9rem;outline:none;transition:.18s;min-height:44px}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
label.lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#8aa0c2;margin-bottom:.35rem;font-weight:600}

/* ---------- Sidebar ---------- */
.app-layout{min-height:100vh;min-height:100dvh}
.app-main{height:100vh;height:100dvh;width:100%}
.app-view{width:100%;max-width:1680px;margin:0 auto}
#sidebar{
  position:fixed!important;inset:0 auto 0 0;z-index:60;width:min(20rem,88vw)!important;height:100vh!important;height:100dvh!important;
  padding:1.1rem!important;background:linear-gradient(180deg,rgba(12,20,43,.98),rgba(7,12,27,.98));
  transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:30px 0 80px rgba(0,0,0,.55);border:0;border-right:1px solid rgba(129,140,248,.14);
}
body.sidebar-open{overflow:hidden}
body.sidebar-open #sidebar{transform:translateX(0)}
.sidebar-backdrop{
  display:block;position:fixed;inset:0;z-index:50;border:0;background:rgba(2,5,14,.72);
  backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
body.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
.menu-btn,.sidebar-close{display:inline-flex;width:44px;height:44px;padding:0;justify-content:center;flex:0 0 auto}
.menu-btn{
  border-color:rgba(129,140,248,.28);
  background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.16));
  color:#e0e7ff;box-shadow:0 10px 28px -16px rgba(99,102,241,.9);
}
.sidebar-close{margin-left:auto}
.brand-mark{box-shadow:0 14px 30px -14px rgba(99,102,241,.95)}
.nav-caption{padding:0 .75rem .55rem;color:#617394;font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
#nav{min-height:0;overflow-y:auto;padding:.15rem .2rem .5rem 0;scrollbar-width:thin}
.nav-item{display:flex;align-items:center;gap:.8rem;padding:.72rem .85rem;border-radius:13px;color:#9fb0cc;
  font-weight:550;font-size:.88rem;cursor:pointer;transition:.18s;position:relative;border:1px solid transparent}
.nav-item svg{color:#7285a7;transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.045);color:#fff;border-color:rgba(255,255,255,.05)}
.nav-item:hover svg{color:#c7d2fe}
.nav-item.active{
  background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.13));
  color:#fff;border-color:rgba(129,140,248,.2);box-shadow:0 12px 28px -22px rgba(99,102,241,.9);
}
.nav-item.active svg{color:#a5b4fc}
.nav-item.active::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  width:3px;height:55%;border-radius:4px;background:linear-gradient(#818cf8,#a78bfa)}
.app-header{
  min-height:76px;background:rgba(5,8,22,.82)!important;backdrop-filter:blur(22px);
  border:0!important;border-bottom:1px solid rgba(148,163,184,.09)!important;
  box-shadow:0 14px 38px -32px rgba(0,0,0,.95);
}
#page-title{letter-spacing:-.02em}
#page-sub{color:#7182a0}
#bell-btn{width:44px;height:44px;padding:0;justify-content:center}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .62rem;border-radius:999px;font-size:.72rem;font-weight:650;border:1px solid transparent}
.dot{width:7px;height:7px;border-radius:50%}

/* ---------- Table ---------- */
.table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:#33446c;border-radius:8px}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#7e90b0;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.8rem .9rem;border-bottom:1px solid rgba(30,42,71,.5);font-size:.875rem}
.tbl tbody tr{transition:.15s}
.tbl tbody tr:hover{background:rgba(99,102,241,.07);cursor:pointer}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.stagger>*{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.stagger>*:nth-child(1){animation-delay:.04s}.stagger>*:nth-child(2){animation-delay:.09s}
.stagger>*:nth-child(3){animation-delay:.14s}.stagger>*:nth-child(4){animation-delay:.19s}
.stagger>*:nth-child(5){animation-delay:.24s}.stagger>*:nth-child(6){animation-delay:.29s}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,#142036 25%,#1c2a47 50%,#142036 75%);background-size:800px 100%;animation:shimmer 1.3s infinite;border-radius:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}

/* ---------- Drawer / modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(3,6,15,.66);backdrop-filter:blur(3px);z-index:60;opacity:0;animation:ov .25s forwards}
@keyframes ov{to{opacity:1}}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:#0b1326;border-left:1px solid var(--line);
  z-index:70;transform:translateX(100%);animation:slideIn .32s cubic-bezier(.2,.8,.2,1) forwards;overflow-y:auto;overscroll-behavior:contain}
@keyframes slideIn{to{transform:translateX(0)}}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);z-index:70;width:min(680px,94vw);max-height:90vh;overflow-y:auto;
  background:#0b1326;border:1px solid var(--line);border-radius:18px;animation:pop .28s cubic-bezier(.2,.8,.2,1) forwards;opacity:0;overscroll-behavior:contain}
@keyframes pop{to{opacity:1;transform:translate(-50%,-50%)}}

/* ---------- Toast ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.toast{min-width:260px;padding:.85rem 1rem;border-radius:12px;color:#fff;font-size:.875rem;font-weight:500;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);animation:fadeUp .3s both;border:1px solid rgba(255,255,255,.1)}
.toast.ok{background:linear-gradient(135deg,#16a34a,#22c55e)}
.toast.err{background:linear-gradient(135deg,#dc2626,#ef4444)}
.toast.info{background:linear-gradient(135deg,#4f46e5,#6366f1)}

/* Kanban */
.kan-col{min-width:300px;width:300px;flex:0 0 auto}
.scroll-x{overflow-x:auto;scrollbar-width:thin}
.scroll-x::-webkit-scrollbar{height:8px}
.scroll-x::-webkit-scrollbar-thumb{background:#26365c;border-radius:8px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1f2c4a;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.count-up{font-variant-numeric:tabular-nums}
a{color:inherit}
.hide{display:none!important}

@media (max-width:1023px){
  .app-header{padding-left:1rem!important;padding-right:1rem!important}
  .app-view{padding:1.25rem!important}
}

@media (max-width:767px){
  .app-header{padding-top:.65rem!important;padding-bottom:.65rem!important}
  .header-leading{gap:.65rem}
  #page-title{font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #page-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .header-actions{gap:.4rem}
  .header-actions .btn{height:44px;padding:.65rem}
  .header-new-ticket{
    position:fixed;right:1rem;bottom:1rem;z-index:42;width:56px!important;height:56px!important;
    padding:0!important;justify-content:center;border-radius:18px;box-shadow:0 18px 45px -14px rgba(99,102,241,.95);
  }
  .header-new-ticket span{display:none}
  #notif-panel{position:fixed;top:4rem;right:1rem;left:1rem;width:auto!important;max-height:calc(100dvh - 5rem)!important}

  .table-scroll{overflow:visible;padding:.7rem}
  .table-scroll .tbl{min-width:0;display:block}
  .tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tbl tbody{display:grid;gap:.75rem}
  .tbl tbody tr{
    display:block;background:linear-gradient(145deg,rgba(25,36,67,.74),rgba(10,17,35,.82));
    border:1px solid rgba(148,163,184,.11);border-radius:15px;padding:.45rem;box-shadow:0 14px 30px -25px rgba(0,0,0,.9);
  }
  .tbl tbody tr:hover{background:linear-gradient(145deg,rgba(30,43,80,.8),rgba(12,20,42,.88))}
  .tbl td{
    width:100%;border:0;padding:.5rem .6rem;display:grid!important;
    grid-template-columns:minmax(90px,.75fr) minmax(0,1.25fr);align-items:center;gap:.75rem;
    text-align:right;min-height:34px;overflow-wrap:anywhere;
  }
  .tbl td::before{
    content:attr(data-label);color:#7285a7;font-size:.66rem;font-weight:750;
    letter-spacing:.055em;text-transform:uppercase;text-align:left;
  }
  .tbl td>*{margin-left:auto}
  .tbl td:has(>button){display:flex!important;justify-content:flex-end;flex-wrap:wrap}
  .tbl td:has(>button)::before{margin-right:auto;align-self:center}
  .tbl td:has(>button)>*{margin-left:0}
  .tbl td[colspan]{display:block!important;text-align:center;padding:1.5rem!important}
  .tbl td[colspan]::before{display:none}

  .modal{
    width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);border-radius:16px;
  }
  .modal>div{padding:1rem!important}
  .drawer{width:100%;border-left:0}
  .drawer>div{padding-left:1rem!important;padding-right:1rem!important}
  .modal [class*="grid-cols-2"],.modal [class*="grid-cols-12"]{grid-template-columns:minmax(0,1fr)!important}
  .modal [class*="col-span-"],.drawer .grid-cols-12>[class*="col-span-"]{grid-column:1/-1!important}
  .drawer .grid-cols-12{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .drawer .grid-cols-12>:first-child{grid-column:1/-1!important}
  .modal .justify-end{flex-wrap:wrap}
  .modal .justify-end>.btn{flex:1 1 8rem;justify-content:center}
  .drawer .card>.flex.gap-2{flex-wrap:wrap}
  .drawer .card>.flex.gap-2>.input{flex:1 1 13rem}

  #view>.flex.justify-between.items-center{gap:.75rem;flex-wrap:wrap}
  #view>.flex.justify-between.items-center>.input{max-width:none;width:100%}
  #view>.flex.justify-between.items-center>.btn{margin-left:auto}
  #view .card>.flex.gap-2{flex-wrap:wrap}
  #view .card>.flex.justify-between.items-start{gap:.75rem}
  #view .card>.flex.justify-between.items-start>:first-child{min-width:0}
  #view .card>.flex.justify-between.items-start>.badge{flex:0 0 auto}
  .card{min-width:0}
  .card .font-bold,.card .text-sm{overflow-wrap:anywhere}
  .card:has(> .table-scroll){background:transparent;border:0;box-shadow:none}
  [style*="height:260px"],[style*="height:240px"]{height:215px!important}
  .kan-col{width:calc(100vw - 3.5rem);min-width:calc(100vw - 3.5rem)}

  #toasts{left:1rem;right:1rem;bottom:1rem}
  .toast{min-width:0;width:100%}
}

@media (max-width:479px){
  .app-view{padding:1rem!important}
  #page-sub{display:none}
  .header-export{display:none}
  .header-actions{margin-left:auto}
  .card{border-radius:15px}
  .card.p-5,.card.p-6,.card.p-8{padding:1rem!important}
  #view>.grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  .count-up{font-size:clamp(1.25rem,7vw,1.75rem)!important;overflow-wrap:anywhere}
  .grid{gap:.75rem}
  .tbl td{grid-template-columns:minmax(82px,.72fr) minmax(0,1.28fr);padding:.48rem .55rem}
  .drawer .grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  .drawer .flex.gap-2>.btn{max-width:100%}
  #login-screen{padding:1rem}
  #login-screen .card{padding:1.25rem!important}
  #login-screen .mb-8{margin-bottom:1.5rem!important}
  .kan-col{width:calc(100vw - 2.75rem);min-width:calc(100vw - 2.75rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}