:root{
  --bg:#f4f6fb; --card:#ffffff; --muted:#6b7280; --accent:#1f6feb; --danger:#e11d48;
  --success:#10b981; --warn:#f59e0b; --glass:rgba(15,23,42,0.03);
  --customer-accent:#0f766e; --staff-accent:#0f172a;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);margin:0;color:#0f172a}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;box-shadow:0 1px 0 rgba(15,23,42,0.04)}
.topbar.customer-topbar{background:linear-gradient(90deg,#f0fdfa,#f8fbff)}
.topbar.staff-topbar{background:linear-gradient(90deg,#0f172a,#111827)}
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand{font-weight:700;font-size:18px}
.customer-topbar .brand{color:var(--customer-accent)}
.staff-topbar .brand{color:#fff}
.role-pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(31,111,235,0.12);color:var(--accent)}
.staff-topbar .role-pill{background:rgba(255,255,255,0.14);color:#e2e8f0}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px}
.customer-topbar .nav-link{color:#334155}
.staff-topbar .nav-link{color:#cbd5e1}
.nav-link.active{background:var(--glass);color:#0b1220}
.staff-topbar .nav-link.active{background:rgba(255,255,255,0.16);color:#fff}
.wrap{max-width:1100px;margin:22px auto;padding:0 16px}
.cards{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.card{flex:1;min-width:140px;background:var(--card);padding:14px;border-radius:8px;box-shadow:0 6px 18px -10px rgba(2,6,23,0.2)}
.card-title{font-size:13px;color:var(--muted);margin-bottom:6px}
.card-value{font-size:24px;font-weight:700}
.panel{background:var(--card);border-radius:8px;padding:12px;box-shadow:0 6px 18px -10px rgba(2,6,23,0.12);margin-bottom:14px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-header h2{margin:0;font-size:16px}
.panel-actions .btn{margin:0}
.btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;display:inline-block;border:0;cursor:pointer}
.portal-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:center;margin-bottom:16px}
.auth-shell{display:flex;justify-content:center;align-items:center;padding:24px 0}
.auth-card{width:min(100%,480px);background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #e5eefc;border-radius:16px;padding:24px;box-shadow:0 18px 40px -20px rgba(15,23,42,0.24)}
.auth-card h2{margin:6px 0 8px;font-size:24px}
.auth-card .muted{margin-bottom:12px;line-height:1.5}
.auth-brand{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(31,111,235,0.12);color:var(--accent);font-size:12px;font-weight:700}
.message{padding:10px 12px;border-radius:8px;margin:10px 0;font-size:14px}
.message.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.field{margin-bottom:12px}
label.field > span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input[type="text"], input[type="email"], input[type="password"], select, textarea{width:100%;padding:10px;border:1px solid #dbe7f5;border-radius:8px;background:#fff}
input:focus, textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,111,235,0.12)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.case-shell{display:grid;gap:14px}
.case-hero{background:linear-gradient(120deg,#ffffff,#f8fbff);border:1px solid #e7eefb}
.case-hero-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.case-hero-top h1{margin:6px 0 0;font-size:24px}
.case-status{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(31,111,235,0.12);color:var(--accent);font-size:13px;font-weight:700}
.case-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.meta-card{background:#f8fbff;border-radius:10px;padding:10px;border:1px solid #e8f0fb}
.meta-card .meta-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.case-body{padding:12px 0;line-height:1.7;color:#334155}
.update-thread{display:grid;gap:10px}
.update-item{border:1px solid #e9f0f8;border-left:4px solid #93c5fd;border-radius:10px;padding:12px;background:#fcfdff}
.update-item.private{border-left-color:#f59e0b;background:#fffbeb}
.update-item.staff{border-left-color:#0f172a}
.update-header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.update-author{font-weight:700;color:#0f172a}
.update-time{font-size:12px;color:var(--muted)}
.update-content{line-height:1.6;color:#334155}
.update-actions{display:flex;gap:6px;flex-wrap:wrap}
.update-actions button{padding:4px 8px;border:0;border-radius:6px;color:#fff;cursor:pointer;font-size:12px}
.update-actions .edit-btn{background:#2563eb}
.update-actions .delete-btn{background:#dc3545}
.private-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#fef3c7;color:#b45309;font-size:12px;font-weight:600;margin-bottom:8px}
.case-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-shell{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
.form-card{background:#fbfdff;border:1px solid #e7eefb;border-radius:12px;padding:14px}
.form-card h3{margin:0 0 10px;font-size:14px}
.help{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.portal-card{background:linear-gradient(120deg,#ffffff,#f8fbff);padding:16px;border-radius:10px;box-shadow:0 8px 24px -12px rgba(15,23,42,0.24)}
.portal-card.staff{background:linear-gradient(120deg,#f8fafc,#eef2ff)}
.hero-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(31,111,235,0.1);color:var(--accent);font-size:12px;font-weight:700;margin-bottom:8px}
.hero-badge.staff{background:rgba(15,23,42,0.08);color:var(--staff-accent)}
.table-wrap{overflow:auto}
table.list{width:100%;border-collapse:collapse}
table.list thead th{font-size:12px;text-align:left;padding:10px 12px;color:var(--muted);border-bottom:1px solid #eef2f7}
table.list tbody td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.list tbody tr:hover td{background:linear-gradient(90deg, rgba(31,111,235,0.02), transparent)}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:12px;color:#fff}
.status-deprecated{background:#6b7280}
.status-contacted{background:#2563eb}
.status-scheduled{background:#f59e0b}
.status-complete{background:var(--success)}
.date-age-new{color:#065f46;background:rgba(16,185,129,0.16);border-radius:999px;padding:4px 10px;display:inline-block;font-size:12px;font-weight:600}
.date-age-warning{color:#92400e;background:rgba(245,158,11,0.16);border-radius:999px;padding:4px 10px;display:inline-block;font-size:12px;font-weight:600}
.date-age-alert{color:#7f1d1d;background:rgba(239,68,68,0.16);border-radius:999px;padding:4px 10px;display:inline-block;font-size:12px;font-weight:600}
.link{margin-right:8px;color:var(--accent);text-decoration:none;font-size:13px}
.link.danger{color:var(--danger)}
/* status and priority badges for lists */
.status-badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:700;color:#fff}
.status-badge.status_open{background:#2563eb}
.status-badge.status_in_progress{background:#f59e0b}
.status-badge.status_on_hold{background:#f97316}
.status-badge.status_closed{background:#6b7280}
.status-badge.status_completed{background:var(--success)}
.priority-badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:700;color:#fff}
.priority-badge.low{background:#94a3b8;color:#0f172a}
.priority-badge.normal{background:#e2e8f0;color:#0f172a}
.priority-badge.high{background:#ef4444}
.priority-badge.urgent{background:#b91c1c}
.card-value{font-size:28px;font-weight:800}
.card{padding:18px}
@media (max-width:800px){.cards{flex-direction:column}.portal-intro{grid-template-columns:1fr}}
@media (max-width:800px){.cards{flex-direction:column}.portal-intro{grid-template-columns:1fr}}