/* AutoSchools V2.0.5 — role-aware premium Mini App redesign. */
:root {
  --as-blue: #1677ff;
  --as-blue-bright: #42a5ff;
  --as-cyan: #62d3ff;
  --as-navy: #061127;
  --as-panel: rgba(7, 20, 45, .86);
  --as-panel-soft: rgba(9, 24, 52, .72);
  --as-line: rgba(139, 187, 255, .28);
  --as-line-hot: rgba(78, 160, 255, .62);
  --as-glow: 0 0 34px rgba(22, 119, 255, .24);
  --bottom-nav-height: 86px;
}

body {
  background-color: #010613;
  background-image:
    radial-gradient(circle at 50% -8%, rgba(24, 98, 214, .25), transparent 30rem),
    linear-gradient(180deg, rgba(2, 8, 22, .92), rgba(1, 5, 14, .98)),
    url("../autoschools-bg.jpg?v=20260824-v205");
  background-size: cover, cover, cover;
}
body::before {
  background:
    radial-gradient(circle at 50% 18%, rgba(20, 110, 255, .15), transparent 24rem),
    linear-gradient(180deg, rgba(2, 8, 22, .46), rgba(1, 5, 14, .82));
}
body::after { background: linear-gradient(180deg, rgba(4, 13, 31, .04), rgba(0, 5, 15, .58)); }

