/* ============================================================
   DUELO — components
   ============================================================ */

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:var(--bg-3);
  --btn-fg:var(--ink);
  --btn-bd:var(--line-2);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:42px;padding:0 20px;
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  box-shadow:inset 0 0 0 1px var(--btn-bd), var(--sh-1);
  font-weight:550;font-size:14px;letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             opacity var(--t-fast);
}
.btn:hover{background:var(--bg-4);box-shadow:inset 0 0 0 1px var(--line-3), var(--sh-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{
  --btn-bg:linear-gradient(180deg, #6d99ff, #4a76f0);
  --btn-fg:#fff;
  --btn-bd:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 0 0 1px rgba(255,255,255,.1),
             0 6px 22px -6px rgba(74,118,240,.75);
  font-weight:650;
}
.btn-primary:hover{
  --btn-bg:linear-gradient(180deg, #7ea6ff, #5581f5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 0 0 1px rgba(255,255,255,.14),
             0 10px 30px -6px rgba(74,118,240,.9);
}
.btn-ghost{--btn-bg:transparent;--btn-bd:var(--line);color:var(--ink-2)}
.btn-ghost:hover{--btn-bg:rgba(255,255,255,.045);color:var(--ink)}
.btn-lg{height:52px;padding:0 28px;font-size:15.5px;border-radius:var(--r-md)}
.btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-xs)}
.btn-icon{width:42px;padding:0}
.btn-icon.btn-sm{width:34px}
.btn-block{width:100%}

/* shimmer sweep on primary CTA */
.btn-primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-120%);
  pointer-events:none;
}
.btn-primary:hover::after{animation:sheen 900ms var(--ease-out)}

/* ---------------- chips / segmented ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 14px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-3);
  font-size:13px;font-weight:520;
  transition:all var(--t-fast) var(--ease);
}
.chip:hover{color:var(--ink-2);background:rgba(255,255,255,.07)}
.chip[aria-pressed="true"],.chip.is-on{
  color:#fff;
  background:rgba(91,140,255,.16);
  box-shadow:inset 0 0 0 1px rgba(91,140,255,.5);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}

.seg{
  display:inline-flex;padding:4px;gap:4px;
  background:var(--bg-2);
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);
}
.seg button{
  height:34px;padding:0 16px;border-radius:7px;
  color:var(--ink-3);font-size:13.5px;font-weight:550;
  transition:all var(--t-fast) var(--ease);
}
.seg button:hover{color:var(--ink-2);background:rgba(255,255,255,.05)}
.seg button[aria-selected="true"]{
  color:#fff;
  background:var(--bg-4);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1);
}

/* ---------------- panel / card ---------------- */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:0 9px;
  border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-3);
}
.badge-3d{color:#c9b6ff;background:rgba(124,92,255,.14);box-shadow:inset 0 0 0 1px rgba(124,92,255,.3)}
.badge-2d{color:#9fd8ff;background:rgba(49,208,255,.12);box-shadow:inset 0 0 0 1px rgba(49,208,255,.26)}

/* ---------------- form ---------------- */
.field{
  width:100%;height:44px;padding:0 14px;
  background:var(--bg-1);
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--ink);font-size:14px;
  transition:box-shadow var(--t-fast) var(--ease);
}
.field::placeholder{color:var(--ink-4)}
.field:focus{box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(91,140,255,.16)}
textarea.field{height:auto;min-height:96px;padding:12px 14px;resize:vertical;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;word-break:break-all}

.switch{
  position:relative;width:44px;height:26px;flex:none;
  border-radius:99px;background:var(--bg-4);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background var(--t-mid) var(--ease);
}
.switch::after{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:var(--ink-2);
  transition:transform var(--t-mid) var(--ease-out), background var(--t-mid);
}
.switch[aria-checked="true"]{background:rgba(91,140,255,.55);box-shadow:inset 0 0 0 1px rgba(91,140,255,.7)}
.switch[aria-checked="true"]::after{transform:translateX(18px);background:#fff}

/* ---------------- keycap ---------------- */
.key{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 7px;
  border-radius:var(--r-xs);
  background:linear-gradient(180deg,var(--bg-4),var(--bg-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px var(--line-2), 0 2px 0 rgba(0,0,0,.5);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--ink-2);
}
.key-wide{min-width:56px}

/* ---------------- modal / sheet ---------------- */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(4,5,9,.72);
  backdrop-filter:blur(10px) saturate(.85);
  -webkit-backdrop-filter:blur(10px) saturate(.85);
  display:grid;place-items:center;padding:24px;
  animation:fade-in var(--t-mid) var(--ease);
}
.sheet{
  width:min(100%, 560px);max-height:calc(100vh - 48px);
  overflow:auto;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-3);
  animation:pop-in var(--t-mid) var(--ease-out);
}
.sheet-hd{padding:26px 28px 0;position:relative}
.sheet-bd{padding:20px 28px}
.sheet-ft{padding:18px 28px 26px;display:flex;gap:10px}
.sheet-x{
  position:absolute;top:20px;right:20px;
  width:32px;height:32px;border-radius:var(--r-xs);
  display:grid;place-items:center;color:var(--ink-3);
  transition:all var(--t-fast);
}
.sheet-x:hover{background:rgba(255,255,255,.07);color:var(--ink)}

/* ---------------- toast ---------------- */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:var(--r-pill);
  background:rgba(20,24,34,.94);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-3);
  backdrop-filter:blur(12px);
  font-size:13.5px;font-weight:520;
  animation:pop-in 220ms var(--ease-out);
}
.toast.out{animation:fade-in 200ms var(--ease) reverse forwards}
.toast .tdot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.toast.warn .tdot{background:var(--warm)}
.toast.err .tdot{background:var(--hot)}

/* ---------------- misc ---------------- */
.divider{height:1px;background:var(--line);margin:18px 0}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:var(--accent);
  animation:spin 700ms linear infinite;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(61,220,151,.6);
  animation:ping 1.9s var(--ease-out) infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}
  70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}