html,body{height:100vh;overflow:hidden}.encoder-layout{grid-template-columns:1fr 1fr;gap:1rem;height:calc(100vh - 48px);display:grid}.scan-panel{flex-direction:column;gap:.75rem;padding:1rem;display:flex;overflow:hidden}.scan-viewer{cursor:grab;flex:1;min-height:0;position:relative;overflow:hidden}.scan-viewer.panning{cursor:grabbing}.upload-source-btn{transition:opacity .16s}.upload-source-btn:hover{opacity:.72}.upload-source-btn:active{opacity:.52}.scan-viewer img,.scan-viewer canvas{transform-origin:0 0;border-radius:var(--radius);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;display:block}.form-panel-wrap{flex-direction:column;display:flex;position:relative;overflow:hidden}.form-panel{flex:1;min-height:0;padding:1rem 1rem 2.5rem;overflow-y:auto}.form-panel::-webkit-scrollbar-thumb{border-color:var(--surface)}.save-footer{z-index:10;background:var(--bg);border-top:1px solid var(--border);flex-direction:column;gap:.35rem;padding:.75rem 1rem;display:flex;position:relative}.save-footer p{text-align:center;min-height:1.1rem;margin:0;font-size:.85rem}.form-panel-wrap:before,.form-panel-wrap:after{content:"";z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(3px);height:64px;transition:opacity .2s;position:absolute;left:0;right:12px}.form-panel-wrap:before{background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);opacity:var(--grad-top,0);top:0;-webkit-mask-image:linear-gradient(#000 30%,#0000 100%);mask-image:linear-gradient(#000 30%,#0000 100%)}.form-panel-wrap:after{background:linear-gradient(to top, var(--bg) 0%, transparent 100%);opacity:var(--grad-bottom,1);bottom:55px;-webkit-mask-image:linear-gradient(#0000 0%,#000 70%);mask-image:linear-gradient(#0000 0%,#000 70%)}.page-nav{align-items:center;gap:.4rem;display:flex}.page-nav span{color:var(--muted);font-size:.82rem}.zoom-controls{align-items:center;gap:.25rem;margin-left:auto;display:flex}.zoom-controls span{color:var(--muted);text-align:center;min-width:36px;font-size:.78rem}.section-title{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-top:2.5px solid var(--border);margin:1.5rem 0 .75rem;padding-top:1.5rem;font-size:.72rem;font-weight:600}.section-title:first-of-type{border-top:none;padding-top:0}.editing-banner+.section-title{border-top:none;margin-top:0;padding-top:0}.field-grid-2{grid-template-columns:1fr 1fr;gap:.65rem;display:grid}.field-grid-3{grid-template-columns:1fr 1fr 1fr;gap:.65rem;display:grid}.field-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;gap:.65rem;display:grid}.field{flex-direction:column;gap:.25rem;display:flex}.field.span-2{grid-column:span 2}.grades-table{border-collapse:collapse;table-layout:fixed;width:100%;margin-top:.5rem;font-size:.83rem}.grades-table th{color:var(--muted);text-align:center;border-bottom:1px solid var(--border);width:58px;padding:.35rem .4rem;font-size:.72rem;font-weight:600}.grades-table th.subject-col{text-align:left;width:100%;padding-left:0}.grades-table td{border-bottom:1px solid var(--border);vertical-align:middle;text-align:center;width:58px;padding:.35rem .4rem}.grades-table .spacer-col{border:none;width:12px;padding:0}.grades-table .remark-col{text-align:center;width:84px}.grades-table td.subject-name-cell{text-align:center;width:auto;padding-left:0}.grades-table tr:last-child td{border-bottom:none}.grades-table .subject-name{color:var(--text);white-space:nowrap;font-size:.83rem;line-height:1}.grades-table input[type=number]{text-align:center;border-color:var(--muted);opacity:.65;width:46px;padding:.3rem .15rem;font-size:.82rem}.grades-table input[type=number]:focus{border-color:var(--text);opacity:1}.grades-table input[aria-invalid=true],.grade-input[aria-invalid=true]{border-color:var(--danger);color:var(--danger);opacity:1}.grade-error{border:1px solid #fecaca;border-left:4px solid var(--danger);color:var(--danger);border-radius:var(--radius);background:#fef2f2;margin:-.65rem 0 1rem;padding:.55rem .7rem;font-size:.82rem;font-weight:600;display:none}.grade-error.active{display:block}[data-theme=dark] .grade-error{background:#2e1a1a;border-color:#6f2a2a}.period-hidden{display:none!important}.remarks-row{align-items:center;gap:.75rem;margin-top:.75rem;padding:0 .25rem;display:flex}.checkbox-list{flex-direction:column;gap:.65rem;margin-top:0;margin-bottom:1rem;padding-left:.25rem;display:flex}.checkbox-label{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;margin-bottom:0;font-size:.83rem;font-weight:500;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--text);margin:0;padding:0}.remarks-row label{white-space:nowrap;margin:0}.scan-placeholder{width:100%;height:100%;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.scan-placeholder svg{opacity:.35}.scan-viewer.drag-over{border-color:var(--accent);background:var(--accent-bg)}.scan-viewer.drag-over .scan-placeholder{color:var(--accent)}.tab-bar{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);z-index:10;gap:.25rem;margin-bottom:1.25rem;padding:.25rem;display:flex;position:sticky;top:0}.tab-bar button{color:var(--muted);border-radius:calc(var(--radius) - 2px);background:0 0;border:none;flex:1;padding:.35rem .5rem;font-size:.85rem}.tab-bar button.active{background:var(--surface);color:var(--text);border:1px solid var(--border);font-weight:600}.editing-banner{text-align:left;color:#3c2d00;-webkit-user-select:none;user-select:none;background:#fff5c9;border:1px solid #e7ca68;border-left:4px solid #d9a900;border-radius:2px;justify-content:center;align-items:center;margin:0 0 1rem;padding:.7rem .85rem;display:none}.editing-banner.active{flex-direction:column;align-items:flex-start;display:flex}.editing-banner strong{font-size:.88rem;font-weight:700;line-height:1.25;display:block}.editing-banner span{color:#6f5705;margin-top:.15rem;font-size:.78rem;display:block}[data-theme=dark] .editing-banner{color:#f8e7a1;background:#332a10;border-color:#6e5a1f #6e5a1f #6e5a1f #d2a91e}[data-theme=dark] .editing-banner span{color:#d8c475}.att-table{border-collapse:collapse;width:100%;margin-top:.5rem;font-size:.83rem}.att-table th{color:var(--muted);text-align:center;border-bottom:1px solid var(--border);width:1%;padding:.35rem .5rem;font-size:.72rem;font-weight:600}.att-table th.row-label{text-align:left;width:auto;padding-left:0}.att-table td{text-align:center;border-bottom:1px solid var(--border);vertical-align:middle;padding:.35rem .5rem}.att-table td.row-label{color:var(--text);text-align:center;vertical-align:middle;white-space:nowrap;padding-left:0;font-size:.83rem}.att-table tr:last-child td{border-bottom:none}.att-table input{text-align:center;border-color:var(--muted);opacity:.65;width:36px;padding:.35rem .15rem;font-size:.82rem}.att-table input:focus{border-color:var(--text);opacity:1}hr{display:none}