/* Admin-Portal (admin.melotunesmusic.de) — Stylesheet.
   Bis 2026-08-09 lag das als <style>-Block in admin/index.html.
   Ausgelagert, damit der Umbau zur melotunesmusic-Schaltzentrale
   ueberschaubar bleibt (docs/admin-restructure-plan.md, Etappe 1).

   Cache-Bust: die ?v= in admin/index.html bei jeder Aenderung hochzaehlen.
   Dark-only, keine Theme-Umschaltung. */

:root {
  --bg:        #0c0c0f;
  --surface:   #131318;
  --surface2:  #1a1a22;
  --surface3:  #202029;
  --border:    #282835;
  --border2:   #333345;
  --pur:       #7B45C8;
  --pur-light: #9B6BD4;
  --pur-mid:   #6d28d9;
  --grad:      linear-gradient(135deg, #4C1D95 0%, #6B3CB8 60%, #9B6BD4 100%);
  --grad-btn:  linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
  --grad-soft: rgba(124,58,237,0.10);
  --grad-glow: rgba(124,58,237,0.22);
  --bpur:      rgba(124,58,237,0.30);
  --text:      #eeeaf8;
  --text2:     #b8b0d0;
  --text3:     #8878a8;
  --text4:     #5a5070;
  --green:     #34d399;
  --green-dim: rgba(52,211,153,0.12);
  --red:       #f87171;
  --red-dim:   rgba(248,113,113,0.12);
  --amber:     #fbbf24;
  --amber-dim: rgba(251,191,36,0.12);
  --blue:      #60a5fa;
  --blue-dim:  rgba(96,165,250,0.12);
  --mono: 'Space Mono', monospace;
  --sans: 'DM Sans', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;overscroll-behavior:none;}

/* ── NOISE OVERLAY ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.5;
}

/* ── LOGIN SCREEN ── */
#login-screen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
#login-screen::after{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.login-card{
  position:relative;z-index:1;
  width:100%;max-width:400px;padding:20px;
}
.login-logo{
  text-align:center;margin-bottom:40px;
}
.login-logo-mark{
  width:56px;height:56px;border-radius:16px;
  background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:16px;
  box-shadow:0 0 40px rgba(124,58,237,0.4);
}
.login-title{
  font-family:var(--mono);font-size:13px;letter-spacing:3px;
  color:var(--text3);text-transform:uppercase;
}
.login-sub{
  font-size:22px;font-weight:600;color:var(--text);margin-top:6px;
}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-form label{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--mono);color:var(--text3);
  display:block;margin-bottom:6px;
}
.login-form input{
  width:100%;padding:13px 16px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;color:var(--text);font-family:var(--sans);font-size:15px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.login-form input:focus{border-color:var(--pur);box-shadow:0 0 0 3px var(--grad-soft);}
.login-btn{
  width:100%;padding:14px;margin-top:6px;
  background:var(--grad-btn);border:none;border-radius:10px;
  color:#fff;font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;transition:opacity .2s,transform .15s;
  letter-spacing:0.3px;
}
.login-btn:hover{opacity:0.9;transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.login-error{
  padding:12px 16px;background:var(--red-dim);border:1px solid rgba(248,113,113,0.25);
  border-radius:10px;color:var(--red);font-size:14px;text-align:center;
  display:none;
}

/* ── APP LAYOUT ── */
#app{display:none;height:100vh;overflow:hidden;}

/* SIDEBAR */
.sidebar{
  width:236px;background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
}
.sidebar-logo{
  padding:24px 20px 20px;border-bottom:1px solid var(--border);
}
.sidebar-logo-row{display:flex;align-items:center;gap:11px;}
.sidebar-logo-mark{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;
}
.sidebar-logo-name{font-size:15px;font-weight:600;color:var(--text);}
.sidebar-logo-badge{
  font-family:var(--mono);font-size:8px;letter-spacing:2px;
  color:var(--pur-light);text-transform:uppercase;margin-top:2px;
}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;}
.nav-section-lbl{
  font-family:var(--mono);font-size:9px;letter-spacing:3px;
  color:var(--text4);text-transform:uppercase;padding:10px 10px 5px;
}
.nav-btn{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;border:none;
  background:none;color:var(--text2);font-family:var(--sans);font-size:14px;
  cursor:pointer;transition:background .15s,color .15s;width:100%;text-align:left;
}
.nav-btn:hover{background:var(--surface2);color:var(--text);}
.nav-btn.active{background:var(--grad-soft);color:var(--pur-light);border:1px solid var(--bpur);}
.nav-btn .nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.sidebar-footer{
  padding:16px 14px;border-top:1px solid var(--border);
}
.admin-badge{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface2);border-radius:8px;margin-bottom:10px;
}
.admin-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;
}
.admin-email{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logout-btn{
  width:100%;padding:9px;background:none;border:1px solid var(--border2);
  border-radius:8px;color:var(--text3);font-family:var(--sans);font-size:13px;
  cursor:pointer;transition:all .15s;
}
.logout-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-dim);}

/* MAIN */
.main{flex:1;margin-left:236px;min-width:0;height:100vh;overflow-y:auto;position:relative;z-index:1;}
.page-header{
  padding:22px 36px 18px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:10;
}
.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.page-title{font-size:22px;font-weight:600;color:var(--text);}
.page-sub{font-size:13px;color:var(--text3);margin-top:3px;font-family:var(--mono);}
.page-content{padding:28px 36px;}

/* VIEWS */
.view{display:none;}
.view.active{display:block;}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;position:relative;overflow:hidden;transition:border-color .2s;
}
.stat-card:hover{border-color:var(--border2);}
.stat-card::before{
  content:'';position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:var(--card-glow,var(--grad-soft));filter:blur(20px);
  pointer-events:none;
}
.stat-card.green{--card-glow:rgba(52,211,153,0.15);}
.stat-card.blue{--card-glow:rgba(96,165,250,0.15);}
.stat-card.amber{--card-glow:rgba(251,191,36,0.15);}
.stat-icon{font-size:20px;margin-bottom:12px;}
.stat-value{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--text);line-height:1;}
.stat-label{font-size:12px;color:var(--text3);margin-top:6px;letter-spacing:0.3px;}

/* SECTION HEADER */
.section-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
}
.section-title{font-size:16px;font-weight:600;color:var(--text);}

/* BUTTONS */
.btn{
  padding:9px 18px;border-radius:8px;border:none;
  font-family:var(--sans);font-size:14px;font-weight:500;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:7px;
}
.btn-primary{background:var(--grad-btn);color:#fff;}
.btn-primary:hover{opacity:0.88;transform:translateY(-1px);}
.btn-secondary{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);}
.btn-secondary:hover{border-color:var(--border2);color:var(--text);background:var(--surface3);}
.btn-danger{background:var(--red-dim);border:1px solid rgba(248,113,113,0.25);color:var(--red);}
.btn-danger:hover{background:rgba(248,113,113,0.2);}
.btn-sm{padding:6px 13px;font-size:13px;}

/* TABLE */
.table-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
}
table{width:100%;border-collapse:collapse;}
thead th{
  padding:13px 18px;text-align:left;
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text4);
  border-bottom:1px solid var(--border);background:var(--surface2);
}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface2);}
tbody td{padding:14px 18px;font-size:14px;color:var(--text2);vertical-align:middle;}
.td-main{color:var(--text);font-weight:500;}
.td-mono{font-family:var(--mono);font-size:12px;}

/* BADGES */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;
}
.badge-green{background:var(--green-dim);color:var(--green);}
.badge-red{background:var(--red-dim);color:var(--red);}
.badge-amber{background:var(--amber-dim);color:var(--amber);}
.badge-blue{background:var(--blue-dim);color:var(--blue);}
.badge-pur{background:var(--grad-soft);color:var(--pur-light);}
.badge::before{content:'●';font-size:8px;}

