:root {
  --bg: #0f0f11; --bg2: #18181c; --bg3: #222228;
  --border: rgba(255,255,255,.08);
  --text: #f0ede8; --text2: #9b9896; --text3: #5a5855;
  --accent: #e8c97a; --accent2: #c9a84c;
  --like: #5bdc8a; --dislike: #f05060; --superlike: #60b4f0;
  --r: 16px; --shadow: 0 8px 40px rgba(0,0,0,.5);

  /* Fluid type scale – scales between mobile (360px) and desktop (1200px) viewports.
     clamp(min, preferred, max) keeps text from overflowing on small screens
     and from looking tiny on large ones, without separate per-breakpoint rules. */
  --fs-display: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);    /* big page titles */
  --fs-title:   clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); /* card / section titles */
  --fs-body:    clamp(0.82rem, 0.78rem + 0.18vw, 0.95rem);/* body text, descriptions */
  --fs-small:   clamp(0.72rem, 0.69rem + 0.12vw, 0.82rem);/* meta, badges, captions */
  --fs-tiny:    clamp(0.64rem, 0.62rem + 0.08vw, 0.72rem);/* tab labels, micro text */
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); font-size:clamp(14px, 13px + 0.3vw, 15px); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
input,select,button,textarea { font-family:inherit; }
a { color:var(--accent); text-decoration:none; }

/* ── Screens ─────────────────────────────────────────── */
.screen { display:none; width:100%; height:100%; }
.screen.active { display:flex; flex-direction:column; }

/* ── Auth ────────────────────────────────────────────── */
#auth-screen { align-items:center; justify-content:center; position:relative; overflow:hidden; }
.auth-bg { position:absolute; inset:0; pointer-events:none; }
.auth-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.18; }
.blob1 { width:400px;height:400px;background:var(--accent);top:-100px;left:-100px;animation:float1 8s ease-in-out infinite; }
.blob2 { width:300px;height:300px;background:var(--like);bottom:-80px;right:-60px;animation:float2 10s ease-in-out infinite; }
.blob3 { width:200px;height:200px;background:var(--superlike);top:50%;left:50%;transform:translate(-50%,-50%);animation:float3 7s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-30px)} }
@keyframes float3 { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)} }

.auth-container { position:relative;z-index:1;width:100%;max-width:400px;padding:32px 24px;background:rgba(24,24,28,.88);border:1px solid var(--border);border-radius:28px;backdrop-filter:blur(20px);box-shadow:var(--shadow);animation:slideUp .5s cubic-bezier(.16,1,.3,1); }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.auth-logo { text-align:center;margin-bottom:24px; }
.logo-icon { font-size:2.8rem;display:block;margin-bottom:6px;animation:bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
.logo-text { font-family:'Fraunces',serif;font-size:1.9rem;font-weight:700;color:var(--accent); }
.logo-sub  { font-size:.875rem;color:var(--text2);margin-top:2px; }

.auth-tabs { display:flex;background:var(--bg3);border-radius:12px;padding:4px;margin-bottom:20px;gap:4px; }
.tab-btn { flex:1;padding:9px;border:none;background:transparent;color:var(--text2);border-radius:9px;cursor:pointer;font-size:.88rem;font-weight:500;transition:all .2s; }
.tab-btn.active { background:var(--bg2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.3); }

.auth-form { display:none;flex-direction:column;gap:14px; }
.auth-form.active { display:flex; }

.btn-link { background:none;border:none;color:var(--text2);font-size:.82rem;cursor:pointer;text-align:left;padding:2px 0;text-decoration:underline;text-underline-offset:3px; }
.btn-link:hover { color:var(--accent); }

/* ── Fields ──────────────────────────────────────────── */
.field-group { display:flex;flex-direction:column;gap:5px; }
.field-group label { font-size:.78rem;font-weight:600;color:var(--text2);letter-spacing:.5px;text-transform:uppercase; }
.field-group input,.field-group select,input.field-input {
  background:var(--bg3);border:1px solid var(--border);border-radius:11px;
  padding:11px 14px;color:var(--text);font-size:.93rem;outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%;
}
.field-group input:focus,.field-group select:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,201,122,.12); }
.field-group input::placeholder { color:var(--text3); }
.field-group select option { background:var(--bg2); }

.form-error   { font-size:.82rem;color:var(--dislike);min-height:1em; }
.form-success { font-size:.82rem;color:var(--like);min-height:1em; }

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary { background:var(--accent);color:#0f0f11;border:none;border-radius:12px;padding:12px 22px;font-size:.93rem;font-weight:600;cursor:pointer;width:100%;transition:transform .15s,box-shadow .15s,background .2s; }
.btn-primary:hover { background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,201,122,.3); }
.btn-secondary { background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:12px;padding:11px 20px;font-size:.93rem;font-weight:500;cursor:pointer;transition:background .2s; }
.btn-secondary:hover { background:rgba(232,201,122,.08); }
.btn-secondary.compact { width:auto;padding:9px 14px;font-size:.83rem; }
.btn-ghost { background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:10px;padding:7px 14px;font-size:.85rem;cursor:pointer;transition:color .2s,border-color .2s; }
.btn-ghost:hover { color:var(--text);border-color:rgba(255,255,255,.2); }
.btn-danger { background:rgba(240,80,96,.1);color:var(--dislike);border:1px solid rgba(240,80,96,.3);border-radius:12px;padding:12px;font-size:.93rem;font-weight:500;cursor:pointer;width:100%;transition:background .2s; }
.btn-danger:hover { background:rgba(240,80,96,.2); }
.btn-row { display:flex;gap:10px;margin-bottom:20px; }

/* ── App chrome ──────────────────────────────────────── */
.app-nav { height:56px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;z-index:10; }
.nav-logo { font-family:'Fraunces',serif;font-size:1.05rem;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:6px; }
.nav-actions { display:flex;align-items:center;gap:10px; }
.nav-user { font-size:.82rem;color:var(--text2); }

.tab-bar { display:flex;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0; }
.tab-nav { flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0;background:transparent;border:none;color:var(--text3);font-size:var(--fs-tiny);font-weight:500;cursor:pointer;transition:color .2s;position:relative; }
.tab-nav .tab-icon { font-size:1.15rem; }
.tab-nav.active { color:var(--accent); }
.tab-nav.active::after { content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:22px;height:2px;background:var(--accent);border-radius:2px; }

.view { display:none;flex:1;overflow:hidden;flex-direction:column; }
.view.active { display:flex; }
.view-content { flex:1;overflow-y:auto;padding:18px;scrollbar-width:thin;scrollbar-color:var(--bg3) transparent; }
.view-title { font-family:'Fraunces',serif;font-size:var(--fs-display);font-weight:700;margin-bottom:3px; }
.view-subtitle { font-size:var(--fs-body);color:var(--text2);margin-bottom:20px; }

/* ── Swipe view ──────────────────────────────────────── */
#view-swipe { background:var(--bg); }
.swipe-header { display:flex;align-items:center;justify-content:flex-end;padding:8px 18px;border-bottom:1px solid var(--border);flex-shrink:0; }
.swipe-counter { font-size:.8rem;color:var(--text2); }

.card-stack { flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:14px 18px 6px;overflow:hidden; }

/* ── Swipe card ──────────────────────────────────────── */
.swipe-card { position:absolute;width:100%;max-width:400px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);cursor:grab;user-select:none;transform-origin:bottom center;will-change:transform; }
.swipe-card:active { cursor:grabbing; }
.swipe-card.card-behind-1 { transform:scale(.95) translateY(12px);z-index:1;opacity:.8; }
.swipe-card.card-behind-2 { transform:scale(.9)  translateY(24px);z-index:0;opacity:.5; }
.swipe-card.card-top { z-index:5; }
.swipe-card.fly-left  { transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;transform:translateX(-150%) rotate(-20deg) !important;opacity:0; }
.swipe-card.fly-right { transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;transform:translateX(150%)  rotate(20deg)  !important;opacity:0; }
.swipe-card.fly-up    { transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;transform:translateY(-150%) scale(1.1)     !important;opacity:0; }

.card-img-area { position:relative;width:100%;height:210px;overflow:hidden;background:var(--bg3); }
.card-image { width:100%;height:100%;object-fit:cover;display:block; }
.card-image-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;background:linear-gradient(135deg,var(--bg3),var(--bg2)); }
.card-photo-btn { position:absolute;bottom:9px;right:9px;background:rgba(0,0,0,.65);border:none;border-radius:20px;padding:3px 10px;font-size:.72rem;color:#fff;cursor:pointer;transition:background .2s;backdrop-filter:blur(4px); }
.card-photo-btn:hover { background:rgba(0,0,0,.85); }
.card-status-badge { position:absolute;top:10px;left:10px;border-radius:8px;padding:3px 10px;font-size:.72rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase; }
.status-reserved { background:rgba(240,200,60,.15);color:#f0c83c;border:1px solid rgba(240,200,60,.3); }

.card-overlay-badge { position:absolute;top:18px;font-size:1.3rem;font-weight:800;padding:5px 14px;border-radius:8px;border:3px solid;opacity:0;transition:opacity .1s;pointer-events:none;letter-spacing:2px;text-transform:uppercase;font-family:'Fraunces',serif; }
.badge-like     { left:18px;color:var(--like);border-color:var(--like);transform:rotate(-15deg); }
.badge-dislike  { right:18px;color:var(--dislike);border-color:var(--dislike);transform:rotate(15deg); }
.badge-superlike { left:50%;transform:translateX(-50%);color:var(--superlike);border-color:var(--superlike); }

.card-body { padding:13px 15px 15px; }
.card-platform { display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:rgba(232,201,122,.1);border-radius:6px;padding:2px 7px;margin-bottom:5px; }
.card-title { font-family:'Fraunces',serif;font-size:var(--fs-title);font-weight:700;margin-bottom:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

.card-price-row { display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap; }
.card-price-main { font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700; }
.price-tag-cold  { font-size:.75rem;color:var(--accent);background:rgba(232,201,122,.1);border-radius:5px;padding:1px 7px; }
.price-tag-warm  { font-size:.75rem;color:var(--text2);background:var(--bg3);border-radius:5px;padding:1px 7px; }

.card-meta { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px; }
.card-meta-item { font-size:.78rem;color:var(--text2);background:var(--bg3);border-radius:6px;padding:2px 7px; }

.card-tags { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px; }
.card-tag { font-size:.68rem;color:var(--text3);border:1px solid var(--border);border-radius:20px;padding:1px 7px; }

.card-desc { font-size:var(--fs-small);color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.card-link { display:block;text-align:right;font-size:.75rem;color:var(--accent);margin-top:7px;opacity:.7;background:none;border:none;width:100%;padding:0;cursor:pointer;font-family:inherit; }
.card-link:hover { opacity:1; }

/* ── Swipe buttons ───────────────────────────────────── */
.swipe-actions { display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 18px 16px;flex-shrink:0; }
.action-btn { width:58px;height:58px;border-radius:50%;border:2px solid;background:transparent;font-size:1.35rem;cursor:pointer;transition:transform .15s,box-shadow .15s,background .2s;display:flex;align-items:center;justify-content:center; }
.action-btn.dislike   { border-color:var(--dislike);color:var(--dislike); }
.action-btn.dislike:hover { background:rgba(240,80,96,.15);transform:scale(1.1);box-shadow:0 4px 20px rgba(240,80,96,.3); }
.action-btn.like      { border-color:var(--like);color:var(--like);width:68px;height:68px;font-size:1.55rem; }
.action-btn.like:hover { background:rgba(91,220,138,.15);transform:scale(1.1);box-shadow:0 4px 20px rgba(91,220,138,.3); }
.action-btn.superlike { border-color:var(--superlike);color:var(--superlike); }
.action-btn.superlike:hover { background:rgba(96,180,240,.15);transform:scale(1.1);box-shadow:0 4px 20px rgba(96,180,240,.3); }

.empty-state { text-align:center;padding:40px 20px;color:var(--text2); }
.empty-icon  { font-size:2.8rem;margin-bottom:10px; }
.empty-sub   { font-size:.83rem;margin-top:5px;color:var(--text3); }

/* ── Add / form cards ────────────────────────────────── */
.card-form { background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:13px;margin-bottom:16px; }
.hint-card { margin-top:0; }
.hint-list { display:flex;flex-direction:column;gap:8px; }
.hint-item { font-size:.8rem;color:var(--text2);line-height:1.6;background:var(--bg3);border-radius:8px;padding:10px 12px; }
.hint-item strong { color:var(--text); }
.section-label { font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text2); }
.chip-row { display:flex;flex-wrap:wrap;gap:7px; }
.chip { background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:3px 11px;font-size:.76rem;color:var(--text2); }

/* ── Rated / list cards ──────────────────────────────── */
.rated-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px; }
.rated-header .view-title { margin-bottom:0; }
.rated-filter { display:flex;gap:6px;flex-wrap:wrap; }
.filter-btn { background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.78rem;color:var(--text2);cursor:pointer;transition:all .2s; }
.filter-btn.active { background:var(--accent);color:#0f0f11;border-color:var(--accent); }

.listings-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px; }

.list-card { background:var(--bg2);border:1px solid var(--border);border-radius:13px;transition:border-color .2s,transform .2s;position:relative; }
.list-card:hover { border-color:rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(0,0,0,.35); }
.list-card-img-area { position:relative;width:100%;height:140px;overflow:hidden;cursor:pointer;border-radius:12px 12px 0 0; }
.list-card-img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s; }
.list-card-img-area:hover .list-card-img { transform:scale(1.04); }
.list-card-img-placeholder { width:100%;height:100%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:2.4rem; }
.list-card-photo-badge { position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.65);border-radius:20px;padding:2px 8px;font-size:.68rem;color:#fff;backdrop-filter:blur(4px); }
.list-card-offline-badge { position:absolute;top:6px;left:6px;background:rgba(240,80,96,.8);border-radius:6px;padding:2px 7px;font-size:.68rem;color:#fff;font-weight:600; }

.list-card-body { padding:11px 13px 13px; }
.list-card-title { font-family:'Fraunces',serif;font-size:var(--fs-title);font-weight:700;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.list-card-price { font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:2px; }
.list-card-price-warm { font-size:.73rem;color:var(--text2);margin-bottom:5px; }
.list-card-meta { font-size:.75rem;color:var(--text2);display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px; }
.list-card-tags { display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px; }
.list-card-tag { font-size:.64rem;color:var(--text3);border:1px solid var(--border);border-radius:20px;padding:1px 6px; }
.list-card-link { font-size:.73rem;color:var(--accent);display:block;margin-bottom:6px;background:none;border:none;width:100%;text-align:left;padding:0;cursor:pointer;font-family:inherit; }
.list-card-link:hover { text-decoration:underline; }

.swipe-badge { display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;margin-bottom:6px; }
.swipe-badge.like      { background:rgba(91,220,138,.12);color:var(--like); }
.swipe-badge.superlike { background:rgba(96,180,240,.12);color:var(--superlike); }
.swipe-badge.dislike   { background:rgba(240,80,96,.10);color:var(--dislike); }

.unswipe-btn { width:100%;background:transparent;border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:.73rem;color:var(--text2);cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;gap:4px; }
.unswipe-btn:hover { background:var(--bg3);color:var(--text); }

/* ── Groups ──────────────────────────────────────────── */
.groups-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px; }
.group-card { background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .2s,transform .2s; }
.group-card:hover { border-color:var(--accent);transform:translateY(-2px); }
.group-card-name { font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;margin-bottom:5px; }
.group-card-meta { font-size:.8rem;color:var(--text2);display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.group-code { font-family:monospace;font-size:.8rem;color:var(--accent);background:var(--bg3);border-radius:5px;padding:2px 7px;cursor:pointer; }
.group-code:hover { background:rgba(232,201,122,.12); }

.back-btn { margin-bottom:14px; }
.group-detail-header { background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px; }
.group-detail-name { font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;margin-bottom:8px; }
.invite-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.invite-code-big { font-family:monospace;font-size:1.15rem;color:var(--accent);background:var(--bg3);border-radius:8px;padding:4px 14px;letter-spacing:3px; }

.members-list { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px; }
.member-chip { background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:3px 11px;font-size:.8rem; }
.you-badge { color:var(--accent);font-size:.7rem; }

/* Tier badges */
.tier-section { margin-bottom:20px; }
.tier-header { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;border-radius:8px;margin-bottom:10px;display:inline-flex;align-items:center;gap:6px; }
.tier-einstimmig  { background:rgba(91,220,138,.12);color:var(--like); }
.tier-mehrheitlich { background:rgba(96,180,240,.12);color:var(--superlike); }
.tier-gespalten   { background:rgba(232,201,122,.1);color:var(--accent); }
.tier-abgelehnt   { background:rgba(240,80,96,.1);color:var(--dislike); }

.group-listing-card { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px;padding-right:38px;margin-bottom:9px;display:flex;gap:12px;align-items:flex-start;position:relative; }
.group-listing-img { width:72px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--bg3); }
.group-listing-img-placeholder { width:72px;height:60px;border-radius:8px;flex-shrink:0;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:1.4rem; }
.group-listing-info { flex:1;min-width:0; }
.group-listing-title { font-size:.9rem;font-weight:600;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.group-listing-meta  { font-size:.76rem;color:var(--text2); }
.vote-chips { display:flex;flex-wrap:wrap;gap:4px;margin-top:5px; }
.vote-chip { font-size:.7rem;padding:2px 8px;border-radius:20px;border:1px solid; }
.vote-chip.like      { color:var(--like);border-color:rgba(91,220,138,.3);background:rgba(91,220,138,.08); }
.vote-chip.superlike { color:var(--superlike);border-color:rgba(96,180,240,.3);background:rgba(96,180,240,.08); }
.vote-chip.dislike   { color:var(--dislike);border-color:rgba(240,80,96,.3);background:rgba(240,80,96,.08); }

/* ── Jobs ────────────────────────────────────────────── */
.job-card { background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:15px;margin-bottom:11px;transition:border-color .2s; }
.job-card.paused { opacity:.6; }
.job-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.job-card-info { flex:1;min-width:0; }
.job-card-label { font-family:'Fraunces',serif;font-size:1rem;font-weight:700;margin-bottom:3px; }
.job-card-url { font-size:.7rem;color:var(--text3);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; }
.job-badges { display:flex;gap:5px;flex-wrap:wrap;margin-top:6px; }
.job-badge { font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid; }
.job-badge.platform-kleinanzeigen { color:#f5a623;border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.08); }
.job-badge.platform-immoscout     { color:var(--superlike);border-color:rgba(96,180,240,.3);background:rgba(96,180,240,.08); }
.job-badge.platform-immowelt      { color:#a78bfa;border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.08); }
.job-badge.platform-rentola       { color:#ff8a65;border-color:rgba(255,138,101,.3);background:rgba(255,138,101,.08); }
.job-badge.platform-meinestadt    { color:#4dd0c4;border-color:rgba(77,208,196,.3);background:rgba(77,208,196,.08); }
.job-badge.platform-unbekannt     { color:var(--text2);border-color:var(--border);background:var(--bg3); }
.job-badge.status-active  { color:var(--like);border-color:rgba(91,220,138,.3);background:rgba(91,220,138,.08); }
.job-badge.status-paused  { color:var(--text2);border-color:var(--border);background:var(--bg3); }
.job-badge.status-error   { color:var(--dislike);border-color:rgba(240,80,96,.3);background:rgba(240,80,96,.08); }
.job-stats { font-size:.76rem;color:var(--text2);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap; }
.job-stats strong { color:var(--text); }
.job-error { margin-top:7px;padding:7px 10px;background:rgba(240,80,96,.08);border:1px solid rgba(240,80,96,.2);border-radius:7px;font-size:.73rem;color:var(--dislike);font-family:monospace;word-break:break-all; }
.job-interval-row { display:flex;align-items:center;gap:7px;margin-top:8px;font-size:.76rem;color:var(--text2); }
.interval-input { width:60px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:3px 7px;color:var(--text);font-size:.76rem;text-align:center;outline:none; }
.interval-input:focus { border-color:var(--accent); }
.job-actions { display:flex;gap:7px;margin-top:10px;flex-wrap:wrap; }
.job-actions button { font-size:.76rem;padding:5px 11px;border-radius:7px;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:background .15s,color .15s; }
.job-actions button:hover { background:var(--bg2);color:var(--text); }
.job-actions .btn-run    { border-color:rgba(96,180,240,.4);color:var(--superlike); }
.job-actions .btn-run:hover { background:rgba(96,180,240,.1); }
.job-actions .btn-toggle.on { border-color:rgba(91,220,138,.4);color:var(--like); }
.job-actions .btn-toggle.on:hover { background:rgba(91,220,138,.1); }
.job-actions .btn-del    { border-color:rgba(240,80,96,.3);color:var(--dislike); }
.job-actions .btn-del:hover { background:rgba(240,80,96,.1); }

/* ── Settings ────────────────────────────────────────── */
.settings-card { background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:16px; }
.settings-avatar-row { display:flex;align-items:center;gap:14px; }
.settings-avatar { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:#0f0f11;flex-shrink:0; }
.settings-display-name  { font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700; }
.settings-display-email { font-size:.83rem;color:var(--text2);margin-top:2px; }
.settings-display-since { font-size:.73rem;color:var(--text3);margin-top:3px; }

.settings-section { background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px; }
.inline-row { display:flex;align-items:flex-end;gap:9px; }

.stats-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px; }
.stat-chip { background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px; }
.stat-num   { font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--accent); }
.stat-label { font-size:.73rem;color:var(--text2); }

/* ── Notification toggles ────────────────────────────── */
.notify-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0; }
.notify-info { display:flex;flex-direction:column;gap:2px; }
.notify-label { font-size:.88rem;font-weight:500; }
.notify-sub { font-size:.75rem;color:var(--text2); }
.notify-hint { font-size:.76rem;color:var(--accent);background:rgba(232,201,122,.08);border-radius:8px;padding:8px 10px;line-height:1.5; }

.toggle-list { display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:4px; }
.toggle-row { display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;transition:background .15s;gap:10px; }
.toggle-row:not(:last-child) { border-bottom:1px solid var(--border); }
.toggle-row:hover { background:var(--bg3); }
.toggle-row > span:first-child { font-size:.87rem; }
.toggle-cb { display:none; }
.toggle-switch { width:40px;height:22px;background:var(--bg3);border-radius:11px;position:relative;flex-shrink:0;transition:background .2s;border:1px solid var(--border); }
.toggle-switch::after { content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:transform .2s,background .2s; }
.toggle-cb:checked + .toggle-switch { background:rgba(91,220,138,.2);border-color:rgba(91,220,138,.4); }
.toggle-cb:checked + .toggle-switch::after { transform:translateX(18px);background:var(--like); }

/* ── Lightbox ────────────────────────────────────────── */
.lightbox { position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.lb-close { position:absolute;top:14px;right:18px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.2rem;width:38px;height:38px;border-radius:50%;cursor:pointer;z-index:10;transition:background .2s; }
.lb-close:hover { background:rgba(255,255,255,.2); }
.lb-arrow { position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:2.4rem;width:50px;height:50px;border-radius:50%;cursor:pointer;z-index:10;transition:background .2s;display:flex;align-items:center;justify-content:center; }
.lb-arrow:hover { background:rgba(255,255,255,.2); }
.lb-arrow:disabled { opacity:.2;cursor:default; }
.lb-prev { left:14px; } .lb-next { right:14px; }
.lb-img-wrap { max-width:calc(100vw - 130px);max-height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center; }
.lb-img-wrap img { max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:10px;box-shadow:0 8px 60px rgba(0,0,0,.8); }
.lb-counter { position:absolute;bottom:58px;left:50%;transform:translateX(-50%);font-size:.82rem;color:rgba(255,255,255,.6); }
.lb-thumbnails { position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;max-width:90vw;overflow-x:auto;padding:3px 7px;scrollbar-width:none; }
.lb-thumbnails::-webkit-scrollbar { display:none; }
.lb-thumb { width:42px;height:42px;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s;border:2px solid transparent;flex-shrink:0; }
.lb-thumb.active { opacity:1;border-color:var(--accent);transform:scale(1.08); }

/* ── Modals ──────────────────────────────────────────── */
.modal { position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .2s ease; }
.modal-card { background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:26px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow);animation:slideUp .3s cubic-bezier(.16,1,.3,1); }
.modal-card h3 { font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700; }
.modal-actions { display:flex;gap:9px; }
.modal-actions .btn-ghost,.modal-actions .btn-primary { flex:1; }

/* ── Toast ───────────────────────────────────────────── */
#toast { position:fixed;bottom:74px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:9px 18px;font-size:.85rem;color:var(--text);box-shadow:var(--shadow);z-index:500;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-overflow:ellipsis;overflow:hidden; }
#toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--bg3);border-radius:2px; }

/* ── Re-rate menu in group detail ──────────────────────── */
.rerate-row { position:relative; margin-top:6px; display:inline-block; }

.rerate-btn {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:5px 11px; font-size:.76rem;
  cursor:pointer; color:var(--text2); transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.rerate-btn:hover           { background:var(--bg2); color:var(--text); }
.rerate-btn.like            { color:var(--like);      border-color:rgba(91,220,138,.35);  background:rgba(91,220,138,.08); }
.rerate-btn.superlike       { color:var(--superlike); border-color:rgba(96,180,240,.35);  background:rgba(96,180,240,.08); }
.rerate-btn.dislike         { color:var(--dislike);   border-color:rgba(240,80,96,.35);   background:rgba(240,80,96,.08); }

.rerate-menu {
  position:absolute; bottom:calc(100% + 6px); left:0;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:4px; min-width:160px;
  box-shadow:var(--shadow); z-index:50;
  display:flex; flex-direction:column; gap:2px;
  animation:fadeIn .15s ease;
}
.rerate-menu button {
  background:transparent; border:none; border-radius:7px;
  padding:8px 12px; font-size:.82rem; color:var(--text2);
  cursor:pointer; text-align:left; transition:background .12s, color .12s;
  white-space:nowrap;
}
.rerate-menu button:hover { background:var(--bg3); color:var(--text); }
.rerate-menu button[data-action="like"]:hover      { color:var(--like); }
.rerate-menu button[data-action="superlike"]:hover { color:var(--superlike); }
.rerate-menu button[data-action="dislike"]:hover   { color:var(--dislike); }
.rerate-menu button[data-action="remove"]:hover    { color:var(--text2); }

/* ── Visibility panel in job cards ────────────────────── */
.vis-panel { margin-top:10px; }
.vis-panel-inner {
  background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:12px; display:flex; flex-direction:column; gap:10px;
}
.vis-options { display:flex; gap:6px; flex-wrap:wrap; }
.vis-option {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:6px 11px; font-size:.78rem; color:var(--text2);
  transition:border-color .15s, color .15s;
}
.vis-option input[type="radio"] { display:none; }
.vis-option:hover  { border-color:rgba(255,255,255,.2); color:var(--text); }
.vis-option.active { border-color:var(--accent); color:var(--accent); background:rgba(232,201,122,.06); }
.vis-group-sel {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:6px 10px; color:var(--text); font-size:.8rem; outline:none;
}
.vis-group-sel:focus { border-color:var(--accent); }
.btn-vis-save {
  background:var(--accent); color:#0f0f11; border:none; border-radius:8px;
  padding:7px 16px; font-size:.8rem; font-weight:600; cursor:pointer; align-self:flex-start;
}
.btn-vis-save:hover { background:var(--accent2); }
.job-actions .btn-vis { border-color:rgba(167,139,250,.3); color:#a78bfa; }
.job-actions .btn-vis:hover { background:rgba(167,139,250,.1); }

/* ── Contacted badge & button ──────────────────────────── */
.contacted-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:600;
  color:#60b4f0; background:rgba(96,180,240,.1);
  border:1px solid rgba(96,180,240,.25);
  border-radius:6px; padding:2px 8px; margin-bottom:6px;
}
.contact-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:5px;
  background:rgba(96,180,240,.08); color:#60b4f0;
  border:1px solid rgba(96,180,240,.2); border-radius:8px;
  padding:6px 10px; font-size:.76rem; cursor:pointer; transition:background .2s;
  margin-bottom:5px;
}
.contact-btn:hover { background:rgba(96,180,240,.16); }
.contact-btn.active { background:rgba(91,220,138,.1); color:var(--like); border-color:rgba(91,220,138,.25); }

/* Note textarea inside cards */
.contact-note-wrap { margin-top:6px; display:none; }
.contact-note-wrap.open { display:block; }
.contact-note {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; color:var(--text);
  font-size:.78rem; resize:vertical; min-height:56px; outline:none;
  font-family:inherit; transition:border-color .2s;
}
.contact-note:focus { border-color:var(--accent); }
.contact-note-actions { display:flex; gap:6px; margin-top:5px; }
.contact-note-actions button {
  font-size:.74rem; padding:4px 10px; border-radius:7px; cursor:pointer;
  border:1px solid var(--border); background:var(--bg3); color:var(--text2);
  transition:background .15s;
}
.contact-note-actions button:hover { background:var(--bg2); color:var(--text); }
.contact-note-save { border-color:var(--accent) !important; color:var(--accent) !important; }

/* Archive card – slightly muted */
.list-card.archived { opacity:.85; }
.list-card.archived:hover { opacity:1; }
.archive-ts { font-size:.68rem; color:var(--text3); margin-bottom:5px; }

/* ══════════════════════════════════════════════════════════
   MINI ACTION BUTTONS (Undo / Skip) – flank the main swipe buttons
══════════════════════════════════════════════════════════ */
.action-btn-mini {
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border);
  background:transparent; color:var(--text2); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .15s, background .2s, border-color .2s, opacity .2s;
  flex-shrink:0;
}
.action-btn-mini:hover { transform:scale(1.08); }
.action-btn-mini.undo  { border-color:rgba(167,139,250,.35); color:#a78bfa; }
.action-btn-mini.undo:hover { background:rgba(167,139,250,.12); box-shadow:0 2px 14px rgba(167,139,250,.25); }
.action-btn-mini.skip  { border-color:rgba(155,152,150,.35); color:var(--text2); }
.action-btn-mini.skip:hover { background:rgba(255,255,255,.06); box-shadow:0 2px 14px rgba(0,0,0,.2); }
.action-btn-mini:disabled { opacity:.3; cursor:default; transform:none; }
.action-btn-mini:disabled:hover { background:transparent; box-shadow:none; }

/* ══════════════════════════════════════════════════════════
   "SKIP" SWIPE DIRECTION – downward fly + grey overlay badge
══════════════════════════════════════════════════════════ */
.swipe-card.fly-down {
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
  transform:translateY(120%) scale(.92) !important; opacity:0;
}
.card-overlay-badge.badge-skip {
  bottom:18px; left:50%; transform:translateX(-50%);
  color:var(--text2); border-color:var(--text2); top:auto;
}

/* ══════════════════════════════════════════════════════════
   THREE-DOT CARD MENU (replaces inline contact/unswipe buttons)
══════════════════════════════════════════════════════════ */
.card-menu-btn {
  position:absolute; top:8px; right:8px; z-index:5;
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px); transition:background .15s;
}
.card-menu-btn:hover { background:rgba(0,0,0,.75); }

/* Variant for cards on a dark card-background (group view) rather than a photo —
   the default dark/blurred button has too little contrast there, so use a
   lighter, bordered version instead. */
.group-card-menu-btn {
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  backdrop-filter:none;
}
.group-card-menu-btn:hover { background:var(--bg2); color:var(--text); border-color:rgba(255,255,255,.18); }

.card-menu-section-label {
  font-size:var(--fs-tiny); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text3); padding:7px 12px 3px;
}
.card-menu-divider { height:1px; background:var(--border); margin:4px 6px; }

.card-menu {
  position:absolute; top:42px; right:8px; z-index:20;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:5px; min-width:200px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
  animation:fadeIn .15s ease;
}
.card-menu button {
  background:transparent; border:none; border-radius:7px;
  padding:9px 12px; font-size:var(--fs-small); color:var(--text2);
  cursor:pointer; text-align:left; transition:background .12s, color .12s;
  white-space:nowrap;
}
.card-menu button:hover { background:var(--bg3); color:var(--text); }

.list-card.menu-open { position:relative; z-index:30; }

/* ══════════════════════════════════════════════════════════
   "MEHR" MENU (consolidates Jobs / Archive / Settings)
══════════════════════════════════════════════════════════ */
.more-menu { display:flex; flex-direction:column; gap:10px; }
.more-menu-row {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:16px; cursor:pointer; text-align:left; width:100%;
  transition:border-color .2s, transform .15s;
}
.more-menu-row:hover { border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.more-menu-icon { font-size:1.6rem; flex-shrink:0; }
.more-menu-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.more-menu-title { font-family:'Fraunces',serif; font-size:var(--fs-title); font-weight:700; color:var(--text); }
.more-menu-sub { font-size:var(--fs-small); color:var(--text2); }
.more-menu-arrow { font-size:1.4rem; color:var(--text3); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET — narrow phones (≤380px)
   Tightens paddings/gaps so nothing overflows horizontally,
   on top of the fluid clamp() scale already applied above.
══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .view-content       { padding:14px; }
  .card-body           { padding:11px 12px 13px; }
  .swipe-actions       { gap:10px; padding:10px 10px 14px; }
  .action-btn          { width:52px; height:52px; }
  .action-btn.like     { width:62px; height:62px; }
  .action-btn-mini     { width:34px; height:34px; }
  .listings-grid       { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:9px; }
  .groups-grid         { grid-template-columns:1fr; }
  .nav-user            { display:none; } /* save space on the narrowest screens */
}

/* ── Digest interval picker ────────────────────────────── */
/* ── Notification matrix (type × channel grid) ─────────── */
.notify-matrix {
  background:var(--bg3); border-radius:11px; padding:10px 14px; overflow-x:auto;
}
.notify-matrix-header,
.notify-matrix-row {
  display:grid; grid-template-columns:1fr 34px 34px 34px;
  align-items:center; gap:6px; min-width:260px;
}
.notify-matrix-header {
  font-size:.9rem; padding-bottom:8px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.notify-matrix-header span { text-align:center; }
.notify-matrix-header span:first-child { text-align:left; }
.notify-matrix-row { padding:8px 0; }
.notify-matrix-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,.05); }
.notify-matrix-label { font-size:var(--fs-small); color:var(--text); }
.notify-matrix-row input[type="checkbox"] {
  justify-self:center; width:18px; height:18px; cursor:pointer;
  accent-color:var(--accent);
}

.digest-row {
  display:flex; flex-direction:column; gap:8px;
  padding-top:6px;
}
.digest-options {
  display:flex; flex-wrap:wrap; gap:6px;
}
.digest-btn {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:5px 14px;
  font-size:var(--fs-small); color:var(--text2);
  cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.digest-btn:hover { border-color:rgba(255,255,255,.2); color:var(--text); }
.digest-btn.active {
  background:rgba(232,201,122,.12); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}

/* ── Toggle sub-hint (small text beside a toggle label) ── */
.toggle-sub-hint {
  font-size:var(--fs-tiny); color:var(--text3);
  margin-left:auto; margin-right:10px; white-space:nowrap;
}

/* ── Tab notification badge ────────────────────────────── */
.tab-icon { position:relative; display:inline-block; }
.tab-badge {
  position:absolute; top:-6px; right:-10px;
  background:var(--dislike); color:#fff;
  font-size:.55rem; font-weight:700; line-height:1;
  padding:2px 4px; border-radius:20px;
  min-width:14px; text-align:center;
  pointer-events:none;
}

/* ── Admin user list ───────────────────────────────────── */
.admin-user-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border); gap:10px;
}
.admin-user-row:last-child { border-bottom:none; }
.admin-user-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.admin-user-name  { font-size:var(--fs-body); font-weight:600; }
.admin-user-email { font-size:var(--fs-small); color:var(--text2); }
.admin-badge {
  display:inline-block; font-size:var(--fs-tiny); font-weight:700;
  background:rgba(232,201,122,.15); color:var(--accent);
  border:1px solid rgba(232,201,122,.3); border-radius:20px; padding:1px 7px;
  margin-top:2px; width:fit-content;
}
.admin-user-actions { flex-shrink:0; }

/* ── Member nudge cards ─────────────────────────────────── */
.members-nudge-list { display:flex; flex-direction:column; gap:7px; }

.member-card {
  display:flex; align-items:center; gap:10px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px;
}
.member-card-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:.95rem; color:#0f0f11;
}
.member-card-info { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.member-card-name { font-size:var(--fs-body); font-weight:600; }
.member-card-status { font-size:var(--fs-small); }

.nudge-btn {
  background:transparent; border:1px solid var(--border); border-radius:8px;
  padding:5px 9px; font-size:1rem; cursor:pointer; flex-shrink:0;
  transition:background .15s, border-color .15s, transform .1s;
  color:var(--text);
}
.nudge-btn:hover { background:rgba(232,201,122,.1); border-color:var(--accent); transform:scale(1.08); }
.nudge-btn:disabled { opacity:.5; cursor:default; transform:none; }

/* ── Job listings panel ────────────────────────────────── */
.job-actions .btn-listings { border-color:rgba(232,201,122,.3); color:var(--accent); }
.job-actions .btn-listings:hover { background:rgba(232,201,122,.1); }
.job-actions .btn-reset { border-color:rgba(167,139,250,.3); color:#a78bfa; }
.job-actions .btn-reset:hover { background:rgba(167,139,250,.1); }
.jobs-list-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px; flex-wrap:wrap;
}
.job-listings-panel {
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.job-listings-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:9px; }

/* ── Inline group picker for visibility change on list cards ───── */
.vis-group-picker {
  position:absolute; top:42px; right:8px; z-index:25;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:8px; box-shadow:var(--shadow); display:flex; gap:6px; align-items:center;
  animation:fadeIn .15s ease;
}
.vis-group-picker select {
  background:var(--bg3); border:1px solid var(--border); border-radius:7px;
  padding:6px 8px; color:var(--text); font-size:var(--fs-small); outline:none;
  max-width:150px;
}
.vis-group-picker select:focus { border-color:var(--accent); }
.vis-group-picker button {
  background:var(--accent); color:#0f0f11; border:none; border-radius:7px;
  padding:6px 12px; font-size:var(--fs-small); font-weight:600; cursor:pointer; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════
   DETAIL VIEW
   Full in-app listing view — photos, complete description, map
   shortcut, and (on the Swipe page) the swipe actions themselves.
   Goal: opening the original listing becomes the rare exception,
   not the default way to see what a listing actually offers.
══════════════════════════════════════════════════════════ */
.detail-view {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:0; animation:fadeIn .18s ease;
}
.detail-view-inner {
  background:var(--bg2); width:100%; height:100%;
  max-width:560px; max-height:100vh;
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
  animation:slideUp .25s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 640px) {
  .detail-view { padding:24px; }
  .detail-view-inner { max-height:calc(100vh - 48px); border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--border); }
}

.detail-close {
  position:absolute; top:12px; right:12px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:1.15rem; cursor:pointer; backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.detail-close:hover { background:rgba(0,0,0,.75); }

/* Quick-access link to the original listing, pinned next to the close
   button so it's reachable in one tap regardless of how far a user has
   scrolled through a long description/cost table/map — no need to hunt
   for the full-width button at the very bottom of the panel. */
.detail-quick-original {
  position:absolute; top:12px; right:100px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:var(--accent);
  font-size:1.05rem; cursor:pointer; backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s; text-decoration:none;
}
.detail-quick-original:hover { background:rgba(0,0,0,.75); transform:scale(1.08); }

.detail-quick-share {
  position:absolute; top:12px; right:56px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:1.05rem; cursor:pointer; backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.detail-quick-share:hover { background:rgba(0,0,0,.75); transform:scale(1.08); }

/* ── Gallery ─────────────────────────────────────────── */
.detail-gallery {
  position:relative; width:100%; height:min(42vh, 340px);
  flex-shrink:0; background:var(--bg3); overflow:hidden;
}
.detail-gallery-img { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.detail-gallery-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:4rem; background:linear-gradient(135deg,var(--bg3),var(--bg2));
}
.detail-gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); border:none; color:#fff;
  width:40px; height:40px; border-radius:50%; font-size:1.6rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; backdrop-filter:blur(3px);
}
.detail-gallery-arrow:hover { background:rgba(0,0,0,.7); }
.detail-gallery-prev { left:10px; } .detail-gallery-next { right:10px; }
.detail-gallery-counter {
  position:absolute; top:12px; left:12px;
  background:rgba(0,0,0,.55); color:#fff; font-size:.75rem;
  padding:3px 10px; border-radius:20px; backdrop-filter:blur(3px);
}
.detail-gallery-thumbs {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; max-width:92%; overflow-x:auto; padding:3px;
  scrollbar-width:none;
}
.detail-gallery-thumbs::-webkit-scrollbar { display:none; }
.detail-gallery-thumb {
  width:38px; height:38px; object-fit:cover; border-radius:6px;
  cursor:pointer; opacity:.5; transition:opacity .2s, transform .2s;
  border:2px solid transparent; flex-shrink:0;
}
.detail-gallery-thumb.active { opacity:1; border-color:var(--accent); transform:scale(1.06); }

.detail-status-badge {
  position:absolute; top:12px; right:144px;
  font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:8px;
  letter-spacing:.5px; text-transform:uppercase;
}
.detail-status-badge.status-reserved { background:rgba(240,200,60,.85); color:#1a1600; }
.detail-status-badge.status-offline  { background:rgba(240,80,96,.85); color:#fff; }

/* ── Body ────────────────────────────────────────────── */
.detail-body { flex:1; overflow-y:auto; padding:20px 20px 16px; }
.detail-platform {
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--accent); background:rgba(232,201,122,.1);
  border-radius:6px; padding:2px 8px; margin-bottom:8px;
}
.detail-title {
  font-family:'Fraunces',serif; font-size:var(--fs-display); font-weight:700;
  line-height:1.25; margin-bottom:10px;
}
.detail-price { font-family:'Fraunces',serif; font-size:1.3rem; font-weight:700; margin-bottom:12px; }
.detail-price-sub { font-size:.8rem; font-weight:400; color:var(--text2); }
.detail-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.detail-meta-item { font-size:var(--fs-small); color:var(--text2); background:var(--bg3); border-radius:7px; padding:4px 10px; }
.detail-costs {
  display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  background:var(--bg3); border-radius:11px; padding:12px 14px; margin-bottom:14px;
}
.detail-cost-row { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-small); }
.detail-cost-label { color:var(--text2); }
.detail-cost-value { color:var(--text); font-weight:600; text-align:right; }

.detail-changes {
  background:rgba(96,180,240,.06); border:1px solid rgba(96,180,240,.18);
  border-radius:11px; padding:12px 14px; margin-bottom:14px;
}
.detail-changes .detail-section-label { margin-top:0; margin-bottom:8px; }
.detail-change-row {
  display:flex; flex-direction:column; gap:2px;
  padding:6px 0; font-size:var(--fs-small);
}
.detail-change-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,.06); }
.detail-change-date { color:var(--text3); font-size:var(--fs-tiny); }
.detail-change-desc { color:var(--text2); }
.detail-change-desc strong { color:var(--text); }

