:root{
  --bg:#070707;--panel:#0d0d0d;--panel2:#121212;--panel3:#171717;--paper:#f2efe7;--muted:rgba(242,239,231,.58);--faint:rgba(242,239,231,.34);--line:rgba(242,239,231,.11);--line2:rgba(242,239,231,.22);--accent:#9d978a;--ok:#7f9e82;--warn:#b89a65;--danger:#bd6b63;--blue:#7f91a8;--sidebar:220px;--drawer:650px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45}button,input,select,textarea{font:inherit}.hidden{display:none!important}button{color:inherit}.eyebrow{margin:0;color:var(--faint);font-size:10px;letter-spacing:.15em;text-transform:uppercase}.muted{color:var(--muted)}

.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 30%,#151515 0,#070707 48%)}.login-card{width:min(390px,100%);border:1px solid var(--line2);padding:30px;background:rgba(7,7,7,.92);box-shadow:0 24px 90px rgba(0,0,0,.45)}.login-card h1{font-size:28px;margin:4px 0 10px;letter-spacing:-.03em}.login-card .muted{font-size:12px;line-height:1.6;margin:0 0 22px}.login-card label{display:block;margin:14px 0 6px;color:var(--faint);font-size:10px;letter-spacing:.09em;text-transform:uppercase}.login-card input{width:100%;border:1px solid var(--line2);background:#090909;color:var(--paper);padding:11px 12px;outline:0}.login-card input:focus{border-color:var(--accent)}.login-submit{width:100%;margin-top:20px}.form-error{font-size:12px;color:var(--danger);margin:12px 0 0}.login-security{font-size:10px;color:var(--faint);line-height:1.5;margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}

.btn,.icon-btn,.text-btn,.chip,.nav-item{appearance:none;border:0;background:transparent;cursor:pointer}.btn{border:1px solid var(--line2);padding:9px 12px;font-size:11px;letter-spacing:.04em}.btn:hover{border-color:var(--paper)}.btn--solid{background:var(--paper);color:#070707;border-color:var(--paper);font-weight:700}.btn--danger{border-color:rgba(189,107,99,.65);color:#e2a19a}.btn--small{padding:6px 9px;font-size:10px}.icon-btn{width:36px;height:36px;border:1px solid var(--line2);display:grid;place-items:center;font-size:19px}.icon-btn:hover{border-color:var(--paper)}.text-btn{color:var(--muted);font-size:11px;padding:0}.text-btn:hover{color:var(--paper)}

.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#080808;z-index:20}.sidebar__brand{padding:22px 18px 20px;border-bottom:1px solid var(--line)}.sidebar__brand span{display:block;font-weight:800;font-size:13px;letter-spacing:.04em}.sidebar__brand small{display:block;color:var(--faint);font-size:9px;letter-spacing:.16em;margin-top:2px}.sidebar__nav{padding:14px 10px;display:flex;flex-direction:column;gap:3px;flex:1}.nav-item{height:39px;padding:0 10px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;text-align:left;color:var(--muted);font-size:12px;border:1px solid transparent}.nav-item:hover{background:var(--panel2);color:var(--paper)}.nav-item.is-active{border-color:var(--line2);background:var(--panel);color:var(--paper)}.nav-icon{font-size:15px;color:var(--faint)}.nav-badge{font-style:normal;font-size:9px;min-width:18px;height:18px;padding:0 5px;border:1px solid var(--line2);display:grid;place-items:center;border-radius:20px}.nav-rule{height:1px;background:var(--line);margin:10px 8px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint)}.status-dot.is-ok{background:var(--ok)}.status-dot.is-warn{background:var(--warn)}.status-dot.is-bad{background:var(--danger)}.sidebar__foot{border-top:1px solid var(--line);padding:15px 18px;display:flex;flex-direction:column;gap:10px}.connection-state{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:10px}

.workspace{min-width:0}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;background:rgba(7,7,7,.94);backdrop-filter:blur(10px);z-index:15}.topbar h1{font-size:20px;letter-spacing:-.02em;margin:3px 0 0}.topbar__actions{display:flex;align-items:center;gap:10px}.last-sync{font-size:10px;color:var(--faint)}.main-content{max-width:1500px;margin:0 auto;padding:26px 28px 70px}

.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.section-head h2{font-size:15px;margin:0}.section-head p{margin:4px 0 0;color:var(--faint);font-size:11px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.control{background:#090909;color:var(--paper);border:1px solid var(--line2);padding:8px 9px;font-size:11px;min-height:34px;outline:0}.control:focus{border-color:var(--accent)}.control--search{min-width:230px}.control option{background:#0b0b0b}.page-error{border:1px solid rgba(189,107,99,.5);background:rgba(189,107,99,.07);color:#e1aaa4;padding:12px 14px;font-size:12px;margin:0 0 16px}.empty-state{border:1px dashed var(--line2);padding:54px 20px;text-align:center;color:var(--faint);font-size:12px}

.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}.metric{border:1px solid var(--line);background:var(--panel);padding:15px;min-height:105px;display:flex;flex-direction:column}.metric__label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.metric__value{font-size:27px;font-weight:700;line-height:1.1;margin-top:12px;letter-spacing:-.04em}.metric__sub{font-size:10px;color:var(--muted);margin-top:auto;padding-top:8px}.metric--warn{border-color:rgba(184,154,101,.35)}.metric--danger{border-color:rgba(189,107,99,.45)}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:12px}.panel{border:1px solid var(--line);background:var(--panel);padding:16px}.panel + .panel{margin-top:12px}.panel__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.panel__head h3{font-size:12px;margin:0}.panel__head span{font-size:10px;color:var(--faint)}.panel--flush{padding:0}.panel--flush .panel__head{padding:15px 15px 0}

.chart{height:190px;display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--line);padding-top:14px}.chart__day{min-width:0;flex:1;height:100%;display:flex;align-items:flex-end;gap:2px;position:relative}.chart__bar{flex:1;min-height:2px;background:var(--accent);opacity:.72}.chart__bar--orders{background:var(--blue);opacity:.8}.chart__bar--rentals{background:var(--paper);opacity:.35}.chart__day:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#202020;border:1px solid var(--line2);white-space:nowrap;padding:5px 7px;font-size:9px;z-index:2}.chart-legend{display:flex;gap:14px;margin-top:10px;color:var(--faint);font-size:9px}.chart-legend span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;background:var(--accent)}.chart-legend .orders:before{background:var(--blue)}.chart-legend .rentals:before{background:rgba(242,239,231,.35)}

