.image-reader-page { min-width: 320px; }
.reader-topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 64px; padding: 10px clamp(16px, 4vw, 48px); align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.reader-back,.reader-privacy { display: inline-flex; align-items: center; gap: 8px; }
.reader-back { color: var(--ink); text-decoration: none; }
.reader-privacy { color: var(--muted); font-size: 14px; }
.reader-privacy>span { width: 8px; height: 8px; background: var(--success); border-radius: 50%; }
.reader-shell { width: min(1680px,calc(100% - 32px)); margin: 0 auto; padding: 34px 0 44px; }
.image-reader-page.is-embedded .reader-topbar { display: none; }
.image-reader-page.is-embedded .reader-shell { width: min(1680px,calc(100% - 28px)); padding: 26px 0 40px; }
.image-reader-page.is-embedded .reader-heading h1 { font-size: clamp(30px,4vw,48px); }
.reader-heading { margin-bottom: 24px; }
.reader-heading h1 { margin: 0; font-size: clamp(32px,5vw,58px); font-weight: 550; letter-spacing: -.03em; }
.reader-heading p { max-width: 1120px; margin: 12px 0 0; color: var(--muted); line-height: 1.7; }
.reader-browser-toolbar,.reader-controls,.reader-folder-summary,.reader-toolbar-group,.reader-preview-toolbar,.reader-preview-header { display: flex; align-items: center; }
.reader-browser { min-height: 610px; padding: 0; overflow: hidden; }
.reader-browser-toolbar { min-height: 78px; padding: 14px 18px; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.reader-folder-summary { min-width: 220px; gap: 12px; }
.reader-folder-icon { display: inline-flex; color: var(--brand); }
.reader-folder-summary strong,.reader-folder-summary span { display: block; }
.reader-folder-summary strong { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.reader-folder-summary div>span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.reader-controls { min-width: 0; gap: 10px; }
.reader-search { position: relative; display: block; width: min(290px,24vw); }
.reader-search>svg { position: absolute; z-index: 1; top: 13px; left: 14px; color: var(--muted); pointer-events: none; }
.reader-search .g_input { padding-left: 42px; }
.reader-control-field { width: 150px; }
.reader-size-control { width: 126px; }
.reader-icon-button,.reader-text-button,.reader-zoom-label { display: inline-flex; min-height: 40px; padding: 0 10px; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; }
.reader-icon-button { width: 40px; padding: 0; flex: 0 0 40px; }
.reader-icon-button:hover:not(:disabled),.reader-text-button:hover:not(:disabled),.reader-zoom-label:hover:not(:disabled) { color: var(--brand); background: var(--brand-pale); border-color: rgba(207,75,69,.22); }
.reader-icon-button:disabled { color: var(--soft-text); cursor: not-allowed; }
.reader-empty { display: grid; min-height: 530px; padding: 30px; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.reader-empty svg { color: var(--brand); }
.reader-empty h2 { margin: 16px 0 7px; color: var(--ink); font-size: 22px; font-weight: 550; }
.reader-empty p { margin: 0 0 18px; line-height: 1.6; }
.reader-no-result { padding: 90px 24px; color: var(--muted); text-align: center; }
.reader-read-status { display: flex; min-height: 66px; padding: 12px 20px; align-items: center; gap: 12px; color: var(--muted); background: var(--brand-pale); border-bottom: 1px solid rgba(207,75,69,.16); }
.reader-read-status strong,.reader-read-status span { display: block; }
.reader-read-status strong { color: var(--ink); font-weight: 550; }
.reader-read-status div>span { margin-top: 4px; font-size: 13px; }
.reader-gallery { --thumb-width: 190px; display: grid; padding: 20px; grid-template-columns: repeat(auto-fill,minmax(var(--thumb-width),1fr)); align-content: start; gap: 18px; }
.reader-gallery[data-size="small"] { --thumb-width: 120px; gap: 12px; }
.reader-gallery[data-size="large"] { --thumb-width: 260px; gap: 22px; }
.reader-gallery-item { display: grid; min-width: 0; padding: 0; grid-template-rows: auto auto; color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; overflow: hidden; }
.reader-gallery-item:hover,.reader-gallery-item:focus-visible { background: var(--brand-pale); border-color: rgba(207,75,69,.26); box-shadow: 0 8px 24px rgba(75,55,48,.06); }
.reader-thumbnail { position: relative; display: grid; width: 100%; aspect-ratio: 4/3; place-items: center; overflow: hidden; color: var(--muted); background-color: #f0ecea; background-image: linear-gradient(45deg,#e6e2df 25%,transparent 25%),linear-gradient(-45deg,#e6e2df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e2df 75%),linear-gradient(-45deg,transparent 75%,#e6e2df 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; border-radius: 13px; }
.reader-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reader-thumbnail-badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; color: var(--muted); background: rgba(255,255,255,.9); border-radius: 7px; font-size: 11px; }
.reader-thumbnail-status { display: grid; padding: 12px; place-items: center; gap: 8px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.45; }
.reader-spinner { width: 24px; height: 24px; border: 2px solid rgba(207,75,69,.18); border-top-color: var(--brand); border-radius: 50%; animation: reader-spin .8s linear infinite; }
.reader-file-copy { min-width: 0; padding: 10px 8px 12px; }
.reader-file-copy strong,.reader-file-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-file-copy strong { font-size: 14px; font-weight: 550; }
.reader-file-copy span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.reader-format-note { display: grid; margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 24px; }
.reader-format-note h2 { margin: 0 0 8px; font-size: 18px; font-weight: 550; }
.reader-format-note p { margin: 0; color: var(--muted); line-height: 1.65; }
.reader-preview-dialog { width: min(1500px,calc(100vw - 30px)); height: min(940px,calc(100vh - 30px)); padding: 0; color: var(--ink); background: var(--surface); border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgba(51,57,66,.25); overflow: hidden; }
.reader-preview-dialog::backdrop { background: rgba(51,57,66,.52); backdrop-filter: blur(3px); }
.reader-preview-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.reader-preview-header { min-height: 60px; padding: 10px 16px 10px 20px; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.reader-preview-header>div { min-width: 0; }
.reader-preview-header strong { display: inline-block; max-width: min(70vw,900px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 550; }
.reader-preview-header span { margin-left: 12px; color: var(--muted); font-size: 13px; }
.reader-preview-toolbar { min-height: 56px; padding: 8px 16px; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.reader-toolbar-group { gap: 6px; }
.reader-zoom-label { min-width: 64px; }
.reader-preview-canvas { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; touch-action: none; }
.checkerboard { background-color: #f3f1ef; background-image: linear-gradient(45deg,#e7e3e0 25%,transparent 25%),linear-gradient(-45deg,#e7e3e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e3e0 75%),linear-gradient(-45deg,transparent 75%,#e7e3e0 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }
#previewImage { display: block; max-width: none; max-height: none; user-select: none; transform-origin: center center; will-change: transform; }
.reader-preview-canvas.can-pan { cursor: grab; }
.reader-preview-canvas.is-panning { cursor: grabbing; }
.reader-loading,.reader-preview-error { max-width: 520px; padding: 28px; color: var(--muted); text-align: center; background: rgba(255,255,255,.9); border-radius: 17px; }
.reader-loading span { display: block; width: 34px; height: 34px; margin: 0 auto 12px; border: 3px solid rgba(207,75,69,.18); border-top-color: var(--brand); border-radius: 50%; animation: reader-spin .8s linear infinite; }
.reader-loading p,.reader-preview-error p { margin: 0; line-height: 1.6; }
.reader-preview-error h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 550; }
.reader-preview-meta { display: flex; min-height: 48px; padding: 10px 18px; align-items: center; justify-content: flex-end; gap: 22px; color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }
.reader-toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: min(420px,calc(100vw - 32px)); padding: 12px 16px; color: #fff; background: #3f444d; border-radius: 12px; box-shadow: var(--shadow); }
@keyframes reader-spin { to { transform: rotate(360deg); } }
@media (max-width:1080px) { .reader-browser-toolbar { align-items: stretch; flex-direction: column; } .reader-controls { flex-wrap: wrap; } .reader-search { width: min(420px,100%); flex: 1 1 260px; } .reader-control-field { flex: 1 1 145px; } }
@media (max-width:640px) { .reader-topbar { align-items: flex-start; flex-direction: column; gap: 4px; } .reader-shell { width: min(100% - 20px,1680px); padding-top: 22px; } .reader-gallery { --thumb-width: 132px; padding: 12px; gap: 10px; } .reader-gallery[data-size="large"] { --thumb-width: 180px; } .reader-format-note { grid-template-columns: 1fr; } .reader-preview-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; } .reader-preview-toolbar { flex-wrap: wrap; justify-content: center; } .reader-text-button { display: none; } .reader-preview-meta { justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; } }