/* Trend Markets — shared by the sign-in / verification / password pages.
   Light look = the existing TM login page (unchanged). This file adds: dark mode, 6-box code entry, status line. */
.logo-icon{overflow:hidden;}
.logo-icon img{width:100%;height:100%;display:block;object-fit:cover;}
.theme-btn{margin-left:auto;background:none;border:none;color:rgba(10,31,51,.4);font-size:18px;cursor:pointer;padding:4px;line-height:1;}
.theme-btn:hover{color:#1E90FF;}
.hidden{display:none!important;}

/* 6 separate code boxes */
.otp{display:flex;justify-content:center;gap:8px;margin:18px 0 8px;width:100%;}
.otp input{flex:1 1 0;min-width:0;max-width:54px;height:58px;padding:0;text-align:center;font-size:24px;font-weight:700;font-family:JetBrains Mono,monospace;color:#0A1F33;background:#F4F8FF;border:2px solid rgba(30,144,255,.22);border-radius:14px;outline:none;caret-color:#1E90FF;transition:border-color .15s,transform .15s,box-shadow .15s,background .15s;}
.otp input:focus{border-color:#1E90FF;box-shadow:0 0 0 3px rgba(30,144,255,.16);transform:translateY(-1px);}
.otp.busy input{opacity:.6;}
.otp.ok input{border-color:#22C55E;background:rgba(34,197,94,.12);}
.otp.err input{border-color:#FF3B30;animation:otpShake .35s;}
@keyframes otpShake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.otp-note{text-align:center;font-size:13px;color:rgba(10,31,51,.5);margin-top:12px;line-height:1.7;}
.otp-note a{color:#1E90FF;font-weight:600;text-decoration:none;}
.otp-note a:hover{text-decoration:underline;}
.linkbtn{background:none;border:none;color:#1E90FF;font:inherit;font-weight:600;cursor:pointer;padding:0;}
.linkbtn:disabled{opacity:.5;cursor:not-allowed;}
.live{min-height:22px;font-size:13px;display:flex;align-items:center;gap:6px;margin-top:8px;}
.live.wait{color:rgba(10,31,51,.5);}
.live.ok{color:#22C55E;}
.live.bad{color:#FF3B30;}
.fld .live{justify-content:flex-start;}
.note-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);border-radius:10px;padding:10px 13px;font-size:12px;color:#16A34A;margin-bottom:16px;display:flex;align-items:center;gap:7px;}
.inf a{color:inherit;text-decoration:underline;font-weight:700;}
.shield-ic{width:64px;height:64px;border-radius:50%;background:rgba(30,144,255,.12);border:2px solid rgba(30,144,255,.4);display:flex;align-items:center;justify-content:center;margin:0 0 18px;}
.shield-ic i{font-size:28px;color:#1E90FF;}
.kvt{width:100%;border-collapse:collapse;margin:14px 0 6px;}
.kvt td{padding:9px 2px;border-bottom:1px solid rgba(30,144,255,.14);font-size:12.5px;color:rgba(10,31,51,.5);}
.kvt td+td{text-align:right;color:#0A1F33;font-weight:700;word-break:break-word;}
.btn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:14px;border:none;cursor:pointer;font-family:JetBrains Mono,monospace;font-weight:700;font-size:14px;margin-top:10px;transition:.15s;text-decoration:none;}
.btn2:active{transform:scale(.97);}
.btn2.danger{background:#FF3B30;color:#fff;box-shadow:0 4px 18px rgba(255,59,48,.3);}
.btn2.main{background:linear-gradient(135deg,#1E90FF,#4DA6FF);color:#fff;box-shadow:0 4px 20px rgba(30,144,255,.35);}
.btn2.ghost{background:#F4F8FF;color:#0A1F33;border:1px solid rgba(30,144,255,.25);}

/* ───────── dark mode ───────── */
html[data-theme="dark"] body{background:#0A0E17;color:#EAF2FF;}
html[data-theme="dark"] .logo-name,html[data-theme="dark"] .title{color:#EAF2FF;}
html[data-theme="dark"] .theme-btn{color:rgba(234,242,255,.55);}
html[data-theme="dark"] .sub{color:rgba(234,242,255,.58);}
html[data-theme="dark"] .fld label{color:rgba(234,242,255,.85);}
html[data-theme="dark"] .inp-w i.ic,html[data-theme="dark"] .eye{color:rgba(234,242,255,.42);}
html[data-theme="dark"] .fld input{background:#131B2C;border:1px solid rgba(30,144,255,.28);color:#EAF2FF;}
html[data-theme="dark"] .fld input:focus{background:#1A2438;border-color:rgba(30,144,255,.55);}
html[data-theme="dark"] .fld input::placeholder{color:rgba(234,242,255,.3);}
html[data-theme="dark"] .chk,html[data-theme="dark"] .alt,html[data-theme="dark"] .hint,html[data-theme="dark"] .chks .chk{color:rgba(234,242,255,.55);}
html[data-theme="dark"] .info-box{background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.25);}
html[data-theme="dark"] .info-box .info-row{color:rgba(234,242,255,.72);}
html[data-theme="dark"] .otp input{color:#EAF2FF;background:#131B2C;border-color:rgba(30,144,255,.32);}
html[data-theme="dark"] .otp input:focus{border-color:#4DA6FF;box-shadow:0 0 0 3px rgba(77,166,255,.22);}
html[data-theme="dark"] .otp.ok input{background:rgba(34,197,94,.14);border-color:#22C55E;}
html[data-theme="dark"] .otp-note,html[data-theme="dark"] .live.wait{color:rgba(234,242,255,.55);}
html[data-theme="dark"] .note-ok{color:#4ADE80;}
html[data-theme="dark"] .kvt td{color:rgba(234,242,255,.55);border-color:rgba(30,144,255,.22);}
html[data-theme="dark"] .kvt td+td{color:#EAF2FF;}
html[data-theme="dark"] .btn2.ghost{background:#131B2C;color:#EAF2FF;border-color:rgba(30,144,255,.3);}
html[data-theme="dark"] .blob.b1,html[data-theme="dark"] .blob.b2{opacity:.55;}
html[data-theme="dark"] .blob.b3{display:none;}
html[data-theme="dark"] .msg.ok{color:#4ADE80;}
html[data-theme="dark"] .msg.err{color:#FF6B63;}
@media(max-width:380px){.otp{gap:5px;}.otp input{height:52px;font-size:21px;border-radius:12px;}}
/* toasts (same as the sign-in page) */
.toast-wrap{position:fixed;top:14px;right:12px;z-index:9999;display:flex;flex-direction:column;gap:5px;pointer-events:none;}
.toast{padding:9px 14px;border-radius:8px;font-size:12px;font-weight:600;animation:tin .22s ease;display:flex;align-items:center;gap:6px;pointer-events:none;max-width:86vw;}
@keyframes tin{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
.toast.ok{background:rgba(30,144,255,.16);border:1px solid rgba(30,144,255,.35);color:#1E90FF;}
.toast.err{background:rgba(255,59,48,.12);border:1px solid rgba(255,59,48,.28);color:#FF3B30;}
html[data-theme="dark"] .toast.ok{background:rgba(30,144,255,.22);color:#6DB7FF;}
html[data-theme="dark"] .toast.err{color:#FF6B63;}