/* ============================================
   FoxyNoTail.com - Dark Theme Design System
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
    --bg: #0f0f17;
    --surface: #1a1a28;
    --surface-2: #222236;
    --surface-3: #2a2a42;
    --border: #2e2e48;
    --text: #d8d8e8;
    --text-muted: #8888a8;
    --text-dim: #5a5a78;
    --accent: #e8963c;
    --accent-hover: #f0a850;
    --accent-dim: rgba(232,150,60,0.15);
    --green: #4caf50;
    --green-dim: rgba(76,175,80,0.15);
    --blue: #5b9bd5;
    --red: #e74c3c;
    --yellow: #f0c040;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --font: 'Segoe UI',system-ui,-apple-system,sans-serif;
    --max-width: 1200px;
    --nav-height: 56px;
}

/* ---- Reset & Base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
ul,ol{padding-left:1.5rem}

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6{color:var(--text);line-height:1.3;margin-bottom:.75rem}
h1{font-size:2rem;font-weight:700}
h2{font-size:1.5rem;font-weight:600}
h3{font-size:1.2rem;font-weight:600}
h4{font-size:1.05rem;font-weight:600}
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--accent)}
.text-green{color:var(--green)}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.text-center{text-align:center}

/* ---- Layout ---- */
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.25rem;width:100%}
main{flex:1;padding:1.5rem 0 3rem}
.page-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem}
.page-section>h1,.page-section>h2{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-wrap{flex-wrap:wrap}
.flex-center{align-items:center}
.gap-sm{gap:.5rem}
.gap-md{gap:1rem}
.gap-lg{gap:1.5rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.2rem;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,transform .1s;text-decoration:none;line-height:1}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:var(--accent-hover);color:#000}
.btn-secondary{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface-2);color:var(--text)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#43a047;color:#fff}
.btn-sm{padding:.35rem .8rem;font-size:.8rem}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#000}

/* ---- Cards ---- */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .15s}
.card:hover{border-color:var(--accent)}
.card-body{padding:1rem}
.card-title{font-size:1rem;font-weight:600;margin-bottom:.5rem}
.card-text{font-size:.875rem;color:var(--text-muted)}

/* ---- Badges ---- */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.badge-accent{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(232,150,60,.3)}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-blue{background:rgba(91,155,213,.15);color:var(--blue)}
.badge-new{background:var(--green-dim);color:var(--green);border:1px solid rgba(76,175,80,.3)}

/* ---- Search bar ---- */
.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}
.search-bar input{flex:1;padding:.6rem 1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;outline:none;transition:border-color .15s}
.search-bar input:focus{border-color:var(--accent)}
.search-bar input::placeholder{color:var(--text-dim)}

/* ---- Filter tabs ---- */
.filter-tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1rem}
.filter-tab{padding:.4rem .9rem;background:transparent;border:1px solid var(--border);border-radius:20px;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .15s;text-decoration:none}
.filter-tab:hover{border-color:var(--accent);color:var(--accent)}
.filter-tab.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600}

/* ---- Star ratings ---- */
.stars{color:var(--yellow);font-size:1rem;letter-spacing:2px}
.stars .empty{color:var(--surface-3)}

/* ---- Ad containers ---- */
.ad-container{margin:1.5rem auto;text-align:center;width:100%;max-width:970px;overflow:hidden}
.ad-container .adsbygoogle{max-width:100%}
.ad-label{font-size:.7rem;color:var(--text-dim);text-align:center;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.05em}
.ad-header,.ad-footer,.ad-download-fixed{min-height:90px}
.ad-content{min-height:100px}
.ad-infeed,.ad-inarticle,.ad-download{min-height:250px}
.ad-sidebar{max-width:300px;min-height:600px}
@media(max-width:600px){.ad-header,.ad-footer,.ad-download-fixed{min-height:100px}}
.grid > .ad-label,.grid > .ad-container,.mkt-grid > .ad-label,.mkt-grid > .ad-container{grid-column:1 / -1}
.ad-placeholder{display:flex;align-items:center;justify-content:center;border:2px dashed var(--border, #444);color:var(--text-dim);font-size:.8rem;background:rgba(255,255,255,.03);border-radius:8px}

/* ---- Footer ---- */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:1.5rem 0;margin-top:auto}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.site-footer a{color:var(--text-muted);font-size:.85rem}
.site-footer a:hover{color:var(--accent)}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}

/* ---- Hero ---- */
.hero{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;margin-bottom:1.5rem;text-align:center}
.hero h1{font-size:2.5rem;margin-bottom:.5rem}
.hero p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto 1.5rem}

/* ---- Quick links ---- */
.quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.quick-link{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s,transform .15s;color:var(--text)}
.quick-link:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.quick-link img{width:48px;height:48px;margin-bottom:.75rem}
.quick-link h3{font-size:1rem;margin-bottom:.25rem}
.quick-link p{font-size:.8rem;color:var(--text-muted)}

