/* Base and shared product components. Page files own only their layouts. */
*,*::before,*::after { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:auto; }
body { margin:0; background:var(--color-background); color:var(--color-text); font:var(--text-base)/var(--leading-normal) var(--font-sans); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
img,video,audio { max-width:100%; }
img { display:block; }
svg { flex-shrink:0; }
h1,h2,h3,h4,p,ul,ol,dl { margin:0; }
h1,h2,h3,h4 { font-weight:var(--weight-semibold); letter-spacing:-.025em; line-height:1.35; }
h1,h2,h3,h4 { overflow-wrap:anywhere; }
h1 { font-size:var(--text-page); } h2 { font-size:var(--text-section); } h3 { font-size:var(--text-lg); } h4 { font-size:var(--text-base); }
::selection { background:#d9e9e0; color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.row { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.between { justify-content:space-between; } .wrap { flex-wrap:wrap; } .wide { width:100%; }
.small { font-size:var(--text-sm); } .tiny { font-size:var(--text-xs); } .muted { color:var(--color-text-muted); }
.blue { color:var(--color-primary); } .font-mono,code { font-family:var(--font-mono); font-size:.9em; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:var(--space-2); min-height:40px; padding:var(--space-2) var(--space-4); border:1px solid transparent; border-radius:var(--radius-control); background:#edf3fa; color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:1.4; white-space:nowrap; transition:background var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast); }
.btn:hover { background:#e3edf8; border-color:transparent; color:var(--color-text); }
.btn:active { background:#dce7f4; transform:translateY(1px); }
.btn.primary { background:var(--color-primary-action); color:#fff; border-color:var(--color-primary-action); box-shadow:0 4px 12px #487be81c; }
.btn.primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.btn.tertiary,.btn.ghost { background:transparent; border-color:transparent; box-shadow:none; }
.btn.ghost:hover { background:#edf0f2; }
.btn.destructive,.btn.danger { color:var(--color-error); border-color:var(--color-error-border); background:var(--color-surface); }
.btn.destructive:hover,.btn.danger:hover { background:var(--color-error-soft); border-color:#d9aaa4; }
.btn.destructive.primary { color:#fff; background:var(--color-error); border-color:var(--color-error); }
.btn.small { min-height:32px; padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
.btn.large { min-height:48px; font-size:var(--text-base); }
.btn:disabled,button:disabled { opacity:.45; cursor:not-allowed; }
.btn[aria-busy=true] { cursor:wait; }
.btn[aria-busy=true]::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-muted); }
.icon-btn:hover { color:var(--color-text); background:#eef1f3; }
.text-link { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:var(--color-primary); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.btn-text-danger { background:none; border:0; color:var(--color-error); font-size:var(--text-xs); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); }
.btn-text-danger:hover { background:var(--color-error-soft); }
.tag,.matrix-badge,.dev-status-tag { display:inline-flex; align-items:center; gap:var(--space-1); padding:3px var(--space-2); border:0; border-radius:20px; background:var(--color-surface-subtle); color:var(--color-text-secondary); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1.5; white-space:nowrap; }
.tag.green,.tag.mint,.matrix-badge.completed,.dev-status-tag.green { color:var(--color-success); background:var(--color-success-soft); border-color:var(--color-success-border); }
.tag.blue,.matrix-badge.learning { color:var(--color-info); background:var(--color-info-soft); border-color:var(--color-info-border); }
.tag.amber,.tag.gold { color:var(--color-warning); background:var(--color-warning-soft); border-color:var(--color-warning-border); }
.tag.red { color:var(--color-error); background:var(--color-error-soft); border-color:var(--color-error-border); }
.tag.peach { color:#856b58; background:#f6f1ec; border-color:#eae0d8; }
.matrix-badge.none { background:transparent; color:var(--color-text-muted); border-color:transparent; }
.avatar { display:inline-grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid var(--color-border); border-radius:var(--radius-control); background:#eff2f3; color:#556975; font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.small-avatar { width:32px; height:32px; } .avatar.peach { background:#f5eee7; color:#8c6c4e; border-color:#eee2d8; }
.brand { display:inline-flex; align-items:center; gap:var(--space-3); font-weight:var(--weight-semibold); font-size:20px; letter-spacing:-.035em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:var(--radius-control); color:#fff; background:var(--color-primary); }
.brand-mark .icon { width:22px; height:22px; }
.brand small,.brand-sub { display:block; font-size:11px; color:var(--color-text-muted); font-weight:var(--weight-normal); letter-spacing:0; margin-top:2px; }
.panel { background:var(--color-surface); border:0; border-radius:var(--radius-card); min-width:0; box-shadow:var(--shadow-card); overflow:clip; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--color-border); }
.panel-head p { margin-top:var(--space-1); }
.p-pad,.form-panel { padding:var(--space-6); }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-6); margin-bottom:var(--space-8); }
.page-heading h1 { font-size:var(--text-page); letter-spacing:-.035em; }
.page-heading p { color:var(--color-text-secondary); margin-top:var(--space-2); font-size:var(--text-sm); }
.page-heading>.row { padding-top:var(--space-1); flex-shrink:0; }
.page-eyebrow { display:block; margin-bottom:var(--space-2); font-size:11px; font-weight:var(--weight-medium); color:var(--color-text-muted); letter-spacing:.06em; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin:var(--space-8) 0 var(--space-4); }
.section-title h2 { font-size:var(--text-xl); }
.p-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:var(--space-2); width:280px; max-width:100%; height:40px; padding:0 var(--space-3); border:1px solid var(--color-border-strong); border-radius:var(--radius-control); background:#fff; color:var(--color-text-muted); }
.search-box:focus-within { border-color:var(--color-primary); box-shadow:var(--focus-ring); }
.search-box input { min-width:0; width:100%; padding:0; border:0; background:transparent; color:var(--color-text); outline:0; font-size:var(--text-sm); }
.search-box input:focus-visible { outline:0; }
.p-field,.field { display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-4) 0; color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--weight-medium); min-width:0; }
.p-field:first-child { margin-top:0; }
.p-field input,.p-field select,.p-field textarea,.field input,.field select,.field textarea { width:100%; min-width:0; min-height:40px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border-strong); border-radius:var(--radius-control); background:#fff; color:var(--color-text); font-size:var(--text-base); font-weight:var(--weight-normal); line-height:1.6; transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
.p-field textarea { resize:vertical; min-height:80px; }
.p-field :is(input,select,textarea):focus { outline:0; border-color:var(--color-primary); box-shadow:var(--focus-ring); }
.p-field :is(input,select,textarea)::placeholder { color:var(--color-text-muted); }
.p-field :is(input,select,textarea):disabled { background:var(--color-surface-subtle); color:var(--color-text-muted); cursor:not-allowed; }
.p-field :is(input,select,textarea)[aria-invalid=true] { border-color:var(--color-error); }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2378848e'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px!important; }
input[type=checkbox],input[type=radio] { width:16px; height:16px; accent-color:var(--color-primary); flex-shrink:0; vertical-align:middle; margin:0 6px 0 0; }
.field-help { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:var(--weight-normal); }
.p-error { color:var(--color-error); font-size:var(--text-sm); line-height:1.6; overflow-wrap:anywhere; }
.p-error:not(:empty) { display:block; padding:var(--space-3); margin:var(--space-3) 0; border:1px solid var(--color-error-border); border-radius:var(--radius-control); background:var(--color-error-soft); }
.form-grid-2,.p-question-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.form-grid-2>.p-field { margin:var(--space-4) 0; }
.p-check-grid { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:var(--space-6) 0; }
.table-wrap { width:100%; max-width:100%; overflow:auto; scrollbar-width:thin; border-radius:inherit; }
.table-scroll-hint { padding:8px 16px; text-align:right; font-size:12px; color:var(--color-text-muted); background:var(--color-surface-subtle); border-bottom:1px solid var(--color-border); }
table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--text-sm); }
th { padding:var(--space-3) var(--space-6); background:var(--color-surface-subtle); color:var(--color-text-muted); border-bottom:1px solid var(--color-border); font-size:var(--text-xs); font-weight:var(--weight-medium); white-space:nowrap; }
td { padding:var(--space-4) var(--space-6); border-bottom:1px solid #edf0f2; vertical-align:middle; }
td p { line-height:1.6; }
td strong { font-weight:var(--weight-medium); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fafbfc; }
td .btn { min-height:32px; padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
.table-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:48px; padding:var(--space-2) var(--space-6); border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:var(--text-xs); }
.pagination { display:flex; align-items:center; gap:var(--space-2); }
.pagination .btn { min-height:28px; padding:var(--space-1) var(--space-2); }
.table-empty { padding:var(--space-8); }
.state-view,.empty-note { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-3); text-align:center; padding:var(--space-12) var(--space-6); color:var(--color-text-secondary); }
.state-icon { display:grid; place-items:center; width:48px; height:48px; background:#eef2f3; color:#677b87; border-radius:var(--radius-card); margin-bottom:var(--space-1); }
.state-icon .icon { width:22px; height:22px; }
.state-view h3 { font-size:var(--text-lg); color:var(--color-text); }
.state-view p { max-width:360px; font-size:var(--text-sm); line-height:1.8; }
.state-view .btn { margin-top:var(--space-2); }
.state-view.error .state-icon { color:var(--color-error); background:var(--color-error-soft); }
.skeleton { border-radius:var(--radius-sm); background:#edf0f2; animation:skeleton-pulse 1.4s ease-in-out infinite alternate; }
.loading-spinner { display:block; width:24px; height:24px; border:2px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; animation:spin .8s linear infinite; }
.loading-layout { padding:var(--space-3) 0; }
.loading-heading { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-8); }
.loading-heading .skeleton { height:18px; width:160px; } .loading-heading .skeleton:first-child { height:32px; width:220px; }
.loading-table { display:grid; gap:var(--space-4); padding:var(--space-6); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-card); }
.loading-table .skeleton { height:36px; width:100%; }
.notice-callout { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border:1px solid var(--color-info-border); background:var(--color-info-soft); color:var(--color-info); border-radius:var(--radius-control); font-size:var(--text-sm); }
.notice-callout.warning { background:var(--color-warning-soft); color:var(--color-warning); border-color:var(--color-warning-border); }
.notice-callout.error { background:var(--color-error-soft); color:var(--color-error); border-color:var(--color-error-border); }
.route-error { margin-bottom:var(--space-6); align-items:center; } .route-error .btn { margin-left:auto; }
.notice-callout p { margin-top:var(--space-1); }
.progress { height:4px; border-radius:2px; overflow:hidden; background:var(--color-border); } .progress>span { display:block; height:100%; background:var(--color-primary); }
progress { accent-color:var(--color-primary); width:100%; height:6px; }
.chip,.group-pill,.asset-filter-pill { display:inline-flex; align-items:center; gap:var(--space-2); min-height:32px; padding:var(--space-1) var(--space-3); background:transparent; color:var(--color-text-secondary); border:1px solid transparent; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.chip:hover,.group-pill:hover,.asset-filter-pill:hover { background:#eef1f3; }
.chip.active,.group-pill.active,.asset-filter-pill.active { background:var(--color-primary-soft); color:var(--color-primary); border-color:transparent; box-shadow:none; }
.pill-count { color:var(--color-text-muted); font-size:11px; font-variant-numeric:tabular-nums; }
dialog { position:fixed; margin:auto; width:min(560px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 48px); padding:0; overflow:auto; border:0; border-radius:var(--radius-card); background:#fff; color:var(--color-text); box-shadow:var(--shadow-overlay); }
dialog[open] { animation:dialog-in var(--duration-normal) ease-out; }
dialog::backdrop { background:#16212d66; }
.modal-close { position:absolute; top:var(--space-4); right:var(--space-4); z-index:2; font-size:24px; }
#modal-content { padding:var(--space-8); }
#modal-content:has(.modal-card) { padding:0; }
.modal-header { padding:var(--space-6) var(--space-8); border-bottom:1px solid var(--color-border); }
.modal-title-box { display:flex; align-items:center; gap:var(--space-3); padding-right:var(--space-6); }
.modal-header-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-control); background:var(--color-primary-soft); color:var(--color-primary); }
.modal-title { font-size:var(--text-xl); }
.modal-subtitle { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); }
.modal-body { padding:var(--space-6) var(--space-8); }
.modal-footer { display:flex; justify-content:flex-end; gap:var(--space-2); padding:var(--space-4) var(--space-8); border-top:1px solid var(--color-border); background:var(--color-surface-subtle); }
.confirm-copy { color:var(--color-text-secondary); line-height:1.8; white-space:pre-line; }
.modal-danger-box { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-6); margin-top:var(--space-6); border-top:1px solid var(--color-border); }
.modal-danger-box strong { color:var(--color-error); font-size:var(--text-xs); } .modal-danger-box p { margin-top:var(--space-1); }
.btn.danger-subtle { color:var(--color-error); border-color:var(--color-error-border); }
.native-offline { position:fixed; inset:auto var(--space-4) var(--space-4); z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border:1px solid var(--color-warning-border); border-radius:var(--radius-control); background:var(--color-warning-soft); color:var(--color-warning); font-size:var(--text-sm); }
.p-readonly-box { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:var(--space-2) var(--space-3); background:var(--color-surface-subtle); border:1px solid var(--color-border); border-radius:var(--radius-control); }
.cred-preview-card { border:1px solid var(--color-border); border-radius:var(--radius-control); margin-top:var(--space-6); overflow:hidden; }
.cred-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); }
.cred-item+.cred-item { border-top:1px solid var(--color-border); }
.cred-label { color:var(--color-text-muted); font-size:var(--text-xs); }
.cred-val { overflow-wrap:anywhere; color:var(--color-text); }
.pwd-highlight { padding:var(--space-1) var(--space-2); border-radius:4px; background:var(--color-primary-soft); color:var(--color-primary); }
.report-dialog { width:min(960px,calc(100vw - 32px)); }
.report-doc { max-width:880px; padding:var(--space-2); }
.report-header { display:flex; justify-content:space-between; gap:var(--space-6); padding-bottom:var(--space-6); margin-bottom:var(--space-6); border-bottom:1px solid var(--color-border); }
.report-header h2 { font-size:var(--text-xl); } .report-header p { color:var(--color-text-muted); font-size:var(--text-xs); margin-top:var(--space-1); }
.report-summary-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:var(--space-8); border-bottom:1px solid var(--color-border); }
.report-card { padding:var(--space-4) 0; } .report-card span { display:block; color:var(--color-text-muted); font-size:var(--text-xs); } .report-card strong { font-size:28px; font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; }
.report-section { margin-bottom:var(--space-8); } .report-section>h3 { margin-bottom:var(--space-4); }
.teacher-note { white-space:pre-wrap; line-height:1.8; color:var(--color-text-secondary); }
.report-attempt-block { margin:var(--space-6) 0; } .report-attempt-block>h3 { font-size:var(--text-lg); }
.report-qa { border-left:2px solid var(--color-border); padding:var(--space-3) var(--space-4); margin-top:var(--space-3); }
.report-qa p { margin-top:var(--space-1); font-size:var(--text-sm); } .report-qa strong { font-size:var(--text-sm); font-weight:var(--weight-medium); }
.report-footer { padding-top:var(--space-6); border-top:1px solid var(--color-border); } .report-bar-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
#toast { position:fixed; bottom:var(--space-6); left:50%; z-index:1100; display:flex; align-items:center; gap:var(--space-3); max-width:calc(100vw - 32px); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-control); background:#fff; color:var(--color-text); box-shadow:var(--shadow-overlay); opacity:0; transform:translate(-50%,8px); pointer-events:none; transition:opacity var(--duration-fast),transform var(--duration-fast); font-size:var(--text-sm); }
#toast.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#toast[data-tone=error] .toast-icon { color:var(--color-error); } #toast[data-tone=success] .toast-icon { color:var(--color-success); }
.toast-icon { display:flex; color:var(--color-primary); } .toast-message { overflow-wrap:anywhere; }
.tooltip-anchor { position:relative; }
.tooltip-anchor[data-tooltip]:is(:hover,:focus-visible)::after { content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:max-content; max-width:220px; padding:6px var(--space-2); background:#26333d; color:#fff; font-size:11px; font-weight:var(--weight-normal); border-radius:4px; pointer-events:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes skeleton-pulse { to { opacity:.45; } }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
  :root { --text-page:28px; --text-number:32px; }
  .page-heading { flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-6); }
  .page-heading>.row { width:100%; padding:0; }
  .p-pad,.form-panel,.panel-head { padding:var(--space-4); }
  .form-grid-2,.p-question-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .table-wrap { border-radius:var(--radius-card); }
  th,td { padding:var(--space-3) var(--space-4); }
  .table-footer { padding:var(--space-2) var(--space-4); }
  .modal-header,.modal-body { padding:var(--space-6); } .modal-footer { padding:var(--space-4) var(--space-6); }
  #modal-content { padding:var(--space-6); }
  .report-summary-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .report-header { flex-wrap:wrap; gap:var(--space-2); }
  .route-error { align-items:flex-start; flex-wrap:wrap; } .route-error .btn { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after { animation:none!important; transition:none!important; }
@media print {
  @page { size:A4 portrait; margin:16mm; }
  body:has(#printable-report) #app,body:has(#printable-report) #toast,body:has(#printable-report) .modal-close { display:none!important; }
  body:has(#printable-report),dialog:has(#printable-report),#modal-content:has(#printable-report) { position:static; display:block; width:100%; max-width:none; max-height:none; overflow:visible; margin:0; padding:0; background:#fff; border:0; box-shadow:none; }
  .no-print { display:none!important; } .report-qa,.report-header,.report-summary-cards { break-inside:avoid; }
}