:root {
  color-scheme: dark;
  --bg: #090d10;
  --panel: #10171b;
  --panel-strong: #151e23;
  --line: #26333a;
  --text: #f4f7f5;
  --muted: #9aa9ab;
  --green: #bd7aff;
  --cyan: #67b7ff;
  --danger: #ff7784;
  --shadow: 0 22px 65px rgba(0, 0, 0, .32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at 86% 0%, rgba(40, 143, 113, .16), transparent 30%), var(--bg);
  color: var(--text);
}
body::before {
  position: fixed;
  z-index: -1;
  inset: -35%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(189,122,255,.14), transparent 23%),
    radial-gradient(circle at 76% 68%, rgba(103,183,255,.1), transparent 25%),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.035) 48%, transparent 60%);
  filter: blur(18px);
  transform: translate3d(0,0,0);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
body:not(.authenticated) { overflow: hidden; }
body:not(.authenticated) .app-shell { display: none; }
.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; overflow: hidden; background: radial-gradient(circle at 50% 25%, rgba(189,122,255,.16), transparent 32%), #080d10; }
.auth-screen::before, .auth-screen::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
}
.auth-screen::before { width: 380px; height: 380px; border: 1px solid rgba(189,122,255,.18); box-shadow: 0 0 80px rgba(189,122,255,.16) inset; animation: auth-orbit 9s linear infinite; }
.auth-screen::after { width: 720px; height: 720px; background: conic-gradient(from 110deg, transparent, rgba(189,122,255,.12), transparent, rgba(103,183,255,.1), transparent); opacity: .75; animation: auth-spin 18s linear infinite; }
.authenticated .auth-screen { pointer-events: none; animation: auth-exit .42s ease forwards; }
.authenticated .app-shell { animation: shell-rise .45s cubic-bezier(.2,.8,.2,1) both; }
.auth-grid { position: absolute; inset: -20%; opacity: .3; background-image: linear-gradient(rgba(189,122,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(189,122,255,.09) 1px, transparent 1px); background-size: 34px 34px; transform: perspective(500px) rotateX(60deg); animation: auth-grid 8s linear infinite; }
.auth-card { position: relative; z-index: 1; width: min(470px, 100%); padding: 40px; border: 1px solid rgba(189,122,255,.34); border-radius: 8px; text-align: center; background: linear-gradient(180deg, rgba(20,31,34,.9), rgba(10,15,18,.86)); box-shadow: 0 30px 100px rgba(0,0,0,.55), 0 0 70px rgba(189,122,255,.08); animation: auth-arrive .72s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.auth-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.09) 48%, transparent 62%); transform: translateX(-120%); animation: glass-sweep 3.8s ease-in-out infinite; }
.auth-logo { width: 106px; height: 106px; margin-bottom: 14px; object-fit: contain; filter: drop-shadow(0 0 25px rgba(189,122,255,.45)); animation: logo-pulse 2.8s ease-in-out infinite; }
.auth-card h1 { font-size: clamp(35px, 7vw, 50px); }.auth-card > p:not(.eyebrow):not(.auth-note) { color: var(--muted); line-height: 1.65; }
.auth-public-copy { display: grid; gap: 7px; margin: 18px 0 0; padding: 14px; border: 1px solid rgba(189,122,255,.22); border-radius: 8px; color: #cfd8d7; text-align: left; background: rgba(10, 15, 18, .48); }
.auth-public-copy strong { color: #f4f0ff; font-size: 13px; }
.auth-public-copy span { color: #9fb0ad; font-size: 12px; line-height: 1.55; }
.google-button-host { display: flex; justify-content: center; min-height: 44px; margin-top: 25px; }.firebase-google-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(300px, 100%); min-height: 46px; padding: 0 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; color: #171717; background: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }.firebase-google-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }.firebase-google-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); font-size: 0; }.auth-note { margin: 18px 0 8px; color: #748481; font-size: 11px; line-height: 1.55; }.auth-card small { color: var(--muted); }
.username-setup { display: grid; gap: 10px; margin-top: 22px; text-align: left; animation: panel-in .32s ease both; }.username-setup h2 { margin: 0; font-size: 22px; }.username-setup p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.username-setup label { color: var(--text); font-size: 12px; font-weight: 700; }.username-input-wrap { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8, 12, 18, .72); }.username-input-wrap:focus-within { border-color: rgba(181,125,255,.72); box-shadow: 0 0 0 3px rgba(154,108,255,.11); }.username-input-wrap span { color: #cba5ff; font-size: 18px; font-weight: 700; }.username-input-wrap input { width: 100%; min-height: 44px; border: 0; outline: 0; color: var(--text); background: transparent; }.username-setup .primary-button { width: 100%; margin-top: 5px; }.username-status { min-height: 18px; color: #ffb0b0 !important; }.username-status.success { color: var(--green) !important; }
.open-browser-link { display: none; width: fit-content; margin: 18px auto 0; color: #d6b8ff; font-size: 13px; font-weight: 700; text-decoration: none; }.open-browser-link.visible { display: block; }.open-browser-link:hover { color: #fff; text-decoration: underline; }
button, textarea, select { font: inherit; }
button { cursor: pointer; transform-origin: center; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:active:not(:disabled) { transform: translateY(1px) scale(.985); }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; gap: 18px; padding: 24px 14px; border-right: 1px solid var(--line); background: rgba(8, 13, 16, .84); overflow-y: auto; animation: sidebar-in .42s cubic-bezier(.2,.8,.2,1) both; }
.sidebar-close { display: none; position: sticky; z-index: 12; top: 0; align-self: flex-end; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: rgba(17, 25, 29, .96); box-shadow: 0 12px 28px rgba(0,0,0,.22); transition: transform .18s, border-color .18s, background .18s; }
.sidebar-close:hover { border-color: var(--green); background: rgba(189,122,255,.11); }
.brand { display: flex; gap: 11px; align-items: center; padding: 5px 8px; }
.brand img { width: 39px; height: 39px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(99, 245, 169, .33)); animation: micro-glow 3.4s ease-in-out infinite; }
.brand strong { display: block; font-size: 14px; letter-spacing: 1.7px; }
.brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.navigation { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 10px; color: #bac6c5; text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s; overflow: hidden; }
.nav-item::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(189,122,255,.08), transparent); transform: translateX(-105%); transition: transform .45s ease; }
.nav-item span { width: 24px; color: #70817e; font-size: 11px; letter-spacing: .8px; }
.nav-item:hover { background: #131c20; color: var(--text); transform: translateX(3px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.nav-item:hover::after { transform: translateX(105%); }
.nav-item.active { border-color: rgba(99, 245, 169, .28); background: rgba(99, 245, 169, .09); color: var(--green); }
.sidebar-footer { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 10px 8px; color: var(--muted); font-size: 12px; }
.history-panel { display: grid; gap: 10px; min-height: 120px; padding: 12px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.history-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.history-title button, .tool-button, .listen-button { border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #111a1e; transition: transform .18s, border-color .18s, background .18s; }
.history-title button { min-height: 28px; padding: 0 8px; font-size: 11px; }
.history-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; color: var(--muted); font-size: 12px; }
.history-item { display: grid; gap: 3px; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 6px; color: var(--text); text-align: left; background: transparent; }
.history-item:hover, .history-item.active { border-color: rgba(189,122,255,.28); background: rgba(189,122,255,.08); }
.history-item small { color: var(--muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #667174; box-shadow: 0 0 0 3px rgba(102,113,116,.1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(189,122,255,.12), 0 0 13px rgba(189,122,255,.55); animation: status-pulse 2.2s ease-in-out infinite; }
.status-dot.error { background: var(--danger); }

.workspace { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; min-height: 71px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(9, 13, 16, .63); }
.menu-button { display: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--text); background: #11191d; }
.topbar-title { font-size: 13px; letter-spacing: .5px; }
.topbar-title span { color: var(--muted); }
.beta-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid rgba(189,122,255,.34); border-radius: 999px; color: #f0ddff; background: rgba(189,122,255,.12); font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 0 22px rgba(189,122,255,.12); }
.topbar-status { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12px; }
.view { width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0; }
.view:not([hidden]) { animation: view-enter .38s cubic-bezier(.2,.8,.2,1) both; }
.chat-view { display: flex; min-height: calc(100vh - 71px); flex-direction: column; }
.chat-intro { max-width: 650px; margin: auto auto 40px; text-align: center; }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.9px; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: 0; }
.chat-intro > p:last-child, .view-heading > p:last-child { margin: 17px 0 0; color: var(--muted); line-height: 1.7; }
.messages { display: grid; gap: 18px; width: min(800px, 100%); margin: 0 auto; }
.message { display: flex; gap: 10px; align-items: flex-start; animation: arrive .34s cubic-bezier(.16,1,.3,1); }
.message.user { justify-content: flex-end; }
.message-avatar { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #1c292d; color: var(--green); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px rgba(189,122,255,.08), 0 10px 24px rgba(0,0,0,.22); }
.message.user .message-avatar { order: 2; color: #180d2a; background: var(--green); }
.message-content { max-width: min(670px, calc(100% - 42px)); padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, rgba(20,30,34,.96), rgba(14,21,25,.96)); line-height: 1.62; overflow-wrap: anywhere; box-shadow: 0 14px 36px rgba(0,0,0,.2); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.message-content:hover { border-color: rgba(189,122,255,.2); transform: translateY(-1px); box-shadow: 0 18px 44px rgba(0,0,0,.24); }
.message.user .message-content { border-color: rgba(99, 245, 169, .32); background: #10241e; }
.message-content p:first-child { margin-top: 0; }
.message-content p:last-child { margin-bottom: 0; }
.message-content pre { overflow: auto; padding: 12px; border: 1px solid #314148; border-radius: 5px; background: #080d0f; }
.thinking { color: var(--muted); }
.thinking::after { content: ""; display: inline-block; width: 22px; height: 6px; margin-left: 9px; border-radius: 999px; background: radial-gradient(circle, var(--green) 0 35%, transparent 38%) 0 50% / 7px 7px repeat-x; animation: typing-dots 1s steps(3) infinite; filter: drop-shadow(0 0 8px rgba(189,122,255,.45)); }

.composer { display: grid; grid-template-columns: 150px 135px minmax(0, 1fr) auto auto auto; gap: 9px; align-items: end; width: min(900px, 100%); margin: 26px auto 0; padding: 9px; border: 1px solid #33434a; border-radius: 8px; background: rgba(16, 23, 27, .95); box-shadow: var(--shadow); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.composer:focus-within { border-color: rgba(189,122,255,.55); box-shadow: 0 24px 70px rgba(0,0,0,.36), 0 0 0 3px rgba(189,122,255,.08); transform: translateY(-1px); }
.model-field { display: grid; gap: 4px; padding: 1px 4px; color: var(--muted); font-size: 11px; }
.mode-field { display: grid; gap: 4px; padding: 1px 4px; color: var(--muted); font-size: 11px; }
select, textarea { width: 100%; color: var(--text); border: 1px solid var(--line); border-radius: 5px; background: #0c1215; outline: none; }
select { min-height: 35px; padding: 0 9px; }
textarea { display: block; min-height: 44px; max-height: 210px; padding: 11px; resize: none; line-height: 1.48; }
textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(189,122,255,.1); }
.send-button, .primary-button { min-height: 43px; border: 1px solid transparent; border-radius: 6px; padding: 0 17px; color: #160c27; font-weight: 800; background: var(--green); transition: transform .18s, box-shadow .18s, background .18s; }
.send-button:hover, .primary-button:hover { transform: translateY(-2px); background: #dfb7ff; box-shadow: 0 12px 28px rgba(189,122,255,.22), 0 0 0 3px rgba(189,122,255,.08); }
.tool-button { min-width: 42px; min-height: 43px; padding: 0 10px; font-size: 12px; }
.tool-button:hover, .listen-button:hover, .history-title button:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.listen-button { display: inline-flex; min-height: 28px; margin-top: 10px; padding: 0 9px; align-items: center; font-size: 12px; color: var(--green); }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; width: min(900px, 100%); margin: 10px auto 0; }
.attachment-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: rgba(16,23,27,.9); font-size: 12px; animation: chip-in .22s ease-out both; }
.attachment-pill small { color: var(--muted); }
.attachment-pill button { border: 0; color: var(--muted); background: transparent; }
.composer-note { width: min(800px, 100%); margin: 9px auto 0; color: #68777a; font-size: 11px; text-align: center; }

.view-heading { max-width: 800px; margin-bottom: 30px; }
.view-heading h1 { font-size: clamp(31px, 4vw, 48px); }
.generator-form { display: grid; gap: 17px; max-width: 800px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16, 23, 27, .7); box-shadow: 0 20px 55px rgba(0,0,0,.18); animation: panel-in .42s ease both; }
.generator-form label { display: grid; gap: 7px; color: #b8c3c1; font-size: 13px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
.job-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 13px; }
.job-progress { height: 4px; overflow: hidden; border-radius: 5px; background: #1d292e; }
.job-progress span { display: block; width: 32%; height: 100%; background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent); animation: progress 1.1s linear infinite; box-shadow: 0 0 18px rgba(189,122,255,.55); }
.media-output { max-width: 800px; margin-top: 22px; }
.media-output img, .media-output video { display: block; width: 100%; max-height: 640px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #050809; animation: media-reveal .5s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.media-output a { display: inline-block; margin-top: 10px; color: var(--green); text-decoration: none; font-size: 13px; }

.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.system-grid article { min-height: 176px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(20,30,34,.94), rgba(10,15,18,.94)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.system-grid article:hover { transform: translateY(-3px); border-color: rgba(189,122,255,.28); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.system-grid span { display: block; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.system-grid strong { display: block; margin-top: 15px; font-size: 16px; }
.system-grid p { color: var(--muted); font-size: 13px; }
.system-grid i { color: #aab6b7; font-size: 12px; font-style: normal; }
.system-note { max-width: 800px; margin-top: 20px; padding: 16px; border-left: 2px solid var(--cyan); color: #bdd4d8; background: rgba(103,183,255,.06); font-size: 13px; line-height: 1.6; }
.system-note.beta-note { border-left-color: var(--green); color: #ddccff; background: linear-gradient(135deg, rgba(189,122,255,.12), rgba(103,183,255,.06)); }

/* New product spaces use a shared animated glass surface. */
.nethost-view, .proton-view, .web-view, .mobile-view, .os-view, .about-view { padding-top: 38px; }
.nav-proton::before { position:absolute; right:12px; width:6px; height:6px; border-radius:50%; content:""; background:var(--cyan); box-shadow:0 0 15px var(--cyan); animation:proton-nav-pulse 1.7s ease-in-out infinite; }
.nethost-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); align-items:center; gap:38px; min-height:390px; padding:42px; border:1px solid rgba(189,122,255,.25); border-radius:8px; overflow:hidden; background:linear-gradient(135deg, rgba(8,28,23,.92), rgba(8,14,18,.9) 54%, rgba(10,28,33,.9)); box-shadow:0 30px 100px rgba(0,0,0,.3); }.nethost-hero::before { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(115deg, transparent 36%, rgba(189,122,255,.08) 49%, transparent 62%); transform:translateX(-120%); animation:glass-sweep 5.6s ease-in-out infinite; }.nethost-hero > * { position:relative; z-index:1; }.nethost-hero h1 { font-size:clamp(42px,6vw,76px); }.nethost-hero p:not(.eyebrow) { max-width:640px; color:#bfd0ce; font-size:17px; line-height:1.7; }.nethost-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:21px; }.nethost-tags span { padding:7px 10px; border:1px solid rgba(189,122,255,.28); border-radius:999px; color:var(--green); background:rgba(189,122,255,.06); font-size:12px; }.nethost-signal { position:absolute; right:-90px; top:-120px; width:420px; aspect-ratio:1; border:1px solid rgba(189,122,255,.15); border-radius:50%; animation:proton-spin 20s linear infinite; }.nethost-signal span { position:absolute; inset:18%; border:1px dashed rgba(103,183,255,.22); border-radius:50%; }.nethost-signal span:nth-child(2) { inset:34%; border-color:rgba(189,122,255,.3); }.nethost-signal span:nth-child(3) { inset:47%; background:rgba(189,122,255,.08); box-shadow:0 0 50px rgba(189,122,255,.2); }.nethost-node { display:grid; position:relative; width:min(260px,70vw); aspect-ratio:1; place-items:center; margin:auto; border:1px solid rgba(103,183,255,.4); background:radial-gradient(circle, rgba(103,183,255,.15), rgba(7,14,18,.68) 64%); box-shadow:inset 0 0 44px rgba(103,183,255,.1),0 0 75px rgba(103,183,255,.14); animation:nethost-node 4.4s ease-in-out infinite; }.nethost-node i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }.nethost-node i:nth-child(1){top:17%;left:18%}.nethost-node i:nth-child(2){top:24%;right:16%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.nethost-node i:nth-child(3){bottom:20%;left:20%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.nethost-node i:nth-child(4){bottom:16%;right:23%}.nethost-node strong,.nethost-node small { position:relative; z-index:1; }.nethost-node strong { font-size:23px; letter-spacing:2px; }.nethost-node small { margin-top:-72px; color:var(--muted); font-size:11px; }.nethost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }.nethost-grid article,.about-grid article { min-height:190px; padding:22px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(145deg,rgba(17,29,30,.88),rgba(7,12,15,.84)); box-shadow:0 20px 50px rgba(0,0,0,.16); animation:panel-in .5s cubic-bezier(.16,1,.3,1) both; transition:transform .25s,border-color .25s,box-shadow .25s; }.nethost-grid article:nth-child(2),.about-grid article:nth-child(2){animation-delay:.09s}.nethost-grid article:nth-child(3),.about-grid article:nth-child(3){animation-delay:.18s}.nethost-grid article:hover,.about-grid article:hover{transform:translateY(-5px);border-color:rgba(189,122,255,.35);box-shadow:0 30px 74px rgba(0,0,0,.28)}.nethost-grid span,.about-grid span{color:var(--green);font-size:10px;font-weight:900;letter-spacing:1.5px}.nethost-grid h2,.about-grid h2{margin:16px 0 8px;font-size:20px}.nethost-grid p,.about-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.proton-stage { position:relative; display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); min-height:440px; align-items:center; gap:42px; padding:44px; border:1px solid rgba(103,183,255,.28); border-radius:8px; overflow:hidden; background:radial-gradient(circle at 26% 50%, rgba(103,183,255,.16), transparent 26%), radial-gradient(circle at 70% 15%, rgba(189,122,255,.11), transparent 28%), rgba(9,15,18,.86); box-shadow:0 32px 100px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035); }
.proton-stage::before { position:absolute; inset:0; content:""; pointer-events:none; opacity:.58; background:linear-gradient(90deg, transparent 49.5%, rgba(103,183,255,.12) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(189,122,255,.08) 50%, transparent 50.5%); background-size:68px 68px; mask-image:radial-gradient(circle at 35% 50%, #000 0 25%, transparent 61%); animation:proton-grid 12s linear infinite; }
.proton-core { position:relative; z-index:1; display:grid; width:min(240px,42vw); aspect-ratio:1; place-items:center; margin:auto; border:1px solid rgba(189,122,255,.7); border-radius:50%; color:var(--green); background:radial-gradient(circle, rgba(189,122,255,.3), rgba(8,15,17,.8) 54%, transparent 70%); box-shadow:0 0 0 18px rgba(189,122,255,.035), 0 0 70px rgba(189,122,255,.28), inset 0 0 45px rgba(189,122,255,.16); animation:proton-core 4s ease-in-out infinite; }
.proton-core::before, .proton-core::after { position:absolute; border:1px solid rgba(103,183,255,.38); border-radius:50%; content:""; }.proton-core::before { inset:-25px; animation:proton-spin 9s linear infinite; }.proton-core::after { inset:16px; border-color:rgba(189,122,255,.3); animation:proton-spin 5s linear infinite reverse; }
.proton-core span { font-size:clamp(72px,12vw,128px); font-weight:900; text-shadow:0 0 25px rgba(189,122,255,.8); animation:proton-letter 3.1s ease-in-out infinite; }
.proton-orbit { position:absolute; z-index:0; width:520px; aspect-ratio:1; border:1px solid rgba(103,183,255,.18); border-radius:50%; }.proton-orbit-one { left:-170px; animation:proton-spin 22s linear infinite; }.proton-orbit-two { left:-115px; width:410px; border-style:dashed; border-color:rgba(189,122,255,.24); animation:proton-spin 16s linear infinite reverse; }
.proton-copy { position:relative; z-index:1; }.proton-copy h1 { font-size:clamp(54px,8vw,92px); text-shadow:0 0 36px rgba(103,183,255,.18); }.proton-lead { max-width:560px; color:#c0d2d2; font-size:clamp(16px,2vw,20px); line-height:1.65; }.proton-pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }.proton-pills span { padding:7px 10px; border:1px solid rgba(103,183,255,.3); border-radius:999px; color:var(--cyan); background:rgba(103,183,255,.07); font-size:12px; animation:chip-in .35s ease both; }.proton-pills span:nth-child(2) { animation-delay:.08s; }.proton-pills span:nth-child(3) { animation-delay:.16s; }
.proton-callout { max-width:540px; padding:15px 17px; border-left:2px solid var(--green); background:rgba(189,122,255,.06); }.proton-callout strong { display:block; color:var(--green); }.proton-callout p { margin:6px 0 0; color:var(--muted); line-height:1.55; font-size:13px; }
.proton-info-grid, .web-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }.proton-info-grid article, .web-service-grid article { position:relative; min-height:180px; padding:22px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:linear-gradient(145deg, rgba(16,27,30,.9), rgba(8,13,16,.82)); box-shadow:0 18px 44px rgba(0,0,0,.16); animation:panel-in .5s cubic-bezier(.16,1,.3,1) both; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.proton-info-grid article:nth-child(2),.web-service-grid article:nth-child(2){animation-delay:.1s}.proton-info-grid article:nth-child(3),.web-service-grid article:nth-child(3){animation-delay:.2s}.proton-info-grid article:hover,.web-service-grid article:hover{transform:translateY(-5px);border-color:rgba(103,183,255,.4);box-shadow:0 30px 70px rgba(0,0,0,.28)}.proton-info-grid span,.web-service-grid span{color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:1.4px}.proton-info-grid strong{display:block;margin:16px 0 8px;font-size:18px}.proton-info-grid p,.web-service-grid p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.web-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr); align-items:center; gap:38px; min-height:440px; padding:44px; border:1px solid rgba(189,122,255,.28); border-radius:8px; overflow:hidden; background:linear-gradient(135deg, rgba(11,28,24,.92), rgba(8,16,21,.88) 58%, rgba(16,23,34,.94)); box-shadow:0 36px 100px rgba(0,0,0,.34); }.web-hero > *:not(.web-grid-glow){position:relative;z-index:1}.web-hero h1{max-width:650px;font-size:clamp(42px,5.5vw,72px)}.web-hero p:not(.eyebrow){max-width:620px;color:#b5c6c5;line-height:1.7;font-size:16px}.web-whatsapp{display:inline-flex;align-items:center;margin-top:16px;text-decoration:none}.web-grid-glow{position:absolute;inset:-20%;background:linear-gradient(90deg,rgba(189,122,255,.07) 1px,transparent 1px),linear-gradient(rgba(189,122,255,.07) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 74% 48%,#000 0 23%,transparent 52%);animation:web-grid-shift 10s linear infinite}.web-preview{position:relative;min-height:280px;padding:17px;border:1px solid rgba(103,183,255,.36);border-radius:7px;background:rgba(5,12,16,.7);box-shadow:0 28px 70px rgba(0,0,0,.32),0 0 45px rgba(103,183,255,.09);transform:perspective(900px) rotateY(-7deg) rotateX(2deg);animation:web-preview-float 5s ease-in-out infinite}.web-preview::after{position:absolute;inset:0;content:"";background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translateX(-120%);animation:glass-sweep 4.4s ease-in-out infinite}.preview-bar{display:flex;gap:6px;padding-bottom:20px}.preview-bar i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(189,122,255,.55)}.preview-bar i:nth-child(2){background:var(--cyan)}.preview-bar i:nth-child(3){background:#fff}.preview-line{height:12px;margin-top:13px;border-radius:2px;background:linear-gradient(90deg,rgba(189,122,255,.9),rgba(103,183,255,.35));animation:preview-bars 2.8s ease-in-out infinite}.preview-line.short{width:42%}.preview-line.medium{width:66%}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:31px}.preview-cards span{height:94px;border:1px solid rgba(189,122,255,.22);background:linear-gradient(145deg,rgba(189,122,255,.17),rgba(103,183,255,.04));animation:preview-card-pulse 3.2s ease-in-out infinite}.preview-cards span:nth-child(2){animation-delay:.35s}.preview-cards span:nth-child(3){animation-delay:.7s}.web-service-grid h2{margin:17px 0 8px;font-size:21px}.web-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:22px;border:1px solid rgba(189,122,255,.22);border-radius:8px;background:rgba(189,122,255,.05)}.web-cta-strip span{display:block;color:var(--green);font-size:10px;font-weight:900;letter-spacing:1.6px}.web-cta-strip strong{display:block;margin-top:7px;font-size:18px}.web-cta-strip a{color:var(--green);text-decoration:none;font-weight:800;white-space:nowrap}
.mobile-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(240px,.7fr);align-items:center;gap:38px;min-height:480px;padding:44px;border:1px solid rgba(189,122,255,.3);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 78% 28%,rgba(103,183,255,.22),transparent 30%),linear-gradient(135deg,rgba(14,12,28,.95),rgba(8,13,21,.9));box-shadow:0 38px 110px rgba(0,0,0,.38)}.mobile-hero::before{position:absolute;inset:-40%;content:"";background:conic-gradient(from 140deg,transparent,rgba(189,122,255,.18),transparent,rgba(103,183,255,.14),transparent);animation:mobile-aurora 11s linear infinite}.mobile-copy,.mobile-phone{position:relative;z-index:1}.mobile-copy h1{max-width:620px;font-size:clamp(42px,6vw,76px)}.mobile-copy p:not(.eyebrow){max-width:620px;color:#c7c1d7;line-height:1.72}.mobile-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.mobile-note{font-size:13px}.mobile-phone{width:min(270px,72vw);justify-self:center;padding:13px;border:1px solid rgba(255,255,255,.18);border-radius:34px;background:linear-gradient(145deg,#151525,#05060b);box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 45px rgba(189,122,255,.22);animation:phone-float 4.5s ease-in-out infinite}.phone-top{width:72px;height:6px;margin:3px auto 12px;border-radius:999px;background:#2f3142}.phone-screen{display:grid;gap:12px;min-height:430px;padding:22px 14px;border-radius:24px;background:radial-gradient(circle at 30% 0,rgba(189,122,255,.3),transparent 38%),#080a14;overflow:hidden}.phone-screen img{width:70px;height:70px;border-radius:22px;object-fit:cover;margin:auto;box-shadow:0 0 30px rgba(189,122,255,.42)}.phone-screen>span{text-align:center;font-weight:900;letter-spacing:.8px}.phone-bubble{max-width:86%;padding:10px 12px;border-radius:16px;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:13px}.phone-bubble.user{justify-self:end;background:linear-gradient(135deg,#bd7aff,#67b7ff)}.phone-bubble.ai{justify-self:start;color:#c5f0ff}.phone-tools{display:flex;gap:9px;margin-top:auto}.phone-tools i{flex:1;height:52px;border:1px solid rgba(189,122,255,.22);border-radius:14px;background:linear-gradient(145deg,rgba(189,122,255,.16),rgba(103,183,255,.06));animation:preview-card-pulse 3.2s ease-in-out infinite}.mobile-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.mobile-feature-grid article{padding:20px;border:1px solid rgba(189,122,255,.2);border-radius:8px;background:rgba(255,255,255,.04)}.mobile-feature-grid span{color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:1.2px}.mobile-feature-grid h2{margin:12px 0 8px;font-size:20px}.mobile-feature-grid p{margin:0;color:var(--muted);line-height:1.55}
.os-terminal { position:relative; display:grid; min-height:590px; place-content:center; justify-items:center; padding:50px; border:1px solid rgba(189,122,255,.32); border-radius:8px; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 42%, rgba(189,122,255,.13), transparent 28%), #060a0c; box-shadow:0 36px 110px rgba(0,0,0,.4); }.os-terminal::before{position:absolute;inset:0;content:"";opacity:.5;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(189,122,255,.035) 3px 4px);pointer-events:none}.os-noise{position:absolute;inset:0;opacity:.4;background:linear-gradient(115deg,transparent 43%,rgba(189,122,255,.08) 50%,transparent 57%);animation:os-scan 4.5s linear infinite}.os-terminal > *{position:relative;z-index:1}.os-mark{display:grid;width:122px;aspect-ratio:1;place-items:center;margin-bottom:18px;border:1px solid var(--green);color:var(--green);box-shadow:0 0 0 11px rgba(189,122,255,.035),0 0 60px rgba(189,122,255,.23),inset 0 0 30px rgba(189,122,255,.14);animation:os-mark-pulse 3.4s ease-in-out infinite}.os-mark span{font-size:72px;font-weight:900}.os-terminal h1{font-size:clamp(48px,7vw,84px)}.os-terminal p:not(.eyebrow){max-width:620px;color:#b8c8c5;line-height:1.7;font-size:17px}.os-status{display:flex;align-items:center;gap:9px;margin-top:18px;color:var(--green);font-size:11px;font-weight:900;letter-spacing:1.5px}.os-status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green);animation:status-pulse 1.4s ease-in-out infinite}.os-lines{display:grid;gap:9px;width:min(460px,100%);margin:36px 0 18px}.os-lines span{height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:os-line 2.2s ease-in-out infinite}.os-lines span:nth-child(2){animation-delay:.25s}.os-lines span:nth-child(3){animation-delay:.5s}.os-lines span:nth-child(4){animation-delay:.75s}.os-terminal > strong{color:var(--cyan);font-size:15px;letter-spacing:2px}
.os-shell { display:grid; gap:16px; }.os-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); min-height:360px; gap:28px; align-items:center; overflow:hidden; padding:42px; border:1px solid rgba(157,112,255,.36); border-radius:10px; background:radial-gradient(circle at 79% 50%,rgba(99,173,255,.15),transparent 27%),radial-gradient(circle at 29% 22%,rgba(195,106,255,.16),transparent 28%),linear-gradient(135deg,#0c091b,#070913 65%); box-shadow:0 35px 100px rgba(0,0,0,.38); }.os-hero::before { position:absolute; inset:0; pointer-events:none; content:""; background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.08) 49%,transparent 64%); transform:translateX(-125%); animation:glass-sweep 5.8s ease-in-out infinite; }.os-hero-copy,.os-orbital{position:relative;z-index:1}.os-hero h1{max-width:620px;margin:.25em 0;font-size:clamp(42px,5.6vw,74px);line-height:1.02}.os-hero p:not(.eyebrow){max-width:590px;color:#c4bdd6;line-height:1.7}.os-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.os-ghost-button{min-height:43px;padding:0 16px;border:1px solid rgba(167,129,255,.42);border-radius:6px;color:#e7dcff;background:rgba(123,73,207,.11);transition:transform .2s,background .2s}.os-ghost-button:hover{transform:translateY(-2px);background:rgba(137,91,225,.24)}.os-orbital{display:grid;width:min(270px,65vw);aspect-ratio:1;place-items:center;justify-self:center;border:1px solid rgba(122,184,255,.36);border-radius:50%;box-shadow:0 0 70px rgba(122,92,255,.26),inset 0 0 60px rgba(77,145,255,.08);animation:os-orbit 17s linear infinite}.os-orbital::before,.os-orbital::after,.os-orbital i{position:absolute;border:1px solid rgba(207,129,255,.34);border-radius:50%;content:""}.os-orbital::before{inset:16px}.os-orbital::after{inset:45px;border-color:rgba(101,185,255,.38)}.os-orbital i{width:10px;height:10px;background:#a671ff;box-shadow:0 0 17px #b882ff}.os-orbital i:nth-child(1){top:20px;left:46%}.os-orbital i:nth-child(2){bottom:37px;right:19px;background:#72bfff}.os-orbital i:nth-child(3){bottom:60px;left:17%}.os-orbital-core{display:grid;width:104px;aspect-ratio:1;place-items:center;border:1px solid rgba(224,193,255,.75);border-radius:28px;color:#fff;font-size:62px;font-weight:900;background:linear-gradient(135deg,rgba(208,137,255,.7),rgba(83,151,255,.58));box-shadow:0 0 42px rgba(180,102,255,.6);animation:os-core 3.2s ease-in-out infinite}.os-dashboard{display:grid;grid-template-columns:62px minmax(0,1fr) 240px;min-height:410px;border:1px solid rgba(148,105,255,.27);border-radius:10px;overflow:hidden;background:rgba(10,9,20,.85);box-shadow:0 22px 70px rgba(0,0,0,.23)}.os-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:15px 9px;border-right:1px solid rgba(151,112,255,.18);background:rgba(17,13,32,.7)}.os-rail-mark{display:grid;width:34px;aspect-ratio:1;place-items:center;margin-bottom:13px;border:1px solid rgba(176,126,255,.55);border-radius:9px;color:#d9b4ff;font-weight:900;background:rgba(162,94,255,.16)}.os-rail-button{display:grid;width:35px;aspect-ratio:1;place-items:center;border:1px solid transparent;border-radius:8px;color:#9189a7;background:transparent;font-size:17px;transition:.2s}.os-rail-button:hover,.os-rail-button.active{border-color:rgba(159,113,255,.4);color:#f0e8ff;background:rgba(137,87,230,.16)}.os-main-panel{padding:23px;min-width:0}.os-panel-top{display:flex;justify-content:space-between;gap:16px;align-items:center}.os-panel-top span,.os-side-heading span,.os-project-card>span,.os-activity>span{display:block;color:#ab95d5;font-size:10px;font-weight:900;letter-spacing:1.4px}.os-panel-top strong,.os-side-heading strong{display:block;margin-top:5px;font-size:18px}.os-live{display:flex;align-items:center;gap:7px;color:#ada5bc;font-size:12px}.os-live i,.os-activity i{width:7px;height:7px;border-radius:50%;background:#72bfff;box-shadow:0 0 12px rgba(111,190,255,.9)}.os-command{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;margin:25px 0 18px;padding:7px 8px 7px 13px;border:1px solid rgba(157,111,255,.26);border-radius:8px;background:#100d1d}.os-command>span{color:#bd90ff;font-weight:900}.os-command input{min-width:0;height:36px;border:0;color:#f5efff;background:transparent;outline:0}.os-command button,.os-project-card button{min-height:34px;padding:0 11px;border:1px solid rgba(166,118,255,.32);border-radius:6px;color:#e9dcff;background:rgba(142,85,235,.17);font-weight:800;font-size:12px;transition:.2s}.os-command button:hover,.os-project-card button:not(:disabled):hover{background:rgba(153,91,255,.32);transform:translateY(-1px)}.os-project-card button:disabled{opacity:.45;cursor:not-allowed}.os-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.os-project-card{display:flex;min-height:180px;flex-direction:column;padding:18px;border:1px solid rgba(150,110,234,.2);border-radius:8px;background:linear-gradient(150deg,rgba(25,18,43,.87),rgba(9,10,22,.93));transition:transform .22s,border-color .22s}.os-project-card:hover{transform:translateY(-3px);border-color:rgba(171,124,255,.47)}.os-project-card.featured{background:radial-gradient(circle at 85% 10%,rgba(104,167,255,.18),transparent 34%),linear-gradient(150deg,rgba(44,24,73,.92),rgba(13,13,29,.94))}.os-project-card strong{margin-top:14px;font-size:18px}.os-project-card p{margin:8px 0;color:#aaa4bb;font-size:13px;line-height:1.55}.os-project-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.os-project-card small{color:#bc9ff3;font-size:11px}.os-side-panel{padding:22px 17px;border-left:1px solid rgba(151,112,255,.18);background:linear-gradient(180deg,rgba(16,12,31,.9),rgba(10,10,20,.85))}.os-stat{display:grid;gap:5px;margin-top:22px;padding-bottom:17px;border-bottom:1px solid rgba(169,134,239,.14)}.os-stat span{color:#9890aa;font-size:12px}.os-stat strong{font-size:25px}.os-activity{margin-top:20px}.os-activity ul{display:grid;gap:11px;margin:13px 0 0;padding:0;list-style:none}.os-activity li{display:flex;gap:8px;align-items:flex-start;color:#ada7b9;font-size:12px;line-height:1.4}.os-activity i{display:block;flex:0 0 auto;margin-top:4px;width:5px;height:5px}
.about-hero { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:32px; min-height:340px; padding:42px; border:1px solid rgba(189,122,255,.28); border-radius:8px; background:radial-gradient(circle at 14% 20%,rgba(189,122,255,.17),transparent 31%),linear-gradient(140deg,rgba(13,28,25,.94),rgba(10,15,19,.9)); box-shadow:0 30px 100px rgba(0,0,0,.28); }.about-emblem{display:grid;width:142px;aspect-ratio:1;place-items:center;border:1px solid var(--green);color:var(--green);font-size:78px;font-weight:900;box-shadow:0 0 0 14px rgba(189,122,255,.035),0 0 70px rgba(189,122,255,.2),inset 0 0 35px rgba(189,122,255,.12);animation:about-emblem 5s ease-in-out infinite}.about-hero h1{font-size:clamp(46px,6vw,76px)}.about-hero p:not(.eyebrow){max-width:730px;color:#c1d1cf;line-height:1.75;font-size:17px}.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.about-signature{display:grid;gap:8px;margin-top:14px;padding:24px;border-left:2px solid var(--cyan);background:rgba(103,183,255,.055)}.about-signature span{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:1.7px}.about-signature strong{font-size:clamp(20px,3vw,30px)}

@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes blink { 50% { opacity: .18; transform: scale(.65); } }
@keyframes progress { from { transform: translateX(-110%); } to { transform: translateX(350%); } }

@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; width: min(280px, 86vw); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); animation: none; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .menu-button { display: inline-flex; }
  .topbar { min-height: 62px; padding: 0 16px; }
  .topbar-status { font-size: 11px; }
  .view { width: min(100% - 28px, 1040px); padding: 32px 0; }
  .chat-view { min-height: calc(100vh - 62px); }
  .composer { grid-template-columns: 1fr auto auto auto; }
  .model-field, .mode-field { grid-column: 1 / -1; grid-template-columns: 44px 1fr; align-items: center; }
  .composer textarea { grid-column: 1 / -1; }
  .form-row, .form-row.three, .system-grid { grid-template-columns: 1fr; }
  h1 { font-size: 37px; }
  .topbar-title { font-size: 12px; }
}

.topbar-button, .profile-button, .secondary-button, .drawer-close, .campaign-close {
  border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #111a1e; transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}
.topbar-button, .drawer-close, .campaign-close { min-height: 34px; padding: 0 11px; font-size: 12px; }
.topbar-button:hover, .profile-button:hover, .secondary-button:hover, .drawer-close:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.profile-button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 8px 3px 4px; }
.profile-button span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #160c27; background: var(--green); font-weight: 900; }
.profile-button small { color: var(--muted); }
.usage-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.usage-section h2, .contact-info h2, .admin-grid h2 { margin: 0; font-size: 21px; }
.usage-section p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.usage-grid, .admin-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }
.usage-grid article, .admin-metrics article { padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: rgba(15,23,27,.8); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.usage-grid article:hover, .admin-metrics article:hover { transform: translateY(-2px); border-color: rgba(189,122,255,.24); box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.usage-grid span, .admin-metrics span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .8px; }
.usage-grid strong, .admin-metrics strong { display: block; margin: 7px 0 2px; color: var(--green); font-size: 24px; }
.usage-grid small { color: var(--muted); }
.notebook-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 17px; }
.notebook-grid a { padding: 12px 14px; border: 1px solid rgba(189,122,255,.22); border-radius: 8px; color: var(--text); background: rgba(189,122,255,.07); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.notebook-grid a:hover { transform: translateY(-2px); border-color: rgba(189,122,255,.5); background: rgba(189,122,255,.13); }
.premium-heading { max-width: 710px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.price-card { position: relative; display: flex; min-height: 418px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16,23,27,.78); transition: transform .24s, border-color .24s, box-shadow .24s; overflow: hidden; animation: panel-in .42s ease both; }
.price-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; content: ""; background: #465358; }
.price-card::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.06) 50%, transparent 62%); transform: translateX(-120%); transition: transform .55s ease; }
.price-card.featured { border-color: rgba(189,122,255,.52); box-shadow: 0 18px 52px rgba(30,120,85,.14); }
.price-card.featured::before { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.price-card.extreme-card { border-color: rgba(103,183,255,.55); box-shadow: 0 20px 60px rgba(103,183,255,.13); }
.price-card.extreme-card::before { background: linear-gradient(90deg, #67b7ff, #b7ff63, var(--green)); }
.price-card:hover { transform: translateY(-5px); border-color: rgba(189,122,255,.3); box-shadow: 0 26px 70px rgba(0,0,0,.24); }
.price-card:hover::after { transform: translateX(120%); }
.tier { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; }
.price-card h2 { margin: 17px 0 4px; font-size: 25px; }
.price-card > strong { font-size: 25px; } .price-card > strong small { color: var(--muted); font-size: 12px; font-weight: 500; }
.price-card p, .price-card li { color: var(--muted); line-height: 1.55; font-size: 13px; }
.price-card ul { min-height: 132px; margin: 14px 0; padding-left: 17px; }
.price-card button { min-height: 40px; margin-top: auto; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #152025; }
.price-card.featured button { border-color: var(--green); color: #160c27; background: var(--green); font-weight: 800; }
.workspace { position: relative; overflow: hidden; }
.workspace::before {
  position: fixed;
  inset: 70px 0 0 260px;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(189,122,255,.035) 50%, transparent 52%) 0 0 / 52px 52px,
    linear-gradient(0deg, transparent 0 48%, rgba(103,183,255,.025) 50%, transparent 52%) 0 0 / 52px 52px;
  mask-image: radial-gradient(circle at 50% 24%, #000, transparent 72%);
  animation: grid-flow 12s linear infinite;
}
.tools-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid rgba(189,122,255,.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(189,122,255,.14), rgba(103,183,255,.06) 48%, rgba(12,18,21,.88));
  box-shadow: 0 24px 75px rgba(0,0,0,.24);
  overflow: hidden;
  animation: premium-panel .7s cubic-bezier(.16,1,.3,1) both;
}
.tools-view { position: relative; }
.tools-view.locked .tools-hero, .tools-view.locked .tools-grid {
  opacity: .38;
  filter: blur(2px) saturate(.75);
  pointer-events: none;
  user-select: none;
}
.premium-lock {
  position: sticky;
  z-index: 5;
  top: 86px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(189,122,255,.34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(14,22,25,.94), rgba(6,10,12,.9));
  box-shadow: 0 30px 90px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.025) inset;
  animation: premium-panel .48s cubic-bezier(.16,1,.3,1) both;
}
.premium-lock > div { max-width: 680px; text-align: center; }
.premium-lock span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: 1.7px; }
.premium-lock strong { display: block; margin-top: 8px; font-size: clamp(24px, 3vw, 34px); }
.premium-lock p { color: var(--muted); line-height: 1.65; }
.tools-hero::after {
  position: absolute;
  inset: -80% -20%;
  content: "";
  pointer-events: none;
  background: conic-gradient(from 90deg, transparent, rgba(189,122,255,.16), transparent, rgba(103,183,255,.12), transparent);
  animation: auth-spin 16s linear infinite;
}
.tools-hero > * { position: relative; z-index: 1; }
.tools-hero span, .panel-heading span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; }
.tools-hero strong { display: block; margin-top: 8px; font-size: clamp(22px, 3vw, 32px); }
.tools-hero p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tool-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(18,27,31,.82), rgba(8,12,15,.72));
  box-shadow: 0 22px 64px rgba(0,0,0,.2);
  overflow: hidden;
  animation: premium-panel .55s cubic-bezier(.16,1,.3,1) both;
}
.tool-panel:nth-child(2) { animation-delay: .06s; }
.tool-panel:nth-child(3) { animation-delay: .12s; }
.tool-panel:nth-child(4) { animation-delay: .18s; }
.tool-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.055) 48%, transparent 63%);
  transform: translateX(-120%);
  animation: tool-sweep 7s ease-in-out infinite;
}
.tool-panel:hover { border-color: rgba(189,122,255,.3); transform: translateY(-3px); box-shadow: 0 30px 88px rgba(0,0,0,.27); }
.tool-panel.wide { grid-column: 1 / -1; }
.panel-heading h2 { margin: 8px 0 0; font-size: 24px; }
.theme-gallery { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.theme-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(9,14,17,.72);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.theme-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.12) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: theme-card-sweep 4.8s ease-in-out infinite;
}
.theme-card i {
  position: relative;
  display: block;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(135deg, #10171b, #bd7aff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.22);
  overflow: hidden;
}
.theme-card i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 28% 32%, rgba(255,255,255,.7) 0 2px, transparent 3px), radial-gradient(circle at 76% 62%, rgba(255,255,255,.55) 0 1px, transparent 3px), linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: theme-orbit 3.2s linear infinite;
}
.theme-card strong { font-size: 13px; }
.theme-card small { color: var(--muted); line-height: 1.35; }
.theme-card:hover, .theme-card.active { transform: translateY(-3px); border-color: rgba(189,122,255,.45); box-shadow: 0 18px 48px rgba(0,0,0,.24), 0 0 0 3px rgba(189,122,255,.06); }
.theme-card.active::after { position: absolute; top: 10px; right: 10px; content: "Aktif"; color: #160c27; padding: 3px 6px; border-radius: 999px; background: var(--green); font-size: 10px; font-weight: 900; }
.theme-card.locked { cursor: not-allowed; opacity: .55; filter: grayscale(.35); }
.theme-card.locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.theme-card.locked::after { position: absolute; top: 10px; right: 10px; content: "Plus"; color: #160c27; padding: 3px 6px; border-radius: 999px; background: var(--green); font-size: 10px; font-weight: 900; }
.theme-card.locked.active::after { content: "Plus"; }
.theme-card[data-theme-choice="emerald"] i { background: linear-gradient(135deg, #06110d, #6dffad); }
.theme-card[data-theme-choice="midnight"] i { background: linear-gradient(135deg, #080b17, #9fb5ff); }
.theme-card[data-theme-choice="cyber"] i { background: linear-gradient(135deg, #030706, #b7ff3b 48%, #2bf7ff); }
.theme-card[data-theme-choice="aurora"] i { background: linear-gradient(135deg, #150a22, #69ffc9 35%, #8b7cff 70%, #ff7ad9); }
.theme-card[data-theme-choice="carbon"] i { background: linear-gradient(135deg, #050607, #3d4548 45%, #e5fff6); }
.theme-card[data-theme-choice="light"] i { background: linear-gradient(135deg, #eef5f3, #147a4c); }
.prompt-filter input { max-width: 420px; }
.prompt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.prompt-card {
  display: flex;
  min-height: 198px;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9,14,17,.74);
  animation: prompt-pop .28s ease both;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.prompt-card:hover { transform: translateY(-3px); border-color: rgba(189,122,255,.32); background: rgba(17,28,31,.9); }
.prompt-card span { width: max-content; padding: 4px 7px; border: 1px solid rgba(189,122,255,.24); border-radius: 999px; color: var(--green); font-size: 10px; font-weight: 900; }
.prompt-card h3 { margin: 12px 0 7px; font-size: 16px; }
.prompt-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.prompt-card button, .memory-actions button {
  min-height: 34px;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #121c21;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.prompt-card button:hover, .memory-actions button:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.memory-form { display: grid; gap: 10px; }
.memory-list { display: grid; gap: 10px; max-height: 380px; overflow: auto; color: var(--muted); }
.memory-item {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9,14,17,.74);
  animation: memory-pulse .45s ease both;
}
.memory-item div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.memory-item strong { color: var(--text); }
.memory-item small { color: var(--green); }
.memory-item p { max-height: 96px; margin: 0; color: var(--muted); line-height: 1.55; overflow: auto; }
.memory-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.empty-state { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); }
.contact-layout, .admin-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 14px; }
.contact-info, .contact-form, .admin-grid article { display: grid; align-content: start; gap: 13px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16,23,27,.76); animation: panel-in .42s ease both; }
.contact-info > span { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.contact-info a { color: #c0dcda; text-decoration: none; overflow-wrap: anywhere; }
.contact-info a:hover { color: var(--green); }
.contact-form label, .settings-section label { display: grid; gap: 6px; color: #bbc7c7; font-size: 13px; }
input { width: 100%; min-height: 38px; padding: 0 10px; color: var(--text); border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #0c1215; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(189,122,255,.1); }
.settings-drawer { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; display: grid; align-content: start; gap: 24px; width: min(420px, 94vw); padding: 24px; border-left: 1px solid var(--line); background: #0d1418; box-shadow: var(--shadow); animation: drawer-in .25s ease-out; overflow-y: auto; }
.settings-drawer header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-drawer h2 { margin: 0; font-size: 24px; }
.settings-section { display: grid; gap: 13px; padding: 17px 0; border-top: 1px solid var(--line); }
.settings-section h3 { margin: 0; font-size: 14px; }
.account-row { display: flex; align-items: center; gap: 10px; }.account-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #1d282b; }.account-row strong, .account-row small { display:block; }.account-row small { margin-top:3px; }
.settings-section input[type="range"] { padding: 0; }
.switch-row { grid-template-columns: 1fr auto; align-items: center; }.switch-row input { width: 18px; height: 18px; accent-color: var(--green); }
.setting-copy, .settings-section small { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.secondary-button { min-height: 38px; padding: 0 12px; font-size: 13px; }
.drawer-backdrop { position: fixed; z-index: 25; inset: 0; background: rgba(0,0,0,.54); backdrop-filter: blur(2px); animation: fade-in .18s ease both; }
.campaign-modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(2,6,8,.72); backdrop-filter: blur(8px); animation: fade-in .22s ease both; }
.campaign-card { position: relative; width: min(480px, 100%); padding: 32px; border: 1px solid rgba(189,122,255,.42); border-radius: 8px; background: radial-gradient(circle at 50% 0%, rgba(189,122,255,.17), transparent 45%), #10191d; box-shadow: 0 30px 90px rgba(0,0,0,.52); animation: campaign-in .45s cubic-bezier(.2,.8,.2,1); }
.campaign-card h2 { margin: 0; font-size: 31px; }.campaign-card p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.campaign-code { display: inline-block; margin: 9px 0 21px; padding: 9px 12px; border: 1px dashed var(--green); border-radius: 5px; color: var(--green); letter-spacing: 1.5px; }
.campaign-close { position: absolute; top: 14px; right: 14px; }
.admin-metrics { grid-template-columns: repeat(4, 1fr); }.admin-grid { margin-top: 14px; }.admin-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }.early-access-actions { margin-top: 10px; }.admin-actions button { min-height: 35px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: #121c21; }
.admin-users-panel { margin-top: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(16,23,27,.76); }
.admin-user-list { display: grid; gap: 8px; margin-top: 12px; max-height: 360px; overflow: auto; padding-right: 4px; }
.admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: rgba(10,16,19,.72); text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.admin-user-row:hover { transform: translateX(2px); border-color: rgba(189,122,255,.3); background: rgba(15,28,27,.78); }
.admin-user-row span { display: grid; gap: 3px; min-width: 0; }
.admin-user-row small { color: var(--muted); overflow-wrap: anywhere; }
.admin-user-row b { color: var(--green); font-size: 12px; }
[data-theme="emerald"] { --bg:#06110d; --panel:#0e2019; --panel-strong:#123023; --line:#28513d; --green:#6dffad; --cyan:#78f1dc; }
[data-theme="midnight"] { --bg:#080b17; --panel:#11162b; --panel-strong:#18213c; --line:#30395a; --green:#9fb5ff; --cyan:#85e2ff; }
[data-theme="cyber"] { --bg:#040806; --panel:#0b1210; --panel-strong:#101d18; --line:#304334; --green:#b7ff3b; --cyan:#2bf7ff; --shadow:0 24px 70px rgba(119,255,59,.12); }
[data-theme="aurora"] { --bg:#0d0814; --panel:#171020; --panel-strong:#21172e; --line:#3c3150; --green:#69ffc9; --cyan:#bca8ff; --shadow:0 24px 70px rgba(188,168,255,.13); }
[data-theme="carbon"] { --bg:#070808; --panel:#111314; --panel-strong:#181b1d; --line:#303638; --green:#e5fff6; --cyan:#8be3ff; --shadow:0 22px 65px rgba(0,0,0,.42); }
[data-theme="light"] { color-scheme:light; --bg:#eef5f3; --panel:#ffffff; --panel-strong:#f6fbf9; --line:#c9d8d4; --text:#11201c; --muted:#587067; --green:#147a4c; --cyan:#176e90; --shadow:0 20px 55px rgba(24,58,46,.16); }
[data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
@keyframes drawer-in { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes campaign-in { from { opacity:0; transform:scale(.94) translateY(15px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes auth-arrive { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes auth-grid { from { transform:perspective(500px) rotateX(60deg) translateY(0); } to { transform:perspective(500px) rotateX(60deg) translateY(34px); } }
@keyframes auth-exit { to { opacity:0; transform:scale(1.015); visibility:hidden; } }
@keyframes shell-rise { from { opacity:0; transform:translateY(12px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes sidebar-in { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes view-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes panel-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes media-reveal { from { opacity:0; transform:translateY(12px) scale(.985); filter:blur(6px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes chip-in { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes typing-dots { from { background-position-x:0; opacity:.45; } to { background-position-x:21px; opacity:1; } }
@keyframes status-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.22); } }
@keyframes logo-pulse { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 24px rgba(189,122,255,.42)); } 50% { transform:scale(1.035); filter:drop-shadow(0 0 42px rgba(189,122,255,.75)); } }
@keyframes micro-glow { 0%,100% { filter:drop-shadow(0 0 10px rgba(189,122,255,.33)); } 50% { filter:drop-shadow(0 0 18px rgba(189,122,255,.6)); } }
@keyframes glass-sweep { 0%, 42% { transform:translateX(-120%); } 70%, 100% { transform:translateX(120%); } }
@keyframes auth-spin { to { transform:rotate(360deg); } }
@keyframes auth-orbit { from { transform:rotate(0) translateX(18px) rotate(0); } to { transform:rotate(360deg) translateX(18px) rotate(-360deg); } }
@keyframes ambient-drift { from { transform:translate3d(-2%, -1%, 0) rotate(0deg); } to { transform:translate3d(2%, 1%, 0) rotate(4deg); } }
@keyframes grid-flow { from { background-position: 0 0, 0 0; } to { background-position: 52px 52px, 52px 52px; } }
@keyframes premium-panel { from { opacity:0; transform:translateY(16px) scale(.985); filter:blur(8px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes tool-sweep { 0%, 45% { transform:translateX(-120%); } 65%, 100% { transform:translateX(120%); } }
@keyframes prompt-pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes memory-pulse { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
@keyframes proton-nav-pulse { 0%,100% { opacity:.45; transform:scale(.8); } 50% { opacity:1; transform:scale(1.35); } }
@keyframes proton-spin { to { transform:rotate(360deg); } }
@keyframes proton-grid { to { background-position:68px 68px, -68px 68px; } }
@keyframes proton-core { 0%,100% { transform:scale(1); filter:brightness(1); } 50% { transform:scale(1.045); filter:brightness(1.2); } }
@keyframes proton-letter { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes web-grid-shift { to { background-position:34px 34px; } }
@keyframes web-preview-float { 0%,100% { transform:perspective(900px) rotateY(-7deg) rotateX(2deg) translateY(0); } 50% { transform:perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-10px); } }
@keyframes preview-bars { 0%,100% { opacity:.55; transform:scaleX(.86); transform-origin:left; } 50% { opacity:1; transform:scaleX(1); } }
@keyframes preview-card-pulse { 0%,100% { transform:translateY(0); border-color:rgba(189,122,255,.22); } 50% { transform:translateY(-7px); border-color:rgba(103,183,255,.6); } }
@keyframes mobile-aurora { to { transform: rotate(360deg); } }
@keyframes phone-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes os-scan { from { transform:translateY(-115%); } to { transform:translateY(115%); } }
@keyframes os-mark-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 11px rgba(189,122,255,.035),0 0 60px rgba(189,122,255,.23),inset 0 0 30px rgba(189,122,255,.14); } 50% { transform:scale(1.045); box-shadow:0 0 0 16px rgba(189,122,255,.025),0 0 90px rgba(189,122,255,.42),inset 0 0 48px rgba(189,122,255,.22); } }
@keyframes os-line { 0%,100% { opacity:.18; transform:scaleX(.7); } 50% { opacity:1; transform:scaleX(1); } }
@keyframes nethost-node { 0%,100% { transform:translateY(0); filter:brightness(1); } 50% { transform:translateY(-9px); filter:brightness(1.18); } }
.nethost-pricing-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }.nethost-price-card { min-height:430px; }.nethost-price-card > strong { color:#d9baff; }.nethost-price-card button { margin-top:auto; }
@keyframes about-emblem { 0%,100% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(2deg) scale(1.04); } }
@media (max-width:1180px) { .pricing-grid { grid-template-columns:repeat(2, 1fr); } .nethost-pricing-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:1180px) { .theme-gallery, .prompt-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:780px) { .workspace::before { inset:62px 0 0; }.topbar-button { display:none; }.profile-button small { display:none; }.pricing-grid, .nethost-pricing-grid, .contact-layout, .admin-grid, .admin-metrics, .usage-grid, .tools-grid, .theme-gallery, .prompt-grid, .nethost-grid, .proton-info-grid, .web-service-grid, .mobile-feature-grid, .about-grid { grid-template-columns:1fr; }.tools-hero { display:grid; }.tool-panel.wide { grid-column:auto; }.price-card { min-height:auto; }.price-card ul { min-height:0; }.settings-drawer { width:100%; }.contact-layout { gap:10px; }.nethost-hero,.proton-stage,.web-hero,.mobile-hero { grid-template-columns:1fr; gap:28px; min-height:0; padding:29px 22px; }.nethost-node { width:min(220px,68vw); }.proton-core { width:min(190px,58vw); }.proton-orbit-one { left:calc(50% - 260px); top:-116px; }.proton-orbit-two { left:calc(50% - 205px); top:-60px; }.web-preview { min-height:238px; transform:none; }.mobile-phone { width:min(245px,76vw); }.phone-screen { min-height:390px; }.mobile-actions { display:grid; }.web-cta-strip { display:grid; }.web-cta-strip a { white-space:normal; }.os-terminal { min-height:490px; padding:34px 20px; }.os-status { justify-content:center; text-align:left; }.about-hero { grid-template-columns:1fr; justify-items:center; padding:32px 22px; text-align:center; }.about-emblem { width:112px; font-size:62px; } }

/* Netron Nova brand system: black space, violet energy, electric blue detail. */
:root { --bg:#05050a; --panel:#0d0b16; --panel-strong:#151025; --line:#2b2145; --text:#f7f5ff; --muted:#a8a2bb; --green:#bd7aff; --cyan:#67b7ff; --shadow:0 28px 76px rgba(0,0,0,.5); }
body { background:linear-gradient(135deg, #040409 0%, #080612 46%, #070c19 100%); }
body::before { inset:0; opacity:.82; background:radial-gradient(circle at 18% 18%, rgba(189,122,255,.13) 0 1px, transparent 2px) 0 0/41px 41px, radial-gradient(circle at 76% 34%, rgba(103,183,255,.13) 0 1px, transparent 2px) 0 0/53px 53px, linear-gradient(120deg, transparent 18%, rgba(118,88,255,.06) 45%, transparent 71%); filter:none; animation:nova-drift 18s ease-in-out infinite alternate; }
.auth-screen { background:radial-gradient(ellipse at 50% 28%, rgba(109,77,255,.19), transparent 38%), #030307; }.auth-card { border-color:rgba(155,112,255,.48); border-radius:14px; background:linear-gradient(155deg, rgba(22,15,40,.94), rgba(8,8,17,.9)); box-shadow:0 34px 105px rgba(0,0,0,.68), 0 0 78px rgba(116,87,255,.15); }.auth-logo { width:124px; height:124px; border-radius:50%; filter:drop-shadow(0 0 25px rgba(159,101,255,.55)); }.auth-card::before { background:linear-gradient(120deg,transparent 31%,rgba(203,173,255,.18) 49%,transparent 66%); }
.sidebar { border-right-color:rgba(150,112,255,.18); background:linear-gradient(180deg, rgba(8,7,15,.94), rgba(7,7,13,.88)); box-shadow:18px 0 54px rgba(0,0,0,.15); }.brand { padding:7px 8px 13px; border-bottom:1px solid rgba(140,111,255,.14); }.brand img { width:44px; height:44px; border-radius:50%; filter:drop-shadow(0 0 15px rgba(142,93,255,.55)); }.brand strong { letter-spacing:2px; }.brand span { color:#9d96b7; }.navigation { gap:7px; }.nav-item { min-height:45px; border-radius:9px; color:#c6bfd5; }.nav-item::after { background:linear-gradient(90deg,transparent,rgba(172,116,255,.2),transparent); }.nav-item:hover { background:rgba(131,93,255,.11); color:#fff; transform:translateX(4px); }.nav-item.active { border-color:rgba(166,111,255,.45); background:linear-gradient(90deg,rgba(154,93,255,.22),rgba(88,154,255,.1)); color:#dfc2ff; box-shadow:inset 2px 0 #bd7aff,0 8px 24px rgba(46,25,94,.18); }.nav-item span { color:#8f86aa; }.history-panel { border-color:rgba(140,111,255,.14); }.history-item:hover,.history-item.active { border-color:rgba(166,111,255,.36); background:rgba(136,91,255,.13); }
.topbar { border-bottom-color:rgba(142,111,255,.16); background:rgba(7,6,13,.7); backdrop-filter:blur(18px); }.topbar-title span { color:#a69bbb; }.topbar-status { color:#b6afc6; }.workspace::before { background:linear-gradient(90deg,transparent 0 48%,rgba(149,96,255,.055) 50%,transparent 52%) 0 0/58px 58px,linear-gradient(0deg,transparent 0 48%,rgba(95,165,255,.045) 50%,transparent 52%) 0 0/58px 58px; }
.adsense-banner { border-color:rgba(148,110,255,.22); background:linear-gradient(90deg,rgba(22,14,39,.78),rgba(10,12,25,.72)); }.adsense-banner > span { border-color:rgba(168,116,255,.38); color:#c9a5ff; }.adsense-banner-copy strong { color:#ede9ff; }
.composer,.generator-form,.contact-info,.contact-form,.tool-panel,.price-card,.admin-grid article,.admin-users-panel { border-color:rgba(139,105,255,.22); background:linear-gradient(145deg,rgba(18,14,31,.9),rgba(8,9,17,.86)); }.composer { border-radius:13px; }.composer:focus-within { border-color:rgba(181,125,255,.72); box-shadow:0 28px 74px rgba(0,0,0,.45),0 0 0 3px rgba(172,113,255,.12); }.message-content { border-color:rgba(132,109,191,.26); border-radius:13px; background:linear-gradient(180deg,rgba(22,19,38,.96),rgba(12,13,24,.96)); }.message.user .message-content { border-color:rgba(175,121,255,.42); background:linear-gradient(135deg,rgba(65,33,111,.83),rgba(31,24,61,.95)); }.message-avatar { color:#d7baff; background:#1e1833; }.message.user .message-avatar { color:#170c28; background:linear-gradient(145deg,#d59cff,#72bfff); }.send-button,.primary-button { color:#140a24; background:linear-gradient(135deg,#d19aff,#82c7ff); box-shadow:0 9px 28px rgba(122,77,255,.2); }.send-button:hover,.primary-button:hover { background:linear-gradient(135deg,#e3bdff,#a3d7ff); box-shadow:0 14px 36px rgba(122,77,255,.32),0 0 0 3px rgba(154,108,255,.11); }
.system-grid article,.nethost-grid article,.proton-info-grid article,.web-service-grid article,.about-grid article { border-color:rgba(137,107,238,.24); background:linear-gradient(145deg,rgba(20,16,35,.91),rgba(8,10,20,.92)); }.proton-stage,.nethost-hero,.web-hero,.about-hero,.os-terminal { border-color:rgba(158,112,255,.38); background-color:rgba(8,7,16,.94); }.proton-core,.os-mark,.about-emblem { color:#d1a5ff; border-color:#bd7aff; }.proton-core { background:radial-gradient(circle,rgba(145,89,255,.34),rgba(11,10,24,.87) 54%,transparent 70%); }.nethost-node { border-color:rgba(113,171,255,.55); background:radial-gradient(circle,rgba(91,148,255,.17),rgba(10,10,23,.72) 64%); }.proton-pills span,.nethost-tags span { color:#c7a0ff; border-color:rgba(170,113,255,.38); background:rgba(149,91,255,.1); }
@keyframes nova-drift { from { transform:translate3d(-1.5%,-1%,0); } to { transform:translate3d(1.5%,1.2%,0); } }
@media (max-width:780px) { .adsense-banner { width:calc(100% - 28px); margin:9px auto -20px; }.adsense-banner-copy { display:block; }.adsense-banner-copy small { display:block; margin-top:2px; } }

/* Theme engine v2: each theme owns the full atmosphere, not only accent colors. */
body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.08) 50%, transparent 51%) 0 0/64px 64px,
    linear-gradient(0deg, transparent 0 49%, rgba(255,255,255,.05) 50%, transparent 51%) 0 0/64px 64px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  animation: theme-grid-flow 14s linear infinite;
}

html[data-theme="dark"] {
  --bg:#05050a; --panel:#0d0b16; --panel-strong:#151025; --line:#2b2145; --text:#f7f5ff; --muted:#a8a2bb; --green:#bd7aff; --cyan:#67b7ff; --shadow:0 28px 76px rgba(0,0,0,.5);
}
html[data-theme="dark"] body { background:linear-gradient(135deg, #040409 0%, #080612 46%, #070c19 100%); }
html[data-theme="dark"] body::before { background:linear-gradient(120deg, transparent 16%, rgba(189,122,255,.13) 34%, transparent 52%), repeating-linear-gradient(115deg, rgba(103,183,255,.08) 0 1px, transparent 1px 46px); filter:none; animation:theme-nova 16s ease-in-out infinite alternate; }

html[data-theme="emerald"] {
  --bg:#020b08; --panel:#071712; --panel-strong:#0d261d; --line:#1e5b42; --text:#effff8; --muted:#8fb5a7; --green:#58ff9e; --cyan:#4bf4d7; --shadow:0 28px 78px rgba(12,105,67,.22);
}
html[data-theme="emerald"] body { background:linear-gradient(145deg, #010504 0%, #04120d 47%, #061c14 100%); }
html[data-theme="emerald"] body::before { background:repeating-linear-gradient(90deg, rgba(88,255,158,.08) 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, rgba(75,244,215,.05) 0 1px, transparent 1px 42px), linear-gradient(120deg, transparent, rgba(88,255,158,.09), transparent); filter:none; animation:theme-matrix 9s linear infinite; }

html[data-theme="midnight"] {
  --bg:#050814; --panel:#0d1227; --panel-strong:#151c39; --line:#293460; --text:#f3f6ff; --muted:#9ea9cf; --green:#9bb4ff; --cyan:#7ee7ff; --shadow:0 28px 78px rgba(35,52,116,.32);
}
html[data-theme="midnight"] body { background:linear-gradient(150deg, #030512 0%, #070c20 54%, #111731 100%); }
html[data-theme="midnight"] body::before { background:radial-gradient(ellipse at 50% 5%, rgba(126,231,255,.12), transparent 36%), repeating-linear-gradient(135deg, rgba(155,180,255,.07) 0 1px, transparent 1px 54px), linear-gradient(90deg, transparent, rgba(155,180,255,.09), transparent); filter:none; animation:theme-orbit-bg 18s ease-in-out infinite alternate; }

html[data-theme="cyber"] {
  --bg:#030504; --panel:#08100d; --panel-strong:#0d1c16; --line:#2d512f; --text:#f4ffe9; --muted:#9fc091; --green:#c7ff3f; --cyan:#23f4ff; --shadow:0 28px 76px rgba(199,255,63,.14);
}
html[data-theme="cyber"] body { background:linear-gradient(135deg, #020302 0%, #071009 44%, #07161a 100%); }
html[data-theme="cyber"] body::before { background:repeating-linear-gradient(90deg, transparent 0 38px, rgba(199,255,63,.2) 39px 40px), linear-gradient(115deg, transparent 0 42%, rgba(35,244,255,.16) 50%, transparent 58%); filter:none; animation:theme-voltage 5.5s linear infinite; }

html[data-theme="aurora"] {
  --bg:#080613; --panel:#140d22; --panel-strong:#201333; --line:#473060; --text:#fff6ff; --muted:#c0a9c8; --green:#72ffd5; --cyan:#d09cff; --shadow:0 30px 82px rgba(202,117,255,.22);
}
html[data-theme="aurora"] body { background:linear-gradient(140deg, #06030c 0%, #14091e 42%, #071927 100%); }
html[data-theme="aurora"] body::before { background:linear-gradient(105deg, transparent 0 20%, rgba(114,255,213,.14) 35%, rgba(208,156,255,.18) 52%, rgba(255,122,217,.1) 66%, transparent 82%); filter:blur(6px); animation:theme-aurora 10s ease-in-out infinite alternate; }

html[data-theme="carbon"] {
  --bg:#050607; --panel:#101214; --panel-strong:#181b1f; --line:#343941; --text:#f2f6f6; --muted:#9aa3a8; --green:#dce7ff; --cyan:#8db7ff; --shadow:0 30px 84px rgba(0,0,0,.52);
}
html[data-theme="carbon"] body { background:linear-gradient(135deg, #020303 0%, #080a0d 45%, #11151a 100%); }
html[data-theme="carbon"] body::before { background:repeating-linear-gradient(115deg, rgba(220,231,255,.07) 0 1px, transparent 1px 38px), linear-gradient(90deg, rgba(255,255,255,.06), transparent 36%, rgba(141,183,255,.08)); filter:none; animation:theme-carbon 12s linear infinite; }

html[data-theme="light"] {
  color-scheme:light; --bg:#eef5ff; --panel:#ffffff; --panel-strong:#f7fbff; --line:#c7d7e8; --text:#122033; --muted:#596d80; --green:#275dff; --cyan:#00a4b8; --shadow:0 24px 70px rgba(35,71,128,.17);
}
html[data-theme="light"] body { background:linear-gradient(140deg, #f6fbff 0%, #eaf3ff 52%, #f7fbf8 100%); }
html[data-theme="light"] body::before { background:linear-gradient(115deg, transparent 10%, rgba(39,93,255,.09) 42%, transparent 66%), repeating-linear-gradient(90deg, rgba(39,93,255,.055) 0 1px, transparent 1px 44px); filter:none; animation:theme-light 11s ease-in-out infinite alternate; }

html[data-theme] .sidebar,
html[data-theme] .topbar,
html[data-theme] .composer,
html[data-theme] .generator-form,
html[data-theme] .contact-info,
html[data-theme] .contact-form,
html[data-theme] .tool-panel,
html[data-theme] .price-card,
html[data-theme] .admin-grid article,
html[data-theme] .admin-users-panel,
html[data-theme] .settings-drawer {
  border-color: color-mix(in srgb, var(--line) 82%, var(--green));
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-strong) 72%, transparent));
}
html[data-theme] .message-content,
html[data-theme] .prompt-card,
html[data-theme] .memory-item,
html[data-theme] .system-grid article {
  background: linear-gradient(150deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), color-mix(in srgb, var(--panel) 84%, transparent));
}

@keyframes theme-card-sweep { 0%, 48% { transform:translateX(-120%); } 72%, 100% { transform:translateX(120%); } }
@keyframes theme-orbit { from { transform:translateX(-18%) translateY(0); } to { transform:translateX(18%) translateY(-8%); } }
@keyframes theme-grid-flow { to { background-position:64px 64px, -64px 64px; } }
@keyframes theme-nova { from { transform:translate3d(-1.5%,-1%,0); } to { transform:translate3d(1.5%,1%,0); } }
@keyframes theme-matrix { to { background-position:0 42px, 42px 0, 160px 0; } }
@keyframes theme-orbit-bg { from { transform:translateY(-1%); } to { transform:translateY(1.4%); } }
@keyframes theme-voltage { 0% { background-position:0 0, -120px 0; } 100% { background-position:80px 0, 220px 0; } }
@keyframes theme-aurora { from { transform:translateX(-4%) skewX(-3deg); } to { transform:translateX(4%) skewX(3deg); } }
@keyframes theme-carbon { to { background-position:78px 0, 0 0; } }
@keyframes theme-light { from { transform:translateY(-1%); } to { transform:translateY(1%); } }