:root{font-family:Arial,sans-serif;color:#183b35;background:#f5f7f3;font-size:15px}*{box-sizing:border-box}body{margin:0}header{height:90px;background:#fff;border-bottom:1px solid #dfe6df;display:flex;align-items:center;justify-content:space-between;padding:0 6%}.brand{text-decoration:none;color:#163e34;font-size:26px;font-weight:750;display:flex;align-items:center;gap:12px}.mark{background:#1e6552;color:white;border-radius:12px;padding:7px 13px}.tag{font-size:10px;letter-spacing:1.6px;border-left:1px solid #dce4dd;padding-left:16px;margin-left:10px;color:#71837a}main{max-width:1120px;margin:64px auto;padding:0 24px;min-height:65vh}button{cursor:pointer;border:0;border-radius:8px;background:#216651;color:#fff;padding:13px 20px;font-size:14px;font-weight:600}button:hover{filter:brightness(.94)}.outline{background:transparent;color:#245646;border:1px solid #cfdcd3}.eyebrow{font-size:12px;letter-spacing:2px;color:#467764;font-weight:bold}h1{font-size:44px;line-height:1.18;letter-spacing:-1.4px;margin:18px 0}h2{font-size:22px;margin:0 0 22px}h3{font-size:17px}p{line-height:1.8;color:#6b7c73}.hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.intro{padding-top:30px}.pill{display:inline-block;border:1px solid #ccdbcf;border-radius:30px;padding:8px 13px;color:#46745d;font-size:12px;margin-top:20px}.card{background:#fff;border:1px solid #e0e6dd;border-radius:18px;padding:30px;box-shadow:0 12px 40px #294c3410}.card p{font-size:13px}.field{display:flex;flex-direction:column;gap:8px;margin:18px 0}label{font-size:13px;font-weight:bold}input,select{width:100%;padding:13px;border:1px solid #d3dfd6;border-radius:8px;background:#fff;color:#244238;font:inherit}input:focus,select:focus{outline:2px solid #87b59b;outline-offset:2px}.full{width:100%}.hint{background:#eef4ee;border-radius:10px;padding:14px;font-size:12px;color:#62766a;line-height:1.7;margin-top:20px}.results{margin-top:36px}.empty{text-align:center;padding:35px;color:#7b887e;border:1px dashed #d7e0d5;border-radius:10px}.toolbar,.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toolbar{margin:24px 0}.toolbar select,.toolbar input{width:auto;flex:1}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.tabs button{background:#e4ece3;color:#345c48}.tabs button.selected{background:#216651;color:white}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:15px 10px;border-bottom:1px solid #e9eee6}th{font-size:12px;color:#738577}td{font-size:14px}td select{min-width:125px}.tablewrap{overflow:auto}.badge{padding:6px 10px;border-radius:30px;background:#e7f2e9;font-size:12px;white-space:nowrap}.absent{background:#fbe9e5;color:#a14d41}.late{background:#fff2d4;color:#916523}.excused{background:#e9eefa;color:#5d71a0}.unregistered{background:#eef0ee;color:#788078}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.small{padding:8px 12px;font-size:12px}.muted{color:#819184}.login{max-width:440px;margin:0 auto}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#183f34;color:white;border-radius:10px;padding:16px 24px;display:none;max-width:90%;z-index:3}footer{border-top:1px solid #dce5da;padding:24px 6%;font-size:12px;color:#7f8e80;display:flex;justify-content:space-between}.intro .line{height:1px;background:#dbe4d7;margin:32px 0}.number{font-size:28px;color:#2c6a51}.note{font-size:12px;color:#7a897c}a{color:#286b54}@media(max-width:760px){header{height:76px;padding:0 20px}.tag{display:none}header button{font-size:12px;padding:10px}main{margin:30px auto;padding:0 18px}.hero,.grid{grid-template-columns:1fr;gap:26px}h1{font-size:34px}.intro{padding-top:0}.card{padding:22px}footer{gap:15px;flex-direction:column}.toolbar>*{min-width:130px}td,th{padding:12px 7px}}

/* Fluid layout, including short screens and mobile browser chrome. */
:root{--page-gutter:clamp(16px,4vw,48px);--header-height:clamp(68px,10vh,90px)}
html{scroll-padding-top:calc(var(--header-height) + 16px)}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
header{position:sticky;top:0;z-index:10;flex-shrink:0;height:auto;min-height:var(--header-height);gap:16px;padding:12px max(var(--page-gutter),env(safe-area-inset-right)) 12px max(var(--page-gutter),env(safe-area-inset-left));transition:transform .22s ease;will-change:transform}
header.is-hidden{transform:translateY(-100%)}
header:focus-within{transform:translateY(0)}
.brand{flex-shrink:0;white-space:nowrap}
#staff{max-width:55%;min-height:44px}
main{flex:1;width:100%;min-height:0;margin:clamp(24px,6vh,64px) auto;padding-inline:var(--page-gutter)}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero>*,.grid>*,#panel,.card,form,.field{min-width:0}
h1{font-size:clamp(30px,4.5vw,44px)}
h2{font-size:clamp(19px,2.5vw,22px);line-height:1.4}
p,.hint,.empty,.toolbar strong,.toolbar span,td{overflow-wrap:anywhere}
.card{padding:clamp(18px,3vw,30px)}
button,input,select{min-height:44px}
button{white-space:normal}
input,select{min-width:0;max-width:100%}
.toolbar{align-items:end}
.toolbar>label{display:flex;flex:1 1 180px;flex-direction:column;gap:8px;min-width:0}
.toolbar select,.toolbar input{width:100%;flex:none}
.toolbar>button{flex-shrink:0}
.tabs{gap:8px}
.tabs button{flex:0 1 auto}
.tablewrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
th{white-space:nowrap}
td select{min-width:125px}
.login{width:100%}
#notice{bottom:max(16px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px);max-height:45svh;overflow:auto;overflow-wrap:anywhere;z-index:20}
footer{flex-shrink:0;gap:12px;flex-wrap:wrap;padding:20px var(--page-gutter) max(20px,env(safe-area-inset-bottom))}
button:focus-visible,a:focus-visible{outline:2px solid #467764;outline-offset:3px}
button:disabled{opacity:.55;cursor:default}
@media(max-width:900px){.tag{display:none}.hero{gap:28px}}
@media(max-width:760px){
 .hero,.grid{grid-template-columns:minmax(0,1fr)}
 .intro{padding-top:0}
 .intro p br{display:none}
 .toolbar>*{min-width:0}
 .tabs button{flex:1 1 140px}
 footer{flex-direction:column}
}
@media(max-width:420px){
 header{gap:10px}
 .brand{font-size:22px;gap:8px}
 .mark{padding:6px 10px;border-radius:10px}
 #staff{padding:8px 10px;font-size:12px}
 .toolbar>label,.toolbar>button{flex:1 1 100%;width:100%}
 .card .toolbar>strong,.card .toolbar>span{flex-basis:100%}
 .empty{padding:24px 14px}
 td,th{padding:12px 7px}
}
@media(max-height:540px) and (min-width:761px){
 :root{--header-height:60px}
 main{margin-block:20px}
 .intro{padding-top:0}
 .intro .line{margin-block:20px}
}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* Purple palette and gentle interaction states. */
:root{color:#302447;background:#f7f5fb;--accent:#7c3aed;--accent-dark:#6d28d9;--accent-soft:#f0e9fc;--focus:#a78bfa}
header{background:#ffffffed;border-color:#e9e1f3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{color:#4c267a}
.mark{background:linear-gradient(145deg,#9254eb,#6d28d9);box-shadow:0 4px 12px #7c3aed20}
.tag{color:#8a789f;border-color:#e7def0}
button{background:var(--accent);transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
button:hover{filter:none}
button:active:not(:disabled){transform:translateY(0) scale(.98)}
.outline{color:#7041a1;border-color:#ded0ed;background:transparent}
.eyebrow{color:#8654b7}
h1,h2,h3{color:#38234f}
p{color:#80728f}
.pill{border-color:#e0d1f0;color:#8151a7;background:#f5effc}
.card{border-color:#e9e0f2;box-shadow:0 10px 36px #5c2b8610;transition:border-color .25s ease,box-shadow .25s ease}
input,select{color:#433253;border-color:#dfd4eb;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;accent-color:var(--accent)}
input::placeholder{color:#a395b2}
input:focus,select:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:#b799e4;box-shadow:0 0 0 4px #7c3aed0a}
.hint{background:#f3edf9;color:#867196}
.empty{color:#9685a3;border-color:#e3d7ed}
.tabs button{background:#eee6f7;color:#7a509b}
.tabs button.selected{background:var(--accent);color:#fff;box-shadow:0 4px 12px #7c3aed20}
th{color:#9984a9}
td,th{border-color:#f0eaf5}
tbody tr{transition:background-color .2s ease}
.badge{background:#e7f2e9;color:#38694a}
.absent{background:#fbe9e5;color:#a14d41}
.late{background:#fff2d4;color:#916523}
.excused{background:#eee7fb;color:#7c54a6}
.unregistered{background:#f0edf4;color:#8a7c97}
.muted{color:#a08dad}
#notice{background:#4e2875;box-shadow:0 8px 28px #4e287530}
footer{color:#9a87aa;border-color:#e9e0f2}
.intro .line{background:#e7ddef}
.number{color:#8b4ed0}
.note{color:#9783a5}
a{color:#8242bf;transition:color .2s ease}
button:focus-visible,a:focus-visible{outline-color:var(--focus)}
@media(hover:hover) and (pointer:fine){
 button:hover:not(:disabled){background:var(--accent-dark);box-shadow:0 5px 14px #7c3aed24;transform:translateY(-2px)}
 .outline:hover:not(:disabled){background:var(--accent-soft);border-color:#bb99e0;color:#653594;box-shadow:0 4px 12px #7c3aed10}
 .tabs button:hover:not(:disabled){background:#e4d5f7;color:#63318f}
 .tabs button.selected:hover{background:var(--accent-dark);color:#fff}
 .card:hover{border-color:#d9c5ee;box-shadow:0 14px 40px #5c2b8618}
 input:hover:not(:disabled),select:hover:not(:disabled){border-color:#bd9cdd}
 tbody tr:hover{background:#faf7fe}
 .brand:hover{color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 button:hover:not(:disabled),button:active:not(:disabled){transform:none}
}

.registry-input{display:grid;grid-template-columns:76px 76px minmax(0,1fr);gap:8px;align-items:start}
.registry-input select{padding-inline:10px}
.registry-input input{width:100%;letter-spacing:.08em}
@media(max-width:420px){.registry-input{grid-template-columns:64px 64px minmax(0,1fr);gap:6px}.registry-input select{padding-inline:6px}.registry-input input{padding-inline:8px;letter-spacing:.02em;font-size:16px}}

/* Deep violet art direction. */
:root{color-scheme:dark;color:#eee9ff;background:#100830;--accent:#8950ff;--accent-dark:#a270ff;--accent-soft:#362064;--focus:#b18bff}
body{background:radial-gradient(ellipse at 5% 8%,#7030b94d 0,transparent 42%),radial-gradient(ellipse at 95% 45%,#4624a938 0,transparent 42%),linear-gradient(145deg,#1b0b49 0%,#100831 50%,#160b3d 100%);background-attachment:fixed}
header{background:#160b3be8;border-color:#b38aff24;box-shadow:0 8px 32px #09031b33}
.brand{color:#f4eeff;letter-spacing:-.6px}
.mark{background:linear-gradient(135deg,#aa65ff,#6230e7);box-shadow:0 0 24px #9858ff40;border:1px solid #c399ff55}
.tag{color:#b4a1d5;border-color:#ad84f833}
h1,h2,h3{color:#f7f2ff}
h1{font-weight:800;letter-spacing:-1.5px;text-shadow:0 3px 32px #b28aff18}
.eyebrow{color:#bd95ff;letter-spacing:2.4px}
p{color:#b8a9d3}
.card{background:linear-gradient(140deg,#291454eb,#1b103feF);border:1px solid #ac7dff30;box-shadow:0 18px 60px #07011955,inset 0 1px 0 #d7b7ff0a;border-radius:20px}
.hero>.card{background:radial-gradient(ellipse at 100% 0,#7e38ce22,transparent 65%),linear-gradient(145deg,#2c155c,#1d1045)}
button{background:linear-gradient(120deg,#9654ff,#7337ed);color:#fff;border:1px solid #b786ff45;box-shadow:0 4px 18px #6529d02b}
.outline{background:#b183ff08;color:#d5bbff;border-color:#ad80f84d;box-shadow:none}
.tabs button{background:#b183ff0c;color:#bdabd8;border-color:#a176df26;box-shadow:none}
.tabs button.selected{background:linear-gradient(120deg,#9654ff,#7337ed);color:#fff;border-color:#c69aff66;box-shadow:0 5px 24px #8642ef40}
input,select{background:#140a30;color:#f0e6ff;border-color:#9671c747;box-shadow:inset 0 2px 5px #07011622}
select option{background:#21113f;color:#f0e6ff}
input::placeholder{color:#88749f}
input:focus,select:focus{border-color:#b78afa;outline-color:#a874ef;box-shadow:0 0 0 5px #9a5aff12;background:#1b0e3a}
.pill{color:#dac5ff;border-color:#ac7df84d;background:#8b46e717;box-shadow:inset 0 1px 0 #dcc0ff0a}
.hint{background:#ab72fb0b;color:#b4a0cb;border:1px solid #b28bf31c}
.intro .line{background:linear-gradient(90deg,#ac79f84d,transparent)}
.number{color:#bd91ff}
.empty{color:#a895bf;border-color:#a47bd338;background:#10062522}
th{color:#b59aca;background:#a571ed08}
td{color:#e0d3f1}
td,th{border-color:#b087e61c}
.badge{background:#254838;color:#a2ebbe;border:1px solid #78d9a030}
.absent{background:#4c263b;color:#ffb0bd;border-color:#ed829b30}
.late{background:#493b25;color:#fbd48a;border-color:#e9be7130}
.excused{background:#38245b;color:#d2b5ff;border-color:#b48aef30}
.unregistered{background:#302640;color:#b7a5ca;border-color:#a18bb630}
.muted,.note{color:#a18bb8}
#notice{background:#3c1e6c;color:#f6edff;border:1px solid #ad7af859;box-shadow:0 12px 40px #08011b70}
footer{color:#9782ae;border-color:#b087e624;background:#0d052722}
a{color:#c296ff}
button:disabled{opacity:.45}
@media(hover:hover) and (pointer:fine){
 button:hover:not(:disabled){background:linear-gradient(120deg,#aa70ff,#8b4bfa);border-color:#d0adff88;box-shadow:0 7px 26px #9c56ff4d}
 .outline:hover:not(:disabled){background:#a26beb1a;border-color:#c69aff88;color:#f1e4ff;box-shadow:0 0 22px #9d57f51a}
 .tabs button:hover:not(:disabled){background:#a36ce927;color:#f1e5ff}
 .tabs button.selected:hover{background:linear-gradient(120deg,#aa70ff,#8b4bfa);color:#fff}
 .card:hover{border-color:#bb8bff59;box-shadow:0 20px 65px #07011966,0 0 28px #9b50fa0b}
 input:hover:not(:disabled),select:hover:not(:disabled){border-color:#b085e380}
 tbody tr:hover{background:#ad78ff0a}
 .brand:hover{color:#d4b0ff}
}

.attendance-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.attendance-summary .card{display:flex;align-items:start;flex-direction:column;gap:12px}
.attendance-summary strong{font-size:clamp(28px,4vw,40px);color:#f4eaff}
#attendance-title:focus{outline:none}
@media(max-width:760px){.attendance-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Tighter corners across panels and controls. */
.card{border-radius:12px}
button,input,select{border-radius:6px}
.mark{border-radius:8px}
.hint,.empty,#notice{border-radius:8px}
.pill,.badge{border-radius:8px}

.brand-logo{display:block;width:54px;height:44px;flex-shrink:0;filter:drop-shadow(0 2px 8px #b889ff26)}
@media(max-width:420px){.brand-logo{width:44px;height:36px}}

/* Moonlit landscape with frosted glass surfaces. */
:root{color-scheme:light;color:#393452;background:#514582;--accent:#7761ae;--accent-dark:#655094;--accent-soft:#e9e2f6;--focus:#9277c4}
body{position:relative;isolation:isolate;background:transparent}
.landscape{position:fixed;inset:0;width:100%;height:100lvh;min-height:100%;z-index:-1;pointer-events:none}
header{background:#33226326;border-color:#ffffff12;box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{color:#fff}.brand-logo{filter:drop-shadow(0 2px 8px #22154044)}
.tag{color:#eee8ffb3;border-color:#ffffff30}
#staff{color:#f6f2ff;border-color:#ffffff55;background:#ffffff0c}
main{margin-block:clamp(28px,7vh,76px)}
.hero{align-items:center;gap:clamp(32px,7vw,100px)}
.intro{padding-block:24px;text-shadow:0 2px 18px #34245c33}
.intro h1{color:#fff;font-size:clamp(36px,5vw,58px);line-height:1.15;letter-spacing:-1.8px}
.intro p{color:#f3efffe0}.intro .eyebrow{color:#eee1ff}.intro .number{color:#fff}
.intro .line{background:linear-gradient(90deg,#ffffff66,transparent)}
.pill{background:#ffffff15;color:#fff;border-color:#ffffff45;backdrop-filter:blur(10px)}
.card,.hero>.card{background:linear-gradient(135deg,#ffffff91,#f5f1ff66);border:1px solid #ffffff90;box-shadow:inset 0 1px 1px #fff9,inset 0 0 22px #ffffff1c,0 18px 45px #28204626;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px}
.card h1,.card h2,.card h3{color:#494061;text-shadow:none}
h1,h2,h3{color:#fff}main>p,main>section>p{color:#f1eaff}main>.eyebrow{color:#e1d2fa}
p{color:#6c6382}.eyebrow{color:#7c659d}label{color:#64587b}
button{color:#fff;background:#8470b5;border-color:#ffffff35;box-shadow:0 4px 12px #4d3a7720}
.outline{color:#665184;background:#ffffff26;border-color:#ffffff80;box-shadow:none}
input,select{background:#ffffff8f;color:#49415f;border:1px solid #ffffff90;box-shadow:inset 0 1px 3px #45326b08}
select option{background:#f4effc;color:#49415f}
input::placeholder{color:#9b91ac}
input:focus,select:focus{background:#ffffffe0;border-color:#a58bc7;outline-color:#a18ac3;box-shadow:0 0 0 4px #fff3}
.hint{color:#706381;background:#ffffff32;border-color:#ffffff44}
.empty{color:#79698b;background:#ffffff20;border-color:#9c87ba66}
.tabs button{background:#ffffff30;color:#fff;border-color:#ffffff45}
.tabs button.selected{background:#8063ad;color:#fff;border-color:#ffffff55;box-shadow:0 4px 18px #3c285d26}
th{color:#7d6b94;background:#ffffff20}td{color:#4c425f}td,th{border-color:#8e7ba32b}
.muted,.note{color:#82718f}
.attendance-summary strong{color:#5b467a}
#notice{background:#655181ed;color:#fff;border-color:#c7afe880;box-shadow:0 12px 40px #33204c33}
footer{color:#f3efffc9;border-color:#ffffff24;background:#51437612;backdrop-filter:blur(8px)}
.badge{box-shadow:none}
a{color:#8060a6}
@media(hover:hover) and (pointer:fine){
 button:hover:not(:disabled){background:#75609f;border-color:#eee3ff99;box-shadow:0 7px 20px #46315e2b}
 .outline:hover:not(:disabled){background:#ffffff66;color:#5e457f;border-color:#fff;box-shadow:0 4px 18px #5c44701a}
 #staff:hover:not(:disabled){background:#ffffff25;color:#fff}
 .tabs button:hover:not(:disabled){background:#ffffff55;color:#fff}
 .tabs button.selected:hover{background:#73559f}
 .card:hover{border-color:#ffffffc9;box-shadow:inset 0 1px 1px #fff9,0 22px 50px #28204630}
 input:hover:not(:disabled),select:hover:not(:disabled){border-color:#b09acb;background:#ffffffb3}
 tbody tr:hover{background:#ffffff26}
 .brand:hover{color:#eee0ff}
}
@media(max-width:760px){.hero{gap:20px}.intro{padding-block:0}.intro h1{font-size:clamp(34px,8vw,48px)}.landscape{object-position:center}.card,.hero>.card{background:linear-gradient(135deg,#ffffffb3,#f5f1ff8c)}}

/* Compact registry letter selectors; keep the digits field spacious. */
.registry-input{grid-template-columns:56px 56px minmax(0,1fr);align-items:center}
.registry-input select{height:40px;min-height:40px;padding:6px 4px;font-size:14px;border-radius:5px}
@media(max-width:420px){.registry-input{grid-template-columns:50px 50px minmax(0,1fr)}.registry-input select{padding:6px 3px;font-size:14px}}
.registry-input{grid-template-columns:44px 44px minmax(0,1fr);gap:6px}
.registry-input select{height:34px;min-height:34px;padding:4px 2px;font-size:13px;border-radius:4px}
@media(max-width:420px){.registry-input{grid-template-columns:42px 42px minmax(0,1fr);gap:5px}.registry-input select{padding:4px 1px;font-size:13px}}
.registry-input select{height:44px;min-height:44px}

/* Lower controls with softer, rounded corners. */
button,input,select{min-height:38px;padding:9px 14px;border-radius:12px}
.small{min-height:32px;padding:6px 10px;border-radius:10px}
#staff{min-height:38px;padding:8px 12px;border-radius:12px}
.registry-input select{height:38px;min-height:38px;padding:5px 2px;border-radius:10px}
.registry-input input{height:38px;min-height:38px;padding-block:7px;border-radius:12px}
@media(max-width:420px){.registry-input select{padding:5px 1px}.registry-input input{padding-inline:8px}}

/* Fit the lookup screen into the available viewport height. */
body:has(.hero){min-height:100svh}
main:has(.hero){display:flex;align-items:center;margin-block:0;padding-block:20px}
main:has(.hero) .hero{width:100%;gap:clamp(24px,5vw,64px)}
.hero .intro{padding-block:0}
.hero .intro h1{font-size:clamp(32px,4.3vw,52px);margin-block:14px}
.hero .intro p{margin-block:10px;line-height:1.6}
.hero .intro .pill{margin-top:10px}
.hero .intro .line{margin-block:20px}
.hero .card{padding:24px}
.hero .card h2{margin-bottom:12px}
.hero .field{margin-block:14px}
.hero .hint{margin-top:14px;padding:12px;line-height:1.5}
body:has(.hero) footer{padding-block:12px;gap:6px}
@media(max-width:760px){
 main:has(.hero){padding-block:16px}
 main:has(.hero) .hero{gap:18px}
 .hero .intro h1{font-size:clamp(30px,7vw,40px);margin-block:10px}
 .hero .intro .line,.hero .intro .row{display:none}
 .hero .intro .pill{margin-top:4px;padding:6px 10px}
 .hero .card{padding:18px}
 .hero .card>p{margin-block:8px}
 .hero .hint{font-size:11px;padding:10px;margin-top:12px}
 body:has(.hero) footer{flex-direction:row;font-size:10px}
}
@media(max-height:700px){
 main:has(.hero){padding-block:12px}
 .hero .intro .line,.hero .intro .row{display:none}
 .hero .card{padding:18px}
 .hero .field{margin-block:10px}
 .hero .hint{font-size:11px;margin-top:10px;padding:9px}
}
@media(max-width:760px) and (max-height:740px){
 body:has(.hero){--header-height:58px}
 main:has(.hero) .hero{gap:12px}
 .hero .intro>p,.hero .intro .pill{display:none}
 .hero .intro h1{font-size:28px;margin:8px 0 0}
 .hero .intro h1 br{display:none}
 .hero .intro .eyebrow{font-size:10px}
}

/* Phone layouts: avoid overflow and keep form controls usable. */
@media(max-width:600px){
 :root{--page-gutter:16px;--header-height:64px}
 header{gap:10px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
 .brand{font-size:20px;gap:8px}
 .brand-logo{width:40px;height:34px}
 #staff{font-size:11px;line-height:1.35;max-width:53%;min-height:40px;padding:8px 10px}
 main{margin-block:22px;width:100%}
 main:has(.hero){align-items:center;padding-block:18px}
 main:has(.hero) .hero{grid-template-columns:minmax(0,1fr);gap:20px;max-width:460px;margin-inline:auto}
 .hero .intro h1{font-size:clamp(30px,8vw,40px);line-height:1.15;margin-block:10px}
 .hero .intro>p{font-size:13px;line-height:1.5}
 .hero .intro .eyebrow{font-size:10px;letter-spacing:1.5px}
 .hero .intro .pill{font-size:10px;margin-top:4px}
 .hero .card,.card{padding:18px;border-radius:16px}
 h1{font-size:30px;overflow-wrap:anywhere}
 h2{font-size:20px}
 input,select{font-size:16px;min-height:40px;padding:8px 10px}
 button{min-height:40px;font-size:13px;padding:9px 12px;line-height:1.4}
 .registry-input{grid-template-columns:46px 46px minmax(0,1fr);gap:6px}
 .registry-input select{font-size:16px;height:40px;min-height:40px;padding:4px 1px}
 .registry-input input{font-size:16px;height:40px;min-height:40px;padding:7px 8px;letter-spacing:.04em}
 .field{margin-block:14px;gap:7px}
 .hero .hint{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
 .grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .results{margin-top:20px}
 .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:20px}
 .tabs button{padding:9px 8px;min-width:0}
 .toolbar{gap:10px;margin-block:18px}
 .toolbar>label{flex-basis:100%;width:100%}
 .toolbar>button{flex:1 1 auto}
 .tablewrap{width:100%;overflow-x:auto}
 td,th{padding:12px 8px}
 td{font-size:13px}
 td select{min-width:120px}
 td button{margin-block:3px}
 .attendance-summary{gap:10px}
 .attendance-summary .card{padding:14px;gap:9px}
 .attendance-summary strong{font-size:30px}
 .badge{font-size:11px}
 .login{max-width:460px}
 footer,body:has(.hero) footer{flex-direction:column;align-items:center;text-align:center;gap:5px;font-size:10px;padding:12px 16px max(12px,env(safe-area-inset-bottom))}
 #notice{font-size:13px;padding:12px 16px;max-width:calc(100% - 24px)}
}
@media(max-width:360px){
 :root{--page-gutter:12px}
 header{padding-inline:12px}
 .brand{font-size:18px;gap:6px}.brand-logo{width:34px;height:30px}
 #staff{font-size:10px;padding-inline:8px}
 .hero .card,.card{padding:14px}
 .hero .intro h1{font-size:28px}
 .registry-input{grid-template-columns:42px 42px minmax(0,1fr);gap:5px}
}
@media(max-width:600px) and (max-height:740px){
 main:has(.hero){padding-block:12px}
 main:has(.hero) .hero{gap:12px}
 .hero .intro>p,.hero .intro .pill{display:none}
 .hero .intro h1{font-size:28px;margin-block:6px}
 .hero .card h2{margin-bottom:8px}
 .hero .card>p{margin-block:6px;font-size:12px}
}
@media(max-height:500px) and (orientation:landscape){
 main:has(.hero){padding-block:16px}
 main:has(.hero) .hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:none;gap:24px}
 .hero .intro h1{font-size:30px}
 .hero .intro>p,.hero .intro .pill,.hero .intro .line,.hero .intro .row{display:none}
}

[hidden]{display:none!important}
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:22px;background:#63508014;border:1px solid #ffffff66;border-radius:14px}
.role-switch button{background:transparent;color:#77638c;border-color:transparent;box-shadow:none;border-radius:10px}
.role-switch button[aria-pressed="true"]{background:#8470b5;color:#fff;box-shadow:0 3px 12px #4d3a7726;border-color:#ffffff40}
@media(hover:hover) and (pointer:fine){.role-switch button:hover:not(:disabled){transform:none;background:#ffffff66;color:#61477d}.role-switch button[aria-pressed="true"]:hover{background:#75609f;color:#fff}}
@media(max-width:600px){.role-switch{margin-bottom:16px}}

/* Sliding color beneath the role labels, with a soft hover wash. */
.role-switch{position:relative;isolation:isolate}
.role-switch::before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc((100% - 16px)/2);border-radius:10px;background:#8470b5;box-shadow:0 3px 12px #4d3a7726;transition:transform .34s cubic-bezier(.22,.75,.25,1)}
.role-switch[data-selected="parent"]::before{transform:translateX(calc(100% + 6px))}
.role-switch button,.role-switch button[aria-pressed="true"]{position:relative;background:transparent;border-color:transparent;box-shadow:none;transition:color .28s ease,background-color .28s ease;transform:none}
.role-switch button[aria-pressed="true"]{color:#fff}
.role-content{display:flow-root}
@media(hover:hover) and (pointer:fine){
 .role-switch button:hover:not(:disabled){background:#ffffff26;box-shadow:none;transform:none}
 .role-switch button[aria-pressed="true"]:hover{background:#ffffff12;color:#fff}
}
@media(prefers-reduced-motion:reduce){.role-switch::before{transition:none}}

.attendance-view{max-width:940px;margin-inline:auto}
.result-topline,.result-heading,.history-heading,.history-row,.stat-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.result-topline{margin-bottom:28px}
.demo-label{font-size:11px;color:#f5edff;background:#ffffff1c;border:1px solid #ffffff40;border-radius:20px;padding:7px 12px}
.result-heading{margin-bottom:26px;flex-wrap:wrap}
.result-heading h1{font-size:clamp(30px,4vw,42px);margin:10px 0}
.result-heading .eyebrow{color:#ede2ff;font-size:10px}
.result-heading p{color:#eee8fa;margin:0;font-size:13px}
.result-period{color:#fff;font-size:12px;border:1px solid #ffffff50;background:#ffffff16;padding:10px 16px;border-radius:30px}
.result-overview{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;margin-bottom:24px}
.rate-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.rate-card>.eyebrow{font-size:10px;letter-spacing:2px}
.rate-ring{width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#8764b9 var(--rate),#ffffff55 0);position:relative;margin-top:18px}
.rate-ring::before{content:"";position:absolute;inset:9px;background:#e5ddef;border-radius:50%}
.rate-ring strong{position:relative;font-size:38px;color:#655080;font-weight:750}
.rate-ring small{font-size:17px;margin-left:2px}
.rate-card p{margin:14px 0 6px;font-size:13px}
.rate-note{font-size:10px;color:#8d7d9d}
.result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.result-stat{padding:22px}
.stat-top{justify-content:start;gap:10px;font-size:12px;color:#746080}
.stat-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:18px}
.stat-symbol.present{background:#d8eadf;color:#508967}.stat-symbol.absent{background:#f2dce2;color:#b76a81}.stat-symbol.late{background:#f2e5cc;color:#af8643}.stat-symbol.excused{background:#e4daf5;color:#8c6cae}
.stat-value{font-size:32px;color:#574269;margin:12px 0;font-weight:700}.stat-value small{font-size:11px;margin-left:8px;font-weight:400;color:#9581a2}
.stat-track{height:4px;border-radius:5px;background:#ffffff60;overflow:hidden}
.stat-track span{height:100%;display:block;border-radius:5px}.stat-track .present{background:#86b39a}.stat-track .absent{background:#c58a9f}.stat-track .late{background:#cbb079}.stat-track .excused{background:#a68bc7}
.history-card{padding:26px}.history-heading{margin-bottom:20px;flex-wrap:wrap}.history-heading h2{margin:0 0 7px;font-size:20px}.history-heading p{margin:0;font-size:11px}
.month-filter{display:flex;align-items:center;gap:10px;font-size:11px;color:#8a779a}.month-filter select{width:auto;font-size:12px;max-width:200px}
.history-row{padding:13px 0;border-top:1px solid #8e7ba31a;gap:12px}
.date-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:50px;border-radius:12px;background:#ffffff45;flex-shrink:0}.date-tile strong{font-size:20px;color:#79608f}.date-tile span{font-size:9px;color:#a28baf;margin-top:2px}
.history-date{flex:1;display:flex;flex-direction:column;gap:5px}.history-date strong{font-size:12px;font-weight:500;color:#655071}.history-date span{font-size:10px;color:#9a86a6}
.history-row .badge{font-size:10px;padding:6px 11px;min-width:74px;text-align:center;border-radius:20px}
.history-footer{border-top:1px solid #8e7ba324;padding-top:16px;color:#a18aac;font-size:10px}
@media(max-width:600px){.result-topline{margin-bottom:20px}.demo-label{font-size:9px;padding:6px 9px}.result-overview{grid-template-columns:minmax(0,1fr);gap:12px}.rate-card{display:grid;grid-template-columns:1fr auto;text-align:left;padding:20px;gap:8px}.rate-card>.eyebrow{grid-column:1}.rate-ring{grid-column:2;grid-row:1/4;width:100px;height:100px;margin:0}.rate-ring strong{font-size:30px}.rate-ring::before{inset:7px}.rate-card p{margin:0}.rate-note{grid-column:1}.result-stats{gap:10px}.result-stat{padding:16px}.stat-value{font-size:28px}.stat-top{gap:8px}.stat-symbol{width:28px;height:28px;font-size:16px}.history-card{padding:18px}.history-heading{gap:14px}.month-filter{justify-content:space-between;width:100%}.month-filter select{max-width:none;width:auto}.result-period{padding:7px 12px;font-size:10px}.result-heading{gap:12px}.history-row{gap:10px}}

/* Mobile app styling inspired by the rounded onboarding reference. */
@media(max-width:600px){
 :root{background:#f0effb;--accent:#5840e5;--accent-dark:#4830cf;--focus:#a08bf2}
 body{background:#f0effb}
 .landscape{display:none}
 header{background:#4930d5;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:max(12px,env(safe-area-inset-top));min-height:64px}
 .brand-logo{filter:brightness(0) invert(1);width:40px;height:34px}
 .brand .tag{display:none}
 #staff{background:#ffffff20;border:1px solid #ffffff30;color:#fff;border-radius:10px}
 main{margin-block:0;padding:24px 16px 32px}
 main:has(.hero){padding:0;display:block}
 main:has(.hero) .hero{display:flex;flex-direction:column;gap:0;max-width:none;margin:0}
 .hero .intro{width:100%;position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:25px 24px 58px;background:linear-gradient(115deg,#3827d6 0%,#6850e7 55%,#a38af2 100%)}
 .hero .intro::before{content:"";position:absolute;width:240px;height:240px;right:-100px;top:-100px;border-radius:50%;background:#ffffff0b;z-index:-1}
 .hero .intro::after{content:"";position:absolute;left:28px;right:28px;height:32px;bottom:-10px;border-radius:24px 24px 0 0;background:#ffffff30;z-index:-1}
 .hero .intro .eyebrow{color:#e0d9ff;letter-spacing:2px;font-size:9px}
 .hero .intro h1{color:#fff;font-size:32px;line-height:1.2;margin:14px 0 10px;text-shadow:none;letter-spacing:-1px}
 .hero .intro>p{display:block;color:#e7e0ff;font-size:12px;margin:0;line-height:1.6}
 .hero .intro .pill,.hero .intro .line,.hero .intro .row{display:none}
 .hero>.card{width:100%;max-width:480px;position:relative;margin-top:-24px;padding:28px 24px 32px;min-height:360px;background:#fff;border:0;border-radius:26px 26px 24px 24px;box-shadow:0 12px 40px #4941740a;backdrop-filter:none;-webkit-backdrop-filter:none}
 .role-switch{background:#f3f0fc;border:0;padding:5px;border-radius:12px;margin-bottom:26px}
 .role-switch::before{background:linear-gradient(110deg,#5140df,#9a73e9);box-shadow:0 3px 10px #6c50cf25;border-radius:9px}
 .role-switch button{font-size:12px;color:#9585b0;min-height:36px}
 .role-switch button[aria-pressed="true"]{color:#fff}
 .hero .card h2{text-align:center;font-size:23px;font-weight:750;color:#3f3751;margin:0 0 8px;letter-spacing:-.5px}
 .hero .card>p,.role-content>p{text-align:center;color:#a49baa;font-size:12px;line-height:1.6;margin:0 0 22px}
 .hero .field,.field{margin-block:18px;gap:8px}
 label{font-size:11px;font-weight:500;color:#91859f}
 input,select{background:#fff;border:1px solid #ece9f2;box-shadow:none;color:#514660;border-radius:11px;min-height:46px;padding:11px 12px;font-size:16px}
 input::placeholder{color:#c0b7cc}
 input:focus,select:focus{background:#fff;border-color:#b5a2ef;outline:0;box-shadow:0 0 0 4px #7f5de410}
 .registry-input{grid-template-columns:46px 46px minmax(0,1fr);gap:7px}
 .registry-input select,.registry-input input{height:46px;min-height:46px;border-radius:10px}
 .registry-input select{padding-inline:2px}
 button{background:linear-gradient(105deg,#4631dc,#9b72ed);border:0;border-radius:11px;min-height:44px;color:#fff;box-shadow:none;transition:transform .22s ease,box-shadow .25s ease,filter .25s ease,background-color .25s ease}
 .full{background:linear-gradient(105deg,#4131db 0%,#8755e4 55%,#e6a0f5 100%);min-height:46px;font-size:12px;letter-spacing:.2px;margin-top:6px;box-shadow:0 5px 14px #7854d51a}
 .hint,.hero .hint{font-size:10px;line-height:1.7;color:#a497b0;background:#f9f7fd;border:1px solid #f1edf8;border-radius:12px;padding:12px;margin-top:20px}
 .card{background:#fff;border:1px solid #ece8f5;box-shadow:0 6px 24px #57447706;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:20px;color:#514660}
 h1,h2,h3,.card h1,.card h2{color:#453753}
 main>.eyebrow{color:#9983bd}main>p{color:#9f91af}
 .outline{background:#ebe6fb;color:#6a4db4;border:1px solid #e3dcf5}
 .tabs button{background:#e7e1f5;color:#8b77ac;border:0}.tabs button.selected{background:linear-gradient(105deg,#5140df,#9a73e9);color:#fff}
 .demo-label{color:#9077b2;background:#e9e2f7;border:1px solid #dfd6ee}
 .result-heading .eyebrow{color:#a18cb9}.result-heading p{color:#a697b2}.result-period{background:#e9e3f6;color:#8e76ac;border-color:#ded4ec}
 .result-topline{margin-bottom:24px}.result-heading h1{font-size:30px}
 .rate-ring{background:conic-gradient(#9172e7 var(--rate),#f0eaf9 0)}.rate-ring::before{background:#fff}.rate-ring strong{color:#7052a0}
 .date-tile{background:#f4f0fc}.history-row{border-color:#f0ecf7}.history-footer{border-color:#eee8f5}
 .stat-track{background:#f3eff9}
 td,th{border-color:#f0ebf7}th{background:#faf8fe}
 footer,body:has(.hero) footer{background:#f0effb;border:0;color:#b1a6c1;padding-top:20px}
 .login{background:#fff}
 button:active:not(:disabled){transform:scale(.97);filter:brightness(.97)}
}
@media(max-width:360px){.hero>.card{padding-inline:18px}.hero .intro{padding-inline:18px}.hero .intro h1{font-size:29px}.registry-input{grid-template-columns:42px 42px minmax(0,1fr)}}
@media(max-width:600px) and (max-height:700px){.hero .intro{padding-top:16px;padding-bottom:46px}.hero .intro h1{font-size:28px;margin-block:10px}.hero .intro>p{font-size:11px}.hero>.card{padding-top:22px;padding-bottom:22px;min-height:0}.role-switch{margin-bottom:18px}.hero .field{margin-block:14px}}
@media(hover:hover) and (pointer:fine){
 .full:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 8px 24px #8056d93b;transform:translateY(-2px)}
 .result-stat:hover{transform:translateY(-3px)}
 .result-stat{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
 .history-row{transition:background-color .22s ease,padding .22s ease;border-radius:10px}
 .history-row:hover{background:#af8be90a;padding-inline:8px}
}
@media(max-width:600px) and (hover:hover) and (pointer:fine){
 .card:hover{border-color:#dacdf0;box-shadow:0 10px 30px #7854b512}
 input:hover:not(:disabled),select:hover:not(:disabled){background:#fff;border-color:#cbbbeb}
 .outline:hover:not(:disabled){background:#e2d8f8;color:#6b4aab;border-color:#cdbbe9}
}
@media(prefers-reduced-motion:reduce){.result-stat:hover,.full:hover:not(:disabled){transform:none}}

@media(max-width:600px){.attendance-view>.result-heading{display:none}}

/* Share the desktop landscape and glass palette on phones. */
@media(max-width:600px){
 :root{background:#514582;--accent:#7761ae;--accent-dark:#655094;--accent-soft:#e9e2f6;--focus:#9277c4}
 body{background:transparent}
 .landscape{display:block}
 header{background:#33226326;border-bottom:1px solid #ffffff12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .brand-logo{filter:drop-shadow(0 2px 8px #22154044)}
 .hero .intro{background:transparent;text-shadow:0 2px 18px #34245c33}
 .hero .intro::before,.hero .intro::after{display:none}
 .hero>.card,.card,.login{background:linear-gradient(135deg,#ffffffb3,#f5f1ff8c);border:1px solid #ffffff90;box-shadow:inset 0 1px 1px #fff9,0 18px 45px #28204626;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 .hero>.card{width:calc(100% - 32px);margin-top:-16px;border-radius:20px}
 .hero .intro{padding-bottom:42px}
 .role-switch{background:#63508014;border:1px solid #ffffff66}
 .role-switch::before{background:#8470b5;box-shadow:0 3px 12px #4d3a7726}
 .role-switch button{color:#77638c}.role-switch button[aria-pressed="true"]{color:#fff}
 .hero .card h2,.card h1,.card h2,.card h3{color:#494061}
 h1,h2,h3{color:#fff}
 .role-content>p,.hero .card>p{color:#80718f}
 label{color:#79668c}
 input,select{background:#ffffff8f;color:#49415f;border:1px solid #ffffff90;box-shadow:inset 0 1px 3px #45326b08}
 select option{background:#f4effc;color:#49415f}
 input::placeholder{color:#9b91ac}
 input:focus,select:focus{background:#ffffffe0;border-color:#a58bc7;box-shadow:0 0 0 4px #fff3}
 button,.full{background:#8470b5;color:#fff;border:1px solid #ffffff35;box-shadow:0 4px 12px #4d3a7720}
 .outline{background:#ffffff26;color:#665184;border-color:#ffffff80}
 .role-switch button,.role-switch button[aria-pressed="true"]{background:transparent;border-color:transparent;box-shadow:none}
 .hint,.hero .hint{background:#ffffff32;color:#706381;border:1px solid #ffffff44}
 .tabs button{background:#ffffff30;color:#fff;border:1px solid #ffffff45}.tabs button.selected{background:#8063ad}
 .demo-label{color:#f5edff;background:#ffffff1c;border-color:#ffffff40}
 .result-topline .outline{background:#ffffff40}
 .rate-ring{background:conic-gradient(#8764b9 var(--rate),#ffffff55 0)}.rate-ring::before{background:#e5ddef}.rate-ring strong{color:#655080}
 .date-tile{background:#ffffff45}.history-row,.history-footer{border-color:#8e7ba324}
 .stat-track{background:#ffffff60}
 th{background:#ffffff20}td,th{border-color:#8e7ba32b}
 main>.eyebrow{color:#e1d2fa}main>p{color:#f1eaff}
 footer,body:has(.hero) footer{background:#51437612;color:#f3efffc9;border-top:1px solid #ffffff24;backdrop-filter:blur(8px)}
}
@media(max-width:600px) and (hover:hover) and (pointer:fine){
 .card:hover{border-color:#ffffffc9;box-shadow:inset 0 1px 1px #fff9,0 22px 50px #28204630}
 button:hover:not(:disabled){background:#75609f;border-color:#eee3ff99}
 .outline:hover:not(:disabled){background:#ffffff66;color:#5e457f;border-color:#fff}
 .role-switch button:hover:not(:disabled){background:#ffffff26}
 input:hover:not(:disabled),select:hover:not(:disabled){background:#ffffffb3;border-color:#b09acb}
}

@media(max-width:600px){header.is-hidden:focus-within{transform:translateY(-100%)}}

/* Rounded back navigation with a gentle glass finish. */
#lookup-back,.result-topline #lookup-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 18px;border-radius:999px;border:1px solid #ffffff80;background:linear-gradient(135deg,#ffffff70,#ffffff30);color:#66517f;font-size:12px;font-weight:600;line-height:1.3;box-shadow:inset 0 1px 0 #ffffffa6,0 4px 14px #44325e12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s ease,box-shadow .25s ease,transform .25s ease,border-color .25s ease}
@media(hover:hover) and (pointer:fine){#lookup-back:hover:not(:disabled){background:linear-gradient(135deg,#ffffffb3,#ffffff70);border-color:#fff;color:#594171;box-shadow:inset 0 1px 0 #fff,0 7px 20px #44325e20;transform:translateX(-2px)}}
#lookup-back:active:not(:disabled){transform:scale(.96)}
@media(prefers-reduced-motion:reduce){#lookup-back:hover:not(:disabled),#lookup-back:active:not(:disabled){transform:none}}

.amiluun-wordmark{font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-size:24px;font-style:italic;font-weight:600;letter-spacing:1px;line-height:1.2;color:#f5edff;background:transparent;border:0;border-radius:0;padding:4px 2px;text-shadow:0 2px 12px #48306526}
@media(max-width:600px){.amiluun-wordmark{font-size:23px}}

@media(max-width:600px){.desktop-tagline{display:none}}

.demo-login-hint{margin:0 0 16px;font-size:11px;line-height:1.8}.demo-login-hint strong{font-weight:600;color:#6e5292}.staff-demo-notice{margin-top:16px;max-width:760px}

/* Bring staff navigation closer to the header. */
main:has(>.tabs){margin-top:12px;padding-top:0}
main>.tabs:first-child{margin-top:0;margin-bottom:18px}
@media(max-width:600px){main:has(>.tabs){margin-top:0;padding-top:12px}main>.tabs:first-child{margin-top:0;margin-bottom:16px}}

.tabs.staff-tabs{position:relative;isolation:isolate;display:flex;flex-wrap:nowrap;gap:4px;padding:6px;border:1px solid #ffffff80;border-radius:16px;background:#ffffff30;box-shadow:inset 0 1px 0 #ffffff66;overflow-x:auto;scrollbar-width:none;align-items:stretch;-webkit-overflow-scrolling:touch}
.staff-tabs::-webkit-scrollbar{display:none}
.tabs.staff-tabs button{position:relative;z-index:1;flex:1 0 auto;min-height:40px;padding:10px 16px;white-space:nowrap;border:0;border-radius:11px;background:transparent;color:#756183;box-shadow:none;transform:none;transition:color .25s ease,background-color .25s ease}
.tabs.staff-tabs button.selected{background:transparent;color:#fff;box-shadow:none}
.tab-indicator{position:absolute;left:0;top:6px;bottom:6px;z-index:0;pointer-events:none;background:linear-gradient(110deg,#8f77bd,#77609f);border-radius:11px;box-shadow:0 3px 12px #62478426;transition:transform .34s cubic-bezier(.22,.75,.25,1),width .34s cubic-bezier(.22,.75,.25,1)}
@media(hover:hover) and (pointer:fine){.tabs.staff-tabs button:hover:not(:disabled){background:#ffffff26;transform:none;box-shadow:none;color:#5e4377}.tabs.staff-tabs button.selected:hover{background:#ffffff12;color:#fff}}
@media(max-width:600px){.tabs.staff-tabs{border-radius:14px;gap:3px}.tabs.staff-tabs button{font-size:12px;min-height:38px;padding:9px 14px}.tab-indicator{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.tab-indicator{transition:none}}

/* Contain horizontal entrance animations without changing vertical scrolling. */
main{overflow-x:clip}

/* Clearer unselected labels without an outer navigation border. */
.tabs.staff-tabs{border:0;box-shadow:none}
.tabs.staff-tabs button{color:#50365f;font-weight:650}
.tabs.staff-tabs button.selected{color:#fff}
@media(hover:hover) and (pointer:fine){.tabs.staff-tabs button:hover:not(:disabled){color:#3e244e}.tabs.staff-tabs button.selected:hover{color:#fff}}

.mobile-menu,.menu-backdrop{display:none}
@media(max-width:600px){
 body:has(.staff-tabs) header .brand{display:none}
 body:has(.staff-tabs) header{justify-content:space-between}
 body:has(.staff-tabs) #staff{order:-1;margin-right:auto;background:#ffffff26;color:#f9f5ff;min-height:38px;padding:8px 16px;border-radius:12px}
 body:has(.staff-tabs) .mobile-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:40px;padding:10px;background:#ffffff26;border:1px solid #ffffff44;border-radius:12px;box-shadow:none;position:relative;z-index:52}
 .mobile-menu span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease}
 .staff-menu-open .mobile-menu span:first-child{transform:translateY(7px) rotate(45deg)}
 .staff-menu-open .mobile-menu span:nth-child(2){opacity:0}
 .staff-menu-open .mobile-menu span:last-child{transform:translateY(-7px) rotate(-45deg)}
 main:has(>.staff-tabs){padding-top:16px;overflow-x:visible}
 .tabs.staff-tabs{position:fixed;inset:0 auto 0 0;width:min(290px,82vw);height:100dvh;margin:0!important;padding:max(28px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;border-radius:0 24px 24px 0;border:1px solid #ffffff80;background:linear-gradient(150deg,#f1eafbf5,#e5dcf4f5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:16px 0 50px #28204633;z-index:51;overflow-y:auto;overflow-x:hidden;transform:translateX(-105%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.75,.25,1),visibility .32s;isolation:isolate}
 .tabs.staff-tabs::before{content:"Удирдлага";font-size:20px;font-weight:700;color:#66507f;padding:8px 14px 20px;letter-spacing:-.4px}
 .tabs.staff-tabs button{flex:0 0 auto;text-align:left;padding:14px 16px;border-radius:12px;min-height:46px;font-size:13px;color:#604877}
 .tabs.staff-tabs button.selected{background:linear-gradient(110deg,#9379bf,#78609f);color:#fff;box-shadow:0 5px 15px #78549c22}
 .staff-tabs .tab-indicator{display:none}
 .staff-menu-open .tabs.staff-tabs{transform:translateX(0);visibility:visible}
 .staff-menu-open .menu-backdrop{display:block;position:fixed;inset:0;width:100%;height:100dvh;margin:0;border:0;border-radius:0;padding:0;z-index:50;background:#23133655;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:none;animation:menu-shade .25s ease}
 body.staff-menu-open{overflow:hidden}
 .staff-menu-open header,.staff-menu-open header.is-hidden,.staff-menu-open header.is-hidden:focus-within{transform:none;z-index:52}
 @keyframes menu-shade{from{opacity:0}to{opacity:1}}
}
@media(max-width:600px){.tabs.staff-tabs{padding-top:max(82px,calc(env(safe-area-inset-top) + 72px))}}

/* Transparent sidebar with a full frosted backdrop. */
@media(max-width:600px){
 .tabs.staff-tabs{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .staff-menu-open .menu-backdrop{background:#ffffff12;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
 .tabs.staff-tabs::before{color:#f5edff;text-shadow:0 2px 12px #33204c33}
 .tabs.staff-tabs button{color:#f4ecff;text-shadow:0 1px 8px #33204c22}
 .tabs.staff-tabs button.selected{background:#ffffff30;color:#fff;border:1px solid #ffffff55;box-shadow:0 4px 18px #33204c12}
}

@media(max-width:600px){
 .tabs.staff-tabs{background:#ffffff12;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:12px 0 35px #2820461a}
 .staff-menu-open .menu-backdrop{background:#23133622;backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media(max-width:600px){
 .staff-menu-open header,.staff-menu-open header.is-hidden,.staff-menu-open header.is-hidden:focus-within{z-index:10}
}

/* The outside dismissal area stays visually unchanged when touched. */
@media(max-width:600px){
 .staff-menu-open #menu-backdrop,.staff-menu-open #menu-backdrop:hover,.staff-menu-open #menu-backdrop:active,.staff-menu-open #menu-backdrop:focus{background:#23133622;border:0;outline:0;box-shadow:none;filter:none;transform:none;transition:none;-webkit-tap-highlight-color:transparent;touch-action:none;cursor:default;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Consistent glass buttons with a quieter violet finish. */
button{font-family:inherit;font-weight:600;letter-spacing:.1px;border-radius:12px;line-height:1.4;transition:background-color .24s ease,border-color .24s ease,color .24s ease,box-shadow .24s ease,transform .24s ease}
button[type="submit"],.full{min-height:42px;padding:10px 18px;background:linear-gradient(120deg,#9980c5,#7e65a8);border:1px solid #cbb6e980;color:#fff;box-shadow:inset 0 1px 0 #ffffff33,0 4px 12px #5f408e1a}
.outline:not(#lookup-back):not(#staff){background:#ffffff3d;border:1px solid #ffffff85;color:#705685;box-shadow:inset 0 1px 0 #ffffff66;border-radius:11px}
.small{min-height:34px;padding:7px 12px;font-size:11px}
#staff{border-radius:12px;letter-spacing:.2px;box-shadow:inset 0 1px 0 #ffffff26}
@media(hover:hover) and (pointer:fine){
 button[type="submit"]:hover:not(:disabled),.full:hover:not(:disabled){background:linear-gradient(120deg,#a28acd,#896fb2);border-color:#e6d5ffb3;box-shadow:inset 0 1px 0 #ffffff55,0 7px 20px #7050962b;transform:translateY(-1px);filter:none}
 .outline:not(#lookup-back):not(#staff):hover:not(:disabled){background:#ffffff80;border-color:#fff;color:#604374;box-shadow:0 4px 12px #70509614;transform:translateY(-1px)}
}
button[type="submit"]:active:not(:disabled),.full:active:not(:disabled){transform:scale(.98);box-shadow:inset 0 2px 4px #49305d14;filter:none}
@media(max-width:600px){
 .tabs.staff-tabs button{display:flex;align-items:center;gap:12px;min-height:48px;padding:13px 16px;border:1px solid transparent;border-radius:14px;font-weight:500;letter-spacing:.2px;transition:background-color .24s ease,border-color .24s ease,transform .24s ease}
 .tabs.staff-tabs button::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex-shrink:0}
 .tabs.staff-tabs button.selected{background:linear-gradient(110deg,#ffffff38,#ffffff16);border-color:#ffffff66;box-shadow:inset 0 1px 0 #ffffff33,0 4px 16px #34234612;font-weight:650}
 .tabs.staff-tabs button.selected::before{opacity:1;box-shadow:0 0 8px #ffffff55}
 .tabs.staff-tabs button:active:not(:disabled){background:#ffffff26;transform:scale(.98);filter:none}
 button[type="submit"],.full{min-height:44px;border-radius:12px;font-size:13px}
 .role-switch button{border-radius:10px}
}
@media(max-width:600px) and (hover:hover) and (pointer:fine){.tabs.staff-tabs button:hover:not(:disabled){background:#ffffff20;color:#fff;border-color:#ffffff33;transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){button[type="submit"]:hover:not(:disabled),button[type="submit"]:active:not(:disabled),.full:hover:not(:disabled),.full:active:not(:disabled),.tabs.staff-tabs button:hover:not(:disabled),.tabs.staff-tabs button:active:not(:disabled){transform:none}}

/* Bring parent result navigation directly beneath the top bar. */
main:has(>.attendance-view){margin-top:10px;padding-top:0}
.attendance-view>.result-topline{margin-top:0;margin-bottom:18px}
@media(max-width:600px){main:has(>.attendance-view){margin-top:0;padding-top:8px}.attendance-view>.result-topline{margin-bottom:14px}}

.attendance-view .result-heading{margin-bottom:18px}
.attendance-view .result-heading h1{margin-top:0}
.attendance-view>.result-topline{margin-bottom:12px}

#teacherform>button[type="submit"],#assignform>button[type="submit"]{display:block;margin-inline:auto}

/* Center action buttons throughout staff forms. */
#panel form:not(.toolbar)>button[type="submit"]{display:block;margin-inline:auto}
#reportform{justify-content:center}
#reportform>button[type="submit"]{align-self:end}
#exportcsv{display:block;margin:18px auto 0}
#reportform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#reportform>button[type="submit"]{grid-column:1/-1;justify-self:center;width:auto}
@media(max-width:600px){#reportform{grid-template-columns:minmax(0,1fr)}}

/* Align staff form actions to the right. */
#panel form:not(.toolbar)>button[type="submit"],#teacherform>button[type="submit"],#assignform>button[type="submit"]{margin-left:auto;margin-right:0}
#reportform>button[type="submit"]{justify-self:end}
#exportcsv{margin-left:auto;margin-right:0}

/* Compact attendance status controls aligned to the right edge. */
#save th:last-child,#save td:last-child{text-align:right;width:180px}
#save td:last-child select{display:block;width:160px;min-width:0;max-width:100%;margin-left:auto}
@media(max-width:600px){#save th:last-child,#save td:last-child{width:140px}#save td:last-child select{width:128px;font-size:14px}}

#save td:last-child select{text-align:center;text-align-last:center}