:root {
  --bg: #080d12;
  --bg-soft: #0c141d;
  --surface: #101a25;
  --surface-strong: #142131;
  --surface-hover: #1a2a3c;
  --ink: #f2f7fb;
  --muted: #8ea1b5;
  --muted-strong: #b3c1cf;
  --line: #243749;
  --line-light: #30485d;
  --navy: #101a35;
  --mint: #9ce4cb;
  --blue: #6b8ee8;
  --gold: #ffd47b;
  --coral: #e89479;
  --green: #73c29f;
  --shadow: 0 28px 80px rgba(0, 0, 0, .30);
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% -5%, rgba(107, 142, 232, .18), transparent 31rem),
    radial-gradient(circle at -8% 88%, rgba(156, 228, 203, .10), transparent 28rem),
    linear-gradient(145deg, #080d12 0%, #0b121a 50%, #0d1720 100%);
  color: var(--ink);
  font-size: 14px;
}

button, input, textarea, select { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.ambient { position: fixed; border-radius: 999px; pointer-events: none; z-index: -1; filter: blur(1px); }
.ambient-one { width: 430px; height: 430px; right: -180px; top: -160px; background: radial-gradient(circle, rgba(107, 142, 232, .16), transparent 68%); }
.ambient-two { width: 360px; height: 360px; left: -190px; bottom: -160px; background: radial-gradient(circle, rgba(156, 228, 203, .12), transparent 70%); }

.loading-screen, .fatal {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--muted);
}
.loading-screen img, .fatal img { width: 58px; }
.fatal h1 { margin: 12px 0 0; color: var(--ink); font-size: 26px; }
.fatal p { max-width: 440px; text-align: center; line-height: 1.6; }
.fatal.inline { min-height: 60vh; text-align: center; }

