/* Layout: a bookshop window on a rainy London winter night — a midnight header band (rain, skyline, moonlit windows),
   then icy-white cards on a frost-grey ground. Palette: "Inverno Frio" (cool winter) — icy neutrals plus
   cool jewel tones (cranberry, emerald, sapphire, amethyst, slate, plum); nothing warm. */
:root {
  --bg: #e8ecf3;
  --surface: #fbfcfe;
  --surface-2: #eef1f7;
  --ink: #121826;
  --ink-2: #444d63;
  --muted: #727b90;
  --line: #dce1eb;
  --accent: #a1194f;
  --accent-ink: #ffffff;
  --accent-soft: #f7e3ec;
  --green: #0b6e5b;
  --green-soft: #ddf0ea;
  --navy: #1f4096;
  --navy-soft: #e1e8f7;
  --amethyst: #5c3a9e;
  --amethyst-soft: #ece6f7;
  --slate: #46536e;
  --slate-soft: #e5e9f1;
  --plum: #7a2a6e;
  --star: #a1194f;
  --grid: #e3e7ef;
  --axis: #c5ccd9;
  --danger: #c0263a;
  --night: #111a33;
  --night-2: #2a3d6b;
  --night-ink: #f2f5fb;
  --night-ink-2: #b5c2db;
  --lamp: #dfe8fa;
  /* older community covers saved these names */
  --mustard: var(--amethyst);
  --coffee: var(--slate);
  --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 6px 18px rgba(20, 30, 60, .07);
  --shadow-lg: 0 18px 50px rgba(10, 16, 36, .3);
  /* titles / everyday text / short handwritten comments / big numbers */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-hand: "Caveat", "Segoe Print", cursive;
  --f-num: "Young Serif", Georgia, "Times New Roman", serif;
  --f-body: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1120; --surface: #171c2c; --surface-2: #1f2538; --ink: #eef1f8; --ink-2: #b8c0d4; --muted: #8a93a8;
    --line: #2c3347; --accent: #f0789f; --accent-ink: #1a0712; --accent-soft: #3a1b2b;
    --green: #4fcfae; --green-soft: #12302b; --navy: #8fb0ff; --navy-soft: #1a2645; --amethyst: #b49cff; --amethyst-soft: #2a2247;
    --slate: #a9b4cc; --slate-soft: #242b3d; --plum: #d79ad0; --star: #f0789f; --grid: #252b3d; --axis: #384056; --danger: #ff7a8a;
    --night: #070b18; --night-2: #16213f; --night-ink: #eef1f8; --night-ink-2: #9fadc8; --lamp: #dfe8fa;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25); --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1120; --surface: #171c2c; --surface-2: #1f2538; --ink: #eef1f8; --ink-2: #b8c0d4; --muted: #8a93a8;
  --line: #2c3347; --accent: #f0789f; --accent-ink: #1a0712; --accent-soft: #3a1b2b;
  --green: #4fcfae; --green-soft: #12302b; --navy: #8fb0ff; --navy-soft: #1a2645; --amethyst: #b49cff; --amethyst-soft: #2a2247;
  --slate: #a9b4cc; --slate-soft: #242b3d; --plum: #d79ad0; --star: #f0789f; --grid: #252b3d; --axis: #384056; --danger: #ff7a8a;
  --night: #070b18; --night-2: #16213f; --night-ink: #eef1f8; --night-ink-2: #9fadc8; --lamp: #dfe8fa;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25); --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 72px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; text-wrap: balance; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header: the shop window at night, seen from inside ----------
   Street lights out of focus behind wet glass, rain falling outside, drops sliding down the pane,
   and the shop cat on the window seat next to a steaming cup. All drawn in code: nothing to download. */
.hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; color: var(--night-ink);
  background:
    radial-gradient(ellipse 60% 55% at 8% 100%, rgba(224, 69, 127, .45), transparent 70%),
    radial-gradient(ellipse 45% 50% at 62% 92%, rgba(47, 201, 160, .22), transparent 70%),
    radial-gradient(ellipse 50% 70% at 92% 10%, rgba(180, 156, 255, .35), transparent 70%),
    linear-gradient(170deg, #141f63 0%, #2438a6 52%, #4a35a8 100%);
  min-height: 290px; padding: 26px 24px; display: flex; flex-direction: column; }
.hero-out, .hero-glass, .hero-floor, .hero-frame, .hero-scene { position: absolute; pointer-events: none; }
.hero-out { inset: 0; z-index: -3; }
.hero-bokeh { position: absolute; inset: 0; filter: blur(2.5px);
  background:
    radial-gradient(circle at 10% 72%, rgba(255, 120, 170, .75) 0 9px, rgba(255, 120, 170, .18) 16px, transparent 30px),
    radial-gradient(circle at 21% 80%, rgba(223, 232, 250, .70) 0 6px, transparent 20px),
    radial-gradient(circle at 31% 66%, rgba(143, 176, 255, .55) 0 13px, transparent 34px),
    radial-gradient(circle at 42% 82%, rgba(255, 120, 170, .55) 0 7px, transparent 22px),
    radial-gradient(circle at 50% 70%, rgba(79, 226, 186, .60) 0 8px, transparent 24px),
    radial-gradient(circle at 58% 80%, rgba(223, 232, 250, .65) 0 5px, transparent 16px),
    radial-gradient(circle at 67% 66%, rgba(196, 170, 255, .60) 0 11px, transparent 30px),
    radial-gradient(circle at 77% 78%, rgba(79, 226, 186, .45) 0 7px, transparent 22px),
    radial-gradient(circle at 5% 40%, rgba(223, 232, 250, .18) 0 18px, transparent 44px),
    radial-gradient(circle at 40% 45%, rgba(196, 170, 255, .18) 0 22px, transparent 56px); }
.hero-rain { position: absolute; inset: -40px; opacity: .55;
  background-image: repeating-linear-gradient(103deg, transparent 0 22px, rgba(200, 215, 235, .12) 22px 23px, transparent 23px 47px),
                    repeating-linear-gradient(100deg, transparent 0 37px, rgba(200, 215, 235, .08) 37px 38px, transparent 38px 61px);
  animation: rain 2.6s linear infinite; }
@keyframes rain { from { transform: translate(0, 0); } to { transform: translate(-12px, 46px); } }
.hero-city { position: absolute; left: 0; right: 0; bottom: 18%; width: 100%; height: 70px; opacity: .55; filter: blur(1.2px); }
.hero-glass { inset: 0; z-index: -2; opacity: .8;
  background-image: radial-gradient(circle at 30% 30%, rgba(235, 242, 255, .55) 0 .8px, rgba(235, 242, 255, .12) 1.4px, transparent 2px),
                    radial-gradient(circle at 70% 60%, rgba(235, 242, 255, .4) 0 .6px, rgba(235, 242, 255, .1) 1.2px, transparent 1.8px);
  background-size: 53px 61px, 37px 43px; background-position: 0 0, 17px 9px; }
.hero-glass i { position: absolute; width: 2px; border-radius: 2px; top: -8%;
  background: linear-gradient(180deg, rgba(235, 242, 255, 0), rgba(235, 242, 255, .55) 80%, rgba(255, 255, 255, .9));
  animation: slide var(--d) cubic-bezier(.55, 0, .8, .6) var(--w) infinite; opacity: 0; }
@keyframes slide { 0%, 55% { transform: translateY(0); opacity: 0; } 58% { opacity: 1; } 100% { transform: translateY(300px); opacity: .9; } }
.hero-floor { left: 0; right: 0; bottom: 0; height: 24%; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 46, 0) 0%, rgba(10, 14, 46, .88) 38%, #0a0e2e 100%); }
.hero-frame { inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-scene { right: 0; bottom: 0; height: 250px; width: auto; z-index: -1; }
.hero-scene .steam path { animation: steam 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.hero-scene .steam path:nth-child(2) { animation-delay: 1.4s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(3px) scaleX(.9); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateY(-7px) scaleX(1.15); } }
.hero-scene .lamp-glow { animation: flicker 7s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .95; } 50% { opacity: .8; } }
.hero-row { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; }
.brand { min-width: 0; max-width: 30rem; }
.brand h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.05; color: var(--night-ink); text-shadow: 0 2px 18px rgba(7, 12, 26, .6); }
.brand p { margin: 4px 0 0; color: var(--night-ink-2); font-family: var(--f-hand); font-weight: 600; font-size: 1.3rem; line-height: 1.2; max-width: 26rem; text-shadow: 0 1px 10px rgba(7, 12, 26, .8); }.hero .btn.primary { background: var(--lamp); color: #111a33; border-color: var(--lamp); box-shadow: 0 0 0 4px rgba(220, 230, 250, .16); }

.navrow { display: flex; justify-content: center; margin-top: -24px; position: relative; z-index: 2; }
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 700; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.tab svg { width: 17px; height: 17px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tab { position: relative; }
.tab-badge { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.tab[aria-selected="true"] .tab-badge { background: var(--accent-ink); color: var(--accent); }
/* computer: full names ("Clubes do livro", "Comunidades"); phone: short names, six tabs side by side */
@media (min-width: 561px) { .tl[data-full] { font-size: 0; } .tl[data-full]::after { content: attr(data-full); font-size: 1rem; } }
@media (max-width: 560px) {
  .navrow { margin-top: -20px; }
  .tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; border-radius: 16px; padding: 4px; gap: 2px; overflow: visible; }
  .tab { flex-direction: column; justify-content: center; gap: 2px; padding: 7px 1px; border-radius: 12px; font-size: .66rem; min-width: 0; }
  .tab svg { display: block; width: 19px; height: 19px; }
  .tab .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tab-badge { top: 2px; right: 2px; }
}

.btn { border: 1px solid var(--line); background: var(--surface); padding: 9px 16px; border-radius: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s ease, filter .12s ease; }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger.armed { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.small { padding: 6px 11px; font-size: .88rem; border-radius: 10px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 700; font-size: .86rem; }

.banner { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--amethyst-soft); color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .95rem; }
.banner b { font-weight: 800; }

section.view { padding-top: 26px; }
.eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.tile .ic { grid-row: span 3; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; align-self: start; }
.tile .ic svg { width: 22px; height: 22px; }
.tile .v { font-family: var(--f-num); font-size: 1.9rem; line-height: 1.05; }
.tile .s { color: var(--ink-2); font-size: .86rem; }
.t-red .ic { background: var(--accent-soft); color: var(--accent); }
.t-green .ic { background: var(--green-soft); color: var(--green); }
.t-navy .ic { background: var(--navy-soft); color: var(--navy); }
.t-amethyst .ic { background: var(--amethyst-soft); color: var(--amethyst); }
.t-slate .ic { background: var(--slate-soft); color: var(--slate); }

/* charts */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.card.wide { margin-top: 16px; }
.card-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 12px; margin-bottom: 14px; }
.card-h h2 { font-size: 1.25rem; }
.card-h p { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; max-width: 60ch; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 2px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; flex-wrap: wrap; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 11px; font-size: .86rem; font-weight: 700; color: var(--ink-2); border-radius: 8px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chart-box { position: relative; width: 100%; }
.empty-chart { color: var(--muted); font-size: .95rem; padding: 24px 0; text-align: center; }

/* reading now */
.now-list { display: grid; gap: 14px; }
.now { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; text-align: left; border: 0; background: transparent; padding: 0; }
.now .spine { grid-row: span 4; width: 34px; height: 50px; font-size: .95rem; }
.now .t { font-weight: 800; line-height: 1.25; }
.now .a { color: var(--ink-2); font-size: .88rem; }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.now .p { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* shelf */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.book { text-align: left; display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: start; gap: 14px; background: var(--surface); border: 0; border-radius: 18px; padding: 16px; width: 100%; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.book:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,30,60,.08), 0 12px 28px rgba(20,30,60,.12); }
.spine { --c: var(--accent); width: 48px; height: 70px; border-radius: 3px 7px 7px 3px; background: var(--c); color: #f7f9fd; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.3rem; position: relative; box-shadow: inset -4px 0 0 rgba(0,0,0,.14); flex: none; }
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 4px; height: 2px; background: rgba(235, 241, 252, .6); }
.spine::before { top: 9px; }
.spine::after { bottom: 9px; }
.spine.quero { background: transparent; color: var(--c); border: 2px dashed var(--c); box-shadow: none; }
.spine.quero::before, .spine.quero::after { display: none; }
:root[data-theme="dark"] .spine:not(.quero) { color: #0d1120; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spine:not(.quero) { color: #0d1120; } }
.book .spine { width: 60px; height: 90px; font-size: 1.5rem; }
/* real cover photo, same footprint as the cloth spine it replaces */
.cover-img { display: block; width: 48px; height: 70px; object-fit: cover; border-radius: 2px 6px 6px 2px; background: var(--surface-2); box-shadow: inset -4px 0 0 rgba(0,0,0,.14), 0 1px 3px rgba(10,16,36,.25), 0 4px 10px rgba(10,16,36,.12); flex: none; }
.book .cover-img { width: 60px; height: 90px; }
.now .cover-img { grid-row: span 4; width: 34px; height: 50px; }
.clubbook .cover-img { grid-row: span 3; width: 40px; height: 58px; }
.cover-edit { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border: 1px dashed var(--axis); border-radius: 14px; background: var(--bg); transition: border-color .15s ease, background .15s ease; }
.cover-edit.drag { border-color: var(--accent); background: var(--accent-soft); }
.cover-edit .cover-img, .cover-edit .spine { width: 104px; height: 156px; font-size: 2.4rem; }
.cover-edit .ce-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cover-edit .ce-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cover-edit a.btn { text-decoration: none; color: inherit; }
.cover-edit ol { margin: 0; padding-left: 1.2em; font-size: .86rem; color: var(--ink-2); display: grid; gap: 2px; }
.cover-edit kbd { font-family: var(--f-body); font-size: .78rem; font-weight: 800; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
@media (max-width: 420px) { .cover-edit { grid-template-columns: 80px minmax(0, 1fr); } .cover-edit .cover-img, .cover-edit .spine { width: 80px; height: 120px; } }
.book .t { font-weight: 800; font-size: 1.04rem; line-height: 1.25; }
.book .a { color: var(--ink-2); font-size: .9rem; }
.book .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.book .rev { margin: 8px 0 0; font-family: var(--f-hand); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip { font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.chip.st-lendo { background: var(--green-soft); color: var(--green); }
.chip.st-lido { background: var(--navy-soft); color: var(--navy); }
.chip.st-quero { background: var(--amethyst-soft); color: var(--amethyst); }
.stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; }
.stars .off { color: var(--axis); }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-2); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.empty svg { margin-bottom: 8px; }
.empty h3 { font-size: 1.4rem; color: var(--ink); margin-bottom: 6px; }
.empty p { margin: 0 auto 18px; max-width: 46ch; }

/* recs */
.rec-controls { display: grid; gap: 14px; }
.rec-controls textarea { width: 100%; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); resize: vertical; }
.rec-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.profile {
  margin: 18px 0 0; max-width: 78ch; padding: 30px 22px 18px; border-radius: 6px; color: var(--ink); box-shadow: var(--shadow);
  background: linear-gradient(var(--accent), var(--accent)) 0 22px / 100% 2px no-repeat, repeating-linear-gradient(var(--surface) 0 25px, var(--navy-soft) 25px 26px);
  line-height: 26px;
}
.profile .eyebrow { display: block; margin-top: -26px; margin-bottom: 4px; line-height: 22px; color: var(--accent); }
.recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 14px; margin-top: 16px; }
.rec { background: var(--surface); border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; align-content: start; box-shadow: var(--shadow); }
.rec > .spine { width: 40px; height: 60px; font-size: 1.1rem; }
.rec .body { display: grid; gap: 8px; min-width: 0; }
.rec .t { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.rec .a { color: var(--ink-2); font-size: .92rem; }
.rec .why { font-size: .93rem; margin: 0; }
.rec .like { font-size: .84rem; color: var(--muted); margin: 0; font-style: italic; }
.pill { justify-self: start; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.pill.novo { background: var(--accent-soft); color: var(--accent); }
.pill.clube { background: var(--green-soft); color: var(--green); }
.rec .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.rec .acts a { color: var(--accent); font-weight: 700; font-size: .88rem; align-self: center; margin-left: auto; }
.status-line { color: var(--ink-2); font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp .8s linear infinite; flex: none; }
@keyframes sp { to { transform: rotate(360deg); } }
.note { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------- communities ---------- */
.comm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 880px) { .comm-layout { grid-template-columns: minmax(0, 1fr); } }
.comms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.comm { text-align: left; border: 0; padding: 0; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease; width: 100%; }
.comm:hover { transform: translateY(-2px); }
.comm .cover { --c: var(--accent); height: 64px; background: var(--c); position: relative; overflow: hidden; }
.comm .cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.13) 18px 20px, rgba(0,0,0,.08) 20px 22px, rgba(255,255,255,0) 22px 34px); }
.comm .cover .glyph { position: absolute; right: 14px; bottom: -12px; width: 52px; height: 52px; color: rgba(255,255,255,.55); }
.comm .cb { padding: 14px 16px 16px; display: grid; gap: 6px; }
.comm .nm { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.comm .ds { color: var(--ink-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.comm .mt { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); }
.side { display: grid; gap: 16px; }
.people { display: grid; gap: 10px; }
.person { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; align-items: center; }
.person .pn { font-weight: 800; font-size: .93rem; line-height: 1.2; }
.person .ps { font-size: .8rem; color: var(--muted); }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); overflow: hidden; display: inline-grid; place-items: center; flex: none; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.sm { width: 26px; height: 26px; }
.av.lg { width: 40px; height: 40px; }
.avs { display: flex; }
.avs .av { border: 2px solid var(--surface); margin-left: -8px; }
.avs .av:first-child { margin-left: 0; }
.toggle { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.toggle input { margin-top: 4px; accent-color: var(--accent); }

.back { margin-bottom: 14px; }
.chead { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.chead .cover { --c: var(--accent); height: 86px; background: var(--c); position: relative; }
.chead .cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.13) 18px 20px, rgba(0,0,0,.08) 20px 22px, rgba(255,255,255,0) 22px 34px); }
.chead .inner { padding: 16px 20px 18px; display: grid; gap: 10px; }
.chead h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; }
.chead .ds { color: var(--ink-2); margin: 0; max-width: 70ch; white-space: pre-wrap; }
.chead .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.clubbook { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px; background: var(--surface-2); border-radius: 14px; max-width: 520px; }
.clubbook .spine { width: 40px; height: 58px; font-size: 1.05rem; grid-row: span 3; }
.subnav { margin: 18px 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.online { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.online .live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.composer { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; }
.composer input[type="text"], .composer textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.composer textarea { min-height: 80px; resize: vertical; }
.composer .ft { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sp-in { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); font-weight: 700; }
.sp-in input[type="number"] { width: 84px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.sp-in input[type="checkbox"] { accent-color: var(--accent); }
.posts { display: grid; gap: 12px; margin-top: 14px; }
.post { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
.post .hd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.post .who { font-weight: 800; }
.post .when { font-size: .8rem; color: var(--muted); }
.post .pt { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; margin-top: 2px; }
.post .tx { margin: 2px 0 0; overflow-wrap: anywhere; }
.post .ft { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.post.clickable { cursor: pointer; }
.post.clickable:hover { box-shadow: 0 2px 4px rgba(20,30,60,.08), 0 12px 28px rgba(20,30,60,.12); }
.post.reply { box-shadow: none; background: transparent; border-bottom: 1px dashed var(--line); border-radius: 0; padding: 12px 4px; }
.pgtag { font-size: .74rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green); }
.spoiler { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--bg) 10px 20px); color: var(--ink-2); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.spoiler b { color: var(--ink); }

.chat { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; height: min(68vh, 640px); min-height: 380px; }
.chat-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; max-width: min(78%, 560px); }
.msg .av { width: 30px; height: 30px; align-self: end; }
.msg .bub { background: var(--surface-2); padding: 8px 12px; border-radius: 14px 14px 14px 4px; overflow-wrap: anywhere; }
.msg .mh { font-size: .76rem; color: var(--muted); display: flex; gap: 8px; margin-bottom: 1px; }
.msg .mh b { color: var(--ink-2); }
.msg.me { margin-left: auto; grid-template-columns: minmax(0, 1fr); }
.msg.me .av { display: none; }
.msg.me .bub { background: var(--accent-soft); border-radius: 14px 14px 4px 14px; }
.msg .spoiler { margin: 4px 0 0; padding: 8px 10px; }
.msg .del { border: 0; background: none; color: var(--muted); font-size: .74rem; padding: 0; }
.daysep { align-self: center; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.chat-in { border-top: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 8px; }
.chat-in .r { display: flex; gap: 8px; align-items: flex-end; }
.chat-in textarea { flex: 1; min-width: 0; resize: none; height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.typing { font-size: .8rem; color: var(--muted); min-height: 1.2em; }

.prog-list { display: grid; gap: 14px; }
.prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.prow .av { grid-row: span 2; }
.prow .n { font-weight: 800; }
.prow .pp { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.prow .bar { grid-column: 2 / 4; margin-top: 0; }
.prow.me .n::after { content: " (você)"; font-weight: 600; color: var(--muted); }
.picker { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.picker label { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .92rem; padding: 4px; border-radius: 8px; }
.picker label:hover { background: var(--surface-2); }
.picker input { accent-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: block; width: 32px; height: 32px; border-radius: 8px; background: var(--c); border: 3px solid transparent; }
.swatches input:checked + span { border-color: var(--ink); }
.swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .92rem; }
.radios label b { display: block; }
.radios input { accent-color: var(--accent); margin-top: 4px; }
.fg .radios input, .fg input[type="checkbox"], .fg input[type="radio"] { width: auto; padding: 0; flex: none; min-height: 0; }

/* sheet */
.scrim { position: fixed; inset: 0; background: rgba(12, 16, 24, .5); z-index: 20; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); background: var(--surface); z-index: 21; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.sheet-h h2 { font-size: 1.5rem; }
.sheet-b { overflow-y: auto; padding: 18px 22px; display: grid; gap: 14px; flex: 1; align-content: start; }
.sheet-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.sheet-f .sp { flex: 1; }
.fg { display: grid; gap: 5px; min-width: 0; }
.fg label, .fg .lbl { font-size: .84rem; font-weight: 800; color: var(--ink-2); }
.fg input, .fg textarea, .fg select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.fg input:focus, .fg textarea:focus, .composer input:focus, .composer textarea:focus, .chat-in textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.fg textarea { min-height: 130px; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.star-input { display: flex; gap: 2px; align-items: center; }
.star-input button { border: 0; background: transparent; font-size: 2rem; line-height: 1; padding: 0 2px; color: var(--axis); transition: transform .1s ease; }
.star-input button:hover { transform: scale(1.12); }
.star-input button.on { color: var(--star); }
/* half star: left half filled */
.star-input button.half, .stars .half {
  background: linear-gradient(90deg, var(--star) 50%, var(--axis) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.star-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.star-input span { margin-left: 10px; font-size: .9rem; color: var(--ink-2); font-weight: 700; }
.ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; background: var(--navy-soft); border-radius: 12px; font-size: .9rem; }
.err { color: var(--danger); font-size: .88rem; font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--night); color: var(--night-ink); padding: 11px 18px; border-radius: 12px; z-index: 40; font-weight: 700; max-width: calc(100% - 32px); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .spin, .hero-rain, .hero-glass i, .hero-scene .steam path, .hero-scene .lamp-glow { animation: none; } .book, .btn, .comm { transition: none; } }

/* ---------- standalone site additions ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* initials avatar (no photo service outside Claude) */
.av { color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .02em; }
.av.sm { font-size: .66rem; }
.av.lg { font-size: .9rem; }

/* header account chip */
.hero-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(220, 230, 250, .25); background: rgba(220, 230, 250, .08); color: var(--night-ink); font-weight: 700; font-size: .9rem; }
.me-chip:hover { background: rgba(220, 230, 250, .16); }

/* sign-in screen */
.login { max-width: 460px; margin: 28px auto 0; display: grid; gap: 14px; }
.login h2 { font-size: 1.6rem; }
.login p { margin: 0; color: var(--ink-2); }
.login form { display: grid; gap: 10px; }
.login input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.login input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.login .sent { padding: 14px 16px; border-radius: 14px; background: var(--green-soft); color: var(--ink); }
.setup { max-width: 640px; margin: 28px auto 0; }
.setup code { font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }

/* automatic cover search: candidate strip */
.cover-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cover-opts:empty { display: none; }
.cover-opt { padding: 0; border: 2px solid transparent; border-radius: 4px 7px 7px 4px; background: var(--surface-2); width: 46px; height: 68px; overflow: hidden; flex: none; transition: transform .12s ease; }
.cover-opt:hover { transform: translateY(-2px); }
.cover-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cover-manual summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--accent); }
.cover-manual[open] summary { margin-bottom: 6px; }
.cover-manual a { color: var(--accent); font-weight: 700; }

/* type-ahead suggestions under title / author */
.ac-wrap { position: relative; }
.ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; padding: 4px; min-width: min(360px, 90vw); }
.ac-it { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 9px; }
.ac-it.has-img { grid-template-columns: 34px minmax(0, 1fr); }
.ac-it:hover, .ac-it[aria-selected="true"] { background: var(--surface-2); }
.ac-it img, .ac-noimg { width: 34px; height: 50px; object-fit: cover; border-radius: 2px 5px 5px 2px; background: var(--surface-2); display: block; }
.ac-t { display: block; font-weight: 800; line-height: 1.25; }
.ac-m { display: block; font-size: .8rem; color: var(--muted); }

/* re-read */
.reread { color: var(--amethyst); display: inline-flex; vertical-align: -2px; }
.chip.st-reread { background: var(--amethyst-soft); color: var(--amethyst); display: inline-flex; align-items: center; gap: 4px; }
.chip.st-reread .reread-ic { width: 12px; height: 12px; }
.reread-toggle b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* literary avatar presets */
.av-preset { color: #eef1f8; }
.av-preset svg { width: 100%; height: 100%; display: block; }
.av-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.av-pick { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease; }
.av-pick:hover { transform: translateY(-2px); }
.av-pick .av { width: 38px; height: 38px; }
.av-pick[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.pf-bio { margin: 4px 0 2px; color: var(--ink-2); font-style: italic; font-size: .95rem; line-height: 1.4; }
.ps-bio { font-style: italic; color: var(--ink-2) !important; display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* profile photo */
.av.xl { width: 72px; height: 72px; font-size: 1.5rem; }
.acc-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.me-chip .av img, .av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- pull to refresh (installed app) ---------- */
.ptr { position: fixed; z-index: 50; left: 50%; top: calc(env(safe-area-inset-top, 0px) - 44px);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); box-shadow: var(--shadow-lg); opacity: 0;
  transform: translate(-50%, 0); transition: transform .25s ease, opacity .25s ease, color .15s ease; pointer-events: none; }
.ptr.pulling { transition: color .15s ease; }
.ptr.ready, .ptr.loading { color: var(--accent); opacity: 1; }
.ptr.loading svg { animation: sp .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ptr.loading svg { animation: none; } }

/* ---------- legal pages (privacidade.html, termos.html) ---------- */
.doc-wrap { max-width: 760px; }
.doc-back { display: inline-block; margin: 8px 0 14px; color: var(--accent); font-weight: 700; text-decoration: none; }
.doc { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 40px); line-height: 1.7; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 4px 0 6px; line-height: 1.15; }
.doc h2 { font-size: 1.25rem; margin: 28px 0 8px; line-height: 1.3; }
.doc p, .doc li { color: var(--ink-2); max-width: 68ch; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; }
.doc a { color: var(--accent); font-weight: 700; }
.doc-date { color: var(--muted); font-size: .9rem; margin-top: 0; }
.doc-links { margin-top: 32px; padding-top: 16px; border-top: 1px dashed var(--line); }
.legal-links { text-align: center; font-size: .82rem; color: var(--muted); margin: 26px 0 0; }
.legal-links a { color: var(--muted); }
.danger-zone { border: 1px solid var(--danger); border-radius: 14px; padding: 14px; display: grid; gap: 8px; }
.danger-zone h3 { font-size: 1.05rem; color: var(--danger); }
.inv-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.inv-log li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; line-height: 1.5; }
.inv-log li:last-child { border-bottom: 0; }
.danger-zone input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }

/* ---------- people and reading profiles ---------- */
.linkname { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: inherit; cursor: pointer; text-align: left; }
.linkname:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.av-btn { border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; display: inline-flex; line-height: 0; }
.av-btn:hover .av { box-shadow: 0 0 0 2px var(--accent-soft); }
.avs .av-btn { margin-left: -8px; }
.avs .av-btn:first-child { margin-left: 0; }
.avs .av-btn .av { margin-left: 0; }
.msg .av-btn { align-self: end; }
.people-q { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); margin-bottom: 10px; }
.person-btn { width: 100%; border: 0; background: none; text-align: left; padding: 6px; margin: -6px; border-radius: 10px; cursor: pointer; }
.person-btn:hover { background: var(--surface-2); }
.person-btn .pn, .person-btn .ps { display: block; }
.pill-open { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 99px; background: var(--green-soft); color: var(--green); vertical-align: 1px; }
.priv { color: var(--slate); display: inline-flex; vertical-align: -1px; }
.pf-head { display: flex; gap: 14px; align-items: center; }
.pf-name { font-size: 1.4rem; line-height: 1.15; }
.pf-head .note { display: inline; }
.pf-private { text-align: center; padding: 28px 12px; background: var(--surface-2); border-radius: 14px; color: var(--ink-2); display: grid; gap: 8px; justify-items: center; }
.pf-private svg { width: 26px; height: 26px; color: var(--slate); }
.pf-private p { margin: 0; }
.pf-preview { padding: 8px 12px; background: var(--navy-soft); border-radius: 10px; color: var(--ink-2); }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pf-stats div { background: var(--surface-2); border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; }
.pf-stats b { font-family: var(--f-num); font-weight: 400; font-size: 1.4rem; line-height: 1.1; }
.pf-stats span { font-size: .74rem; color: var(--muted); }
@media (max-width: 480px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-now { margin: 0; font-size: .92rem; color: var(--ink-2); }
.pf-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px 10px; }
.pf-book { border: 0; background: none; padding: 4px; border-radius: 10px; display: grid; justify-items: center; gap: 4px; cursor: pointer; text-align: center; }
.pf-book:hover, .pf-book[aria-pressed="true"] { background: var(--surface-2); }
.pf-book .cover-img, .pf-book .spine { width: 60px; height: 90px; font-size: 1.4rem; }
.pf-bt { font-size: .74rem; line-height: 1.2; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-stars { font-size: .7rem; letter-spacing: 0; }
.pf-detail { background: var(--surface-2); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.pf-dt { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.pf-review { margin: 6px 0 0; font-style: italic; color: var(--ink-2); }
.pf-detail .btn { justify-self: start; margin-top: 6px; }

/* ---------- "Primeiros passos" guide ---------- */
/* poll card on the Painel */
.poll { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--amethyst-soft); display: grid; gap: 10px; }
.poll h2 { font-size: 1.2rem; }
.poll-folded { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; }
.poll-folded .eyebrow { margin-right: 6px; }
.poll-opts { display: grid; gap: 8px; }
.poll-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-width: 0; }
.poll-opt span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.poll-opt:has(input:checked) { border-color: var(--amethyst); background: var(--amethyst-soft); }
.poll-opt input { accent-color: var(--amethyst); width: 18px; height: 18px; flex: none; }
.poll-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.poll-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.poll-res li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.poll-res .bar { grid-column: 1 / -1; margin-top: 0; }
.poll-res .bar i { background: var(--slate); }
.poll-res li.mine .bar i { background: var(--amethyst); }
.poll-l { font-weight: 700; overflow-wrap: anywhere; }
.poll-n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; }
.guide { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--navy-soft); }
.guide-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.guide-title { display: grid; gap: 2px; min-width: 0; }
.guide-sub { color: var(--ink-2); font-size: .92rem; }
.guide-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-bar { margin-top: 10px; height: 6px; }
.guide-bar i { background: var(--navy); }
.guide-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 18px; }
.guide-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px dashed var(--line); }
.guide-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--axis); display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: 2px; }
.guide-list li.done .guide-check { background: var(--green); border-color: var(--green); color: var(--surface); }
.guide-txt { display: grid; gap: 1px; min-width: 0; }
.guide-txt b { font-size: .95rem; }
.guide-txt span { font-size: .84rem; color: var(--muted); }
.guide-list li.done .guide-txt b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--axis); }
.guide-list .linkbtn { white-space: nowrap; margin-top: 2px; }
.guide-done { display: flex; align-items: center; gap: 12px; }
.guide-done p { margin: 0; flex: 1; color: var(--ink-2); }
.guide-star { color: var(--star); display: inline-flex; }
.guide-star svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .guide-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .guide-list .linkbtn { grid-column: 2; justify-self: start; }
}

