:root { --navy:#14213d; --ink:#172033; --muted:#64748b; --paper:#f5f7fb; --card:#fff; --line:#e5eaf2; --blue:#1d4ed8; --orange:#f97316; --pink:#db2777; --green:#059669; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } button,input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%,560px); min-height:100dvh; margin:auto; background:var(--paper); } .screen { display:none; min-height:100dvh; padding:calc(22px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); } .screen.active { display:block; } .brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); } .brand-mark { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--navy); border-radius:11px; } .access-intro { margin:64px 0 28px; } .eyebrow { margin:0 0 6px; color:var(--blue); font-size:.73rem; letter-spacing:.12em; font-weight:800; } h1 { margin:0; font-size:2rem; letter-spacing:-.04em; } h2 { margin:.3rem 0 .7rem; letter-spacing:-.025em; } .access-intro>p:last-child,.dashboard-intro { color:var(--muted); margin-top:8px; } .access-options { display:grid; gap:13px; } .access-card,.dashboard-card { border:1px solid var(--line); background:var(--card); box-shadow:0 5px 18px #1720330c; } .access-card { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:13px; width:100%; min-height:86px; padding:14px; text-align:left; border-radius:18px; } .access-card:hover { border-color:#b6c6e2; transform:translateY(-1px); } .icon { display:grid; place-items:center; padding:0; width:48px; height:48px; background:#eaf1ff; color:var(--blue); border-radius:14px; } .icon svg { display:block; width:32px; height:32px; } .access-card strong,.access-card small { display:block; } small { color:var(--muted); margin-top:2px; } .arrow { font-size:2rem; color:#94a3b8; } .status { min-height:1.5em; margin:18px 2px 0; color:var(--muted); font-size:.92rem; } .status.success { color:#047857; } .status.error { color:#b91c1c; } .topbar { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; } .topbar h1 { font-size:1.65rem; } .current-date-time { margin:5px 0 0; color:var(--muted); font-size:.87rem; } .icon-button,.back-button { border:0; background:#e8eef8; color:var(--navy); border-radius:12px; width:45px; height:45px; font-size:1.5rem; } .icon-button svg { display:block; width:26px; height:26px; margin:auto; } .back-button { flex:0 0 auto; } .dashboard-intro { margin:26px 0 18px; } .dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .dashboard-card { min-height:150px; padding:17px; border-radius:20px; text-align:left; border-top:5px solid var(--blue); } .dashboard-card>span { display:grid; place-items:center; padding:0; width:40px; height:40px; border-radius:12px; background:#eaf1ff; color:var(--blue); font-weight:800; font-size:1.55rem;}.dashboard-card>span svg { display:block; width:30px; height:30px; }.clover-icon { font-size:2rem!important; line-height:1; transform:translateY(-1px); }.dashboard-card strong { display:block; margin-top:15px; line-height:1.15; } .dashboard-card small { display:block; } .accent-orange { border-color:var(--orange); }.accent-orange>span { background:#fff0df;color:var(--orange); }.accent-pink { border-color:var(--pink); }.accent-pink>span { background:#fde7f3;color:var(--pink); }.accent-green { border-color:var(--green);}.accent-green>span { background:#e2f7ef;color:var(--green);}.accent-yellow { border-color:#eab308;}.accent-yellow>span { background:#fef9c3;color:#a16207;}.date-controls { display:grid; grid-template-columns:50px 1fr 50px; gap:10px; margin:33px 0 16px;}.date-controls button { min-height:48px; border:1px solid var(--line); background:white; border-radius:13px; font-size:1.5rem; color:var(--navy);}.date-controls .today-button { font-size:1rem; font-weight:700;}.schedule-card { padding:24px; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 5px 18px #1720330c;}.schedule-card p { color:var(--muted);}.schedule-date { color:var(--blue)!important; text-transform:capitalize; font-weight:800;}.primary-button { display:block; width:100%; margin-top:22px; padding:14px; border:0; background:var(--navy); color:white; border-radius:13px; text-align:center; font-weight:800; text-decoration:none;}.secondary-link { display:block; margin-top:14px; color:var(--blue); text-align:center; font-weight:700; }.web-container { height:calc(100dvh - 175px); min-height:380px; margin-top:28px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:white; }.web-container iframe { width:100%; height:100%; border:0; }.placeholder-note { font-size:.9rem; color:#9a5b00!important;}.modal { width:min(calc(100% - 32px),440px); padding:25px; border:0; border-radius:22px; box-shadow:0 20px 60px #17203340;}.modal::backdrop { background:#14213d99;}.modal form { position:relative;}.close-modal { position:absolute; right:0; top:-6px; border:0; background:transparent; font-size:1.8rem; color:var(--muted);}.modal label { display:block; margin:20px 0 7px; font-weight:700;}.modal input { width:100%; padding:14px; border:1px solid #cbd5e1; border-radius:12px; outline-color:var(--blue);}.scanner-modal { max-width:500px;}.scanner-modal h2 { margin-bottom:18px;} #reader { overflow:hidden; border-radius:15px; background:#e8eef8;} #reader video { max-width:100%;} @media (min-width:561px) { body { padding:20px 0;} .app-shell { min-height:calc(100dvh - 40px); border-radius:28px; overflow:hidden; box-shadow:0 12px 45px #17203316;} .screen { min-height:calc(100dvh - 40px); } }