:root {
  --bg:#0d0d0f; --surface:#141418; --surface2:#1c1c22; --surface3:#22222a;
  --border:#2a2a35; --accent:#c8f060; --accent2:#6070f0;
  --text:#e8e8f0; --muted:#6a6a7a; --danger:#f06070; --ok:#71d59b;
  --warn:#f0a060; --header-h:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;display:flex;flex-direction:column}
button,input,textarea,select{font:inherit;color:inherit}
.hidden{display:none!important}

/* ── LOGIN ── */
.login-screen{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:18px}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 28px;width:100%;max-width:340px;text-align:center}
.login-logo{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.login-logo span{color:var(--muted);font-weight:400}
.login-sub{font-size:.75rem;color:var(--muted);margin-top:4px;margin-bottom:20px}
.lang-row{display:flex;gap:6px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.lang-f{font-size:.72rem;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;cursor:pointer;transition:.15s}
.lang-btn:hover,.lang-btn.active{border-color:var(--accent);color:var(--accent)}

.lang-dropdown{position:relative}
.lang-menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;transition:.15s}
.lang-menu-btn:hover,.lang-dropdown.open .lang-menu-btn{border-color:var(--accent);background:var(--surface2)}
.lang-menu-btn.login{width:100%;justify-content:center;height:38px;border-radius:10px}
.lang-flag{font-size:1rem;line-height:1}
.lang-code{font-size:.72rem;letter-spacing:.04em}
.lang-caret{font-size:.62rem;color:var(--muted)}
.lang-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 28px rgba(0,0,0,.35);display:none;z-index:1200}
.lang-dropdown.open .lang-dropdown-menu{display:block}
.lang-option{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;transition:.15s}
.lang-option:hover{background:var(--surface2)}
.lang-option.active{background:rgba(200,240,96,.08);color:var(--accent)}
.lang-option-meta{display:flex;flex-direction:column;min-width:0}
.lang-option-code{font-size:.7rem;color:var(--muted)}
.lang-option-name{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-lang-wrap{display:flex;justify-content:center;margin-bottom:18px}
#headerLangRow .lang-dropdown-menu{min-width:150px}
#headerLangRow .lang-menu-btn{width:34px;min-width:34px;padding:0;border-radius:999px}
#headerLangRow .lang-caret{display:none}
#headerLangRow .lang-flag{font-size:1.05rem}
.login-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:11px 14px;outline:none;text-align:center;letter-spacing:.08em;margin-bottom:10px;transition:border-color .2s}
.login-input:focus{border-color:var(--accent)}
.login-btn{width:100%;background:var(--accent);color:#0d0d0f;border:none;border-radius:9px;font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;padding:12px;cursor:pointer;transition:.15s}
.login-btn:hover{background:#d8ff70}
.login-error{font-size:.75rem;color:var(--danger);margin-top:8px;min-height:18px}
.login-hint{font-size:.7rem;color:var(--muted);margin-top:12px;line-height:1.6}

/* ── HEADER ── */
.header{height:var(--header-h);flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:200}
.header-left,.header-right{display:flex;align-items:center;gap:6px}
.header-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw;letter-spacing:-.02em}
.header-title span{color:var(--muted);font-weight:400}
.kin-count{font-size:.7rem;color:var(--muted);background:var(--surface2);padding:3px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
.save-state{font-size:.7rem;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);white-space:nowrap;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .2s}
.save-state.saving,.save-state.saved{opacity:1;pointer-events:auto}
.save-state.saving{color:var(--accent)}
.save-state.saved{color:var(--ok)}

/* ── BUTTONS ── */
.btn{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 12px;cursor:pointer;transition:.15s;font-size:.77rem;white-space:nowrap}
.btn:hover{background:var(--surface2);border-color:var(--muted)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#0d0d0f;font-weight:700}
.btn-accent:hover{background:#d8ff70;border-color:#d8ff70}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:rgba(240,96,112,.09)}
.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.back-btn{display:none}

/* ── LAYOUT ── */
.app-body{flex:1;overflow:hidden;display:flex;position:relative}

/* ── SIDEBAR ── */
.sidebar{position:absolute;inset:0;z-index:10;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease;min-height:0}
.sidebar-toolbar{padding:10px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.search-row{display:flex;gap:7px}
.search-input{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 11px;outline:none;font-size:.85rem;transition:border-color .2s}
.search-input::placeholder{color:var(--muted)}
.search-input:focus{border-color:var(--accent)}
.toolbar-row{display:flex;gap:7px;align-items:center}
.sidebar-action-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sidebar-action-btn{width:100%;text-align:center;justify-content:center}
.select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 10px;outline:none;font-size:.77rem;flex:1;cursor:pointer}
.select:focus{border-color:var(--accent)}
select,
select.field-input,
select.select{
  background:var(--surface2);
  color:var(--text);
  color-scheme:dark;
}
select option{
  background:var(--surface2);
  color:var(--text);
}
select option:checked{
  background:var(--accent);
  color:#0d0d0f;
}
.view-toggle{display:flex;gap:4px}
.view-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:7px;cursor:pointer;color:var(--muted);transition:.15s;font-size:.9rem}
.view-btn:hover,.view-btn.active{border-color:var(--accent);color:var(--accent)}

/* ── FILTER BOX ── */
.filter-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:min(42vh,360px);transition:max-height .18s ease,opacity .18s ease}
.filter-box.collapsed{max-height:0;border-width:0;opacity:0;pointer-events:none}
.filter-box-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:pointer;user-select:none}
.filter-box-header:hover{background:rgba(255,255,255,.03)}
.filter-box-title{font-family:'Syne',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filter-box-caret{font-size:.6rem;color:var(--muted);transition:transform .2s}
.filter-box.open .filter-box-caret{transform:rotate(180deg)}
.filter-box-body{padding:10px;display:flex;flex-direction:column;gap:8px;max-height:min(42vh,360px);overflow:auto}
.filter-title{font-family:'Syne',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.filter-pills{display:flex;flex-wrap:wrap;gap:5px}
.filter-pill{padding:4px 10px;font-size:.7rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.filter-pill:hover{border-color:var(--muted)}
.filter-pill.active{border-color:var(--accent);color:var(--accent);background:rgba(200,240,96,.08)}
.filter-advanced-grid{display:grid;grid-template-columns:1fr;gap:6px;padding-top:8px}
.filter-select{width:100%;font-size:.7rem;padding:6px 8px}
/* active indicator on header when filters are set */
.filter-box-header .filter-active-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:none;margin-left:6px}
.filter-box.has-active .filter-active-dot{display:inline-block}

/* ── KIN LIST ── */
.kin-list{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:7px}
.kin-list::-webkit-scrollbar{width:4px}
.kin-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* List view */
.kin-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:.12s;margin-bottom:3px}
.kin-item:hover{background:var(--surface2)}
.kin-item.active{background:var(--surface2);border-color:var(--accent)}
.kin-avatar-thumb{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;font-size:.9rem}
.kin-avatar-thumb img{width:100%;height:100%;object-fit:cover}
.kin-item-body{flex:1;min-width:0}
.kin-item-name{font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kin-item-sub{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.kin-item-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pill{font-size:.6rem;padding:2px 7px;border-radius:999px;background:var(--border);color:var(--muted)}
.pill.status{background:rgba(200,240,96,.1);color:var(--accent);border:1px solid rgba(200,240,96,.25)}
.kin-arrow{color:var(--border);font-size:.9rem;flex-shrink:0}
.bulk-check{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.kin-item.bulk-selecting{padding-left:8px}

/* Grid view */
.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:7px;padding:7px}
.grid-view .kin-item{flex-direction:column;align-items:flex-start;padding:9px;margin-bottom:0;height:220px;overflow:hidden}
.grid-view .kin-avatar-thumb{width:100%;height:90px;border-radius:8px;margin-bottom:7px;flex-shrink:0;font-size:1.4rem}
.grid-view .kin-item-name{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.grid-view .kin-item-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-size:.63rem}
.grid-view .kin-item-pills{overflow:hidden;max-height:44px}
.grid-view .kin-arrow{display:none}

/* ── SIDEBAR FOOTER ── */
.sidebar-footer{padding:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.bulk-bar{padding:8px 10px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr;gap:7px;background:var(--surface);flex-shrink:0}
.bulk-count{font-size:.72rem;color:var(--muted)}
.bulk-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.bulk-actions{display:flex;gap:7px}
.footer-title{font-family:'Syne',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.footer-text{font-family:'Syne',sans-serif;font-size:.60rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.footer-btns{display:flex;gap:6px;flex-wrap:wrap}

/* ── DETAIL PANEL ── */
.detail-panel{position:absolute;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;overflow:hidden}
.detail-panel.open{transform:translateX(0)}
.detail-scroll{flex:1;overflow-y:auto;padding:18px 16px 120px;display:none}
.detail-scroll::-webkit-scrollbar{width:4px}
.detail-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.detail-panel.has-kin .detail-scroll{display:block}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;gap:14px;padding:32px}
.detail-panel.has-kin .empty-state{display:none}
.empty-icon{font-size:2.8rem;opacity:.2}

/* Detail top */
.detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.detail-name-wrap{flex:1;min-width:0}
.detail-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.65rem;letter-spacing:-.03em;color:var(--text);background:transparent;border:none;border-bottom:2px solid transparent;outline:none;width:100%;padding-bottom:4px;transition:border-color .2s}
.detail-name:focus{border-bottom-color:var(--accent)}
.kurzbeschreibung-input{font-size:.8rem;color:var(--muted);background:transparent;border:none;border-bottom:1px solid transparent;outline:none;width:100%;margin-top:6px;padding-bottom:3px;transition:border-color .2s}
.kurzbeschreibung-input:focus{border-bottom-color:var(--border)}
.kurzbeschreibung-input::placeholder,.detail-name::placeholder{color:#3a3a4a}
.detail-top-actions{display:flex;gap:6px;flex-shrink:0;padding-top:4px}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:rgba(240,96,112,.09)}
.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}

/* Section */
.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.detail-section{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.01);margin:0 0 12px;overflow:hidden}
.detail-section-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:0;border-bottom:1px solid var(--border);padding:12px 14px;cursor:pointer}
.detail-section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.detail-section-caret{color:var(--muted);transition:transform .18s ease}
.detail-section-body{padding:12px}
.detail-section.collapsed .detail-section-body{display:none}
.detail-section.collapsed .detail-section-caret{transform:rotate(-90deg)}
.readonly-meta-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.readonly-meta{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.readonly-meta span{font-family:'Syne',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.readonly-meta strong{font-size:.72rem;color:var(--text);font-weight:500;word-break:break-all}
.variant-original-message{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--muted);font-size:.74rem;line-height:1.6;margin-bottom:10px}

/* Status pills editor */
.status-editor{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.status-pill-btn{padding:6px 13px;font-size:.75rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:.15s;font-family:'DM Mono',monospace}
.status-pill-btn:hover{border-color:var(--muted)}
.status-pill-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(200,240,96,.09)}
.variant-warning{border:1px solid rgba(240,160,96,.45);background:rgba(240,160,96,.08);color:var(--warn);border-radius:9px;padding:10px 12px;font-size:.74rem;line-height:1.6;margin-bottom:10px}

/* Avatar */
.avatar-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:4px}
.avatar-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center}
.avatar-preview{width:84px;height:84px;border-radius:10px;background:var(--surface2);border:2px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0;transition:border-color .2s;font-size:1.8rem}
.avatar-preview:hover{border-color:var(--accent)}
.avatar-preview img{width:100%;height:100%;object-fit:cover;display:none}
.avatar-preview img.loaded{display:block}
.avatar-info{flex:1;font-size:.74rem;color:var(--muted);line-height:1.6}
.avatar-info strong{color:var(--text);display:block;margin-bottom:2px}
.avatar-actions{margin-top:8px;display:flex;gap:7px;flex-wrap:wrap}
.upload-progress{font-size:.7rem;color:var(--accent);margin-top:5px;display:none}

