:root{--app-orange:#c45c39;--app-ink:#38291f;--app-muted:#806d5b;--app-paper:#f8f3e9;--app-line:#e5d8c4}.app-shell{overscroll-behavior:none;background:var(--app-paper);height:100dvh;color:var(--app-ink);padding:0 max(24px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-bottom));flex-direction:column;font-family:Roca,PingFang TC,system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.app-topbar{border-bottom:1px solid var(--app-line);flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:62px;display:grid}.app-topbar>a{color:#98543b;align-items:center;gap:8px;width:fit-content;min-height:44px;font-size:16px;display:flex}.app-topbar>strong{color:var(--app-orange);font-size:26px}.app-topbar>span{text-align:right;text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.app-heading{flex:none;justify-content:space-between;align-items:center;gap:18px;min-height:76px;padding:12px 0;display:flex}.app-heading h1{letter-spacing:-.6px;margin:0;font-size:30px;line-height:1.1}.app-content{flex:1;min-height:0;position:relative}.app-message{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;height:100%;display:flex}.app-message h2{margin:0;font-size:26px}.app-message p{max-width:480px;color:var(--app-muted);margin:0;font:16px/1.5 system-ui,sans-serif}.app-primary,.app-secondary{min-height:48px;font:inherit;border:0;border-radius:15px;justify-content:center;align-items:center;gap:10px;padding:12px 22px;font-size:16px;display:inline-flex}.app-primary{background:var(--app-orange);color:#fff}.app-secondary{color:#7f553c;background:#ede3d3}.app-primary:disabled,.app-secondary:disabled{opacity:.5}.app-tabs{background:#ebe2d3;border-radius:17px;gap:6px;padding:5px;display:flex}.app-tabs button{min-height:44px;color:var(--app-muted);background:0 0;border:0;border-radius:12px;padding:10px 18px;font-size:15px}.app-tabs button[aria-pressed=true]{color:#9e4c2d;background:#fffdf7;box-shadow:0 2px 8px #6040200c}.app-card{border:1px solid var(--app-line);background:#fffdf7;border-radius:24px}.app-body{color:var(--app-muted);font:16px/1.5 system-ui,sans-serif}.app-pagination{justify-content:flex-end;align-items:center;gap:16px;min-height:52px;font:14px system-ui,sans-serif;display:flex}.app-pagination button{border:1px solid var(--app-line);width:44px;height:44px;color:var(--app-ink);background:#fffdf7;border-radius:50%}.app-pagination button:disabled{opacity:.35}.app-rotate{display:none}@media (max-height:680px) and (orientation:landscape){.app-topbar{height:52px}.app-heading{min-height:64px;padding:8px 0}.app-heading h1{font-size:26px}.app-shell{padding-bottom:18px}}@media (orientation:portrait){.app-rotate{z-index:500;background:var(--app-paper);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.app-rotate h2{font-size:26px}.app-rotate p{font:16px system-ui,sans-serif}}@media (prefers-reduced-motion:no-preference){.app-primary,.app-secondary,.app-tabs button{transition:background .16s,transform .16s}.app-primary:active,.app-secondary:active{transform:scale(.98)}}.app-dialog{width:min(600px,100vw - 56px);max-height:calc(100dvh - 40px);color:var(--app-ink);background:#fffbf2;border:1px solid #e6d5bc;border-radius:28px;padding:28px;font-family:Roca,PingFang TC,system-ui,sans-serif;box-shadow:0 30px 100px #37241640}.app-dialog::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#372b245f}.app-dialog>header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;display:flex}.app-dialog h2{margin:0;font-size:27px;line-height:1.1}.app-dialog>header button{color:#825638;background:#f1e7d7;border:0;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.app-dialog input,.app-dialog textarea,.app-dialog select{color:#352820;background:#fffef8;border:1px solid #d9c5a9;border-radius:14px;width:100%;min-height:48px;padding:12px;font:16px/1.4 system-ui}.app-dialog label{gap:8px;font-size:17px;display:grid}.app-dialog footer{justify-content:flex-end;gap:12px;margin-top:22px;display:flex}.app-inline-error{color:#8d3f2c;background:#f8e0d5;border-radius:14px;padding:12px 16px;font:15px/1.5 system-ui}.app-dialog :focus-visible{outline:3px solid var(--app-orange);outline-offset:3px}.app-student-picker{flex-direction:column;gap:16px;height:100%;min-height:0;display:flex}.app-student-picker form{border:1px solid var(--app-line);background:#fffdf6;border-radius:18px;flex:none;align-items:center;gap:12px;padding:4px 4px 4px 16px;display:flex}.app-student-picker input{min-width:0;color:var(--app-ink);background:0 0;border:0;flex:1;height:44px;font:17px system-ui}.app-student-list{flex:1;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:1fr 1fr;gap:12px;min-height:0;display:grid}.app-student-list button{border:1px solid var(--app-line);text-align:left;color:var(--app-ink);background:#fffdf7;border-radius:18px;align-items:center;gap:16px;min-height:0;padding:14px;display:flex}.app-student-list i{background:#eedfc6;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;font-size:23px;font-style:normal;display:grid}.app-student-list strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:20px;overflow:hidden}.app-student-list small{color:var(--app-muted);margin-top:3px;font:13px/1.4 system-ui;display:block}.app-student-list button>span{white-space:nowrap;color:#a46c36;margin-left:auto;font-size:15px}@media (max-height:680px){.app-student-list{gap:8px}.app-student-list button{padding:8px 12px}.app-student-list strong{font-size:18px}.app-student-picker{gap:10px}}.app-dialog{max-height:calc(100dvh - 40px);margin:auto;inset:0}
