@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy:#0E1B26;
  --navy-deep:#081119;
  --parchment:#EFE6D2;
  --parchment-dim:#DDD1B4;
  --brass:#C89B4A;
  --brass-bright:#E3B968;
  --teal:#2A7F7E;
  --coral:#C1503E;
  --ink:#1B2430;
  --ink-soft:#4A5568;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(42,127,126,0.15), transparent 60%),
    var(--navy);
  color:var(--parchment);
  font-family:'IBM Plex Sans',sans-serif;
  min-height:100vh;
  padding:32px 20px 80px;
}
.wrap{max-width:1100px;margin:0 auto;}
.billing-return-body{text-align:center;padding-top:60px;}
.wrap.narrow{max-width:560px;}
h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:2.1rem;
  letter-spacing:0.01em;
  margin:0 0 4px;
  color:var(--parchment);
}
.subtitle{
  color:var(--parchment-dim);
  font-size:0.95rem;
  margin-bottom:20px;
  max-width:680px;
  line-height:1.5;
}
.subtitle b{color:var(--brass-bright);}

.badge-thirdparty{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(193,80,62,0.10);
  border:1px solid rgba(193,80,62,0.35);
  border-radius:10px;
  padding:12px 14px;
  font-size:0.8rem;
  line-height:1.5;
  color:var(--parchment);
  margin-bottom:26px;
}
.badge-thirdparty b{color:var(--coral);}

.lane{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(200,155,74,0.25);
  border-radius:14px;
  padding:22px 24px 26px;
  margin-bottom:28px;
}
.lane-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:6px;
  flex-wrap:wrap;
  gap:8px;
}
.lane-title{
  font-family:'Fraunces',serif;
  font-size:1.3rem;
  font-weight:600;
  color:var(--brass-bright);
}
.lane-meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  color:var(--parchment-dim);
}
.lane-desc{
  font-size:0.82rem;
  color:var(--parchment-dim);
  margin-bottom:16px;
  line-height:1.5;
}

.track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:20px 8px 14px;
  position:relative;
}
.porthole-frame{
  position:relative;
  display:flex;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:2px solid var(--brass);
  background:radial-gradient(ellipse at center, rgba(200,155,74,0.12), transparent 70%);
  flex-shrink:0;
}
.porthole-label{
  position:absolute;
  top:-11px;
  left:12px;
  background:var(--navy);
  padding:0 8px;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-bright);
  font-family:'IBM Plex Mono',monospace;
}
.harbor-frame{
  position:relative;
  display:flex;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:2px dashed rgba(239,230,210,0.3);
  flex-shrink:0;
  opacity:0.85;
}
.harbor-label{
  position:absolute;
  top:-11px;
  left:12px;
  background:var(--navy);
  padding:0 8px;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(239,230,210,0.55);
  font-family:'IBM Plex Mono',monospace;
}
.harbor-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  color:rgba(239,230,210,0.35);
  padding:8px 6px;
  white-space:nowrap;
}

.crate{
  min-width:118px;
  min-height:104px;
  box-sizing:border-box;
  background:var(--parchment);
  color:var(--ink);
  border-radius:8px;
  padding:10px 11px 9px;
  position:relative;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  border:1px solid rgba(0,0,0,0.08);
}
.crate.live{border:2px solid var(--teal);}
.crate .name{font-weight:600;font-size:0.86rem;line-height:1.2;margin-bottom:2px;}
.crate .lvl{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--ink-soft);}
.crate .cost{display:none;font-family:'IBM Plex Mono',monospace;font-size:0.66rem;color:var(--ink-soft);margin-top:5px;line-height:1.4;} /* erstmal ausgeblendet, Nutzer ueberlegt noch -- nicht entfernt */
.crate .eta{font-family:'IBM Plex Mono',monospace;font-size:0.64rem;color:var(--ink-soft);opacity:0.8;margin-top:3px;line-height:1.3;}
.crate .ctrls{display:flex;gap:4px;margin-top:7px;}
.crate button{
  border:none;background:rgba(0,0,0,0.06);color:var(--ink);
  border-radius:5px;padding:3px 6px;font-size:0.68rem;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
}
.crate button:hover{background:rgba(0,0,0,0.13);}
.crate .rm{color:var(--coral);}

.empty-slot{
  min-width:118px;
  min-height:104px;
  box-sizing:border-box;
  border:1.5px dashed rgba(239,230,210,0.25);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(239,230,210,0.35);
  font-size:0.7rem;
  font-family:'IBM Plex Mono',monospace;
  flex-shrink:0;
}
.empty-slot.unknown{
  border-color:rgba(200,155,74,0.4);
  color:var(--brass-bright);
}

.lane-flash{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:6px;
}
.lane-flash:empty{margin-bottom:0;}
.lane-flash .flash-msg{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  padding:8px 12px;
  border-radius:7px;
  line-height:1.4;
  animation:flash-in 0.2s ease-out;
}
.lane-flash .flash-msg.info{
  background:rgba(42,127,126,0.14);
  border:1px solid rgba(42,127,126,0.4);
  color:var(--parchment);
}
.lane-flash .flash-msg.error{
  background:rgba(193,80,62,0.14);
  border:1px solid rgba(193,80,62,0.45);
  color:var(--parchment);
}
@keyframes flash-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

