:root {
  --fire: #c8102e;
  --fire-dark: #870b1f;
  --signal: #ffbd25;
  --charcoal: #151b22;
  --steel: #27313b;
  --paper: #f4f0e9;
  --white: #fffdf9;
  --ink: #17202a;
  --muted: #66717a;
  --line: #d9d6d0;
  --danger: #a10c25;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #18232d; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: #18232d; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle at 10% 88%, rgba(200,16,46,.23) 0, rgba(200,16,46,.07) 24%, transparent 48%),
    radial-gradient(circle at 86% 10%, rgba(64,105,132,.28) 0, transparent 40%),
    linear-gradient(145deg,#101820 0%,#1b2a36 52%,#111b24 100%);
}
body::after { content:"";position:fixed;right:-150px;bottom:-190px;width:560px;height:560px;border:85px solid rgba(255,255,255,.018);border-radius:50%;pointer-events:none; }
a { color: var(--fire-dark); text-underline-offset: 4px; }
button, input { font: inherit; }

.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient-orb {
  position: absolute; right: -12rem; top: -14rem; width: 42rem; height: 42rem; border-radius: 50%;
  border: 7rem solid rgba(200,16,46,.035); transition: transform .4s ease-out;
}
.ember { display: none; }

.topbar {
  height: 84px; padding: 0 clamp(20px,5vw,76px); display: flex; align-items: center; justify-content: space-between;
  background: var(--charcoal); color: white; position: relative; z-index: 10; box-shadow: 0 5px 22px rgba(21,27,34,.16);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(135deg,var(--signal) 0 18px,var(--fire) 18px 36px);
}
.brand { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; text-transform: uppercase; font-weight: 900; letter-spacing: .055em; }
.brand img { width: 50px; height: 57px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0,0,0,.25)); }
.brand small { display: block; margin-top: 3px; color: #b9c1c8; font-size: .6rem; font-weight: 700; letter-spacing: .19em; }
.link-button { border: 1px solid #53606b; border-radius: 7px; background: #202a33; color: white; padding: 10px 16px; font-weight: 700; cursor: pointer; transition: background .2s,border-color .2s,transform .2s; }
.link-button:hover { background: #303c47; border-color: #75818b; transform: translateY(-1px); }

.shell { min-height: calc(100vh - 84px); display: grid; place-items: center; padding: clamp(24px,3.2vw,46px); position: relative; }
.shell::before { display:none; }
.shell:has(.purchase-wizard-card),.shell:has(.purchases-page),.shell:has(.management-card) { place-items:start center;padding-top:30px;padding-bottom:42px; }
.shell:has(.dashboard-card) { place-items:start center;padding-top:30px;padding-bottom:42px; }

.auth-card {
  width: min(100%,1060px); min-height: 660px; display: flex; flex-direction: column; justify-content: center;
  position: relative; margin: 0; padding: clamp(46px,6vw,78px) clamp(34px,6vw,74px) clamp(46px,6vw,78px) calc(50% + clamp(34px,5vw,66px));
  border: 1px solid #d5d0c8; border-radius: 18px; overflow: hidden; background: var(--white);
  box-shadow: 0 28px 70px rgba(37,41,44,.14); animation: panelIn .65s cubic-bezier(.2,.7,.2,1) both;
}
.auth-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; z-index: 0;
  background:
    linear-gradient(145deg,rgba(200,16,46,.95),rgba(130,7,28,.98)),
    var(--fire);
  clip-path: polygon(0 0,100% 0,88% 100%,0 100%);
}
.auth-card::after {
  content: "DHZ\A KRIVÁŇ"; white-space: pre; position: absolute; left: 0; top: 0; bottom: 0; width: 43%; z-index: 1;
  padding-top: 465px; text-align: center;
  background:
    url("/static/icons/dhz-krivan-crest.e416adb6b29f.png") center 70px/310px auto no-repeat,
    repeating-linear-gradient(135deg,transparent 0 23px,rgba(255,255,255,.045) 23px 25px);
  color: white; font: 900 2.5rem/1.02 "Arial Narrow",Arial,sans-serif; letter-spacing: .035em;
  text-shadow: 0 3px 12px rgba(79,0,12,.3); filter: drop-shadow(0 15px 20px rgba(77,0,12,.17));
  animation: badgeIn .8s .1s cubic-bezier(.2,.75,.2,1) both;
}
.auth-card > * { position: relative; z-index: 2; }
.auth-card.wide { width: min(100%,1100px); }
.auth-card.centered { text-align: left; }
@keyframes panelIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes badgeIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--fire); text-transform: uppercase; letter-spacing: .17em; font-size: .68rem; font-weight: 900; }
.eyebrow::before { content: ""; width: 31px; height: 4px; border-radius: 1px; background: var(--signal); box-shadow: 12px 0 0 var(--fire); }
h1 { margin: 13px 0 10px; color: var(--charcoal); font: 900 clamp(2.5rem,3.4vw,3.05rem)/.94 "Arial Narrow",Arial,sans-serif; letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.login-title { font-size: clamp(2.3rem, 2.9vw, 2.65rem); white-space: nowrap; overflow-wrap: normal; }
.muted { color: var(--muted); line-height: 1.6; margin: 0 0 26px; font-size: .92rem; }
.stack { display: flex; flex-direction: column; gap: 8px; }
label { margin: 9px 0 1px; color: #3e4952; text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; font-weight: 900; }
input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #c9c8c4; border-radius: 7px; background: #faf9f6; color: var(--ink); outline: none; transition: border-color .2s,box-shadow .2s,background .2s; }
input:hover { border-color: #9ea4a8; background: white; }
input:focus { border-color: var(--fire); background: white; box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0 22px; border: 0; border-radius: 7px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .2s,box-shadow .2s,background .2s; }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.25),transparent 75%); transform: translateX(-120%); transition: transform .55s; }
.button:hover::before { transform: translateX(120%); }
.button:hover { transform: translateY(-2px); }
.primary { margin-top: 14px; color: white; background: var(--fire); box-shadow: 0 10px 22px rgba(200,16,46,.2); }
.primary:hover { background: #dc1838; box-shadow: 0 14px 28px rgba(200,16,46,.28); }
.secondary { width: 100%; color: var(--charcoal); background: #f3f1ec; border: 1px solid #c9c8c4; }
.secondary:hover { background: white; border-color: #8d959b; }
.divider { display: flex; align-items: center; gap: 13px; color: #92989c; margin: 21px 0; }
.divider::before,.divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.divider span { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; }
.auth-links { display: flex; justify-content: space-between; margin-top: 24px; font-size: .84rem; }
.auth-links.single { justify-content: center; }
.auth-links a { color: var(--fire-dark); font-weight: 700; }
.error,.field-error { color: var(--danger); font-size: .8rem; }
.error { padding: 11px 13px; margin: 12px 0; border-left: 4px solid var(--fire); background: #fff0f1; }
.hint,.status,small { color: #747d83; font-size: .75rem; line-height: 1.5; }
.messages { position: fixed; z-index: 40; top: 100px; right: 24px; }
.message { padding: 13px 18px; border-left: 5px solid var(--signal); border-radius: 5px; background: var(--charcoal); color: white; box-shadow: 0 16px 42px rgba(21,27,34,.24); animation: panelIn .35s ease; }
.success-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 8px; background: var(--fire); color: white; font-size: 1.65rem; }
.key-list { margin: 28px 0; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.key-row small { display: block; margin-top: 4px; }
.danger-link { border: 0; background: none; color: var(--danger); cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.empty { padding: 19px; border: 1px dashed #b8b7b3; border-radius: 7px; color: var(--muted); background: #faf9f6; }

.dashboard-card { width: min(100%,1050px); min-height: 540px; display: flex; align-items: flex-end; justify-content: space-between; gap: 42px; position: relative; overflow: hidden; padding: clamp(36px,6vw,72px); border-radius: 18px; background: var(--charcoal); color: white; box-shadow: 0 28px 70px rgba(21,27,34,.2); animation: panelIn .6s ease both; }
.dashboard-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 11px; background: repeating-linear-gradient(0deg,var(--signal) 0 24px,var(--fire) 24px 48px); }
.dashboard-card::after { content: ""; position: absolute; width: 500px; height: 590px; right: -20px; top: -70px; background: url("/static/icons/dhz-krivan-crest.e416adb6b29f.png") center/contain no-repeat; opacity: .16; transform: rotate(4deg); }
.dashboard-card > * { position: relative; z-index: 1; }
.dashboard-card h1 { color: white; }
.dashboard-card .muted { color: #b9c1c8; }
.dashboard-card .eyebrow { color: var(--signal); }
.dashboard-card .button { width: auto; min-width: 250px; color: white; background: var(--fire); border: 0; }
.dashboard-actions { display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.user-nav { display: flex; align-items: center; gap: 13px; }
.user-nav > a { color: #eef1f3; font-size: .8rem; font-weight: 800; text-decoration: none; }
.role-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.role-basic { color: #34414a; background: #e4e7e8; }
.role-profi { color: #634600; background: #ffe29a; }
.role-admin { color: white; background: var(--fire); }
.management-card { width: min(100%,1120px); padding: clamp(28px,5vw,56px); border: 1px solid #d5d0c8; border-radius: 18px; background: var(--white); box-shadow: 0 28px 70px rgba(37,41,44,.14); animation: panelIn .55s ease both; }
.management-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding-bottom: 30px; }
.management-heading h1 { margin-bottom: 10px; }
.management-heading .muted { max-width: 650px; margin-bottom: 0; }
.management-heading > a { white-space: nowrap; font-weight: 800; }
.user-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.user-row { display: grid; grid-template-columns: minmax(210px,1.3fr) minmax(120px,.6fr) minmax(280px,1fr); align-items: center; gap: 24px; min-height: 78px; padding: 14px 20px; border-top: 1px solid var(--line); }
.user-row:first-child { border-top: 0; }
.user-row-head { min-height: 44px; color: #707980; background: #eceae5; text-transform: uppercase; letter-spacing: .08em; font-size: .65rem; font-weight: 900; }
.user-row small { display: block; margin-top: 4px; }
.role-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.role-form select { min-height: 43px; padding: 0 12px; border: 1px solid #c9c8c4; border-radius: 7px; background: white; color: var(--ink); font: inherit; }
.role-form .button { min-height: 43px; margin: 0; padding: 0 17px; box-shadow: none; }
.self-label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.purchase-wizard-card { width: min(100%,1100px); min-height: 630px; display: grid; grid-template-columns: 34% 66%; overflow: hidden; border: 1px solid #d1d5d6; border-radius: 20px; background: var(--white); box-shadow: 0 24px 65px rgba(37,41,44,.13); animation: panelIn .55s ease both; }
.wizard-rail { padding: clamp(34px,5vw,58px); color: white; background: linear-gradient(150deg,#202a33,#11171d); position: relative; overflow: hidden; }
.wizard-rail::before { content:""; position:absolute; width:330px;height:390px;right:-130px;bottom:-110px;background:url("/static/icons/dhz-krivan-crest.e416adb6b29f.png") center/contain no-repeat;opacity:.08;transform:rotate(8deg); }
.wizard-rail::after { content:""; position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(135deg,var(--signal) 0 22px,var(--fire) 22px 44px); }
.wizard-rail > * { position:relative;z-index:1; }
.wizard-rail .eyebrow { color:var(--signal); }
.wizard-rail h1 { color:white;font-size:clamp(2.45rem,4vw,3.5rem);margin-top:18px; }
.wizard-rail > p { color:#aeb7be;line-height:1.6;font-size:.88rem; }
.wizard-rail > a { display:inline-block;color:white;margin-top:28px;font-size:.8rem;font-weight:800; }
.wizard-progress { list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0; }
.wizard-progress li { min-height:64px;display:flex;align-items:center;gap:16px;position:relative;color:#7f8a93;font-size:.77rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;transition:color .25s; }
.wizard-progress li:not(:last-child)::after { content:"";position:absolute;left:18px;top:48px;width:2px;height:33px;background:#3c4650;transition:background .25s; }
.wizard-progress span { width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid #4a5560;border-radius:50%;font-size:.65rem;transition:.25s; }
.wizard-progress li.active { color:white; }
.wizard-progress li.active span { color:var(--charcoal);border-color:var(--signal);background:var(--signal);box-shadow:0 0 0 5px rgba(255,189,37,.1); }
.wizard-progress li.done { color:#c5ccd1; }
.wizard-progress li.done span { color:white;border-color:var(--fire);background:var(--fire); }
.wizard-progress li.done::after { background:var(--fire); }
.wizard-form { display:grid;align-items:center;padding:clamp(36px,5vw,72px);position:relative;overflow:hidden;background:linear-gradient(145deg,#fffdf9,#faf8f3); }
.wizard-step { width:100%;animation:stepIn .38s cubic-bezier(.2,.7,.2,1) both; }
.wizard-step[hidden] { display:none; }
@keyframes stepIn { from { opacity:0;transform:translateX(calc(var(--direction,1) * 28px)); } to { opacity:1;transform:none; } }
.step-number { color:var(--fire);font-size:.67rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase; }
.wizard-step h2 { margin:13px 0 10px;color:var(--charcoal);font:900 clamp(2.15rem,3.2vw,3.15rem)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:-.035em;text-transform:uppercase; }
.wizard-step > p { color:var(--muted);line-height:1.65;margin:0 0 32px;max-width:560px;font-size:.94rem; }
.wizard-step select,.wizard-step textarea { width:100%;padding:14px 15px;border:1px solid #c9c8c4;border-radius:7px;background:#faf9f6;color:var(--ink);font:inherit;outline:none;resize:vertical;transition:.2s; }
.wizard-step select { min-height:55px; }
.wizard-step textarea:focus,.wizard-step select:focus { border-color:var(--fire);background:white;box-shadow:0 0 0 4px rgba(200,16,46,.1); }
.wizard-step > .button { margin-top:30px;min-width:180px; }
.wizard-controls { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px; }
.wizard-controls .button { margin:0; }
.wizard-back { border:0;background:none;color:var(--muted);font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:4px; }
.select-shell { position:relative;margin-top:3px; }
.select-shell select { appearance:none;-webkit-appearance:none;width:100%;min-height:68px;padding:0 62px 0 62px;border:1px solid #c9c8c4;border-radius:11px;background:white;color:var(--charcoal);font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 7px 22px rgba(36,42,47,.055);transition:border-color .2s,box-shadow .2s,transform .2s; }
.select-shell select:hover { border-color:#9ca3a7;transform:translateY(-1px);box-shadow:0 11px 28px rgba(36,42,47,.09); }
.select-shell select:focus { border-color:var(--fire);box-shadow:0 0 0 4px rgba(200,16,46,.09),0 12px 30px rgba(36,42,47,.08); }
.select-icon { position:absolute;z-index:1;left:13px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border-radius:8px;color:white;background:var(--fire);font-size:.85rem;font-weight:900;pointer-events:none; }
.select-icon.money { color:var(--charcoal);background:var(--signal);font-size:1rem; }
.select-arrow { position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid #59636a;border-bottom:2px solid #59636a;transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .2s; }
.select-shell:focus-within .select-arrow { transform:translateY(-30%) rotate(225deg); }
.selection-hint { margin:13px 0 0!important;color:#8a9297!important;font-size:.73rem!important;font-weight:700; }
.textarea-shell { position:relative;margin-top:3px; }
.textarea-shell textarea { min-height:180px;padding:20px 20px 42px;border-radius:11px;font-size:1rem;line-height:1.6;box-shadow:0 7px 22px rgba(36,42,47,.045); }
.character-count { position:absolute;right:16px;bottom:13px;color:#8b9398;font-size:.69rem;font-weight:700;letter-spacing:.04em;pointer-events:none; }
.character-count b { color:var(--fire); }
.balance-display { display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:17px 18px;border-radius:7px;background:#edf0f1;border-left:5px solid var(--signal); }
.balance-display span { color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.balance-display strong { color:var(--charcoal);font-size:1.35rem; }
.money-input { position:relative; }
.money-input input { padding-right:55px;font-size:1.35rem;font-weight:800; }
.money-input span { position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:900;color:var(--fire); }
.fund-check { margin-top:15px;padding:14px 16px;border-radius:7px;color:var(--muted);background:#f0efeb;border-left:4px solid #aeb4b7;font-size:.82rem;font-weight:700; }
.fund-check.valid { color:#175c3a;background:#e6f5ec;border-color:#26975f; }
.fund-check.invalid { color:#8a0a20;background:#fff0f2;border-color:var(--fire); }
.purchase-summary { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px; }
.purchase-summary > div { padding:13px 15px;border:1px solid #dedbd5;border-radius:8px;background:white; }
.purchase-summary span { display:block;margin-bottom:4px;color:#858d92;font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }
.purchase-summary strong { display:block;color:var(--charcoal);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.button:disabled { cursor:not-allowed;transform:none!important;background:#aeb2b4;box-shadow:none;opacity:.7; }
.purchases-page { width:min(100%,1180px); }
.purchases-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px; }
.purchases-heading h1 { margin-bottom:8px;color:white; }
.purchases-heading .muted { margin:0;color:#b8c2ca; }
.purchases-heading .button { flex:none;margin:0; }
.purchase-list { display:grid;gap:12px; }
.purchase-item { display:grid;grid-template-columns:56px minmax(250px,1.6fr) minmax(145px,.7fr) 130px 90px;align-items:center;gap:20px;min-height:110px;padding:18px 24px;border:1px solid #d7d4cd;border-radius:10px;background:var(--white);box-shadow:0 8px 24px rgba(37,41,44,.06);animation:panelIn .45s ease both;transition:transform .2s,box-shadow .2s,border-color .2s; }
.purchase-item:hover { transform:translateY(-2px);border-color:#bbb8b2;box-shadow:0 14px 32px rgba(37,41,44,.1); }
.purchase-icon { width:50px;height:50px;display:grid;place-items:center;border-radius:8px;color:white;background:var(--charcoal);font-weight:900;font-size:.72rem;letter-spacing:.08em;border-bottom:5px solid var(--signal); }
.purchase-status { color:var(--fire);font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.purchase-status.status-awaiting { color:#9a6800; }
.purchase-main h2 { margin:5px 0;color:var(--charcoal);font-size:1.05rem; }
.purchase-main p { margin:0;color:var(--muted);font-size:.72rem; }
.purchase-source span { display:block;font-weight:800;font-size:.85rem; }
.purchase-source small { display:block;margin-top:3px; }
.purchase-price { color:var(--charcoal);font-size:1.05rem;text-align:right;white-space:nowrap; }
.purchase-item time { color:var(--muted);font-size:.72rem;text-align:right; }
.purchase-tail { display:flex;align-items:flex-end;flex-direction:column;gap:9px; }
.receipt-camera { width:54px;height:54px;display:grid;place-items:center;padding:6px 4px 5px;border:0;border-radius:12px;color:white;background:linear-gradient(145deg,var(--fire),#9f0c26);box-shadow:0 9px 18px rgba(200,16,46,.22);cursor:pointer;transition:transform .2s,box-shadow .2s; }
.receipt-camera:hover { transform:translateY(-3px) rotate(-2deg);box-shadow:0 13px 25px rgba(200,16,46,.32); }
.receipt-camera small { color:white;font-size:.55rem;font-weight:900;line-height:1; }
.camera-glyph { width:23px;height:16px;display:block;position:relative;border:2px solid white;border-radius:4px; }
.camera-glyph::before { content:"";position:absolute;left:6px;top:3px;width:7px;height:7px;border:2px solid white;border-radius:50%; }
.camera-glyph::after { content:"";position:absolute;left:3px;top:-6px;width:9px;height:5px;border-radius:3px 3px 0 0;background:white; }
.receipt-ready { display:flex;align-items:center;gap:6px;color:#9a6800;font-size:.67rem;font-weight:900;text-decoration:none;text-align:right; }
.receipt-ready span { width:24px;height:24px;display:grid;place-items:center;flex:none;border-radius:50%;color:#523800;background:var(--signal); }
.status-action { width:max-content;text-decoration:none;transition:transform .2s,box-shadow .2s; }
.status-action:hover { transform:translateY(-2px);box-shadow:0 7px 18px rgba(255,190,30,.18); }
.status-action b { margin-left:5px;font-size:.9rem; }
.approval-page { width:min(1180px,100%);margin:0 auto; }
.approval-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px; }
.approval-back { color:#dbe3e8;font-size:.75rem;font-weight:800;text-decoration:none; }
.approval-layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#101920;box-shadow:0 28px 80px rgba(0,0,0,.34); }
.receipt-viewer { min-width:0;background:#080e13; }
.receipt-viewer-head { height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.1);color:#dbe3e8;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.receipt-viewer-head a { color:var(--signal);font-size:.65rem;text-decoration:none; }
.receipt-canvas { height:min(68vh,720px);display:grid;place-items:center;overflow:auto;padding:22px;background:radial-gradient(circle,#25313a,#080e13 70%); }
.receipt-canvas img { max-width:100%;max-height:100%;display:block;border-radius:5px;background:white;box-shadow:0 18px 55px rgba(0,0,0,.55);object-fit:contain; }
.approval-summary { padding:38px 30px;color:white;background:linear-gradient(155deg,#1b2832,#111a21); }
.approval-summary h1 { margin:8px 0 27px;font:900 clamp(1.8rem,3vw,2.7rem)/.98 "Arial Narrow",Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere; }
.approval-summary dl { margin:0; }
.approval-summary dl div { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:15px 0;border-top:1px solid rgba(255,255,255,.1); }
.approval-summary dt { color:#91a0aa;font-size:.68rem; }
.approval-summary dd { margin:0;color:white;font-size:.75rem;font-weight:900;text-align:right; }
.approval-note { margin:23px 0;color:#9eabb4;font-size:.72rem;line-height:1.55; }
.approval-confirm { width:100%;justify-content:center; }
.approval-confirm span { font-size:1rem; }
.purchase-empty { padding:70px 25px;text-align:center;border:1px dashed #bbb8b2;border-radius:12px;background:rgba(255,253,249,.72); }
.purchase-empty > span { width:60px;height:60px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;color:white;background:var(--fire);font-size:1.5rem; }
.purchase-empty h2 { margin:0 0 8px;text-transform:uppercase; }
.purchase-empty p { color:var(--muted); }
.purchase-empty .button { margin-top:12px; }
.camera-open { overflow:hidden; }
.camera-sheet { position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;isolation:isolate; }
.camera-sheet[hidden] { display:none; }
.camera-sheet [hidden] { display:none!important; }
.camera-backdrop { position:absolute;inset:0;border:0;background:radial-gradient(circle at 50% 35%,rgba(110,20,31,.3),transparent 38%),rgba(2,7,11,.88);backdrop-filter:blur(14px);animation:cameraFade .25s ease both; }
.camera-panel { width:min(100%,510px);max-height:calc(100vh - 40px);overflow:auto;position:relative;border:1px solid rgba(255,255,255,.12);border-radius:26px;color:white;background:linear-gradient(155deg,#1a252e,#0b1218 78%);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,190,30,.05) inset;animation:cameraUp .38s cubic-bezier(.2,.75,.2,1) both;transition:width .35s ease; }
.camera-panel:has(.camera-stage[data-camera-state="loading"]),.camera-panel:has(.camera-stage[data-camera-state="live"]),.camera-panel:has(.camera-stage[data-camera-state="capturing"]),.camera-panel:has(.camera-stage[data-camera-state="review"]),.camera-panel:has(.camera-stage[data-camera-state="uploading"]),.camera-panel:has(.camera-stage[data-camera-state="success"]) { width:min(100%,820px); }
@keyframes cameraFade { from{opacity:0}to{opacity:1} }
@keyframes cameraUp { from{opacity:0;transform:translateY(35px) scale(.98)}to{opacity:1;transform:none} }
.camera-panel > header { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:29px 30px 22px; }
.camera-kicker { color:var(--signal);font-size:.62rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase; }
.camera-panel h2 { margin:5px 0 3px;font:900 1.75rem/1 "Arial Narrow",Arial,sans-serif;text-transform:uppercase; }
.camera-panel header p { margin:0;color:#99a6af;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px; }
.camera-close { width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:#dce3e7;background:rgba(255,255,255,.06);font-size:1.5rem;cursor:pointer;transition:transform .2s,background .2s; }
.camera-close:hover { transform:rotate(6deg);background:rgba(255,255,255,.12); }
.camera-stage { aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 28px;border:1px solid #3c4953;border-radius:15px;background:radial-gradient(circle at center,#283640,#0a1117 72%); }
.camera-stage[data-camera-state="idle"] { display:none; }
.camera-stage video,.camera-stage canvas,.camera-stage > img { width:100%;height:100%;object-fit:contain;background:#080d11; }
.camera-idle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center; }
.camera-idle strong { margin-top:18px;font-size:1.05rem; }
.camera-idle p { max-width:410px;margin:7px 0 0;color:#9ba7af;font-size:.8rem;line-height:1.55; }
.camera-large-icon { width:64px;height:45px;position:relative;border:3px solid #dce2e5;border-radius:10px; }
.camera-large-icon::before { content:"";position:absolute;left:21px;top:10px;width:17px;height:17px;border:3px solid var(--signal);border-radius:50%; }
.camera-large-icon::after { content:"";position:absolute;left:10px;top:-11px;width:25px;height:10px;border-radius:5px 5px 0 0;background:#dce2e5; }
.camera-stage[data-camera-state="loading"] .camera-idle strong::after { content:"";display:inline-block;width:13px;height:13px;margin-left:9px;border:2px solid #667580;border-top-color:var(--signal);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.camera-stage[data-camera-state="live"] .camera-idle,.camera-stage[data-camera-state="review"] .camera-idle,.camera-stage[data-camera-state="capturing"] .camera-idle,.camera-stage[data-camera-state="uploading"] .camera-idle,.camera-stage[data-camera-state="success"] .camera-idle { display:none; }
.camera-frame { display:none;position:absolute;inset:8%;pointer-events:none; }
.camera-stage[data-camera-state="live"] .camera-frame,.camera-stage[data-camera-state="capturing"] .camera-frame { display:block; }
.camera-frame i { position:absolute;width:42px;height:42px;border-color:var(--signal);border-style:solid;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.camera-frame i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px}.camera-frame i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0}.camera-frame i:nth-child(3){right:0;bottom:0;border-width:0 3px 3px 0}.camera-frame i:nth-child(4){left:0;bottom:0;border-width:0 0 3px 3px}
.camera-live-label { display:none;position:absolute;left:22px;top:19px;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(5,10,14,.7);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.camera-stage[data-camera-state="live"] .camera-live-label,.camera-stage[data-camera-state="capturing"] .camera-live-label { display:flex; }
.camera-live-label span { width:8px;height:8px;border-radius:50%;background:#ff334f;box-shadow:0 0 0 4px rgba(255,51,79,.2);animation:pulse 1.5s infinite; }
@keyframes pulse { 50%{box-shadow:0 0 0 8px rgba(255,51,79,0)} }
.camera-flash { position:absolute;inset:0;pointer-events:none;background:white;opacity:0; }
.camera-flash.active { animation:flash .32s ease; }
@keyframes flash { 35%{opacity:.9}100%{opacity:0} }
.camera-stage[data-camera-state="uploading"]::after { content:"Ukladám doklad…";position:absolute;inset:0;display:grid;place-items:center;color:white;background:rgba(7,14,19,.78);font-weight:900;letter-spacing:.04em; }
.camera-stage[data-camera-state="success"]::after { content:"✓  Doklad uložený";position:absolute;inset:0;display:grid;place-items:center;color:#12251a;background:rgba(125,226,167,.91);font-size:1.3rem;font-weight:900; }
.camera-status:empty { display:none; }
.camera-status { min-height:20px;margin:14px 28px 0;color:#aeb8bf;font-size:.76rem;text-align:center; }
.camera-actions { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:15px 28px 27px; }
.camera-actions .button { min-width:180px;margin:0; }
.shutter-dot { width:17px;height:17px;margin-right:9px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.camera-choice { width:100%;display:grid;grid-template-columns:1fr;gap:11px; }
.camera-option { min-height:82px;display:grid;grid-template-columns:52px 1fr 24px;grid-template-rows:auto auto;column-gap:14px;align-content:center;padding:14px 17px;border:1px solid rgba(255,255,255,.11);border-radius:17px;color:white;background:rgba(255,255,255,.055);text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,background .2s; }
.camera-option::after { content:"›";grid-column:3;grid-row:1/3;align-self:center;color:#71808a;font-size:1.8rem;font-weight:300; }
.camera-option:hover { transform:translateX(3px);border-color:rgba(255,190,30,.42);background:rgba(255,255,255,.085); }
.camera-option-primary { border-color:rgba(225,41,64,.38);background:linear-gradient(100deg,rgba(200,16,46,.24),rgba(255,190,30,.06)); }
.camera-option strong { align-self:end;font-size:.84rem; }
.camera-option small { align-self:start;margin-top:3px;color:#9eabb4;font-size:.66rem; }
.camera-option-icon { grid-row:1/3;width:52px;height:52px;display:grid;place-items:center;position:relative;border-radius:15px;background:#080f14;box-shadow:0 8px 20px rgba(0,0,0,.22); }
.camera-option-lens::before { content:"";width:20px;height:15px;border:2px solid white;border-radius:4px;box-shadow:0 -5px 0 -3px white; }
.camera-option-lens::after { content:"";position:absolute;width:7px;height:7px;border:2px solid var(--signal);border-radius:50%; }
.camera-option-gallery::before { content:"";width:20px;height:17px;border:2px solid white;border-radius:3px;background:linear-gradient(145deg,transparent 48%,var(--signal) 49% 64%,transparent 65%); }
.camera-gallery-link { padding:10px;border:0;color:#b8c2c9;background:transparent;font-size:.72rem;font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer; }

@media (max-width: 860px) {
  .auth-card,.auth-card.wide { min-height: 610px; padding-left: calc(43% + 35px); padding-right: 35px; }
  .auth-card::after { width: 39%; background-size: 240px auto; background-position: center 100px; padding-top: 410px; font-size: 2rem; }
}
@media (max-width: 680px) {
  .topbar { height: 72px; padding: 0 17px; }
  .topbar::after { height: 4px; }
  .brand img { width: 41px; height: 47px; }
  .shell { min-height: calc(100vh - 72px); padding: 128px 13px 24px; align-items: start; }
  .auth-card,.auth-card.wide { min-height: 0; width: min(100%,520px); overflow: visible; padding: 34px 22px 27px; border-radius: 12px; }
  .auth-card::before { left: -1px; right: -1px; top: -100px; bottom: auto; width: auto; height: 112px; clip-path: polygon(0 0,100% 0,95% 100%,5% 100%); border-radius: 12px 12px 0 0; }
  .auth-card::after { left: 0; top: -108px; bottom: auto; width: 100%; height: 110px; padding: 37px 22px 0 127px; background-size: 90px auto; background-position: 42px center; text-align: left; font-size: 1.55rem; line-height: .95; animation: badgeIn .6s ease both; filter: none; }
  .auth-card h1 { font-size: clamp(2.35rem,11vw,3.05rem); overflow-wrap: anywhere; }
  .messages { top: 84px; left: 13px; right: 13px; }
  .dashboard-card { min-height: 520px; align-items: flex-start; flex-direction: column; justify-content: flex-end; padding: 31px 25px; }
  .dashboard-card::after { width: 350px; height: 410px; right: -80px; top: -45px; }
  .dashboard-card .button { width: 100%; }
  .user-nav > a,.user-nav .role-chip { display: none; }
  .management-card { padding: 26px 18px; border-radius: 12px; }
  .management-heading { flex-direction: column-reverse; gap: 18px; }
  .user-row-head { display: none; }
  .user-row { grid-template-columns: 1fr; gap: 11px; padding: 20px 16px; }
  .role-form { grid-template-columns: 1fr; }
  .purchase-wizard-card { grid-template-columns:1fr;min-height:0;border-radius:12px; }
  .wizard-rail { padding:30px 23px 20px; }
  .wizard-rail h1 { font-size:2.55rem; }
  .wizard-rail > p,.wizard-progress { display:none; }
  .wizard-rail > a { margin-top:10px; }
  .wizard-form { min-height:520px;padding:38px 23px;align-items:start; }
  .wizard-step h2 { font-size:2.2rem; }
  .wizard-controls { align-items:stretch;flex-direction:column-reverse; }
  .wizard-controls .button { width:100%; }
  .select-shell select { min-height:64px;padding-left:58px; }
  .textarea-shell textarea { min-height:165px; }
  .purchase-summary { grid-template-columns:1fr; }
  .purchases-heading { align-items:stretch;flex-direction:column; }
  .purchases-heading .button { width:100%; }
  .purchase-item { grid-template-columns:50px 1fr;gap:14px;padding:18px; }
  .purchase-main { grid-column:2; }
  .purchase-source { grid-column:2; }
  .purchase-price { grid-column:2;text-align:left;font-size:1.25rem; }
  .purchase-item time { position:absolute;right:31px;margin-top:-72px; }
  .purchase-tail { grid-column:2;align-items:flex-start;flex-direction:row;justify-content:space-between; }
  .purchase-tail time { position:static;margin:0; }
  .camera-sheet { place-items:end center;padding:0; }
  .camera-panel { width:100%;max-height:94vh;border-radius:22px 22px 0 0;border-bottom:0; }
  .camera-panel > header { padding:20px 18px 16px; }
  .camera-stage { aspect-ratio:3/4;margin:0 14px; }
  .camera-status { margin-left:18px;margin-right:18px; }
  .camera-actions { padding:12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .camera-actions .button { width:100%; }
  .camera-choice { grid-template-columns:1fr; }
  .camera-option { min-height:76px; }
  .approval-heading { align-items:flex-start;flex-direction:column; }
  .approval-layout { grid-template-columns:1fr;border-radius:15px; }
  .receipt-canvas { height:55vh;padding:12px; }
  .approval-summary { padding:28px 20px calc(28px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) { .brand small { display: none; } .auth-card h1 { font-size: 2.2rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } }