/* =========================================================
   VARIÁVEIS DE TEMA  (edite aqui para mudar identidade)
   ========================================================= */
:root{
  --accent:        oklch(0.60 0.20 285);   /* violeta, botões/ativos */
  --accent-press:  oklch(0.52 0.20 285);
  --ink:           #14161c;                /* texto principal */
  --ink-soft:      #6b7280;                /* texto secundário */
  --line:          #e9eaee;                /* divisórias */
  --card-radius:   22px;
  --page-bg:       #f3f4f6;                /* mesa fora do celular */

  /* cor viva do livro em destaque (alterada via JS) */
  --hero: #2f6d82;
  --hero-ink: #ffffff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:28px;
  overflow-x:hidden;
}
/* app-like: sem seleção acidental de texto ao arrastar/tocar */
.phone{ -webkit-user-select:none; user-select:none; }
/* exceto os campos do formulário, que precisam ser editáveis */
.input, .textarea{ -webkit-user-select:text; user-select:text; }

/* =========================================================
   MOLDURA DO CELULAR
   ========================================================= */
.phone{
  position:relative;
  width:390px; height:844px;
  background:#000;
  border-radius:54px;
  padding:11px;
  box-shadow:0 40px 90px -30px rgba(20,20,40,.5), 0 0 0 1px rgba(0,0,0,.4);
  flex:none;
}
.screen{
  position:relative;
  width:100%; height:100%;
  background:#fff;
  border-radius:44px;
  overflow:hidden;
}
/* Dynamic Island */
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:118px; height:34px; background:#000; border-radius:20px; z-index:60;
}

/* barra de status */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:54px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px 0; font-size:15px; font-weight:700; color:var(--hero-ink);
  transition:color .5s;
  pointer-events:none;
}
.statusbar .glyphs{ display:flex; gap:6px; align-items:center; }
.statusbar svg{ display:block; }

/* No celular real / app instalado: tela cheia, sem moldura fake */
@media (max-width:520px){
  body{ padding:0; }
  .phone{ width:100vw; height:100vh; height:100dvh; border-radius:0; padding:0; box-shadow:none; }
  .screen{ border-radius:0; }
  .island{ display:none; }
  .statusbar{ display:none; }
  .topbar{ padding-top:calc(env(safe-area-inset-top, 12px) + 12px); }
  .add-head{ padding-top:calc(env(safe-area-inset-top, 12px) + 14px); }
}
@media (display-mode:standalone){
  .island{ display:none; }
  .statusbar{ display:none; }
}

/* =========================================================
   ROTEADOR DE TELAS (desliza entre home e cadastro)
   ========================================================= */
.router{
  position:absolute; inset:0;
  display:flex; width:200%;
  transition:transform .42s cubic-bezier(.4,.0,.2,1);
}
.router.show-add{ transform:translateX(-50%); }
.view{ position:relative; width:50%; height:100%; overflow:hidden; }

/* ============================ HOME ============================ */
.home-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hero) 74%, #0e0e16) 0%,
      color-mix(in srgb, var(--hero) 80%, #0e0e16) 40%,
      color-mix(in srgb, var(--hero) 52%, #fff) 55%,
      #ffffff 66%);
  transition:background .55s ease;
}
.home{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* top bar */
.topbar{
  position:relative; z-index:20;
  padding:60px 18px 4px;
  display:grid; grid-template-columns:auto auto 1fr auto auto;
  align-items:center; gap:10px;
}
.iconbtn{
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.24);
  backdrop-filter:blur(6px);
  border:none; display:flex; align-items:center; justify-content:center;
  color:var(--hero-ink); cursor:pointer; transition:background .2s, color .5s, transform .1s;
}
.iconbtn:active{ transform:scale(.92); }
.brandmark{
  grid-column:3; display:flex; align-items:center; justify-content:center;
  color:var(--hero-ink); transition:color .5s;
}
.subbar{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--hero-ink); transition:color .5s;
  padding:2px 0 4px;
}
.subbar .fav{ position:absolute; left:26px; opacity:.85; display:flex; }
.subbar .filter{
  display:flex; align-items:center; gap:6px; font-weight:600; font-size:16px;
  background:none; border:none; color:inherit; cursor:pointer; padding:6px 10px; border-radius:12px;
  max-width:74%;
}
.subbar .filter span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subbar .filter svg{ flex:none; transition:transform .25s; }
.subbar .filter.open svg{ transform:rotate(180deg); }

/* palco do carrossel */
.stage{
  position:relative; z-index:10;
  flex:none; height:334px;
  perspective:1200px;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
  cursor:grab;
}
.stage.grabbing{ cursor:grabbing; }
.rail{
  position:relative; width:1px; height:300px;
  transform-style:preserve-3d;
}
.bookcard{
  position:absolute; top:50%; left:50%;
  width:168px; height:246px; margin:-123px 0 0 -84px;
  border-radius:12px; overflow:hidden;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.5);
  will-change:transform;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s, filter .5s;
  backface-visibility:hidden;
}
.stage.grabbing .bookcard{ transition:none; }

/* capa: imagem real ou arte gerada em CSS */
.cover{ position:absolute; inset:0; display:flex; flex-direction:column; padding:15px 14px; }
.cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.cover .ct{ font-family:'Plus Jakarta Sans'; font-weight:800; line-height:.98; letter-spacing:-.5px; }
.cover .ca{ margin-top:auto; font-weight:700; font-size:12px; opacity:.9; }

/* selo de tipo (físico / ebook / audiobook), no canto inferior direito */
.type-badge{
  position:absolute; bottom:13px; right:14px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.type-badge.art{ border:1.6px solid currentColor; opacity:.7; }          /* sobre capa desenhada, herda a cor do texto */
.type-badge.img{ background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(2px); }  /* sobre foto, círculo escuro */
.type-badge svg{ display:block; }
.empty{
  position:absolute; color:var(--hero-ink); font-weight:700; opacity:.9;
  font-family:'Spectral'; font-style:italic; font-size:17px;
}

/* ============ card de detalhe (parte branca) ============ */
.detail{
  position:relative; z-index:15;
  background:#fff; padding:8px 26px 0;
  flex:none;
}
.detail-top{ display:flex; align-items:flex-start; justify-content:space-between; min-height:30px; }
.status-line{ font-family:'Spectral'; font-style:italic; font-weight:600; font-size:15px; color:var(--ink-soft); }
.dur{ display:flex; align-items:center; gap:8px; }
.dur .ring{
  width:30px; height:30px; border-radius:50%; border:1.5px solid #f0a6b2;
  display:flex; align-items:center; justify-content:center; color:#e06a80;
}
.dur b{ font-size:17px; font-weight:800; }
.title{ font-size:27px; font-weight:800; letter-spacing:-.6px; margin:6px 0 2px; line-height:1.08; }
.byline{ font-size:17px; color:var(--ink); margin:0 0 8px; }
.finished{ display:flex; align-items:center; gap:8px; color:#9aa0aa; font-family:'Spectral'; font-style:italic; font-size:15px; margin-bottom:8px; }
.stars{ display:flex; gap:3px; font-size:22px; color:#f5c518; margin-bottom:10px; min-height:26px; }
.stars .off{ color:#d7dae0; }
.actions{ display:flex; gap:10px; align-items:center; }
.btn-share{
  background:var(--accent); color:#fff; border:none; font-weight:700; font-size:16px;
  padding:11px 26px; border-radius:14px; cursor:pointer; transition:background .15s, transform .1s;
}
.btn-share:active{ transform:scale(.96); background:var(--accent-press); }
.dots-wrap{ position:relative; }
.btn-dots{
  width:46px; height:44px; border-radius:14px; background:var(--accent); color:#fff; border:none; cursor:pointer;
  font-weight:800; letter-spacing:1px; display:flex; align-items:center; justify-content:center;
}
.btn-dots:active{ background:var(--accent-press); }

/* popover de ações (Editar / Excluir) */
.popover{
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:50;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.3); padding:6px; min-width:150px;
  animation:pop .14s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.pop-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer; padding:11px 12px; border-radius:10px;
  font:inherit; font-weight:700; font-size:15px; color:var(--ink); text-align:left;
}
.pop-item:active{ background:#f1f2f4; }
.pop-item.danger{ color:#dc2626; }

/* ============ nav inferior ============ */
.tabbar{
  position:absolute; bottom:14px; left:14px; right:14px; z-index:30;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:30px; height:74px;
  display:flex; align-items:center; justify-content:space-around;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.25);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:#a9adb6; font-size:11px; font-weight:700; letter-spacing:.3px;
  background:none; border:none; cursor:pointer; padding:6px 14px; border-radius:18px;
}
.tab.active{ color:var(--ink); }
.tab.active .pill{ background:#eef0f3; }
.pill{ width:44px; height:30px; border-radius:16px; display:flex; align-items:center; justify-content:center; transition:background .2s; }

/* ============ menu de filtro (dropdown deslizante) ============ */
.filtermenu{ position:absolute; inset:0; z-index:60; }
.fm-scrim{ position:absolute; inset:0; background:rgba(10,12,20,.32); opacity:0; transition:opacity .28s; }
.filtermenu.show .fm-scrim{ opacity:1; }
.fm-sheet{
  position:absolute; left:0; right:0; top:0;
  background:#fff; border-radius:0 0 26px 26px;
  padding:calc(env(safe-area-inset-top, 0px) + 58px) 16px 18px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.5);
  transform:translateY(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  max-height:78%; overflow-y:auto;
}
.filtermenu.show .fm-sheet{ transform:translateY(0); }
.fm-handle{ width:42px; height:5px; border-radius:3px; background:#dcdfe4; margin:0 auto 14px; }
.fm-list{ display:flex; flex-direction:column; gap:2px; }
.fm-group{ font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#a2a8b2; padding:14px 12px 6px; }
.fm-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:none; cursor:pointer; padding:13px 12px; border-radius:12px;
  font:inherit; font-weight:700; font-size:16px; color:var(--ink); text-align:left; width:100%;
}
.fm-opt:active{ background:#f4f5f7; }
.fm-opt.on{ color:var(--accent); }
.fm-opt .check{ opacity:0; }
.fm-opt.on .check{ opacity:1; }

/* ============ ESTANTE (grade de livros) ============ */
.library{
  position:absolute; inset:0; z-index:55; background:#fff;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.library.show{ transform:translateY(0); }
.lib-head{
  padding:calc(env(safe-area-inset-top, 0px) + 56px) 18px 12px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--line); background:#fff;
}
.lib-head .back{ width:40px; height:40px; border-radius:50%; background:#f1f2f4; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex:none; }
.lib-title-wrap{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.lib-title-wrap h1{ font-size:19px; font-weight:800; margin:0; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-count{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.lib-filter{ margin-left:auto; width:40px; height:40px; border-radius:50%; background:#f1f2f4; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex:none; }

.lib-grid{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 12px; align-content:start;
}
.lib-item{
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px;
}
.lib-item:active{ transform:scale(.97); }
.lib-cover{
  position:relative; width:100%; aspect-ratio:2/3; border-radius:9px; overflow:hidden;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.45); display:flex;
}
.lib-cover img{ width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-drag:none; }
.lib-cover.art{ flex-direction:column; padding:9px 8px; }
.lib-ct{ font-weight:800; font-size:12px; line-height:1.02; letter-spacing:-.3px; }
.lib-t{
  font-weight:700; font-size:13px; line-height:1.16; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lib-a{ font-size:11px; color:var(--ink-soft); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-stars{ font-size:12px; color:#f5c518; letter-spacing:1px; }
.lib-stars .off{ color:#d7dae0; }
.lib-empty{ grid-column:1 / -1; text-align:center; color:var(--ink-soft); font-family:'Spectral'; font-style:italic; padding:40px 0; }

.type-badge.small{ width:20px; height:20px; bottom:7px; right:7px; }
.type-badge.small svg{ width:11px; height:11px; }

/* ============ SUBPÁGINAS (Estatísticas / Perfil) ============ */
.subpage{
  position:absolute; inset:0; z-index:25;
  background:linear-gradient(180deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 26%, #f4f5f7) 20%,
      #f4f5f7 36%, #f4f5f7 100%);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top, 0px) + 58px) 18px calc(100px + env(safe-area-inset-bottom, 0px));
}
.sp-title{ color:#fff; font-size:26px; font-weight:800; letter-spacing:-.5px; margin:0 0 18px; }

.stat-hero{ background:#fff; border-radius:20px; padding:18px 20px; box-shadow:0 14px 32px -18px rgba(0,0,0,.35); margin-bottom:12px; }
.stat-hero .big{ font-size:44px; font-weight:800; letter-spacing:-1.5px; line-height:1; }
.stat-hero .lbl{ color:var(--ink-soft); font-weight:700; font-size:14px; margin-top:4px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.stat-cell{ background:#fff; border-radius:16px; padding:14px 8px; text-align:center; box-shadow:0 12px 26px -18px rgba(0,0,0,.35); }
.stat-cell .n{ font-size:24px; font-weight:800; }
.stat-cell .t{ font-size:11px; color:var(--ink-soft); font-weight:700; margin-top:3px; }
.stat-block{ background:#fff; border-radius:18px; padding:16px 18px; box-shadow:0 12px 26px -18px rgba(0,0,0,.35); margin-bottom:12px; }
.stat-block h3{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#a2a8b2; margin:0 0 12px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-row .k{ width:44px; font-weight:700; font-size:13px; flex:none; }
.bar-row .k.wide{ width:82px; }
.bar-track{ flex:1; height:8px; background:#eef0f3; border-radius:5px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:5px; transition:width .4s; }
.bar-row .v{ width:26px; text-align:right; font-weight:700; font-size:13px; color:var(--ink-soft); flex:none; }
.chips-inline{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-tag{ background:#f1f2f4; border-radius:20px; padding:7px 13px; font-weight:700; font-size:13px; color:var(--ink); }
.avg-stars{ color:#f5c518; font-size:22px; letter-spacing:2px; display:flex; align-items:center; }

/* perfil */
.prof-card{ background:#fff; border-radius:20px; padding:24px; text-align:center; box-shadow:0 14px 32px -18px rgba(0,0,0,.35); margin-bottom:12px; }
.avatar{ width:78px; height:78px; border-radius:50%; margin:0 auto 12px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; }
.prof-name{ font-size:22px; font-weight:800; letter-spacing:-.3px; }
.prof-sub{ color:var(--ink-soft); font-size:14px; margin-top:3px; }
.prof-edit{ margin-top:14px; background:#f1f2f4; border:none; border-radius:12px; padding:10px 18px; font-weight:700; font-size:14px; cursor:pointer; color:var(--ink); }

/* ============ BUSCA ============ */
.searchview{
  position:absolute; inset:0; z-index:55; background:#fff;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.searchview.show{ transform:translateY(0); }
.sv-head{
  display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top, 0px) + 52px) 16px 12px;
  border-bottom:1px solid var(--line);
}
.sv-head .back{ width:40px; height:40px; border-radius:50%; background:#f1f2f4; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex:none; }
.sv-inputwrap{ flex:1; display:flex; align-items:center; gap:8px; background:#f1f2f4; border-radius:12px; padding:0 12px; }
.sv-inputwrap > svg{ color:var(--ink-soft); flex:none; }
.sv-input{ flex:1; min-width:0; border:none; background:none; padding:12px 2px; font:inherit; font-size:16px; color:var(--ink); }
.sv-input:focus{ outline:none; }
.sv-clear{ border:none; background:none; font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0 4px; }
.sv-results{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 10px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.sv-item{ display:flex; gap:12px; align-items:center; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:10px; border-radius:12px; }
.sv-item:active{ background:#f4f5f7; }
.sv-thumb{ width:42px; height:62px; border-radius:6px; overflow:hidden; flex:none; box-shadow:0 5px 12px -5px rgba(0,0,0,.45); display:flex; }
.sv-thumb img{ width:100%; height:100%; object-fit:cover; }
.sv-thumb.art{ align-items:flex-start; padding:5px; }
.sv-thumb .st{ font-size:8px; font-weight:800; line-height:1.05; }
.sv-meta{ min-width:0; }
.sv-t{ font-weight:700; font-size:15px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-a{ font-size:13px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-empty{ text-align:center; color:var(--ink-soft); font-family:'Spectral'; font-style:italic; padding:36px 0; }

/* ============================ CADASTRO ============================ */
.add{ position:absolute; inset:0; background:#fbfbfc; display:flex; flex-direction:column; }
.add-head{
  padding:60px 20px 14px; display:flex; align-items:center; gap:14px;
  border-bottom:1px solid var(--line); background:#fff;
}
.add-head .back{ width:40px; height:40px; border-radius:50%; background:#f1f2f4; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.add-head h1{ font-size:20px; font-weight:800; margin:0; letter-spacing:-.3px; }
.add-head .save{ margin-left:auto; background:var(--accent); color:#fff; border:none; font-weight:700; font-size:15px; padding:9px 18px; border-radius:12px; cursor:pointer; }
.add-body{ flex:1; overflow-y:auto; padding:20px 20px 40px; }

/* busca Google Books */
.searchrow{ display:flex; gap:8px; }
.searchrow .input{ flex:1; }
.searchbtn{
  width:50px; flex:none; border:none; border-radius:12px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.searchbtn:active{ background:var(--accent-press); }
.gb-results{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.gb-item{
  display:flex; gap:12px; align-items:center; padding:8px; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer; text-align:left; width:100%;
}
.gb-item:active{ background:#f4f5f7; }
.gb-item img{ width:40px; height:58px; object-fit:cover; border-radius:5px; flex:none; background:#eceef1; }
.gb-item .gb-meta{ min-width:0; }
.gb-item .gb-t{ font-weight:700; font-size:14px; line-height:1.2; }
.gb-item .gb-a{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.gb-hint{ font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.4; }
.gb-loading{ font-size:13px; color:var(--ink-soft); padding:8px 0; }

/* upload de capa */
.cover-drop{ display:flex; gap:16px; align-items:center; margin:20px 0 22px; }
.cover-slot{
  width:104px; height:156px; border-radius:12px; flex:none;
  border:2px dashed #cfd2d8; background:#f4f5f7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#9aa0aa; cursor:pointer; overflow:hidden; text-align:center; font-size:11px; font-weight:700;
  position:relative;
}
.cover-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-slot input{ display:none; }
.cover-hint{ font-size:13px; color:var(--ink-soft); line-height:1.4; }
.cover-hint b{ color:var(--ink); display:block; font-size:15px; margin-bottom:3px; }

.field{ margin-bottom:18px; }
.field > label{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; letter-spacing:.2px; }
.input, .textarea{
  width:100%; border:1.5px solid var(--line); background:#fff; border-radius:12px;
  padding:13px 14px; font:inherit; font-size:16px; color:var(--ink); transition:border-color .15s;
}
.input:focus, .textarea:focus{ outline:none; border-color:var(--accent); }
.textarea{ resize:none; min-height:90px; line-height:1.5; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* segmentado */
.seg{ display:flex; gap:6px; background:#f1f2f4; padding:4px; border-radius:14px; }
.seg button{
  flex:1; border:none; background:none; padding:10px 6px; border-radius:10px; cursor:pointer;
  font:inherit; font-weight:700; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, color .15s, box-shadow .15s;
}
.seg button.on{ background:#fff; color:var(--ink); box-shadow:0 2px 6px -2px rgba(0,0,0,.2); }
.seg.status button.on{ color:#fff; }
.seg.status button[data-v="lendo"].on{ background:#3b82f6; }
.seg.status button[data-v="lido"].on{ background:#22a06b; }
.seg.status button[data-v="quero_ler"].on{ background:#a855f7; }

/* estrelas do form */
.rate{ display:flex; gap:6px; font-size:32px; color:#d7dae0; }
.rate span{ cursor:pointer; transition:transform .1s; }
.rate span.on{ color:#f5c518; }
.rate span:active{ transform:scale(1.2); }

/* toast */
.toast{
  position:absolute; bottom:96px; left:50%; transform:translate(-50%,20px);
  background:#14161c; color:#fff; padding:12px 20px; border-radius:14px;
  font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:.35s; z-index:70;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:80%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.hidden{ display:none !important; }
[hidden]{ display:none !important; }