/* ---------- keep everything still while scrolling on touch screens ---------- */
/* nothing may be wider than the screen: fields shrink (iOS date fields don't by default) */
html, body { overflow-x: hidden; max-width: 100%; }
.wrap { overflow-x: clip; }
.fg input, .fg textarea, .fg select, .composer input, .composer textarea { min-width: 0; max-width: 100%; }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 42px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* the side sheet scrolls only up and down, and the page behind it stays put */
.sheet { overflow-x: hidden; }
.sheet-b { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.sheet-open { overflow: hidden; }
.scrim { touch-action: none; }
.ac-wait { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: .86rem; color: var(--muted); }
.ac-wait .spin { width: 14px; height: 14px; }

/* ---------- phones ---------- */
/* clear the status bar when installed to the home screen (viewport-fit=cover) */
.wrap { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
@media (min-width: 561px) { .ac { min-width: min(360px, 90vw); } }
@media (max-width: 560px) {
  .ac { min-width: 0; }
  /* iOS zooms into any field under 16px */
  input, textarea, select { font-size: 16px !important; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; padding: 20px 18px 150px; border-radius: 18px; }
  .hero-row { justify-content: flex-start; gap: 14px; }
  .hero-scene { height: 165px; right: -10px; }
  .hero-floor { height: 90px; }
  .hero-city { bottom: 25%; }
  .card { padding: 16px; }
  /* bigger tap targets */
  .seg button { padding: 8px 12px; }
  .btn.small { padding: 8px 12px; }
  .sheet-h, .sheet-b, .sheet-f { padding-inline: 16px; }
  .chat { height: min(72vh, 640px); }
  .msg { max-width: 88%; }
  .toolbar > * { flex: 1 1 auto; }
  .book { padding: 14px; gap: 12px; }
}

/* keep our buttons and toasts clear of the host's "Powered by" badge (bottom-right corner) */
.sheet-f { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.wrap { padding-bottom: 120px; }

/* ---------- "Leitores" update: goal, abandoned books, friends, wall, bell, recommendations, clubs ---------- */
.chip.st-abandonado { background: var(--slate-soft); color: var(--slate); }
.chip.st-rec { background: var(--accent-soft); color: var(--accent); }
.rec-toggle { padding: 10px 12px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px; }

/* yearly goal on the Painel */
.goal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.goal-txt { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.goal-h { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; }
.goal-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring > span { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center; line-height: 1.05; text-align: center; }
.ring b { font-family: var(--f-num); font-weight: 400; font-size: 1.35rem; }
.ring small { font-size: .7rem; color: var(--muted); }
.goal-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-pick .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* "Meu ano de leituras" card preview */
.retro-cv { width: min(100%, 300px); height: auto; aspect-ratio: 9 / 16; border-radius: 18px; display: block; margin: 0 auto; box-shadow: var(--shadow); }

/* Leitores tab */
.lt-seg { margin-bottom: 12px; }
.lt-seg .cnt, .bell-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; vertical-align: 1px; }
.invite-card { color: var(--night-ink); border-radius: 18px; padding: 18px; margin-bottom: 14px; display: grid; gap: 8px; box-shadow: var(--shadow);
  background: radial-gradient(ellipse 70% 60% at 0% 100%, rgba(224, 69, 127, .45), transparent 70%), linear-gradient(170deg, #141f63, #2438a6 60%, #4a35a8); }
.invite-card .k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c4b3ff; }
.invite-card h3 { font-size: 1.3rem; }
.invite-card p { margin: 0; color: var(--night-ink-2); max-width: 52ch; }
.btn.lamp { background: var(--lamp); border-color: var(--lamp); color: #111a33; }
.invite-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 14px; }
.lt-sec { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 4px; }
.lt-sec h3 { font-size: 1.05rem; margin-bottom: 4px; }
.plist { display: grid; gap: 8px; }
.prow2 { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.lt-sec .prow2 { box-shadow: none; padding: 8px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.lt-sec .prow2:last-child { border-bottom: 0; }
.prow2 .grow, .av-item .grow { flex: 1; min-width: 0; }
.prow2 .ps-bio { display: block; font-size: .84rem; }
.handle { color: var(--muted); font-size: .82rem; font-weight: 700; }
.pair { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn.ok-btn { background: var(--green-soft); border-color: transparent; color: var(--green); cursor: default; }
.btn.soft-btn { background: var(--surface-2); color: var(--ink-2); }
.feed { display: grid; gap: 12px; }
.fitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 12px; }
.fbody { display: grid; gap: 8px; min-width: 0; }
.ftxt { margin: 0; overflow-wrap: anywhere; }
.fbook { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 8px; min-width: 0; }
.fbook .cover-img, .fbook .spine { width: 38px; height: 56px; flex: none; }
.fbt { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.fquote { margin: 0; font-family: var(--f-hand); font-weight: 600; line-height: 1.25; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 8px; font-size: 1.18rem; overflow-wrap: anywhere; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rec-pill { display: inline-block; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 99px; vertical-align: 1px; }
.pf-meta { display: inline-block; font-size: .8rem; font-weight: 800; color: var(--green); background: var(--green-soft); padding: 2px 9px; border-radius: 99px; margin: 2px 0; }
.pf-acts { margin-top: 6px; }
.at-in { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding-left: 10px; }
.at-in span { color: var(--muted); font-weight: 800; }
.at-in input { border: 0 !important; background: transparent !important; flex: 1; min-width: 0; }

/* the bell, in the header */
.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(220, 230, 250, .25); background: rgba(220, 230, 250, .08); color: var(--night-ink); flex: none; }
.bell:hover { background: rgba(220, 230, 250, .16); }
.bell-n { position: absolute; top: -4px; right: -6px; }
.av-list { display: grid; }
.av-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.av-item:last-child { border-bottom: 0; }
.av-item.new { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); border-radius: 10px; }
.av-item .grow { display: block; overflow-wrap: anywhere; }
.av-item .grow > .note, .av-item .grow > .fquote, .av-item .grow > .frow { display: block; margin-top: 4px; }
.av-item .grow > .frow { display: flex; }

/* recommend a book to friends */
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; color: var(--ink); }
.pchip[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.ind-mail summary { cursor: pointer; font-weight: 800; color: var(--ink-2); font-size: .9rem; }

/* quiet suggestion at the bottom */
.toast.nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.nudge-x { border: 0; background: transparent; color: inherit; font-size: 1rem; padding: 4px 6px; cursor: pointer; }

/* book clubs: schedule, meeting, vote */
.club-extra { display: grid; gap: 12px; margin-bottom: 12px; }
.club-extra:empty { display: none; }
.club-x { display: grid; gap: 8px; }
.club-x h3 { font-size: 1.08rem; }
.club-x .row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.fg .radios label { font-weight: 400; font-size: .92rem; color: var(--ink); }
.fg .radios label b { font-weight: 800; }
.sched { list-style: none; margin: 0; padding: 0; display: grid; }
.sched li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sched li:last-child { border-bottom: 0; }
.sched .grow { flex: 1; min-width: 0; }
.sched .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: inline-grid; place-items: center; font-size: .66rem; color: #fff; flex: none; margin-top: 2px; }
.sched li.done .dot { background: var(--green); border-color: var(--green); }
.sched li.now { font-weight: 800; }
.sched li.now .dot { border-color: var(--amethyst); box-shadow: 0 0 0 3px var(--amethyst-soft); }
.sched .late { color: var(--danger); }
.meet { background: var(--amethyst-soft); color: var(--amethyst); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: .9rem; }
.steps { display: grid; gap: 8px; }
.step-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
@media (max-width: 560px) {
  .step-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .step-row input:first-child { grid-column: 1 / -1; }
  .goal { padding: 12px 14px; }
  .ring { width: 64px; height: 64px; } .ring > span { width: 50px; height: 50px; } .ring b { font-size: 1.15rem; }
  .bell { width: 36px; height: 36px; }
  .prow2 { flex-wrap: wrap; }
}

/* notifications: the one-time question on the Painel, and the switch in Sua conta */
.notif-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--surface); border: 1px solid var(--amethyst-soft); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.acc-notif { display: grid; gap: 8px; }
/* ---------- reading history as a PDF: only exists on paper ---------- */
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body.printing { background: #fff !important; color: #121826 !important; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; font-family: var(--f-body); font-size: 10.5pt; line-height: 1.45; color: #121826; }
  #print-root h1 { font-family: var(--f-display); font-weight: 600; font-size: 22pt; margin: 2pt 0 4pt; }
  #print-root .pr-app { font-size: 8.5pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a1194f; margin: 0; }
  #print-root .pr-sub { margin: 0; color: #444d63; }
  #print-root .pr-head { border-bottom: 1.5pt solid #121826; padding-bottom: 8pt; margin-bottom: 12pt; }
  #print-root .pr-sum { border-collapse: collapse; margin: 0 0 14pt; font-variant-numeric: tabular-nums; }
  #print-root .pr-sum th, #print-root .pr-sum td { border-bottom: .6pt solid #c5ccd9; padding: 4pt 14pt 4pt 0; text-align: left; }
  #print-root .pr-sum th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #444d63; }
  #print-root .pr-sec h3 { font-family: var(--f-display); font-weight: 600; font-size: 15pt; margin: 14pt 0 6pt; break-after: avoid; }
  #print-root .pr-sec h3 span { font-family: var(--f-body); font-size: 9pt; color: #727b90; }
  #print-root .pr-book { display: grid; grid-template-columns: 34pt 1fr; gap: 10pt; padding: 7pt 0; border-bottom: .6pt solid #dce1eb; break-inside: avoid; }
  #print-root .pr-book img, #print-root .pr-spine { width: 34pt; height: 50pt; object-fit: cover; border-radius: 2pt; }
  #print-root .pr-spine { display: grid; place-items: center; background: #46536e; color: #fff; font-family: var(--f-display); font-size: 14pt; }
  #print-root h4 { margin: 0; font-size: 11.5pt; }
  #print-root .pr-meta { margin: 2pt 0 0; font-size: 9pt; color: #444d63; }
  #print-root .pr-stars { margin: 2pt 0 0; color: #b08600; letter-spacing: 1pt; }
  #print-root .pr-n { color: #444d63; letter-spacing: 0; font-size: 9pt; }
  #print-root .pr-rev { margin: 4pt 0 0; font-style: italic; }
  #print-root .pr-notes { margin: 4pt 0 0; font-size: 9.5pt; color: #444d63; }
}
/* invite by link (WhatsApp) */
.inv-wa { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--green-soft); }
.inv-wa > b { font-size: 1rem; }
.inv-link { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.btn.wa { background: #1f9e55; border-color: #1f9e55; color: #fff; text-decoration: none; }
.btn.wa:hover { filter: brightness(1.05); }
/* ---------- shelves by year (Livros → Lidos) ---------- */
:root { --wood: #c9b9a6; --wood-2: #a8957f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wood: #3a3140; --wood-2: #4c4152; } }
:root[data-theme="dark"] { --wood: #3a3140; --wood-2: #4c4152; }
.yshelf { grid-column: 1 / -1; background: var(--surface); border-radius: 18px; padding: 12px 16px 14px; box-shadow: var(--shadow); display: grid; gap: 8px; min-width: 0; }
.yshelf-h { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px; border-radius: 8px; }
.yshelf-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.yshelf-h b { font-family: var(--f-num); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.yshelf-h span { flex: 1; font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.yshelf-h em { font-style: normal; color: var(--muted); font-size: 1.1rem; transition: transform .2s; }
.yshelf.open .yshelf-h em { transform: rotate(90deg); }
.yshelf-books { display: flex; align-items: flex-end; gap: 3px; min-height: 96px; padding: 0 4px; border-bottom: 6px solid var(--wood); box-shadow: 0 2px 0 var(--wood-2); overflow-x: auto; scrollbar-width: none; }
.yspine { border: 0; padding: 0; cursor: pointer; flex: none; border-radius: 3px 3px 1px 1px; position: relative; box-shadow: inset -3px 0 0 rgba(0,0,0,.14); transition: transform .15s; }
.yspine::before { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: rgba(255,255,255,.4); }
.yspine:hover, .yspine:focus-visible { transform: translateY(-4px); outline: none; }
.yshelf-m { display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .04em; color: var(--muted); padding: 0 4px; }
.yshelf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin-top: 6px; }
.yshelf-list .book { box-shadow: none; background: var(--surface-2); }
.yshelf-legend { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--ink-2); }
.yshelf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yshelf-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .yshelf-h em, .yspine { transition: none; } }
/* "Quando terminou?" in the book form */
.when-seg { display: flex; flex-wrap: wrap; }
.yshelf-h { flex-wrap: wrap; row-gap: 2px; }
.yshelf-sem .yshelf-h b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.yshelf-sem .yshelf-h span { order: 3; flex-basis: 100%; }