@media (min-width: 981px) {
  #desktop-nav .desktop-yu-teaching-link { color:#c9c0ff !important; background:linear-gradient(90deg,rgba(112,92,255,.17),transparent) !important; }
  #desktop-nav .desktop-yu-teaching-link:hover,#desktop-nav .desktop-yu-teaching-link.active { color:#f2efff !important; background:linear-gradient(90deg,rgba(112,92,255,.28),rgba(112,92,255,.04)) !important; }
  #desktop-nav .desktop-yu-teaching-link.active::before { background:#a99aff !important; }
  #desktop-nav .desktop-yu-teaching-link .desktop-nav-badge { background:#6f59db !important; color:#fff !important; box-shadow:0 0 16px rgba(128,105,255,.34); }
  body.route-yu-teaching { background:#0a0d1b; }
  body.route-yu-teaching #desktop-nav,body.route-yu-teaching #desktop-contextbar,body.route-yu-teaching #pixel-cat-pet { display:none !important; }
  body.route-yu-teaching #app { pointer-events:none; opacity:0; }
  #desktop-yu-teaching { position:fixed; z-index:120; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100vw !important; max-width:none !important; height:100vh; overflow:auto; box-sizing:border-box; min-height:100vh; padding:30px clamp(34px,6vw,104px) 46px; color:#f8f5ff; background:radial-gradient(circle at 70% 22%,rgba(111,79,255,.22),transparent 24%),radial-gradient(circle at 30% 100%,rgba(13,194,181,.12),transparent 30%),#0a0d1b; font-family:"IBM Plex Sans","PingFang SC",sans-serif; }
  .yu-teaching-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
  .yu-teaching-aurora { position:absolute; width:52vw; height:52vw; top:-26vw; right:-12vw; border-radius:50%; background:conic-gradient(from 210deg,transparent,#715dff,transparent,#20dec7,transparent); filter:blur(72px); opacity:.22; animation:yuAurora 14s linear infinite; }
  .yu-teaching-top,.yu-teaching-hero,.yu-teaching-dock { position:relative; z-index:1; max-width:1320px; margin:0 auto; }
  .yu-teaching-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1); }
  .yu-teaching-signature,.yu-teaching-status,.yu-teaching-top-actions { display:flex; align-items:center; gap:12px; }
  .yu-teaching-seal { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(191,177,255,.75); border-radius:14px 14px 3px 14px; background:linear-gradient(145deg,#7c66ff,#2b236b); box-shadow:0 0 28px rgba(113,93,255,.45); font:700 22px/1 serif; }
  .yu-teaching-signature small,.yu-teaching-status span,.yu-teaching-dock span { display:block; color:#a8a6ba; font-size:10px; letter-spacing:.14em; }
  .yu-teaching-signature strong { display:block; margin-top:3px; font-size:16px; letter-spacing:.06em; }
  .yu-teaching-status { font-size:12px; color:#d8d6e4; } .yu-teaching-status i { width:8px; height:8px; border-radius:50%; background:#54efd6; box-shadow:0 0 14px #54efd6; }
  .yu-teaching-status time { margin-left:14px; color:#868396; font-size:11px; }
  .yu-teaching-exit { display:inline-flex; align-items:center; gap:11px; margin-left:18px; padding:8px 9px 8px 14px; border:1px solid rgba(211,204,255,.22); border-radius:999px; background:rgba(255,255,255,.045); color:#d8d4ea; font:12px inherit; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; } .yu-teaching-exit b { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:rgba(255,255,255,.11); color:#fff; font-size:17px; font-weight:400; line-height:1; } .yu-teaching-exit:hover { border-color:#a99aff; background:rgba(133,112,255,.18); transform:translateY(-1px); }
  .yu-teaching-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr); align-items:center; gap:30px; min-height:510px; padding:50px 0 42px; }
  .yu-teaching-eyebrow { margin:0 0 14px; color:#7ce9db; font-size:11px; letter-spacing:.22em; }
  .yu-teaching-hero h1 { margin:0; font-size:clamp(42px,4.5vw,72px); line-height:1.18; letter-spacing:-.055em; font-weight:600; } .yu-teaching-hero h1 em { color:#b8aeff; font-style:normal; }
  .yu-teaching-intro { max-width:550px; margin:25px 0 30px; color:#aaa8bc; font-size:15px; line-height:1.9; }
  .yu-teaching-actions { display:flex; align-items:center; gap:22px; } .yu-teaching-actions button { padding:15px 19px; border:1px solid rgba(180,171,255,.65); border-radius:10px; background:linear-gradient(100deg,#7763fb,#4135a6); color:#fff; box-shadow:0 15px 35px rgba(84,64,210,.28); font:600 14px inherit; cursor:pointer; transition:transform .2s,box-shadow .2s; } .yu-teaching-actions button:hover { transform:translateY(-3px); box-shadow:0 19px 42px rgba(84,64,210,.42); } .yu-teaching-actions button b { margin-left:12px; font-size:18px; } .yu-teaching-actions span { color:#7f7c90; font-size:10px; letter-spacing:.1em; }
  .yu-teaching-orbit { position:relative; width:min(33vw,420px); aspect-ratio:1; justify-self:center; } .yu-teaching-orbit-ring { position:absolute; inset:5%; border:1px solid rgba(191,181,255,.25); border-radius:50%; } .yu-teaching-orbit-ring::after { content:""; position:absolute; top:8%; left:17%; width:9px; height:9px; border-radius:50%; background:#5ce3d5; box-shadow:0 0 16px #5ce3d5; } .ring-one { animation:yuOrbit 12s linear infinite; } .ring-two { inset:18%; border-style:dashed; animation:yuOrbit 8s linear infinite reverse; } .yu-teaching-orbit-core { position:absolute; inset:31%; display:grid; place-content:center; border:1px solid rgba(202,195,255,.62); border-radius:50%; background:radial-gradient(circle at 35% 30%,#7063ec,#211b50 67%); text-align:center; box-shadow:0 0 52px rgba(104,83,255,.52),inset 0 0 25px rgba(255,255,255,.12); } .yu-teaching-orbit-core span { font-size:23px; font-weight:700; letter-spacing:.2em; } .yu-teaching-orbit-core b { margin-top:5px; color:#c8c2e6; font-size:8px; line-height:1.5; letter-spacing:.16em; } .yu-star { position:absolute; color:#d7d2ff; font-style:normal; } .s-one { top:4%; right:14%; font-size:22px; } .s-two { bottom:18%; left:3%; color:#64e4d5; font-size:16px; } .s-three { top:28%; left:5%; font-size:38px; }
  .yu-teaching-dock { display:grid; grid-template-columns:1.04fr 1fr .9fr; border:1px solid rgba(196,187,255,.16); border-radius:20px; overflow:hidden; background:rgba(18,19,40,.62); box-shadow:0 28px 70px rgba(0,0,0,.22); } .yu-teaching-dock article { min-height:190px; padding:29px; border-right:1px solid rgba(196,187,255,.13); } .yu-teaching-dock article:last-child { border:0; } .yu-teaching-dock h2 { margin:11px 0 12px; font-size:21px; line-height:1.35; } .yu-teaching-dock p { margin:0; color:#9895aa; font-size:12px; line-height:1.75; } .yu-teaching-coming { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,rgba(104,83,255,.16),rgba(23,221,200,.06)); } .yu-teaching-coming-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:12px; background:rgba(151,134,255,.18); color:#c9c0ff; font-size:19px; } .yu-teaching-coming strong,.yu-teaching-note strong { display:block; margin:8px 0 7px; font-size:15px; } .yu-teaching-coming b { margin-left:auto; color:#75e9db; font-size:21px; } .yu-teaching-note { background:rgba(255,255,255,.025); } .yu-teaching-page.is-ritual-open .yu-teaching-orbit { animation:yuRitual .9s cubic-bezier(.2,.9,.3,1); } .yu-teaching-page.is-ritual-open .yu-teaching-dock { animation:yuDock .75s .1s both; }
  @keyframes yuOrbit { to { transform:rotate(360deg); } } @keyframes yuAurora { to { transform:rotate(360deg); } } @keyframes yuRitual { 45% { transform:scale(1.08); filter:brightness(1.35); } } @keyframes yuDock { from { opacity:.2; transform:translateY(18px); } to { opacity:1; transform:none; } }
  @media (max-width:1180px) { .yu-teaching-hero { grid-template-columns:1fr .72fr; } .yu-teaching-dock article { padding:22px; } .yu-teaching-orbit { width:30vw; } }
  @media (max-width:980px) { #desktop-yu-teaching { position:relative; inset:auto; padding:24px; } .yu-teaching-hero,.yu-teaching-dock { grid-template-columns:1fr; } .yu-teaching-orbit { width:280px; } .yu-teaching-dock article { border-right:0; border-bottom:1px solid rgba(196,187,255,.13); } }

  /* Fullscreen v2: quieter, more spacious command-deck composition. */
  #desktop-yu-teaching { padding:clamp(28px,3.3vw,62px) clamp(38px,6.5vw,132px) 58px; background:radial-gradient(ellipse 54% 66% at 73% 24%,rgba(98,75,232,.28),transparent 70%),radial-gradient(ellipse 42% 36% at 12% 105%,rgba(15,165,153,.17),transparent 74%),#080b17; }
  .yu-teaching-page::after { content:"YU · PRIVATE TEACHING STUDIO"; position:fixed; z-index:0; right:-.1em; bottom:-.34em; color:rgba(202,193,255,.025); font-size:clamp(82px,13vw,230px); font-weight:700; letter-spacing:-.08em; pointer-events:none; white-space:nowrap; }
  .yu-teaching-top,.yu-teaching-hero,.yu-teaching-dock { max-width:1510px; }
  .yu-teaching-top { padding-top:18px; padding-bottom:27px; } .yu-teaching-top::before { content:"PRIVATE / 01"; position:absolute; top:0; left:0; color:#77708f; font-size:9px; font-weight:700; letter-spacing:.18em; }
  .yu-teaching-signature { gap:14px; } .yu-teaching-seal { width:48px; height:48px; border-radius:17px 17px 4px 17px; }
  .yu-teaching-hero { grid-template-columns:minmax(560px,1.02fr) minmax(460px,.98fr); min-height:570px; padding:62px 0 52px; }
  .yu-teaching-hero-copy { position:relative; padding-left:24px; } .yu-teaching-hero-copy::before { content:""; position:absolute; top:2px; bottom:5px; left:0; width:1px; background:linear-gradient(#67e8d9,rgba(127,105,255,.6),transparent); }
  .yu-teaching-eyebrow { color:#82eee0; } .yu-teaching-hero h1 { max-width:760px; font-size:clamp(48px,4.55vw,78px); text-wrap:balance; } .yu-teaching-hero h1 em { background:linear-gradient(100deg,#d4cbff,#9b8dff 68%,#79e5d8); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .yu-teaching-intro { max-width:530px; font-size:16px; } .yu-teaching-actions { margin-top:36px; } .yu-teaching-actions button { padding:16px 22px; border-radius:12px; background:linear-gradient(102deg,#866efb,#5041bd); }
  .yu-teaching-orbit { width:min(36vw,500px); filter:drop-shadow(0 26px 54px rgba(15,10,62,.32)); } .yu-teaching-orbit::before { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(137,117,255,.2),transparent 60%); filter:blur(24px); } .yu-teaching-orbit-core { inset:29%; }
  .yu-teaching-dock { grid-template-columns:1.05fr 1.12fr .95fr; border-color:rgba(192,184,255,.21); border-radius:22px; background:rgba(16,18,40,.78); backdrop-filter:blur(18px); } .yu-teaching-dock article { min-height:198px; padding:31px 33px; }
  .yu-teaching-dock-intro { position:relative; } .yu-teaching-dock-intro::after { content:"✦"; position:absolute; right:27px; bottom:22px; color:#79e5d8; font-size:18px; opacity:.68; } .yu-teaching-coming { background:linear-gradient(135deg,rgba(107,85,242,.27),rgba(14,197,178,.07)); } .yu-teaching-coming-icon { width:48px; height:48px; flex-basis:48px; background:linear-gradient(135deg,rgba(177,160,255,.3),rgba(101,79,228,.24)); }
  .yu-teaching-note { background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); } .yu-teaching-note strong { max-width:250px; line-height:1.45; } .yu-teaching-exit { border-color:rgba(210,201,255,.3); } .yu-teaching-status { padding-right:8px; border-right:1px solid rgba(214,209,244,.13); }
  @media (max-width:1180px) { .yu-teaching-hero { grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); } .yu-teaching-hero h1 { font-size:58px; } }

  /* Migrated teaching workspace */
  #desktop-yu-teaching.yu-teaching-page { padding:0; background:#090b18; }
  .yu-workspace-noise { position:fixed; inset:0; pointer-events:none; opacity:.3; background:radial-gradient(circle at 75% 0,rgba(128,99,255,.23),transparent 29%),radial-gradient(circle at 15% 100%,rgba(26,221,193,.1),transparent 30%); }
  .yu-workspace-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:28px; min-height:76px; padding:0 clamp(30px,4vw,80px); border-bottom:1px solid rgba(198,190,255,.14); background:rgba(9,11,24,.82); backdrop-filter:blur(22px); }
  .yu-wordmark { display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:#fff; text-align:left; cursor:pointer; } .yu-wordmark i { display:grid; place-items:center; width:34px; height:34px; border:1px solid #9586ff; border-radius:11px 11px 3px 11px; background:linear-gradient(135deg,#7c62e9,#332374); font:700 17px/1 serif; } .yu-wordmark small,.yu-wordmark b { display:block; } .yu-wordmark small { color:#8d889e; font-size:8px; letter-spacing:.14em; } .yu-wordmark b { margin-top:3px; font-size:13px; }
  .yu-workspace-nav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow:auto; scrollbar-width:none; } .yu-workspace-nav::-webkit-scrollbar { display:none; } .yu-workspace-nav button { flex:0 0 auto; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:#888497; font:12px inherit; cursor:pointer; transition:.16s; } .yu-workspace-nav button:hover { color:#dbd7f0; background:rgba(255,255,255,.05); } .yu-workspace-nav button.active { background:rgba(123,102,242,.2); color:#d9d1ff; box-shadow:inset 0 0 0 1px rgba(168,152,255,.22); }
  .yu-workspace-exit { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:7px 8px 7px 12px; border:1px solid rgba(224,220,255,.18); border-radius:99px; background:rgba(255,255,255,.03); color:#bbb5ce; font:12px inherit; cursor:pointer; } .yu-workspace-exit b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:16px; font-weight:400; }
  .yu-workspace-main { position:relative; z-index:1; width:min(1500px,calc(100% - 72px)); margin:0 auto; padding:44px 0 70px; } .yu-workspace-loading { display:grid; place-items:center; gap:14px; min-height:50vh; color:#9992ae; } .yu-workspace-loading i { width:28px; height:28px; border:2px solid rgba(160,144,255,.2); border-top-color:#9d8aff; border-radius:50%; animation:yuOrbit 1s linear infinite; }
  .yu-overview-hero { display:grid; grid-template-columns:1fr 370px; gap:30px; align-items:end; padding:50px; border:1px solid rgba(179,168,255,.19); border-radius:24px; background:linear-gradient(116deg,rgba(48,39,112,.58),rgba(16,18,42,.74) 57%,rgba(11,41,58,.47)); overflow:hidden; } .yu-overview-hero p,.yu-view-head span,.yu-panel header span,.yu-specials header span,.yu-decisions header span { margin:0 0 12px; color:#82eadb; font-size:10px; font-weight:700; letter-spacing:.16em; } .yu-overview-hero h1 { margin:0; color:#f7f4ff; font-size:clamp(42px,4.4vw,72px); line-height:1.1; letter-spacing:-.06em; } .yu-overview-hero h1 em { color:#b7aaff; font-style:normal; } .yu-overview-hero > div > span { display:block; max-width:560px; margin-top:21px; color:#a9a5bb; font-size:14px; line-height:1.7; } .yu-overview-hero aside { padding:24px; border:1px solid rgba(204,197,255,.17); border-radius:17px; background:rgba(8,10,25,.35); } .yu-overview-hero aside small,.yu-overview-hero aside b { display:block; color:#8d88a1; font-size:10px; letter-spacing:.09em; } .yu-overview-hero aside strong { display:block; margin:12px 0 8px; color:#e8e4ff; font-size:20px; } .yu-overview-hero aside p { margin:0 0 17px; color:#aaa6b8; font-size:12px; line-height:1.65; }
  .yu-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; } .yu-metric { min-height:118px; padding:20px; border:1px solid rgba(196,188,245,.13); border-radius:16px; background:rgba(18,20,42,.68); } .yu-metric span,.yu-metric small { display:block; color:#8e8a9d; font-size:11px; } .yu-metric strong { display:block; margin:12px 0 5px; color:#f2effc; font-size:26px; letter-spacing:-.04em; } .yu-metric.mint strong { color:#68ddcf; } .yu-metric.violet strong { color:#b9abff; } .yu-metric.gold strong { color:#f2c376; } .yu-metric.rose strong { color:#ef9ec2; }
  .yu-section-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:16px; } .yu-panel,.yu-specials,.yu-decisions { border:1px solid rgba(196,188,245,.13); border-radius:18px; background:rgba(15,17,37,.66); } .yu-panel { padding:24px; } .yu-panel header,.yu-specials header,.yu-decisions header { display:flex; align-items:start; justify-content:space-between; margin-bottom:19px; } .yu-panel h2,.yu-specials h2,.yu-decisions h2 { margin:0; color:#eeeafe; font-size:18px; } .yu-panel header button { border:0; background:transparent; color:#92e8dc; font-size:11px; cursor:pointer; }
  .yu-upcoming-row,.yu-task-row { display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid rgba(211,205,255,.09); } .yu-upcoming-row time { width:70px; color:#aca2e1; font-size:12px; } .yu-upcoming-row div,.yu-task-row div { min-width:0; flex:1; } .yu-upcoming-row strong,.yu-task-row strong { display:block; overflow:hidden; color:#e8e5f4; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .yu-upcoming-row small,.yu-task-row small { color:#817d91; font-size:10px; } .yu-upcoming-row i,.yu-task-row b { padding:4px 6px; border-radius:5px; background:rgba(121,98,242,.19); color:#c1b4ff; font-size:9px; font-style:normal; } .yu-task-row i { width:8px; height:8px; border:2px solid #72decf; border-radius:50%; } .yu-task-row b { background:rgba(81,212,196,.1); color:#75dfd3; font-weight:500; }
  .yu-view-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:27px; } .yu-view-head h1 { margin:0; color:#f2effb; font-size:34px; letter-spacing:-.05em; } .yu-view-head p { margin:9px 0 0; color:#9894a7; font-size:13px; } .yu-view-head > strong { color:#b7aaff; font-size:28px; text-align:right; } .yu-view-head > strong small { display:block; margin-top:3px; color:#898496; font-size:10px; font-weight:400; }
  .yu-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .yu-course-card { min-height:205px; padding:21px; border:1px solid rgba(199,191,247,.14); border-radius:17px; background:linear-gradient(145deg,rgba(36,32,76,.72),rgba(15,17,38,.72)); } .yu-course-card > div { display:flex; justify-content:space-between; } .yu-course-card i,.yu-course-card > div span { padding:4px 7px; border-radius:5px; color:#baaefe; background:rgba(119,99,232,.2); font-size:10px; font-style:normal; } .yu-course-card > div span { color:#7de4d8; background:rgba(57,188,171,.12); } .yu-course-card h3 { margin:25px 0 8px; color:#f1edfa; font-size:17px; } .yu-course-card p { min-height:36px; margin:0; color:#9893a9; font-size:11px; line-height:1.6; } .yu-course-card footer { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:23px; } .yu-course-card footer b { color:#f2c376; font-size:20px; } .yu-course-card footer small { color:#817c90; font-size:10px; text-align:right; }
  .yu-table-wrap { overflow:auto; border:1px solid rgba(200,193,245,.13); border-radius:17px; background:rgba(15,17,37,.68); } .yu-table { width:100%; border-collapse:collapse; min-width:780px; } .yu-table th { padding:13px 17px; border-bottom:1px solid rgba(205,199,246,.12); color:#817c91; font-size:10px; font-weight:600; letter-spacing:.1em; text-align:left; } .yu-table td { padding:14px 17px; border-bottom:1px solid rgba(205,199,246,.07); color:#b7b2c5; font-size:12px; } .yu-table tr:last-child td { border:0; } .yu-table td b,.yu-table td small { display:block; } .yu-table td b { color:#e4e0ef; font-size:12px; } .yu-table td small { margin-top:4px; color:#797589; font-size:10px; } .yu-status { display:inline-block; padding:4px 7px; border-radius:99px; background:rgba(178,165,255,.13); color:#bbaeef; font-size:10px; } .yu-status.is-live { background:rgba(77,213,193,.12); color:#72dece; }
  .yu-schedule-list { border:1px solid rgba(200,193,245,.13); border-radius:17px; overflow:hidden; background:rgba(15,17,37,.68); } .yu-schedule-list article { display:grid; grid-template-columns:74px 44px minmax(0,1fr) 100px; align-items:center; gap:16px; padding:17px 22px; border-bottom:1px solid rgba(205,199,246,.08); } .yu-schedule-list article:last-child { border:0; } .yu-schedule-list time b,.yu-schedule-list time small { display:block; } .yu-schedule-list time b { color:#ddd5ff; font-size:16px; } .yu-schedule-list time small { margin-top:3px; color:#777287; font-size:10px; } .yu-schedule-list i { padding:6px; border-radius:8px; background:rgba(132,111,248,.18); color:#c0b4ff; font-size:10px; font-style:normal; text-align:center; } .yu-schedule-list i.quick { background:rgba(48,192,177,.15); color:#76e1d5; } .yu-schedule-list strong { color:#e8e4f1; font-size:13px; } .yu-schedule-list p,.yu-schedule-list > span { margin:5px 0 0; color:#827d90; font-size:10px; } .yu-schedule-list article > span { color:#aaa4bb; }
  .yu-material-grid,.yu-team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .yu-material-grid article,.yu-team-grid article { padding:21px; border:1px solid rgba(199,191,247,.14); border-radius:17px; background:rgba(18,20,42,.68); } .yu-material-grid article > span { color:#86e6d9; font-size:10px; } .yu-material-grid h3,.yu-team-grid h3 { min-height:43px; margin:13px 0 8px; color:#e9e5f4; font-size:16px; } .yu-material-grid p { min-height:48px; margin:0; color:#9792a7; font-size:11px; line-height:1.6; } .yu-material-grid article > div { display:flex; justify-content:space-between; align-items:end; margin:18px 0; } .yu-material-grid article > div b { color:#f3c77e; font-size:18px; } .yu-material-grid article > div small { color:#797487; font-size:10px; text-align:right; } .yu-material-grid footer { display:flex; align-items:center; gap:10px; } .yu-material-grid footer i { flex:1; height:4px; border-radius:9px; background:#29263b; overflow:hidden; } .yu-material-grid footer em { display:block; height:100%; background:linear-gradient(90deg,#8571fa,#68ded0); } .yu-material-grid footer small { color:#858094; font-size:10px; }
  .yu-finance-hero { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; } .yu-finance-hero div { padding:27px; border:1px solid rgba(194,184,255,.16); border-radius:18px; background:linear-gradient(125deg,rgba(93,72,193,.32),rgba(22,24,50,.7)); } .yu-finance-hero span,.yu-finance-hero p { color:#a7a1b8; font-size:11px; } .yu-finance-hero strong { display:block; margin:10px 0 6px; color:#f2c376; font-size:32px; }
  .yu-task-board { border:1px solid rgba(200,193,245,.13); border-radius:17px; overflow:hidden; background:rgba(15,17,37,.68); } .yu-task-board article { display:grid; grid-template-columns:100px 12px 1fr auto; align-items:center; gap:17px; padding:17px 22px; border-bottom:1px solid rgba(205,199,246,.08); } .yu-task-board time { color:#b5aaf4; font-size:12px; } .yu-task-board i { width:9px; height:9px; border:2px solid #8e7ffc; border-radius:50%; } .yu-task-board i.done { border-color:#70dfd0; background:#70dfd0; } .yu-task-board strong { color:#e7e3f1; font-size:13px; } .yu-task-board p { margin:4px 0 0; color:#807b8e; font-size:10px; } .yu-task-board span { color:#9f95df; font-size:10px; } .yu-specials { margin-top:16px; padding:24px; } .yu-specials > div { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; padding:12px 0; border-top:1px solid rgba(205,199,246,.08); color:#9994a6; font-size:12px; } .yu-specials strong { color:#e5e1ef; } .yu-specials b { color:#7fe3d6; font-size:11px; }
  .yu-campaign { padding:27px; margin-bottom:16px; border:1px solid rgba(193,182,255,.19); border-radius:18px; background:linear-gradient(115deg,rgba(96,77,205,.33),rgba(15,35,56,.55)); } .yu-campaign span { color:#83e8da; font-size:10px; letter-spacing:.14em; } .yu-campaign h2 { margin:9px 0; color:#f0ebff; font-size:23px; } .yu-campaign p { margin:0; color:#aaa4bd; font-size:12px; } .yu-promotion-board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; } .yu-promotion-board > article { min-height:310px; padding:14px; border:1px solid rgba(200,193,245,.13); border-radius:16px; background:rgba(15,17,37,.68); } .yu-promotion-board > article > header { display:flex; justify-content:space-between; color:#c0b4ff; font-size:12px; } .yu-promotion-board > article > header b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(140,120,246,.18); font-size:10px; } .yu-promotion-board article > div { margin-top:12px; padding:13px; border:1px solid rgba(204,197,246,.11); border-radius:11px; background:rgba(255,255,255,.025); } .yu-promotion-board i { color:#79e4d6; font-size:9px; font-style:normal; } .yu-promotion-board h3 { margin:9px 0 6px; color:#e7e3f1; font-size:12px; line-height:1.45; } .yu-promotion-board p { margin:0; color:#888396; font-size:10px; line-height:1.55; } .yu-promotion-board footer { display:flex; justify-content:space-between; gap:6px; margin-top:13px; color:#797487; font-size:9px; }
  .yu-team-grid { margin-bottom:16px; } .yu-team-grid article > div { display:flex; justify-content:space-between; align-items:center; } .yu-team-grid article > div span { color:#7ce5d7; font-size:10px; } .yu-team-grid article > div b { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:rgba(135,115,247,.2); color:#c6baff; font-size:16px; } .yu-team-grid h3 { min-height:auto; margin:17px 0 4px; } .yu-team-grid p,.yu-team-grid small { color:#918c9e; font-size:11px; line-height:1.6; } .yu-team-grid footer { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:13px; border-top:1px solid rgba(205,199,246,.09); color:#837e91; font-size:10px; } .yu-team-grid footer strong { color:#efc47d; font-size:16px; }
  .yu-traffic-targets { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; } .yu-traffic-targets article { padding:18px; border:1px solid rgba(200,193,245,.13); border-radius:15px; background:rgba(15,17,37,.68); } .yu-traffic-targets span,.yu-traffic-targets p { color:#858093; font-size:10px; } .yu-traffic-targets strong { display:block; margin:11px 0 4px; color:#b8abff; font-size:22px; } .yu-traffic-targets div { margin-top:16px; color:#9691a3; font-size:10px; line-height:1.7; } .yu-traffic-targets div b { color:#75dfd2; } .yu-decisions { padding:24px; } .yu-decisions article { display:grid; grid-template-columns:110px 1fr auto; gap:16px; padding:15px 0; border-top:1px solid rgba(205,199,246,.08); } .yu-decisions time { color:#b4aaf0; font-size:11px; } .yu-decisions strong { color:#e5e1f0; font-size:13px; } .yu-decisions p { margin:5px 0 0; color:#858092; font-size:11px; } .yu-decisions b { color:#76ded1; font-size:10px; font-weight:500; }
  .yu-empty { padding:35px; color:#807b90; font-size:12px; text-align:center; }
  @media (max-width:1200px) { .yu-workspace-main { width:calc(100% - 44px); } .yu-workspace-nav { gap:0; } .yu-workspace-nav button { padding:8px; } .yu-overview-hero { grid-template-columns:1fr 310px; } .yu-card-grid,.yu-material-grid,.yu-team-grid { grid-template-columns:repeat(2,1fr); } .yu-traffic-targets { grid-template-columns:repeat(3,1fr); } .yu-promotion-board { grid-template-columns:repeat(2,1fr); } }

  /* The React workbench sits in a completely independent full-screen frame. */
  #desktop-yu-teaching.yu-teaching-app-frame { overflow:hidden; padding:0; background:#0a0b18; width:auto !important; }
  .yu-teaching-iframe { display:block; width:100%; min-width:0; height:100%; min-height:100%; border:0; background:#0a0b18; }
  /* This belongs to the desktop shell, not the workbench toolbar inside the iframe. */
  .yu-teaching-frame-exit { position:fixed; z-index:130; top:14px; right:18px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid rgba(222,216,255,.22); border-radius:50%; background:rgba(28,25,54,.9); color:#e5e0f8; box-shadow:0 7px 20px rgba(0,0,0,.22); backdrop-filter:blur(12px); font:12px "IBM Plex Sans","PingFang SC",sans-serif; cursor:pointer; transition:width .18s ease, border-color .18s ease, background .18s ease, border-radius .18s ease; }
  .yu-teaching-frame-exit span { position:absolute; right:40px; top:50%; width:max-content; padding:6px 9px; border:1px solid rgba(222,216,255,.16); border-radius:6px; background:rgba(28,25,54,.96); color:#f4f1ff; font-size:11px; line-height:1; opacity:0; pointer-events:none; transform:translateY(-50%) translateX(4px); transition:opacity .16s ease, transform .16s ease; white-space:nowrap; }
  .yu-teaching-frame-exit:hover { border-color:#a998ff; background:#4b3ba3; } .yu-teaching-frame-exit:hover span,.yu-teaching-frame-exit:focus-visible span { opacity:1; transform:translateY(-50%) translateX(0); } .yu-teaching-frame-exit:focus-visible { outline:2px solid #b7a8ff; outline-offset:3px; } .yu-teaching-frame-exit b { display:block; font-size:18px; font-weight:400; line-height:1; transform:translateY(-1px); }
  .yu-teaching-context-menu { position:fixed; z-index:160; min-width:136px; height:34px; padding:0 12px; border:1px solid rgba(201,191,255,.35); border-radius:8px; background:#211d43; color:#eeeaff; box-shadow:0 12px 28px rgba(0,0,0,.32); font:12px "IBM Plex Sans","PingFang SC",sans-serif; text-align:left; cursor:pointer; } .yu-teaching-context-menu:hover { background:#392c79; }
}