:root{
  --bg:#f3f7ff;--surface:#fff;--surface2:#f8fbff;--text:#071438;--muted:#66779e;
  --line:#d6e1f2;--primary:#0d6efd;--soft:#edf5ff;--danger:#dc3545;--success:#16a37a;
}
html[data-theme="dark"]{
  --bg:#0c1421;--surface:#151f30;--surface2:#111a29;--text:#eef4ff;--muted:#aab7ce;
  --line:#2b394e;--primary:#4b8cff;--soft:#1c2b42;--danger:#ff777f;--success:#46d0aa;
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;min-width:320px}
body{min-height:100dvh;display:flex;flex-direction:column;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}
input,select,textarea,button{font:inherit}
.topbar{min-height:64px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 5.5%;flex-wrap:wrap}
.brand,.login-logo{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand strong,.login-logo strong{display:block;font-size:21px}.brand small,.login-logo small{display:block;color:var(--muted);font-size:14px}
.mark{font-weight:900;font-style:italic;font-size:32px;color:var(--primary);letter-spacing:-7px;margin-right:6px}.mark.big{font-size:42px}
.switches,.main-nav{display:flex;gap:12px;align-items:center;color:var(--muted);flex-wrap:wrap}.switches .active,.main-nav a{font-weight:700}.divider{width:1px;height:26px;background:var(--line);margin:0 4px}

.login-shell{width:min(1440px,100%);margin:0 auto;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,610px);gap:42px;align-items:center;padding:18px 6%}
.hero{min-width:0;max-width:580px}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:800;color:var(--muted);margin-bottom:18px}.hero h1{font-size:clamp(2.5rem,4vw,3.5rem);line-height:1.05;margin:0 0 12px}.hero>p{font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.4;color:var(--muted);margin:0 0 14px}
.benefit{display:flex;gap:16px;align-items:flex-start;margin-top:14px}.benefit>span{width:46px;height:46px;border-radius:13px;background:var(--soft);display:grid;place-items:center;color:var(--primary);font-size:22px;flex:0 0 auto}.benefit b,.benefit small{display:block}.benefit b{font-size:16px;margin:2px 0 4px}.benefit small{color:var(--muted);font-size:14px;line-height:1.35}

