/* chmod777: restrained dark gallery and publishing interface. No external fonts. */
:root {
  color-scheme: dark;
  --bg: #0c0f14;
  --panel: #141922;
  --panel-raised: #191f2a;
  --soft: #202733;
  --line: #2a3240;
  --line-strong: #3b4554;
  --text: #f0f2f6;
  --muted: #9ba5b5;
  --faint: #747f90;
  --accent: #ac9cff;
  --accent-strong: #bfafff;
  --danger: #f38d91;
  --radius: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-strong); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.overline, .micro-label, .meta, .card-meta { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .085em; text-transform: uppercase; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
h1, h2, h3, h4 { line-height: 1.17; letter-spacing: -.035em; }
p { margin-top: 0; }

/* Site header: quiet editorial framing for the artwork. */
.site-header {
  position: relative;
  z-index: 10;
  isolation: isolate;
  border-bottom: 1px solid #303747;
  background: radial-gradient(ellipse 480px 180px at 14% -60%, rgba(146, 123, 246, .14), transparent 85%), #10141c;
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #baaaff 0%, #8067dd 13%, rgba(128, 103, 221, .25) 28%, transparent 43%);
  pointer-events: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 94px;
}
.header-brand-group { display: flex; align-items: center; min-width: 0; gap: 27px; }
.brand { display: inline-flex; flex: none; align-items: center; line-height: 1; }
.brand-logo { display: block; width: 183px; height: auto; max-height: 51px; object-fit: contain; transition: opacity .18s ease; }
.brand:hover .brand-logo { opacity: .84; }
.header-identity { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding-left: 25px; border-left: 1px solid #353c4b; min-width: 0; }
.header-eyebrow { color: #bcadff; font-size: 10px; font-weight: 750; line-height: 1.25; letter-spacing: .15em; white-space: nowrap; }
.header-description { color: #a2aabc; font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 265px; }
.primary-nav { display: flex; flex: none; align-items: center; gap: 3px; padding: 6px; border: 1px solid #323a49; border-radius: 12px; background: #171c26; box-shadow: 0 2px 15px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025); }
.primary-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; color: #a6afbf; font-size: 13px; line-height: 1; font-weight: 650; border: 1px solid transparent; border-radius: 7px; padding: 0 16px; transition: color .16s, background .16s, border-color .16s; }
.primary-nav a:hover { color: #f1efff; background: #252b39; }
.primary-nav a[aria-current="page"] { color: #eeeaff; background: #302c43; border-color: #4a425e; }
.primary-nav .nav-separator { display: block; flex: none; width: 1px; height: 21px; margin: 0 6px; background: #394151; }
.primary-nav .nav-rss { padding: 0 12px; color: #b8abff; }
.primary-nav .nav-rss:hover { color: #e5dfff; background: #2a2740; }
.primary-nav .nav-rss svg { flex: none; }
@media (max-width: 900px) {
  .header-identity { display: none; }
}
.site-footer { margin-top: 92px; border-top: 1px solid var(--line); }
.footer-inner { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: var(--faint); font-size: 12px; }
.footer-inner strong { display: block; color: var(--text); font-size: 16px; letter-spacing: -.045em; }
.footer-note { display: block; margin-top: 2px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.flash-stack { padding-top: 18px; }
.flash { padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); font-size: 13px; margin-bottom: 10px; }
.flash-error, .flash-danger { border-color: #71414a; color: #ffd8dc; }
.flash-success { border-color: #315748; }

/* Shared buttons */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel-raised); color: var(--text); font-size: 13px; line-height: 1.3; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.button:hover, .btn:hover { background: var(--soft); border-color: #616c80; color: var(--text); }
.button-primary, .btn-dark { color: #10111a; border-color: var(--accent); background: var(--accent); }
.button-primary:hover, .btn-dark:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: #10111a; }
.button-secondary, .btn-outline { background: transparent; }
.btn-danger { color: var(--danger); border-color: #733e48; background: transparent; }
.btn-danger:hover { background: #361e27; color: #ffd4d7; border-color: #a75c69; }
.button-full { width: 100%; }
.quiet-link { font-weight: 650; font-size: 13px; color: var(--accent); }

/* Homepage */
.public-home { padding-top: 68px; }
.intro { margin: 0 0 70px; max-width: 780px; }
.intro-overline { display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .105em; color: var(--muted); font-size: 11px; font-weight: 700; }
.online-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 100%; }
.intro h1 { font-size: clamp(32px, 4.6vw, 58px); letter-spacing: -.055em; line-height: 1.09; font-weight: 750; margin: 21px 0 17px; text-wrap: balance; }
.intro p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 650px; margin: 0; }
.section-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.section-bar h2 { font-size: 17px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.section-bar > span, .section-bar p { color: var(--faint); font-size: 12px; margin: 0; }
.section-bar-action { align-items: flex-end; }
.section-bar-action p { margin-top: 5px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature-image { display: block; padding: 16px; background: #11151d; border-bottom: 1px solid var(--line); }
.feature-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #0a0c10; border-radius: 4px; }
.feature-details { padding: 26px 29px 29px; display: flex; gap: 28px; justify-content: space-between; align-items: center; }
.feature-info { min-width: 0; }
.feature-info h3 { font-size: clamp(20px, 2.6vw, 29px); margin: 8px 0 8px; font-weight: 730; }
.feature-info h3 a:hover { color: var(--accent); }
.feature-info p { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 640px; margin: 0; }
.meta-separator { color: var(--line-strong); padding: 0 6px; }
.feature-buttons { display: flex; gap: 9px; flex-shrink: 0; }
.recent-section { margin-top: 76px; }
.comic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 37px 22px; }
.comic-card { display: block; min-width: 0; }
.comic-card:hover { color: var(--text); }
.comic-card-image { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; transition: border-color .18s; }
.comic-card-image img { width: 100%; height: 100%; object-fit: cover; }
.comic-card:hover .comic-card-image { border-color: #646d82; }
.card-meta { margin-top: 14px; font-size: 10px; }
.card-meta span { padding: 0 4px; }
.comic-card h2, .comic-card h3 { margin: 7px 0 0; font-size: 17px; font-weight: 680; line-height: 1.4; letter-spacing: -.02em; }
.empty-feature, .empty-archive, .admin-empty { background: var(--panel); border: 1px dashed var(--line-strong); padding: 46px; border-radius: var(--radius); }
.empty-feature h3, .empty-archive h2, .admin-empty h3 { font-size: 22px; margin: 0 0 10px; }
.empty-feature p, .empty-archive p, .admin-empty p { color: var(--muted); margin: 0 0 18px; }

/* Archive and comic pages */
.standard-page, .detail-page { padding-top: 57px; }
.page-intro { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 26px; }
.page-intro h1, .detail-heading h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 750; margin: 10px 0 8px; }
.page-intro p { font-size: 15px; color: var(--muted); margin: 0; }
.page-count { color: var(--faint); font-size: 12px; white-space: nowrap; margin-bottom: 9px; }
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 26px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.filter-bar a { border: 1px solid var(--line); border-radius: 7px; color: var(--muted); padding: 7px 13px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.filter-bar a:hover, .filter-bar a[aria-current="page"] { background: var(--soft); color: var(--text); border-color: var(--line-strong); }
.archive-grid { padding-top: 8px; }
.detail-breadcrumb { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 0 21px; color: var(--faint); font-size: 12px; }
.detail-breadcrumb a { color: var(--muted); }
.detail-heading { margin: 32px 0 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.detail-heading h1 { margin: 8px 0 0; }
.detail-number { font-size: 14px; font-weight: 700; color: var(--faint); }
.detail-art { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #11151d; padding: 14px; }
.detail-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.detail-info { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.detail-info p { color: var(--muted); margin: 0; line-height: 1.7; }
.detail-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.issue-nav { margin-top: 63px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.issue-nav > div { min-width: 0; }
.issue-nav a { display: flex; flex-direction: column; gap: 7px; padding: 14px 0; }
.issue-nav a:hover strong { color: var(--accent); }
.issue-nav small { color: var(--faint); font-size: 11px; }
.issue-nav strong { font-size: 16px; font-weight: 690; overflow-wrap: anywhere; }
.issue-next { text-align: right; }
.issue-nav-placeholder { display: block; padding: 15px 0; color: var(--faint); font-size: 12px; }
.message-page { min-height: 56vh; padding: 95px 0 60px; }
.message-page h1 { font-size: clamp(30px, 4.5vw, 50px); margin: 15px 0; }
.message-page p { color: var(--muted); margin-bottom: 25px; }

/* Admin layout, list and statistics */
.admin-body { background: #0c1016; }
.admin-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 43px; padding-top: 39px; min-height: 680px; }
.admin-sidebar { min-width: 0; border-right: 1px solid var(--line); padding-right: 22px; }
.admin-sidebar-heading { padding: 13px 13px 20px; border-bottom: 1px solid var(--line); }
.admin-sidebar-heading .overline { display: block; margin-bottom: 6px; }
.admin-sidebar-heading strong { font-size: 19px; letter-spacing: -.04em; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; }
.admin-nav a { padding: 10px 13px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.admin-nav a:hover { background: var(--panel); color: var(--text); }
.admin-nav a[aria-current="page"] { background: #242438; color: #d9d0ff; border-color: #43405f; }
.admin-sidebar-bottom { padding: 26px 13px; margin-top: 25px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.admin-sidebar-bottom a, .admin-sidebar-bottom button { display: inline-block; padding: 0; border: none; background: none; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: left; }
.admin-sidebar-bottom a:hover, .admin-sidebar-bottom button:hover { color: var(--text); }
.admin-content { min-width: 0; }
.admin-page-heading, .editor-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.admin-page-heading h1, .editor-head h2 { margin: 7px 0 8px; font-size: clamp(27px, 3vw, 38px); font-weight: 750; }
.admin-page-heading p, .editor-head p { color: var(--muted); font-size: 13px; margin: 0; }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 46px; }
.stat { padding: 23px 25px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.stat span { font-size: 12px; color: var(--muted); display: block; }
.stat strong { display: block; font-size: 32px; line-height: 1.25; margin-top: 8px; font-weight: 750; }
.admin-list-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.admin-list-header h2 { font-size: 18px; font-weight: 720; margin: 0; }
.admin-list-header p { font-size: 12px; color: var(--faint); margin: 3px 0 0; }
.admin-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--panel); }
.admin-table { width: 100%; min-width: 660px; border-collapse: collapse; }
.admin-table thead { background: var(--panel-raised); }
.admin-table th { text-align: left; font-size: 10px; letter-spacing: .08em; color: var(--faint); padding: 16px; font-weight: 700; }
.admin-table td { border-top: 1px solid var(--line); padding: 12px 16px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.admin-comic-cell { display: flex; gap: 13px; align-items: center; }
.admin-comic-cell img { width: 88px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.admin-comic-cell strong { max-width: 280px; display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 13px; font-weight: 650; }
.mono { font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: 14px; justify-content: flex-end; }
.row-actions a { color: var(--accent); font-size: 12px; font-weight: 650; }
.status { display: inline-flex; padding: 4px 9px; border: 1px solid var(--line); border-radius: 30px; font-size: 11px; font-weight: 650; }
.status-live { background: #18372f; border-color: #315e4e; color: #a3e2c4; }
.status-draft { background: var(--soft); color: var(--muted); }
.status-scheduled { background: #2d2940; border-color: #4d4366; color: #c5b5ff; }

/* Forms and watermark editor */
.editor-layout, .settings-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 30px; align-items: start; }
.editor-form, .settings-main { min-width: 0; }
.editor-head { margin-bottom: 29px; }
.back-link { display: inline-block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.back-link:hover { color: var(--text); }
.form-section { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 15px; border-bottom: 1px solid var(--line); padding: 0 0 32px; margin-bottom: 33px; }
.form-section-number { color: var(--faint); font-size: 12px; font-weight: 750; padding-top: 6px; }
.form-section-body { min-width: 0; }
.form-section-body h3, .settings-form h3, .watermark-settings h3 { margin: 0 0 21px; font-size: 19px; font-weight: 710; }
.editor-form label:not(.watermark-switch), .settings-form label, .watermark-upload-form label, .stack-form label { display: block; font-size: 11px; color: var(--muted); font-weight: 680; letter-spacing: .06em; text-transform: uppercase; margin: 19px 0 8px; }
.editor-form label span:not(.optional) { color: var(--accent); }
.optional { color: var(--faint); font-weight: 500; }
.editor-form input:not([type="checkbox"]):not([type="file"]), .editor-form select, .editor-form textarea, .settings-form input, .settings-form textarea, .stack-form input { display: block; width: 100%; min-height: 43px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.45; }
.editor-form textarea, .settings-form textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px #ac9cff2c; }
input::placeholder, textarea::placeholder { color: #697487; }
.editor-form select { color-scheme: dark; }
.file-field { border: 1px dashed #586376; background: var(--panel); border-radius: 8px; padding: 15px; }
.file-field input[type="file"] { width: 100%; color: var(--muted); font-size: 12px; }
.file-field input::file-selector-button, .watermark-upload-form input::file-selector-button { background: var(--soft); color: var(--text); border: 1px solid var(--line-strong); border-radius: 5px; padding: 8px 13px; margin-right: 13px; cursor: pointer; }
.file-field-text { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.file-field-text strong { color: var(--text); font-size: 12px; font-weight: 650; }
.file-field-text span { color: var(--faint); font-size: 11px; }
.form-two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-hint, .watermark-quality-note { color: var(--muted); font-size: 12px; line-height: 1.65; }
.form-hint { margin: 12px 0 0; }
.editor-buttons { display: flex; gap: 10px; align-items: center; padding-left: 40px; }
.editor-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card, .sidebar-tip { border: 1px solid var(--line); border-radius: 9px; padding: 22px; background: var(--panel); }
.sidebar-card h3 { font-size: 19px; margin: 14px 0; font-weight: 710; }
.sidebar-card p, .sidebar-tip p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.sidebar-card p strong { color: var(--text); }
.sidebar-rule { height: 1px; background: var(--line); margin-top: 20px; }
.sidebar-tip strong { color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.danger-zone { margin: 50px 0 35px; border: 1px solid #633640; border-radius: 9px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.danger-zone h3 { font-size: 17px; margin: 7px 0; }
.danger-zone p { margin: 0; color: var(--muted); font-size: 12px; }
.settings-main { display: flex; flex-direction: column; gap: 24px; }
.settings-form, .watermark-settings { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.settings-form h3 { margin-bottom: 25px; }
.settings-form .btn { margin-top: 25px; }
.watermark-settings > p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: -6px 0 20px; }
.watermark-settings h3 { margin: 7px 0 14px; }
.watermark-upload-form input[type="file"] { display: block; width: 100%; border: 1px dashed var(--line-strong); background: var(--bg); color: var(--muted); padding: 14px; border-radius: 7px; font-size: 12px; }
.watermark-upload-form .btn { margin-top: 15px; }
.watermark-logo-preview { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px; border: 1px solid var(--line-strong); border-radius: 7px; margin: 19px 0; background-color: #20242e; background-image: linear-gradient(45deg, #292e3a 25%, transparent 25%), linear-gradient(-45deg, #292e3a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292e3a 75%), linear-gradient(-45deg, transparent 75%, #292e3a 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.watermark-logo-preview img { width: auto; height: auto; max-width: 55%; max-height: 90px; object-fit: contain; }
.watermark-logo-preview span { color: var(--muted); font-size: 10px; font-weight: 700; }
.watermark-remove-form { margin: 20px 0 8px; }
.watermark-remove-button { padding: 0; background: transparent; border: none; color: var(--danger); font-size: 12px; }
.watermark-remove-button:hover { text-decoration: underline; }
.watermark-workbench { margin-top: 22px; padding: 17px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.watermark-workbench-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; }
.watermark-workbench-heading h4 { font-size: 17px; font-weight: 700; margin: 6px 0 0; }
.watermark-size-note { font-size: 10px; color: var(--faint); text-align: right; }
.watermark-stage { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: #0b0d11; }
.watermark-stage.is-empty { aspect-ratio: 16 / 9; }
.watermark-base { display: block; width: 100%; height: auto; }
.watermark-stage .watermark-stamp { position: absolute; margin: 0; max-width: none; max-height: none; object-fit: fill; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.watermark-stage .watermark-stamp:active { cursor: grabbing; }
.watermark-stage.is-draggable { touch-action: none; cursor: crosshair; }
.watermark-stamp:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.watermark-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--faint); text-align: center; font-size: 12px; }
.watermark-switch { display: flex; align-items: flex-start; gap: 12px; margin: 17px 0 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.watermark-switch input[type="checkbox"] { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 17px; }
.watermark-switch strong { display: block; font-size: 12px; line-height: 1.5; }
.watermark-switch small { display: block; color: var(--muted); font-size: 11px; line-height: 1.65; margin-top: 4px; }
.watermark-setup-hint { font-size: 12px; line-height: 1.6; background: #2b2838; border: 1px solid #53496a; border-radius: 7px; padding: 12px; }
.watermark-setup-hint a { text-decoration: underline; color: var(--accent); }
.watermark-quality-note { margin: 14px 0 0; }

/* Sign-in */
.auth-layout { min-height: 59vh; display: flex; justify-content: center; align-items: flex-start; padding-top: 93px; }
.auth-card { width: min(100%, 405px); padding: 30px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.auth-card h1 { font-size: 31px; margin: 9px 0 10px; }
.auth-card > p { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.stack-form { display: flex; flex-direction: column; gap: 4px; }
.stack-form label { margin-top: 12px; }
.stack-form button { margin-top: 18px; }
.form-error, .form-alert { color: #ffd2d8; border: 1px solid #75444d; background: #33212b; padding: 12px; border-radius: 6px; font-size: 12px; }

@media (max-width: 1050px) {
  .editor-layout, .settings-wrap { grid-template-columns: minmax(0, 1fr); }
  .editor-sidebar { flex-direction: row; }
  .editor-sidebar > * { flex: 1 1 0; }
}
@media (max-width: 800px) {
  .comic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 25px; padding-top: 25px; }
  .admin-sidebar { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 15px; }
  .admin-sidebar-heading { display: none; }
  .admin-nav { flex-direction: row; padding-top: 0; gap: 7px; overflow-x: auto; }
  .admin-nav a { white-space: nowrap; }
  .admin-sidebar-bottom { border: none; padding: 12px 13px 0; margin: 0; flex-direction: row; gap: 24px; }
  .feature-details { align-items: flex-start; flex-direction: column; }
  .feature-buttons { flex-wrap: wrap; }
  .site-footer { margin-top: 65px; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 30px, 1160px); }
  .header-inner { min-height: 74px; gap: 10px; }
  .header-brand-group { gap: 0; }
  .brand-logo { width: 139px; max-height: 40px; }
  .primary-nav { gap: 0; padding: 4px; border-radius: 10px; }
  .primary-nav a { min-height: 35px; padding: 0 11px; font-size: 12px; }
  .primary-nav .nav-separator { height: 16px; margin: 0 3px; }
  .primary-nav .nav-rss { padding: 0 8px; }
  .primary-nav .nav-rss span { display: none; }
  .public-home { padding-top: 46px; }
  .intro { margin-bottom: 46px; }
  .intro h1 { font-size: clamp(31px, 8.6vw, 43px); }
  .intro p { font-size: 14px; }
  .section-bar { align-items: start; }
  .section-bar > span { text-align: right; }
  .feature-image { padding: 6px; }
  .feature-details { padding: 18px; }
  .recent-section { margin-top: 52px; }
  .comic-grid { grid-template-columns: 1fr; gap: 28px; }
  .standard-page, .detail-page { padding-top: 38px; }
  .page-intro { align-items: flex-start; }
  .page-count { white-space: normal; text-align: right; }
  .detail-heading { align-items: flex-start; }
  .detail-art { padding: 5px; }
  .detail-info { flex-direction: column; align-items: stretch; }
  .detail-actions { justify-content: flex-start; }
  .detail-actions .button { flex: 1 1 auto; }
  .issue-nav { gap: 15px; }
  .issue-nav strong { font-size: 14px; }
  .footer-inner { align-items: flex-start; flex-direction: column; padding: 28px 0; gap: 15px; }
  .admin-page-heading { flex-direction: column; align-items: flex-start; }
  .stats-row { gap: 7px; }
  .stat { padding: 15px 12px; }
  .stat strong { font-size: 26px; }
  .stat span { font-size: 11px; }
  .form-section { grid-template-columns: 1fr; gap: 2px; }
  .form-section-number { padding-top: 0; }
  .form-two-cols { grid-template-columns: 1fr; gap: 0; }
  .editor-buttons { padding-left: 0; flex-wrap: wrap; }
  .editor-sidebar { flex-direction: column; }
  .watermark-workbench { padding: 11px; }
  .watermark-workbench-heading { flex-direction: column; align-items: flex-start; gap: 5px; }
  .watermark-size-note { text-align: left; }
  .settings-form, .watermark-settings { padding: 17px; }
  .danger-zone { flex-direction: column; align-items: flex-start; }
  .auth-layout { padding-top: 40px; }
  .auth-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Scheduled publishing queue */
.dashboard-upcoming { margin: -12px 0 42px; }
.schedule-arrange-link { font-size: 12px; color: var(--accent); font-weight: 700; }
.schedule-arrange-link:hover { color: var(--text); }
.upcoming-list { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); overflow: hidden; }
.upcoming-entry { display: flex; align-items: center; gap: 14px; padding: 11px 16px; }
.upcoming-entry + .upcoming-entry { border-top: 1px solid var(--line); }
.upcoming-index { width: 21px; flex-shrink: 0; text-align: center; font-size: 12px; color: var(--faint); }
.upcoming-entry img { width: 84px; height: 47px; flex-shrink: 0; object-fit: cover; border-radius: 5px; }
.upcoming-entry > div { min-width: 0; flex: 1 1 auto; }
.upcoming-entry strong { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.upcoming-entry small { font-size: 11px; color: var(--faint); }
.upcoming-entry time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.schedule-explanation { padding: 19px 22px; margin: 0 0 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.schedule-explanation strong { font-size: 14px; }
.schedule-explanation p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.schedule-list { display: flex; flex-direction: column; padding: 0; margin: 0; gap: 8px; list-style: none; }
.schedule-row { display: flex; align-items: center; gap: 15px; padding: 13px 16px; min-height: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; transition: border-color .15s, background .15s; }
.schedule-row:hover { border-color: var(--line-strong); }
.schedule-row.is-dragging { opacity: .78; border-color: var(--accent); background: var(--soft); }
.schedule-grip { flex: 0 0 19px; text-align: center; color: var(--faint); font-size: 23px; cursor: grab; user-select: none; letter-spacing: -.13em; }
.schedule-grip:active { cursor: grabbing; }
.schedule-position { flex: 0 0 22px; font-weight: 750; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.schedule-thumb { flex: 0 0 108px; width: 108px; height: 61px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line-strong); }
.schedule-comic-info { min-width: 0; flex: 1 1 180px; }
.schedule-comic-info strong { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.schedule-comic-info span { font-size: 11px; color: var(--faint); display: block; margin-top: 4px; }
.schedule-slot { flex: 0 0 155px; text-align: right; }
.schedule-slot span { display: block; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.schedule-slot strong { color: var(--text); display: block; font-size: 12px; margin-top: 4px; font-weight: 650; white-space: nowrap; }
.schedule-controls { display: flex; gap: 5px; }
.schedule-arrow { display: grid; place-items: center; width: 32px; height: 34px; background: var(--soft); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; font-size: 16px; cursor: pointer; }
.schedule-arrow:hover:not(:disabled) { border-color: var(--accent); }
.schedule-arrow:disabled { opacity: .3; cursor: not-allowed; }
.schedule-edit { padding: 6px 3px; font-size: 12px; color: var(--accent); }
.schedule-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 50px; }
.schedule-save-bar p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.schedule-dirty .schedule-save-bar p { color: var(--accent); }
.schedule-save-bar .button:disabled { opacity: .45; cursor: default; }
@media (max-width: 900px) {
  .schedule-row { flex-wrap: wrap; gap: 10px; }
  .schedule-comic-info { flex-basis: calc(100% - 215px); }
  .schedule-slot { flex: 1 1 auto; text-align: left; padding-left: 55px; }
}
@media (max-width: 550px) {
  .schedule-row { padding: 12px; }
  .schedule-thumb { flex-basis: 74px; width: 74px; height: 42px; }
  .schedule-grip { flex-basis: 14px; }
  .schedule-position { flex-basis: 16px; font-size: 13px; }
  .schedule-comic-info { flex-basis: calc(100% - 126px); }
  .schedule-slot { padding-left: 0; }
  .schedule-save-bar { align-items: stretch; flex-direction: column; }
  .schedule-save-bar .button { text-align: center; }
  .upcoming-entry { gap: 8px; padding: 10px; }
  .upcoming-index { width: 15px; }
  .upcoming-entry img { width: 66px; height: 38px; }
  .upcoming-entry time { font-size: 11px; }
}

@media (max-width: 370px) {
  .brand-logo { width: 121px; }
  .primary-nav a { padding: 0 8px; }
  .primary-nav .nav-rss { padding: 0 6px; }
  .primary-nav .nav-separator { margin: 0 1px; }
}

/* chmod777 | Purple editorial theme. Public-facing presentation only.
   The controls, permissions, routes, and content model are unchanged. */
:root {
  --bg: #0b0d16;
  --panel: #141827;
  --panel-raised: #1b2031;
  --soft: #23283b;
  --line: #30354f;
  --line-strong: #505573;
  --text: #f4f2ff;
  --muted: #b2b5ca;
  --faint: #9298b6;
  --accent: #bf75ff;
  --accent-strong: #db9bff;
  --radius: 12px;
}
body { background: var(--bg); }
.wrap { width: min(1190px, calc(100% - 52px)); }
.site-header {
  background: linear-gradient(103deg, #0c0f1b 0%, #111020 56%, #101020 100%);
  border-bottom: 1px solid #6d2cc2;
  box-shadow: 0 1px 0 #722ae6, 0 8px 35px rgba(11, 4, 29, .12);
}
.site-header::before { display: none; }
.header-inner { min-height: 83px; }
.header-brand-group { gap: 26px; }
.brand-logo { width: 184px; max-height: 56px; }
.header-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  border-left: 1px solid #5a526f;
  padding-left: 27px;
  min-width: 0;
}
.header-calendar { flex: none; color: #c777ff; }
.header-eyebrow { color: #f5eeff; font-size: 11px; font-weight: 800; letter-spacing: .19em; line-height: 1.4; white-space: nowrap; }
.primary-nav { border: 0; box-shadow: none; background: transparent; padding: 0; gap: 9px; }
.primary-nav a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #e1ddeb;
  font-size: 13px;
  font-weight: 700;
  padding: 0 18px;
}
.primary-nav a[aria-current="page"] {
  background: linear-gradient(135deg, #7122f2, #aa39fb);
  color: #fff;
  border-color: #9d47f7;
  box-shadow: 0 4px 18px rgba(114, 36, 247, .25), inset 0 1px rgba(255,255,255,.18);
}
.primary-nav a:hover { background: #2c213f; color: white; }
.primary-nav a[aria-current="page"]:hover { background: linear-gradient(135deg, #7828f8, #aa39fb); }
.primary-nav .nav-rss { color: #e8e4f2; gap: 8px; padding: 0 11px; }
.primary-nav .nav-rss:hover { color: white; background: #2c213f; }

/* A spacious typographic hero with desktop-only artwork. */
.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 850px 400px at 93% 82%, rgba(114, 22, 220, .22), transparent 78%),
    radial-gradient(ellipse 600px 380px at -10% 102%, rgba(101, 19, 187, .27), transparent 70%),
    linear-gradient(118deg, #0d101e 0%, #111120 54%, #120c25 100%);
  border-bottom: 1px solid #4b236d;
}
.hero-band::after {
  content: "";
  position: absolute;
  inset: auto -10% -112px -10%;
  height: 155px;
  pointer-events: none;
  z-index: 0;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(137, 35, 254, .38), rgba(104, 18, 187, .07) 55%, transparent 78%);
  transform: rotate(-3deg);
}
.hero-dots {
  position: absolute;
  right: 1%; top: 15px;
  width: min(240px, 27vw); height: 155px;
  opacity: .44;
  background-image: radial-gradient(circle, #7232b5 2px, transparent 2.5px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(to left, black, transparent);
  mask-image: linear-gradient(to left, black, transparent);
  pointer-events: none;
}
.hero-inner { position: relative; display: flex; align-items: center; padding: 66px 0 75px; }
.hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1080px; }
.hero-copy .intro-overline { color: #bfafdb; font-size: 11px; font-weight: 790; letter-spacing: .14em; }
.hero-copy .online-dot { background: #c973ff; box-shadow: 0 0 0 3px #ca72ff12; }
.hero-copy h1 {
  margin: 20px 0 25px;
  max-width: 1070px;
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 790;
  line-height: 1.18;
  letter-spacing: -.033em;
  text-shadow: 0 1px 16px rgba(0,0,0,.12);
}
.hero-highlight { color: #ca77ff; position: relative; display: inline-block; }
.hero-highlight::after {
  content: "";
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 2%, #ab37e9 24%, #df63f6 70%, transparent);
  position: absolute;
  bottom: -7px; left: 2%; right: 0;
  transform: rotate(-3deg);
  opacity: .85;
}
.hero-copy p { max-width: 690px; color: #c8c3dc; font-size: 17px; line-height: 1.7; margin-bottom: 25px; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.hero-actions .button { min-height: 45px; padding: 10px 21px; font-size: 13px; border-radius: 9px; }
.hero-actions .button-primary, .feature-buttons .button-primary {
  color: white;
  border-color: #a14ef4;
  background: linear-gradient(122deg, #741ff5, #bc57f7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 28px rgba(85,18,173,.18);
}
.hero-actions .button-primary:hover, .feature-buttons .button-primary:hover { color: white; border-color: #d28dff; background: linear-gradient(122deg, #842efb, #c46cff); }
.hero-actions .button-secondary { color: #f3edff; border-color: #525075; background: #141627ce; }
.hero-actions .button-secondary:hover { background: #26203d; }
.public-home { padding-top: 32px; }
.public-home .section-bar { margin-bottom: 18px; }
.public-home .section-bar h2 { position: relative; padding-left: 21px; font-size: 22px; line-height: 1.35; letter-spacing: -.04em; }
.public-home .section-bar h2::before { content: ""; position: absolute; width: 4px; left: 0; top: 3px; bottom: 3px; border-radius: 4px; background: linear-gradient(#a529fa,#d04cff); }
.weekly-chip { display: flex; align-items: center; gap: 7px; border: 1px solid #5b467d; background: #29213c; border-radius: 9px; color: #dfc5ff !important; font-size: 11px !important; font-weight: 650; padding: 7px 10px; white-space: nowrap; }
.feature { border-color: #414264; background: linear-gradient(#171a2d, #161a28); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.feature-image { padding: 13px 13px 0; background: #171a2b; border-bottom: 0; }
.feature-image img { border-radius: 8px 8px 0 0; background: #090a11; }
.feature-details { padding: 23px 22px; border-top: 1px solid #343a57; }
.feature-info h3 { margin: 8px 0 0; font-size: clamp(22px, 2.7vw, 31px); }
.feature-info p { margin-top: 7px; }
.feature-buttons .button { min-height: 42px; border-radius: 9px; }
.feature-buttons .button-secondary { background: #171a2b; border-color: #454862; }
.feature-buttons .button-secondary:hover { background: #28223d; }
.meta, .card-meta { color: #a8b3d4; }
.recent-section { margin-top: 49px; }
.recent-section .section-bar { align-items: center; }
.recent-section .section-bar p { margin: 5px 0 0 21px; color: #a2a7c0; font-size: 12px; }
.quiet-link { color: #c88dff; }
.quiet-link:hover { color: #e9bdff; }
.empty-archive { display: flex; align-items: center; gap: 18px; background: #171a29; color: #a7acc4; border: 1px solid #3e4666; border-radius: 11px; padding: 35px 35px; min-height: 102px; }
.empty-archive svg { flex: none; color: #d0c5f6; }
.empty-archive p { margin: 0; color: #b4b8cc; }
.comic-card-image { border-color: #414362; }
.comic-card:hover .comic-card-image { border-color: #a462e8; }
.standard-page .filter-bar a[aria-current="page"] { background: #312041; border-color: #8654bf; }
.detail-art { border-color: #424362; background: #171b29; }
.site-footer { background: linear-gradient(90deg, #0e101c, #101020); border-color: #34314c; margin-top: 56px; }
.footer-inner { min-height: 97px; }
.footer-brand img { width: 137px; height: auto; max-height: 46px; object-fit: contain; }
.footer-brand .footer-note { margin-top: 1px; color: #a3abc4; }
.footer-inner small { white-space: nowrap; }

@media (max-width: 1000px) {
  .header-identity { gap: 10px; padding-left: 19px; }
  .header-eyebrow { letter-spacing: .11em; font-size: 10px; }
  .hero-copy { max-width: 100%; }
  .hero-copy h1 { font-size: clamp(40px, 5.5vw, 58px); }
}
@media (max-width: 810px) {
  .header-identity { display: none; }
  .hero-copy { max-width: 100%; }
  .hero-copy p { max-width: 660px; }
  .hero-band { background: linear-gradient(110deg, #0d101c, #120e22); }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 30px, 1190px); }
  .header-inner { min-height: 68px; gap: 8px; }
  .brand-logo { width: 132px; }
  .primary-nav { gap: 1px; }
  .primary-nav a { min-height: 36px; padding: 0 10px; font-size: 11px; border-radius: 8px; }
  .primary-nav .nav-rss { gap: 4px; padding: 0 8px; }
  .primary-nav .nav-rss svg { width: 13px; }
  .hero-inner { align-items: flex-start; padding: 48px 0 58px; }
  .hero-copy h1 { margin: 19px 0 22px; font-size: clamp(31px, 8.6vw, 42px); line-height: 1.24; letter-spacing: -.025em; max-width: 100%; }
  .hero-copy p { font-size: 15px; line-height: 1.7; max-width: 100%; margin-bottom: 23px; }
  .hero-actions { gap: 9px; }
  .hero-actions .button { padding: 10px 12px; font-size: 12px; min-height: 42px; }
  .public-home { padding-top: 27px; }
  .public-home .section-bar h2 { font-size: 19px; }
  .weekly-chip { font-size: 10px !important; }
  .feature-image { padding: 7px 7px 0; }
  .feature-details { padding: 18px; }
  .recent-section { margin-top: 42px; }
  .empty-archive { padding: 23px 20px; }
  .footer-brand img { width: 126px; }
}
@media (max-width: 360px) {
  .brand-logo { width: 118px; }
  .primary-nav a { padding: 0 8px; }
  .primary-nav .nav-rss { padding: 0 6px; }
  .hero-inner { padding: 42px 0 52px; }
  .hero-actions .button { padding: 10px 11px; }
}

/* Desktop mascot: positioned independently so it never increases hero height. */
.hero-cat { display: none; }
@media (min-width: 1081px) {
  .hero-copy { width: 100%; max-width: calc(100% - 312px); }
  .hero-copy h1 { font-size: clamp(43px, 4.1vw, 55px); line-height: 1.21; letter-spacing: -.028em; }
  .hero-copy p { max-width: 710px; }
  .hero-cat {
    display: block;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: min(27vw, 318px);
    height: auto;
    max-height: 270px;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    user-select: none;
  }
}


/* Compact homepage hero: the title and mascot are all that's needed. */
.hero-inner { padding: 35px 0 37px; }
.hero-copy h1 {
  margin: 0;
  max-width: 890px;
  font-size: clamp(34px, 3.7vw, 48px);
  line-height: 1.17;
  letter-spacing: -.028em;
}
.hero-highlight::after { height: 5px; bottom: -6px; }
.hero-dots { height: 110px; opacity: .27; }
@media (min-width: 1081px) {
  .hero-copy { max-width: calc(100% - 265px); }
  .hero-copy h1 { font-size: clamp(37px, 3.35vw, 47px); line-height: 1.18; }
  .hero-cat { width: min(21vw, 240px); max-height: 160px; }
}
@media (max-width: 1080px) {
  .hero-copy { max-width: 100%; }
  .hero-copy h1 { font-size: clamp(34px, 4.5vw, 45px); }
}
@media (max-width: 560px) {
  .hero-inner { padding: 29px 0 33px; }
  .hero-copy h1 { margin: 0; font-size: clamp(29px, 8.1vw, 38px); line-height: 1.2; letter-spacing: -.028em; }
  .hero-highlight::after { height: 4px; bottom: -4px; }
}
@media (max-width: 360px) {
  .hero-inner { padding: 25px 0 29px; }
}


/* About page. A quiet editorial page, in the existing dark-purple theme. */
.about-page { max-width: 1020px; padding: clamp(38px, 5vw, 64px) 0 86px; }
.about-head { max-width: 850px; padding: 0 0 30px; margin-bottom: 35px; border-bottom: 1px solid #3b3550; }
.about-eyebrow { display: inline-flex; gap: 10px; align-items: center; color: #bda4e8; font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.about-dot { width: 7px; height: 7px; border-radius: 50%; background: #aa50ed; }
.about-head h1 { font-size: clamp(40px, 5.5vw, 66px); font-weight: 780; line-height: 1.13; letter-spacing: -.05em; margin: 16px 0 13px; }
.about-head h1 span { color: #cb85ff; }
.about-subtitle { font-size: clamp(16px, 2vw, 19px); color: #bbb4ce; line-height: 1.55; margin: 0; }
.about-body { max-width: 760px; }
.about-copy { color: #d4d2df; font-size: 17px; line-height: 1.88; overflow-wrap: anywhere; }
.about-copy p { margin: 0 0 22px; }
.about-copy a { color: #d498ff; text-decoration: underline; text-underline-offset: 3px; }
.about-copy a:hover { color: #f3cbff; }
.about-copy strong { color: #f5f2ff; font-weight: 740; }
.about-copy em { color: #e5d6f9; }
.about-copy code { color: #cbb4ff; background: #292137; border: 1px solid #483956; border-radius: 4px; padding: 1px 4px; font-size: .91em; }
.about-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; max-width: 760px; padding-top: 14px; }
.about-bottom .button { background: linear-gradient(120deg, #8029ed, #b04bf5); border-color: #a449f4; color: white; }
.about-bottom .button:hover { background: #a44cf0; color: white; }
.about-settings-editor { border-top: 1px solid var(--line); margin-top: 27px; padding-top: 27px; }
.about-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.about-editor-heading h3 { margin-bottom: 5px; }
.about-editor-heading a { color: #caa2ff; font-size: 12px; font-weight: 650; }
.about-editor-description { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0 22px; }
.about-format-toolbar { display: flex; align-items: center; gap: 6px; padding: 7px; background: #11141e; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 7px 7px 0 0; }
.about-format-toolbar button { min-height: 33px; min-width: 37px; border: 1px solid transparent; border-radius: 5px; color: #dfd8f0; background: #242333; font-size: 13px; padding: 4px 10px; }
.about-format-toolbar button:hover { background: #49345d; border-color: #72518e; }
.settings-form #about_content { min-height: 245px; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; font-size: 14px; line-height: 1.7; }
.about-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.about-preview-actions button:disabled { opacity: .55; cursor: wait; }
.about-preview-status { color: var(--muted); font-size: 12px; }
.about-preview { margin: 14px 0 4px; padding: clamp(17px, 3vw, 25px); background: #0d0f19; border: 1px solid #4b3f65; border-radius: 8px; font-size: 15px; }
.about-preview p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .about-page { padding: 35px 0 58px; }
  .about-copy { font-size: 15px; line-height: 1.8; }
  .about-head { margin-bottom: 25px; padding-bottom: 23px; }
  .about-head h1 { font-size: clamp(37px, 10.4vw, 50px); }
  .brand-logo { width: 114px; }
  .primary-nav { gap: 0; }
  .primary-nav a { padding: 0 6px; font-size: 10px; min-height: 34px; }
  .primary-nav .nav-rss { padding: 0 5px; }
}
@media (max-width: 360px) {
  .brand-logo { width: 104px; }
  .primary-nav a { padding: 0 5px; }
  .header-inner { gap: 6px; }
}

/* Sunday-only publishing: a concise, read-only schedule preview. */
.sunday-release-info{border:1px solid rgba(169,137,255,.24);background:rgba(115,78,198,.075);border-radius:12px;padding:16px 18px;margin:4px 0 22px;}
.sunday-release-label{font-size:.7rem;letter-spacing:.11em;font-weight:800;color:#b5a0ff;margin-bottom:9px;}
.sunday-release-info strong{display:block;font-size:1rem;line-height:1.5;color:#f2f0fb;}
.sunday-release-info p{margin:6px 0 0;color:#acaabc;font-size:.88rem;line-height:1.55;}


/* Optional linked comic captions: understated, readable, and clearly clickable. */
.comic-caption { min-width: 0; overflow-wrap: anywhere; }
.comic-caption p { margin: 0; }
.comic-caption p + p { margin-top: 10px; }
.comic-caption a { color: #caadff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.comic-caption a:hover { color: #e1ceff; }
.comic-caption strong { color: var(--text); font-weight: 700; }
.comic-caption em { color: #d6c9f0; }
.comic-caption code { color: #d3baff; font-size: .9em; }
.caption-format-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 7px 7px 0 0; background: #11141e; }
.caption-format-toolbar button { padding: 6px 11px; border: 1px solid #51436e; background: #302545; border-radius: 5px; color: #e9d9ff; font-size: 12px; font-weight: 650; }
.caption-format-toolbar button:hover { background: #4a326f; border-color: #8061b7; }
.caption-format-toolbar span { font-size: 12px; color: var(--muted); }
.editor-form #description { border-top-left-radius: 0; border-top-right-radius: 0; }
.caption-format-hint { margin: 9px 0 0; font-size: 11px; line-height: 1.6; color: var(--faint); }

/* Insights: restrained dark analytics dashboard. */
.insights-heading { align-items: center; }
.insights-live-label { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #3f3855; background: #191724; border-radius: 99px; padding: 10px 15px; color: #cfc4e4; font-size: 12px; font-weight: 650; white-space: nowrap; }
.insights-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #bd88fa; box-shadow: 0 0 0 4px rgba(189,136,250,.11); }
.insights-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 25px 0 25px; }
.insights-stat { min-width: 0; min-height: 141px; display: flex; flex-direction: column; padding: 20px 20px 19px; border: 1px solid #30303f; border-radius: 11px; background: #161820; }
.insights-stat-primary { border-color: #584570; background: linear-gradient(125deg,#211b32,#171921); }
.insights-stat-label { color: #b8b5c5; font-size: 12px; font-weight: 600; }
.insights-help { color: #9c94b3; font-size: 11px; font-weight: 400; }
.insights-stat strong { color: #f6f2ff; font-size: clamp(29px,3.3vw,38px); line-height: 1.2; letter-spacing: -.04em; margin-top: 13px; font-variant-numeric: tabular-nums; }
.insights-stat small { color: #9e9cab; font-size: 11px; margin-top: auto; padding-top: 10px; }
.insights-panel { min-width: 0; border: 1px solid #30303f; border-radius: 11px; background: #151720; overflow: hidden; }
.insights-panel-header { padding: 21px 23px 19px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.insights-panel-header h2 { color: #f0eef5; font-size: 16px; margin: 0; line-height: 1.4; }
.insights-panel-header p { color: #9794a6; font-size: 12px; margin: 4px 0 0; }
.insights-caption { color: #9996aa; font-size: 11px; text-align: right; }
.insights-chart-panel { margin-bottom: 16px; }
.insights-chart { display: grid; grid-template-columns: repeat(14,minmax(0,1fr)); align-items: end; gap: min(1vw,9px); padding: 8px 20px 22px; min-height: 198px; }
.insights-day { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.insights-bar-value { color: #c9c0da; font-size: 10px; margin: 0 0 7px; font-variant-numeric: tabular-nums; }
.insights-bar-track { height: 117px; width: min(100%,35px); display: flex; align-items: flex-end; background: #1c1f2a; border-radius: 4px; }
.insights-bar { width: 100%; background: #9372cf; border-radius: 4px 4px 2px 2px; min-height: 0; }
.insights-level-0 { height: 0; }
.insights-level-1 { height: 10%; }.insights-level-2 { height: 20%; }.insights-level-3 { height: 30%; }
.insights-level-4 { height: 40%; }.insights-level-5 { height: 50%; }.insights-level-6 { height: 60%; }
.insights-level-7 { height: 70%; }.insights-level-8 { height: 80%; }.insights-level-9 { height: 90%; }
.insights-level-10 { height: 100%; }
.insights-day-label { font-size: 10px; color: #8e8a9d; white-space: nowrap; margin-top: 9px; }
.insights-tables { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.insights-list { border-top: 1px solid #292b37; }
.insights-entry { padding: 13px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid #292b37; }
.insights-entry:last-child { border-bottom: 0; }
.insights-entry-copy { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.insights-entry-copy strong { color: #ece9f2; font-size: 13px; font-weight: 600; }
.insights-entry-copy small { color: #9390a1; font-size: 11px; margin-top: 4px; }
.insights-count { color: #dbd0f1; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.insights-empty { padding: 28px 22px; font-size: 13px; color: #9995a6; border-top: 1px solid #292b37; }
.insights-privacy { color: #918ea1; font-size: 12px; line-height: 1.8; margin: 24px 0 42px; max-width: 840px; }
@media (max-width: 1100px) { .insights-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .insights-stats { gap: 9px; }
  .insights-stat { padding: 16px; min-height: 122px; }
  .insights-tables { grid-template-columns: 1fr; }
  .insights-chart { gap: 3px; padding: 8px 12px 18px; }
  .insights-day-label { font-size: 8px; }
  .insights-day:nth-child(even) .insights-day-label { opacity: 0; }
  .insights-panel-header { padding: 16px; }
  .insights-entry { padding: 12px 16px; }
  .insights-caption { max-width: 105px; line-height: 1.4; }
}