*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    display:flex;
    background:#0f0f12;
    color:white;
}

/* Sidebar */

.sidebar{
    width:280px;
    height:100vh;
    background:#18181f;
    border-right:1px solid #2d2d35;

    position:sticky;
    top:0;

    display:flex;
    flex-direction:column;

    padding:25px;
}

.sidebar h2{
    color:#9146FF;
    margin-bottom:30px;
}

.sidebar a{

    display:flex;
    align-items:center;
    gap:10px;

    color:white;
    text-decoration:none;

    padding:12px 14px;

    border-radius:10px;

    margin-bottom:8px;

    white-space:nowrap;

    transition:all .2s ease;

}

.sidebar a:hover{
    background:#23232b;
    color:#9146FF;
}

/* Inhalt */

.content{
    flex:1;
    display:flex;
    flex-direction:column;
}

.content h1{
    color:#9146FF;
    margin-bottom:15px;
}
/* ---------- Topbar ---------- */

.topbar{
    height:72px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 30px;

    gap:20px;

    background:#18181f;

    border-bottom:1px solid #2d2d35;

    position:sticky;
    top:0;
    z-index:100;
}

.topbar h1{
    color:white;
    font-size:24px;
}

.user-area{

    display:flex;

    align-items:center;

    gap:16px;

}

.status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:150px;

    height:46px;

    background:#20252a;

    border:1px solid #2d2d35;

    border-radius:12px;

    padding:0 18px;

}

.user{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:46px;

    background:#20252a;

    border:1px solid #2d2d35;

    border-radius:12px;

    padding:0 18px;

    white-space:nowrap;

}

main{
    padding:30px;
}
/* ---------- Dashboard Cards ---------- */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

    margin-top:30px;

}

.dashboard-cards{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(

                260px,

                320px

            )

        );

    justify-content:center;

    gap:24px;

    margin-top:30px;

}

.card{

    background:#18181f;

    border:1px solid #2d2d35;

    border-radius:18px;

    padding:28px;

    margin-bottom:20px;

    transition:.25s;

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.dashboard-cards .card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:220px;

}

.card:hover{

    transform:translateY(-5px);

    border-color:#9146FF;

    box-shadow:0 18px 35px rgba(145,70,255,.18);

}

.dashboard-cards .card h3{

    width:100%;

    margin:0 0 28px 0;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#9146FF;

}

.dashboard-cards .card p{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin:0;

    text-align:center;

    font-size:22px;

    font-weight:700;

    line-height:1.4;

}

.card small{

    display:block;

    font-size:14px;

    font-weight:500;

    color:#8d94a3;

    text-align:center;

}

.activity{

    margin-top:35px;

    background:#18181f;

    border:1px solid #2d2d35;

    border-radius:16px;

    padding:25px;

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.activity h2{

    margin-bottom:20px;

}
/* Aktiver Menüpunkt */

.sidebar a.active{
    background:#9146FF;
    color:white;
    font-weight:bold;
    box-shadow:0 0 20px rgba(145,70,255,.3);
}

.sidebar a.active:hover{
    background:#7d39db;
    color:white;
}
/* ---------- Page Header ---------- */

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.primary-btn{
    background:#9146FF;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    transition:all .2s ease;
}

.primary-btn:hover{
    background:#7d39db;
}

/* ---------- Tabelle ---------- */


/* ---------- Action Buttons ---------- */

.action-btn{
    text-decoration:none;
    padding:8px 12px;
    border-radius:8px;
    margin-right:8px;
    display:inline-block;
    transition:all .2s ease;
}

.edit-btn{
    background:#3b82f6;
    color:white;
}

.edit-btn:hover{
    background:#2563eb;
}

.delete-btn{
    background:#ef4444;
    color:white;
}

.delete-btn:hover{
    background:#dc2626;
}
/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    background:#9146FF;

    color:white;

    text-decoration:none;

    border:none;

    padding:12px 20px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:all .2s ease;
}

.btn:hover{

    background:#7d39db;

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(145,70,255,.25);

}

.btn-small{
    padding:6px 10px;
    font-size:14px;
    margin-right:6px;
}

.btn-danger{
    background:#ef4444;
}

