/* Dark theme, accessible, responsive */
:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1c2128;
  --text: #edf2f7;
  --muted: #9aa4b2;
  --accent: #2d7ff9;
  --accent-2: #4aa3ff;
  --ok: #31c48d;
  --warn: #f59e0b;
  --fail: #ef4444;
  --na: #64748b;
  --border: #2a3039;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: radial-gradient(1200px 600px at 10% -10%, #141922 0%, transparent 60%), var(--bg);
  color: var(--text);
}
img { display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.app-header, .app-footer { border-bottom: 1px solid var(--border); background: rgba(23,27,33,.8); backdrop-filter: blur(6px); }
.app-footer { border-top: 1px solid var(--border); border-bottom: none; text-align: center; padding: 1rem; color: var(--muted); }

.app-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: .75rem; }
.titles { display: flex; flex-direction: column; line-height: 1.1; }
.titles .sub { color: var(--muted); font-size: .85rem; }
.header-actions { display: flex; gap: .5rem; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0; box-shadow: var(--shadow); }
.card h2 { margin: .25rem 0 1rem; font-size: 1.25rem; }

.grid-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: .75rem; align-items: end; }
.field { grid-column: span 12; display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .95rem; color: var(--muted); }
.field input, .field select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .7rem .8rem; outline: none; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,127,249,.25); }
.actions { grid-column: span 12; display: flex; gap: .5rem; }
.hint { color: var(--muted); margin: .25rem 0 0; font-size: .9rem; }

@media (min-width: 680px) {
  .field:nth-child(1) { grid-column: span 6; }
  .field:nth-child(2) { grid-column: span 3; }
  .field:nth-child(3) { grid-column: span 2; }
  .actions { grid-column: span 1; justify-content: flex-end; }
}

.alert { border-radius: 10px; padding: .75rem 1rem; margin-top: 1rem; }
.alert.error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }
.alert.info { background: rgba(74,163,255,.12); border: 1px solid rgba(74,163,255,.35); }

.btn { appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: .6rem .8rem; cursor: pointer; text-decoration: none; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-color: transparent; color: white; }
.btn.ghost { background: transparent; }
.btn.tiny { padding: .25rem .5rem; font-size: .8rem; }
.badge { background: rgba(74,163,255,.15); color: var(--accent-2); padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; }
.chip { background: rgba(74,163,255,.15); color: var(--accent-2); padding: .15rem .45rem; border-radius: 8px; font-size: .8rem; margin-right: .5rem; }

.result-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.grade-pill { padding: .35rem .6rem; border-radius: 999px; font-weight: 700; }
.grade-a { background: rgba(49,196,141,.15); color: var(--ok); }
.grade-b { background: rgba(74,163,255,.15); color: var(--accent-2); }
.grade-c { background: rgba(245,158,11,.15); color: var(--warn); }
.grade-d { background: rgba(245,158,11,.15); color: var(--warn); }
.grade-f { background: rgba(239,68,68,.15); color: var(--fail); }
.grade-n\/a, .grade-na { background: rgba(100,116,139,.2); color: var(--na); }
.meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); }
.meta strong, .meta code { color: var(--text); }

.record-blocks { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 780px) { .record-blocks { grid-template-columns: 1fr 1fr 1fr; } }
.record { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem; }
.record-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; color: var(--muted); }
.code { background: transparent; border-radius: 8px; border: 1px dashed var(--border); padding: .6rem; white-space: pre-wrap; word-wrap: break-word; }

.matrix { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.matrix-head, .matrix-row { display: grid; grid-template-columns: 130px 1fr 110px 1.4fr; gap: .5rem; }
.matrix-head { background: #11161d; font-weight: 700; padding: .6rem .75rem; color: var(--muted); }
.matrix-row { padding: .6rem .75rem; border-top: 1px solid var(--border); align-items: center; }
.status-pill { font-weight: 700; font-size: .8rem; padding: .2rem .5rem; border-radius: 999px; }
.status-pass { background: rgba(49,196,141,.15); color: var(--ok); }
.status-warn { background: rgba(245,158,11,.15); color: var(--warn); }
.status-fail { background: rgba(239,68,68,.15); color: var(--fail); }
.status-na { background: rgba(100,116,139,.2); color: var(--na); }
.fix { color: var(--muted); }

.fixes h3 { margin-top: 1rem; }
.fixes ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.fixes li { margin: .25rem 0; }

.history { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 680px) { .history { grid-template-columns: 1fr 1fr; } }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); text-decoration: none; color: var(--text); }
.history-item:hover { border-color: var(--accent); }
.history-item .dom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item time { color: var(--muted); font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); }