/* TryCleaning: ONE login look for every app (2026-09-06).
   Used by login.html, the staff app (/app), the client app (/account), the applicant app (/apply),
   the academy portal (/academy) and the manager app (/manager).
   Navy gradient page, TRY Cleaning brand, white card, pill button. Class names are prefixed "tcl-" and
   every rule is scoped under .tcl so it out-ranks each page's own input / .btn / .field rules. The message
   element keeps the plain "msg" class (each page's JS sets msg / msg err / msg ok / msg show err) and is
   styled in card scope: hidden while empty, shown whenever it has text. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600;700&display=swap');

.tcl{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.1rem 3rem;padding-top:calc(2rem + env(safe-area-inset-top,0px));padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px));background:linear-gradient(165deg,#080F2E 0%,#0D1B4B 60%,#152060 100%);font-family:'Inter',system-ui,sans-serif;color:#0D1B4B;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;text-align:center;}
.tcl *,.tcl *::before,.tcl *::after{box-sizing:border-box;}
.tcl .tcl-brand{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:#fff;margin:0 0 0.3rem;text-decoration:none;border:none;display:inline-flex;align-items:center;gap:0.14em;line-height:1.2;}
.tcl .tcl-brand span{color:#4FC3F7;}
.tcl .tcl-brand img{height:1.05em;width:auto;display:block;}
.tcl .tcl-app{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#4FC3F7;margin:0.1rem 0 0.4rem;text-align:center;}
.tcl .tcl-tag{color:rgba(255,255,255,0.62);font-size:0.86rem;margin:0 0 1.6rem;text-align:center;max-width:430px;line-height:1.5;}
.tcl .tcl-tag a{color:#4FC3F7;font-weight:600;text-decoration:none;border:none;}
.tcl .tcl-card{background:#fff;border-radius:20px;padding:1.8rem 1.6rem;width:100%;max-width:430px;box-shadow:0 24px 70px rgba(8,15,46,0.4);color:#0D1B4B;text-align:left;margin:0;border:none;}
.tcl .tcl-card + .tcl-card{margin-top:1rem;}
.tcl .tcl-seg{display:flex;flex-wrap:wrap;gap:0.3rem;background:#F0F4FF;border:none;border-radius:12px;padding:0.3rem;margin:0 0 1.5rem;}
.tcl .tcl-seg button{flex:1 1 auto;min-width:72px;border:none;background:transparent;font-family:inherit;font-size:0.78rem;font-weight:700;color:#8A93B0;padding:0.55rem 0.35rem;margin:0;border-radius:9px;cursor:pointer;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-shadow:none;line-height:1.2;}
.tcl .tcl-seg button.active{background:#0D1B4B;color:#fff;box-shadow:0 6px 16px rgba(8,15,46,0.18);}
.tcl .tcl-seg button .tci,.tcl .tcl-seg button svg{width:15px;height:15px;margin:0;}
.tcl .tcl-h{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;margin:0 0 0.25rem;line-height:1.2;color:inherit;text-align:left;}
.tcl .tcl-sub{color:#8A93B0;font-size:0.86rem;line-height:1.5;margin:0 0 1.3rem;text-align:left;}
.tcl .tcl-fl{display:block;font-size:0.8rem;font-weight:600;margin:0 0 0.4rem;color:inherit;text-align:left;}
.tcl .field{margin:0;padding:0;}
.tcl .tcl-in{display:block;width:100%;border:1.5px solid rgba(13,27,75,0.12);border-radius:12px;padding:0.85rem 1rem;font-family:inherit;font-size:16px;line-height:1.3;color:#0D1B4B;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;margin:0 0 1rem;appearance:none;-webkit-appearance:none;box-shadow:none;text-align:left;}
.tcl select.tcl-in{background-image:linear-gradient(45deg,transparent 50%,#8A93B0 50%),linear-gradient(135deg,#8A93B0 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem;}
.tcl .tcl-in:focus{border-color:#4FC3F7;box-shadow:0 0 0 3px rgba(79,195,247,0.18);}
.tcl .tcl-in::placeholder{color:#a4abc2;}
.tcl .tcl-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 0.7rem;}
@media (max-width:420px){.tcl .tcl-row2{grid-template-columns:1fr;}}
.tcl .tcl-btn{display:block;width:100%;text-align:center;background:#0D1B4B;color:#fff;border:none;border-radius:50px;padding:0.95rem 1.4rem;margin:0;font-family:inherit;font-size:0.95rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s;line-height:1.2;box-shadow:none;}
.tcl .tcl-btn:hover{background:#4FC3F7;color:#0D1B4B;}
.tcl .tcl-btn:disabled{opacity:.6;cursor:default;}
.tcl .tcl-check{display:flex;align-items:center;gap:9px;margin:0 0 1rem;font-size:0.84rem;font-weight:400;color:#5F6B8F;cursor:pointer;line-height:1.35;text-align:left;}
.tcl .tcl-check input{width:18px;height:18px;accent-color:#4FC3F7;margin:0;flex:0 0 auto;}
.tcl .tcl-card .msg,.tcl .tcl-card .tcl-err{display:none;font-size:0.86rem;padding:0.7rem 1rem;border-radius:10px;margin:0.9rem 0 0;line-height:1.45;text-align:left;min-height:0;background:#F0F4FF;color:#0D1B4B;}
.tcl .tcl-card .msg:not(:empty),.tcl .tcl-card .msg.show{display:block;}
.tcl .tcl-card .msg.err,.tcl .tcl-card .tcl-err{background:#fdecea;color:#b23c31;}
.tcl .tcl-card .msg.ok{background:#F0F4FF;color:#2E9E6B;}
.tcl .tcl-link{background:none;border:none;padding:0;margin:0;color:#0D1B4B;font-family:inherit;font-size:0.84rem;font-weight:600;cursor:pointer;text-decoration:none;border-bottom:1.5px solid #4FC3F7;border-radius:0;line-height:1.4;width:auto;display:inline;}
.tcl .tcl-foot{margin:1.1rem 0 0;text-align:center;font-size:0.84rem;line-height:1.6;color:inherit;}
.tcl .tcl-foot.muted,.tcl .tcl-fine{color:#8A93B0;}
.tcl .tcl-fine{font-size:0.74rem;line-height:1.5;margin:0.9rem 0 0;text-align:center;}
.tcl .tcl-foot a,.tcl .tcl-fine a{color:#0D1B4B;font-weight:700;border-bottom:1.5px solid #4FC3F7;text-decoration:none;}
.tcl .tcl-back{color:rgba(255,255,255,0.6);font-size:0.85rem;margin-top:1.4rem;text-decoration:none;border:none;}
.tcl .tcl-back:hover{color:#4FC3F7;}
.tcl .hidden{display:none!important;}

/* Dark theme (theme.js stamps data-theme on <html>). The page stays navy; the card goes deep blue. */
:root[data-theme="dark"] .tcl{background:linear-gradient(165deg,#060b1f 0%,#0a1633 60%,#111c4d 100%);}
:root[data-theme="dark"] .tcl .tcl-card{background:#172642;color:#e9eefb;box-shadow:0 24px 70px rgba(0,0,0,0.5);}
:root[data-theme="dark"] .tcl .tcl-h,:root[data-theme="dark"] .tcl .tcl-fl,:root[data-theme="dark"] .tcl .tcl-link,:root[data-theme="dark"] .tcl .tcl-foot a,:root[data-theme="dark"] .tcl .tcl-fine a{color:#e9eefb;}
:root[data-theme="dark"] .tcl .tcl-sub,:root[data-theme="dark"] .tcl .tcl-foot.muted,:root[data-theme="dark"] .tcl .tcl-fine,:root[data-theme="dark"] .tcl .tcl-check{color:#9fb0cc;}
:root[data-theme="dark"] .tcl .tcl-in{background:#101d33;color:#e9eefb;border-color:rgba(255,255,255,0.14);}
:root[data-theme="dark"] .tcl .tcl-in::placeholder{color:#6f81a3;}
:root[data-theme="dark"] .tcl .tcl-seg{background:#101d33;}
:root[data-theme="dark"] .tcl .tcl-seg button{color:#9fb0cc;}
:root[data-theme="dark"] .tcl .tcl-seg button.active{background:#243a63;color:#e9eefb;}
:root[data-theme="dark"] .tcl .tcl-btn{background:#243a63;color:#e9eefb;}
:root[data-theme="dark"] .tcl .tcl-btn:hover{background:#4FC3F7;color:#0b1526;}
:root[data-theme="dark"] .tcl .tcl-card .msg,:root[data-theme="dark"] .tcl .tcl-card .tcl-err{background:#101d33;color:#e9eefb;}
:root[data-theme="dark"] .tcl .tcl-card .msg.err,:root[data-theme="dark"] .tcl .tcl-card .tcl-err{background:rgba(224,115,106,0.18);color:#ff9b8f;}
:root[data-theme="dark"] .tcl .tcl-card .msg.ok{background:rgba(46,158,107,0.18);color:#7ddc9a;}