.site-shell { width: min(1440px, 100%); margin: auto; padding: 20px 34px 70px; }
.topbar, .admin-topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; }
.brand img { width: 38px; height: 38px; flex: none; border-radius: 11px; box-shadow: 0 8px 20px rgba(107, 142, 232, .18); }
.brand strong, .brand small { display: block; }
.brand strong { color: var(--ink); font-size: 15px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.top-actions, .admin-top-actions { display: flex; align-items: center; gap: 18px; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: 10px; font-weight: 750; white-space: nowrap; }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(115, 194, 159, .13); }
.quiet-link { color: var(--muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.quiet-link:hover, .back-link:hover { color: var(--mint); }

.public-grid { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 48px; margin-top: 35px; }
.category-rail { padding-top: 14px; }
.rail-label, .eyebrow { color: #7f95ab; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.rail-label { margin: 0 0 13px 12px; }
.category-pill {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid transparent; border-radius: 11px; background: transparent;
  color: var(--muted); text-align: left; font-size: 11px; font-weight: 700; transition: .2s ease;
}
.category-pill:hover, .category-pill.active { border-color: rgba(156, 228, 203, .16); background: rgba(20, 33, 49, .92); color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.category-pill.active { box-shadow: inset 3px 0 0 var(--category-accent, var(--mint)), 0 10px 24px rgba(0, 0, 0, .16); }
.category-pill > span:nth-last-child(1) { margin-left: auto; color: #657b91; font-size: 10px; }
.category-icon { width: 27px; height: 27px; display: inline-grid; place-items: center; flex: none; border-radius: 8px; }
.category-emoji { background: rgba(255, 255, 255, .055); font-size: 15px; line-height: 1; }
.category-logo { padding: 4px; background: #f4f8fb; box-shadow: 0 5px 13px rgba(0, 0, 0, .18); }
.category-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.rail-note { display: flex; gap: 9px; margin: 30px 12px 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.rail-note span { color: var(--gold); font-size: 17px; }
.rail-note p { margin: 0; font-size: 10px; line-height: 1.55; }
.public-main { min-width: 0; }
.public-home { min-width: 0; }
.home-heading { max-width: 780px; margin: 64px auto 30px; text-align: center; }
.home-heading h1 { margin: 15px 0 12px; color: var(--ink); font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.075em; }
.home-heading p { max-width: 570px; margin: 0 auto 14px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.home-count { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-bubbles { margin-bottom: 24px; }
.tool-carousel-section { width: 100vw; margin: 46px calc(50% - 50vw) 24px; padding: 0 34px; }
.carousel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 4px 17px; }
.carousel-heading h2 { margin: 8px 0 0; color: var(--ink); font-size: 24px; letter-spacing: -.05em; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-control { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 13px; color: var(--ink); background: rgba(20, 33, 49, .8); font-size: 19px; transition: .2s ease; }
.carousel-control:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); background: rgba(156, 228, 203, .10); transform: translateY(-2px); }
.carousel-control:disabled { cursor: default; opacity: .28; }
.tool-carousel { overflow-x: auto; padding: 6px 5px 20px; scroll-behavior: smooth; scroll-snap-type: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.tool-carousel::-webkit-scrollbar { display: none; }
.tool-carousel:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; border-radius: 18px; }
.tool-track { display: flex; gap: 15px; }
.tool-slide { position: relative; flex: 0 0 clamp(180px, 13vw, 230px); min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; scroll-snap-align: start; padding: 22px 16px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); text-decoration: none; background: linear-gradient(145deg, rgba(20, 33, 49, .96), rgba(12, 22, 32, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 28px rgba(0, 0, 0, .12); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.tool-slide:before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--bubble-accent, var(--mint)); opacity: .92; }
.tool-slide:after { content: ""; position: absolute; width: 150px; height: 150px; right: -72px; bottom: -75px; border: 1px solid color-mix(in srgb, var(--bubble-accent, var(--mint)) 32%, transparent); border-radius: 50%; }
.tool-slide:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--bubble-accent, var(--mint)) 72%, var(--line)); background: linear-gradient(145deg, rgba(29, 47, 66, .98), rgba(15, 30, 42, .96)); box-shadow: 0 22px 38px rgba(0, 0, 0, .26), inset 0 0 0 1px color-mix(in srgb, var(--bubble-accent, var(--mint)) 15%, transparent); }
.tool-slide:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.tool-slide-icon { position: relative; z-index: 1; width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 25px; background: rgba(8, 13, 18, .42); box-shadow: 0 16px 25px rgba(0, 0, 0, .22); }
.tool-slide-icon .category-icon { width: 58px; height: 58px; border-radius: 17px; }
.tool-slide-icon .category-emoji { font-size: 34px; background: rgba(255, 255, 255, .07); }
.tool-slide-icon .category-logo { padding: 8px; }
.tool-slide strong { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.tool-slide:hover strong { color: var(--mint); }
.category-section { margin-top: 48px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 4px 19px; }
.section-heading h2 { margin: 8px 0 0; color: var(--ink); font-size: 27px; letter-spacing: -.055em; }
.category-bubble-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.category-bubble {
  position: relative; min-height: 132px; display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 22px;
  color: var(--ink); text-align: left; text-decoration: none; background: linear-gradient(145deg, rgba(20, 33, 49, .96), rgba(16, 26, 37, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.category-bubble:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--bubble-accent); opacity: .85; }
.category-bubble:after { content: ""; position: absolute; right: -22px; bottom: -42px; width: 95px; height: 95px; border: 1px solid color-mix(in srgb, var(--bubble-accent) 35%, transparent); border-radius: 50%; opacity: .55; }
.category-bubble:hover, .category-bubble.selected { transform: translateY(-4px); border-color: color-mix(in srgb, var(--bubble-accent) 70%, var(--line)); background: linear-gradient(145deg, rgba(28, 45, 63, .98), rgba(16, 30, 42, .96)); box-shadow: 0 18px 34px rgba(0, 0, 0, .24), inset 3px 0 0 var(--bubble-accent); }
.bubble-icon { position: relative; z-index: 1; display: block; margin-bottom: 12px; }
.bubble-icon .category-icon { width: 38px; height: 38px; border-radius: 12px; }
.bubble-icon .category-emoji { font-size: 20px; background: rgba(255, 255, 255, .07); }
.bubble-icon .category-logo { padding: 6px; }
.bubble-copy { position: relative; z-index: 1; display: block; padding-right: 8px; }
.bubble-copy strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.2; }
.bubble-copy small { display: block; max-width: 180px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bubble-count { position: absolute; right: 16px; bottom: 15px; z-index: 1; color: var(--muted-strong); font-size: 12px; font-weight: 850; }
.bubble-count em { display: block; color: #70869b; font-size: 8px; font-style: normal; font-weight: 600; }
.bubble-arrow { position: absolute; right: 16px; top: 15px; z-index: 1; color: #688097; font-size: 16px; transition: .2s; }
.category-bubble:hover .bubble-arrow, .category-bubble.selected .bubble-arrow { color: var(--mint); transform: translate(2px, -2px); }
.article-section { margin-top: 55px; scroll-margin-top: 20px; }
.category-prompt { grid-column: 1 / -1; min-height: 170px; display: grid; place-content: center; justify-items: center; padding: 30px; border: 1px dashed var(--line-light); border-radius: 20px; color: var(--muted); text-align: center; background: rgba(16, 26, 37, .45); }
.prompt-spark { color: var(--gold); font-size: 25px; }
.category-prompt h3 { margin: 9px 0 4px; color: var(--ink); font-size: 15px; }
.category-prompt p { max-width: 390px; margin: 0; font-size: 11px; line-height: 1.5; }
.category-reset { padding: 8px 11px; border: 1px solid var(--line-light); border-radius: 8px; color: var(--muted-strong); background: transparent; font-size: 10px; font-weight: 750; }
.category-reset:hover { border-color: var(--mint); color: var(--mint); }
.catalog-page { max-width: 1080px; margin: 39px auto 0; animation: catalog-in .25s ease both; }
.catalog-page > .back-link { display: inline-flex; margin: 0 0 22px; }
.catalog-head { position: relative; display: flex; align-items: center; gap: 19px; min-height: 154px; overflow: hidden; padding: 25px 29px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(120deg, rgba(20, 33, 49, .98), rgba(16, 26, 37, .88)); box-shadow: var(--shadow); }
.catalog-head:before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--catalog-accent, var(--mint)); }
.catalog-head:after { content: ""; position: absolute; width: 230px; height: 230px; right: -85px; top: -105px; border: 1px solid color-mix(in srgb, var(--catalog-accent, var(--mint)) 35%, transparent); border-radius: 50%; box-shadow: 0 0 0 25px color-mix(in srgb, var(--catalog-accent, var(--mint)) 7%, transparent); }
.catalog-head-icon { position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center; flex: none; border: 1px solid color-mix(in srgb, var(--catalog-accent, var(--mint)) 45%, var(--line)); border-radius: 21px; background: rgba(8, 13, 18, .48); box-shadow: 0 13px 24px rgba(0, 0, 0, .22); }
.catalog-head-icon .category-icon { width: 48px; height: 48px; border-radius: 14px; }
.catalog-head-icon .category-emoji { font-size: 28px; background: rgba(255, 255, 255, .07); }
.catalog-head-icon .category-logo { padding: 7px; }
.catalog-copy { position: relative; z-index: 1; min-width: 0; }
.catalog-copy h1 { margin: 9px 0 6px; color: var(--ink); font-size: clamp(28px, 4vw, 45px); line-height: 1; letter-spacing: -.065em; }
.catalog-copy p { max-width: 600px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.catalog-count { position: relative; z-index: 1; display: grid; place-items: center; min-width: 55px; margin-left: auto; color: var(--ink); font-size: 22px; font-weight: 850; }
.catalog-count small { color: var(--muted); font-size: 9px; font-weight: 700; }
.catalog-page .content-heading { margin-top: 42px; }
@keyframes catalog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero {
  position: relative; min-height: 330px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  overflow: hidden; padding: 26px 32px 30px 38px; border: 1px solid var(--line); border-radius: 27px;
  background: linear-gradient(125deg, rgba(16, 26, 37, .98), rgba(16, 26, 37, .90) 55%, rgba(16, 36, 45, .96));
  box-shadow: var(--shadow);
}
.hero:before { content: ""; position: absolute; width: 480px; height: 480px; right: -190px; top: -190px; border: 1px solid rgba(156, 228, 203, .11); border-radius: 50%; box-shadow: 0 0 0 34px rgba(156, 228, 203, .025), 0 0 0 70px rgba(107, 142, 232, .035); }
.hero:after { content: ""; position: absolute; right: -75px; bottom: -125px; width: 350px; height: 260px; border: 1px solid rgba(107, 142, 232, .13); border-radius: 50%; }
.hero-copy, .hero-orbit { position: relative; z-index: 1; }
.hero-copy { max-width: 610px; }
.hero h1 { margin: 17px 0; color: var(--ink); font-size: clamp(35px, 4.6vw, 63px); line-height: .98; letter-spacing: -.075em; font-weight: 850; }
.hero h1 span { color: var(--mint); }
.hero-copy > p { max-width: 470px; margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.search-box { width: min(520px, 100%); height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid var(--line-light); border-radius: 13px; background: rgba(8, 13, 18, .66); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.search-box:focus-within { border-color: rgba(156, 228, 203, .64); box-shadow: 0 0 0 4px rgba(156, 228, 203, .08); }
.search-box > span { color: var(--muted-strong); font-size: 25px; line-height: 1; transform: rotate(-15deg); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); font-size: 12px; background: transparent; }
.search-box input::placeholder { color: #6e8296; }
.search-box kbd { padding: 4px 6px; border: 1px solid var(--line-light); border-radius: 5px; color: #7890a7; font-size: 9px; white-space: nowrap; }
.hero-orbit { width: 260px; height: 245px; flex: none; }
.hero-mascot { position: absolute; inset: 39px 47px auto auto; width: 116px; height: 116px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(156, 228, 203, .24); border-radius: 38px; background: rgba(20, 33, 49, .90); box-shadow: 0 20px 45px rgba(0, 0, 0, .25); transform: rotate(5deg); }
.hero-mascot img { width: 54px; }
.hero-mascot span { margin-top: 7px; color: var(--mint); font-size: 8px; font-weight: 800; }
.orbit-card { position: absolute; display: grid; grid-template-columns: 22px auto; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line-light); border-radius: 12px; background: rgba(20, 33, 49, .90); box-shadow: 0 12px 28px rgba(0, 0, 0, .20); font-size: 9px; }
.orbit-card span { grid-row: span 2; color: var(--mint); font-size: 15px; }
.orbit-card small { color: var(--muted); }
.orbit-card strong { color: var(--ink); font-size: 15px; }
.orbit-card-one { left: 0; top: 34px; transform: rotate(-9deg); }
.orbit-card-two { right: 0; bottom: 31px; transform: rotate(7deg); }

.content-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 47px 4px 20px; }
.content-heading h2 { margin: 8px 0 0; color: var(--ink); font-size: 26px; letter-spacing: -.055em; }
.result-count { margin-bottom: 3px; color: #71869b; font-size: 10px; font-weight: 800; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.article-card { position: relative; min-height: 192px; overflow: hidden; padding: 21px 20px 19px; border: 1px solid var(--line); border-radius: 17px; background: rgba(16, 26, 37, .78); text-align: left; transition: .23s ease; }
.article-card:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--card-accent); opacity: .92; }
.article-card:hover { transform: translateY(-5px); border-color: var(--line-light); background: var(--surface-hover); box-shadow: 0 17px 34px rgba(0, 0, 0, .25); }
.article-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.article-category-mark { width: 25px; height: 25px; border-radius: 7px; }
.article-category-mark.category-emoji { font-size: 13px; }
.article-category-mark.category-logo { padding: 3px; }
.article-card h3 { margin: 0 28px 8px 0; color: var(--ink); font-size: 16px; line-height: 1.15; letter-spacing: -.035em; }
.article-card p { max-width: 240px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.card-arrow { position: absolute; right: 17px; bottom: 15px; color: #6e8499; font-size: 18px; transition: .2s; }
.article-card:hover .card-arrow { color: var(--mint); transform: translate(2px, -2px); }
.empty-state { grid-column: 1 / -1; padding: 60px 20px; border: 1px dashed var(--line-light); border-radius: 16px; color: var(--muted); text-align: center; }
.empty-state > span { color: var(--gold); font-size: 30px; }
.empty-state h3 { margin: 11px 0 6px; color: var(--ink); }
.empty-state p { margin: 0; font-size: 12px; }

.mascot-wrap { position: fixed; right: 28px; bottom: 24px; z-index: 10; }
.mascot-button { position: relative; width: 57px; height: 57px; display: grid; place-items: center; border: 0; border-radius: 20px; background: linear-gradient(145deg, #172b43, var(--navy)); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); transition: .2s; }
.mascot-button:hover { transform: translateY(-4px) rotate(-3deg); }
.mascot-parrot { display: grid; place-items: center; font-size: 33px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); animation: parrot-bob 2.8s ease-in-out infinite; }
.mascot-mini .mascot-parrot { font-size: 22px; animation-duration: 2.4s; }
@keyframes parrot-bob { 0%, 100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
.mascot-face { position: relative; display: block; width: 30px; height: 27px; border: 3px solid #fff; border-radius: 11px 11px 13px 13px; background: linear-gradient(145deg, var(--mint), #8bb5ed); }
.mascot-face:before, .mascot-face:after { content: ""; position: absolute; top: -7px; width: 8px; height: 8px; border-radius: 50% 50% 0 50%; background: var(--gold); transform: rotate(25deg); }
.mascot-face:before { left: -5px; }
.mascot-face:after { right: -5px; transform: rotate(65deg); }
.mascot-face i, .mascot-face b { position: absolute; top: 8px; width: 4px; height: 5px; border-radius: 50%; background: var(--navy); }
.mascot-face i { left: 7px; }
.mascot-face b { right: 7px; }
.mascot-face em { position: absolute; bottom: 4px; left: 10px; width: 7px; height: 3px; border-bottom: 2px solid var(--navy); border-radius: 50%; font-style: normal; }
.mascot-spark { position: absolute; right: -4px; top: -8px; color: var(--gold); font-size: 17px; }
.mascot-panel { position: absolute; right: 0; bottom: 70px; width: 315px; padding: 15px; border: 1px solid var(--line-light); border-radius: 18px; background: rgba(16, 26, 37, .98); box-shadow: 0 22px 55px rgba(0, 0, 0, .42); animation: pop .2s ease; }
.hidden { display: none !important; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.mascot-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mascot-head strong, .mascot-head small { display: block; }
.mascot-head strong { color: var(--ink); font-size: 12px; }
.mascot-head small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.mascot-mini { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: var(--navy); }
.mascot-mini span { width: 15px; height: 13px; border: 2px solid #fff; border-radius: 6px; background: var(--mint); }
.icon-button { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.mascot-intro { margin: 12px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.mascot-answer { color: var(--ink); font-size: 11px; line-height: 1.55; }
.mascot-answer p { margin: 0 0 10px; }
.typing { display: flex; gap: 3px; padding: 10px 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); animation: bounce .8s infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { to { opacity: .5; transform: translateY(-4px); } }
#mascot-form { display: flex; gap: 6px; margin-top: 12px; }
#mascot-form input { min-width: 0; flex: 1; padding: 9px; border: 1px solid var(--line-light); border-radius: 9px; outline: 0; color: var(--ink); font-size: 10px; background: var(--bg-soft); }
#mascot-form input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(156, 228, 203, .10); }
.assistant-link { display: block; margin-top: 7px; padding: 8px 9px; border: 1px solid rgba(156, 228, 203, .15); border-radius: 8px; color: var(--mint); font-size: 10px; text-decoration: none; background: rgba(156, 228, 203, .05); }
.assistant-link:hover { background: rgba(156, 228, 203, .12); }

.article-view { margin-top: 28px; }
.back-link { display: inline-block; color: var(--muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 220px; gap: 45px; max-width: 1050px; margin: 25px auto 0; }
.article-page { overflow: hidden; padding: 0 52px 38px; border: 1px solid var(--line); border-radius: 19px; background: rgba(16, 26, 37, .90); box-shadow: var(--shadow); }
.article-cover { height: 155px; display: flex; align-items: end; gap: 13px; margin: 0 -52px 26px; padding: 24px 52px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(120deg, color-mix(in srgb, var(--cover) 32%, var(--surface-strong)), var(--surface)); }
.article-cover > span:not(.category-icon) { color: var(--ink); font-size: 13px; font-weight: 800; }
.article-cover > strong { margin-left: auto; color: var(--gold); font-size: 28px; }
.cover-category-icon { width: 41px; height: 41px; border-radius: 12px; }
.cover-category-icon.category-emoji { font-size: 22px; background: rgba(255, 255, 255, .09); }
.cover-category-icon.category-logo { padding: 6px; }
.article-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.article-meta-icon { width: 21px; height: 21px; border-radius: 6px; }
.article-meta-icon.category-emoji { font-size: 12px; }
.article-meta-icon.category-logo { padding: 3px; }
.article-page h1 { margin: 16px 0 10px; color: var(--ink); font-size: 43px; line-height: 1.03; letter-spacing: -.07em; }
.article-lede { margin: 0 0 30px; color: var(--muted-strong); font-size: 15px; line-height: 1.6; }
.article-body { color: #c1cfdb; font-size: 14px; line-height: 1.8; }
.article-body h2 { margin: 30px 0 7px; color: var(--ink); font-size: 23px; line-height: 1.1; letter-spacing: -.04em; }
.article-body p { margin: 12px 0; }
.article-body li { margin: 8px 0; }
.article-body strong { color: var(--mint); }
.article-body a { color: var(--mint); font-weight: 750; text-decoration: underline; text-decoration-color: rgba(156, 228, 203, .45); text-underline-offset: 3px; }
.article-body a:hover { color: #fff; text-decoration-color: var(--mint); }
.article-body .guide-image { margin: 22px 0 26px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 14, 22, .62); }
.article-body .guide-image img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.article-body .guide-image p { margin: 9px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.article-body blockquote { margin: 22px 0; padding: 13px 17px; border-left: 3px solid var(--mint); color: #b5d5ca; background: rgba(156, 228, 203, .07); }
.escalation-callout { display: flex; gap: 12px; margin-top: 31px; padding: 15px; border: 1px solid rgba(255, 212, 123, .22); border-radius: 12px; color: #e7cf97; background: rgba(255, 212, 123, .07); }
.escalation-callout > span { color: var(--gold); font-size: 20px; }
.escalation-callout strong { color: var(--gold); font-size: 11px; }
.escalation-callout p { margin: 4px 0 0; color: #c5b78f; font-size: 11px; line-height: 1.5; }
.article-footer { display: flex; align-items: center; gap: 8px; margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.reaction { padding: 7px 10px; border: 1px solid var(--line-light); border-radius: 7px; color: var(--muted-strong); background: transparent; font-size: 10px; }
.reaction:hover { border-color: var(--mint); color: var(--mint); }
.thanks { color: var(--mint); font-weight: 800; }
.article-aside { padding-top: 77px; }
.aside-card { margin-bottom: 11px; padding: 17px; border: 1px solid rgba(156, 228, 203, .18); border-radius: 15px; background: rgba(156, 228, 203, .07); }
.aside-card.quiet { border-color: var(--line); background: var(--surface); }
.aside-icon { display: block; margin-bottom: 14px; color: var(--mint); font-size: 20px; }
.aside-card strong { display: block; color: var(--ink); font-size: 12px; }
.aside-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.aside-card a { display: block; margin-top: 11px; color: var(--mint); font-size: 10px; font-weight: 800; text-decoration: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 850; text-decoration: none; transition: .2s; }
.button.primary { color: var(--navy); background: var(--mint); box-shadow: 0 8px 18px rgba(0, 0, 0, .20); }
.button.primary:hover { background: #b4f0dd; transform: translateY(-1px); }
.button.soft { border-color: rgba(107, 142, 232, .25); color: #b5c8ff; background: rgba(107, 142, 232, .12); }
.button.ghost { background: transparent; }
.button.danger { color: #f2a18c; }
.buttonless { border: 0; background: transparent; }
.wide { width: 100%; }

.admin-login { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 570px) minmax(300px, 1fr); background: var(--bg); }
.login-panel { align-self: center; width: min(420px, calc(100% - 60px)); margin: auto; }
.brand.centered { margin-bottom: 65px; }
.login-panel h1 { margin: 15px 0; color: var(--ink); font-size: 39px; line-height: 1.02; letter-spacing: -.07em; }
.login-panel h1 span { color: var(--mint); }
.login-panel > p { margin: 0 0 26px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-panel label, .editor-settings label, .editor-bottom label { display: flex; flex-direction: column; gap: 7px; color: var(--muted-strong); font-size: 10px; font-weight: 850; }
.login-panel input, .editor-settings input, .editor-settings select, .editor-bottom input { padding: 11px 12px; border: 1px solid var(--line-light); border-radius: 9px; outline: 0; color: var(--ink); font-size: 11px; background: var(--surface); }
.login-panel input:focus, .editor-settings input:focus, .editor-settings select:focus, .editor-bottom input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(156, 228, 203, .12); }
.login-panel .button { margin-top: 18px; padding: 13px; }
.login-panel .back-link { margin-top: 24px; }
.form-error { margin-bottom: 11px; padding: 10px; border: 1px solid rgba(232, 148, 121, .23); border-radius: 8px; color: #f0a18d; font-size: 10px; background: rgba(232, 148, 121, .09); }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: end; overflow: hidden; padding: 70px; color: #fff; background: linear-gradient(150deg, #101a35, #0b2431); }
.login-art:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 58% 40%, rgba(156, 228, 203, .24), transparent 24%), radial-gradient(circle at 20% 80%, rgba(107, 142, 232, .28), transparent 30%); }
.login-art img { position: absolute; top: 34%; left: 50%; width: 150px; filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .28)); transform: translate(-50%, -50%); animation: float 4s ease-in-out infinite; }
.login-art strong, .login-art span { position: relative; }
.login-art strong { font-size: 43px; line-height: .98; letter-spacing: -.07em; }
.login-art span { margin-top: 13px; color: #b6c4dc; font-size: 12px; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent); }
@keyframes float { 50% { transform: translate(-50%, -56%) rotate(3deg); } }

.admin-shell { min-height: 100vh; background: var(--bg); }
.admin-topbar { height: 70px; padding: 0 29px; border-bottom: 1px solid var(--line); background: rgba(16, 26, 37, .94); }
.admin-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 70px); }
.admin-sidebar { display: flex; flex-direction: column; padding: 23px 15px; border-right: 1px solid var(--line); background: rgba(12, 20, 29, .92); }
.new-article { width: 100%; margin-bottom: 14px; justify-content: center; }
.manage-categories { width: 100%; margin-bottom: 14px; justify-content: center; }
.admin-filter { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); }
.admin-filter input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 10px; background: transparent; }
.admin-list { display: grid; gap: 3px; overflow: auto; }
.admin-article-link { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 8px; color: var(--muted); text-align: left; background: transparent; }
.admin-article-link:hover, .admin-article-link.active { color: var(--ink); background: var(--surface-hover); }
.admin-category-icon { width: 24px; height: 24px; border-radius: 7px; }
.admin-category-icon.category-emoji { font-size: 12px; }
.admin-category-icon.category-logo { padding: 3px; }
.admin-category-link { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 8px; color: var(--muted); text-align: left; background: transparent; }
.admin-category-link:hover, .admin-category-link.active { color: var(--ink); background: var(--surface-hover); }
.admin-category-link strong, .admin-category-link small { display: block; }
.admin-category-link strong { font-size: 10px; line-height: 1.25; }
.admin-category-link small { margin-top: 4px; color: #7890a5; font-size: 8px; }
.admin-article-link strong, .admin-article-link small { display: block; }
.admin-article-link strong { font-size: 10px; line-height: 1.25; }
.admin-article-link small { margin-top: 4px; color: #7890a5; font-size: 8px; }
.admin-status { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #d9a45d; }
.admin-status.published { background: var(--green); }
.admin-empty { padding: 14px; color: var(--muted); font-size: 10px; }
.admin-sidebar-foot { margin-top: auto; padding: 15px 7px 0; border-top: 1px solid var(--line); }
.admin-sidebar-foot small { display: block; margin-top: 9px; color: #7890a5; font-size: 9px; }
.editor-area { min-width: 0; overflow: auto; }
.editor-wrap { width: min(920px, calc(100% - 90px)); margin: 45px auto 80px; }
.editor-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; color: var(--muted); font-size: 10px; }
.editor-breadcrumb b { color: #71889d; font-size: 15px; }
.draft-chip { margin-left: 6px; padding: 5px 8px; border-radius: 999px; color: #e6bc7a; font-size: 8px; font-weight: 850; text-transform: uppercase; background: rgba(255, 212, 123, .10); }
.draft-chip.published { color: var(--mint); background: rgba(156, 228, 203, .10); }
.title-input { width: 100%; margin-bottom: 13px; padding: 0; border: 0; outline: 0; color: var(--ink); font-size: 43px; line-height: 1.06; letter-spacing: -.07em; font-weight: 850; background: transparent; }
.title-input::placeholder { color: #536a80; }
.excerpt-input { width: 100%; height: 48px; margin-bottom: 25px; padding: 0; border: 0; outline: 0; resize: vertical; color: var(--muted-strong); font-size: 13px; line-height: 1.5; background: transparent; }
.excerpt-input::placeholder { color: #647b91; }
.editor-settings { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin-bottom: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.editor-settings label { min-width: 0; }
.editor-settings select { cursor: pointer; }
.settings-wide { min-width: 0; }
.editor-settings small { color: #7c91a5; font-size: 8px; font-weight: 500; }
.editor-toolbar { display: flex; align-items: center; gap: 3px; padding: 7px 9px; border: 1px solid var(--line-light); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface); }
.editor-toolbar button { padding: 6px 8px; border: 0; border-radius: 5px; color: var(--muted-strong); font-size: 10px; background: transparent; }
.editor-toolbar button:hover { color: var(--mint); background: rgba(156, 228, 203, .10); }
.editor-toolbar span { width: 1px; height: 18px; margin: 0 5px; background: var(--line-light); }
.rich-editor { min-height: 440px; padding: 25px 29px; border: 1px solid var(--line-light); border-radius: 0 0 10px 10px; outline: 0; color: #c1cfdb; font-size: 14px; line-height: 1.75; background: var(--surface); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.rich-editor:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(156, 228, 203, .10); }
.rich-editor.preview-mode { padding: 35px; border-radius: 10px; box-shadow: var(--shadow); }
.rich-editor h2 { margin: 20px 0 7px; color: var(--ink); font-size: 23px; letter-spacing: -.04em; }
.rich-editor h2:first-child { margin-top: 0; }
.rich-editor strong { color: var(--mint); }
.rich-editor blockquote { padding: 11px 15px; border-left: 3px solid var(--mint); color: #b5d5ca; background: rgba(156, 228, 203, .07); }
.editor-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 25px; margin-top: 24px; }
.editor-actions { display: flex; align-items: center; gap: 8px; }
.editor-loading { min-height: 60vh; display: grid; place-content: center; color: var(--muted); font-size: 12px; }
.category-manager { width: min(1080px, calc(100% - 90px)); margin: 45px auto 80px; }
.category-manager-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.category-manager-head h1 { margin: 10px 0 7px; color: var(--ink); font-size: 39px; letter-spacing: -.07em; }
.category-manager-head p { margin: 0; color: var(--muted); font-size: 12px; }
.category-manager-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 25px; align-items: start; }
.category-manager-list { display: grid; gap: 3px; max-height: 650px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 20, 29, .75); }
.category-form { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 26, 37, .78); }
.category-form-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px; border: 1px solid var(--line-light); border-radius: 11px; background: linear-gradient(120deg, color-mix(in srgb, var(--category-accent) 24%, var(--surface-strong)), var(--surface)); }
.category-preview-icon { width: 42px; height: 42px; border-radius: 12px; }
.category-preview-icon.category-emoji { font-size: 22px; }
.category-preview-icon.category-logo { padding: 6px; }
.category-form-preview strong, .category-form-preview small { display: block; }
.category-form-preview strong { color: var(--ink); font-size: 14px; }
.category-form-preview small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.category-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.category-form-grid label { display: flex; flex-direction: column; gap: 7px; color: var(--muted-strong); font-size: 10px; font-weight: 850; }
.category-form-grid input, .category-form-grid select, .category-form-grid textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line-light); border-radius: 9px; outline: 0; color: var(--ink); font: inherit; font-size: 11px; background: var(--surface); }
.category-form-grid input[type="color"] { height: 37px; padding: 4px; cursor: pointer; }
.category-form-grid textarea { min-height: 80px; resize: vertical; }
.category-form-grid input:focus, .category-form-grid select:focus, .category-form-grid textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(156, 228, 203, .12); }
.category-form-grid small { color: #7c91a5; font-size: 8px; font-weight: 500; }
.category-active { justify-content: center; align-items: flex-start; gap: 9px !important; padding-top: 27px; font-weight: 650 !important; }
.category-active input { width: auto; margin: 0; accent-color: var(--mint); }
.category-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.category-save-hint { color: #7890a5; font-size: 9px; }
.hidden { display: none !important; }

/* Category manager workspace */
.category-manager { width: min(1320px, calc(100% - 64px)); margin: 32px auto 70px; }
.category-manager .editor-breadcrumb { margin-bottom: 18px; }
.category-manager-head { align-items: flex-end; gap: 28px; margin-bottom: 20px; }
.category-manager-title { min-width: 0; }
.category-manager-head h1 { margin: 8px 0 6px; font-size: clamp(36px, 4vw, 48px); }
.category-manager-head p { max-width: 590px; line-height: 1.55; }
.category-manager-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 15px; color: #8298ac; font-size: 10px; }
.category-manager-meta span { display: inline-flex; align-items: center; gap: 6px; }
.category-manager-meta b { color: var(--mint); font-size: 12px; }
.category-manager-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(118, 207, 164, .10); }
.category-manager-actions { display: flex; flex: none; gap: 9px; }
.category-manager-actions .button { white-space: nowrap; }
.category-manager-grid { grid-template-columns: minmax(265px, 310px) minmax(0, 1fr); gap: 16px; }
.category-manager-list { display: flex; flex-direction: column; height: min(700px, calc(100vh - 250px)); min-height: 520px; max-height: none; overflow: hidden; padding: 0; border-radius: 18px; background: linear-gradient(155deg, rgba(18, 31, 45, .96), rgba(10, 18, 27, .96)); box-shadow: 0 18px 38px rgba(0, 0, 0, .14); }
.category-list-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 13px; border-bottom: 1px solid var(--line); }
.category-list-intro strong, .category-list-intro small { display: block; }
.category-list-intro strong { color: var(--ink); font-size: 12px; }
.category-list-intro small { margin-top: 5px; color: #7890a5; font-size: 9px; }
.category-list-intro > span { display: grid; min-width: 27px; height: 27px; place-items: center; border: 1px solid rgba(156, 228, 203, .28); border-radius: 9px; color: var(--mint); font-size: 10px; font-weight: 850; background: rgba(156, 228, 203, .08); }
.category-list-scroll { min-height: 0; overflow: auto; padding: 9px; }
.admin-category-link { padding: 11px 10px; border-radius: 12px; gap: 9px; }
.admin-category-link:hover { background: rgba(156, 228, 203, .07); }
.admin-category-link.active { color: var(--ink); background: linear-gradient(100deg, rgba(156, 228, 203, .15), rgba(119, 151, 211, .10)); box-shadow: inset 3px 0 0 var(--mint); }
.admin-category-link strong { font-size: 11px; }
.admin-category-link small { font-size: 9px; }
.category-form { padding: 28px; border-radius: 18px; background: linear-gradient(150deg, rgba(18, 31, 45, .96), rgba(13, 23, 34, .96)); box-shadow: 0 18px 38px rgba(0, 0, 0, .14); }
.category-form-preview { min-height: 70px; margin-bottom: 25px; padding: 18px; border-radius: 15px; }
.category-preview-icon-wrap { display: grid; width: 54px; height: 54px; flex: none; place-items: center; border: 1px solid rgba(255, 255, 255, .10); border-radius: 15px; background: rgba(255, 255, 255, .08); }
.category-preview-icon { width: 43px; height: 43px; }
.category-form-preview strong { font-size: 16px; }
.category-form-preview small { font-size: 10px; }
.preview-label { display: block; margin-bottom: 5px; color: var(--mint); font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.preview-badge { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(156, 228, 203, .25); border-radius: 999px; color: var(--mint); font-size: 8px; font-weight: 850; background: rgba(156, 228, 203, .08); }
.category-form-section { margin-bottom: 23px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.category-form-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.category-form-section-head h2 { margin: 7px 0 0; color: var(--ink); font-size: 16px; letter-spacing: -.03em; }
.category-form-section-head > span { color: #7890a5; font-size: 9px; }
.category-form-grid { gap: 19px 14px; }
.category-form-grid label { gap: 8px; font-size: 11px; }
.category-form-grid input, .category-form-grid select, .category-form-grid textarea { padding: 13px 14px; border-radius: 10px; font-size: 12px; }
.category-form-grid input:not([type="color"]), .category-form-grid select { min-height: 45px; }
.category-form-grid textarea { min-height: 105px; line-height: 1.5; }
.category-active { display: flex; flex-direction: row !important; justify-content: flex-start; align-items: flex-start; gap: 10px !important; padding-top: 28px; }
.category-active input { margin-top: 2px; }
.category-active span { display: grid; gap: 4px; }
.category-active b { color: var(--ink); font-size: 10px; }
.category-active small { margin: 0; }
.category-form-actions { margin-top: 0; padding-top: 22px; }
.category-save-hint { max-width: 360px; line-height: 1.5; }

@media (max-width: 1050px) and (min-width: 781px) {
  .category-manager { width: min(100% - 44px, 920px); }
  .category-manager-grid { grid-template-columns: 245px minmax(0, 1fr); }
  .category-form { padding: 21px; }
}

@media (max-width: 1050px) {
  .public-grid { gap: 25px; }
  .category-bubble-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-carousel-section { padding-right: 25px; padding-left: 25px; }
  .tool-slide { flex-basis: clamp(180px, 25vw, 225px); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-orbit { transform: scale(.85); transform-origin: right center; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 190px; gap: 25px; }
  .article-page { padding-right: 38px; padding-left: 38px; }
  .article-cover { margin-right: -38px; margin-left: -38px; padding-right: 38px; padding-left: 38px; }
}

@media (max-width: 780px) {
  .site-shell { padding: 12px 15px 50px; }
  .topbar { height: 55px; }
  .top-actions .status-dot { display: none; }
  .home-heading { margin: 41px auto 23px; }
  .home-heading h1 { font-size: 38px; }
  .tool-carousel-section { width: 100%; margin-top: 34px; margin-left: 0; padding: 0; }
  .carousel-heading h2 { font-size: 21px; }
  .carousel-control { width: 38px; height: 38px; border-radius: 11px; }
  .tool-carousel { padding-right: 2px; padding-left: 2px; }
  .tool-slide { flex-basis: min(72vw, 250px); min-height: 178px; gap: 15px; padding: 18px 12px; border-radius: 22px; }
  .tool-slide-icon { width: 66px; height: 66px; border-radius: 20px; }
  .tool-slide-icon .category-icon { width: 47px; height: 47px; border-radius: 14px; }
  .tool-slide-icon .category-emoji { font-size: 27px; }
  .tool-slide-icon .category-logo { padding: 6px; }
  .tool-slide strong { font-size: 11px; }
  .public-grid { display: block; margin-top: 21px; }
  .category-section { margin-top: 34px; }
  .category-bubble-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .category-bubble { min-height: 119px; padding: 14px; border-radius: 18px; }
  .bubble-icon { margin-bottom: 9px; }
  .bubble-icon .category-icon { width: 32px; height: 32px; border-radius: 10px; }
  .bubble-icon .category-emoji { font-size: 16px; }
  .bubble-copy small { display: none; }
  .bubble-count { right: 14px; bottom: 12px; }
  .bubble-arrow { right: 13px; top: 12px; }
  .article-section { margin-top: 38px; }
  .section-heading h2 { font-size: 23px; }
  .category-rail { display: flex; gap: 6px; overflow: auto; margin: 0 -15px 14px; padding: 0 15px 13px; }
  .rail-label, .rail-note { display: none; }
  .category-pill { width: auto; white-space: nowrap; padding: 7px 9px; border: 1px solid var(--line); font-size: 10px; }
  .category-pill > span:nth-last-child(1) { margin-left: 2px; }
  .category-pill > span:nth-child(2) { margin-left: 0; }
  .category-icon { width: 24px; height: 24px; }
  .hero { min-height: auto; display: block; padding: 26px 24px; }
  .hero h1 { font-size: 42px; }
  .hero-orbit { width: 100%; height: 140px; margin-top: 5px; transform: none; }
  .hero-mascot { top: 15px; right: calc(50% - 58px); }
  .orbit-card-one { left: 7%; top: 27px; }
  .orbit-card-two { right: 6%; bottom: 12px; }
  .article-grid { grid-template-columns: 1fr; }
  .content-heading { margin-top: 31px; }
  .catalog-page { margin-top: 25px; }
  .catalog-head { align-items: flex-start; min-height: 0; padding: 22px 19px; }
  .catalog-head-icon { width: 56px; height: 56px; border-radius: 17px; }
  .catalog-head-icon .category-icon { width: 38px; height: 38px; border-radius: 11px; }
  .catalog-head-icon .category-emoji { font-size: 22px; }
  .catalog-copy h1 { font-size: 31px; }
  .catalog-copy p { font-size: 11px; }
  .catalog-count { display: none; }
  .article-layout { display: block; }
  .article-aside { display: none; }
  .article-page { padding: 0 22px 30px; }
  .article-cover { height: 120px; margin-right: -22px; margin-left: -22px; padding: 18px 20px; }
  .article-page h1 { font-size: 35px; }
  .mascot-wrap { right: 16px; bottom: 16px; }
  .admin-login { display: block; min-height: 100vh; padding: 30px 0; }
  .login-panel { width: min(420px, calc(100% - 38px)); }
  .brand.centered { margin-bottom: 55px; }
  .login-art { display: none; }
  .admin-topbar { padding: 0 15px; }
  .admin-top-actions .save-state { display: none; }
  .admin-body { display: block; }
  .admin-sidebar { padding: 13px 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-list { display: flex; overflow: auto; padding-bottom: 2px; }
  .admin-article-link { min-width: 210px; }
  .admin-sidebar-foot { display: none; }
  .editor-wrap { width: calc(100% - 30px); margin: 26px auto 55px; }
  .title-input { font-size: 34px; }
  .editor-settings { grid-template-columns: 1fr 1fr; }
  .editor-settings .settings-wide { grid-column: 1 / -1; }
  .editor-bottom { grid-template-columns: 1fr; }
  .editor-actions { justify-content: space-between; }
  .editor-toolbar { overflow: auto; }
  .editor-toolbar span { flex: none; }
  .category-manager { width: calc(100% - 30px); margin: 26px auto 55px; }
  .category-manager-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .category-manager-head h1 { font-size: 34px; }
  .category-manager-grid { grid-template-columns: 1fr; }
  .category-manager-list { display: flex; max-height: none; overflow: auto; }
  .admin-category-link { min-width: 210px; }
  .category-form { padding: 18px; }
  .category-form-actions { align-items: flex-start; flex-direction: column; }
}

/* Calm editor shell: Food Service's navigation rhythm, with the KB library in the workspace. */
.admin-topbar {
  height: 78px;
  padding: 0 34px;
  background: #0d1823;
}
.admin-topbar-context { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.admin-topbar-context .eyebrow { margin: 0; color: var(--mint); font-size: 8px; }
.admin-topbar-context strong { color: var(--ink); font-size: 18px; letter-spacing: -.045em; }
.admin-topbar-context small { color: var(--muted); font-size: 10px; }
.admin-body { grid-template-columns: 246px minmax(0, 1fr); min-height: calc(100vh - 78px); }
.admin-sidebar {
  min-height: calc(100vh - 78px);
  padding: 26px 16px 18px;
  border-right: 1px solid rgba(156, 228, 203, .10);
  background: #102a25;
}
.admin-sidebar-brand { padding: 0 8px 38px; }
.admin-sidebar-brand img { width: 42px; height: 42px; border: 0; border-radius: 14px; background: var(--mint); box-shadow: 0 10px 24px rgba(0, 0, 0, .20); }
.admin-sidebar-brand strong { font-size: 15px; }
.admin-sidebar-brand small { color: #9eb5a7; font-size: 10px; }
.admin-sidebar-nav { gap: 5px; margin-bottom: 0; }
.admin-nav-label { padding: 0 12px 7px; color: #87a99c; font-size: 9px; letter-spacing: .15em; }
.admin-nav-item {
  min-height: 46px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  color: #a9c0b3;
}
.admin-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); transform: none; }
.admin-nav-item-primary { color: #102a25; background: var(--mint); box-shadow: 0 12px 25px rgba(0, 0, 0, .18); }
.admin-nav-item-primary:hover { color: #102a25; background: #b8f1df; }
.admin-nav-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 16px; }
.admin-nav-item strong { font-size: 11px; }
.admin-nav-item small { display: none; }
.admin-nav-item em { color: #8eafa1; font-size: 10px; }
.admin-nav-item-primary em { color: rgba(16, 42, 37, .65); }
.admin-sidebar-spacer { flex: 1; }
.admin-sidebar-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 4px 19px;
  padding: 13px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}
.admin-note-dot { display: grid; width: 8px; height: 8px; place-items: center; margin-top: 4px; border-radius: 50%; background: #72b75e; box-shadow: 0 0 0 5px rgba(114, 183, 94, .12); }
.admin-note-dot i { display: none; }
.admin-sidebar-note strong, .admin-sidebar-note small { display: block; }
.admin-sidebar-note strong { color: #fff; font-size: 11px; }
.admin-sidebar-note small { margin-top: 4px; color: #8fab9e; font-size: 9px; }
.admin-sidebar-user { display: flex; align-items: center; gap: 9px; padding: 17px 5px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.admin-user-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #102a25; font-size: 10px; font-weight: 900; background: var(--mint); }
.admin-sidebar-user div { min-width: 0; flex: 1; }
.admin-sidebar-user strong, .admin-sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-user strong { color: #fff; font-size: 11px; }
.admin-sidebar-user small { margin-top: 2px; color: #8fab9e; font-size: 9px; }
.admin-user-arrow { color: #8fab9e; font-size: 13px; }
.admin-main { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-width: 0; min-height: 0; }
.admin-library-panel { display: flex; min-width: 0; min-height: calc(100vh - 78px); flex-direction: column; padding: 32px 18px 20px; border-right: 1px solid var(--line); background: #0c151e; }
.admin-library-head { margin: 0 6px 16px; align-items: flex-start; }
.admin-library-head .eyebrow { margin-bottom: 7px; color: #7890a5; font-size: 8px; }
.admin-library-head strong { color: var(--ink); font-size: 16px; letter-spacing: -.04em; }
.admin-library-head small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.admin-library-head > span { min-width: 24px; height: 24px; border-color: rgba(156, 228, 203, .24); color: var(--mint); background: rgba(156, 228, 203, .07); }
.admin-library-panel .admin-filter { margin-bottom: 12px; border-color: var(--line); background: var(--surface); }
.admin-library-panel .admin-list { gap: 3px; }
.admin-library-panel .admin-article-link { padding: 9px 8px; border-radius: 10px; }
.admin-library-panel .admin-article-link strong { font-size: 10px; }
.admin-library-panel .admin-article-link:hover { background: var(--surface-hover); }
.admin-library-panel .admin-article-link.active { box-shadow: inset 3px 0 0 var(--mint); background: linear-gradient(100deg, rgba(156, 228, 203, .13), rgba(107, 142, 232, .07)); }
.editor-area { min-width: 0; min-height: calc(100vh - 78px); }
.admin-main.category-view { display: block; }
.admin-main.category-view .admin-library-panel { display: none; }
.admin-main.category-view .editor-area { min-height: calc(100vh - 78px); }

@media (max-width: 980px) and (min-width: 781px) {
  .admin-main { grid-template-columns: 245px minmax(0, 1fr); }
  .admin-sidebar { width: 220px; }
  .admin-body { grid-template-columns: 220px minmax(0, 1fr); }
  .admin-topbar-context small { display: none; }
}

@media (max-width: 780px) {
  .admin-topbar { height: 64px; padding: 0 15px; }
  .admin-topbar-context { gap: 7px; }
  .admin-topbar-context .eyebrow, .admin-topbar-context small { display: none; }
  .admin-topbar-context strong { font-size: 15px; }
  .admin-body { display: block; min-height: 0; }
  .admin-sidebar { min-height: 0; padding: 16px 15px 14px; border-right: 0; border-bottom: 1px solid rgba(156, 228, 203, .10); }
  .admin-sidebar-brand { padding: 0 4px 18px; }
  .admin-sidebar-nav { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
  .admin-nav-label { grid-column: 1 / -1; }
  .admin-nav-item { min-height: 48px; grid-template-columns: 27px minmax(0, 1fr); padding: 8px; }
  .admin-nav-item em { display: none; }
  .admin-sidebar-spacer, .admin-sidebar-note, .admin-sidebar-user { display: none; }
  .admin-main { display: block; min-height: 0; }
  .admin-library-panel { min-height: 0; padding: 22px 15px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-library-panel .admin-list { display: flex; flex: none; overflow: auto; padding-bottom: 2px; }
  .admin-library-panel .admin-article-link { min-width: 210px; }
  .editor-area { min-height: 0; }
  .admin-main.category-view .admin-library-panel { display: none; }
}

@media (max-width: 780px) {
  .category-manager { width: calc(100% - 30px); margin: 26px auto 55px; }
  .category-manager-head { align-items: flex-start; gap: 14px; }
  .category-manager-head h1 { font-size: 34px; }
  .category-manager-actions { width: 100%; }
  .category-manager-actions .button { flex: 1; justify-content: center; }
  .category-manager-meta { gap: 8px 13px; }
  .category-manager-grid { grid-template-columns: 1fr; }
  .category-manager-list { height: auto; min-height: 0; max-height: none; }
  .category-list-scroll { display: flex; gap: 4px; overflow-x: auto; padding: 9px; }
  .admin-category-link { min-width: 210px; }
  .category-form { padding: 18px; }
  .category-form-section-head { display: block; }
  .category-form-section-head > span { display: block; margin-top: 7px; }
  .category-form-grid { grid-template-columns: 1fr; }
  .category-active { padding-top: 0; }
  .category-form-actions { align-items: flex-start; }
  .category-save-hint { max-width: none; }
}

/* Catalog editor inspired by Food Service: hero metrics, selectable cards and a clear editor surface. */
.category-manager { width: min(1450px, calc(100% - 64px)); margin: 32px auto 70px; }
.category-manager-head { margin-bottom: 20px; }
.category-catalog-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 165px; margin-bottom: 18px; padding: 27px 29px; border: 1px solid rgba(156, 228, 203, .14); border-radius: 22px; background: linear-gradient(115deg, #142c3b, #12333b); box-shadow: 0 20px 40px rgba(0, 0, 0, .14); overflow: hidden; }
.category-catalog-hero h2 { margin: 6px 0 7px; color: var(--ink); font-size: 29px; letter-spacing: -.06em; }
.category-catalog-hero p { max-width: 590px; color: #b8ced0; font-size: 11px; line-height: 1.55; }
.eyebrow.light { color: var(--mint); }
.category-stat-grid { display: grid; flex: none; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 8px; width: min(420px, 100%); }
.category-stat-card { min-height: 76px; padding: 13px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 13px; background: rgba(255, 255, 255, .07); }
.category-stat-card strong, .category-stat-card span { display: block; }
.category-stat-card strong { color: var(--mint); font-size: 24px; letter-spacing: -.06em; }
.category-stat-card span { margin-top: 6px; color: #b8ced0; font-size: 9px; line-height: 1.25; }
.category-catalog-panel { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(16, 26, 37, .78); box-shadow: var(--shadow); }
.category-catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.category-catalog-head h2 { margin: 7px 0 4px; color: var(--ink); font-size: 22px; letter-spacing: -.045em; }
.category-catalog-head p { color: var(--muted); font-size: 10px; }
.category-manager-search { display: flex; align-items: center; gap: 8px; width: min(270px, 100%); padding: 0 11px; border: 1px solid var(--line-light); border-radius: 11px; color: var(--muted); background: var(--surface); }
.category-manager-search span { font-size: 20px; line-height: 1; }
.category-manager-search input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; color: var(--ink); font-size: 11px; background: transparent; }
.category-manager-search:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(156, 228, 203, .10); }
.category-provider-grid { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 11px; }
.category-provider-card { min-width: 0; min-height: 151px; display: flex; flex-direction: column; align-items: stretch; padding: 15px; border: 1px solid var(--line); border-top: 3px solid var(--category-accent, var(--mint)); border-radius: 17px; outline: 0; color: var(--ink); text-align: left; background: var(--surface); position: relative; overflow: hidden; transition: .2s ease; }
.category-provider-card::before { content: ""; position: absolute; width: 105px; height: 105px; right: -56px; bottom: -57px; border-radius: 50%; background: color-mix(in srgb, var(--category-accent, var(--mint)) 17%, transparent); pointer-events: none; }
.category-provider-card:hover, .category-provider-card.selected { transform: translateY(-4px); border-color: color-mix(in srgb, var(--category-accent, var(--mint)) 50%, var(--line)); box-shadow: 0 15px 28px rgba(0, 0, 0, .20); }
.category-provider-card.selected { color: var(--navy); background: linear-gradient(145deg, var(--mint), #78b8bb); }
.category-provider-card.selected::before { background: rgba(255, 255, 255, .18); }
.category-provider-card.inactive { opacity: .62; }
.category-provider-card[hidden], .category-provider-card.hidden { display: none; }
.category-provider-top, .category-provider-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.category-provider-icon { width: 43px; height: 43px; display: grid; flex: none; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .10); }
.category-provider-icon.category-emoji { font-size: 22px; }
.category-provider-icon.category-logo { padding: 6px; }
.category-provider-icon img { width: 100%; height: 100%; object-fit: contain; }
.category-provider-arrow { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted); font-size: 17px; background: rgba(255, 255, 255, .06); transition: transform .2s ease; }
.category-provider-card:hover .category-provider-arrow { transform: translate(2px, -2px); }
.category-provider-card.selected .category-provider-arrow { color: var(--navy); background: rgba(255, 255, 255, .32); }
.category-provider-copy { display: block; min-width: 0; padding: 18px 0 14px; position: relative; z-index: 1; }
.category-provider-copy strong, .category-provider-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-provider-copy strong { font-size: 12px; }
.category-provider-copy small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.category-provider-card.selected .category-provider-copy small, .category-provider-card.selected .category-provider-state, .category-provider-card.selected .category-provider-bottom em { color: rgba(16, 26, 53, .70); }
.category-provider-bottom { position: relative; z-index: 1; margin-top: auto; }
.category-provider-state { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 850; }
.category-provider-state i, .category-editor-chip i { width: 6px; height: 6px; border-radius: 50%; background: #c67b68; }
.category-provider-state.is-active i, .category-editor-chip.is-active i { background: var(--green); box-shadow: 0 0 0 4px rgba(115, 194, 159, .11); }
.category-provider-bottom em { color: #7890a5; font-size: 8px; font-style: normal; }
.category-provider-card-add { align-items: center; justify-content: center; border: 1px dashed rgba(156, 228, 203, .36); border-top-width: 1px; color: var(--mint); background: rgba(156, 228, 203, .04); }
.category-provider-card-add:hover { background: rgba(156, 228, 203, .10); }
.category-provider-add-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(156, 228, 203, .28); border-radius: 13px; font-size: 23px; background: rgba(156, 228, 203, .08); }
.category-provider-card-add .category-provider-copy { width: 100%; padding: 12px 0 0; text-align: center; }
.category-provider-card-add .category-provider-copy small { color: #7890a5; }
.category-provider-card-add > .category-provider-arrow { margin-left: auto; }
.category-editor-panel { margin-top: 18px; padding: 22px 23px 23px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, rgba(18, 31, 45, .97), rgba(13, 23, 34, .97)); box-shadow: var(--shadow); }
.category-editor-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.category-editor-panel-head h2 { margin: 7px 0 5px; color: var(--ink); font-size: 20px; letter-spacing: -.045em; }
.category-editor-panel-head p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.category-editor-chip { display: inline-flex; align-items: center; flex: none; gap: 7px; padding: 8px 11px; border: 1px solid rgba(198, 123, 104, .25); border-radius: 999px; color: #e3a08f; font-size: 9px; font-weight: 850; background: rgba(198, 123, 104, .08); }
.category-editor-chip.is-active { border-color: rgba(115, 194, 159, .24); color: var(--mint); background: rgba(115, 194, 159, .08); }
.category-editor-panel .category-form { margin: 22px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.category-editor-panel .category-form-preview { margin-bottom: 23px; }

@media (max-width: 1100px) and (min-width: 781px) {
  .category-provider-grid { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .category-catalog-hero { align-items: flex-start; flex-direction: column; }
  .category-stat-grid { width: 100%; max-width: 430px; }
}

@media (max-width: 780px) {
  .category-manager { width: calc(100% - 30px); margin: 26px auto 55px; }
  .category-manager-actions { width: 100%; }
  .category-manager-actions .button { flex: 1; }
  .category-catalog-hero { align-items: stretch; flex-direction: column; padding: 22px 20px; }
  .category-catalog-hero h2 { font-size: 25px; }
  .category-stat-grid { width: 100%; }
  .category-stat-card { min-height: 68px; }
  .category-catalog-panel { padding: 16px; }
  .category-catalog-head { align-items: stretch; flex-direction: column; gap: 13px; }
  .category-manager-search { width: 100%; }
  .category-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .category-provider-card { min-height: 135px; padding: 12px; }
  .category-provider-copy { padding: 13px 0 10px; }
  .category-provider-copy strong { font-size: 11px; }
  .category-editor-panel { padding: 18px; }
  .category-editor-panel-head { align-items: flex-start; flex-direction: column; gap: 11px; }
  .category-editor-chip { align-self: flex-start; }
}

.category-article-panel { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(16, 26, 37, .78); box-shadow: var(--shadow); }
.category-article-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.category-article-head h2 { margin: 7px 0 5px; color: var(--ink); font-size: 21px; letter-spacing: -.045em; }
.category-article-head p { max-width: 700px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.category-article-head .button { flex: none; }
.category-article-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(8, 13, 18, .28); }
.category-article-table-head, .category-article-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 30px; gap: 16px; align-items: center; }
.category-article-table-head { padding: 11px 14px; color: #7890a5; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.category-article-row { width: 100%; padding: 13px 14px; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; background: transparent; transition: .18s ease; }
.category-article-row:hover { background: rgba(156, 228, 203, .07); }
.category-article-main { display: flex; min-width: 0; align-items: center; gap: 11px; }
.category-article-icon { width: 35px; height: 35px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(156, 228, 203, .10); }
.category-article-icon.category-emoji { font-size: 17px; }
.category-article-icon.category-logo { padding: 5px; }
.category-article-icon img { width: 100%; height: 100%; object-fit: contain; }
.category-article-main > span:last-child { min-width: 0; }
.category-article-main strong, .category-article-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-article-main strong { font-size: 11px; }
.category-article-main small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.category-article-status { display: inline-flex; align-items: center; gap: 6px; color: #e2a18f; font-size: 9px; font-weight: 800; }
.category-article-status i { width: 6px; height: 6px; border-radius: 50%; background: #c67b68; }
.category-article-status.published { color: var(--mint); }
.category-article-status.published i { background: var(--green); box-shadow: 0 0 0 4px rgba(115, 194, 159, .11); }
.category-article-arrow { color: var(--muted); font-size: 16px; text-align: right; }
.category-article-empty { display: grid; place-items: center; gap: 5px; padding: 32px 18px; border-top: 1px solid var(--line); text-align: center; }
.category-article-empty > span { color: var(--mint); font-size: 24px; }
.category-article-empty strong { color: var(--ink); font-size: 11px; }
.category-article-empty small { color: var(--muted); font-size: 9px; }

@media (max-width: 780px) {
  .category-article-panel { padding: 16px; }
  .category-article-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .category-article-head .button { width: 100%; }
  .category-article-table { overflow-x: auto; }
  .category-article-table-head, .category-article-row { min-width: 530px; }
}

/* Sidebar inspired by Food Service: identity, workspace navigation and a focused guide library. */
.admin-topbar-title { display: flex; align-items: baseline; gap: 11px; min-width: 0; }
.admin-topbar-title .eyebrow { margin: 0; color: var(--mint); font-size: 8px; }
.admin-topbar-title strong { color: var(--ink); font-size: 14px; letter-spacing: -.03em; }
.admin-topbar-title small { color: var(--muted); font-size: 9px; }
.admin-sidebar { min-height: calc(100vh - 70px); padding: 22px 14px 16px; background: linear-gradient(180deg, #0d1c29, #0a141e); }
.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 25px; color: var(--ink); text-decoration: none; }
.admin-sidebar-brand img { width: 38px; height: 38px; padding: 7px; border: 1px solid rgba(156, 228, 203, .20); border-radius: 13px; background: rgba(156, 228, 203, .08); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.admin-sidebar-brand strong, .admin-sidebar-brand small { display: block; }
.admin-sidebar-brand strong { font-size: 13px; letter-spacing: -.03em; }
.admin-sidebar-brand small { margin-top: 4px; color: #7890a5; font-size: 9px; }
.admin-sidebar-nav { display: grid; gap: 7px; margin-bottom: 24px; }
.admin-nav-label { padding: 0 9px 3px; color: #6f879c; font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.admin-nav-item { width: 100%; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 10px; border: 1px solid transparent; border-radius: 13px; color: var(--muted-strong); text-align: left; background: transparent; transition: .18s ease; }
.admin-nav-item:hover { border-color: rgba(156, 228, 203, .16); color: var(--ink); background: rgba(156, 228, 203, .07); transform: translateX(2px); }
.admin-nav-item-primary { color: var(--navy); background: var(--mint); box-shadow: 0 10px 22px rgba(0, 0, 0, .18); }
.admin-nav-item-primary:hover { color: var(--navy); background: #b4f0dd; }
.admin-nav-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; font-size: 17px; background: rgba(255, 255, 255, .10); }
.admin-nav-item-primary .admin-nav-icon { background: rgba(16, 26, 53, .10); }
.admin-nav-item strong, .admin-nav-item small { display: block; }
.admin-nav-item strong { font-size: 10px; }
.admin-nav-item small { margin-top: 3px; color: #7890a5; font-size: 8px; font-weight: 500; }
.admin-nav-item-primary small { color: rgba(16, 26, 53, .70); }
.admin-nav-item em { min-width: 22px; color: #7890a5; font-size: 10px; font-style: normal; text-align: right; }
.admin-nav-item-primary em { color: rgba(16, 26, 53, .70); }
.admin-sidebar-library { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.admin-library-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 0 7px 11px; }
.admin-library-head .eyebrow { margin-bottom: 5px; color: #6f879c; font-size: 8px; }
.admin-library-head strong { display: block; color: var(--ink); font-size: 12px; }
.admin-library-head > span { display: grid; min-width: 25px; height: 25px; place-items: center; border: 1px solid rgba(156, 228, 203, .24); border-radius: 8px; color: var(--mint); font-size: 9px; font-weight: 850; background: rgba(156, 228, 203, .07); }
.admin-sidebar .admin-filter { margin-bottom: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(16, 26, 37, .85); }
.admin-sidebar .admin-filter input { font-size: 10px; }
.admin-list { min-height: 0; flex: 1; padding-right: 2px; }
.admin-article-link { padding: 9px 8px; border-radius: 11px; }
.admin-article-link:hover { background: rgba(156, 228, 203, .06); }
.admin-article-link.active { box-shadow: inset 3px 0 0 var(--mint); background: linear-gradient(100deg, rgba(156, 228, 203, .13), rgba(107, 142, 232, .07)); }
.admin-article-link strong { font-size: 10px; }
.admin-sidebar-foot { margin-top: 15px; padding: 14px 7px 0; }
.admin-sidebar-foot .status-dot { font-size: 9px; }

@media (max-width: 780px) {
  .admin-topbar-title { gap: 7px; }
  .admin-topbar-title .eyebrow, .admin-topbar-title small { display: none; }
  .admin-topbar-title strong { font-size: 13px; }
  .admin-sidebar { min-height: 0; padding: 16px 15px 13px; }
  .admin-sidebar-brand { padding: 0 4px 16px; }
  .admin-sidebar-nav { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
  .admin-nav-label { grid-column: 1 / -1; }
  .admin-nav-item { grid-template-columns: 27px minmax(0, 1fr); min-height: 52px; padding: 8px; }
  .admin-nav-item em { display: none; }
  .admin-nav-icon { width: 27px; height: 27px; }
  .admin-nav-item small { display: none; }
  .admin-library-head { margin-right: 4px; margin-left: 4px; }
  .admin-list { flex: none; }
  .admin-sidebar-foot { display: none; }
}

/* Final shell pass: keep the editor as calm as the Food Service admin. */
.admin-sidebar { min-height: calc(100vh - 78px); padding: 26px 16px 18px; border-right-color: rgba(156, 228, 203, .10); background: #102a25; }
.admin-sidebar-brand { padding: 0 8px 38px; }
.admin-sidebar-brand img { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; background: var(--mint); }
.admin-sidebar-brand strong { font-size: 15px; }
.admin-sidebar-brand small { color: #9eb5a7; font-size: 10px; }
.admin-sidebar-nav { gap: 5px; margin-bottom: 0; }
.admin-nav-label { padding: 0 12px 7px; color: #87a99c; font-size: 9px; }
.admin-nav-item { min-height: 46px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 9px 11px; border-radius: 12px; color: #a9c0b3; }
.admin-nav-item:hover { border-color: transparent; color: #fff; background: rgba(255, 255, 255, .08); transform: none; }
.admin-nav-item-primary { color: #102a25; background: var(--mint); box-shadow: 0 12px 25px rgba(0, 0, 0, .18); }
.admin-nav-item-primary:hover { color: #102a25; background: #b8f1df; }
.admin-nav-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 16px; }
.admin-nav-item strong { font-size: 11px; }
.admin-nav-item small { display: none; }
.admin-nav-item em { color: #8eafa1; font-size: 10px; }
.admin-nav-item-primary em { color: rgba(16, 42, 37, .65); }
.admin-library-panel { min-height: calc(100vh - 78px); padding: 32px 18px 20px; background: #0c151e; }
.admin-library-head { margin: 0 6px 16px; align-items: flex-start; }
.admin-library-head .eyebrow { margin-bottom: 7px; color: #7890a5; font-size: 8px; }
.admin-library-head strong { font-size: 16px; letter-spacing: -.04em; }
.admin-library-head small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.admin-library-panel .admin-article-link { padding: 9px 8px; border-radius: 10px; }
.admin-library-panel .admin-article-link.active { box-shadow: inset 3px 0 0 var(--mint); background: linear-gradient(100deg, rgba(156, 228, 203, .13), rgba(107, 142, 232, .07)); }

@media (max-width: 780px) {
  .admin-sidebar { min-height: 0; padding: 16px 15px 14px; }
  .admin-sidebar-brand { padding: 0 4px 18px; }
  .admin-sidebar-nav { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
  .admin-nav-item { min-height: 48px; grid-template-columns: 27px minmax(0, 1fr); padding: 8px; }
  .admin-sidebar-spacer, .admin-sidebar-note, .admin-sidebar-user { display: none; }
  .admin-library-panel { min-height: 0; padding: 22px 15px 14px; }
}

/* No-sidebar workspace: keep navigation and content in one intentional surface. */
.admin-body { display: block; min-height: calc(100vh - 78px); }
.admin-topbar-context { gap: 26px; }
.admin-topbar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.admin-topbar-brand img { width: 36px; height: 36px; padding: 5px; border-radius: 11px; background: var(--mint); }
.admin-topbar-brand strong, .admin-topbar-brand small { display: block; }
.admin-topbar-brand strong { font-size: 13px; letter-spacing: -.03em; }
.admin-topbar-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.admin-topbar-page { display: flex; align-items: baseline; gap: 10px; padding-left: 26px; border-left: 1px solid var(--line); }
.admin-topbar-page .eyebrow { margin: 0; color: var(--mint); font-size: 8px; }
.admin-topbar-page strong { font-size: 17px; letter-spacing: -.04em; }
.admin-topbar-page small { color: var(--muted); font-size: 10px; }
.admin-main { display: block; min-height: calc(100vh - 78px); }
.admin-library-panel { min-height: 0; padding: 24px 34px 16px; border-right: 0; border-bottom: 1px solid var(--line); background: #0c151e; }
.admin-library-head { margin: 0 0 13px; align-items: center; }
.admin-library-head strong { font-size: 18px; }
.admin-library-head small { display: inline; margin-left: 8px; }
.admin-library-actions { display: flex; gap: 8px; margin: 0 0 13px; }
.admin-library-actions .button { width: auto; justify-content: center; padding: 9px 12px; }
.admin-library-actions .button em { margin-left: auto; color: inherit; font-size: 10px; font-style: normal; opacity: .72; }
.admin-library-panel .admin-filter { width: min(300px, 100%); margin-bottom: 12px; }
.admin-library-panel .admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); flex: none; min-height: 0; height: auto; max-height: none; gap: 6px; overflow: visible; padding: 1px 0 3px; }
.admin-library-panel .admin-article-link { min-width: 0; min-height: 54px; }
.admin-library-status { display: none; align-items: center; gap: 9px; margin: auto 6px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-library-status .status-dot { width: 8px; height: 8px; }
.admin-library-status strong, .admin-library-status small { display: block; }
.admin-library-status strong { color: var(--ink); font-size: 10px; }
.admin-library-status small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.admin-main.category-view { display: block; }
.admin-main.category-view .admin-library-panel { display: none; }
.admin-main.category-view .editor-area { min-height: calc(100vh - 78px); }

@media (max-width: 980px) and (min-width: 781px) {
  .admin-topbar-page small { display: none; }
}

@media (max-width: 780px) {
  .admin-topbar { height: 64px; padding: 0 15px; }
  .admin-topbar-context { width: 100%; gap: 0; }
  .admin-topbar-brand { flex: 1; }
  .admin-topbar-page { display: none; }
  .admin-top-actions .save-state { display: none; }
  .admin-main { display: block; min-height: 0; }
  .admin-library-panel { min-height: 0; padding: 20px 15px 13px; }
  .admin-library-head { margin-bottom: 11px; }
  .admin-library-head small { display: none; }
  .admin-library-actions { margin-bottom: 11px; }
  .admin-library-panel .admin-filter { width: 100%; }
  .admin-library-panel .admin-list { display: flex; flex: none; height: auto; max-height: none; overflow-x: auto; padding-bottom: 2px; }
  .admin-library-panel .admin-article-link { min-width: 210px; flex: 0 0 210px; }
  .admin-library-status { display: none; }
}

/* Admin catalog: light, calm and modeled after the Food Service catalog flow. */
.admin-light {
  --admin-ink: #122a24;
  --admin-ink-2: #1f4237;
  --admin-paper: #fffdf8;
  --admin-cream: #f6f1e8;
  --admin-line: #e8e0d2;
  --admin-muted: #748078;
  min-height: 100vh;
  color: var(--admin-ink);
  background: var(--admin-cream);
}
.admin-light .admin-topbar { height: 88px; padding: 0 34px; border-bottom: 1px solid var(--admin-line); background: var(--admin-paper); }
.admin-light .admin-topbar-brand { color: var(--admin-ink); }
.admin-light .admin-topbar-brand img { background: #d6e96e; box-shadow: none; }
.admin-light .admin-topbar-brand small, .admin-light .admin-topbar-page small { color: var(--admin-muted); }
.admin-light .admin-topbar-page { border-left-color: var(--admin-line); }
.admin-light .admin-topbar-page .eyebrow { color: #65806f; }
.admin-light .admin-topbar-page strong { color: var(--admin-ink); }
.admin-light .admin-top-actions .quiet-link { color: var(--admin-muted); }
.admin-light .admin-top-actions .quiet-link:hover { color: var(--admin-ink); }
.admin-light .admin-top-actions .button.soft { border-color: var(--admin-line); color: var(--admin-ink); background: #fff; }
.admin-light .admin-top-actions .button.soft:hover { background: #f1f5eb; }
.admin-light .admin-main { min-height: calc(100vh - 88px); background: var(--admin-cream); }
.admin-light .category-manager-clean { width: min(1420px, calc(100% - 68px)); margin: 35px auto 70px; }
.admin-light .catalog-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.admin-light .catalog-page-head h1 { margin: 5px 0 7px; color: var(--admin-ink); font-size: 36px; letter-spacing: -.07em; }
.admin-light .catalog-page-head p { color: var(--admin-muted); font-size: 12px; }
.admin-light .catalog-page-head .eyebrow, .admin-light .category-catalog-head .eyebrow, .admin-light .category-article-head .eyebrow { color: #869188; }
.admin-light .button.primary, .admin-light .button.button-primary { color: #fff; background: var(--admin-ink); box-shadow: 0 10px 22px rgba(18, 42, 36, .13); }
.admin-light .button.primary:hover, .admin-light .button.button-primary:hover { background: var(--admin-ink-2); }
.admin-light .category-catalog-panel, .admin-light .category-products-panel { padding: 24px; border: 1px solid var(--admin-line); border-radius: 22px; background: var(--admin-paper); box-shadow: 0 18px 45px rgba(27, 45, 37, .07); }
.admin-light .category-catalog-head { margin-bottom: 19px; }
.admin-light .category-catalog-head h2, .admin-light .category-article-head h2 { color: var(--admin-ink); font-size: 23px; }
.admin-light .category-catalog-head p, .admin-light .category-article-head p { color: var(--admin-muted); font-size: 11px; }
.admin-light .category-manager-search { border-color: var(--admin-line); color: var(--admin-muted); background: #fff; }
.admin-light .category-manager-search input { color: var(--admin-ink); }
.admin-light .category-manager-search:focus-within { border-color: #89a789; box-shadow: 0 0 0 3px rgba(137, 167, 137, .13); }
.admin-light .category-provider-grid { grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 12px; }
.admin-light .category-provider-card { min-height: 156px; padding: 16px; border: 1px solid var(--admin-line); border-top: 3px solid var(--category-accent, #9dbd8b); border-radius: 18px; color: var(--admin-ink); background: #fff; box-shadow: none; }
.admin-light .category-provider-card:hover { border-color: #9dbd8b; background: #fbfdf6; box-shadow: 0 12px 24px rgba(27, 45, 37, .08); }
.admin-light .category-provider-card.selected { color: #fff; border-color: var(--admin-ink); background: var(--admin-ink); box-shadow: 0 16px 30px rgba(18, 42, 36, .15); }
.admin-light .category-provider-card.selected .category-provider-copy small, .admin-light .category-provider-card.selected .category-provider-state, .admin-light .category-provider-card.selected .category-provider-bottom em { color: #bdd1c1; }
.admin-light .category-provider-card.selected .category-provider-arrow { color: var(--admin-ink); background: #d6e96e; }
.admin-light .category-provider-copy strong { font-size: 13px; }
.admin-light .category-provider-copy small { min-height: 28px; color: var(--admin-muted); line-height: 1.35; }
.admin-light .category-provider-state { color: var(--admin-muted); }
.admin-light .category-provider-bottom em { color: #89958d; }
.admin-light .category-provider-icon { background: #f1f4ed; }
.admin-light .category-provider-card.selected .category-provider-icon { background: rgba(255, 255, 255, .14); }
.admin-light .category-provider-card-add { border: 1px dashed #aac7a1; border-top-width: 1px; color: #52725e; background: #f7faef; }
.admin-light .category-provider-card-add:hover { background: #edf5df; }
.admin-light .category-provider-card-add .category-provider-copy small { color: var(--admin-muted); }
.admin-light .category-products-panel { margin-top: 20px; }
.admin-light .category-article-head { align-items: center; margin-bottom: 17px; }
.admin-light .category-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-light .category-product-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 11px; width: 100%; min-height: 105px; padding: 13px; border: 1px solid var(--admin-line); border-radius: 16px; color: var(--admin-ink); text-align: left; background: #fff; transition: .18s ease; }
.admin-light .category-product-card:hover { border-color: #9dbd8b; box-shadow: 0 12px 24px rgba(27, 45, 37, .08); transform: translateY(-2px); }
.admin-light .category-product-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #f1f4ed; }
.admin-light .category-product-image.category-emoji { font-size: 21px; }
.admin-light .category-product-copy { min-width: 0; }
.admin-light .category-product-copy strong, .admin-light .category-product-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-light .category-product-copy strong { margin-top: 5px; font-size: 12px; }
.admin-light .category-product-copy small { margin-top: 4px; color: var(--admin-muted); font-size: 10px; }
.admin-light .category-product-status { display: flex; align-items: center; gap: 5px; color: #ad745e; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.admin-light .category-product-status.published { color: #4c8b54; }
.admin-light .category-product-status i { width: 6px; height: 6px; border-radius: 50%; background: #df8b70; }
.admin-light .category-product-status.published i { background: #72b75e; }
.admin-light .category-product-arrow { color: #8b998f; font-size: 17px; text-align: right; }
.admin-light .category-product-empty { grid-column: 1 / -1; display: grid; place-items: center; gap: 5px; padding: 38px 18px; border: 1px dashed var(--admin-line); border-radius: 15px; text-align: center; }
.admin-light .category-product-empty > span { color: #8cae82; font-size: 25px; }
.admin-light .category-product-empty strong { color: var(--admin-ink); font-size: 12px; }
.admin-light .category-product-empty small { color: var(--admin-muted); font-size: 10px; }
.admin-light .category-edit-details { margin-top: 14px; border: 1px solid var(--admin-line); border-radius: 16px; background: rgba(255, 253, 248, .72); }
.admin-light .category-edit-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 17px; color: var(--admin-ink); cursor: pointer; font-size: 11px; font-weight: 850; list-style: none; }
.admin-light .category-edit-details > summary::-webkit-details-marker { display: none; }
.admin-light .category-edit-details > summary small { color: var(--admin-muted); font-size: 10px; font-weight: 500; }
.admin-light .category-edit-details[open] > summary { border-bottom: 1px solid var(--admin-line); }
.admin-light .category-editor-panel { margin: 0; padding: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.admin-light .category-form { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.admin-light .category-form-grid-clean { gap: 12px; }
.admin-light .category-form-grid label { color: var(--admin-ink-2); }
.admin-light .category-form-grid input, .admin-light .category-form-grid select, .admin-light .category-form-grid textarea { border-color: var(--admin-line); color: var(--admin-ink); background: #fff; }
.admin-light .category-form-grid input:focus, .admin-light .category-form-grid select:focus, .admin-light .category-form-grid textarea:focus { border-color: #89a789; box-shadow: 0 0 0 3px rgba(137, 167, 137, .13); }
.admin-light .category-form-actions { border-top-color: var(--admin-line); }
.admin-light .category-save-hint { color: var(--admin-muted); }
.admin-light .editor-area { background: var(--admin-cream); }
.admin-light .editor-wrap { width: min(920px, calc(100% - 68px)); margin: 42px auto 75px; }
.admin-light .editor-breadcrumb { color: var(--admin-muted); }
.admin-light .editor-breadcrumb b { color: #93a197; }
.admin-light .editor-back-button { margin-right: 7px; border-color: var(--admin-line); color: var(--admin-ink); background: #fff; }
.admin-light .title-input { color: var(--admin-ink); }
.admin-light .excerpt-input { color: var(--admin-muted); }
.admin-light .editor-settings { border-color: var(--admin-line); }
.admin-light .editor-settings label, .admin-light .editor-bottom label { color: var(--admin-ink-2); }
.admin-light .editor-settings input, .admin-light .editor-settings select, .admin-light .editor-bottom input { border-color: var(--admin-line); color: var(--admin-ink); background: #fff; }
.admin-light .editor-toolbar { border-color: var(--admin-line); background: #fff; }
.admin-light .editor-toolbar button { color: var(--admin-ink-2); }
.admin-light .editor-toolbar button:hover { color: var(--admin-ink); background: #f1f5eb; }
.admin-light .rich-editor { border-color: var(--admin-line); color: var(--admin-ink); background: #fff; box-shadow: 0 10px 25px rgba(27, 45, 37, .07); }
.admin-light .rich-editor h2 { color: var(--admin-ink); }

@media (max-width: 1100px) and (min-width: 781px) {
  .admin-light .category-provider-grid { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
  .admin-light .category-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .admin-light .admin-topbar { height: 70px; padding: 0 15px; }
  .admin-light .admin-topbar-page { display: none; }
  .admin-light .category-manager-clean { width: calc(100% - 30px); margin: 24px auto 50px; }
  .admin-light .catalog-page-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .admin-light .catalog-page-head h1 { font-size: 31px; }
  .admin-light .catalog-page-head .button { width: 100%; }
  .admin-light .category-catalog-panel, .admin-light .category-products-panel { padding: 16px; }
  .admin-light .category-catalog-head { align-items: stretch; flex-direction: column; gap: 13px; }
  .admin-light .category-manager-search { width: 100%; }
  .admin-light .category-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-light .category-provider-card { min-height: 136px; padding: 12px; }
  .admin-light .category-product-grid { grid-template-columns: 1fr; }
  .admin-light .category-article-head { align-items: flex-start; flex-direction: column; gap: 11px; }
  .admin-light .category-article-head .button { width: 100%; }
  .admin-light .category-edit-details > summary { align-items: flex-start; flex-direction: column; }
}

/* Dashboard workspace: a compact, data-first admin home inspired by the supplied dashboard reference. */
.admin-dashboard-shell {
  --dashboard-bg: #08111a;
  --dashboard-surface: #0d1a27;
  --dashboard-surface-2: #112235;
  --dashboard-line: rgba(163, 194, 220, .14);
  --dashboard-muted: #8da2b6;
  --dashboard-text: #f4f8fb;
  --dashboard-mint: #9ce4cb;
  --dashboard-blue: #8cb8ff;
  --dashboard-violet: #c9a9ff;
  --dashboard-amber: #f6cb87;
  color: var(--dashboard-text);
  background: var(--dashboard-bg);
}
.admin-dashboard-shell.admin-light { color: var(--dashboard-text); background: var(--dashboard-bg); }
.admin-dashboard-shell .admin-topbar { height: 72px; padding: 0 30px; border-bottom-color: var(--dashboard-line); background: #0b1723; }
.admin-dashboard-shell .admin-topbar-brand { color: var(--dashboard-text); }
.admin-dashboard-shell .admin-topbar-brand img { background: var(--dashboard-mint); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.admin-dashboard-shell .admin-topbar-brand small, .admin-dashboard-shell .admin-topbar-page small { color: var(--dashboard-muted); }
.admin-dashboard-shell .admin-topbar-page { border-left-color: var(--dashboard-line); }
.admin-dashboard-shell .admin-topbar-page .eyebrow { color: var(--dashboard-mint); }
.admin-dashboard-shell .admin-topbar-page strong { color: var(--dashboard-text); }
.admin-dashboard-shell .admin-top-actions .save-state { color: var(--dashboard-mint); }
.admin-dashboard-shell .admin-top-actions .quiet-link { color: var(--dashboard-muted); }
.admin-dashboard-shell .admin-top-actions .quiet-link:hover { color: var(--dashboard-text); }
.admin-dashboard-shell .admin-top-actions .button.soft { border-color: rgba(140, 184, 255, .30); color: var(--dashboard-text); background: rgba(140, 184, 255, .08); }
.admin-dashboard-shell .admin-top-actions .button.soft:hover { border-color: var(--dashboard-blue); background: rgba(140, 184, 255, .15); }
.admin-dashboard-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 72px); background: var(--dashboard-bg); }
.admin-dashboard-sidebar { display: flex; min-height: calc(100vh - 72px); flex-direction: column; gap: 0; padding: 24px 14px 16px; border-right: 1px solid var(--dashboard-line); background: #0a1621; }
.admin-dashboard-sidebar-brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 35px; color: var(--dashboard-text); text-decoration: none; }
.admin-dashboard-sidebar-brand img { width: 37px; height: 37px; padding: 5px; border-radius: 11px; background: var(--dashboard-mint); }
.admin-dashboard-sidebar-brand strong, .admin-dashboard-sidebar-brand small { display: block; }
.admin-dashboard-sidebar-brand strong { font-size: 13px; letter-spacing: -.03em; }
.admin-dashboard-sidebar-brand small { margin-top: 3px; color: var(--dashboard-muted); font-size: 9px; }
.admin-dashboard-nav { display: grid; gap: 5px; }
.admin-dashboard-nav-label { display: block; margin: 0 11px 8px; color: #6e8499; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.admin-dashboard-nav-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; color: #9cafbf; font: inherit; font-size: 11px; font-weight: 750; text-align: left; background: transparent; cursor: pointer; transition: .18s ease; }
.admin-dashboard-nav-item:hover { color: var(--dashboard-text); background: rgba(140, 184, 255, .08); }
.admin-dashboard-nav-item.active { color: var(--dashboard-text); border-color: rgba(140, 184, 255, .20); background: linear-gradient(100deg, rgba(140, 184, 255, .19), rgba(156, 228, 203, .08)); box-shadow: inset 3px 0 0 var(--dashboard-mint); }
.admin-dashboard-nav-item em { color: #7991a6; font-size: 10px; font-style: normal; }
.admin-dashboard-nav-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(140, 184, 255, .15); border-radius: 9px; color: var(--dashboard-blue); font-size: 15px; background: rgba(140, 184, 255, .08); }
.admin-dashboard-nav-item.active .admin-dashboard-nav-icon { color: var(--dashboard-bg); background: var(--dashboard-mint); }
.admin-dashboard-sidebar-actions { margin-top: 26px; }
.admin-dashboard-sidebar-actions .button { width: 100%; justify-content: center; padding: 11px 10px; border: 0; color: #0a1b23; background: var(--dashboard-mint); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.admin-dashboard-sidebar-actions .button:hover { color: #0a1b23; background: #baf1df; }
.admin-dashboard-sidebar-status { margin-top: auto; padding: 14px 10px; border-top: 1px solid var(--dashboard-line); }
.admin-dashboard-sidebar-status .status-dot { display: flex; align-items: center; gap: 7px; color: var(--dashboard-mint); font-size: 9px; font-weight: 800; }
.admin-dashboard-sidebar-status .status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--dashboard-mint); box-shadow: 0 0 0 4px rgba(156, 228, 203, .10); }
.admin-dashboard-sidebar-status small { display: block; margin-top: 7px; color: #6f879c; font-size: 9px; }
.admin-dashboard-sidebar-user { display: flex; align-items: center; gap: 9px; padding: 16px 8px 0; }
.admin-dashboard-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #0a1b23; font-size: 10px; font-weight: 900; background: var(--dashboard-mint); }
.admin-dashboard-sidebar-user strong, .admin-dashboard-sidebar-user small { display: block; }
.admin-dashboard-sidebar-user strong { color: var(--dashboard-text); font-size: 10px; }
.admin-dashboard-sidebar-user small { margin-top: 3px; color: var(--dashboard-muted); font-size: 8px; }
.admin-dashboard-content { min-width: 0; min-height: calc(100vh - 72px); overflow: hidden; background: var(--dashboard-bg); }
.admin-dashboard-page { width: min(1500px, calc(100% - 70px)); margin: 0 auto; padding: 38px 0 62px; }
.admin-dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 27px; }
.admin-dashboard-heading .eyebrow, .admin-dashboard-panel .eyebrow { color: #718ba0; font-size: 8px; }
.admin-dashboard-heading h1 { margin: 7px 0 7px; color: var(--dashboard-text); font-size: clamp(31px, 3vw, 42px); letter-spacing: -.07em; }
.admin-dashboard-heading p { color: var(--dashboard-muted); font-size: 12px; }
.admin-dashboard-heading-actions { display: flex; align-items: center; gap: 10px; }
.admin-dashboard-search { display: flex; align-items: center; gap: 7px; min-width: 215px; padding: 9px 11px; border: 1px solid var(--dashboard-line); border-radius: 9px; color: #7890a5; background: rgba(13, 26, 39, .78); }
.admin-dashboard-search:focus-within { border-color: rgba(156, 228, 203, .45); box-shadow: 0 0 0 3px rgba(156, 228, 203, .08); }
.admin-dashboard-search input { width: 100%; border: 0; outline: 0; color: var(--dashboard-text); font: inherit; font-size: 10px; background: transparent; }
.admin-dashboard-search input::placeholder { color: #71869a; }
.admin-dashboard-heading-actions .button { white-space: nowrap; padding: 10px 13px; border: 0; color: #0a1b23; background: var(--dashboard-mint); }
.admin-dashboard-heading-actions .button:hover { color: #0a1b23; background: #baf1df; }
.admin-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.admin-dashboard-metric { position: relative; min-height: 148px; padding: 17px 17px 15px; overflow: hidden; border: 1px solid var(--dashboard-line); border-radius: 13px; background: linear-gradient(145deg, rgba(17, 34, 53, .98), rgba(10, 24, 37, .98)); }
.admin-dashboard-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-dashboard-metric-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 15px; font-weight: 800; }
.admin-dashboard-metric-icon.mint { color: #071a1b; background: rgba(156, 228, 203, .93); }
.admin-dashboard-metric-icon.blue { color: #071a1b; background: rgba(140, 184, 255, .93); }
.admin-dashboard-metric-icon.violet { color: #1d1235; background: rgba(201, 169, 255, .92); }
.admin-dashboard-metric-icon.amber { color: #2b1b04; background: rgba(246, 203, 135, .95); }
.admin-dashboard-metric-trend { color: #8aa1b5; font-size: 9px; }
.admin-dashboard-metric > strong { display: block; margin-top: 19px; color: var(--dashboard-text); font-size: 27px; letter-spacing: -.06em; }
.admin-dashboard-metric > span:not(.admin-dashboard-metric-trend) { display: block; margin-top: 3px; color: var(--dashboard-muted); font-size: 10px; }
.admin-dashboard-sparkline { position: absolute; right: 16px; bottom: 17px; display: flex; align-items: end; gap: 3px; width: 68px; height: 27px; opacity: .75; }
.admin-dashboard-sparkline i { display: block; width: 7px; height: 35%; border-radius: 3px 3px 0 0; background: currentColor; }
.admin-dashboard-sparkline i:nth-child(2) { height: 50%; }.admin-dashboard-sparkline i:nth-child(3) { height: 34%; }.admin-dashboard-sparkline i:nth-child(4) { height: 68%; }.admin-dashboard-sparkline i:nth-child(5) { height: 52%; }.admin-dashboard-sparkline i:nth-child(6) { height: 92%; }
.admin-dashboard-sparkline.mint-line { color: var(--dashboard-mint); }.admin-dashboard-sparkline.blue-line { color: var(--dashboard-blue); }.admin-dashboard-sparkline.violet-line { color: var(--dashboard-violet); }.admin-dashboard-sparkline.amber-line { color: var(--dashboard-amber); }
.admin-dashboard-grid, .admin-dashboard-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); gap: 18px; margin-bottom: 18px; }
.admin-dashboard-bottom-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); }
.admin-dashboard-panel { min-width: 0; padding: 20px; border: 1px solid var(--dashboard-line); border-radius: 13px; background: var(--dashboard-surface); }
.admin-dashboard-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.admin-dashboard-panel-head h2 { margin-top: 5px; color: var(--dashboard-text); font-size: 16px; letter-spacing: -.04em; }
.dashboard-text-button { padding: 0; border: 0; color: var(--dashboard-blue); font: inherit; font-size: 10px; font-weight: 800; background: transparent; cursor: pointer; }
.dashboard-text-button:hover { color: var(--dashboard-mint); }
.admin-dashboard-coverage-list { display: grid; gap: 13px; }
.admin-dashboard-coverage-row { display: grid; grid-template-columns: 31px minmax(120px, 1fr) minmax(90px, 1.2fr) 20px; align-items: center; gap: 10px; }
.admin-dashboard-coverage-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: rgba(140, 184, 255, .10); }
.dashboard-category-icon { max-width: 20px; max-height: 20px; font-size: 16px; }
.admin-dashboard-coverage-copy { min-width: 0; }
.admin-dashboard-coverage-copy strong, .admin-dashboard-coverage-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-coverage-copy strong { color: #dce8f1; font-size: 10px; }
.admin-dashboard-coverage-copy small { margin-top: 3px; color: var(--dashboard-muted); font-size: 9px; }
.admin-dashboard-progress { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(140, 184, 255, .10); }
.admin-dashboard-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dashboard-blue), var(--dashboard-mint)); }
.admin-dashboard-coverage-row > b { color: #a9c1d4; font-size: 10px; text-align: right; }
.admin-dashboard-live-dot { display: flex; align-items: center; gap: 6px; color: var(--dashboard-mint); font-size: 9px; font-weight: 800; }
.admin-dashboard-live-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--dashboard-mint); box-shadow: 0 0 0 4px rgba(156, 228, 203, .08); }
.admin-dashboard-publication-body { display: flex; align-items: center; gap: 24px; min-height: 135px; }
.admin-dashboard-donut { display: grid; width: 126px; height: 126px; place-content: center; border-radius: 50%; text-align: center; background: conic-gradient(var(--dashboard-mint) var(--dashboard-percent), rgba(140, 184, 255, .11) 0); }
.admin-dashboard-donut::before { grid-area: 1 / 1; width: 94px; height: 94px; border-radius: 50%; background: var(--dashboard-surface); content: ''; }
.admin-dashboard-donut strong, .admin-dashboard-donut small { z-index: 1; grid-area: 1 / 1; align-self: center; }
.admin-dashboard-donut strong { margin-top: -12px; color: var(--dashboard-text); font-size: 22px; letter-spacing: -.06em; }
.admin-dashboard-donut small { margin-top: 28px; color: var(--dashboard-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.admin-dashboard-legend { display: grid; gap: 11px; min-width: 0; }
.admin-dashboard-legend span { display: grid; grid-template-columns: 8px minmax(54px, 1fr) auto; align-items: center; gap: 7px; color: var(--dashboard-muted); font-size: 10px; }
.admin-dashboard-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--dashboard-mint); }.admin-dashboard-legend i.draft { background: var(--dashboard-amber); }.admin-dashboard-legend i.all { background: var(--dashboard-blue); }
.admin-dashboard-legend b { color: var(--dashboard-text); font-size: 11px; }
.admin-dashboard-publication-note { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--dashboard-line); color: #7890a5; font-size: 9px; line-height: 1.5; }
.admin-dashboard-recent-list { display: grid; gap: 2px; }
.admin-dashboard-recent-row { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto 62px 15px; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border: 0; border-radius: 8px; color: var(--dashboard-text); text-align: left; background: transparent; cursor: pointer; }
.admin-dashboard-recent-row:hover { background: rgba(140, 184, 255, .08); }
.admin-dashboard-recent-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: rgba(140, 184, 255, .10); }
.admin-dashboard-recent-copy { min-width: 0; }.admin-dashboard-recent-copy strong, .admin-dashboard-recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-dashboard-recent-copy strong { color: #deebf4; font-size: 10px; }.admin-dashboard-recent-copy small { margin-top: 3px; color: var(--dashboard-muted); font-size: 8px; }
.admin-dashboard-status-pill { padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; white-space: nowrap; }.admin-dashboard-status-pill.published { color: var(--dashboard-mint); background: rgba(156, 228, 203, .10); }.admin-dashboard-status-pill.draft { color: var(--dashboard-amber); background: rgba(246, 203, 135, .10); }
.admin-dashboard-recent-date { color: #7890a5; font-size: 9px; text-align: right; }.admin-dashboard-row-arrow { color: #6c879d; font-size: 13px; text-align: right; }.admin-dashboard-empty { padding: 28px 8px; color: var(--dashboard-muted); font-size: 10px; text-align: center; }
.admin-dashboard-quick-actions { display: grid; gap: 7px; }.admin-dashboard-quick-action { display: grid; grid-template-columns: 31px minmax(0, 1fr) 14px; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 1px solid transparent; border-radius: 9px; color: var(--dashboard-text); text-align: left; text-decoration: none; background: rgba(140, 184, 255, .045); cursor: pointer; }.admin-dashboard-quick-action:hover { border-color: var(--dashboard-line); background: rgba(140, 184, 255, .09); }.quick-action-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; font-size: 16px; }.quick-action-icon.mint { color: var(--dashboard-mint); background: rgba(156, 228, 203, .10); }.quick-action-icon.blue { color: var(--dashboard-blue); background: rgba(140, 184, 255, .10); }.quick-action-icon.violet { color: var(--dashboard-violet); background: rgba(201, 169, 255, .10); }.admin-dashboard-quick-action strong, .admin-dashboard-quick-action small { display: block; }.admin-dashboard-quick-action strong { font-size: 10px; }.admin-dashboard-quick-action small { margin-top: 3px; color: var(--dashboard-muted); font-size: 8px; }.admin-dashboard-quick-action > b { color: #7890a5; font-size: 13px; text-align: right; }.admin-dashboard-tip { display: flex; gap: 9px; margin-top: 17px; padding: 12px 10px; border-left: 2px solid var(--dashboard-mint); border-radius: 0 8px 8px 0; background: rgba(156, 228, 203, .06); }.admin-dashboard-tip > span { color: var(--dashboard-mint); }.admin-dashboard-tip strong, .admin-dashboard-tip small { display: block; }.admin-dashboard-tip strong { color: #dce8f1; font-size: 9px; }.admin-dashboard-tip small { margin-top: 4px; color: var(--dashboard-muted); font-size: 8px; line-height: 1.45; }

@media (max-width: 1120px) and (min-width: 781px) {
  .admin-dashboard-page { width: min(100% - 42px, 1500px); }
  .admin-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dashboard-grid, .admin-dashboard-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .admin-dashboard-shell .admin-topbar { height: 70px; padding: 0 15px; }
  .admin-dashboard-shell .admin-topbar-page { display: none; }
  .admin-dashboard-shell .admin-top-actions .save-state { display: none; }
  .admin-dashboard-body { display: block; min-height: 0; }
  .admin-dashboard-sidebar { min-height: 0; padding: 16px 15px 12px; border-right: 0; border-bottom: 1px solid var(--dashboard-line); }
  .admin-dashboard-sidebar-brand { margin: 0 4px 17px; }
  .admin-dashboard-nav { grid-template-columns: 1fr 1.35fr; }
  .admin-dashboard-nav-label { grid-column: 1 / -1; margin: 0 5px 3px; }
  .admin-dashboard-nav-item { min-height: 42px; }
  .admin-dashboard-sidebar-actions { margin-top: 11px; }
  .admin-dashboard-sidebar-status, .admin-dashboard-sidebar-user { display: none; }
  .admin-dashboard-content { min-height: 0; }
  .admin-dashboard-page { width: calc(100% - 30px); padding: 25px 0 45px; }
  .admin-dashboard-heading { align-items: stretch; flex-direction: column; gap: 17px; }
  .admin-dashboard-heading-actions { align-items: stretch; flex-direction: column; }
  .admin-dashboard-search { min-width: 0; }
  .admin-dashboard-heading-actions .button { justify-content: center; }
  .admin-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-dashboard-metric { min-height: 132px; padding: 13px; }
  .admin-dashboard-metric > strong { margin-top: 15px; font-size: 23px; }
  .admin-dashboard-sparkline { right: 12px; bottom: 13px; transform: scale(.84); transform-origin: bottom right; }
  .admin-dashboard-grid, .admin-dashboard-bottom-grid { grid-template-columns: 1fr; gap: 11px; margin-bottom: 11px; }
  .admin-dashboard-panel { padding: 15px; }
  .admin-dashboard-coverage-row { grid-template-columns: 30px minmax(80px, 1fr) 70px 16px; gap: 7px; }
  .admin-dashboard-publication-body { justify-content: center; gap: 17px; }
  .admin-dashboard-donut { width: 108px; height: 108px; }.admin-dashboard-donut::before { width: 80px; height: 80px; }
  .admin-dashboard-recent-row { grid-template-columns: 30px minmax(0, 1fr) 15px; gap: 8px; }.admin-dashboard-status-pill, .admin-dashboard-recent-date { display: none; }
}