:root{--bg: #0d1117;--surface: #161b22;--surface-hover: #21262d;--text: #e6edf3;--text-muted: #8b949e;--accent: #0969da;--accent-soft: rgba(9, 105, 218, .2);--accent-hover: #0550ae;--border: #30363d;--radius: 14px;--radius-sm: 10px;--radius-pill: 999px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--tap-min: 44px}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40vh;padding:2rem;color:var(--text-muted);text-align:center}.app-loading p{margin:1rem 0 0;font-size:1rem}.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);padding:max(.75rem,var(--safe-top)) max(1rem,var(--safe-right)) 0 max(1rem,var(--safe-left));padding-bottom:.75rem}.school-branding{padding:.25rem 0}.school-name{margin:0;font-size:clamp(1rem,4.2vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--text)}.subtitle{margin:.35rem 0 0;font-size:.9rem;color:var(--text-muted)}.grade-tabs{display:flex;gap:.5rem;margin-top:1rem;padding:4px;background:var(--bg);border-radius:var(--radius-pill);border:1px solid var(--border)}.grade-tab{flex:1;min-height:var(--tap-min);padding:.6rem 1rem;font-size:.95rem;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-pill);cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}.grade-tab:hover,.grade-tab:focus-visible{color:var(--text);background:var(--surface-hover)}.grade-tab--active{color:#fff;background:var(--accent);box-shadow:0 1px 2px #0003}.grade-tab--active:hover,.grade-tab--active:focus-visible{background:var(--accent-hover)}.header-actions{margin-top:1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);padding:.6rem 1rem;font-size:.9rem;font-weight:500;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}.btn-ghost{background:transparent;color:var(--text-muted);min-height:auto}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-hover);color:#fff}.btn-secondary{background:var(--surface-hover);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--border);color:var(--text)}.btn-ghost.saved{color:#22c55e}.btn-ghost.error{color:#f59e0b}.main{padding:max(1rem,var(--safe-left)) max(1rem,var(--safe-right)) max(2rem,var(--safe-bottom))}.empty-grade{max-width:420px;margin:0 auto;padding:2rem 1rem;text-align:center;color:var(--text-muted);font-size:.95rem}.empty-grade-hint{margin-top:.75rem;font-size:.85rem}.empty-grade code{padding:.15em .4em;background:var(--surface);border-radius:4px;font-size:.9em}.photo-list{display:flex;flex-direction:column;gap:1.5rem;max-width:420px;margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px #00000040,0 1px 2px #00000026;transition:border-color .2s,box-shadow .2s,transform .2s}.card:hover{box-shadow:0 4px 14px #0000004d,0 2px 4px #0003}.card:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),0 4px 14px #00000040}.photo-wrap{position:relative;width:100%;aspect-ratio:3 / 4;max-height:300px;background:linear-gradient(145deg,#0a0e12,#131920);overflow:hidden;padding:10px;border-bottom:1px solid var(--border)}.photo-wrap:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:1px solid rgba(255,255,255,.06);border-radius:6px;pointer-events:none;z-index:1}.photo-wrap img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px;background:#0a0e12}.photo-wrap img[data-loaded=false]{opacity:0}.card-badge{position:absolute;top:18px;right:18px;z-index:2;min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#ffffffe6;background:#0000008c;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.photo-wrap .placeholder{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--text-muted);font-size:.9rem;text-align:center;padding:.75rem;background:var(--bg)}.placeholder--error{font-size:.8rem;color:#f59e0b}.placeholder-filename{font-weight:600;word-break:break-all}.placeholder-hint{font-size:.7rem;opacity:.9}.card-body{padding:1.15rem 1.25rem;background:var(--surface)}.label{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.5rem}.input{width:100%;min-height:var(--tap-min);padding:.8rem 1rem;font-size:16px;font-family:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation;transition:border-color .2s,box-shadow .2s}.input::placeholder{color:var(--text-muted)}.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}@media (min-width: 400px){.photo-list{max-width:440px}.photo-wrap{max-height:320px}}@media (min-width: 500px){.photo-list{max-width:480px;gap:1.75rem}.photo-wrap{max-height:340px;padding:12px}.photo-wrap:before{top:12px;right:12px;bottom:12px;left:12px}.card-badge{top:20px;right:20px}}@media (min-width: 768px){.header{padding-left:max(1.5rem,var(--safe-left));padding-right:max(1.5rem,var(--safe-right))}.school-name{font-size:1.5rem}.grade-tabs{max-width:320px;margin-top:1.25rem}.main{padding:1.5rem max(1.5rem,var(--safe-right)) 2rem max(1.5rem,var(--safe-left))}.photo-list{max-width:520px;gap:1.75rem}.photo-wrap{max-height:380px;padding:14px}.photo-wrap:before{top:14px;right:14px;bottom:14px;left:14px}.card-body{padding:1.25rem 1.5rem}.card-badge{min-width:30px;height:30px;font-size:.8rem}}