.detail-map-embed {
  width:100%; height:220px; border-radius:11px; overflow:hidden;
  margin-bottom:16px; border:1px solid var(--border); background:var(--bg3);
}
.detail-map-embed iframe { width:100%; height:100%; border:0; display:block; }

.detail-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.detail-tag { font-size:var(--fs-small); color:var(--text3); border:1px solid var(--border); border-radius:20px; padding:3px 10px; }

.detail-section-label {
  font-size:var(--fs-tiny); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text2); margin-bottom:6px;
}
.detail-description {
  font-size:var(--fs-body); color:var(--text); line-height:1.7;
  white-space:pre-wrap; margin-bottom:18px;
}

.detail-action-row { display:flex; flex-direction:column; gap:9px; }
.detail-map-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:11px;
  padding:11px; font-size:.88rem; color:var(--text); cursor:pointer;
  transition:background .15s, border-color .15s; text-align:center;
}
.detail-map-btn:hover { background:var(--bg2); border-color:rgba(255,255,255,.18); }
.detail-original-link {
  display:block; text-align:center; background:transparent;
  border:1px solid var(--accent); color:var(--accent); border-radius:11px;
  padding:11px; font-size:.88rem; font-weight:500; text-decoration:none;
  transition:background .15s;
}
.detail-original-link:hover { background:rgba(232,201,122,.08); }
.detail-report-btn {
  background:transparent; border:1px solid var(--border); border-radius:11px;
  padding:11px; font-size:.82rem; color:var(--text2); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s; text-align:center;
}
.detail-report-btn:hover { background:rgba(240,80,96,.08); border-color:rgba(240,80,96,.4); color:var(--dislike); }

