/* konto.css — withira Konto: Auth + Dashboard (Käufer & Verkäufer).
   Helles withira-Theme, baut auf styles.css + theme-bright.css auf.
   Tokens: --wi-gold #bd8e3f, --wi-ai-cyan #1487c4, --wi-text, --wi-bg-2,
   --wi-line, --serif, --sans. */

/* hidden-Attribut muss IMMER greifen (sonst überschreiben .ko-auth/.ko-dash{display:flex} das [hidden]) */
[hidden]{display:none !important;}

/* ===== Grundlayout ===== */
.ko-main{max-width:980px;margin:0 auto;padding:104px 18px 80px;min-height:60vh;}
.ko-card__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 12px;}
.ko-card__text{color:var(--wi-text-dim);margin:0 0 14px;font-size:15px;}

/* ===== Lade- & Spinner ===== */
.ko-loading{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--wi-text-dim);padding:60px 0;}
.ko-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--wi-line);border-top-color:var(--wi-gold);animation:koSpin .8s linear infinite;}
.ko-btn-busy{position:relative;pointer-events:none;opacity:.7;}
@keyframes koSpin{to{transform:rotate(360deg);}}

/* ===== Toasts ===== */
.ko-toast-wrap{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;width:min(94vw,420px);}
.ko-toast{background:var(--wi-bg-2);border:1px solid var(--wi-line);border-left:4px solid var(--wi-gold);border-radius:12px;padding:12px 16px;box-shadow:0 18px 44px -22px rgba(28,60,110,.5);font-size:14.5px;color:var(--wi-text);animation:koToastIn .25s ease;}
.ko-toast--ok{border-left-color:#1d9b6c;}
.ko-toast--err{border-left-color:#cf4848;}
.ko-toast--info{border-left-color:var(--wi-ai-cyan);}
@keyframes koToastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ===== AUTH ===== */
.ko-auth{display:flex;justify-content:center;}
.ko-auth__card{width:min(100%,460px);background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:22px;padding:34px 30px;box-shadow:0 26px 60px -30px rgba(28,60,110,.40);}
.ko-auth__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);margin:4px 0 8px;}
.ko-auth__sub{color:var(--wi-text-dim);font-size:15px;margin:0 0 22px;line-height:1.55;}

.ko-tabs{display:flex;gap:6px;background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:999px;padding:5px;margin-bottom:22px;}
.ko-tab{flex:1;border:none;background:transparent;font:inherit;font-weight:700;color:var(--wi-text-dim);padding:10px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;}
.ko-tab.is-active{background:var(--wi-bg-2);color:var(--wi-text);box-shadow:0 4px 12px -6px rgba(28,60,110,.4);}

/* ===== Formulare & Felder ===== */
.ko-form{display:flex;flex-direction:column;gap:14px;}
.ko-field{display:flex;flex-direction:column;gap:6px;}
.ko-field__label{font-size:13px;font-weight:700;color:var(--wi-text-dim);}
.ko-field input,.ko-field select,.ko-field textarea{
  font:inherit;background:#fff;border:1px solid var(--wi-line);color:var(--wi-text);
  border-radius:12px;padding:12px 14px;width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;}
.ko-field textarea{resize:vertical;min-height:72px;}
.ko-field input:focus,.ko-field select:focus,.ko-field textarea:focus{
  outline:none;border-color:var(--wi-ai-cyan);box-shadow:0 0 0 3px var(--wi-ai-cyan-soft);}
.ko-code-input{letter-spacing:.4em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums;}
.ko-btn-block{width:100%;justify-content:center;}
.ko-btn-sm{padding:7px 14px;font-size:13px;}

.ko-hint{font-size:12.5px;color:var(--wi-text-dim);margin:0;line-height:1.5;}
.ko-hint a{color:var(--wi-ai-cyan);}
.ko-error{background:rgba(207,72,72,.10);border:1px solid rgba(207,72,72,.3);color:#b03333;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0;}
.ko-warn{background:rgba(190,142,64,.12);border:1px solid var(--wi-gold-glow);color:var(--wi-gold-hi);border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0;}

.ko-2fa-login__title{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 6px;}

/* ===== DASHBOARD ===== */
.ko-testbanner{background:var(--wi-ai-cyan-soft);border:1px solid color-mix(in srgb,var(--wi-ai-cyan) 30%,transparent);
  color:var(--wi-text);border-radius:14px;padding:12px 16px;font-size:14px;margin-bottom:22px;line-height:1.5;}
.ko-dash__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.ko-dash__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.3rem);margin:2px 0 0;}

.ko-nav{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--wi-line);margin-bottom:24px;-webkit-overflow-scrolling:touch;}
.ko-nav__btn{border:none;background:transparent;font:inherit;font-weight:700;color:var(--wi-text-dim);padding:12px 16px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.ko-nav__btn:hover{color:var(--wi-gold-hi);}
.ko-nav__btn.is-active{color:var(--wi-text);border-bottom-color:var(--wi-gold);}

.ko-panel{display:none;flex-direction:column;gap:18px;}
.ko-panel.is-active{display:flex;}
.ko-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

.ko-card{background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:18px;padding:22px;box-shadow:0 18px 44px -28px rgba(28,60,110,.30);}
.ko-note{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;}
.ko-note--cyan{background:var(--wi-ai-cyan-soft);border-color:color-mix(in srgb,var(--wi-ai-cyan) 26%,transparent);}

.ko-deflist{margin:0;display:grid;gap:12px;}
.ko-deflist div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--wi-line);padding-bottom:10px;}
.ko-deflist div:last-child{border-bottom:none;padding-bottom:0;}
.ko-deflist dt{color:var(--wi-text-dim);font-size:14px;}
.ko-deflist dd{margin:0;font-weight:600;text-align:right;word-break:break-word;}