/* Fields */
.fields-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.field-block{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}
.field-block:focus-within{border-color:var(--accent2)}
.field-label{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;background:var(--surface2);border-bottom:1px solid var(--border);gap:8px}
.field-label-left{font-family:'Syne',sans-serif;font-weight:700;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field-label-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.char-counter{font-size:.68rem;color:var(--muted);white-space:nowrap}
.char-counter.warn{color:var(--warn)}
.char-counter.over{color:var(--danger);font-weight:700}
.copy-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:.7rem;transition:.15s}
.copy-btn:hover{background:var(--border);color:var(--accent)}
.copy-btn.copied{color:var(--accent)}
.field-input{width:100%;background:transparent;border:none;outline:none;color:var(--text);padding:10px 12px;resize:none;line-height:1.6;font-size:.82rem;overflow:hidden}
.field-input::placeholder{color:#3a3a4a}
input.field-input{min-height:0}
.field-help{font-size:.7rem;line-height:1.55;color:var(--muted);padding:0 12px 10px;margin-top:-4px}
.api-sync-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.api-sync-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;color:var(--text);margin-bottom:4px}
.api-sync-text{font-size:.72rem;color:var(--muted);line-height:1.6;max-width:760px}
.api-sync-actions{display:flex;gap:7px;flex-shrink:0}

/* Modals */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(7,7,10,.85);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.modal-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem}
.modal-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:10px 12px;outline:none;margin-bottom:10px;transition:border-color .2s}
.modal-input:focus{border-color:var(--accent)}
.bulk-modal{max-width:980px;padding:18px}
.bulk-modal-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bulk-modal-grid{display:grid;grid-template-columns:minmax(260px,1fr) 320px;gap:14px;min-height:360px}
.bulk-modal-list{background:var(--surface2);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:58vh;padding:6px}
.bulk-modal-actions{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.bulk-modal-actions .section-title{margin:8px 0 0}
.bulk-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:.15s}
.bulk-row:hover{background:rgba(255,255,255,.03);border-color:var(--border)}
.bulk-row input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.bulk-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.bulk-row-main strong{font-family:'Syne',sans-serif;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-row-main small{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-row.has-ai .bulk-row-main small{color:var(--accent)}
.bulk-row.missing-ai .bulk-row-main small{color:var(--danger)}
.bulk-modal-actions .api-sync-text{max-width:none}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px}
.stat-value{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent)}
.stat-label{font-size:.7rem;color:var(--muted);margin-top:3px;line-height:1.5}
.stats-list{display:grid;gap:7px;margin-top:12px}
.stats-list-item{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:.75rem;display:flex;justify-content:space-between;align-items:center;gap:8px}

