/* ============================================================
   Kitaphana — Басқару панелі (Admin console)
   Light, sage-green (iOS Palette.swift), Geologica + Inter.
   Layout & class names follow the Bilim Invest console template.
   ============================================================ */

:root {
  /* surfaces — light, warm-sage (matches the iOS app) */
  --ink-0:#E8EEE9; --ink-1:#F5F7F4; --ink-2:#FFFFFF; --ink-3:#F2F4F1; --ink-4:#EAEFEA;
  --line:#E7ECE7; --line-2:#D8E0D9;
  --tx-0:#1C1C1E; --tx-1:#566158; --tx-2:#99A29B;
  --accent:#3DA876; --accent-2:#2F9264; --accent-soft:rgba(61,168,118,0.13); --accent-line:rgba(61,168,118,0.36);
  --ok:#2F9264; --ok-soft:rgba(61,168,118,0.16); --warn:#C2700C; --warn-soft:rgba(194,112,12,0.14);
  --danger:#E5484D; --danger-soft:rgba(229,72,77,0.12);
  --gold:#C79A3B; --gold-soft:rgba(199,154,59,0.15);
  --grid-line:rgba(16,40,24,0.04);
  --shadow-card:0 1px 2px rgba(16,40,16,0.04), 0 14px 30px -18px rgba(16,40,16,0.16);
  --shadow-pop:0 24px 60px -22px rgba(16,40,16,0.26);
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-head:'Geologica','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Inter',ui-sans-serif,system-ui,sans-serif;
  --r-sm:9px; --r-md:13px; --r-lg:16px; --r-xl:22px;
  --sidebar-w:274px; --topbar-h:66px;
  color-scheme: light;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-sans); background:var(--ink-1); color:var(--tx-0);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.5;
}
button { font-family:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent-soft); }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track { background:transparent; }

.mono { font-family:var(--font-mono); }
.grid-bg { position:absolute; inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
[data-icon] svg, .ic svg { width:1em; height:1em; display:block; }
.ic { display:inline-flex; align-items:center; justify-content:center; }

/* ============================================================ LOGIN */
.login { min-height:100vh; min-height:100dvh; display:grid; place-items:center; position:relative; overflow:hidden; background:radial-gradient(125% 90% at 50% -10%, #E9F4EE 0%, var(--ink-1) 58%); padding:24px; }
.login__glow { position:absolute; width:720px; height:720px; left:50%; top:-16%; transform:translateX(-50%); background:radial-gradient(circle, rgba(61,168,118,0.16), transparent 62%); filter:blur(6px); pointer-events:none; }
.login__card { position:relative; width:100%; max-width:418px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:38px 34px 28px; z-index:1; }
.login__brand { display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.login__brand img { height:46px; width:auto; display:block; }
.login__eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent); letter-spacing:0.12em; text-transform:uppercase; }
.login__title { font-family:var(--font-head); font-size:27px; font-weight:700; letter-spacing:-0.02em; margin:9px 0 4px; }
.login__sub { color:var(--tx-1); font-size:14px; margin-bottom:24px; }
.login__foot { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--tx-2); }
.login__foot .ic { color:var(--ok); }
.login__hint { margin-top:14px; text-align:center; font-size:11.5px; color:var(--tx-2); }
.login__lang { position:absolute; top:22px; right:22px; z-index:2; }

/* ============================================================ APP SHELL */
.shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; min-height:100dvh; }

.side { position:sticky; top:0; height:100vh; height:100dvh; background:var(--ink-2); border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:40; }
.side__top { display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid var(--line); height:var(--topbar-h); width:100%; background:none; border-left:0; border-right:0; border-top:0; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .14s; }
.side__top:hover { background:var(--ink-3); }
.side__top img { height:38px; width:auto; display:block; flex:none; }
.side__badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:0.1em; color:var(--tx-2); border:1px solid var(--line); border-radius:5px; padding:3px 6px; text-transform:uppercase; }
.side__nav { flex:1; overflow-y:auto; padding:14px 12px 20px; }
.side__group { font-size:10.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:var(--tx-2); padding:14px 10px 7px; }
.navitem { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; color:var(--tx-1); padding:9px 11px; border-radius:var(--r-sm); font-size:14px; font-weight:500; position:relative; transition:background .15s, color .15s; margin-bottom:1px; }
.navitem:hover { background:var(--ink-3); color:var(--tx-0); }
.navitem .ic { font-size:18px; color:var(--tx-2); flex:none; width:20px; }
.navitem.is-active { background:var(--accent-soft); color:var(--tx-0); }
.navitem.is-active .ic { color:var(--accent); }
.navitem.is-active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent); }
.navitem__count { margin-left:auto; font-size:11px; font-weight:600; color:var(--tx-2); background:var(--ink-1); border:1px solid var(--line); border-radius:99px; padding:1px 8px; }
.navitem.is-active .navitem__count { color:var(--accent); border-color:var(--accent-line); }

