:root{--ink:#1c2b30;--paper:#f2f5f4;--card:#fff;--line:#d5dddb;--accent:#0f6b6b;--muted:#5d6f73;--sidebar-bg:#1c2b30;--sidebar-text:#e2eeec;--sidebar-muted:#7a9893;--sidebar-line:rgba(255,255,255,0.08);--sidebar-hover:rgba(255,255,255,0.07);--sidebar-active:#0f6b6b}
@media(prefers-color-scheme:dark){:root{--ink:#e6eeee;--paper:#11191b;--card:#192427;--line:#2b3a3d;--accent:#4fb3b3;--muted:#8da2a5;--sidebar-bg:#0d1517;--sidebar-text:#d4e9e6;--sidebar-muted:#5a7874;--sidebar-line:rgba(255,255,255,0.06);--sidebar-hover:rgba(255,255,255,0.05);--sidebar-active:#0f6b6b}}
*{box-sizing:border-box}
body{margin:0;display:grid;grid-template-columns:220px 1fr;height:100vh;overflow:hidden;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,sans-serif}
aside.sidebar{padding:16px 10px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;height:100vh;overflow-y:auto;position:sticky;top:0;background:var(--sidebar-bg);}
.sidebar-header{display:flex;align-items:center;gap:8px;padding:4px 8px 12px;border-bottom:1px solid var(--sidebar-line);margin-bottom:8px;}
.sidebar-header .logo-icon{font-size:20px;}
h1{font:600 17px/1.2 "Iowan Old Style",Georgia,serif;margin:0;color:var(--sidebar-text);}
.nav-group{display:flex;flex-direction:column;gap:1px;}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--sidebar-muted);font-weight:700;margin-bottom:4px;padding:0 8px;}

/* ── Regular nav items ─────────────────────────────────────────────────────── */
.nav-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--sidebar-text);font-weight:500;font-size:13px;transition:all 0.2s ease;opacity:0.8;}
.nav-item:hover{background:var(--sidebar-hover);opacity:1;transform:translateX(2px);}
.nav-item.active{background:var(--sidebar-active);color:#fff;opacity:1;box-shadow:0 4px 10px rgba(15,107,107,0.30);}
.nav-item.active .icon{opacity:1;}
.nav-item .icon{font-size:15px;opacity:0.7;}
.nav-management{margin-top:auto;padding-top:12px;border-top:1px solid var(--sidebar-line);}

/* ── Category nav buttons (All Books + ungrouped) ──────────────────────────── */
nav button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;background:none;color:var(--sidebar-text);padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;transition:all 0.2s ease;opacity:0.75;}
nav button:hover{background:var(--sidebar-hover);opacity:1;transform:translateX(2px);}
nav button.on{background:var(--sidebar-active);color:#fff;opacity:1;box-shadow:0 6px 16px rgba(15,107,107,0.28);}

/* ── Super Category accordion ──────────────────────────────────────────────── */
.supercat-section{margin-bottom:2px;}
.supercat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 10px 7px 8px;border-radius:8px;cursor:pointer;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.07em;
  color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.1);
  border:none;width:100%;text-align:left;
  transition:background 0.2s;gap:6px;
}
.supercat-header:hover{background:rgba(255,255,255,0.15);}
.supercat-header .sc-arrow{font-size:10px;transition:transform 0.2s;opacity:0.6;flex-shrink:0;}
.supercat-header.collapsed .sc-arrow{transform:rotate(-90deg);}
.supercat-header .sc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.supercat-cats{display:flex;flex-direction:column;gap:1px;padding-left:8px;overflow:hidden;transition:max-height 0.25s ease;max-height:600px;}
.supercat-cats.collapsed{max-height:0;}
.supercat-cats nav button{font-size:12px;padding:5px 10px 5px 18px;opacity:0.7;}
.supercat-cats nav button:hover{opacity:1;}
.supercat-cats nav button.on{opacity:1;}

/* ── Ungrouped cats ─────────────────────────────────────────────────────────── */
.ungrouped-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--sidebar-muted);padding:8px 8px 3px;opacity:0.7;}

