/*
 * TradeWarden – Aussehen der Konto-Seiten (Anmeldung, Konto, Kündigung, Danke).
 * Farben und Maße wie im Dashboard (static/index.html); ändern sich dort die
 * Werte, hier mitziehen.
 */
:root{
  color-scheme:light;
  --void:#F5F5F7; --panel:#FFFFFF; --panel-hi:#F0F0F2; --line:#D8D8DC; --line-soft:#E8E8EC;
  --ink:#1D1D1F; --ink-dim:#636366; --ink-faint:#C7C7CC;
  --safe:#1F7A48; --safe-fill:#34C759;
  --warn:#B85C00; --warn-fill:#FF9500;
  --danger:#D70015; --danger-fill:#FF3B30;
  --info:#0071E3; --info-fill:#0071E3;
  --wash: rgba(0,113,227,0.05);
  --shadow-card: 0 1px 1px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.12);
  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --void:#000000; --panel:#1C1C1E; --panel-hi:#2C2C2E; --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.08);
  --ink:rgba(255,255,255,.92); --ink-dim:rgba(255,255,255,.6); --ink-faint:rgba(255,255,255,.28);
  --safe:#30D158; --safe-fill:#30D158;
  --warn:#FF9F0A; --warn-fill:#FF9F0A;
  --danger:#FF453A; --danger-fill:#FF453A;
  --info:#0A84FF; --info-fill:#0071E3;
  --wash: rgba(10,132,255,.10);
  --shadow-card: 0 1px 1px rgba(0,0,0,.5), 0 12px 32px -10px rgba(0,0,0,.65);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* hidden muss auch gegen display-Regeln wie .field{display:flex} gewinnen */
[hidden]{display:none !important;}
body{
  background:radial-gradient(1100px 700px at 18% -12%, var(--wash), transparent 60%), var(--void);
  color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--info); text-decoration:none;}
a:hover{text-decoration:underline;}

/* Kopf: Logo links, Hell/Dunkel und Sprache rechts */
.acc-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 28px;}
.acc-top-actions{display:flex; align-items:center; gap:6px;}
/* Desktop-App (preload.js setzt data-shell): die Kopfzeile zieht das Fenster,
   die Knöpfe bleiben links neben den Fensterknöpfen (rund 140 px) */
:root[data-shell="app"] .acc-top{-webkit-app-region:drag; padding-right:160px;}
:root[data-shell="app"] .acc-top button, :root[data-shell="app"] .acc-top a{-webkit-app-region:no-drag;}
.sidebar-brand{display:flex; align-items:center; gap:11px;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(160deg, var(--info), color-mix(in srgb, var(--info) 60%, #6C4CE0));
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px -2px rgba(0,113,227,.5);
}
.brand-name{font-weight:650; font-size:14.5px; color:var(--ink); letter-spacing:-.01em;}
.brand-tag{font-size:11.5px; color:var(--ink-dim); margin-top:1px;}
.top-btn{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9px; border:none; background:none;
  color:var(--ink-dim); font:500 13px var(--font-sans); cursor:pointer;
}
.top-btn:hover{background:var(--panel-hi);}
.top-btn svg{width:18px; height:18px;}
.top-btn .icon-dark{display:none;}
:root[data-theme="dark"] .top-btn .icon-light{display:none;}
:root[data-theme="dark"] .top-btn .icon-dark{display:block;}
.lang-flag{width:18px; height:18px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px var(--line);}
.lang-flag svg{display:block;}
:root[lang="en"] .flag-de, :root:not([lang="en"]) .flag-en{display:none;}

.acc-main{flex:1; width:100%; max-width:980px; margin:0 auto; padding:8px 24px 40px;}
.acc-grid{display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:22px; align-items:start;}
.acc-narrow{max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
h1{font-size:26px; font-weight:650; letter-spacing:-.02em; margin-bottom:6px;}
.lead{color:var(--ink-dim); font-size:14px; line-height:1.55; margin-bottom:6px;}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px;
  box-shadow:var(--shadow-card);
}
.card-label{font-size:13px; color:var(--ink-dim); font-weight:600; margin-bottom:12px;}
.hint{font-size:12.5px; color:var(--ink-dim); line-height:1.55;}
.hint:empty{display:none;}

/* Formular */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field span{font-size:12.5px; color:var(--ink-dim);}
.text-input{
  width:100%; background:var(--panel-hi); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-size:14px; font-family:var(--font-sans); outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.text-input:focus{border-color:var(--info); box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);}
textarea.text-input{min-height:80px; resize:vertical;}
.check{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; margin:4px 0 16px; cursor:pointer; line-height:1.4;}
.check input{width:17px; height:17px; margin-top:1px; accent-color:var(--info); flex-shrink:0;}
.radio-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}

.btn{
  background:var(--panel-hi); border:1px solid var(--line); color:var(--ink); border-radius:10px;
  padding:11px 18px; font:600 14px var(--font-sans); cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:border-color .12s, opacity .1s;
}
.btn:hover{border-color:var(--info);}
.btn:active{opacity:.75;}
.btn:disabled{opacity:.5; cursor:default;}
.btn.primary{background:var(--info-fill); border-color:var(--info-fill); color:#fff;
  box-shadow:0 3px 10px -3px color-mix(in srgb, var(--info-fill) 60%, transparent);}
.btn.primary:hover{filter:brightness(1.08);}
.btn.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:none;}
.btn.danger:hover{border-color:var(--danger);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}
.btn-row .btn{flex:1 1 180px; width:auto;}
.btn:focus-visible, .seg-btn:focus-visible, .top-btn:focus-visible, .text-input:focus-visible{
  outline:2px solid var(--info); outline-offset:2px;
}
.status{font-size:13px; margin-top:12px; min-height:18px; color:var(--ink-dim); line-height:1.45;}
.status.ok{color:var(--safe);}
.status.error{color:var(--danger);}

