/* ===== Tradezilla – Liquid Glass Theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Manrope:wght@400;500;600&display=swap');

:root {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --text: #f4f6fb;
  --text-dim: rgba(244, 246, 251, 0.55);
  --accent: #4ade80;
  --accent-2: #38bdf8;
  --danger: #fb7185;
  --radius: 24px;
  --radius-sm: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background: #05070d;
}

/* ---------- ambient background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 120% at 10% 0%, #0d1b2a 0%, #05070d 55%),
    radial-gradient(100% 100% at 90% 100%, #10231c 0%, transparent 60%); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: 0.5; mix-blend-mode: screen; animation: drift 24s ease-in-out infinite; }
.blob.a { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: #1f7a4d; }
.blob.b { width: 40vw; height: 40vw; right: -6vw; top: 18vh; background: #1d4ed8; animation-delay: -8s; }
.blob.c { width: 36vw; height: 36vw; left: 30vw; bottom: -16vw; background: #0ea5e9; animation-delay: -15s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(6vw,-4vh) scale(1.12); }
  66%     { transform: translate(-4vw,5vh) scale(0.92); }
}
.grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 85%); }

/* ---------- reusable glass surface ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-radius: var(--radius);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 0 var(--glass-highlight),
    inset 0 -1px 0 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 42%);
  pointer-events: none; }

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 11px; }
.logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px -4px rgba(56,189,248,0.6), inset 0 1px 0 rgba(255,255,255,0.6); }
.logo svg { width: 20px; height: 20px; }
.brand h1 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.brand h1 span { color: var(--accent); }

/* ---------- forms ---------- */
.field { position: relative; margin-bottom: 16px; }
.field label { position: absolute; left: 16px; top: 15px; font-size: 14px; color: var(--text-dim);
  pointer-events: none; transition: 0.2s cubic-bezier(.16,1,.3,1); }
.field input, .field select {
  width: 100%; padding: 22px 16px 8px; font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); outline: none; transition: 0.25s; }
.field select { padding-top: 14px; padding-bottom: 14px; }
.field input:focus, .field select:focus {
  border-color: rgba(74,222,128,0.65); background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.12); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 8px; font-size: 11px; color: var(--accent); }

.btn { width: 100%; padding: 15px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
  color: #04130b; border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: linear-gradient(145deg, var(--accent), #22c55e);
  box-shadow: 0 12px 30px -8px rgba(34,197,94,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: 0.25s cubic-bezier(.16,1,.3,1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -8px rgba(34,197,94,0.7), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn.ghost { background: rgba(255,255,255,0.06); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.btn.ghost:hover { background: rgba(255,255,255,0.12); }

.msg { font-size: 13px; margin-top: 12px; min-height: 18px; text-align: center; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--accent); }

a.link { color: var(--accent); text-decoration: none; font-weight: 500; }
a.link:hover { text-decoration: underline; }

/* ---------- top bar / navigation ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.nav { display: flex; gap: 6px; }
.nav a { padding: 8px 16px; border-radius: 12px; font-size: 14px; color: var(--text-dim); text-decoration: none; transition: .2s; }
.nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav a.active { color: var(--accent); background: rgba(74,222,128,.1); }
.topright { display: flex; align-items: center; gap: 14px; }
.topright .btn { width: auto; padding: 9px 16px; font-size: 13px; }
.who { font-size: 13px; color: var(--text-dim); }

/* ---------- Setup-Verwaltung ---------- */
.setup-item { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.05); }
.setup-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.setup-name { font-family:'Sora',sans-serif; font-weight:600; font-size:14px; }
.setup-desc { font-size:12.5px; color:var(--text-dim); }
.setup-actions { display:flex; gap:8px; flex-shrink:0; }
.mini { font-family:inherit; font-size:12px; color:var(--text-dim); cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:6px 11px; transition:.2s; }
.mini:hover { background:rgba(255,255,255,.12); color:var(--text); }
.mini.del-setup:hover { background:rgba(251,113,133,.15); border-color:rgba(251,113,133,.4); color:var(--danger); }
.setup-form { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.setup-form input { flex:1; min-width:140px; padding:11px 13px; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:11px; outline:none; transition:.2s; }
.setup-form input:focus { border-color:rgba(74,222,128,.6); box-shadow:0 0 0 3px rgba(74,222,128,.1); }
.setup-form .btn { width:auto; padding:11px 20px; }

/* ---------- Trade-Formular (geteilt: Dashboard + Kalender) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.field-sm label { display:block; font-size:11px; color:var(--text-dim); margin-bottom:5px; padding-left:2px; }
.field-sm input, .field-sm select {
  width:100%; padding:11px 13px; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:11px; outline:none; transition:.2s; }
.field-sm input:focus, .field-sm select:focus { border-color:rgba(74,222,128,.6); box-shadow:0 0 0 3px rgba(74,222,128,.1); }

/* ---------- Prop-Accounts ---------- */
.acc-card { padding:16px 18px; margin-bottom:12px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.acc-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.acc-name { font-family:'Sora',sans-serif; font-weight:600; font-size:15px; }
.badge { font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; }
.badge.eval { background:rgba(56,189,248,.15); color:var(--accent-2); }
.badge.funded { background:rgba(74,222,128,.15); color:var(--accent); }
.badge.breach { background:rgba(251,113,133,.18); color:var(--danger); }
.acc-row { display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-dim); padding:5px 0; }
.acc-row b { color:var(--text); font-family:'Sora',sans-serif; font-weight:500; }
.acc-row b.pos { color:var(--accent); } .acc-row b.neg { color:var(--danger); } .acc-row b.warn { color:#fbbf24; }
.acc-actions { display:flex; gap:8px; margin-top:12px; }
.acc-funded-form { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.acc-funded-form .field-sm { grid-column:auto; }
.acc-funded-form .acc-actions { grid-column:1/-1; }
.acc-tools { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.acc-tools .btn { width:auto; padding:10px 18px; }
.acc-fromtpl { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.acc-fromtpl select, .acc-fromtpl input { padding:10px 13px; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:11px; outline:none; }
.acc-fromtpl .btn { width:auto; padding:10px 16px; }
.acc-form { margin-top:16px; }
.acc-form .btn { width:auto; padding:11px 20px; margin-right:8px; }