.btn-danger:hover{
    background:#dc2626;
}


/* ---------- Badges ---------- */

.badge{

    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:bold;

}

.badge-success{

    background:#15803d;
    color:white;

}

.badge-danger{

    background:#b91c1c;
    color:white;

}


/* ---------- Tabellen ---------- */
.table-container{

    background:#18181f;

    border:1px solid #2d2d35;

    border-radius:16px;

    overflow:hidden;

}

.table{

    width:100%;
    border-collapse:collapse;

}

.table th{

    background:#1d2128;
    color:#cfcfcf;
    padding:16px;
    text-align:left;
    font-weight:600;

}

.table td{
    color:#e5e7eb;

    padding:16px;
    border-top:1px solid #2d2d35;
    vertical-align:middle;

}

.table tr:hover{

    background:#20252a;

}


/* ---------- Formulare ---------- */

.input{
    width:100%;
    background:#20252a;
    color:#fff;
    border:1px solid #323742;
    border-radius:12px;
    padding:14px;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.input:focus{
    background:#252932;
    border-color:#9146FF;
    box-shadow:0 0 0 3px rgba(145,70,255,.15);
}

textarea.input{
    resize:vertical;
    min-height:220px;
    font-family:Consolas, monospace;
    line-height:1.6;
}

.input::placeholder{
    color:#8d94a3;
}

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#ffffff;
}

.hint{
    color:#8d94a3;
    font-size:13px;
    margin-bottom:12px;
}


/* ---------- Einstellungsbox ---------- */

.settings-box{
    margin-top:20px;
    border:1px solid #323742;
    border-radius:12px;
    overflow:hidden;
}

.settings-box-header{
    background:#20252a;
    padding:14px 18px;
    font-weight:bold;
    color:#9146FF;
    border-bottom:1px solid #323742;
}

.settings-box textarea{
    border:none;
    border-radius:0;
    background:#18181f;
}
hr{

    border:none;

    height:1px;

    background:#2d2d35;

    margin:25px 0;

}

small{

    color:#8d94a3;

}

code{

    background:#20252a;

    padding:3px 8px;

    border-radius:6px;

    color:#cfcfcf;

}
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#18181f;
}

::-webkit-scrollbar-thumb{
    background:#3a3a45;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#9146FF;
}
/* ---------- Inputs ---------- */

.input,
input[type="text"],
input[type="password"],
input[type="number"],
select{

    width:100%;

    height:46px;

    background:#20252a;

    color:#ffffff;

    border:1px solid #323742;

    border-radius:12px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.2s;

    box-sizing:border-box;

}

.input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus {

    background: #252932;

    border-color: #9146FF;

    box-shadow: 0 0 0 3px rgba(145,70,255,.15);

}

.input::placeholder,
input::placeholder {

    color: #8d94a3;

}

/* ---------- Streamer Übersicht ---------- */

.streamers-box{

    background:#18181f;

    border:1px solid #2d2d35;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

.streamers-header,
.streamer-row{

    display:grid;

    grid-template-columns:320px 1fr 200px 110px;

    gap:20px;

    align-items:center;

    padding:18px 24px;

}

.streamers-header{

    background:#20252a;

    color:#cfcfcf;

    font-weight:bold;

}

.streamer-row{

    border-top:1px solid #2d2d35;

    transition:.2s;

}

.streamer-row:hover{

    background:#20252a;

}

.streamer-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.streamer-display{

    font-size:17px;

    font-weight:600;

    color:#ffffff;

}

.streamer-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    overflow:hidden;

    background:#20252a;

    border:2px solid #9146FF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    flex-shrink:0;

}

.streamer-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.streamer-username{

    color:#9ca3af;

    font-size:15px;

}

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    font-size:14px;

    font-weight:bold;

    white-space:nowrap;

}

.status-badge.online{

    background:#14532d;

    color:#86efac;

}

.status-badge.offline{

    background:#3a3a45;

    color:#d1d5db;

}

.streamer-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}

.streamer-actions a{

    width:40px;

    height:40px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#252932;

    border:1px solid #323742;

    color:white;

    text-decoration:none;

    transition:.2s;

}

