/* Settings use the same paper, ink and olive palette as the reading room. */
.account-page { width:min(620px, calc(100% - 48px)); margin:48px auto 0; padding-bottom:88px; }
.account-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-bottom:26px; border-bottom:1px solid var(--line); }
.account-back { width:44px; min-height:44px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.account-back:hover { background:#686f520c; }
.account-brand { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:500; letter-spacing:-.4px; }
.account-page h1 { font-size:clamp(30px, 6vw, 40px); font-weight:500; letter-spacing:-.04em; margin:54px 0 12px; }
.account-page h2, .remove-dialog h2 { font-size:24px; letter-spacing:-.03em; font-weight:500; margin:0 0 20px; }
.account-identity { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:38px; color:var(--muted); font-size:13px; }
.account-identity p { margin:0; }
.account-page label { display:block; font-size:13px; }
.account-page input:not([type=checkbox]), .account-page select { margin:9px 0 22px; width:100%; min-height:46px; border:1px solid var(--line); border-radius:12px; background:#ffffff50; padding:12px 14px; font:inherit; font-size:14px; color:var(--ink); }
.account-page .account-hint, .remove-dialog .account-hint { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 22px; }
#notice { font-size:13px; line-height:1.6; color:var(--accent); }
#notice:empty, #manage-feedback:empty, #remove-error:empty, #ai-check-result:empty { display:none; }
.account-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.account-return, .account-page .file-button, .remove-dialog .file-button, .account-page .save-entry, .remove-dialog .save-entry {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 17px;
  border:1px solid transparent; border-radius:13px; background:#686f520e; color:var(--ink); font-size:13px; line-height:1.4;
  box-shadow:none; text-decoration:none; transition:background .16s ease;
}
.account-page .save-entry, .remove-dialog .save-entry { background:var(--accent); color:var(--paper); }
.account-page .file-button:not(:disabled):hover, .remove-dialog .file-button:hover, .account-return:hover { background:#686f521b; }
.account-page .save-entry:not(:disabled):hover, .remove-dialog .save-entry:not(:disabled):hover { background:#596047; color:var(--paper); }
.account-page button:disabled, .remove-dialog button:disabled { opacity:.45; }
.settings-section { border-top:1px solid var(--line); }
.settings-section:last-child { border-bottom:1px solid var(--line); }
.settings-section > summary, .account-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:25px 4px; list-style:none; cursor:pointer; border-radius:8px; }
.settings-section > summary { font-size:17px; letter-spacing:-.25px; padding-inline:16px; border-radius:14px; transition:background .16s ease, color .16s ease; }
.settings-section > summary small { display:block; font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); line-height:1.6; margin-top:7px; }
.settings-section > summary::-webkit-details-marker, .account-disclosure > summary::-webkit-details-marker { display:none; }
.settings-section > summary::after, .account-disclosure > summary::after { content:''; flex:0 0 6px; height:6px; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:rotate(45deg); margin-right:8px; }
.settings-section[open] > summary::after, .account-disclosure[open] > summary::after { transform:rotate(225deg); }
.settings-section > summary:hover, .account-disclosure > summary:hover { color:var(--accent); background:#686f5206; }
.settings-section[open] > summary { color:var(--accent); background:#686f5214; margin-bottom:14px; }
.settings-section[open] > summary::after { border-color:var(--accent); }
.settings-body { padding:4px 4px 30px; }
.account-disclosure { margin:20px 0; }
.account-disclosure > summary { padding:14px; background:#686f520b; font-size:13px; }
.account-disclosure[open] > summary { margin-bottom:22px; }
.account-page .ai-enable { display:flex; align-items:flex-start; gap:10px; margin:24px 0; line-height:1.6; }
.account-page .ai-enable input { width:16px; height:16px; margin:3px 0 0; accent-color:var(--accent); flex-shrink:0; }
.account-page select { appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23686f52' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; cursor:pointer; }
.account-page select:disabled { opacity:.55; }
.account-page select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Use the field's own border for focus, without a second surrounding ring. */
.account-page #manage-search:focus { outline:none; border-color:var(--accent); box-shadow:none; }
#ai-check-result { margin-top:20px; }
#telegram-hint { margin:20px 0 0; }
.account-user { padding:20px 0; border-top:1px solid var(--line); }
.account-user p { font-size:14px; margin:0 0 12px; }
.account-user .account-user-status { font-size:12px; color:var(--muted); line-height:1.6; margin:-5px 0 14px; }
.account-user button { margin:0 8px 8px 0; }
#users { margin-top:28px; }
#invitation { width:100%; margin-top:8px; }
#invitation-label { margin-top:25px; }
#invite-form .file-button { margin-top:0; }
.library-tabs { display:flex; gap:4px; padding:4px; border-radius:14px; background:#686f520b; margin-bottom:17px; }
.library-tabs button { flex:1; min-height:42px; border-radius:11px; font-size:13px; color:var(--muted); }
.library-tabs button[aria-pressed=true] { color:var(--ink); background:var(--paper); box-shadow:0 1px 4px #30332f08; }
.library-tabs span { font-size:11px; margin-left:6px; color:var(--muted); }
.managed-entry { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; border-top:1px solid #dedfd780; }
.managed-entry-text { min-width:0; }
.managed-entry-title { font-size:14px; line-height:1.6; margin:0 0 4px; overflow-wrap:anywhere; }
.managed-entry-date { font-size:11px; color:var(--muted); }
.account-page .entry-action { flex-shrink:0; color:var(--muted); font-size:12px; background:transparent; border-color:#dedfd790; }
.remove-dialog { max-width:460px; padding:32px; border-radius:24px; }
.remove-title { font-size:16px; line-height:1.6; margin:0 0 18px; overflow-wrap:anywhere; }
.remove-dialog .account-actions { margin-top:26px; }
.account-page :is(button,a):focus-visible { outline-offset:2px; }
@media(max-width:600px) {
  .account-page { margin-top:20px; }
  .account-header { padding-bottom:16px; }
  .account-page h1 { margin-top:38px; }
  .settings-section > summary { padding:22px 14px; }
  .managed-entry { gap:10px; }
  .remove-dialog { padding:25px; }
}
@media(prefers-reduced-motion:reduce) { .account-page button, .remove-dialog button { transition:none; } }

.entry-actions { display:flex; flex-shrink:0; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.title-dialog label { display:block; font-size:13px; margin-bottom:8px; }
.title-dialog #entry-title-input { width:100%; margin:0 0 18px; border:1px solid var(--line); border-radius:12px; background:#ffffff50; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); }
.title-dialog #entry-title-input:focus { outline:none; border-color:var(--accent); box-shadow:none; }
#title-error:empty { display:none; }
@media(max-width:480px) { .managed-entry { flex-wrap:wrap; } .entry-actions { width:100%; justify-content:flex-start; } }

.entry-editor { width:680px; max-width:calc(100vw - 32px); }
.entry-editor :is(input,textarea) { width:100%; margin:0 0 20px; border:1px solid var(--line); border-radius:12px; background:#ffffff50; padding:12px 14px; font:inherit; font-size:15px; line-height:1.7; color:var(--ink); }
.entry-editor textarea { resize:vertical; }
.entry-editor :is(input,textarea):focus { outline:none; border-color:var(--accent); box-shadow:none; }
.entry-editor #entry-title-input { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:8px 0; font-size:23px; letter-spacing:-.5px; }
.entry-editor #entry-title-input:focus { border-color:var(--accent); }
.edit-topic-options { display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 24px; }
.entry-editor .edit-topic-options button { font-size:12px; padding:8px 12px; min-height:36px; border-radius:20px; }
.edit-topic-options button[aria-pressed=true] { background:#686f5224; color:var(--accent); }
.edit-version { padding:14px 0; border-top:1px solid var(--line); }
.edit-version summary { color:var(--muted); font-size:12px; cursor:pointer; line-height:1.7; }
.edit-version p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; }
#edit-history { margin:28px 0 0; }
#edit-history > summary { margin-bottom:0; }

.managed-topic { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid #dedfd780; }
.managed-topic.child-topic { margin-left:22px; }
.managed-topic p { font-size:14px; line-height:1.6; margin:0; overflow-wrap:anywhere; }
.managed-topic small { color:var(--muted); font-size:11px; margin-left:10px; }
#topic-new { margin-top:20px; }
.topic-dialog label { display:block; font-size:13px; margin-bottom:8px; }
.topic-dialog :is(input,select) { width:100%; padding:12px 14px; min-height:46px; margin:0 0 22px; border:1px solid var(--line); border-radius:12px; background:var(--paper); font:inherit; font-size:15px; color:var(--ink); }
.topic-dialog :is(input,select):focus { outline:none; border-color:var(--accent); }
#topic-error:empty, #topics-feedback:empty { display:none; }

/* Shared paper-and-olive selection, including the open list. */
.soft-select { margin:9px 0 22px; min-width:0; }
.soft-select select[hidden] { display:none; }
.soft-select .soft-select-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; min-height:46px; padding:12px 15px; margin:0;
  border:1px solid var(--line); border-radius:13px; background:#ffffff50;
  color:var(--ink); font:inherit; font-size:14px; text-align:left;
  transition:border-color .15s, background .15s;
}
.soft-select-value { min-width:0; overflow-wrap:anywhere; }
.soft-select .soft-select-trigger:hover:not(:disabled) { border-color:#a6aa96; background:#ffffff80; }
.soft-select .soft-select-trigger:focus-visible { outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.soft-select .soft-select-trigger:disabled { opacity:.5; cursor:default; }
.soft-select-chevron { flex:0 0 7px; height:7px; border-right:1.3px solid var(--muted); border-bottom:1.3px solid var(--muted); transform:translateY(-2px) rotate(45deg); margin-right:3px; }
.soft-select.is-open .soft-select-trigger { border-color:var(--accent); }
.soft-select.is-open .soft-select-chevron { transform:translateY(2px) rotate(225deg); }
.soft-select-list {
  margin-top:7px; padding:5px; max-height:min(250px,35dvh); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid #dedfd7b0; border-radius:16px; background:var(--paper);
  box-shadow:0 6px 18px #30332f08; scrollbar-width:thin; scrollbar-color:#a5a99560 transparent;
}
.soft-select-list[hidden] { display:none; }
.soft-select-option { position:relative; padding:11px 35px 11px 12px; min-height:44px; border-radius:10px; font-size:14px; line-height:1.6; color:var(--ink); cursor:pointer; overflow-wrap:anywhere; }
.soft-select-option[aria-selected=true] { color:var(--accent); background:#686f520c; }
.soft-select-option[aria-selected=true]::after { content:'✓'; position:absolute; right:12px; color:var(--accent); }
.soft-select-option.is-active, .soft-select-option:hover:not([aria-disabled=true]) { background:#686f521a; }
.soft-select-option[aria-disabled=true] { opacity:.4; cursor:default; }
.soft-select-error { color:var(--muted); font-size:12px; line-height:1.6; margin:8px 0 0; }
.topic-dialog .soft-select { margin:0 0 22px; }
.topic-dialog .soft-select-trigger, .topic-dialog .soft-select-option { font-size:15px; }
@media(prefers-reduced-motion:reduce) { .soft-select .soft-select-trigger { transition:none; } }

.edit-attachments { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.edit-attachments .account-hint { margin:0; font-size:11px; }
.edit-image-list { display:grid; gap:18px; margin:18px 0; }
.edit-image-row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.edit-image-row img { width:100%; max-height:130px; object-fit:contain; border-radius:10px; background:#686f5208; }
.edit-image-fields label { margin-top:0; font-size:12px; }
.edit-image-fields input { margin-bottom:8px; }
.edit-image-fields .file-button { font-size:11px; padding:7px 10px; }
.edit-version-image { display:block; max-width:100%; max-height:180px; border-radius:10px; margin-top:16px; object-fit:contain; }
#editor-confirm-message { line-height:1.75; color:var(--muted); font-size:14px; }
@media(max-width:480px) { .edit-image-row { grid-template-columns:72px minmax(0,1fr); gap:12px; } }

.edit-draft-conflict { padding:16px 18px; margin:18px 0 24px; border-radius:16px; background:#686f520b; border:1px solid var(--line); font-size:13px; line-height:1.75; }
.edit-draft-conflict > p { margin-top:0; }
.edit-draft-conflict summary { cursor:pointer; padding:8px 0; color:var(--muted); }
.edit-draft-conflict .file-button { margin-top:12px; }
#edit-current-version { max-height:320px; overflow:auto; white-space:pre-wrap; }
#edit-current-version h3 { font-size:18px; }

.links-dialog { width:640px; }
.links-dialog .dialog-top h2 { margin:0; }
.links-dialog .dialog-top { margin-bottom:12px; }
.link-candidates { max-height:210px; overflow:auto; margin:8px 0 22px; }
.link-choice { display:block; width:100%; text-align:left; padding:11px 13px; border-radius:12px; line-height:1.6; font-size:13px; }
.link-choice:hover, .link-choice[aria-pressed=true] { background:#686f5212; color:var(--accent); }
.managed-link { padding:16px 0; border-bottom:1px solid var(--line); }
.managed-link-title { margin:0; font-size:14px; }
.managed-link-note { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.75; color:var(--muted); }
.managed-link .entry-actions { justify-content:flex-start; margin-top:10px; }
#link-form { margin-top:24px; }
#links-feedback:empty { display:none; }

.link-choice small { display:block; margin-top:2px; font-size:11px; color:var(--muted); }

.cost-budget-form { display:flex; align-items:end; gap:16px; margin-top:24px; flex-wrap:wrap; }
.cost-budget-form label { flex:1 1 180px; margin:0; }
.cost-budget-form input { margin-top:8px; }
.budget-attention { color:var(--accent, #687052); border-left:2px solid currentColor; padding-left:14px; }
#owner-costs { margin-bottom:28px; }
#owner-costs hr { margin:28px 0; border:0; border-top:1px solid var(--line, #deded5); }

.account-page .cost-budget-form input { margin-bottom:0; }
.cost-budget-form .file-button { margin:0; }

.source-material-link { display:block; margin-top:7px; padding:0; border:0; background:none; color:var(--muted); font:inherit; font-size:11px; cursor:pointer; text-align:left; }
.source-material-link:hover { color:var(--ink); text-decoration:underline; }
.source-material-dialog { width:min(720px,calc(100vw - 32px)); max-width:720px; max-height:85vh; overflow-y:auto; }
.source-material-section { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.source-material-section h3 { font-size:13px; font-weight:500; color:var(--muted); margin:0 0 10px; }
.source-material-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; user-select:text; }

.account-user .account-user-activity { margin-top:-6px; }
.account-last-import { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 5px; margin-top:5px; }
.account-import-date { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

.account-page h1 { margin-top:28px; margin-bottom:8px; }
.account-identity { margin-bottom:20px; }
.account-footer { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:flex-end; }
.account-page { padding-bottom:32px; }

/* Match the reading page's content edge; disclosure text never shifts inward. */
.account-page { width:100%; max-width:696px; padding:0 24px 32px; margin:0 auto; }
.account-page h1 { margin-top:32px; }
.account-page .settings-section > summary { padding:22px 0; }
.account-page .settings-section > summary::after { margin-right:4px; }
.account-page .settings-body { padding:4px 0 26px; }
@media(min-width:1400px) { .account-page { max-width:728px; } }
@media(max-width:600px) {
  .account-page { padding-inline:var(--mobile-gutter); }
  .account-page h1 { margin-top:24px; }
  .account-page .settings-section > summary { padding:20px 0; }
}

/* Give the highlight breathing room without moving the shared text edge. */
.account-page .settings-section > summary { margin-inline:-12px; padding:20px 12px; border-radius:12px; }
.account-page .settings-section[open] > summary { margin-bottom:20px; }
.account-page .settings-body { padding:0 0 28px; }
.account-page .settings-subheading { font-size:14px; font-weight:500; margin:0 0 16px; }
.invite-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.account-page .invite-fields input { margin:8px 0 16px; }
.settings-user-list { margin-top:28px; }
.settings-user-list #users { margin-top:0; }
.account-page .settings-body > .account-hint:empty { display:none; }
@media(max-width:480px) { .invite-fields { grid-template-columns:1fr; gap:0; } }

.account-page .settings-body form label:not(.check-label) { margin:0; }

@media(max-width:600px) { .account-page input:not([type=checkbox]), .account-page select { font-size:16px; } }

/* Keep costs scannable: two amounts first, detail on demand. */
.cost-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.cost-stat { min-width:0; padding:16px; background:#686f5209; border-radius:13px; }
.cost-stat-label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.cost-stat-value { display:block; font-size:clamp(17px,3.8vw,23px); font-weight:500; line-height:1.35; letter-spacing:-.03em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.account-page .cost-dashboard h3 { font-size:13px; font-weight:500; margin:0 0 14px; }
.account-page .cost-dashboard .account-disclosure { border-top:1px solid var(--line); margin:0; }
.account-page .cost-dashboard .account-disclosure > summary { padding:16px 0; min-height:48px; background:none; border-radius:0; }
.account-page .cost-dashboard .account-disclosure[open] > summary { margin-bottom:4px; }
.account-page .cost-dashboard .account-disclosure > .account-hint { margin:0 0 14px; font-size:12px; }
.account-page .cost-dashboard .cost-group { margin-inline:0; }
.account-page .cost-dashboard .cost-group > summary { font-size:13px; }
.account-page .cost-dashboard .cost-group > .account-hint { margin-bottom:14px; font-size:12px; }
.cost-dashboard .cost-overview-line { font-size:12px; margin-bottom:12px; }
#owner-costs { margin-bottom:0; }
#owner-cost-notice:empty, #cost-budget-feedback:empty { display:none; }
.account-page #owner-cost-notice { margin:0 0 18px; font-size:12px; line-height:1.6; }
.cost-budget-summary { display:flex; flex:1; justify-content:space-between; gap:12px; }
#cost-budget-value { color:var(--muted); font-variant-numeric:tabular-nums; }
.cost-dashboard .cost-budget-form { margin:4px 0 12px; gap:12px; }
.cost-dashboard .cost-budget-form label { flex:1 1 160px; font-size:12px; }
.cost-dashboard .cost-budget-form input { margin-bottom:0; }
.account-page .cost-dashboard .cost-personal-only { border-top:0; }
.cost-dashboard .cost-personal-only > summary[hidden] { display:none; }
.cost-dashboard .cost-personal-only > .cost-stats { margin-top:0; }
#personal-costs > .cost-stats { margin-top:8px; }
#personal-costs > .cost-own-details { padding-bottom:8px; }
.cost-dashboard .cost-own-details > .account-disclosure { margin-left:0; }
#usage-summary { margin:0 0 16px; }
@media(max-width:380px) { .cost-stats { gap:8px; } .cost-stat { padding:13px 11px; } }