/* MODAL */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  z-index:500;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:16px;width:100%;max-width:480px;
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.96) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-header{
  padding:22px 24px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{font-size:17px;font-weight:600;color:var(--text);}
.modal-close{
  width:30px;height:30px;border-radius:8px;border:none;
  background:var(--surface2);color:var(--text3);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.modal-close:hover{background:var(--surface3);color:var(--text);}
.modal-body{padding:24px;}
.modal-footer{
  padding:16px 24px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;
}
.form-group{margin-bottom:18px;}
.form-group:last-child{margin-bottom:0;}
.form-label{
  display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;
}
.form-input{
  width:100%;padding:11px 14px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:9px;color:var(--text);font-family:var(--sans);font-size:14px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-input:focus{border-color:var(--pur);box-shadow:0 0 0 3px var(--grad-soft);}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238878a8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
select.form-input option{background:var(--surface2);color:var(--text);}
.form-hint{font-size:12px;color:var(--text4);margin-top:6px;}

/* EMPTY STATE */
.empty-state{
  padding:60px 20px;text-align:center;color:var(--text3);
}
.empty-state-icon{font-size:36px;margin-bottom:14px;opacity:0.4;}
.empty-state-text{font-size:15px;}

/* TOAST */
.toast{
  position:fixed;bottom:28px;right:28px;z-index:999;
  padding:13px 20px;border-radius:10px;font-size:14px;font-weight:500;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
  animation:toastIn .25s ease;display:none;align-items:center;gap:9px;
}
.toast.show{display:flex;}
.toast-success{background:#1a3a2a;border:1px solid rgba(52,211,153,0.3);color:var(--green);}
.toast-error{background:#3a1a1a;border:1px solid rgba(248,113,113,0.3);color:var(--red);}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* STUDIO DETAIL PANEL */
.detail-panel{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:22px;margin-bottom:20px;display:none;
}
.detail-panel.open{display:block;}
.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.detail-title{font-size:16px;font-weight:600;color:var(--text);}

/* LOADING */
.loading-row td{text-align:center;padding:40px;color:var(--text4);}
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--border2);border-top-color:var(--pur-light);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* STATUS SELECT */
.status-select{
  padding:5px 10px;background:var(--surface2);border:1px solid var(--border2);
  border-radius:7px;color:var(--text);font-family:var(--sans);font-size:13px;
  outline:none;cursor:pointer;
}

/* ── ICONS (SVG sprite) ── */
.icon{
  display:inline-block;width:1em;height:1em;
  vertical-align:-0.15em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}
.icon-lg{width:1.4em;height:1.4em;}
.icon-xl{font-size:40px;width:1em;height:1em;}
.btn .icon, .nav-btn .icon, .logout-btn .icon, .modal-close .icon{
  width:1.15em;height:1.15em;
}
.stat-icon .icon, .empty-state-icon .icon{font-size:1em;}
.sidebar-logo-mark .icon, .login-logo-mark .icon, .admin-avatar .icon{
  width:0.9em;height:0.9em;stroke-width:1.8;
}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text4);}

/* ── CARD GRID (reusable for all admin sections) ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px;}
.info-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;position:relative;overflow:hidden;transition:border-color .2s;
}
.info-card:hover{border-color:var(--border2);}
.info-card-value{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1.1;}
.info-card-label{font-size:12px;color:var(--text3);margin-top:5px;}
.info-card-value.green{color:var(--green);}
.info-card-value.red{color:var(--red);}
.info-card-value.amber{color:var(--amber);}
.info-card-value.blue{color:var(--blue);}

/* ── ACTION BOX ── */
.action-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px;margin-bottom:18px;
}
.action-box-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px;}
.action-box-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.action-box-info{font-size:13px;color:var(--text3);line-height:1.6;}
.action-box-info strong{color:var(--text);}

/* ── LAST RUN BOX ── */
.last-run-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px 20px;
}
.last-run-label{font-size:13px;color:var(--text3);margin-bottom:4px;}
.last-run-value{font-size:14px;color:var(--text);}