/* ── Swipe actions (only shown when opened from the Swipe page) ── */
.detail-swipe-actions {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border); flex-shrink:0; background:var(--bg2);
  flex-wrap:nowrap;
}

/* ── Desktop layout ──────────────────────────────────────
   There's plenty of horizontal room on desktop, so instead of the mobile
   stacked layout (gallery on top, everything else below in one long
   scroll) we switch to a side-by-side view: gallery fills the left
   column at full height, details scroll independently on the right,
   and the swipe-action bar (when present) spans the full width below
   both columns. Placed at the very end of the stylesheet so it reliably
   wins the cascade over the earlier mobile-first base rules it overrides. */
@media (min-width: 900px) {
  .detail-view-inner {
    width:100%;
    max-width:1140px;
    height:calc(100vh - 64px);
    max-height:calc(100vh - 64px);
    display:grid;
    grid-template-columns:44% 1fr;
    grid-template-rows:1fr auto;
    grid-template-areas:
      "gallery body"
      "actions actions";
  }
  .detail-gallery { grid-area:gallery; height:100%; }
  .detail-body    { grid-area:body; max-height:none; }
  .detail-swipe-actions { grid-area:actions; }
}


/* ── Profile dropdown ─────────────────────────────────── */
.profile-menu-wrap { position:relative; }
.profile-menu-btn {
  display:flex;align-items:center;gap:7px;background:transparent;color:var(--text2);
  border:1px solid var(--border);border-radius:10px;padding:7px 10px 7px 12px;
  cursor:pointer;font:inherit;transition:background .15s,color .15s,border-color .15s;
}
.profile-menu-btn:hover,.profile-menu-btn[aria-expanded="true"] { background:var(--bg3);color:var(--text);border-color:rgba(255,255,255,.16); }
.profile-menu-chevron { font-size:.9rem;line-height:1; }
.profile-menu {
  position:absolute;right:0;top:calc(100% + 7px);width:210px;padding:6px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);z-index:100;display:flex;flex-direction:column;
}
.profile-menu-item {
  width:100%;display:flex;align-items:center;gap:8px;text-align:left;
  background:transparent;border:0;border-radius:8px;color:var(--text2);
  padding:9px 10px;font:inherit;font-size:.82rem;cursor:pointer;
}
.profile-menu-item:hover,.profile-menu-item.selected { background:var(--bg3);color:var(--text); }
.profile-menu-label { padding:7px 10px 4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3); }
.profile-menu-divider { height:1px;background:var(--border);margin:5px 3px; }
.profile-menu-logout { color:var(--dislike); }
.profile-menu-logout:hover { color:var(--dislike);background:rgba(240,80,96,.08); }

