body { background:var(--bg); color:var(--text); font:14px/1.45 "Segoe UI",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { background:var(--surface); border-color:var(--border); color:var(--text); font-size:13px; font-weight:500; }
button:hover:not(:disabled) { background:#2b2d30; border-color:#606065; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-text); font-weight:700; }
.primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
.quiet { background:transparent; }
input:not([type=checkbox]):not([type=range]),select,textarea { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:7px; }
input::placeholder,textarea::placeholder { color:#777c82; }
input[type=checkbox],input[type=range],progress { accent-color:var(--accent); }
header { height:66px; padding:0 24px; background:var(--bg); border-bottom:1px solid var(--border); gap:20px; }
.brand { display:inline-flex; align-items:center; color:var(--text); font-size:27px; letter-spacing:-.7px; white-space:nowrap; }
.app-navigation { display:flex; align-items:stretch; align-self:stretch; gap:4px; margin-right:auto; }
.app-navigation a { display:flex; align-items:center; min-height:44px; padding:0 15px; border-bottom:2px solid transparent; color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; }
.app-navigation a:hover { color:var(--text); }
.app-navigation a.active { color:var(--accent); border-bottom-color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:8px; }
.header-actions button { min-height:38px; padding:8px 12px; }
.shell { grid-template-columns:260px minmax(0,1fr); min-height:calc(100dvh - 66px); }
aside { top:66px; height:calc(100dvh - 66px); padding:20px 14px; background:#141618; border-right:1px solid var(--border); gap:12px; }
aside h2 { margin:0; font-size:15px; font-weight:650; }
aside nav { gap:2px; }
aside nav button { min-height:48px; padding:6px 10px; color:#d4d4d1; }
aside nav button.active { background:var(--accent-dim); color:var(--accent); }
aside nav button:hover:not(.active) { background:var(--raised); }
aside nav button .avatar { width:36px; height:36px; border-radius:5px; }
.avatar.fallback { background:var(--raised); color:var(--muted); }
aside #search { min-height:40px; }
.local-note { border-top:1px solid var(--border); line-height:1.5; }
main { padding:24px 26px; }
.gallery-heading { align-items:center; padding-bottom:16px; }
.gallery-heading h1 { margin:0 0 2px; color:var(--text); font-size:27px; letter-spacing:-.5px; }
#group-count { color:var(--muted); font-size:13px; }
.gallery-heading .actions { align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.gallery-heading .actions button { min-height:38px; padding:7px 12px; white-space:nowrap; }
.library-tools { padding:14px 0 7px; }
.search-row { gap:9px; }
.search-row input[type=search],.search-row select { min-height:40px; }
.search-row select { width:185px; }
.search-row label { color:var(--muted); }
.maintenance-actions { gap:6px; }
.maintenance-actions button { min-height:36px; padding:6px 10px; font-size:12px; }
.search-help summary,.search-help p { color:var(--muted); }
.grid-controls { background:var(--surface); border-color:var(--border); color:var(--muted); }
.grid-controls strong { color:var(--text); }
.grid-controls input[type=number] { background:var(--raised)!important; }
.toolbar { gap:8px; padding:12px 0 16px; }
.toolbar button { min-height:36px; }
.gallery { gap:16px; }
.gallery:not(.photo-grid) { gap:20px 16px; }
.gallery.photo-grid { gap:15px 12px; overflow-x:visible; }
.photo-grid .photo-image { border:1px solid var(--border); background:var(--surface); }
.photo-grid .photo-image img { background:var(--surface); object-fit:contain; }
.photo-grid .photo-caption { color:var(--muted); }
.photo-grid .photo-actions .icon-action { background:var(--surface); border-color:var(--border); color:#bbbdbd; }
.photo-grid .photo-actions .icon-action:hover { background:var(--raised); color:var(--accent); }
.photo-grid .photo-actions .icon-action.delete { color:#d98c92; }
.photo-grid .photo-actions .icon-action.delete:hover { background:#402528; }
.photo-tags .tag { background:var(--raised); color:var(--muted); }
.photo-person { color:var(--accent); }
.favorite-toggle { background:#171819db; color:#ddd; border-color:#626262; }
.favorite-toggle:hover,.favorite-toggle.active { background:#2a1c21; color:#ef7496; }
.group-cover { height:auto; aspect-ratio:16/9; overflow:hidden; background:var(--surface); border:1px solid var(--border); }
.group-cover .avatar { width:100%; height:100%; object-fit:cover; }
.group-cover .fallback { background:var(--surface); }
.group-tile { gap:5px; text-align:left; }
.group-tile strong { color:var(--text); font-size:14px; }
.hint,.group-tile .hint { color:var(--muted); }
.empty { color:var(--text); }
.empty p,footer,#job p { color:var(--muted); }
dialog { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:0 24px 80px #0009; }
dialog::backdrop { background:#000a; }
dialog p,dialog label span { color:var(--muted); }
dialog label { color:var(--text); }
dialog .hint { color:var(--muted); }
dialog details { border-color:var(--border); }
.close { color:var(--muted); background:transparent; }
.danger-action { background:var(--surface); color:#e39da4; border-color:#775054; }
.danger-action:hover:not(:disabled) { background:#402528; }
.viewer-actions a { display:inline-flex; align-items:center; padding:8px 14px; background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:700; }
.viewer-actions a:hover { background:var(--accent-hover); }
.viewer-actions #viewer-favorite[aria-pressed=true] { background:#362229; color:#ed81a1; border-color:#7a485a; }
#viewer { background:#151719; width:min(1280px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:12px; }
#viewer #full-image { max-height:calc(100dvh - 150px); }
#viewer:has(#viewer-transfer:not([hidden])) #full-image,#viewer:has(#viewer-information:not([hidden])) #full-image { max-height:55dvh; }
#viewer .viewer-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; padding:12px 4px 0; }
.viewer-photo-heading { display:flex; align-items:baseline; gap:12px; min-width:0; }
#viewer-character-name { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
#viewer-position { font-size:12px; color:var(--muted); white-space:nowrap; }
#viewer .viewer-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:0; }
#viewer .viewer-tool,#viewer .viewer-arrow { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid transparent; background:transparent; color:var(--muted); }
#viewer .viewer-tool:hover:not(:disabled) { background:var(--raised); color:var(--text); }
#viewer svg { display:block; width:20px; height:20px; flex-shrink:0; }
#viewer .viewer-close { top:16px; right:16px; background:#171819e8; color:var(--text); z-index:2; }
#viewer .viewer-arrow { background:#171819e8; color:var(--text); border-color:var(--border); }
#viewer #viewer-studio { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; font-size:13px; font-weight:600; }
#viewer #viewer-favorite[aria-pressed=true] { color:#ed81a1; border-color:transparent; background:#362229; }
#viewer-favorite[aria-pressed=true] svg { fill:currentColor; }
#viewer .viewer-tool[aria-expanded=true] { color:var(--accent); background:var(--accent-dim); }
#viewer #viewer-delete { margin-left:6px; color:#eaa39d; }
#viewer .viewer-transfer,#viewer #viewer-information { max-width:680px; margin:16px auto 0; padding:16px 0 0; border-top:1px solid var(--border); }
#viewer #full-caption { font-size:12px; margin:0 0 12px; text-align:left; }
#viewer #viewer-duplicates { border:0; margin:0; padding:0; }
#viewer button:focus-visible,#viewer a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:760px) {
  #viewer { width:calc(100vw - 16px); max-width:calc(100vw - 16px); margin:auto; padding:10px; }
  #viewer #full-image { max-height:calc(100dvh - 190px); }
  #viewer .viewer-footer { justify-content:center; gap:10px; }
  #viewer .viewer-photo-heading { width:100%; justify-content:space-between; }
  #viewer .viewer-actions { justify-content:center; gap:4px; }
  #viewer #viewer-studio { width:44px; padding:0; justify-content:center; }
  #viewer .viewer-studio-label { display:none; }
  #viewer #viewer-delete { margin-left:0; }
}
#viewer-duplicates,#deleted-people:not(:empty),.trash-row { border-color:var(--border); }
#viewer-duplicates h3,.viewer-transfer label { color:var(--muted); }
.viewer-arrow { background:#171819e8; color:var(--text); box-shadow:0 4px 16px #0008; }
.viewer-transfer-results { background:var(--surface); border-color:var(--border); }
.viewer-transfer-person+.viewer-transfer-person { border-color:var(--border); }
.transfer-person .transfer-cta { color:var(--accent); }
.crop-stage { background:var(--bg); }
#undo-bar,#toast { background:var(--raised); color:var(--text); border-color:var(--border); box-shadow:0 8px 35px #0008; }
#undo-bar button { color:var(--accent); }
.drag-active button[draggable=true]:not(.drag-source) { outline-color:var(--accent); }
#people button.drop-target,.group-cover.drop-target { background:var(--accent-dim); color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
@media(min-width:1600px) {
  .gallery:not(.photo-grid) { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media(min-width:2600px) {
  .gallery:not(.photo-grid) { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media(max-width:760px) {
  header { height:auto; min-height:104px; padding:8px 12px 0; flex-wrap:wrap; gap:2px; }
  .brand { font-size:23px; flex:1; }
  .header-actions { order:2; gap:4px; }
  .header-actions button { min-height:36px; padding:6px 8px; font-size:11px; }
  .app-navigation { order:3; width:100%; justify-content:center; margin:0; }
  .app-navigation a { flex:1; justify-content:center; }
  .shell { display:block; }
  aside { position:relative; top:auto; height:auto; padding:12px; border-right:0; border-bottom:1px solid var(--border); }
  aside h2,.local-note { display:none; }
  aside nav { display:flex; flex-direction:row; max-height:none; overflow-x:auto; gap:5px; }
  aside nav,.maintenance-actions { scrollbar-width:none; }
  aside nav::-webkit-scrollbar,.maintenance-actions::-webkit-scrollbar { display:none; }
  aside nav button { min-width:86px; width:86px; min-height:80px; flex:0 0 86px; flex-direction:column; justify-content:center; gap:3px; padding:5px; text-align:center; font-size:11px; }
  aside nav button .avatar { width:40px; height:40px; border-radius:50%; }
  aside nav .count { display:none; }
  aside #search { display:block; }
  #create-person { padding:6px 0; }
  main { padding:14px 12px; }
  .gallery-heading { align-items:flex-start; }
  .gallery-heading h1 { font-size:22px; }
  .gallery-heading .actions { justify-content:flex-start; }
  .gallery-heading .actions #edit-character { order:-1; }
  .search-row { gap:7px; }
  .search-row input[type=search] { flex-basis:100%; }
  .search-row select { min-width:0; }
  .maintenance-actions { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .maintenance-actions button { white-space:nowrap; flex:0 0 auto; }
  .grid-controls { padding:8px; }
  .gallery:not(.photo-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .gallery.photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
  .photo-grid .photo-actions { gap:6px; }
  .photo-grid .photo-actions .icon-action { min-width:40px; max-width:44px; }
  .group-cover { height:auto; }
  .group-cover .avatar { width:100%; height:100%; }
  .viewer-actions { justify-content:flex-start; }
  #full-image { max-height:48dvh; }
  #crop-dialog { width:100vw; max-height:100dvh; padding:14px; }
}