/* ============================================================
   ilabs forms — gemeinsames Design-System
   Basiert auf der bestehenden ilabs-Glass-Optik (Eisblau/Weiß).
   ============================================================ */

:root{
    --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(240,248,255,0.2) 100%);
    --glass-border: rgba(255,255,255,0.65);
    --inner-bg: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(240,248,255,0.25) 100%);

    --blue-glass: linear-gradient(180deg, #33c4ff 0%, #00a2ff 100%);
    --blue-border: rgba(255,255,255,0.6);
    --blue-text: #ffffff;
    --blue-solid: #00a2ff;

    --text-primary: #002244;
    --text-secondary: #224466;
    --text-muted: #7a92a8;

    --green: #0a9d5c;
    --red: #d33f3f;
    --amber: #c9820a;

    --card-radius: 36px;
    --inner-radius: 24px;
    --pill-radius: 999px;

    --shadow: 0 25px 55px rgba(0, 80, 150, 0.12), inset 0 2px 4px rgba(255,255,255,0.8);
    --shadow-soft: 0 14px 34px rgba(0, 80, 150, 0.10);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background-color: #f5f5f7;
    margin: 0;
    color: var(--text-primary);
    min-height: 100vh;
}

a{ color: inherit; }

/* ---------- Ambient background (moving blobs) ---------- */
.ambient{
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.ambient span{
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.ambient .b1{ width: 460px; height: 460px; left: -120px; top: -100px; background: radial-gradient(circle, #a9e4ff 0%, transparent 70%); animation: driftA 26s ease-in-out infinite; }
.ambient .b2{ width: 520px; height: 520px; right: -160px; top: 10%; background: radial-gradient(circle, #d7f0ff 0%, transparent 70%); animation: driftB 32s ease-in-out infinite; }
.ambient .b3{ width: 380px; height: 380px; left: 30%; bottom: -180px; background: radial-gradient(circle, #bfe9ff 0%, transparent 70%); animation: driftC 22s ease-in-out infinite; }

@keyframes driftA{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(60px, 50px) scale(1.12); }
}
@keyframes driftB{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-70px, 40px) scale(0.92); }
}
@keyframes driftC{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px, -30px) scale(1.08); }
}

/* ---------- Glass primitives ---------- */
.glass-card{
    background: var(--glass-bg);
    backdrop-filter: blur(60px) saturate(280%) brightness(1.2);
    -webkit-backdrop-filter: blur(60px) saturate(280%) brightness(1.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    position: relative;
}
.glass-card::before{
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    pointer-events: none;
}
.inner-box{
    background: var(--inner-bg);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.6);
    border-radius: var(--inner-radius);
}

/* ---------- Buttons ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: var(--pill-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.btn::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
    pointer-events:none;
}
.btn-primary{
    background: var(--blue-glass);
    color: var(--blue-text);
    border-color: var(--blue-border);
    box-shadow: 0 4px 12px rgba(0,162,255,0.25), inset 0 1.5px 2px rgba(255,255,255,0.6), inset 0 -1.5px 3px rgba(0,0,0,0.1);
    text-shadow: 0 1px 2px rgba(0,50,120,0.4);
}
.btn-primary:hover:not(:disabled){ transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,162,255,0.4), inset 0 2px 3px rgba(255,255,255,0.8); filter: brightness(1.05); }
.btn-primary:active:not(:disabled){ transform: scale(0.99); }
.btn-primary:disabled{ opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }

.btn-ghost{
    background: var(--inner-bg);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.6);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.6);
}
.btn-ghost:hover{ transform: scale(1.02); }

.btn-danger{ background: linear-gradient(180deg,#ff7a7a,#e23f3f); color:#fff; border-color: rgba(255,255,255,0.6); box-shadow: 0 4px 12px rgba(226,63,63,0.3); }
.btn-danger:hover{ transform: scale(1.02); }

.btn-sm{ padding: 9px 18px; font-size: 13.5px; }
.btn-text{ background: transparent; box-shadow:none; color: var(--text-secondary); border:none; font-weight:600; }
.btn-text:hover{ color: var(--text-primary); }

/* ---------- Form controls ---------- */
label{ display:block; font-size: 13.5px; font-weight: 700; color: var(--text-secondary); margin: 0 0 7px 2px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select{
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary);
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,60,120,0.12);
    border-radius: 14px;
    padding: 12px 15px;
    box-shadow: inset 0 1px 3px rgba(0,40,90,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
textarea{ resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus{
    outline: none;
    border-color: var(--blue-solid);
    box-shadow: 0 0 0 3px rgba(0,162,255,0.18);
}
.field{ margin-bottom: 18px; }
.hint{ font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding: 5px 12px; border-radius: var(--pill-radius); }
.badge-green{ background: rgba(10,157,92,0.12); color: var(--green); }
.badge-red{ background: rgba(211,63,63,0.12); color: var(--red); }
.badge-amber{ background: rgba(201,130,10,0.12); color: var(--amber); }
.badge-blue{ background: rgba(0,162,255,0.12); color: var(--blue-solid); }
.badge-gray{ background: rgba(34,68,102,0.08); color: var(--text-secondary); }

/* ---------- Utility ---------- */
.container{ max-width: 1080px; margin: 0 auto; padding: 34px 22px; position: relative; z-index: 1; }
.stack{ display:flex; flex-direction:column; }
.center{ text-align:center; }
.flex{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.space-between{ justify-content: space-between; }
.muted{ color: var(--text-muted); }
.small{ font-size: 13px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }

/* ---------- Table (admin) ---------- */
table.data{ width:100%; border-collapse: collapse; }
table.data th{ text-align:left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid rgba(0,60,120,0.1); }
table.data td{ padding: 14px; font-size: 14.5px; border-bottom: 1px solid rgba(0,60,120,0.06); vertical-align: middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background: rgba(0,162,255,0.04); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline: 2px solid var(--blue-solid);
    outline-offset: 2px;
}