/* ── Rated bulk actions ───────────────────────────────── */
.rated-bulk-actions { display:flex;gap:7px;flex-wrap:wrap;margin-top:8px; }
.btn-ghost.compact,.btn-danger.compact { width:auto;padding:6px 10px;font-size:.76rem; }
.btn-danger.compact { margin:0; }
.btn-danger:disabled { opacity:.4;cursor:not-allowed; }
.list-card-selectable { overflow:visible; }
.rated-select-wrap {
  position:absolute;top:8px;left:8px;z-index:8;width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:rgba(0,0,0,.68);backdrop-filter:blur(5px);cursor:pointer;
}
.rated-select { position:absolute;opacity:0;width:1px;height:1px; }
.rated-select-wrap span {
  width:16px;height:16px;border:2px solid rgba(255,255,255,.8);border-radius:4px;display:block;
}
.rated-select:checked + span { background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px rgba(0,0,0,.15); }
.rated-select:focus-visible + span { outline:2px solid var(--accent);outline-offset:2px; }

/* ── Clickable portal hints ───────────────────────────── */
.hint-link { display:flex;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s; }
.hint-link span { color:var(--text2); }
.hint-link:hover { background:var(--bg2);border-color:var(--accent);transform:translateX(2px); }
.hint-link strong { display:block;min-width:170px;color:var(--text); }

