:root, html[data-theme="dark"]{
--ink:#080b10; --panel:#0f141c; --panel-2:#141b25; --panel-3:#1a2230;
--border:#212b38; --border-soft:#1a222d;
--text:#eef2f6; --text-muted:#8493a6; --text-dim:#57667a;
--gold:#e3a73c; --gold-dim:#8a6a2e; --live:#e2432b; --win:#3fbf7f;
--radius:10px;
--font-display:'Barlow Condensed',sans-serif;
--font-body:'Inter',sans-serif;
}
/* Helles Theme — wird per data-theme="light" auf aktiviert */
html[data-theme="light"]{
--ink:#f3f5f8; --panel:#ffffff; --panel-2:#eef1f5; --panel-3:#e6eaf0;
--border:#dde3ea; --border-soft:#e7ebf0;
--text:#141a22; --text-muted:#57667a; --text-dim:#8493a6;
--gold:#b8791f; --gold-dim:#e0c48f; --live:#c8351f; --win:#218a56;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--ink); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; min-height:100vh; transition:background .15s ease, color .15s ease;}
a{color:inherit;}
::selection{background:var(--gold); color:#1a1305;}
.topbar{
display:flex; align-items:center; gap:20px; padding:16px 24px;
border-bottom:1px solid var(--border); max-width:1200px; margin:0 auto;
}
.logo{font-family:var(--font-display); font-weight:800; font-size:24px; display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text);}
.logo-mark{width:9px; height:9px; border-radius:50%; background:var(--gold); flex-shrink:0; box-shadow:0 0 8px rgba(227,167,60,.5);}
.logo-img{height:34px; width:auto; display:block; flex-shrink:0;}
.logo-text{white-space:nowrap;}
.logo span{color:var(--gold);}
.nav{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px;}
.nav a{color:var(--text-muted); text-decoration:none;}
.nav a:hover{color:var(--text);}
.balance-pill{
background:var(--panel-2); border:1px solid var(--border); border-radius:999px;
padding:7px 14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--gold);
}
.theme-toggle{
width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
background:var(--panel-2); color:var(--text); font-size:15px;
display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--gold-dim);}
.theme-options{display:flex; gap:10px;}
.theme-option{
flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px; border-radius:8px; border:1px solid var(--border); background:var(--panel-3);
color:var(--text-muted); cursor:pointer; font-size:14px; font-weight:600;
}
.theme-option.active{border-color:var(--gold); color:var(--gold); background:rgba(227,167,60,.1);}
.container{max-width:1200px; margin:0 auto; padding:32px 24px 60px;}
.container-narrow{max-width:440px; margin:60px auto; padding:0 20px;}
h1{font-family:var(--font-display); font-weight:700; font-size:30px; margin-bottom:6px;}
h2{font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:14px;}
p.sub{color:var(--text-dim); font-size:14px; margin-bottom:24px;}
.card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:24px;}
.form-group{margin-bottom:16px;}
label{display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; font-weight:500;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select{
width:100%; padding:11px 13px; background:var(--panel-3); border:1px solid var(--border);
border-radius:8px; color:var(--text); font-size:14px; font-family:inherit;
}
input:focus, select:focus{outline:none; border-color:var(--gold-dim);}
.btn{
display:inline-block; font-family:inherit; font-weight:600; font-size:14px;
padding:11px 20px; border-radius:8px; border:1px solid var(--border);
background:transparent; color:var(--text-muted); cursor:pointer; text-decoration:none;
}
.btn-gold{background:var(--gold); color:#1a1305; border:1px solid var(--gold);}
.btn-block{width:100%; text-align:center;}
.btn-danger{border-color:var(--live); color:var(--live);}
.alert{padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}
.alert-error{background:rgba(226,75,43,.1); border:1px solid rgba(226,75,43,.35); color:#ff8a76;}
.alert-success{background:rgba(63,191,127,.1); border:1px solid rgba(63,191,127,.35); color:var(--win);}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th, td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-soft);}
th{color:var(--text-dim); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;}
tr:hover td{background:var(--panel-2);}
.badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;}
.badge-open{background:rgba(227,167,60,.12); color:var(--gold); border:1px solid rgba(227,167,60,.3);}
.badge-won{background:rgba(63,191,127,.12); color:var(--win); border:1px solid rgba(63,191,127,.3);}
.badge-lost{background:rgba(226,75,43,.12); color:var(--live); border:1px solid rgba(226,75,43,.3);}
/* --- Sport-Board (index.php) --- */
.country-block{border:1px solid var(--border-soft); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.country-header{width:100%; display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--panel); border:none; color:var(--text); font-size:15px; font-weight:600; cursor:pointer;}
.league-name{padding:11px 16px 11px 34px; background:var(--panel-2); color:var(--gold); font-size:13.5px; font-weight:600;}
.match-row{display:flex; align-items:center; gap:14px; padding:12px 16px 12px 34px; border-top:1px solid var(--border-soft); flex-wrap:wrap;}
.match-time{font-size:11.5px; color:var(--text-dim); width:120px;}
.match-teams{flex:1; min-width:180px; font-size:13.5px;}
.odds-group{display:flex; gap:6px;}
.odd-btn{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:56px; padding:6px 4px; background:var(--panel-3); border:1px solid var(--border); border-radius:6px; color:var(--text); cursor:pointer;}
.odd-btn:hover{border-color:var(--gold-dim);}
.odd-label{font-size:9.5px; color:var(--text-dim); font-weight:600;}
.odd-value{font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;}
/* --- Admin --- */
.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.admin-sidebar{border-right:1px solid var(--border-soft); padding:20px 12px;}
.admin-sidebar a{display:block; padding:10px 12px; border-radius:8px; color:var(--text-muted); text-decoration:none; font-size:14px; margin-bottom:2px;}
.admin-sidebar a.active, .admin-sidebar a:hover{background:var(--panel-2); color:var(--text);}
.admin-main{padding:28px 32px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:28px;}
.stat-card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px;}
.stat-card .label{font-size:12px; color:var(--text-dim); margin-bottom:6px;}
.stat-card .value{font-family:var(--font-display); font-size:26px; font-weight:700;}
/* --- Changelog-Accordion (admin/status.php) --- */
.changelog-entry{border:1px solid var(--border-soft); border-radius:8px; margin-bottom:10px; overflow:hidden; background:var(--panel-2);}
.changelog-entry summary{
padding:13px 16px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:16px;
color:var(--text); list-style:none; display:flex; align-items:center; gap:8px;
}
.changelog-entry summary::-webkit-details-marker{display:none;}
.changelog-entry summary::before{content:'▸'; color:var(--gold); font-size:13px; transition:transform .15s;}
.changelog-entry[open] summary::before{transform:rotate(90deg);}
.changelog-body{padding:4px 18px 16px 34px; border-top:1px solid var(--border-soft);}
.changelog-section{margin-top:12px;}
.changelog-section-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gold); margin-bottom:6px;}
.changelog-body ul{padding-left:18px; margin:0;}
.changelog-body li{color:var(--text-muted); font-size:13.5px; line-height:1.6; margin-bottom:4px;}
.changelog-body code{background:var(--panel-3); padding:1px 5px; border-radius:4px; font-size:12px; color:var(--gold);}
@media (max-width:820px){
.admin-shell{grid-template-columns:1fr;}
.admin-sidebar{display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border-soft);}
.admin-sidebar a{flex:0 0 auto; white-space:nowrap;}
}
/* --- Wiederverwendbare responsive Layout-Helfer --- */
.board-layout{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.admin-split{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
@media (max-width:900px){
.board-layout{grid-template-columns:1fr;}
.board-layout > nav{display:flex; overflow-x:auto; gap:8px; padding:10px 4px; -webkit-overflow-scrolling:touch;}
.board-layout > nav a{flex:0 0 auto; white-space:nowrap; margin-bottom:0;}
.two-col{grid-template-columns:1fr;}
.admin-split{grid-template-columns:1fr;}
}
@media (max-width:700px){
.topbar{flex-wrap:wrap; gap:10px; padding:14px 16px;}
.nav{gap:8px; width:100%; justify-content:flex-start;}
.container{padding:20px 16px 50px;}
.match-time{width:auto;}
#quickBet{left:12px !important; right:12px !important; width:auto !important; bottom:12px !important;}
.stat-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
.stat-grid{grid-template-columns:1fr;}
h1{font-size:24px;}
}