.segmented{display:flex; gap:2px; padding:3px; background:var(--panel-hi); border:1px solid var(--line);
  border-radius:12px; margin-bottom:18px;}
.seg-btn{flex:1; background:none; border:none; color:var(--ink-dim); font:600 13px var(--font-sans);
  border-radius:9px; padding:9px 6px; cursor:pointer;}
.seg-btn.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow-card);}

/* Pläne */
.plans{display:flex; flex-direction:column; gap:14px;}
.plan{position:relative;}
.plan.pro{border-color:color-mix(in srgb, var(--info) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--info) 25%, transparent), var(--shadow-card);}
.plan-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px;}
.plan-name{font-size:17px; font-weight:650;}
.plan-price{font-size:22px; font-weight:650; letter-spacing:-.02em; white-space:nowrap;}
.plan-price small{font-size:13px; font-weight:500; color:var(--ink-dim);}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.plan li{font-size:13.5px; line-height:1.4; padding-left:24px; position:relative;}
.plan li::before{content:""; position:absolute; left:2px; top:3px; width:12px; height:7px;
  border-left:2px solid var(--safe); border-bottom:2px solid var(--safe); transform:rotate(-45deg);}
.plan-badge{display:inline-block; font-size:11.5px; font-weight:600; color:var(--info);
  background:color-mix(in srgb, var(--info) 12%, transparent); border-radius:6px; padding:3px 8px; margin-bottom:12px;}
.plan .segmented{margin-bottom:12px;}
.plan-note{font-size:12.5px; color:var(--ink-dim); margin-top:10px; line-height:1.45;}

/* Konto */
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; margin-bottom:4px;}
.kv dt{color:var(--ink-dim);}
.kv dd{font-weight:500; word-break:break-all;}
.pill{display:inline-block; font-size:12px; font-weight:600; border-radius:6px; padding:2px 8px;
  background:var(--panel-hi); color:var(--ink-dim);}
.pill.pro{background:color-mix(in srgb, var(--info) 14%, transparent); color:var(--info);}

.acc-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:18px 24px 26px;
  font-size:12.5px; color:var(--ink-dim);}
.acc-foot a{color:var(--ink-dim);}

@media (max-width:820px){
  .acc-grid{grid-template-columns:1fr;}
  .acc-top{padding:16px;}
  .acc-main{padding:4px 16px 32px;}
}
/* Schmale Handys (2026-10-14): Auf /konto passten die vier Knöpfe oben nicht
   in die Breite, die Seite ließ sich seitlich verschieben und "Abmelden" lag
   außerhalb. Hier nur das Logo ohne Schriftzug und die Sprache als Flagge
   (der Name steht weiter im Tooltip und für Screenreader). */
@media (max-width:520px){
  .acc-top{gap:8px;}
  .acc-top .brand-name, .acc-top .brand-tag{display:none;}
  .top-btn{padding:8px 9px; white-space:nowrap;}
  #lang-btn span:not(.lang-flag){display:none;}
}
@media print{
  .acc-top-actions, .acc-foot, .no-print{display:none !important;}
  body{background:#fff;}
}