:root{
    --bg:#0f1013;
    --panel:#171a20;
    --card:#1c2027;
    --text:#f5f5f5;
    --muted:#b9bec4;
    --primary:#d8b24a;
    --secondary:#9a7b2f;
    --accent:#e7cf83;
    --radius:18px;
    --content-width:1280px;
    --heading-font:system-ui;
    --body-font:system-ui;
}

html,body{margin:0;padding:0;min-height:100%;}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--body-font);
    line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font:inherit;}

.site-shell{
    max-width:var(--content-width);
    margin:0 auto;
}

.site-header{
    position:sticky;
    top:12px;
    z-index:30;
    margin:18px 24px 0;
    padding:14px 20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(15,16,19,.84);
    backdrop-filter:blur(18px);
}

.site-header .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--heading-font);
    font-weight:700;
}

.nav-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex:1;
}

.main-nav,
.header-actions,
.footer-links,
.footer-columns{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    width:48px;
    min-width:48px;
    height:40px;
    padding:0;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
    color:var(--text);
    box-shadow:none;
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}

.main-nav a,
.header-actions a,
.btn,
.btn-primary,
.btn-secondary,
.theme-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.02);
    line-height:1.1;
    white-space:nowrap;
}

.main-nav a.is-active,
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
    color:#111;
}

.public-layout,
.content-shell,
.faq-shell,
.contact-shell,
.enterprise-page-shell{
    width:min(var(--content-width), calc(100% - 48px));
    margin:0 auto;
    padding:24px 0 56px;
}

.public-layout{display:block;}

.public-main,
.content-card,
.footer-highlight,
.theme-panel,
.theme-tile,
.contact-form-card,
.contact-side-card,
.faq-item,
.enterprise-note-card{
    background:var(--panel);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:0 18px 36px rgba(0,0,0,.22);
}

.public-main{
    padding:28px;
}

.content-section,
.container{
    width:min(var(--content-width), calc(100% - 48px));
    margin:0 auto;
}

.narrow{
    max-width:880px;
    margin:0 auto;
}

h1,h2,h3,h4,.theme-kicker,.theme-banner__eyebrow,.brand span{
    font-family:var(--heading-font);
}

.eyebrow,
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:.78rem;
    line-height:1.1;
    font-weight:700;
    white-space:nowrap;
    text-shadow:none;
}

.pill-accent{
    background:#dcebe2;
    color:#173729;
    border-color:#b4cfc0;
}

.pill-warm{
    background:#ffe7a7;
    color:#5e3d00;
    border-color:#e0bb5c;
}

.prose,
.enterprise-page-copy,
.muted-copy{
    max-width:72ch;
}

.prose{color:var(--text);}
.muted-copy{color:var(--muted);}

.detail-meta-strip,
.hero-actions,
.card-top,
.card-bottom,
.faq-toolbar,
.toolbar,
.auth-links,
.classifieds-badge-row,
.classifieds-quicklinks,
.detail-sideband-card,
.template-license-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.detail-meta-strip{margin-bottom:14px;}
.hero-actions{margin-top:18px;}

.card-grid,
.template-card-grid,
.grid-two,
.grid-2,
.stack-md,
.list-stack,
.contact-benefits,
.meta-list,
.chip-list{
    display:grid;
    gap:16px;
}

.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.template-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-two,
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.contact-benefits,
.meta-list,
.chip-list{grid-template-columns:1fr;}

.enterprise-card,
.product-card,
.project-card,
.blog-card,
.template-preview-card,
.template-card,
.auth-form-card,
.auth-hero,
.enterprise-note,
.template-shop-callout,
.template-license-panel,
.detail-sideband-card,
.classifieds-seller-card,
.classifieds-contact-card,
.classifieds-checkout-card,
.classifieds-detail-hero{
    background:var(--panel);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:0 18px 36px rgba(0,0,0,.22);
}

.enterprise-page-hero,
.auth-hero,
.classifieds-detail-hero,
.template-conversion-hero,
.page-hero{
    padding:28px;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:18px;
}

.detail-sideband{
    display:grid;
    gap:16px;
}

