/*
 * NagiManga admin
 * Copyright (c) 2026 Lichiphen
 * Licensed under the MIT License
 */
:root {
    --bg: #f5f5f3;
    --card: #fff;
    --text: #222;
    --muted: #666;
    --line: #ddd;
    /* Borders of fields: 3:1 against the page and the cards (WCAG 1.4.11). */
    --field: #898989;
    --like-ink: #b8204f;
    --accent: #2f6f8f;
    --accent-text: #fff;
    --danger: #b3261e;
    --ok-bg: #e6f4ea;
    --err-bg: #fce8e6;
    --warn-bg: #fff4d6;
    /* Down chevrons: one SVG for selects (drawn in a fixed colour, 3:1 on every field) and a mask for the rest. */
    --chevron-mask: url("../viewer/icons/chevron-down.svg?v=a448278a");
    --select-chevron: url("../viewer/icons/select-chevron-light.svg?v=d70bc268");
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181a;
        --card: #202326;
        --text: #e8e8e6;
        --muted: #a0a4a8;
        --line: #3a3e42;
        --field: #6e7173;
        --like-ink: #ff8fb1;
        --accent: #6fb3d2;
        --accent-text: #0d1a20;
        --danger: #f28b82;
        --ok-bg: #1e3326;
        --err-bg: #3b1f1d;
        --warn-bg: #3a3016;
        --select-chevron: url("../viewer/icons/select-chevron-dark.svg?v=22cd0b2b");
    }
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must win over any display rule below */
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.7 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
a { color: var(--accent); }
code { font-size: .92em; background: var(--bg); padding: 0 .3em; border-radius: 3px; overflow-wrap: anywhere; }

.top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: .04em; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.top .brand { display:flex; align-items:center; gap:10px; font-size:14px; }
.log-ui-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.log-ui-icon-up,.log-ui-icon-down { stroke-width:2.2; }
.workspace-nav { margin-left:auto; gap:4px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--bg); font-size:13px; }
.workspace-nav > a,.nav-more > summary { display:block; padding:7px 12px; border-radius:8px; text-decoration:none; cursor:pointer; color:var(--text); list-style:none; }
.workspace-nav > a[aria-current],.workspace-tabs > a[aria-current] { background:var(--accent); color:var(--accent-text); }
.nav-more { position:relative; }.nav-more > summary::-webkit-details-marker { display:none; }.nav-more > summary::after { content:''; display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:-1px; background:currentColor; -webkit-mask:var(--chevron-mask) center/contain no-repeat; mask:var(--chevron-mask) center/contain no-repeat; transition:transform .15s ease; }.nav-more[open] > summary::after { transform:rotate(180deg); }
.nav-more > div { position:absolute; right:0; top:calc(100% + 8px); z-index:70; display:grid; gap:4px; min-width:210px; padding:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 25px #0002; }
.nav-more a,.nav-more button { display:block; padding:9px; text-decoration:none; font:inherit; }.nav-more a:hover,.nav-more button:hover { background:var(--bg); }.nav-more button.link { width:100%; padding:9px; text-align:left; }
.workspace-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; border-bottom:1px solid var(--line); padding:0 0 12px; }
/* LOG admin tabs: an icon before each name. */
.log-admin-tabs > a { display:inline-flex; align-items:center; gap:7px; }.log-admin-tabs .log-ui-icon { width:18px; height:18px; }
.workspace-tabs > a { padding:8px 16px; border-radius:999px; text-decoration:none; color:var(--text); background:var(--card); border:1px solid var(--line); }
@media(max-width:600px) { .top { gap:10px; }.top .brand { width:100%; }.workspace-nav { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin:0; }.workspace-nav > a,.nav-more > summary { padding:9px 8px; text-align:center; overflow-wrap:anywhere; }.nav-more { position:static; }.nav-more > div { left:0; right:0; min-width:0; }.workspace-tabs { gap:6px; }.workspace-tabs > a { padding:8px 12px; font-size:13px; } }
.main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 16px; }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 16px 20px; margin: 0 0 16px;
}
.card.narrow { max-width: 420px; margin: 40px auto; }
h1 { font-size: 1.35rem; margin: 0 0 12px; }
h2 { font-size: 1.1rem; margin: 18px 0 10px; }
.card > h2:first-child { margin-top: 0; }
.crumb { margin: 0 0 12px; color: var(--muted); }
.note { color: var(--muted); font-size: .9em; }

