/* KiwiSMP Ticket Bot — shared design system */
:root{
  --bg: #ffffff;
  --ink: #0e0e11;
  --ink-2: #45454d;
  --ink-3: #8a8a93;
  --ink-4: #c9c9d1;
  --line: #eeeef2;
  --line-2: #e4e4ea;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --chip: #f5f5f8;
  --chip-2: #eceef3;

  --red: oklch(0.68 0.19 25);
  --red-soft: oklch(0.68 0.19 25 / 0.18);
  --red-ink: oklch(0.48 0.17 25);
  --green: oklch(0.72 0.17 145);
  --green-soft: oklch(0.72 0.17 145 / 0.18);
  --green-ink: oklch(0.42 0.14 145);
  --orange: oklch(0.78 0.16 65);
  --orange-soft: oklch(0.78 0.16 65 / 0.20);
  --orange-ink: oklch(0.48 0.15 65);
  --blue: oklch(0.68 0.14 250);
  --blue-soft: oklch(0.68 0.14 250 / 0.18);
  --blue-ink: oklch(0.42 0.13 250);

  --kiwi: #74fc6c;
  --kiwi-dark: #52d94b;

  --r-panel: 24px;
  --r-card: 16px;
  --r-tile: 14px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,16,24,.04), 0 4px 14px rgba(16,16,24,.05);
  --shadow-2: 0 2px 6px rgba(16,16,24,.05), 0 18px 40px rgba(16,16,24,.08);
  --shadow-3: 0 6px 14px rgba(16,16,24,.06), 0 32px 70px rgba(16,16,24,.10);

  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

html[data-theme="dark"]{
  --bg: #0b0b0e;
  --ink: #f2f2f5;
  --ink-2: #b7b7c2;
  --ink-3: #797984;
  --ink-4: #3e3e46;
  --line: #1e1e24;
  --line-2: #272730;
  --surface: #141419;
  --surface-2: #1b1b22;
  --chip: #1e1e25;
  --chip-2: #262630;

  --red: oklch(0.72 0.18 25);
  --red-soft: oklch(0.68 0.19 25 / 0.25);
  --red-ink: oklch(0.82 0.14 25);
  --green: oklch(0.76 0.17 145);
  --green-soft: oklch(0.72 0.17 145 / 0.22);
  --green-ink: oklch(0.84 0.14 145);
  --orange: oklch(0.82 0.16 65);
  --orange-soft: oklch(0.78 0.16 65 / 0.25);
  --orange-ink: oklch(0.86 0.13 65);
  --blue: oklch(0.76 0.13 250);
  --blue-soft: oklch(0.68 0.14 250 / 0.25);
  --blue-ink: oklch(0.86 0.10 250);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5);
  --shadow-3: 0 6px 14px rgba(0,0,0,.45), 0 32px 70px rgba(0,0,0,.6);
}

html{ transition: background-color .3s var(--ease) }
body, .logo, .topbar, .rail, .panel, .btn, .icon-btn, .input, .tile, .row, .badge, .chip, .avatar{
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none }