.navpage { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; color:var(--tx-0); padding:9px 11px; border-radius:var(--r-sm); font-size:14px; font-weight:600; letter-spacing:-0.01em; margin-bottom:1px; }
.navpage:hover { background:var(--ink-3); }
.navpage .ic { font-size:18px; color:var(--tx-2); width:20px; flex:none; }
.navpage.has-active .ic { color:var(--accent); }
.navpage__chev { margin-left:auto; color:var(--tx-2); font-size:15px; transition:transform .18s ease; display:inline-flex; }
.navpage.is-open .navpage__chev { transform:rotate(90deg); }
.navkids { overflow:hidden; display:flex; flex-direction:column; padding:2px 0 6px; }
.navitem--child { padding-left:42px; font-weight:500; font-size:13.5px; }
.navitem--child::after { content:""; position:absolute; left:25px; top:0; bottom:0; width:1px; background:var(--line); }
.navitem--child.is-active::after { background:var(--accent-line); }
.navitem--child.is-active::before { display:none; }

.side__foot { padding:12px; border-top:1px solid var(--line); }

/* operator chip */
.op { display:flex; align-items:center; gap:10px; width:100%; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; color:var(--tx-0); transition:border-color .15s; }
.op:hover, .op.is-open { border-color:var(--line-2); }
.op__av { width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-2)); }
.op__meta { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.op__meta b { font-size:13px; font-weight:600; }
.op__meta span { font-size:10.5px; color:var(--tx-2); }
.op__caret { margin-left:auto; color:var(--tx-2); font-size:15px; display:inline-flex; transition:transform .18s ease; }
.op__caret.is-open { transform:rotate(180deg); }
.op-wrap { position:relative; }
.op-pop { position:absolute; left:0; right:0; bottom:calc(100% + 8px); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:6px; z-index:60; animation:viewIn .16s ease; }
.op-pop__item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; color:var(--tx-0); padding:9px 11px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500; text-align:left; }
.op-pop__item:hover { background:var(--ink-3); }
.op-pop__item .ic { font-size:16px; color:var(--tx-2); }
.op-pop__sep { height:1px; background:var(--line); margin:5px 4px; }
.op-pop__item--danger { color:var(--danger); }
.op-pop__item--danger .ic { color:var(--danger); }
.op-pop__item--danger:hover { background:var(--danger-soft); }

/* main column */
.main { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center; gap:16px; padding:0 28px; background:rgba(255,255,255,0.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.iconbtn.topbar__burger { display:none; }
.topbar__titlewrap { min-width:0; }
.topbar__title { font-family:var(--font-head); font-size:17px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }
.topbar__crumb { font-size:11.5px; color:var(--tx-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__right { margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.topbar__sep { width:1px; height:26px; background:var(--line); }

.content { padding:30px 32px 100px; max-width:1120px; width:100%; }
.content--wide { max-width:1380px; }

/* segmented control (lang) */
.seg { display:inline-flex; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; }
.seg button { background:none; border:0; color:var(--tx-1); font-size:11.5px; font-weight:600; letter-spacing:0.03em; padding:5px 11px; border-radius:6px; transition:background .14s, color .14s; }
.seg button:hover { color:var(--tx-0); }
.seg button.is-on { background:var(--accent); color:#fff; }

.iconbtn { width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--ink-2); color:var(--tx-1); display:grid; place-items:center; font-size:17px; }
.topbar__right .iconbtn { width:34px; height:34px; font-size:16px; }
.topbar__right .btn--sm, .topbar__right .seg { height:34px; }
.topbar__right .seg { align-items:center; }
.iconbtn:hover { color:var(--tx-0); border-color:var(--line-2); }

@keyframes viewIn { from { transform:translateY(8px); opacity:.4; } to { transform:none; opacity:1; } }
.view-anim { animation:viewIn .24s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .view-anim, .op-pop { animation:none; } }

/* ============================================================ BUTTONS / BADGES */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--r-sm); font-weight:600; font-size:13.5px; padding:9px 16px; letter-spacing:-0.01em; transition:transform .08s, background .15s, border-color .15s, filter .15s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--accent); color:#fff; }
.btn--primary:hover { filter:brightness(.96); }
.btn--ghost { border-color:var(--line); background:var(--ink-2); color:var(--tx-0); }
.btn--ghost:hover { border-color:var(--line-2); background:var(--ink-3); }
.btn--subtle { background:transparent; color:var(--tx-1); }
.btn--subtle:hover { background:var(--ink-3); color:var(--tx-0); }
.btn--danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.btn--danger:hover { background:var(--danger); color:#fff; }
.btn--block { width:100%; }
.btn--sm { padding:6px 11px; font-size:12.5px; }
.btn .ic { font-size:16px; }
.btn[disabled] { opacity:0.45; pointer-events:none; }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; border:1px solid var(--line); color:var(--tx-1); }
.badge--ok { color:var(--ok); border-color:transparent; background:var(--ok-soft); }
.badge--accent { color:var(--accent-2); border-color:var(--accent-line); background:var(--accent-soft); }
.badge--warn { color:var(--warn); border-color:transparent; background:var(--warn-soft); }

/* ============================================================ SECTION HEAD + CARDS */
.phead { display:flex; align-items:flex-end; gap:18px; margin-bottom:24px; flex-wrap:wrap; }
.phead__eyebrow { font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; }
.phead__title { font-family:var(--font-head); font-size:27px; font-weight:700; letter-spacing:-0.02em; margin:7px 0 0; }
.phead__sub { color:var(--tx-1); font-size:14px; margin-top:8px; max-width:580px; text-wrap:pretty; }
.phead__actions { margin-left:auto; display:flex; gap:10px; align-items:center; }

.card { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); }
.card__pad { padding:22px 24px; }
.card + .card { margin-top:18px; }
.card__head { display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); }
.card__head h3 { font-family:var(--font-head); font-size:15.5px; font-weight:600; margin:0; }
.card__head .sub { font-size:12px; color:var(--tx-2); }
.card__head .ic { font-size:19px; color:var(--accent); }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stack { display:flex; flex-direction:column; gap:18px; }
@media (max-width:760px){ .grid2,.grid3 { grid-template-columns:1fr; } }

/* ============================================================ FIELDS */
.field { margin-bottom:18px; }
.field:last-child { margin-bottom:0; }
.field__label { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--tx-1); margin-bottom:8px; letter-spacing:0.01em; }
.field__label .req { color:var(--danger); }
.field__hint { font-size:12.5px; color:var(--tx-2); margin-top:7px; line-height:1.5; }
.inp, .ta, .sel { width:100%; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--tx-0); font-size:14px; padding:11px 13px; transition:border-color .15s, box-shadow .15s; }
.inp::placeholder,.ta::placeholder { color:var(--tx-2); }
.inp:focus,.ta:focus,.sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ta { resize:vertical; min-height:104px; line-height:1.55; }
.sel { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

/* tri-lingual field */
.tri__bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.tri__tabs { display:inline-flex; background:var(--ink-3); border:1px solid var(--line); border-radius:7px; padding:2px; gap:2px; }
.tri__tab { display:flex; align-items:center; gap:6px; background:none; border:0; color:var(--tx-2); font-size:11px; font-weight:600; padding:4px 10px; border-radius:5px; letter-spacing:0.03em; transition:background .14s, color .14s; }
.tri__tab:hover { color:var(--tx-1); }
.tri__tab.is-on { background:var(--accent); color:#fff; }
.tri__dot { width:5px; height:5px; border-radius:99px; background:var(--tx-2); }
.tri__tab.has-val .tri__dot { background:var(--ok); }
.tri__tab.is-on .tri__dot { background:rgba(255,255,255,0.9); }
.tri__label { font-size:12.5px; font-weight:600; color:var(--tx-1); }
.tri__globe { color:var(--tx-2); font-size:15px; display:inline-flex; }
.tri__copy { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--tx-2); background:none; border:1px solid var(--line); border-radius:5px; padding:3px 9px; }
.tri__copy:hover { color:var(--accent); border-color:var(--accent-line); }

/* toggle */
.tog { display:inline-flex; align-items:center; gap:10px; cursor:pointer; outline:none; background:none; border:0; padding:0; color:var(--tx-0); }
.tog:focus, .tog:focus-visible { outline:none; }
.tog__track { width:40px; height:23px; border-radius:99px; background:var(--ink-4); border:1px solid var(--line-2); position:relative; transition:background .15s, border-color .15s; flex:none; }
.tog__knob { position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:99px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.tog.is-on .tog__track { background:var(--accent); border-color:transparent; }
.tog.is-on .tog__knob { transform:translateX(17px); }

/* tag list */
.tags { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tag-chip { display:inline-flex; align-items:center; gap:7px; background:var(--ink-3); border:1px solid var(--line); border-radius:99px; padding:5px 8px 5px 13px; font-size:12.5px; color:var(--tx-0); }
.tag-chip button { background:none; border:0; color:var(--tx-2); font-size:14px; display:inline-flex; padding:0; line-height:1; }
.tag-chip button:hover { color:var(--danger); }

/* color field */
.colorfield { display:flex; align-items:center; gap:10px; }
.color-swatch { width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--line-2); flex:none; cursor:pointer; }

/* ============================================================ REPEATER */
.rep { display:flex; flex-direction:column; gap:12px; }
.repitem { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); }
.repitem__bar { display:flex; align-items:center; gap:12px; padding:13px 16px; }
.repitem__bar:hover { background:var(--ink-3); }
.repitem.is-open .repitem__bar { border-bottom:1px solid var(--line); background:var(--ink-3); }
.repitem__grip { color:var(--tx-2); font-size:17px; cursor:grab; flex:none; }
.repitem__thumb { width:42px; height:42px; border-radius:8px; flex:none; background:var(--ink-4); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-2); font-size:14px; font-weight:600; overflow:hidden; }
.repitem__thumb img { width:100%; height:100%; object-fit:cover; }
.repitem__t { min-width:0; }
.repitem__t b { font-size:14px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.repitem__t span { font-size:11.5px; color:var(--tx-2); }
.repitem__actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.repitem__body { padding:20px 18px 18px; }
.miniico { width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:none; color:var(--tx-2); display:grid; place-items:center; font-size:15px; transition:color .14s, border-color .14s, background .14s; }
.miniico:hover { color:var(--tx-0); border-color:var(--line-2); background:var(--ink-3); }
.miniico:disabled { opacity:0.3; pointer-events:none; }
.miniico--danger:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }

.addrow { display:flex; }
.addbtn { width:100%; border:1px dashed var(--line-2); background:var(--ink-2); color:var(--tx-1); border-radius:var(--r-md); padding:14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:9px; transition:color .14s, border-color .14s, background .14s; }
.addbtn:hover { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.addbtn .ic { font-size:18px; }

/* ============================================================ COLLECTION (master list) + DETAIL */
.coll-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.coll-toolbar .muted { font-size:12.5px; display:flex; align-items:center; gap:7px; }
.coll-list { display:flex; flex-direction:column; gap:12px; }
.coll-card { display:flex; align-items:center; gap:16px; padding:15px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .06s; text-align:left; width:100%; }
.coll-card:hover { border-color:var(--accent-line); }
.coll-card.is-dragging { opacity:0.4; }
.coll-card.is-over { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.coll-card__grip { color:var(--tx-2); font-size:18px; cursor:grab; flex:none; display:grid; place-items:center; width:24px; height:36px; border-radius:6px; }
.coll-card__grip:hover { color:var(--tx-0); background:var(--ink-4); }
.coll-card__grip:active { cursor:grabbing; }
.coll-card__thumb { width:64px; height:64px; border-radius:10px; flex:none; overflow:hidden; background:var(--ink-4); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-2); font-size:16px; font-weight:700; }
.coll-card__thumb img { width:100%; height:100%; object-fit:cover; }
.coll-card__thumb .ic { font-size:24px; color:var(--tx-2); }
.coll-card__body { min-width:0; flex:1; }
.coll-card__body b { font-size:15.5px; font-weight:600; letter-spacing:-0.01em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coll-card__body span { font-size:11.5px; color:var(--tx-2); display:block; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coll-card__langs { display:flex; gap:4px; flex:none; }
.coll-card__lang { font-size:9.5px; font-weight:700; letter-spacing:0.04em; color:var(--tx-2); border:1px solid var(--line); border-radius:4px; padding:2px 5px; }
.coll-card__lang.on { color:var(--ok); border-color:transparent; background:var(--ok-soft); }
.coll-card__lang-gl { margin-right:3px; }
.coll-card__del { flex:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--tx-2); display:grid; place-items:center; font-size:16px; }
.coll-card__del:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }
.coll-card__go { color:var(--tx-2); font-size:18px; flex:none; display:inline-flex; }
.coll-card:hover .coll-card__go { color:var(--accent); }
.coll-card__flags { display:flex; gap:6px; margin-top:6px; }
.flag { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:0.03em; padding:2px 7px; border-radius:5px; }
.flag--warn { color:var(--warn); background:var(--warn-soft); }
.flag--lang { color:var(--accent-2); background:var(--accent-soft); }

/* ---------- book cards (grid mode of MasterDetail) ---------- */
.coll-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:start; }
@media (max-width:1100px){ .coll-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:680px){ .coll-grid { grid-template-columns:1fr; } }
.bcard { position:relative; display:grid; grid-template-columns:92px 1fr; grid-template-rows:auto 1fr; column-gap:15px; padding:15px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .08s; }
.bcard:hover { border-color:var(--accent-line); box-shadow:var(--shadow-pop); }
.bcard:active { transform:translateY(1px); }
.bcard.is-dragging { opacity:0.4; }
.bcard.is-over { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bcard__cover { grid-row:1 / span 2; width:92px; aspect-ratio:151/210; border-radius:9px; overflow:hidden; background:var(--ink-4); box-shadow:0 6px 16px -8px rgba(0,0,0,0.45); }
.bcard__cover .bcover { border-radius:0; }
.bcard__cover .bcover__t { font-size:14px; line-height:1.3; max-height:none; padding:0 6px; }
.bcard__cover .bcover__a { font-size:5.5px; margin-top:4px; }
.bcard__grip { position:absolute; right:44px; top:10px; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--tx-2); cursor:grab; opacity:0; transition:opacity .15s, color .15s; font-size:15px; }
.bcard__del { position:absolute; right:10px; top:10px; width:28px; height:28px; border-radius:7px; border:0; background:none; display:grid; place-items:center; color:var(--tx-2); opacity:0; transition:opacity .15s, color .15s, background .15s; font-size:15px; }
.bcard:hover .bcard__grip, .bcard:hover .bcard__del { opacity:1; }
.bcard__grip:hover { color:var(--tx-0); }
.bcard__del:hover { color:var(--danger); background:var(--danger-soft); }
.bcard__body { grid-column:2; display:flex; flex-direction:column; gap:5px; min-width:0; padding-right:36px; }
.bcard__body b { font-size:15.5px; font-weight:600; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bcard__body b.tote { font-size:18px; text-align:right; padding-right:0; }
.bcard__sub { font-size:11.5px; color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bcard__flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.bcard__foot { grid-column:2; display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; }
.bcard__foot .btn { margin-left:auto; }

.coll-search { display:flex; align-items:center; gap:7px; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:6px 11px; color:var(--tx-2); }
.coll-search .ic { font-size:15px; }
.coll-search__inp { background:none; border:0; outline:none; color:var(--tx-0); font-size:13px; width:180px; }
.coll-search__inp::placeholder { color:var(--tx-2); }
.media-tools { display:flex; margin-bottom:18px; }

.backlink { display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:var(--tx-2); font-size:12.5px; font-weight:600; padding:4px 0; margin-bottom:10px; }
.backlink:hover { color:var(--accent); }
.backlink .ic { font-size:16px; }
.detailhead { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.detailhead h2 { font-family:var(--font-head); font-size:25px; font-weight:700; letter-spacing:-0.02em; margin:0; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* töte headings keep the book font — the heading rule above would override it */
.detailhead h2.tote { font-family:'KerwenTor','Geeza Pro','Noto Naskh Arabic',serif; font-weight:400; font-size:28px; }
.detailhead__del { flex:none; }

/* ============================================================ IMAGE DROP + MEDIA */
.imgdrop { position:relative; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink-3); max-width:460px; }
.imgdrop--drop { border-style:dashed; border-color:var(--line-2); background:var(--ink-3); transition:border-color .15s, background .15s; }
.imgdrop__hint { color:var(--tx-2); transition:color .15s; }
.imgdrop--drop:hover, .imgdrop--drop.is-over { border-color:var(--accent); background:var(--accent-soft); }
.imgdrop--drop:hover .imgdrop__hint, .imgdrop--drop.is-over .imgdrop__hint { color:var(--accent); }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.media-cell { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink-2); box-shadow:var(--shadow-card); }
.media-cell__img { aspect-ratio:4/3; background:var(--ink-4); display:grid; place-items:center; color:var(--tx-2); overflow:hidden; }
.media-cell__img img { width:100%; height:100%; object-fit:cover; }
.media-cell__meta { padding:9px 11px; display:flex; align-items:center; gap:8px; }
.media-cell__meta b { flex:1; min-width:0; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-cell__meta .miniico { flex:none; margin-left:auto; }

/* ============================================================ DASHBOARD */
.stat-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:860px){ .stat-tiles { grid-template-columns:1fr 1fr; } }
.stat-tile { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 18px 16px; box-shadow:var(--shadow-card); text-align:left; transition:border-color .14s, transform .06s; }
.stat-tile:hover { border-color:var(--accent-line); }
.stat-tile__ic { width:36px; height:36px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:19px; margin-bottom:14px; }
.stat-tile__v { font-family:var(--font-head); font-size:31px; font-weight:700; letter-spacing:-0.02em; }
.stat-tile__k { font-size:12px; color:var(--tx-2); margin-top:3px; }
.quick { display:flex; flex-wrap:wrap; gap:10px; }
.quicklink { display:flex; align-items:center; gap:11px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 15px; color:var(--tx-0); font-size:13.5px; font-weight:600; transition:border-color .14s, background .14s; }
.quicklink:hover { border-color:var(--accent-line); background:var(--accent-soft); }
.quicklink .ic { font-size:18px; color:var(--accent); }

/* i18n breakdown */
.i18n-sum { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:14px; }
.i18n-sum .flag { font-size:12px; }
.i18n-sum__hint { font-size:12.5px; color:var(--tx-2); }
.i18n-list { display:flex; flex-direction:column; gap:6px; }
.i18n-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:11px 13px; background:var(--ink-3); border:1px solid var(--line); border-radius:9px; color:var(--tx-0); transition:border-color .14s, background .14s, transform .06s; }
.i18n-row:hover { border-color:var(--accent); background:var(--accent-soft); }
.i18n-row:active { transform:translateY(1px); }
.i18n-row__where { display:flex; align-items:center; gap:9px; flex:1; min-width:0; font-size:13.5px; }
.i18n-row__where b { font-weight:600; }
.i18n-row__where span { color:var(--tx-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.i18n-row__sep { color:var(--tx-2); flex:none; }
.i18n-row__right { display:flex; align-items:center; gap:10px; flex:none; color:var(--tx-2); }
.i18n-row:hover .i18n-row__right { color:var(--accent); }
.i18n-row__count { font-size:11px; font-weight:700; min-width:24px; height:22px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--warn-soft); color:var(--warn); }
.i18n-row .ic { font-size:16px; }
.locale-ok { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ok); }
.locale-ok .ic { color:var(--ok); }

/* ============================================================ SAVE BAR */
.savebar { position:sticky; bottom:0; z-index:25; margin-top:auto; display:flex; align-items:center; gap:12px; padding:14px 28px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.savebar__status { margin-right:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--tx-2); }
.savebar__status .ic { font-size:16px; color:var(--ok); }
.savebar.is-dirty { border-top-color:var(--accent-line); }
.savebar.is-dirty .savebar__status { color:var(--warn); }
.savebar.is-dirty .savebar__status .ic { color:var(--warn); }
@media (max-width:560px){ .savebar { padding:12px 16px; } .savebar__status span { display:none; } }

/* ============================================================ TOAST + MODAL */
.toasts { position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 15px; box-shadow:var(--shadow-pop); font-size:13.5px; animation:toastin .25s ease; }
.toast .ic { color:var(--ok); font-size:17px; }
.toast__action { margin-left:6px; background:none; border:0; color:var(--accent); font-size:12.5px; font-weight:700; cursor:pointer; padding:3px 7px; border-radius:6px; }
.toast__action:hover { background:var(--accent-soft); }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } }

.modal-scrim { position:fixed; inset:0; z-index:300; background:rgba(16,30,16,0.32); backdrop-filter:blur(3px); display:grid; place-items:center; padding:24px; animation:toastin .14s ease; }
.modal { width:min(440px,100%); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:22px; }
.modal__head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.modal__head .ic { color:var(--accent); font-size:19px; }
.modal__head h3 { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.modal__body { font-size:13.5px; color:var(--tx-1); margin:0 0 14px; line-height:1.55; }
.modal__list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:7px; max-height:230px; overflow:auto; }
.modal__list li { display:flex; align-items:center; gap:9px; font-size:13.5px; padding:8px 11px; background:var(--ink-3); border:1px solid var(--line); border-radius:8px; }
.modal__list li::before { content:''; width:6px; height:6px; border-radius:99px; background:var(--accent); flex:none; }
.modal__foot { display:flex; justify-content:flex-end; gap:10px; }

/* helpers */
.muted { color:var(--tx-2); }
.divline { height:1px; background:var(--line); border:0; margin:20px 0; }
.empty { text-align:center; padding:48px 20px; color:var(--tx-2); }
.empty .ic { font-size:32px; opacity:0.6; }
.empty p { margin:12px 0 0; font-size:13.5px; }
.scrim { position:fixed; inset:0; background:rgba(16,30,16,0.34); z-index:45; opacity:0; pointer-events:none; transition:opacity .2s; }

