/* =========================================================
   Toolkit Studio — shared design system
   Light "SaaS white & blue" theme: crisp white surfaces, one
   confident blue accent, restrained shadows.
   No external fonts or network calls — system fonts only,
   so every page works fully offline and independently.

   Colors themselves live in assets/colors.css (loaded before
   this file) — edit that file to change the palette. The
   variables below just map this page's names onto it.
   ========================================================= */

:root{
  --bg:        var(--color-bg);
  --bg-raised: var(--color-surface);
  --bg-input:  var(--color-surface);
  --line:      var(--color-line);
  --line-soft: var(--color-line-soft);
  --accent:    var(--color-accent);
  --accent-dim:var(--color-accent-light);
  --accent-ink:var(--color-accent-ink);
  --accent-soft:var(--color-accent-soft);
  --text:      var(--color-text);
  --text-muted:var(--color-text-muted);
  --text-dim:  var(--color-text-faint);
  --danger:    var(--color-danger);

  --font-head: -apple-system, "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --maxw: 1100px;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-hover: 0 10px 26px rgba(15,23,42,0.10), 0 0 0 1px rgba(37,99,235,0.10);
}

*{ box-sizing: border-box; }
html{ color-scheme: light; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

h1,h2,h3{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

.mono{ font-family: var(--font-mono); }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- top bar ----------
   The header markup + its CSS now live in assets/header.js,
   so the header is identical (and only edited once) across
   every page. Nothing to style here anymore. */

/* ---------- hero ---------- */
/* Full-width band so the page reads as intentional on wide
   screens, not just a narrow line of text in a sea of white. */
.hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 48px;
  text-align: center;
}
.hero-particles{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap{ position: relative; z-index: 1; }
.hero h1{
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.2;
  max-width: 20ch;
  margin: 0 auto;
}
.hero p.sub{
  margin: 14px auto 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: 16px;
}

/* ---------- hero mascot — a small character tucked in the hero's
   corner whose eyes follow the cursor anywhere on the page. Purely
   decorative (pointer-events: none) and absolutely positioned, so it
   never adds to the hero's height or pushes any other content. ---------- */
.hero-mascot{
  position: absolute;
  top: 16px;
  right: 22px;
  width: 58px;
  height: 58px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  will-change: transform;
}
.hero-mascot .hm-body{ fill: var(--accent); }
.hero-mascot .hm-body-shade{ fill: var(--accent-dark); opacity: .35; }
.hero-mascot .hm-eye-white{ fill: #fff; }
.hero-mascot .hm-pupil{ fill: #1b1b1f; transform-box: fill-box; transform-origin: center; }
.hero-mascot .hm-cheek{ fill: var(--accent-light); opacity: .55; }
.hero-mascot .hm-wrench{ fill: var(--accent-darker); opacity: .9; }
.hero-mascot .hm-antenna{ stroke: var(--accent-darker); }
.hero-mascot .hm-mouth{ stroke: var(--accent-darker); }
.hero-mascot .hm-lid{
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0);
  animation: hmBlink 5.5s ease-in-out infinite;
}
.hero-mascot .hm-lid.hm-lid-2{ animation-delay: .06s; }
@keyframes hmBlink{
  0%, 92%, 100%{ transform: scaleY(0); }
  95%{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-mascot{ transition: none !important; }
  .hero-mascot .hm-lid{ animation: none; }
}
@media (max-width: 640px){
  .hero-mascot{ width: 42px; height: 42px; top: 12px; right: 14px; }
}
@media (max-width: 420px){
  .hero-mascot{ display: none; }
}

/* ---------- hero mini-tool ("try it now") ---------- */
/* A small, genuinely working tool right in the hero, so a first-time
   visitor can start typing and see a result before ever opening a
   dedicated tool page — proof the site works, not just a promise. */

/* Hidden per request (didn't look right in the hero) — the markup, styles and game logic are all
   still intact below, just not shown. Delete this one rule to bring it back. */
#heroGame{ display:none !important; }

.hero-tool{
  margin: 22px auto 0;
  max-width: 620px;
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.hero-tool-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hero-tool-label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}
.hero-tool-best{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.hero-tool-best strong{ color: var(--text); font-family: var(--font-mono); }
.brick-sound-btn{
  border: none;
  background: none;
  padding: 2px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.brick-sound-btn:hover{ opacity: 1; }
.brick-sound-btn[aria-pressed="false"]{ opacity: .35; }

/* ---------- Brick Breaker: wide rather than tall. The canvas is a
   fixed 640x200 logical size scaled to the card's width, so it gains
   width on big screens but its height stays near 200px and the hero
   never grows to cover the tool grid below it ---------- */
.hero-tool[hidden]{ display: none; }
.hero-tool-brick{ max-width: 720px; padding: 14px; }
.brick-stats{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}
.hero-stat{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.hero-stat strong{
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text);
}
.brick-actions{
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.btn.brick-start-btn,
.btn.brick-stop-btn{
  padding: 6px 16px;
  font-size: 12.5px;
}
.btn.brick-stop-btn:not(:disabled){ border-color: var(--danger); color: var(--danger); }
.btn.brick-stop-btn:not(:disabled):hover{ background: var(--danger); color: #fff; }
@media (max-width: 520px){
  .brick-stats{ flex-wrap: wrap; gap: 6px 16px; }
  .brick-actions{ flex: 1 0 100%; margin-left: 0; }
  .brick-actions .btn{ flex: 1; justify-content: center; }
}
.brick-wrap{ position: relative; line-height: 0; }
#brickCanvas{
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 640 / 200;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  touch-action: none;
}
.brick-flash{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.16);
  border: 2px solid #ef4444;
  color: #ef4444;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.brick-flash.is-visible{ opacity: 1; }
/* "Level 2 - faster!" pop-up shown while the new wall of bricks fades in */
.brick-banner{
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -30%) scale(.92);
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(15,23,42,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(.2,.9,.3,1.3);
}
.brick-banner.is-visible{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Shown when the game paused itself (search started / tab left); click resumes. */
.brick-pause{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: rgba(15,23,42,.55);
  color: #fff;
  font: 700 14px/1.3 var(--font-body);
  letter-spacing: .01em;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.brick-pause[hidden]{ display: none; }
/* Under-canvas strip: hint while idle, the tool you just broke while
   playing, the tools you found once the round ends. Fixed minimum height
   so the hero never jumps as its content changes. */
.brick-info{
  margin-top: 8px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brick-hint{
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}
.brick-hint[hidden], .brick-tool[hidden]{ display: none; }
.brick-tool{ width: 100%; text-align: center; }
.brick-tool-name{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.brick-tool-name:hover{ text-decoration: underline; }
.brick-tool-desc{
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brick-found-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-right: 2px;
}
.brick-found-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-height: 58px;
  overflow: hidden;
}
.brick-chip{
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.brick-chip:hover{ border-color: var(--accent); color: var(--accent); text-decoration: none; }
.brick-chip-more{ color: var(--text-dim); }

/* Wrapper around the hero search box. There is no results dropdown: once a
   search starts the game hides and the tool grid right below the hero
   filters live, so the grid itself is the result list. */
.search-wrap{
  position: relative;
  z-index: 30;
  margin: 28px auto 0;
  max-width: 460px;
}
.search-wrap .search{ margin: 0; max-width: none; }

.search{
  margin: 28px auto 0;
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 13px 16px;
  max-width: 460px;
  box-shadow: var(--shadow-card);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.search:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search input{
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14.5px;
  font-family: var(--font-body);
  text-align: left;
}
.search input::placeholder{ color: var(--text-dim); }
.search .k{
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
.search-clear{
  display:none;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}
.search-clear:hover{ background: var(--accent-soft); color: var(--accent); }
.search.has-query .search-clear{ display:flex; }
.search.has-query .k{ display:none; }

/* ---------- searching: game hides, hero compacts ---------- */
body.is-searching .hero{ padding: 26px 0 22px; }
body.is-searching .hero p.sub{ display: none; }
body.is-searching .search-wrap{ margin-top: 16px; }
body.is-searching .tools-section{ padding-top: 18px; }

/* ---------- tools section ---------- */
.tools-section{
  padding: 44px 0 64px;
}
.tools-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.tools-head h2{ font-size: 17px; }
.tools-head-actions{ display: inline-flex; align-items: center; gap: 12px; }
.tools-toggle-all{
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-muted);
  font: 600 12px/1.4 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease;
}
.tools-toggle-all:hover:not(:disabled){ border-color: var(--accent-dim); color: var(--text); }
.tools-toggle-all:disabled{ opacity: .4; cursor: default; }
.tools-head .count{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.tool-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

/* ---------- "Your Tools" (favorites + recently used) ---------- */
.your-tools-section{ padding: 22px 0 0; }
.your-tools-group{ margin-bottom: 18px; }
.your-tools-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.your-tools-group h3{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.your-tools-clear{
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-muted);
  font: 600 11.5px/1.4 var(--font-body);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.your-tools-clear:hover{ border-color: var(--accent-dim); color: var(--text); }
.your-tools-clear.is-armed{ border-color: var(--danger); color: var(--danger); background: rgba(220,38,38,.08); }
.your-tools-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.your-tool-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 120ms ease, transform 120ms ease;
}
.your-tool-chip:hover{ border-color: var(--accent-dim); transform: translateY(-1px); text-decoration: none; }
.your-tool-unstar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin: -2px -4px -2px 0;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  border-radius: 50%;
}
.your-tool-unstar:hover{ background: var(--line); color: var(--text); }

/* ---------- category chips + grouped sections ---------- */
.category-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 30px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: 10px 0;
}
.category-chip{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.category-chip:hover{ border-color: var(--accent-dim); color: var(--text); text-decoration: none; }
.category-chip.active{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.category-chip-clear[hidden]{ display: none; }
.category-chip-clear{
  border-style: dashed;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}
.category-chip-clear:hover{ border-color: var(--accent-dim); color: var(--text); }
.category-chip-count{
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .65;
}
.tools-category{ margin-bottom: 40px; scroll-margin-top: 70px; }
.tools-category:last-child{ margin-bottom: 0; }
.tools-category-title{
  display:flex;
  align-items:center;
  gap: 9px;
  font-size: 15px;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.tools-category-count{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 500;
}
.tools-category.tools-category-hidden{ display:none; }

/* ---------- collapsible categories ----------
   The arrow sits at the far right of the title row. Folding animates the
   body's height (grid rows 1fr -> 0fr). The inner box carries a little
   padding so card hover-shadows are not clipped by its overflow:hidden; the
   negative margin cancels that padding so the grid stays aligned. */
.cat-toggle{
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}
.cat-toggle svg{ display: block; transition: transform 300ms cubic-bezier(.4,0,.2,1); transform: rotate(180deg); }
.tools-category-title:hover .cat-toggle,
.cat-toggle:focus-visible{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cat-toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tools-category-title:active .cat-toggle{ transform: scale(.94); }

.tools-category-body{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms cubic-bezier(.4,0,.2,1);
}
.tools-category-body-inner{
  min-height: 0;
  overflow: hidden;
  padding: 14px 10px 10px;
  margin: 0 -10px -10px;
  transition: padding 300ms cubic-bezier(.4,0,.2,1), margin 300ms cubic-bezier(.4,0,.2,1), visibility 0s;
}
.tools-category{ transition: margin-bottom 300ms cubic-bezier(.4,0,.2,1); }

#toolCategories:not(.force-open) .tools-category.is-collapsed{ margin-bottom: 14px; }
#toolCategories:not(.force-open) .tools-category.is-collapsed .cat-toggle svg{ transform: rotate(0deg); }
#toolCategories:not(.force-open) .tools-category.is-collapsed .tools-category-body{ grid-template-rows: 0fr; }
#toolCategories:not(.force-open) .tools-category.is-collapsed .tools-category-body-inner{
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  visibility: hidden;
  transition: padding 300ms cubic-bezier(.4,0,.2,1), margin 300ms cubic-bezier(.4,0,.2,1), visibility 0s linear 300ms;
}
/* While a search / category filter is active every section stays open, so the arrows rest. */
#toolCategories.force-open .cat-toggle{ opacity: .35; pointer-events: none; }
#toolCategories.force-open .tools-category-title{ cursor: default; }

.tool-card,
.tool-card:hover{ text-decoration: none; color: inherit; }
.tool-card{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.tool-card:hover, .tool-card:focus-visible{
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}
.card-fav-btn{
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-dim);
  cursor: pointer;
  opacity: .5;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.card-fav-btn:hover{ opacity: 1; color: var(--accent); }
.card-fav-btn[aria-pressed="true"]{ opacity: 1; color: #f59e0b; }
.card-fav-btn[aria-pressed="true"] svg{ fill: currentColor; }

.tool-card .badge{
  flex: none;
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}
.tool-card .text{ min-width: 0; }
.tool-card .name{
  display:flex;
  align-items:center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
}
.tool-card .desc{
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}
.tool-card .new-ribbon{
  position: absolute;
  top: 10px;
  left: -6px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px 3px 9px;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 2;
  line-height: 1.4;
}
.tool-card .new-ribbon::after{
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  border-style: solid;
  border-width: 4px 6px 0 0;
  border-color: var(--accent) transparent transparent transparent;
  filter: brightness(0.65);
}

.empty-note{
  padding: 20px 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* ---------- footer ----------
   The footer's markup + CSS now live in assets/footer.js and
   assets/footer.css, shared by every page — nothing to style
   here anymore. */

/* ---------- buttons (shared) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
}
.btn:hover{ border-color: var(--accent); color: var(--accent); }
.btn.primary{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover{ filter: brightness(1.06); color: var(--accent-ink); }
.btn.danger{ border-color: var(--danger); color: var(--danger); background: var(--bg-raised); }
.btn.danger:hover{ background: var(--danger); color: #fff; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---------- forms (admin) ---------- */
label{ display:block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
input[type="text"], textarea, select{
  width:100%;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
input[type="text"]:focus, textarea:focus, select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea{ resize: vertical; min-height: 70px; }
.field{ margin-bottom: 14px; }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .row2{ grid-template-columns: 1fr; } }

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
}

.banner{
  border:1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.banner.warn{ border-left-color: var(--danger); }
.banner strong{ color: var(--text); }

::selection{ background: var(--accent-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}