/* ============ CHROME: LOGO + PROFILE ============ */
.logo{
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  animation: pop-in .7s var(--spring) both;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.logo:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2) }
.logo-mark{
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}
.logo-mark img{ width: 100%; height: 100%; object-fit: cover; border-radius: 7px }
.logo-word{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar{
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  animation: pop-in .7s var(--spring) both;
  animation-delay: .05s;
}
.avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--chip);
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
}
.avatar-img{
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.avatar::after{
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 12px var(--green-soft);
}
.handle{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.handle .discrim{
  color: var(--ink-3);
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  margin-left: 2px;
}

/* ============ STAGE + SHELL ============ */
.stage{
  min-height: 100vh;
  padding: 100px 40px 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.shell{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  width: min(1180px, 100%);
  animation: pop-in .9s var(--spring) both;
  animation-delay: .15s;
}
.shell.wide{ width: min(1320px, 100%) }

/* ============ LEFT RAIL ============ */
.rail{
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-2);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  position: sticky;
  top: 100px;
}
.rail .spacer{ flex: 1 }
.tile{
  position: relative;
  width: 68px; height: 64px;
  border-radius: var(--r-tile);
  background: var(--surface);
  display: grid; place-items: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tile:hover{ background: var(--chip); transform: translateY(-1px) }
.tile.active{ background: var(--ink); color: var(--bg) }
.tile.active svg{ stroke: var(--bg) }
html[data-theme="dark"] .tile.active{ background: #2a2a33; color: var(--ink) }
html[data-theme="dark"] .tile.active svg{ stroke: var(--ink) }
.tile svg{
  width: 22px; height: 22px;
  stroke: var(--ink);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s var(--ease);
}
.tile .dot{
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.tile .tip{
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 60;
}
.tile:hover .tip{ opacity: 1; transform: translateY(-50%) translateX(0) }

.dot.red{    background: var(--red);    box-shadow: 0 0 0 2px var(--surface), 0 0 12px var(--red-soft);    animation: pulse 2.2s infinite }
.dot.green{  background: var(--green);  box-shadow: 0 0 0 2px var(--surface), 0 0 12px var(--green-soft) }
.dot.orange{ background: var(--orange); box-shadow: 0 0 0 2px var(--surface), 0 0 14px var(--orange-soft); animation: pulse 2.6s infinite }
.tile.active .dot{ box-shadow: 0 0 0 2px var(--ink), 0 0 14px currentColor }

@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1 }
  50%    { transform: scale(1.25); opacity: .7 }
}

/* ============ PANELS ============ */
.panel{
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-3);
  padding: 28px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panel-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.panel-sub{
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 3px;
}
.panel-actions{ display: flex; gap: 8px }

/* ============ BUTTONS + INPUTS ============ */
.btn{
  border: none;
  background: var(--chip);
  color: var(--ink);
  font: 500 13px 'Inter', sans-serif;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover{ background: var(--chip-2); transform: translateY(-1px) }
.btn.primary{ background: var(--ink); color: var(--bg) }
.btn.primary:hover{ filter: brightness(1.2) }
.btn.danger{ background: var(--red-soft); color: var(--red-ink) }
.btn.ghost{ background: transparent }
.btn.ghost:hover{ background: var(--chip) }
.btn.kiwi{ background: var(--kiwi); color: #0f1623 }
.btn.kiwi:hover{ background: var(--kiwi-dark) }
.btn svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round }
.btn[disabled]{ opacity: .5; cursor: not-allowed }

.icon-btn{
  width: 36px; height: 36px;
  border: none;
  background: var(--chip);
  border-radius: 10px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ background: var(--chip-2); transform: translateY(-1px) }
.icon-btn svg{ width: 16px; height: 16px; stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round }

.input{
  font: 400 13.5px 'Inter', sans-serif;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
  color: var(--ink);
}
.input:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px var(--chip) }
.input-wrap{ position: relative }
.input-wrap svg{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--ink-3); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.input.plain{ padding-left: 14px }

textarea.input{
  padding: 12px 14px;
  border-radius: 14px;
  resize: vertical;
  min-height: 96px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

/* ============ BADGES + DOTS ============ */
.badge{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge.red{    background: var(--red-soft);    color: var(--red-ink) }
.badge.green{  background: var(--green-soft);  color: var(--green-ink) }
.badge.orange{ background: var(--orange-soft); color: var(--orange-ink) }
.badge.blue{   background: var(--blue-soft);   color: var(--blue-ink) }

.status-dot{
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.status-dot.red{    background: var(--red);    box-shadow: 0 0 0 3px var(--red-soft) }
.status-dot.green{  background: var(--green);  box-shadow: 0 0 0 3px var(--green-soft) }
.status-dot.orange{ background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft) }
.status-dot.blue{   background: var(--blue);   box-shadow: 0 0 0 3px var(--blue-soft) }
.status-dot.idle{   background: var(--ink-4);  box-shadow: 0 0 0 3px var(--chip) }

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--chip);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  margin-right: 4px;
  transition: background .2s var(--ease), transform .3s var(--spring);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover{ background: var(--chip-2); transform: rotate(-12deg) }
.theme-toggle svg{
  width: 16px; height: 16px;
  stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .25s var(--ease), transform .4s var(--spring);
  position: absolute;
}
.theme-toggle .sun{ opacity: 1; transform: rotate(0) scale(1) }
.theme-toggle .moon{ opacity: 0; transform: rotate(-90deg) scale(.5) }
html[data-theme="dark"] .theme-toggle .sun{ opacity: 0; transform: rotate(90deg) scale(.5) }
html[data-theme="dark"] .theme-toggle .moon{ opacity: 1; transform: rotate(0) scale(1) }

/* ============ CARDS / ROWS ============ */
.row{
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  text-decoration: none; color: inherit;
  animation: row-in .6s var(--ease) both;
}
.row:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: transparent;
}
.chev{
  width: 18px; height: 18px; color: var(--ink-4);
  transition: transform .25s var(--ease), color .25s var(--ease);
  stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.row:hover .chev{ color: var(--ink); transform: translateX(2px) }

/* ============ ANIMATIONS ============ */
@keyframes pop-in{
  from{ opacity: 0; transform: translateY(8px) scale(.98) }
  to  { opacity: 1; transform: translateY(0) scale(1) }
}
@keyframes row-in{
  from{ opacity: 0; transform: translateY(6px) }
  to  { opacity: 1; transform: translateY(0) }
}
@keyframes fade-in{
  from{ opacity: 0 }
  to  { opacity: 1 }
}

.stagger > *{ animation: row-in .6s var(--ease) both }
.stagger > *:nth-child(1){ animation-delay: .20s }
.stagger > *:nth-child(2){ animation-delay: .26s }
.stagger > *:nth-child(3){ animation-delay: .32s }
.stagger > *:nth-child(4){ animation-delay: .38s }
.stagger > *:nth-child(5){ animation-delay: .44s }
.stagger > *:nth-child(6){ animation-delay: .50s }
.stagger > *:nth-child(7){ animation-delay: .56s }
.stagger > *:nth-child(8){ animation-delay: .62s }
.stagger > *:nth-child(n+9){ animation-delay: .68s }

/* ============ MONO ============ */
.mono{ font-family: 'JetBrains Mono', monospace }
.muted{ color: var(--ink-3) }
.text-center{ text-align: center }

/* ============ FORM HELPERS ============ */
.field{ display: flex; flex-direction: column; gap: 6px }
.field label{ font-size: 11.5px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em }
.field input, .field select, .field textarea{
  font: 400 13.5px 'Inter', sans-serif; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
  outline: none; color: var(--ink); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px var(--chip) }
.field .hint{ font-size: 11.5px; color: var(--ink-3); margin-top: 2px }
.row-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* ============ SWITCHES ============ */
.switch{ width: 38px; height: 22px; border-radius: 999px; background: var(--ink-4); position: relative; cursor: pointer; transition: background .2s var(--ease); flex: 0 0 auto; border: none }
.switch::after{ content:""; position:absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: left .2s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.2) }
.switch.on{ background: var(--ink) }
.switch.on::after{ left: 19px }

/* ============ RESPONSIVE ============ */
@media (max-width: 820px){
  .stage{ padding: 90px 16px 40px }
  .shell, .shell.wide{ grid-template-columns: 76px 1fr; gap: 12px }
  .rail{ padding: 10px 8px }
  .tile{ width: 60px; height: 58px }
  .panel{ padding: 20px 18px 22px }
  .handle{ display: none }
}