:root {
    color-scheme: light;
    font: 16px/1.65 system-ui, "Microsoft YaHei", sans-serif;
    color: #17263a;
    background: #f4f7fb;
    --accent: #2452b7;
    --muted: #516377;
    --line: #d6dfeb;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
h1, h2, p { margin: 0 0 .8rem; }
h1 { font-size: clamp(1.65rem, 4vw, 2.4rem); line-height: 1.25; }
h2 { font-size: 1.25rem; }
.shell { width: min(1120px, 100% - 2rem); margin: 2rem auto 4rem; }
.compact { width: min(700px, 100% - 2rem); }
.masthead { margin-bottom: 1.25rem; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: .86rem; }
.panel { padding: 1.25rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.panel > :last-child { margin-bottom: 0; }
.hero { padding: clamp(1.25rem, 5vw, 2.5rem); }
.lead { font-size: 1.12rem; }
.nav, .actions, .search { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.nav form { margin: 0; }
.form { display: grid; gap: 1rem; }
.form > button { justify-self: start; }
.search { align-items: end; }
.search label { flex: 1 1 18rem; }
label { display: block; font-weight: 650; }
label.check { display: flex; align-items: center; gap: .4rem; }
input, textarea, select, button, .button { font: inherit; }
input:not([type="checkbox"]), textarea, select {
    display: block;
    width: 100%;
    margin-top: .2rem;
    padding: .45rem .65rem;
    border: 1px solid #a8b8cb;
    border-radius: .45rem;
    background: #fff;
    color: inherit;
}
textarea { resize: vertical; }
button, .button {
    display: inline-block;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.subtle { background: #edf2fb; color: #183d8a; }
.muted { color: var(--muted); font-size: .9rem; }
.notice { border-radius: .5rem; background: #e7efff; padding: .7rem .9rem; margin-bottom: 1rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #eef3fa; }
td:first-child, td:nth-child(4), td:last-child { white-space: nowrap; }
code { font-size: .85em; }
article, .panel, td { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #8e5b00; outline-offset: 2px; }

@media (max-width: 600px) {
    .shell { margin-top: 1rem; }
    .panel { padding: .9rem; }
    th, td { font-size: .88rem; }
}

/* Keyword landing pages. Keep these styles scoped away from the admin UI. */
.topic-shell {
    --topic-ink: #162a44;
    --topic-blue: #2453ba;
    --topic-soft: #f1f6fc;
    --topic-line: #dbe6f2;
    width: min(1160px, 100% - 2rem);
    color: var(--topic-ink);
    margin-top: 1.25rem;
}
.topic-nav, .topic-nav nav, .topic-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.2rem; }
.topic-nav { justify-content: space-between; margin-bottom: .8rem; padding: .4rem .15rem; }
.topic-nav a { text-decoration: none; }
.topic-nav nav a { color: #415674; font-size: .9rem; }
.topic-nav nav a:hover { text-decoration: underline; }
.topic-brand { gap: .5rem; font-weight: 750; color: var(--topic-ink); }
.topic-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    color: #fff;
    background: var(--topic-blue);
}
.topic-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 1fr);
    align-items: center;
    gap: clamp(1.2rem, 4vw, 3rem);
    padding: clamp(1.4rem, 4.6vw, 3.5rem);
    border-radius: 1.35rem;
    background: radial-gradient(ellipse at 90% 16%, #325a93 0%, #192e51 48%, #142540 100%);
    color: #fff;
}
.topic-kicker { margin-bottom: .35rem; color: var(--topic-blue); font-weight: 750; font-size: .82rem; }
.topic-hero .topic-kicker, .topic-cta .topic-kicker { color: #9ce2df; }
.topic-hero h1 { font-size: clamp(2rem, 4.5vw, 3.3rem); letter-spacing: -.035em; margin-bottom: .9rem; }
.topic-lead { color: #e0ebfc; font-size: 1.09rem; }
.topic-focus { color: #d2e2f8; margin-bottom: 1.3rem; }
.topic-hero-board {
    display: grid;
    gap: .85rem;
    padding: 1.25rem;
    border: 1px solid #6582a8;
    border-radius: 1rem;
    background: #f7fbff;
    color: var(--topic-ink);
}
.topic-hero-board strong, .topic-figure strong { font-size: 1.22rem; line-height: 1.4; }
.topic-badge { justify-self: start; color: #154d5b; background: #dbf2f1; border-radius: 999px; padding: .2rem .65rem; font-size: .76rem; font-weight: 750; }
.topic-hero-board ol, .topic-figure ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.topic-hero-board li { padding: .5rem .7rem; background: #edf3fc; border-radius: .5rem; }
.topic-hero-board li span { margin-right: .45rem; color: var(--topic-blue); font-size: .82rem; font-weight: 750; }
.topic-primary { color: #102b45; background: #a2ece5; font-weight: 700; }
.topic-secondary { color: #eff6ff; border-color: #7a94b9; background: #233e68; }
.topic-section {
    margin-top: 1rem;
    padding: clamp(1.15rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--topic-line);
    border-radius: 1rem;
    overflow-wrap: anywhere;
}
.topic-tint { background: #f6faff; }
.topic-section h2, .topic-cta h2 { margin: .15rem 0 .7rem; font-size: clamp(1.28rem, 2.6vw, 1.75rem); line-height: 1.4; }
.topic-section h3 { margin: .12rem 0 .45rem; font-size: 1.02rem; }
.topic-section p, .topic-section td { color: #3f536c; }
.topic-section .topic-kicker { color: var(--topic-blue); }
.topic-intro, .topic-prose { max-width: 76ch; }
.topic-section :last-child { margin-bottom: 0; }
.topic-grid { display: grid; gap: .75rem; margin-top: .9rem; }
.topic-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.topic-card { min-width: 0; padding: 1rem; background: var(--topic-soft); border: 1px solid var(--topic-line); border-radius: .75rem; }
.topic-number { display: inline-block; margin-bottom: .4rem; font-size: .77rem; font-weight: 800; color: var(--topic-blue); letter-spacing: .08em; }
.topic-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center; }
.topic-figure { display: grid; gap: .65rem; margin: 0; padding: 1rem; background: #fff; border: 1px solid var(--topic-line); border-radius: .8rem; }
.topic-figure dl { display: grid; gap: .4rem; margin: 0; }
.topic-figure dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .8rem; padding: .5rem .65rem; background: var(--topic-soft); border-radius: .45rem; }
.topic-figure dt, .topic-figure figcaption { color: #4b607a; font-size: .86rem; }
.topic-figure dd { margin: 0; font-weight: 650; }
.topic-status-figure li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; padding: .4rem .65rem; border-left: 3px solid #5b91df; background: var(--topic-soft); }
.topic-status-figure li span { color: #465c76; font-size: .89rem; }
.topic-table td { white-space: normal; }
.topic-table th[scope="row"] { min-width: 7.4rem; background: transparent; }
.topic-faq { display: grid; gap: .5rem; }
.topic-faq details { padding: .65rem .85rem; background: var(--topic-soft); border: 1px solid var(--topic-line); border-radius: .6rem; }
.topic-faq summary { cursor: pointer; }
.topic-faq summary h3 { display: inline; margin: 0; }
.topic-faq details p { margin: .5rem 0 .15rem; }
.topic-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); margin: 1rem 0; color: #fff; background: #182f53; border-radius: 1rem; }
.topic-cta p:last-child { margin-bottom: 0; }

@media (max-width: 850px) {
    .topic-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .topic-shell { width: calc(100% - 1.4rem); margin-top: .65rem; }
    .topic-nav { align-items: flex-start; flex-direction: column; }
    .topic-nav nav { gap: .35rem .8rem; }
    .topic-hero, .topic-split, .topic-grid.three, .topic-grid.four { grid-template-columns: minmax(0, 1fr); }
    .topic-table th, .topic-table td { min-width: 6.8rem; }
}

.visitor-page {
    --visitor-ink: #153637;
    --visitor-muted: #466366;
    --visitor-green: #09695e;
    --visitor-line: #d6e9e4;
    background: #f3f8f7;
    color: var(--visitor-ink);
    overflow-wrap: anywhere;
}
.visitor-wrap { width: min(1080px, calc(100% - 2rem)); margin-inline: auto; }
.visitor-header { background: #fff; border-bottom: 1px solid var(--visitor-line); }
.visitor-nav, .visitor-nav nav, .visitor-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.visitor-nav { min-height: 4.2rem; justify-content: space-between; padding-block: .55rem; }
.visitor-nav a, .visitor-footer a { color: var(--visitor-green); text-decoration: none; }
.visitor-nav nav a { color: var(--visitor-muted); font-size: .9rem; }
.visitor-nav nav a:hover, .visitor-footer a:hover { text-decoration: underline; }
.visitor-brand { gap: .5rem; font-weight: 750; }
.visitor-brand span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; background: #dff2ed; }
.visitor-hero {
    text-align: center;
    color: #fff;
    background: radial-gradient(ellipse at 87% 5%, #177f70 0%, transparent 55%), linear-gradient(125deg, #0f433f, #075b56 72%);
}
.visitor-hero-inner { padding-block: clamp(2.5rem, 6vw, 4.6rem); }
.visitor-kicker { margin-bottom: .35rem; font-size: .82rem; font-weight: 750; color: var(--visitor-green); }
.visitor-hero .visitor-kicker, .visitor-hero-note { color: #c6ede6; }
.visitor-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: .7rem; }
.visitor-lead { max-width: 34rem; margin: 0 auto 1.45rem; color: #e0f5f0; font-size: clamp(1rem, 2.4vw, 1.18rem); }
.visitor-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.visitor-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: .5rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    color: #0c4c42;
    background: #e5fff5;
    font-weight: 750;
    text-decoration: none;
}
.visitor-button:hover { background: #fff; }
.visitor-secondary { color: #fff; border-color: #8dcbbe; background: transparent; }
.visitor-secondary:hover { background: #1b7166; }
.visitor-hero :focus-visible, .visitor-cta :focus-visible { outline-color: #ffdb8f; }
.visitor-hero-note { margin: .85rem 0 0; font-size: .87rem; }
.visitor-content { display: grid; gap: 1rem; padding-block: 1.2rem 2rem; }
.visitor-panel, .visitor-section { padding: clamp(1.15rem, 3vw, 2rem); border-radius: 1rem; }
.visitor-panel { border: 1px solid var(--visitor-line); background: #fff; }
.visitor-panel h2, .visitor-section h2, .visitor-cta h2 { font-size: clamp(1.23rem, 2.5vw, 1.62rem); line-height: 1.4; margin-bottom: .55rem; }
.visitor-panel p:not(.visitor-kicker), .visitor-section p:not(.visitor-kicker) { color: var(--visitor-muted); }
.visitor-panel p:last-child, .visitor-card p:last-child { margin-bottom: 0; }
.visitor-about, .visitor-orders { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; align-items: center; }
.visitor-quick { display: grid; gap: .45rem; }
.visitor-quick a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .08rem .7rem; padding: .55rem .85rem; background: #edf7f3; border-radius: .55rem; text-decoration: none; }
.visitor-quick a:hover { background: #def0e9; }
.visitor-quick strong, .visitor-quick b, .visitor-inline-link { color: var(--visitor-green); }
.visitor-quick span { color: var(--visitor-muted); font-size: .88rem; }
.visitor-quick b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.visitor-section { padding-inline: 0; }
.visitor-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.visitor-card { padding: .95rem; border: 1px solid var(--visitor-line); border-radius: .75rem; background: #e9f5f0; }
.visitor-card span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-bottom: .45rem; border-radius: .45rem; background: #d2ebe1; color: var(--visitor-green); font-size: .75rem; font-weight: 750; }
.visitor-card h3, .visitor-steps h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.visitor-steps, .visitor-orders ul { display: grid; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.visitor-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--visitor-line); }
.visitor-steps li:last-child { border-bottom: 0; }
.visitor-step-number { display: inline-grid; place-items: center; width: 2.05rem; height: 2.05rem; border-radius: 50%; background: #dff2ed; color: var(--visitor-green); font-size: .77rem; font-weight: 750; }
.visitor-orders { background: #e7f5f0; }
.visitor-orders li { display: grid; gap: .1rem; padding: .55rem .75rem; background: #f9fffc; border-radius: .55rem; }
.visitor-orders li span { color: var(--visitor-muted); font-size: .9rem; }
.visitor-inline-link { display: inline-block; margin-top: .35rem; font-weight: 700; }
.visitor-faq { display: grid; gap: .4rem; }
.visitor-faq details { padding: .58rem .75rem; border: 1px solid var(--visitor-line); border-radius: .55rem; background: #f5faf8; }
.visitor-faq summary { cursor: pointer; font-weight: 650; }
.visitor-faq details p { margin: .45rem 0 .15rem; }
.visitor-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.3rem; padding: clamp(1.15rem, 3vw, 2rem); border-radius: 1rem; background: #104c47; color: #fff; }
.visitor-cta p { margin: 0; color: #d9f0eb; }
.visitor-footer { background: #fff; border-top: 1px solid var(--visitor-line); color: var(--visitor-muted); font-size: .9rem; }
.visitor-footer .visitor-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; padding-block: .85rem; }

@media (max-width: 680px) {
    .visitor-nav { justify-content: flex-start; gap: .4rem 1rem; }
    .visitor-nav nav { gap: .25rem .7rem; }
    .visitor-about, .visitor-orders { grid-template-columns: minmax(0, 1fr); }
    .visitor-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
    .visitor-services { grid-template-columns: minmax(0, 1fr); }
}

/* Landing templates share article components but vary layout, colors and section order. */
.landing-page {
    --landing-deep: #123354;
    --landing-mid: #285a83;
    --landing-light: #d8f1ff;
    --landing-text: #eaf7ff;
    --landing-paper: #f2f8fd;
}
.landing-theme-jade { --landing-deep: #103d35; --landing-mid: #216b58; --landing-light: #d3f4e4; --landing-text: #ecfff5; --landing-paper: #f1faf6; --topic-blue: #1c6552; }
.landing-theme-indigo { --landing-deep: #22254e; --landing-mid: #454c91; --landing-light: #e3e7ff; --landing-text: #f0f1ff; --landing-paper: #f5f5fd; --topic-blue: #3e4897; }
.landing-theme-plum { --landing-deep: #462747; --landing-mid: #754a73; --landing-light: #f3e3f1; --landing-text: #fff2fc; --landing-paper: #fbf5fa; --topic-blue: #793f75; }
.landing-theme-amber { --landing-deep: #4b331e; --landing-mid: #7b552a; --landing-light: #fcebcf; --landing-text: #fff6e7; --landing-paper: #fdf8ee; --topic-blue: #795019; }
.landing-theme-slate { --landing-deep: #263447; --landing-mid: #475d76; --landing-light: #e3edf8; --landing-text: #f0f6fe; --landing-paper: #f5f8fc; --topic-blue: #455e7d; }
.landing-page .landing-hero { background: radial-gradient(ellipse at 95% 4%, var(--landing-mid), var(--landing-deep) 80%); }
.landing-page .topic-hero .topic-kicker, .landing-page .topic-lead, .landing-page .topic-focus { color: var(--landing-text); }
.landing-page .landing-board, .landing-page .topic-tint { background: var(--landing-paper); }
.landing-page .landing-board p { margin: 0; }
.landing-page .landing-board a { font-size: .9rem; }
.landing-page .topic-cta { background: var(--landing-deep); }
.landing-page .landing-button { color: var(--landing-deep); background: var(--landing-light); font-weight: 750; }
.landing-page .topic-secondary { background: transparent; }
.landing-page .landing-hero-center { grid-template-columns: minmax(0, 1fr); text-align: center; }
.landing-hero-center .topic-hero-copy { max-width: 46rem; margin-inline: auto; }
.landing-hero-center .actions { justify-content: center; }
.landing-hero-center .landing-board { display: none; }
.landing-page .landing-hero-panel { color: var(--landing-deep); background: var(--landing-paper); border: 1px solid var(--topic-line); }
.landing-page .landing-hero-panel .topic-kicker, .landing-page .landing-hero-panel .topic-lead,
.landing-page .landing-hero-panel .topic-focus, .landing-page .landing-hero-panel .topic-secondary { color: var(--landing-deep); }
.landing-hero-panel .landing-board { background: #fff; border-color: var(--topic-line); }
.landing-page .landing-hero-rail { grid-template-columns: minmax(13rem, .82fr) minmax(0, 1.65fr); }
.landing-hero-rail .landing-board { grid-column: 1; grid-row: 1; }
.landing-list { padding-inline-start: 1.25rem; margin: .65rem 0 0; }
.landing-list li + li { margin-top: .3rem; }
.landing-note { margin: 0; }
.landing-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .65rem; }
.landing-template-card { padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; }
.landing-batch { align-items: flex-end; margin-block: .7rem; }

@media (max-width: 640px) {
    .landing-page .landing-hero-rail { grid-template-columns: minmax(0, 1fr); }
    .landing-hero-rail .landing-board { grid-row: auto; }
}

/* Admin console */
.admin-ui {
    --accent: #2858d8;
    --muted: #526279;
    --line: #e0e7f0;
    --admin-ink: #19283e;
    --admin-surface: #f4f7fb;
    min-height: 100vh;
    color: var(--admin-ink);
    background: var(--admin-surface);
    font-size: .925rem;
    line-height: 1.55;
}
.admin-frame { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
.admin-icon { width: 1.1rem; height: 1.1rem; flex: none; vertical-align: middle; }
.admin-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    padding: 1.25rem .85rem .8rem;
    background: #14243c;
    color: #edf3ff;
}
.admin-brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.admin-sidebar .admin-brand { padding: .15rem .55rem 1.2rem; }
.admin-brand strong { display: block; font-size: 1.05rem; line-height: 1.35; }
.admin-brand small { display: block; margin-top: .2rem; color: #a7bad6; font-size: .64rem; letter-spacing: .1em; font-weight: 650; }
.admin-brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: .7rem; color: #fff; background: #3766e5; }
.admin-brand-mark .admin-icon { width: 1.35rem; height: 1.35rem; }
.admin-menu { display: grid; gap: 1.25rem; }
.admin-menu-group p { margin: 0 0 .4rem .65rem; color: #a1b4d0; font-size: .74rem; letter-spacing: .06em; }
.admin-menu-group > div { display: grid; gap: .16rem; }
.admin-menu a, .admin-logout button { display: flex; align-items: center; gap: .7rem; padding: .65rem .7rem; border-radius: .5rem; color: #dbe6f8; font-size: .87rem; text-decoration: none; }
.admin-menu a:hover, .admin-logout button:hover { background: #233851; }
.admin-menu a[aria-current="page"] { background: #284670; color: #fff; box-shadow: inset .2rem 0 #7aa4ff; font-weight: 700; }
.admin-menu .admin-icon { color: #aac4ef; }
.admin-logout { margin-top: auto; padding-top: .85rem; }
.admin-logout button { width: 100%; border: 1px solid #354961; background: transparent; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; min-height: 4rem; padding: .6rem clamp(1rem, 2.6vw, 2.25rem); border-bottom: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .85rem; }
.admin-top strong { color: var(--admin-ink); }
.admin-crumb-separator { margin-inline: .3rem; color: #74839a; }
.admin-account { display: flex; align-items: center; gap: .45rem; flex: none; color: var(--admin-ink); font-weight: 650; }
.admin-avatar { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: #eaf0ff; color: #264fc0; font-weight: 750; }
.admin-main { max-width: 98rem; min-width: 0; margin-inline: auto; padding: 1.5rem clamp(1rem, 2.6vw, 2.25rem) 2.5rem; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.admin-heading h1, .admin-auth h1 { margin: 0; font-size: clamp(1.55rem, 2.6vw, 2rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
.admin-ui h2 { font-size: 1.07rem; margin-bottom: .35rem; }
.admin-ui .button, .admin-ui button { border-radius: .48rem; font-weight: 650; padding: .47rem .75rem; }
.admin-ui .admin-primary { display: inline-flex; align-items: center; gap: .36rem; }
.admin-ui .subtle { color: #334768; background: #fff; border-color: #d8e1ee; }
.admin-ui .subtle:hover { background: #f3f7fd; }
.admin-ui .panel { padding: 1.15rem; border-radius: .72rem; box-shadow: 0 1px 2px #15253c08; }
.admin-ui .panel.form { max-width: 56rem; }
.admin-ui :is(input:not([type="checkbox"]), textarea, select) { border-color: #ccd7e5; border-radius: .48rem; margin-top: .32rem; padding: .54rem .62rem; }
.admin-ui :is(button, input, select, textarea, a):focus-visible { outline: 2px solid #557ceb; outline-offset: 2px; }
.admin-sidebar :is(a, button):focus-visible { outline-color: #a5c0ff; }
.admin-ui input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); vertical-align: middle; }
.admin-ui .muted, .admin-description { color: var(--muted); font-size: .86rem; }
.admin-ui .notice { border: 1px solid #cddcff; color: #244078; background: #edf3ff; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.admin-metric { display: flex; align-items: center; gap: .7rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: .7rem; background: #fff; }
.admin-metric > div > span { display: block; color: var(--muted); font-size: .82rem; }
.admin-metric strong { display: block; font-size: 1.53rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-metric-icon, .admin-upload-icon { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: .62rem; color: #2857cc; background: #eaf0ff; }
.admin-metric-live { color: #16634a; background: #e5f6ed; }
.admin-metric-draft { color: #805517; background: #fcf2db; }
.admin-metric-templates { color: #6943ad; background: #f1ebfc; }
.admin-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .62rem 0 .95rem; color: var(--muted); font-size: .8rem; }
.admin-meta b { color: var(--admin-ink); }
.admin-ui .admin-table-panel { padding: 0; }
.admin-table-head, .admin-toolbar, .admin-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .55rem .8rem; padding: .7rem .95rem; }
.admin-table-head { padding-top: .9rem; }
.admin-table-head p { margin: 0; }
.admin-status-filters { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .95rem .7rem; }
.admin-ui .admin-status-filters a { display: inline-block; padding: .35rem .7rem; border: 1px solid #d8e2f0; border-radius: .45rem; text-decoration: none; font-size: .84rem; }
.admin-ui .admin-status-filters a:hover { background: #f0f4fa; }
.admin-ui .admin-status-filters a[aria-current="page"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.admin-search { display: flex; align-items: center; gap: .45rem; max-width: 100%; }
.admin-search :is(button, a) { flex: none; }
.admin-ui .admin-search input { margin: 0; width: 13.6rem; min-width: 0; }
.admin-toolbar { border-top: 1px solid #edf1f7; }
.admin-toolbar .actions { gap: .4rem; }
.admin-ui .admin-toolbar select { margin: 0; width: min(13.6rem, 100%); }
.admin-ui .admin-table-panel table { min-width: 48rem; }
.admin-ui .admin-table-panel th { background: #f0f4fa; color: #405470; font-size: .79rem; white-space: nowrap; }
.admin-ui .admin-table-panel :is(th, td) { padding: .63rem .74rem; border-color: #e9eef5; vertical-align: middle; }
.admin-ui .admin-table-panel :is(th, td):first-child { padding-left: .95rem; }
.admin-ui .admin-table-panel :is(th, td):last-child { padding-right: .95rem; }
.admin-ui .admin-table-panel td { font-size: .84rem; white-space: normal; }
.admin-ui .admin-table-panel tbody tr:hover { background: #f7faff; }
.admin-site { min-width: 8.25rem; }
.admin-site :is(strong, code), .admin-table-template :is(span, small) { display: block; }
.admin-site code, .admin-table-template small { margin-top: .1rem; color: var(--muted); }
.admin-table-template { min-width: 7.65rem; }
.admin-status { display: inline-flex; padding: .14rem .47rem; border-radius: 999px; color: #74511d; background: #fbf0d8; font-size: .76rem; font-weight: 650; white-space: nowrap; }
.admin-status.is-live { color: #156146; background: #dff4e9; }
.admin-row-actions { display: flex; gap: .15rem .48rem; flex-wrap: wrap; min-width: 7.25rem; }
.admin-row-actions a { color: #2853b5; text-decoration: none; white-space: nowrap; }
.admin-row-actions a:hover { text-decoration: underline; }
.admin-pagination { justify-content: flex-end; color: var(--muted); font-size: .83rem; }
.admin-ui .landing-template-grid { margin-top: .85rem; }
.admin-ui .landing-template-card { padding: 0; overflow: hidden; }
.admin-template-visual { display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 3.1rem; padding: .65rem .85rem; background: linear-gradient(120deg, var(--landing-deep, #123354), var(--landing-mid, #285a83)); }
.admin-template-visual span { width: 53%; height: .68rem; border-radius: .2rem; background: #ffffffb8; }
.admin-template-visual b { width: 27%; height: 1.35rem; border-radius: .25rem; background: #ffffff35; }
.admin-template-body { padding: .68rem .78rem; }
.admin-template-body p { margin: .16rem 0 .45rem; }
.admin-template-body a { font-size: .83rem; font-weight: 650; text-decoration: none; }
.admin-template-body a:hover { text-decoration: underline; }
.admin-template-body a .admin-icon { width: .85rem; height: .85rem; }
.admin-upload { display: grid; justify-items: start; gap: .35rem; border: 1px dashed #aebed5; border-radius: .65rem; padding: .85rem; background: #f7faff; }
.admin-ui .admin-upload input { background: #fff; }
.admin-upload input::file-selector-button { margin-right: .45rem; border: 0; border-radius: .25rem; padding: .22rem .4rem; color: #254792; background: #eaf0ff; cursor: pointer; }
.admin-auth { display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at 60% 5%, #e8efff, #f4f7fb 64%); }
.admin-auth-card { width: min(100%, 25rem); padding: clamp(1.15rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 20px 48px #243b6515; }
.admin-auth-card .admin-brand small { color: #576d8f; }
.admin-auth-card h1 { margin: 1.3rem 0 .85rem; }
.admin-auth-card .form button { justify-self: stretch; margin-top: .15rem; }

@media (max-width: 860px) {
    .admin-frame { grid-template-columns: minmax(0, 1fr); }
    .admin-sidebar { position: static; height: auto; overflow: visible; padding: .7rem 1rem; }
    .admin-sidebar .admin-brand { padding: 0 0 .55rem; }
    .admin-menu { gap: .4rem; }
    .admin-menu-group p { display: none; }
    .admin-menu-group > div { display: flex; flex-wrap: wrap; gap: .22rem; }
    .admin-menu a, .admin-logout button { padding: .38rem .48rem; gap: .3rem; }
    .admin-logout { padding-top: .4rem; }
    .admin-logout button { width: auto; }
}
@media (max-width: 540px) {
    .admin-main { padding: .9rem .75rem 1.5rem; }
    .admin-top { padding-inline: .75rem; min-height: 3rem; }
    .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .admin-metric { gap: .45rem; padding: .6rem; }
    .admin-metric-icon { width: 1.85rem; height: 1.85rem; }
    .admin-metric strong { font-size: 1.25rem; }
    .admin-meta { gap: .22rem .65rem; }
    .admin-table-head, .admin-toolbar { padding-inline: .65rem; }
    .admin-ui .admin-toolbar select, .admin-ui .admin-search input { width: 10.7rem; }
}

#friend-links-title + ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: 0;
    list-style: none;
}