/* CS2 WeaponPaints - "cosmic" theme built around bg.jpg (keep bg.jpg in the same folder as this file).
   T side = hot pink, CT side = cyan blue. Look-only changes. */
:root{
  color-scheme:dark;
  --bg:#0b0724; --surface:#17123a; --surface-2:#1e1848; --line:#2f2a66; --line-2:#4a4396;
  --glass:rgba(18,12,52,.78);
  --text:#f3efff; --muted:#b4acdc;
  --t:#ff5fd2; --ct:#4fc3ff; --accent:#ff5fd2; --accent-2:#ff8be3;
  --on-accent:#1a0620; --field:#0e0a2b;
  --r:10px;
  --head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:transparent;color:var(--text);font:15px/1.5 var(--body)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Page background: the artwork, darkened so text stays readable. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(9,5,34,.50) 0%,rgba(9,5,34,.72) 55%,rgba(9,5,34,.88) 100%),
    url("bg.jpg") 58% top/cover no-repeat,
    var(--bg)}

/* Header */
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px clamp(16px,4vw,48px);background:rgba(11,7,36,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2)}
.brand{display:flex;align-items:center;gap:12px}
/* Logo: hexagon split pink/cyan with a crosshair. The "CS2" text stays in the HTML for screen readers. */
.brand-mark{display:block;flex:none;width:40px;height:40px;padding:0;border-radius:0;font-size:0;line-height:0;color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,3 58,18 58,46 32,61 6,46 6,18' fill='%2317123a'/%3E%3Cpath d='M32 3L6 18V46L32 61' fill='none' stroke='%23ff5fd2' stroke-width='3.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M32 3L58 18V46L32 61' fill='none' stroke='%234fc3ff' stroke-width='3.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='32' r='12' fill='none' stroke='%23f3efff' stroke-width='2.5'/%3E%3Cpath d='M32 12v10M32 42v10M12 32h10M42 32h10' stroke='%23f3efff' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='32' r='2.8' fill='%23ff5fd2'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 10px rgba(255,95,210,.45))}
.brand-name{font:700 24px/1 var(--head);letter-spacing:.6px}
.btn-logout{padding:7px 16px;border:1px solid var(--line-2);border-radius:8px;color:var(--text);
  text-decoration:none;font-weight:600;font-size:13px;transition:border-color .15s,color .15s}
.btn-logout:hover{border-color:#ff7a8a;color:#ffb3bd}

/* Login */
.login{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-card{width:min(430px,100%);padding:34px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(14,9,44,.82);backdrop-filter:blur(14px);box-shadow:0 24px 70px rgba(5,2,25,.7),0 0 0 1px rgba(255,95,210,.08)}
.login-card .brand{margin-bottom:26px}
.login-card .brand-mark{width:56px;height:56px}
.login-card .brand-name{font-size:30px}
.login-card h1{margin:0 0 8px;font:700 30px/1.1 var(--head)}
.login-card p{margin:0 0 20px;color:var(--muted)}
.login-card p strong{color:var(--text)}
.login-card .form-label{margin-bottom:6px;color:var(--muted);font-weight:600;font-size:13px}
.login-card .form-control{min-height:54px;border:1px solid var(--line-2);border-radius:9px;background-color:var(--field);
  color:var(--text);text-align:center;font:600 24px/1 var(--head);letter-spacing:.35em}
.login-card .form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,95,210,.2)}
.login-card .btn-primary{width:100%;min-height:46px;margin-top:16px}
.alert{border-radius:9px;font-size:14px}
.alert-danger{border:1px solid #6b2a42;background:#2e1226;color:#ffb8cc}

/* Buttons */
.btn-primary{border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:13px;transition:background .15s}
.btn-primary:hover,.btn-primary:focus{border-color:var(--accent-2);background:var(--accent-2);color:var(--on-accent)}
.btn-secondary{border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--text)}
.btn-secondary:hover{background:#2a2262;color:var(--text)}

/* Selects */
.form-select,.form-control{border:1px solid var(--line-2);border-radius:8px;background-color:var(--field);
  color:var(--text);font-size:14px;min-height:40px}
.form-select:focus,.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,95,210,.2);
  background-color:var(--field);color:var(--text)}
select option{background:var(--surface);color:var(--text)}

