:root {
  --bg: #050a11;
  --bg-soft: #091321;
  --surface: rgba(13, 25, 41, .88);
  --surface-solid: #101d2d;
  --line: rgba(135, 184, 232, .16);
  --line-strong: rgba(135, 194, 250, .32);
  --text: #f5f8fc;
  --muted: #92a3b6;
  --faint: #65788d;
  --blue: #58aaff;
  --cyan: #9ed4ff;
  --green: #60e7b4;
  --danger: #ff8c8c;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 72% -10%, rgba(35, 114, 197, .2), transparent 34rem), linear-gradient(145deg, #07101b, #04080d 70%); }
button, textarea, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(4, 10, 17, .82); backdrop-filter: blur(22px); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-size: 1.04rem; font-weight: 800; }
.brand img { width: 43px; height: 43px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(65, 158, 249, .3)); }
.sidebar nav { display: grid; gap: 7px; margin-top: 38px; }
.nav-item, .support-link { width: 100%; min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 14px; color: #8fa1b6; background: transparent; cursor: pointer; text-align: left; }
.nav-item span { width: 21px; color: #6d839a; font-size: 1.1rem; text-align: center; }
.nav-item:hover, .nav-item.is-active { color: #eaf5ff; border-color: rgba(99, 175, 248, .2); background: rgba(64, 145, 226, .11); }
.nav-item.is-active span { color: var(--blue); }
.sidebar-limits { margin-top: auto; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 90% 0, rgba(55, 151, 245, .17), transparent 8rem), rgba(13, 27, 44, .72); }
.sidebar-limits header, .sidebar-limits footer, .limit-item > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-limits header { margin-bottom: 13px; }
.sidebar-limits header > span { font-size: .78rem; font-weight: 800; }
.sidebar-limits header small { padding: 4px 6px; border-radius: 999px; color: var(--cyan); background: rgba(69, 157, 241, .1); font-size: .58rem; }
.limit-item { margin-top: 10px; }
.limit-item > div span { color: var(--muted); font-size: .67rem; }
.limit-item > div b { color: #d7e9f9; font-size: .64rem; }
.limit-item > i { height: 5px; margin-top: 6px; overflow: hidden; display: block; border-radius: 999px; background: rgba(255,255,255,.07); }
.limit-item > i em { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #3d96eb, #8ccaff); box-shadow: 0 0 10px rgba(75, 166, 249, .35); }
.sidebar-limits footer { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.sidebar-limits footer span { color: var(--faint); font-size: .6rem; }
.sidebar-limits footer button { width: 29px; height: 29px; border: 1px solid var(--line-strong); border-radius: 9px; color: #cbe7ff; background: rgba(61, 151, 238, .1); cursor: pointer; }
.support-link { margin-top: 8px; justify-content: center; font-size: .84rem; }
.main-panel { min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; min-height: 72px; padding: 0 34px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--line); background: rgba(5, 11, 18, .68); backdrop-filter: blur(20px); }
.mobile-brand { display: none; align-items: center; gap: 9px; border: 0; background: none; font-weight: 800; }
.mobile-brand img { width: 39px; height: 39px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(65, 158, 249, .28)); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #ffd37d; background: rgba(15, 34, 56, .78); cursor: pointer; font-size: 1.05rem; }
.balance-pill { min-height: 38px; padding: 0 13px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: #cfe7ff; background: rgba(15, 34, 56, .78); cursor: pointer; }
.balance-pill span { color: var(--blue); }
.avatar { width: 38px; height: 38px; border: 1px solid rgba(126, 190, 250, .4); border-radius: 50%; color: #06111d; background: linear-gradient(145deg, #b8deff, #58aaff); font-weight: 850; cursor: pointer; }
.view { display: none; min-height: calc(100vh - 72px); padding: clamp(28px, 5vw, 64px); }
.view.is-active { display: block; }
#workspace { padding-top: clamp(16px, 2.2vw, 28px); }
.workspace { min-height: calc(100vh - 200px); max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.architect-intro { width: min(680px, 100%); margin-bottom: 13px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.architect-intro.is-collapsed { justify-content: center; }
.architect-avatar { position: relative; flex: 0 0 auto; width: 112px; height: 112px; padding: 0; overflow: visible; border: 0; border-radius: 50%; background: transparent; cursor: default; }
.architect-intro.is-collapsed .architect-avatar { cursor: pointer; }
.architect-avatar-frame { position: absolute; inset: 0; overflow: hidden; border: 5px solid rgba(255,255,255,.94); border-radius: 50%; background: #f7f8fa; box-shadow: 0 16px 38px rgba(0,0,0,.2), 0 0 0 1px rgba(119,187,251,.26), 0 0 28px rgba(54,145,236,.2); }
.architect-avatar img { position: absolute; left: 50%; bottom: -2px; width: 108%; height: 108%; object-fit: contain; transform: translateX(-50%); }
.architect-avatar .architect-online { position: absolute; z-index: 4; right: 2px; bottom: 11px; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(6,17,29,.2), 0 0 14px rgba(96,231,180,.75); }
.architect-bubble { position: relative; flex: 0 1 510px; max-width: 510px; padding: 16px 44px 16px 19px; border: 1px solid var(--line-strong); border-radius: 20px; color: #aebed0; background: linear-gradient(145deg, rgba(18, 36, 58, .94), rgba(9, 20, 33, .96)); box-shadow: 0 18px 50px rgba(0,0,0,.18); text-align: left; }
.architect-bubble[hidden] { display: none; }
.architect-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; width: 15px; height: 15px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: #0d1b2d; transform: translateY(-50%) rotate(45deg); }
.architect-bubble-close { position: absolute; top: 9px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #8094a9; background: rgba(255,255,255,.045); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.architect-bubble-close:hover { color: #eff7ff; background: rgba(255,255,255,.09); }
.architect-bubble p { margin: 0; font-size: .78rem; line-height: 1.48; }
.architect-bubble p + p { margin-top: 7px; }
.architect-bubble strong { color: #eff7ff; }
.eyebrow { margin: 0 0 10px; color: #77bfff; font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 750px; margin-bottom: 14px; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.055em; }
h2 { margin-bottom: 10px; font-size: clamp(1.9rem, 4vw, 3.25rem); letter-spacing: -.045em; }
.lead { max-width: 680px; margin-bottom: 28px; color: #a8b7c7; font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.65; }
.quick-actions { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.quick-actions button { min-height: 72px; padding: 12px; display: grid; place-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 16px; color: #b9c9d8; background: rgba(13, 27, 44, .62); cursor: pointer; }
.quick-actions button:hover { border-color: var(--line-strong); background: rgba(30, 66, 103, .48); transform: translateY(-1px); }
.quick-actions span { color: #79beff; font-size: 1.2rem; }
.composer { width: 100%; margin-top: 13px; padding: 15px; border: 1px solid rgba(126, 190, 250, .3); border-radius: 23px; background: rgba(11, 23, 38, .9); box-shadow: 0 24px 70px rgba(0,0,0,.25), 0 0 40px rgba(49, 136, 224, .07); }
.composer textarea { width: 100%; min-height: 72px; padding: 5px; resize: none; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 1rem; line-height: 1.55; }
.composer textarea::placeholder { color: #687b90; }
.composer-footer { display: flex; justify-content: space-between; align-items: center; }
.icon-button, .send-button { border: 0; cursor: pointer; }
.icon-button { width: 36px; height: 36px; border-radius: 11px; color: #92a9c0; background: rgba(255,255,255,.04); }
.send-button { width: 43px; height: 43px; border-radius: 14px; color: #06101a; background: linear-gradient(145deg, #b6dcff, #4aa8ff); font-size: 1.35rem; font-weight: 900; }
.composer-note { margin: 11px 0 0; color: #62758b; font-size: .76rem; }
.page-head { max-width: 1180px; margin: 0 auto 32px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.page-head h2 { margin: 0; }
.primary-button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 14px; color: #05111d; background: linear-gradient(135deg, #bae0ff, #4aa7ff); font-weight: 850; cursor: pointer; }
.primary-button.wide { width: 100%; }
.project-grid, .wallet-layout, .plans, .profile-grid { max-width: 1180px; margin: 0 auto; display: grid; gap: 16px; }
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { overflow: hidden; display: grid; grid-template-columns: 36% 1fr; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.project-preview { min-height: 210px; display: grid; place-items: center; color: rgba(255,255,255,.75); font-size: 1.5rem; font-weight: 850; }
.gradient-one { background: radial-gradient(circle at 30% 30%, #9f6a38, transparent 30%), linear-gradient(145deg, #1d3b58, #07101a); }
.gradient-two { background: radial-gradient(circle at 60% 35%, #8575b7, transparent 28%), linear-gradient(145deg, #26384e, #07101a); }
.project-card > div:last-child { padding: 24px; }
.project-card h3 { margin: 14px 0 9px; font-size: 1.18rem; }
.project-card p { margin-bottom: 18px; color: var(--muted); line-height: 1.55; }
.project-card small { color: var(--faint); }
.status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.status.success { color: #8cf0ca; background: rgba(76, 214, 165, .1); }
.status.process { color: #a9d3ff; background: rgba(75, 161, 247, .12); }
.wallet-layout { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.balance-card, .estimate-card, .profile-card, .settings-card, .install-card { padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); }
.balance-card { background: radial-gradient(circle at 92% 0, rgba(58, 160, 255, .24), transparent 19rem), linear-gradient(145deg, #10233a, #09131f); }
.balance-card > span { color: #a9bfd4; }
.balance-card > strong { display: block; margin: 14px 0; font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -.06em; }
.balance-card strong small { color: #89caff; font-size: 1rem; }
.balance-card p { max-width: 520px; color: #a5b5c6; line-height: 1.6; }
.balance-meter { height: 8px; margin: 25px 0 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.balance-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #318bea, #8fcbff); box-shadow: 0 0 16px rgba(80, 174, 255, .5); }
.balance-card > small { color: var(--faint); }
.estimate-card h3 { margin-bottom: 20px; }
.estimate-card div { padding: 14px 0; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.estimate-card b { color: #dceefe; }
.plans-head { max-width: 1180px; margin: 42px auto 17px; }
.plans-head p { color: var(--muted); }
.plans { grid-template-columns: repeat(3, 1fr); }
.plans article { position: relative; padding: 25px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 23px; background: rgba(12, 24, 39, .82); }
.plans article.featured { border-color: rgba(98, 177, 252, .5); box-shadow: 0 22px 60px rgba(32, 112, 194, .15); }
.plans article > i { position: absolute; top: 18px; right: 18px; padding: 5px 8px; border-radius: 999px; color: #bfe2ff; background: rgba(73, 160, 247, .16); font-size: .68rem; font-style: normal; }
.plans article > span { color: var(--muted); }
.annual-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.annual-plan-heading b { color: #ff656d; font-size: .66rem; white-space: nowrap; }
.plans article > strong { display: block; margin: 12px 0 8px; font-size: 2rem; }
.annual-plan-price { min-height: 61px; margin-top: 12px; display: flex; align-items: flex-start; gap: 9px; }
.annual-plan-price del, .annual-plan-price strong { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.annual-plan-price del { color: var(--text); font-weight: 700; text-decoration-color: var(--faint); text-decoration-thickness: 2px; }
.annual-plan-price > div { display: grid; }
.annual-plan-price strong { color: #ff656d; font-weight: 700; }
.annual-plan-price small { margin-top: 6px; color: #ff656d; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.plans article p { color: var(--faint); }
.plans article button { width: 100%; min-height: 42px; margin-top: auto; border: 1px solid var(--line-strong); border-radius: 12px; color: #cde8ff; background: rgba(62, 149, 234, .1); cursor: pointer; }
.featured button { color: #05111d !important; background: linear-gradient(135deg, #b7ddff, #50aaff) !important; font-weight: 800; }
.history-list { max-width: 1000px; margin: 0 auto; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
.history-list article { padding: 19px 22px; display: grid; grid-template-columns: 46px 1fr auto 84px; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.history-list article:last-child { border: 0; }
.history-list h3 { margin: 0 0 4px; font-size: .98rem; }
.history-list p { margin: 0 0 5px; color: var(--muted); }
.history-list small, .history-list article > span { color: var(--faint); font-size: .76rem; }
.operation-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #89c7ff; background: rgba(65, 151, 237, .12); }
.operation-icon.plus, .operation-icon.refund { color: #70e6b7; background: rgba(75, 220, 163, .1); }
.amount { color: #dceaf7; }
.amount.plus { color: #72e5b8; }
.profile-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.profile-card { display: flex; align-items: center; gap: 18px; }
.profile-avatar { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: #06111d; background: linear-gradient(145deg, #b9e0ff, #50a8ff); font-size: 1.2rem; font-weight: 900; }
.profile-card h3 { margin: 0 0 5px; }
.profile-card p { margin: 0 0 9px; color: var(--muted); }
.profile-card span { color: var(--green); font-size: .74rem; }
.settings-card { grid-row: span 2; }
.settings-card h3 { margin-bottom: 20px; }
.settings-card label { margin-bottom: 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.settings-card label span { display: grid; gap: 4px; }
.settings-card label small { color: var(--muted); line-height: 1.45; }
.settings-card input { position: absolute; opacity: 0; }
.settings-card label i { flex: 0 0 auto; width: 46px; height: 26px; padding: 3px; border-radius: 999px; background: #24384d; cursor: pointer; }
.settings-card label i::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #8092a6; transition: .2s; }
.settings-card input:checked + i { background: #287fcf; }
.settings-card input:checked + i::after { transform: translateX(20px); background: white; }
.settings-card > button { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; color: #b9c9d9; background: rgba(255,255,255,.025); cursor: pointer; }
.install-card span { color: var(--blue); font-size: .74rem; font-weight: 800; }
.install-card h3 { margin: 10px 0; }
.install-card p { color: var(--muted); line-height: 1.55; }
.install-card button { min-height: 42px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; color: #cfeaff; background: rgba(65, 153, 239, .1); cursor: pointer; }
.bottom-nav { display: none; }
dialog { color: var(--text); }
dialog::backdrop { background: rgba(1, 5, 9, .78); backdrop-filter: blur(12px); }
.auth-dialog, .plan-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 27px; background: linear-gradient(155deg, #122238, #08111d 72%); box-shadow: 0 35px 110px rgba(0,0,0,.55); }
.auth-dialog form, .plan-dialog form { padding: clamp(25px, 6vw, 42px); }
.auth-dialog form > img { width: 66px; height: 66px; margin-bottom: 20px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(59, 151, 241, .3)); }
.auth-dialog h2, .plan-dialog h2 { font-size: clamp(1.8rem, 6vw, 2.7rem); }
.auth-dialog form > div > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.auth-welcome-bonus { margin: 16px 0 14px; padding: 14px 15px; border: 1px solid rgba(103, 182, 255, .22); border-radius: 14px; text-align: left; background: linear-gradient(135deg, rgba(65, 153, 239, .13), rgba(56, 211, 159, .07)); }
.auth-bonus-title { display: flex; gap: 9px; align-items: center; }
.auth-bonus-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: #f1bd5a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(241, 189, 90, .28)); }
.auth-welcome-bonus strong { display: block; color: #d9eeff; font-size: .94rem; line-height: 1.35; }
.auth-welcome-bonus p { margin: 5px 0 0; color: #96adbf !important; font-size: .79rem; line-height: 1.48 !important; }
.auth-dialog .prototype-note { margin: 14px 0 -7px; padding: 10px 12px; border: 1px solid rgba(105, 178, 247, .18); border-radius: 11px; color: #91a9bf !important; background: rgba(71, 143, 211, .07); font-size: .76rem; }
.auth-status { min-height: 1.15rem; margin: 10px 0 -10px; color: #8fd9bb !important; font-size: .78rem; }
.auth-status.is-error { color: var(--danger) !important; }
.auth-dialog button:disabled { cursor: wait; opacity: .6; }
.auth-dialog form > div[hidden] { display: none; }
.auth-dialog #code-email { color: #d8ecff; overflow-wrap: anywhere; }
.auth-dialog .resend-code-button { margin-top: 4px; color: #9fc8ea; }
.auth-dialog .resend-code-button:disabled { cursor: default; color: #657a8e; }
.field { display: grid; gap: 8px; margin: 24px 0 18px; }
.field span { color: #b9c8d8; font-size: .82rem; }
.field input { min-height: 50px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 13px; outline: 0; color: white; background: rgba(6, 15, 25, .7); }
.field input:focus { border-color: #70b8fc; box-shadow: 0 0 0 3px rgba(72, 162, 250, .1); }
.consent { margin: 13px 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: #8fa1b4; font-size: .76rem; line-height: 1.45; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #4ea8fa; }
.consent a { color: #9ed0fc; }
.demo-button { width: 100%; min-height: 42px; margin-top: 10px; border: 0; color: #8195a9; background: transparent; cursor: pointer; }
.dialog-close { position: absolute; top: 16px; right: 17px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: #aabaca; background: rgba(255,255,255,.04); cursor: pointer; }
.route-list { margin: 22px 0; border-top: 1px solid var(--line); }
.route-list > div { padding: 15px 0; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.route-list > div > span { color: var(--blue); font-size: .72rem; font-weight: 850; }
.route-list p { margin: 0; display: grid; gap: 4px; }
.route-list small { color: var(--muted); }
.route-list strong { color: #cbe6fe; font-size: .8rem; }
.dialog-total { margin-bottom: 20px; display: flex; justify-content: space-between; }
.dialog-total span { color: var(--muted); }

.support-fab { position: fixed; z-index: 45; right: 24px; bottom: 24px; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(134, 198, 255, .42); border-radius: 19px; color: #06111d; background: linear-gradient(145deg, #b7ddff, #4aa8ff); box-shadow: 0 20px 55px rgba(31, 125, 218, .3); cursor: pointer; }
.support-fab > span { font-size: 1.35rem; }
.support-fab i { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 999px; color: white; background: #ef6868; font-size: .65rem; font-style: normal; font-weight: 850; }
.support-panel { position: fixed; z-index: 46; right: 24px; bottom: 94px; width: min(380px, calc(100vw - 28px)); height: min(570px, calc(100vh - 120px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; border: 1px solid var(--line-strong); border-radius: 25px; color: var(--text); background: linear-gradient(155deg, rgba(18, 34, 56, .98), rgba(7, 15, 25, .99)); box-shadow: 0 32px 90px rgba(0, 0, 0, .48); }
.support-panel[hidden] { display: none; }
.support-panel header { padding: 16px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.support-agent { display: flex; align-items: center; gap: 11px; }
.support-agent > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #07111d; background: linear-gradient(145deg, #b8dfff, #4da8ff); }
.support-agent > div { display: grid; gap: 4px; }
.support-agent small { color: var(--muted); font-size: .7rem; }
.support-agent small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
#support-close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.045); cursor: pointer; font-size: 1.25rem; }
.support-messages { padding: 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.support-message { max-width: 88%; display: flex; align-items: end; gap: 7px; }
.support-message > span { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #07111d; background: #65b3fa; font-size: .65rem; }
.support-message p { margin: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 15px 15px 15px 4px; color: #bed0e0; background: rgba(255,255,255,.045); font-size: .84rem; line-height: 1.5; }
.support-message.user { margin-left: auto; justify-content: flex-end; }
.support-message.user p { color: #06111d; border: 0; border-radius: 15px 15px 4px 15px; background: linear-gradient(145deg, #b6dcff, #5aaffb); }
.support-message.typing p { color: var(--muted); letter-spacing: .18em; }
.support-suggestions { padding: 0 14px 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.support-suggestions button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: #a9c7e2; background: rgba(66, 145, 220, .08); cursor: pointer; font-size: .7rem; }
.support-form { margin: 0 13px; padding: 6px 6px 6px 13px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(4, 12, 21, .55); }
.support-form input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; }
.support-form input::placeholder { color: var(--faint); }
.support-form button { width: 36px; height: 36px; border: 0; border-radius: 11px; color: #06111d; background: linear-gradient(145deg, #b7ddff, #4aa8ff); cursor: pointer; font-weight: 900; }
.support-disclaimer { margin: 9px 16px 12px; color: var(--faint); font-size: .64rem; line-height: 1.4; text-align: center; }

.tour-layer { position: fixed; z-index: 80; inset: 0; pointer-events: none; }
.tour-layer[hidden] { display: none; }
.tour-spotlight { position: fixed; z-index: 80; border: 2px solid #78beff; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(1, 5, 10, .76), 0 0 0 6px rgba(76, 163, 247, .14), 0 0 36px rgba(68, 161, 250, .45); transition: top .24s ease, left .24s ease, width .24s ease, height .24s ease; }
.tour-card { --arrow-left: 50%; position: fixed; z-index: 81; width: min(370px, calc(100vw - 28px)); padding: 25px; border: 1px solid var(--line-strong); border-radius: 22px; color: var(--text); background: linear-gradient(155deg, #142640, #08121f 76%); box-shadow: 0 30px 90px rgba(0,0,0,.5); pointer-events: auto; }
.tour-card::before { content: ""; position: absolute; left: var(--arrow-left); width: 16px; height: 16px; background: #112139; transform: translateX(-50%) rotate(45deg); }
.tour-card.placement-below::before { top: -9px; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.tour-card.placement-above::before { bottom: -9px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tour-card .tour-skip { position: absolute; top: 15px; right: 15px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; }
.tour-count { display: block; margin-bottom: 12px; color: var(--blue); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tour-card h2 { margin: 0 42px 9px 0; font-size: 1.45rem; letter-spacing: -.03em; }
.tour-card p { margin-bottom: 22px; color: var(--muted); line-height: 1.55; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-actions > button:first-child { min-height: 42px; padding: 0 12px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.tour-actions .primary-button { min-width: 112px; }

html, body, .sidebar, .topbar, .quick-actions button, .composer, .balance-pill,
.theme-toggle, .balance-card, .estimate-card, .profile-card, .settings-card,
.install-card, .plans article, .history-list, .bottom-nav, dialog, .field input {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

:root[data-theme="light"] {
  --bg: #f5efe4;
  --bg-soft: #fbf7ef;
  --surface: rgba(255, 252, 246, .92);
  --surface-solid: #fffaf1;
  --line: rgba(132, 91, 35, .17);
  --line-strong: rgba(168, 111, 31, .36);
  --text: #261d12;
  --muted: #71614e;
  --faint: #907e67;
  --blue: #ad741f;
  --cyan: #8d5b18;
  --green: #24765a;
  --danger: #b84545;
  color-scheme: light;
}
:root[data-theme="light"] body { background: radial-gradient(circle at 72% -10%, rgba(223, 169, 82, .25), transparent 34rem), linear-gradient(145deg, #fffaf1, #f2eadc 72%); }
:root[data-theme="light"] .sidebar { background: rgba(255, 251, 243, .86); }
:root[data-theme="light"] .nav-item, :root[data-theme="light"] .support-link { color: #786955; }
:root[data-theme="light"] .nav-item span { color: #9d825e; }
:root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] .nav-item.is-active { color: #493116; border-color: rgba(171, 112, 31, .23); background: rgba(209, 156, 74, .13); }
:root[data-theme="light"] .sidebar-limits { background: radial-gradient(circle at 90% 0, rgba(221, 165, 75, .22), transparent 8rem), rgba(255, 249, 238, .82); }
:root[data-theme="light"] .sidebar-limits header small { color: #815214; background: rgba(194, 132, 43, .11); }
:root[data-theme="light"] .limit-item > div b { color: #4f3a21; }
:root[data-theme="light"] .limit-item > i { background: rgba(100,67,25,.1); }
:root[data-theme="light"] .limit-item > i em { background: linear-gradient(90deg, #b8761d, #ecc475); box-shadow: 0 0 10px rgba(184,122,32,.25); }
:root[data-theme="light"] .sidebar-limits footer button, :root[data-theme="light"] .install-card button, :root[data-theme="light"] .plans article button { color: #6f4815; background: rgba(194, 132, 43, .09); }
:root[data-theme="light"] .topbar { background: rgba(255, 251, 244, .76); }
:root[data-theme="light"] .theme-toggle, :root[data-theme="light"] .balance-pill { color: #614419; background: rgba(255, 249, 237, .88); }
:root[data-theme="light"] .avatar, :root[data-theme="light"] .profile-avatar { color: #3d2a10; border-color: rgba(167, 109, 29, .35); background: linear-gradient(145deg, #ffe6aa, #dca34e); }
:root[data-theme="light"] .architect-avatar-frame { border-color: rgba(255,255,255,.98); background: white; box-shadow: 0 16px 38px rgba(91,58,18,.13), 0 0 0 1px rgba(178,119,35,.25), 0 0 28px rgba(185,128,44,.14); }
:root[data-theme="light"] .architect-avatar .architect-online { border-color: white; box-shadow: 0 0 0 2px rgba(91,58,18,.12), 0 0 14px rgba(57,184,125,.55); }
:root[data-theme="light"] .architect-bubble { color: #695b49; background: linear-gradient(145deg, rgba(255,252,246,.97), rgba(243,231,211,.96)); box-shadow: 0 18px 50px rgba(86,56,18,.1); }
:root[data-theme="light"] .architect-bubble::before { background: #f8f0e3; }
:root[data-theme="light"] .architect-bubble-close { color: #9b8568; background: rgba(103,68,23,.045); }
:root[data-theme="light"] .architect-bubble-close:hover { color: #3e2d18; background: rgba(103,68,23,.09); }
:root[data-theme="light"] .architect-bubble strong { color: #3e2d18; }
:root[data-theme="light"] .eyebrow { color: #a56a18; }
:root[data-theme="light"] .lead { color: #675947; }
:root[data-theme="light"] .quick-actions button { color: #5e5140; background: rgba(255, 252, 246, .82); }
:root[data-theme="light"] .quick-actions button:hover { background: rgba(238, 215, 177, .6); }
:root[data-theme="light"] .quick-actions span { color: #ad741f; }
:root[data-theme="light"] .composer { background: rgba(255, 252, 246, .94); box-shadow: 0 24px 70px rgba(92, 61, 22, .1), 0 0 40px rgba(184, 122, 32, .08); }
:root[data-theme="light"] .composer textarea::placeholder { color: #998a76; }
:root[data-theme="light"] .icon-button { color: #7e6a50; background: rgba(115, 76, 25, .06); }
:root[data-theme="light"] .send-button, :root[data-theme="light"] .primary-button, :root[data-theme="light"] .featured button { color: #33220d !important; background: linear-gradient(145deg, #ffe9b5, #dba14a) !important; }
:root[data-theme="light"] .composer-note { color: #897862; }
:root[data-theme="light"] .project-preview { color: rgba(255, 252, 244, .88); }
:root[data-theme="light"] .balance-card { background: radial-gradient(circle at 92% 0, rgba(222, 165, 75, .28), transparent 19rem), linear-gradient(145deg, #fffaf0, #f1e4d0); }
:root[data-theme="light"] .balance-card > span, :root[data-theme="light"] .balance-card p { color: #6c5b46; }
:root[data-theme="light"] .balance-card strong small { color: #a66d1d; }
:root[data-theme="light"] .balance-meter { background: rgba(100, 67, 25, .1); }
:root[data-theme="light"] .balance-meter i { background: linear-gradient(90deg, #bd7920, #efc777); box-shadow: 0 0 16px rgba(184, 122, 32, .3); }
:root[data-theme="light"] .estimate-card b, :root[data-theme="light"] .amount { color: #49351d; }
:root[data-theme="light"] .plans article { background: rgba(255, 252, 246, .88); }
:root[data-theme="light"] .plans article.featured { border-color: rgba(180, 119, 35, .52); box-shadow: 0 22px 60px rgba(126, 80, 17, .12); }
:root[data-theme="light"] .plans article > i { color: #684313; background: rgba(213, 158, 75, .2); }
:root[data-theme="light"] .status.success, :root[data-theme="light"] .amount.plus { color: #24765a; }
:root[data-theme="light"] .status.process { color: #815114; }
:root[data-theme="light"] .operation-icon { color: #99631a; background: rgba(190, 127, 39, .13); }
:root[data-theme="light"] .operation-icon.plus, :root[data-theme="light"] .operation-icon.refund { color: #24765a; background: rgba(43, 133, 97, .1); }
:root[data-theme="light"] .settings-card label i { background: #d8c8b1; }
:root[data-theme="light"] .settings-card label i::after { background: #8e7b62; }
:root[data-theme="light"] .settings-card input:checked + i { background: #bd7a21; }
:root[data-theme="light"] .settings-card > button { color: #655440; background: rgba(118, 77, 24, .035); }
:root[data-theme="light"] .bottom-nav { background: rgba(255, 251, 244, .94); box-shadow: 0 18px 55px rgba(82, 54, 18, .2); }
:root[data-theme="light"] .bottom-nav button { color: #88765f; }
:root[data-theme="light"] .bottom-nav button.is-active { color: #634115; background: rgba(194, 130, 41, .12); }
:root[data-theme="light"] dialog::backdrop { background: rgba(62, 45, 24, .38); }
:root[data-theme="light"] .auth-dialog, :root[data-theme="light"] .plan-dialog { background: linear-gradient(155deg, #fffaf1, #f2e5d2 72%); box-shadow: 0 35px 110px rgba(77, 50, 17, .3); }
:root[data-theme="light"] .auth-welcome-bonus { border-color: rgba(180, 119, 35, .23); background: linear-gradient(135deg, rgba(224, 170, 88, .17), rgba(255, 248, 231, .55)); }
:root[data-theme="light"] .auth-welcome-bonus strong { color: #6b4415; }
:root[data-theme="light"] .auth-welcome-bonus p { color: #78634a !important; }
:root[data-theme="light"] .field span { color: #665640; }
:root[data-theme="light"] .field input { color: #261d12; background: rgba(255, 253, 248, .82); }
:root[data-theme="light"] .field input:focus { border-color: #bd7a21; box-shadow: 0 0 0 3px rgba(189, 122, 33, .11); }
:root[data-theme="light"] .consent { color: #75634d; }
:root[data-theme="light"] .consent a, :root[data-theme="light"] .auth-dialog #code-email { color: #8c5918; }
:root[data-theme="light"] .auth-dialog .prototype-note { color: #78634a !important; border-color: rgba(180, 119, 35, .2); background: rgba(218, 165, 86, .1); }
:root[data-theme="light"] .demo-button, :root[data-theme="light"] .dialog-close { color: #796750; }
:root[data-theme="light"] .route-list strong { color: #5b401d; }
:root[data-theme="light"] .support-fab, :root[data-theme="light"] .support-agent > span, :root[data-theme="light"] .support-form button { color: #33220d; border-color: rgba(169, 108, 27, .3); background: linear-gradient(145deg, #ffe7aa, #dda34b); box-shadow: 0 20px 55px rgba(141, 91, 23, .2); }
:root[data-theme="light"] .support-panel { background: linear-gradient(155deg, rgba(255, 251, 243, .99), rgba(244, 234, 217, .99)); box-shadow: 0 32px 90px rgba(77, 50, 17, .28); }
:root[data-theme="light"] #support-close { background: rgba(103, 68, 23, .055); }
:root[data-theme="light"] .support-message p { color: #5e4e3b; background: rgba(126, 83, 27, .045); }
:root[data-theme="light"] .support-message.user p { color: #33220d; background: linear-gradient(145deg, #ffe7ad, #e1a951); }
:root[data-theme="light"] .support-message > span { color: #35230d; background: #e1aa54; }
:root[data-theme="light"] .support-suggestions button { color: #714913; background: rgba(190, 126, 37, .08); }
:root[data-theme="light"] .support-form { background: rgba(255, 253, 248, .7); }
:root[data-theme="light"] .tour-spotlight { border-color: #d39a45; box-shadow: 0 0 0 9999px rgba(54, 40, 24, .62), 0 0 0 6px rgba(211, 154, 69, .17), 0 0 36px rgba(188, 125, 35, .38); }
:root[data-theme="light"] .tour-card { background: linear-gradient(155deg, #fffaf1, #f0e1ca 76%); box-shadow: 0 30px 90px rgba(68, 43, 14, .35); }
:root[data-theme="light"] .tour-card::before { background: #fbf3e5; }

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { min-height: 62px; padding: 0 16px; justify-content: space-between; }
  .mobile-brand { display: flex; }
  .view { min-height: calc(100vh - 132px); padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
  #workspace { padding-top: 9px; }
  .workspace { min-height: calc(100vh - 176px); padding-top: 0; }
  .architect-intro { margin-bottom: 12px; gap: 13px; }
  .architect-avatar { width: 84px; height: 84px; }
  .architect-avatar-frame { border-width: 4px; }
  .architect-avatar .architect-online { right: 0; bottom: 7px; width: 13px; height: 13px; border-width: 2px; }
  .architect-bubble { flex: 1 1 auto; width: auto; max-width: none; padding: 12px 36px 12px 13px; border-radius: 17px; }
  .architect-bubble-close { top: 7px; right: 7px; width: 25px; height: 25px; border-radius: 8px; font-size: 1.1rem; }
  .architect-bubble p { font-size: .67rem; line-height: 1.38; }
  .architect-bubble p + p { margin-top: 5px; }
  .eyebrow { margin-bottom: 7px; }
  h1 { margin-bottom: 9px; font-size: clamp(1.9rem, 9vw, 2.75rem); }
  .lead { margin-bottom: 14px; font-size: .88rem; line-height: 1.48; }
  .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .quick-actions button { min-height: 54px; padding: 8px 4px; gap: 3px; font-size: .69rem; }
  .quick-actions span { font-size: .95rem; }
  .composer { border-radius: 19px; }
  .composer textarea { min-height: 52px; }
  .project-grid, .wallet-layout, .plans, .profile-grid { grid-template-columns: 1fr; }
  .project-card { grid-template-columns: 120px 1fr; }
  .project-preview { min-height: 175px; }
  .settings-card { grid-row: auto; }
  .plans { gap: 12px; }
  .history-list article { grid-template-columns: 42px 1fr auto; padding: 16px; gap: 11px; }
  .history-list article > span { display: none; }
  .bottom-nav { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 65px; padding: 7px 6px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(135, 190, 245, .2); border-radius: 21px; background: rgba(8, 17, 28, .92); box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(24px); }
  .bottom-nav button { display: grid; place-items: center; gap: 3px; border: 0; border-radius: 14px; color: #6f8297; background: transparent; font-size: .66rem; }
  .bottom-nav button span { font-size: 1.05rem; }
  .bottom-nav button.is-active { color: #b9ddff; background: rgba(71, 153, 232, .1); }
  .page-head { align-items: center; }
  .page-head .primary-button { min-height: 42px; padding: 0 14px; }
  .support-fab { right: 15px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 17px; }
  .support-panel { right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); height: min(610px, calc(100vh - 100px)); }
  .tour-card { padding: 22px; }
}
@media (max-width: 470px) {
  .balance-pill { padding: 0 10px; }
  .avatar { display: none; }
  .project-card { grid-template-columns: 1fr; }
  .project-preview { min-height: 135px; }
  .history-list p { font-size: .8rem; }
  .amount { font-size: .8rem; }
}
@media (max-height: 760px) {
  .auth-dialog form { padding: 24px 40px; }
  .auth-dialog form > img { width: 48px; height: 48px; margin-bottom: 12px; }
  .auth-dialog h2 { font-size: 2.1rem; }
  .auth-welcome-bonus { margin: 11px 0; padding: 11px 13px; }
  .field { margin: 15px 0 12px; }
  .consent { margin: 9px 0; }
}
@media (max-width: 470px) and (max-height: 760px) {
  .auth-dialog form { padding: 22px; }
  .auth-dialog h2 { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .view.is-active { animation: enter .28s ease both; }
  @keyframes enter { from { opacity: 0; transform: translateY(5px); } }
}