.login-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 34px;box-shadow:0 18px 45px rgba(20,60,110,.10)}.login-logo{justify-content:center}.login-card h2{text-align:center;color:var(--muted);font-size:19px;margin:10px 0 14px}.login-card label,.field label{display:block;font-weight:700;margin:10px 0 6px}.login-card input,.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:11px 13px}
.field textarea{resize:vertical}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:5px}.eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.primary{width:100%;margin-top:14px;padding:12px 16px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-size:16px;font-weight:800;cursor:pointer}.primary.compact{width:auto;min-width:180px;margin:0}
.portal-note{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.portal-note>div{padding:10px 12px;border:1px solid var(--line);border-radius:11px}.portal-note b,.portal-note small{display:block}.portal-note small{color:var(--muted);margin-top:4px;font-size:13px}

.dashboard{width:min(1680px,100%);margin:0 auto;flex:1;padding:34px 5.5%}.dashboard.narrow{width:min(1250px,100%)}.dashboard h1{font-size:clamp(2rem,3vw,2.65rem);margin:0}.muted{color:var(--muted)}.block{display:block}.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.page-head p{margin-bottom:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0}.stat,.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px}.stat small{display:block;color:var(--muted);font-weight:700}.stat strong{display:block;font-size:34px;margin-top:10px}
.panel{margin-top:20px}.panel h2{margin-top:0}.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}.section-title h2{margin:0 0 4px}.section-title p{margin:0}
.ticket-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}.field{min-width:0}.span-2{grid-column:span 2}.span-3{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-start}
.table-wrap{width:100%;overflow-x:auto}.table-wrap table{width:100%;min-width:980px;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}.table-wrap th{font-size:13px;color:var(--muted);white-space:nowrap}.table-wrap td{font-size:14px}.ticket-code{color:var(--primary);white-space:nowrap}.empty{text-align:center!important;color:var(--muted);padding:28px!important}
.badge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--soft);color:var(--text)}.badge.low{background:#e8f4ff;color:#1772b8}.badge.medium{background:#fff2cc;color:#956700}.badge.high,.badge.critical{background:#ffe4e6;color:#c52233}.badge.open{background:#ffe4e6;color:#c52233}.badge.in_progress{background:#e3f1ff;color:#0874cc}.badge.resolved{background:#dcf8ee;color:#11805f}.badge.closed{background:#eceff4;color:#59657a}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--primary);font-weight:700}.btn.small{padding:7px 10px;font-size:13px}.danger-btn{border:1px solid #ffc7cc;background:#fff2f3;color:var(--danger);border-radius:9px;padding:10px 14px;font-weight:800;cursor:pointer}.delete-form{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:20px}.details{display:grid;grid-template-columns:140px 1fr;gap:10px 18px}.details dt{font-weight:800;color:var(--muted)}.details dd{margin:0}.preline{white-space:pre-line;line-height:1.6}.ai-panel{background:linear-gradient(180deg,var(--soft),var(--surface))}
.alert,.success{padding:12px 14px;border-radius:10px;margin:14px 0}.alert{background:#fff0ef;color:#b42318;border:1px solid #ffd3cf}.success{background:#e8faf3;color:#0e795a;border:1px solid #bcebdc}
.site-footer{flex:0 0 auto;margin-top:0;padding:10px 18px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line);background:var(--surface)}

@media(max-width:1180px){
  .login-shell{grid-template-columns:minmax(0,1fr) minmax(420px,560px);padding-left:4%;padding-right:4%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticket-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-3{grid-column:1/-1}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .topbar{padding:10px 4%;height:auto}.main-nav{order:3;width:100%}
  .login-shell{grid-template-columns:1fr;padding:24px 4%}.hero{display:none}.login-card{width:min(620px,100%);margin:0 auto}
}
@media(max-width:720px){
  .switches{font-size:14px;gap:8px}.divider{display:none}.dashboard{padding:26px 4%}
  .stats{grid-template-columns:1fr 1fr}.ticket-form{grid-template-columns:1fr}.span-2,.span-3{grid-column:1}
  .detail-grid{grid-template-columns:1fr}.details{grid-template-columns:1fr}.details dt{margin-top:8px}
}
@media(max-width:500px){
  .topbar{align-items:flex-start}.switches{width:100%;justify-content:flex-start}.login-card{padding:22px 16px}
  .portal-note{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.primary.compact{width:100%}
}

/* ===== Demo access + CRUD action controls ===== */
.demo-access{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.demo-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px!important;
}
.demo-card-head{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.demo-card-head>div{min-width:0}
.demo-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--primary);
  font-weight:900;
}
.demo-card-head b{font-size:14px}
.demo-card-head small{font-size:11px!important}
.demo-credentials{
  min-width:0;
  display:grid;
  gap:3px;
  padding:8px 9px;
  border:1px solid var(--line);
  background:var(--surface2);
  border-radius:8px;
}
.demo-credentials code{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-family:Consolas,monospace;
  font-size:11px;
}
.demo-fill{
  width:100%;
  margin-top:auto;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--primary);
  border-radius:8px;
  padding:7px 9px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.row-actions form{margin:0}
.small-danger{padding:7px 9px;font-size:12px}

@media(max-width:720px){
  .demo-access{grid-template-columns:1fr}
}


/* ===== Ticket UX refinements ===== */
.back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:10px 16px;
  border:1px solid var(--primary);
  border-radius:9px;
  background:var(--surface);
  color:var(--primary);
  font-weight:800;
  box-shadow:0 3px 10px rgba(20,60,110,.06);
}
.back-btn:hover{background:var(--soft)}
.detail-head{align-items:center}
.ticket-status-block{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface2);
}
.status-label{font-weight:800;color:var(--muted)}
.flash-message{
  transition:opacity .3s ease, transform .3s ease, max-height .3s ease, margin .3s ease, padding .3s ease;
  opacity:1;
  max-height:120px;
}
.flash-hide{
  opacity:0;
  transform:translateY(-6px);
  max-height:0;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:hidden;
}
@media(max-width:600px){
  .detail-head{align-items:flex-start}
  .back-btn{width:100%}
}