/* Chekrok theme — StudioApps Figma design-system reskin
   Palette: primary #2A2AEF indigo, accent #E5D700, critical #FF2B2B,
   ink #000, paper #fff + 6-step grey ramp. No green — success = black. */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@800&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* ===== StudioApps tokens ===== */
  --sa-white: #ffffff; --sa-black: #000000;
  --sa-blue: #2a2aef; --sa-yellow: #e5d700; --sa-red: #ff2b2b;
  --sa-g700: #55555c; --sa-g500: #8a8a90; --sa-g300: #b8b8c0;
  --sa-g200: #ebebf0; --sa-g100: #f0f0f3; --sa-g50: #f5f5f7;
  --sa-ink-04: rgba(0,0,0,.04); --sa-ink-07: rgba(0,0,0,.07);
  --sa-ink-08: rgba(0,0,0,.08); --sa-ink-12: rgba(0,0,0,.12);
  --sa-ink-50: rgba(0,0,0,.50);
  --sa-paper-05: rgba(255,255,255,.05); --sa-paper-08: rgba(255,255,255,.08);
  --sa-paper-14: rgba(255,255,255,.14); --sa-paper-25: rgba(255,255,255,.25);
  --sa-paper-45: rgba(255,255,255,.45); --sa-paper-60: rgba(255,255,255,.60);
  --sa-paper-70: rgba(255,255,255,.70); --sa-paper-80: rgba(255,255,255,.80);
  --sa-shadow-raised: 0 2px 8px rgba(0,0,0,.08);
  --sa-shadow-floating: 0 8px 24px rgba(0,0,0,.14);
  --sa-focus-ring: 0 0 0 3px rgba(42,42,239,.15);
  --sa-font-display: "Funnel Display", sans-serif;
  --sa-font-ui: "Poppins", sans-serif;

  /* app tokens — names preserved, values remapped to Figma spec */
  --chekrok-primary: #2a2aef;
  --chekrok-primary-dark: #000000;
  --chekrok-tint: #f0f0f3;
  --chekrok-canvas: #f5f5f7;
  --chekrok-border: #ebebf0;
  --chekrok-shadow: var(--sa-shadow-raised);
  --color-link: #2a2aef;
  --color-menu-accent: #2a2aef;
  --color-background-button-primary: #2a2aef;
  --color-api-key: #2a2aef;
  --color-background-gradient-first: #2a2aef;
  --color-background-gradient-second: #2a2aef;
  --color-background-gradient-third: #000000;
  --color-background-page: #f5f5f7;
  --color-background-table-thead: #000000;
  --color-border-table-cell: #ebebf0;
  --color-background-input: rgba(0,0,0,.04);
  --color-shadow-input: rgba(0,0,0,.08);
  --watchlist-row-hover: #f5f5f7;
  --watchlist-row-selected: #f0f0f3;
  --common-round-border: 12px;
}

body {
  font-family: var(--sa-font-ui);
}

h1, h2, h3, h4, h5, h6, .display, .page-title {
  font-family: var(--sa-font-display);
  font-weight: 800;
}

body::after {
  opacity: 0.96;
  background: linear-gradient(140deg, #2a2aef 0%, #2a2aef 46%, #000000 100%);
}

.pure-button,
.cdio-btn,
button:not(.icon-btn, .toggle-button, .hamburger-menu, .bare-btn),
input[type="submit"] {
  border-radius: 999px;
  font-weight: 600;
}

.pure-button-primary,
a.pure-button-primary,
.pure-button-selected,
a.pure-button-selected {
  background: var(--chekrok-primary);
  color: #fff;
}

.pure-button-primary:hover,
a.pure-button-primary:hover,
.pure-button-selected:hover,
a.pure-button-selected:hover {
  background: var(--chekrok-primary-dark);
}

.icon-btn,
.toggle-button,
.hamburger-menu,
.bare-btn {
  border-radius: 10px;
}

.pure-form input[type="color"],
.pure-form input[type="date"],
.pure-form input[type="datetime-local"],
.pure-form input[type="email"],
.pure-form input[type="month"],
.pure-form input[type="number"],
.pure-form input[type="password"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="text"],
.pure-form input[type="time"],
.pure-form input[type="url"],
.pure-form input[type="week"],
.pure-form select,
.pure-form textarea {
  border: 1px solid var(--chekrok-border);
  border-radius: 10px;
  background: var(--color-background-input);
  box-shadow: none;
}

.pure-form input:focus,
.pure-form select:focus,
.pure-form textarea:focus {
  border-color: var(--chekrok-primary);
  background: #fff;
  box-shadow: var(--sa-focus-ring);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--chekrok-primary);
}

