:root{
    --bg:#f7f5fb;
    --panel:#ffffff;
    --panel2:#fbf8ff;
    --text:#1f1830;
    --muted:#7d7490;
    --line:#e9e1f7;
    --purple:#9d6dff;
    --purple2:#c98fff;
    --purple3:#7c3aed;
    --shadow:0 16px 50px rgba(123,88,198,.10);
    --shadow-soft:0 12px 30px rgba(123,88,198,.08);
    --radius:30px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:Inter,sans-serif;
    background:
        radial-gradient(circle at top left,#efe9ff 0,#f7f5fb 40%,#f7f5fb 100%);
    color:var(--text)
}
a{
    text-decoration:none;
    color:inherit
}
img{
    max-width:100%;
    display:block
}
input,select,button,textarea{
    font:inherit
}
button{
    cursor:pointer
}
.flash-wrap{
    position:fixed;
    top:18px;
    right:18px;
    z-index:99;
    display:grid;
    gap:10px
}
.flash{
    background:#fff;
    padding:14px 18px;
    border-radius:18px;
    box-shadow:var(--shadow);
    border:1px solid var(--line)
}
.flash.success{
    border-left:4px solid #6bcf88
}
.flash.error{
    border-left:4px solid #ff7c8f
}
.page-shell{
    max-width:1280px;
    margin:0 auto;
    padding:18px
}
.gc-topbar,.dashboard-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 18px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.65);
    border-radius:32px;
    box-shadow:var(--shadow)
}
.hero-topbar{
    position:sticky;
    top:12px;
    z-index:30
}
.brand-mark{
    padding:12px 16px;
    border-radius:18px;
    background:linear-gradient(135deg,#121018,#8c3fff 70%,#d59bff);
    color:#fff;
    font-weight:800;
    letter-spacing:.02em
}
.brand-mark.big{
    display:inline-block;
    margin-bottom:14px
}
.brand-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    background:transparent!important;
    padding:0!important;
    border-radius:0!important
}
.brand-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--purple3),var(--purple2));
    box-shadow:0 0 0 6px rgba(157,109,255,.12)
}
.pill-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.pill-nav a,.pill-nav .chip,.small-pill{
    padding:14px 20px;
    border-radius:999px;
    background:transparent;
    border:1px solid var(--line);
    color:#322a42;
    font-weight:600
}
.pill-nav a.active,.chip.active,.small-pill.active{
    background:rgba(157,109,255,.12);
    border-color:rgba(157,109,255,.28);
    color:var(--purple)
}
.topbar-actions{
    display:flex;
    gap:10px;
    align-items:center
}
.primary-btn,.ghost-btn,.row-actions button{
    padding:13px 22px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.22s ease
}
.primary-btn{
    background:linear-gradient(135deg,var(--purple2),#8f4fff);
    color:#fff;
    box-shadow:0 14px 30px rgba(157,109,255,.24)
}
.primary-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(157,109,255,.28)
}
.ghost-btn,.row-actions button{
    background:#fff;
    border-color:var(--line)
}
.ghost-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(157,109,255,.28);
    color:var(--purple)
}
.primary-btn.xl,.ghost-btn.xl{
    padding:16px 24px
}
.primary-btn.full,.ghost-btn.full{
    width:100%
}
.landing-shell{
    padding-bottom:60px
}
.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:24px;
    margin-top:22px;
    align-items:stretch
}
.glass-card,.hero-panel,.panel-card,.auth-card,.stat-card,.mini-card,.feature-card,.slot-card,.showcase-card,.cta-box,.step-card,.faq-card,.feature-stat-card{
    background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.86));
    border:1px solid rgba(233,225,247,.9);
    border-radius:34px;
    box-shadow:var(--shadow)
}
.hero-copy{
    padding:40px
}
.hero-copy-card{
    position:relative;
    overflow:hidden
}
.hero-copy-card::before{
    content:"";
    position:absolute;
    inset:auto -80px -80px auto;
    width:220px;
    height:220px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(201,143,255,.24),transparent 70%);
    pointer-events:none
}
.eyebrow{
    display:inline-flex;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(157,109,255,.13);
    color:var(--purple);
    font-weight:700;
    margin-bottom:18px
}
.hero-copy h1{
    font-size:56px;
    line-height:1.02;
    margin:0 0 16px;
    letter-spacing:-.03em
}
.hero-copy h1 span{
    color:var(--purple)
}
.hero-copy p{
    font-size:18px;
    line-height:1.7;
    color:var(--muted);
    max-width:700px
}
.hero-lead{
    max-width:780px
}
.cta-row{
    display:flex;
    gap:12px;
    margin:30px 0
}
.cta-row.center{
    justify-content:center
}
.hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px
}
.hero-points span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.85);
    color:#44395a;
    font-weight:600;
    font-size:14px
}
.stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:26px
}
.stat-mini{
    padding:18px;
    border-radius:24px;
    background:rgba(255,255,255,.85);
    border:1px solid var(--line)
}
.stat-mini strong{
    display:block;
    font-size:24px
}
.stat-mini span{
    color:var(--muted)
}
.hero-panel{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:18px
}
.hero-panel-top{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.chip{
    padding:12px 18px;
    border-radius:999px;
    border:1px solid var(--line);
    font-weight:700
}
.hero-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}
.metric-card,.stat-card{
    padding:26px;
    border-radius:28px;
    background:#fff;
    border:1px solid var(--line)
}
.metric-card small,.stat-card small{
    display:block;
    color:var(--muted);
    margin-bottom:10px
}
.metric-card strong,.stat-card strong{
    font-size:36px;
    letter-spacing:-.03em
}
.chart-card{
    padding:18px;
    border-radius:30px;
    background:#fff;
    border:1px solid var(--line)
}
.chart-head,.panel-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:14px
}
.chart-head h3,.panel-head h2{
    font-size:34px;
    letter-spacing:-.03em;
    margin:0 0 6px
}
.chart-head p,.panel-head p,.section-title p,.showcase-card p,.mini-card p,.empty-cell,.feature-card p,.slot-card small,.faq-card p,.step-card p{
    color:var(--muted);
    margin:0
}
.chart-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.fake-chart{
    height:280px;
    border-radius:28px;
    background:linear-gradient(180deg,rgba(157,109,255,.10),rgba(157,109,255,.02));
    border:1px solid var(--line);
    position:relative;
    overflow:hidden
}
.fake-chart.real{
    padding:14px
}
.fake-chart svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.chart-grid-lines{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to bottom,rgba(157,109,255,.10) 1px,transparent 1px);
    background-size:100% 56px;
    opacity:.6
}
.chart-labels{
    position:absolute;
    bottom:12px;
    left:20px;
    right:20px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:13px
}
.curve{
    position:absolute;
    inset:25px;
    background:linear-gradient(180deg,rgba(157,109,255,.18),transparent 80%);
    clip-path:path('M 0 180 C 100 150, 140 70, 260 60 S 430 240, 520 200 S 680 120, 900 150 L 900 260 L 0 260 Z')
}
.chart-dots{
    position:absolute;
    inset:0;
    pointer-events:none
}
.chart-dots span{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:999px;
    background:#fff;
    border:3px solid var(--purple);
    box-shadow:0 8px 18px rgba(157,109,255,.18)
}
.chart-dots span:nth-child(1){left:9%;top:62%}
.chart-dots span:nth-child(2){left:26%;top:28%}
.chart-dots span:nth-child(3){left:48%;top:70%}
.chart-dots span:nth-child(4){left:69%;top:44%}
.chart-dots span:nth-child(5){left:88%;top:55%}
.preview-banner{
    display:grid;
    gap:12px
}
.preview-label{
    font-size:13px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:var(--muted)
}
.preview-ad-card{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:16px;
    align-items:center;
    padding:16px;
    border-radius:24px;
    border:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#fcf9ff)
}
.preview-ad-image{
    min-height:96px;
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(17,16,24,.94),rgba(74,43,132,.95) 58%,rgba(157,109,255,.92));
    position:relative;
    overflow:hidden
}
.preview-ad-image::after{
    content:"";
    position:absolute;
    inset:16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(90deg,rgba(255,255,255,.10),transparent)
}
.preview-ad-copy strong{
    display:block;
    font-size:18px;
    margin-bottom:6px
}
.preview-ad-copy p{
    margin:0;
    color:var(--muted);
    line-height:1.6
}
.content-section{
    padding:26px 6px 8px
}
.content-section.alt{
    padding-top:6px
}
.section-title{
    max-width:760px;
    margin-bottom:18px
}
.section-title.align-left{
    max-width:none
}
.section-title h2{
    font-size:42px;
    letter-spacing:-.03em;
    margin:0 0 10px
}
.feature-grid,.showcase-grid,.card-grid.mini{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}
.feature-grid-landing{
    grid-template-columns:repeat(3,1fr)
}
.feature-card,.showcase-card,.mini-card,.faq-card,.step-card{
    padding:26px
}
.feature-card h3,.showcase-card .showcase-top,.mini-card h3,.faq-card h3,.step-card h3{
    margin:0 0 10px;
    font-size:24px
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.large-stats{
    margin-top:10px
}
.feature-stat-card{
    padding:28px 24px;
    border-radius:28px;
    background:linear-gradient(180deg,#fff,#fcf9ff);
    border:1px solid var(--line)
}
.feature-stat-card strong{
    display:block;
    font-size:38px;
    line-height:1;
    margin-bottom:10px;
    letter-spacing:-.03em
}
.feature-stat-card span{
    color:var(--muted);
    font-weight:600
}
.slot-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:18px
}
.slot-card{
    min-height:150px;
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(160deg,#121018,#2f244d 58%,#9d6dff);
    color:#fff
}
.slot-card.wide:last-child{
    grid-column:1/-1
}
.slot-card span{
    font-size:30px;
    font-weight:800;
    margin-bottom:6px
}
.slot-card em{
    margin-top:10px;
    color:rgba(255,255,255,.78);
    font-style:normal;
    font-size:14px
}
.premium-slot{
    position:relative;
    overflow:hidden
}
.premium-slot::before{
    content:"";
    position:absolute;
    inset:-30% auto auto 55%;
    width:180px;
    height:180px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)
}
.steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.step-card{
    position:relative;
    overflow:hidden
}
.step-number{
    width:52px;
    height:52px;
    border-radius:18px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg,var(--purple2),#8f4fff);
    box-shadow:0 14px 24px rgba(157,109,255,.22)
}
.landing-showcase-grid{
    grid-template-columns:repeat(2,1fr)
}
.showcase-card ul{
    margin:0;
    padding-left:18px;
    color:var(--muted);
    line-height:1.9
}
.faq-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.faq-card{
    background:linear-gradient(180deg,#fff,#fcf9ff)
}
.cta-final .cta-box{
    padding:38px;
    text-align:center
}
.landing-cta-box{
    background:
        radial-gradient(circle at top right,rgba(201,143,255,.18),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88))
}
.cta-box h2{
    font-size:44px;
    margin:0 0 10px
}
.cta-box p{
    font-size:18px;
    color:var(--muted);
    max-width:740px;
    margin:0 auto 24px
}
.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px
}
.auth-card{
    width:min(620px,100%);
    padding:36px
}
.auth-large h1{
    font-size:44px;
    letter-spacing:-.03em;
    margin:0 0 10px
}
.auth-large p{
    color:var(--muted);
    margin:0 0 22px
}
.form-grid{
    display:grid;
    gap:16px
}
.form-grid.two-col{
    grid-template-columns:repeat(2,1fr)
}
.form-grid.three-col{
    grid-template-columns:repeat(3,1fr);
    align-items:end
}
.form-grid label{
    display:grid;
    gap:8px
}
.form-grid label span{
    font-weight:700
}
.form-grid input,.form-grid select,.inline-form input,.form-grid textarea{
    border-radius:18px;
    border:1px solid var(--line);
    background:#fff;
    padding:0 16px;
    outline:none
}
.form-grid input,.form-grid select,.inline-form input{
    height:52px
}
.form-grid textarea{
    padding:14px 16px;
    min-height:120px;
    resize:vertical
}
.form-grid .full{
    grid-column:1/-1
}
.auth-links{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    color:var(--muted)
}
.dashboard-shell{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:18px;
    padding:18px;
    min-height:100vh
}
.dashboard-sidebar{
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));
    border:1px solid var(--line);
    border-radius:34px;
    padding:18px;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow)
}
.sidebar-brand{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding-bottom:16px
}
.avatar-badge{
    width:50px;
    height:50px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--purple2),#8f4fff);
    color:#fff;
    font-weight:800
}
.sidebar-brand p{
    margin:4px 0 0;
    color:var(--muted)
}
.sidebar-section-title{
    font-size:13px;
    font-weight:800;
    letter-spacing:.2em;
    color:var(--muted);
    margin:18px 8px 10px
}
.sidebar-nav{
    display:grid;
    gap:8px
}
.sidebar-link{
    padding:16px 18px;
    border-radius:22px;
    font-weight:700
}
.sidebar-link.active{
    background:rgba(157,109,255,.14);
    color:var(--purple);
    border:1px solid rgba(157,109,255,.25)
}
.sidebar-cta{
    margin-top:auto;
    padding-top:18px
}
.dashboard-main{
    display:grid;
    gap:18px
}
.panel-card{
    padding:18px 20px
}
.table-wrap{
    overflow:auto
}
.data-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px
}
.data-table th{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    text-align:left;
    padding:0 16px 8px
}
.data-table td{
    background:#fff;
    padding:16px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.data-table td:first-child{
    border-left:1px solid var(--line);
    border-radius:18px 0 0 18px
}
.data-table td:last-child{
    border-right:1px solid var(--line);
    border-radius:0 18px 18px 0
}
.data-table td strong{
    display:block
}
.data-table td small{
    display:block;
    color:var(--muted);
    margin-top:6px
}
.status{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    border:1px solid var(--line);
    text-transform:capitalize
}
.status.active{
    background:#effcf2;
    color:#1f8a49
}
.status.pending{
    background:#fff8e8;
    color:#b88118
}
.status.paused{
    background:#f4f4f7;
    color:#6e6e80
}
.status.rejected{
    background:#fff0f3;
    color:#d04a70
}
.row-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.row-actions a,.row-actions button{
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff
}
.empty-cell{
    text-align:center;
    border-radius:18px!important
}
.inline-form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center
}
.admin-adjust input{
    height:44px
}
.info-box{
    padding:18px;
    border-radius:24px;
    background:rgba(157,109,255,.08);
    border:1px solid rgba(157,109,255,.16)
}
.info-box p,.info-box small{
    margin:4px 0 0;
    color:var(--muted)
}
.mini-card strong{
    font-size:24px
}
.gcads-card{
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    border:1px solid #ebe3f8;
    box-shadow:0 10px 24px rgba(0,0,0,.08)
}
.gcads-card img{
    width:100%;
    height:auto;
    display:block
}
.desktop-only{
    display:flex
}
@media (max-width:1100px){
    .hero-grid,.dashboard-shell,.slot-grid,.feature-grid,.showcase-grid,.stats-row,.stats-grid,.form-grid.two-col,.form-grid.three-col,.steps-grid,.faq-grid,.feature-grid-landing,.landing-showcase-grid{
        grid-template-columns:1fr
    }
    .desktop-only{
        display:none
    }
    .hero-copy h1{
        font-size:42px
    }
    .section-title h2,.cta-box h2,.auth-large h1,.chart-head h2,.panel-head h2{
        font-size:32px
    }
    .dashboard-shell{
        padding:10px
    }
    .dashboard-sidebar{
        order:2
    }
    .dashboard-main{
        order:1
    }
}
@media (max-width:720px){
    .page-shell,.dashboard-shell{
        padding:12px
    }
    .gc-topbar,.dashboard-topbar{
        padding:12px 14px;
        border-radius:24px
    }
    .hero-copy,.hero-panel,.panel-card,.auth-card,.feature-card,.showcase-card,.faq-card,.step-card{
        padding:20px
    }
    .topbar-actions,.cta-row,.auth-links,.inline-form{
        flex-direction:column;
        align-items:stretch
    }
    .hero-points{
        flex-direction:column
    }
    .metric-card strong,.stat-card strong,.feature-stat-card strong{
        font-size:28px
    }
    .chart-head,.panel-head{
        flex-direction:column
    }
    .preview-ad-card{
        grid-template-columns:1fr
    }
    .data-table{
        min-width:860px
    }
    .section-title h2{
        font-size:30px
    }
    .hero-copy h1{
        font-size:36px
    }
    .cta-box h2{
        font-size:32px
    }
}

.brand-logo{
    height:36px;
    width:auto;
    display:block;
}