/* ========== Design tokens (light/dark) ========== */
:root {
  --bg: #0b0c0f;
  --bg-elev: #0f1115;
  --bg-soft: #131622;
  --card: #10131a;
  --card-border: #1c2230;
  --text: #e8ecf1;
  --muted: #9aa5b1;
  --link: #7aa2ff;
  --accent: #5b8cff;
  --accent-2: #3dd2b4;
  --danger: #ff6b6b;
  --warning: #ffd166;

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --shadow-1: 0 4px 18px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.45);

  --gap: 14px;
  --maxw: 1100px;
  --trans: 180ms ease;
  --border: 1px solid var(--card-border);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Light mode if ktoś woli */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc;
    --bg-elev: #ffffff;
    --bg-soft: #f2f5fb;
    --card: #ffffff;
    --card-border: #e7edf7;
    --text: #0d1220;
    --muted: #5a6576;
    --link: #275df7;
    --accent: #275df7;
    --accent-2: #00b894;
    --danger: #e03131;
    --warning: #e0a800;
    --shadow-1: 0 6px 18px rgba(30,42,70,.08);
    --shadow-2: 0 10px 30px rgba(30,42,70,.14);
  }
}

/* ========== Base ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(91,140,255,.15), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(61,210,180,.12), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Central column like Perplexity */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 24px auto;
  padding: 0 16px;
}

/* Simple top nav / breadcrumb */
.navbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 16px;
}
.navbar .brand {
  font-weight: 700; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-size: 18px;
}
.navbar a { color: var(--muted); text-decoration: none; }
.navbar a:hover { color: var(--text); }

/* Cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
@media (max-width: 960px) {
  .col-6 { grid-column: span 12; }
  .col-4 { grid-column: span 12; }
}

/* Card */
.card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 16px;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--card-border) 70%, var(--accent));
  box-shadow: var(--shadow-2);
}

/* Headings */
h1,h2,h3 { margin: 0 0 12px; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.muted { color: var(--muted); }

/* Links & buttons */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  appearance: none; border: none; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-weight: 600; letter-spacing: .2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #000));
  color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  transition: transform var(--trans), box-shadow var(--trans), opacity var(--trans);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); opacity: .9; }
.btn.ghost {
  background: transparent; color: var(--text);
  border: var(--border);
}
.btn.danger {
  background: linear-gradient(180deg, var(--danger), color-mix(in oklab, var(--danger) 70%, #000));
}

/* Forms */
fieldset {
  border: var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev); padding: 16px; margin: 0 0 16px;
}
label { display: block; margin: 8px 0; color: var(--muted); }
input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--card-border); outline: none;
  background: var(--bg-soft); color: var(--text);
  transition: border-color var(--trans), box-shadow var(--trans);
}
input:focus, select:focus {
  border-color: color-mix(in oklab, var(--card-border) 40%, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Small helper text */
.small { font-size: 12px; color: var(--muted); }

/* Account boxes (hook into existing .box) */
.box {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-1);
}

/* Progress bars (hook into existing .progress) */
.progress {
  background: linear-gradient(180deg, var(--bg-soft), color-mix(in oklab, var(--bg-soft) 70%, #000));
  border-radius: 999px;
  height: 10px; overflow: hidden; border: 1px solid var(--card-border);
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width .35s ease;
}

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--card-border); background: var(--bg-soft); color: var(--muted);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
[data-status="READY"]     .pill .dot { background: var(--accent-2); }
[data-status="IMPORTING"] .pill .dot { background: var(--accent); }
[data-status="IMPORTED"]  .pill .dot { background: var(--warning); }
[data-status="EXPORTING"] .pill .dot { background: var(--accent); }
[data-status="DONE"]      .pill .dot { background: var(--accent-2); }
[data-status="ERROR"]     .pill .dot { background: var(--danger); }

/* Logs */
pre {
  background: #0a0c12; color: #dfe6f3; border: var(--border);
  border-radius: var(--radius-md); padding: 12px; overflow: auto;
  box-shadow: var(--shadow-1); font-family: var(--mono); font-size: 12.5px;
}
code, kbd, samp { font-family: var(--mono); }

/* Table (if dodasz kiedyś listy zadań) */
.table {
  width: 100%; border-collapse: collapse; border: var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.table th, .table td {
  padding: 10px 12px; border-bottom: 1px solid var(--card-border);
}
.table th { text-align: left; font-size: 12px; color: var(--muted); background: var(--bg-soft); }

/* Utility */
.row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.right { margin-left: auto; }
.mb-0{margin-bottom:0}.mb-6{margin-bottom:6px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-20{margin-top:20px}

/* Subtle divider */
.hr {
  height: 1px; background: var(--card-border); border: 0; margin: 14px 0;
}
.box{border:1px solid #ddd;border-radius:8px;padding:12px}
.progress{background:#f2f2f2;border-radius:6px;overflow:hidden;height:12px}
.progress>div{height:12px;background:#4caf50;width:0%;transition:width .4s}
.small{font-size:12px;color:#666}
/* ===== Buttons ===== */
:root{
  --btn-h: 42px;
  --btn-r: 10px;
  --btn-fw: 600;
  --btn-pad-x: 14px;
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}

.btn{
  --bg: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #000));
  --fg: #fff;
  --bd: transparent;

  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height: var(--btn-h); padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-r); border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg); font-weight: var(--btn-fw);
  text-decoration:none; cursor:pointer; user-select:none; white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), var(--shadow-1);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active{ transform: translateY(0); opacity:.95; }
.btn:focus-visible{ outline: none; box-shadow: var(--shadow-1), var(--ring); }
.btn[disabled], .btn.is-disabled{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow: none;
}

/* Variants */
.btn--primary{ /* domyślny .btn już jest primary */ }
.btn--ghost{
  --bg: linear-gradient(180deg, transparent, transparent);
  --fg: var(--text);
  --bd: var(--card-border);
  box-shadow:none;
}
.btn--soft{
  --bg: linear-gradient(180deg, color-mix(in oklab, var(--accent) 20%, var(--bg-soft)), var(--bg-soft));
  --fg: var(--text);
  --bd: color-mix(in oklab, var(--card-border) 60%, var(--accent));
}
.btn--danger{
  --bg: linear-gradient(180deg, var(--danger), color-mix(in oklab, var(--danger) 70%, #000));
}
.btn--success{
  --bg: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 70%, #000));
}
.btn--warning{
  --bg: linear-gradient(180deg, var(--warning), color-mix(in oklab, var(--warning) 70%, #000));
  --fg: #111;
}

/* Sizes */
.btn--sm{ --btn-h: 34px; --btn-pad-x: 10px; font-weight: 600; border-radius: 8px; font-size: 13px; }
.btn--lg{ --btn-h: 50px; --btn-pad-x: 18px; font-size: 16px; border-radius: 12px; }
.btn--block{ display:flex; width:100%; }

/* Icon support (np. <svg/ i> ) */
.btn > .icon{ width:18px; height:18px; display:inline-block; }
.btn--sm > .icon{ width:16px; height:16px; }
.btn--lg > .icon{ width:20px; height:20px; }

/* Loading state */
.btn.is-loading{ position:relative; pointer-events:none; color:transparent; }
.btn.is-loading::after{
  content:""; position:absolute; inset:0; display:grid; place-items:center;
}
.btn.is-loading::before{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid color-mix(in oklab, var(--fg) 40%, transparent);
  border-top-color: var(--fg);
  animation: spin .9s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Button group */
.btn-group{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.btn-group .btn{ border-radius:10px; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition:none; transform:none; }
}