:root {
  --bg: #f9e8ef;
  --card: #ffffff;
  --ink: #352438;
  --muted: #705c76;
  --accent: #8f216b;
  --accent-dark: #6e1858;
  --accent-soft: #f0e4f3;
  --danger: #b42318;
  --border: #e7d3e2;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(83, 32, 72, 0.09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 8px; min-width:0; flex-wrap:wrap; }
.brand .logo { font-size: clamp(18px, 4.8vw, 22px); font-weight: 700; color: var(--accent); line-height:1.35; }
.brand .tag { font-size: 13px; color: var(--muted); }

.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.btn.secondary:hover { background: #e6d3ed; }
.btn.danger { background: #fdecea; color: var(--danger); }
.btn.danger:hover { background: #fbd9d4; }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: 0.5; cursor: default; }

input[type='text'], input[type='password'], select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }

.muted { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); font-size: 14px; margin-top: 10px; min-height: 20px; }
.success { color: #067647; font-size: 14px; }

/* login page */
.login-hero { text-align: center; margin: 48px auto 24px; max-width: 420px; }
.login-hero h1 { font-size: 30px; margin: 0 0 6px; }
.login-card { max-width: 420px; margin: 0 auto; }
.login-card .btn { width: 100%; margin-top: 16px; }
.code-input {
  text-align: center;
  font-size: 20px;
  letter-spacing: 4px;
  direction: ltr;
}

/* catalog */
.section-title { font-size: 18px; font-weight: 700; margin: 28px 0 12px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.booklet {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booklet h3 { margin: 0; font-size: 16px; }
.chip {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  margin-inline-end: 6px;
}
.booklet .actions { margin-top: auto; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

/* admin */
.admin-section { margin-bottom: 28px; }
.admin-section h2 { font-size: 17px; margin: 0 0 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.status-active { color: #067647; }
.status-revoked { color: var(--danger); }
.code-reveal {
  direction: ltr;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin-top: 12px;
}
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { flex: 1; min-width: 140px; }

@media (max-width: 640px) {
  .wrap { padding: 16px 12px 40px; }
  .table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; }
  .table thead { display: none; }
  .table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 8px; }
  .table td { border: none; padding: 4px 6px; }
  .table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .login-hero h1 { font-size: 24px; }
}

.bulk-table input[type="text"], .bulk-table select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.bulk-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Personal library: data comes only from the allowed catalog endpoint. */
.library-intro{padding:20px 0 26px}.library-intro h1{font-size:32px;line-height:1.3;margin:8px 0 12px}.eyebrow{color:var(--accent);font-weight:700;font-size:14px}.library-tools{margin-bottom:24px}.library-tools label{font-size:14px;color:var(--ink);margin-top:0}input[type='search']{width:100%;padding:14px;border:1px solid var(--border);border-radius:10px;font:inherit;color:var(--ink);background:#fff}.library-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.library-filters{display:grid;grid-template-columns:1fr 1fr;gap:16px}.library-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:20px;font-size:14px}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.library-book{background:white;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);min-width:0}.library-cover{background:#f0e4f3;padding:22px;min-height:135px;display:flex;flex-direction:column;gap:10px;position:relative}.library-cover span{color:#8f216b;font-size:21px;font-weight:700;max-width:75%;overflow-wrap:anywhere}.library-cover strong{font-size:13px;color:var(--ink)}.library-paper{position:absolute;left:20px;bottom:22px;width:38px;height:48px;background:repeating-linear-gradient(white,white 9px,#dac1df 10px,white 11px);border:1px solid #a0478b;border-radius:3px;transform:rotate(-8deg)}.library-book-body{padding:18px;display:flex;flex-direction:column;align-items:stretch;min-height:225px}.library-book-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-star{border:0;background:none;color:var(--accent);font-size:28px;width:44px;min-height:44px;cursor:pointer;flex-shrink:0}.library-book-body h2{font-size:18px;margin:6px 0 10px;overflow-wrap:anywhere;line-height:1.5}.library-book-body .btn{margin-top:auto;min-height:44px}.library-star:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a0478b;outline-offset:2px}.grant-bulk{position:sticky;top:60px;background:white;padding:16px 0;border-bottom:1px solid var(--border);z-index:2}.grant-bulk .btn{min-height:44px}.library-empty p{color:var(--muted)}@media(max-width:850px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.library-grid{grid-template-columns:1fr}.library-intro h1{font-size:27px}.library-tools{padding:16px}.library-filters{grid-template-columns:1fr}.library-tabs .btn{flex:1;min-height:44px}.library-summary{flex-wrap:wrap}.brand .tag{max-width:150px}.library-book-body{min-height:0}.library-book-body .btn{margin-top:12px}}

/* Actual first page, fully contained rather than cropped. */
.library-cover{height:300px;padding:12px;min-height:0;background:#f0e4f3;display:flex;align-items:center;justify-content:center}.library-cover img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;padding:12px;box-sizing:border-box}.preview-fallback{font-size:14px;color:var(--muted);text-align:center;max-width:85%}.preview-actions{display:flex;flex-wrap:wrap;gap:10px}.preview-result{font-size:14px;border-bottom:1px solid var(--border);padding:8px 0;overflow-wrap:anywhere}@media(max-width:560px){.library-cover{height:330px}}

.preview-enlarge{position:absolute;bottom:12px;right:12px;z-index:1;background:white;border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--accent);font-size:13px;box-shadow:var(--shadow)}.preview-enlarge[hidden]{display:none}

/* Keep the enlarge action below the page pixels, never on top of its contents. */
.library-cover{height:344px}.library-cover img{height:calc(100% - 44px)}.preview-enlarge{bottom:8px}@media(max-width:560px){.library-cover{height:374px}}

.upload-token-row{padding:16px 0;border-top:1px solid var(--border);overflow-wrap:anywhere}#upload-token-result textarea{width:100%;box-sizing:border-box;min-height:95px;font-family:monospace;font-size:14px}#upload-token-create{margin-top:16px}#upload-api-section input[type=number]{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--border);border-radius:8px;font:inherit}
/* Admin navigation changes visibility, not DOM state or running tasks. */
.admin-layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;padding:24px}.admin-sidebar{position:sticky;top:85px;align-self:start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}.admin-sidebar nav{display:grid;gap:6px}.admin-sidebar a{display:block;text-decoration:none;color:var(--ink);padding:12px;border-radius:8px}.admin-sidebar a[aria-current=page]{background:var(--accent-soft);color:var(--accent-dark);font-weight:700}.admin-sidebar p{font-size:12px;padding:10px}.admin-content.wrap{margin:0;max-width:none;padding:0;min-width:0}.admin-content [data-panel]:not([data-panel-active]){display:none}.admin-content [hidden]{display:none!important}.admin-content h1{margin:0 0 12px;font-size:26px}.admin-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.admin-shortcuts a{padding:20px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--accent-dark)}.admin-shortcuts span{display:block;font-size:13px;margin-top:8px;color:var(--muted)}#admin-menu-toggle{display:none}.admin-filters{display:grid;grid-template-columns:2fr repeat(4,minmax(90px,1fr));gap:12px;margin-bottom:16px}.admin-filters input,.admin-filters select{width:100%;min-height:44px;border:1px solid var(--border);border-radius:8px;padding:8px;font:inherit;background:white;color:var(--ink)}.admin-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}.admin-content .table td:first-child{overflow-wrap:anywhere}.admin-content section{scroll-margin-top:85px}
@media(max-width:1050px){.admin-layout{grid-template-columns:190px minmax(0,1fr);gap:16px;padding:16px}.admin-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-filters .field:first-child{grid-column:1/-1}.admin-shortcuts{grid-template-columns:1fr}}
@media(max-width:700px){.admin-layout{display:block;padding:12px}.admin-sidebar{position:static;padding:10px;margin-bottom:16px}.admin-sidebar p{display:none}#admin-menu-toggle{display:block;width:100%;min-height:44px}.admin-sidebar nav{display:none;margin-top:10px}.admin-sidebar nav.is-open{display:grid}.admin-content .card{padding:18px}.admin-content h1{font-size:23px}.admin-content .table{width:100%}.admin-content .admin-section{margin-bottom:16px}}
#grant-search{width:100%;min-height:44px;padding:10px;border:1px solid var(--border);border-radius:8px;font:inherit}.grant-row[hidden]{display:none!important}
@media(max-width:700px){.admin-sidebar{position:sticky;top:62px;z-index:9}.admin-sidebar nav.is-open{max-height:65vh;overflow-y:auto}}
/* Original Bruria logo stays complete, uncropped, and at its natural ratio. */
.bruria-logo{display:block;object-fit:contain;height:auto;background:#fff;max-width:100%}.bruria-logo-login{width:230px;margin:0 auto 24px}.login-hero:has(.bruria-logo){margin-top:28px}.library-branded-intro{display:flex;align-items:center;gap:30px}.bruria-logo-library{width:180px;flex:0 0 180px}.bruria-logo-admin{width:160px;margin:0 0 20px}.library-branded-intro>div{min-width:0}@media(max-width:560px){.bruria-logo-login{width:205px;margin-bottom:20px}.library-branded-intro{flex-direction:column;align-items:flex-start;gap:12px}.bruria-logo-library{width:175px;flex:none;align-self:center}.bruria-logo-admin{width:160px;margin-inline:auto}}