/* Save bar */
.save-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:300;transform:translateY(100%);transition:.2s}
.save-bar.visible{transform:translateY(0)}
.save-bar-msg{font-size:.73rem;color:var(--muted)}
.save-bar-actions{display:flex;gap:7px}

/* Toast */
.toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--accent);color:#0d0d0f;padding:8px 18px;border-radius:999px;font-size:.78rem;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:1000;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--danger);color:#fff}

/* No results */
.no-results{padding:24px 12px;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.8}

/* Spinner */
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── RESPONSIVE DESKTOP ── */
@media(min-width:700px){
  .app-body{display:grid;grid-template-columns:300px 1fr}
  .sidebar{position:relative;inset:auto;transform:none!important;border-right:1px solid var(--border)}
  .detail-panel{position:relative;inset:auto;transform:none!important}
  .detail-panel .empty-state{display:flex}
  .detail-panel.has-kin .empty-state{display:none}
  .back-btn{display:none!important}
  .save-bar{left:300px}
  .detail-scroll{padding:24px 26px 120px}
  .detail-name{font-size:1.9rem}
  .fields-grid.two{grid-template-columns:1fr 1fr}
  .fields-grid.three{grid-template-columns:repeat(3,1fr)}
  .readonly-meta-grid{grid-template-columns:1fr 1fr}
  .avatar-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1080px){
  .app-body{grid-template-columns:320px 1fr}
  .save-bar{left:320px}
}

@media(max-width:699px){
  .sidebar-toolbar{gap:7px;padding:8px}
  .filter-box{max-height:34vh}
  .filter-box-body{max-height:34vh}
  .kin-list{min-height:220px}
  .sidebar-footer{padding:8px}
  .footer-text{display:none}
  .footer-title{font-size:.58rem}
  .footer-btns .btn{padding:6px 9px;font-size:.7rem}
  .modal-overlay{padding:10px}
  .bulk-modal{max-height:94vh;padding:14px}
  .bulk-modal-grid{grid-template-columns:1fr;min-height:0}
  .bulk-modal-list{max-height:36vh}
  .bulk-modal-actions{gap:8px}
}

/* Tag Filter Collapse */
.filter-tag-section {
  display: flex;
  flex-direction: column;
}

.filter-collapse-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: bold;
  cursor: pointer;
  padding: 6px 0;
}

.tag-filter-content {
  transition: max-height 0.25s ease, opacity 0.25s ease;
  overflow: hidden;
}

.tag-filter-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.tag-filter-content.expanded {
  max-height: 500px;
  opacity: 1;
}

#tagFilterChevron {
  transition: transform 0.2s ease;
}

#tagFilterChevron.rotated {
  transform: rotate(-90deg);
}