@import url("../ui/a11y.css");
:root{color-scheme:light;--text:#172d3d;--muted:#475b68;--blue:#174d9d;--line:#9baab1;--paper:#f4f6f2;--surface:#fff;--danger:#a12424}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font:500 18px/1.65 system-ui,"Microsoft JhengHei",sans-serif}a{color:var(--blue);text-underline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;max-width:880px;padding:22px 20px;margin:auto}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:800;font-size:23px}main{max-width:840px;margin:10px auto 60px;padding:0 20px}h1{font-size:30px;line-height:1.3;margin:18px 0}h2{font-size:22px;margin:12px 0}p{margin:12px 0;color:var(--muted)}button,input,select,textarea{font:inherit;color:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;cursor:pointer}button.primary,.button.primary{background:var(--blue);border-color:var(--blue);color:white}button.danger{color:var(--danger);border-color:var(--danger)}button:disabled{opacity:1;color:#53616a;background:#e4e8e9;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #174d9d;outline-offset:4px}.skip{position:absolute;left:16px;top:-100px;background:white;padding:12px;z-index:5}.skip:focus{top:12px}.banner{background:#e3edff;color:#183f79;text-align:center;font-size:15px;padding:12px 16px;border-bottom:1px solid #8099b7;position:sticky;top:0;z-index:2}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:22px;margin:18px 0}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:grid;gap:6px}input,select,textarea{width:100%;min-width:0;padding:10px;border:1px solid #718692;border-radius:8px;background:white;min-height:52px}textarea{min-height:100px;resize:vertical}.check{display:flex;align-items:flex-start;gap:12px;margin:16px 0}.check input{width:24px;min-height:24px;flex:none;margin-top:4px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;list-style:none;padding:0}.page{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.page img{display:block;width:100%;height:170px;object-fit:contain;background:#f0f2f2}.page .actions{gap:6px;margin-top:12px}.page button{font-size:16px;padding:8px 10px;min-height:48px}.badge{font-size:15px;color:#344f60;display:block;margin-top:8px}svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.hero-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--line);border-radius:18px;color:var(--blue)}.hero-icon svg{width:36px;height:36px}details{margin:18px 0;font-size:16px;color:var(--muted)}summary{cursor:pointer;font-weight:700;min-height:44px;padding:8px 0}dl{margin:18px 0}dt{font-size:15px;color:var(--muted)}dd{margin:0 0 14px;overflow-wrap:anywhere}.question{font-size:21px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}#notice:not(:empty){padding:14px;border-left:4px solid var(--blue);background:#e9eff8;margin:14px 0}#notice strong{display:block}#notice span{display:block}dialog{border:1px solid var(--line);border-radius:18px;padding:24px;max-width:480px;width:calc(100% - 32px);color:var(--text)}dialog::backdrop{background:#172d3d99}canvas{max-width:100%;border:2px solid var(--blue);touch-action:none}.editor{max-height:55vh;overflow:auto}small{color:var(--muted)}[hidden]{display:none!important}footer{margin-top:28px}input[type=file]{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;min-height:0;padding:0;border:0}.file-label{display:inline-flex}.file-label:focus-within{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:480px){header{padding:16px}main{padding:0 16px}h1{font-size:28px}.card{padding:16px}.fields{gap:12px}.pages{grid-template-columns:1fr}.actions>.primary{flex:1}button,.button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}