/* Gear: gloves, agents, music per team */
.gear{width:100%;max-width:1720px;margin:0 auto;padding:30px clamp(16px,3vw,44px) 0}
.section-title{margin:0 0 16px;font:700 28px/1.1 var(--head);letter-spacing:.2px;text-shadow:0 2px 14px rgba(5,2,25,.8)}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.team-panel{padding:18px 20px 20px;border:1px solid var(--line-2);border-top-width:3px;border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(5,2,25,.5)}
.team-t{border-top-color:var(--t);background:linear-gradient(180deg,rgba(255,95,210,.14),transparent 100px),var(--glass)}
.team-ct{border-top-color:var(--ct);background:linear-gradient(180deg,rgba(79,195,255,.14),transparent 100px),var(--glass)}
.team-name{margin:0 0 14px;font:600 22px/1 var(--head)}
.team-t .team-name{color:var(--t)}
.team-ct .team-name{color:var(--ct)}
.team-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.field-label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px;font-weight:600}

/* Weapons */
.weapon-loadout{display:block;width:100%;max-width:1720px;margin:0 auto;padding:6px clamp(16px,3vw,44px) 56px}
.weapon-section{min-width:0;margin:30px 0 34px}
.weapon-section-title{display:flex;align-items:center;gap:14px;margin:0 0 14px;font:700 24px/1.1 var(--head);letter-spacing:.2px;text-shadow:0 2px 14px rgba(5,2,25,.8)}
.weapon-section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent),var(--ct) 40%,transparent);opacity:.55}
.weapon-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:#5a4fb0 transparent}
.weapon-row>.col-sm-2,.weapon-row>.weapon-card-wrapper{flex:0 0 224px;width:224px;max-width:224px;padding:0;scroll-snap-align:start}
.weapon-row .card{height:100%;overflow:hidden;border:1px solid var(--line-2)!important;border-radius:var(--r);
  background:rgba(18,12,52,.84);color:var(--text);transition:border-color .15s;box-shadow:0 10px 26px rgba(5,2,25,.45)}
.weapon-row .card:hover{border-color:var(--accent)!important}
.weapon-row .card-body{min-height:176px;padding:14px 14px 8px;background:transparent}
.weapon-row .card-header{display:flex;align-items:center;justify-content:center;flex-direction:column;
  min-height:44px;padding:0;border:0;background:transparent;text-align:center}
.weapon-row .card-title{margin:0;font:600 17px/1.15 var(--head);overflow-wrap:anywhere}
.weapon-row h6.card-title{color:var(--muted);font:500 13px/1.3 var(--body)}
.weapon-row .skin-image{display:block;width:100%;height:108px;margin:8px auto 0;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(5,2,25,.6))}
.weapon-row .card-footer{padding:12px;border-top:1px solid var(--line-2);background:rgba(30,24,72,.9)}
.weapon-row .btn-primary{width:100%;min-height:38px}

/* Settings modal */
.modal .modal-content{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--text)}
.modal .modal-header,.modal .modal-footer{border-color:var(--line)}
.modal .modal-header{padding:16px 20px}
.modal .modal-title,.modal .card-title{font:600 20px/1.2 var(--head)}
.modal .modal-body{padding:20px}
.modal label{margin:12px 0 6px;color:var(--muted);font-size:13px;font-weight:600}

footer{margin-top:24px!important;border-color:var(--line-2)!important}
footer,footer a,.text-body-secondary{color:var(--muted)!important}
.container{max-width:100%}

@media (max-width:900px){
  .team-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .team-fields{grid-template-columns:1fr}
  .weapon-row>.col-sm-2,.weapon-row>.weapon-card-wrapper{flex-basis:200px;width:200px}
  .brand-name{font-size:20px}
  .brand-mark{width:34px;height:34px}
  body::before{background-position:center,62% top,center}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Agent preview */
.agent-preview{display:block;width:100%;height:150px;margin:0 0 10px;object-fit:contain;
  border-radius:8px;background:var(--surface-2)}

/* Saving without reload: small status message + card dim while saving */
.toast-lite{position:fixed;right:20px;bottom:20px;z-index:2000;max-width:min(360px,calc(100vw - 40px));padding:10px 16px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--text);
  font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(5,2,25,.6);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast-lite.show{opacity:1;transform:none}
.toast-lite.error{border-color:#ff7a8a;color:#ffb3bd}
.card.is-saving{opacity:.7}