.crate.live{position:relative;padding-right:22px;}
.crate .countdown{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  color:var(--teal);
  margin-top:4px;
}
.crate .countdown.pending{color:var(--ink-soft);}
.crate.live .live-cancel{
  position:absolute;top:6px;right:6px;
  border:none;background:none;color:var(--coral);
  font-size:0.72rem;cursor:pointer;padding:2px 4px;
}
.crate.live .live-cancel:hover{background:rgba(193,80,62,0.12);border-radius:4px;}

.add-row{
  display:flex;
  gap:8px;
  margin-top:6px;
  flex-wrap:wrap;
  align-items:center;
}
.so-list{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:14px;}
/* Both rules above set an explicit `display`, which -- despite equal
   selector specificity -- beats the browser's built-in `[hidden]{display:
   none}` UA-stylesheet rule, since author CSS always wins over UA CSS
   regardless of specificity. Without this, JS setting .hidden=true on
   these (see setGlobalStandingView() in dashboard.js) silently did
   nothing: the elements stayed visible under the global standing-order
   table instead of actually toggling away. */
.add-row[hidden], .so-list[hidden]{display:none;}
.so-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--parchment);color:var(--ink);border-radius:8px;
  padding:11px 14px;border:2px solid var(--teal);
}
.so-row.paused{border-color:rgba(0,0,0,0.12);opacity:0.75;}
.so-main{flex:1 1 220px;min-width:180px;}
.so-name{font-weight:600;font-size:0.9rem;}
.so-detail{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--ink-soft);margin-top:2px;}
.so-status{
  font-family:'IBM Plex Mono',monospace;font-size:0.74rem;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.so-status.running{color:var(--teal);}
.so-status.paused-text{color:var(--ink-soft);}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.running{background:var(--teal);}
.dot.paused{background:var(--ink-soft);}
.so-ctrls{display:flex;gap:6px;}
.so-ctrls button{
  border:none;background:rgba(0,0,0,0.06);color:var(--ink);
  border-radius:5px;padding:5px 9px;font-size:0.72rem;cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
}
.so-ctrls button:hover{background:rgba(0,0,0,0.13);}
.so-ctrls button.rm{color:var(--coral);}

.so-global-scroll{
  overflow-x:auto;
  margin-top:14px;
}
.so-global-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.so-global-table{
  width:100%;
  border-collapse:collapse;
  background:var(--parchment);
  color:var(--ink);
  font-size:0.82rem;
}
.so-global-table th, .so-global-table td{
  padding:9px 12px;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,0.08);
  white-space:nowrap;
}
.so-global-table th{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:rgba(0,0,0,0.03);
}
.so-global-table tbody tr:last-child td{border-bottom:none;}
.so-global-table tbody tr:hover{background:rgba(0,0,0,0.03);}
.so-global-table button{
  border:none;background:rgba(0,0,0,0.06);color:var(--ink);
  border-radius:5px;padding:4px 9px;font-size:0.74rem;cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
}
.so-global-table button:hover{background:rgba(0,0,0,0.13);}

