/* CS2 crosshair converter — sits under the Steam profile panel on the CS2 profile page. */
.cs2-converter{margin-top:18px}
/* the converter header uses the site-wide box header style (v377-corrections.css + the language display fonts) */
.cs2-converter .panel-body{display:grid;gap:8px}
.cs2-converter-intro{margin:0;color:var(--muted,#b89aca);font-size:.92rem;line-height:1.45}
.cs2-converter label{font-weight:700;font-size:.86rem;margin-top:2px}
.cs2-converter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cs2-converter-row input{flex:1 1 260px;min-width:0}
.cs2-converter input,.cs2-converter select{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border,#30203f);border-radius:10px;background:rgba(8,5,15,.75);color:var(--text,#f8f4ff);font:600 .92rem/1.2 Consolas,"Courier New",monospace}
.cs2-converter select{font-family:Inter,"Segoe UI",Arial,sans-serif;cursor:pointer}
.cs2-converter input:focus,.cs2-converter select:focus{outline:none;border-color:var(--purple,#8b2cff);box-shadow:0 0 0 2px rgba(139,44,255,.25)}
.cs2-converter input[readonly]{color:#fff;background:rgba(139,44,255,.12);border-color:rgba(139,44,255,.55)}
.cs2-converter-row input{width:auto}
.cs2-converter-help{color:var(--muted,#b89aca);font-size:.8rem}
.cs2-converter-status{margin:2px 0 0;font-size:.86rem;color:var(--muted,#b89aca)}
.cs2-converter-status[data-state=ok]{color:#7dffb2}
.cs2-converter-status[data-state=info]{color:#c58bff}
.cs2-converter-status[data-state=error]{color:#ff8fbf}
.cs2-converter-result{display:grid;gap:8px;padding:12px;border:1px solid var(--border,#30203f);border-radius:12px;background:rgba(16,10,28,.6)}
.cs2-converter-result[hidden]{display:none}
.cs2-converter-detail{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cs2-converter-detail figure{margin:0;display:grid;gap:4px;justify-items:center}
.cs2-converter-detail canvas{width:132px;height:132px;border-radius:10px;border:1px solid var(--border,#30203f);image-rendering:pixelated}
.cs2-converter-detail figcaption{font-size:.72rem;color:var(--muted,#b89aca);text-transform:uppercase;letter-spacing:.08em}
.cs2-converter-facts{flex:1 1 200px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cs2-converter-facts div{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border:1px solid var(--border,#30203f);border-radius:8px;font-size:.8rem}
.cs2-converter-facts span{color:var(--muted,#b89aca)}
@media (max-width:560px){.cs2-converter-facts{grid-template-columns:1fr}}
.cs2-converter .button.compact{min-height:0;padding:9px 13px;font-size:.84rem;line-height:1.1;white-space:nowrap}
.cs2-converter-row{flex-wrap:nowrap}
@media (max-width:640px){.cs2-converter-row{flex-wrap:wrap}.cs2-converter-row input{flex-basis:100%}}

/* Crosshair maker (panel under the converter): presets, shape buttons, sliders, colours, preview, code. */
.cs2-converter-row .button.compact+.button.compact{margin-left:0}
.cs2-maker-shapes{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.cs2-maker-shapes .button.compact[aria-pressed=true]{border-color:rgba(190,105,255,.62);background:linear-gradient(135deg,rgba(145,48,255,.48),rgba(83,28,160,.30));color:#fff}
.cs2-maker-grid{display:flex;gap:16px;align-items:flex-start}
.cs2-maker-controls{flex:1 1 auto;min-width:0;display:grid;gap:10px}
.cs2-maker-range label,.cs2-maker-pair label{display:flex;justify-content:space-between;gap:8px;margin:0 0 4px}
.cs2-maker-pair .cs2-maker-own{display:inline-flex;margin:8px 0 0}
.cs2-maker-range output{margin-left:auto;font:700 .86rem/1 Consolas,"Courier New",monospace;color:#fff}
.cs2-maker input[type=range]{width:100%;padding:0;border:0;background:none;box-shadow:none;accent-color:#9b63ff;cursor:pointer}
.cs2-maker input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.cs2-maker-label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px}
.cs2-maker-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs2-maker-swatch{width:30px;height:30px;padding:0;border:2px solid rgba(255,255,255,.18);border-radius:8px;background:var(--swatch);cursor:pointer}
.cs2-maker-swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #9b63ff}
.cs2-maker-own{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 4px;font-weight:600;font-size:.8rem;color:var(--muted,#b89aca);cursor:pointer}
.cs2-maker .cs2-maker-own input[type=color]{width:34px;height:30px;padding:2px;border-radius:8px;cursor:pointer}
.cs2-maker-check{display:flex!important;align-items:center;gap:8px;font-weight:600!important}
.cs2-maker .cs2-maker-check input{width:18px;height:18px;margin:0;padding:0;accent-color:#9b63ff}
.cs2-maker-figure{flex:0 0 auto;margin:0;display:grid;gap:4px;justify-items:center}
.cs2-maker-figure canvas{width:168px;height:168px;border-radius:10px;border:1px solid var(--border,#30203f);image-rendering:pixelated}
.cs2-maker-figure figcaption{font-size:.72rem;color:var(--muted,#b89aca);text-transform:uppercase;letter-spacing:.08em}
.cs2-maker-how{display:grid;gap:4px;padding:12px;border:1px solid var(--border,#30203f);border-radius:12px;background:rgba(16,10,28,.6)}
.cs2-maker-how p{margin:0;font-size:.86rem;line-height:1.5}
.cs2-maker-how small{color:var(--muted,#b89aca);font-size:.78rem}
@media (max-width:560px){
  .cs2-maker-grid{flex-direction:column-reverse;align-items:stretch}
  .cs2-maker-figure{justify-self:center;align-self:center}
}
@media (max-width:640px){.cs2-maker-shapes .button.compact{flex:1 1 calc(33% - 6px)!important;width:auto!important;min-width:0!important}}

/* CS2 crosshair page (cs2-crosshair.html, 2026-10-21): converter + FAQ left, maker right; boxes use the site spacing contract. */
body[data-page="counter-strike-crosshair"] .cs2-converter{margin-top:0}
body[data-page="counter-strike-crosshair"] .cs2-crosshair-row{align-items:stretch}
body[data-page="counter-strike-crosshair"] .cs2-crosshair-row>.column-stack{display:flex;flex-direction:column;gap:var(--section-gap,18px)}
body[data-page="counter-strike-crosshair"] .cs2-crosshair-row>.column-stack>.panel:last-child{flex:1 1 auto}   /* both columns end level */
body[data-page="counter-strike-crosshair"] .cs2-crosshair-row>.column-stack>.panel{align-self:stretch!important;width:auto!important;max-width:none!important}
.cs2-crosshair-faq .panel-body{display:grid;gap:6px}
.cs2-crosshair-faq h3{margin:var(--inner-gap,10px) 0 0;font-size:1rem;line-height:1.3;color:var(--text,#f8f4ff)}
.cs2-crosshair-faq h3:first-child{margin-top:0}
.cs2-crosshair-faq p{margin:0;color:var(--muted,#b89aca);line-height:1.5}
/* profile page: link box where the converter used to be */
body[data-page="counter-strike-personal"] .cs2-identity-row>.column-stack>.cs2-crosshair-link{flex:1 1 auto!important}   /* link box fills down to the Skin Yap box */
.cs2-crosshair-link .panel-body{display:grid;gap:var(--inner-gap,12px);justify-items:start}
.cs2-crosshair-link p{margin:0;color:var(--muted,#b89aca);line-height:1.5}

/* three CS2 tabs (Check a player / Crosshair converter & maker / My profile) in one row; this file is loaded on all three CS2 pages */
.counter-subnav.cs2-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1180px!important}
@media (min-width:1200px){.counter-subnav.cs2-tabs{max-width:min(1180px,calc(100% - 190px))!important}}   /* keep clear of the chibi sticker on the right */
@media (max-width:560px){.counter-subnav.cs2-tabs>a.cs2-tab{font-size:.8rem!important;padding:6px 4px!important}}