/* Откуцај — ESIR UI v1.1. Onest + Unbounded, indigo→violet system, sidebar app shell. */
:root {
  --bg: #eef0f7;
  --bg-2: #f7f8fc;
  --card: #ffffff;
  --ink: #0e1330;
  --ink-2: #5a628a;
  --line: #e2e5f1;
  --line-2: #eceef7;
  --brand: #4f46e5;
  --brand-2: #8b5cf6;
  --brand-ink: #4338ca;
  --grad: linear-gradient(135deg, #4f46e5, #8b5cf6);
  --ok: #0f8a56;
  --ok-bg: #dcf5e9;
  --warn: #b45309;
  --warn-bg: #fdf0d5;
  --err: #d92d20;
  --err-bg: #fee4e2;
  --demo: #7c3aed;
  --demo-bg: #f1e9fe;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(14, 19, 48, .05), 0 8px 24px rgba(14, 19, 48, .07);
  --shadow-lg: 0 4px 12px rgba(14, 19, 48, .08), 0 20px 48px rgba(79, 70, 229, .13);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font: 15px/1.55 "Onest", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
body.public { display: flex; flex-direction: column; background: radial-gradient(900px 420px at 50% -80px, #e4e1fb 0%, var(--bg) 60%); }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.mono { font-family: "Cascadia Mono", ui-monospace, Consolas, monospace; font-size: .92em; }
.muted { color: var(--ink-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
::selection { background: var(--brand); color: #fff; }
::-moz-selection { background: var(--brand); color: #fff; }

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.logo { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; box-shadow: 0 3px 10px rgba(99, 102, 241, .35); }
.brand-name { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .01em; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side {
  width: 236px; flex: 0 0 236px; background: var(--card);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.side .brand { padding: 2px 8px 18px; }
.sidenav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidenav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 600; font-size: 14.5px;
}
.sidenav a svg { width: 20px; height: 20px; }
.sidenav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.sidenav a.on { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(99, 102, 241, .35); }
.side-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line-2); }
.side-user { display: flex; flex-direction: column; gap: 2px; }
.whoami { font-weight: 700; font-size: 14px; }
.side-links { display: flex; gap: 12px; font-size: 13px; align-items: center; }
.odjava-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.odjava-link svg { width: 15px; height: 15px; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mtop { display: none; }
.main-app { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 26px 48px; }

/* ---------- public chrome ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 26px; position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-link { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.lang { font-weight: 700; font-size: 13px; color: var(--ink-2); }
.main-public { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 30px 22px 60px; }
.footer {
  border-top: 1px solid var(--line-2); background: transparent;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 16px 26px; font-size: 13px; color: var(--ink-2);
}
.footer-links { display: flex; gap: 10px 18px; flex-wrap: wrap; }

/* ---------- buttons, badges, flash ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  padding: 9px 18px; font: inherit; font-weight: 700; color: #fff;
  background: var(--grad); transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(99, 102, 241, .35); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); box-shadow: none; }
.btn-warn { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: wait; }
.badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.badge-demo { background: var(--demo-bg); color: var(--demo); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-off { background: var(--err-bg); color: var(--err); }
.flash { margin: 14px 26px 0; padding: 11px 16px; border-radius: var(--r-sm); font-weight: 600; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--err-bg); color: var(--err); }

/* ---------- cards, forms, tables ---------- */
.card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 20px;
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.page-head h1 { margin: 0; }
label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 11px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px;
  font: inherit; color: var(--ink); background: var(--card);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; margin: 0; }
.input-lg { font-size: 17px; padding: 13px 16px; border-radius: var(--r); }
.input-sm { width: 90px; display: inline-block; }
.inline { display: inline; }
.filterbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.filterbar label { margin: 0; }
.filterbar input, .filterbar select { width: auto; }
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); }
.tablewrap.tall { max-height: 420px; overflow-y: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); background: var(--bg-2); position: sticky; top: 0; }
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--bg-2); }
.table tr:last-child td { border-bottom: 0; }
.row-inactive { opacity: .45; }
.row-total td { background: var(--bg-2); font-weight: 700; }
.rowactions { white-space: nowrap; }
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 6px 10px 6px 0; width: 45%; vertical-align: top; }
.kv td { padding: 6px 0; }

/* ---------- auth ---------- */
.auth-card { max-width: 400px; margin: 9vh auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 34px; }
.auth-card h1 { font-size: 24px; }

/* ---------- landing ---------- */
.hero { text-align: center; padding: 64px 0 30px; }
.hero-badge { display: inline-block; background: var(--demo-bg); color: var(--brand-ink); border-radius: 999px; padding: 5px 16px; font-weight: 700; font-size: 13px; margin-bottom: 20px; }
.hero h1 {
  font-family: "Unbounded", "Onest", sans-serif; font-weight: 700;
  font-size: 42px; line-height: 1.14; letter-spacing: -.01em;
  max-width: 780px; margin: 0 auto 18px; text-wrap: balance;
  background: linear-gradient(120deg, var(--ink) 30%, #4f46e5 75%, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { max-width: 640px; margin: 0 auto 28px; color: var(--ink-2); font-size: 17px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin: 44px 0; }
.feature {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 24px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature h3 { font-size: 16px; }
.feature p { margin: 0; color: var(--ink-2); font-size: 14px; }
.statusband { background: var(--warn-bg); border: 1px solid #f5dfa8; color: #7c5806; border-radius: var(--r); padding: 15px 20px; font-size: 14px; }

/* ---------- POS ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; margin-top: 16px; }
.item-card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 14px; cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 5px; min-height: 78px; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.item-card:hover { transform: translateY(-2px); border-color: #c7c5f4; box-shadow: var(--shadow-lg); }
.item-name { font-weight: 700; font-size: 14px; }
.item-price { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.free-entry { margin-top: 18px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--r); padding: 12px 16px; }
.free-entry summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.free-entry-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.free-entry-form input, .free-entry-form select { margin-top: 0; }

.pos-right {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 18px; position: sticky; top: 20px;
}
.cart-title { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.cart { max-height: 260px; overflow-y: auto; }
.cart-empty { color: var(--ink-2); text-align: center; padding: 20px 0; }
.cart-row { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.cart-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cart-row-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-row-ctl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cdisc { width: 52px; text-align: right; margin: 0; padding: 5px 6px; }
.ctl-lbl { font-size: 11px; color: var(--ink-2); font-weight: 600; margin-left: 4px; }
.qbtn { width: 27px; height: 27px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-weight: 800; color: var(--ink); }
.qbtn:hover { background: var(--bg-2); }
.qty { width: 52px; text-align: center; margin: 0; padding: 5px 4px; }
.cprice { width: 76px; text-align: right; margin: 0 6px 0 0; padding: 5px 6px; }
.cart-row-total { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.cart-row-del { border: 0; background: none; color: var(--err); font-size: 18px; cursor: pointer; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; }
.cart-total span { font-weight: 600; color: var(--ink-2); }
.cart-total strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pos-opts { border-top: 1px solid var(--line-2); padding-top: 14px; margin-bottom: 14px; }
.opt-caption { font-weight: 600; font-size: 13px; color: var(--ink-2); margin: 4px 0; cursor: pointer; }
.avans-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pay-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.pay-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; }
.pay-row select, .pay-row input { margin-top: 0; }
.pay-del { border: 0; background: none; color: var(--err); font-size: 17px; cursor: pointer; padding: 0 4px; }
.pay-add { font-size: 13px; font-weight: 700; color: var(--brand-ink); background: none; border: 0; cursor: pointer; padding: 0; }
#issue-error { margin: 10px 0 0; }
#queue-note { margin-top: 10px; font-size: 13px; }

/* ---------- receipt / modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(14, 19, 48, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-box { background: var(--card); border-radius: 18px; max-width: 480px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 20px; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-close { border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink-2); line-height: 1; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.form-grid label { margin-bottom: 12px; }
/* The receipt IS the paper: journal, QR and the demo note all sit on one
   surface. The QR used to float outside the bordered journal box, which read
   as if it were not part of the receipt. */
.receipt-area {
  background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 16px; width: fit-content; max-width: 100%; margin-inline: auto;
}
.receipt-area .journal { background: transparent; border: 0; border-radius: 0; padding: 0; }
.journal {
  font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px; line-height: 1.35; background: var(--bg-2); border: 1px dashed var(--line);
  border-radius: var(--r-sm); padding: 16px; overflow-x: auto; white-space: pre; margin: 0;
}
.j2x { display: block; text-align: center; font-size: 2em; font-weight: 700; line-height: 1.2; white-space: normal; }
.receipt-qr { display: flex; justify-content: center; padding: 14px 0 4px; }
.receipt-qr svg { width: 150px; height: 150px; }
.demo-note { background: var(--demo-bg); color: var(--demo); border-radius: var(--r-sm); padding: 9px 13px; font-size: 13px; font-weight: 600; margin-top: 10px; }

/* ---------- invoice detail ---------- */
.racun-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.racun-head h1 { margin: 0; font-size: 19px; }
.racun-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.racun-side { display: flex; flex-direction: column; gap: 16px; }
.racun-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.racun-actions form { margin: 0; }

/* ---------- reports & settings ---------- */
.report-grid, .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.card-wide { grid-column: 1 / -1; }
.key-reveal { border-color: var(--brand); margin-bottom: 18px; }
.keycode { display: block; background: #171531; color: #a5b4fc; padding: 13px 16px; border-radius: var(--r-sm); font-family: "Cascadia Mono", ui-monospace, monospace; font-size: 14px; word-break: break-all; user-select: all; }

/* ---------- docs ---------- */
.doc { max-width: 840px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 38px 42px; }
.doc h1 { font-size: 28px; }
.doc h2 { border-bottom: 1px solid var(--line-2); padding-bottom: 5px; font-size: 19px; }
.doc .code, .doc pre.code { background: #171531; color: #dfe3f5; border-radius: var(--r-sm); padding: 15px; font-family: "Cascadia Mono", ui-monospace, monospace; font-size: 13px; overflow-x: auto; white-space: pre; }
.doc table { font-size: 14px; }
.doc .table th, .doc .table td { border: 1px solid var(--line-2); }

/* ---------- verify ---------- */
.verify-page { max-width: 560px; }
.verify-banner { background: var(--demo-bg); color: var(--demo); border-radius: var(--r); padding: 13px 17px; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.verify-card h1 { font-size: 22px; }
.verify-card .journal { margin-top: 16px; }

/* ---------- dashboard ---------- */
/* the app canvas carries the same indigo->violet identity as the landing */
body.app { background:
  radial-gradient(760px 340px at 88% -140px, rgba(139, 92, 246, .13), transparent 62%),
  radial-gradient(620px 300px at 8% 4%, rgba(79, 70, 229, .10), transparent 60%),
  var(--bg); }
.side { background:
  linear-gradient(180deg, rgba(99, 102, 241, .05), transparent 220px), var(--card); }
.page-head h1 {
  background: linear-gradient(115deg, var(--ink) 42%, #4f46e5 78%, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dash-stat {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  position: relative; overflow: hidden;
}
/* gradient hairline across the top of every stat tile */
.dash-stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad);
}
.dash-stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 68%);
  pointer-events: none;
}
.dash-stat-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dash-stat-value {
  font-size: 27px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dash-stat-value small { -webkit-text-fill-color: var(--ink-2); }
.dash-stat-value small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.dash-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dash-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: var(--grad); opacity: .85; transition: opacity .15s ease, transform .15s ease; animation: fadeUp .5s ease both; }
.dash-bar-wrap:hover .dash-bar { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; }
.dash-bar-d { font-size: 10px; color: var(--ink-2); margin-top: 6px; white-space: nowrap; }
.dash-bar-wrap:nth-child(odd) .dash-bar-d { visibility: hidden; }
.dash-quick { display: grid; gap: 10px; }
.dash-pfr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-flat { border: 0; box-shadow: none; border-radius: 0; }
@media (max-width: 1020px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-stat { padding: 14px; }
  .dash-stat-value { font-size: 20px; }
  .dash-chart { height: 110px; gap: 3px; }
  .dash-recent .table th:nth-child(3), .dash-recent .table td:nth-child(3),
  .dash-recent .table th:nth-child(4), .dash-recent .table td:nth-child(4) { display: none; }
  .kv th { width: auto; padding-right: 12px; white-space: nowrap; }
  .kv td { word-break: break-word; }
  .page-head { flex-wrap: wrap; }
  .table th, .table td { padding: 8px 10px; }
}

/* ---------- cart tabs, categories, discounts ---------- */
.cart-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cart-tab {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cart-tab:hover { border-color: #c7c5f4; }
.cart-tab.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(99, 102, 241, .3); }
.cart-tab .tab-n { font-variant-numeric: tabular-nums; }
.cart-tab .tab-x { font-weight: 800; opacity: .7; }
.cart-tab .tab-x:hover { opacity: 1; }
.cart-tab-add { border-style: dashed; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cat-chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 4px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cat-chip:hover { border-color: #c7c5f4; color: var(--ink); }
.cat-chip.on { background: var(--grad); color: #fff; border-color: transparent; }
.cart-disc { display: flex; justify-content: flex-end; padding: 8px 0 0; }
.cart-disc-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.cart-disc-label input { width: 64px; text-align: right; margin: 0; padding: 5px 6px; }

/* ---------- custom file button ---------- */
.file-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin: 0;
  border: 1.5px dashed var(--brand); color: var(--brand-ink); background: var(--card);
  border-radius: 12px; padding: 9px 16px; font-weight: 700; font-size: 14px; max-width: 320px;
  transition: background .15s ease, box-shadow .15s ease, border-style .15s ease;
}
.file-btn:hover { background: var(--demo-bg); box-shadow: 0 4px 14px rgba(99, 102, 241, .18); }
.file-btn.has-file { border-style: solid; background: var(--demo-bg); }
.file-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.file-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- install modal ---------- */
.install-steps { margin: 8px 0 4px; padding-left: 20px; }
.install-steps li { margin: 8px 0; }

/* ---------- collapsible sidebar ---------- */
.side-collapse {
  position: absolute; right: -13px; top: 24px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: transform .2s ease, color .15s ease;
}
.side-collapse svg { width: 15px; height: 15px; }
.side-collapse:hover { color: var(--brand-ink); }
.side { position: sticky; }
html.side-min .side { width: 76px; flex-basis: 76px; padding: 20px 10px; }
html.side-min .side .brand-name,
html.side-min .sidenav a span,
html.side-min .side-user,
html.side-min .side-foot .badge { display: none; }
html.side-min .sidenav a { justify-content: center; padding: 11px 0; }
html.side-min .side .brand { justify-content: center; padding-bottom: 18px; }
html.side-min .side-collapse { transform: rotate(180deg); }
html.side-min .side-foot { align-items: center; }
@media (max-width: 860px) {
  .side-collapse { display: none; }
  html.side-min .side { width: 260px; padding: 20px 14px; }
  html.side-min .side .brand-name, html.side-min .sidenav a span,
  html.side-min .side-user, html.side-min .side-foot .badge { display: revert; }
  html.side-min .sidenav a { justify-content: flex-start; padding: 10px 12px; }
}

/* ---------- guided tour (spotlight coach marks) ---------- */
.tut-dots { display: flex; gap: 6px; }
.tut-dot { width: 22px; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s ease; }
.tut-dot.on { background: var(--grad); }

.tour { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tour[hidden] { display: none !important; }
/* four panels frame the spotlight; the hole between them is left uncovered so
   the real control stays sharp and still clickable */
.tour-m {
  position: fixed; background: rgba(14, 19, 48, .58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: auto; transition: all .28s cubic-bezier(.3, .9, .3, 1);
}
.tour-ring {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--brand), 0 0 26px 6px rgba(99, 102, 241, .55);
  transition: all .28s cubic-bezier(.3, .9, .3, 1);
  animation: tourPulse 2.2s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--brand), 0 0 26px 6px rgba(99, 102, 241, .55); }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px var(--brand-2), 0 0 34px 10px rgba(139, 92, 246, .5); }
}
.tour-pop {
  position: fixed; width: min(348px, calc(100vw - 28px));
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 18px 18px 16px; pointer-events: auto; z-index: 201;
  border: 1px solid var(--line-2);
  transition: left .28s cubic-bezier(.3, .9, .3, 1), top .28s cubic-bezier(.3, .9, .3, 1);
  animation: popIn .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
.tour-pop::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 18px 18px 0 0; background: var(--grad);
}
.tour-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tour-count {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tour-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 2px; }
.tour-x:hover { color: var(--ink); }
.tour-pop h3 { font-size: 17px; margin: 0 0 8px; }
.tour-pop p { color: var(--ink-2); margin: 0; font-size: 14px; }
.tour-install { margin-top: 12px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour-btns { display: flex; gap: 8px; }

/* ---------- install buttons in the app shell ---------- */
.side-install { justify-content: center; margin-bottom: 2px; }
.side-install svg { width: 17px; height: 17px; }
html.side-min .side-install span { display: none; }
html.side-min .side-install { padding: 9px 0; }
.mtop-install { margin-left: auto; padding: 6px 10px; }
.mtop-install svg { width: 17px; height: 17px; }

/* ---------- print ----------
   Pages WITH a receipt (kasa modal, racun detail) print only the receipt.
   Every other page (uputstvo, api-docs, izvestaji...) prints normally. */
@media print {
  body:has(.receipt-area) * { visibility: hidden; }
  body:has(.receipt-area) .receipt-area,
  body:has(.receipt-area) .receipt-area * { visibility: visible; }
  body:has(.receipt-area) .receipt-area { position: absolute; left: 0; top: 0; width: 100%; }
  .journal { border: 0; background: #fff; padding: 0; font-size: 11px; }
  .demo-note { background: none; }
  .modal { position: static; background: none; padding: 0; }
  .modal-box { box-shadow: none; max-height: none; padding: 0; }
  .side, .mtop, .topbar, .footer, .burger, .install-btn { display: none !important; }
  .main-app, .main-public { padding: 0; max-width: 100%; }

  /* the paper decoration is screen only: thermal paper is already the surface,
     and a tinted page background wastes toner on A4 */
  html, body { background: none !important; }
  .receipt-area { background: none; border: 0; border-radius: 0; padding: 0;
                  width: auto; max-width: 100%; margin: 0; }
  .demo-note { background: none !important; color: #000; padding: 2mm 0 0; }

  /* Tehnički vodič: the printed QR must be a square of 40 to 50 mm.
     45 mm on 80 mm rolls and on A4; 40 mm on 58 mm rolls, whose printable
     width is only about 48 mm. Both are inside the permitted range.
     !important guards the size against the SVG's own width/height attributes. */
  .receipt-qr { padding: 3mm 0 1mm; }
  .receipt-qr svg { width: 45mm !important; height: 45mm !important; }
  body.paper-58 .receipt-qr svg { width: 40mm !important; height: 40mm !important; }

  /* The 40 column journal must not be scaled down to fit, so its type size is
     set in physical units. Measured advance for this mono stack is 0.585em, so
     40 columns come out at 23.4 mm per 1 mm of font size. Sizes below are
     chosen to leave real slack inside the printable width of each roll:
       58 mm roll, ~55 mm printable -> 2.15 mm gives ~50.3 mm
       80 mm roll, ~74 mm printable -> 2.90 mm gives ~67.9 mm
     If the mono font is ever changed, re-measure: a wider face overflows the
     roll and the receipt gets clipped at the right edge. */
  body.paper-58 .journal { font-size: 2.15mm; line-height: 1.25; }
  body.paper-80 .journal { font-size: 2.9mm; line-height: 1.3; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .pos { grid-template-columns: 1fr; }
  .pos-right { position: static; }
  .racun-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .side {
    position: fixed; left: 0; top: 0; z-index: 90; height: 100vh;
    transform: translateX(-105%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg); width: 260px;
  }
  .side.open { transform: translateX(0); }
  .mtop {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; background: color-mix(in srgb, var(--card) 85%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2);
    position: sticky; top: 0; z-index: 60;
  }
  .burger { border: 1px solid var(--line); background: var(--card); border-radius: 10px; font-size: 17px; padding: 5px 11px; cursor: pointer; color: var(--ink); }
  .main-app { padding: 20px 16px 40px; }
  .hero h1 { font-size: 28px; }
  .doc { padding: 24px 18px; }
  .topbar { padding: 12px 16px; }
  .topbar-link { display: none; }
}
/* ---------- motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes cartPulse { from { box-shadow: 0 0 0 0 rgba(99, 102, 241, .4); } to { box-shadow: 0 0 0 16px rgba(99, 102, 241, 0); } }
@keyframes floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -20px); } }
@keyframes printOut { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -2% 0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.main-app > * { animation: fadeUp .45s ease both; }
.main-app > :nth-child(2) { animation-delay: .05s; }
.main-app > :nth-child(3) { animation-delay: .1s; }
.main-app > :nth-child(4) { animation-delay: .15s; }
.report-grid > .card, .settings-grid > .card { animation: fadeUp .45s ease both; }
.report-grid > .card:nth-child(2), .settings-grid > .card:nth-child(2) { animation-delay: .06s; }
.report-grid > .card:nth-child(3), .settings-grid > .card:nth-child(3) { animation-delay: .12s; }
.report-grid > .card:nth-child(4), .settings-grid > .card:nth-child(4) { animation-delay: .18s; }
.report-grid > .card:nth-child(5), .settings-grid > .card:nth-child(5) { animation-delay: .24s; }

.item-grid .item-card { animation: fadeUp .4s ease both; animation-delay: calc(var(--i, 0) * 24ms); }
.item-card:active { transform: scale(.96); }
.item-card.skel { pointer-events: none; min-height: 78px; border-color: var(--line-2);
  background: linear-gradient(100deg, var(--bg-2) 40%, var(--card) 50%, var(--bg-2) 60%);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; box-shadow: none; }

.sidenav a { transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease; }
.sidenav a:hover { transform: translateX(3px); }
.logo { transition: transform .2s ease; }
.brand:hover .logo { transform: rotate(-4deg) scale(1.05); }

.btn { background-size: 160% 160%; background-position: 0 0; transition: transform .06s ease, box-shadow .15s ease, filter .15s ease, background-position .3s ease; }
.btn:hover { background-position: 90% 0; }
.btn.loading { pointer-events: none; opacity: .85; }
.btn.loading::after { content: ""; width: 15px; height: 15px; flex: 0 0 auto;
  border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; }

.pos-right.pulse { animation: cartPulse .55s ease-out; }
#cart-sum.bump { display: inline-block; animation: bump .3s ease; }
.cart-row { animation: fadeIn .22s ease both; }

.flash { animation: slideDown .35s ease both; transition: opacity .4s ease, transform .4s ease; }
.flash.bye { opacity: 0; transform: translateY(-8px); }

.modal:not([hidden]) { animation: fadeIn .2s ease both; }
.modal:not([hidden]) .modal-box { animation: popIn .28s cubic-bezier(.2, .9, .3, 1.15) both; }
#receipt-modal:not([hidden]) .journal { animation: printOut 1s cubic-bezier(.4, 0, .3, 1) both; }
#receipt-modal:not([hidden]) .receipt-qr, #receipt-modal:not([hidden]) .demo-note { animation: fadeIn .4s ease .75s both; }

.auth-card { animation: popIn .4s ease both; }

/* landing */
.hero { position: relative; }
.hero-blobs { position: absolute; inset: -60px 0 0; pointer-events: none; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob.b1 { width: 380px; height: 380px; left: 8%; top: -20px; background: radial-gradient(circle, #a5b4fc, transparent 65%); animation: floaty 11s ease-in-out infinite; }
.blob.b2 { width: 320px; height: 320px; right: 6%; top: 60px; background: radial-gradient(circle, #d8b4fe, transparent 65%); animation: floaty 14s ease-in-out infinite reverse; }
.hero-badge { animation: fadeUp .5s .05s ease both; }
.hero h1 { animation: fadeUp .6s .14s ease both; }
.hero-sub { animation: fadeUp .6s .24s ease both; }
.hero-cta { animation: fadeUp .6s .34s ease both; }
.js .feature, .js .statusband, .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d, 0s); }
.js .feature.in, .js .statusband.in, .js [data-reveal].in { opacity: 1; transform: none; }
.feature { transition-property: opacity, transform, box-shadow; }
.feature.in:hover { transform: translateY(-3px); }

/* Reduced motion REDUCES motion, it does not delete it. A blanket
   "animation:none !important" left the whole product looking dead for anyone
   whose OS has animation effects off (a Windows default on several power and
   accessibility profiles). What actually causes discomfort is large movement,
   parallax and anything that loops forever, so those are what we drop, while
   gentle opacity fades and colour transitions stay. */
@media (prefers-reduced-motion: reduce) {
  /* no travel, no bounce: movement collapses to a cross-fade */
  @keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }
  @keyframes popIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideDown { from { opacity: 0; } to { opacity: 1; } }
  @keyframes printOut { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bump { from { opacity: 1; } to { opacity: 1; } }

  /* anything that loops forever, drifts, or pulses is removed outright */
  .blob, .item-card.skel, .btn.loading::after, .pos-right.pulse { animation: none !important; }
  .dash-bar { animation-name: fadeIn !important; }

  /* transforms are the vestibular problem, not opacity */
  *, *::before, *::after {
    transition-property: opacity, background-color, border-color, color, box-shadow !important;
    transition-duration: .18s !important;
    animation-duration: .28s !important;
    animation-iteration-count: 1 !important;
  }
  .sidenav a:hover, .feature:hover, .feature.in:hover, .item-card:hover,
  .brand:hover .logo, .item-card:active, .btn:active { transform: none !important; }

  /* nothing may ever stay hidden */
  .js .feature, .js .statusband, .js [data-reveal] { opacity: 1; transform: none; }
}