/* ── Themes ───────────────────────────────────────────── */
/* Standard = the original WohnungsSwipe look. */
html[data-theme="standard"] {
  --bg:#0f0f11; --bg2:#18181c; --bg3:#222228;
  --border:rgba(255,255,255,.08);
  --text:#f0ede8; --text2:#9b9896; --text3:#5a5855;
  --accent:#e8c97a; --accent2:#c9a84c;
  --like:#5bdc8a; --dislike:#f05060; --superlike:#60b4f0;
  --r:16px; --shadow:0 8px 40px rgba(0,0,0,.5);
}
html[data-theme="light"] {
  --bg:#e5e4df; --bg2:#f0efeb; --bg3:#d9d8d2;
  --border:rgba(35,39,42,.12);
  --text:#25282b; --text2:#62676c; --text3:#8b8f92;
  --accent:#7f6427; --accent2:#664f1f;
  --like:#19724b; --dislike:#a83d4c; --superlike:#3e708e;
  --shadow:0 3px 18px rgba(35,39,42,.10);
}
html[data-theme="dark"] {
  --bg:#07090d; --bg2:#0e1218; --bg3:#171c24;
  --border:rgba(255,255,255,.075);
  --text:#f1f4f8; --text2:#929ba8; --text3:#596370;
  --accent:#d5b45f; --accent2:#b8933e;
  --like:#4ed28b; --dislike:#ef596b; --superlike:#55aeea;
  --shadow:0 10px 45px rgba(0,0,0,.65);
}
html[data-theme="anti-ai"] {
  --bg:#11171b; --bg2:#181f24; --bg3:#222b31;
  --border:rgba(190,205,214,.13);
  --text:#e7edf0; --text2:#9daab2; --text3:#68757d;
  --accent:#8ca9b8; --accent2:#6f8e9d;
  --like:#58ad7e; --dislike:#d36a78; --superlike:#709fbe;
  --r:7px; --shadow:0 3px 18px rgba(0,0,0,.28);
}
html[data-theme="anti-ai"] body {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.005em;
}
html[data-theme="anti-ai"] .view-title,
html[data-theme="anti-ai"] .card-title,
html[data-theme="anti-ai"] .card-price-main,
html[data-theme="anti-ai"] .list-card-title,
html[data-theme="anti-ai"] .group-card-name,
html[data-theme="anti-ai"] .group-detail-name,
html[data-theme="anti-ai"] .job-card-label,
html[data-theme="anti-ai"] .settings-display-name,
html[data-theme="anti-ai"] .stat-num,
html[data-theme="anti-ai"] .logo-text { font-family:inherit;letter-spacing:-.015em; }
html[data-theme="anti-ai"] .auth-bg,
html[data-theme="anti-ai"] .blob1,
html[data-theme="anti-ai"] .blob2,
html[data-theme="anti-ai"] .blob3 { display:none; }
html[data-theme="anti-ai"] .auth-container {
  background:#181f24;backdrop-filter:none;border-radius:7px;box-shadow:var(--shadow);border-color:#303b42;animation:none;
}
html[data-theme="anti-ai"] .swipe-card,
html[data-theme="anti-ai"] .card-form,
html[data-theme="anti-ai"] .settings-card,
html[data-theme="anti-ai"] .settings-section,
html[data-theme="anti-ai"] .list-card,
html[data-theme="anti-ai"] .group-card,
html[data-theme="anti-ai"] .job-card,
html[data-theme="anti-ai"] .group-detail-header {
  border-radius:7px;box-shadow:none;
}
html[data-theme="anti-ai"] .btn-primary,
html[data-theme="anti-ai"] .btn-secondary,
html[data-theme="anti-ai"] .btn-ghost,
html[data-theme="anti-ai"] .btn-danger { border-radius:6px; }
html[data-theme="anti-ai"] .app-nav,
html[data-theme="anti-ai"] .tab-bar { background:#0d1216; }
html[data-theme="anti-ai"] .tab-nav.active::after { width:34px;height:2px; }
html[data-theme="anti-ai"] .card-img-area { border-radius:6px 6px 0 0; }

html[data-theme="coastal"] {
  --bg:#dcebf0; --bg2:#f8fbfa; --bg3:#c8dfe7;
  --border:rgba(24,79,108,.15);
  --text:#18364a; --text2:#567181; --text3:#78909d;
  --accent:#1d6087; --accent2:#164d6d;
  --like:#2c8665; --dislike:#b34f56; --superlike:#3f83a8;
  --r:14px; --shadow:0 8px 28px rgba(30,74,96,.15);
}
html[data-theme="coastal"] body {
  background:linear-gradient(180deg,#5b9ab8 0%,#82b6c9 24%,var(--bg) 55%,#e5d2bb 100%);
}
html[data-theme="coastal"] .app-nav,
html[data-theme="coastal"] .tab-bar {
  background:rgba(19,77,108,.90); color:#fff;
  border-color:rgba(255,255,255,.16); backdrop-filter:blur(12px);
}
html[data-theme="coastal"] .nav-logo,
html[data-theme="coastal"] .nav-user,
html[data-theme="coastal"] .tab-nav { color:#edf8fb; }
html[data-theme="coastal"] .tab-nav.active { color:#fff; }
html[data-theme="coastal"] .tab-nav.active::after { background:#f3dfc6; }
html[data-theme="coastal"] .view-content,
html[data-theme="coastal"] #view-swipe { background:transparent; }
html[data-theme="coastal"] .swipe-card,
html[data-theme="coastal"] .card-form,
html[data-theme="coastal"] .list-card,
html[data-theme="coastal"] .group-card,
html[data-theme="coastal"] .job-card,
html[data-theme="coastal"] .settings-card,
html[data-theme="coastal"] .settings-section,
html[data-theme="coastal"] .group-detail-header {
  background:rgba(248,251,250,.94); border-color:rgba(24,79,108,.13); box-shadow:var(--shadow);
}
html[data-theme="coastal"] .profile-menu {
  background:#f8fbfa; border-color:rgba(24,79,108,.18);
}
html[data-theme="coastal"] .profile-menu-item { color:#34586c; }
html[data-theme="coastal"] .profile-menu-item:hover,
html[data-theme="coastal"] .profile-menu-item.selected { background:#dcebf0;color:#18364a; }
html[data-theme="coastal"] .btn-primary {
  background:#1d6087;color:#fff;box-shadow:0 5px 15px rgba(29,96,135,.2);
}
html[data-theme="coastal"] .btn-secondary { color:#1d6087;border-color:#5c91aa;background:rgba(255,255,255,.35); }
html[data-theme="coastal"] .card-platform,
html[data-theme="coastal"] .price-tag-cold { background:rgba(29,96,135,.09);color:#1d6087; }
html[data-theme="coastal"] .card-img-placeholder { background:linear-gradient(135deg,#c7e0e8,#e8d5be); }

@media (hover:hover) {
  .theme-option-wrap { position:relative; }
  .theme-option-wrap .theme-preview {
    position:absolute; right:calc(100% + 12px); top:-4px; width:248px;
    padding:7px; opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(5px) scale(.98); transform-origin:right top;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease; z-index:200;
  }
  .theme-option-wrap:hover .theme-preview,
  .theme-option-wrap:focus-within .theme-preview {
    opacity:1; visibility:visible; transform:translateX(0) scale(1);
  }
}
.theme-preview-window {
  width:100%;height:154px;overflow:hidden;border:1px solid rgba(0,0,0,.16);
  border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.24);font-family:Inter,system-ui,sans-serif;
}
.tp-nav { height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 9px; }
.tp-brand { font-size:6px;font-weight:700;letter-spacing:.15px; }
.tp-user { width:16px;height:5px;border-radius:3px; }
.tp-tabs { height:20px;display:flex;align-items:center;gap:11px;padding:0 9px;font-size:5px;font-weight:600;border-bottom:1px solid rgba(0,0,0,.08); }
.tp-content { height:109px;padding:8px 18px;display:flex;align-items:center;justify-content:center; }
.tp-card { width:116px;border-radius:7px;overflow:hidden; }
.tp-photo { height:54px; }
.tp-lines { padding:6px; }
.tp-lines b,.tp-lines i { display:block;border-radius:2px;height:4px;margin-bottom:4px; }
.tp-lines b { width:75%;height:6px; }
.tp-lines i { width:92%; }
.tp-lines i:last-of-type { width:58%; }
.tp-actions { display:flex;justify-content:center;gap:5px;margin-top:6px; }
.tp-actions em { display:block;width:11px;height:11px;border-radius:50%; }

.theme-preview[data-preview-theme="standard"] .theme-preview-window { background:#0f0f11;color:#f0ede8; }
.theme-preview[data-preview-theme="standard"] .tp-nav { background:#18181c; }
.theme-preview[data-preview-theme="standard"] .tp-user { background:#e8c97a; }
.theme-preview[data-preview-theme="standard"] .tp-tabs { background:#18181c;color:#e8c97a; }
.theme-preview[data-preview-theme="standard"] .tp-card { background:#18181c;border:1px solid rgba(255,255,255,.08); }
.theme-preview[data-preview-theme="standard"] .tp-photo { background:linear-gradient(135deg,#222228,#3b3b42); }
.theme-preview[data-preview-theme="standard"] .tp-lines b { background:#e8c97a; }
.theme-preview[data-preview-theme="standard"] .tp-lines i { background:#5a5855; }
.theme-preview[data-preview-theme="standard"] .tp-actions em:nth-child(1) { background:#f05060; }
.theme-preview[data-preview-theme="standard"] .tp-actions em:nth-child(2) { background:#5bdc8a; }
.theme-preview[data-preview-theme="standard"] .tp-actions em:nth-child(3) { background:#60b4f0; }

.theme-preview[data-preview-theme="light"] .theme-preview-window { background:#e5e4df;color:#25282b; }
.theme-preview[data-preview-theme="light"] .tp-nav { background:#f0efeb; }
.theme-preview[data-preview-theme="light"] .tp-user { background:#7f6427; }
.theme-preview[data-preview-theme="light"] .tp-tabs { background:#f0efeb;color:#7f6427; }
.theme-preview[data-preview-theme="light"] .tp-card { background:#f0efeb;border:1px solid #cbc9c2; }
.theme-preview[data-preview-theme="light"] .tp-photo { background:linear-gradient(135deg,#cfcfca,#aaa9a4); }
.theme-preview[data-preview-theme="light"] .tp-lines b { background:#7f6427; }
.theme-preview[data-preview-theme="light"] .tp-lines i { background:#a8aaa9; }
.theme-preview[data-preview-theme="light"] .tp-actions em:nth-child(1) { background:#a83d4c; }
.theme-preview[data-preview-theme="light"] .tp-actions em:nth-child(2) { background:#19724b; }
.theme-preview[data-preview-theme="light"] .tp-actions em:nth-child(3) { background:#3e708e; }

.theme-preview[data-preview-theme="dark"] .theme-preview-window { background:#07090d;color:#f1f4f8; }
.theme-preview[data-preview-theme="dark"] .tp-nav { background:#0e1218; }
.theme-preview[data-preview-theme="dark"] .tp-user { background:#d5b45f; }
.theme-preview[data-preview-theme="dark"] .tp-tabs { background:#0e1218;color:#d5b45f; }
.theme-preview[data-preview-theme="dark"] .tp-card { background:#0e1218;border:1px solid rgba(255,255,255,.08); }
.theme-preview[data-preview-theme="dark"] .tp-photo { background:linear-gradient(135deg,#171c24,#303843); }
.theme-preview[data-preview-theme="dark"] .tp-lines b { background:#d5b45f; }
.theme-preview[data-preview-theme="dark"] .tp-lines i { background:#596370; }
.theme-preview[data-preview-theme="dark"] .tp-actions em:nth-child(1) { background:#ef596b; }
.theme-preview[data-preview-theme="dark"] .tp-actions em:nth-child(2) { background:#4ed28b; }
.theme-preview[data-preview-theme="dark"] .tp-actions em:nth-child(3) { background:#55aeea; }

.theme-preview[data-preview-theme="anti-ai"] .theme-preview-window { background:#11171b;color:#e7edf0; }
.theme-preview[data-preview-theme="anti-ai"] .tp-nav { background:#0d1216; }
.theme-preview[data-preview-theme="anti-ai"] .tp-user { background:#8ca9b8; }
.theme-preview[data-preview-theme="anti-ai"] .tp-tabs { background:#0d1216;color:#8ca9b8; }
.theme-preview[data-preview-theme="anti-ai"] .tp-card { background:#181f24;border:1px solid #303b42; }
.theme-preview[data-preview-theme="anti-ai"] .tp-photo { background:linear-gradient(135deg,#222b31,#36434b); }
.theme-preview[data-preview-theme="anti-ai"] .tp-lines b { background:#8ca9b8; }
.theme-preview[data-preview-theme="anti-ai"] .tp-lines i { background:#68757d; }
.theme-preview[data-preview-theme="anti-ai"] .tp-actions em:nth-child(1) { background:#d36a78; }
.theme-preview[data-preview-theme="anti-ai"] .tp-actions em:nth-child(2) { background:#58ad7e; }
.theme-preview[data-preview-theme="anti-ai"] .tp-actions em:nth-child(3) { background:#709fbe; }

.theme-preview[data-preview-theme="coastal"] .theme-preview-window { background:#dcebf0;color:#18364a; }
.theme-preview[data-preview-theme="coastal"] .tp-nav { background:#195f80;color:#fff; }
.theme-preview[data-preview-theme="coastal"] .tp-user { background:#f3dfc6; }
.theme-preview[data-preview-theme="coastal"] .tp-tabs { background:#f8fbfa;color:#1d6087; }
.theme-preview[data-preview-theme="coastal"] .tp-card { background:#f8fbfa;border:1px solid rgba(24,79,108,.15); }
.theme-preview[data-preview-theme="coastal"] .tp-photo { background:linear-gradient(135deg,#5b9ab8 0%,#d7b08a 100%); }
.theme-preview[data-preview-theme="coastal"] .tp-lines b { background:#1d6087; }
.theme-preview[data-preview-theme="coastal"] .tp-lines i { background:#78909d; }
.theme-preview[data-preview-theme="coastal"] .tp-actions em:nth-child(1) { background:#b34f56; }
.theme-preview[data-preview-theme="coastal"] .tp-actions em:nth-child(2) { background:#2c8665; }
.theme-preview[data-preview-theme="coastal"] .tp-actions em:nth-child(3) { background:#3f83a8; }

/* ── Profile dropdown ─────────────────────────────────── */
.profile-menu-wrap { position:relative; }
.profile-menu-btn {
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--text2);border:1px solid var(--border);
  border-radius:10px;padding:6px 10px 6px 12px;cursor:pointer;font:inherit;
  transition:background .15s,color .15s,border-color .15s;
}
.profile-menu-btn:hover,.profile-menu-btn[aria-expanded="true"] {
  background:var(--bg3);color:var(--text);border-color:rgba(255,255,255,.16);
}
.profile-menu-chevron {
  width:7px;height:7px;display:block;flex:0 0 7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transform-origin:center;
  transition:transform .16s ease;
}
.profile-menu-btn[aria-expanded="true"] .profile-menu-chevron { transform:rotate(225deg) translate(-1px,-1px); }
.profile-menu {
  position:absolute;right:0;top:calc(100% + 7px);width:228px;padding:6px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);z-index:100;display:flex;flex-direction:column;
}
.profile-menu-item {
  width:100%;display:flex;align-items:center;gap:8px;text-align:left;
  background:transparent;border:0;border-radius:8px;color:var(--text2);
  padding:9px 10px;font:inherit;font-size:.82rem;cursor:pointer;
}
.profile-menu-item:hover,.profile-menu-item.selected { background:var(--bg3);color:var(--text); }
.profile-menu-label { padding:7px 10px 4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3); }
.profile-menu-divider { height:1px;background:var(--border);margin:5px 3px; }
.profile-menu-logout { color:var(--dislike); }
.profile-menu-logout:hover { color:var(--dislike);background:rgba(240,80,96,.08); }
.theme-option-icon { width:18px;text-align:center;flex:0 0 18px; }
.theme-option-check { margin-left:auto;opacity:0;font-size:.72rem;color:var(--accent); }
.theme-option.selected .theme-option-check { opacity:1; }

@media (max-width:640px) {
  .profile-menu { right:-4px; }
  .hint-link { flex-direction:column;gap:3px; }
  .hint-link strong { min-width:0; }
  .rated-bulk-actions { width:100%; }
}