.add-row-label{
  font-size:0.78rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.field-inline{display:flex;align-items:center;gap:8px;}
/* CSP has no 'unsafe-inline' for style-src, so these widths can't be
   inline `style="width:...px"` attributes (that got silently stripped,
   leaving the fields full-width and crowding the row on narrow screens). */
.add-row input[data-field="qty"], .add-row input[data-field="uqty"], .add-row input[data-field="so-qty"],
.add-row input[data-field="edit-so-qty"]{width:64px;}
.add-row input[data-field="so-interval"], .add-row input[data-field="edit-so-interval"]{width:70px;}
.so-row-editing{align-items:stretch;}
.so-row-editing .add-row{margin-top:0;width:100%;}

.top-bar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
select, input[type=number], input[type=text], input[type=email], input[type=password]{
  background:var(--navy-deep);
  border:1px solid rgba(200,155,74,0.35);
  color:var(--parchment);
  border-radius:6px;
  padding:9px 10px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:0.85rem;
  width:100%;
}
select, input[type=number]{width:auto;padding:7px 9px;font-size:0.82rem;}
.add-btn, .primary-btn{
  background:var(--brass);
  color:var(--ink);
  border:none;
  border-radius:6px;
  padding:8px 14px;
  font-weight:600;
  font-size:0.82rem;
  cursor:pointer;
}
.add-btn:hover, .primary-btn:hover{background:var(--brass-bright);}
.primary-btn{width:100%;padding:11px 14px;font-size:0.9rem;margin-top:6px;}
/* Bisher gab es gar kein :disabled-Styling -- Opazitaet an das bestehende
   .so-row.paused-Muster angelehnt, damit ein Klick waehrend eines laufenden
   Requests sichtbar "laedt" statt tot auszusehen. */
.add-btn:disabled, .primary-btn:disabled, .sync-btn:disabled{opacity:0.6;cursor:default;}

.status-line{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;
  color:var(--parchment-dim);
  margin-top:8px;
  line-height:1.6;
  white-space:pre-wrap;
  max-height:180px;
  overflow-y:auto;
}
.warn-box{
  background:rgba(193,80,62,0.12);
  border:1px solid rgba(193,80,62,0.4);
  border-radius:8px;
  padding:12px 14px;
  font-size:0.8rem;
  line-height:1.55;
  color:var(--parchment);
  margin-top:10px;
}
.warn-box b{color:var(--coral);}
.footer-note{
  text-align:center;
  color:rgba(239,230,210,0.3);
  font-size:0.72rem;
  margin-top:36px;
  font-family:'IBM Plex Mono',monospace;
}

/* auth card */
.auth-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(200,155,74,0.25);
  border-radius:14px;
  padding:26px 26px 28px;
}
.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid rgba(200,155,74,0.25);}
.tab-btn{
  background:none;border:none;color:var(--parchment-dim);
  font-family:'IBM Plex Sans',sans-serif;font-size:0.85rem;font-weight:600;
  padding:9px 4px;cursor:pointer;border-bottom:2px solid transparent;margin-right:18px;
}
.tab-btn.active{color:var(--brass-bright);border-bottom-color:var(--brass);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:0.78rem;color:var(--parchment-dim);margin-bottom:5px;font-family:'IBM Plex Mono',monospace;}
.form-panel{display:none;}
.form-panel.active{display:block;}
.error-box{
  background:rgba(193,80,62,0.14);border:1px solid rgba(193,80,62,0.45);
  border-radius:8px;padding:10px 12px;font-size:0.8rem;color:var(--parchment);
  margin-bottom:14px;display:none;
}
.error-box.show{display:block;}
.top-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.pill{
  font-family:'IBM Plex Mono',monospace;font-size:0.76rem;color:var(--parchment-dim);
  border:1px solid rgba(200,155,74,0.3);border-radius:999px;padding:5px 12px;
}
.pill.disconnected{
  color:var(--coral);border-color:rgba(193,80,62,0.6);background:rgba(193,80,62,0.14);
  font-weight:600;
}
.logout-btn{
  background:none;border:1px solid rgba(193,80,62,0.5);color:var(--coral);
  border-radius:6px;padding:6px 12px;font-size:0.78rem;cursor:pointer;font-family:'IBM Plex Mono',monospace;
}
.logout-btn:hover{background:rgba(193,80,62,0.12);}
.sync-btn{
  background:var(--teal);color:var(--navy-deep);border:none;
  border-radius:6px;padding:8px 16px;font-weight:600;cursor:pointer;font-size:0.82rem;
}
.sync-btn:hover{filter:brightness(1.15);}

/* FAQ (help page) */
details{
  border-top:1px solid rgba(200,155,74,0.18);
  padding:10px 0;
}
details:first-of-type{border-top:none;}
details summary{
  cursor:pointer;
  font-weight:600;
  font-size:0.88rem;
  color:var(--brass-bright);
  list-style:none;
}
details summary::-webkit-details-marker{display:none;}
details summary::before{content:"▸ ";display:inline-block;transition:transform 0.15s ease;}
details[open] summary::before{transform:rotate(90deg);}
details p{
  margin:8px 0 2px 16px;
  font-size:0.85rem;
  color:var(--parchment-dim);
  line-height:1.6;
}
a.logout-btn{text-decoration:none;display:inline-block;}
a.inline-link{color:var(--brass-bright);}
.lane-desc.flush{margin-bottom:0;}
.help-list{margin:0 0 0 18px;padding:0;font-size:0.85rem;color:var(--parchment-dim);line-height:1.7;}

/* Mobile: iOS Safari auto-zooms on focus for any input/select under 16px,
   and several tap targets below (crate arrows, Dauerauftrag controls) are
   too small to hit reliably with a finger. Scoped to a breakpoint instead
   of changing these globally, so the compact desktop density stays as-is. */
@media (max-width: 640px){
  select, input[type=number], input[type=text], input[type=email], input[type=password]{
    font-size:16px;
  }

  .crate button{padding:7px 10px;font-size:0.8rem;}
  .crate.live .live-cancel{padding:6px 8px;font-size:0.85rem;}

  .add-row{flex-direction:column;align-items:stretch;}
  .add-row select, .add-row > .add-btn{width:100%;}

  .so-row{flex-direction:column;align-items:stretch;}
  /* .so-main's flex-basis:220px means WIDTH in the row layout above --
     in this column layout the main axis is vertical, so unless reset it
     stretches the name/detail block to 220px of empty height instead. */
  .so-main{flex:none;}
  .so-ctrls{justify-content:flex-end;}
  .so-ctrls button{padding:10px 16px;font-size:0.85rem;min-height:40px;}
}