:root{color-scheme:light;--ink:#23241f;--muted:#85867e;--accent:#427361;--bottom-height:192px}
.personal-note p+p{margin-top:8px}
*{box-sizing:border-box}html{background:#eeede8}body{margin:0;color:var(--ink);font-family:-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Geneva, "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans Cherokee", "Noto Sans Devanagari", "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Osmanya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", arial, Tahoma, verdana, sans-serif;font-size:16px;line-height:1.4}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:3px solid #36836a;outline-offset:4px}button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button img{display:block}button{touch-action:manipulation}.app{max-width:480px;margin:auto;min-height:100dvh;background:#faf9f6 url('assets/pattern.svg');position:relative}.profile{padding:16px 16px 12px;background:#fff;border-radius:0 0 26px 26px;box-shadow:0 2px 3px #39382a08;position:relative}.profile-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-top>div{min-width:0}h1{font-size:22px;letter-spacing:-.5px;margin:0;overflow-wrap:anywhere}h1 span{font-size:20px}.username{margin:0;color:var(--muted);font-size:11px;line-height:1.2;overflow-wrap:anywhere}.avatar{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #f5f4ef}.bio{font-size:13px;line-height:1.4;margin:0;color:#54564e}.demo-label{font-size:10px;color:var(--muted)}#library{padding:20px 0 calc(var(--bottom-height) + 24px)}.shelf{margin:0 0 20px}.shelf-heading{display:flex;justify-content:center;margin:0 16px 12px}.shelf-title{border:1px solid #ebeae3;background:#fff;border-radius:14px;min-height:44px;padding:9px 14px;box-shadow:0 2px 3px #39382a06;max-width:100%;font-size:14px;font-weight:550;line-height:1.3;text-align:center;overflow-wrap:anywhere}.shelf-title .chevron{display:inline-block;margin-left:8px;color:#a3a59c;font-size:17px}.books{display:flex;align-items:flex-end;gap:18px;overflow-x:auto;padding:0 24px 13px;scrollbar-width:none;overscroll-behavior-x:contain}.books::-webkit-scrollbar{display:none}.cover-button{border:0;background:none;padding:0;flex:none;display:block;border-radius:5px;position:relative;min-width:44px;min-height:44px}.cover-button:active{transform:scale(.98)}.cover{display:block;height:var(--book-height);width:auto;border-radius:4px;box-shadow:2px 5px 9px #38322525,0 1px 2px #0003;max-width:none}.system-divider{margin:6px 24px 18px;display:flex;gap:12px;align-items:center;color:#8b8b80;font-size:10px;letter-spacing:1.5px}.system-divider:before,.system-divider:after{content:"";height:1px;background:#deded4;flex:1}.system-hint{text-align:center;font-size:11px;color:var(--muted);margin:-4px 0 10px}.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:5}.pin{border:0;display:flex;align-items:center;gap:10px;margin:0 12px 8px;width:calc(100% - 24px);background:#252823;color:#fff;border-radius:17px;padding:10px;text-align:left;box-shadow:0 4px 18px #0002}.pin>img{width:34px;height:52px;object-fit:contain;flex:none}.pin-copy{display:flex;flex-direction:column;min-width:0;gap:3px}.pin strong{font-size:14px;font-weight:500}.pin-note{font-size:11px;color:#afb3a8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pin>svg{flex:none;margin-left:auto;color:#abb29f;width:20px}.navigation{display:flex;align-items:stretch;background:#fff;border-top:1px solid #ecece5;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.nav-item{border:0;background:none;flex:1;min-height:44px;display:flex;align-items:center;flex-direction:column;gap:2px;padding:2px 0;font-size:10px;color:#74766c}.nav-item svg{width:22px;height:22px}.nav-item.selected{color:var(--accent)}.nav-item.selected svg{fill:currentColor;stroke:none}.nav-item:disabled{color:#aaaDA3}.nav-item small{display:block;font-size:8px;line-height:1.1;margin-top:1px;color:#92958b}.overlay{position:fixed;inset:0;background:#14181169;z-index:20;display:flex;justify-content:center;align-items:flex-end;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.overlay[hidden]{display:none}.surface{width:100%;max-width:456px;background:#fff;border-radius:24px;max-height:calc(100dvh - 36px - env(safe-area-inset-bottom));display:flex;flex-direction:column;box-shadow:0 15px 70px #0002;overflow:hidden;position:relative}.surface:focus{outline:none}.handle{width:32px;height:4px;border-radius:5px;background:#d9dcd4;margin:10px auto 0;flex:none}.surface-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;border-bottom:1px solid #efefe9;flex:none}.surface-header h2{font-size:16px;line-height:1.4;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}.close{border:0;background:transparent;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;flex:none;color:#73776d}.surface-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0}.shelf-surface{height:min(76dvh,680px)}.shelf-demo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px 4px}.demo-action{border:0;border-radius:20px;background:#eff3ed;color:#6c806b;font-size:12px;min-height:44px;padding:8px 12px}.demo-caption{font-size:10px;color:var(--muted)}.book-list{padding:4px 16px 16px}.book-row{display:flex;align-items:center;gap:12px;min-height:76px;padding:8px 4px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f3f3ed}.book-row:last-child{border-bottom:0}.book-row img{width:36px;height:56px;object-fit:contain;flex:none;filter:drop-shadow(1px 2px 2px #0002)}.row-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.row-title{font-size:15px;overflow-wrap:anywhere}.row-author{color:var(--muted);font-size:12px}.row-arrow{margin-left:auto;color:#b0b4a8}.book-content{padding:8px 16px 16px}.book-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.detail-cover{display:block;width:100%;max-height:225px;object-fit:contain;object-position:top center;filter:drop-shadow(2px 4px 4px #0002);border-radius:4px}.book-info{min-width:0;overflow-wrap:anywhere}.book-info h3{font-size:18px;font-weight:600;line-height:1.18;letter-spacing:-.5px;margin:0 0 5px}.book-author{font-size:12px;color:var(--muted);margin:0 0 10px}.book-actions{display:flex;flex-wrap:wrap;gap:7px}.book-actions button{font-size:11px;border:0;background:transparent;color:#7a8470;padding:9px;border-radius:9px;min-height:44px;max-width:100%;overflow-wrap:anywhere}.book-actions .danger{color:#ac8a7c}.action-note{color:#969a90;font-size:10px;margin:10px 0 0}.personal-note{border-top:1px solid #eeeee6;margin-top:14px;padding-top:12px}.personal-note .note-label{color:var(--accent);font-size:10px;letter-spacing:1.3px;margin:0 0 6px}.personal-note p{font-size:14px;line-height:1.45;margin:0;overflow-wrap:anywhere}.empty-note{margin:0;padding:24px;font-size:14px;color:var(--muted)}@media(min-width:600px){body{padding:28px 0}.app{border-radius:28px;box-shadow:0 12px 70px #3c3e331a}.profile{border-radius:28px 28px 26px 26px}.bottom{border-radius:0 0 28px 28px;overflow:hidden}.overlay{padding-bottom:24px}}@media(max-width:350px){.profile{padding-left:16px;padding-right:16px}.books{padding-left:16px;padding-right:16px}.book-info h3{font-size:18px}.pin-note{font-size:11px}.pin{gap:10px}.pin>svg{display:none}.demo-caption{max-width:115px;text-align:right}}@media(prefers-reduced-motion:no-preference){.surface{animation:rise .2s ease-out}@keyframes rise{from{transform:translateY(20px);opacity:.5}to{transform:translateY(0);opacity:1}}}

/* Prototype book editor: scrollable forms stay within the visible viewport. */
.overlay {
  top: var(--visible-top, 0);
  bottom: auto;
  height: var(--visible-height, 100dvh);
}
.surface { max-height: calc(var(--visible-height, 100dvh) - 36px - env(safe-area-inset-bottom)); }
.primary-button, .secondary-button, .photo-choice, .crop-toolbar button {
  border: 1px solid #dbe3d6;
  border-radius: 12px;
  min-height: 44px;
  padding: 10px 14px;
  background: #f2f5ed;
  color: #427361;
  font-size: 14px;
}
.session-notice { color: #878a7f; font-size: 11px; line-height: 1.6; margin: 14px 0 0; }
.primary-button { background: #427361; color: #fff; border-color: #427361; }
.primary-button:disabled { background: #b0bbae; border-color: #b0bbae; }
.secondary-button.danger { color: #a15f4b; background: #fff; }
.choice-content, .book-form, .crop-editor { padding: 12px 16px 16px; }
.choice-content { display: grid; gap: 8px; }
.choice-content .form-hint { margin: 0 0 8px; }
.editor-surface { height: min(85dvh, 780px); }
.book-form { display: flex; flex-direction: column; gap: 10px; }
.book-form > .session-notice { margin: 0; }
.form-hint { font-size: 12px; color: #777e70; line-height: 1.4; margin: 4px 0; }
.form-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form-field input, .form-field textarea, .crop-fields input {
  width: 100%; min-width: 0; border: 1px solid #dce2d6; background: #fbfcf8;
  border-radius: 10px; padding: 10px; font: inherit; font-size: 16px; color: #23241f;
  min-height: 44px;
}
.form-field textarea { resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .crop-fields input:focus-visible {
  outline: 2px solid #427361; outline-offset: 2px;
}
.field-error { color: #ad4e3d; font-size: 12px; line-height: 1.5; margin: 0; }
.field-error:empty { display: none; }
.photo-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.photo-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.photo-field h3 { font-size: 12px; font-weight: 500; margin: 0; min-height: 34px; }
.photo-preview, .photo-placeholder { width: 100%; height: 110px; object-fit: contain; background: #f3f5ef; border-radius: 10px; }
.photo-placeholder { display: flex; align-items: center; justify-content: center; color: #909787; font-size: 12px; }
.photo-choice { font-size: 12px; min-height: 44px; padding: 8px; width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.size-options { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; min-width: 0; }
.size-options legend { font-size: 13px; padding: 0; margin: 0 0 6px; }
.size-option { flex: 1; min-width: 0; position: relative; }
.size-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size-option span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 2px; border: 1px solid #dce2d6; border-radius: 10px; font-size: 12px; }
.size-option input:checked + span { background: #e7efe3; color: #3c6a4f; border-color: #70946c; }
.size-option input:focus-visible + span { outline: 2px solid #427361; outline-offset: 2px; }
.book-row:disabled { opacity: .48; }
.book-actions button:not(:disabled) { color: #427361; }
.detail-photo { padding: 0; border: 0; background: none; width: 100%; touch-action: manipulation; }
.detail-photos .form-hint { font-size: 10px; text-align: center; margin: 8px 0 0; }
.crop-canvas { display: block; width: auto; max-width: 100%; max-height: 42dvh; height: auto; margin: auto; touch-action: none; border-radius: 8px; background: #e2e6db; }
.crop-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.crop-toolbar button { flex: 1; font-size: 12px; padding: 8px; }
.crop-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crop-fields label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; }
.crop-result { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.crop-result canvas { max-width: 90px; max-height: 110px; object-fit: contain; border-radius: 4px; }
.crop-result span { font-size: 12px; color: #777e70; }
.crop-editor > .primary-button { width: 100%; margin-top: 12px; }

/* Book actions use the same line icons as navigation. */
.book-actions .icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  flex: 0 0 44px;
}
.book-actions .icon-action svg { width: 22px; height: 22px; flex: none; }
.book-actions .icon-action.danger { color: #a76b5b; }
.book-actions .icon-action:disabled { opacity: .45; }

/* Description and profile actions share one compact row. */
.profile-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-top: 10px;
}
.profile-summary .bio { overflow-wrap: anywhere; }
.profile-actions { display: flex; gap: 4px; }
.profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  padding: 10px;
  background: transparent;
  color: var(--accent);
}
.profile-icon svg { width: 22px; height: 22px; }
.shelf-empty { margin: 0; padding: 4px 0 8px; font-size: 12px; color: var(--muted); }
.secondary-button:disabled { opacity: .45; }

/* People and guest profiles share the owner's compact mobile layout. */
[hidden] { display: none !important; }
.others-page { padding: 20px 16px calc(var(--bottom-height) + 24px); }
.others-page > h1 { margin-bottom: 16px; }
.people-search { display: flex; gap: 8px; align-items: end; }
.people-search label { flex: 1; min-width: 0; }
.people-search button { padding: 10px; font-size: 12px; }
.search-status { font-size: 14px; color: #62695c; }
.search-status:empty { display: none; }
.people-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.people-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.person-card { border: 1px solid #e9e9df; border-radius: 16px; padding: 12px; background: #fff; text-align: left; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.person-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.person-info .avatar { width: 36px; height: 36px; box-shadow: none; }
.person-info strong { font-size: 14px; font-weight: 550; }
.person-cover { width: 100%; height: auto; margin-top: 12px; border-radius: 4px; }
.guest-back { display: block; min-height: 44px; border: 0; background: none; padding: 0 8px 8px 0; color: var(--accent); }
.guest-bio { margin: 12px 0; }
.private-note { padding: 12px 24px; font-size: 14px; color: #62695c; }
.guest-pin { display: flex; gap: 12px; align-items: center; margin: 0 16px 20px; padding: 12px; border: 0; border-radius: 14px; background: #252823; color: #fff; width: calc(100% - 32px); text-align: left; font-size: 14px; overflow-wrap: anywhere; }
.guest-pin img { width: 38px; height: 58px; object-fit: contain; flex: none; }
.missing-image { background: #e4e7df; min-height: 48px; }
.navigation #others.selected svg { fill: none; stroke: currentColor; }

.notifications-page { padding: 20px 16px calc(var(--bottom-height) + 24px); }
.notifications-page > h1 { margin-bottom: 16px; }
.notification-list { display: flex; flex-direction: column; gap: 12px; }
.notification-row { border: 1px solid #e9e9df; border-radius: 16px; padding: 12px; background: #fff; }
.notification-body { min-width: 0; overflow-wrap: anywhere; }
.notification-person { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none; padding: 0; min-height: 44px; width: 100%; }
.notification-person strong { font-size: 14px; font-weight: 550; min-width: 0; }
.notification-person .avatar { width: 36px; height: 36px; box-shadow: none; }
.notification-text { font-size: 14px; margin: 6px 0; }
.notification-time { display: block; font-size: 11px; color: #777e70; margin-top: 8px; }
.notification-book { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; border: 0; background: #f6f7f2; border-radius: 8px; padding: 8px; text-align: left; font-size: 14px; }
.notification-book img { width: 34px; height: 52px; object-fit: contain; flex: none; }
.notification-book span { min-width: 0; }
.request-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.request-result { font-size: 13px; color: var(--accent); margin: 10px 0 0; }
.request-result:empty { margin: 0; }
.request-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.navigation #notifications.selected svg { fill: none; stroke: currentColor; }