@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
    --navy:#0f1f2e;
    --navy-soft:#16293b;
    --dune:#d9c9a3;
    --tide:#3e7c97;
    --paper:#f6f3ec;
    --ink:#182129;
    --muted:#6b7280;
    --border:#e4ddcb;
    --accent:#3e7c97;
    --approve:#3f8f5f;
    --reject:#c0524a;
    --post:#8a5cb0;
    --card-bg:#ffffff;
    --bg:#f6f3ec;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:28px; --sp-7:40px;
    --radius:12px;
}

[data-theme="dark"]{
    --navy:#0a1622; --navy-soft:#101f2e; --dune:#e3c98e; --tide:#5fa3c2;
    --paper:#131b22; --ink:#e8e6df; --muted:#8b95a0; --border:#293440;
    --accent:#5fa3c2; --approve:#4fae74; --reject:#d97066; --post:#a878d1;
    --card-bg:#1a232c; --bg:#131b22;
}
[data-theme="dark"] body{ background:var(--bg); }
[data-theme="dark"] textarea,
[data-theme="dark"] .text-input,
[data-theme="dark"] .select-inline{ background:#0f1720; color:var(--ink); }
[data-theme="dark"] .card,
[data-theme="dark"] .history-row,
[data-theme="dark"] .login-box{ box-shadow:none; }
[data-theme="dark"] .chat-assistant{ background:var(--card-bg); }
[data-theme="dark"] code{ background:#26313c; color:var(--dune); }

*{box-sizing:border-box;}
html{-webkit-tap-highlight-color:transparent;}
body{
    margin:0;
    font-family:'IBM Plex Sans',sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    padding-bottom: calc(76px + var(--safe-bottom));
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; margin:0;}
code{font-family:'IBM Plex Mono',monospace; background:#eee6d3; padding:1px 5px; border-radius:4px; font-size:0.9em;}

/* --- Top App Header --- */
.app-header{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px var(--sp-5);
    min-height:68px;
    background:var(--navy);
    color:#fff;
}
.app-header .brand{
    font-family:'Fraunces',serif; font-weight:600; font-size:24px;
}
.header-actions{display:flex; align-items:center; gap:var(--sp-3);}
.icon-btn{
    background:none; border:none; color:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:10px;
}
.icon-btn svg{width:26px; height:26px;}
.icon-btn:hover{background:rgba(255,255,255,0.1);}

/* --- Drawer-Menü --- */
.menu-overlay{
    position:fixed; inset:0; background:rgba(15,31,46,0.4);
    opacity:0; pointer-events:none; transition:opacity 0.25s ease;
    z-index:40;
}
.menu-overlay.is-open{opacity:1; pointer-events:auto;}

.menu-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(280px, 82vw);
    background:var(--card-bg); z-index:50; color:var(--ink);
    transform:translateX(100%); transition:transform 0.28s ease;
    display:flex; flex-direction:column; padding:var(--sp-5);
    box-shadow:-8px 0 24px rgba(0,0,0,0.12);
}
.menu-drawer.is-open{transform:translateX(0);}
.menu-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--sp-5); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border);
}
.menu-user{font-size:13px; color:var(--muted); word-break:break-all;}
.menu-item{
    display:flex; align-items:center; gap:10px;
    padding:13px 12px; border-radius:8px; margin-bottom:4px;
    background:none; border:none; width:100%; text-align:left;
    font-size:15px; font-family:inherit; color:var(--ink); cursor:pointer;
    text-decoration:none;
}
.menu-item:hover{background:var(--bg);}
.menu-item-accent{color:var(--tide); font-weight:600;}
.menu-item svg{flex-shrink:0;}