.streamer-actions a:hover{

    background:#9146FF;

    border-color:#9146FF;

}

.empty-card{

    padding:60px;

    text-align:center;

    color:#9ca3af;

}

.discord-actions {

    display:flex;

    gap:12px;

    align-items:center;

    flex-wrap:wrap;

    margin-top:15px;

    margin-bottom:0;

}


.discord-actions form {

    margin:0;

}


.discord-actions button {

    height:45px;

}


.discord-actions .btn {

    margin:0;

}


.card {

    margin-bottom: 18px;

}


.card form:not(.filter-box) input {

    margin-bottom: 0;

}

.data-table {

    width: 100%;

    border-collapse: collapse;

}


.data-table th {

    text-align: left;

    padding: 14px;

    color: #a855f7;

    border-bottom: 1px solid #333;

}


.data-table td {

    padding: 14px;

    border-bottom: 1px solid #222;

}


.badge {

    background: #272034;

    padding: 6px 12px;

    border-radius: 12px;

    font-size: 13px;

}

.filter-box {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

}


.filter-box input,
.filter-box select,
.filter-box button {

    background: #171720;

    color: white;

    border: 1px solid #333;

    padding: 10px 15px;

    border-radius: 10px;

}


.pagination {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 20px;

}


.pagination a {

    background: #8b35ff;

    padding: 10px 20px;

    border-radius: 10px;

    color: white;

}

.log-filter {

    display:grid;

    grid-template-columns: 1fr 280px 130px;

    gap:15px;

    align-items:center;

    margin-top:45px;

    margin-bottom:35px;

}


.log-filter input,
.log-filter select,
.log-filter button {

    height:50px !important;

    margin:0 !important;

}


.log-filter .btn {

    width:100%;

    padding:0;

}

.giveaway-buttons {

    display: flex;

    gap: 10px;

    align-items: center;

    flex-wrap: wrap;

}

