/* The Dollar Store — shared design tokens & components.
   Refined dark palette with proper contrast & restrained accent use. */
:root{
  /* Surfaces — canvas darker than panels so cards have real elevation
     instead of sitting flush with the body. */
  --bg:#0e1118;
  --bg-2:#13171f;
  --panel:#1a1e2a;
  --panel-2:#232838;
  --panel-3:#303651;
  /* Lines */
  --line:#262c3c;
  --line-2:#363c50;
  --line-3:#474e66;
  /* Ink */
  --ink:#f5f7fb;
  --ink-2:#c9cfdf;
  --ink-3:#8e96ae;
  --mute:#646b85;
  /* Accent: restrained green-blue used sparingly */
  --accent:#7cf3a4;
  --accent-2:#62e08f;
  --info:#7ab9ff;
  --info-2:#5ea7ff;
  --warn:#f5c46c;
  --err:#ff8585;
  /* Gradients reserved for primary CTA only */
  --grad-1:#7cf3a4;
  --grad-2:#5eb8ff;
  --grad-3:#c084fc;
  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  --shadow-lg:0 20px 48px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset;
  /* Radius */
  --r-sm:6px;
  --r-md:9px;
  --r-lg:12px;
  --r-xl:16px;
  /* Type */
  --font:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Inter","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --font-display:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Menlo","Consolas",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100vh;background:var(--bg);color:var(--ink);
  font:13.5px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01","ss03";letter-spacing:-0.005em}
body{display:flex;flex-direction:column;overflow:hidden}

/* Header bar shared across all apps */
header{
  -webkit-app-region:drag;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
  display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:52px}
header .ic{
  -webkit-app-region:no-drag;
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,243,164,.10);
  border:1px solid rgba(124,243,164,.20);
  color:var(--accent)}
header .ic svg{width:18px;height:18px}
header h1{margin:0;font-family:var(--font-display);font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
header .sub{color:var(--ink-3);font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
header .pill{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(124,243,164,.12);
  color:var(--accent);border:1px solid rgba(124,243,164,.25);font-family:var(--mono);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Buttons */
button{cursor:pointer;border:1px solid var(--line-2);background:rgba(255,255,255,.025);
  color:var(--ink);padding:7px 13px;border-radius:var(--r-md);
  font:500 12.5px/1 var(--font);
  transition:background .14s, border-color .14s, transform .08s, box-shadow .14s;
  outline:none;-webkit-app-region:no-drag}
button:hover{background:rgba(255,255,255,.05);border-color:var(--line-3)}
button:active{transform:translateY(.5px)}
button:focus-visible{box-shadow:0 0 0 2px rgba(122,185,255,.45)}
button.primary{background:var(--accent);color:#062314;border-color:transparent;font-weight:600}
button.primary:hover{background:var(--accent-2)}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:rgba(255,255,255,.04)}
button.danger{color:var(--err);border-color:rgba(255,133,133,.25)}
button.danger:hover{background:rgba(255,133,133,.08);border-color:rgba(255,133,133,.4)}
button:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* Inputs */
input,textarea,select{background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
  padding:8px 11px;border-radius:var(--r-md);font:inherit;font-size:13px;outline:none;
  transition:border-color .15s, background .15s;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--mute)}
input:focus,textarea:focus,select:focus{border-color:var(--info);background:var(--panel-2);
  box-shadow:0 0 0 3px rgba(122,185,255,.15)}
input[type=range]{padding:0;-webkit-appearance:none;background:transparent;height:24px;border:none}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--panel-2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);margin-top:-5px;cursor:pointer;border:2px solid var(--bg)}
input[type=color]{padding:2px;height:36px;cursor:pointer}
input[type=checkbox]{width:auto;accent-color:var(--accent-2)}
textarea{font-family:var(--mono);resize:none}
select{cursor:pointer;-webkit-appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%239ba0ad'><path d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:9px}

/* Layout helpers */
.row{display:flex;gap:10px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}
.muted{color:var(--ink-3)}
.dim{color:var(--mute)}
.mono{font-family:var(--mono);font-size:12.5px}
.pad{padding:18px}
.flex1{flex:1;min-height:0}
.spacer{flex:1}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

/* Empty state component — centered in its container so apps with sparse
   data don't read as a black void. Use inside a flex/grid parent that has
   place-items:center, or wrap in .empty-wrap. */
.empty-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px}
.empty{text-align:center;color:var(--ink-3);max-width:340px}
.empty .icon{width:52px;height:52px;border-radius:12px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.025);border:1px solid var(--line);color:var(--ink-3)}
.empty .icon svg{width:24px;height:24px}
.empty h3{margin:0 0 6px;font-size:14.5px;color:var(--ink-2);font-weight:600;letter-spacing:-.005em}
.empty p{margin:0 auto;font-size:12.5px;line-height:1.55;max-width:280px}

/* Pill / tag */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:3px 8px;border-radius:999px;
  background:rgba(124,243,164,.10);color:var(--accent);border:1px solid rgba(124,243,164,.22);
  font-family:var(--mono);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tag.info{background:rgba(122,185,255,.10);color:var(--info);border-color:rgba(122,185,255,.22)}
.tag.warn{background:rgba(245,196,108,.10);color:var(--warn);border-color:rgba(245,196,108,.22)}
.tag.err{background:rgba(255,133,133,.10);color:var(--err);border-color:rgba(255,133,133,.22)}

/* Keyboard hint */
.kbd{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 5px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:4px;color:var(--ink-2)}

/* Scrollbars */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--panel-2);border:3px solid var(--bg);border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:var(--panel-3)}
::-webkit-scrollbar-track{background:transparent}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel-2);
  border:1px solid var(--line-2);padding:10px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-md);
  font-size:13px;animation:toast .25s ease;z-index:99}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}

/* Focus ring for keyboard users */
:focus-visible{outline:none}