/* ---- Video cards ---- */
.video-card{display:flex;gap:1rem;padding:.75rem;border-radius:var(--radius-sm);transition:background .15s;align-items:center}
.video-card:hover{background:var(--surface-2)}
.video-card img{width:180px;min-width:180px;border-radius:var(--radius-sm)}
.video-card h3{font-size:1rem;margin-bottom:.25rem}
.video-card .date{font-size:.8rem;color:var(--text-dim)}
@media(max-width:600px){.video-card{flex-direction:column}.video-card img{width:100%;min-width:unset}}

/* ---- Marketplace cards ---- */
.mkt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}@media(max-width:1200px){.mkt-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){.mkt-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.mkt-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}}
.mkt-card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .15s;color:var(--text);text-decoration:none}
.mkt-card:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.mkt-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface);padding:.5rem;display:block}
.mkt-card-body{padding:.6rem .75rem .75rem;text-align:center}
.mkt-card-body h3{font-size:.9rem;line-height:1.25;margin:.25rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.type-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}
.price{color:var(--yellow);font-weight:600;font-size:.95rem}
.filter-tab .count{opacity:.7;font-size:.75rem;margin-left:.3rem}
.mkt-card-body > .flex{flex-wrap:wrap;row-gap:.25rem}

/* ---- Pagination ---- */
.pagination{display:flex;gap:.25rem;justify-content:center;margin:1.5rem 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:.4rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text-muted);transition:all .15s}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}
.pagination .gap{border:none;color:var(--text-dim)}

/* ---- Sort selector ---- */
.sort-select{padding:.4rem .8rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;outline:none;cursor:pointer}
.sort-select:focus{border-color:var(--accent)}

/* ---- Download detail ---- */
.dl-detail{display:flex;gap:2rem;flex-wrap:wrap}
.dl-detail-main{flex:1;min-width:300px}
.dl-detail-icon{flex:0 0 120px;text-align:center}
.dl-detail-icon img{width:96px;height:96px;border-radius:var(--radius);border:2px solid var(--border)}

/* ---- How To cards ---- */
.howto-card{display:flex;gap:1rem;padding:1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);align-items:center;transition:border-color .2s;color:var(--text);text-decoration:none}
.howto-card:hover{border-color:var(--accent);color:var(--text)}
.howto-card img{width:160px;min-width:160px;border-radius:var(--radius-sm)}
@media(max-width:600px){.howto-card{flex-direction:column}.howto-card img{width:100%;min-width:unset}}

/* ---- Nav ---- */
.site-nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height)}
.nav-brand{display:flex;align-items:center;gap:.5rem;color:var(--text);font-weight:700;font-size:1.1rem;text-decoration:none}
.nav-brand:hover{color:var(--text)}
.nav-brand img{width:32px;height:32px}
.nav-links{display:flex;gap:.25rem;list-style:none;align-items:center}
.nav-links a{padding:.4rem .8rem;border-radius:var(--radius-sm);color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--accent);background:var(--accent-dim)}
.nav-links a.active{color:var(--accent);font-weight:600}
.nav-links a.nav-external{color:var(--text-dim);font-size:.85rem}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;padding:.25rem}
@media(max-width:768px){
    .nav-toggle{display:block}
    .nav-links{display:none;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;padding:.5rem;gap:0}
    .nav-links.open{display:flex}
    .nav-links a{padding:.75rem 1rem;width:100%}
}

/* ---- Alerts ---- */
.alert{padding:1rem 1.25rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.9rem}
.alert-info{background:rgba(91,155,213,.1);border:1px solid rgba(91,155,213,.3);color:var(--blue)}
.alert-success{background:var(--green-dim);border:1px solid rgba(76,175,80,.3);color:var(--green)}
.alert-warning{background:var(--accent-dim);border:1px solid rgba(232,150,60,.3);color:var(--accent)}

/* ---- Spacing ---- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.w-100{width:100%}
.d-none{display:none}


/* ---- Search bar ---- */
.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}
.search-bar input[type="text"]{flex:1;padding:.55rem .9rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem}
.search-bar input[type="text"]:focus{outline:none;border-color:var(--accent)}
.search-bar input[type="text"]::placeholder{color:var(--text-dim)}
.sort-select{padding:.45rem .75rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem}
.sort-select:focus{outline:none;border-color:var(--accent)}