.list{display:flex;flex-direction:column}.list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}.list-row:first-child{border-top:0}.list-row strong{display:block;font-size:11px}.list-row span{display:block;color:var(--faint);font-size:9px;margin-top:2px}.list-row__value{text-align:right;font-size:11px}.ops-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:11px 0}.ops-alert:first-child{border-top:0}.ops-alert span{font-size:10px;color:var(--muted)}.ops-alert strong{font-size:13px}

.data-table-wrap{border:1px solid var(--line);overflow:auto;background:var(--panel)}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th{text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:#0d0d0d;z-index:2}.data-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:11px;vertical-align:middle}.data-table tbody tr{cursor:pointer}.data-table tbody tr:hover{background:var(--panel2)}.data-table tbody tr:last-child td{border-bottom:0}.cell-primary{font-weight:650}.cell-secondary{display:block;color:var(--faint);font-size:9px;margin-top:2px}.cell-money{text-align:right;font-variant-numeric:tabular-nums}.pager{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--faint);font-size:10px}.pager__actions{display:flex;gap:6px}

.status{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);padding:3px 7px;font-size:9px;letter-spacing:.04em;white-space:nowrap}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint)}.status--paid:before,.status--completed:before,.status--delivered:before,.status--returned:before,.status--active:before,.status--available:before{background:var(--ok)}.status--payment_pending:before,.status--reserved:before,.status--preparing:before,.status--confirmed:before,.status--shipped:before,.status--return_due:before{background:var(--warn)}.status--cancelled:before,.status--failed:before,.status--exception:before{background:var(--danger)}.status--refunded:before{background:var(--blue)}

