:root {
    color-scheme: dark;
    --night: #08090d;
    --night-soft: #0d0e14;
    --white: #f8f9fb;
    --paper: #f4f5f7;
    --paper-card: #fff;
    --ink: #11131a;
    --muted: #9699a5;
    --muted-dark: #737784;
    --line: rgba(255, 255, 255, .1);
    --line-dark: #e7e8ec;
    --blue: #a9c5ff;
    --violet: #c2a9ff;
    --green: #72d6a4;
    --shadow: 0 24px 70px rgba(9, 12, 22, .08);
    --font: "IBM Plex Sans Thai", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
::selection { color: #101115; background: #d9d0ff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Shared brand */
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, rgba(120, 151, 220, .2), rgba(30, 31, 46, .7)); box-shadow: 0 0 24px rgba(137, 159, 231, .1), inset 0 1px 0 rgba(255,255,255,.17); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark-dark { background: #f1f2f5; box-shadow: inset 0 0 0 1px #e3e5e9; }
.brand-name { color: #f5f6f9; font: 800 16px/1 Inter, var(--font); letter-spacing: .12em; }
.brand-name span { background: linear-gradient(100deg, #d6e5ff, #c9b7ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.brand-name-dark { color: #171922; }

/* Marketing */
.marketing-body { color: var(--white); background: var(--night); overflow-x: hidden; }
.marketing-body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 8%, rgba(76, 93, 146, .2), transparent 37%), radial-gradient(ellipse at 82% 28%, rgba(99, 68, 143, .07), transparent 32%); }
.marketing-nav-wrap { position: relative; z-index: 20; width: 100%; }
.marketing-nav { height: 82px; max-width: 1500px; padding: 0 42px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 42px; }
.nav-links a { color: #a8a9b1; font-size: 14px; font-weight: 600; transition: color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { color: white; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.button { min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 14px; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(162, 188, 255, .7); outline-offset: 3px; }
.button-small { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 13px; }
.button-large { min-height: 56px; padding: 0 26px; border-radius: 14px; font-size: 15px; }
.button-light { color: #11131a; background: #f5f6f8; box-shadow: 0 8px 24px rgba(255, 255, 255, .08); }
.button-light:hover { background: #fff; box-shadow: 0 12px 32px rgba(255,255,255,.16); }
.button-outline { color: #f1f2f6; border-color: rgba(255,255,255,.14); background: rgba(14,15,21,.6); }
.button-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.button-quiet { color: #e6e7eb; border-color: rgba(255,255,255,.12); background: transparent; }
.button-dark { color: #fff; background: #151720; border-color: #151720; box-shadow: 0 6px 18px rgba(16,20,32,.12); }
.button-dark:hover { background: #252834; border-color: #252834; }
.button-full { width: 100%; min-height: 52px; }
.button-disabled, .button-current { pointer-events: none; }
.button-disabled { color: #858894; border-color: #e9eaee; background: #f3f4f6; }
.button-current { color: #272a34; border-color: #dfe2e8; background: #f6f7f9; }
.button-plus, .button-grid, .button-user { font-size: 18px; font-weight: 500; }
.nav-menu-toggle { display: none; }
.hero-section { position: relative; z-index: 1; min-height: 820px; padding: 106px 24px 82px; overflow: hidden; }
.hero-content { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; text-align: center; }
.availability-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 17px; color: #c0c1cb; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .015em; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.availability-dot, .status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(114,214,164,.12), 0 0 12px rgba(114,214,164,.45); }
.pill-divider { color: #646775; }
.hero-content h1 { max-width: 930px; margin: 22px auto 20px; color: #f6f7fa; font-size: clamp(42px, 6vw, 76px); font-weight: 700; line-height: 1.17; letter-spacing: -.045em; }
.gradient-word { color: #d1ddff; background: linear-gradient(100deg, #e7f0ff 0%, #a9c5ff 42%, #d4bfff 84%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { margin: 0 auto; color: #a2a4af; font-size: 16px; line-height: 1.95; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.hero-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 28px auto 0; color: #838691; font-size: 12px; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 8px; }
.check-mark { color: #84dfb0; font-style: normal; font-size: 15px; }
.hero-orbit { position: absolute; z-index: 0; width: 530px; height: 530px; border: 1px solid rgba(142, 159, 220, .055); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { top: -95px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 130px rgba(106, 125, 193, .04); }
.hero-orbit-two { width: 740px; height: 740px; top: -200px; left: 50%; transform: translateX(-50%); border-color: rgba(142, 159, 220, .035); }
.hero-preview { max-width: 970px; margin: 66px auto 0; text-align: left; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: #0d0f15; overflow: hidden; box-shadow: 0 32px 90px rgba(0,0,0,.5), 0 0 0 7px rgba(255,255,255,.018); transform: perspective(1200px) rotateX(1.5deg); }
.preview-topbar { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #676b78; background: #10121a; border-bottom: 1px solid rgba(255,255,255,.07); font: 11px Inter, sans-serif; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #454956; }
.window-dots i:first-child { background: #c89191; }.window-dots i:nth-child(2) { background: #c4b28c; }.window-dots i:nth-child(3) { background: #8ebfa1; }
.preview-live { display: inline-flex; gap: 7px; align-items: center; color: #aab0bf; font-size: 9px; letter-spacing: .1em; }
.preview-live i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #75d9a7; }
.preview-content { min-height: 228px; display: grid; grid-template-columns: 54px 1fr; }
.preview-sidebar { padding: 14px 0; border-right: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; gap: 13px; }
.preview-logo { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #a8c5ff, #cab3ff); color: #121521; font: 800 11px Inter; }
.preview-side-item { width: 26px; height: 26px; display: grid; place-items: center; color: #747886; border-radius: 8px; font-size: 13px; }
.preview-side-item.active { color: #f8f9fb; background: rgba(255,255,255,.09); }
.preview-board { padding: 18px 24px 20px; }
.preview-board-head { display: flex; justify-content: space-between; align-items: center; }
.preview-board-head small, .preview-stats small { display: block; color: #747987; font-size: 10px; }
.preview-board-head strong { display: block; margin-top: 3px; color: #e9ebf1; font-size: 15px; }
.preview-create { padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #d8dbe4; font-size: 10px; }
.preview-stats { margin: 15px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.preview-stats > div { padding: 11px 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); }
.preview-stats b { display: block; margin: 5px 0 2px; color: #f1f3f8; font: 600 17px Inter, var(--font); }
.preview-stats span { color: #777c89; font-size: 9px; }
.preview-stats .stat-ready { font-size: 13px; color: #84dcb0; }
.preview-stats .availability-dot { width: 5px; height: 5px; box-shadow: none; margin-right: 4px; }
.preview-projects { border: 1px solid rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
.preview-project-row { min-height: 47px; display: grid; grid-template-columns: 30px 1fr auto 16px; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.preview-project-row:last-child { border-bottom: 0; }
.project-thumb { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #e8e9f1; font: 700 10px Inter; background: linear-gradient(145deg,#22283a,#141720); border: 1px solid rgba(255,255,255,.08); }
.thumb-one { background: linear-gradient(145deg,#38405b,#171923); }.thumb-two { background: linear-gradient(145deg,#3f344e,#191821); }
.preview-project-row b { display: block; color: #dfe1e8; font-size: 10px; }.preview-project-row small { display: block; margin-top: 2px; color: #727784; font-size: 9px; }
.project-status { padding: 4px 8px; color: #a4a8b5; background: rgba(255,255,255,.055); border-radius: 999px; font-size: 9px; white-space: nowrap; }
.row-arrow { color: #757987; font-size: 13px; text-align: right; }

.section-shell { position: relative; z-index: 1; max-width: 1160px; padding-left: 24px; padding-right: 24px; margin-left: auto; margin-right: auto; }
.feature-section { padding-top: 70px; padding-bottom: 100px; }
.section-heading { margin-bottom: 35px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.eyebrow { margin: 0 0 10px; color: #8c90a0; font: 700 10px/1.5 Inter, var(--font); letter-spacing: .16em; }
.section-heading h2, .final-cta h2 { margin: 0; color: #f3f4f8; font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.34; letter-spacing: -.025em; }
.section-heading h2 span { color: #9b9eaa; }
.section-heading > p { margin: 0 0 4px; color: #858893; font-size: 13px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.feature-card { min-height: 240px; padding: 24px; border: 1px solid rgba(255,255,255,.095); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); transition: transform .2s, border-color .2s, background .2s; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(190,198,255,.28); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.feature-card-highlight { background: linear-gradient(145deg, rgba(119,140,198,.16), rgba(255,255,255,.02)); }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #d8dff3; border: 1px solid rgba(199,207,242,.16); border-radius: 12px; background: rgba(191,204,255,.06); font-size: 17px; }
.card-index { margin: 18px 0 8px; color: #777c8a; font: 600 9px Inter, sans-serif; letter-spacing: .1em; }
.feature-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.feature-card > p:not(.card-index) { max-width: 290px; margin: 0; color: #90939e; font-size: 12px; line-height: 1.8; }
.feature-card > a { display: inline-flex; gap: 12px; align-items: center; margin-top: 19px; color: #d4d6df; font-size: 11px; font-weight: 600; }
.feature-card > a span { color: #abb8e1; }
.package-section { padding-top: 20px; padding-bottom: 105px; }
.section-heading-center { display: block; text-align: center; margin-bottom: 38px; }
.section-heading-center h2 { margin-bottom: 9px; }
.section-heading-center > p:last-child { color: #898c97; font-size: 13px; }
.public-package-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; align-items: stretch; }
.public-package-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 26px 24px 22px; border: 1px solid rgba(255,255,255,.105); border-radius: 16px; background: #0d0f15; }
.public-package-card.featured { border-color: rgba(183,191,245,.47); background: linear-gradient(160deg, rgba(94,101,143,.2), #0d0f15 45%); box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.package-ribbon { position: absolute; top: 17px; right: 18px; padding: 5px 9px; border: 1px solid rgba(203,197,255,.25); border-radius: 999px; color: #d9d3ff; background: rgba(177,156,255,.08); font-size: 9px; font-weight: 700; }
.package-kicker { margin: 0 0 10px; color: #9195a4; font: 700 10px Inter; letter-spacing: .14em; }
.public-package-card h3 { margin: 0 0 6px; color: #f2f3f7; font: 650 22px Inter, var(--font); }
.package-copy { min-height: 42px; margin: 0; color: #9396a1; font-size: 12px; line-height: 1.7; }
.package-price { margin: 21px 0 18px; padding: 13px 0 16px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.package-price strong { display: block; color: #f2f3f7; font: 700 25px Inter, var(--font); }
.package-price span { display: block; margin-top: 4px; color: #808490; font-size: 10px; }
.package-price .package-soon { font-size: 17px; color: #c4c6d0; }
.public-package-card ul { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; color: #b3b5be; font-size: 11px; }
.public-package-card li { display: flex; align-items: center; gap: 9px; }
.public-package-card li i { color: #8edeb6; font-size: 12px; font-style: normal; }
.package-cta { width: 100%; margin-top: auto; min-height: 43px; font-size: 12px; }
.future-note { display: flex; align-items: center; gap: 14px; max-width: 810px; padding: 16px 18px; margin: 26px auto 0; border: 1px solid rgba(255,255,255,.085); border-radius: 13px; background: rgba(255,255,255,.025); }
.future-note-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #d1dbf7; border-radius: 10px; background: rgba(169,197,255,.1); font-size: 18px; }
.future-note div { flex: 1; }.future-note strong { display: block; color: #d9dbe3; font-size: 12px; }.future-note p { margin: 3px 0 0; color: #858893; font-size: 10px; }
.coming-tag { padding: 5px 9px; color: #a0a2ad; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 9px; white-space: nowrap; }
.steps-section { padding-top: 10px; padding-bottom: 110px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.1); }
.steps-grid article { padding: 25px 23px; border-right: 1px solid rgba(255,255,255,.09); }.steps-grid article:last-child { border-right: 0; }
.steps-grid article > span { color: #8b91a2; font: 700 11px Inter; }.steps-grid h3 { margin: 13px 0 5px; font-size: 15px; }.steps-grid p { margin: 0; color: #898c98; font-size: 12px; }
.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 38px; padding-bottom: 42px; margin-bottom: 80px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: linear-gradient(105deg, rgba(126,147,202,.12), rgba(255,255,255,.025)); }
.final-cta h2 { font-size: clamp(26px, 3vw, 36px); }
.marketing-footer { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.075); }
.footer-inner { max-width: 1160px; min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 16px 24px; }
.footer-brand .brand-mark { width: 32px; height: 32px; border-radius: 11px; }.footer-brand .brand-name { font-size: 12px; }
.footer-inner p, .footer-note { margin: 0; color: #757985; font-size: 10px; }

/* Auth */
.auth-section { position: relative; z-index: 1; max-width: 1030px; min-height: 650px; display: grid; grid-template-columns: 1fr .88fr; margin: 55px auto 95px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; overflow: hidden; background: #0d0f15; box-shadow: 0 35px 100px rgba(0,0,0,.35); }
.auth-panel { position: relative; padding: 54px; }
.auth-promo { overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100%; border-right: 1px solid rgba(255,255,255,.08); background: radial-gradient(ellipse at 40% 20%, rgba(126,150,216,.16), transparent 50%), #0c0e14; }
.auth-promo h1 { position: relative; z-index: 1; margin: 5px 0 16px; color: #f5f6f9; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.25; letter-spacing: -.035em; }
.auth-promo > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 340px; margin: 0; color: #9699a5; font-size: 14px; line-height: 1.85; }
.auth-promo-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 39px; color: #bec0ca; font-size: 11px; }
.auth-orbit { position: absolute; width: 360px; height: 360px; right: -170px; bottom: -180px; border: 1px solid rgba(166,185,244,.15); border-radius: 50%; box-shadow: 0 0 0 35px rgba(166,185,244,.025), 0 0 0 80px rgba(166,185,244,.018); }
.auth-form-panel { display: flex; flex-direction: column; justify-content: center; background: #101219; }
.auth-form-head { margin-bottom: 25px; }.auth-form-head h2 { margin: 0 0 5px; color: #f3f4f7; font-size: 28px; font-weight: 600; }.auth-form-head > p:last-child { margin: 0; color: #8e919c; font-size: 12px; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { margin-top: 4px; color: #d0d2da; font-size: 11px; font-weight: 600; }
.auth-form input { width: 100%; height: 47px; padding: 0 13px; color: #f5f6f8; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: #0c0e13; outline: none; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.auth-form input::placeholder { color: #626671; }.auth-form input:focus { border-color: rgba(169,197,255,.65); box-shadow: 0 0 0 3px rgba(169,197,255,.08); }
.auth-form .button { margin-top: 10px; }.auth-switch { margin: 19px 0 0; color: #888c98; text-align: center; font-size: 11px; }.auth-switch a { color: #e4e5eb; font-weight: 700; }.auth-footnote { margin: 22px 0 0; color: #646875; text-align: center; font-size: 10px; }
.label-row { display: flex; align-items: center; justify-content: space-between; }.label-row span { color: #6f7380; font-size: 10px; }
.form-alert { padding: 12px 14px; margin-bottom: 15px; border: 1px solid rgba(255,119,119,.25); border-radius: 10px; color: #f0b1b1; background: rgba(143,46,46,.13); font-size: 12px; }

/* Dashboard */
.workspace-body { color: var(--ink); background: var(--paper); min-height: 100vh; }
.workspace-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0,1fr); }
.workspace-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 16px 16px; border-right: 1px solid #e6e8ec; background: #fff; z-index: 40; }
.sidebar-brand { padding: 0 11px 28px; }.sidebar-brand .brand-mark { width: 35px; height: 35px; border-radius: 12px; }.sidebar-brand .brand-name { font-size: 13px; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #eaebef; border-radius: 12px; background: #fbfbfc; }
.workspace-switcher-icon { width: 30px; height: 30px; display: grid; place-items: center; color: white; border-radius: 9px; background: #171922; font: 700 12px Inter; }
.workspace-switcher small { display: block; color: #9b9eaa; font: 700 8px Inter; letter-spacing: .13em; }.workspace-switcher strong { display: block; margin-top: 2px; color: #292c35; font-size: 11px; }.switcher-chevron { margin-left: auto; color: #8b8e98; }
.sidebar-label { margin: 27px 10px 9px; color: #a2a4ad; font-size: 10px; font-weight: 600; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-link { min-height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border-radius: 10px; color: #727681; font-size: 12px; font-weight: 500; transition: background .16s, color .16s; }
.sidebar-link:hover { color: #252832; background: #f5f6f8; }.sidebar-link.active { color: #f7f8fa; background: #161820; box-shadow: 0 5px 12px rgba(18,20,28,.1); }
.side-icon { width: 18px; color: currentColor; text-align: center; font-size: 15px; }
.sidebar-count { min-width: 21px; height: 20px; display: grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 999px; color: #858995; background: rgba(255,255,255,.12); font: 10px Inter; }
.studio-nav-tag { margin-left: auto; padding: 3px 6px; border: 1px solid #e5e7ef; border-radius: 999px; color: #73798a; background: #f7f8fb; font: 700 8px Inter; letter-spacing: .05em; }
.sidebar-link-disabled { cursor: default; color: #aeb0b8; }.sidebar-link-disabled:hover { color: #aeb0b8; background: transparent; }.sidebar-link-disabled .coming-tag { margin-left: auto; padding: 3px 6px; border-color: #e8e9ed; color: #a1a3ac; font-size: 8px; }
.sidebar-bottom { margin-top: auto; }
.sidebar-help { display: flex; align-items: center; gap: 10px; padding: 12px 10px; margin-bottom: 13px; border: 1px solid #eceef1; border-radius: 11px; background: #fbfbfc; }
.help-glyph { width: 25px; height: 25px; display: grid; place-items: center; color: #626775; border: 1px solid #e2e4e9; border-radius: 50%; font: 600 11px Inter; }.sidebar-help strong { display: block; color: #4a4d57; font-size: 10px; }.sidebar-help small { color: #a0a2ab; font-size: 9px; }
.sidebar-user { display: flex; align-items: center; gap: 9px; padding: 12px 7px 2px; border-top: 1px solid #eceef1; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; color: #f7f8fa; border-radius: 50%; background: linear-gradient(135deg,#43485a,#171922); font-weight: 700; }
.avatar-small { width: 31px; height: 31px; font-size: 12px; }.sidebar-user-name { min-width: 0; flex: 1; }.sidebar-user-name strong { display: block; overflow: hidden; color: #393c45; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.sidebar-user-name small { display: block; overflow: hidden; color: #a1a3ad; font: 9px Inter; text-overflow: ellipsis; white-space: nowrap; }
.logout-inline { margin: 0; }.logout-inline button { width: 29px; height: 29px; border: 1px solid #eceef1; border-radius: 8px; color: #70737e; background: #fff; }
.workspace-main { min-width: 0; }
.workspace-topbar { position: sticky; top: 0; z-index: 30; min-height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #e8e9ed; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #9b9ea7; font-size: 11px; }.breadcrumbs i { color: #c5c7cd; font-style: normal; }.breadcrumbs strong { color: #51545e; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 10px; color: #878a94; font-size: 10px; }.topbar-status { color: #737782; }.topbar-divider { width: 1px; height: 20px; margin: 0 3px; background: #e3e5e9; }.avatar-top { width: 29px; height: 29px; font-size: 11px; }.status-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(114,214,164,.11); }
.workspace-content { max-width: 1280px; padding: 35px 36px 60px; margin: 0 auto; }
.sidebar-toggle, .sidebar-scrim { display: none; }
.dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }.dashboard-welcome .eyebrow { color: #9699a4; }.dashboard-welcome h1 { margin: 0 0 4px; color: #171922; font-size: clamp(25px,3vw,33px); font-weight: 600; letter-spacing: -.03em; }.dashboard-welcome p:not(.eyebrow) { margin: 0; color: #888b96; font-size: 12px; }.wave-mark { color: #aebdff; font-size: 21px; vertical-align: 3px; }
.form-alert-success { color: #216a48; border-color: #c7ebd8; background: #effaf4; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-bottom: 20px; }
.stat-card { position: relative; min-height: 141px; padding: 19px 20px; border: 1px solid #e8e9ed; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(18,23,39,.025); }.stat-card small { display: block; margin: 6px 0 9px; color: #888b95; font-size: 10px; }.stat-card strong { display: block; color: #151720; font: 700 28px Inter, var(--font); letter-spacing: -.03em; }.stat-card strong.stat-plan { font: 600 21px var(--font); }.stat-card > span:last-child { display: block; margin-top: 5px; color: #a1a4ad; font-size: 9px; }.stat-icon { width: 26px; height: 26px; display: grid; place-items: center; color: #555a67; border: 1px solid #edeef1; border-radius: 8px; font-size: 13px; }.stat-card-muted { background: #fbfbfc; }
.dashboard-panel { padding: 20px; border: 1px solid #e8e9ed; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(18,23,39,.025); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }.panel-heading .eyebrow { margin-bottom: 3px; color: #9a9da6; }.panel-heading h2 { margin: 0; color: #242731; font-size: 17px; font-weight: 600; }.text-link { display: inline-flex; align-items: center; gap: 7px; color: #555b67; font-size: 10px; font-weight: 600; }.text-link:hover { color: #11131a; }.panel-count { margin-left: 5px; padding: 3px 7px; color: #797d88; border-radius: 999px; background: #f1f2f5; font: 10px Inter; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 225px; padding: 25px; text-align: center; border: 1px dashed #dfe1e6; border-radius: 12px; background: #fcfcfd; }.empty-icon { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 11px; color: #777c8a; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; font-size: 19px; }.empty-state h3 { margin: 0 0 5px; color: #2c3039; font-size: 14px; }.empty-state p { max-width: 360px; margin: 0 0 15px; color: #898d98; font-size: 11px; line-height: 1.75; }.empty-state .button { min-height: 39px; font-size: 11px; }
.project-list { display: grid; }.project-row { min-height: 65px; display: flex; align-items: center; gap: 13px; padding: 10px 8px; border-top: 1px solid #f0f1f3; transition: background .15s; }.project-row:hover { background: #fafbfc; }.project-row-main { min-width: 0; flex: 1; }.project-row-main strong { display: block; overflow: hidden; color: #333640; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.project-row-main small { display: block; margin-top: 4px; color: #9b9ea8; font-size: 9px; }.project-row .project-status { color: #777b85; background: #f2f3f5; font-size: 9px; }.project-row .row-arrow { width: 18px; color: #a6a9b1; }
.dashboard-next-step { display: flex; align-items: center; gap: 14px; padding: 17px 19px; margin-top: 16px; border: 1px solid #e8e9ed; border-radius: 13px; background: #fafbfc; }.next-step-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #6875a8; border-radius: 11px; background: #eef0fa; }.dashboard-next-step > div:nth-child(2) { flex: 1; }.dashboard-next-step .eyebrow { margin-bottom: 3px; color: #9a9daa; }.dashboard-next-step strong { display: block; color: #3b3e48; font-size: 11px; }.dashboard-next-step p:not(.eyebrow) { margin: 4px 0 0; color: #90939d; font-size: 10px; }
.projects-create-panel { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 19px; margin-bottom: 18px; border: 1px solid #e6e8ed; border-radius: 14px; background: linear-gradient(105deg,#fff,#f9faff); }.create-panel-copy { display: flex; align-items: center; gap: 13px; }.create-panel-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #f6f7f9; border-radius: 12px; background: #181a23; font-size: 19px; }.create-panel-copy .eyebrow { margin-bottom: 2px; }.create-panel-copy h2 { margin: 0 0 2px; color: #282b35; font-size: 14px; font-weight: 600; }.create-panel-copy p:not(.eyebrow) { margin: 0; color: #8e929c; font-size: 10px; }.create-project-form { display: flex; gap: 8px; width: min(490px,55%); }.create-project-form input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; color: #252832; border: 1px solid #e4e6eb; border-radius: 9px; background: #fff; font-size: 11px; outline: none; }.create-project-form input:focus { border-color: #aebce1; box-shadow: 0 0 0 3px rgba(169,184,224,.18); }.create-project-form .button { min-height: 42px; padding: 0 15px; font-size: 10px; }
.projects-panel { min-height: 300px; }.projects-empty { min-height: 220px; }.table-filter { padding: 7px 10px; border: 1px solid #e8e9ed; border-radius: 8px; color: #858994; font-size: 10px; }.table-filter span { padding-left: 8px; }
.feature-coming { display: flex; align-items: center; gap: 12px; padding: 15px 17px; margin-top: 15px; border: 1px solid #e8e9ed; border-radius: 12px; background: #fbfbfc; }.feature-coming-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #8b92a6; background: #f0f1f6; border-radius: 9px; }.feature-coming div { flex: 1; }.feature-coming strong { display: block; color: #4a4d57; font-size: 11px; }.feature-coming p { margin: 3px 0 0; color: #9396a0; font-size: 10px; }
.package-page-section { padding-bottom: 45px; }.package-page-section .public-package-card { color: #f3f4f7; }.package-page-section .button-current { color: #262933; }.package-page-section .button-disabled { color: #838792; }.dashboard-future-note { max-width: none; margin: 0 0 18px; border-color: #e7e9ed; background: #fff; }.dashboard-future-note .future-note-icon { color: #5f6883; background: #f0f2f9; }.dashboard-future-note strong { color: #3d404a; }.dashboard-future-note p { color: #8d909b; }.dashboard-package-grid .public-package-card { min-height: 390px; border-color: #e6e8ed; background: #fff; box-shadow: 0 6px 20px rgba(18,23,39,.025); }.dashboard-package-grid .public-package-card h3,.dashboard-package-grid .package-price strong { color: #20232d; }.dashboard-package-grid .package-copy,.dashboard-package-grid .package-price span { color: #858995; }.dashboard-package-grid .package-price { border-color: #eceef1; }.dashboard-package-grid .public-package-card ul { color: #616571; }.dashboard-package-grid .public-package-card li i { color: #4b9b72; }.dashboard-package-grid .public-package-card.featured { border-color: #c8cde0; background: linear-gradient(155deg,#f7f8fd,#fff 60%); }
.error-page { position: relative; z-index: 1; min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }.error-mark { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 20px; color: #161821; border-radius: 18px; background: linear-gradient(135deg,#e6efff,#d7c9ff); font: 800 19px Inter; }.error-page h1 { margin: 0 0 9px; font-size: 34px; }.muted-lead { margin: 0 0 23px; color: #9699a5; }

@media (max-width: 1050px) {
    .marketing-nav { padding: 0 25px; }
    .auth-section { margin-left: 25px; margin-right: 25px; }
    .workspace-content { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 800px) {
    .marketing-nav { height: 72px; grid-template-columns: 1fr auto 1fr; padding: 0 18px; }
    .nav-menu-toggle { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: white; background: rgba(255,255,255,.04); }
    .nav-menu-toggle span { width: 15px; height: 1.5px; background: #e9eaf0; }
    .nav-links { position: absolute; top: 65px; left: 16px; right: 16px; display: none; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: #11131a; box-shadow: 0 15px 40px rgba(0,0,0,.4); }
    .nav-links.is-open { display: grid; gap: 0; }
    .nav-links a { padding: 12px; border-radius: 8px; }.nav-links a:hover { background: rgba(255,255,255,.06); }
    .nav-actions { gap: 6px; }.nav-actions .button { min-height: 37px; padding: 0 10px; font-size: 10px; }
    .brand-mark { width: 36px; height: 36px; border-radius: 12px; }.brand-name { font-size: 13px; }
    .hero-section { min-height: auto; padding-top: 83px; padding-bottom: 60px; }.hero-content h1 { font-size: clamp(38px, 8vw, 58px); }.hero-preview { margin-top: 48px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 13px; }.section-heading > p br { display: none; }
    .feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 205px; }
    .public-package-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }.public-package-card { min-height: 0; }
    .steps-grid { grid-template-columns: 1fr; }.steps-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }.steps-grid article:last-child { border-bottom: 0; }
    .final-cta { align-items: flex-start; flex-direction: column; }
    .auth-section { grid-template-columns: 1fr; margin-top: 28px; }.auth-promo { min-height: 300px; padding: 35px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }.auth-form-panel { padding: 36px; }
    .workspace-shell { display: block; }.workspace-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(285px, 85vw); transform: translateX(-105%); transition: transform .24s ease; box-shadow: 18px 0 45px rgba(15,18,28,.08); }.workspace-sidebar.is-open { transform: translateX(0); }.sidebar-scrim.is-open { position: fixed; z-index: 50; inset: 0; display: block; background: rgba(16,18,25,.28); }
    .sidebar-toggle { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #e7e8ec; border-radius: 9px; color: #555964; background: #fff; }
    .workspace-topbar { min-height: 59px; gap: 12px; padding: 0 17px; }.breadcrumbs { flex: 1; }.topbar-status,.topbar-divider { display: none; }.workspace-content { padding: 24px 17px 40px; }
    .dashboard-welcome { align-items: flex-start; flex-direction: column; }.dashboard-stats { grid-template-columns: 1fr; }.stat-card { min-height: 120px; }
    .projects-create-panel { align-items: stretch; flex-direction: column; }.create-project-form { width: 100%; }
    .dashboard-next-step { align-items: flex-start; flex-wrap: wrap; }.dashboard-next-step .text-link { margin-left: 49px; }
}
@media (max-width: 520px) {
    .marketing-nav { padding: 0 13px; grid-template-columns: 1fr auto 1.1fr; }.nav-actions .button-quiet { display: none; }
    .hero-section { padding: 72px 16px 50px; }.availability-pill { font-size: 9px; padding: 8px 11px; }.hero-content h1 { margin-top: 19px; font-size: 39px; }.hero-description { font-size: 13px; }.desktop-break { display: none; }
    .hero-actions { gap: 8px; }.hero-actions .button { min-height: 47px; padding: 0 14px; font-size: 11px; }.hero-login { display: none; }
    .hero-benefits { display: grid; justify-content: start; gap: 9px; max-width: 290px; margin-top: 23px; }
    .hero-preview { margin-top: 34px; border-radius: 12px; transform: none; }.preview-content { grid-template-columns: 40px 1fr; }.preview-board { padding: 14px 10px; }.preview-stats { gap: 5px; }.preview-stats > div { padding: 8px 6px; }.preview-stats b { font-size: 13px; }.preview-stats small { font-size: 8px; }.preview-project-row { grid-template-columns: 25px 1fr auto; gap: 6px; padding: 6px; }.preview-project-row .row-arrow { display: none; }.preview-project-row .project-thumb { width: 25px; height: 25px; }.preview-project-row b { font-size: 9px; }.preview-project-row small { font-size: 8px; }.project-status { padding: 4px 6px; font-size: 8px; }
    .section-shell { padding-left: 17px; padding-right: 17px; }.feature-section,.package-section,.steps-section { padding-bottom: 66px; }.section-heading h2 { font-size: 30px; }.future-note { align-items: flex-start; flex-wrap: wrap; }.future-note .coming-tag { margin-left: 46px; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 10px; padding: 20px 17px; }.footer-note { margin-left: 1px; }
    .auth-section { margin: 18px 12px 45px; border-radius: 16px; }.auth-promo { min-height: 255px; padding: 26px; }.auth-promo h1 { font-size: 37px; }.auth-form-panel { padding: 27px 22px; }
    .dashboard-welcome .button { width: 100%; }.panel-heading { align-items: flex-start; }.panel-heading h2 { font-size: 15px; }.project-row { gap: 8px; }.project-row .project-status { display: none; }.project-row .row-arrow { margin-left: auto; }
    .create-project-form { align-items: stretch; flex-direction: column; }.create-project-form input,.create-project-form .button { height: 43px; }.table-filter { font-size: 9px; }
}