:root { color-scheme: light; font-family: Inter, ui-rounded, system-ui, -apple-system, sans-serif; --ink:#30272c; --muted:#786b71; --accent:#724c61; --soft:#f5e9ed; --paper:#fffdfa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#f7eeea,#eee1e6); color:var(--ink); }
button,input,select,textarea { font:inherit; }
.phone-shell { width:min(100%,520px); min-height:100vh; margin:auto; padding:calc(18px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom)); background:rgba(255,253,250,.93); }
.login-mode { background:#f3e8e8 url("/static/assets/login-wool-v1.webp") center bottom/cover fixed no-repeat; }
.login-mode .phone-shell { background:linear-gradient(to bottom,rgba(255,253,250,.82),rgba(255,253,250,.42) 68%,rgba(255,253,250,.18)); }
.login-mode .card { background:rgba(255,255,255,.96); backdrop-filter:blur(3px); }
header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
header h1,header small { margin:0; } header h1{font-size:18px} header small{color:var(--muted)}
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--accent); color:white; font:700 22px Georgia,serif; }
.welcome { margin:22px 2px; }.welcome h2,.home-title h2{font:700 34px/1.05 Georgia,serif;margin:5px 0 10px}.welcome p{color:var(--muted);line-height:1.5}.eyebrow{margin:0!important;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:800;color:var(--accent)!important}
.login-welcome-mobile{text-align:center;margin-top:8px}.login-welcome-mobile h2{font-size:38px}.login-welcome-mobile p:last-child{margin-bottom:0}.yarn-loop{position:relative;width:58px;height:58px;margin:0 auto 12px;border:3px solid var(--accent);border-radius:50%;color:transparent;background:repeating-linear-gradient(145deg,transparent 0 7px,rgba(114,76,97,.18) 8px 10px)}.yarn-loop::after{content:"";position:absolute;width:48px;height:18px;left:42px;top:39px;border-top:3px solid var(--accent);border-radius:50%;transform:rotate(12deg)}
.card { display:grid; gap:16px; padding:20px; border:1px solid #eadde1; border-radius:22px; background:white; box-shadow:0 12px 34px rgba(67,40,53,.07); }
.access-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid #e2d5d0;border-radius:16px;background:#faf6f2}.access-tab{padding:12px 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-weight:750}.access-tab.active{background:var(--accent);color:white;box-shadow:0 5px 14px rgba(114,76,97,.2)}.login-panel{display:grid;gap:16px}.login-help-links{display:grid;gap:10px;padding-top:2px;text-align:center}.text-action{min-height:auto;padding:2px;border:0;background:transparent;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}.panel-intro{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.privacy-shortcut{justify-self:center;margin-top:-3px;color:var(--muted);font-size:12px;text-underline-offset:3px}
label { display:grid; gap:7px; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #dacbd1; border-radius:13px; background:#fff; padding:14px; color:var(--ink); } textarea{min-height:110px;resize:vertical}
button { width:100%; border:0; border-radius:14px; padding:14px 16px; background:var(--accent); color:white; font-weight:800; cursor:pointer; }
button.secondary,.back,.icon-button { background:transparent; color:var(--accent); border:1px solid #d9c8cf; }.back{width:auto;padding:9px 12px}.icon-button{width:auto;padding:9px 12px}
.admin-link { display:block; margin:20px auto; color:var(--accent); text-align:center; font-weight:700; }.install-tip{margin-top:18px;padding:14px;border-radius:14px;background:var(--soft);color:var(--muted)}
.choice { grid-template-columns:auto 1fr;align-items:center;padding:12px;border:1px solid #eadde1;border-radius:14px}.choice input{width:22px;height:22px}.choice span{display:grid}.choice small{font-weight:400;color:var(--muted)}
.checks{display:grid;gap:8px}.checks label{grid-template-columns:auto 1fr;align-items:center;padding:10px;background:#faf5f6;border-radius:10px}.checks input{width:20px;height:20px}
.home-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0}.home-title p{margin:0}.home-title h2{font-size:30px}.home-actions{display:grid;justify-items:center;gap:5px}.home-actions a{color:var(--muted);font-size:11px;text-underline-offset:2px}
h3{margin:28px 2px 10px;font-size:17px}.feed{display:grid;gap:10px}.feed-card{padding:16px;border:1px solid #eadde1;border-radius:16px;background:white}.feed-card strong,.feed-card span{display:block}.feed-card span{margin-top:5px;color:var(--muted);font-size:14px}.feed-card button{margin-top:12px}.upcoming-class,.compact-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.upcoming-class .class-info,.compact-row .class-info{min-width:0}.upcoming-class button{width:auto;min-width:126px;margin-top:0;padding:9px 12px;border-radius:999px;font-size:13px;white-space:nowrap}.compact-row .pill{align-self:center;white-space:nowrap}.empty{padding:18px;border-radius:14px;background:#f5f0f1;color:var(--muted);text-align:center}
.app-notice{border-color:#d8beca;background:#fff7fa}.app-notice button{width:auto;justify-self:start;padding:9px 13px}
.pill{display:inline-block!important;width:auto;padding:4px 8px;border-radius:999px;background:var(--soft);color:var(--accent)!important;font-size:12px!important;font-weight:700}.message{position:sticky;top:10px;z-index:5;margin-bottom:10px;padding:13px;border-radius:12px;background:#30272c;color:white}.message.error{background:#9a3348}
.pill.no-attendance{background:#f6e0e4;color:#9a3348!important}.pill.extra-pill{background:#fff1c2;color:#8a5a00!important}.pill.recovery-pill{background:#dbeafe;color:#1e4d8f!important}
.notification-card{display:grid;gap:12px;margin-bottom:16px;padding:14px;border:1px solid #dfcbd3;border-radius:16px;background:var(--soft)}.notification-card div,.notification-card small{display:grid;gap:4px}.notification-card small{color:var(--muted);line-height:1.4}.notification-card button{padding:11px 14px}.recovery-card{border-color:#d9a4b8;background:#f0cfdb}.teacher-mobile-card .mini-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.teacher-mobile-card .mini-list span{margin:0;padding:4px 8px;border-radius:999px;background:#f7edf1;color:var(--accent);font-size:12px}
[hidden]{display:none!important}@media(min-width:521px){.phone-shell{margin:24px auto;min-height:calc(100vh - 48px);border-radius:28px;box-shadow:0 25px 70px rgba(67,40,53,.14)}.login-mode .phone-shell{background:linear-gradient(to bottom,rgba(255,253,250,.86),rgba(255,253,250,.5) 70%,rgba(255,253,250,.28)),url("/static/assets/login-wool-v1.webp") center bottom/cover no-repeat}}