:root{--font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:10px;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--primary:#2563eb;--primary-contrast:#ffffff;--bg:#ffffff}
[data-theme="dark"]{--border:#334155;--text:#e5e7eb;--muted:#94a3b8;--primary:#60a5fa;--primary-contrast:#0b1220;--bg:#0b1220}
@media (prefers-color-scheme: dark){:root{color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);margin:0}
.container{max-width:960px;margin:0 auto;padding:0 var(--space-4)}
header{border-bottom:1px solid var(--border);margin-bottom:var(--space-4)}
.header-inner{display:flex;gap:var(--space-4);justify-content:space-between;align-items:center;padding:var(--space-3) 0}
.brand a{text-decoration:none;color:var(--text)}
.nav{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.nav a{text-decoration:none;color:var(--text)}
.nav a:hover{color:var(--primary)}
/* logo in header: match text height and be responsive */
.brand-logo{height:1em;width:auto;vertical-align:middle;display:inline-block;max-height:1.2em}
main{padding:var(--space-4) 0}

.stack>*+*{margin-top:var(--space-4)}
.muted{color:var(--muted)}

.btn{display:inline-block;padding:10px 16px;border:1px solid var(--primary);background:var(--primary);color:var(--primary-contrast);border-radius:var(--radius);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(0.95)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.theme-toggle{padding:6px 10px}

.card{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);background:var(--bg);color:var(--text)}
.card.stack{border-color:var(--border)}
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-4)}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}

.table-responsive{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--space-3);border-bottom:1px solid var(--border);text-align:left}

.form{display:block}
.form .form-field{margin-bottom:var(--space-4)}
.form label{display:block;margin-bottom:var(--space-2);font-weight:600}
.form input[type="text"],.form input[type="password"],.form input[type="email"],.form select{width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.form select option{background:var(--bg);color:var(--text)}
.form textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.form input:focus,.form select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent)}
.errorlist{margin:var(--space-2) 0 0;padding:0;color:#ef4444}
.errorlist li{list-style:none}
.form input:invalid{border-color:#ef4444}
.help{font-size:0.9em;color:var(--muted)}

ol.question-list{padding-left:18px}
.question-item{margin-bottom:var(--space-5)}
.question-text{margin-bottom:var(--space-2);font-weight:600}
.choices ul{list-style:none;margin:0;padding:0}
.choices li{margin-bottom:var(--space-2)}
.choices input{margin-right:var(--space-2)}
.choices label{display:inline-block}

footer{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--border);color:var(--muted)}

/* Subject selector on homepage */
.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* 默认：纵向设备/窄屏每行2列 */
@media (orientation:portrait){
	.subject-grid{grid-template-columns:repeat(2,1fr)}
}
/* 在小屏（手机）上让头部品牌独占一行，品牌内图标与名称保持横向排列。
   使用宽度断点替代 orientation，以防在宽屏设备上误触发。 */
@media (max-width:640px){
	.header-inner{flex-direction:column;align-items:stretch;gap:var(--space-2)}
	.header-inner .brand{display:flex;flex-direction:row;align-items:center;gap:6px}
	.header-inner .brand a{display:block}
	.header-inner .brand .brand-logo{display:inline-block}
	.header-inner .nav{align-self:center}
}
/* 横屏设备优先展示 4 列 */
@media (orientation:landscape){
	.subject-grid{grid-template-columns:repeat(4,1fr)}
}
/* 兼顾大屏：即使竖屏在足够宽度下也允许更多列 */
@media (min-width:960px){
	.subject-grid{grid-template-columns:repeat(4,1fr)}
}
.subject-card{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:16px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:var(--bg)}
.subject-card:hover{box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.subject-icon{width:100%;height:auto;max-height:240px;max-width:240px;object-fit:contain;margin:0 auto 8px}
.subject-icon.placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:auto;max-height:240px;max-width:240px;border-radius:6px;background:var(--border);color:var(--muted);font-weight:600;margin:0 auto 8px}
.subject-name{font-weight:600;text-align:center}