:root {
    --bg: #05060b;
    --panel: #0d101a;
    --panel-2: #111522;
    --line: rgba(155, 116, 255, .18);
    --muted: #8990a5;
    --text: #f5f5fb;
    --purple: #a665ff;
    --pink: #ff3d9a;
    --cyan: #29d8ff;
    --green: #4ce29b;
    --shadow: 0 22px 70px rgba(0, 0, 0, .38);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell-width { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.public-shell { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 73% 17%, rgba(103, 48, 171, .26), transparent 30%), radial-gradient(circle at 16% 72%, rgba(0, 99, 169, .16), transparent 30%), var(--bg); }
.landing-nav { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .08em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 10px 4px 10px 4px; color: #fff; font-weight: 900; font-size: 23px; text-shadow: 0 0 15px var(--cyan); background: linear-gradient(135deg, rgba(41, 216, 255, .3), rgba(166, 101, 255, .45)); box-shadow: 0 0 22px rgba(41, 216, 255, .2); }
.brand strong { display: block; font-size: 15px; line-height: 1; }
.brand small { display: block; color: var(--cyan); font-size: 8px; letter-spacing: .33em; margin-top: 5px; }
.landing-links { display: flex; align-items: center; gap: 28px; color: #bfc1cf; font-size: 13px; }
.landing-links > a:not(.button):hover, .text-link:hover { color: #fff; }
.button { border: 1px solid transparent; border-radius: 10px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 13px 18px; color: #fff; font-weight: 700; font-size: 13px; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(100deg, #8b43ed, #ef3895); box-shadow: 0 10px 28px rgba(196, 46, 157, .24); }
.button-primary:hover { box-shadow: 0 15px 36px rgba(196, 46, 157, .42); }
.button-ghost { border-color: var(--line); background: rgba(255, 255, 255, .035); color: #d8d9e6; }
.button-ghost:hover { border-color: rgba(166, 101, 255, .65); background: rgba(166, 101, 255, .1); }
.button-small { padding: 9px 13px; font-size: 12px; border-radius: 8px; }
.button-wide { width: 100%; padding-block: 15px; }
.button[disabled] { cursor: not-allowed; opacity: .5; transform: none; }

.hero { min-height: 560px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 50px; padding-block: 52px 80px; }
.kicker, .eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: .2em; font-weight: 800; }
.kicker span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.hero h1 { margin: 18px 0; font-size: clamp(46px, 6vw, 80px); line-height: .96; letter-spacing: -.06em; }
.hero h1 span { background: linear-gradient(90deg, var(--purple), var(--pink), var(--cyan)); background-clip: text; color: transparent; }
.hero-copy > p { max-width: 510px; color: #9b9faf; line-height: 1.75; font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.text-link { color: #b9b9cb; font-size: 13px; }
.text-link span { color: var(--pink); margin-left: 6px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 33px; color: #72798f; font-size: 10px; }
.hero-visual { position: relative; min-height: 410px; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(22px); opacity: .6; }
.orb-purple { width: 260px; height: 260px; top: 35px; right: 90px; background: rgba(155, 62, 244, .36); }
.orb-blue { width: 180px; height: 180px; bottom: 18px; left: 95px; background: rgba(25, 131, 255, .3); }
.dashboard-preview { position: relative; z-index: 1; width: 100%; transform: perspective(1100px) rotateY(-7deg) rotateX(3deg); padding: 15px; border: 1px solid rgba(172, 109, 255, .6); border-radius: 20px; background: linear-gradient(140deg, rgba(28, 21, 54, .96), rgba(7, 12, 24, .97)); box-shadow: 0 0 55px rgba(149, 52, 248, .3), var(--shadow); }
.preview-top { display: flex; align-items: center; gap: 6px; height: 31px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #aeb2c5; }
.preview-top small { margin-left: 17px; font-size: 10px; }.preview-top b { margin-left: auto; color: #888da0; font-size: 9px; font-weight: 500; }
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: #d54ff1; }.preview-dot:nth-child(2) { background: #46c5fe; }.preview-dot:nth-child(3) { background: #48e49d; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }.preview-stats > div { padding: 11px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: rgba(255, 255, 255, .035); }.preview-stats small, .preview-platforms small { display: block; color: #80869b; font-size: 8px; }.preview-stats strong { display: block; margin: 5px 0; font-size: 21px; }.preview-stats i { color: var(--green); font-size: 8px; font-style: normal; }
.preview-chart { height: 175px; padding: 14px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: rgba(255, 255, 255, .018); }.preview-chart small { color: #c6c9d7; font-size: 10px; }.preview-chart svg { display: block; width: 100%; height: 135px; margin-top: 7px; background: linear-gradient(180deg, rgba(184, 71, 244, .1), transparent 75%); }.preview-chart polyline { fill: none; stroke: #d448fa; stroke-width: 3; filter: drop-shadow(0 0 4px #d448fa); }
.preview-platforms { display: flex; align-items: center; gap: 9px; padding-top: 12px; }.platform { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 14px; }.youtube { color: #ff5a62; background: rgba(255, 57, 73, .13); }.instagram { color: #db72ff; background: rgba(195, 77, 255, .14); }.facebook { color: #63a4ff; background: rgba(44, 126, 255, .15); }.tiktok { color: #58f2fa; background: rgba(29, 235, 241, .12); }.preview-platforms div { margin-left: auto; text-align: right; }.preview-platforms strong { display: block; margin-top: 4px; font-size: 11px; }
.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }.feature-strip > div { min-height: 110px; display: grid; align-content: center; padding: 18px 22px; background: rgba(13, 15, 26, .86); }.feature-strip strong { margin-top: 10px; font-size: 13px; }.feature-strip small { margin-top: 5px; color: var(--muted); font-size: 11px; }.feature-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 9px; font-size: 18px; }.pink { color: #fb55c4; }.blue { color: #58a5ff; }.violet { color: #bb78ff; }.cyan { color: var(--cyan); }
.steps { padding-block: 115px; }.section-heading { text-align: center; }.section-heading h2 { margin: 14px auto 40px; max-width: 550px; font-size: 34px; letter-spacing: -.04em; }.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.step-grid > div { padding: 26px; border: 1px solid rgba(168, 101, 255, .18); border-radius: 14px; background: linear-gradient(145deg, rgba(153, 86, 245, .08), rgba(255, 255, 255, .015)); }.step-grid b { display: block; color: var(--pink); font-size: 25px; }.step-grid span { display: block; margin: 28px 0 10px; font-size: 17px; font-weight: 700; }.step-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.security-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 27px 32px; border: 1px solid rgba(38, 214, 255, .2); border-radius: 15px; background: linear-gradient(90deg, rgba(19, 102, 172, .16), rgba(150, 53, 226, .11)); }.security-banner > div { display: flex; align-items: center; gap: 18px; }.security-mark { font-size: 28px; color: var(--cyan); text-shadow: 0 0 20px var(--cyan); }.security-banner h3 { margin: 0 0 6px; font-size: 16px; }.security-banner p { margin: 0; max-width: 630px; color: var(--muted); font-size: 12px; line-height: 1.6; }.landing-footer { display: flex; justify-content: space-between; padding-block: 45px 30px; color: #62687b; font-size: 11px; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px 18px; background: radial-gradient(circle at 50% 15%, rgba(116, 41, 173, .22), transparent 35%), var(--bg); }.auth-card-wrap { width: min(470px, 100%); }.brand-center { display: flex; justify-content: center; margin-bottom: 28px; }.auth-heading { text-align: center; margin-bottom: 28px; }.auth-heading h1 { margin: 11px 0 8px; font-size: 29px; letter-spacing: -.04em; }.auth-heading p { margin: 0; color: var(--muted); font-size: 13px; }.form-stack { padding: 29px; border: 1px solid var(--line); border-radius: 17px; background: rgba(13, 16, 26, .9); box-shadow: var(--shadow); }.form-stack label:not(.check) { display: block; margin-bottom: 17px; color: #c7c9d6; font-size: 12px; font-weight: 700; }.form-stack input:not([type="checkbox"]) { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid rgba(152, 145, 201, .2); border-radius: 9px; outline: none; color: #fff; background: rgba(255, 255, 255, .035); }.form-stack input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(166, 101, 255, .12); }.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-meta { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 20px; font-size: 11px; }.form-meta a, .auth-footer a, .check a { color: var(--cyan); }.check { display: flex; align-items: flex-start; gap: 8px; margin: 11px 0; color: #898fa3; font-size: 11px; line-height: 1.5; }.check input { accent-color: var(--purple); margin-top: 2px; }.auth-footer { text-align: center; margin: 20px 0; color: var(--muted); font-size: 12px; }.alert { padding: 12px 14px; margin-bottom: 18px; border-radius: 9px; font-size: 12px; }.alert-error { border: 1px solid rgba(255, 73, 116, .35); color: #ff9db6; background: rgba(255, 45, 94, .1); }.alert-success { border: 1px solid rgba(61, 226, 151, .3); color: #8bf4bf; background: rgba(61, 226, 151, .09); }

.app-shell { min-height: 100vh; display: flex; background: #080a11; }.sidebar { width: 244px; flex: 0 0 244px; min-height: 100vh; display: flex; flex-direction: column; padding: 27px 16px 19px; border-right: 1px solid rgba(161, 100, 255, .13); background: #0a0c14; }.sidebar .brand { margin: 0 11px 49px; }.workspace-label { margin: 0 11px 15px; color: #555d72; font-size: 9px; font-weight: 800; letter-spacing: .18em; }.nav-list { display: grid; gap: 5px; }.nav-item { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; color: #939aae; font-size: 12px; }.nav-item span { width: 18px; text-align: center; color: #81889e; font-size: 17px; }.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .035); }.nav-item.active { color: #fff; border-color: rgba(174, 82, 249, .35); background: linear-gradient(90deg, rgba(154, 62, 240, .25), rgba(234, 46, 155, .1)); box-shadow: inset 3px 0 var(--pink), 0 6px 20px rgba(139, 57, 224, .11); }.nav-item.active span { color: #f26fe2; }.nav-item em { margin-left: auto; color: #687087; font-size: 8px; font-style: normal; }.sidebar-bottom { margin-top: auto; }.support-card { display: flex; align-items: center; gap: 9px; padding: 12px; margin-bottom: 16px; border: 1px solid rgba(77, 224, 156, .14); border-radius: 9px; background: rgba(77, 224, 156, .04); }.support-card strong, .support-card small { display: block; }.support-card strong { font-size: 10px; }.support-card small { margin-top: 4px; color: #6f8d82; font-size: 9px; }.pulse-dot, .status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }.logout-button { width: 100%; padding: 10px; border: 0; color: #7c849b; background: transparent; text-align: left; font-size: 11px; }.logout-button:hover { color: #fff; }.app-main { min-width: 0; flex: 1; }.topbar { min-height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid rgba(161, 100, 255, .1); background: rgba(8, 10, 17, .83); }.topbar h1 { margin: 7px 0 0; font-size: 20px; letter-spacing: -.03em; }.topbar-actions { display: flex; align-items: center; gap: 16px; }.icon-button, .mobile-menu { border: 0; color: #9b9fb1; background: transparent; font-size: 18px; }.avatar { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(221, 78, 209, .55); border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(140deg, #6d36cd, #e93d8d); }.mobile-menu { display: none; }.page-content { width: min(1310px, 100%); margin: auto; padding: 38px 42px 60px; }.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }.page-intro h2 { margin: 7px 0 0; font-size: 26px; letter-spacing: -.04em; }.muted { margin: 0; color: var(--muted); font-size: 12px; }.wave { color: var(--pink); font-size: 19px; }.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.stat-card, .panel-card, .platform-card { border: 1px solid rgba(158, 133, 232, .14); border-radius: 12px; background: linear-gradient(145deg, rgba(20, 23, 36, .91), rgba(11, 13, 22, .93)); }.stat-card { padding: 18px; }.stat-label { display: flex; justify-content: space-between; color: #969caf; font-size: 10px; }.stat-label span { color: var(--purple); }.stat-card strong { display: block; margin: 13px 0 7px; font-size: 28px; letter-spacing: -.05em; }.stat-card small { color: #6c778d; font-size: 9px; }.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 14px; }.panel-card { padding: 22px; }.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.card-heading h3 { margin: 8px 0 0; font-size: 16px; }.card-heading a { color: var(--cyan); font-size: 11px; }.card-heading select { padding: 7px 10px; border: 1px solid rgba(151, 143, 206, .2); border-radius: 7px; color: #a4a8b8; background: #141724; font-size: 10px; }.empty-chart { position: relative; min-height: 260px; margin-top: 18px; overflow: hidden; border-radius: 8px; }.chart-lines { position: absolute; inset: 0; display: grid; align-content: space-around; padding: 10px 0; }.chart-lines i { display: block; border-top: 1px dashed rgba(155, 161, 190, .12); }.chart-message { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }.chart-message span, .empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border: 1px solid rgba(169, 95, 245, .35); border-radius: 50%; color: var(--purple); background: rgba(159, 86, 245, .1); font-size: 22px; }.chart-message strong, .empty-state strong { font-size: 12px; }.chart-message small, .empty-state p { max-width: 240px; margin: 6px 0 0; color: #6f778c; font-size: 10px; line-height: 1.6; }.empty-state { display: grid; justify-items: center; padding: 47px 10px 25px; text-align: center; }.empty-state .button { margin-top: 17px; }.account-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }.account-row:last-child { border-bottom: 0; }.account-row strong, .account-row small { display: block; }.account-row strong { font-size: 11px; }.account-row small { margin-top: 4px; color: #717a91; font-size: 9px; }.platform-badge { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; }.account-row .status-dot { margin-left: auto; }.welcome-panel { display: flex; align-items: center; gap: 17px; margin-top: 14px; padding: 19px 23px; border-color: rgba(38, 214, 255, .16); background: linear-gradient(90deg, rgba(22, 97, 166, .1), rgba(165, 63, 193, .08)); }.welcome-orb { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(40, 215, 255, .4); border-radius: 50%; color: var(--cyan); box-shadow: 0 0 23px rgba(40, 215, 255, .18); }.welcome-panel h3 { margin: 6px 0; font-size: 14px; }.welcome-panel p { margin: 0; color: #727c90; font-size: 10px; }.welcome-panel .button { margin-left: auto; }
.secure-pill { padding: 9px 12px; border: 1px solid rgba(70, 226, 155, .22); border-radius: 7px; color: #71dbac; background: rgba(70, 226, 155, .07); font-size: 10px; }.account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }.platform-card { position: relative; min-height: 250px; padding: 22px; overflow: hidden; }.platform-card::after { position: absolute; right: -25px; bottom: -48px; width: 170px; height: 170px; border-radius: 50%; opacity: .18; filter: blur(22px); content: ''; }.platform-card.youtube::after { background: #ff3747; }.platform-card.instagram::after { background: #cd56ff; }.platform-card.facebook::after { background: #438df5; }.platform-card.tiktok::after { background: #37e9ea; }.platform-card-top { display: flex; justify-content: space-between; align-items: start; }.large-platform-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 12px; font-size: 22px; font-weight: 800; }.platform-card.youtube .large-platform-icon { color: #ff5561; }.platform-card.instagram .large-platform-icon { color: #d76bff; }.platform-card.facebook .large-platform-icon { color: #5f9eff; }.platform-card.tiktok .large-platform-icon { color: #52eff5; }.connection-status { display: inline-flex; align-items: center; gap: 7px; color: #6d7489; font-size: 10px; }.connection-status i { width: 6px; height: 6px; border-radius: 50%; background: #555c6d; }.connection-status.is-connected { color: var(--green); }.connection-status.is-connected i { background: var(--green); box-shadow: 0 0 10px var(--green); }.platform-card h3 { position: relative; z-index: 1; margin: 23px 0 7px; font-size: 18px; }.platform-card > p { position: relative; z-index: 1; max-width: 270px; min-height: 35px; margin: 0 0 19px; color: #7d8498; font-size: 11px; line-height: 1.55; }.connected-account { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; padding: 10px; border: 1px solid rgba(73, 226, 158, .12); border-radius: 8px; background: rgba(73, 226, 158, .04); }.connected-account strong { font-size: 11px; }.connected-account small { color: #70867e; font-size: 9px; }.platform-actions { display: flex; gap: 8px; }.notice-card { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; padding: 17px 19px; border: 1px solid rgba(41, 216, 255, .17); border-radius: 11px; background: rgba(41, 216, 255, .04); }.notice-card > span { color: var(--cyan); font-size: 18px; }.notice-card strong { font-size: 11px; }.notice-card p { margin: 6px 0 0; color: #788298; font-size: 10px; line-height: 1.6; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 30px; }.hero-copy { text-align: center; }.hero-copy > p { margin-inline: auto; }.hero-actions, .trust-row { justify-content: center; }.hero-visual { max-width: 650px; width: 100%; margin: 0 auto; }.feature-strip { grid-template-columns: repeat(2, 1fr); }.sidebar { position: fixed; z-index: 10; left: -260px; transition: left .2s ease; box-shadow: var(--shadow); }.sidebar.is-open { left: 0; }.mobile-menu { display: inline-block; }.topbar { padding-inline: 22px; gap: 15px; }.topbar > div:first-of-type { margin-right: auto; }.page-content { padding-inline: 22px; }.stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shell-width { width: min(100% - 30px, 1180px); }.landing-nav { height: 75px; }.landing-links > a:not(.button) { display: none; }.landing-links { gap: 7px; }.hero { padding-block: 48px 65px; }.hero h1 { font-size: 53px; }.hero-visual { min-height: 270px; }.dashboard-preview { transform: none; padding: 8px; }.preview-chart { height: 125px; }.preview-chart svg { height: 92px; }.preview-stats strong { font-size: 14px; }.preview-stats { gap: 4px; }.preview-stats > div { padding: 7px; }.feature-strip, .step-grid, .account-grid { grid-template-columns: 1fr; }.steps { padding-block: 75px; }.section-heading h2 { font-size: 28px; }.security-banner, .security-banner > div, .landing-footer { align-items: flex-start; flex-direction: column; }.security-banner { padding: 21px; }.landing-footer { gap: 9px; }.auth-card-wrap { width: 100%; }.form-stack { padding: 22px 18px; }.two-col { grid-template-columns: 1fr; gap: 0; }.page-content { padding: 25px 15px 40px; }.topbar { min-height: 73px; padding-inline: 15px; }.topbar h1 { font-size: 17px; }.stat-grid { gap: 8px; }.stat-card { padding: 13px; }.stat-card strong { font-size: 23px; }.dashboard-grid { grid-template-columns: 1fr; }.page-intro { align-items: flex-start; flex-direction: column; }.welcome-panel { align-items: flex-start; flex-wrap: wrap; }.welcome-panel .button { margin-left: 0; }.account-grid { gap: 10px; } }