/* ============================================================ RESPONSIVE — sidebar drawer */
@media (max-width:900px){
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-pop); }
  .shell.is-open .side { transform:translateX(0); }
  .shell.is-open .scrim { opacity:1; pointer-events:auto; }
  .iconbtn.topbar__burger { display:grid; }
  .content { padding:22px 18px 80px; }
  .topbar { padding:0 16px; }
}
@media (max-width:560px){
  .topbar__title { font-size:15px; }
  .topbar__right .seg button { padding:5px 8px; }
  .phead__title { font-size:22px; }
  .coll-card__langs { display:none; }
  .coll-card__thumb { width:52px; height:52px; }
  .coll-search__inp { width:120px; }
}

/* ============================================================
   KITAPHANA ADDITIONS — töte (RTL Arabic-script) editing,
   book-cover previews, readers table, brand mark.
   ============================================================ */

/* töte font, served by the backend (seeded from the iOS bundle) */
@font-face {
  font-family:'KerwenTor';
  src:url('/fonts/KerwenTor.ttf') format('truetype');
  font-display:swap;
}
.tote { font-family:'KerwenTor','Geeza Pro','Noto Naskh Arabic',serif; direction:rtl; unicode-bidi:plaintext; }

/* RTL inputs for töte content — bigger glyphs, roomier leading */
.inp--rtl, .ta--rtl { direction:rtl; text-align:right; font-family:'KerwenTor','Geeza Pro','Noto Naskh Arabic',serif; font-size:17px; }
.ta--rtl { line-height:2.05; min-height:230px; }

/* brand mark (sidebar / login) */
.brand { display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brand__mark { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-2)); font-size:18px; }
.brand__mark .ic { font-size:19px; }
.brand__name { font-family:var(--font-head); font-size:16.5px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; }
.brand__name span { color:var(--accent-2); }
.brand--lg .brand__mark { width:46px; height:46px; border-radius:12px; }
.brand--lg .brand__mark .ic { font-size:25px; }
.brand--lg .brand__name { font-size:21px; }

/* book cover — mirrors the iOS BookCoverView (flat color, töte title,
   small latin author caps at the bottom) */
.bcover { position:relative; width:100%; height:100%; border-radius:inherit; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#fff; padding:6px 5px; text-align:center; }
.bcover::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(255,255,255,0.14), transparent 45%); pointer-events:none; }
.bcover__t { font-family:'KerwenTor','Geeza Pro',serif; direction:rtl; font-size:12.5px; line-height:1.3; max-height:2.6em; overflow:hidden; max-width:100%; }
.bcover__a { font-size:5px; font-weight:600; letter-spacing:0.13em; opacity:0.85; white-space:nowrap; max-width:100%; overflow:hidden; }
.coll-card__thumb--book { width:52px; height:70px; border-radius:7px; }
.repitem__thumb--book { width:38px; height:50px; border-radius:6px; }

