/* ============================================================
   panel.css — authored for a 1360x760 canvas; panel.js zooms
   .app to fit the window so nothing ever scrolls.
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; height: 100%; overflow: hidden; }
button, input{ font: inherit; color: inherit; background: none; border: 0; outline: 0; margin: 0; }
button{ cursor: pointer; }
h1, h3, p{ margin: 0; }
svg{ display: block; }

:root{
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --bg:        #09090B;
  --side:      #0C0C0F;
  --surface:   #111115;
  --surface-2: #18181D;
  --surface-3: #222229;
  --line:      rgba(255,255,255,0.055);
  --line-2:    rgba(255,255,255,0.09);

  --fg-1: #F4F4F5;
  --fg-2: #C8C8CE;
  --fg-3: #9A9AA3;
  --fg-4: #6C6C76;
  --fg-5: #4A4A53;

  --a: #F5B4C8;          /* brand accent, set by panel.js */
  --b: #AB627E;
  --a-rgb: 245,180,200;
  --grad: linear-gradient(135deg, var(--a), var(--b));
}

body{
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ shell */
.app{
  width: 1360px; height: 760px;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  overflow: hidden;
}

/* ------------------------------------------------------------ sidebar */
.side{
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(var(--a-rgb), .08), transparent 70%),
    var(--side);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  min-height: 0;
}
.brand{ display: flex; align-items: center; gap: 11px; padding: 0 6px 14px; }
.brand .mark{
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #0B0B0F; font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 22px -8px rgba(var(--a-rgb), .8);
}
.brand .mark.has-logo{ background: none; box-shadow: none; width: 40px; height: 40px; border-radius: 0; }
.brand .mark img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(var(--a-rgb), .45)); }
.brand .mark svg{ width: 30px; height: 38px; filter: drop-shadow(0 4px 12px rgba(var(--a-rgb), .55)); }
.brand .nm{ font-weight: 700; font-size: 14px; letter-spacing: -0.01em; line-height: 1.15; }
.brand .meta{ display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.brand .ver{ font-family: var(--mono); font-size: 10px; color: var(--fg-4); }
.tb{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-4); background: var(--surface-2);
  padding: 3px 8px 3px 7px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.tb::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-5); flex: 0 0 auto;
}
.tb[data-conn="ok"]{
  color: #34D399; background: rgba(52,211,153,.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,.35);
}
.tb[data-conn="ok"]::before{ background: #34D399; box-shadow: 0 0 7px #34D399; }
.tb[data-conn="off"]{
  color: #F87171; background: rgba(248,113,113,.10); box-shadow: inset 0 0 0 1px rgba(248,113,113,.30);
}
.tb[data-conn="off"]::before{ background: #F87171; }
.sk-search .conn-chip{ margin-left: auto; flex-shrink: 0; }

.nav{ flex: 1; min-height: 0; overflow: hidden; }
.nav-g{ margin-bottom: 8px; }
.nav-gl{
  padding: 0 10px 5px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-5);
}
.nav-i{
  position: relative;
  width: 100%; height: 30px;
  display: flex; align-items: center; gap: 11px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--fg-3); font-size: 13px; font-weight: 500; text-align: left;
  transition: background .15s, color .15s;
}
.nav-i svg{ width: 16px; height: 16px; color: var(--fg-4); transition: color .15s; flex-shrink: 0; }
.nav-i:hover{ background: var(--surface); color: var(--fg-1); }
.nav-i:hover svg{ color: var(--fg-2); }
.nav-i.on{ background: rgba(var(--a-rgb), .1); color: var(--fg-1); }
.nav-i.on svg{ color: rgb(var(--a-rgb)); }
.nav-i.on::before{
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad);
  box-shadow: 0 0 12px rgba(var(--a-rgb), .7);
}

