/* ============================================================
   Rankingwerk Feedback Tool — Stylesheet
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DARK THEME (default) ── */
:root,[data-theme="dark"]{
  --bg:#09090b;--bg2:#111113;--bg3:#18181b;--bg4:#1f1f23;--bg5:#27272a;
  --border:#2a2a2f;--border2:#3a3a42;
  --text:#fafafa;--text2:#a1a1aa;--text3:#52525b;
  --accent:#818cf8;--accent2:#6366f1;--accent3:#4f46e5;--accent-glow:rgba(129,140,248,0.12);
  --green:#4ade80;--green-bg:rgba(74,222,128,0.08);--green-border:rgba(74,222,128,0.2);
  --red:#f87171;--red-bg:rgba(248,113,113,0.08);--red-border:rgba(248,113,113,0.2);
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,0.08);--amber-border:rgba(251,191,36,0.2);
  --blue:#60a5fa;--blue-bg:rgba(96,165,250,0.08);
  --shadow:rgba(0,0,0,0.6);
}
/* ── LIGHT THEME ── */
[data-theme="light"]{
  --bg:#f8f8fa;--bg2:#ffffff;--bg3:#f1f1f5;--bg4:#e8e8f0;--bg5:#dddde8;
  --border:#e0e0ea;--border2:#c8c8d8;
  --text:#111118;--text2:#5a5a72;--text3:#9090a8;
  --accent:#6366f1;--accent2:#4f46e5;--accent3:#4338ca;--accent-glow:rgba(99,102,241,0.1);
  --green:#16a34a;--green-bg:rgba(22,163,74,0.08);--green-border:rgba(22,163,74,0.2);
  --red:#dc2626;--red-bg:rgba(220,38,38,0.07);--red-border:rgba(220,38,38,0.2);
  --amber:#d97706;--amber-bg:rgba(217,119,6,0.08);--amber-border:rgba(217,119,6,0.2);
  --blue:#2563eb;--blue-bg:rgba(37,99,235,0.07);
  --shadow:rgba(0,0,0,0.15);
}