/* large cover preview in the book editor */
.coverprev { width:168px; aspect-ratio:151/210; border-radius:14px; flex:none; box-shadow:0 14px 30px -14px rgba(0,0,0,0.45); }
.coverprev .bcover__t { font-size:21px; line-height:1.35; max-height:none; padding:0 6px; }
.coverprev .bcover__a { font-size:8.5px; margin-top:5px; }
.coverrow { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.coverrow__fields { flex:1; min-width:260px; }

/* simple data table (readers) */
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--tx-2); padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover td { background:var(--ink-3); }
.tbl .mono { font-size:12px; color:var(--tx-2); }
.tblwrap { overflow-x:auto; }

/* small stat chips inside tables / cards */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--tx-1); background:var(--ink-3); border:1px solid var(--line); border-radius:99px; padding:2px 9px; white-space:nowrap; }
.chip .ic { font-size:13px; color:var(--accent); }
.chip--gold { color:var(--gold); background:var(--gold-soft); border-color:transparent; }

/* recommended picker row */
.recadd { display:flex; gap:10px; align-items:center; margin-top:14px; }
.recadd .sel { flex:1; }

/* rating badge on book cards */
.rate { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--gold); }
.rate .ic { font-size:13px; }

/* ---------- EPUB upload row (per script variant) ---------- */
.epubrow { display:flex; align-items:center; gap:13px; padding:13px 16px; border:1px dashed var(--line-2); border-radius:var(--r-md); background:var(--ink-3); margin-bottom:18px; flex-wrap:wrap; }
.epubrow.has-file { border-style:solid; border-color:var(--line); background:var(--ink-2); }
.epubrow > .ic { font-size:21px; color:var(--accent); flex:none; }
.epubrow__meta { flex:1; min-width:200px; display:flex; flex-direction:column; line-height:1.4; }
.epubrow__meta b { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epubrow__meta span { font-size:11.5px; color:var(--tx-2); }
.epubrow__actions { display:flex; gap:8px; flex:none; }

/* ---------- in-panel book reader ---------- */
.reader__top { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.reader__top .sel { width:auto; min-width:220px; flex:1; }
.reader__paper { padding:36px 42px 48px; }
.reader__chtitle { margin:0 0 22px; font-weight:600; letter-spacing:-0.01em; }
.reader__chtitle--tote { font-family:'KerwenTor','Geeza Pro',serif; direction:rtl; text-align:right; font-size:26px; line-height:1.5; font-weight:400; }
.reader__chtitle--cyrl { font-family:var(--font-head); font-size:22px; }
.reader__body { max-width:780px; }
.reader__body--tote { direction:rtl; text-align:right; font-family:'KerwenTor','Geeza Pro','Noto Naskh Arabic',serif; margin-left:auto; }
.reader__body--tote p { line-height:2.2; margin:0 0 1.15em; }
.reader__body--cyrl { direction:ltr; text-align:left; font-family:'Inter',Georgia,serif; }
.reader__body--cyrl p { line-height:1.9; margin:0 0 1em; }
.reader__nav { display:flex; align-items:center; gap:12px; margin-top:20px; }
.reader__count { color:var(--tx-2); font-size:12.5px; font-weight:600; margin:0 auto; }
@media (max-width:700px){ .reader__paper { padding:24px 20px 32px; } }

/* ---------- formatted blocks (reader) ---------- */
.rb { margin:0 0 1.05em; }
.rb b { font-weight:700; }
.rb i { font-style:italic; }
.rb u { text-decoration:underline; text-underline-offset:3px; }
.rb s { text-decoration:line-through; }
.rb sup, .rb sub { font-size:0.72em; line-height:0; }
.rb--c { text-align:center; }
.rb--r { text-align:right; }
.rb--j { text-align:justify; }
.reader__body--tote .rb--r { text-align:left; }   /* mirrored: "end" in RTL */
.rb--h1, .rb--h2, .rb--h3, .rb--h4 { font-weight:700; letter-spacing:-0.01em; margin:1.6em 0 0.7em; }
.rb--h1:first-child, .rb--h2:first-child, .rb--h3:first-child, .rb--h4:first-child { margin-top:0; }
.rb--h1 { font-size:1.34em; }
.rb--h2 { font-size:1.22em; }
.rb--h3 { font-size:1.1em; }
.rb--h4 { font-size:1em; text-transform:none; }
.reader__body--cyrl .rb--h1, .reader__body--cyrl .rb--h2,
.reader__body--cyrl .rb--h3, .reader__body--cyrl .rb--h4 { font-family:var(--font-head); }
.rb--quote { border-inline-start:3px solid var(--accent-line); padding-inline-start:16px; color:var(--tx-1); font-style:italic; margin-block:1.2em; }
.rb--ul, .rb--ol { list-style:none; padding-inline-start:22px; position:relative; margin-bottom:0.6em; }
.rb--ul::before { content:'•'; position:absolute; inset-inline-start:4px; color:var(--accent); }
.rb--ol { counter-increment:rb-ol; }
.reader__body { counter-reset:rb-ol; }
.rb--ol::before { content:counter(rb-ol) '.'; position:absolute; inset-inline-start:0; color:var(--accent); font-variant-numeric:tabular-nums; }

/* editor notice for imported, formatted chapters */
.fmt-note { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--accent-2); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:12px; }
.fmt-note .ic { font-size:15px; flex:none; margin-top:1px; }

/* ---------- Cyrillic input → live töte preview ---------- */
.xlit { display:flex; align-items:center; gap:9px; margin-top:8px; padding:8px 12px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); min-height:40px; }
.xlit .ic { font-size:15px; color:var(--accent); flex:none; }
.xlit__out { flex:1; min-width:0; font-size:17px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xlit.is-empty .xlit__out { color:var(--tx-2); font-size:13px; }

/* read-only computed value (volume) */
.readonly { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--ink-3); font-size:14px; min-height:44px; }
.readonly .ic { font-size:16px; color:var(--tx-2); }
.readonly .tote { font-size:16px; }