/* ===== 2FA-Setup ===== */
.ko-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:20px;font-size:14.5px;}
.ko-steps li{line-height:1.55;}
.ko-qr{margin:12px 0;display:inline-block;background:#fff;padding:10px;border:1px solid var(--wi-line);border-radius:12px;line-height:0;}
.ko-qr canvas,.ko-qr svg{display:block;}
.ko-secret-label{font-size:12.5px;color:var(--wi-text-dim);margin:10px 0 4px;}
.ko-secret,.ko-uri{display:block;background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:10px;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--wi-text);}
.ko-secret{font-size:18px;letter-spacing:.12em;font-weight:700;}
.ko-uri{font-size:12px;}
.ko-recovery{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.ko-recovery li{background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:8px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center;}

/* ===== Listen / Bestellungen / Inserate ===== */
.ko-list{display:flex;flex-direction:column;gap:14px;}
.ko-list--tight{gap:8px;margin-top:14px;}
.ko-row{background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:16px;padding:18px;box-shadow:0 14px 36px -28px rgba(28,60,110,.3);}
.ko-row__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.ko-row__title{font-family:var(--serif);font-weight:400;font-size:19px;margin:0;}
.ko-row__meta{color:var(--wi-text-dim);font-size:13.5px;margin:6px 0 0;line-height:1.5;}
.ko-row__price{font-family:var(--serif);font-size:18px;color:var(--wi-gold-hi);white-space:nowrap;}
.ko-row__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ko-timer{font-size:13px;color:var(--wi-text-dim);margin-top:8px;}
.ko-timer b{color:var(--wi-text);font-variant-numeric:tabular-nums;}
.ko-timer.is-late b{color:#b03333;}

.ko-empty{color:var(--wi-text-dim);text-align:center;padding:30px 12px;font-size:14.5px;background:var(--wi-bg-1);border:1px dashed var(--wi-line);border-radius:14px;}

/* ===== Status-Badges ===== */
.ko-badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--wi-line);white-space:nowrap;}
.ko-badge--held{background:var(--wi-ai-cyan-soft);color:var(--wi-ai-cyan);border-color:color-mix(in srgb,var(--wi-ai-cyan) 30%,transparent);}
.ko-badge--ship{background:rgba(190,142,64,.14);color:var(--wi-gold-hi);border-color:var(--wi-gold-glow);}
.ko-badge--confirm{background:#fff4d6;color:#946a14;border-color:#e7cf8e;}
.ko-badge--done{background:rgba(29,155,108,.14);color:#157a52;border-color:rgba(29,155,108,.35);}
.ko-badge--dispute{background:rgba(207,72,72,.12);color:#b03333;border-color:rgba(207,72,72,.32);}
.ko-badge--off{background:var(--wi-bg-1);color:var(--wi-text-dim);}

/* ===== Auszahlungs-Bilanzen ===== */
.ko-balances{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.ko-bal{background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:14px;padding:14px;text-align:center;}
.ko-bal__label{font-size:12px;color:var(--wi-text-dim);display:block;margin-bottom:4px;}
.ko-bal__val{font-family:var(--serif);font-size:1.5rem;color:var(--wi-gold-hi);}

/* ===== Stripe Connect (echte Auszahlungen) ===== */
.ko-stripe{border:1px solid var(--wi-line);border-radius:14px;padding:16px 18px;background:var(--wi-bg-1);}
.ko-stripe--ok{background:color-mix(in srgb,#1d9b6c 9%,#fff);border-color:color-mix(in srgb,#1d9b6c 36%,transparent);}
.ko-stripe--todo{background:var(--wi-ai-cyan-soft);border-color:color-mix(in srgb,var(--wi-ai-cyan) 26%,transparent);}
.ko-stripe__head{font-size:15px;line-height:1.5;margin:0 0 6px;color:var(--wi-text);}
.ko-stripe__text{font-size:13.5px;line-height:1.55;color:var(--wi-text-dim);margin:0 0 12px;}
.ko-stripe .wi-btn{margin-top:2px;}

/* ===== Inline-Dispute-Formular ===== */
.ko-subform{margin-top:14px;border-top:1px solid var(--wi-line);padding-top:14px;display:flex;flex-direction:column;gap:12px;}

/* ===== Grid für Inserat-Formular ===== */
.ko-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ko-grid2 .ko-field--full{grid-column:1 / -1;}
.ko-grid2 button.ko-field--full{justify-self:start;}

/* ===== Responsive ===== */
@media (max-width:640px){
  .ko-main{padding:92px 14px 64px;}
  .ko-auth__card{padding:26px 20px;}
  .ko-card{padding:18px;}
  .ko-grid2{grid-template-columns:1fr;}
  .ko-balances{grid-template-columns:1fr;}
  .ko-recovery{grid-template-columns:1fr;}
  .ko-deflist div{flex-direction:column;gap:2px;}
  .ko-deflist dd{text-align:left;}
}