html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .2s,color .2s}
button,input,textarea,select{font-family:'Inter',sans-serif}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* SCREENS */
.screen{display:none}
.screen.active{display:block}
#screen-asset-review.active{display:flex!important;flex-direction:column;height:100vh;overflow:hidden}
#screen-submitted.active,#screen-login.active{display:flex!important;flex-direction:column;min-height:100vh}
.fadein{animation:fadeIn .16s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOADING */
#loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.spinner{width:22px;height:22px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}

/* TOPBAR */
.topbar{display:flex;align-items:center;height:52px;padding:0 18px;background:var(--bg);border-bottom:1px solid var(--border);gap:10px;position:sticky;top:0;z-index:80;flex-shrink:0}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.logo-icon{width:26px;height:26px;background:linear-gradient(135deg,var(--accent2),var(--accent3));border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:14px;height:14px;color:#fff}
.tb-sep{width:1px;height:18px;background:var(--border);flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:4px;font-size:12px;min-width:0}
.bc-item{color:var(--text2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;transition:color .1s}
.bc-item:hover{color:var(--text)}
.bc-item.cur{color:var(--text);font-weight:500;cursor:default}
.bc-sep-char{color:var(--text3);font-size:11px;flex-shrink:0}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:7px}

/* THEME TOGGLE */
.theme-btn{width:30px;height:30px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-size:14px}
.theme-btn:hover{background:var(--bg4);color:var(--text)}

/* USER CHIP */
.user-chip{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 5px;border:1px solid var(--border);border-radius:99px;background:var(--bg3);cursor:pointer;transition:all .12s}
.user-chip:hover{background:var(--bg4)}
.user-ava{width:22px;height:22px;border-radius:50%;background:var(--accent-glow);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--accent)}
.user-name{font-size:12px;font-weight:500;color:var(--text2)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text);transition:all .12s;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--bg4)}
.btn:active{transform:scale(.97)}
.btn svg{width:12px;height:12px;flex-shrink:0}
.btn-primary{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn-primary:hover{background:var(--accent3);border-color:var(--accent3)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--border)}
.btn-sm{padding:4px 9px;font-size:11px}
.btn-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.btn-danger:hover{background:rgba(220,38,38,.12)}
.btn-success{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.btn-full{width:100%}

/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;white-space:nowrap}
.chip-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip-pending{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.chip-inreview{background:rgba(129,140,248,.1);color:#818cf8;border:1px solid rgba(129,140,248,.2)}
.chip-approved{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.chip-changes{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.rt-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600}
.rt-meta{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.rt-google{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(96,165,250,.2)}
.rt-seo{background:rgba(129,140,248,.1);color:#818cf8;border:1px solid rgba(129,140,248,.2)}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:4px}
.form-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.form-input{width:100%;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--text);outline:none;transition:border-color .12s}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text3)}
textarea.form-input{resize:vertical;line-height:1.6}
select.form-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%2352525b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
select.form-input option{background:var(--bg3)}
[data-theme="light"] select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%239090a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* CARD */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card-hd{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-hd-title{font-size:13px;font-weight:600}
.card-body{padding:16px}

/* MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:fadeIn .16s ease;box-shadow:0 20px 60px var(--shadow)}
.modal-hd{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:14px;font-weight:600}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:13px}
.modal-ft{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.modal-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}
.modal-x:hover{color:var(--text);background:var(--bg3)}

/* TOAST */
#toast{position:fixed;bottom:20px;right:20px;z-index:9000;background:var(--bg4);border:1px solid var(--border2);border-radius:8px;padding:9px 14px;font-size:12px;color:var(--text);display:none;align-items:center;gap:8px;box-shadow:0 8px 24px var(--shadow);max-width:320px}
#toast.show{display:flex}
.toast-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ══ DASHBOARD ══ */
.app-layout{display:grid;grid-template-columns:216px 1fr;min-height:calc(100vh - 52px)}
.sidebar{background:var(--bg);border-right:1px solid var(--border);overflow-y:auto;padding:10px 0}
.sb-section{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:10px 14px 4px}
.sb-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:var(--text3);cursor:pointer;transition:all .1s;border-left:2px solid transparent}
.sb-item:hover{color:var(--text2);background:rgba(129,140,248,.04)}
.sb-item.active{color:var(--text);background:rgba(129,140,248,.08);border-left-color:var(--accent);font-weight:500}
.sb-item svg{width:13px;height:13px;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--accent2);color:#fff;font-size:9px;padding:1px 5px;border-radius:99px;font-weight:600}
.sb-badge.amber{background:var(--amber);color:#000}
.sb-client{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;font-size:11px;color:var(--text3);cursor:pointer;transition:all .1s;gap:6px}
.sb-client:hover{color:var(--text2)}
.sb-client.active{color:var(--accent)}
.sb-client-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-client-meta{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sb-client-count{font-size:9px;background:var(--bg3);border:1px solid var(--border);padding:1px 4px;border-radius:3px;color:var(--text3)}
.sb-open-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.sb-del-btn{background:none;border:none;color:transparent;cursor:pointer;padding:0 2px;font-size:11px;line-height:1;border-radius:3px;transition:color .1s,background .1s;flex-shrink:0}
.sb-client:hover .sb-del-btn{color:var(--text3)}
.sb-del-btn:hover{color:var(--red)!important;background:var(--red-bg)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sb-add-link{padding:5px 14px;font-size:11px;color:var(--accent);cursor:pointer;display:flex;align-items:center;gap:4px;opacity:.8}
.sb-add-link:hover{opacity:1}
.sb-footer{padding:8px 14px;font-size:10px;color:var(--text3)}
.sb-stor-row{display:flex;align-items:center;gap:5px;margin-top:3px}
.sb-stor-track{flex:1;height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.sb-stor-fill{height:100%;background:var(--accent);border-radius:1px;transition:width .4s}
.sb-stor-fill.warn{background:var(--amber)}
.sb-stor-fill.danger{background:var(--red)}

.main-content{overflow-y:auto;min-width:0}
.page-wrap{padding:20px 22px}
.page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.page-title{font-size:18px;font-weight:600;letter-spacing:-.02em}
.page-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* STAT ROW */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px 15px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.stat-card[data-c=amber]::before{background:var(--amber)}
.stat-card[data-c=purple]::before{background:#818cf8}
.stat-card[data-c=green]::before{background:var(--green)}
.stat-card[data-c=red]::before{background:var(--red)}
.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.stat-val{font-size:22px;font-weight:600;letter-spacing:-.02em}

/* FILTERS */
.filter-bar{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;min-width:150px}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;width:12px;height:12px}

/* TABLE */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:7px 11px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:10px 11px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:rgba(129,140,248,.03)}
.cell-primary{font-weight:500;color:var(--text)}
.cell-sec{color:var(--text2);font-size:11px}
.creator-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2)}
.creator-ava{width:16px;height:16px;border-radius:50%;background:var(--accent-glow);border:1px solid rgba(129,140,248,.3);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:var(--accent);flex-shrink:0}
.action-cell{display:flex;gap:4px;flex-wrap:nowrap}
.pager{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-top:1px solid var(--border);font-size:11px;color:var(--text3)}
.pager-btns{display:flex;gap:3px}
.pager-btn{width:26px;height:26px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s}
.pager-btn:hover:not(:disabled){background:var(--bg4)}
.pager-btn.cur{background:var(--accent2);border-color:var(--accent2);color:#fff}
.pager-btn:disabled{opacity:.3;cursor:default}
.empty-state{text-align:center;padding:40px 20px;color:var(--text3)}
.empty-state p{font-size:12px;margin-top:8px}

/* ══ UPLOAD ══ */
.upload-grid{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 52px)}
.upload-panel{padding:20px;overflow-y:auto}
.upload-panel.right{background:var(--bg);border-left:1px solid var(--border)}
.sec-hd{font-size:13px;font-weight:600;margin-bottom:12px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-stack{display:flex;flex-direction:column;gap:10px}
.divider{height:1px;background:var(--border);margin:14px 0}

/* REVIEW TYPE PICKER */
.rtype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rtype-card{border:1px solid var(--border);border-radius:12px;padding:11px 10px;cursor:pointer;transition:all .13s;background:var(--bg3);text-align:center}
.rtype-card:hover{border-color:var(--border2);background:var(--bg4)}
.rtype-card.sel{border-color:var(--accent);background:var(--accent-glow)}
.rtype-icon{font-size:18px;margin-bottom:4px;line-height:1}
.rtype-name{font-size:11px;font-weight:600;margin-bottom:2px}
.rtype-hint{font-size:10px;color:var(--text3);line-height:1.4}

/* DROP ZONE */
.drop-zone{border:1px dashed var(--border2);border-radius:12px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .15s;background:var(--bg3);position:relative;overflow:hidden}
.drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:var(--accent-glow)}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-icon{font-size:22px;margin-bottom:6px;line-height:1}
.dz-title{font-size:12px;font-weight:500;margin-bottom:3px}
.dz-sub{font-size:10px;color:var(--text3)}

.upload-list{display:flex;flex-direction:column;gap:6px}
.upload-item{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.u-thumb{width:44px;height:33px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px}
.u-thumb img,.u-thumb video{width:100%;height:100%;object-fit:cover}
.u-info{flex:1;min-width:0}
.u-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-meta{font-size:10px;color:var(--text3);margin-top:1px}
.u-rm{width:24px;height:24px;background:none;border:none;color:var(--text3);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .1s}
.u-rm:hover{background:var(--bg4);color:var(--red)}

/* GADS blocks */
.gads-block{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}

/* LINK RESULT */
.link-result-box{margin-top:14px;background:var(--bg3);border:1px solid var(--green-border);border-radius:12px;padding:12px 14px}
.lrb-label{font-size:10px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.lrb-url-row{display:flex;gap:7px;align-items:center}
.lrb-url{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg4);padding:5px 9px;border-radius:5px;border:1px solid var(--border)}
.lrb-hint{font-size:10px;color:var(--text3);margin-top:6px}

/* ══ CLIENT PORTAL ══ */
.client-portal{min-height:100vh;background:var(--bg)}
/* INTERNAL PREVIEW BANNER */
.preview-banner{background:var(--amber-bg);border-bottom:1px solid var(--amber-border);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--amber)}
.preview-banner strong{font-weight:600}

.client-hero{padding:26px 20px 20px;text-align:center;border-bottom:1px solid var(--border)}
.ch-agency{font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.ch-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.ch-meta{font-size:12px;color:var(--text2)}
.ch-prog-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.ch-prog-bar{height:3px;width:100px;background:var(--border);border-radius:2px;overflow:hidden}
.ch-prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s}

/* GALLERY */
.gallery-wrap{max-width:1000px;margin:0 auto;padding:18px 16px 90px}
.gallery-sub{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px}
.gal-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s}
.gal-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.gal-card.gal-ok{border-color:#d1fae5;border-width:1px;}
.gal-card.gal-chg{border-color:#fee2e2;border-width:1px;}
.gal-thumb{height:120px;background:var(--bg3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.gal-thumb img,.gal-thumb video{width:100%;height:100%;object-fit:cover}
.gal-badge{position:static;display:inline-block}
.gal-info{padding:7px 10px 9px}
.gal-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-note{font-size:10px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Review cards (google/seo) */
.review-card-wrap{max-width:760px;margin:0 auto;padding:18px 16px 90px}
.review-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:border-color .15s}
.review-card.gal-ok{border-color:var(--green-border)}
.review-card.gal-chg{border-color:var(--red-border)}
.rc-hd{padding:11px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.rc-body{padding:13px}
.rc-field-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.rc-field-val{font-size:12px;color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:7px 10px;line-height:1.5;word-break:break-word;margin-bottom:7px}
.rc-char{font-size:9px;color:var(--text3);text-align:right;margin-top:-4px;margin-bottom:7px}
.rc-2col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-decision{display:flex;gap:6px;padding-top:9px;border-top:1px solid var(--border);margin-top:8px}
.rd-btn{flex:1;padding:6px;border-radius:8px;font-size:11px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;gap:4px}
.rd-btn:hover{background:var(--bg4)}
.rd-btn.d-ok{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.rd-btn.d-chg{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.seo-cl{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.seo-cr{display:flex;align-items:center;gap:7px}
.seo-c-num{width:17px;height:17px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.seo-add-btn{font-size:11px;color:var(--accent);cursor:pointer;padding:3px 0;display:inline-flex;align-items:center;gap:3px}
.seo-add-btn:hover{text-decoration:underline}

/* SUBMIT BAR */
.submit-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(9,9,11,.94);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;z-index:50}
[data-theme="light"] .submit-bar{background:rgba(248,248,250,.94)}
.submit-stats{font-size:11px;color:var(--text2)}

/* ══ ASSET REVIEW ══ */
.ar-topbar{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 10px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;gap:6px;overflow:hidden}
.ar-bc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text3);min-width:0;overflow:hidden}
.ar-nav{display:flex;gap:4px;flex-shrink:0}

.ar-body{display:flex;flex:1;min-height:0;overflow:hidden}
.ar-canvas{flex:1;background:var(--bg3);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;position:relative;padding:0}

.pin-wrap{position:relative;display:inline-block}
.pin-wrap.is-img{cursor:crosshair}
.pin-wrap img,.pin-wrap video{display:block;max-width:min(700px,calc(100vw - 310px));max-height:calc(100vh - 120px);border-radius:8px;border:1px solid var(--border)}
.pin-wrap.is-meta{display:block;width:100%;max-width:500px}
.ar-no-media{width:300px;height:200px;background:var(--bg4);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3);font-size:12px;text-align:center;padding:20px}
.canvas-tip{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10px;color:var(--text3);pointer-events:none}
.video-tip{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10px;color:var(--amber);pointer-events:none}
.pin-dot{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--accent2);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;cursor:pointer;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .1s}
.pin-dot:hover{transform:translate(-50%,-50%) scale(1.12)}

.ar-sidebar{width:276px;flex-shrink:0;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ars-top{padding:12px 13px;border-bottom:1px solid var(--border);flex-shrink:0}
.ars-name{font-size:13px;font-weight:600;word-break:break-word;line-height:1.4}
.ars-note{font-size:11px;color:var(--text2);margin-top:2px}
.ars-scroll{flex:1;overflow-y:auto;padding:12px 13px;display:flex;flex-direction:column;gap:12px}
.ars-foot{padding:10px 13px;border-top:1px solid var(--border);flex-shrink:0}
.sec-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.dec-btns{display:flex;gap:5px}
.dec-btn{flex:1;padding:10px 4px;border-radius:10px;font-size:12px;font-weight:600;border:1.5px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.dec-btn:hover{background:var(--bg4)}
.dec-btn.d-ok{background:var(--green-bg);border-color:var(--green-border);color:var(--green);transform:scale(1.02);box-shadow:0 2px 8px rgba(34,197,94,.2)}
.dec-btn.d-chg{background:var(--red-bg);border-color:var(--red-border);color:var(--red);transform:scale(1.02);box-shadow:0 2px 8px rgba(239,68,68,.2)}
.pin-list{display:flex;flex-direction:column;gap:5px}
.pin-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:7px 9px}
.pin-hd{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.pin-num{width:16px;height:16px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.pin-rm{margin-left:auto;background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:1px 4px;border-radius:3px}
.pin-rm:hover{color:var(--red);background:var(--red-bg)}
.pin-hint{font-size:10px;color:var(--text3);line-height:1.6}

/* ══ SUBMITTED ══ */
#screen-submitted .sub-inner{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.sub-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:40px 32px;max-width:380px;text-align:center}
.sub-check{width:48px;height:48px;border-radius:50%;background:var(--green-bg);border:1px solid var(--green-border);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.sub-title{font-size:20px;font-weight:600;margin-bottom:6px;letter-spacing:-.02em}
.sub-text{font-size:12px;color:var(--text2);line-height:1.7}

/* ══ BATCH DETAIL ══ */
.bd-wrap{padding:20px 22px}
.bd-hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.bd-title{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
.bd-meta{font-size:12px;color:var(--text2)}
.bd-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;flex-shrink:0}

/* STATUS NOTES (bonus feature) */
.status-note-row{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--amber);display:flex;align-items:flex-start;gap:8px;margin-bottom:14px}
.status-note-icon{flex-shrink:0;margin-top:1px}

/* FEEDBACK BLOCKS */
.fb-block{background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-bottom:7px;overflow:hidden}
.fb-hd{padding:10px 13px;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;transition:background .1s}
.fb-hd:hover{background:var(--bg3)}
.fb-thumb{width:44px;height:33px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.fb-thumb img,.fb-thumb video{width:100%;height:100%;object-fit:cover}
.fb-info{flex:1;min-width:0}
.fb-name{font-size:12px;font-weight:500}
.fb-note{font-size:10px;color:var(--text3)}
.fb-inds{display:flex;align-items:center;gap:5px;flex-shrink:0}
.fb-ind{font-size:10px;color:var(--text3);white-space:nowrap}
.fb-chev{color:var(--text3);font-size:10px;flex-shrink:0;transition:transform .18s}
.fb-chev.open{transform:rotate(180deg)}
.fb-body{display:none;padding:11px 13px;border-top:1px solid var(--border);background:rgba(0,0,0,.1)}
[data-theme="light"] .fb-body{background:rgba(0,0,0,.02)}
.fb-body.open{display:block}
.fb-section{margin-bottom:10px}
.fb-section:last-child{margin-bottom:0}
.fb-sec-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.fb-text-box{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--text2);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.fb-text-box.empty{color:var(--text3);font-style:italic}
.fb-pin-list{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.fb-pin-row{display:flex;align-items:flex-start;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:7px 9px}
.fb-pin-num{width:17px;height:17px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px}
.fb-pin-text{font-size:11px;color:var(--text2);line-height:1.5}
.fb-pin-pos{font-size:9px;color:var(--text3);margin-top:1px}

/* ══ SETTINGS ══ */
.settings-layout{display:grid;grid-template-columns:175px 1fr}
.settings-nav{padding:12px 0;border-right:1px solid var(--border);background:var(--bg);align-self:flex-start;min-height:100%}
.sn-item{padding:7px 14px;font-size:12px;color:var(--text3);cursor:pointer;transition:all .1s;border-left:2px solid transparent;display:flex;align-items:center;gap:7px;height:36px}
.sn-item:hover{color:var(--text2);background:rgba(129,140,248,.04)}
.sn-item.active{color:var(--text);background:rgba(129,140,248,.08);border-left-color:var(--accent);font-weight:500}
.sn-item svg{width:12px;height:12px;flex-shrink:0}
.settings-panel{padding:20px 22px;max-width:640px;overflow-y:auto}
.settings-section{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);gap:16px}
.settings-row:last-child{border-bottom:none}
.settings-row.col{flex-direction:column;align-items:flex-start;gap:8px}
.settings-row-info{flex:1}
.settings-row-label{font-size:12px;font-weight:500;margin-bottom:2px}
.settings-row-hint{font-size:11px;color:var(--text3);line-height:1.4}
.settings-row-ctrl{flex-shrink:0;min-width:180px}
.user-row{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border)}
.user-row:last-child{border-bottom:none}
.u-ava{width:28px;height:28px;border-radius:50%;background:var(--accent-glow);border:1px solid rgba(129,140,248,.3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--accent);flex-shrink:0}
.u-details{flex:1;min-width:0}
.u-name{font-size:12px;font-weight:500}
.u-email{font-size:10px;color:var(--text3)}
.u-role-chip{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--bg3);border:1px solid var(--border);color:var(--text2)}

/* TOGGLE */
.toggle{position:relative;width:32px;height:18px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border2);border-radius:9px;transition:all .18s;cursor:pointer}
.toggle input:checked+.toggle-track{background:var(--accent2);border-color:var(--accent2)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .18s;pointer-events:none}
.toggle input:checked~.toggle-thumb{transform:translateX(14px)}

/* WH result */
.wh-result{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:11px;display:none}
.wh-result.ok{display:block;background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)}
.wh-result.err{display:block;background:var(--red-bg);border:1px solid var(--red-border);color:var(--red)}

/* CLIENT ACCESS MATRIX */
.access-matrix{display:flex;flex-direction:column;gap:8px}
.access-row{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.access-row-hd{font-size:12px;font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.access-checkboxes{display:flex;flex-wrap:wrap;gap:6px}
.access-check-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:3px 8px;cursor:pointer;transition:all .12s}
.access-check-item:hover{border-color:var(--border2)}
.access-check-item input{accent-color:var(--accent2);cursor:pointer}
.access-check-item.checked{background:var(--accent-glow);border-color:var(--accent);color:var(--text)}

/* API STATUS */
.api-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:600}
.api-status.connected{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.api-status.local{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.api-status.error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}

/* LOGIN */
#screen-login .login-inner{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:30px 26px;width:100%;max-width:340px;box-shadow:0 20px 60px var(--shadow)}
.login-logo-row{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:22px}
.login-error{background:var(--red-bg);border:1px solid var(--red-border);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--red);display:none}
.login-error.show{display:block}
.login-footer{margin-top:14px;font-size:11px;color:var(--text3);text-align:center;line-height:1.6}

/* UTILS */
.flex{display:flex}.ic{align-items:center}.jb{justify-content:space-between}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.c2{color:var(--text2)}.c3{color:var(--text3)}.fw5{font-weight:500}
.f10{font-size:10px}.f11{font-size:11px}.f12{font-size:12px}

.video-timestamp{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--accent);min-width:42px}
.pin-item-ts{font-size:10px;color:var(--amber);font-family:'JetBrains Mono',monospace;margin-left:4px;background:var(--amber-bg);padding:1px 5px;border-radius:4px;border:1px solid var(--amber-border)}

.correction-upload-area{border:1.5px dashed var(--green-border);border-radius:8px;padding:12px 14px;background:var(--green-bg);position:relative;cursor:pointer;transition:all .15s}
.correction-upload-area:hover{border-color:var(--green);background:rgba(74,222,128,0.12)}
.correction-upload-area input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.correction-file-row{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--green-border);border-radius:8px;padding:7px 10px;margin-top:6px}
/* ══ RESPONSIVE — Kunden-Review-Portal ══ */
@media (max-width: 700px) {
  /* Client portal hero */
  .client-hero { padding: 20px 14px 16px; }
  .ch-title { font-size: 17px; }
  .ch-prog-row { flex-wrap: wrap; gap: 6px; }
  .ch-prog-bar { width: 80px; }

  /* Gallery — 2 columns on mobile */
  .gallery-wrap { padding: 14px 12px 90px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gal-thumb { height: 100px; }
  .gallery-sub { font-size: 11px; }

  /* Review cards (google/seo) */
  .review-card-wrap { padding: 12px 10px 90px; }
  .rc-2col { grid-template-columns: 1fr; }
  .rc-decision { flex-direction: column; gap: 8px; }
  .rd-btn { padding: 10px; font-size: 12px; }

  /* Submit bar */
  .submit-bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .submit-stats { font-size: 10px; width: 100%; }
  #submit-btn { width: 100%; justify-content: center; }

  /* Preview banner */
  .preview-banner { flex-direction: column; gap: 6px; align-items: flex-start; }

  /* Asset review — mobile: scroll statt feste Höhen */
  #screen-asset-review.active { height: auto !important; overflow-y: auto !important; }
  .ar-body { flex-direction: column; overflow: visible; }
  .ar-canvas { flex-shrink: 0; padding: 12px 12px 0 !important; background: var(--bg3); }
  .pin-wrap img, .pin-wrap video {
    max-width: 100% !important;
    max-height: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .ar-sidebar {
    width: 100% !important;
    border-left: none;
    border-top: 3px solid var(--accent);
    overflow-y: visible;
    flex-shrink: 0;
    margin-top: 8px;
  }
  .ars-scroll { padding: 16px 14px; overflow-y: auto; }
  .ars-foot { padding: 8px 12px; position: sticky; bottom: 0; background: var(--bg2); }
  .ar-topbar { flex-wrap: nowrap; height: auto; padding: 8px 10px; gap: 6px; overflow-x: auto; }
  .ar-nav { flex-shrink: 0; gap: 3px; }
  .ar-nav .btn { padding: 5px 8px; font-size: 11px; white-space: nowrap; }
  /* Counter und Batch-Name auf Mobile ausblenden wenn beides Buttons sichtbar */
  #ar-counter { font-size: 10px; }

  /* Submitted screen */
  .sub-card { padding: 28px 20px; margin: 12px; }
}

@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .gal-thumb { height: 85px; }
  .ch-title { font-size: 15px; }
  .chip { font-size: 10px; padding: 2px 6px; }
}

/* Sidebar Overlay — immer im DOM, nur auf mobile sichtbar */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; top: 52px;
  background: rgba(0,0,0,.5); z-index: 199; cursor: pointer;
}
.sidebar-overlay.show { display: block; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Admin-Panel (Dashboard, Upload, Settings)
   Breakpoints: 900px (tablet), 640px (mobile)
═══════════════════════════════════════════════════════════ */

/* ── Topbar ── */
@media (max-width: 900px) {
  .topbar { padding: 0 12px; gap: 7px; }
  .logo span, .logo-text { display: none; }
  .user-name { display: none; }
  .tb-sep { display: none; }
  .breadcrumb { font-size: 11px; }
  .bc-item { max-width: 120px; }
}

/* ── Dashboard — Sidebar ausblenden, Hamburger-Toggle ── */
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }

  /* Sidebar als Off-Canvas */
  .sidebar {
    position: fixed !important; top: 52px; left: -260px; bottom: 0;
    width: 240px; z-index: 200;
    box-shadow: 4px 0 24px var(--shadow);
    transition: left .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .sidebar.open { left: 0 !important; }

  /* Overlay hinter Sidebar — position fixed nötig */
  .sidebar-overlay { display: none; }
  .sidebar-overlay.show { display: block; }

  .main-content { min-width: 0; }
  .page-wrap { padding: 14px 14px; }
  .page-hd { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .page-title { font-size: 15px; }

  /* Stats — 2x2 */
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .stat-val { font-size: 18px; }

  /* Filter bar */
  .filter-bar { gap: 6px; }
  .filter-bar .search-wrap { min-width: 0; flex: 1 1 100%; }
  .filter-bar select { flex: 1; min-width: 0; font-size: 11px; }

  /* Table — horizontal scroll */
  .card { overflow-x: auto; }
  .data-table th, .data-table td { padding: 8px 9px; font-size: 11px; white-space: nowrap; }
  /* Hide less important columns on tablet */
  .data-table th:nth-child(3),
  .data-table td:nth-child(3),
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  /* Stats — stacked */
  .stat-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-card { padding: 10px 12px; }
  .stat-val { font-size: 16px; }

  /* Hide more table columns on mobile */
  .data-table th:nth-child(4),
  .data-table td:nth-child(4),
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) { display: none; }

  /* Action buttons — icon only */
  .action-cell .btn span { display: none; }
  .action-cell { gap: 3px; }

  /* Pager */
  .pager { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* ── API Badge — Text auf mobile kürzen ── */
@media (max-width: 640px) {
  .api-status-text { display: none; }
  .api-status { padding: 3px 7px; }
}

/* ── Hamburger Button ── */
.hamburger {
  display: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; flex-shrink: 0; padding: 0;
}
.hamburger span {
  display: block; width: 15px; height: 1.5px;
  background: var(--text2); border-radius: 2px; transition: all .2s;
}
@media (max-width: 900px) {
  .hamburger { display: flex; }
}

/* ── Upload / New Delivery ── */
@media (max-width: 900px) {
  .upload-grid { grid-template-columns: 1fr; }
  .upload-panel.right {
    border-left: none; border-top: 1px solid var(--border);
    max-height: 280px; overflow-y: auto;
  }
  .rtype-grid { gap: 6px; }
  .rtype-card { padding: 9px 8px; }
  .rtype-icon { font-size: 16px; }
  .rtype-name { font-size: 11px; }
  .rtype-hint { display: none; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .upload-panel { padding: 14px 12px; }
  .rtype-grid { grid-template-columns: repeat(3, 1fr); }
  .link-result-box { padding: 10px 12px; }
  .lrb-url { font-size: 9px; }
}

/* ── Delivery Detail ── */
@media (max-width: 900px) {
  .bd-wrap { padding: 14px 14px; }
  .bd-hd { flex-direction: column; gap: 10px; }
  .bd-actions { margin-left: 0; flex-wrap: wrap; }
  .bd-actions .btn { font-size: 11px; padding: 5px 10px; }
  .bd-title { font-size: 15px; }
}

/* ── Settings ── */
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-nav {
    display: flex; flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 0; gap: 0; white-space: nowrap;
    height: 44px; /* feste Höhe — kein Strecken */
  }
  .sn-item {
    border-left: none; border-bottom: 2px solid transparent;
    padding: 0 14px; flex-shrink: 0;
    height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .sn-item svg { display: none; } /* Icons auf mobile ausblenden — spart Platz */
  .sn-item.active {
    border-left: none; border-bottom-color: var(--accent);
    background: rgba(129,140,248,.08);
  }
  .settings-panel { padding: 14px; max-width: 100%; padding-top: 12px; }
  .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .settings-row-ctrl { min-width: 0; width: 100%; }
  .settings-row-ctrl input,
  .settings-row-ctrl select { width: 100%; }
  pre { white-space: pre-wrap; word-break: break-all; font-size: 10px; }
}

/* ── Modal ── */
@media (max-width: 640px) {
  .modal { max-width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
}

/* ── Login ── */
@media (max-width: 640px) {
  .login-card { padding: 24px 18px; }
}

/* ── Toast ── */
@media (max-width: 640px) {
  #toast { left: 12px; right: 12px; bottom: 80px; max-width: 100%; }
}
#ar-media{max-width:100%;max-height:100%}
.ar-canvas.is-gads{align-items:flex-start !important;justify-content:flex-start !important;overflow-y:auto !important}
.ar-canvas.is-gads #ar-media{width:100% !important;display:block !important}

@media (max-width: 760px) { .publisher-grid { grid-template-columns: 1fr !important; } }

/* ── Meta Ad Post View ──────────────────────────────── */
.meta-post-frame {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.08);
  overflow: visible;
  margin: 20px auto;
  width: calc(100% - 32px);
  max-width: 500px;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: #1c1e21;
}
.meta-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.meta-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1877f2, #0a5dba);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.meta-post-page-info {
  flex: 1;
  min-width: 0;
}
.meta-post-page-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1e21;
  line-height: 1.2;
}
.meta-post-sponsored {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #65676b;
  margin-top: 1px;
}
.meta-post-primary-text {
  padding: 0 14px 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #1c1e21;
  white-space: pre-wrap;
  word-break: break-word;
}
.meta-post-primary-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.meta-post-seemore {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  color: #65676b;
  cursor: pointer;
  font-family: inherit;
  display: inline;
}
.meta-post-media {
  position: relative;
  width: 100%;
  line-height: 0;
  cursor: default;
  overflow: hidden;
  border-radius: 0;
}
.meta-post-media img,
.meta-post-media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  vertical-align: bottom;
  border-radius: 0;
}
.meta-post-cta-bar {
  border-top: 1px solid #e4e6eb;
  background: #f0f2f5;
  padding: 10px 14px;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.meta-post-url-domain {
  font-size: 11px;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.meta-post-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: #1c1e21;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-post-cta-btn {
  background: #e2e5e9;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1e21;
  cursor: default;
  flex-shrink: 0;
  font-family: inherit;
}
/* Copy Feedback Section */
.meta-copy-feedback {
  border-top: 1px solid #e4e6eb;
  background: #fff;
  padding: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.meta-copy-feedback-toggle {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.meta-copy-feedback-toggle:hover { background: #f8f9fa; }
.meta-copy-feedback-toggle.has-feedback { border-bottom-color: #e4e6eb; }
.meta-copy-feedback-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Pin dots on media */
.meta-post-media .pin-dot {
  position: absolute;
  z-index: 10;
}
/* Dark mode */
.dark .meta-post-frame,
.dark .meta-post-primary-text,
.dark .meta-post-page-name,
.dark .meta-post-cta-title { color: #e4e6eb; }
.dark .meta-post-frame { background: #242526; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.dark .meta-post-cta-bar { background: #3a3b3c; border-color: #3a3b3c; }
.dark .meta-post-cta-btn { background: #4e4f50; color: #e4e6eb; }
.dark .meta-post-sponsored { color: #b0b3b8; }
.dark .meta-post-url-domain { color: #b0b3b8; }
.dark .meta-copy-feedback { background: #242526; }
.dark .meta-copy-feedback-toggle:hover { background: #3a3b3c; }

/* ── Meta Feed Gallery ── */
.meta-feed-wrap {
  max-width: 500px;
  margin: 0 auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-feed-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  transition: box-shadow .15s;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: #1c1e21;
}
.meta-feed-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.meta-feed-card.feed-approved { box-shadow: 0 0 0 2px #22c55e, 0 2px 8px rgba(34,197,94,.2); }
.meta-feed-card.feed-changes  { box-shadow: 0 0 0 2px #ef4444, 0 2px 8px rgba(239,68,68,.2); }
.feed-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.feed-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1877f2, #0a5dba);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  user-select: none;
}
.feed-card-page-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.feed-card-sponsored {
  font-size: 12px;
  color: #65676b;
}
.feed-card-media {
  width: 100%;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
}
.feed-card-media img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
  object-fit: cover;
  transition: opacity .15s;
}
.feed-card-media img:hover { opacity: .97; }
.feed-card-copy {
  padding: 10px 14px;
  border-top: 1px solid #e4e6ea;
}
.feed-card-copy-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1c1e21;
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.feed-card-copy-domain {
  font-size: 11px;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.feed-card-copy-title {
  font-size: 13px;
  font-weight: 600;
  color: #1c1e21;
  margin-top: 1px;
}
.feed-card-copy-feedback {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e4e6ea;
}
.feed-card-copy-feedback-label {
  font-size: 11px;
  font-weight: 600;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.feed-card-copy-feedback textarea {
  width: 100%;
  border: 1px solid #dfe1e5;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  min-height: 52px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  color: #1c1e21;
  background: white;
  transition: border-color .15s;
}
.feed-card-copy-feedback textarea:focus { outline: none; border-color: #1877f2; }
.feed-reactions {
  padding: 8px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e6ea;
}
.feed-actions {
  padding: 6px 10px 12px;
  display: flex;
  gap: 6px;
}
.feed-action-btn {
  flex: 1;
  padding: 7px 4px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .15s;
  font-family: inherit;
  color: #65676b;
}
.feed-action-btn:hover { background: #f0f2f5; }
.feed-action-btn.approved { background: #d1fae5; color: #15803d; }
.feed-action-btn.changes  { background: #fee2e2; color: #dc2626; }
.feed-action-btn.pins     { background: var(--bg3); color: var(--text2); }
.gal-status-bar{padding:6px 10px 4px;display:flex;align-items:center;justify-content:flex-end}
.gal-badge{position:static;display:inline-block}
/* Feedback-Header über der Sidebar */
.ars-feedback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 9px;
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .meta-post-frame {
    max-width: 100% !important;
    border-radius: 10px !important;
    margin: 0 auto 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
    width: 100% !important;
  }
  .meta-post-media img,
  .meta-post-media video {
    width: 100% !important;
    max-height: none !important;
  }
  .ars-feedback-header { padding: 10px 12px 8px; font-size: 12px; }
}