/* ---------- per-script file slots ---------- */
.slots { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:860px){ .slots { grid-template-columns:1fr; } }
.slot { border:1px dashed var(--line-2); border-radius:var(--r-md); background:var(--ink-3); padding:14px 16px 13px; display:flex; flex-direction:column; gap:11px; }
.slot.has-file { border-style:solid; border-color:var(--line); background:var(--ink-2); box-shadow:var(--shadow-card); }
.slot__head { display:flex; align-items:center; gap:8px; }
.slot__name { font-size:13px; font-weight:700; letter-spacing:0.02em; }
.slot__head .chip { margin-left:auto; }
.slot__body { display:flex; align-items:center; gap:11px; min-height:42px; }
.slot__body > .ic { font-size:20px; color:var(--accent); flex:none; }
.slot__meta { display:flex; flex-direction:column; min-width:0; line-height:1.45; }
.slot__meta b { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot__meta span { font-size:11.5px; color:var(--tx-2); }
.slot__actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.slot__actions .btn { flex:none; }
.slot__upload { display:inline-flex; gap:6px; margin-left:auto; }

/* the files held by one script slot (EPUB and/or Word) */
.srcfiles { display:flex; flex-direction:column; gap:8px; }
.srcfile { display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ink-3); }
.srcfile > .ic { font-size:18px; color:var(--accent); flex:none; }
.srcfile__meta { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.4; }
.srcfile__meta b { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srcfile__meta b.tote { font-size:15px; font-weight:400; }
.srcfile__meta span { font-size:11px; color:var(--tx-2); }
.srcfile__actions { display:flex; align-items:center; gap:6px; flex:none; }

/* confirm dialog */
.modal__name { margin:0 0 16px; padding:10px 13px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; font-weight:600; word-break:break-word; }

/* ---------- real EPUB view (epub.js renders the book's own pages) ----------
   The text column is capped and centred like a Word page, in both the normal
   and the fullscreen view. */
.reader__bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.epubwrap { position:relative; overflow:hidden; max-width:960px; margin:0 auto; }
.epubview { height:min(74vh, 900px); overflow-y:auto; overflow-x:hidden; opacity:0; transition:opacity .2s; }
.epubview.is-ready { opacity:1; }
/* scroll, but without a visible bar interrupting the page */
.epubview { scrollbar-width:none; -ms-overflow-style:none; }
.epubview::-webkit-scrollbar { width:0; height:0; display:none; }
.epubwrap .empty { position:absolute; inset:0; display:grid; place-content:center; z-index:2; background:var(--ink-2); }
.epubview iframe { border:0; display:block; }
/* .epub-container is epub.js's own scroller — keep it scrollable, just hide
   its bar (disabling its overflow freezes the whole reader) */
.epubview .epub-container { scrollbar-width:none; -ms-overflow-style:none; overflow-x:hidden !important; }
.epubview .epub-container::-webkit-scrollbar { width:0; height:0; display:none; }

/* fullscreen reading — native where allowed, fixed overlay otherwise.
   Either way the text column keeps its Word-like centred width. */
.readerbox:fullscreen,
.readerbox.is-full { background:var(--ink-1); padding:16px 20px 22px; overflow:auto; }
.readerbox.is-full { position:fixed; inset:0; z-index:120; }
.readerbox:fullscreen .reader__bar,
.readerbox.is-full .reader__bar { max-width:960px; margin:0 auto 12px; }
.readerbox:fullscreen .epubwrap,
.readerbox.is-full .epubwrap { height:calc(100vh - 92px); border-radius:var(--r-md); }
.readerbox:fullscreen .epubview,
.readerbox.is-full .epubview { height:100%; }
.readerbox:fullscreen .reader__paper,
.readerbox.is-full .reader__paper { max-width:960px; margin:0 auto; }
.readerbox:fullscreen .reader__nav,
.readerbox.is-full .reader__nav { max-width:960px; margin:14px auto 0; }
.readerbox.is-full .card { box-shadow:var(--shadow-pop); }

/* nothing to save while reading — the bar only belongs to the editors */
body.is-reading .savebar { display:none; }