.blog-detail-card,
.project-detail-card{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);
    gap:24px;
    align-items:start;
}

.template-preview-image{
    width:100%;
    border-radius:calc(var(--radius) - 4px);
    border:1px solid rgba(255,255,255,.08);
}

.data-table{
    width:100%;
    border-collapse:collapse;
}

.data-table th,
.data-table td{
    padding:12px 14px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.data-table th{
    color:var(--muted);
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.table-wrap{
    overflow:auto;
}

.empty-state,
.error-card{
    padding:28px;
}

.auth-shell,
.auth-form-shell,
.classifieds-create-shell{
    display:grid;
    gap:20px;
}

.auth-form-card,
.classifieds-create-shell .content-card,
.classifieds-checkout-card{
    padding:24px;
}

.stack-form,
.stack-md{
    display:grid;
    gap:16px;
}

.stack-form label,
.stack-md label{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.detail-sideband-card,
.template-license-panel,
.classifieds-seller-card,
.classifieds-contact-card{
    padding:20px;
}

.classifieds-detail__headline,
.classifieds-detail__summary,
.classifieds-detail-badges,
.classifieds-seller-card__body{
    display:grid;
    gap:16px;
}

.classifieds-detail-badges{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.classifieds-detail-badge{
    padding:14px 16px;
    border-radius:calc(var(--radius) - 4px);
    border:1px solid rgba(255,255,255,.08);
    background:var(--card);
}

.classifieds-gallery-main img{
    width:100%;
    border-radius:calc(var(--radius) - 4px);
}

.classifieds-gallery-thumbs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:12px;
    margin-top:14px;
}

.classifieds-gallery-thumb{
    display:block;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

.classifieds-gallery-thumb.is-active{
    border-color:var(--primary);
}

.privacy-category-list,
.product-status-list{
    display:grid;
    gap:14px;
}

.privacy-category-card{
    display:grid;
    gap:10px;
    padding:16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    background:var(--card);
}

.shop-category-strip,
.faq-category-strip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:min(var(--content-width), calc(100% - 48px));
    margin:0 auto 16px;
}

.shop-category-chip{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.shop-category-chip.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#111;
}

.theme-banner,
.theme-footer-note{
    margin:0 24px 12px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    background:rgba(255,255,255,.03);
}

.theme-hero{
    padding:28px;
    border-radius:calc(var(--radius) + 6px);
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}

.theme-hero-grid,
.theme-feature-grid,
.theme-home-grid,
.theme-home-cards{
    display:grid;
    gap:14px;
}

.theme-hero-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.theme-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.theme-home-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);}
.theme-home-cards{grid-template-columns:repeat(2,minmax(0,1fr));}

.theme-tile{
    padding:16px;
    background:var(--card);
}

.theme-section-head{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.site-footer{
    max-width:var(--content-width);
    margin:0 auto;
    padding:0 24px 28px;
}

.footer-columns,
.footer-grid{
    padding:18px;
}

.footer-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:var(--muted);
}

@media (max-width: 980px){
    .site-header{
        margin:12px 14px 0;
    }
    .site-header .header-inner,
    .nav-panel,
    .header-actions{
        align-items:flex-start;
        justify-content:flex-start;
    }
    .nav-panel{
        flex-direction:column;
        width:100%;
    }
    .nav-toggle{
        display:inline-flex;
        margin-left:auto;
    }
    .public-layout,
    .content-shell,
    .faq-shell,
    .contact-shell,
    .enterprise-page-shell{
        width:min(100% - 24px, var(--content-width));
        padding:18px 0 44px;
    }
    .content-section,
    .container,
    .shop-category-strip,
    .faq-category-strip{
        width:min(100% - 24px, var(--content-width));
    }
    .theme-hero-grid,
    .theme-feature-grid,
    .theme-home-grid,
    .theme-home-cards,
    .card-grid,
    .template-card-grid,
    .grid-two,
    .grid-2,
    .blog-detail-card,
    .project-detail-card,
    .classifieds-detail-badges{
        grid-template-columns:1fr;
    }
    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }
}