/*
 * You Tech Solutions - Unified UI V79
 * Visual language shared by authentication, email OTP and customer workspace.
 * Load this file AFTER the existing style.css / brand.css / user-portal.css files.
 */
:root{
  --yt-u-blue:#3479ed;
  --yt-u-blue-2:#4f8ff5;
  --yt-u-cyan:#57c7f2;
  --yt-u-navy:#10233f;
  --yt-u-ink:#182234;
  --yt-u-muted:#7c8797;
  --yt-u-line:#e5eaf1;
  --yt-u-soft:#f5f8fc;
  --yt-u-shadow:0 18px 55px rgba(25,57,102,.08);
}

/* ===== Shared auth / OTP language ===== */
.yt-auth-template,
.yt-auth-template input,
.yt-auth-template button{font-family:'DM Sans',Arial,sans-serif}
.yt-auth-template .auth-template-shell{background:#fff}
.yt-auth-template .auth-template-form h1{color:var(--yt-u-ink)}
.yt-auth-template .auth-template-kicker{color:var(--yt-u-blue)}
.yt-auth-template .auth-template-kicker span{background:var(--yt-u-blue)}
.yt-auth-template .auth-template-field>span{color:#596579}
.yt-auth-template .auth-template-field input{background:#f2f4f7;color:#243044;border:1px solid transparent}
.yt-auth-template .auth-template-field input:focus{background:#fff;border-color:#6a99ed;box-shadow:0 0 0 4px rgba(52,121,237,.10)}
.yt-auth-template .auth-template-btn{background:linear-gradient(100deg,var(--yt-u-blue),var(--yt-u-blue-2));box-shadow:0 14px 30px rgba(52,121,237,.20)}
.yt-auth-template .auth-template-btn:hover{box-shadow:0 18px 36px rgba(52,121,237,.27)}
.yt-auth-template .auth-template-bottom a,
.yt-auth-template .auth-template-bottom button,
.yt-auth-template .auth-template-options a,
.yt-auth-template .auth-template-check a{color:var(--yt-u-blue)}
.yt-auth-template .auth-reset-icon{background:#edf4ff;color:var(--yt-u-blue);box-shadow:inset 0 0 0 1px #dce9ff}
.yt-auth-template .auth-reset-steps div{border-color:#e8edf4;background:#fafcff}
.yt-auth-template .auth-reset-steps b{background:#eaf2ff;color:var(--yt-u-blue)}
.yt-auth-template .auth-security-row i{color:var(--yt-u-blue)}
.yt-auth-template .auth-yellow-badge{background:#ffe51b;color:#18202c}

/* ===== OTP page ===== */
.yt-auth-template.yt-auth-otp .auth-template-shell{background:#fff}
.yt-auth-template.yt-auth-otp .auth-template-formbox{left:58%;width:42%;padding-left:3vw;padding-right:5vw}
.yt-auth-template.yt-auth-otp .auth-template-panels{grid-template-columns:58% 42%}
.yt-auth-template.yt-auth-otp .auth-panel-left{
  transform:none!important;opacity:1!important;
  background:linear-gradient(135deg,#2f75eb 0%,#3d8cf3 52%,#55b7f3 100%);
  clip-path:ellipse(82% 105% at 17% 48%);
  padding-right:34%;
}
.yt-auth-template.yt-auth-otp .auth-panel-content h2{font-size:38px}
.yt-auth-template.yt-auth-otp .auth-panel-brand b{font-size:40px}
.yt-auth-template.yt-auth-otp .auth-panel-art{width:min(43%,500px);right:7%;bottom:7%}
.yt-otp-boxes{display:grid;grid-template-columns:repeat(6,48px);gap:8px;width:100%;max-width:328px;margin:6px 0 3px;box-sizing:border-box;justify-content:start}
.yt-otp-box{
  width:48px;min-width:48px;max-width:48px;height:52px;text-align:center;border:1px solid #dfe6ef;border-radius:12px;box-sizing:border-box;
  background:#f7f9fc;color:#17243a!important;-webkit-text-fill-color:#17243a;font:800 20px/1 Manrope,Arial;outline:0;transition:.2s;caret-color:var(--yt-u-blue);padding:0!important;text-indent:0!important;opacity:1!important;
}
.yt-otp-box:focus{background:#fff!important;color:#17243a!important;-webkit-text-fill-color:#17243a;border-color:var(--yt-u-blue);box-shadow:0 0 0 4px rgba(52,121,237,.10);transform:translateY(-1px)}
.yt-otp-help{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 1px 0;color:#8a95a5;font-size:9px}
.yt-otp-help strong{color:#526278}
.yt-otp-resend{border:0;background:none;color:var(--yt-u-blue);font-weight:900;font-size:9px;cursor:pointer;padding:0}
.yt-otp-resend:disabled{opacity:.45;cursor:not-allowed}

/* ===== Customer workspace: same blue/cyan visual language ===== */
.yt-user-app{
  --yt-blue:var(--yt-u-blue);
  --yt-blue2:var(--yt-u-blue-2);
  background:#f7f9fc!important;
  color:var(--yt-u-ink);
}
.yt-user-app .yt-user-shell{background:#f7f9fc}
.yt-user-app .yt-user-sidebar{
  width:258px!important;
  background:#fff!important;
  color:#607087!important;
  border-right:1px solid #e5eaf1!important;
  box-shadow:16px 0 45px rgba(15,40,75,.05)!important;
}
.yt-user-app .yt-user-brand{border-bottom:1px solid #eef2f6;padding-bottom:15px}
.yt-user-app .yt-user-brand strong{color:#17243a!important}
.yt-user-app .yt-user-brand small{color:#8b97a7!important}
.yt-user-app .yt-user-logo{
  background:linear-gradient(135deg,var(--yt-u-blue),var(--yt-u-cyan))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(52,121,237,.16);
}
.yt-user-app .yt-user-workspace{
  background:linear-gradient(135deg,#f1f6ff,#f1fbfe)!important;
  border:1px solid #dfeafa!important;
}
.yt-user-app .yt-user-workspace .dot{background:#29b77a!important;box-shadow:0 0 0 4px rgba(41,183,122,.10)}
.yt-user-app .yt-user-workspace b{color:#1b2b43!important}
.yt-user-app .yt-user-workspace span{color:#8995a5!important}
.yt-user-app .yt-user-nav-group{color:#a0aaba!important}
.yt-user-app .yt-user-nav a{color:#5d6c81!important;border:1px solid transparent}
.yt-user-app .yt-user-nav a:hover{background:#f1f6ff!important;color:var(--yt-u-blue)!important}
.yt-user-app .yt-user-nav a.active{
  background:linear-gradient(90deg,#eaf2ff,#f0f9ff)!important;
  color:var(--yt-u-blue)!important;
  border-color:#dbe9ff!important;
  box-shadow:0 6px 16px rgba(52,121,237,.07);
}
.yt-user-app .yt-user-nav a.active i{color:var(--yt-u-blue)!important}
.yt-user-app .yt-user-side-bottom{border-top-color:#e8edf3!important}
.yt-user-app .yt-upgrade-card{
  background:linear-gradient(145deg,#2f75eb 0%,#3e8df2 55%,#50b8e8 100%)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 15px 32px rgba(52,121,237,.18)!important;
}
.yt-user-app .yt-upgrade-btn{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.25)!important}
.yt-user-app .yt-user-main{background:#f7f9fc}
.yt-user-app .yt-user-topbar{background:rgba(255,255,255,.94)!important;border-bottom-color:#e6ebf2!important}
.yt-user-app .yt-user-menu{background:#fff!important;border-color:#dfe6ef!important;color:#53647b!important}
.yt-user-app .yt-top-btn.primary{background:linear-gradient(135deg,var(--yt-u-blue),#12a6ca)!important;box-shadow:0 9px 22px rgba(52,121,237,.16)!important}
.yt-user-app .yt-user-content{background:transparent}
.yt-user-app .yt-user-hero{
  background:linear-gradient(125deg,#0e2340 0%,#1851a0 58%,#0e9bb7 125%)!important;
  box-shadow:0 22px 52px rgba(22,60,110,.16)!important;
}
.yt-user-app .yt-user-card,
.yt-user-app .yt-user-stat,
.yt-user-app .yt-feature-tile{
  border-color:#e3e9f1!important;
  box-shadow:var(--yt-u-shadow)!important;
}
.yt-user-app .yt-user-action.primary,
.yt-user-app .yt-action.primary{background:linear-gradient(135deg,var(--yt-u-blue),#1198bb)!important}
.yt-user-app .yt-user-action:not(.primary){background:#fff}
.yt-user-app .yt-user-icon{background:#edf4ff!important;color:var(--yt-u-blue)!important}
.yt-user-app .yt-user-stat .value{color:#182234}
.yt-user-app .yt-user-page-head h1{color:#182234!important}
.yt-user-app input:not([type=checkbox]):not([type=radio]),
.yt-user-app textarea,
.yt-user-app select{border-color:#dfe6ef!important;background:#fff!important}
.yt-user-app input:focus,
.yt-user-app textarea:focus,
.yt-user-app select:focus{border-color:#5d91e8!important;box-shadow:0 0 0 4px rgba(52,121,237,.09)!important}
.yt-user-app .yt-user-avatar{background:linear-gradient(135deg,var(--yt-u-blue),var(--yt-u-cyan))!important;color:#fff!important}
.yt-user-app .yt-user-mini-copy b{color:#1b2940!important}
.yt-user-app .yt-user-mini-copy span{color:#8b97a7!important}
.yt-user-app .yt-user-mini-logout{color:#7a8798!important}

/* Support mode remains light, but now uses the same blue/cyan system. */
.yt-support-mode .yt-support-badge{border-color:#d8e8ff!important;background:linear-gradient(90deg,#edf4ff,#edfbff)!important;color:#1e4fba!important}
.yt-support-mode .yt-support-badge a{color:#245fc8!important;border-color:#d6e4fa!important}

/* Mobile workspace */
@media(max-width:800px){
  .yt-user-app .yt-user-sidebar{width:275px!important}
  .yt-user-app .yt-user-menu{background:linear-gradient(135deg,var(--yt-u-blue),#10a9c7)!important;color:#fff!important;border-color:transparent!important}
}
@media(max-width:760px){
  .yt-auth-template.yt-auth-otp .auth-template-panels{display:none}
  .yt-auth-template.yt-auth-otp .auth-template-formbox{position:relative;left:auto;width:100%;min-height:100vh;padding:28px 22px;display:flex;align-items:center;justify-content:center}
  .yt-otp-boxes{grid-template-columns:repeat(6,42px);gap:6px;max-width:282px}
  .yt-otp-box{width:42px;min-width:42px;max-width:42px;height:48px;font-size:18px}
}
@media(max-width:430px){
  .yt-otp-boxes{grid-template-columns:repeat(6,40px);gap:5px;max-width:265px}
  .yt-otp-box{width:40px;min-width:40px;max-width:40px;height:46px;border-radius:11px;font-size:17px}
  .yt-otp-help{font-size:8px}
  .yt-otp-resend{font-size:8px}
}