/* ============================================================
   ItnaOne Premium Modern UI V1.9.1
   Unified crystal / premium UI overlay for Mail, Drive, Wallet,
   Security, Plans, Admin, Login/Register and Recovery.
   Loaded last intentionally; runtime logic is untouched.
   ============================================================ */

:root{
  --io-p-bg:#f3f7fd;
  --io-p-surface:rgba(255,255,255,.90);
  --io-p-surface-strong:#fff;
  --io-p-blue:#0b57d0;
  --io-p-blue-2:#2563eb;
  --io-p-cyan:#08a9d9;
  --io-p-navy:#0b1f3a;
  --io-p-text:#172033;
  --io-p-muted:#65738a;
  --io-p-line:rgba(124,151,184,.22);
  --io-p-soft:#eaf3ff;
  --io-p-green:#0e9f6e;
  --io-p-red:#d33b47;
  --io-p-amber:#c77b00;
  --io-p-radius:22px;
  --io-p-shadow:0 10px 35px rgba(41,72,111,.09),0 2px 8px rgba(41,72,111,.04);
  --io-p-shadow-hover:0 18px 46px rgba(41,72,111,.15),0 4px 12px rgba(41,72,111,.06);
  --io-p-gradient:linear-gradient(135deg,#0b57d0 0%,#2578eb 52%,#08a9d9 100%);
}

html,body{background:var(--io-p-bg)!important;color:var(--io-p-text)!important}
body{background-image:radial-gradient(circle at 10% -5%,rgba(37,99,235,.08),transparent 28%),radial-gradient(circle at 92% 3%,rgba(8,169,217,.07),transparent 30%)!important;background-attachment:fixed!important}
*{scrollbar-width:thin;scrollbar-color:#c8d6e8 transparent}
::selection{background:#cfe3ff;color:#061c3f}

/* ---------- shell / topbar ---------- */
.itnaone-gmail-shell,.itnaone-view-stage{background:transparent!important}
.itnaone-gmail-topbar{
  background:rgba(247,250,255,.82)!important;
  border-bottom:1px solid rgba(125,151,181,.14)!important;
  box-shadow:0 8px 30px rgba(45,76,112,.05)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
}
.itnaone-menu-button,.mail-icon-btn,.mail-settings-btn,.itnaone-search-options{
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important
}
.itnaone-menu-button:hover,.mail-icon-btn:hover,.mail-settings-btn:hover,.itnaone-search-options:hover{transform:translateY(-1px);background:#eaf2fc!important}
.itnaone-mail-brand img{border:1px solid rgba(80,116,160,.13)!important;box-shadow:0 7px 18px rgba(44,85,145,.14)!important}
.itnaone-global-search{
  background:rgba(232,241,252,.88)!important;
  border:1px solid rgba(121,151,185,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
  transition:box-shadow .2s ease,background .2s ease,border-color .2s ease!important
}
.itnaone-global-search:focus-within{background:#fff!important;border-color:rgba(37,99,235,.24)!important;box-shadow:0 9px 28px rgba(48,91,145,.11),0 0 0 3px rgba(37,99,235,.07)!important}
.itnaone-top-actions .mail-avatar{background:var(--io-p-gradient)!important;box-shadow:0 7px 20px rgba(37,99,235,.22),inset 0 0 0 2px rgba(255,255,255,.92)!important}

/* ---------- drawer / navigation ---------- */
.itnaone-app-drawer{
  background:rgba(255,255,255,.96)!important;
  border-right:1px solid rgba(126,151,179,.18)!important;
  box-shadow:26px 0 70px rgba(27,52,88,.18)!important;
  backdrop-filter:blur(28px)!important;
  -webkit-backdrop-filter:blur(28px)!important
}
.itnaone-drawer-brand{border-bottom-color:rgba(126,151,179,.14)!important}
.itnaone-app-drawer nav a{transition:background .15s ease,color .15s ease,transform .15s ease!important}
.itnaone-app-drawer nav a:hover{background:#eef5ff!important;color:#123a72!important;transform:translateX(2px)}
.itnaone-app-drawer nav a.active{background:linear-gradient(135deg,#d9e9ff,#e4f7ff)!important;color:#062a60!important;box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)!important}
.itnaone-drawer-footer{border-top-color:rgba(126,151,179,.15)!important;color:#74829a!important;font-weight:600!important;letter-spacing:.02em}

/* ---------- universal content ---------- */
.content-pad,.platform-page{position:relative}
.platform-page{max-width:1280px!important;margin:0 auto!important}
.admin-page-head,.wallet-hero-line,.drive-hero{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(245,250,255,.86))!important;
  border:1px solid var(--io-p-line)!important;
  border-radius:26px!important;
  padding:22px 24px!important;
  box-shadow:var(--io-p-shadow)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important
}
.admin-page-head h1,.drive-hero h1,.wallet-page h1,.security-page h1,.platform-page h1{color:var(--io-p-navy)!important;letter-spacing:-.03em!important}
.admin-page-head p,.drive-hero p,.platform-page p{color:var(--io-p-muted)}

/* ---------- cards ---------- */
.admin-form-card,.drive-panel,.drive-list-card,.drive-usage-card,.drive-plan-card,.wallet-panel,.wallet-balance-card,.wallet-gateway,.wallet-plan-card,
.security-card,.platform-card,.card,.glass,.glass-strong,.stats>div{
  border:1px solid var(--io-p-line)!important;
  background:var(--io-p-surface)!important;
  box-shadow:var(--io-p-shadow)!important;
  border-radius:var(--io-p-radius)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important
}
.drive-plan-card,.wallet-gateway,.wallet-plan-card,.security-card,.stats>div{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.drive-plan-card:hover,.wallet-gateway:hover,.wallet-plan-card:hover,.security-card:hover,.stats>div:hover{transform:translateY(-2px);box-shadow:var(--io-p-shadow-hover)!important;border-color:rgba(64,119,188,.28)!important}

/* ---------- buttons / links / pills ---------- */
button,.button,.btn,.primary,.wallet-primary,.drive-primary-link,.drive-plan-card button{
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important
}
.primary,.wallet-primary,.drive-primary-link,.drive-plan-card button:not(:disabled){
  background:var(--io-p-gradient)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(37,99,235,.20)!important
}
.primary:hover,.wallet-primary:hover,.drive-primary-link:hover,.drive-plan-card button:not(:disabled):hover{transform:translateY(-1px);filter:saturate(1.06);box-shadow:0 12px 26px rgba(37,99,235,.26)!important}
.drive-secondary,.auth-action-link,.billing-toggle a,.drive-tabs a,.pill,.drive-wallet-pill{
  border:1px solid rgba(121,151,185,.22)!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 4px 14px rgba(54,82,116,.05)!important
}
.pill,.wallet-status{font-weight:800!important;letter-spacing:.01em!important}

/* ---------- inputs / forms ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  border:1px solid #ced9e7!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--io-p-text)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 1px rgba(20,42,72,.02)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,select:focus,textarea:focus{
  outline:0!important;border-color:#5b96e8!important;background:#fff!important;box-shadow:0 0 0 4px rgba(37,99,235,.09)!important
}
label{color:#42516a}
.admin-switch-row input[type=checkbox]{accent-color:#2563eb}

/* ---------- alerts ---------- */
.admin-alert,.auth-message,.notice,.flash{border-radius:16px!important;border:1px solid transparent!important;box-shadow:0 6px 20px rgba(41,72,111,.05)!important}
.admin-alert.success,.auth-message-success{background:#ecfbf5!important;border-color:#bcebd9!important;color:#087451!important}
.admin-alert.error{background:#fff0f1!important;border-color:#f4c8cc!important;color:#a82934!important}

/* ---------- MAIL ---------- */
body.mail-ui-page .mail-grid.gmail-mail{gap:12px!important;padding:0 14px 18px!important}
body.mail-ui-page .gmail-sidebar{border-radius:24px!important}
body.mail-ui-page .gmail-sidebar .compose{
  background:linear-gradient(135deg,#cbe8ff,#dff7ff)!important;color:#072c55!important;
  border:1px solid rgba(68,135,199,.10)!important;box-shadow:0 9px 25px rgba(51,113,170,.13)!important
}
body.mail-ui-page .gmail-sidebar .compose:hover{box-shadow:0 13px 30px rgba(51,113,170,.18)!important;transform:translateY(-1px)}
body.mail-ui-page .mail-center{
  background:rgba(255,255,255,.88)!important;border:1px solid var(--io-p-line)!important;border-radius:24px!important;
  box-shadow:var(--io-p-shadow)!important;overflow:hidden!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important
}
body.mail-ui-page .gmail-row,.mail-row,.message-row{transition:background .12s ease,box-shadow .12s ease!important}
body.mail-ui-page .gmail-row:hover,.mail-row:hover,.message-row:hover{background:#f4f8fe!important;box-shadow:inset 3px 0 0 #6ca4ef!important}
body.mail-ui-page .gmail-row.unread,.mail-row.unread,.message-row.unread{background:linear-gradient(90deg,#fff,#f7fbff)!important}
body.mail-ui-page .gmail-row.unread strong,.mail-row.unread strong{color:#071a36!important}
.mail-card,.message-card,.compose-card{border:1px solid var(--io-p-line)!important;border-radius:24px!important;background:rgba(255,255,255,.92)!important;box-shadow:var(--io-p-shadow)!important}
.gmail-folder-rail,.itnaone-folder-rail{background:rgba(247,250,255,.82)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.gmail-folder-rail a,.itnaone-folder-rail a{border-color:rgba(124,151,184,.18)!important;box-shadow:0 3px 12px rgba(55,83,118,.04)!important}
.gmail-folder-rail a.active,.itnaone-folder-rail a.active{background:linear-gradient(135deg,#d8e9ff,#e3f6ff)!important;color:#073269!important;border-color:rgba(37,99,235,.15)!important}

/* ---------- DRIVE ---------- */
.drive-kicker{color:#4475ae!important}
.drive-usage-card{background:linear-gradient(145deg,#ffffff,#f1f8ff)!important}
.drive-progress{height:9px!important;background:#e4edf8!important}
.drive-progress i{background:var(--io-p-gradient)!important;box-shadow:0 0 12px rgba(37,99,235,.30)}
.drive-tabs a.active{background:linear-gradient(135deg,#dcecff,#e5f8ff)!important;color:#0a3b75!important}
.drive-search{border-color:#d2deec!important;box-shadow:0 7px 22px rgba(41,72,111,.06)!important}
.drive-upload-button{background:linear-gradient(135deg,#cfeaff,#e0f8ff)!important;color:#06315d!important;box-shadow:0 8px 20px rgba(43,114,175,.11)!important}
.drive-list-card{overflow:hidden!important}
.drive-list-head{background:linear-gradient(180deg,#f9fbfe,#f2f7fd)!important;color:#65738a!important}
.drive-row{border-top-color:#edf2f8!important}
.drive-row:hover{background:#f5f9ff!important}
.drive-file-icon{background:linear-gradient(145deg,#edf5ff,#e6f8ff)!important;border:1px solid rgba(89,139,193,.10)!important}
.drive-plan-card.current{border-color:#65a1ed!important;box-shadow:0 0 0 3px rgba(37,99,235,.08),var(--io-p-shadow)!important}
.drive-plan-price{color:#0b57d0!important}
.drive-public-share{border-color:var(--io-p-line)!important;background:rgba(255,255,255,.94)!important;box-shadow:0 24px 70px rgba(31,61,102,.16)!important}

/* ---------- WALLET / PAYMENTS ---------- */
.wallet-balance-card{position:relative!important;overflow:hidden!important;background:linear-gradient(135deg,#0a4cb8 0%,#176ed9 48%,#07a6d4 100%)!important;color:#fff!important;border:0!important;box-shadow:0 18px 44px rgba(20,89,174,.25)!important}
.wallet-balance-card:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-60px;top:-95px;background:rgba(255,255,255,.10);box-shadow:-110px 140px 0 rgba(255,255,255,.045)}
.wallet-balance-card span,.wallet-balance-card small,.wallet-balance-card p{color:rgba(255,255,255,.78)!important}
.wallet-balance-card strong{color:#fff!important;letter-spacing:-.03em!important}
.wallet-gateway{background:linear-gradient(145deg,#fff,#f8fbff)!important}
.wallet-table-wrap{border:1px solid var(--io-p-line)!important;border-radius:18px!important;overflow:auto!important;background:#fff!important}
.wallet-table thead th{background:#f5f8fc!important;color:#607089!important}
.wallet-table tbody tr:hover{background:#f8fbff!important}

/* ---------- SECURITY / PASSKEY ---------- */
.security-card{background:linear-gradient(145deg,#fff,#f8fbff)!important}
.security-card h2,.security-card h3{color:#112744!important}
.security-score,.security-score-card{background:linear-gradient(135deg,#0b57d0,#1779dd,#0ca3cf)!important;color:#fff!important;border:0!important;box-shadow:0 18px 45px rgba(24,95,183,.22)!important}
.security-score *,.security-score-card *{color:inherit}
.passkey-device,.device-row,.security-row{border-color:#e5edf6!important;border-radius:15px!important}

/* ---------- PLANS ---------- */
.plan-grid,.plans-grid,.pricing-grid{gap:18px!important}
.plan-card,.pricing-card{border:1px solid var(--io-p-line)!important;border-radius:24px!important;background:rgba(255,255,255,.92)!important;box-shadow:var(--io-p-shadow)!important;transition:transform .18s ease,box-shadow .18s ease!important}
.plan-card:hover,.pricing-card:hover{transform:translateY(-3px);box-shadow:var(--io-p-shadow-hover)!important}
.plan-card.current,.pricing-card.current,.plan-card.featured,.pricing-card.featured{border-color:#71a9ee!important;box-shadow:0 0 0 3px rgba(37,99,235,.07),var(--io-p-shadow)!important}
.billing-toggle{background:rgba(237,244,253,.84)!important;border:1px solid rgba(121,151,185,.16)!important;border-radius:999px!important;padding:4px!important}
.billing-toggle a.active{background:#fff!important;color:#0b57d0!important;box-shadow:0 4px 13px rgba(48,78,115,.10)!important}

/* ---------- ADMIN ---------- */
.stats{gap:14px!important}
.stats>div{padding:18px!important;background:linear-gradient(145deg,#fff,#f7fbff)!important}
.stats>div span{color:#74829a!important;font-weight:700!important}
.stats>div strong{color:#0b2447!important;letter-spacing:-.025em!important}
.admin-form-card{padding:22px!important}
.admin-form-card h2{color:#10284a!important;letter-spacing:-.02em!important}
.admin-help-box{background:linear-gradient(145deg,#f7fbff,#f2f7fd)!important;border-color:#dce7f4!important}
.admin-suite table{background:#fff!important;border-radius:18px!important;overflow:hidden!important}

/* ---------- PUBLIC / LOGIN / REGISTER / RECOVERY ---------- */
body.public-ui-page,.itnaone-public-shell{background-image:radial-gradient(circle at 12% 7%,rgba(37,99,235,.12),transparent 28%),radial-gradient(circle at 88% 12%,rgba(8,169,217,.09),transparent 27%),linear-gradient(180deg,#f9fbff,#eef5fd)!important}
body.public-ui-page .auth-card,.auth-card{
  border:1px solid rgba(126,153,187,.20)!important;
  background:rgba(255,255,255,.91)!important;
  box-shadow:0 24px 70px rgba(35,65,103,.14)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important
}
body.public-ui-page .itnaone-login-brand img,.itnaone-login-brand img{box-shadow:0 9px 24px rgba(41,87,151,.17)!important}
body.public-ui-page .auth-card h1,.auth-card h1{color:#0b1f3a!important;letter-spacing:-.035em!important}
body.public-ui-page .primary,.auth-card .primary{background:var(--io-p-gradient)!important;box-shadow:0 10px 24px rgba(37,99,235,.22)!important}
body.public-ui-page .passkey,.auth-card .passkey{background:linear-gradient(135deg,#f6faff,#eff8ff)!important;border-color:#cbdff5!important}

/* ---------- bottom dock / mobile ---------- */
.itnaone-mobile-dock{
  background:rgba(255,255,255,.90)!important;border-top:1px solid rgba(122,149,181,.16)!important;
  box-shadow:0 -12px 34px rgba(38,70,106,.08)!important;backdrop-filter:blur(24px) saturate(150%)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important
}
.itnaone-mobile-dock a,.itnaone-mobile-dock button{color:#5d6b80!important}
.itnaone-mobile-dock .active,.itnaone-mobile-dock a.active{color:#0b57d0!important}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .admin-page-head,.wallet-hero-line,.drive-hero{border-radius:21px!important;padding:18px!important}
  .admin-form-card,.drive-panel,.drive-list-card,.drive-usage-card,.drive-plan-card,.wallet-panel,.wallet-balance-card,.wallet-gateway,.wallet-plan-card,.security-card{border-radius:19px!important}
  body.mail-ui-page .mail-center{border-radius:20px!important}
}
@media(max-width:600px){
  :root{--io-p-radius:18px}
  .content-pad,.platform-page{padding-left:12px!important;padding-right:12px!important}
  .admin-page-head,.wallet-hero-line,.drive-hero{padding:16px!important;border-radius:18px!important;box-shadow:0 7px 24px rgba(41,72,111,.07)!important}
  .admin-page-head h1,.drive-hero h1,.platform-page h1{font-size:27px!important}
  body.mail-ui-page .mail-grid.gmail-mail{padding:0 8px 84px!important}
  body.mail-ui-page .mail-center{border-left:0!important;border-right:0!important;border-radius:17px!important;box-shadow:0 6px 22px rgba(41,72,111,.06)!important}
  .drive-actions-bar{background:rgba(243,247,253,.90)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
  .wallet-balance-card{border-radius:22px!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.public-ui-page .auth-card,.auth-card{border-radius:24px!important;padding:28px 22px!important}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}