main{padding:32px;min-width:0;overflow-y:auto;height:100vh;}
header{display:flex;gap:12px;margin-bottom:20px}
input,textarea,button{font:inherit;color:inherit}
input,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
button{padding:7px 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.book{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,0.04);transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;position:relative}
.book:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,0.08);border-color:var(--accent);z-index:20}
.spine{width:100%;height:14px;flex:none;transition:height 0.2s;background-color:var(--paper);border-radius:15px 15px 0 0}
.spine.has-cover{height:auto;aspect-ratio:3 / 4;border-bottom:1px solid var(--line);border-radius:15px 15px 0 0;overflow:hidden}
.book-progress{width:100%;height:4px;background:var(--line);flex:none}
.book-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#20c997);border-radius:0 2px 2px 0;transition:width 0.4s ease}
.book-progress-fill.complete{background:linear-gradient(90deg,#20c997,#00b894)}
.progress-label{font-size:10px;font-weight:600;color:var(--accent);letter-spacing:0.04em;margin-top:-4px}
.info{padding:16px;min-width:0;flex:1;display:flex;flex-direction:column;gap:12px;position:relative}
.info h3{margin:0;font:500 13px/1.4 system-ui,sans-serif;position:relative}
.book-title-link{color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transform-origin:left center;transition:transform 0.3s cubic-bezier(0.2,0.9,0.3,1),text-shadow 0.3s ease,color 0.3s ease,box-shadow 0.3s ease,background 0.3s ease;cursor:pointer;position:relative;z-index:2;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.info:hover .book-title-link{overflow:visible;-webkit-line-clamp:unset;line-clamp:unset;transform:scale(1.2);z-index:100;color:var(--accent);font-weight:600;text-shadow:0.5px 0.5px 0 rgba(255,255,255,0.95),1px 1px 1.5px rgba(0,0,0,0.22),-0.5px -0.5px 0 rgba(255,255,255,0.8);background:rgba(255,255,255,0.97);backdrop-filter:blur(4px);box-shadow:0 4px 12px rgba(0,0,0,0.1),0 0 0 1px rgba(15,107,107,0.1);width:max-content;max-width:210px}
.info p{margin:2px 0 8px;color:var(--muted)}
.tag{font-size:13px;color:var(--muted)}
.acts{display:flex;gap:6px;margin-top:auto}
.acts a, .acts button{padding:8px 0;font-size:12px;font-weight:600;border:none;border-radius:20px;background:var(--paper);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;font-family:inherit;cursor:pointer;transition:all 0.2s}
.acts a:hover, .acts button:hover{background:var(--line);transform:scale(1.02)}
.acts a.primary{flex:1.55;background:var(--accent);color:#fff}
.acts a.primary:hover{filter:brightness(1.12);transform:scale(1.02)}
.acts button[data-a="edit"]{flex:1}
.acts button[data-a="edit"]:hover{background:var(--line);color:var(--accent)}
.empty{grid-column:1/-1;color:var(--muted);padding:40px 0}
dialog{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:min(440px,92vw);padding:20px}
dialog::backdrop{background:#0008}
form label{display:block;margin-top:12px;font-size:14px}form label input,form label textarea{margin-top:4px}
form label select{margin-top:4px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit}
h2{margin:0;font:600 20px Georgia,serif}
#err{color:#c0392b;min-height:1.4em;margin:8px 0 0}
.row{display:flex;justify-content:flex-end;gap:8px}
#reader{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--paper);z-index:10}
#reader[hidden]{display:none}
.bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.bar span{display:flex;gap:8px}
#viewer{flex:1;min-height:0;background:#fff}#viewer iframe{width:100%;height:100%;border:0}
@media(max-width:700px){body{grid-template-columns:1fr}aside{border:0;border-bottom:1px solid var(--line)}nav{display:flex;flex-wrap:wrap;gap:4px}nav button{width:auto;gap:8px}}

/* Modern Dynamic Progress Bar */
.progress-bar-track {width:100%;height:12px;background:var(--line);border-radius:6px;overflow:hidden;position:relative;}
.progress-bar-fill {height:100%;width:0%;background:linear-gradient(90deg,var(--accent) 0%,#20c997 50%,var(--accent) 100%);background-size:200% 100%;border-radius:6px;transition:width 0.35s cubic-bezier(0.4,0,0.2,1);animation:shimmer 1.5s infinite linear;}
@keyframes shimmer {0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.upload-row{transition:all 0.25s ease;}
.upload-row.status-uploading{border-color:var(--accent) !important;background-color:rgba(15,107,107,0.08) !important;}
.upload-row.status-done{border-color:#20c997 !important;background-color:rgba(32,201,151,0.08) !important;}
.upload-row.status-error{border-color:#e63946 !important;background-color:rgba(230,57,70,0.08) !important;}