.form { display: grid; gap: 12px; }
.form.row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.form label { display: grid; gap: 4px; font-size: .92em; }
.form label.check, label.check { display: flex; gap: 8px; align-items: flex-start; }
input, select, textarea {
    font: inherit; color: inherit; background: var(--bg);
    border: 1px solid var(--field); border-radius: 6px; padding: 7px 9px; width: 100%;
}
::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: auto; margin-top: .35em; }
html[data-log-theme^="light"] { --select-chevron: url("../viewer/icons/select-chevron-light.svg?v=d70bc268"); }
html[data-log-theme^="dark"] { --select-chevron: url("../viewer/icons/select-chevron-dark.svg?v=22cd0b2b"); }
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px; }
textarea { resize: vertical; }
.wide { max-width: 100%; }
.inline { display: inline; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; font: inherit; cursor: pointer; text-decoration: none;
    padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--card); color: var(--text);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 2px 8px; font-size: .85em; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.flash-ok { background: var(--ok-bg); }
.flash-err { background: var(--err-bg); }
.warn { background: var(--warn-bg); padding: 10px 14px; border-radius: 8px; }
.badge { display: inline-block; font-size: .75em; padding: 0 .5em; border: 1px solid currentColor; border-radius: 99px; color: var(--accent); vertical-align: middle; }

.table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.table td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
.table .ok { color: #2e7d32; }
.table .ng { color: var(--danger); font-weight: 700; }

.series { font-size: 1rem; color: var(--muted); margin: 20px 0 8px; }
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.works .series { grid-column: 1 / -1; }
.work {
    display: grid; gap: 4px; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
}
.work img, .work .noimg { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--bg); }
.work .noimg { display: grid; place-items: center; color: var(--muted); font-size: .85em; }
.work-title { font-weight: 600; overflow-wrap: anywhere; }
.work-meta { font-size: .8em; color: var(--muted); }

.copy-src { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.share textarea { margin: 8px 0; }
.copy-box { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.copy-box .btn { flex: none; }

.drop {
    border: 2px dashed var(--line); border-radius: 10px; padding: 16px; text-align: center; margin: 0 0 16px;
}
.drop.is-over { border-color: var(--accent); background: var(--bg); }
.drop .check { justify-content: center; }
.drop progress { width: 100%; }

.pages { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.page { position: relative; display: grid; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px; cursor: grab; }
.page.is-dragging { opacity: .4; }
.page img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--card); pointer-events: none; }
.page-no { position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--accent-text); font-size: .75em; padding: 0 .5em; border-radius: 99px; }
.page-name { font-size: .75em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.danger-zone { margin-top: 16px; }
.danger-zone summary { cursor: pointer; color: var(--danger); }
.log { font-size: .8em; max-height: 320px; overflow: auto; background: var(--bg); padding: 10px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }

.current-pw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.current-pw input { width: auto; flex: 1 1 160px; max-width: 280px; font-family: ui-monospace, Consolas, monospace; }

/* Guest (read-only) mode */
.guest-banner {
    background: var(--warn-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

/* Two upload areas: normal / light */
.uploads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0 0 16px; }
.uploads .drop { margin: 0; text-align: left; }
.uploads h3 { margin: 0 0 6px; font-size: 1rem; }
.light-count { margin: 8px 0; }
.page-light { position: absolute; top: 8px; right: 8px; background: var(--card); color: var(--accent); border: 1px solid var(--accent); font-size: .7em; padding: 0 .45em; border-radius: 99px; }

/* --- Update / embed code ---------------------------------------------------- */
.update-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--warn-bg); padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.update-new { border: 1px solid var(--accent); border-radius: 10px; padding: 12px 16px; margin: 0 0 12px; }
.update-new h2 { margin-top: 0; }
.notes { font-size: .95em; line-height: 1.75; overflow-wrap: anywhere; max-height: 420px; overflow: auto; background: var(--bg); padding: 4px 18px 14px; border-radius: 8px; }
.notes h3 { margin: 18px 0 6px; padding-bottom: 4px; font-size: 1.05em; border-bottom: 1px solid var(--line); }
.notes h4,.notes h5 { margin: 14px 0 4px; font-size: 1em; }
.notes p { margin: 10px 0; }
.notes ul { margin: 6px 0 10px; padding-left: 1.3em; }
.notes li { margin: 4px 0; }
.notes li::marker { color: var(--accent); }
.notes code { padding: 1px 6px; border-radius: 4px; background: var(--card); font-size: .9em; }
.badge.new { background: var(--danger); color: #fff; border-color: var(--danger); }
.steps li, .checks li, .backups li { margin: 0 0 8px; }
.checks { list-style: none; padding-left: 0; }
.backups { list-style: none; padding-left: 0; }
.copy-label { margin: 12px 0 0; font-weight: 600; }

/* --- Share link / folded details -------------------------------------------- */
details.more { margin: 16px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.more > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.more[open] > summary { margin-bottom: 12px; }
.page-public { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
/* iOS zooms into any field under 16px; touch screens always get at least 16px text in fields. */
@media(pointer:coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:max(16px,1em)!important; } }

/* Settings: a table of contents beside the blocks on PCs; blocks flow in two columns on wide screens. */
.main:has(> [data-settings-layout]) { max-width:1440px; }
.settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.settings-toc { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; padding:14px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:13px; }
.settings-toc-group + .settings-toc-group { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.settings-toc-tab { margin:0 0 4px; padding:0 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; }
.settings-toc-group.is-active .settings-toc-tab { color:var(--accent); }
.settings-toc ol,.settings-toc-dialog ol { margin:0; padding:0; list-style:none; }
.settings-toc a,.settings-toc-dialog ol a { display:block; padding:6px 8px; border-radius:8px; color:var(--text); text-decoration:none; line-height:1.45; }
.settings-toc a:hover { background:var(--bg); }
.settings-toc a[aria-current] { background:color-mix(in srgb,var(--accent) 14%,var(--card)); color:var(--accent); font-weight:700; }
.settings-body .card { scroll-margin-top:16px; }
/* Under a block's heading: labels that jump to its parts. */
.settings-parts { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin:-4px 0 16px; }
.settings-parts a { display:block; padding:6px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:13px; line-height:1.45; text-decoration:none; }
.settings-parts a:hover { border-color:var(--accent); color:var(--accent); }
.settings-parts a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.settings-body .card :is(h3,fieldset,details) { scroll-margin-top:16px; }
.settings-body .card:focus { outline:none; }
/* Two columns at most (the table of contents and one column of blocks); wider screens keep the blocks readable. */
.settings-form { min-width:0; max-width:880px; }
/* Blocks changed since the last save: a line on the left, and a dot in the table of contents. */
.settings-body .card.is-changed { box-shadow:inset 4px 0 0 var(--accent); }
.settings-toc a.is-changed::after,.settings-toc-dialog ol a.is-changed::after { content:""; display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%; background:var(--accent); vertical-align:middle; }
/* The one save button: stays at the bottom of the screen while the settings scroll. */
.settings-savebar { position:sticky; bottom:12px; z-index:50; display:flex; align-items:center; gap:12px; margin-top:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--card) 92%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 8px 28px #00000024; }
.settings-savebar-status { flex:1; min-width:0; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.settings-form.has-changes .settings-savebar { border-color:var(--accent); }
.settings-form.has-changes .settings-savebar-status { color:var(--text); }
.settings-form .settings-savebar-status.is-error { color:#c0392b; font-weight:600; }
/* Toasts: errors that must not be missed, above the save bar. */
.nm-toasts { position:fixed; left:50%; bottom:88px; z-index:1000; display:grid; gap:8px; width:min(560px,calc(100% - 32px)); transform:translateX(-50%); pointer-events:none; }
.nm-toast { display:flex; align-items:flex-start; gap:8px; padding:12px 8px 12px 14px; border:1px solid var(--danger); border-left-width:4px; border-radius:10px; background:var(--err-bg); color:var(--text); box-shadow:0 10px 30px #0000003d; pointer-events:auto; animation:nm-toast-in .2s ease-out; }
.nm-toast p { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.nm-toast-close { flex:none; display:grid; place-items:center; width:32px; height:32px; margin:-4px 0; padding:0; border:0; border-radius:8px; background:none; color:inherit; cursor:pointer; }
.nm-toast-close:hover { background:color-mix(in srgb,var(--danger) 16%,transparent); }
.nm-toast-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
@keyframes nm-toast-in { from { opacity:0; transform:translateY(8px); } }
/* From the second refused save on, the toast grows and shivers. */
.nm-toast-big { border-width:2px; border-left-width:5px; }
.nm-toast-big p { font-size:16px; font-weight:600; }
.nm-toast-shake { animation:nm-toast-in .2s ease-out, nm-toast-shake .5s ease-in-out .2s 2; }
@keyframes nm-toast-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-9px); } 40% { transform:translateX(9px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(6px); } }

/* Keep saving a refused analytics tag and the warning takes over the middle of the screen before the toast settles in. */
.nm-punish { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.nm-punish-word { display:flex; gap:.01em; font-weight:900; line-height:1; text-align:center; }
.nm-punish-word span { display:inline-block; will-change:transform,opacity; }
.nm-punish-stop { font-size:min(32vw,32vh); letter-spacing:.02em; color:#e8382a;
    -webkit-text-stroke:min(1.2vw,10px) #7a120a; text-stroke:min(1.2vw,10px) #7a120a;
    text-shadow:0 min(1.4vw,12px) 0 #7a120a99, 0 min(2.4vw,20px) min(1vw,8px) #0000004d; }
.nm-punish-stop.is-falling { animation:nm-punish-fall .85s cubic-bezier(.55,0,.9,.35) forwards; }
@keyframes nm-punish-fall { 0% { transform:translateY(-55vh) scale(.82) rotate(-3deg); } 80% { transform:translateY(3vh) scale(1.04); } 100% { transform:translateY(0) scale(1); } }
.nm-punish-stop.is-burst span { animation:nm-punish-burst .6s ease-out forwards; }
@keyframes nm-punish-burst { to { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3); opacity:0; } }
.nm-punish-stop.is-wobble { animation:nm-punish-wobble .6s ease-in-out; }
@keyframes nm-punish-wobble { 0%,100% { transform:rotate(0); } 15% { transform:rotate(-7deg) scale(1.06); } 35% { transform:rotate(6deg); } 55% { transform:rotate(-5deg); } 75% { transform:rotate(4deg); } 90% { transform:rotate(-2deg); } }
.nm-punish-stop.is-bounce { animation:nm-punish-bounce 1.5s linear forwards; }
@keyframes nm-punish-bounce { 0% { transform:translateY(-32vh); } 14% { transform:translateY(0); } 30% { transform:translateY(-17vh); } 44% { transform:translateY(0); } 57% { transform:translateY(-9vh); } 68% { transform:translateY(0); } 79% { transform:translateY(-4vh); } 88% { transform:translateY(0); } 95% { transform:translateY(-1.5vh); } 100% { transform:translateY(0); } }
.nm-punish-stop.is-exit { animation:nm-punish-exit .8s cubic-bezier(.4,-0.4,.8,1) forwards; }
@keyframes nm-punish-exit { 0% { transform:translateY(0); } 28% { transform:translateY(-26vh) rotate(-6deg); } 100% { transform:translateY(135vh) rotate(16deg); } }
.nm-punish-enough { font-size:min(20vw,20vh); color:color-mix(in srgb,var(--text) 18%,var(--card)); letter-spacing:.03em;
    text-shadow:0 1px 0 #ffffffcc, 0 -1px 1px #00000055, 0 2px 3px #00000040; animation:nm-punish-emboss .4s ease-out; }
@keyframes nm-punish-emboss { from { opacity:0; transform:scale(.88); } }
.nm-punish-enough.is-crumble { animation:nm-punish-fade 1.1s ease-in forwards; }
@keyframes nm-punish-fade { to { opacity:0; filter:blur(2px); } }
.nm-dust { position:fixed; width:5px; height:5px; border-radius:1px; background:color-mix(in srgb,var(--text) 35%,var(--card)); opacity:.85; animation:nm-punish-dust 1.4s ease-in forwards; }
@keyframes nm-punish-dust { 20% { opacity:.85; } 100% { transform:translate(var(--dx),var(--dy)) scale(.3) rotate(90deg); opacity:0; } }
/* The screen itself cracks, then the shards between the cracks fall away one by one. */
.nm-crack { position:fixed; inset:0; width:100%; height:100%; z-index:1; }
.nm-crack line { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 0 1.5px #000a);
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:nm-crack-draw .4s ease-out var(--cd,0s) forwards; }
@keyframes nm-crack-draw { to { stroke-dashoffset:0; } }
.nm-shard { position:fixed; inset:0; background:linear-gradient(135deg,#ffffff33,#00000010 70%); border:1px solid #88888855; box-shadow:inset 0 0 50px #00000012;
    will-change:transform,opacity; animation:nm-shard-fall 1s ease-in var(--sd,0s) forwards; }
@keyframes nm-shard-fall { 0%,12% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translate(var(--dx),125vh) rotate(var(--rot)); opacity:0; } }

@media (prefers-reduced-motion: reduce) { .nm-toast { animation:none; } .nm-toast-shake { animation:none; } }
@media (prefers-color-scheme: dark) { .settings-form .settings-savebar-status.is-error { color:#ff8a7a; } }
.settings-save { flex-shrink:0; min-height:44px; padding:10px 22px; font-weight:700; }
/* Asked before leaving with unsaved changes. */
.settings-leave-dialog { width:min(480px,calc(100% - 32px)); padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); box-shadow:0 20px 60px #0000004d; }
.settings-leave-dialog::backdrop { background:#0e161f80; }
.settings-leave-dialog h2 { margin:0 0 8px; font-size:18px; }
.settings-leave-dialog p { margin:0 0 6px; line-height:1.6; }
.settings-leave-dialog ul { margin:0 0 14px; padding-left:1.3em; line-height:1.7; }
.settings-leave-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
@media(max-width:600px) {
    .settings-savebar { flex-wrap:wrap; bottom:calc(8px + env(safe-area-inset-bottom)); }
    .settings-save { width:100%; }
    .settings-leave-actions { flex-direction:column-reverse; align-items:stretch; }
    .settings-leave-actions .btn { min-height:44px; }
}
.settings-toc-fab,.settings-toc-dialog { display:none; }
@media(max-width:900px) {
    .settings-layout { display:block; }
    .settings-toc { display:none; }
    .settings-toc-fab { display:flex; align-items:center; gap:6px; position:fixed; right:calc(16px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:60; padding:12px 18px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--card) 88%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--accent); font:700 14px/1 system-ui,sans-serif; box-shadow:0 10px 28px #0000002e; cursor:pointer; animation:settings-toc-float .5s cubic-bezier(.2,.9,.3,1.2) both; }
    .settings-toc-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
    .settings-toc-fab:active { transform:scale(.96); }
    .settings-toc-dialog[open] { display:block; width:min(440px,calc(100% - 24px)); max-height:min(78vh,640px); margin:auto auto calc(16px + env(safe-area-inset-bottom)); padding:0 16px 16px; overflow-y:auto; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--text); box-shadow:0 18px 50px #0000004d; animation:settings-toc-up .28s cubic-bezier(.16,1,.3,1); }
    .settings-toc-dialog::backdrop { background:#0e161f80; }
    .settings-toc-dialog-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -16px 6px; padding:14px 16px 10px; background:var(--card); border-bottom:1px solid var(--line); }
    .settings-toc-dialog-head h2 { margin:0; font-size:1rem; }
    .settings-toc-dialog .settings-toc-group { margin-top:12px; }
    .settings-toc-dialog ol a { padding:11px 12px; font-size:15px; }.settings-toc-dialog ol li + li { border-top:1px solid var(--line); }
    .settings-toc-dialog .settings-toc-group.is-active .settings-toc-tab { color:var(--accent); }
    .main:has(> [data-settings-layout]) { padding-bottom:84px; }
    /* The save bar takes the bottom edge; the table of contents button floats above it. */
    body:has(.settings-savebar) .settings-toc-fab { bottom:calc(96px + env(safe-area-inset-bottom)); }
}
@media(max-width:600px) { body:has(.settings-savebar) .settings-toc-fab { bottom:calc(132px + env(safe-area-inset-bottom)); } }
@keyframes settings-toc-float { from { opacity:0; transform:translateY(16px) scale(.9); } }
@keyframes settings-toc-up { from { opacity:0; transform:translateY(24px); } }
@media(prefers-reduced-motion:reduce) { .settings-toc-fab,.settings-toc-dialog[open] { animation:none; } }

/* LOG settings: copy rows, the search engine table, likes on the edit screen. */
.log-copy-row { display:flex; gap:8px; align-items:center; }.log-copy-row input { flex:1; min-width:0; }.log-copy-row .btn { flex-shrink:0; white-space:nowrap; }
.log-seo-table { width:100%; border-collapse:collapse; margin:12px 0 16px; font-size:13px; }
.log-seo-table caption { text-align:left; color:var(--muted); font-size:12px; padding-bottom:6px; }
.log-seo-table th,.log-seo-table td { padding:8px 10px; border-top:1px solid var(--line); text-align:left; vertical-align:top; }.log-seo-table th { font-weight:600; }.log-seo-table td { white-space:nowrap; }
.log-like-panel h2 { display:flex; align-items:center; gap:8px; }.log-like-panel h2 b { color:var(--like-ink); font-variant-numeric:tabular-nums; }
.log-like-panel-heart { width:22px; height:22px; fill:var(--like-ink); }
.log-like-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; }.log-like-form label { max-width:220px; }.log-like-actions { display:flex; flex-wrap:wrap; gap:8px; }
.log-list-likes { display:inline-flex; align-items:center; gap:3px; color:var(--like-ink); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }.log-list-likes svg { width:13px; height:13px; fill:currentColor; }
.log-list-likes { flex-shrink:0; }

/* LOG restore: steps, a wave meter that fills from the left, the share done and the time left. */
.log-restore-dialog { width:min(520px,calc(100% - 32px)); padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); box-shadow:0 20px 60px #0000004d; }
.log-restore-dialog::backdrop { background:#0e161f80; }
.log-restore-dialog h2 { margin:0 0 12px; font-size:18px; }
.log-restore-steps { display:flex; gap:6px; margin:0 0 14px; padding:0; list-style:none; counter-reset:restore; font-size:13px; }
.log-restore-steps li { flex:1; display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); counter-increment:restore; }
.log-restore-steps li::before { content:counter(restore); display:inline-grid; place-items:center; flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid currentColor; font-size:11px; font-weight:700; }
.log-restore-steps li.is-current { border-color:var(--accent); color:var(--text); font-weight:700; }
.log-restore-steps li.is-current::before { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.log-restore-steps li.is-done { color:var(--text); }
.log-restore-steps li.is-done::before { content:"✓"; background:color-mix(in srgb,var(--accent) 16%,var(--card)); border-color:var(--accent); color:var(--accent); }
.log-restore-meter { position:relative; height:48px; border:1px solid var(--field); border-radius:12px; background:color-mix(in srgb,var(--accent) 7%,var(--card)); overflow:hidden; }
.log-restore-fill { position:absolute; inset:0 auto 0 0; width:0; overflow:hidden; transition:width .5s ease; }
/* Two wave crests drift at different speeds over the water; the mask draws the crest, the background its color. */
.log-restore-wave { position:absolute; inset:0; background:var(--accent);
    -webkit-mask:url("../viewer/icons/wave.svg?v=351b9d58") 0 0/120px 100% repeat-x;
    mask:url("../viewer/icons/wave.svg?v=351b9d58") 0 0/120px 100% repeat-x;
    animation:log-restore-wave 2.4s linear infinite; }
.log-restore-wave.is-back { opacity:.4; top:-5px; -webkit-mask-size:160px 100%; mask-size:160px 100%; animation:log-restore-wave-back 3.8s linear infinite reverse; }
@keyframes log-restore-wave { to { -webkit-mask-position:120px 0; mask-position:120px 0; } }
@keyframes log-restore-wave-back { to { -webkit-mask-position:160px 0; mask-position:160px 0; } }
.log-restore-dialog.is-error .log-restore-wave { background:var(--danger); animation-play-state:paused; }
.log-restore-numbers { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin:10px 0 2px; font-variant-numeric:tabular-nums; }
.log-restore-numbers strong { font-size:24px; }
.log-restore-numbers span { color:var(--muted); font-size:14px; }
.log-restore-detail { margin:0 0 6px; line-height:1.6; overflow-wrap:anywhere; }
.log-restore-dialog.is-error .log-restore-detail { color:var(--danger); font-weight:600; }
.log-restore-actions { display:flex; justify-content:flex-end; margin-top:12px; }
@media(max-width:600px) { .log-restore-steps { flex-direction:column; } .log-restore-actions .btn { width:100%; } }
@media(prefers-reduced-motion:reduce) { .log-restore-wave { animation:none; } .log-restore-fill { transition:none; } }
/* Settings contents: the way back to the admin and to the public page, at the top of the column and of the phone dialog. */
.settings-toc-exits { display:grid; gap:6px; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--line); }
.settings-toc a.settings-toc-exit,.settings-toc-dialog a.settings-toc-exit { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); font-weight:600; text-decoration:none; }
.settings-toc a.settings-toc-exit:hover,.settings-toc-dialog a.settings-toc-exit:hover { border-color:var(--accent); color:var(--accent); }
.settings-toc-exit svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.settings-toc-dialog .settings-toc-exits { grid-template-columns:1fr 1fr; }

/* Two-step login (p=twofactor and the code step of the login) */
.nm-totp-setup { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.nm-qr-box { margin: 0; text-align: center; }
.nm-qr { display: block; width: 228px; max-width: 100%; height: auto; margin: 0 auto 6px; border-radius: 6px; }
.nm-qr-box figcaption { font-size: .78em; max-width: 228px; margin: 0 auto; }
.nm-totp-name { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.nm-totp-name img { flex: none; border-radius: 8px; background: #fff; }
.nm-totp-name p { margin: 0; }
.nm-totp-key { font-family: ui-monospace, Consolas, monospace; font-size: 1.05em; letter-spacing: .06em; word-break: break-all; }
.nm-otp { font-family: ui-monospace, Consolas, monospace; font-size: 1.3em; letter-spacing: .2em; max-width: 14em; }
/* The 6-digit box: large, centred digits with room between them, easy to read back from the app */
.nm-otp[data-otp-digits] { display: block; width: 100%; max-width: 15em; margin: 6px auto 0; padding: 12px 10px 12px calc(10px + .45em); font-size: 1.9em; font-weight: 600;
  letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; border-radius: 12px; ime-mode: disabled; }
.nm-otp[data-otp-digits]::placeholder { color: var(--muted); opacity: .45; letter-spacing: .45em; }
.log-login-card .form label:has(> .nm-otp[data-otp-digits]) { text-align: center; }
.nm-recovery-codes { font-family: ui-monospace, Consolas, monospace; font-size: 1.05em; line-height: 1.7; padding: 10px 14px; border: 1px solid var(--line, #ccc); border-radius: 8px; background: var(--bg, transparent); }
@media (max-width: 640px) { .nm-totp-setup { grid-template-columns: 1fr; } }

/* Passkeys (p=passkeys and the login page) */
.table-wrap { overflow-x: auto; }
.nm-passkeys th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.nm-passkeys td { vertical-align: top; }
.nm-passkey-remove summary { cursor: pointer; color: var(--danger); }
.nm-passkey-remove .form { margin-top: 8px; min-width: 14em; }
@media (max-width: 640px) {
    .nm-passkeys thead { display: none; }
    .nm-passkeys tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
    .nm-passkeys td { display: block; border: 0; padding: 2px 0; }
    .nm-passkeys td:first-child { font-weight: 600; }
    .nm-passkeys td[data-label]::before { content: attr(data-label) "："; color: var(--muted); font-size: .9em; }
}
.nm-passkey-login { margin: 0 0 12px; }
.nm-passkey-login .btn { width: 100%; justify-content: center; }
.nm-passkey-login + .flash + .form { border-top: 1px solid var(--line); padding-top: 12px; }

/* Login: NagiLog or NagiManga after logging in */
.nm-login-to { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nm-login-to legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .92em; }
.nm-recovery-login { margin-top: 14px; }
.nm-recovery-login summary { cursor: pointer; color: var(--muted); font-size: .92em; }
.nm-recovery-login[open] summary { margin-bottom: 8px; }

/* Setup: which screen a login opens, as two large buttons */
.nm-home-pick { border: 0; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.nm-home-pick legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
label.nm-home-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 18px 52px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; min-height: 88px; justify-content: center; }
.nm-home-card input { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; accent-color: var(--accent); }
.nm-home-card:hover { border-color: var(--accent); }
.nm-home-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.nm-home-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.nm-home-name { font-size: 1.2em; font-weight: 700; }
.nm-home-text { font-size: .92em; opacity: .8; line-height: 1.5; }
.nm-home-note { margin-top: 6px; }
/* The two-step reminder after a login */
.nm-twofa-nudge { width: min(520px, calc(100% - 32px)); }
.nm-twofa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.nm-twofa-actions .btn { justify-content: center; text-align: center; padding-block: 12px; }
.nm-twofa-later { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.nm-twofa-later form { margin: 0; }
@media (max-width: 520px) { .nm-twofa-actions { grid-template-columns: 1fr; } }
.nm-login-to label.nm-home-card { min-height: 72px; padding: 12px 12px 12px 44px; }
.nm-login-to .nm-home-card input { left: 14px; }
.nm-login-to .nm-home-name { font-size: 1.05em; }
/* Setup: why the key is asked for, and where to find it */
.nm-setup-help { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--bg); }
.nm-setup-help > p { margin: 0 0 10px; line-height: 1.7; }
.nm-setup-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.nm-setup-help ol { margin: 10px 0 8px; padding-left: 1.5em; line-height: 1.75; }
.nm-setup-help li + li { margin-top: 4px; }
.nm-setup-help .note { margin: 0; }
/* The one-click choice of hotlink protection for the LOG (sites set up before 0.12.0) */
.hotlink-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hotlink-banner > span:first-child { flex: 1 1 320px; line-height: 1.6; }
.hotlink-banner-actions { display: flex; gap: 8px; }
.hotlink-banner-actions form { margin: 0; }