.side-foot{ display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tier-seg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: var(--surface); border-radius: 9px; }
.tier-seg .o{
  height: 26px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-4);
  transition: background .15s, color .15s;
}
.tier-seg .o:hover{ color: var(--fg-1); }
.tier-seg .o.on{ background: var(--surface-3); color: var(--fg-1); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.user{ display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.user .av{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad); color: #0B0B0F;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.user .who{ flex: 1; min-width: 0; line-height: 1.2; }
.user .who b{ display: block; font-size: 12.5px; font-weight: 600; }
.user .who b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .who span{ font-size: 11px; color: var(--fg-4); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .ic{ width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--fg-4); flex-shrink: 0; }
.user .ic:hover{ background: var(--surface); color: var(--fg-1); }
.user .ic svg{ width: 17px; height: 17px; }

/* Discord login states */
.user .av.img{ background: var(--surface-3); overflow: hidden; }
.user .av.img img{ width: 100%; height: 100%; object-fit: cover; }
.user .av.dc{ background: #5865F2; color: #fff; }
.user .av.dc svg{ width: 18px; height: 18px; }
.user .av.dc.busy{ animation: dcPulse 1s ease-in-out infinite; }
@keyframes dcPulse{ 50%{ opacity: .5; } }

.dc-setup{
  position: fixed; z-index: 120; width: 300px; padding: 14px;
  border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0,0,0,.8);
}
.dc-setup .dc-h{ font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.dc-setup .dc-l{ display: block; font-size: 11px; color: var(--fg-4); margin: 10px 0 5px; line-height: 1.4; }
.dc-setup .dc-in{
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--fg-1); font-family: var(--mono); font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.dc-setup .dc-in:focus{ box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .6); }
.dc-setup .dc-in.bad{ box-shadow: inset 0 0 0 1px #FF6B7A; }
.dc-setup .dc-hint{ font-size: 10.5px; color: var(--fg-5); line-height: 1.45; margin-top: 10px; }
.dc-setup .dc-row{ display: flex; gap: 8px; margin-top: 14px; }
.dc-setup .dc-row button{ flex: 1; height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.dc-setup .dc-cancel{ color: var(--fg-3); background: var(--surface-3); }
.dc-setup .dc-cancel:hover{ color: var(--fg-1); }
.dc-setup .dc-go{ color: #fff; background: #5865F2; }
.dc-setup .dc-go:hover{ filter: brightness(1.1); }

/* ------------------------------------------------------------ main */
body::after{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.main{
  position: relative;
  background:
    radial-gradient(60% 55% at 22% -8%, rgba(var(--a-rgb), .09), transparent 70%),
    radial-gradient(45% 45% at 40% 112%, rgba(var(--a-rgb), .06), transparent 70%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 20px;
  padding: 20px 22px 16px 28px;
  min-height: 0;
}
.page-head{
  position: relative; z-index: 1;
  grid-column: 1; grid-row: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 18px;
}
.ph-t h1{ font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.ph-t p{ margin-top: 5px; font-size: 13px; color: var(--fg-4); }
.tabs{ display: flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: 10px; }
.tab{
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-3);
  transition: background .15s, color .15s;
}
.tab svg{ width: 14px; height: 14px; }
.tab:hover{ color: var(--fg-1); }
.tab.on{ background: var(--surface-3); color: var(--fg-1); }
.tab.on svg{ color: rgb(var(--a-rgb)); }

.page-body{ grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; position: relative; z-index: 1; }

/* brand watermark filling the empty corner of the settings column */
.wm{
  position: absolute; z-index: 0; pointer-events: none;
  right: calc(410px + 20px + 22px + 10px); bottom: 10px;
  width: 360px; height: 360px;
  display: grid; place-items: end;
  opacity: .07;
}
.wm img{ width: 100%; height: 100%; object-fit: contain; filter: saturate(.9); }
.wm svg{ width: 270px; height: 346px; }
/* Row-aligned 2-column grid. Rows share the page height, cards in a row
   share the row height, and the rows inside a card spread evenly, so
   every card edge lines up and nothing is left hanging. */
.cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 14px;
}

/* ------------------------------------------------------------ section */
.sec{
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 16px;
}
.sec-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; }
.sec-h h3{ display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.sec-h p{ margin-top: 3px; font-size: 12px; color: var(--fg-4); }
.sec-h .tg{ margin-top: 1px; }
.sec-b{
  min-height: 0;
  border-top: 1px solid var(--line); padding: 2px 0 8px; transition: opacity .2s;
}
.sec.wide{ grid-column: 1 / -1; }
.sec.tall{ grid-row: span 2; }
.sec.wide .sec-b{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: stretch; }
.sec.wide .sec-b > .feat + .feat{ border-top: 0; }
/* hairline between evenly spaced rows so stretched cards read as a table */
.sec-b > * + *{ border-top: 1px solid rgba(255,255,255,.035); }
.sec.wide .sec-b > *{ border-top: 0; }
.sec.wide .sec-b > :nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.035); }
.sec-b > .feat .nest{ border-top: 0; }
.sec.off .sec-b{ opacity: .38; }

.info{ display: inline-grid; place-items: center; color: var(--fg-5); cursor: help; }
.info svg{ width: 14px; height: 14px; }
.info:hover{ color: var(--fg-2); }

/* ------------------------------------------------------------ rows */
.r{ display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 36px; }
.r .l{ font-size: 13px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
.r.indent{ padding-left: 16px; }
.r.indent .l{ color: var(--fg-3); }
.r.indent .l::before{ content: ""; width: 6px; height: 6px; border-left: 1px solid var(--fg-5); border-bottom: 1px solid var(--fg-5); margin: -4px 4px 0 -12px; }
.r.col{ flex-direction: column; align-items: stretch; gap: 7px; padding: 6px 0 4px; }
.r.wide{ flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0 6px; }
.r.wide .seg{ display: flex; }
.r.wide .seg .o{ flex: 1; padding: 0 4px; }

.sl{ flex-direction: column; align-items: stretch; gap: 9px; padding: 9px 0 8px; }
.sl-top{ display: flex; justify-content: space-between; align-items: baseline; }
.sl .v{ font-family: var(--mono); font-size: 11.5px; color: var(--fg-4); }
.sl .v b{ color: var(--fg-1); font-weight: 500; }

.feat{ padding: 4px 0; }
.feat + .feat{ border-top: 1px solid var(--line); }
.feat > .r{ min-height: 46px; }
.feat .ft{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feat .ft .l{ color: var(--fg-1); font-weight: 500; }
.feat .fd{ font-size: 11.5px; color: var(--fg-4); }
.feat .fx{ display: flex; align-items: center; gap: 10px; }
.feat .nest{ padding: 0 0 6px 14px; margin-left: 2px; border-left: 2px solid rgba(var(--a-rgb), .35); transition: opacity .2s; }
.feat.off .nest{ opacity: .38; }
.feat.off .nest{ border-left-color: var(--line-2); }

/* ------------------------------------------------------------ controls */
.tg{
  position: relative; flex-shrink: 0;
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--surface-3);
  transition: background .2s, box-shadow .2s;
}
.tg::after{
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #8A8A93;
  transition: transform .22s cubic-bezier(.3,.9,.3,1), background .2s;
}
.tg:hover::after{ background: #B0B0B8; }
.tg.on{ background: var(--grad); box-shadow: 0 0 14px -2px rgba(var(--a-rgb), .55); }
.tg.on::after{ transform: translateX(14px); background: #0B0B0F; }

input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--a), var(--b)) 0 / var(--p, 0%) 100% no-repeat, var(--surface-3);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--a-rgb), .18), 0 2px 6px rgba(0,0,0,.5);
  transition: box-shadow .15s;
}
input[type=range]:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 6px rgba(var(--a-rgb), .25), 0 2px 6px rgba(0,0,0,.5); }
input[type=range]::-moz-range-thumb{ width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

.seg{ display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 8px; }
.seg .o{
  height: 24px; padding: 0 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--fg-4); white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg .o:hover{ color: var(--fg-1); }
.seg .o.on{ background: var(--surface-3); color: var(--fg-1); box-shadow: 0 1px 2px rgba(0,0,0,.45); }

.sw{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.sw input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sw i{ width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.sw span{ font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); min-width: 56px; }

.sel{ position: relative; display: inline-flex; }
.sel select{
  -webkit-appearance: none; appearance: none;
  height: 28px; padding: 0 30px 0 11px; border-radius: 8px;
  background: var(--surface-2); color: var(--fg-1); border: 0;
  font: 500 12.5px var(--sans); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
}
.sel select:hover, .sel select:focus{ box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .55); }
.sel select optgroup, .sel select option{ background: #18181D; color: var(--fg-1); }
.sel::after{
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(45deg); pointer-events: none;
}

.kb{ display: inline-flex; align-items: center; gap: 4px; }
.kx{
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; color: var(--fg-4);
  transition: background .15s, color .15s, opacity .15s;
}
.kx svg{ width: 13px; height: 13px; }
.kx:hover{ color: #FF6B7A; background: rgba(255,80,100,.12); }
.kx:disabled{ opacity: 0; pointer-events: none; }
.kc.none{ color: var(--fg-4); }
.kc.cap{
  color: rgb(var(--a-rgb)); border-color: rgba(var(--a-rgb), .7); border-bottom-color: rgba(var(--a-rgb), .7);
  background: rgba(var(--a-rgb), .12); animation: kcPulse 1.1s ease-in-out infinite;
}
.kc.deny{ color: #FF6B7A; border-color: rgba(255,80,100,.7); animation: kcShake .3s ease; }
@keyframes kcPulse{ 50%{ box-shadow: 0 0 0 4px rgba(var(--a-rgb), .15); } }
@keyframes kcShake{ 25%{ transform: translateX(-3px); } 75%{ transform: translateX(3px); } }
.kc{
  min-width: 108px; height: 26px; padding: 0 10px;
  border-radius: 7px; background: var(--surface-2);
  border: 1px solid var(--line-2); border-bottom: 2px solid rgba(0,0,0,.55);
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-1);
}
.kc:hover{ border-color: rgba(var(--a-rgb), .5); }

.ti{
  height: 32px; padding: 0 11px; border-radius: 8px;
  background: var(--surface-2); color: var(--fg-1);
  font-family: var(--mono); font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.ti:focus{ box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .6); }
.ti::placeholder{ color: var(--fg-5); }

/* ------------------------------------------------------------ aim curve */
.crv{ position: relative; margin: 4px 0 8px; }
.crv canvas{
  display: block; width: 100%; height: auto; min-height: 110px; flex: 1 1 0;
  border-radius: 10px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.crv.editable canvas{ cursor: crosshair; }
.crv-y{ position: absolute; left: 16px; font-family: var(--mono); font-size: 9.5px; color: var(--fg-5); pointer-events: none; }
.crv-y1{ top: 8px; }
.crv-y0{ bottom: 30px; }
.crv-x{ display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 10.5px; color: var(--fg-5); }
.crv-x .crv-hint{ color: var(--fg-4); }
.crv-tip{
  position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-1);
  background: #1C1C22; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px;
}

/* ------------------------------------------------------------ tooltip */
#tip{
  position: fixed; z-index: 99; pointer-events: none;
  max-width: 280px; padding: 9px 11px;
  background: #1C1C22; color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: 9px;
  font-family: var(--sans); font-size: 12px; line-height: 1.45;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
}
#tip.show{ opacity: 1; transform: none; }

/* ============================================================ preview */
.pv{
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 45% at 50% 34%, rgba(var(--a-rgb), .16), transparent 70%),
    radial-gradient(60% 30% at 50% 100%, rgba(var(--a-rgb), .07), transparent 70%),
    linear-gradient(180deg, #101015 0%, #09090B 100%);
  user-select: none;
  touch-action: none;
}
.pv canvas.gl{ position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.pv canvas.gl:active{ cursor: grabbing; }
.pv canvas.ov{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pv .layer{ position: absolute; inset: 0; pointer-events: none; }
.pv .msg{
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 24px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--fg-4);
  pointer-events: none;
}
.pv .msg code{ color: var(--fg-2); }

.glass{
  background: rgba(12,12,15,.62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.pv-top{
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.pv-top > *{ pointer-events: auto; }
.pv-seg{ display: inline-flex; gap: 2px; padding: 3px; }
.pv-seg .o{
  height: 26px; padding: 0 11px; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: var(--fg-3);
  transition: background .15s, color .15s;
}
.pv-seg .o:hover{ color: var(--fg-1); }
.pv-seg .o.on{ background: rgba(255,255,255,.1); color: var(--fg-1); }
.pv-btns{ display: inline-flex; gap: 2px; padding: 3px; }
.pv-btn{
  width: 30px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; color: var(--fg-3);
  transition: background .15s, color .15s;
}
.pv-btn svg{ width: 15px; height: 15px; }
.pv-btn:hover{ color: var(--fg-1); background: rgba(255,255,255,.06); }
.pv-btn.on{ color: #0B0B0F; background: var(--grad); }

.pv-bot{
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none;
}
.pv-bot > *{ pointer-events: auto; }
.pv-bar{ display: inline-flex; align-items: center; gap: 4px; padding: 4px; }
.pv-bar .o{
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: var(--fg-3);
  transition: background .15s, color .15s;
}
.pv-bar .o i{ width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.pv-bar .o:hover{ color: var(--fg-1); }
.pv-bar .o.on{ background: rgba(var(--a-rgb), .16); color: var(--fg-1); }
.pv-bar .o.on i{ background: rgb(var(--a-rgb)); border-color: rgb(var(--a-rgb)); box-shadow: 0 0 8px rgba(var(--a-rgb), .9); }
.pv-bar .sep{ width: 1px; height: 18px; background: rgba(255,255,255,.08); margin: 0 4px; }
.pv-bar .note{ font-size: 11.5px; color: var(--fg-4); padding: 0 8px; white-space: nowrap; }
.pv-hint{ font-size: 11.5px; color: var(--fg-4); padding: 7px 12px; }

/* ESP dock zones + draggable elements */
.esp-dock{
  position: absolute; border: 1px dashed transparent; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .12s, background .12s, border-color .12s;
}
.esp-dock span{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4);
}
.pv.is-dragging .esp-dock{ opacity: 1; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.02); }
.pv.is-dragging .esp-dock.hot{ border-color: rgb(var(--a-rgb)); background: rgba(var(--a-rgb), .14); }
.pv.is-dragging .esp-dock.hot span{ color: var(--fg-1); }
.esp-item{
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab;
  white-space: nowrap; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 14px;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  border-radius: 3px; outline: 1px dashed transparent; outline-offset: 2px; will-change: transform;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.esp-item:hover{ outline-color: rgba(var(--a-rgb), .7); }
.esp-item.dragging{ cursor: grabbing; outline-color: rgb(var(--a-rgb)); z-index: 5; }
.esp-item[hidden]{ display: none; }
.esp-item.hp{ font-size: 0; line-height: 0; text-shadow: none; }
.esp-item.hp .hp-bg{ position: absolute; inset: 0; box-shadow: 0 0 0 1px #000; }
.esp-item.hp .hp-fill{ position: absolute; }
.esp-item.hp .hp-txt{
  position: absolute; font-size: 10px; line-height: 12px; font-weight: 700;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}
/* Armor bar — mirrors .hp geometry, kang gold/purple/blue/grey ramp. */
.esp-item.ar{ font-size:0; line-height:0; text-shadow:none; }
.esp-item.ar .ar-bg{ position:absolute; inset:0; }
.esp-item.ar .ar-fill{ position:absolute; }
/* Hero avatar — real portrait (circular crop) + hero-coloured ring. */
.esp-item.hero{ background:transparent; text-shadow:none; font-size:0; line-height:0; }
.esp-item.hero .hero-img{
  display:block; width:24px; height:24px; border-radius:50%;
  object-fit:cover; border:1.5px solid #B4DCFF;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.6));
}
.esp-item.hero .hero-img.miss{ opacity:.3; } /* soft hint when portrait missing */
/* Weapon icon — PNG when available, text fallback inline. */
.esp-item.wpn{ background:transparent; display:flex; align-items:center; gap:4px; font-size:0; }
.esp-item.wpn img{ height:16px; width:auto; max-width:60px; object-fit:contain; display:block;
  filter: drop-shadow(0 0 2px #000); }
.esp-item.wpn img[style*="none"]+span{ font-size:12px; color:#E6E6E6; line-height:14px; }
.esp-item.wpn span{
  font-size:0; line-height:0; color:transparent;
  /* kept as fallback via :not() rule above when the image dies */
}
.esp-item.wpn img.miss{ display:none; }
.esp-item.wpn img.miss + span{
  font-size:12px; line-height:14px; color:#E6E6E6;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}

/* bone picker */
.bone-dot{
  position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: auto; cursor: pointer;
  background: rgba(10,10,14,.55); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
  transition: background .14s, border-color .14s, box-shadow .14s; will-change: transform;
  touch-action: none; -webkit-touch-callout: none;
}
.bone-dot:hover{ border-color: rgb(var(--a-rgb)); background: rgba(var(--a-rgb), .35); }
.bone-dot.sel{
  background: var(--grad); border-color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--a-rgb), .3), 0 0 18px rgba(var(--a-rgb), .6);
}
.bone-dot.sel::after{
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1.5px solid rgb(var(--a-rgb)); animation: dotPulse 1.6s ease-out infinite; pointer-events: none;
}
.bone-dot.rand{ border-style: dashed; }
.bone-dot.minor{ width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-width: 1.5px; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.bone-dot.minor.sel{ width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 2px; }
.pv-bar .cur{ font-size: 12.5px; font-weight: 600; color: var(--fg-1); padding: 0 4px; }
@keyframes dotPulse{ 0%{ transform: scale(.6); opacity: .9; } 100%{ transform: scale(1.5); opacity: 0; } }
.bone-tag{
  position: absolute; left: 0; top: 0; pointer-events: none;
  font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #0B0B0F; background: var(--grad); padding: 4px 7px; border-radius: 5px;
  white-space: nowrap; box-shadow: 0 4px 14px -4px rgba(0,0,0,.6); will-change: transform;
}
.bone-tag.rand{ background: var(--surface-3); color: var(--fg-2); }

/* ---- access gate ("Não conectado") -------------------------------------- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0a0a0c;color:#e7e7ea;font-family:Inter,system-ui,sans-serif;padding:24px}
.gate-card{max-width:360px;text-align:center}
.gate-card h1{font-size:20px;font-weight:700;margin:0 0 10px;letter-spacing:.2px}
.gate-card p{font-size:14px;line-height:1.5;color:#9a9aa2;margin:0}

/* ---------- user_card (sidebar footer) --------- */
#user { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.04); }
.uc-left { flex:1 1 auto; min-width:0; }
.uc-name { font:600 13px/1.2 Inter,sans-serif; color:var(--fg-1); letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uc-sub  { font:500 11px/1.2 Inter,sans-serif; color:var(--fg-4); margin-top:3px; }
.uc-eye  { background:transparent; border:1px solid rgba(255,255,255,.06); border-radius:7px; padding:5px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-3); cursor:pointer; }
.uc-eye:hover { color:var(--fg-1); border-color:rgba(255,255,255,.14); }
.uc-eye svg { width:14px; height:14px; }

/* "Usar no celular" CTA badge at the top of the sidebar (desktop only). A
   glowing accented pill with a shine sweep to pull the eye toward the phone
   handoff. Hidden on mobile (pointless on the phone itself). */
.qr-cta{
  display: flex; align-items: center; gap: 10px; text-align: left;
  width: 100%; margin: 0; padding: 11px 12px;
  border-radius: 13px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--a-rgb), .24), rgba(var(--a-rgb), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .42), 0 10px 24px -14px rgba(var(--a-rgb), .8);
  transition: transform .14s ease, box-shadow .2s ease;
}
.qr-cta:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .65), 0 14px 28px -12px rgba(var(--a-rgb), 1); }
.qr-cta:active{ transform: translateY(0); }
.qr-cta::after{
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); animation: qrShine 4s ease-in-out infinite; pointer-events: none;
}
@keyframes qrShine{ 0%, 55%{ left: -60%; } 100%{ left: 150%; } }
.qr-cta-ic{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--grad); color: #0B0B0F;
  box-shadow: 0 4px 12px -3px rgba(var(--a-rgb), .85);
}
.qr-cta-ic svg{ width: 18px; height: 18px; }
.qr-cta-tx{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.qr-cta-tx b{ font-size: 12.5px; font-weight: 700; color: var(--fg-1); }
.qr-cta-tx i{ font-size: 10px; font-style: normal; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-cta-ar{ flex: 0 0 auto; color: rgb(var(--a-rgb)); opacity: .85; display: grid; place-items: center; }
.qr-cta-ar svg{ width: 16px; height: 16px; }

/* ============================================================================
 *  MOBILE  — phones / narrow viewports. The desktop panel is a fixed
 *  1360x760 grid; here it becomes a full-screen app: top brand bar, scrollable
 *  page body, bottom page-nav strip. Preview switches to a light 2D canvas
 *  (preview.js skips Three on mobile). Touch targets grow to >=44px.
 * ========================================================================== */
@media (max-width: 860px){
  html, body{ overflow: hidden; }
  .app{
    width: 100vw; height: 100dvh;
    display: flex; flex-direction: column;
    border-radius: 0;
  }
  /* Promote the sidebar's children into the app's flex column so we can
     reorder them (brand -> top, nav -> bottom) without touching the DOM. */
  .side{ display: contents; }
  .brand{
    order: 0; flex: 0 0 auto;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px 13px; margin: 0;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(var(--a-rgb), .20), transparent 60%),
      linear-gradient(180deg, rgba(var(--a-rgb), .06), transparent 90%),
      var(--side);
    border-bottom: 1px solid rgba(var(--a-rgb), .22);
    box-shadow: 0 1px 0 rgba(var(--a-rgb), .18), 0 6px 20px -12px rgba(var(--a-rgb), .5);
    position: relative; z-index: 5;
  }
  .brand .mark{ width: 40px; height: 40px; box-shadow: 0 4px 16px -4px rgba(var(--a-rgb), .6); }
  .brand .mark.has-logo{ width: 40px; height: 40px; }
  .brand .nm{ font-size: 16px; letter-spacing: -.01em; }
  .brand .ver{ font-size: 10px; }
  .brand .tb{ font-size: 10px; }
  .brand > div:nth-child(2){ flex: 1; min-width: 0; }
  /* The QR is for jumping PC -> phone; on the phone itself it's pointless. */
  .qr-cta{ display: none !important; }   /* phone CTA is desktop-only */

  .main{
    order: 2; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    grid-template-columns: none; grid-template-rows: none;
    padding: 0; gap: 0;
    overflow: hidden;
  }
  .wm{ display: none; }
  /* Within .main (flex column): title, then preview, then scrollable body. */
  .page-head{ order: 0; }
  .pv{ order: 1; }
  .page-body{ order: 2; }
  .page-head{
    flex: 0 0 auto; padding: 14px 16px 10px;
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  }
  .ph-t h1{ font-size: 21px; }
  .ph-t p{ font-size: 12.5px; }
  .tabs{ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar{ display: none; }
  .tab{ height: 36px; flex: 0 0 auto; }

  .page-body{
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 14px 18px;
  }
  /* One column, sections stack and size to content. */
  .cols{
    display: flex; flex-direction: column;
    grid-template-columns: none; grid-template-rows: none;
    gap: 12px; height: auto;
  }
  .sec, .sec.wide, .sec.tall{ grid-column: auto; grid-row: auto; }
  .sec.wide .sec-b{ display: flex; flex-direction: column; }
  .sec.wide .sec-b > :nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.035); }
  .sec.wide .sec-b > :first-child{ border-top: 0; }

  /* Preview: tall block at the top of the body so the 3D model is big and
     the aim bone dots spread out (less cramped to tap). */
  .pv{
    flex: 0 0 auto;
    grid-column: auto; grid-row: auto;
    height: 46vh; min-height: 340px; max-height: 460px;
    margin: 10px 14px 4px; border-radius: 16px;
  }

  /* Bottom page-nav: items spread to fill the width (few pages) or scroll
     horizontally (many — Private). nav-g is flattened so flex:1 can spread. */
  .nav{
    order: 3; flex: 0 0 auto;
    display: flex; flex-direction: row; align-items: stretch;
    gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(var(--a-rgb), .05), transparent), var(--side);
    border-top: 1px solid rgba(var(--a-rgb), .18);
    box-shadow: 0 -6px 20px -14px rgba(var(--a-rgb), .6);
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{ display: none; }
  .nav-g{ display: contents; }
  .nav-gl{ display: none; }
  .nav-i{
    flex: 1 1 0; min-width: 58px; max-width: 130px; height: auto;
    flex-direction: column; gap: 4px; padding: 9px 6px;
    border-radius: 14px; font-size: 11px; text-align: center; color: var(--fg-4);
  }
  .nav-i svg{ width: 22px; height: 22px; }
  .nav-i.on::before{ display: none; }
  .nav-i.on{ background: rgba(var(--a-rgb), .16); color: var(--fg-1); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .3); }
  .nav-i.on svg{ color: rgb(var(--a-rgb)); }

  /* License / user card — shown prominently right under the brand bar. */
  .side-foot{
    display: block; order: 1; flex: 0 0 auto;
    padding: 10px 14px 0; margin: 0; border: 0; background: transparent; gap: 0;
  }
  #user{
    margin: 0; padding: 13px 14px; border: 1px solid rgba(var(--a-rgb), .25);
    border-radius: 14px;
    background: radial-gradient(130% 160% at 100% 0%, rgba(var(--a-rgb), .14), transparent 60%), var(--surface);
    box-shadow: 0 8px 22px -14px rgba(var(--a-rgb), .5);
  }
  .uc-left{ flex: 1 1 auto; min-width: 0; }
  .uc-name{ font-size: 15.5px; }
  .uc-sub{ font-size: 12.5px; margin-top: 4px; color: #34D399; font-weight: 600; }
  .uc-eye{ width: 42px; height: 42px; border-radius: 11px; }
  .uc-eye svg{ width: 17px; height: 17px; }

  /* Bigger touch targets. */
  .r{ min-height: 44px; }
  .feat > .r{ min-height: 54px; }
  .tg{ width: 46px; height: 28px; }
  .tg::after{ width: 22px; height: 22px; top: 3px; left: 3px; }
  .tg.on::after{ transform: translateX(18px); }
  input[type=range]{ height: 6px; }
  input[type=range]::-webkit-slider-thumb{ width: 22px; height: 22px; }
  input[type=range]::-moz-range-thumb{ width: 22px; height: 22px; }
  .seg .o{ height: 34px; padding: 0 14px; font-size: 13px; }
  .sw i{ width: 24px; height: 24px; }
  .sel select{ height: 36px; font-size: 13.5px; }
  .kx{ width: 34px; height: 34px; }
  .tab svg{ width: 15px; height: 15px; }

  /* Bigger aim bone dots so a thumb can hit them without pixel precision.
     The 3D preview stays; only the dots and preview height grow. */
  .bone-dot{ width: 28px; height: 28px; margin: -14px 0 0 -14px; border-width: 2.5px; }
  .bone-dot.minor{ width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; border-width: 2px; }
  .bone-dot.minor.sel, .bone-dot.sel{ width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .bone-tag{ font-size: 12px; padding: 5px 9px; }

  /* Tooltips become bottom sheets (hover doesn't exist on touch). */
  #tip{ max-width: 90vw; }
}

/* QR modal — shared by desktop + mobile. */
.qr-wrap{
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
  padding: 24px;
}
.qr-wrap.show{ display: flex; }
.qr-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; max-width: 340px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.7);
}
.qr-card h2{ font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.qr-card p{ font-size: 12.5px; color: var(--fg-4); margin-bottom: 16px; line-height: 1.45; }
.qr-code{ background: #fff; border-radius: 12px; padding: 14px; display: inline-block; line-height: 0; }
.qr-code img, .qr-code canvas{ width: 232px; height: 232px; image-rendering: pixelated; display: block; }
.qr-actions{ display: flex; gap: 8px; margin-top: 16px; }
.qr-actions button{
  flex: 1; height: 40px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--surface-3); color: var(--fg-1);
}
.qr-actions button.primary{ background: var(--grad); color: #0B0B0F; }
.qr-actions button:active{ opacity: .8; }

/* ------------------------------------------------------------ weapon-group tabs (Aim page) */
.wtabs{
  display: flex; gap: 2px; padding: 3px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  width: fit-content; flex-shrink: 0;
}
.wtab{
  height: 30px; padding: 0 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-3);
  transition: background .15s, color .15s;
}
.wtab:hover{ color: var(--fg-1); }
.wtab.on{ background: var(--grad); color: #0B0B0F; box-shadow: 0 0 16px -4px rgba(var(--a-rgb), .55); }
.page-body{ display: flex; flex-direction: column; }
.page-body .wtabs + .cols{ flex: 1; min-height: 0; }

/* ------------------------------------------------------------ Skins page (full width, preview hidden) */
.main.no-pv{ grid-template-columns: minmax(0,1fr); }
.main.no-pv .pv{ display: none; }
.sk-empty{ color: var(--fg-4); font-size: 13px; padding: 20px; }
.skins{
  display: grid; grid-template-columns: 280px minmax(0,1fr) 300px; gap: 14px; height: 100%; min-height: 0;
}
.sk-nav, .sk-mid, .sk-opt{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: 0; }
.sk-nav{ display: flex; flex-direction: column; overflow: hidden; }
.sk-cats{ display: flex; flex-wrap: wrap; gap: 3px; padding: 10px; border-bottom: 1px solid var(--line); }
.sk-cat{ height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--fg-4); background: var(--surface-2); transition: all .14s; }
.sk-cat:hover{ color: var(--fg-1); }
.sk-cat.on{ background: var(--grad); color: #0B0B0F; }
.sk-list{ flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }

/* weapon row with thumbnail (Insert-style) */
.sk-wpn{ width: 100%; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 10px; text-align: left; transition: background .12s; margin-bottom: 2px; }
.sk-wpn:hover{ background: var(--surface-2); }
.sk-wpn.on{ background: rgba(var(--a-rgb), .14); box-shadow: inset 3px 0 0 rgb(var(--a-rgb)); }
.sk-wpn-img{ width: 56px; height: 36px; display: grid; place-items: center; border-radius: 6px;
  background: rgba(255,255,255,.03); overflow: hidden; }
.sk-wpn-img img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.sk-wpn-img.ph{ background: linear-gradient(135deg,#2a2a32,#1a1a20); }
.sk-wpn-tx{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-wpn-n{ font-size: 12.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-wpn.on .sk-wpn-n{ color: var(--fg-1); }
.sk-wpn-s{ font-size: 11px; color: var(--fg-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-wpn-s.has{ color: rgb(var(--a-rgb)); font-weight: 500; }
.sk-wpn-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--a-rgb)); box-shadow: 0 0 6px rgba(var(--a-rgb),.6); }

/* middle: search + 2-col big-card grid */
.sk-mid{ display: flex; flex-direction: column; overflow: hidden; }
.sk-search{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sk-search svg{ width: 15px; height: 15px; color: var(--fg-5); flex-shrink: 0; }
.sk-q{ flex: 1; height: 28px; background: transparent; border: 0; outline: 0; color: var(--fg-1); font-size: 12.5px; }
.sk-q::placeholder{ color: var(--fg-5); }

.sk-grid{ flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: min-content; gap: 10px; align-content: start; }
.sk-paint{ position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .14s, transform .12s; overflow: hidden; min-width: 0; }
.sk-paint:hover{ box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-1px); }
.sk-paint.on{ box-shadow: inset 0 0 0 2px rgb(var(--a-rgb)); }
.sk-sw{ width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.sk-sw.img{ background: linear-gradient(135deg,#1b1b22,#111117); display: block; }
.sk-sw.img img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.sk-sw.big{ width: 92px; aspect-ratio: 4 / 3; border-radius: 8px; }
.sk-pn{ font-size: 11.5px; font-weight: 500; color: var(--fg-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-paint.on .sk-pn{ color: var(--fg-1); }
.sk-check{ position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: rgb(var(--a-rgb)); color: #0B0B0F; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sk-check svg{ width: 12px; height: 12px; stroke-width: 3; }

.sk-opt{ padding: 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sk-opt-h{ display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.sk-opt-h b{ display: block; font-size: 15px; font-weight: 700; }
.sk-opt-h span{ font-size: 12px; color: var(--fg-4); }
.sk-wear{ color: var(--fg-4); font-weight: 500; margin-left: 4px; }
.sk-reset{ margin-top: auto; height: 32px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--fg-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sk-reset:hover{ color: #FF6B7A; box-shadow: inset 0 0 0 1px rgba(255,80,100,.4); }