/* ── KEY TYPE BADGE ── */
.key-badge{
  display:inline-block;padding:2px 9px;border-radius:5px;
  font-size:11px;font-weight:500;color:#fff;
}
.key-badge-rapidapi{background:#3b82f6;}
.key-badge-atd{background:#7B45C8;}
.key-badge-spotscraper{background:#10b981;}
.key-badge-spotify_scraper{background:#f59e0b;}
.key-badge-shlabs{background:#a855f7;}
.key-badge-anthropic{background:#d97706;}
.key-badge-gemini{background:#2563eb;}
.key-badge-ai_provider{background:#059669;}

/* ── STATUS DOT ── */
.status-active{color:var(--green);}
.status-inactive{color:var(--red);}
.status-badge{
  display:inline-block;padding:1px 9px;border-radius:5px;
  font-size:11px;font-weight:500;color:#fff;
}
.status-badge-done{background:var(--green);}
.status-badge-running{background:var(--amber);}
.status-badge-error{background:var(--red);}

/* ── TABLE MOBILE FIX ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ── MOBILE HAMBURGER ── */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:56px;background:var(--bg);border-bottom:1px solid var(--border);
  padding:0 16px;align-items:center;gap:12px;
}
.hamburger{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border2);
  background:none;color:var(--text);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.hamburger:hover{background:var(--surface2);}
.mobile-logo{font-size:15px;font-weight:600;color:var(--text);}
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:190;
}
.sidebar-overlay.open{display:block;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .mobile-header{display:flex;}
  .sidebar{
    top:56px;bottom:0;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-logo{display:none;}
  .sidebar-overlay{top:56px;}
  .main{margin-left:0;width:100%;padding-top:56px;height:100vh;}
  .page-header{padding:20px 16px 16px;top:0;background:var(--bg);z-index:10;}
  .page-content{padding:20px 16px;max-width:100%;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px;}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-value{font-size:24px;}
  .stat-card{padding:16px;border-radius:12px;}
  .stat-icon{margin-bottom:8px;font-size:18px;}
  .stat-label{font-size:11px;}
  .info-card-value{font-size:20px;}
  .info-card{padding:14px 16px;border-radius:10px;}
  .info-card-label{font-size:11px;}
  .page-title{font-size:18px;}
  .page-sub{font-size:12px;}
  .page-header-row{flex-wrap:wrap;gap:10px;}
  .section-header{flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .section-title{font-size:15px;}
  .action-box{padding:16px;border-radius:12px;}
  .action-box-title{font-size:14px;}
  .action-box-row{flex-direction:column;align-items:stretch;gap:10px;}
  .action-box-row .btn{width:100%;justify-content:center;}
  .action-box-info{font-size:12px;}
  .modal{margin:10px;max-width:calc(100vw - 20px);}
  .modal-body{padding:18px;}
  .modal-header{padding:18px 18px 14px;}
  .modal-footer{padding:14px 18px;}
  .btn{padding:10px 16px;font-size:13px;border-radius:8px;}
  .btn-sm{padding:7px 13px;font-size:12px;}
  tbody td{padding:12px 14px;font-size:13px;}
  thead th{padding:10px 14px;font-size:9px;letter-spacing:1.5px;}
  .table-wrap{border-radius:0;margin-left:-16px;margin-right:-16px;border-left:none;border-right:none;}
  .last-run-box{padding:14px 16px;border-radius:10px;}
  .last-run-label{font-size:12px;}
  .last-run-value{font-size:13px;}
  .sidebar-footer{padding:12px;}
  .admin-badge{padding:8px 10px;}
  .admin-email{font-size:11px;}
  .form-input{padding:12px 14px;font-size:14px;}
  .form-label{font-size:9px;}
  .login-card{padding:16px;}
  .login-sub{font-size:20px;}
  .detail-panel{padding:16px;}
  .empty-state{padding:40px 16px;}
  .toast{bottom:16px;right:16px;left:16px;font-size:13px;padding:12px 16px;}
}
@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .card-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .stat-value{font-size:20px;}
  .stat-label{font-size:10px;}
  .stat-card{padding:12px;}
  .stat-icon{font-size:16px;margin-bottom:6px;}
  .page-header{padding:16px 12px 12px;}
  .page-content{padding:14px 12px;}
  .page-title{font-size:16px;}
  .page-sub{font-size:11px;}
  .btn{padding:8px 14px;font-size:12px;}
  .btn-sm{padding:5px 10px;font-size:11px;}
  .info-card-value{font-size:18px;}
  .info-card{padding:10px 12px;}
  .table-wrap{margin-left:-12px;margin-right:-12px;}
  tbody td{padding:10px;font-size:12px;}
  thead th{padding:8px 10px;font-size:8px;}
  .section-title{font-size:13px;}
  .action-box{padding:12px;}
}

/* ══ BLOG: LIST + EDITOR ═══════════════════════════════════════════════════
   Self-contained block, kept at the end of the stylesheet so its own media
   queries win over the generic mobile rules above. All touch targets are
   >=40px and no container scrolls horizontally on a phone. */

/* --- iOS zoom guard: anything under 16px zooms the viewport on focus.
       The generic mobile rule sets .form-input to 14px; these win on type. --- */
@media(max-width:768px){
  input.form-input, textarea.form-input, select.form-input{font-size:16px;}
}

/* ── Toolbar ── */
.bl-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.bl-search{position:relative;flex:1 1 240px;min-width:0;max-width:400px;}
.bl-search input{
  width:100%;padding:10px 34px 10px 36px;background:var(--surface);
  border:1px solid var(--border2);border-radius:9px;color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;
}
.bl-search input:focus{border-color:var(--pur);box-shadow:0 0 0 3px var(--grad-soft);}
.bl-search .bl-si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:15px;pointer-events:none;}
.bl-search .bl-sx{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:none;background:none;color:var(--text3);
  cursor:pointer;border-radius:6px;display:none;align-items:center;justify-content:center;font-size:13px;
}
.bl-search.has-val .bl-sx{display:flex;}
.bl-search .bl-sx:hover{background:var(--surface3);color:var(--text);}
.bl-chips{display:flex;gap:6px;flex-shrink:0;}
.bl-chip{
  padding:9px 14px;border-radius:8px;border:1px solid var(--border2);
  background:var(--surface);color:var(--text2);font-family:var(--sans);font-size:13px;
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.bl-chip:hover{color:var(--text);border-color:var(--border2);background:var(--surface2);}
.bl-chip.on{background:var(--grad-soft);border-color:var(--bpur);color:var(--pur-light);}
.bl-chip .n{opacity:.6;margin-left:5px;font-family:var(--mono);font-size:11px;}
.bl-catsel{
  padding:9px 30px 9px 13px;border-radius:8px;border:1px solid var(--border2);
  background:var(--surface);color:var(--text2);font-family:var(--sans);font-size:13px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238878a8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.bl-catsel option{background:var(--surface2);color:var(--text);}
.bl-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text4);white-space:nowrap;}

/* ── Rows (one row = one article, both languages) ── */
.bl-rows{display:flex;flex-direction:column;gap:8px;}
.bl-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto 132px 104px 156px auto;
  gap:16px;align-items:center;
  padding:12px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;transition:border-color .15s,background .15s;
}
.bl-row:hover{border-color:var(--border2);background:var(--surface2);}
.bl-thumb{
  width:78px;height:46px;border-radius:7px;object-fit:cover;
  background:var(--surface3);border:1px solid var(--border);flex-shrink:0;display:block;
}
.bl-thumb-ph{display:grid;place-items:center;color:var(--text4);font-size:16px;}
.bl-ti{min-width:0;}
.bl-t{
  font-size:14px;font-weight:500;color:var(--text);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-slug{
  font-family:var(--mono);font-size:11.5px;color:var(--text3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bl-langs{display:flex;gap:6px;flex-shrink:0;}
.bl-lang{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border-radius:8px;border:1px solid var(--border2);background:var(--surface2);
  color:var(--text2);font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.bl-lang:hover{border-color:var(--bpur);color:var(--text);}
.bl-lang .d{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
.bl-lang.is-draft{color:var(--amber);border-color:rgba(251,191,36,.32);}
.bl-lang.is-draft .d{background:var(--amber);}
.bl-lang.is-missing{color:var(--text4);border-style:dashed;}
.bl-lang.is-missing .d{background:var(--text4);}
.bl-cat{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--bpur);background:var(--grad-soft);color:var(--pur-light);white-space:nowrap;
}
.bl-cat.c-updates{border-color:rgba(96,165,250,.35);background:var(--blue-dim);color:var(--blue);}
.bl-cat.c-guides{border-color:var(--bpur);background:var(--grad-soft);color:var(--pur-light);}
.bl-cat.c-insights{border-color:rgba(52,211,153,.3);background:var(--green-dim);color:var(--green);}
.bl-cat.c-industry{border-color:rgba(251,191,36,.3);background:var(--amber-dim);color:var(--amber);}
.bl-cat.c-none{border-color:var(--border2);background:none;color:var(--text4);}
.bl-date{font-family:var(--mono);font-size:12px;color:var(--text2);white-space:nowrap;}
.bl-nl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;}
.bl-nl.sent{color:var(--green);}
.bl-nl.open{color:var(--text4);}
.bl-nl .icon{font-size:13px;}
.bl-act{display:flex;gap:6px;flex-shrink:0;}
.bl-ico{
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--border2);background:var(--surface2);
  color:var(--text3);cursor:pointer;transition:all .15s;font-size:15px;
}
.bl-ico:hover{border-color:var(--bpur);color:var(--pur-light);background:var(--surface3);}
.bl-ico.danger:hover{border-color:rgba(248,113,113,.4);color:var(--red);background:var(--red-dim);}
.bl-meta{display:contents;}

/* ── Row action menu (dropdown on desktop, bottom sheet on phones) ── */
.bl-menu-bd{position:fixed;inset:0;z-index:600;background:transparent;}
.bl-menu{
  position:fixed;z-index:601;min-width:230px;padding:6px;
  background:var(--surface2);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.bl-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;border:none;border-radius:8px;background:none;
  color:var(--text2);font-family:var(--sans);font-size:14px;text-align:left;cursor:pointer;
}
.bl-menu button:hover{background:var(--surface3);color:var(--text);}
.bl-menu button.danger{color:var(--red);}
.bl-menu button.danger:hover{background:var(--red-dim);}
.bl-menu button[disabled]{opacity:.4;cursor:not-allowed;}
.bl-menu .sep{height:1px;background:var(--border);margin:5px 8px;}
.bl-menu .icon{font-size:15px;flex-shrink:0;}
.bl-menu-hd{display:none;}

/* ── Empty state ── */
.bl-empty{
  padding:52px 22px;text-align:center;color:var(--text3);
  border:1px dashed var(--border2);border-radius:14px;
}
.bl-empty .ic{font-size:30px;opacity:.35;margin-bottom:12px;display:block;}

/* ══ EDITOR ══ */
.be-grid{
  display:grid;gap:20px;align-items:start;
  grid-template-columns:minmax(0,1fr) 330px;
  /* min-content/1fr, not auto/auto: the tall .be-main spans both rows and grid
     would otherwise split its leftover height evenly, leaving a gap under the
     publish box. */
  grid-template-rows:min-content 1fr;
  grid-template-areas:"main sidea" "main sideb";
}
a.btn, a.bl-ico{text-decoration:none;}
.be-main{grid-area:main;min-width:0;}
.be-side-a{grid-area:sidea;min-width:0;}
.be-side-b{grid-area:sideb;min-width:0;display:flex;flex-direction:column;gap:16px;}
.be-box{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;
}
.be-box + .be-box{margin-top:16px;}
.be-box-t{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.be-box-t .icon{font-size:13px;color:var(--text4);}
.be-pub{border-color:var(--bpur);background:linear-gradient(180deg,var(--grad-soft),transparent 60%),var(--surface);}
.be-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* Import banner — the first step when you paste a draft */
.be-import{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:20px;border-radius:12px;
  border:1px dashed var(--bpur);background:var(--grad-soft);
}
.be-import-x{flex:1;min-width:200px;}
.be-import-t{font-size:13.5px;color:var(--text);font-weight:500;}
.be-import-s{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.45;}

/* Content field with write/preview tabs */
.be-tabs{display:flex;gap:4px;margin-bottom:10px;}
.be-tab{
  padding:8px 14px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:none;
  background:none;color:var(--text3);font-family:var(--sans);font-size:13px;cursor:pointer;
}
.be-tab.on{background:var(--surface2);border-color:var(--border2);color:var(--text);}
.be-tab:hover{color:var(--text);}
/* Set here, not inline, so the mobile 16px override can win (iOS zoom guard) */
#blog-f-content{min-height:460px;resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.6;}
#blog-link-select{font-size:13px;}
.be-prev{
  min-height:460px;padding:22px 24px;border:1px solid var(--border2);border-radius:9px;
  background:var(--surface2);color:var(--text2);font-size:15px;line-height:1.7;overflow-wrap:anywhere;
}
.be-prev h1,.be-prev h2,.be-prev h3,.be-prev h4{color:var(--text);line-height:1.28;margin:26px 0 10px;}
.be-prev h1{font-size:25px;} .be-prev h2{font-size:20px;} .be-prev h3{font-size:16.5px;} .be-prev h4{font-size:15px;}
.be-prev > *:first-child{margin-top:0;}
.be-prev p{margin:0 0 15px;}
.be-prev a{color:var(--pur-light);}
.be-prev ul,.be-prev ol{margin:0 0 15px;padding-left:22px;}
.be-prev li{margin-bottom:6px;}
.be-prev blockquote{margin:0 0 15px;padding:10px 16px;border-left:3px solid var(--pur);background:var(--surface3);border-radius:0 8px 8px 0;}
.be-prev code{font-family:var(--mono);font-size:13px;background:var(--surface3);padding:2px 6px;border-radius:5px;}
.be-prev pre{background:var(--surface3);padding:14px 16px;border-radius:9px;overflow-x:auto;margin:0 0 15px;}
.be-prev pre code{background:none;padding:0;}
.be-prev img{max-width:100%;height:auto;border-radius:9px;}
.be-prev hr{border:none;border-top:1px solid var(--border2);margin:22px 0;}
.be-prev table{width:100%;border-collapse:collapse;margin:0 0 15px;font-size:14px;}
.be-prev th,.be-prev td{border:1px solid var(--border2);padding:8px 11px;text-align:left;}
.be-prev th{background:var(--surface3);color:var(--text);}
.be-prev .bp-table-wrap{overflow-x:auto;}

/* Cover picker */
.be-cover-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--border2);background:var(--surface3);display:block;}
.be-cover-pick{
  width:100%;padding:26px 14px;border:1px dashed var(--border2);border-radius:10px;
  background:var(--surface2);color:var(--text3);font-family:var(--sans);font-size:13px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .15s;
}
.be-cover-pick:hover{border-color:var(--bpur);color:var(--text2);}
.be-cover-pick .icon{font-size:22px;}

/* FAQ rows */
.be-faq{display:flex;flex-direction:column;gap:12px;}
.be-faq-row{
  display:flex;gap:10px;align-items:flex-start;padding:12px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface2);
}
.be-faq-row .fx{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.be-faq-del{
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--border2);background:var(--surface);
  color:var(--text3);cursor:pointer;font-size:14px;
}
.be-faq-del:hover{border-color:rgba(248,113,113,.4);color:var(--red);background:var(--red-dim);}

/* Translation box */
.be-twin{display:flex;flex-direction:column;gap:10px;}
.be-twin-cur{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;
  background:var(--grad-soft);border:1px solid var(--bpur);font-size:12.5px;color:var(--text2);
}
.be-twin-cur .s{font-family:var(--mono);color:var(--pur-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Sticky action bar — save from any scroll position, phone included */
.be-bar{
  position:sticky;bottom:0;z-index:20;margin-top:20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-radius:14px 14px 0 0;
  background:rgba(19,19,24,.94);backdrop-filter:blur(10px);
  border:1px solid var(--border2);border-bottom:none;
}
.be-dirty{font-size:12.5px;color:var(--amber);display:none;align-items:center;gap:7px;}
.be-dirty.on{display:inline-flex;}
.be-dirty .d{width:7px;height:7px;border-radius:50%;background:var(--amber);}
.be-bar-sp{flex:1;}
.be-bar .btn{min-height:40px;}

/* ══ Blog responsive ══ */
@media(max-width:1080px){
  .be-grid{grid-template-columns:1fr;grid-template-areas:"sidea" "main" "sideb";}
  .be-side-b{margin-top:0;}
}
@media(max-width:900px){
  /* Row folds into a card: nothing scrolls sideways, every control reachable */
  .bl-row{
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:"th ti ac" "la la la" "me me me";
    gap:10px 12px;padding:12px;
  }
  .bl-thumb{grid-area:th;width:64px;height:38px;}
  .bl-ti{grid-area:ti;}
  .bl-act{grid-area:ac;align-self:start;}
  .bl-langs{grid-area:la;}
  .bl-lang{flex:1;justify-content:center;height:38px;font-size:13px;}
  .bl-meta{
    grid-area:me;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding-top:10px;border-top:1px solid var(--border);
  }
  .bl-ico{width:38px;height:38px;font-size:16px;}
  .bl-t{font-size:14.5px;}
  .bl-bar{gap:8px;}
  .bl-search{flex:1 1 100%;max-width:none;}
  .bl-chips{flex:1 1 auto;}
  .bl-chip{flex:1;text-align:center;padding:10px 8px;}
  .bl-catsel{flex:1 1 100%;padding:10px 30px 10px 13px;}
  .bl-count{margin-left:0;flex:1 1 100%;text-align:center;}
  .be-box{padding:15px;border-radius:12px;}
  .be-row2{grid-template-columns:1fr;}
  /* The publish box sits above the text on phones, so it has to stay short —
     Sprache + Rubrik stay side by side instead of stacking. */
  .be-pub{padding:13px 15px;}
  .be-pub .be-row2{grid-template-columns:1fr 1fr;gap:10px;}
  .be-pub .form-group{margin-bottom:12px;}
  .be-pub .be-box-t{margin-bottom:10px;}
  #blog-f-content{min-height:340px;}
  .be-prev{min-height:340px;padding:16px;font-size:15px;}
  .be-import{padding:12px 13px;gap:10px;}
  .be-import .btn{width:100%;justify-content:center;}
  /* Sticky bar stays inside the page padding — negative margins would have to
     track .page-content's padding, which differs per breakpoint (16px / 12px)
     and pushed the layout 4px wide at 420px. */
  .be-bar{
    margin:16px 0 0;border-radius:14px 14px 0 0;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  }
  .be-bar .btn{flex:1;justify-content:center;}
  .be-bar-sp{display:none;}
  .be-dirty{flex:1 1 100%;order:-1;}
  /* Action menu becomes a bottom sheet — big taps, thumb-reachable */
  .bl-menu-bd{background:rgba(0,0,0,.55);}
  .bl-menu{
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%;min-width:0;border-radius:16px 16px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));
    animation:blSheet .2s ease;
  }
  .bl-menu button{padding:15px 12px;font-size:15px;border-radius:10px;}
  .bl-menu-hd{
    display:block;font-size:13px;color:var(--text3);padding:12px 12px 10px;
    border-bottom:1px solid var(--border);margin-bottom:6px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}
@keyframes blSheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media(max-width:768px){
  /* Fields that carry an ID-level font-size need naming explicitly — an ID
     selector beats the generic guard above. Must sit AFTER those base rules,
     equal specificity means source order decides. */
  #blog-f-content, #blog-link-select{font-size:16px;}
}
/* ══ USAGE (SpotScraper-Kosten) ═════════════════════════════════════════════
   Same visual language as the blog list: card rows that fold on a phone, no
   horizontally scrolling tables. */
.us-note{font-size:12.5px;color:var(--text3);line-height:1.5;margin:-4px 0 16px;}
.us-warn{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;
  border-radius:11px;border:1px solid rgba(251,191,36,.32);background:var(--amber-dim);
  color:var(--text2);font-size:13px;line-height:1.5;
}
.us-warn .icon{color:var(--amber);font-size:16px;flex-shrink:0;margin-top:1px;}

/* Share bar: where the money actually went */
.us-share{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--surface3);margin-bottom:12px;}
.us-share span{display:block;height:100%;}
.us-k-playlist{background:var(--pur-light);}
.us-k-shadow{background:var(--blue);}
.us-k-artist{background:var(--green);}
.us-legend{display:flex;flex-direction:column;gap:9px;}
.us-leg{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:13px;}
.us-leg .dot{width:10px;height:10px;border-radius:3px;}
.us-leg .nm{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.us-leg .ca{font-family:var(--mono);font-size:12px;color:var(--text3);white-space:nowrap;}
.us-leg .co{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap;min-width:74px;text-align:right;}

/* Daily chart */
.us-chart{display:flex;align-items:flex-end;gap:3px;height:110px;padding:8px 0 0;}
.us-col{flex:1;min-width:3px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.us-col i{display:block;width:100%;background:var(--pur);border-radius:3px 3px 0 0;min-height:2px;opacity:.85;}
.us-col:hover i{opacity:1;background:var(--pur-light);}
.us-col.zero i{background:var(--border2);opacity:.6;}
.us-xax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--text4);margin-top:7px;}

/* Breakdown rows */
.us-rows{display:flex;flex-direction:column;gap:6px;}
.us-row{
  display:grid;grid-template-columns:minmax(0,1fr) 96px 104px;gap:14px;align-items:center;
  padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.us-row:hover{border-color:var(--border2);}
.us-nm{min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.us-sub{font-size:11.5px;color:var(--text3);margin-top:2px;font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.us-num{font-family:var(--mono);font-size:12.5px;color:var(--text2);text-align:right;}
.us-cost{font-family:var(--mono);font-size:13px;color:var(--text);text-align:right;}
.us-tag{
  display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;margin-right:7px;vertical-align:1px;
}
.us-tag.shared{background:var(--grad-soft);border:1px solid var(--bpur);color:var(--pur-light);}
.us-tag.legacy{background:var(--surface3);border:1px solid var(--border2);color:var(--text4);}

/* Runs */
.us-run{
  display:grid;grid-template-columns:110px 78px minmax(0,1fr) repeat(4,68px) 62px;
  gap:12px;align-items:center;padding:11px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:12.5px;
}
.us-run .lbl{display:none;}
.us-run .mono{font-family:var(--mono);color:var(--text2);white-space:nowrap;}
.us-run .type{display:flex;align-items:center;gap:6px;color:var(--text2);}
.us-runhead{
  display:grid;grid-template-columns:110px 78px minmax(0,1fr) repeat(4,68px) 62px;gap:12px;
  padding:0 14px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text4);
}
.us-runhead span:nth-child(n+4){text-align:right;}
.us-run > .mono:nth-child(n+4){text-align:right;}
.us-err{
  grid-column:1/-1;margin-top:8px;padding:8px 10px;border-radius:7px;
  background:var(--red-dim);border:1px solid rgba(248,113,113,.25);
  color:#fca5a5;font-family:var(--mono);font-size:11px;line-height:1.45;
  overflow-wrap:anywhere;
}

@media(max-width:900px){
  /* Name on its own line, then calls left / cost right — stacking all three
     in one column reads as a stray number under the row. */
  .us-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;}
  .us-row > div:first-child{grid-column:1/-1;}
  .us-num{grid-column:1;text-align:left;font-size:12px;}
  .us-cost{grid-column:2;}
  .us-leg{grid-template-columns:10px minmax(0,1fr) auto;row-gap:2px;}
  .us-leg .ca{grid-column:2;font-size:11px;}
  .us-leg .co{grid-row:1;grid-column:3;}
  .us-runhead{display:none;}
  .us-run{grid-template-columns:auto auto;justify-content:start;gap:6px 10px;padding:12px 13px;}
  .us-run .type{grid-column:1/-1;}
  .us-run .lbl{display:inline;color:var(--text4);}
  .us-run > .mono{text-align:left!important;}
  .us-chart{height:84px;}
}
@media(max-width:420px){
  .us-row{padding:10px 11px;}
  .us-nm{font-size:13px;}
}

/* ── Spotify Sync: tab strip + state panel ─────────────────────────────── */
.sy-tabs{display:flex;gap:4px;margin-top:14px;border-bottom:1px solid var(--border);}
.sy-tab{
  appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;margin-bottom:-1px;font-size:13.5px;font-weight:500;
  color:var(--text3);cursor:pointer;white-space:nowrap;
}
.sy-tab:hover{color:var(--text2);}
.sy-tab.active{color:var(--text);border-bottom-color:var(--pur-light);}
.sy-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

.sy-ref{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text3);margin:-4px 0 16px;line-height:1.5;
}
.sy-ref .mono{font-family:var(--mono);color:var(--text2);}
.sy-modes{display:flex;gap:8px;flex-wrap:wrap;}
.sy-mode-note{font-size:11.5px;color:var(--text4);margin-top:8px;line-height:1.5;}
.sy-gap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:9px;
}
.sy-gap .nm{min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sy-gap .sub{font-size:11.5px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sy-gap .age{font-family:var(--mono);font-size:12px;color:var(--text3);white-space:nowrap;}
.sy-fold{
  appearance:none;width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:11px 14px;color:var(--text2);font-size:13px;text-align:left;
  cursor:pointer;display:flex;align-items:center;gap:9px;
}
.sy-fold:hover{border-color:var(--border2);color:var(--text);}
.sy-fold .icon{flex:none;transition:transform .18s ease;}
.sy-fold.open .icon{transform:rotate(90deg);}
@media(max-width:600px){
  .sy-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sy-tab{padding:11px 13px;font-size:13px;min-height:44px;}
  /* Full width and a real tap height. The shared .btn is ~31px tall, which is
     under the 44px guidance and under the 34px floor the rest of this portal
     was checked against — fine for a mouse, mean on a phone, and these two
     are the primary action on the panel. */
  .sy-modes .btn{flex:1 1 100%;justify-content:center;min-height:44px;}
  .sy-fold{min-height:44px;}
}

@media(max-width:420px){
  .bl-row{grid-template-columns:52px minmax(0,1fr) auto;padding:11px;}
  .bl-thumb{width:52px;height:32px;}
  .bl-t{font-size:13.5px;}
  .bl-slug{font-size:11px;}
  .be-box{padding:13px;}
}

/* ══ BEREICHS-UMSCHALTER ═══════════════════════════════════════════════════
   melotunesmusic ist das Unternehmen, CuePort ein Produkt darin. Der Knopf
   oben in der Sidebar waehlt den Bereich; die Navigation darunter zeigt nur
   dessen Ansichten. */
.brand-switch{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:1px solid transparent;border-radius:10px;
  padding:6px 8px;margin:-6px -8px;cursor:pointer;text-align:left;
  color:inherit;font-family:var(--sans);transition:background .15s,border-color .15s;
}
.brand-switch:hover{background:var(--surface2);border-color:var(--border);}
.brand-switch .sidebar-logo-mark{flex-shrink:0;width:32px;height:32px;}
.brand-txt{min-width:0;flex:1;display:block;}
/* Die Sidebar ist 220px breit; bei 15px passte "melotunesmusic" nicht und
   wurde zu "melotune…" gekuerzt — der eigene Firmenname darf nicht abreissen. */
.brand-txt .sidebar-logo-name{font-size:13.5px;letter-spacing:-.01em;}
.brand-txt .sidebar-logo-name,
.brand-txt .sidebar-logo-badge{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brand-caret{flex-shrink:0;width:14px;height:14px;color:var(--text4);transform:rotate(90deg);transition:transform .18s;}
.brand-switch[aria-expanded="true"] .brand-caret{transform:rotate(-90deg);}

.bereich-menu{
  display:none;position:absolute;left:12px;right:12px;z-index:220;margin-top:8px;
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.bereich-menu.open{display:block;}
.bereich-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;border-radius:7px;padding:10px 10px;
  color:var(--text2);font-family:var(--sans);font-size:13.5px;
  cursor:pointer;text-align:left;
}
.bereich-menu button:hover{background:var(--surface3);color:var(--text);}
.bereich-menu button.on{color:var(--pur-light);background:var(--grad-soft);}
.bereich-menu .icon{width:15px;height:15px;flex-shrink:0;}
.sidebar-logo{position:relative;}

/* ══ ÜBERSICHT ═════════════════════════════════════════════════════════════ */
/* Was Aufmerksamkeit braucht — nur sichtbar, wenn es wirklich etwas gibt.
   Eine Zeile, die immer "alles gut" sagt, liest sich nach kurzer Zeit als Deko. */
.ue-warns{display:flex;flex-direction:column;gap:8px;margin-bottom:26px;}
.ue-warn{
  display:flex;align-items:center;gap:11px;width:100%;min-height:48px;
  padding:12px 14px;border-radius:11px;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:13.5px;line-height:1.45;
  border:1px solid var(--border2);background:var(--surface);color:var(--text2);
}
.ue-warn:hover{border-color:var(--border2);background:var(--surface2);color:var(--text);}
.ue-warn .icon{flex-shrink:0;width:17px;height:17px;}
.ue-warn span{flex:1;min-width:0;}
.ue-warn-go{width:14px;height:14px;color:var(--text4);}
.ue-warn.warn{border-color:rgba(251,191,36,.3);background:var(--amber-dim);}
.ue-warn.warn .icon{color:var(--amber);}
.ue-warn.bad{border-color:rgba(248,113,113,.3);background:var(--red-dim);}
.ue-warn.bad .icon{color:var(--red);}

.ue-produkt{margin-bottom:28px;}
.ue-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.ue-name{font-size:15px;font-weight:600;color:var(--text);}
.ue-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.ue-kachel{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;transition:border-color .15s;
}
.ue-kachel:hover{border-color:var(--border2);}
.ue-wert{font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.02em;}
.ue-label{font-size:11.5px;color:var(--text3);margin-top:5px;line-height:1.35;}
.ue-hinweis{font-size:12.5px;color:var(--text3);margin-top:10px;line-height:1.5;}

@media(max-width:768px){
  .ue-kacheln{grid-template-columns:repeat(2,1fr);gap:10px;}
  /* Der geteilte .btn-sm ist portalweit rund 25px hoch — fuer eine Maus in
     Ordnung, am Daumen nicht. Hier stehen nur neu gebaute Bedienelemente,
     also bekommen sie gleich eine echte Tap-Hoehe. Die uebrigen Ansichten
     zieht Etappe 3 nach. */
  .ue-kopf .btn{min-height:44px;padding-left:16px;padding-right:16px;}
  .ue-kachel{padding:13px 14px;}
  .ue-wert{font-size:20px;}
  .ue-produkt{margin-bottom:22px;}
  /* Die Bereichsliste ueber die volle Breite, mit echten Tap-Hoehen. */
  .bereich-menu button{min-height:46px;font-size:14.5px;}
  .brand-switch{min-height:46px;}
}

/* ══ HANDY ═════════════════════════════════════════════════════════════════
   Gemessen am 2026-08-09, vor diesem Block: 472px der Studios-Tabelle lagen
   ausserhalb des Bildschirms (darunter die ganze Aktions-Spalte), kleinstes
   Tap-Ziel 22px, neun Eingabefelder unter 16px, und die Schublade verdeckte
   56 % der Breite. */

/* ── Eine Navigation statt zwei ──
   Erster Entwurf hatte eine Bereichsleiste unten plus die Schublade fuer die
   Ansichten darin. Nach dem Gebrauch am Geraet: zwei Orte fuer dieselbe Frage
   ("wo bin ich, wo will ich hin") sind einer zu viel, und die Leiste kostete
   dauerhaft 64px Bildhoehe. Jetzt fuehrt die Schublade beides — alle zehn
   Ansichten auf einmal, nach Bereichen gruppiert. */
.nav-gruppe{display:none;}
@media(max-width:768px){
  /* Ein Streifen bleibt frei: dort tippt man zum Schliessen. */
  .sidebar{width:min(80vw,300px);}
  /* showBereich() blendet die fremden Bereiche per Inline-Stil aus. Am Handy
     gibt es keinen Bereichs-Umschalter, also muessen alle sichtbar bleiben —
     und gegen einen Inline-Stil kommt nur !important an. Bewusst in CSS und
     nicht im JS, damit auch ein Drehen des Geraets richtig herauskommt. */
  .sidebar-nav .nav-btn[data-bereich]{display:flex !important;}
  .nav-gruppe{
    display:block;font-family:var(--mono);font-size:9px;letter-spacing:2.5px;
    color:var(--text4);text-transform:uppercase;
    padding:16px 12px 6px;margin-top:4px;
    border-top:1px solid var(--border);
  }
  .nav-gruppe:first-child{border-top:none;margin-top:0;}
  .nav-btn{min-height:46px;font-size:15px;}
  /* Zehn Eintraege plus Ueberschriften plus Fusszeile passen auf ein grosses
     Telefon, auf ein kleines nicht — die Liste scrollt, die Fusszeile mit dem
     Abmelden bleibt stehen. */
  .sidebar-nav{padding-bottom:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .sidebar-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}

/* ── Tabellen falten zu Karten ──
   Statt seitlich zu scrollen (wo Inhalte unbemerkt verschwinden) wird jede
   Zeile ein Block, und jede Zelle traegt ihre Spaltenueberschrift vor sich.
   Die Beschriftung setzt tabellenFalten() in core.js aus dem <thead>. */
@media(max-width:768px){
  .table-wrap{overflow-x:visible;border:none;background:none;margin-left:0;margin-right:0;}
  .table-wrap table{display:block;width:100%;}
  .table-wrap thead{display:none;}
  .table-wrap tbody{display:flex;flex-direction:column;gap:10px;}
  .table-wrap tbody tr{
    display:block;background:var(--surface);border:1px solid var(--border);
    border-radius:12px;padding:12px 14px;
  }
  .table-wrap tbody tr.loading-row{padding:26px;text-align:center;}
  .table-wrap tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:6px 0!important;border:none;font-size:13.5px;text-align:right;
    min-width:0;
  }
  .table-wrap tbody td::before{
    content:attr(data-label);flex:0 0 auto;max-width:46%;
    font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--text4);text-align:left;
  }
  .table-wrap tbody td:empty,
  .table-wrap tbody td[data-label=""]:not(:has(*)){display:none;}
  /* Auswahlfelder bleiben in der Zeile und richten sich wie die uebrigen
     Werte nach rechts aus — linksbuendig zwischen rechtsbuendigen Zahlen
     liest sich unruhig. */
  .table-wrap tbody td:has(select) select{margin-left:auto;max-width:60%;}
  /* Knoepfe brauchen dagegen die volle Breite, sonst werden sie zu schmal. */
  .table-wrap tbody td:has(.btn){flex-wrap:wrap;justify-content:flex-start;}
  .table-wrap tbody td:has(.btn)::before{flex-basis:100%;max-width:100%;margin-bottom:4px;}
  .table-wrap tbody td:has(.btn) .btn{flex:1 1 40%;justify-content:center;}
  .table-wrap tbody td.td-main{font-size:15px;font-weight:600;color:var(--text);}
  .table-wrap tbody td.td-mono{font-size:12.5px;}
  /* Zeilen, die den ganzen Tabellenkopf ersetzen (Leermeldungen). */
  .table-wrap tbody tr td[colspan]{display:block;text-align:center;}
  .table-wrap tbody tr td[colspan]::before{display:none;}
}

/* ── Tap-Ziele und Eingabefelder ──
   Ein Schlag statt Stelle fuer Stelle: der geteilte .btn-sm ist portalweit
   rund 25px hoch, was am Daumen zu wenig ist. */
@media(max-width:768px){
  .btn, .btn-sm{min-height:44px;justify-content:center;}
  .btn-sm{padding:8px 14px;font-size:13px;}
  /* Alles, was Eingabe ist, auf 16px — darunter zoomt iOS beim Fokus hinein.
     Die bisherige Regel deckte nur .form-input ab, nicht die Selects in den
     Tabellen und nicht die Suchfelder. */
  input, select, textarea, .input, .form-input, .bl-search input, .bl-catsel{font-size:16px!important;}
  select, .status-select, .plan-select{min-height:44px;}
  input:not([type=checkbox]):not([type=radio]), textarea{min-height:44px;}
  /* Ausnahme: Bedienelemente, die als Icon-Knopf gedacht sind, bleiben quadratisch. */
  .bl-ico{min-width:44px;min-height:44px;}
  .bl-sx{min-width:40px;min-height:40px;}
}

/* ── Handy: Nachjustierung nach der Messung ──
   Was nach dem Faltungs-Block noch seitlich weglief oder zu klein blieb. */
@media(max-width:768px){
  /* Die Blog-Chips und Sprach-Marken setzen eigene Hoehen, die die generische
     44px-Regel ueberstimmen — hier namentlich nachziehen. */
  .bl-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .bl-lang{height:44px;min-height:44px;}
  .bl-catsel{min-height:44px;}
  /* Der Titel lief 132px ueber die Kante. Ursache waren die eigenen 44px-Ziele:
     drei Icons nebeneinander machen die Aktionsspalte so breit, dass fuer den
     Titel nichts mehr uebrig bleibt. Also bekommen die Aktionen eine eigene
     Zeile — lieber eine Zeile mehr als ein abgeschnittener Titel. */
  .bl-row{grid-template-areas:"th ti" "la la" "me me" "ac ac";grid-template-columns:64px minmax(0,1fr);}
  .bl-act{justify-content:flex-end;padding-top:10px;border-top:1px solid var(--border);}
  .bl-ti{min-width:0;overflow:hidden;}
  .bl-t, .bl-slug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  /* Galerie: die Alt-Text-Felder verlangten je 200px Mindestbreite, neben dem
     120px-Vorschaubild passt das auf 375px nicht mehr nebeneinander. */
  #gallery-list-pane label{min-width:0!important;flex:1 1 100%!important;}
  #gallery-list-pane img{width:84px!important;height:63px!important;}
}

/* ══ EIGENE AUSWAHLFELDER ══════════════════════════════════════════════════
   Native <select> zeichnet der Browser selbst — am Telefon als System-Picker
   in Systemfarben, was in einem durchgehend dunklen Portal wie ein Fremdkoerper
   wirkt. Das native Feld bleibt im DOM (Wert und change-Ereignis unveraendert)
   und wird nur ueberlagert. */
.dd-native{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
  min-height:0!important;
}
.dd{position:relative;display:inline-flex;vertical-align:middle;max-width:100%;}
.dd-wide{display:flex;width:100%;}
.dd-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 12px;background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;color:var(--text);font-family:var(--sans);font-size:14px;
  cursor:pointer;text-align:left;transition:border-color .15s,background .15s;
}
.dd-btn:hover{border-color:var(--border2);background:var(--surface3);}
.dd.open .dd-btn{border-color:var(--pur);box-shadow:0 0 0 3px var(--grad-soft);}
.dd-btn:focus-visible{outline:2px solid var(--pur-light);outline-offset:2px;}
.dd-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-caret{width:13px;height:13px;flex-shrink:0;color:var(--text3);transform:rotate(90deg);transition:transform .18s;}
.dd.open .dd-caret{transform:rotate(-90deg);}

.dd-list{
  display:none;position:fixed;z-index:520;max-height:min(320px,60vh);overflow-y:auto;
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  padding:5px;box-shadow:0 14px 36px rgba(0,0,0,.55);
}
.dd-list.dd-frei{display:block;}
.dd-opt{
  display:block;width:100%;padding:9px 11px;border:none;border-radius:7px;
  background:none;color:var(--text2);font-family:var(--sans);font-size:14px;
  text-align:left;cursor:pointer;white-space:nowrap;
}
.dd-opt:hover{background:var(--surface3);color:var(--text);}
.dd-opt:focus-visible{outline:2px solid var(--pur-light);outline-offset:-2px;}
.dd-opt[aria-selected="true"]{color:var(--pur-light);background:var(--grad-soft);}
.dd-bd{display:none;}

@media(max-width:768px){
  .dd-btn{min-height:44px;font-size:16px;}
  /* Am Telefon als Bottom-Sheet — dasselbe Muster wie das Zeilenmenue im Blog. */
  .dd-bd{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:410;}
  /* Am <body> haengend (siehe ddOeffnen in core.js), deshalb display:block
     ueber die .dd-sheet-Klasse statt ueber .dd.open. */
  .dd-list.dd-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:420;
    max-height:70vh;border-radius:16px 16px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    border-left:none;border-right:none;border-bottom:none;
  }
  .dd-opt{min-height:48px;display:flex;align-items:center;font-size:16px;white-space:normal;}
}

@media(max-width:768px){
  /* Der Schliessknopf der Modals ist fest 30px — am Daumen zu klein, und er
     ist oft der einzige Weg aus einem Formular heraus. */
  .modal-close{width:44px;height:44px;}
}

/* ══ SUCHE ═════════════════════════════════════════════════════════════════
   Bereichsuebergreifend: Ansichten, Kunden, Blogbeitraege. Mit vier Bereichen
   ist "wo war das nochmal" die haeufigste Frage, und ohne Suche muesste man
   sie durch Raten beantworten. */
.suche-btn{
  display:flex;align-items:center;gap:9px;margin:12px 10px 0;
  padding:9px 11px;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;color:var(--text3);font-family:var(--sans);font-size:13.5px;
  cursor:pointer;text-align:left;transition:border-color .15s,color .15s;
}
.suche-btn:hover{border-color:var(--border2);color:var(--text2);}
.suche-btn .icon{width:15px;height:15px;flex-shrink:0;}
.suche-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.suche-kbd{
  font-family:var(--mono);font-size:10px;color:var(--text4);
  border:1px solid var(--border2);border-radius:4px;padding:2px 5px;flex-shrink:0;
}

.suche-overlay{
  display:none;position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.62);padding:80px 16px 16px;
}
.suche-overlay.open{display:block;}
.suche-box{
  max-width:600px;margin:0 auto;background:var(--surface);
  border:1px solid var(--border2);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.suche-kopf{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border);}
.suche-kopf .icon{width:17px;height:17px;color:var(--text3);flex-shrink:0;}
.suche-kopf input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--text);font-family:var(--sans);font-size:16px;
}
.suche-zu{
  width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:7px;color:var(--text3);cursor:pointer;
}
.suche-zu:hover{background:var(--surface2);color:var(--text);}
.suche-liste{max-height:min(440px,60vh);overflow-y:auto;padding:6px;}
.su-tr{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  width:100%;padding:11px 12px;background:none;border:none;border-radius:9px;
  color:var(--text2);font-family:var(--sans);font-size:14px;text-align:left;cursor:pointer;
}
.su-tr:hover, .su-tr:focus-visible{background:var(--surface2);color:var(--text);outline:none;}
.su-tr:focus-visible{box-shadow:inset 0 0 0 1px var(--bpur);}
.su-art{
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--pur-light);background:var(--grad-soft);border-radius:5px;padding:3px 7px;flex-shrink:0;
}
.su-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.su-sub{font-family:var(--mono);font-size:11.5px;color:var(--text4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.su-leer{padding:28px;text-align:center;color:var(--text4);font-size:13.5px;}

@media(max-width:768px){
  .suche-overlay{padding:0;}
  .suche-box{max-width:none;height:100%;border-radius:0;border:none;display:flex;flex-direction:column;}
  .suche-liste{max-height:none;flex:1;padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  .suche-btn{min-height:44px;}
  .suche-kbd{display:none;}
  .suche-zu{width:44px;height:44px;}
  .su-tr{min-height:52px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art txt" ". sub";gap:4px 10px;}
  .su-art{grid-area:art;}
  .su-txt{grid-area:txt;}
  .su-sub{grid-area:sub;}
}

/* ══ KONTO-BLATT (Handy) ═══════════════════════════════════════════════════
   Mit der Bereichsleiste unten oeffnet man die Schublade nicht mehr — und in
   ihrer Fusszeile stand das Abmelden. Ohne diesen Knopf gaebe es am Telefon
   keinen Weg dorthin. */
.konto-btn{display:none;}
.konto-bd{display:none;}
.konto-sheet{display:none;}

@media(max-width:768px){
  .mobile-header{justify-content:space-between;}
  .konto-btn{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:auto;flex-shrink:0;
    background:none;border:1px solid var(--border2);border-radius:10px;
    color:var(--text2);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .konto-btn:hover, .konto-btn:active{background:var(--surface2);color:var(--text);}
  .konto-btn .icon{width:19px;height:19px;}

  .konto-bd{position:fixed;inset:0;z-index:430;background:rgba(0,0,0,.55);}
  .konto-bd.open{display:block;}

  .konto-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:440;
    background:var(--surface2);border-top:1px solid var(--border2);
    border-radius:16px 16px 0 0;padding:8px 8px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(0,0,0,.5);
  }
  .konto-sheet.open{display:block;}
  .konto-kopf{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;}
  .konto-avatar{
    width:40px;height:40px;border-radius:50%;background:var(--grad);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .konto-avatar .icon{width:19px;height:19px;}
  .konto-wer{min-width:0;}
  .konto-mail{font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .konto-rolle{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--pur-light);margin-top:3px;}
  .konto-zeile-lbl{
    font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--text4);padding:8px 12px 6px;
  }
  .konto-lang{display:flex;gap:8px;padding:0 8px 8px;}
  .konto-lang button{
    flex:1;min-height:44px;border-radius:9px;cursor:pointer;
    background:var(--surface3);border:1px solid var(--border2);
    color:var(--text2);font-family:var(--sans);font-size:15px;
  }
  .konto-lang button.on{background:var(--grad-soft);border-color:var(--bpur);color:var(--pur-light);}
  .konto-zeile{
    display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
    padding:12px;background:none;border:none;border-radius:10px;
    color:var(--text2);font-family:var(--sans);font-size:15.5px;text-align:left;cursor:pointer;
  }
  .konto-zeile:hover, .konto-zeile:active{background:var(--surface3);color:var(--text);}
  .konto-zeile .icon{width:18px;height:18px;flex-shrink:0;}
  .konto-zeile.gefahr{color:var(--red);}
  .konto-zeile.gefahr:hover, .konto-zeile.gefahr:active{background:var(--red-dim);}
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAN + GESCHENK + PERSOENLICHE MAILS
   ══════════════════════════════════════════════════════════════════════════ */

/* Plan-Zelle in der Kundenliste. Oben der wirksame Plan mit seiner Herkunft,
   darunter erst das Auswahlfeld — `studios.plan` allein sagt nicht, was das
   Studio bekommt. */
.plan-cell{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.plan-src{
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text4);margin-left:6px;
}
.plan-locked-note{
  font-size:11px;color:var(--text4);line-height:1.5;max-width:190px;
  padding:5px 8px;background:var(--surface3);border-radius:6px;
}

.comp-cell{line-height:1.4;}
.comp-plan{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;font-weight:600;}
.comp-until{font-size:11px;color:var(--text4);margin-top:2px;}
.comp-on .comp-plan{color:#4ade80;}
.comp-soon .comp-plan{color:#fbbf24;}
.comp-idle .comp-plan{color:var(--text4);}
.comp-none{color:var(--text4);}

/* Geschenk-Modal */
.comp-studio{font-size:15px;color:var(--text);font-weight:600;margin-bottom:14px;}
.comp-current-box{
  background:var(--surface3);border:1px solid var(--border2);border-radius:10px;
  padding:12px 14px;margin-bottom:16px;font-size:13px;color:var(--text2);line-height:1.6;
}
.comp-meta{font-size:11px;color:var(--text4);margin-top:4px;}
.comp-warn{font-size:12px;color:#fbbf24;margin-top:6px;}
.comp-hint{font-size:12px;color:var(--text4);line-height:1.6;margin:6px 0 16px;}
#comp-override-hint{
  color:#fbbf24;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);
  border-radius:8px;padding:10px 12px;margin-bottom:16px;
}
.comp-preview{font-size:12px;color:var(--pur-light);margin:6px 0 16px;font-family:var(--mono);}
.comp-notify{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--text2);cursor:pointer;}
.comp-notify input{width:18px;height:18px;accent-color:var(--pur);cursor:pointer;}
.modal-msg{font-size:12px;min-height:18px;margin-top:10px;}

/* ── Mail-Ansicht ───────────────────────────────────────────────────────── */
.mail-card{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:20px;
}
.mail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;}

.mail-kind-row{display:flex;gap:8px;margin-bottom:10px;}
.mail-kind{
  flex:1;min-height:44px;border-radius:10px;cursor:pointer;
  background:var(--surface3);border:1px solid var(--border2);
  color:var(--text3);font-family:var(--sans);font-size:14px;font-weight:500;
  transition:all .15s;
}
.mail-kind.on{background:var(--grad-soft);border-color:var(--bpur);color:var(--pur-light);}
.mail-kind-note{font-size:12px;color:var(--text4);line-height:1.6;margin-bottom:18px;}

.mail-body-head{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.mail-textarea{
  font-family:var(--mono);font-size:13px;line-height:1.7;resize:vertical;min-height:220px;
}
.mail-preview{
  background:var(--bg);border:1px solid var(--border2);border-radius:10px;
  padding:16px 18px;min-height:220px;font-size:14px;color:var(--text2);line-height:1.8;
}
.mail-preview h3{font-size:16px;color:var(--text);margin:16px 0 8px;}
.mail-preview p{margin:0 0 12px;}
.mail-preview ul{margin:0 0 12px;padding-left:20px;}
.mail-preview a{color:var(--pur-light);}
.mail-ph{
  background:var(--grad-soft);color:var(--pur-light);border-radius:4px;
  padding:1px 5px;font-family:var(--mono);font-size:12px;
}
.mail-hint{font-size:11.5px;color:var(--text4);line-height:1.6;margin-top:8px;}
.mail-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}

.mail-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mail-count{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--pur-light);}
.mail-select-row{display:flex;gap:8px;margin:10px 0 12px;}
.mail-recipients{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.mail-rec{
  display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:8px;
  cursor:pointer;transition:background .12s;min-height:44px;
}
.mail-rec:hover{background:var(--surface3);}
.mail-rec input{width:18px;height:18px;accent-color:var(--pur);cursor:pointer;flex-shrink:0;margin-top:2px;}
.mail-rec-body{min-width:0;flex:1;}
.mail-rec-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mail-rec-name{font-size:13.5px;color:var(--text);font-weight:500;}
.mail-rec-lang{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--text4);}
.mail-rec-flag{font-size:10px;color:#fbbf24;font-family:var(--mono);letter-spacing:0.5px;}
.mail-rec-sub{
  display:block;font-size:11.5px;color:var(--text4);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mail-rec-blocked{opacity:0.45;cursor:not-allowed;}
.mail-rec-blocked:hover{background:none;}
.mail-empty{text-align:center;padding:24px;color:var(--text4);font-size:13px;}

.mail-log{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.mail-log-row{padding:11px 10px;border-radius:8px;border-bottom:1px solid var(--border);}
.mail-log-row:last-child{border-bottom:none;}
.mail-log-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mail-log-subj{font-size:13.5px;color:var(--text);}
.mail-log-meta{font-size:11.5px;color:var(--text4);margin-top:3px;font-family:var(--mono);}
.mail-log-rec{font-size:11.5px;color:var(--text4);margin-top:3px;word-break:break-all;}

@media(max-width:900px){
  .mail-grid{grid-template-columns:minmax(0,1fr);}
  .mail-recipients{max-height:300px;}
}
@media(max-width:768px){
  /* iOS zoomt bei allem unter 16px beim Fokus. Der Betreff erbt das aus der
     allgemeinen Regel; das Textfeld traegt eine eigene Schriftgroesse und
     braucht die Ausnahme deshalb namentlich und nach der Basisregel. */
  .mail-textarea{font-size:16px !important;}
  .mail-actions{flex-direction:column;}
  .mail-actions .btn{width:100%;min-height:44px;justify-content:center;}
  .plan-locked-note{max-width:none;}
}