/* r169 sign-in pages: Admin / Student tabs, centred "Forgot password?", SMS OTP reset drawer (SaleTech Pro style) */
.lg-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 20px; border-radius:12px; background:var(--surface-2,#eef3f3); border:1px solid var(--line,#e3e9ec); }
.lg-tabs a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 10px; border-radius:9px; color:var(--muted,#6b7a86); font-weight:600; font-size:13.5px; text-decoration:none; transition:background .15s, color .15s, box-shadow .15s; }
.lg-tabs a:hover{ color:var(--ink,#122238); }
.lg-tabs a.on{ background:var(--surface,#fff); color:var(--teal-700,#01564D); box-shadow:0 2px 8px -3px rgba(18,34,56,.25); }
.lg-tabs a.on i{ color:var(--teal,#017B6E); }
.lg-fp{ text-align:center; margin:14px 0 4px; }
.lg-forgot{ background:none; border:0; padding:4px 6px; color:var(--teal-700,#01564D); font:600 14px var(--f-body,inherit); cursor:pointer; text-decoration:none; }
.lg-forgot:hover{ text-decoration:underline; }
.lg-forgot-off{ color:var(--muted,#6b7a86); font-size:13px; }
/* drawer */
.fp-scrim{ position:fixed; inset:0; z-index:1100; background:rgba(8,20,24,.45); opacity:0; transition:opacity .2s; }
.fp-scrim.in{ opacity:1; }
.fp-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1101; width:min(520px,100vw); display:flex; flex-direction:column; background:var(--surface,#fff); color:var(--ink,#122238); box-shadow:-20px 0 60px -20px rgba(0,0,0,.35); transform:translateX(100%); transition:transform .22s ease; }
.fp-drawer.in{ transform:none; }
.fp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 26px; border-bottom:1px solid var(--line,#e3e9ec); }
.fp-head h2{ margin:0; font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.fp-head h2 i{ color:var(--teal,#017B6E); }
.fp-x{ width:36px; height:36px; border:0; border-radius:10px; background:none; color:var(--muted,#6b7a86); font-size:18px; cursor:pointer; }
.fp-x:hover{ background:var(--surface-2,#eef3f3); color:var(--ink,#122238); }
.fp-body{ flex:1; overflow-y:auto; padding:24px 26px 30px; }
.fp-txt{ margin:0 0 18px; color:var(--muted,#6b7a86); font-size:14px; line-height:1.55; }
.fp-field{ margin-bottom:16px; }
.fp-field > label{ display:block; margin-bottom:7px; font-weight:600; font-size:14px; }
.fp-field input:not([type=hidden]){ width:100%; height:50px; padding:0 16px; border:1px solid var(--line,#dfe6ea); border-radius:12px; background:var(--surface,#fff); color:var(--ink,#122238); font:15px var(--f-body,inherit); outline:0; transition:border-color .15s, box-shadow .15s; }
.fp-field input:focus{ border-color:var(--teal,#017B6E); box-shadow:0 0 0 4px var(--teal-06,rgba(1,123,110,.1)); }
.fp-field input.bad{ border-color:#e5484d; }
.fp-err{ margin-top:6px; color:#d13438; font-size:12.5px; }
.fp-pw{ position:relative; } .fp-pw input{ padding-right:48px !important; }
.fp-pw button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:9px; background:none; color:var(--muted,#6b7a86); cursor:pointer; }
.fp-otp{ display:grid; grid-template-columns:repeat(4,64px); gap:12px; }
.fp-otp input{ height:58px !important; padding:0 !important; text-align:center; font-size:24px !important; font-weight:700; letter-spacing:0; }
.fp-btn{ width:100%; height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg, var(--teal,#017B6E), var(--teal-700,#01564D)); color:#fff; font:700 16px var(--f-body,inherit); cursor:pointer; box-shadow:0 12px 24px -12px rgba(1,123,110,.6); transition:transform .12s, filter .12s; }
.fp-btn:hover{ filter:brightness(1.06); } .fp-btn:active{ transform:translateY(1px); } .fp-btn:disabled{ opacity:.7; cursor:wait; }
.fp-links{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.fp-link{ border:0; background:none; padding:4px 0; color:var(--teal-700,#01564D); font:600 13.5px var(--f-body,inherit); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.fp-link:disabled{ color:var(--muted,#6b7a86); cursor:default; }
.fp-alert{ display:flex; gap:9px; align-items:flex-start; margin-bottom:16px; padding:11px 14px; border-radius:11px; background:#fdecec; color:#b4232a; font-size:13.5px; line-height:1.45; }
.fp-alert.ok{ background:var(--teal-06,#e8f6f3); color:var(--teal-700,#01564D); }
.fp-done{ text-align:center; padding:30px 0; }
.fp-done > i{ font-size:54px; color:var(--teal,#017B6E); }
.fp-done h3{ margin:14px 0 6px; font-size:20px; } .fp-done p{ color:var(--muted,#6b7a86); margin:0 0 22px; }
@media (max-width:480px){ .fp-head{ padding:16px 18px; } .fp-body{ padding:18px; } .fp-otp{ grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion:reduce){ .fp-drawer, .fp-scrim{ transition:none; } }

/* r170 tabs as the top strip of the box (Interface Settings style) */
.lg-tabs.lg-tabs-top{ display:flex; gap:4px; margin:0; padding:10px 14px 0; border:0; border-bottom:1px solid var(--lline,var(--line-2,#e3e9ec)); border-radius:0; background:var(--ltab,#f4f8f8); grid-template-columns:none; }
.lg-tabs-top a{ flex:none; padding:10px 14px; border-radius:10px 10px 0 0; box-shadow:none; }
.lg-tabs-top a.on{ background:var(--ltabon,#e3f3f0); color:var(--lc7,#01564D); box-shadow:inset 0 -2px 0 var(--lc,#0f9d8a); }
.lg-tabs-top a.on i{ color:var(--lc,#0f9d8a); }
/* r170 colour presets (Interface Settings › Login Interface): body[data-lgc] */
body.ep-login[data-lgc="teal"]{ --lc:#0f9d8a; --lc7:#01564D; --lc3:#a7f3d0; --ltab:#f4f8f8; --ltabon:#e3f3f0; }
body.ep-login[data-lgc="indigo"]{ --lc:#5b5bd6; --lc7:#3d3aa8; --lc3:#c7c4ff; --lcard:#f6f5ff; --lline:#e1defb; --ltab:#eeecff; --ltabon:#fff; --lmut:#6c6a8f; --link:#1e1b4b; --ldr:#f6f5ff; --ldrh:linear-gradient(135deg,#5b5bd6,#3d3aa8); --ldrhc:#fff; --lbg:linear-gradient(135deg,#1d1f45 0%,#3d3aa8 50%,#6d6af0 100%); }
body.ep-login[data-lgc="sky"]{ --lc:#1d8fe1; --lc7:#0b5fa5; --lc3:#bfe3ff; --lcard:#f3f9ff; --lline:#d6e9fa; --ltab:#e8f3fd; --ltabon:#fff; --lmut:#5d7891; --link:#0f2c44; --ldr:#eef6ff; --ldrh:#eef6ff; --ldrhc:#0f2c44; --lbg:linear-gradient(135deg,#0f2c44 0%,#0b5fa5 50%,#3aa7f0 100%); }
body.ep-login[data-lgc="amber"]{ --lc:#e8891c; --lc7:#b5600a; --lc3:#ffd9a3; --lcard:#fffaf2; --lline:#f4e3c9; --ltab:#fdf1de; --ltabon:#fff; --lmut:#8a7258; --link:#3a2410; --ldr:#fffaf2; --ldrh:linear-gradient(135deg,#f0a43a,#d6740f); --ldrhc:#fff; --lbg:linear-gradient(135deg,#2e1d0e 0%,#b5600a 50%,#f0a43a 100%); }
body.ep-login:not([data-lgc="teal"]) .lg-card{ background:var(--lcard); }
body.ep-login:not([data-lgc="teal"]) :is(.lg-head, .lg-foot){ border-color:var(--lline); }
body.ep-login:not([data-lgc="teal"]) :is(.lg-welcome, .lg-brand h1, .lg-field > label){ color:var(--link); }
body.ep-login:not([data-lgc="teal"]) :is(.lg-wsub, .lg-sub, .lg-foot, .lg-tabs-top a){ color:var(--lmut); }
body.ep-login:not([data-lgc="teal"]) .lg-tabs-top a.on{ color:var(--lc7); }
body.ep-login:not([data-lgc="teal"]) .lg-input input{ background:#fff; border-color:var(--lline); }
body.ep-login:not([data-lgc="teal"]) .lg-input input:focus{ border-color:var(--lc); box-shadow:0 0 0 4px color-mix(in srgb, var(--lc) 16%, transparent); }
body.ep-login:not([data-lgc="teal"]) .lg-strip{ background:linear-gradient(90deg, var(--lc7), var(--lc) 35%, var(--lc3) 70%, var(--lc)); }
body.ep-login:not([data-lgc="teal"]) .lg-mark:not(.img){ background:linear-gradient(135deg, var(--lc), var(--lc7)); box-shadow:0 8px 18px -6px color-mix(in srgb, var(--lc) 55%, transparent); }
body.ep-login:not([data-lgc="teal"]) .lg-btn{ background:linear-gradient(135deg, var(--lc), var(--lc7)); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--lc) 65%, transparent); }
body.ep-login:not([data-lgc="teal"]) .lg-forgot, body.ep-login:not([data-lgc="teal"]) .lg-left h2 span{ color:var(--lc3); }
body.ep-login:not([data-lgc="teal"]) .lg-card .lg-forgot{ color:var(--lc7); }
body.ep-login:not([data-lgc="teal"]) .lg-secure{ color:var(--lc7); background:var(--ltab); }
body.ep-login:not([data-lgc="teal"]) .lg-bg:not([style]){ background:var(--lbg); }
/* reset panel */
body.ep-login:not([data-lgc="teal"]) .fp-drawer{ background:var(--ldr); color:var(--link); }
body.ep-login:not([data-lgc="teal"]) .fp-head{ background:var(--ldrh); border-color:var(--lline); color:var(--ldrhc); }
body.ep-login:not([data-lgc="teal"]) .fp-head h2 i, body.ep-login:not([data-lgc="teal"]) .fp-x{ color:var(--ldrhc); }
body.ep-login[data-lgc="sky"] .fp-head h2 i{ color:var(--lc); }
body.ep-login:not([data-lgc="teal"]) .fp-x:hover{ background:rgba(255,255,255,.18); }
body.ep-login:not([data-lgc="teal"]) :is(.fp-txt, .fp-done p){ color:var(--lmut); }
body.ep-login:not([data-lgc="teal"]) .fp-field input:not([type=hidden]){ border-color:var(--lline); background:#fff; }
body.ep-login:not([data-lgc="teal"]) .fp-field input:focus{ border-color:var(--lc); box-shadow:0 0 0 4px color-mix(in srgb, var(--lc) 14%, transparent); }
body.ep-login:not([data-lgc="teal"]) .fp-btn{ background:linear-gradient(135deg, var(--lc), var(--lc7)); box-shadow:0 12px 24px -12px color-mix(in srgb, var(--lc) 60%, transparent); }
body.ep-login:not([data-lgc="teal"]) :is(.fp-link, .fp-done > i){ color:var(--lc7); }
body.ep-login:not([data-lgc="teal"]) .fp-alert.ok{ background:var(--ltab); color:var(--lc7); }
/* Admin Portal Theme: classic reset form inside the drawer; "Signing in" state */
.at-fp-body{ padding:0 !important; display:flex; }
.at-fp-frame{ flex:1; width:100%; min-height:100%; border:0; background:#fff; }
.lg-alert.ok{ display:flex; }
a.lg-btn{ text-decoration:none; }
.lg-input>i+select{ padding-left:38px; }
/* Admin Portal Theme: sign-in chooser (index.php / applogin.php) - two big choices in the login card */
.lc-opts{ display:grid; gap:12px; margin-top:6px; }
.lc-opt{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:1px solid var(--lline,var(--line,#e3e9ec)); background:var(--surface,#fff); color:var(--link,var(--ink,#122238)); text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s; }
.lc-opt:hover, .lc-opt:focus-visible{ transform:translateY(-2px); border-color:var(--lc,var(--teal,#017B6E)); box-shadow:0 12px 26px -16px rgba(18,34,56,.45); outline:none; }
.lc-ic{ flex:0 0 52px; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:#fff; background:linear-gradient(135deg,var(--lc,#0f9d8a),var(--lc7,#01564D)); box-shadow:0 10px 20px -12px var(--lc7,#01564D); }
.lc-tx{ flex:1; min-width:0; display:grid; gap:2px; }
.lc-tx small{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lmut,var(--muted,#6b7a86)); }
.lc-tx b{ font:700 16px/1.25 var(--f-display,Outfit,sans-serif); }
.lc-tx em{ font-style:normal; font-size:12.5px; color:var(--lmut,var(--muted,#6b7a86)); line-height:1.4; }
.lc-go{ color:var(--lc7,var(--teal-700,#01564D)); transition:transform .15s; }
.lc-opt:hover .lc-go{ transform:translateX(3px); }
.lc-card .lg-sub{ letter-spacing:.02em; text-transform:none; font-size:12px; }