/* Shared brand language, derived from the supplied AI Beauty 2026 artwork. */
:root { --lu-night:#050916; --lu-panel:#0c1426; --lu-panel-2:#101e34; --lu-line:#213048; --lu-cyan:#42e4ed; --lu-purple:#a591ff; --lu-text:#f1f6ff; --lu-muted:#90a0bb; --lu-art:url('/assets/brand-universe/ai-beauty-2026.png?v=20261020'); }
html.lu-entry-pending { background:#030716; }
html.lu-entry-pending body> :not(.portal-entry) { visibility:hidden; }
.lu-page,.lu-demo { margin:0; color:var(--lu-text); background:var(--lu-night); font-family:Inter,'Microsoft YaHei','PingFang SC',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.lu-page *,.lu-demo *,.portal-entry * { box-sizing:border-box; }
.lu-page a,.lu-demo a { color:inherit; text-decoration:none; }
.lu-page button,.lu-demo button,.portal-entry button { font-family:inherit; cursor:pointer; }
.lu-page svg,.lu-demo svg { width:20px; height:20px; flex-shrink:0; }
.lu-enabled :focus-visible { outline:2px solid #55e8f1; outline-offset:5px; }
.lu-orbit { position:relative; display:inline-grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid #b7edff; border-radius:50%; background:radial-gradient(circle at 65% 20%,#4b8bbb99,transparent 30%),radial-gradient(circle,#060a20 40%,#253c8a 64%,#75efff 70%,#081128 78%); box-shadow:0 0 15px #24adf43b,inset 0 0 7px #a1bbff80; }
.lu-orbit::after { content:''; position:absolute; inset:3px -3px; border:1px solid #9586ee; border-radius:50%; transform:rotate(-30deg); }
.lu-orbit i { width:5px; height:5px; background:#91ffff; border-radius:50%; box-shadow:0 0 9px #54e2fc; }
.lu-lockup { display:inline-flex; gap:12px; align-items:center; color:#eef6ff; text-decoration:none; white-space:nowrap; }
.lu-lockup strong { font-size:20px; font-weight:600; letter-spacing:3px!important; }
.lu-lockup small { display:block; font-size:8px; margin-top:5px; color:#91a3be; letter-spacing:1.8px!important; }
.lu-kicker { font-size:10px; font-weight:500; letter-spacing:2px!important; color:#62dce9; margin:0; line-height:1.6; }
.lu-button { display:inline-flex; justify-content:center; align-items:center; gap:20px; min-height:46px; padding:12px 22px; border:1px solid #60e7f1; border-radius:6px; color:#041321!important; background:linear-gradient(110deg,#70f0eb,#41cbee); font-weight:650; font-size:13px; text-decoration:none; box-shadow:0 0 30px #29ccea16; }
.lu-button svg { width:20px; height:20px; }
.lu-button:hover { filter:brightness(1.1); transform:translateY(-2px); }
.lu-button.secondary { border-color:#2e435e; background:#101d32; color:#dbe8fb!important; box-shadow:none; }
.lu-header { display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:1440px; padding:24px 4.5%; margin:auto; }
.lu-header nav { display:flex; align-items:center; gap:32px; font-size:12px; color:#9dacbf; }
.lu-header nav a:hover { color:#65e9ef; }
.lu-preview-tag { font-size:10px; color:#93a2ba; border:1px solid #26364f; border-radius:4px; padding:7px 11px; white-space:nowrap; }
.lu-home-hero { position:relative; text-align:center; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#102d57 0,transparent 66%); }
.lu-home-art { width:100%; aspect-ratio:4536/2552; background:var(--lu-art) center / contain no-repeat; margin:0; }
.lu-hero-caption { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1320px; margin:-1px auto 0; padding:28px 32px 32px; text-align:left; border-bottom:1px solid var(--lu-line); }
.lu-hero-caption h1 { margin:10px 0 8px; font-size:clamp(25px,2.7vw,38px); font-weight:550; letter-spacing:1px; }
.lu-hero-caption p:not(.lu-kicker) { margin:0; color:#99abc4; font-size:12px; line-height:1.8; }
.lu-section { max-width:1320px; margin:0 auto; padding:38px 32px; }
.lu-section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.lu-section-title h2 { margin:7px 0 0; font-size:23px; font-weight:550; }
.lu-section-title p { color:var(--lu-muted); font-size:12px; margin:0; }
.lu-mode-switch,.lu-brand-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--lu-line); border-radius:7px; background:#070e1d; }
.lu-mode-switch button,.lu-brand-switch button { border:0; background:transparent; padding:9px 15px; font-size:12px; color:#94a7c2; border-radius:4px; }
.lu-mode-switch button[aria-pressed=true],.lu-brand-switch button[aria-pressed=true] { background:#173146; color:#79eef0; }
.lu-portal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lu-port-card { position:relative; display:block; min-width:0; padding:22px; border:1px solid #233049; border-radius:9px; color:#eff5ff; background:linear-gradient(135deg,#111d32,#0a1222 70%); transition:transform .2s,border-color .2s,box-shadow .2s; overflow:hidden; }
.lu-port-card::after { content:''; position:absolute; right:-40px; top:-50px; width:110px; height:110px; border:1px solid var(--port-color); border-radius:50%; opacity:.13; box-shadow:0 0 0 16px #7497ed0c,0 0 0 32px #7497ed08; }
.lu-port-card:hover { transform:translateY(-4px); border-color:var(--port-color); box-shadow:0 14px 30px #0004; }
.lu-card-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; }
.lu-port-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #31425d; border-radius:11px; color:var(--port-color); background:#16233b; }
.lu-port-icon svg { width:22px; height:22px; }
.lu-index { font-size:11px; color:#53677f; font-family:monospace; }
.lu-port-card>small { display:block; color:var(--port-color); font-size:8px; letter-spacing:1.4px; }
.lu-port-card h3 { font-weight:550; font-size:20px; margin:9px 0; }
.lu-port-card p { font-size:11px; line-height:1.7; margin:0; color:#8e9fba; }
.lu-card-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #25334b; padding-top:17px; margin-top:22px; font-size:11px; color:#c5d4e8; }
.lu-card-link svg { width:16px; height:16px; color:var(--port-color); }
.lu-family { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px 30px; background:linear-gradient(110deg,#0e2035,#13172d); border:1px solid #28364f; border-radius:9px; }
.lu-family h3 { font-size:18px; font-weight:550; margin:7px 0; }
.lu-family p { color:var(--lu-muted); font-size:12px; margin:0; }
.lu-family-brands { display:flex; gap:40px; }
.lu-family-brands a { text-align:center; font-size:10px; color:#9faac0; }
.lu-family-brands img { display:block; margin:0 auto 10px; width:95px; height:37px; object-fit:contain; background:#fff; padding:6px; border-radius:4px; }
.lu-footer { max-width:1256px; margin:0 auto; padding:25px 0; border-top:1px solid var(--lu-line); display:flex; gap:20px; justify-content:space-between; font-size:10px; color:#7789a4; }
.lu-footer a { color:#a2b3cc; }
/* Carry the reference into existing working screens without changing their layout. */
html.lu-enabled body.brand-experience { --lx-brand-primary:#0b2856; --lx-brand-accent:#35ccdf; --lx-brand-metal:#a595ed; }
html.lu-enabled body.brand-experience .lx-atmosphere::before { background-image:linear-gradient(#edf3f9eb,#edf3f9f5),var(--lu-art); }
html.lu-enabled body.brand-experience :is(.beauty-os-hero,.agent-overview-hero,.agent-head,.teacher-inbox-hero,.teacher-head,.teacher-command-hero,.agent-role-hero,.customer-chat-head,.simple-entry-head) { background-color:#07142b; background-image:linear-gradient(90deg,#050c21ed,#071a36ba),var(--lu-art); background-position:center; background-size:cover; border-color:#41758e; }
html.lu-enabled body.brand-experience :is(.sidebar,.agent-sidebar) { background-image:linear-gradient(#060c1bdd,#071327ed),var(--lu-art); }
html.lu-enabled body.brand-experience :is(.primary-button,.primary-btn,.btn-primary) { background:linear-gradient(115deg,#136587,#425daa); border-color:#3e9dbd; color:#fff; }
html.lu-enabled body.brand-experience :is(.metric-card,.surface-panel,.teacher-command-center,.customer-shell,.login-card) { border-color:#a8c5da; }
html.lu-enabled body.brand-experience .teacher-social-chat .teacher-chat.is-user>div { background:linear-gradient(125deg,#163e60,#172e50); border-color:#39798c; color:#f0faff; }
html.lu-enabled body.brand-experience .teacher-social-chat .teacher-chat.is-user :is(p,b,em,time,.teacher-chat-trace) { color:#e1f3ff; }
html.lu-enabled body.brand-experience :is(.auth-page,.teacher-login,.register-page) { background-image:linear-gradient(100deg,#050b20e8,#081c3bbb),var(--lu-art); background-position:center; background-size:cover; }
@media(max-width:1000px) { .lu-portal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .lu-family-brands { gap:20px; } .lu-header nav { gap:18px; } }
@media(max-width:680px) { .lu-header { padding:18px 20px; } .lu-header nav { display:none; } .lu-lockup strong { font-size:17px; } .lu-lockup small { font-size:7px; } .lu-home-art { height:310px; background-size:auto 100%; background-position:39% center; } .lu-hero-caption { padding:22px 24px 28px; display:block; } .lu-hero-caption .lu-button { margin-top:22px; width:100%; justify-content:space-between; } .lu-section { padding:28px 20px; } .lu-section-title { align-items:start; flex-direction:column; gap:18px; } .lu-section-title h2 { font-size:22px; } .lu-portal-grid { gap:10px; } .lu-port-card { padding:17px 13px; } .lu-card-top { margin-bottom:20px; } .lu-port-card h3 { font-size:18px; } .lu-port-card>small { font-size:7px; letter-spacing:.5px; } .lu-port-card p { font-size:10px; min-height:34px; } .lu-family { padding:24px 20px; flex-direction:column; align-items:start; } .lu-family-brands { width:100%; justify-content:space-between; gap:8px; margin-top:8px; } .lu-family-brands img { width:78px; } .lu-footer { margin:0 20px; flex-wrap:wrap; line-height:1.8; } }
@media(prefers-reduced-motion:reduce) { .lu-enabled *, .lu-enabled *::before,.lu-enabled *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:680px) { .lu-header { gap:12px; } }
@media(max-width:680px) { .lu-home-art { height:auto; background-size:contain; background-position:center; } }