/* --- Flash Messages --- */
.flash-section{max-width:720px; margin:var(--sp-3) auto 0; padding:0 var(--sp-4);}
.flash{padding:var(--sp-2) var(--sp-3); border-radius:8px; font-size:13px; margin-bottom:var(--sp-2);}
.flash-success{background:#dcfce7; color:#166534;}
.flash-error{background:#fee2e2; color:#991b1b;}
[data-theme="dark"] .flash-success{background:#0f2e1c; color:#6ee7a0;}
[data-theme="dark"] .flash-error{background:#3a1616; color:#f5a3a3;}

/* --- Tab Navigation: Bottom Toolbar (mobil), Top Tabs (Desktop) --- */
.tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:35;
    display:flex; justify-content:space-around;
    background:var(--card-bg); border-top:1px solid var(--border);
    padding:var(--sp-2) var(--sp-1) calc(var(--sp-2) + var(--safe-bottom));
}
.tab-btn{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer;
    color:var(--muted); font-family:inherit; font-size:10.5px;
    padding:var(--sp-2) var(--sp-1); border-radius:10px; flex:1; max-width:90px;
}
.tab-btn svg{width:20px; height:20px;}
.tab-btn.is-active{color:var(--tide);}
.badge{
    position:absolute; top:2px; right:14px;
    background:var(--reject); color:#fff; font-size:10px; font-weight:600;
    min-width:16px; height:16px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* --- Main Content --- */
.app-main{max-width:720px; margin:0 auto; padding:var(--sp-5) var(--sp-4) var(--sp-6);}
.tab-panel{display:none;}
.tab-panel.is-active{display:block; animation:panel-in 0.25s ease;}
@keyframes panel-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.panel-title{font-size:19px; display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4);}
.panel-title-spaced{margin-top:var(--sp-6);}
.panel-title .count{
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
    color:var(--muted); background:var(--bg); padding:3px 10px; border-radius:10px;
}

.empty{color:var(--muted); font-style:italic; font-size:14px; padding:var(--sp-3) 0;}

/* --- Cards --- */
.card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:var(--sp-5);
    margin-bottom:var(--sp-4);
}
.card-approved{border-left:4px solid var(--approve);}
.card-heading{font-size:16px; margin:0 0 var(--sp-3);}

.card-meta{display:flex; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-3); flex-wrap:wrap;}
.platform{
    font-size:11px; font-weight:600; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; letter-spacing:0.03em;
}
.platform-facebook{background:#e8f1fe; color:#1877f2;}
.platform-instagram{background:#fbe8fb; color:#c026d3;}
.platform-linkedin{background:#e3eef9; color:#0a66c2;}
[data-theme="dark"] .platform-facebook{background:#132338; color:#7ab3f8;}
[data-theme="dark"] .platform-instagram{background:#301c30; color:#e28ee2;}
[data-theme="dark"] .platform-linkedin{background:#122333; color:#7cb6e8;}
.topic{color:var(--muted); font-size:13px;}

textarea, .text-input{
    width:100%; font-family:inherit; font-size:15px;
    padding:var(--sp-3); border:1px solid var(--border); border-radius:10px;
    resize:vertical; background:var(--bg); margin-bottom:var(--sp-3);
}
label{display:block; font-size:13px; font-weight:600; margin:var(--sp-3) 0 var(--sp-1); color:var(--navy);}

.preview-img{max-width:100%; border-radius:10px; display:block; margin-bottom:var(--sp-3);}
.post-text{white-space:pre-wrap; font-size:14.5px; margin:0 0 var(--sp-3);}
.hint{font-size:12px; color:var(--muted); margin:var(--sp-2) 0 0; line-height:1.5;}

.select-inline{
    padding:9px 12px; border-radius:8px; border:1px solid var(--border);
    font-family:inherit; font-size:14px; background:var(--bg);
}

.actions{display:flex; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap;}

/* --- Buttons: nur EINE kraeftige Farbe pro Karte, Rest dezent --- */
.btn{
    border:1px solid transparent; border-radius:10px; padding:10px var(--sp-4);
    font-size:13.5px; font-weight:600; cursor:pointer;
    transition:filter 0.15s ease, transform 0.1s ease, background 0.15s ease;
    display:inline-flex; align-items:center; gap:var(--sp-2);
}
.btn svg{flex-shrink:0;}
.btn:active{transform:scale(0.97);}
.btn-sm{padding:7px var(--sp-3); font-size:13px;}

/* Solid - fuer die EINE Hauptaktion pro Karte */
.btn-primary{background:var(--navy); color:#fff;}
.btn-approve{background:var(--approve); color:#fff;}

/* Ghost/Outline - fuer alle sekundaeren Aktionen (ruhiger, weniger Konkurrenz) */
.btn-secondary{background:transparent; border-color:var(--border); color:var(--ink);}
.btn-post{background:transparent; border-color:var(--tide); color:var(--tide);}
.btn-reject{background:transparent; border-color:var(--reject); color:var(--reject);}

.btn:hover{filter:brightness(1.06);}
.btn-secondary:hover, .btn-post:hover, .btn-reject:hover{background:var(--bg);}

/* --- Historie als Karten (mobilfreundlicher als Tabelle) --- */
.history-list{display:flex; flex-direction:column; gap:10px;}
.history-row{
    background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
    padding:var(--sp-3) var(--sp-4);
}
.history-row-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-1);}
.history-status{font-size:12px; font-weight:600; text-transform:capitalize;}
.history-topic{margin:0 0 var(--sp-1); font-size:14px;}
.history-row.status-posted .history-status{color:var(--approve);}
.history-row.status-failed .history-status{color:var(--reject);}
.history-row.status-rejected .history-status{color:var(--muted);}

/* --- Brumm Chat --- */
.chat-list{display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-4);}
.chat-bubble{
    max-width:85%; padding:var(--sp-3) var(--sp-4); border-radius:16px; font-size:14.5px;
    white-space:pre-wrap; line-height:1.5;
}
.chat-user{
    align-self:flex-end; background:var(--navy); color:#fff;
    border-bottom-right-radius:4px;
}
.chat-assistant{
    align-self:flex-start; background:var(--card-bg); border:1px solid var(--border);
    border-bottom-left-radius:4px;
}
.chat-form{display:flex; gap:var(--sp-2); align-items:flex-end; position:sticky; bottom:76px;}
.chat-form textarea{margin-bottom:0; flex:1;}
@media (min-width:769px){
    .chat-form{position:static;}
}

/* --- Einstellungen: Kachel-Navigation --- */
.settings-tiles{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:var(--sp-3);
    margin-bottom:var(--sp-5);
}
.settings-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--sp-2);
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
    padding:var(--sp-4) var(--sp-2);
    cursor:pointer; color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:500;
    text-align:center; line-height:1.3;
    transition:border-color 0.15s ease, background 0.15s ease;
}
.settings-tile:hover{border-color:var(--tide);}
.settings-tile.is-active{border-color:var(--tide); background:var(--bg); color:var(--tide);}
.settings-tile svg{flex-shrink:0;}
.settings-section{animation:panel-in 0.2s ease;}

/* --- Login / Unsubscribe Boxen --- */
.login-box{
    max-width:360px; margin:64px auto; padding:var(--sp-6);
    background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
}
.login-box h1{font-size:22px; text-align:center; margin-bottom:var(--sp-5);}
.login-box label{margin:var(--sp-3) 0 var(--sp-1);}
.login-box input{
    width:100%; padding:11px var(--sp-3); border:1px solid var(--border);
    border-radius:10px; font-size:15px; font-family:inherit; background:var(--bg);
}
.login-box button{width:100%; margin-top:var(--sp-4); padding:13px; justify-content:center;}
.login-error{color:var(--reject); font-size:13px; text-align:center;}
.login-success{color:var(--approve); font-size:14px; text-align:center;}

/* --- Desktop: Tabs oben statt Toolbar unten --- */
@media (min-width:769px){
    body{padding-bottom:0;}
    .tabbar{
        position:sticky; top:68px; bottom:auto;
        justify-content:flex-start; gap:6px; padding:8px 24px;
        max-width:720px; margin:0 auto; border-top:none; border-bottom:1px solid var(--border);
    }
    .tab-btn{
        flex-direction:row; flex:none; max-width:none;
        font-size:14px; padding:9px 16px; gap:7px;
    }
    .tab-btn.is-active{background:var(--bg); font-weight:600;}
    .badge{position:static; margin-left:2px;}
    .app-main{padding-top:24px;}
}

@media (prefers-reduced-motion: reduce){
    .tab-panel.is-active{animation:none;}
    .menu-drawer, .menu-overlay, .btn{transition:none;}
}