/* Public pages and authentication share this focused, responsive presentation. */
body.public-page, body.auth-page {
    display:block;
    min-width:0;
    min-height:100vh;
    color:#f5f3ff;
    background:radial-gradient(circle at 14% 8%,rgba(145,70,255,.18),transparent 30rem),radial-gradient(circle at 86% 92%,rgba(91,33,182,.12),transparent 28rem),#0b0b10;
}
.public-shell,.auth-shell { width:min(100% - 40px,1120px); margin:0 auto; }
.public-shell { min-height:100vh; display:flex; flex-direction:column; padding:32px 0 24px; }
.auth-shell { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px 0; }
.public-nav,.public-footer,.auth-footer { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.public-nav { justify-content:space-between; margin-bottom:48px; }
.public-footer,.auth-footer { justify-content:center; color:#9d96ab; font-size:.9rem; }
.brand { color:#fff; font-size:1.2rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.brand-mark,.landing-eyebrow,.document-eyebrow,.auth-eyebrow { color:#b88cff; }
.public-nav-links { display:flex; gap:18px; flex-wrap:wrap; }
.public-page a:not(.btn),.auth-page a:not(.btn) { color:#c8a8ff; font-weight:600; text-decoration:none; }
.public-page a:not(.btn):hover,.auth-page a:not(.btn):hover { color:#fff; text-decoration:underline; }
.public-main { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 0 48px; }
.landing-card,.document-card,.login-card { background:rgba(24,24,31,.92); border:1px solid rgba(184,140,255,.18); border-radius:20px; box-shadow:0 24px 64px rgba(0,0,0,.34),0 0 34px rgba(145,70,255,.07); }
.landing-card { width:min(100%,720px); padding:clamp(32px,6vw,64px); text-align:center; }
.landing-card h1,.document-header h1,.login-card h1 { margin:0; color:#fff; letter-spacing:-.04em; }
.landing-card h1 { font-size:clamp(2.4rem,7vw,4.2rem); }
.landing-eyebrow,.document-eyebrow { margin:0 0 12px; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.landing-lead { max-width:560px; margin:20px auto 28px; color:#d4d0dd; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.65; }
.landing-points { display:grid; gap:12px; margin:0 0 30px; color:#bdb8c9; line-height:1.6; }.landing-points p { margin:0; }
.public-page .btn,.auth-page .btn { width:100%; min-height:50px; border:1px solid transparent; border-radius:12px; font-size:1rem; }
.btn:focus-visible,.public-page a:focus-visible,.auth-page a:focus-visible,.auth-page input:focus-visible { outline:3px solid rgba(200,168,255,.9); outline-offset:3px; }
.btn:disabled { cursor:not-allowed; opacity:.55; transform:none; }
.document-main { width:min(100%,920px); margin:0 auto; padding:0 0 48px; }.document-header { margin:0 0 28px; }.document-header h1 { font-size:clamp(2rem,5vw,3rem); }
.document-card { padding:clamp(28px,5vw,52px); color:#d4d0dd; line-height:1.75; }.document-card h2 { margin:38px 0 12px; padding-top:30px; border-top:1px solid #302b3a; color:#fff; font-size:1.25rem; }.document-card h2:first-of-type { margin-top:30px; }.document-card p { margin:0 0 18px; }.document-card strong { color:#fff; }
.auth-brand { margin-bottom:22px; text-align:center; }.auth-brand .brand { display:inline-block; font-size:1.5rem; }.auth-brand p { margin:7px 0 0; color:#aaa3b5; }
.login-card { width:min(100%,460px); margin:0 auto; padding:clamp(28px,6vw,42px); }.login-card h1 { margin-bottom:28px; font-size:1.75rem; }.login-card form { display:grid; gap:18px; }.auth-page label { margin:0; color:#ebe8f0; }.auth-page input[type="text"],.auth-page input[type="password"] { height:50px; }.auth-divider { height:1px; margin:32px 0; border:0; background:#302b3a; }.twitch-login { background:#772ce8; }.twitch-login:hover { background:#6522ca; }.login-section h2 { margin:0 0 10px; color:#fff; font-size:1.15rem; }.login-section p { margin:0 0 18px; color:#bdb8c9; line-height:1.6; }
@media (max-width:640px) { .public-shell,.auth-shell { width:min(100% - 28px,1120px); }.public-shell { padding-top:22px; }.public-nav { align-items:flex-start; flex-direction:column; margin-bottom:36px; }.public-main { align-items:flex-start; padding-top:12px; }.landing-card,.document-card,.login-card { border-radius:16px; }.document-card h2 { margin-top:30px; padding-top:24px; } }
/* Alert management */
.alert-card label{display:block;margin:10px 0}.alert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.alert-grid textarea{min-height:76px}.inline-form{display:inline}.media-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #333}.alert-success{border-left:4px solid #42b883}.alert-error{border-left:4px solid #e74c3c}.muted{opacity:.75;font-size:.9em}
.animation-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;border:1px solid #444;border-radius:6px;padding:12px}.animation-settings legend{padding:0 5px}.animation-preview{grid-column:1/-1;min-height:44px;padding:12px;opacity:0;background:#7046d9;border-radius:6px;text-align:center;font-weight:bold;transform-origin:center}.animation-preview.playing{opacity:1}.animation-preview.enter-fade,.animation-preview.exit-fade{animation:previewFade var(--anim-duration) ease both}.animation-preview.enter-slide,.animation-preview.enter-slide_fade,.animation-preview.enter-fly_in{animation:previewIn var(--anim-duration) ease-out both}.animation-preview.exit-slide,.animation-preview.exit-slide_fade,.animation-preview.exit-fly_out{animation:previewOut var(--anim-duration) ease-in both}.animation-preview.enter-zoom,.animation-preview.enter-zoom_fade{animation:previewZoomIn var(--anim-duration) ease-out both}.animation-preview.exit-zoom,.animation-preview.exit-zoom_fade{animation:previewZoomOut var(--anim-duration) ease-in both}.animation-preview.enter-pop{animation:previewPop var(--anim-duration) ease-out both}.animation-preview.exit-pop{animation:previewZoomOut var(--anim-duration) ease-in both}.animation-preview.enter-bounce,.animation-preview.enter-elastic{animation:previewBounce var(--anim-duration) cubic-bezier(.2,1.6,.4,1) both}.animation-preview.exit-bounce,.animation-preview.exit-elastic{animation:previewZoomOut var(--anim-duration) ease-in both}.animation-preview.enter-spin,.animation-preview.exit-spin{animation:previewSpin var(--anim-duration) ease both}.animation-preview.enter-drop{animation:previewDrop var(--anim-duration) ease-out both}.animation-preview.exit-drop{animation:previewOut var(--anim-duration) ease-in both}.dir-left{--x:-80px;--y:0}.dir-right{--x:80px;--y:0}.dir-top{--x:0;--y:-80px}.dir-bottom{--x:0;--y:80px}@keyframes previewFade{from{opacity:0}to{opacity:var(--anim-fade)}}@keyframes previewIn{from{transform:translate(var(--x),var(--y));opacity:0}to{transform:none;opacity:1}}@keyframes previewOut{from{transform:none;opacity:1}to{transform:translate(var(--x),var(--y));opacity:0}}@keyframes previewZoomIn{from{transform:scale(.5);opacity:0}to{transform:scale(var(--anim-zoom));opacity:1}}@keyframes previewZoomOut{from{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}@keyframes previewPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes previewBounce{0%{transform:scale(.5);opacity:0}70%{transform:scale(calc(1 + var(--anim-strength)/500));opacity:1}100%{transform:scale(1)}}@keyframes previewSpin{from{transform:rotate(var(--anim-rotation));opacity:0}to{transform:rotate(0);opacity:1}}@keyframes previewDrop{from{transform:translateY(-100px);opacity:0}to{transform:none;opacity:1}}
.projectile-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:10px;border:1px solid #4f3d7a;border-radius:6px;background:rgba(112,70,217,.09)}.projectile-options strong{grid-column:1/-1}.projectile-preview{position:relative;overflow:hidden;opacity:0}.projectile-preview:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(195,249,255,.9),transparent 26%);opacity:0}.projectile-preview:after{content:"";position:absolute;top:50%;left:-30%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#55eaff 35%,#234de0);box-shadow:0 0 18px #5df5ff;transform:translateY(-50%)}.projectile-preview.dir-right:after{left:auto;right:-30%;animation:previewShotRight .32s cubic-bezier(.12,.8,.18,1) both}.projectile-preview.dir-top:after{left:50%;top:-80%;animation:previewShotTop .32s cubic-bezier(.12,.8,.18,1) both}.projectile-preview.dir-bottom:after{left:50%;top:180%;animation:previewShotBottom .32s cubic-bezier(.12,.8,.18,1) both}.projectile-preview.dir-left:after{animation:previewShotLeft .32s cubic-bezier(.12,.8,.18,1) both}.projectile-preview.impact{opacity:1;animation:previewImpact .45s ease-out both}.projectile-preview.impact:before{animation:previewFlash .35s ease-out both}@keyframes previewShotLeft{to{left:50%;transform:translate(-50%,-50%) rotate(540deg)}}@keyframes previewShotRight{to{right:50%;transform:translate(50%,-50%) rotate(-540deg)}}@keyframes previewShotTop{to{top:50%;transform:translate(-50%,-50%) rotate(540deg)}}@keyframes previewShotBottom{to{top:50%;transform:translate(-50%,-50%) rotate(-540deg)}}@keyframes previewImpact{0%{transform:scale(.8)}35%{transform:scale(1.08) translateX(3px)}100%{transform:scale(1)}}@keyframes previewFlash{from{opacity:1}to{opacity:0}}
.duration-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;border:1px solid #444;border-radius:6px;padding:10px}.duration-settings legend{padding:0 5px}.duration-settings small{grid-column:1/-1;color:#f2bf5b}.video-length{align-self:end}.custom-duration,.video-full{align-self:end}
.media-picker{display:flex;gap:7px;align-items:center}.media-picker select{min-width:0;flex:1}.editor-upload-button{white-space:nowrap}.editor-upload-status{display:block;min-height:1.2em;margin-top:4px;opacity:.85}
@keyframes previewBounce{0%{transform:scale(.5);opacity:0}70%{transform:scale(var(--anim-bounce));opacity:1}100%{transform:scale(1)}}