.app { width: min(100%, 570px); padding-inline: 16px; padding-top: calc(8px + env(safe-area-inset-top)); }
.section { animation: asViewIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes asViewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.as-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* App chrome */
.topbar.as-topbar {
  position: relative; top: auto; margin: 0 0 12px; min-height: 62px; padding: 6px 2px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
}
.topbar-center { text-align: center; min-width: 0; }
.topbar-center strong { display: block; font-size: 25px; line-height: 1.05; letter-spacing: -.55px; color: #fff; }
.topbar-center small { display: block; margin-top: 4px; color: rgba(226,237,255,.58); font-size: 13px; letter-spacing: .1px; }
.topbar-action {
  width: 46px; height: 46px; border: 1px solid rgba(122,174,255,.23); border-radius: 14px;
  color: rgba(231,241,255,.82); background: linear-gradient(180deg, rgba(17,38,77,.74), rgba(5,14,31,.76));
  display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.18);
}
.topbar-action svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topbar-menu-lines { width: 21px; display: grid; gap: 5px; }
.topbar-menu-lines i { height: 1.5px; width: 100%; border-radius: 5px; background: currentColor; display: block; }
.topbar-notifications { position: relative; }
.topbar-notifications .notify-dot { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #176cff; color: white; border: 2px solid #030817; font-size: 11px; line-height: 16px; font-weight: 750; }

.brand-rail {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 22px; border: 1px solid rgba(130,179,255,.25);
  background: linear-gradient(145deg, rgba(11,31,68,.86), rgba(4,13,30,.78)); box-shadow: 0 18px 46px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.045);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 6;
}
.brand-rail .brand { flex: 1 1 auto; min-width: 0; }
.brand-rail .topbar-logo { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(53,153,255,.55); box-shadow: 0 0 22px rgba(0,120,255,.18); }
.brand-rail .brand-copy .eyebrow { color: rgba(215,228,250,.62); font-size: 12px; }
.brand-rail .brand-copy h1 { font-size: 25px; letter-spacing: -.55px; }
.brand-rail .language-trigger { min-width: 64px; height: 48px; border-radius: 15px; border: 1px solid rgba(126,178,255,.28); background: rgba(7,18,39,.78); font-weight: 750; }
.language-caret { margin-left: 4px; color: rgba(220,233,255,.55); }

/* Role hero */
.role-hero {
  position: relative; overflow: hidden; padding: 22px 18px 17px; border-radius: 28px;
  border: 1px solid rgba(119,176,255,.34); background:
    radial-gradient(circle at 84% 24%, rgba(19,108,255,.19), transparent 15rem),
    linear-gradient(145deg, rgba(13,34,72,.92), rgba(3,13,31,.92));
  box-shadow: 0 26px 74px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.055), var(--as-glow);
  isolation: isolate;
}
.role-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(120deg, transparent 20%, rgba(95,173,255,.08) 47%, transparent 70%); transform: translateX(-70%); animation: heroSheen 8s ease-in-out infinite; }
.role-hero-aura { position:absolute; width:260px; height:260px; right:-90px; top:-100px; border-radius:50%; background: radial-gradient(circle, rgba(31,127,255,.21), transparent 67%); filter: blur(8px); }
@keyframes heroSheen { 0%,65%,100% { transform:translateX(-70%); } 78% { transform:translateX(70%); } }
.role-hero-top { position: relative; z-index: 1; display:grid; grid-template-columns: minmax(0,1.25fr) minmax(132px,.75fr); gap: 8px; align-items:center; min-height: 178px; }
.role-hero-copy { min-width:0; }
.role-greeting { margin:0 0 7px; color:rgba(219,231,250,.68); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-hero h2 { margin:0; max-width:330px; font-size: clamp(27px, 7.2vw, 36px); line-height:1.04; letter-spacing:-1.05px; color:#fff; }
.role-subtitle { margin:13px 0 0; max-width:360px; color:rgba(220,232,252,.67); font-size:13px; line-height:1.48; }
.role-identity { margin-top:12px; display:flex; align-items:center; gap:10px; }
.role-badge { min-height:34px; padding:6px 12px; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(68,151,255,.45); border-radius:999px; background:rgba(7,33,69,.78); color:rgba(235,245,255,.88); font-size:12px; }
.role-badge .as-icon { width:18px; height:18px; color:#55acff; }
.role-avatar { width:40px; height:40px; border-radius:50%; border:1px solid rgba(113,184,255,.74); object-fit:cover; box-shadow:0 0 22px rgba(19,121,255,.36); }
.role-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#3b91ff,#1c51dc); color:#fff; font-weight:720; }
.role-hero-visual { --hero-rx:0deg; --hero-ry:0deg; --hero-tx:0px; --hero-ty:0px; min-width:0; perspective:700px; transform: translate3d(var(--hero-tx),var(--hero-ty),0) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)); transition:transform .24s ease; }
.role-scene { position:relative; height:158px; transform-style:preserve-3d; filter:drop-shadow(0 18px 25px rgba(0,44,120,.4)); }
.scene-grid { position:absolute; left:6%; right:1%; bottom:13%; height:50%; transform:perspective(300px) rotateX(63deg); background-image:linear-gradient(rgba(46,132,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(46,132,255,.16) 1px,transparent 1px); background-size:14px 14px; -webkit-mask-image:linear-gradient(to top,black,transparent); mask-image:linear-gradient(to top,black,transparent); }
.scene-platform { position:absolute; left:34%; top:54%; width:86px; height:44px; border-radius:18px; border:1px solid rgba(62,157,255,.55); background:linear-gradient(145deg,rgba(18,85,183,.66),rgba(4,22,54,.72)); box-shadow:0 0 26px rgba(0,120,255,.28); transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-9deg); }
.scene-platform-3 { left:52%; top:62%; width:118px; height:57px; opacity:.55; }
.scene-platform-2 { left:51%; top:53%; width:96px; height:48px; }
.scene-core { position:absolute; left:51%; top:43%; width:63px; height:63px; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; border:1px solid rgba(83,175,255,.72); border-radius:18px; background:linear-gradient(145deg,#0b6df0,#0a2c73); color:#dff4ff; box-shadow:0 0 14px #1682ff,0 0 34px rgba(0,119,255,.55),inset 0 1px rgba(255,255,255,.22); animation:sceneFloat 4.6s ease-in-out infinite; }
.scene-core .as-icon { width:34px; height:34px; stroke-width:1.65; }
.scene-core img { width:44px; height:44px; object-fit:cover; border-radius:50%; }
.scene-node { position:absolute; width:35px; height:35px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(91,165,255,.4); border-radius:11px; background:rgba(5,24,58,.84); color:#64b9ff; box-shadow:0 0 18px rgba(0,101,255,.26); animation:nodeFloat 5.4s ease-in-out infinite; }
.scene-node .as-icon { width:20px; height:20px; }
.scene-node-a { left:4%; top:29%; animation-delay:-1.4s; }.scene-node-b { right:2%; top:23%; animation-delay:-2.8s; }.scene-node-c { right:11%; bottom:8%; animation-delay:-.7s; }
.scene-orbit { position:absolute; left:51%; top:47%; width:140px; height:66px; border:1px solid rgba(53,148,255,.18); border-radius:50%; transform:translate(-50%,-50%) rotate(-8deg); }
.scene-orbit-b { width:177px; height:87px; opacity:.55; transform:translate(-50%,-50%) rotate(17deg); }
.scene-pulse { position:absolute; left:51%; top:43%; width:74px; height:74px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(60,173,255,.42); animation:scenePulse 2.7s ease-out infinite; }
.role-hero-visual.is-energized .scene-core { transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 18px #3da6ff,0 0 50px rgba(0,119,255,.78); }
@keyframes sceneFloat { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes nodeFloat { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes scenePulse { 0%{ scale:.7; opacity:.7 } 80%,100%{ scale:1.55; opacity:0 } }

.role-metrics { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.role-metric { min-height:86px; padding:11px 9px; border:1px solid rgba(116,170,244,.22); border-radius:18px; color:#fff; background:linear-gradient(145deg,rgba(13,33,69,.83),rgba(4,14,33,.82)); display:grid; grid-template-columns:35px 1fr; gap:8px; align-items:center; text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.035); }
.role-metric:not(:disabled):active { transform:scale(.97); background:rgba(12,42,88,.92); }
.role-metric:disabled { opacity:1; cursor:default; }
.role-metric-icon { width:35px; height:35px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#5db4ff; background:linear-gradient(145deg,rgba(35,106,216,.38),rgba(7,35,79,.44)); border:1px solid rgba(58,143,255,.28); }
.role-metric-icon .as-icon { width:21px; height:21px; }
.role-metric-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.role-metric-copy strong { font-size:19px; line-height:1.05; letter-spacing:-.35px; overflow:hidden; text-overflow:ellipsis; }
.role-metric-copy small { color:rgba(217,230,250,.61); font-size:10px; line-height:1.2; }
.role-metric-ring { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#2a89ff calc(var(--metric-progress)*1%),rgba(82,119,173,.22) 0); position:relative; }
.role-metric-ring::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#07162f; }
.role-metric-ring b { position:relative; z-index:1; font-size:8px; }
.role-hero-primary { position:relative; z-index:2; width:100%; min-height:58px; margin-top:14px; padding:0 18px; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; font-weight:720; font-size:16px; background:linear-gradient(100deg,#116df1,#2f7cff); border:1px solid rgba(111,190,255,.55); box-shadow:0 13px 34px rgba(0,79,227,.26),inset 0 1px rgba(255,255,255,.2); }
.role-hero-primary .as-icon { position:absolute; right:19px; width:22px; }
.role-hero-primary:active { transform:scale(.985); }

/* Home application cards */
.role-apps-head { margin-top:25px; margin-bottom:11px; align-items:center; }
.role-apps-head h2 { font-size:23px; letter-spacing:-.45px; }
.section-link { min-height:38px; color:rgba(210,226,250,.64); background:transparent; display:inline-flex; gap:7px; align-items:center; font-size:12px; }
#home-apps-grid.app-widget-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#home-apps-grid .app-widget { min-height:174px; padding:15px; border-radius:21px; border:1px solid rgba(111,165,238,.25); background:linear-gradient(145deg,rgba(11,29,61,.9),rgba(4,14,33,.88)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.18); }
#home-apps-grid .app-widget::after { content:"→"; position:absolute; right:14px; bottom:14px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(152,190,240,.32); display:grid; place-items:center; color:rgba(230,240,255,.8); font-size:17px; background:rgba(5,15,35,.62); }
#home-apps-grid .app-widget-head { align-items:flex-start; gap:10px; }
#home-apps-grid .app-widget-head strong { font-size:17px; line-height:1.12; letter-spacing:-.3px; }
#home-apps-grid .app-widget-icon { width:48px; height:48px; flex:0 0 48px; border-radius:15px; color:#62b8ff; background:linear-gradient(145deg,rgba(23,86,182,.38),rgba(6,31,76,.55)); border:1px solid rgba(47,139,255,.34); display:grid; place-items:center; box-shadow:0 0 20px rgba(0,102,255,.1); }
#home-apps-grid .app-widget-icon .as-icon { width:27px; height:27px; }
#home-apps-grid .app-widget-copy { margin-top:15px; padding-right:18px; }
#home-apps-grid .app-widget-copy small { color:rgba(216,230,251,.61); font-size:12px; line-height:1.42; -webkit-line-clamp:3; }
#home-apps-grid .app-widget:active { transform:scale(.975); border-color:rgba(65,153,255,.58); }
.app-badge { background:#176dff; color:#fff; }

.role-glance { margin-top:12px; min-height:76px; padding:12px 12px; border:1px solid rgba(99,158,236,.24); border-radius:20px; background:linear-gradient(145deg,rgba(9,27,58,.86),rgba(4,14,32,.86)); display:grid; grid-template-columns:44px 1fr 42px; align-items:center; gap:11px; }
.role-glance-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#52adff; background:rgba(10,54,116,.43); border:1px solid rgba(52,144,255,.32); }
.role-glance-icon .as-icon { width:25px; height:25px; }.role-glance strong { display:block; font-size:14px; color:#f7fbff; }.role-glance small { display:block; margin-top:4px; color:rgba(214,229,250,.6); font-size:11px; line-height:1.3; }
.role-glance-action { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#58b0ff; background:rgba(8,27,57,.8); border:1px solid rgba(72,150,247,.35); }.role-glance-action .as-icon{width:20px;height:20px;}

/* Bottom navigation */
.bottom-nav { left:50%; width:min(calc(100% - 22px),548px); bottom:max(7px,env(safe-area-inset-bottom)); transform:translateX(-50%); padding:0; background:none; }
#role-bottom-nav.nav-inner { min-height:78px; padding:7px 6px; border:1px solid rgba(119,170,239,.28); border-radius:26px; background:rgba(3,12,29,.96); box-shadow:0 18px 54px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.055); backdrop-filter:blur(18px) saturate(130%); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:visible; }
#role-bottom-nav .nav-indicator { height:64px; border-radius:20px; border:1px solid rgba(34,140,255,.72); background:linear-gradient(180deg,rgba(14,78,164,.54),rgba(6,32,80,.48)); box-shadow:0 0 24px rgba(0,112,255,.22),inset 0 1px rgba(255,255,255,.055); }
#role-bottom-nav .nav { min-width:0; min-height:64px; padding:6px 3px 5px; color:rgba(194,210,235,.68); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; z-index:2; }
#role-bottom-nav .nav-icon { width:28px; height:28px; display:grid; place-items:center; }
#role-bottom-nav .nav-icon .as-icon { width:25px; height:25px; stroke-width:1.75; }
#role-bottom-nav .nav-label { max-width:70px; font-size:10px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#role-bottom-nav .nav.active { color:#fff; }
#role-bottom-nav .nav.active .nav-icon { color:#5bb4ff; filter:drop-shadow(0 0 7px rgba(40,146,255,.6)); }
#role-bottom-nav .nav-primary-action { transform:translateY(-18px); overflow:visible; color:rgba(224,236,255,.77); }
#role-bottom-nav .nav-primary-action:active { transform:translateY(-18px) scale(.94); }
.nav-primary-orb { width:61px; height:61px; margin-bottom:-1px; border-radius:50%; display:grid; place-items:center; color:#fff; border:1px solid rgba(89,185,255,.9); background:linear-gradient(145deg,#207cfb,#0d46bc); box-shadow:0 0 0 5px rgba(4,15,35,.94),0 0 28px rgba(0,119,255,.66),inset 0 1px 6px rgba(255,255,255,.25); }
.nav-primary-orb .as-icon { width:31px; height:31px; stroke-width:1.55; }
#role-bottom-nav .nav-primary-action .nav-label { transform:translateY(8px); }

/* Quick action bottom sheet */
.quick-action-sheet { position:fixed; inset:0; z-index:50; pointer-events:none; visibility:hidden; }
.quick-action-sheet.open { pointer-events:auto; visibility:visible; }
.quick-sheet-backdrop { position:absolute; inset:0; width:100%; height:100%; border-radius:0; background:rgba(0,3,10,.58); opacity:0; transition:opacity .22s ease; backdrop-filter:blur(4px); }
.quick-action-sheet.open .quick-sheet-backdrop { opacity:1; }
.quick-sheet-panel { position:absolute; left:50%; bottom:0; width:min(100%,570px); max-height:min(76vh,620px); overflow:auto; padding:9px 17px calc(25px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; border:1px solid rgba(121,178,255,.29); border-bottom:0; background:linear-gradient(180deg,rgba(10,28,61,.99),rgba(3,12,29,.995)); box-shadow:0 -25px 70px rgba(0,0,0,.55); transform:translate(-50%,105%); transition:transform .32s cubic-bezier(.2,.85,.25,1); }
.quick-action-sheet.open .quick-sheet-panel { transform:translate(-50%,0); }
.quick-sheet-handle { width:42px; height:4px; border-radius:5px; margin:0 auto 15px; background:rgba(195,215,244,.28); }
.quick-sheet-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }
.quick-sheet-head p { margin:0 0 4px; color:rgba(207,225,249,.55); font-size:11px; text-transform:uppercase; letter-spacing:.75px; }.quick-sheet-head h2 { margin:0; font-size:25px; letter-spacing:-.5px; }
.quick-sheet-close { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:rgba(228,239,255,.8); background:rgba(12,31,65,.74); border:1px solid rgba(128,174,235,.22); }.quick-sheet-close .as-icon{width:21px;height:21px;}
.quick-sheet-grid { display:grid; gap:8px; }
.quick-sheet-action { min-height:65px; padding:10px 12px; display:grid; grid-template-columns:43px 1fr 22px; align-items:center; gap:11px; color:#f6fbff; text-align:left; border:1px solid rgba(108,165,240,.2); border-radius:18px; background:rgba(8,23,51,.8); }
.quick-sheet-action>span:first-child { width:43px; height:43px; border-radius:13px; display:grid; place-items:center; color:#5fb6ff; background:rgba(13,68,147,.42); border:1px solid rgba(56,145,255,.28); }.quick-sheet-action>span:first-child .as-icon{width:24px;height:24px;}
.quick-sheet-action strong { font-size:14px; font-weight:660; }.quick-sheet-chevron { width:18px; height:18px; color:rgba(176,203,237,.45); }
.quick-sheet-action:active { transform:scale(.985); background:rgba(12,42,87,.9); }
body.quick-sheet-open { overflow:hidden; }

/* Dedicated schedule */
.schedule-page-head { padding:19px; border-radius:24px; display:grid; grid-template-columns:1fr 58px; gap:12px; align-items:center; background:linear-gradient(145deg,rgba(13,36,77,.9),rgba(4,14,33,.9)); }
.schedule-page-head h2 { margin:4px 0 8px; font-size:27px; letter-spacing:-.6px; }.schedule-page-head p { margin-bottom:0; }
.schedule-head-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:#60b8ff; background:rgba(12,65,141,.45); border:1px solid rgba(55,145,255,.37); box-shadow:0 0 25px rgba(0,111,255,.18); }.schedule-head-icon .as-icon{width:32px;height:32px;}
.schedule-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:12px 0 20px; }.schedule-summary>div { padding:13px 15px; border:1px solid rgba(110,163,234,.2); border-radius:17px; background:rgba(7,21,47,.75); }.schedule-summary strong{display:block;font-size:24px}.schedule-summary span{color:rgba(210,226,248,.58);font-size:11px}
.schedule-list { display:grid; gap:8px; }.schedule-row-card { min-height:70px; padding:10px 11px; display:grid; grid-template-columns:58px 1fr auto; gap:11px; align-items:center; border:1px solid rgba(105,159,230,.21); border-radius:18px; background:linear-gradient(145deg,rgba(9,26,56,.84),rgba(4,15,34,.84)); }.schedule-time { width:58px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(12,66,143,.38); color:#77c6ff; font-weight:730; }.schedule-row-copy strong{display:block;font-size:14px}.schedule-row-copy small{display:block;margin-top:4px;color:rgba(210,226,248,.55);font-size:11px;line-height:1.3}.schedule-row-secondary{padding:8px 9px;border-radius:11px;color:#ffb2bb;background:rgba(130,35,50,.17);border:1px solid rgba(255,115,133,.24);font-size:10px}
.schedule-quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:14px; }.schedule-quick-grid .path-card{min-height:130px}.path-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:#5db3ff;background:rgba(12,65,139,.35);margin-bottom:7px}.path-icon .as-icon{width:23px;height:23px}

/* Global component polish for every Mini App page */
.card,.details,.notice,.empty,.path-card,.app-detail-hero { border-color:rgba(104,159,232,.22)!important; background:linear-gradient(145deg,rgba(9,26,55,.88),rgba(4,14,32,.88))!important; box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 36px rgba(0,0,0,.16)!important; }
.button { background:linear-gradient(100deg,#136ff2,#2f7dff); border-color:rgba(93,175,255,.55); box-shadow:0 10px 28px rgba(0,80,220,.2); }.button.secondary,.tiny-button,.filter { background:rgba(8,27,58,.8); border-color:rgba(108,163,237,.25); color:rgba(229,240,255,.84); }
.field,.search,.select,textarea { background:rgba(3,15,36,.84)!important; border-color:rgba(103,160,235,.23)!important; color:#f6fbff!important; }
.app-menu-panel { background:linear-gradient(180deg,rgba(9,27,59,.99),rgba(3,12,29,.995)); border-color:rgba(115,173,249,.28); }
.app-icon-tile,.app-widget-icon { font-size:0; }
.app-icon-tile .as-icon,.app-widget-icon .as-icon { font-size:initial; }
.menu-row>span:first-child { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#5ab1ff; background:rgba(13,65,139,.34); }.menu-row>span:first-child .as-icon{width:21px;height:21px}

/* Branded secondary surfaces */
.brand-card-title,.brand-heading { display:flex; align-items:center; gap:9px; }
.brand-card-icon { width:31px; height:31px; flex:0 0 31px; border-radius:10px; display:inline-grid; place-items:center; color:#5db3ff; background:rgba(13,65,139,.35); border:1px solid rgba(62,148,255,.24); }
.brand-card-icon .as-icon,.brand-heading>.as-icon { width:20px; height:20px; color:#5db3ff; flex:0 0 auto; }
.brand-inline-contact { display:inline-flex; align-items:center; gap:6px; }.brand-inline-contact .as-icon{width:16px;height:16px;color:#5db3ff}
.map-empty-symbol .as-icon,.map-pin-label .as-icon,.map-point-dot .as-icon { width:18px; height:18px; color:#5db3ff; }
.account-profile-card { padding:20px; border-radius:24px; display:flex; align-items:center; gap:15px; }
.account-avatar { width:68px; height:68px; flex:0 0 68px; border-radius:21px; display:grid; place-items:center; color:#fff; font-size:24px; font-weight:760; background:linear-gradient(145deg,#3b98ff,#1547d2); border:1px solid rgba(117,194,255,.74); box-shadow:0 0 30px rgba(24,125,255,.28); }
.account-profile-copy { min-width:0; }.account-profile-copy h2{margin:3px 0 10px;font-size:24px;letter-spacing:-.55px}.account-profile-copy .eyebrow{margin:0;color:rgba(211,229,252,.55)}
.account-info-grid { margin-top:11px; display:grid; gap:8px; }
.account-info-row { min-height:62px; padding:10px 12px; border:1px solid rgba(105,161,235,.21); border-radius:17px; background:rgba(7,21,47,.76); display:grid; grid-template-columns:40px 1fr; align-items:center; gap:11px; }
.account-info-row>span { width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#5bb4ff;background:rgba(13,65,139,.34); }.account-info-row>span .as-icon{width:22px;height:22px}.account-info-row small{display:block;color:rgba(211,226,248,.55);font-size:10px}.account-info-row strong{display:block;margin-top:2px;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.account-actions { margin-top:12px; }.account-actions .path-card{min-height:122px}.account-actions .path-icon{margin:0 0 8px}

@media (max-width: 430px) {
  .app { padding-inline: 12px; }
  .role-hero { padding:19px 14px 15px; border-radius:24px; }.role-hero-top { grid-template-columns:minmax(0,1.35fr) minmax(112px,.65fr); min-height:162px; }.role-hero h2{font-size:28px}.role-subtitle{display:none}.role-scene{height:134px}.scene-node{width:31px;height:31px}.scene-core{width:57px;height:57px}
  .role-metric { min-height:78px; grid-template-columns:31px 1fr; padding:9px 7px; gap:6px; border-radius:16px; }.role-metric-icon{width:31px;height:31px}.role-metric-copy strong{font-size:16px}.role-metric-copy small{font-size:9px}.role-metric-ring{width:32px;height:32px}
  #home-apps-grid .app-widget { min-height:164px; padding:13px; }.role-glance{grid-template-columns:41px 1fr 38px}
  #role-bottom-nav.nav-inner { min-height:75px; border-radius:24px; }.nav-primary-orb{width:57px;height:57px}.nav-primary-orb .as-icon{width:28px;height:28px}
}
@media (max-width: 350px) {
  .role-hero-top { grid-template-columns:1fr; }.role-hero-visual{display:none}.role-hero h2{font-size:27px}.role-metrics{gap:6px}.role-metric{grid-template-columns:1fr;text-align:center}.role-metric-icon,.role-metric-ring{margin:0 auto}.brand-rail .brand-copy .eyebrow{display:none}.brand-rail .brand-copy h1{font-size:21px}
  #home-apps-grid.app-widget-grid{grid-template-columns:1fr}#home-apps-grid .app-widget{min-height:140px}
}
.no-motion .role-hero::before,.no-motion .scene-core,.no-motion .scene-node,.no-motion .scene-pulse{animation:none!important}.no-motion .role-hero-visual,.no-motion .quick-sheet-panel,.no-motion .quick-sheet-backdrop{transition:none!important}
@media (prefers-reduced-motion: reduce) {
  .role-hero::before,.scene-core,.scene-node,.scene-pulse{animation:none!important}.role-hero-visual,.quick-sheet-panel,.quick-sheet-backdrop{transition:none!important}
}

/* V2.0.5 approved visual lock — based on the five role previews approved on 2026-08-24. */
.role-hero--student,
.role-hero--instructor,
.role-hero--director,
.role-hero--franchise,
.role-hero--platform {
  background:
    radial-gradient(circle at 74% 27%, rgba(12, 111, 255, .18), transparent 18rem),
    linear-gradient(145deg, rgba(9, 27, 58, .97), rgba(2, 11, 27, .97));
}
.role-hero--student .role-subtitle,
.role-hero--instructor .role-subtitle,
.role-hero--director .role-subtitle,
.role-hero--franchise .role-subtitle,
.role-hero--platform .role-subtitle { display:none; }

.approved-role-art {
  position:relative;
  height:166px;
  width:100%;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  isolation:isolate;
}
.approved-role-art img {
  position:absolute;
  left:50%; top:50%;
  width:190%; max-width:none; height:auto;
  transform:translate3d(-50%,-49%,18px) scale(.82);
  transform-origin:center;
  filter:drop-shadow(0 18px 28px rgba(0,48,140,.45)) saturate(1.08) contrast(1.03);
  animation:approvedHeroFloat 5.8s ease-in-out infinite;
  will-change:transform,filter;
}
.approved-role-art--student img { width:176%; transform:translate3d(-48%,-48%,18px) scale(.82); }
.approved-role-art--instructor img { width:195%; transform:translate3d(-50%,-48%,18px) scale(.82); }
.approved-role-art--director img { width:194%; transform:translate3d(-51%,-49%,18px) scale(.82); }
.approved-role-art--franchise img { width:198%; transform:translate3d(-51%,-49%,18px) scale(.82); }
.approved-role-art--platform img { width:190%; transform:translate3d(-50%,-48%,18px) scale(.82); }
.approved-art-grid {
  position:absolute; inset:17% -7% 1%; z-index:-3;
  background-image:linear-gradient(rgba(42,126,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(42,126,255,.10) 1px,transparent 1px);
  background-size:16px 16px;
  transform:perspective(260px) rotateX(61deg) translateY(32px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent 82%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent 82%);
}
.approved-art-halo {
  position:absolute; width:86%; aspect-ratio:1.35; border-radius:50%; z-index:-2;
  background:radial-gradient(ellipse,rgba(0,110,255,.25),rgba(0,110,255,.06) 42%,transparent 70%);
  filter:blur(17px);
  animation:approvedHalo 4.8s ease-in-out infinite;
}
.approved-art-scan {
  position:absolute; left:8%; right:8%; top:38%; height:1px; opacity:.5;
  background:linear-gradient(90deg,transparent,#56b9ff 25%,#fff 50%,#56b9ff 75%,transparent);
  box-shadow:0 0 13px rgba(71,171,255,.65);
  animation:approvedScan 4.8s ease-in-out infinite;
}
.approved-art-spark { position:absolute; width:5px; height:5px; border-radius:50%; background:#a8e8ff; box-shadow:0 0 10px #46a8ff,0 0 22px #176cff; animation:approvedSpark 3.2s ease-in-out infinite; }
.approved-art-spark-a { right:18%; top:23%; }
.approved-art-spark-b { left:18%; bottom:19%; animation-delay:-1.55s; }
.role-hero-visual.is-energized .approved-role-art img { filter:drop-shadow(0 18px 30px rgba(0,72,190,.58)) saturate(1.18) brightness(1.08); }
.role-hero-visual.is-energized .approved-art-halo { transform:scale(1.08); opacity:1; }
@keyframes approvedHeroFloat { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes approvedHalo { 0%,100% { opacity:.62; scale:.96; } 50% { opacity:1; scale:1.05; } }
@keyframes approvedScan { 0%,100% { transform:translateY(-24px); opacity:0; } 45% { opacity:.52; } 60% { transform:translateY(44px); opacity:.12; } }
@keyframes approvedSpark { 0%,100% { opacity:.15; transform:scale(.7); } 50% { opacity:1; transform:scale(1.35); } }

.role-metric-copy { display:flex; flex-direction:column; min-width:0; }
.role-metric-copy small { order:-1; margin:0 0 2px; line-height:1.15; }
.role-metric-copy strong { line-height:1.04; }
.role-hero--student .role-metric:nth-child(2) { grid-template-columns:38px 1fr; }
.role-hero--student .role-metric-ring { width:38px; height:38px; }
.role-hero--student .role-metric-ring b { font-size:9px; }

#home-apps-grid .app-widget {
  min-height:162px;
  background:linear-gradient(145deg,rgba(9,28,60,.94),rgba(3,14,32,.94));
  border-color:rgba(105,163,239,.27);
}
#home-apps-grid .app-widget-head strong { font-size:17px; }
#home-apps-grid .app-widget-copy { margin-top:13px; }
#home-apps-grid .app-widget-copy small { color:rgba(216,230,251,.64); }

.role-glance { grid-template-columns:48px minmax(0,1fr) auto; min-height:78px; padding:11px 12px; }
.role-glance-icon--hot { color:#68baff; box-shadow:0 0 23px rgba(0,102,255,.30); }
.role-glance-cta {
  min-height:40px; padding:0 13px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#fff; font-weight:650; font-size:12px; white-space:nowrap;
  background:linear-gradient(100deg,#116df1,#2f7cff);
  border:1px solid rgba(100,183,255,.52);
  box-shadow:0 8px 20px rgba(0,75,212,.22);
}
.role-glance-cta .as-icon { width:19px; height:19px; }
.role-glance-cta--secondary { color:#58adff; background:rgba(6,23,51,.72); border-color:rgba(90,158,245,.42); box-shadow:none; }

@media (max-width:430px) {
  .role-hero-top { grid-template-columns:minmax(0,1.2fr) minmax(120px,.8fr); min-height:172px; }
  .approved-role-art { height:148px; }
  .approved-role-art img { width:192%; }
  .approved-role-art--student img { width:182%; }
  .approved-role-art--director img { width:198%; }
  .approved-role-art--franchise img { width:202%; }
  .approved-role-art--platform img { width:194%; }
  .role-hero h2 { font-size:29px; max-width:300px; }
  .role-identity { margin-top:11px; }
  .role-metric { min-height:82px; }
  #home-apps-grid .app-widget { min-height:154px; }
  .role-glance { grid-template-columns:44px minmax(0,1fr) auto; }
  .role-glance-cta { min-width:76px; padding-inline:11px; }
}
@media (max-width:375px) {
  .role-hero-top { grid-template-columns:minmax(0,1.25fr) minmax(106px,.75fr); }
  .approved-role-art { height:136px; }
  .role-hero h2 { font-size:27px; }
  .role-glance-cta span { display:none; }
  .role-glance-cta { width:40px; min-width:40px; padding:0; }
}
.no-motion .approved-role-art img,.no-motion .approved-art-halo,.no-motion .approved-art-scan,.no-motion .approved-art-spark { animation:none!important; }
@media (prefers-reduced-motion: reduce) {
  .approved-role-art img,.approved-art-halo,.approved-art-scan,.approved-art-spark { animation:none!important; }
}

/* V2.0.5 metric fidelity: approved previews keep the numeric value fully visible. */
.role-metric-copy strong {
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
.role-hero--student .role-metric:nth-child(2) .role-metric-copy strong {
  font-size:17px;
  letter-spacing:-.55px;
}