:root{
  --brand:#14b8a6; --brand2:#22d3ee; --brand-ink:#0f766e;
  --bg:#f4f7fb; --card-bg:#ffffff; --card-border:#e6ebf2;
  --ink:#0f172a; --muted:#64748b; --soft:#f1f5f9;
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --radius:16px;
  --bs-primary:#14b8a6; --bs-primary-rgb:20,184,166;
}
[data-bs-theme="dark"]{
  --bg:#0b1220; --card-bg:#111a2b; --card-border:#22304a;
  --ink:#e6edf7; --muted:#93a4bd; --soft:#16223a;
  --shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
*{scrollbar-width:thin}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
}
a{color:var(--brand-ink)}
.text-muted{color:var(--muted)!important}

/* Top bar */
.navbar-hd{
  background:var(--card-bg); border-bottom:1px solid var(--card-border);
  position:sticky; top:0; z-index:50;
}
.brand-badge{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  font-weight:800;box-shadow:0 6px 16px -6px rgba(20,184,166,.6);
}
.theme-btn{
  border:1px solid var(--card-border);background:var(--card-bg);color:var(--ink);
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
}
.theme-btn:hover{border-color:var(--brand)}

/* Hero */
.hero{
  border-radius:var(--radius);color:#fff;padding:34px 30px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0f766e,#14b8a6 45%,#22d3ee);
  box-shadow:var(--shadow);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 200px at 90% -20%,rgba(255,255,255,.28),transparent);
}
.hero h1{font-weight:800;letter-spacing:-.5px;margin:0}
.hero .eyebrow{color:rgba(255,255,255,.85)}

.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}

/* Cards */
.card-hd{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card-hd .card-body{padding:1.4rem}

/* Category grid */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat-btn{
  border:1.5px solid var(--card-border);background:var(--card-bg);border-radius:14px;
  padding:16px 12px;text-align:center;cursor:pointer;transition:.18s;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink);
}
.cat-btn:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow)}
.cat-btn.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
.cat-icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:1.35rem;color:#fff;
}
.cat-btn .cat-name{font-weight:600;font-size:.9rem;line-height:1.15}

/* Forms */
.form-label{font-weight:600;font-size:.9rem}
.form-control,.form-select{
  background:var(--card-bg);border-color:var(--card-border);color:var(--ink);border-radius:11px;padding:.6rem .8rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(20,184,166,.2);background:var(--card-bg);color:var(--ink);
}
.form-control::placeholder{color:var(--muted)}
.section-card{background:var(--soft);border:1px solid var(--card-border);border-radius:14px;padding:1.1rem 1.15rem}

.btn-brand{
  background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff;font-weight:700;
  border-radius:11px;padding:.7rem 1.4rem;box-shadow:0 10px 24px -10px rgba(20,184,166,.7);
}
.btn-brand:hover{color:#fff;filter:brightness(1.05)}
.btn-ghost{border:1px solid var(--card-border);background:var(--card-bg);color:var(--ink);border-radius:11px}

/* autocomplete dropdown */
.autolist{
  position:absolute;z-index:40;left:0;right:0;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:12px;box-shadow:var(--shadow);
  margin-top:4px;max-height:280px;overflow:auto
}
.autolist .item{padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid var(--card-border)}
.autolist .item:last-child{border-bottom:none}
.autolist .item:hover,.autolist .item.hl{background:var(--soft)}
.autolist small{color:var(--muted)}

/* Pills / badges */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600}
.pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.pill-open{color:#0ea5e9;background:rgba(14,165,233,.12)}
.pill-progress{color:#f59e0b;background:rgba(245,158,11,.14)}
.pill-resolved{color:#10b981;background:rgba(16,185,129,.14)}
.pill-closed{color:#64748b;background:rgba(100,116,139,.14)}
.pill-p1{color:#ef4444;background:rgba(239,68,68,.14)}
.pill-p2{color:#f97316;background:rgba(249,115,22,.14)}
.pill-p3{color:#0ea5e9;background:rgba(14,165,233,.12)}
.pill-p4{color:#64748b;background:rgba(100,116,139,.14)}

/* Thread */
.msg{border:1px solid var(--card-border);border-radius:14px;padding:.9rem 1rem;background:var(--card-bg)}
.msg.requester{border-left:3px solid var(--brand)}
.msg.agent{border-left:3px solid #6366f1;background:var(--soft)}
.msg.system{border-left:3px solid #94a3b8;background:var(--soft);font-size:.9rem}
.msg .who{font-weight:700;font-size:.85rem}
.msg .when{color:var(--muted);font-size:.78rem}

/* Stars */
.stars{display:inline-flex;gap:.25rem;font-size:1.7rem;cursor:pointer}
.stars i{color:#cbd5e1;transition:.1s}
.stars i.on,.stars i:hover{color:#f59e0b}

.avatar{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand2));flex:none
}
.divider{height:1px;background:var(--card-border);margin:1rem 0}
.req-line{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--card-border)}
.req-line:last-child{border-bottom:none}
.req-line .k{color:var(--muted);font-size:.85rem}
.req-line .v{font-weight:600;font-size:.9rem;text-align:right}