:root {
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --accent:#0f766e; --accent2:#1e293b; --danger:#b91c1c; --warn:#b45309; --ok:#15803d;
}
* { box-sizing: border-box; }
body { margin:0; font-family:Inter, Segoe UI, Arial, sans-serif; background:var(--bg); color:var(--text); }
header { padding:20px 28px; background:#0f172a; color:#fff; position:sticky; top:0; z-index:20; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.header-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
h1 { margin:0 0 8px 0; font-size:22px; }
.sub { color:#cbd5e1; font-size:13px; }
.user-block { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
main { padding:18px 28px 40px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.filters { display:grid; grid-template-columns: repeat(6, minmax(150px,1fr)); gap:10px; }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(2, minmax(140px,1fr)); } }
label { font-size:12px; color:var(--muted); display:block; margin-bottom:4px; }
select,input[type=text],input[type=password] { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); }
button { border:0; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; }
.btn { background:#0f766e; color:white; }
.btn2 { background:#e2e8f0; color:#0f172a; }
.btnDanger { background:#fee2e2; color:#991b1b; font-size:12px; padding:6px 10px; }
.stats { display:flex; flex-wrap:wrap; gap:10px; }
.stat { background:#f1f5f9; border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:120px; }
.stat strong { font-size:20px; display:block; }
.small { font-size:12px; color:var(--muted); }
.case { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.caseHead { padding:14px 16px; display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:start; cursor:pointer; }
.caseTitle { font-weight:700; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:12px; background:#f1f5f9; border:1px solid #e2e8f0; }
.sev-Critical { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.sev-Major { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.sev-Normal { background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.pr-P0 { background:#fde68a; color:#78350f; border-color:#fcd34d; }
.run-Smoke { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.feature { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.caseBody { display:none; border-top:1px solid var(--line); padding:14px 16px; }
.case.open .caseBody { display:block; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns:1fr; } }
.block { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:12px; }
.block h3 { margin:0 0 8px 0; font-size:14px; }
pre { white-space:pre-wrap; font-family:inherit; font-size:13px; margin:0; line-height:1.4; }
.result { display:grid; grid-template-columns: 180px 1fr 1fr; gap:10px; margin-top:14px; }
@media (max-width: 900px) { .result { grid-template-columns:1fr; } }
textarea { width:100%; min-height:86px; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font-family:inherit; }
.caseActions { display:flex; gap:8px; align-items:center; }
details summary { cursor:pointer; font-weight:700; }
.methodGrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width: 1000px) { .methodGrid { grid-template-columns:1fr; } }
.readonly-field { padding:9px 10px; background:#f1f5f9; border:1px solid var(--line); border-radius:10px; font-size:14px; }
.screenshots { margin-top:12px; }
.screenshot-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.screenshot-item { position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; width:140px; }
.screenshot-item img { width:100%; height:100px; object-fit:cover; display:block; }
.screenshot-item .caption { font-size:11px; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.screenshot-item .btnDanger { position:absolute; top:4px; right:4px; }
.upload-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; width:100%; max-width:380px; box-shadow:0 8px 24px rgba(15,23,42,.08); }
.auth-card form { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.alert { background:#fee2e2; color:#991b1b; padding:10px 12px; border-radius:10px; margin-top:12px; }
.hint { font-size:12px; color:var(--muted); margin-top:16px; }
.saving { opacity:.6; pointer-events:none; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { background:#fff; border-radius:16px; padding:24px; max-width:640px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.3); }
.modal h2 { margin:0 0 16px; }
.modal label { margin-top:10px; }
.modal input[type=text], .modal textarea { margin-top:4px; }