/* ---- Filter tabs ---- */
.filter-tabs{display:flex;gap:.25rem;margin-bottom:1rem;flex-wrap:wrap}
.filter-tab{padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);transition:all .15s;text-decoration:none}
.filter-tab:hover{color:var(--text);border-color:var(--text-dim)}
.filter-tab.active{color:#000;background:var(--accent);border-color:var(--accent);font-weight:600}

/* ---- Video cards ---- */
.video-card{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .15s;color:var(--text);text-decoration:none}
.video-card:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.video-card-thumb{aspect-ratio:16/9;overflow:hidden;background:#000}
.video-card-thumb img{width:100%;height:100%;object-fit:cover}
.video-card-body{padding:.75rem 1rem 1rem}
.video-card-body h3{font-size:1rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);max-width:840px;margin:0 auto}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-description{color:var(--text-muted);font-size:.9rem;max-width:840px;line-height:1.7}

/* ---- Responsive ---- */
@media(max-width:768px){
    h1{font-size:1.5rem}
    h2{font-size:1.25rem}
    .hero{padding:1.5rem 1rem}
    .hero h1{font-size:1.75rem}
    .page-section{padding:1rem}
    main{padding:1rem 0 2rem}
    .dl-detail{flex-direction:column}
}

/* ---- Shared page layout ---- */
.layout-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.25rem;align-items:start}
.layout-aside{display:flex;flex-direction:column;gap:1.25rem;align-self:stretch}
.layout-main{min-width:0;container-type:inline-size}
.layout-full .layout-main{container-type:inline-size}
.aside-sticky{position:sticky;top:calc(var(--nav-height) + 1rem)}

/* ---- Latest video box ---- */
.latest-video img{width:100%;border-radius:var(--radius);display:block;margin:.5rem 0}
.latest-video a.title{display:block;color:var(--text);font-weight:600;font-size:.9rem;margin-bottom:.75rem}

/* ---- Layout responsive ---- */
@media(max-width:1000px){
    .layout-sidebar{grid-template-columns:1fr}
    .layout-aside{display:none}
}

/* ---- Marketplace grid: follow content column width ---- */
@container (min-width:1px){.mkt-grid{grid-template-columns:repeat(2,1fr)}}
@container (min-width:560px){.mkt-grid{grid-template-columns:repeat(3,1fr)}}
@container (min-width:760px){.mkt-grid{grid-template-columns:repeat(4,1fr)}}
@container (min-width:1050px){.mkt-grid{grid-template-columns:repeat(6,1fr)}}


/* ---- Mobile: tighter cards ---- */
@media(max-width:600px){.page-section{padding:1rem}}

/* ---- Download grid & cards ---- */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@container (min-width:560px){.dl-grid{grid-template-columns:repeat(3,1fr)}}
@container (min-width:900px){.dl-grid{grid-template-columns:repeat(4,1fr)}}
.dl-grid > .ad-label,.dl-grid > .ad-container{grid-column:1 / -1}
.dl-card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .2s,transform .15s}
.dl-card:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.dl-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:.75rem;background:var(--surface)}
.dl-card-body{padding:.6rem .75rem .8rem}
.dl-card h3{font-size:.95rem;margin:0 0 .25rem}
.dl-card-tagline{font-size:.8rem;color:var(--text-dim);margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-card-meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}

/* ---- Download item page ---- */
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);margin-bottom:1.25rem}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.info-table,.versions-table{width:100%;border-collapse:collapse;font-size:.9rem}
.info-table th,.info-table td,.versions-table th,.versions-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);text-align:left}
.info-table th{color:var(--text-dim);font-weight:600;width:45%}
.versions-table tr.is-latest td{background:rgba(255,255,255,.04)}
.versions-table .ad-row td{padding:0;border:0}
.table-wrap{overflow-x:auto}
.readme{white-space:normal;font-size:.9rem;line-height:1.6;max-height:none}
.item-head{display:flex;gap:1rem;align-items:center}
.item-head img{width:96px;height:96px;border-radius:var(--radius)}

/* ---- World download video cards ---- */
.dl-card-video img{aspect-ratio:16/9;object-fit:cover;padding:0}

/* ---- Nav search ---- */
.nav-search form{margin:0}
.nav-search input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.35rem .6rem;width:130px;font-size:.85rem;transition:width .15s}
.nav-search input:focus{outline:none;border-color:var(--accent);width:180px}
@media(max-width:768px){.nav-search{width:100%;padding:.25rem .8rem}.nav-search input,.nav-search input:focus{width:100%}}

/* ---- Marketplace item page ---- */
.mkt-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
@container (max-width:700px){.mkt-item{grid-template-columns:1fr}}
.mkt-item-image{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface-2);border-radius:var(--radius);padding:1rem}
.mkt-item h1{margin:.4rem 0}
.mkt-item .price{font-size:1.4rem;margin:.5rem 0}
.mkt-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}

/* ---- Downloads page: help & type label ---- */
.help-details{border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.75rem;background:var(--surface-2)}
.help-details summary{cursor:pointer;font-weight:600}
.help-details[open] summary{margin-bottom:.75rem}
.dl-type{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}