.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px}.inventory-card{border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:76px minmax(0,1fr);min-height:100px;overflow:hidden}.inventory-card img{width:76px;height:100%;object-fit:cover;background:#141414}.inventory-card__body{padding:10px;min-width:0}.inventory-card__brand{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}.inventory-card__title{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 7px}.inventory-card__meta{display:flex;justify-content:space-between;gap:5px;align-items:end}.inventory-card__meta span{font-size:9px;color:var(--faint)}.inventory-card__meta strong{font-size:11px}

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}.detail-drawer{position:absolute;right:0;top:0;bottom:0;width:min(var(--drawer),100%);background:#0a0a0a;border-left:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.4)}.drawer-head{min-height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:16px 20px}.drawer-head h2{margin:3px 0 0;font-size:18px}.drawer-body{overflow:auto;padding:18px 20px 50px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}.detail-field{border:1px solid var(--line);padding:10px;min-height:60px}.detail-field label{display:block;color:var(--faint);font-size:8px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}.detail-field strong,.detail-field span{font-size:11px;word-break:break-word}.detail-section{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.detail-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}.detail-actions{display:flex;gap:7px;flex-wrap:wrap}.detail-item{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--line);padding:10px;margin-top:6px}.detail-item strong{font-size:11px}.detail-item span{font-size:9px;color:var(--faint)}.note-form{display:grid;grid-template-columns:1fr auto;gap:7px}.note-form textarea{min-height:70px;resize:vertical;background:#090909;border:1px solid var(--line2);color:var(--paper);padding:9px;outline:0}.note{border-left:2px solid var(--accent);padding:8px 10px;background:var(--panel);margin-top:7px}.note p{margin:0;font-size:11px;white-space:pre-wrap}.note time{display:block;color:var(--faint);font-size:8px;margin-top:4px}.timeline{position:relative}.timeline-event{position:relative;padding:8px 0 8px 18px;border-left:1px solid var(--line)}.timeline-event:before{content:"";position:absolute;left:-3px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.timeline-event strong{font-size:10px}.timeline-event span{display:block;color:var(--faint);font-size:8px;margin-top:2px}.json-block{font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;background:#050505;border:1px solid var(--line);padding:9px;color:var(--muted)}

.system-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.system-card{border:1px solid var(--line);padding:13px;background:var(--panel)}.system-card h3{font-size:10px;margin:0 0 10px}.config-line{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:7px 0;color:var(--muted);font-size:10px}.config-line:first-of-type{border-top:0}.config-value{display:flex;align-items:center;gap:6px;color:var(--paper)}

.toast{position:fixed;right:18px;bottom:18px;z-index:90;max-width:330px;background:var(--paper);color:#080808;padding:11px 14px;font-size:11px;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.35)}.loading{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:11px;padding:35px 0}.loading:before{content:"";width:11px;height:11px;border:1px solid var(--faint);border-top-color:var(--paper);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1050px){:root{--sidebar:190px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.control--search{min-width:180px}}
@media(max-width:760px){.app-shell{display:block}.sidebar{height:auto;position:sticky;top:0;border-right:0;border-bottom:1px solid var(--line)}.sidebar__brand{display:none}.sidebar__nav{display:flex;flex-direction:row;overflow-x:auto;padding:7px}.nav-item{flex:0 0 auto;grid-template-columns:18px auto auto;height:36px;padding:0 9px}.nav-rule{display:none}.sidebar__foot{display:none}.topbar{top:51px;height:69px;padding:0 15px}.topbar h1{font-size:17px}.main-content{padding:18px 14px 60px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.metric{min-height:92px;padding:12px}.metric__value{font-size:22px}.section-head{flex-direction:column}.toolbar{width:100%}.control{flex:1}.control--search{min-width:100%;flex-basis:100%}.detail-grid{grid-template-columns:1fr}.detail-drawer{width:100%}.drawer-body{padding:15px}.drawer-head{min-height:68px}.last-sync{display:none}.inventory-grid{grid-template-columns:1fr}}
@media(max-width:420px){.metrics{grid-template-columns:1fr 1fr}.metric__label{font-size:8px}.metric__value{font-size:20px}.nav-item span:not(.nav-icon){display:none}.nav-item{grid-template-columns:22px auto}.data-table{min-width:680px}}

/* ---------- Anmeldung per Passkey ---------- */
.login-screen{padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.auth-switch{display:block;margin:16px auto 0;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.login-card .btn:focus-visible,.auth-switch:focus-visible,.order-row:focus-visible,.order-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Geräte ---------- */
.device-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.device-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel);padding:13px 14px}
.device-row strong{display:flex;align-items:center;gap:8px;font-size:13px}
.device-row span{display:block;color:var(--faint);font-size:10px;margin-top:4px}
.device-row .device-key{font-size:10.5px;letter-spacing:.02em}.device-row .device-key--local{color:var(--ok)}.device-row .device-key--sync{color:var(--muted)}
.device-pair{margin-bottom:12px}.device-pair .muted{font-size:11px;line-height:1.6;margin:0 0 12px}
.pair-code{margin-top:14px;border:1px dashed var(--line2);padding:16px;text-align:center}
.pair-code strong{display:block;font:700 26px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.pair-code span{display:block;color:var(--muted);font-size:10px;margin-top:6px}
.pair-qr{width:min(240px,100%);margin:0 auto 14px;background:#fff;line-height:0}.pair-qr svg{display:block;width:100%;height:auto}
.pair-steps{margin:0 auto 4px;padding-left:18px;max-width:320px;text-align:left;font-size:12px;line-height:1.6}.pair-steps b{font-weight:700}
.pair-manual{margin:14px 0 6px;color:var(--muted);font-size:11px;line-height:1.5}

/* ---------- Bestellungen ---------- */
.orders-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.order-tabs{display:flex;gap:4px;overflow-x:auto;max-width:100%}
.order-tab{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);padding:8px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.order-tab:hover{color:var(--paper)}
.order-tab.is-active{border-color:var(--line2);background:var(--panel);color:var(--paper)}
.order-tab em{font-style:normal;color:var(--faint);margin-left:4px;font-variant-numeric:tabular-nums}
.order-list{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel)}
.order-row{appearance:none;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;font:inherit}
.order-row:first-child{border-top:0}.order-row:hover{background:var(--panel2)}
.order-row__thumb{position:relative;width:64px;height:80px}
.order-row__img{width:64px;height:80px;object-fit:cover;background:#141414;display:block}
.order-row__img.is-empty{border:1px solid var(--line)}
.order-row__more{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:9px;background:var(--paper);color:#070707;padding:2px 5px;font-weight:700}
.order-row__main{min-width:0;display:flex;flex-direction:column;gap:3px}
.order-row__main strong{font-size:13px;font-variant-numeric:tabular-nums}
.order-row__main span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-row__items{color:var(--faint)!important}
.order-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.order-row__side strong{font-size:13px;font-variant-numeric:tabular-nums}
.order-row__side time{font-size:9px;color:var(--faint)}
.order-row__chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.status--open:before{background:var(--warn)}
.detail-item--img{grid-template-columns:48px 1fr auto;align-items:center}
.detail-item > div > span{display:block;margin-top:3px}
.detail-item__img{width:48px;height:60px;object-fit:cover;background:#141414;display:block}
.detail-item__img.is-empty{border:1px solid var(--line)}

/* ---------- Versand / QR-Marke ---------- */
.versand-card{border:1px solid var(--line2);background:var(--panel);padding:14px;margin-top:0}
.versand-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.versand-kauf{display:flex;gap:8px;flex-wrap:wrap}.versand-kauf .control{flex:1;min-width:180px}
.versand-adresse{margin-bottom:10px}.versand-adresse .control{width:100%}
.qr-marke{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:16px;align-items:center}
.qr-marke img{width:100%;height:auto;background:#fff;padding:10px;image-rendering:pixelated}
.qr-marke strong{display:block;font-size:13px;margin-bottom:6px}
.qr-marke span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.qr-marke .btn{margin-top:10px}

@media(max-width:760px){
  .orders-head{flex-direction:column;align-items:stretch}
  .order-row{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:11px 12px}
  .order-row__thumb,.order-row__img{width:52px;height:66px}
  .order-row__side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .qr-marke{grid-template-columns:1fr}.qr-marke img{max-width:260px;margin:0 auto}
  .device-row{flex-direction:column;align-items:flex-start}
  .sidebar{padding-top:env(safe-area-inset-top)}
  .main-content{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.loading:before{animation:none}}