:root {
  color-scheme: light;
  --page: #f5f7fb;
  --paper: #fff;
  --ink: #14213a;
  --muted: #4c5d76;
  --line: #dce4ee;
  --accent: #2349ad;
  --accent-bg: #eaf0ff;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, .button {
  border: 1px solid var(--line); border-radius: .6rem; background: var(--paper);
  color: var(--ink); min-height: 2.75rem; padding: .55rem .85rem; cursor: pointer;
}
.button { display: inline-flex; align-items: center; text-decoration: none; }
.primary { background: var(--accent); color: white; border-color: var(--accent); }
.button:hover, button:hover { border-color: var(--accent); text-decoration: none; }
.primary:hover { background: #1a388a; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.selected { background: var(--accent-bg); border-color: var(--accent); }
input:not([type=file], [type=checkbox], [type=radio]), select, textarea {
  width: 100%; min-height: 2.65rem; color: var(--ink); background: white;
  border: 1px solid #b2bed0; padding: .55rem; border-radius: .45rem;
}
textarea { resize: vertical; }
input[type=file] { max-width: 100%; min-height: 2.75rem; }
label, legend { font-weight: 600; }
fieldset { border: 1px solid var(--line); border-radius: .5rem; padding: .8rem; }
li { margin-block: .25rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.35rem); line-height: 1.15; margin: .7rem 0; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0; }
h4 { margin: .7rem 0 .2rem; }
p { margin: .55rem 0; }
summary { cursor: pointer; font-weight: 650; }
progress { max-width: 45%; accent-color: var(--accent); }
.shell { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
main { padding-block: clamp(1.25rem, 3vw, 2.5rem) 3rem; }
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar-inner, .topbar nav, .logout { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-inner { min-height: 4rem; padding-block: .55rem; }
.topbar a { text-decoration: none; }
.topbar nav { gap: .2rem; }
.topbar nav a { display: inline-flex; padding: .4rem .6rem; border-radius: .45rem; color: var(--muted); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }
.brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--ink); }
.brand-icon { background: var(--accent); color: white; border-radius: .55rem; padding: .18rem .45rem; }
.logout { margin-inline-start: auto; }
.plain { border: 0; background: transparent; color: var(--accent); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: .95rem; padding: 1.15rem; margin-block: .85rem; box-shadow: 0 2px 8px #14213a08; }
.grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.page-heading { margin-bottom: 1.45rem; }
.page-heading h1 { margin-block: .2rem .55rem; }
.page-heading > p { max-width: 65ch; }
.eyebrow { color: var(--accent); font-size: .77rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }
.project-grid .panel, .guide-grid .panel { margin: 0; }
.management-grid { align-items: stretch; }
.management-grid .panel { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.management-grid .panel h2 { margin: 0; }
.management-grid .panel .action-bar { margin-top: auto; }
.project-grid { margin-top: .95rem; }
.project-card { display: flex; align-items: center; gap: .75rem; min-height: 5.3rem; color: var(--ink); text-decoration: none; }
.project-card:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.project-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: .65rem; background: var(--accent-bg); color: var(--accent); }
.project-card-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.project-card-text strong, .project-card-text small { display: block; }
.project-card-text small { color: var(--muted); }
.empty-state { grid-column: 1 / -1; border-style: dashed; padding-block: 1.5rem; }
.guide-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.guide-card { min-width: 0; }
.guide-card pre { overflow: auto; max-width: 100%; padding: .85rem; border-radius: .65rem; background: #15223c; color: #f0f5ff; }
.guide-card .action-bar { align-items: start; }
.row, .run-header, .item-heading { display: flex; justify-content: space-between; align-items: center; gap: .65rem; flex-wrap: wrap; }
.row + .row { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.back, .muted { color: var(--muted); }
.stack { display: grid; gap: .7rem; }
.stack button { justify-self: start; }
.form-panel, .sign-in { max-width: 35rem; }
.sign-in { margin-inline: auto; }
.badge { font-size: .86rem; font-weight: 650; background: var(--page); padding: .3rem .6rem; border-radius: 1rem; }
.status-passed { color: #126444; background: #e3f6ed; }
.status-failed { color: #a1282b; background: #ffebeb; }
.status-blocked { color: #694908; background: #fff2d6; }
.section-nav, .status-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.section-nav a { padding: .35rem .55rem; background: var(--accent-bg); border-radius: .4rem; }
.run-section { margin-top: 1.5rem; }
.item { scroll-margin-top: .6rem; }
.item:target { outline: 2px solid var(--accent); }
.item-code { display: inline-block; margin-inline-end: .25rem; }
.result-form, .upload { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .85rem; }
.upload { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.upload label { flex-basis: 100%; }
.upload output { flex-basis: 100%; }
.attempts, .phone-link { margin-top: .8rem; }
.phone-link img { margin-top: .4rem; background: white; }
.attachments, .preserve { overflow-wrap: anywhere; }
.evidence-preview { margin-block: .4rem .65rem; }
.evidence-preview video { display: block; width: min(100%, 42rem); max-height: 65vh; margin-top: .5rem; background: #111; }
.evidence-image { display: block; max-width: 100%; height: auto; }
.preserve { white-space: pre-wrap; }
.messages { padding: 0; list-style: none; }
.messages li { padding: .7rem; border-radius: .45rem; background: var(--accent-bg); }
.messages .error, .errorlist { color: #a1282b; }
.messages .error { background: #ffebeb; }
.storage-summary .panel { margin: 0; }
.storage-metrics { display: grid; gap: .6rem; margin: .6rem 0; }
.storage-metrics-inline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.storage-metrics dt { color: var(--muted); font-size: .9rem; }
.storage-metrics dd { margin: 0; font-weight: 650; }
.storage-list { list-style: none; padding: 0; margin: .65rem 0 0; overflow-wrap: anywhere; }
.storage-list > li { padding-block: .75rem; margin: 0; border-top: 1px solid var(--line); }
.storage-purge { border-color: #dfb8b9; overflow-wrap: anywhere; }
.storage-danger, .danger { color: #a1282b; border-color: #dfb8b9; }
.storage-danger:hover, .danger:hover { color: #fff; background: #a1282b; border-color: #a1282b; }
@media (max-width: 36rem) {
  .topbar-inner, .topbar nav, .logout { gap: .65rem; }
  .topbar nav { order: 3; width: 100%; gap: .15rem; }
  .logout span { display: none; }
  .panel { padding: .8rem; }
  .status-actions button { flex: 1 0 42%; }
}