.sidebar { border-right: 1px solid var(--border); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: var(--surface); }
.section-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }

/* mode toggle */
.mode-group { display: flex; flex-direction: column; }
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); }
.mode-toggle-beta-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.mode-toggle-beta-wrap.open { grid-template-rows: 1fr; }
.mode-toggle-beta { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-top: none; overflow: hidden; min-height: 0; }
.mode-toggle-beta-wrap:not(.open) .mode-toggle-beta { border-color: transparent; }
.mode-expand-btn { text-align: center; font-size: 14px; color: var(--text-dim); cursor: pointer; padding: 6px 0 2px; transition: color 0.15s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; line-height: 1; }
.mode-expand-btn:hover { color: var(--text-bright); }
.mode-expand-btn.open { transform: rotate(45deg); }
.mode-btn { text-align: center; padding: 8px; font-family: inherit; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: none; border: none; color: var(--text-dim); cursor: pointer; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.2s ease, color 0.2s ease; }
.mode-btn:nth-child(2n) { border-right: none; }
#mode-toggle .mode-btn { border-bottom: none; }
.mode-toggle-beta .mode-btn:nth-last-child(-n+2) { border-bottom: none; }
.mode-btn.active { background: var(--text-bright); color: #fff; }
.mode-btn:not(.active):hover { background: var(--bg); color: var(--text-bright); }
.mode-btn .beta { font-size: 7px; vertical-align: super; opacity: 0.5; margin-left: 2px; letter-spacing: 0; }

/* howto */
.howto { background: var(--bg); border: 1px solid var(--border); padding: 12px; font-size: 10px; line-height: 1.4; color: var(--text); }
.howto strong { color: var(--text-bright); font-weight: 600; }
.howto .step { margin-bottom: 4px; }
.howto .step:last-child { margin-bottom: 0; }

/* ears */
.ear { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; user-select: none; animation: chipIn 0.2s ease-out both; }
.ear:hover .ear-name { color: var(--text-bright); }
.ear-toggle { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ear-name { flex: 1; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; }
.ear-count { color: var(--text-dim); font-size: 10px; }
.ear.off .ear-toggle { background: transparent !important; border: 1px solid var(--text-dim); }
.ear.off .ear-name { color: var(--text-dim); }
.ear-remove { color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1; transition: color 0.15s ease; }
.ear-remove:hover { color: var(--red); }

/* inputs */
.add-ear, .scene-save, .add-seed { display: flex; gap: 6px; margin-top: 6px; }
.add-ear input, .scene-save input, .add-seed input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text-bright); font-family: inherit; font-size: 11px; padding: 6px 8px; outline: none; min-width: 0; transition: border-color 0.15s ease; }
.add-ear input::placeholder, .scene-save input::placeholder, .add-seed input::placeholder { color: var(--text-dim); }
.add-ear input:focus, .scene-save input:focus, .add-seed input:focus { border-color: var(--accent); }
.add-ear button, .scene-save button, .add-seed button { background: none; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.add-ear button:hover, .scene-save button:hover, .add-seed button:hover { border-color: var(--accent); color: var(--accent); }

/* autocomplete */
.ac-wrap { position: relative; flex: 1; min-width: 0; }
.ac-wrap input { width: 100%; }
.ac-drop { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-top: none; z-index: 50; max-height: 160px; overflow-y: auto; animation: fadeIn 0.15s ease-out; }
.ac-item { padding: 5px 8px; font-size: 10px; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.1s ease; }
.ac-item:hover, .ac-item.active { background: var(--bg); color: var(--text-bright); }
.ac-item .ac-followers { color: var(--text-dim); font-size: 9px; }
.scene-save input { font-size: 10px; padding: 4px 8px; }
.scene-save button { font-size: 10px; padding: 4px 8px; }
.save-trigger { font-size: 9px; color: var(--text-dim); cursor: pointer; margin-top: 6px; transition: color 0.15s ease; }
.save-trigger:hover { color: var(--accent); }
.scene-save { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin 0.25s ease-out; margin-top: 0; }
.scene-save.open { max-height: 50px; opacity: 1; margin-top: 6px; }

/* ear suggestion */
.ear-suggestion { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 8px; border: 1px dashed var(--border); animation: fadeIn 0.3s ease-out; }
.ear-suggestion img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ear-suggestion .sug-name { flex: 1; font-size: 10px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ear-suggestion .sug-add { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); color: var(--text-dim); font-size: 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; line-height: 1; }
.ear-suggestion .sug-add:hover { border-color: var(--accent); color: var(--accent); }
.ear-suggestion .sug-dismiss { color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 0 2px; opacity: 0.4; transition: opacity 0.15s; }
.ear-suggestion .sug-dismiss:hover { opacity: 1; }

/* depth toggle */
.depth-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); }
.depth-btn { text-align: center; padding: 6px; font-family: inherit; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; background: none; border: none; color: var(--text-dim); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.depth-btn:first-child { border-right: 1px solid var(--border); }
.depth-btn.active { background: var(--text-bright); color: #fff; }
.depth-btn:not(.active):hover { background: var(--bg); color: var(--text-bright); }
.depth-desc { font-size: 9px; color: var(--text-dim); margin-top: 4px; transition: opacity 0.2s ease; }

/* seeds */
.seed-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; animation: chipIn 0.2s ease-out both; }
.seed-item .seed-name { flex: 1; font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.seed-item .seed-name a { color: inherit; text-decoration: none; }
.seed-item .seed-name a:hover { text-decoration: underline; }

/* scenes */
.scene-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.scene-tag { font-size: 10px; padding: 3px 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; color: var(--text); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.scene-tag:hover { border-color: var(--accent); color: var(--accent); }
.scene-tag.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.scene-tag .x { margin-left: 4px; opacity: 0.5; }
.scene-tag .x:hover { opacity: 1; }

#sidebar-sc, #sidebar-bc, #sidebar-dc, #sidebar-rym, #sidebar-nina, #sidebar-irl, #sidebar-nts, #sidebar-blogs { display: flex; flex-direction: column; gap: 16px; animation: fadeIn 0.2s ease-out; }

.stats { font-size: 10px; color: var(--text-dim); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; transition: opacity 0.2s ease; }
.stats .num { color: var(--text); }