.box,
.edit-form .inner,
.login-form .inner,
.modal-dialog,
.menu-pop,
.border-fieldset,
#new-watch-form,
#recommended-proxy > div,
#extra-proxies-setting,
#extra-browsers-setting {
  border: 1px solid var(--chekrok-border);
  border-radius: 14px;
  box-shadow: var(--chekrok-shadow);
}

.edit-form .inner,
.login-form .inner,
.modal-dialog,
.menu-pop,
.border-fieldset {
  background: var(--color-background);
}

.action-sidebar-item,
.action-sidebar a,
.mobile-menu-section a {
  border-radius: 10px;
}

.action-sidebar-li {
  margin: 1px 10px;
}

.action-sidebar-li.active > a,
.action-sidebar-li.active > .action-sidebar-item,
.pure-menu-item.active .pure-menu-link {
  background: var(--chekrok-primary-dark);
  color: #fff;
}

.action-sidebar-li.active svg,
.pure-menu-item.active svg {
  color: #fff;
  stroke: #fff;
}

.action-sidebar-li a:hover,
.mobile-menu-section a:hover,
.pure-menu-link:hover {
  background: var(--chekrok-tint);
  color: #000;
}

#cdio-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
  text-transform: none;
  letter-spacing: 0.01em;
}

#cdio-logo .chekrok-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

#cdio-logo strong {
  font-size: 1.08rem;
}

.cdio-table-clip,
.pure-table {
  overflow: hidden;
  border: 1px solid var(--chekrok-border);
  border-radius: 14px;
  background: var(--color-background);
  box-shadow: var(--chekrok-shadow);
}

.cdio-table thead,
.pure-table thead {
  background: var(--color-background-table-thead);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cdio-table thead a,
.pure-table thead a {
  color: #fff;
}

.cdio-table tbody tr,
.pure-table tbody tr {
  border-bottom: 1px solid var(--chekrok-border);
}

.cdio-table tbody tr:hover > td,
.pure-table tbody tr:hover > td {
  background: var(--watchlist-row-hover);
}

.cdio-table tbody tr.selected > td,
.pure-table tbody tr.selected > td {
  background: var(--watchlist-row-selected);
}

.pagination.menu a,
.inline-tag,
.restock-label,
.watch-tag-list,
.processor-badge,
.status-pill {
  border-radius: 999px;
}

.pagination.menu a.active,
.seg .active,
progress::-webkit-progress-value {
  background: var(--chekrok-primary);
}

.login-form {
  width: min(92vw, 420px);
  margin-top: clamp(2rem, 10vh, 7rem);
}

.login-form .inner {
  padding: 2rem;
}

html[data-darkmode="true"] {
  --chekrok-primary: #2a2aef;
  --chekrok-primary-dark: #2a2aef;
  --chekrok-tint: rgba(255,255,255,.14);
  --chekrok-border: rgba(255,255,255,.25);
  --chekrok-shadow: 0 8px 24px rgba(0,0,0,.5);
  --color-link: rgba(255,255,255,.8);
  --color-background-button-primary: #2a2aef;
  --color-background-page: #000000;
  --color-background: rgba(255,255,255,.05);
  --color-background-input: rgba(255,255,255,.08);
  --color-background-table-thead: rgba(255,255,255,.08);
  --watchlist-row-hover: rgba(255,255,255,.08);
  --watchlist-row-selected: rgba(255,255,255,.14);
}

html[data-darkmode="true"] body::after {
  background: linear-gradient(140deg, #000000 0%, #000000 52%, #000000 100%);
}

html[data-darkmode="true"] .pure-button-primary,
html[data-darkmode="true"] a.pure-button-primary,
html[data-darkmode="true"] .pure-button-selected,
html[data-darkmode="true"] a.pure-button-selected {
  background: #2a2aef;
  color: #fff;
}

html[data-darkmode="true"] .pure-form input:focus,
html[data-darkmode="true"] .pure-form select:focus,
html[data-darkmode="true"] .pure-form textarea:focus {
  background: rgba(255,255,255,.08);
  box-shadow: var(--sa-focus-ring);
}

html[data-darkmode="true"] .cdio-table tbody tr,
html[data-darkmode="true"] .pure-table tbody tr {
  border-bottom-color: rgba(255,255,255,.08);
}

@media (max-width: 760px) {
  .action-sidebar-li { margin-inline: 6px; }
  .login-form .inner { padding: 1.25rem; }
  .cdio-table-clip { border-radius: 12px; }
}