:root {
  color-scheme: dark;
  --bg: #07070e;
  --panel: #0c0c17;
  --panel-2: #11111e;
  --panel-3: #171525;
  --line: rgba(205, 193, 224, 0.14);
  --line-strong: rgba(205, 193, 224, 0.28);
  --text: #f5f0ea;
  --muted: #aaa4b5;
  --muted-2: #706b7f;
  --gold: #e9bb65;
  --gold-light: #ffe0a3;
  --gold-dark: #8c5d25;
  --violet: #7436e4;
  --violet-soft: #9a6af3;
  --success: #83ddb3;
  --danger: #ef7b87;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: #05050b; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; }
svg { width: 1em; height: 1em; display: block; }
.is-hidden { display: none !important; }

.splash-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 11% 8%, rgba(90, 36, 188, .38), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(86, 31, 167, .28), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(32, 17, 58, .5), transparent 44%),
    linear-gradient(145deg, #080810, #0b0916 52%, #08060f);
}
.splash-screen::after {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle, #000, transparent 76%);
}
.splash-orbit { position: absolute; left: -12%; right: -12%; height: 250px; border: 2px solid rgba(127, 64, 236, .2); border-radius: 50%; transform: rotate(8deg); box-shadow: 0 0 80px rgba(91, 39, 193, .16); }
.orbit-a { top: 21%; }
.orbit-b { bottom: 18%; transform: rotate(-9deg); }
.timeline-ghost { position: absolute; width: 42%; height: 190px; opacity: .24; border-block: 1px solid rgba(129,81,218,.18); }
.timeline-ghost::before, .timeline-ghost::after { content:""; position:absolute; left:5%; right:8%; height:34px; border-radius:4px; background: linear-gradient(90deg, rgba(103,42,210,.55), rgba(95,43,159,.1)); box-shadow: 0 68px 0 rgba(79,31,154,.18); }
.timeline-ghost::before { top: 28px; }
.timeline-ghost-left { left:-3%; top:38%; transform:rotate(6deg); }
.timeline-ghost-right { right:-4%; bottom:20%; transform:rotate(-5deg); }
.splash-content { position:relative; z-index:2; width:min(630px,70vw); text-align:center; transform:translateY(-1.5vh); }
.logo-stage { position:relative; width:270px; height:230px; margin:0 auto -2px; display:grid; place-items:center; }
.logo-aura { position:absolute; width:170px; height:100px; border-radius:50%; background:rgba(117,52,224,.5); filter:blur(55px); animation:aura 2.2s ease-in-out infinite alternate; }
.splash-logo { position:relative; width:248px; height:210px; object-fit:contain; filter:drop-shadow(0 20px 34px rgba(0,0,0,.55)); animation:logoIn 1s cubic-bezier(.2,.8,.2,1) both; }
.splash-content h1 { margin:0; font:500 62px/1.05 "STSong", "SimSun", serif; letter-spacing:.16em; text-indent:.16em; color:#f5ece1; text-shadow:0 2px 18px rgba(255,220,169,.12); }
.brand-en { margin:12px 0 14px; font:300 30px/1.2 "Segoe UI", sans-serif; letter-spacing:.25em; text-indent:.25em; color:#f4eee9; }
.slogan { display:flex; align-items:center; justify-content:center; gap:20px; color:#c9c1bc; letter-spacing:.38em; text-indent:.38em; font-size:17px; }
.slogan span { width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.slogan span:last-child { transform:scaleX(-1); }
.loading-track { width:74%; height:5px; margin:70px auto 18px; border:1px solid rgba(175,137,232,.4); border-radius:99px; background:rgba(24,18,37,.75); overflow:hidden; }
.loading-track i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#d39945,#ffe5b4 63%,#fff2d3); box-shadow:0 0 18px rgba(255,205,123,.8); transition:width .2s ease; }
.loading-text { margin:0; color:#aaa4af; letter-spacing:.06em; }
.skip-splash { position:absolute; right:34px; bottom:28px; z-index:3; border:0; background:transparent; color:#777184; cursor:pointer; padding:10px 14px; }
.skip-splash:hover { color:var(--gold-light); }
@keyframes logoIn { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes aura { to { transform:scale(1.2); opacity:.68; } }

.home-screen { position:relative; display:grid; grid-template-columns:430px 160px minmax(0,1fr); width:100%; height:100%; background:#080811; }
.login-panel { position:relative; overflow:hidden; padding:44px 42px 22px; background: radial-gradient(circle at 7% 5%, rgba(100,42,207,.54), transparent 36%), linear-gradient(165deg,#110c22,#0b0a15 48%,#14102a); border-right:1px solid rgba(230,208,255,.16); }
.login-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 75%,rgba(255,255,255,.025)); }
.ambient-ribbon { position:absolute; width:560px; height:120px; border-radius:50%; border:2px solid rgba(137,71,255,.25); filter:blur(2px); transform:rotate(-30deg); }
.ribbon-top { top:-30px; left:-110px; box-shadow:0 0 50px rgba(129,61,255,.18); }
.ribbon-bottom { bottom:40px; left:-50px; transform:rotate(-46deg); opacity:.55; }
.brand-block { position:relative; z-index:1; text-align:center; }
.brand-block img { width:160px; height:140px; object-fit:contain; filter:drop-shadow(0 14px 28px rgba(0,0,0,.42)); }
.brand-block h1 { margin:-2px 0 0; font:500 42px/1.05 "STSong", "SimSun", serif; letter-spacing:.14em; text-indent:.14em; color:#f4e9dc; }
.brand-block > p { margin:8px 0; font:300 22px/1 "Segoe UI", sans-serif; letter-spacing:.17em; text-indent:.17em; }
.brand-tagline { display:flex; justify-content:center; align-items:center; gap:12px; color:#b9b0b5; font-size:13px; letter-spacing:.32em; text-indent:.32em; }
.brand-tagline span { width:34px; height:1px; background:var(--gold); }
.login-card { position:relative; z-index:2; margin-top:26px; padding:0 28px 22px; border:1px solid rgba(231,206,255,.25); border-radius:14px; background:linear-gradient(145deg,rgba(21,18,34,.88),rgba(31,23,49,.75)); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.login-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(255,255,255,.08); }
.login-tab { position:relative; height:62px; border:0; background:none; color:#aaa3b1; font-size:16px; cursor:pointer; }
.login-tab::after { content:""; position:absolute; height:2px; left:26%; right:26%; bottom:-1px; border-radius:2px; background:transparent; }
.login-tab.is-active { color:#fff4e5; }
.login-tab.is-active::after { background:linear-gradient(90deg,#b87931,#ffe2a0,#b87931); box-shadow:0 0 10px rgba(239,185,91,.46); }
.login-view { display:none; min-height:220px; }
.login-view.is-active { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qr-code { width:132px; height:132px; display:grid; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr); gap:1px; padding:8px; margin:16px 0 10px; background:#f5f2ee; border-radius:6px; box-shadow:0 0 0 1px #fff,0 10px 30px rgba(0,0,0,.3); }
.qr-code i { background:transparent; }
.qr-code i.on { background:#111018; }
.qr-code .qr-logo { grid-column:9 / span 5; grid-row:9 / span 5; z-index:2; border-radius:4px; background:#1a1028 url("../assets/veyra-logo.png") center/85% no-repeat; box-shadow:0 0 0 2px white; }
.login-hint { margin:4px 0 10px; font-size:13px; color:#aaa4b3; }
.phone-login { gap:12px; align-items:stretch !important; padding:21px 0 10px; }
.phone-login label { display:grid; gap:6px; width:100%; color:#aaa4b3; font-size:12px; }
.input-shell { display:flex; align-items:center; height:42px; border:1px solid var(--line-strong); border-radius:7px; background:rgba(7,7,14,.55); overflow:hidden; }
.input-shell:focus-within { border-color:rgba(231,184,97,.7); box-shadow:0 0 0 3px rgba(231,184,97,.08); }
.input-shell b { padding:0 12px; border-right:1px solid var(--line); font-weight:500; color:#d8d0c8; }
.input-shell input { min-width:0; flex:1; height:100%; padding:0 12px; border:0; outline:0; color:var(--text); background:transparent; user-select:text; }
.input-shell button { align-self:stretch; padding:0 12px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--gold-light); cursor:pointer; font-size:12px; }
.primary-login { height:42px; border:1px solid #b67d32; border-radius:7px; background:linear-gradient(135deg,#d29a49,#f2cc7e); color:#211307; font-weight:700; cursor:pointer; }
.primary-login:disabled { opacity:.58; cursor:wait; }
.register-link { margin-top:-5px; border:0; background:transparent; color:#a99eb7; font-size:11px; cursor:pointer; }
.register-link:hover { color:var(--gold-light); }
.agreement { display:flex; align-items:center; justify-content:center; gap:8px; color:#8f8999; font-size:11px; cursor:pointer; }
.agreement input { position:absolute; opacity:0; }
.agreement i { width:15px; height:15px; border:1px solid #8f8798; border-radius:3px; display:grid; place-items:center; }
.agreement input:checked + i { border-color:var(--gold); background:var(--gold); }
.agreement input:checked + i::after { content:"✓"; color:#23180b; font-size:11px; font-weight:800; }
.other-login { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:#817b8b; font-size:11px; }
.other-login::before,.other-login::after { content:""; flex:1; height:1px; background:var(--line); }
.social-logins { display:flex; justify-content:center; gap:24px; }
.social-logins button { width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%; background:rgba(7,7,14,.38); color:#d7d1dc; cursor:pointer; transition:.2s ease; }
.social-logins button:hover { border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.login-footer { position:absolute; bottom:15px; left:0; right:0; text-align:center; color:#625d70; font-size:11px; letter-spacing:.55em; }

.main-nav { display:flex; flex-direction:column; border-right:1px solid var(--line); background:linear-gradient(180deg,#0b0b14,#090910); }
.nav-spacer { height:58px; flex:0 0 auto; border-bottom:1px solid rgba(255,255,255,.035); -webkit-app-region:drag; }
.nav-item { position:relative; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:0; background:transparent; color:#8d8798; cursor:pointer; transition:.2s ease; }
.nav-item svg { width:28px; height:28px; stroke-width:1.6; }
.nav-item b { font-size:14px; font-weight:500; }
.nav-item:hover { color:#dbd4dd; background:rgba(255,255,255,.018); }
.nav-item.is-active { color:var(--gold-light); background:linear-gradient(90deg,rgba(149,94,33,.28),rgba(52,40,29,.12)); }
.nav-item.is-active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 4px 4px 0; background:linear-gradient(#f6d792,#c28536); box-shadow:0 0 12px rgba(235,185,92,.5); }
.nav-bottom { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 0; color:#56515f; font-size:10px; }
.nav-mini { width:32px; height:32px; display:grid; place-items:center; border:1px solid transparent; border-radius:7px; background:transparent; color:#625d6b; cursor:pointer; }
.nav-mini:hover { color:#bbb3c2; border-color:var(--line); }

.workspace { min-width:0; height:100%; background:radial-gradient(circle at 82% -10%,rgba(89,38,171,.14),transparent 31%),linear-gradient(145deg,#090910,#07070d); }
.workspace-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 34px 0 26px; -webkit-app-region:drag; }
.workspace-header button,.workspace-header input,.workspace-header .search-box,.window-actions button { -webkit-app-region:no-drag; }
.search-box { width:min(470px,48%); height:42px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid var(--line-strong); border-radius:9px; background:rgba(20,18,31,.82); color:#777181; }
.search-box:focus-within { border-color:rgba(166,113,239,.55); box-shadow:0 0 0 3px rgba(122,61,210,.08); }
.search-box input { flex:1; min-width:0; border:0; outline:0; background:none; color:#e8e2ea; user-select:text; }
.search-box input::placeholder { color:#6f697a; }
.header-actions { display:flex; align-items:center; gap:24px; margin-right:40px; }
.view-switch { display:flex; height:38px; border:1px solid var(--line); border-radius:9px; padding:3px; background:#0e0d17; }
.view-switch button { width:48px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#716b7a; cursor:pointer; }
.view-switch button.is-active { color:var(--gold-light); background:linear-gradient(135deg,rgba(149,97,43,.24),rgba(83,56,32,.15)); box-shadow:inset 0 0 0 1px rgba(223,176,91,.15); }
.profile-button { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:linear-gradient(#201d2d,#12111b); color:#ddd6df; cursor:pointer; }
.profile-button i { position:absolute; width:8px; height:8px; right:-1px; bottom:2px; border:2px solid #0a0a11; border-radius:50%; background:#6fdbac; }
.window-actions { position:absolute; top:0; right:10px; height:40px; display:flex; z-index:5; }
.window-actions button { width:42px; border:0; background:transparent; color:#aaa4af; font-size:19px; cursor:pointer; }
.window-actions button:hover { background:rgba(255,255,255,.06); color:#fff; }
.window-actions button:last-child:hover { background:#a8323d; }
.workspace-scroller { height:calc(100% - 82px); overflow:auto; padding:0 34px 44px 26px; scrollbar-color:#2d2739 transparent; scrollbar-width:thin; }
.hero-card { position:relative; height:220px; overflow:hidden; display:flex; align-items:center; padding:38px 70px; border:1px solid rgba(145,79,239,.43); border-radius:12px; background:radial-gradient(circle at 83% 50%,rgba(105,42,176,.27),transparent 27%),linear-gradient(115deg,#130b2e,#0b0914 58%,#1a0c30); box-shadow:inset 0 0 50px rgba(91,41,166,.12); }
.hero-card::before { content:""; position:absolute; inset:-65% -10%; border:2px solid rgba(147,70,246,.18); border-radius:50%; transform:rotate(-8deg); box-shadow:0 0 42px rgba(121,52,221,.18); }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-kicker { color:#71678c; font:600 10px/1.2 "Segoe UI", sans-serif; letter-spacing:.22em; }
.hero-copy h2 { display:flex; align-items:center; gap:25px; margin:12px 0 14px; font:500 52px/1 "STSong","SimSun",serif; letter-spacing:.08em; color:#f6eadf; }
.hero-copy h2 button { width:55px; height:55px; display:grid; place-items:center; border:2px solid var(--gold-light); border-radius:50%; color:var(--gold-light); background:rgba(109,67,25,.16); cursor:pointer; box-shadow:0 0 23px rgba(227,172,76,.18); transition:.2s ease; }
.hero-copy h2 button:hover { transform:translateX(4px); background:rgba(207,148,61,.2); }
.hero-copy p { display:flex; align-items:center; gap:14px; margin:0; color:#bcb2ba; letter-spacing:.36em; }
.hero-copy p span { width:42px; height:1px; background:var(--gold); }
.lens-art { position:absolute; right:9%; top:-46%; width:340px; height:340px; border-radius:50%; border:26px solid rgba(22,13,41,.88); box-shadow:0 0 0 2px rgba(226,176,88,.46),0 0 0 11px #0d0917,0 0 0 13px rgba(111,61,190,.55),inset 0 0 35px rgba(0,0,0,.9),0 0 45px rgba(140,74,236,.25); }
.lens-art::before { content:""; position:absolute; inset:16%; border-radius:50%; border:1px solid rgba(239,193,111,.75); box-shadow:0 0 0 9px #090710,0 0 0 11px rgba(117,64,188,.5),inset 0 0 40px #000; }
.lens-art i { position:absolute; top:50%; left:50%; width:48%; height:2px; transform-origin:left; background:linear-gradient(90deg,rgba(237,187,99,.7),transparent); }
.lens-art i:nth-child(2) { transform:rotate(45deg); }.lens-art i:nth-child(3){transform:rotate(90deg)}.lens-art i:nth-child(4){transform:rotate(135deg)}
.hero-words { position:absolute; right:26px; top:58px; text-align:center; color:#655d79; font:500 10px/1.3 "Segoe UI",sans-serif; letter-spacing:.28em; }
.hero-words span { color:#8c703e; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:15px 0 22px; }
.quick-card { min-height:96px; display:flex; align-items:center; gap:17px; padding:18px 26px; border:1px solid var(--line-strong); border-radius:11px; background:linear-gradient(135deg,rgba(24,22,37,.82),rgba(14,13,23,.88)); text-align:left; cursor:pointer; transition:.2s ease; }
.quick-card:hover { border-color:rgba(225,180,95,.5); transform:translateY(-1px); background:linear-gradient(135deg,rgba(39,30,42,.9),rgba(17,15,26,.9)); }
.quick-icon { width:48px; height:48px; display:grid; place-items:center; color:#eee7eb; }
.quick-icon svg { width:40px; height:40px; stroke-width:1.4; }
.quick-card > span:nth-child(2) { flex:1; display:grid; gap:8px; }
.quick-card b { font-size:17px; font-weight:600; }.quick-card small { color:#807989; font-size:12px; }
.content-section,.ai-history { margin-top:10px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 12px; }
.section-heading h3 { margin:4px 0 0; font-size:20px; font-weight:600; }
.section-heading button { display:flex; align-items:center; gap:3px; border:0; background:none; color:#938c9a; cursor:pointer; font-size:12px; }
.section-heading button:hover { color:var(--gold-light); }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.project-card { min-width:0; }
.project-preview { position:relative; height:132px; overflow:hidden; border:1px solid var(--line-strong); border-radius:9px; background:#15111f; cursor:pointer; transition:.2s ease; }
.project-preview:hover { border-color:rgba(222,175,88,.57); transform:translateY(-2px); box-shadow:0 13px 26px rgba(0,0,0,.24); }
.project-art { position:absolute; inset:0; overflow:hidden; }
.project-art::before,.project-art::after { content:""; position:absolute; }
.project-art.mountain { background:linear-gradient(180deg,#463c73,#c29186 58%,#151326 59%); }
.project-art.mountain::before { left:-10%; right:-10%; bottom:-12%; height:72%; background:#181625; clip-path:polygon(0 100%,18% 44%,31% 70%,49% 8%,68% 71%,80% 46%,100% 100%); box-shadow:inset 0 12px 18px rgba(181,136,174,.28); }
.project-art.mountain::after { width:64%; height:2px; left:18%; top:24%; background:linear-gradient(90deg,transparent,#ead5bd,transparent); box-shadow:0 0 18px #e7c9c4; transform:rotate(-7deg); }
.project-art.wave { background:radial-gradient(circle at 76% 34%,#bb8a4f 0 2%,transparent 9%),linear-gradient(145deg,#0a0710,#25103f); }
.project-art.wave::before { inset:24% -15% auto -15%; height:64%; border-radius:50%; border:9px solid transparent; border-top-color:#8e41e6; border-bottom-color:#e1ae5f; transform:rotate(-9deg); filter:drop-shadow(0 0 8px #6a2cc4); }
.project-art.product { background:radial-gradient(ellipse at 53% 74%,#4e1984,transparent 38%),linear-gradient(135deg,#05040a,#180d2b); }
.project-art.product::before { width:44px; height:80px; left:calc(50% - 22px); bottom:16px; border:1px solid #f5d08b; border-radius:5px 5px 10px 10px; background:linear-gradient(105deg,#16111c,#4f284e 50%,#0e0b10); box-shadow:0 0 16px rgba(198,91,255,.85),10px 8px 0 -7px #bb853e; }
.project-art.product::after { left:4%; right:3%; bottom:17%; height:2px; border-radius:50%; background:#9b3de0; box-shadow:0 -20px 21px #6a26ab,0 14px 18px #46156f; transform:rotate(-8deg); }
.project-art.blank { background:linear-gradient(135deg,#191424,#0b0911); }
.project-art.blank::before { width:110px; height:110px; left:calc(50% - 55px); top:12px; border:1px solid rgba(202,167,240,.22); border-radius:50%; box-shadow:0 0 38px rgba(118,58,201,.18); }
.duration { position:absolute; left:9px; bottom:8px; padding:4px 8px; border-radius:5px; background:rgba(4,4,8,.78); color:#eee9ee; font-size:10px; }
.cloud-badge { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; padding:4px 7px; border-radius:6px; background:rgba(7,15,13,.78); color:#a0e5c2; font-size:9px; }
.project-menu-button { position:absolute; top:8px; right:8px; width:28px; height:25px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(7,7,12,.74); color:#d5ced8; cursor:pointer; }
.project-info { position:relative; padding:9px 3px 0; }
.project-info strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:600; }
.project-info small { display:block; margin-top:5px; color:#746e7c; font-size:10px; }
.project-menu { position:absolute; right:0; top:5px; z-index:8; width:108px; padding:5px; border:1px solid var(--line-strong); border-radius:8px; background:#171522; box-shadow:var(--shadow); }
.project-menu button { width:100%; padding:8px 10px; border:0; border-radius:5px; background:none; text-align:left; color:#bcb5c2; cursor:pointer; font-size:11px; }
.project-menu button:hover { background:rgba(255,255,255,.06); color:#fff; }
.project-menu button.danger { color:#d98891; }
.project-grid.list-view { grid-template-columns:1fr; gap:8px; }
.project-grid.list-view .project-card { display:grid; grid-template-columns:190px 1fr; min-height:88px; border:1px solid var(--line); border-radius:9px; background:rgba(18,17,28,.5); overflow:hidden; }
.project-grid.list-view .project-preview { height:88px; border:0; border-radius:0; }
.project-grid.list-view .project-info { padding:20px; }
.empty-state { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--line-strong); border-radius:11px; background:rgba(17,15,25,.35); color:#8e8796; }
.empty-icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:17px; color:#766c87; }
.empty-icon svg { width:30px; height:30px; }.empty-state h3 { margin:14px 0 4px; color:#cdc5d0; }.empty-state p { margin:0 0 18px; font-size:12px; }
.ai-history { margin-top:26px; }
.ai-history-row { width:100%; min-height:76px; display:flex; align-items:center; gap:18px; padding:9px 16px 9px 10px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(90deg,rgba(25,22,37,.72),rgba(15,14,22,.8)); text-align:left; cursor:pointer; }
.ai-history-row:hover { border-color:rgba(137,86,211,.48); }
.ai-thumb { position:relative; width:148px; height:58px; overflow:hidden; flex:0 0 auto; border-radius:6px; background:linear-gradient(160deg,#8464a1,#32234f 60%,#0d0a13); }
.ai-thumb::before { content:""; position:absolute; inset:0; background:linear-gradient(148deg,transparent 40%,#151222 41% 56%,transparent 57%),linear-gradient(28deg,transparent 45%,rgba(135,73,184,.7) 46% 50%,transparent 51%); }
.ai-thumb i { position:absolute; inset:0; background:radial-gradient(circle at 25% 22%,rgba(255,211,174,.5),transparent 30%); }
.ai-thumb b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(41,25,55,.74); color:#e9dbe9; }
.ai-copy { flex:1; display:grid; gap:8px; }.ai-copy strong { font-size:14px; }.ai-copy small { color:#746e7c; font-size:10px; }
.ai-status { padding:5px 9px; border-radius:99px; background:rgba(71,149,112,.12); color:#80d6aa; font-size:10px; }

.modal-layer { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(3,3,8,.72); backdrop-filter:blur(9px); }
.modal-card { width:min(610px,calc(100vw - 40px)); border:1px solid rgba(222,197,240,.24); border-radius:14px; background:linear-gradient(145deg,#151321,#0d0d16); box-shadow:0 32px 100px rgba(0,0,0,.7); animation:modalIn .22s ease both; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); }
.modal-header > div { display:flex; align-items:center; gap:13px; }.modal-logo { width:40px; height:40px; display:grid; place-items:center; border-radius:9px; background:rgba(117,55,188,.13); }.modal-logo img { width:38px; height:34px; object-fit:contain; }.modal-header small { color:#6e6381; letter-spacing:.14em; }.modal-header h2 { margin:3px 0 0; font-size:20px; }
.icon-button { width:35px; height:35px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#89828f; cursor:pointer; }.icon-button:hover { background:rgba(255,255,255,.05); color:#fff; }
#createForm { display:grid; gap:17px; padding:24px; }.field-label { display:grid; gap:8px; color:#a39cab; font-size:12px; }.field-label input,.field-label select { width:100%; height:43px; padding:0 13px; border:1px solid var(--line-strong); border-radius:7px; outline:0; background:#0b0b13; color:#eee8ef; user-select:text; }.field-label input:focus,.field-label select:focus { border-color:rgba(229,182,94,.63); box-shadow:0 0 0 3px rgba(229,182,94,.07); }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:8px; }.secondary-button,.gold-button { min-height:40px; padding:0 22px; border-radius:7px; cursor:pointer; }.secondary-button { border:1px solid var(--line-strong); background:#13121c; color:#c2bbc7; }.gold-button { border:1px solid #d5a14f; background:linear-gradient(135deg,#d59b47,#f2ce83); color:#281707; font-weight:700; box-shadow:0 7px 22px rgba(172,112,37,.16); }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.98); } }
.toast-region { position:fixed; z-index:60; right:28px; bottom:28px; display:grid; gap:10px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; min-width:260px; padding:13px 16px; border:1px solid rgba(203,183,225,.23); border-radius:9px; background:rgba(22,20,31,.95); box-shadow:var(--shadow); color:#dcd5df; font-size:12px; animation:toastIn .25s ease both; }.toast::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 9px var(--success); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

@media (max-width: 1350px) {
  .home-screen { grid-template-columns:350px 132px minmax(0,1fr); }
  .login-panel { padding-inline:28px; }.brand-block img { width:130px; height:115px; }.brand-block h1 { font-size:36px; }.login-card { margin-top:18px; padding-inline:20px; }.hero-card { padding-left:44px; }.hero-copy h2 { font-size:43px; }.project-preview { height:112px; }
}
@media (max-height: 820px) {
  .login-panel { padding-top:26px; }.brand-block img { width:115px; height:94px; }.brand-block h1 { font-size:32px; }.brand-block > p { font-size:17px; }.login-card { margin-top:14px; }.login-view { min-height:185px; }.qr-code { width:108px; height:108px; }.other-login { margin:12px 0 10px; }.social-logins button { width:38px; height:38px; }.nav-item { height:90px; }.hero-card { height:190px; }.project-preview { height:105px; }
}
@media (max-width: 1020px) {
  .home-screen { grid-template-columns:110px minmax(0,1fr); }.login-panel { display:none; }.main-nav { grid-column:1; }.workspace { grid-column:2; }.nav-item b { font-size:11px; }.project-grid { grid-template-columns:repeat(2,1fr); }.header-actions { margin-right:48px; }.lens-art { right:2%; opacity:.65; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }