/* =====================================================================
   ENS Admin theme: dark / red editorial style (matches the portfolio)
   Loaded AFTER the app CSS. Unlayered rules beat Tailwind's utilities.
   ===================================================================== */
:root {
  --color-ink: #121111; --color-paper: #ffffff; --color-surface: #f7f4f2;
  --color-red: #ca0f2f; --color-red-dark: #a30c26; --color-plum: #7a1030; --color-grey: #6e6e73;
  --ens-blush: #ffefeb; --ens-cream: #f0ede4; --ens-line: #e8dccc; --ens-line-2: #ddd4cb; --ens-dark-line: #2e2c2c;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Bebas Neue", "Oswald", Impact, sans-serif;
  --ens-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-family: var(--font-sans); background: var(--color-surface); -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-red); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #c9bfb6 transparent; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@keyframes ens-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ens-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ens-spin { to { transform: rotate(360deg); } }
@keyframes ens-marquee { to { transform: translateX(-50%); } }
@keyframes ens-slide { from { opacity: 0; transform: translateY(24px) scale(.99); } to { opacity: 1; transform: none; } }

/* ---------- Headings ---------- */
.font-serif { font-family: var(--font-serif) !important; font-weight: 400 !important; letter-spacing: .01em; }
h1.font-serif { font-size: 56px; line-height: .9; text-transform: uppercase; color: var(--color-ink); }
h1.font-serif::after { content: "."; color: var(--color-red); }
h2.font-serif, h3.font-serif { font-size: 28px; line-height: 1; text-transform: uppercase; }
h3.font-bold:not(.font-serif), p.font-bold { font-family: var(--ens-ui); }

/* ---------- Login / MFA screen ---------- */
.flex.min-h-screen.items-center.justify-center.bg-surface {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 60% at 80% 20%, rgba(202,15,47,.35), transparent 70%),
              radial-gradient(45% 50% at 10% 100%, rgba(122,16,48,.35), transparent 70%), #121111;
}
.flex.min-h-screen.items-center.justify-center.bg-surface::before {
  content: "ENS"; position: absolute; z-index: -1; left: 50%; bottom: -6vw; transform: translateX(-50%);
  font-family: var(--ens-ui); font-weight: 700; font-size: 34vw; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.08); white-space: nowrap; pointer-events: none;
}
.flex.min-h-screen.items-center.justify-center.bg-surface::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    linear-gradient(#2e2c2c, #2e2c2c) 32px 0 / 1px 100% no-repeat,
    linear-gradient(#2e2c2c, #2e2c2c) calc(100% - 32px) 0 / 1px 100% no-repeat,
    linear-gradient(#2e2c2c, #2e2c2c) 0 64px / 100% 1px no-repeat;
}
.flex.min-h-screen.items-center.justify-center.bg-surface > .max-w-sm {
  position: relative; max-width: 400px; padding: 40px 36px 36px; border: 0 !important; border-radius: 0 !important;
  background: #fff; box-shadow: 16px 16px 0 var(--color-red) !important; animation: ens-slide .6s cubic-bezier(.2,.8,.2,1) both;
}
.flex.min-h-screen.items-center.justify-center.bg-surface > .max-w-sm::before {
  content: "Admin panel"; position: absolute; top: -34px; left: 0; font-family: var(--ens-ui); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #bdbdbd;
}
.flex.min-h-screen.items-center.justify-center.bg-surface > .max-w-sm > .mb-6 { font-family: var(--font-serif); font-weight: 400; font-size: 34px; letter-spacing: .01em; gap: 12px; margin-bottom: 28px; text-transform: uppercase; }

/* ---------- Logo mark ---------- */
span.h-9.w-9.bg-red { border: 0 !important; border-radius: 8px !important; box-shadow: none !important; background: var(--color-red) !important; font-size: 22px !important; padding-top: 2px; }
img.h-9.w-9 { border: 0 !important; border-radius: 8px !important; }

/* ---------- App shell ---------- */
.flex.min-h-screen:not(.items-center) { background: var(--color-surface); }
aside.bg-ink { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #121111; border-right: 1px solid var(--ens-dark-line); padding: 20px 14px;
  background-image: radial-gradient(120% 40% at 0% 100%, rgba(202,15,47,.22), transparent 70%); }
aside.bg-ink > div > .mb-8 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; letter-spacing: .02em; text-transform: uppercase; gap: 12px; padding: 0 6px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ens-dark-line); }
aside nav a { position: relative; display: flex; align-items: center; gap: 12px; border-radius: 8px !important; padding: 10px 12px !important;
  font-family: var(--ens-ui); font-weight: 500 !important; font-size: 14px !important; color: #cfcfcf !important; transition: background .2s, color .2s, transform .2s; }
aside nav a:hover { background: #1f1d1d !important; color: #fff !important; transform: translateX(2px); }
aside nav a[aria-current="page"], aside nav a.bg-white\/10 { background: var(--color-red) !important; color: #fff !important; box-shadow: 0 8px 20px -10px rgba(202,15,47,.8); }
aside nav a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; opacity: .9;
  -webkit-mask: var(--ens-ico) center / contain no-repeat; mask: var(--ens-ico) center / contain no-repeat; }
aside > button { font-family: var(--ens-ui); border-radius: 8px !important; display: flex; align-items: center; gap: 12px; padding: 10px 12px !important; border: 1px solid var(--ens-dark-line) !important; }
aside > button:hover { background: var(--color-red) !important; border-color: var(--color-red) !important; color: #fff !important; }
aside > button::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico-logout) center / contain no-repeat; mask: var(--ico-logout) center / contain no-repeat; }

/* Sidebar icons (masks) */
:root {
  --ico-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='9'/%3E%3Crect x='14' y='3' width='7' height='5'/%3E%3Crect x='14' y='12' width='7' height='9'/%3E%3Crect x='3' y='16' width='7' height='5'/%3E%3C/svg%3E");
  --ico-posts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h12l4 4v12H4z'/%3E%3Cpath d='M8 10h8M8 14h8M8 18h5'/%3E%3C/svg%3E");
  --ico-cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --ico-lib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h13'/%3E%3C/svg%3E");
  --ico-ads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 10v4h4l6 5V5L7 10z'/%3E%3Cpath d='M17 8a5 5 0 0 1 0 8'/%3E%3C/svg%3E");
  --ico-readers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E");
  --ico-comments: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16v12H9l-5 4z'/%3E%3C/svg%3E");
  --ico-reports: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 21V4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --ico-pages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='M3 9h18M9 9v12'/%3E%3C/svg%3E");
  --ico-feedback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Cpath d='M3 5l9 8 9-8'/%3E%3C/svg%3E");
  --ico-staff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ico-analytics: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --ico-subs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E");
  --ico-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
  --ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h11'/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 9L9 3M4 3h5v5'/%3E%3C/svg%3E");
}
aside nav a[href="/"] { --ens-ico: var(--ico-dash); }
aside nav a[href="/posts"] { --ens-ico: var(--ico-posts); }
aside nav a[href="/categories"] { --ens-ico: var(--ico-cat); }
aside nav a[href="/library"] { --ens-ico: var(--ico-lib); }
aside nav a[href="/ads"] { --ens-ico: var(--ico-ads); }
aside nav a[href="/readers"] { --ens-ico: var(--ico-readers); }
aside nav a[href="/comments"] { --ens-ico: var(--ico-comments); }
aside nav a[href="/reports"] { --ens-ico: var(--ico-reports); }
aside nav a[href="/pages"] { --ens-ico: var(--ico-pages); }
aside nav a[href="/feedback"] { --ens-ico: var(--ico-feedback); }
aside nav a[href="/staff"] { --ens-ico: var(--ico-staff); }
aside nav a[href="/analytics"] { --ens-ico: var(--ico-analytics); }
aside nav a[href="/subscriptions"] { --ens-ico: var(--ico-subs); }
aside nav a[href="/settings"] { --ens-ico: var(--ico-settings); }

/* ---------- Main area with frame lines ---------- */
main.bg-surface { position: relative; background: var(--color-surface) !important; padding: 72px 56px 64px !important; min-width: 0; }
main.bg-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ens-line-2), var(--ens-line-2)) 0 40px / 100% 1px no-repeat,
    linear-gradient(var(--ens-line-2), var(--ens-line-2)) 28px 40px / 1px 100% no-repeat,
    linear-gradient(var(--ens-line-2), var(--ens-line-2)) calc(100% - 28px) 40px / 1px 100% no-repeat,
    linear-gradient(#121111, #121111) 13px 40px / 30px 1px no-repeat,
    linear-gradient(#121111, #121111) 28px 25px / 1px 30px no-repeat,
    linear-gradient(#121111, #121111) calc(100% - 13px) 40px / 30px 1px no-repeat,
    linear-gradient(#121111, #121111) calc(100% - 28px) 25px / 1px 30px no-repeat; }
/* 'backwards' (not 'both'): a finished transform animation must not trap the fixed-position editor modal */
main.bg-surface > * { position: relative; animation: ens-up .45s cubic-bezier(.2,.8,.2,1) backwards; }
main .mb-6.flex.items-center.justify-between { margin-bottom: 32px; align-items: flex-end; }
main > div > h1.mb-6 { margin-bottom: 32px; }
main p.text-grey { font-size: 15px; line-height: 1.5; color: #6e6e73; }

/* ---------- Stat cards (dashboard / analytics) ---------- */
.grid.grid-cols-2.gap-4 > .rounded-lg.border-2.border-ink.bg-white {
  position: relative; overflow: hidden; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px !important; border: 1px solid var(--ens-dark-line) !important; border-radius: 0 !important; box-shadow: none !important; color: #fff;
  background: linear-gradient(0deg, var(--color-red) 0 5px, transparent 5px), linear-gradient(160deg, #1d1b1b, #151414) !important;
  transition: transform .25s, border-color .25s; animation: ens-up .5s cubic-bezier(.2,.8,.2,1) backwards;
}
.grid.grid-cols-2.gap-4 > .rounded-lg.border-2.border-ink.bg-white::before { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(202,15,47,.4), transparent 70%); }
.grid.grid-cols-2.gap-4 > .rounded-lg.border-2.border-ink.bg-white:hover { transform: translateY(-4px); border-color: #5a1a24 !important; }
.grid.grid-cols-2.gap-4 > .rounded-lg:nth-child(2) { animation-delay: .06s; }
.grid.grid-cols-2.gap-4 > .rounded-lg:nth-child(3) { animation-delay: .12s; }
.grid.grid-cols-2.gap-4 > .rounded-lg:nth-child(4) { animation-delay: .18s; }
.grid.grid-cols-2.gap-4 > .rounded-lg .font-serif.text-2xl { position: relative; font-size: 60px; line-height: .9; color: var(--color-red); }
.grid.grid-cols-2.gap-4 > .rounded-lg .text-xs.text-grey { position: relative; margin-top: 6px; font-family: var(--ens-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #b1b1b1; }

/* ---------- Generic panels ---------- */
.rounded-lg.border-2.border-ink.bg-white:not(table), .rounded-md.border-2.border-ink.bg-white {
  border: 1px solid var(--ens-line) !important; border-radius: 0 !important; box-shadow: 0 18px 40px -28px rgba(18,17,17,.35) !important;
  background: #fff; position: relative;
}
.max-w-lg.rounded-lg.border-2.border-ink.bg-white::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--color-red); }
.rounded-lg.border-2.border-ink.bg-surface { border: 0 !important; border-radius: 0 !important; background: var(--ens-blush) !important; }
.border-dashed { border: 1.5px dashed #c9bfb6 !important; border-radius: 0 !important; background: #fff !important; transition: border-color .2s, background .2s; }
.border-dashed:hover { border-color: var(--color-red) !important; background: var(--ens-blush) !important; }

/* ---------- Tables ---------- */
table.border-2.border-ink { border: 1px solid var(--ens-line) !important; border-radius: 0 !important; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -30px rgba(18,17,17,.4); }
table th { background: #121111 !important; color: var(--ens-cream) !important; border: 0 !important; font-family: var(--ens-ui); font-weight: 600 !important; font-size: 11px !important; letter-spacing: .08em; padding-top: 14px !important; padding-bottom: 14px !important; }
table tbody tr { border-top: 1px solid #efe8e1 !important; transition: background .15s; animation: ens-fade .4s ease both; }
table tbody tr:hover { background: var(--ens-blush) !important; }
table tbody tr:nth-child(2) { animation-delay: .03s; } table tbody tr:nth-child(3) { animation-delay: .06s; } table tbody tr:nth-child(4) { animation-delay: .09s; }
table tbody tr:nth-child(5) { animation-delay: .12s; } table tbody tr:nth-child(n+6) { animation-delay: .15s; }
table td { font-size: 14px; color: #1d1c1c; }
table td:first-child { font-weight: 500; }

/* ---------- Status pills ---------- */
span.rounded-full.border { font-family: var(--ens-ui); font-weight: 600 !important; letter-spacing: .02em; padding: 3px 10px !important; }
span.rounded-full.border.text-green { color: #13703f !important; border-color: #9fd8b8 !important; background: #e8f7ee !important; }
span.rounded-full.border.text-grey { color: #6e6e73 !important; border-color: #d6d1cc !important; background: #f4f1ee !important; }
span.rounded-full.border.text-red-dark { color: var(--color-red) !important; border-color: #f2b8c2 !important; background: var(--ens-blush) !important; }

/* ---------- Buttons ---------- */
button.bg-gradient-to-b.from-red, .from-red.to-red-dark {
  background: var(--color-red) !important; border-radius: 8px !important; box-shadow: 0 10px 22px -12px rgba(202,15,47,.9) !important;
  font-family: var(--ens-ui); font-weight: 600 !important; font-size: 14px !important; height: 40px; padding: 0 16px !important; transition: transform .15s, background .2s, box-shadow .2s !important;
}
button.bg-gradient-to-b.from-red:hover { background: #b30d29 !important; transform: translateY(-1px); filter: none !important; }
button.bg-gradient-to-b.from-red.\!px-3 { height: 32px; padding: 0 12px !important; font-size: 12px !important; }
button[data-ens-icon] { padding-right: 6px !important; gap: 10px !important; }
button[data-ens-icon]::after { content: ""; width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; background: #fff var(--ens-btn-ico) center / 12px no-repeat; }
button[data-ens-icon="plus"] { --ens-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ca0f2f' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E"); }
button[data-ens-icon="arrow"] { --ens-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ca0f2f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 9L9 3M4 3h5v5'/%3E%3C/svg%3E"); }

button.border-\[\#d8dbe2\], label.shadow-press {
  background: #fff !important; border: 1.5px solid #121111 !important; border-radius: 8px !important; box-shadow: none !important;
  font-family: var(--ens-ui); font-weight: 600 !important; font-size: 14px !important; transition: background .2s, color .2s, transform .15s !important;
}
button.border-\[\#d8dbe2\]:hover, label.shadow-press:hover { background: #121111 !important; color: #fff !important; transform: translateY(-1px); filter: none !important; }
button.shadow-press.bg-red { border: 0 !important; border-radius: 8px !important; box-shadow: 0 10px 22px -12px rgba(202,15,47,.9) !important; background: var(--color-red) !important; font-family: var(--ens-ui); font-weight: 600 !important; height: 44px; }
button.shadow-press.bg-red:hover { background: #b30d29 !important; transform: translateY(-1px); }

button.rounded-full.border-2 { border-width: 1.5px !important; font-family: var(--ens-ui); font-weight: 600 !important; padding: 7px 16px !important; transition: background .2s, color .2s; }
button.rounded-full.border-2.bg-white:hover { background: var(--ens-blush) !important; }
button.rounded-full.border-2.bg-ink { box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); }

button.text-red-dark, label.text-red-dark { color: var(--color-red) !important; font-family: var(--ens-ui); font-weight: 600 !important; position: relative; transition: opacity .2s; }
button.text-red-dark:hover { opacity: 1 !important; text-decoration: underline; text-underline-offset: 3px; }
button.rounded.border-2.border-ink { border-width: 1.5px !important; border-radius: 6px !important; background: #fff; transition: background .15s; }
button.rounded.border-2.border-ink:hover { background: var(--ens-blush); }
button.text-grey.hover\:text-ink { font-family: var(--ens-ui); }

/* ---------- Forms ---------- */
label.text-xs.font-semibold.text-grey { font-family: var(--ens-ui); font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: #6e6e73; }
input.border-2.border-ink, select.border-2.border-ink, textarea.border-2.border-ink {
  border: 1.5px solid #ddd4cb !important; border-radius: 8px !important; background: #fff; font-size: 15px !important;
  transition: border-color .2s, box-shadow .2s; box-shadow: none !important;
}
input.border-2.border-ink:hover, select.border-2.border-ink:hover, textarea.border-2.border-ink:hover { border-color: #b9aea3 !important; }
input.border-2.border-ink:focus, select.border-2.border-ink:focus, textarea.border-2.border-ink:focus { border-color: var(--color-red) !important; box-shadow: 0 0 0 4px rgba(202,15,47,.12) !important; }
input.border-2.border-ink.py-2\.5 { padding-top: 12px !important; padding-bottom: 12px !important; }
input[type="checkbox"] { accent-color: var(--color-red); width: 16px; height: 16px; }
input[type="file"]::file-selector-button { font-family: var(--ens-ui); font-weight: 600; border: 1.5px solid #121111; border-radius: 8px; background: #fff; padding: 6px 12px; margin-right: 10px; cursor: pointer; }

/* ---------- Full-screen editor modal ---------- */
.fixed.inset-0.z-50.bg-black\/60 { background: rgba(18,17,17,.6) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: ens-fade .25s ease both; }
.fixed.inset-0.z-50 > .flex.h-full.w-full.flex-col.bg-white { animation: ens-slide .4s cubic-bezier(.2,.8,.2,1) both; }
.border-b-2.border-ink.px-8.py-4 { background: #121111; color: #fff; border-bottom: 3px solid var(--color-red) !important; }
.border-b-2.border-ink.px-8.py-4 .font-serif, .border-b-2.border-ink.px-8.py-4 h2, .border-b-2.border-ink.px-8.py-4 h3 { color: #fff; font-size: 30px; }
.border-b-2.border-ink.px-8.py-4 button.text-grey { color: #cfcfcf !important; border: 1px solid #3a3838; border-radius: 8px; padding: 6px 14px; }
.border-b-2.border-ink.px-8.py-4 button.text-grey:hover { background: var(--color-red); border-color: var(--color-red); color: #fff !important; }
.border-t-2.border-ink { border-top: 1px solid var(--ens-line) !important; }
.flex-1.overflow-y-auto.px-8.py-6 { background: var(--color-surface); }

/* ---------- Loading states (driven by ens-enhance.js) ---------- */
[data-ens-loading] { position: relative !important; opacity: 1 !important; color: transparent !important; pointer-events: none !important; cursor: progress !important; }
[data-ens-loading] > *, [data-ens-loading]::after { visibility: hidden; }
[data-ens-loading]::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; width: 18px !important; height: 18px !important;
  margin: -9px 0 0 -9px !important; border-radius: 50% !important; border: 2.5px solid rgba(255,255,255,.35) !important; border-top-color: #fff !important;
  background: none !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; visibility: visible !important; animation: ens-spin .7s linear infinite !important; }
[data-ens-loading="dark"]::before { border-color: rgba(18,17,17,.18) !important; border-top-color: var(--color-red) !important; }
.ens-topbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000; background: linear-gradient(90deg, var(--color-red), #ff5a73); box-shadow: 0 0 10px rgba(202,15,47,.7); transition: width .4s ease, opacity .3s ease; opacity: 0; }
.ens-topbar.is-on { opacity: 1; }
.ens-toast { position: fixed; right: 24px; bottom: 24px; z-index: 10000; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; min-width: 220px;
  background: #121111; color: #fff; font-family: var(--ens-ui); font-weight: 600; font-size: 14px; border-left: 4px solid #2bd47d;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); transform: translateY(20px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ens-toast.is-on { transform: none; opacity: 1; }
.ens-toast.is-error { border-left-color: var(--color-red); }
.ens-toast i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2bd47d; color: #121111; font-style: normal; font-size: 13px; }
.ens-toast.is-error i { background: var(--color-red); color: #fff; }
.ens-toast.is-busy { border-left-color: var(--color-red); }
.ens-toast.is-busy i { background: none; border: 2.5px solid rgba(255,255,255,.25); border-top-color: var(--color-red); animation: ens-spin .7s linear infinite; width: 20px; height: 20px; }

/* ---------- Login bottom marquee (added by ens-enhance.js) ---------- */
.ens-login-marquee { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 44px; overflow: hidden; background: var(--color-red); color: #fff; display: flex; align-items: center; }
.ens-login-marquee > div { display: flex; width: max-content; animation: ens-marquee 30s linear infinite; }
.ens-login-marquee span { font-family: var(--font-serif); font-size: 28px; letter-spacing: .02em; padding: 0 22px; white-space: nowrap; }
.ens-login-marquee span::after { content: "\2733"; margin-left: 44px; font-size: 18px; vertical-align: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .flex.min-h-screen:not(.items-center) { flex-direction: column; }
  aside.bg-ink { position: sticky; top: 0; z-index: 40; width: 100% !important; height: auto; flex-direction: column; padding: 10px 12px; overflow: visible; }
  aside.bg-ink > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
  aside.bg-ink > div > .mb-8 { margin: 0; padding: 0 8px 0 0; border: 0; font-size: 22px; flex-shrink: 0; }
  aside nav { flex-direction: row !important; overflow-x: auto; scrollbar-width: none; gap: 4px !important; }
  aside nav::-webkit-scrollbar { display: none; }
  aside nav a { white-space: nowrap; padding: 8px 10px !important; font-size: 13px !important; }
  aside nav a:hover { transform: none; }
  aside.bg-ink { flex-direction: row !important; align-items: center; gap: 8px; }
  aside.bg-ink > div { flex: 1; }
  aside > button { flex-shrink: 0; white-space: nowrap; padding: 8px 10px !important; font-size: 12px !important; }
  aside > button::before { width: 16px; height: 16px; }
  main.bg-surface { padding: 56px 20px 40px !important; }
  main.bg-surface::before { display: none; }
  h1.font-serif { font-size: 40px; }
  main table { display: block; overflow-x: auto; white-space: nowrap; }
  .flex.min-h-screen.items-center.justify-center.bg-surface > .max-w-sm { box-shadow: 10px 10px 0 var(--color-red) !important; padding: 32px 24px 28px; }
}

/* Action cells were flex, which breaks row alignment */
td.flex { display: table-cell !important; vertical-align: middle; }
td.flex > * { margin-right: 14px; }
td.flex > *:last-child { margin-right: 0; }

/* =====================================================================
   Readers: clickable rows + details drawer (ens-readers.js)
   ===================================================================== */
body[data-ens-path="/readers"] main tbody tr { cursor: pointer; }
body[data-ens-path="/readers"] main tbody tr td:first-child::after { content: "View details \2192"; margin-left: 10px; font-family: var(--ens-ui); font-size: 11px; font-weight: 600; color: var(--color-red); opacity: 0; transition: opacity .2s; }
body[data-ens-path="/readers"] main tbody tr:hover td:first-child::after { opacity: 1; }

.rd { position: fixed; inset: 0; z-index: 9000; visibility: hidden; font-family: var(--font-sans); color: #121111; }
.rd.is-open { visibility: visible; }
.rd-backdrop { position: absolute; inset: 0; background: rgba(18,17,17,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.rd.is-open .rd-backdrop { opacity: 1; }
.rd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--color-surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: -30px 0 60px -30px rgba(0,0,0,.5); }
.rd.is-open .rd-panel { transform: none; }
.rd-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; background: #121111; color: #fff; border-bottom: 3px solid var(--color-red); }
.rd-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--color-red); font-family: var(--font-serif); font-size: 30px; padding-top: 3px; flex-shrink: 0; }
.rd-who { flex: 1; min-width: 0; }
.rd-who h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-who p { margin: 4px 0 0; font-size: 13px; color: #bdbdbd; }
.rd-pill { font-family: var(--ens-ui); font-weight: 600; font-size: 11px; padding: 4px 10px; border-radius: 99px; }
.rd-pill.is-ok { background: rgba(43,212,125,.15); color: #5fe3a0; }
.rd-pill.is-bad { background: rgba(202,15,47,.25); color: #ff8a9b; }
.rd-x { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #3a3838; background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s; }
.rd-x:hover { background: var(--color-red); border-color: var(--color-red); }
.rd-tabs { display: flex; gap: 4px; padding: 12px 24px 0; background: #fff; border-bottom: 1px solid var(--ens-line); }
.rd-tabs button { padding: 10px 14px 12px; border: 0; background: none; font-family: var(--ens-ui); font-weight: 600; font-size: 14px; color: #6e6e73; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.rd-tabs button.is-on { color: #121111; border-bottom-color: var(--color-red); }
.rd-tabs button:hover { color: #121111; }
.rd-body { flex: 1; overflow-y: auto; padding: 24px; animation: ens-fade .3s ease; }
.rd-loading { display: flex; align-items: center; gap: 12px; color: #6e6e73; font-family: var(--ens-ui); font-size: 14px; }
.rd-loading i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #e2d8cf; border-top-color: var(--color-red); animation: ens-spin .7s linear infinite; }
.rd-note { padding: 16px 18px; background: var(--ens-blush); border-left: 4px solid var(--color-red); font-size: 14px; line-height: 1.5; }
.rd-note code, .rd code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; background: #f1ebe5; padding: 1px 6px; border-radius: 4px; }
.rd-muted { color: #8b8b90; }
.rd-bad { color: var(--color-red); font-weight: 600; }
.rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.rd-stats div { position: relative; overflow: hidden; padding: 16px; background: linear-gradient(0deg, var(--color-red) 0 4px, transparent 4px), #121111; color: #fff; }
.rd-stats b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: .9; color: var(--color-red); }
.rd-stats span { display: block; margin-top: 6px; font-family: var(--ens-ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #b1b1b1; }
.rd-dl { display: grid; grid-template-columns: 150px 1fr; margin: 0; background: #fff; border: 1px solid var(--ens-line); }
.rd-dl dt, .rd-dl dd { margin: 0; padding: 11px 14px; border-top: 1px solid #f1ebe5; font-size: 14px; }
.rd-dl dt:first-of-type, .rd-dl dt:first-of-type + dd { border-top: 0; }
.rd-dl dt { font-family: var(--ens-ui); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6e6e73; padding-top: 13px; }
.rd-chip { display: inline-block; margin: 0 6px 4px 0; padding: 2px 10px; border-radius: 99px; background: var(--ens-blush); font-size: 12px; font-weight: 600; }
.rd-h { margin: 26px 0 10px; font-family: var(--font-serif); font-weight: 400; font-size: 26px; text-transform: uppercase; }
.rd-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ens-line); font-size: 13px; }
.rd-table th { background: #121111; color: var(--ens-cream); text-align: left; padding: 10px 12px; font-family: var(--ens-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.rd-table td { padding: 10px 12px; border-top: 1px solid #f1ebe5; vertical-align: top; }
.rd-table tbody tr { animation: ens-fade .3s ease both; }
.rd-table tbody tr:hover { background: var(--ens-blush); }
.rd-page b { display: block; font-weight: 600; }
.rd-table small { color: #8b8b90; word-break: normal; }
.rd-page small { display: block; word-break: break-all; }
.rd-table code { white-space: nowrap; }
.rd-ev { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 99px; font-family: var(--ens-ui); font-weight: 600; font-size: 11px; background: #f1ebe5; }
.rd-ev--article_read { background: #121111; color: #fff; }
.rd-ev--sign_in, .rd-ev--sign_up { background: #e8f7ee; color: #13703f; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rd-chips button { height: 32px; padding: 0 14px; border-radius: 99px; border: 1.5px solid #121111; background: #fff; font-family: var(--ens-ui); font-weight: 600; font-size: 12px; cursor: pointer; }
.rd-chips button.is-on { background: #121111; color: #fff; }
.rd-empty { padding: 30px; text-align: center; background: #fff; border: 1.5px dashed #d9d0c7; }
.rd-form { display: grid; gap: 14px; }
.rd-field span { display: block; margin-bottom: 6px; font-family: var(--ens-ui); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6e6e73; }
.rd-field input, .rd-field textarea, .rd-inline input { width: 100%; padding: 11px 13px; border: 1.5px solid #ddd4cb; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.rd-field input:focus, .rd-field textarea:focus, .rd-inline input:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 4px rgba(202,15,47,.12); }
.rd-check { display: flex; align-items: center; gap: 10px; font-weight: 600; text-transform: capitalize; }
.rd-actions { display: flex; justify-content: flex-end; }
.rd-btn { height: 40px; padding: 0 16px; border-radius: 8px; border: 0; font-family: var(--ens-ui); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .15s, background .2s, color .2s; }
.rd-btn:hover { transform: translateY(-1px); }
.rd-btn--red { background: var(--color-red); color: #fff; box-shadow: 0 10px 22px -12px rgba(202,15,47,.9); }
.rd-btn--dark { background: #121111; color: #fff; }
.rd-btn--outline { background: #fff; border: 1.5px solid #121111; color: #121111; }
.rd-btn--danger { background: #fff; border: 1.5px solid var(--color-red); color: var(--color-red); }
.rd-btn--danger:hover { background: var(--color-red); color: #fff; }
.rd-sec { display: grid; gap: 12px; }
.rd-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; background: #fff; border: 1px solid var(--ens-line); }
.rd-card h4 { margin: 0 0 4px; font-family: var(--ens-ui); font-size: 15px; }
.rd-card p { margin: 0; font-size: 13px; line-height: 1.45; color: #6e6e73; }
.rd-card.is-danger { border-color: #f2b8c2; background: #fff8f7; }
.rd-inline { display: flex; gap: 8px; flex-shrink: 0; width: 330px; }
.rd-msg { min-height: 20px; margin: 4px 0 0; font-family: var(--ens-ui); font-weight: 600; font-size: 14px; }
.rd-msg.is-ok { color: #13703f; }
.rd-msg.is-err { color: var(--color-red); }
@media (max-width: 700px) {
  .rd-stats { grid-template-columns: repeat(2, 1fr); }
  .rd-dl { grid-template-columns: 1fr; }
  .rd-dl dd { border-top: 0; padding-top: 0; }
  .rd-card { flex-direction: column; align-items: stretch; }
  .rd-inline { width: 100%; }
  .rd-table--act { display: block; overflow-x: auto; white-space: nowrap; }
  .rd-body { padding: 16px; }
  .rd-head { padding: 16px; }
  .rd-who h2 { font-size: 26px; }
}

/* =====================================================================
   Paste / drop images + default category lock (ens-paste.js)
   ===================================================================== */
label.mb-1:has(+ input[type="file"])::after, label.mb-2:has(+ input[type="file"])::after { content: " \00B7  or paste with Ctrl+V"; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-red); }
label.shadow-press:has(input[type="file"])::after { content: "or Ctrl+V"; margin-left: 6px; font-size: 11px; font-weight: 500; opacity: .6; }
[data-ens-flash] { animation: ens-flash 1.2s ease; }
@keyframes ens-flash { 0%, 60% { box-shadow: 0 0 0 4px rgba(202,15,47,.35); background-color: var(--ens-blush); } 100% { box-shadow: 0 0 0 0 rgba(202,15,47,0); } }
body[data-ens-drop]::after { content: "Drop the image to upload it"; position: fixed; inset: 16px; z-index: 9999; display: grid; place-items: center; border: 3px dashed var(--color-red); border-radius: 12px; background: rgba(255,239,235,.85); font-family: var(--font-serif); font-size: 44px; color: var(--color-red); pointer-events: none; }
.ens-lock { position: fixed; z-index: 60; transform: translate(-100%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1.5px solid #121111; border-radius: 99px; background: #fff; color: #121111; font-family: var(--ens-ui); font-weight: 600; font-size: 11px; cursor: pointer; transition: background .2s, color .2s; }
.ens-lock:hover { background: var(--ens-blush); }
.ens-lock i { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ens-lock-ico) center / contain no-repeat; mask: var(--ens-lock-ico) center / contain no-repeat;
  --ens-lock-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E"); }
.ens-lock.is-on { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.ens-lock.is-on i { --ens-lock-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }