/*
 * iOS-inspired application shell.  This file intentionally sits after the
 * legacy template styles so every screen shares the same visual language
 * while their routes, forms, IDs, and JavaScript behaviour remain unchanged.
 */
:root {
  --primary: #0a84ff;
  --primary-dark: #0068d8;
  --primary-deeper: #001d3c;
  --primary-light: rgba(10, 132, 255, .16);
  --primary-glow: rgba(10, 132, 255, .28);
  --secondary: #64d2ff;
  --bg-body: #020b16;
  --bg-card: rgba(8, 28, 48, .82);
  --bg-sidebar: rgba(3, 15, 28, .90);
  --glass-border: rgba(108, 180, 255, .15);
  --glass-border-hover: rgba(81, 163, 255, .42);
  --text-primary: #f6f9ff;
  --text-secondary: #9eb4cc;
  --text-muted: #6e86a0;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, .32);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .38);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

body {
  background: radial-gradient(circle at 88% -12%, #0e3a64 0, transparent 32%),
    radial-gradient(circle at -8% 112%, #122a67 0, transparent 30%), #020b16;
  letter-spacing: -.01em;
}
body::before { background-image: linear-gradient(rgba(77, 142, 204, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 142, 204, .035) 1px, transparent 1px); background-size: 32px 32px; }
body::after { background: radial-gradient(circle, rgba(10, 132, 255, .13), transparent 67%); }

.sidebar { width: 270px; background: linear-gradient(180deg, rgba(4, 19, 35, .96), rgba(2, 12, 24, .94)); border-color: var(--glass-border); }
.sidebar-brand { padding: 25px 22px 20px; color: var(--text-primary); font-size: 1.03rem; border: 0; }
.sidebar-brand i { -webkit-text-fill-color: #ff3040; background: none; font-size: 1.35rem; }
.sidebar-user-card { margin: 0 12px 16px; padding: 13px; border: 1px solid var(--glass-border); border-radius: 16px; background: rgba(16, 49, 80, .48); }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #8d6bff, #4a91ff); color: white; font-weight: 700; }
.user-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.badge-admin { margin-top: 3px; color: #86c7ff; font-size: .62rem; }
.nav-section { padding-top: 2px; }
.nav-link { margin: 2px 8px; padding: 10px 13px; border-left: 0; border-radius: 10px; color: var(--text-secondary); }
.nav-link:hover { color: white; background: rgba(51, 136, 217, .11); }
.nav-link.active, .sidebar-item-active { color: #fff !important; background: linear-gradient(90deg, rgba(10,132,255,.23), rgba(10,132,255,.06)) !important; border-left: 0 !important; box-shadow: inset 2px 0 #0a84ff; }
.sidebar-signout { color: #ff9aa4; }

.main-content { margin-left: 270px; padding: 28px 34px 52px; }
.top-nav { min-height: 54px; display: flex; align-items: center; justify-content: space-between; margin: -6px 0 29px; color: var(--text-primary); }
.back-circle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 50%; color: #d7e9fa; cursor: pointer; background: rgba(12, 42, 70, .55); }
button.back-circle { padding: 0; appearance: none; }
.back-circle:hover, .back-circle:focus-visible { color: #fff; border-color: #4aa8ff; box-shadow: 0 0 0 3px rgba(10, 132, 255, .18); outline: none; }
.nav-pill-link { color: var(--text-secondary); text-decoration: none; font-size: .79rem; font-weight: 600; }
.nav-pill-link:hover { color: #fff; }
.user-pill-btn { padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: 11px; background: rgba(12, 42, 70, .55); color: var(--text-primary); text-decoration: none; font-size: .78rem; }

.am-card, .bento-card { background: linear-gradient(145deg, rgba(10, 36, 61, .90), rgba(4, 24, 43, .88)) !important; border-color: var(--glass-border) !important; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg) !important; }
.bento-card:hover, .am-card:hover { border-color: var(--glass-border-hover) !important; box-shadow: var(--shadow-md); }
.text-gradient { background: linear-gradient(135deg, #fff, #b9d8ff); -webkit-background-clip: text; }
.metric-icon { background: rgba(10, 132, 255, .14); }
.metric-icon i { background: none; -webkit-text-fill-color: #4eb0ff; }
.tag-success, .badge-primary { color: #83c4ff; background: rgba(10, 132, 255, .15); border-color: rgba(10, 132, 255, .28); }
.btn-brand { background: linear-gradient(135deg, #0a84ff, #0071e3); border-radius: 10px; }
.btn-brand-outline { color: #78bbff; border-color: #278ee9; border-radius: 10px; }
.btn-brand-outline:hover { background: #0a84ff; }
.form-control, .form-select { background: rgba(4, 24, 43, .82) !important; border-color: var(--glass-border) !important; color: var(--text-primary) !important; border-radius: 10px; }
.form-control::placeholder { color: #7190aa; }
.form-control:focus, .form-select:focus { background: rgba(7, 34, 58, .98) !important; border-color: #0a84ff !important; box-shadow: 0 0 0 3px rgba(10,132,255,.18) !important; }
.bg-dark { background-color: rgba(3, 21, 38, .86) !important; }
.text-white, .text-light { color: var(--text-primary) !important; }
.text-dark { color: var(--text-primary) !important; }
.border-secondary { border-color: var(--glass-border) !important; }
.table-dark { --bs-table-bg: transparent; }
.progress { background: rgba(96, 150, 203, .14); }
.progress-bar { background-color: #0a84ff !important; }

.mobile-bottom-nav { display: none; }
@media (max-width: 991px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.sidebar-open { overflow: hidden; }
  .main-content { margin-left: 0; padding: 18px 16px 28px; }
  .top-nav { margin: 0 0 22px; }
  .top-nav .nav-links-wrapper, .top-nav .btn-outline-danger { display: none !important; }
  .sidebar { width: min(84vw, 300px); }
  .mobile-bottom-nav { position: fixed; z-index: 1030; display: flex; justify-content: space-around; align-items: center; bottom: 0; left: 0; right: 0; min-height: 70px; padding: 5px max(12px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(3, 16, 29, .92); border-top: 1px solid var(--glass-border); backdrop-filter: blur(20px); }
  .mobile-bottom-nav a { min-width: 52px; display: grid; justify-items: center; gap: 3px; color: #7891aa; text-decoration: none; font-size: .59rem; }
  .mobile-bottom-nav i { font-size: 1rem; }
  .mobile-bottom-nav a.active { color: #0a84ff; }
  .bento-grid { gap: 14px !important; margin-bottom: 18px !important; }
  .bento-card, .am-card { padding: 18px !important; border-radius: 16px !important; }
  .dashboard-header { margin-bottom: 20px !important; }
  h1 { font-size: 1.65rem; }
}

/* Public pages (documentation, legal pages and marketing) use the same app
   surface rather than reverting to the former light website. */
.page-wrapper { min-height: 100vh; background: radial-gradient(circle at 95% 0, rgba(10,132,255,.17), transparent 30%), #020b16; }
.page-wrapper .top-nav { max-width: 1180px; width: calc(100% - 36px); margin: 0 auto; min-height: 76px; border-bottom: 1px solid var(--glass-border); }
.page-wrapper .nav-logo { color: #fff !important; text-decoration: none; font-weight: 800; }
.page-wrapper .nav-logo i { color: #ff3040; }
.page-wrapper .nav-links a, .page-wrapper .menu-link { color: var(--text-secondary) !important; }
.page-wrapper .nav-links a:hover, .page-wrapper .menu-link:hover { color: #fff !important; }
.content-container { color: var(--text-primary); }
.docs-sidebar, .endpoint-card, .arch-card, .document-container, .complete-card, .auth-frosted-card, .api-card, .identity-card { background: linear-gradient(145deg, rgba(10,36,61,.92), rgba(4,24,43,.88)) !important; border-color: var(--glass-border) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-sm) !important; border-radius: 18px !important; }
.docs-sidebar-title, .docs-nav-link, .document-section p, .document-section li, .arch-card p { color: var(--text-secondary) !important; }
.docs-nav-link.active { background: rgba(10,132,255,.18) !important; color: #fff !important; box-shadow: inset 2px 0 #0a84ff !important; }
.endpoint-card:hover, .arch-card:hover { background: linear-gradient(145deg, rgba(13,45,75,.97), rgba(4,24,43,.93)) !important; }
.endpoint-path, .param-name { color: #8dcaff !important; }
.param-table td, .param-table th { border-color: var(--glass-border) !important; color: var(--text-secondary) !important; }
.document-title, .document-section h2 { color: var(--text-primary) !important; }
.document-section h2::before { background: #0a84ff !important; }
.mobile-menu-card { background: #06182b !important; border-color: var(--glass-border) !important; }

/* Page-specific panels: these selectors cover the existing templates without
   touching the associated APIs, payment flow, profile form, or request code. */
.api-card, .response-box, .pricing-card, .amount-input-group, .link-sonic, .preset-box { border-color: var(--glass-border) !important; }
.response-box, .code-pre, .json-response, .code-box-wrapper { background: #031527 !important; color: #b9d8ff !important; border-color: var(--glass-border) !important; }
.profile-header { text-align: left !important; margin-bottom: 28px !important; }
.avatar-ring { width: 88px !important; height: 88px !important; margin: 0 0 16px !important; padding: 3px !important; background: linear-gradient(135deg, #8d6bff, #0a84ff) !important; }
.avatar-inner { background: #102d4b !important; color: #fff !important; }
.identity-card, .pricing-card { border-radius: 18px !important; }
.link-sonic { background: rgba(10,132,255,.08) !important; color: var(--text-primary) !important; }
.preset-box { background: rgba(10,132,255,.08) !important; border-radius: 14px !important; }
.preset-box.active { border-color: #0a84ff !important; background: rgba(10,132,255,.18) !important; }
.accordion-button, .accordion-body { background: transparent !important; color: var(--text-primary) !important; }
.accordion-button:not(.collapsed) { box-shadow: none !important; color: #83c4ff !important; }

/* Full-screen auth pages are intentionally compact and thumb-friendly. */
.login-page-wrapper { background: radial-gradient(circle at 80% 8%, rgba(10,132,255,.18), transparent 28%), #020b16 !important; padding: max(20px, env(safe-area-inset-top)) 20px 34px !important; }
.landing-hero-container { margin-top: 20px !important; }
.auth-frosted-card { max-width: 440px !important; padding: 28px !important; }
.google-sso-btn { background: rgba(7,34,58,.9) !important; color: #fff !important; border-color: var(--glass-border) !important; border-radius: 12px !important; }

@media (max-width: 767px) {
  .page-wrapper .top-nav { width: calc(100% - 28px); min-height: 62px; }
  .content-container { padding: 20px 14px !important; }
  .docs-grid { margin-top: 20px !important; }
  .endpoint-card, .document-container, .complete-card, .auth-frosted-card { padding: 20px !important; border-radius: 16px !important; }
  .document-title { font-size: 1.7rem !important; margin-bottom: 20px !important; }
  .billing-header, .playground-header { margin-bottom: 18px !important; }
}

/* Compact dashboard composition, modelled after the supplied iPhone console. */
.ios-page-header { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.ios-page-header h1 { margin:0; font-size:clamp(1.45rem, 3vw, 2rem); font-weight:800; letter-spacing:-.05em; }
.ios-page-header p:not(.eyebrow) { color:var(--text-secondary); margin:4px 0 0; font-size:.88rem; }
.ios-brand-mark { width:42px; height:42px; border-radius:13px; background:#ff1f3d; display:grid; place-items:center; color:#fff; font-size:1.2rem; box-shadow:0 8px 18px rgba(255,31,61,.24); }
.eyebrow { margin:0 0 4px; color:#69b9ff; font-size:.64rem; font-weight:800; letter-spacing:.12em; }
.ios-dashboard-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; max-width:1180px; }
.ios-hero-card, .ios-stat-card, .ios-panel { background:linear-gradient(145deg, rgba(10,36,61,.94), rgba(4,24,43,.91)); border:1px solid var(--glass-border); border-radius:18px; box-shadow:var(--shadow-sm); }
.ios-hero-card { grid-column:span 12; padding:25px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:radial-gradient(circle at 88% 0, rgba(10,132,255,.27), transparent 34%), linear-gradient(145deg, rgba(12,45,76,.98), rgba(4,24,43,.93)); }
.ios-hero-card h2 { font-size:1.3rem; margin:10px 0 5px; font-weight:800; }.ios-hero-card p { color:var(--text-secondary); margin:0; max-width:590px; font-size:.9rem; }
.ios-status { color:#64e6a2; font-size:.68rem; font-weight:700; }.ios-status i { font-size:.45rem; margin-right:4px; }
.ios-stat-card { grid-column:span 3; padding:17px; min-height:145px; position:relative; display:flex; flex-direction:column; }.ios-stat-card>span { color:var(--text-secondary); font-size:.75rem; margin-top:auto; }.ios-stat-card strong { font-size:1.55rem; line-height:1.25; }.ios-stat-card small { color:#7f9bb6; font-size:.68rem; }.ios-stat-card a { color:#77bdff; text-decoration:none; font-size:.7rem; margin-top:3px; }
.ios-stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:#117ef1; margin-bottom:14px; }.ios-stat-quota .ios-stat-icon { background:#7856d9; }.ios-stat-balance .ios-stat-icon { background:#ffad13; }
.ios-panel { padding:20px; }.ios-key-panel { grid-column:span 5; }.ios-actions-panel { grid-column:span 4; }.ios-usage-panel { grid-column:span 3; }.ios-panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.ios-panel-heading h3 { margin:0; font-size:1rem; font-weight:750; }.ios-panel-heading>a { color:#78bbff; font-size:.72rem; text-decoration:none; }
.ios-key-value { display:flex; align-items:center; min-height:48px; padding:0 9px 0 13px; border-radius:11px; background:#031527; border:1px solid var(--glass-border); }.ios-key-value code { flex:1; color:#c5ddf5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }.ios-key-actions { display:flex; gap:8px; margin-top:12px; }.ios-key-actions .btn:first-child { flex:1; }.ios-danger-button { color:#ff8793; border:1px solid rgba(255,91,107,.35); background:rgba(255,91,107,.1); }
.ios-list-row { display:flex; align-items:center; gap:12px; padding:10px 0; color:var(--text-primary); text-decoration:none; border-bottom:1px solid rgba(108,180,255,.09); }.ios-list-row:last-child{border:0}.ios-list-row>span:nth-child(2){display:grid;gap:2px;flex:1;font-size:.78rem}.ios-list-row small{color:var(--text-secondary);font-size:.65rem}.ios-list-row>i{color:#7891aa;font-size:.7rem}.ios-list-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px}.ios-list-icon.blue{color:#76bdff;background:rgba(10,132,255,.16)}.ios-list-icon.purple{color:#c3a6ff;background:rgba(128,91,220,.16)}.ios-list-icon.green{color:#6ae0a5;background:rgba(43,200,128,.14)}
.ios-chart { height:108px; display:flex; align-items:end; gap:7px; padding:9px 2px; border-bottom:1px solid var(--glass-border); background:repeating-linear-gradient(0deg, transparent 0 26px, rgba(108,180,255,.08) 27px); }.ios-chart span { flex:1; min-width:7px; border-radius:8px 8px 2px 2px; background:linear-gradient(#2ba2ff,#0869d5); box-shadow:0 0 11px rgba(10,132,255,.28); }.ios-chart-labels{display:flex;justify-content:space-between;color:#7591ab;font-size:.6rem;margin-top:7px}.logic-hooks{display:none!important}
@media (max-width:991px){.ios-dashboard-grid{gap:12px}.ios-stat-card{grid-column:span 6;min-height:125px}.ios-key-panel,.ios-actions-panel,.ios-usage-panel{grid-column:span 12}.ios-hero-card{padding:20px}.ios-hero-card{align-items:flex-start;flex-direction:column}.ios-hero-card .btn{width:100%}}

/* Documentation and About now use the same native-size list pattern shown in
   the mobile reference. */
.ios-screen-heading{display:flex;align-items:center;gap:13px;margin:2px 0 18px}.ios-screen-heading h1{font-size:1.1rem;margin:0;font-weight:750}.ios-screen-heading p{margin:3px 0 0;color:var(--text-secondary);font-size:.72rem}.ios-back{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#fff;text-decoration:none;background:rgba(10,132,255,.09);border:1px solid var(--glass-border)}.ios-search{height:42px;display:flex;align-items:center;gap:9px;padding:0 13px;margin-bottom:14px;background:#06213a;border:1px solid rgba(84,166,244,.22);border-radius:11px;color:#9eb4cc}.ios-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:.74rem}.ios-doc-list{background:linear-gradient(145deg,rgba(9,34,57,.89),rgba(4,23,41,.9));border:1px solid var(--glass-border);border-radius:15px;padding:0 13px}.ios-doc-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(108,180,255,.1);text-decoration:none;color:#fff}.ios-doc-row:last-child{border-bottom:0}.ios-doc-row>span:nth-child(2){display:grid;gap:2px;flex:1;font-size:.77rem}.ios-doc-row small{color:var(--text-secondary);font-size:.64rem}.ios-doc-row>i{font-size:.66rem;color:#a6b9ca}.ios-list-icon.red{color:#ff8995;background:rgba(255,70,85,.18)}.ios-doc-content{display:grid;gap:12px;margin-top:18px}.ios-doc-content article{padding:17px;background:rgba(7,29,50,.72);border:1px solid var(--glass-border);border-radius:14px;scroll-margin-top:20px}.ios-doc-content h2{font-size:.94rem;margin:0 0 7px}.ios-doc-content p{margin:0;color:var(--text-secondary);font-size:.76rem;line-height:1.6}.ios-doc-content pre{margin:0;white-space:pre-wrap;color:#8cccff;font-size:.7rem}.ios-about{text-align:center;max-width:420px;margin:42px auto 28px}.ios-youtube-logo{width:48px;height:34px;background:#ff1d2f;border-radius:9px;display:grid;place-items:center;color:white;font-size:1.25rem;margin:0 auto 20px}.ios-about h2{font-size:1.25rem;margin:0}.ios-subtitle{color:#b6cbe0!important;margin:3px 0 20px!important}.ios-about p{color:var(--text-secondary);font-size:.78rem;line-height:1.65}.ios-about-links{max-width:480px;margin:auto}

/* Existing screen-specific template classes are normalised into the phone UI
   rather than allowing their legacy large desktop card rules to leak through. */
.billing-header,.playground-header{margin-bottom:18px!important}.billing-header h1,.playground-header h1{font-size:1.35rem!important}.bento-grid{gap:14px!important}.bento-card{padding:20px!important;border-radius:16px!important}.key-input-group{background:#031527!important;border-color:var(--glass-border)!important;border-radius:11px!important}.amount-input-group{background:#031527!important}.pricing-card{background:rgba(10,132,255,.08)!important}.profile-header h1{font-size:1.35rem!important}.profile-header .avatar-ring{margin:0 auto 15px!important}.profile-header{text-align:center!important}.preset-box{width:46px!important;height:46px!important;font-size:1.35rem!important}.btn-primary-luxe{background:linear-gradient(135deg,#0a84ff,#0071e3)!important;border-radius:10px!important}.complete-card{margin:20px auto!important}.document-container{background:linear-gradient(145deg,rgba(10,36,61,.92),rgba(4,24,43,.88))!important;border-color:var(--glass-border)!important}.document-container *{color:inherit!important}.document-container p,.document-container li{color:var(--text-secondary)!important}
.ios-profile-summary{display:flex;align-items:center;gap:14px;margin:25px 0 18px}.ios-profile-avatar{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8c70ff,#579cff);font-size:1.2rem;color:#fff}.ios-profile-summary h2{font-size:1rem;margin:0}.ios-profile-summary p{font-size:.7rem;color:var(--text-secondary);margin:4px 0 0}.ios-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 0;margin-bottom:17px;background:rgba(7,30,51,.72);border-radius:14px;border:1px solid var(--glass-border)}.ios-profile-stats>div{text-align:center;border-right:1px solid rgba(108,180,255,.1)}.ios-profile-stats>div:last-child{border:0}.ios-profile-stats strong{display:block;font-size:1rem}.ios-profile-stats span{display:block;margin-top:3px;color:var(--text-secondary);font-size:.6rem}.ios-profile-menu{max-width:620px}
.profile-photo-wrap { position: relative; flex: 0 0 auto; }.ios-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }.profile-photo-button { position: absolute; right: -20px; bottom: -6px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #0a84ff; color: #fff; font-size: .61rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 12px rgba(10,132,255,.32); }.profile-photo-help { display: block; margin-top: 5px; color: var(--text-muted); font-size: .62rem; }.profile-logout b, .profile-logout > i { color: #ff9aa4; }

/* Every route uses the same native phone language, including the admin,
   settings, payment, request history, and recovery screens.  These rules are
   deliberately class-based so existing forms and JavaScript contracts remain
   intact while legacy Bootstrap layouts become compact app surfaces. */
.container, .container-fluid { max-width: 860px; }
.row > [class*="col-"] { min-width: 0; }
.card, .accordion-item, .alert, .list-group-item {
  color: var(--text-primary) !important;
  background: linear-gradient(145deg, rgba(10,36,61,.90), rgba(4,24,43,.88)) !important;
  border-color: var(--glass-border) !important;
  border-radius: 16px !important;
}
.card-header, .card-footer { background: rgba(7,29,50,.58) !important; border-color: var(--glass-border) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--glass-border); color: var(--text-primary) !important; }
.table > :not(caption) > * > * { color: inherit !important; border-bottom-color: var(--glass-border) !important; }
.table-responsive { border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(3,21,39,.55); }
.form-label, label, .form-text, .text-secondary, .text-muted { color: var(--text-secondary) !important; }
.input-group-text { color: #a8c9e8 !important; background: #031527 !important; border-color: var(--glass-border) !important; }
.btn { border-radius: 11px; font-weight: 700; }
.btn-primary, .btn-success, .btn-setup, .btn-auth, .menu-btn-primary { color: #fff !important; background: linear-gradient(135deg, #0a84ff, #006edb) !important; border-color: transparent !important; box-shadow: 0 7px 18px rgba(10,132,255,.20); }
.btn-outline-primary, .btn-outline-secondary { color: #86c7ff !important; border-color: rgba(87,166,244,.42) !important; background: rgba(10,132,255,.07) !important; }
.btn-danger, .btn-outline-danger { color: #ff9ba6 !important; border-color: rgba(255,106,120,.35) !important; background: rgba(255,86,103,.08) !important; }
.modal-content { background: #071d34 !important; color: var(--text-primary) !important; border-color: var(--glass-border) !important; border-radius: 20px !important; }
.modal-header, .modal-footer { border-color: var(--glass-border) !important; }
.dropdown-menu { background: #09213a; border-color: var(--glass-border); border-radius: 14px; }
.dropdown-item { color: var(--text-primary); }.dropdown-item:hover { background: rgba(10,132,255,.16); color: #fff; }

/* Dedicated utility screens retain their security/setup flow but now open as
   a native dark iOS sheet instead of the legacy light web page. */
.ios-utility-screen {
  min-height: 100dvh !important;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: grid !important;
  place-items: center;
  overflow: auto !important;
  color: var(--text-primary) !important;
  background: radial-gradient(circle at 82% 0, rgba(10,132,255,.25), transparent 32%), #020b16 !important;
}
.ios-utility-screen::before, .ios-utility-screen::after { display: none !important; }
.ios-utility-card, .gate-container, .login-card, .setup-card {
  width: min(100%, 440px) !important;
  margin: 0 auto !important;
  padding: 28px 22px !important;
  color: var(--text-primary) !important;
  background: linear-gradient(145deg, rgba(12,42,70,.97), rgba(4,23,42,.96)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.38) !important;
}
.ios-utility-card::before { background: linear-gradient(90deg, transparent, #0a84ff, transparent) !important; }
.ios-utility-card h1, .ios-utility-card h2, .ios-utility-card h3, .ios-utility-card h4, .ios-utility-card h5, .ios-utility-card h6, .ios-utility-card p, .ios-utility-card .message { color: var(--text-primary) !important; }
.ios-utility-card .text-muted, .ios-utility-card .footer-note { color: var(--text-secondary) !important; }
.ios-utility-card .brand i, .ios-utility-card .warning-icon { color: #70baff !important; background: none !important; -webkit-text-fill-color: #70baff !important; }
.ios-utility-card code, .ios-utility-card pre { color: #a8d3ff !important; background: #031527 !important; border-color: var(--glass-border) !important; }
.ios-utility-card .alert-info { color: #c5e3ff !important; background: rgba(10,132,255,.11) !important; border-color: rgba(10,132,255,.25) !important; }
.ios-utility-card .alert-warning { color: #ffb1b9 !important; background: rgba(255,83,101,.10) !important; border-color: rgba(255,83,101,.25) !important; }

@media (max-width: 575px) {
  .ios-utility-card, .gate-container, .login-card, .setup-card { padding: 24px 18px !important; border-radius: 20px !important; }
  .ios-utility-card .btn, .ios-utility-card .btn-auth { min-height: 46px; }
  .am-card .row, .bento-card .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  .table-responsive { font-size: .78rem; }
  .nav-tabs { overflow-x: auto; flex-wrap: nowrap; border-color: var(--glass-border); }
  .nav-tabs .nav-link { white-space: nowrap; color: var(--text-secondary); border-radius: 10px 10px 0 0; }
  .nav-tabs .nav-link.active { background: rgba(10,132,255,.14); border-color: var(--glass-border); color: #fff; }
}

/* The sign-in route is a focused iPhone welcome screen rather than a desktop
   marketing page.  Authentication element IDs remain untouched. */
.login-page-wrapper { min-height: 100dvh; color: var(--text-primary); }
.login-only-page .system-status-badge, .login-only-page .main-headline, .login-only-page .sub-tagline, .login-only-page .ambient-waveform, .login-only-page .cyber-log-console, .login-only-page .showcase-grid, .login-only-page .landing-footer-wrapper { display: none !important; }
.login-only-page .landing-hero-container { min-height: calc(100dvh - 100px); justify-content: center; margin-top: 0 !important; }
.login-only-page .auth-frosted-card { margin-bottom: 0 !important; }

/* Homepage: a focused editorial landing experience. */
.home-page { min-height: 100dvh; overflow: hidden; padding: 26px clamp(20px, 5vw, 72px) 22px; color: #f7fbff; background: #030b17; position: relative; }
.home-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: linear-gradient(rgba(120,180,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,255,.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.home-nav, .home-main, .home-feature-row, .home-footer { max-width: 1260px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }.home-nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }.home-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1rem; font-weight: 800; letter-spacing: -.04em; }.home-brand-icon { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; border-radius: 10px; background: #ff233e; box-shadow: 0 8px 22px rgba(255,35,62,.32); }.home-nav-links { display: flex; gap: clamp(16px, 2.6vw, 34px); }.home-nav-links a { color: #93a8c1; text-decoration: none; font-size: .76rem; font-weight: 650; }.home-nav-links a:hover { color: #fff; }.home-login-button, .home-primary-action, .home-secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: .78rem; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease; }.home-login-button { padding: 10px 15px; color: #fff; border-radius: 11px; background: rgba(255,255,255,.1); border: 1px solid rgba(190,220,255,.17); }.home-login-button:hover, .home-primary-action:hover, .home-secondary-action:hover { color: #fff; transform: translateY(-2px); }.home-nav-actions { display: flex; align-items: center; gap: 10px; }.home-account { color: #b9cae0; font-size: .73rem; text-decoration: none; }.home-main { min-height: min(650px, calc(100dvh - 205px)); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(36px, 8vw, 125px); padding: 68px clamp(0px, 2vw, 28px) 42px; }.home-hero { position: relative; z-index: 2; }.home-eyebrow { display: flex; align-items: center; gap: 8px; color: #6dbbff; font-size: .65rem; font-weight: 850; letter-spacing: .14em; }.home-eyebrow span, .home-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4df0ad; box-shadow: 0 0 0 5px rgba(77,240,173,.11); }.home-hero h1 { margin: 18px 0; max-width: 670px; font-size: clamp(3.1rem, 6vw, 5.75rem); line-height: .93; letter-spacing: -.085em; font-weight: 850; }.home-hero h1 em { color: #74bfff; font-style: normal; }.home-hero > p { max-width: 510px; margin: 0; color: #9fb2c8; font-size: clamp(.9rem, 1.5vw, 1.07rem); line-height: 1.7; }.home-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }.home-primary-action { padding: 14px 20px; color: #fff; border-radius: 13px; background: linear-gradient(135deg, #0c8cff, #0963d8); box-shadow: 0 12px 28px rgba(10,132,255,.27); }.home-secondary-action { padding: 13px 19px; color: #c8d7e7; border: 1px solid rgba(156,198,242,.19); border-radius: 13px; background: rgba(255,255,255,.04); }.home-trust { display: flex; align-items: center; gap: 13px; margin-top: 33px; }.home-avatars { display: flex; }.home-avatars span { width: 28px; height: 28px; display: grid; place-items: center; margin-left: -6px; border: 2px solid #081629; border-radius: 50%; color: #fff; font-size: .7rem; background: linear-gradient(135deg, #ff4e64, #805dff); }.home-avatars span:first-child { margin-left: 0; background: #0e94f6; }.home-avatars span:last-child { background: #f4a51d; }.home-trust p { margin: 0; color: #7f95ae; font-size: .67rem; line-height: 1.5; }.home-trust strong { color: #d7e5f4; font-weight: 700; }.home-player-card { width: min(100%, 415px); justify-self: end; padding: 16px; border: 1px solid rgba(146,197,255,.22); border-radius: 25px; background: linear-gradient(145deg, rgba(17,51,83,.86), rgba(4,20,38,.96)); box-shadow: 0 32px 80px rgba(0,0,0,.45); transform: rotate(3deg); }.home-player-top { display: flex; align-items: center; gap: 8px; padding: 3px 2px 14px; color: #8ba3bd; font-size: .6rem; font-weight: 800; letter-spacing: .11em; }.home-player-top button { margin-left: auto; border: 0; color: #a4b6ca; background: transparent; }.home-art { height: 292px; display: grid; place-items: center; overflow: hidden; position: relative; border-radius: 17px; background: radial-gradient(circle at 28% 20%, #f45c74, transparent 36%), radial-gradient(circle at 82% 87%, #5d55e7, transparent 44%), #172a55; }.home-art > i { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; padding-left: 4px; border-radius: 50%; background: rgba(255,255,255,.94); color: #144a82; font-size: 1.55rem; box-shadow: 0 15px 35px rgba(0,0,0,.25); }.home-art-glow { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.06), 0 0 0 61px rgba(255,255,255,.04); }.home-wave { position: absolute; display: flex; bottom: 23px; left: 25px; right: 25px; align-items: center; justify-content: space-between; height: 42px; }.home-wave b { display: block; width: 4px; border-radius: 20px; background: rgba(255,255,255,.75); }.home-wave b:nth-child(1){height:12px}.home-wave b:nth-child(2){height:28px}.home-wave b:nth-child(3){height:18px}.home-wave b:nth-child(4){height:39px}.home-wave b:nth-child(5){height:25px}.home-wave b:nth-child(6){height:34px}.home-wave b:nth-child(7){height:16px}.home-wave b:nth-child(8){height:29px}.home-track { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 4px 12px; }.home-track h2 { margin: 0 0 5px; font-size: .93rem; letter-spacing: -.03em; }.home-track p, .home-times { margin: 0; color: #88a0ba; font-size: .65rem; }.home-round-play { width: 37px; height: 37px; padding-left: 2px; border: 0; border-radius: 50%; color: #fff; background: #0a84ff; }.home-progress { height: 4px; overflow: hidden; border-radius: 20px; background: #173550; }.home-progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: #62b8ff; }.home-times { display: flex; justify-content: space-between; padding: 7px 1px 0; }.home-orb { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; }.home-orb-one { width: 410px; height: 410px; top: 1%; left: 31%; background: rgba(26,109,210,.17); }.home-orb-two { width: 310px; height: 310px; right: 0; bottom: 8%; background: rgba(159,60,176,.14); }.home-feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.home-feature { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(133,184,235,.14); border-radius: 14px; color: #fff; text-decoration: none; background: rgba(12,35,58,.58); }.home-feature:hover { color: #fff; border-color: rgba(110,188,255,.44); background: rgba(17,47,77,.88); }.home-feature-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }.home-feature-icon.red { color: #ff9aa7; background: rgba(255,68,90,.16); }.home-feature-icon.blue { color: #81c7ff; background: rgba(10,132,255,.15); }.home-feature-icon.purple { color: #c7adff; background: rgba(132,90,255,.15); }.home-feature > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }.home-feature b { font-size: .73rem; }.home-feature small { color: #89a2bb; font-size: .62rem; }.home-feature > i { color: #6f8da9; font-size: .65rem; }.home-footer { display: flex; justify-content: space-between; padding: 24px 2px 0; color: #607a94; font-size: .62rem; }
@media (max-width: 820px) { .home-page { padding: 19px 17px 20px; }.home-nav-links { display: none; }.home-main { min-height: 0; grid-template-columns: 1fr; gap: 40px; padding: 60px 6px 34px; }.home-hero { text-align: center; }.home-eyebrow, .home-hero-actions, .home-trust { justify-content: center; }.home-hero h1 { font-size: clamp(3.1rem, 15vw, 4.7rem); }.home-hero > p { margin: 0 auto; }.home-player-card { justify-self: center; width: min(100%, 390px); transform: none; }.home-feature-row { grid-template-columns: 1fr; }.home-footer { padding-top: 18px; }.home-account { display: none; } }

/* ─── iOS 3D app finish ──────────────────────────────────────────────── */
:root { --ios-panel-top: rgba(22, 60, 96, .82); --ios-panel-bottom: rgba(4, 21, 39, .94); --ios-edge: rgba(159, 213, 255, .18); --ios-highlight: rgba(255,255,255,.12); --ios-depth: 0 28px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1); }
body { background: radial-gradient(ellipse at 10% -5%, rgba(38,115,220,.29), transparent 34%), radial-gradient(ellipse at 95% 105%, rgba(119,57,211,.21), transparent 37%), #020914; }
body::before { opacity: .68; background-image: radial-gradient(circle, rgba(153,205,255,.09) 1px, transparent 1px); background-size: 30px 30px; }
.sidebar { top: 14px; left: 14px; height: calc(100dvh - 28px); width: 258px; overflow: hidden; border: 1px solid var(--ios-edge); border-radius: 25px; background: linear-gradient(155deg, rgba(17,52,83,.91), rgba(3,18,35,.96)); box-shadow: var(--ios-depth); }
.sidebar::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.09), transparent 19%, transparent 72%, rgba(84,173,255,.07)); }
.sidebar-brand, .sidebar-user-card, .nav-section, .sidebar > div { position: relative; z-index: 1; }.sidebar-brand { padding: 24px 21px 19px; letter-spacing: -.035em; }.sidebar-user-card { background: linear-gradient(135deg, rgba(36,89,135,.58), rgba(7,31,54,.64)); border-color: rgba(157,208,255,.19); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 9px 22px rgba(0,0,0,.13); }.nav-link { min-height: 42px; border: 1px solid transparent; }.nav-link:hover { border-color: rgba(136,201,255,.15); background: linear-gradient(90deg, rgba(42,139,236,.2), rgba(42,139,236,.03)); }.nav-link.active, .sidebar-item-active { box-shadow: inset 2px 0 #56b5ff, inset 0 1px 0 rgba(255,255,255,.1), 0 7px 14px rgba(0,0,0,.12); }
.main-content { margin-left: 286px; padding: 27px 36px 62px; }.top-nav { min-height: 62px; margin: 0 0 29px; padding: 0 16px; border: 1px solid var(--ios-edge); border-radius: 18px; background: rgba(6,27,48,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 13px 32px rgba(0,0,0,.14); backdrop-filter: blur(24px) saturate(1.3); }.back-circle, .user-pill-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 12px rgba(0,0,0,.18); }.back-circle:hover { transform: translateY(-1px); }
.am-card, .bento-card, .ios-panel, .ios-stat-card, .ios-hero-card, .api-card, .identity-card, .pricing-card, .document-container, .endpoint-card, .arch-card, .complete-card, .auth-frosted-card { position: relative; border-color: var(--ios-edge) !important; background: linear-gradient(145deg, var(--ios-panel-top), var(--ios-panel-bottom)) !important; box-shadow: var(--ios-depth) !important; }
.am-card::after, .bento-card::after, .ios-panel::after, .ios-stat-card::after, .api-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(130deg, rgba(255,255,255,.09), transparent 22%, transparent 72%, rgba(41,145,255,.07)); }
.am-card > *, .bento-card > *, .ios-panel > *, .ios-stat-card > *, .api-card > * { position: relative; z-index: 1; }.am-card:hover, .bento-card:hover, .ios-panel:hover, .ios-stat-card:hover, .api-card:hover { transform: translateY(-4px) scale(1.005); border-color: rgba(120,199,255,.4) !important; }
.btn-brand, .btn-primary-luxe, .portal-go-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 12px 24px rgba(0,112,227,.27); }.btn-brand:active, .btn-primary-luxe:active, .portal-go-btn:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 6px rgba(0,0,0,.2); }
.ios-brand-mark, .ios-stat-icon, .ios-list-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.2); }.ios-dashboard-grid, .yt-layout { perspective: 1100px; }.ios-hero-card { overflow: hidden; }.ios-hero-card::after { content: ''; position: absolute; width: 260px; height: 260px; right: -60px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(109,192,255,.27), transparent 69%); }.ios-hero-card > * { position: relative; z-index: 1; }
.form-control, .form-select { box-shadow: inset 0 2px 8px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04); }.form-control:focus, .form-select:focus { transform: translateY(-1px); }
@media (max-width: 991px) { .sidebar { top: 10px; left: 10px; height: calc(100dvh - 20px); border-radius: 22px; }.main-content { margin-left: 0; padding: 16px 15px 98px; }.top-nav { margin-bottom: 20px; }.mobile-bottom-nav { left: 10px; right: 10px; bottom: calc(9px + env(safe-area-inset-bottom)); border: 1px solid var(--ios-edge); border-radius: 20px; box-shadow: var(--ios-depth); }.mobile-bottom-nav a.active { text-shadow: 0 0 14px rgba(91,184,255,.72); }.mobile-bottom-nav a.active i { transform: translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) { .ios-brand-mark, .home-brand-icon { animation: iosBreathe 4.5s ease-in-out infinite; }.home-player-card { animation: iosFloat 6s ease-in-out infinite; } @keyframes iosBreathe { 50% { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10,132,255,.27); } } @keyframes iosFloat { 50% { transform: rotate(1.5deg) translateY(-7px); } } }
.landing-nav-header { padding-top: max(18px, env(safe-area-inset-top)) !important; }
.brand-logo-link i { color: #ff3040 !important; }
.system-status-badge { color: #79deb0 !important; background: rgba(55,210,133,.10) !important; border-color: rgba(55,210,133,.22) !important; }
.auth-frosted-card { background: linear-gradient(145deg, rgba(12,42,70,.96), rgba(4,23,42,.94)) !important; }
.auth-tabs { background: rgba(3,21,39,.72) !important; border-color: var(--glass-border) !important; }
.auth-tab-btn { color: var(--text-secondary) !important; }.auth-tab-btn.active { color: #fff !important; background: #0a84ff !important; }
.card-header-title, .portal-user-title { color: var(--text-primary) !important; }
.card-header-desc, .portal-user-sub { color: var(--text-secondary) !important; }
.portal-go-btn { background: linear-gradient(135deg, #0a84ff, #006edb) !important; color: #fff !important; border-radius: 13px !important; }
.portal-logout-btn { color: #ff9ba6 !important; border-color: rgba(255,106,120,.3) !important; }
.auth-separator .bg-white { background: #09213a !important; color: var(--text-secondary) !important; }
.showcase-card, .cyber-log-console { background: linear-gradient(145deg, rgba(10,36,61,.90), rgba(4,24,43,.88)) !important; border-color: var(--glass-border) !important; }
.showcase-card h4, .console-title { color: var(--text-primary) !important; }.showcase-card p { color: var(--text-secondary) !important; }
@media (max-width: 767px) {
  .login-page-wrapper { padding: 0 16px 28px !important; background: radial-gradient(circle at 82% 0, rgba(10,132,255,.24), transparent 27%), #020b16 !important; }
  .landing-nav-header { padding: max(18px, env(safe-area-inset-top)) 2px 18px !important; }
  .brand-logo-link { font-size: 1.02rem !important; }.nav-links-menu { display: none !important; }
  .landing-hero-container { max-width: 430px; margin: 0 auto !important; padding: 20px 0 0 !important; }
  .system-status-badge { margin: 0 auto 18px !important; font-size: .67rem !important; }
  .main-headline { margin: 0 auto 12px !important; max-width: 340px; font-size: 2.05rem !important; line-height: 1.08 !important; letter-spacing: -.06em !important; }
  .sub-tagline { max-width: 340px !important; font-size: .88rem !important; line-height: 1.55 !important; }
  .ambient-waveform, .premium-bg-orb, .cyber-log-console { display: none !important; }
  .auth-frosted-card { margin: 24px 0 0 !important; padding: 22px 18px !important; border-radius: 22px !important; }
  .auth-tab-btn { padding: 10px 8px !important; font-size: .78rem !important; }
  .portal-go-btn, .google-sso-btn { min-height: 50px !important; }
  .showcase-grid { grid-template-columns: 1fr !important; gap: 10px !important; max-width: 430px; margin: 16px auto 0 !important; }
  .showcase-card { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; padding: 14px !important; border-radius: 16px !important; text-align: left !important; }
  .showcase-icon-box { grid-row: span 2; width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: 11px !important; }
  .showcase-card h4 { margin: 0 !important; font-size: .78rem !important; }.showcase-card p { margin: 3px 0 0 !important; font-size: .67rem !important; line-height: 1.45 !important; }
  .landing-footer-wrapper { margin: 20px 0 0 !important; padding: 0 0 calc(12px + env(safe-area-inset-bottom)) !important; font-size: .63rem !important; }
}