:root {
  color-scheme: light;
  --canvas: #f7f9fc;
  --canvas-blue: #eef7ff;
  --surface: #fff;
  --surface-soft: #fbfcfe;
  --text: #354052;
  --text-soft: #667085;
  --text-faint: #657286;
  --border: #f0f3f7;
  --border-strong: #e1e7ef;
  --blue-050: #f2f8ff;
  --blue-100: #ebf5ff;
  --blue-300: #cde4f9;
  --blue-600: #52687a;
  --gray-100: #e9eef5;
  --gray-300: #e3e8ef;
  --gray-600: #5f6b7d;
  --progress-fill: #cde8f7;
  /* v1.30.0: the decorative accent ramps collapse onto the blue/grey system.
     They keep their historical names so the ~94 call sites stay untouched. */
  --pink-100: #eef2f7;
  --pink-400: #aab8c9;
  --pink-700: #5a6a7e;
  --purple-100: #eef4fa;
  --purple-500: #5e7186;
  --mint-100: #e7eef6;
  --mint-700: #55677c;
  --yellow-100: #eff3f8;
  --yellow-700: #5f6b7d;
  /* Status semantics stay chromatic on purpose: pending vs approved vs rejected
     must not collapse into the same grey. Only toasts, pills, inline messages
     and form validation may use these. */
  --state-success-100: #e2f5ea;
  --state-success-700: #397557;
  --state-warning-100: #fff3d8;
  --state-warning-700: #8c6416;
  --danger-100: #fde8e7;
  --danger-700: #a04440;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(61,82,110,.06);
  --shadow-sm: 0 8px 24px rgba(93,119,154,.08);
  --shadow-md: 0 18px 45px rgba(93,119,154,.12);
  --shadow-float: 0 24px 60px rgba(93,119,154,.16);
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.2,1.25,.35,1);
  --page-width: 1280px;
  --font: ui-rounded,"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
}

html[data-font-style="cloud-rounded"] { --font:ui-rounded,"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; }
html[data-font-style="candy-soft"] { --font:"Segoe UI Variable","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; }
html[data-font-style="playful-yuan"] { --font:"YouYuan","Yuanti SC","Microsoft YaHei UI",ui-rounded,sans-serif; }
html[data-font-style="diary-serif"] { --font:"Source Han Serif SC","Noto Serif CJK SC","Songti SC",SimSun,serif; }
html[data-font-style="starlight-kaiti"] { --font:"KaiTi","STKaiti","Kaiti SC","Microsoft YaHei UI",serif; }
html[data-font-style="neumorphic-clean"] { --font:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei UI",sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: radial-gradient(circle at 8% 3%,rgba(235, 245, 255, .9),transparent 28rem),radial-gradient(circle at 96% 20%,rgba(252,232,240,.64),transparent 30rem),var(--canvas); color: var(--text); font-family: var(--font); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.drawer-open { overflow: hidden; }
button,input,textarea,select { color: inherit; font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; }
svg { display: block; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { line-height: 1.22; letter-spacing: -.035em; }
em { color: var(--blue-600); font-style: normal; }
:focus-visible { outline: 3px solid rgba(205, 228, 249, .72); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--text); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.site-header { position:sticky; z-index:40; top:18px; width:min(var(--page-width),calc(100% - clamp(28px,7vw,92px))); margin:28px auto 0; opacity:1; visibility:visible; transform:translate3d(0,0,0); will-change:transform,opacity; transition:transform 420ms var(--spring),opacity 240ms var(--ease),visibility 0s linear 0s; }
.site-header.is-nav-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,calc(-100% - 48px),0); transition:transform 360ms var(--ease),opacity 220ms var(--ease),visibility 0s linear 360ms; }
.site-header.is-nav-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); }
.site-header.is-nav-arriving .site-nav { transform-origin:50% 0; animation:capsule-nav-arrive 620ms var(--spring) both; }
.site-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 64px; padding: 8px 10px 8px 16px; border: 1px solid rgba(240, 243, 247, .92); border-radius: var(--radius-pill); background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); backdrop-filter: blur(16px); }
.site-brand,.admin-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 900; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; overflow:hidden; border-radius: 14px; background: var(--blue-100); color: var(--blue-600); }
.brand-mark img { display:block; width:100%; height:100%; padding:4px; border-radius:inherit; object-fit:contain; }
.site-nav__links { justify-self: center; display: flex; gap: 4px; }
.site-nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 15px; border-radius: var(--radius-pill); color: var(--text-soft); text-decoration: none; transition: color 160ms var(--ease),background 160ms var(--ease); }
.site-nav__links a:hover,.site-nav__links a.is-current { color: var(--text); background: var(--blue-100); }
.site-nav__actions,.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-button.mobile-menu-button { display: none; }
.site-main { min-height: calc(100vh - 300px); }
.page-shell { width: min(var(--page-width),calc(100% - clamp(28px,7vw,92px))); margin-inline: auto; padding: clamp(42px,7vw,82px) 0 86px; }
.page-shell--article { max-width: 1120px; }
.narrow-shell { max-width: 780px; }

.card { border: 1px solid rgba(240, 243, 247, .94); border-radius: var(--radius-lg); background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm); }
.card--interactive { transition: transform 240ms var(--spring),box-shadow 240ms var(--ease),border-color 240ms var(--ease); }
@media (hover:hover) { .card--interactive:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: var(--shadow-md); } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--blue-600); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #65aa81; box-shadow: 0 0 0 5px var(--state-success-100); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--radius-pill); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 160ms var(--spring),box-shadow 160ms var(--ease),background 160ms var(--ease); }
.button:hover { transform: translateY(-2px); }.button:active { transform: scale(.97); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button--primary { border:1px solid #d9eaf7; background:linear-gradient(145deg,#eff8ff,#ebf5fc); color:#43586b; box-shadow:0 10px 24px rgba(120,165,199,.18); }
.button--primary:hover { border-color:#d1e5f4; background:linear-gradient(145deg,#f5fbff,#e3f2fb); color:#3f5568; box-shadow:0 14px 30px rgba(120,165,199,.22); }
.button--soft { border: 1px solid var(--border); background: var(--surface); }
.button--danger { background: var(--danger-100); color: var(--danger-700); }
.button--full { width: 100%; }
.button--loading i { width: 15px; height: 15px; border: 2px solid rgba(82,104,122,.24); border-top-color: var(--accent-soft); border-radius: 50%; animation: spin .8s linear infinite; }
.button-row--end { justify-content: flex-end; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform 160ms var(--spring),background 160ms var(--ease),box-shadow 160ms var(--ease); }
.icon-button:hover { transform: translateY(-2px); background: var(--blue-100); box-shadow: var(--shadow-sm); }.icon-button:active { transform: scale(.96); }
.icon-button--small { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--blue-600); font-weight: 800; text-decoration: none; }.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { width: 17px; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 900; }
.badge--blue { background: var(--blue-100); color: var(--blue-600); }.badge--pink { background: var(--pink-100); color: var(--pink-700); }.badge--purple { background: var(--purple-100); color: var(--purple-500); }.badge--mint { background: var(--mint-100); color: var(--mint-700); }.badge--yellow { background: var(--yellow-100); color: var(--yellow-700); }.badge--danger { background: var(--danger-100); color: var(--danger-700); }.badge--gray { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-soft); }
.soft-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.7); }
.soft-icon--blue { background: var(--blue-100); color: var(--blue-600); }.soft-icon--pink { background: var(--pink-100); color: var(--pink-700); }.soft-icon--mint { background: var(--mint-100); color: var(--mint-700); }.soft-icon--yellow { background: var(--yellow-100); color: var(--yellow-700); }.soft-icon--purple { background: var(--purple-100); color: var(--purple-500); }
.split-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-faint); font-size: 12px; }

.home-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(280px,5fr); grid-template-rows: auto auto; gap: 20px; }
.hero-card { position: relative; grid-row: 1/3; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(200px,.65fr); gap: 20px; align-items: center; min-height: 440px; padding: clamp(30px,5vw,62px); overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,247,255,.92)); }
.hero-card::after { content:""; position: absolute; right:-75px; bottom:-115px; width:300px; height:300px; border:45px solid rgba(205, 228, 249, .22); border-radius:50%; }
.hero-card__copy { position: relative; z-index: 2; }.hero-card h1 { margin-bottom: 24px; font-size: clamp(38px,4.2vw,62px); }.hero-card p { max-width: 590px; margin-bottom: 30px; color: var(--text-soft); font-size: 17px; }
.tape { position: absolute; z-index: 2; top: 23px; left: 50%; width: 78px; height: 22px; border-radius: 3px; opacity: .62; transform: rotate(-3deg); background: repeating-linear-gradient(90deg,var(--pink-100),var(--pink-100) 9px,#ecf2f7 10px); }
.avatar-planet { position: relative; z-index: 1; display: grid; place-items: center; width: min(19vw,210px); aspect-ratio: 1; justify-self: center; border: 10px solid rgba(255,255,255,.78); border-radius: 45% 55% 51% 49%/53% 45% 55% 47%; background: linear-gradient(145deg,var(--pink-100),var(--blue-100)); box-shadow: 0 25px 60px rgba(99,139,177,.2); color: #6486aa; font-size: 70px; animation: float 7s ease-in-out infinite; }
.avatar-planet i { position: absolute; top: -18%; right: 2%; color: var(--pink-700); font-size: 22px; font-style: normal; }
.now-card,.note-card { padding: 26px; }.now-card h2 { margin: 18px 0 8px; font-size: 21px; }.now-card p { color: var(--text-soft); }.now-card .split-meta { margin-top: 26px; }
.card-label { display: flex; align-items: center; gap: 10px; font-size: 14px; }.card-label .soft-icon { width: 36px; height: 36px; border-radius: 12px; }
.note-card { position: relative; background: linear-gradient(135deg,#eff4f8,var(--yellow-100)); transform: rotate(.7deg); }.note-card p { margin-bottom: 16px; font-size: 18px; font-weight: 800; }.note-card small { color: var(--yellow-700); }.note-pin { position: absolute; top: 17px; right: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-400); box-shadow: 0 3px 0 #879cad; }
.section { padding-top: clamp(58px,7vw,92px); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.section-heading h2 { margin: 0; font-size: clamp(28px,3vw,38px); }
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.post-card { overflow: hidden; }.post-card__cover,.list-post__cover { display: grid; place-items: center; min-height: 190px; color: rgba(255,255,255,.9); }.post-card__cover .icon,.list-post__cover .icon { width: 64px; height: 64px; }.cover--blue { background: linear-gradient(145deg,#e9f5ff,#ecf0f3); }.cover--pink { background: linear-gradient(145deg,#ecf2f7,#eff5f9); }.cover--purple { background: linear-gradient(145deg,#ebf2f7,#deefff); }
.post-card__body { padding: 24px; }.post-card__body h3 { margin: 16px 0 10px; font-size: 21px; }.post-card__body h3 a,.list-post h2 a { text-decoration: none; }.post-card__body h3 a:hover,.list-post h2 a:hover { color: var(--blue-600); }.post-card__body p { color: var(--text-soft); }.post-card__meta { color: var(--text-faint); font-size: 12px; }
.corner-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.corner-card { display: grid; gap: 8px; min-height: 175px; padding: 26px; text-decoration: none; }.corner-card .soft-icon { margin-bottom: 12px; }.corner-card strong { font-size: 22px; }.corner-card small { color: var(--text-soft); }
.wash--pink { background: linear-gradient(145deg,#fff,var(--pink-100)); }.wash--blue { background: linear-gradient(145deg,#fff,var(--blue-100)); }.wash--mint { background: linear-gradient(145deg,#fff,var(--mint-100)); }.wash--purple { background: linear-gradient(145deg,#fff,var(--purple-100)); }.wash--yellow { background: linear-gradient(145deg,#fff,var(--yellow-100)); }

.page-hero { max-width: 780px; margin: 0 auto clamp(42px,6vw,72px); text-align: center; }.page-hero h1 { margin-bottom: 16px; font-size: clamp(40px,5vw,60px); }.page-hero p { color: var(--text-soft); font-size: 18px; }.page-hero .button { margin-top: 12px; }
.search-box { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; max-width: 620px; min-height: 56px; padding: 0 16px; margin: 28px auto 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); }.search-box input { min-width: 0; border: 0; outline: 0; background: transparent; }.search-box kbd { padding: 3px 8px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 7px; background: var(--surface-soft); color: var(--text-faint); font-size: 11px; }
.blog-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 24px; align-items: start; }.list-toolbar { display: flex; align-items: center; gap: 16px; min-height: 52px; margin-bottom: 18px; }.list-toolbar h2 { margin: 0; font-size: 18px; }.list-toolbar h2 small { color: var(--text-faint); }.list-toolbar label { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-soft); font-size: 13px; }.list-toolbar select { min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }.filter-button { display: none; }
.list-post { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 25px; padding: 16px; margin-bottom: 18px; }.list-post__cover { min-height: 185px; border-radius: 18px; }.list-post__copy { align-self: center; padding-right: 12px; }.list-post h2 { margin: 14px 0 9px; font-size: 23px; }.list-post p { color: var(--text-soft); }
.filter-card { position: sticky; top: 20px; padding: 24px; }.filter-group { display: grid; gap: 7px; padding: 20px 0; border-top: 1px solid var(--border); }.filter-group > strong { margin-bottom: 5px; font-size: 13px; }.filter-group button { display: flex; justify-content: space-between; min-height: 42px; padding: 8px 12px; border-radius: 12px; background: transparent; color: var(--text-soft); cursor: pointer; }.filter-group button:hover,.filter-group button.is-selected { background: var(--blue-100); color: var(--text); }.filter-group small { color: var(--text-faint); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }.tag-cloud span { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); }.tag-cloud--large span { min-height: 40px; padding-inline: 14px; }

.article-header { max-width: 850px; margin: 0 auto clamp(42px,7vw,72px); text-align: center; }.article-header h1 { margin: 20px 0; font-size: clamp(40px,5.3vw,62px); }.article-header > p { color: var(--text-soft); font-size: 19px; }.author-line { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }.author-line strong,.author-line small { display: block; }.author-line small { color: var(--text-faint); font-size: 12px; }
.avatar { position: relative; display: grid; place-items: center; border-radius: 44% 56% 50% 50%; background: linear-gradient(145deg,var(--pink-100),var(--blue-100)); color: var(--blue-600); font-weight: 900; }.avatar--small { width: 44px; height: 44px; }.avatar--large { width: 128px; height: 128px; margin: 0 auto 24px; border: 8px solid #fff; box-shadow: var(--shadow-md); font-size: 38px; }
.article-layout { display: grid; grid-template-columns: minmax(0,760px) 220px; gap: 28px; justify-content: center; align-items: start; }.article { padding: clamp(28px,5vw,62px); font-size: 17px; line-height: 1.9; }.article .lead { color: var(--text); font-size: 20px; }.article h2 { margin: 52px 0 18px; font-size: 28px; }.article p { color: #4d596b; }.callout { display: flex; gap: 14px; padding: 20px; margin: 30px 0; border: 1px solid #e3effb; border-radius: 18px; background: var(--canvas-blue); }.callout > span { color: var(--blue-600); }.callout p { margin: 4px 0 0; }.palette-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 48px 20px; margin: 32px 0; border-radius: 22px; background: linear-gradient(145deg,#e9f5ff,#ecf0f3); }.palette-demo i { width: 70px; height: 70px; border: 8px solid rgba(255,255,255,.75); border-radius: 25px 46px 28px 40px; box-shadow: var(--shadow-sm); }.palette--pink { background: var(--pink-400); }.palette--blue { background: var(--blue-300); }.palette--mint { background: #d4dce3; }.palette--purple { background: #d5dfe7; }.article blockquote { padding: 8px 0 8px 24px; margin: 34px 0; border-left: 4px solid var(--pink-400); color: var(--pink-700); font-size: 20px; font-weight: 800; }
.toc { position: sticky; top: 20px; display: grid; gap: 7px; padding: 22px; }.toc strong { margin-bottom: 8px; }.toc a { padding: 6px 8px; border-radius: 9px; color: var(--text-soft); font-size: 13px; text-decoration: none; }.toc a:hover,.toc a.is-current { background: var(--blue-100); color: var(--blue-600); }.progress { height: 6px; margin-top: 16px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border); }.progress span { display: block; width: 42%; height: 100%; background: var(--progress-fill); }.toc small { color: var(--text-faint); }

.about-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: clamp(36px,7vw,88px); max-width: 1120px; margin-inline: auto; }.profile-card { position: sticky; top: 20px; padding: 34px; text-align: center; }.profile-card h1 { margin-bottom: 8px; font-size: 27px; }.profile-card p { color: var(--text-soft); }.profile-card .online-dot { position: absolute; right: 4px; bottom: 5px; width: 20px; height: 20px; border: 4px solid #fff; box-shadow: none; }.location { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 22px; color: var(--text-faint); font-size: 13px; }.about-copy { padding-top: 28px; }.about-copy h2 { font-size: clamp(35px,4.5vw,54px); }.about-copy .lead { color: var(--text-soft); font-size: 19px; }.interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }.interest-grid article { padding: 24px; }.interest-grid p { margin: 7px 0 0; color: var(--text-soft); }.interest-grid .soft-icon { margin-bottom: 18px; }
.timeline-section { max-width: 900px; margin-inline: auto; }.timeline { position: relative; }.timeline::before { content:""; position:absolute; top:8px; bottom:35px; left:101px; width:2px; background:var(--border); }.timeline article { position: relative; display:grid; grid-template-columns:70px 24px 1fr; gap:20px; margin-bottom:22px; }.timeline time { padding-top:23px; color:var(--text-faint); font-weight:800; }.timeline article > i { position:relative; z-index:1; width:16px; height:16px; margin-top:28px; border:4px solid #fff; border-radius:50%; background:var(--accent-soft); box-shadow:0 0 0 3px var(--blue-100); }.timeline article > i.tone-pink { background:var(--pink-400); box-shadow:0 0 0 3px var(--pink-100); }.timeline article > i.tone-mint { background:#b1bdc6; box-shadow:0 0 0 3px var(--mint-100); }.timeline article .card { padding:24px; }.timeline article p { margin:6px 0 0; color:var(--text-soft); }

.friend-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.friend-card { position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; min-height:170px; padding:24px; }.friend-avatar { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.9); border-radius:20px; font-size:20px; font-weight:900; }.friend-card h2 { margin-bottom:6px; font-size:19px; }.friend-card p { margin-bottom:14px; color:var(--text-soft); font-size:13px; }.friend-status { position:absolute; right:18px; bottom:16px; color:var(--mint-700); font-size:11px; }.friend-status i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#b1bdc6; }
.application { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,7vw,88px); padding:clamp(30px,5vw,58px); margin-top:70px; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,247,255,.88)); }.application h2 { font-size:clamp(30px,4vw,46px); }.application p { color:var(--text-soft); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }.field { display:grid; min-width:0; gap:7px; font-size:13px; font-weight:800; }.field__label em { margin-left:4px; color:var(--danger-700); }.field input,.field textarea,.field select { width:100%; min-width:0; min-height:46px; padding:11px 13px; border:1px solid var(--border); border-radius:14px; background:var(--surface); outline:0; resize:vertical; }.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--blue-300); box-shadow:0 0 0 3px rgba(205, 228, 249, .32); }.field small { color:var(--text-faint); font-weight:500; }.field--wide { grid-column:1/-1; }.field--error input { border-color:var(--danger-700); }.field--error small { color:var(--danger-700); }

.component-page { max-width:1050px; }.component-section { display:grid; grid-template-columns:240px 1fr; gap:32px; padding:30px; margin-bottom:18px; }.component-section__title h2 { margin-bottom:7px; font-size:22px; }.component-section__title p { color:var(--text-soft); font-size:13px; }.component-demo { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }.component-section .component-demo + .component-demo { grid-column:2; }.message-stack { display:grid; gap:10px; }.message { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; min-height:68px; padding:14px; border-radius:16px; }.message__icon { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; }.message strong,.message small { display:block; }.message small { opacity:.82; }.message--success { background:var(--state-success-100); color:var(--state-success-700); }.message--warning { background:var(--state-warning-100); color:var(--state-warning-700); }.message--error { background:var(--danger-100); color:var(--danger-700); }.skeleton-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.skeleton-card { padding:16px; border:1px solid var(--border); border-radius:16px; }.skeleton-card i,.skeleton-card span { display:block; border-radius:10px; background:linear-gradient(90deg,#edf0f4,#f7f8fa,#edf0f4); background-size:200% 100%; animation:skeleton 1.6s infinite; }.skeleton-card i { height:100px; margin-bottom:14px; }.skeleton-card span { width:85%; height:14px; margin:8px 0; }.skeleton-card span:last-child { width:58%; }
.empty-state,.error-state { display:grid; justify-items:center; padding:clamp(42px,8vw,80px); text-align:center; }.empty-state__icon { display:grid; place-items:center; width:92px; height:92px; margin-bottom:22px; border-radius:34px; background:var(--blue-100); color:var(--blue-600); }.empty-state__icon .icon { width:42px; height:42px; }.empty-state__icon--pink { background:var(--pink-100); color:var(--pink-700); }.empty-state p,.error-state p { max-width:520px; color:var(--text-soft); }.error-code { color:var(--border-strong); font-size:clamp(70px,12vw,130px); font-weight:900; line-height:1; }

.site-footer { display:grid; grid-template-columns:1fr auto; gap:20px; width:min(var(--page-width),calc(100% - clamp(28px,7vw,92px))); padding:34px 0 28px; margin:0 auto; border-top:1px solid var(--border); }.site-footer strong { font-size:18px; }.site-footer p,.site-footer small { color:var(--text-faint); }.site-footer__links { display:flex; flex-wrap:wrap; gap:18px; }.site-footer__links a { min-height:44px; color:var(--text-soft); }.site-footer > small { grid-column:1/-1; }
.mobile-bottom-nav,.mobile-drawer { display:none; }
.drawer-backdrop { position:fixed; z-index:70; inset:0; background:rgba(48,52,60,.3); opacity:0; transition:opacity 180ms var(--ease); backdrop-filter:blur(3px); }.drawer-backdrop.is-visible { opacity:1; }
.modal { width:min(520px,calc(100% - 28px)); padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-float); color:var(--text); }.modal::backdrop { background:rgba(48,52,60,.3); backdrop-filter:blur(4px); }.modal[open] { animation:modal-in 240ms var(--spring); }.modal__header { display:flex; justify-content:space-between; gap:20px; }.modal__header h2 { margin:0; }.modal p { color:var(--text-soft); }

.admin-body { background:#f4f7fb; }.admin-shell { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }.admin-sidebar { position:sticky; top:12px; display:flex; flex-direction:column; height:calc(100vh - 24px); padding:18px 14px; margin-left:12px; border:1px solid var(--border); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:inset 0 1px 0 #fff,var(--shadow-card); }.admin-brand { padding:6px 12px 18px; }.admin-brand > span:last-child small { display:block; color:var(--text-faint); font-size:10px; letter-spacing:.08em; }.admin-nav { display:grid; gap:6px; padding:8px; border:0; border-radius:22px; background:transparent; box-shadow:none; }.admin-nav a { display:flex; align-items:center; gap:12px; min-height:46px; padding:8px 12px; border:1px solid transparent; border-radius:16px; color:var(--text-soft); text-decoration:none; transition:transform 160ms var(--spring),border-color 160ms var(--ease),background 160ms var(--ease),box-shadow 160ms var(--ease); }.admin-nav a .icon { color:var(--text-faint); }.admin-nav a:hover { transform:translateX(2px); border-color:#eff0f3; background:#fff; color:var(--text); }.admin-nav a.is-current { border-color:#eaebef; background:#fff; box-shadow:0 5px 13px rgba(62,72,86,.07); color:var(--text); }.admin-nav a.is-current .icon { color:#7d8793; }.nav-count { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; margin-left:auto; border-radius:var(--radius-pill); background:var(--pink-100); color:var(--pink-700); font-size:10px; font-style:normal; font-weight:900; }.admin-profile { display:flex; align-items:center; gap:10px; padding:14px 8px 2px; margin-top:auto; border-top:1px solid var(--border); }.admin-profile strong,.admin-profile small { display:block; }.admin-profile small { color:var(--text-faint); font-size:11px; }.admin-profile .icon-button { margin-left:auto; }
.admin-workspace { min-width:0; }.admin-topbar { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:32px clamp(24px,3.5vw,48px) 0; }.admin-topbar h1 { margin:0; font-size:30px; }.admin-topbar .eyebrow { margin-bottom:4px; color:var(--text-faint); }.admin-topbar__actions { display:flex; gap:10px; }.admin-menu-button { display:none; }.admin-main { padding:20px clamp(24px,3.5vw,48px) 48px; }.demo-banner { padding:12px 16px; margin-bottom:16px; border:1px solid #d7e4ed; border-radius:14px; background:var(--yellow-100); color:var(--yellow-700); font-size:13px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.stat-card { display:flex; align-items:center; gap:16px; min-height:130px; padding:22px; }.stat-card small,.stat-card strong,.stat-card em { display:block; }.stat-card small { color:var(--text-faint); }.stat-card strong { font-size:30px; line-height:1.25; }.stat-card em { color:var(--mint-700); font-size:11px; font-style:normal; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; margin-top:16px; align-items:start; }.admin-panel { min-width:0; padding:24px; border-radius:20px; }.admin-panel--wide { grid-column:1; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.panel-heading h2 { margin:0; font-size:19px; }.panel-heading p { margin:3px 0 0; color:var(--text-faint); font-size:12px; }
.data-list { min-width:0; }.data-row { display:grid; grid-template-columns:minmax(260px,2fr) 90px 85px 52px; gap:10px; align-items:center; min-height:64px; border-top:1px solid var(--border); font-size:12px; }.data-row--head { min-height:38px; border:0; color:var(--text-faint); }.data-row > span:first-child { display:grid; grid-template-columns:auto 1fr; column-gap:9px; min-width:0; }.data-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.data-row small { grid-column:2; color:var(--text-faint); }.row-dot { width:9px; height:9px; border-radius:50%; grid-row:1/3; }.tone-blue { background:var(--blue-300); }.tone-pink { background:var(--pink-400); }.tone-purple { background:#d3dee7; }.data-row button { min-width:44px; min-height:44px; border-radius:12px; background:var(--surface-soft); color:var(--blue-600); cursor:pointer; }
.task-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; min-height:68px; padding:10px 0; border-top:1px solid var(--border); background:transparent; text-align:left; cursor:pointer; }.task-row strong,.task-row small { display:block; }.task-row small { color:var(--text-faint); }.task-row > .icon { color:var(--text-faint); }.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.system-grid div { padding:16px; border-radius:15px; background:var(--surface-soft); }.system-grid span,.system-grid strong,.system-grid small { display:block; }.system-grid span,.system-grid small { color:var(--text-faint); font-size:11px; }.system-grid strong { margin:4px 0; }.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.quick-grid a { display:flex; align-items:center; gap:8px; min-height:50px; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); text-decoration:none; }.quick-grid a:hover { border-color:var(--blue-300); background:var(--blue-100); }

.button--small { min-height:40px; padding-inline:16px; font-size:12px; }.admin-profile form { margin-left:auto; }.admin-profile form .icon-button { margin:0; }.field-error,.form-error { color:var(--danger-700)!important; }.form-error { margin:0; padding:10px 12px; border-radius:12px; background:var(--danger-100); font-size:13px; font-weight:800; }.check-field { display:flex; align-items:center; gap:10px; min-height:44px; font-size:13px; font-weight:700; cursor:pointer; }.check-field input { width:18px; height:18px; accent-color:var(--accent-soft); }
.auth-body { min-height:100vh; padding:0!important; }.auth-shell { display:grid; place-items:center; min-height:100vh; padding:90px 20px 40px; }.auth-brand { position:absolute; top:24px; left:clamp(20px,5vw,70px); }.auth-brand > span:last-child small { display:block; color:var(--text-faint); font-size:11px; }.auth-card { width:min(480px,100%); padding:clamp(28px,5vw,48px); }.auth-card h1 { margin:6px 0 10px; font-size:clamp(30px,5vw,42px); }.auth-card > p { margin-bottom:26px; color:var(--text-soft); }.auth-icon { width:58px; height:58px; margin-bottom:20px; border-radius:20px; }.auth-icon .icon { width:26px; height:26px; }.auth-form { grid-template-columns:1fr; }.auth-form .button { width:100%; }
.compact-empty { display:flex; align-items:center; gap:14px; min-height:100px; padding:18px; border:1px dashed var(--border-strong); border-radius:16px; background:var(--surface-soft); }.compact-empty strong,.compact-empty small { display:block; }.compact-empty small { margin-top:3px; color:var(--text-faint); }.status-stack { display:grid; gap:10px; }.status-stack div { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:8px 12px; border-radius:12px; background:var(--surface-soft); }.status-stack span { color:var(--text-faint); font-size:12px; }.status-stack strong { font-size:13px; }
.management-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.6fr); gap:16px; align-items:start; }.upload-panel { position:sticky; top:20px; }.file-drop { position:relative; display:grid; place-items:center; min-height:190px; padding:22px; border:2px dashed var(--blue-300); border-radius:18px; background:var(--canvas-blue); text-align:center; cursor:pointer; }.file-drop > .icon { width:36px; height:36px; margin-bottom:8px; color:var(--blue-600); }.file-drop strong,.file-drop small { display:block; }.file-drop input { width:100%; margin-top:14px; padding:8px; border:1px solid var(--border); border-radius:12px; background:#fff; }.media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.media-card { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface-soft); }.media-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--blue-100); }.media-card > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:14px; }.media-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.media-card small { grid-column:1; color:var(--text-faint); }.media-card form { grid-column:2; grid-row:1/3; }
.log-grid { display:grid; gap:16px; }.table-scroll { overflow-x:auto; }.admin-table { width:100%; border-collapse:collapse; font-size:12px; }.admin-table th,.admin-table td { padding:13px 12px; border-top:1px solid var(--border); text-align:left; white-space:nowrap; }.admin-table th { border-top:0; color:var(--text-faint); font-size:11px; }.admin-table code { padding:4px 7px; border-radius:7px; background:var(--blue-100); color:var(--blue-600); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes skeleton { to { background-position:-200% 0; } }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes capsule-nav-arrive { 0% { opacity:0; filter:blur(9px); transform:translate3d(0,-24px,0) scale(.965); } 68% { opacity:1; filter:blur(0); transform:translate3d(0,2px,0) scale(1.006); } 100% { opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); } }

@media (max-width:1100px) {
  .home-hero { grid-template-columns:1fr 320px; }.hero-card { grid-template-columns:1fr; }.hero-card__copy { max-width:calc(100% - 105px); }.avatar-planet { position:absolute; right:5%; bottom:7%; width:145px; opacity:.78; }
  .post-grid { grid-template-columns:1fr 1fr; }.post-grid .post-card:first-child { grid-column:1/-1; }.friend-grid { grid-template-columns:1fr 1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }.dashboard-grid { grid-template-columns:1fr; }.admin-panel--wide { grid-column:auto; }
  .management-grid { grid-template-columns:1fr; }.upload-panel { position:static; }
}

@media (max-width:860px) {
  body:not(.admin-body) { padding-bottom:76px; }.site-header,.page-shell,.site-footer { width:min(100% - 40px,760px); }.site-nav { grid-template-columns:1fr auto; border-radius:20px; }.site-nav__links { display:none; }
  .home-hero { grid-template-columns:1fr 1fr; }.hero-card { grid-column:1/-1; grid-row:auto; }.now-card,.note-card { min-height:220px; }
  .blog-layout { grid-template-columns:1fr; }.filter-card { display:none; }.filter-button { display:inline-flex; }
  .article-layout { grid-template-columns:1fr; }.toc { position:static; grid-row:1; }.about-layout { grid-template-columns:1fr; }.profile-card { position:static; max-width:480px; margin-inline:auto; }.about-copy { padding-top:0; }
  .application { grid-template-columns:1fr; }.component-section { grid-template-columns:1fr; }.component-section .component-demo + .component-demo { grid-column:auto; }
  .mobile-bottom-nav { position:fixed; z-index:60; right:12px; bottom:max(10px,env(safe-area-inset-bottom)); left:12px; display:grid; grid-template-columns:repeat(5,1fr); padding:6px; border:1px solid rgba(240, 243, 247, .92); border-radius:22px; background:rgba(255,255,255,.95); box-shadow:var(--shadow-float); backdrop-filter:blur(18px); }.mobile-bottom-nav a,.mobile-bottom-nav button { display:grid; place-items:center; min-height:52px; border-radius:16px; background:transparent; color:var(--text-faint); text-decoration:none; cursor:pointer; }.mobile-bottom-nav small { font-size:10px; }.mobile-bottom-nav .is-current { background:var(--blue-100); color:var(--blue-600); }
  .mobile-drawer { position:fixed; z-index:80; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); left:12px; display:flex; flex-direction:column; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); padding:12px 20px calc(24px + env(safe-area-inset-bottom)); overflow:hidden; border:1px solid var(--border); border-radius:30px; background:var(--surface); box-shadow:var(--shadow-float); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(calc(100% + 28px)) scale(.985); transition:opacity 220ms var(--ease),transform 360ms var(--spring),visibility 0s linear 360ms; }.mobile-drawer.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }.drawer__handle { flex:0 0 auto; width:42px; height:5px; margin:0 auto 18px; border-radius:var(--radius-pill); background:var(--border-strong); }.drawer__header { display:flex; flex:0 0 auto; align-items:start; justify-content:space-between; gap:18px; }.drawer__header h2 { margin:0; }.drawer__links { display:grid; gap:8px; min-height:0; padding:2px 3px 4px; margin-top:18px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }.drawer__links a { display:flex; align-items:center; gap:14px; min-height:68px; padding:10px 12px; border:1px solid transparent; border-radius:18px; background:var(--surface-soft); text-decoration:none; }.drawer__links a:hover,.drawer__links a:focus-visible { border-color:var(--blue-300); background:var(--blue-100); }.drawer__links a > .icon { color:var(--blue-600); }.drawer__links strong,.drawer__links small { display:block; }.drawer__links small { color:var(--text-faint); }
  .site-footer { display:grid; grid-template-columns:1fr; }.site-footer > small { grid-column:auto; }
  .admin-shell { display:block; }.admin-sidebar { position:fixed; z-index:90; inset:0 auto 0 0; width:min(290px,86vw); height:100vh; margin:0; border-radius:0 28px 28px 0; transform:translateX(-105%); transition:transform 280ms var(--ease); box-shadow:var(--shadow-float); }.admin-sidebar.is-open { transform:none; }.admin-menu-button { display:inline-grid; }.admin-topbar { display:grid; grid-template-columns:auto 1fr auto; }.admin-topbar .eyebrow { display:none; }.admin-main { padding-top:16px; }.data-list { overflow-x:auto; }.data-row { min-width:680px; }
  .admin-body .mobile-bottom-nav { display:none; }
}

@media (max-width:620px) {
  .site-header,.page-shell,.site-footer { width:calc(100% - 28px); }.site-header { position:relative; top:auto; margin-top:14px; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:none; }.site-header.is-nav-arriving .site-nav { animation:none; }.site-nav { min-height:58px; padding:6px 7px 6px 12px; }.site-brand .brand-mark { width:36px; height:36px; }
  .page-shell { padding-top:34px; }.home-hero { grid-template-columns:1fr; }.hero-card { padding:34px 24px 138px; border-radius:26px; }.hero-card__copy { max-width:none; }.hero-card h1 { font-size:36px; }.hero-card p { font-size:16px; }.avatar-planet { right:28px; bottom:-24px; width:145px; font-size:54px; }.now-card,.note-card { min-height:auto; }.note-card { transform:none; }
  .section-heading { align-items:start; }.section-heading .text-link { white-space:nowrap; }.post-grid,.corner-grid { grid-template-columns:1fr; }.post-grid .post-card:first-child { grid-column:auto; }.post-card__cover { min-height:165px; }
  .page-hero { text-align:left; }.page-hero h1 { font-size:38px; }.search-box { margin-inline:0; }.search-box kbd { display:none; }.list-toolbar { flex-wrap:wrap; }.list-toolbar h2 { width:100%; }.list-toolbar label { margin-left:auto; }.list-post { grid-template-columns:1fr; padding:13px; }.list-post__cover { min-height:160px; }.list-post__copy { padding:8px; }.list-post h2 { font-size:21px; }
  .article-header { text-align:left; }.article-header h1 { font-size:35px; }.author-line { justify-content:flex-start; }.article { font-size:16px; }.article .lead { font-size:18px; }.article h2 { font-size:24px; }.palette-demo i { width:53px; height:53px; border-radius:18px 30px 20px 28px; }
  .interest-grid { grid-template-columns:1fr; }.about-copy h2 { font-size:35px; }.timeline::before { left:8px; }.timeline article { grid-template-columns:24px 1fr; gap:12px; }.timeline time { grid-column:2; padding:0; }.timeline article > i { grid-column:1; grid-row:1/3; margin-top:7px; }.timeline article .card { grid-column:2; }
  .friend-grid { grid-template-columns:1fr; }.application { padding:26px 20px; }.form-grid { grid-template-columns:1fr; }.field--wide { grid-column:1; }.component-section { padding:22px; }.skeleton-grid { grid-template-columns:1fr; }
  .admin-topbar { grid-template-columns:auto 1fr; padding:20px 14px 0; }.admin-topbar__actions { grid-column:1/-1; }.admin-topbar__actions .button { flex:1; }.admin-main { padding:14px; }.stat-grid { gap:10px; }.stat-card { display:grid; gap:8px; min-height:145px; padding:17px; }.stat-card strong { font-size:25px; }.admin-panel { padding:18px; }.system-grid { grid-template-columns:1fr; }
  .media-grid { grid-template-columns:1fr; }.auth-shell { align-items:start; padding-top:110px; }.auth-brand { top:18px; left:18px; }
}

html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
html.page-hidden * { animation-play-state:paused!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Stage 5: blog publishing and reading */
.filter-group a { display:flex; justify-content:space-between; align-items:center; min-height:42px; padding:8px 12px; border-radius:12px; color:var(--text-soft); text-decoration:none; }
.filter-group a:hover,.filter-group a.is-selected { background:var(--blue-100); color:var(--text); }
.tag-cloud a { display:inline-flex; align-items:center; min-height:34px; padding:5px 11px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-soft); text-decoration:none; }
.tag-cloud a:hover,.tag-cloud a.is-selected { border-color:var(--blue-300); background:var(--blue-100); color:var(--blue-600); }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; padding:24px 0; color:var(--text-faint); }
.reading-progress { position:fixed; z-index:65; top:0; right:0; left:0; height:4px; overflow:hidden; background:rgba(238, 242, 247, .64); box-shadow:0 1px 0 rgba(255,255,255,.7); }
.reading-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--progress-fill); will-change:transform; }
.toc-progress { display:grid; gap:8px; padding-top:15px; margin-top:10px; border-top:1px dashed var(--border-strong); }.toc-progress > div { display:flex; justify-content:space-between; gap:10px; }.toc-progress output { color:var(--blue-600); font-size:12px; font-weight:900; }.toc-progress__track { display:block; height:7px; overflow:hidden; border-radius:var(--radius-pill); background:var(--border); }.toc-progress__track i { display:block; width:100%; height:100%; border-radius:inherit; transform:scaleX(0); transform-origin:left; background:var(--progress-fill); will-change:transform; }.toc-progress > small { font-size:11px; }
.preview-banner { padding:13px 18px; margin-bottom:30px; border:1px solid #cedde8; border-radius:16px; background:var(--yellow-100); color:var(--yellow-700); text-align:center; }
.article-tags { justify-content:center; margin-top:20px; }
.article-content img { display:block; max-width:100%; height:auto; margin:32px auto; border-radius:20px; box-shadow:var(--shadow-sm); cursor:zoom-in; }
.article-content pre { overflow-x:auto; padding:20px; border-radius:17px; background:#263142; color:#edf5ff; line-height:1.6; }
.article-content code { padding:.12em .35em; border-radius:6px; background:var(--blue-100); font-size:.9em; }
.article-content pre code { padding:0; background:transparent; }
.codehilite .k,.codehilite .kn,.codehilite .kd { color:#bcd2e3; }.codehilite .s,.codehilite .s1,.codehilite .s2 { color:#c3d1db; }.codehilite .nf,.codehilite .nc { color:#9ed2ff; }.codehilite .c1,.codehilite .cm { color:#96a5b8; font-style:italic; }.codehilite .mi,.codehilite .mf { color:#d4e3ee; }
.article-content table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; }
.article-content th,.article-content td { padding:10px 14px; border:1px solid var(--border); text-align:left; }
.article-content .admonition { padding:18px 20px; margin:28px 0; border:1px solid #e3effb; border-radius:18px; background:var(--canvas-blue); }
.article-content .admonition-title { margin-top:0; color:var(--blue-600); font-weight:900; }
.toc .toc { position:static; padding:0; border:0; box-shadow:none; }
.toc ul { display:grid; gap:4px; padding-left:10px; list-style:none; }
.article-neighbors { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1008px; margin:28px auto 0; }
.article-neighbors a { display:grid; gap:7px; padding:22px; text-decoration:none; }
.article-neighbors a:last-child { text-align:right; }
.article-neighbors small { color:var(--text-faint); }
.image-lightbox { width:min(1100px,94vw); padding:48px 18px 18px; border:0; border-radius:24px; background:#fdfefe; box-shadow:var(--shadow-float); }
.image-lightbox::backdrop { background:rgba(26,34,47,.72); backdrop-filter:blur(5px); }
.image-lightbox img { display:block; max-width:100%; max-height:82vh; margin:auto; border-radius:15px; }
.image-lightbox button { position:absolute; top:8px; right:10px; width:40px; height:40px; border-radius:50%; background:var(--surface-soft); font-size:25px; cursor:pointer; }
.page-shell--narrow { max-width:920px; }
.archive-list { display:grid; gap:18px; }
.archive-list section { padding:24px; }
.archive-list h2 { margin-bottom:12px; }
.archive-list h2 small { color:var(--text-faint); }
.archive-list a { display:grid; grid-template-columns:70px 1fr auto; gap:16px; align-items:center; min-height:54px; border-top:1px solid var(--border); text-decoration:none; }
.archive-list time,.archive-list span { color:var(--text-faint); font-size:12px; }

.admin-section { padding:24px; }
.admin-post-list,.version-list,.taxonomy-items { display:grid; }
.admin-post-row,.version-list article,.taxonomy-items > div { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:92px; padding:15px 0; border-top:1px solid var(--border); }
.admin-post-row h3 { margin:8px 0 4px; }
.status-pill { display:inline-flex; padding:4px 9px; border-radius:99px; font-size:11px; font-weight:900; }
.status-pill--draft { background:var(--surface-soft); color:var(--text-faint); }.status-pill--published { background:var(--state-success-100); color:var(--state-success-700); }.status-pill--scheduled { background:var(--blue-100); color:var(--blue-600); }
.post-editor { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.editor-main { padding:24px; }
.editor-main > .field:first-child input { font-size:24px; font-weight:900; }
.editor-toolbar { display:flex; align-items:center; gap:12px; min-height:54px; margin-top:15px; border-top:1px solid var(--border); }
.editor-toolbar span { color:var(--text-faint); font-size:12px; }
.editor-textarea { width:100%; min-height:580px; padding:22px; border:1px solid var(--border); border-radius:17px; background:#fbfcfe; font:15px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }
.editor-sidebar { position:sticky; top:18px; display:grid; gap:14px; }
.editor-sidebar .card { padding:20px; }.editor-sidebar h2 { margin:0 0 14px; font-size:17px; }
.editor-sidebar .field { margin-bottom:14px; }.button--wide { width:100%; }
.check-row { display:flex; align-items:center; gap:9px; min-height:38px; font-size:13px; font-weight:800; }
.check-row input { width:18px; height:18px; accent-color:var(--accent-soft); }
.check-row span { display:grid; gap:2px; }.check-row small { color:var(--text-faint); font-weight:600; }
.notice { padding:14px 16px; margin:16px 0; border:1px solid var(--border); border-radius:15px; background:var(--surface-soft); color:var(--text-soft); }.notice strong { margin-right:5px; color:var(--text); }.notice--success { border-color:#b9dfcf; background:var(--state-success-100); }.notice--warning { border-color:#ead598; background:var(--state-warning-100); }.notice--error { border-color:#efbec9; background:var(--danger-100); }
.admin-section pre { overflow-x:auto; padding:14px; border-radius:14px; background:#263142; color:#edf5ff; }
.markdown-help { margin-top:14px; color:var(--text-soft); font-size:13px; }.markdown-help summary { cursor:pointer; font-weight:800; }
.autosave-status { align-self:center; color:var(--text-faint); font-size:12px; }
.taxonomy-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
.admin-form { position:sticky; top:18px; padding:24px; }.admin-form .field { margin-bottom:14px; }
.taxonomy-items small,.version-list small { display:block; margin-top:4px; color:var(--text-faint); }
.text-button { min-width:44px; min-height:44px; color:var(--danger-700); cursor:pointer; }
@media (max-width:1000px) { .post-editor,.taxonomy-layout { grid-template-columns:1fr; }.editor-sidebar,.admin-form { position:static; }.editor-sidebar { grid-template-columns:repeat(2,1fr); }.editor-sidebar > .button { grid-column:1/-1; } }
@media (max-width:620px) { .search-box { grid-template-columns:auto minmax(0,1fr); border-radius:20px; }.search-box .button { grid-column:1/-1; }.article-neighbors,.editor-sidebar { grid-template-columns:1fr; }.article-neighbors a:last-child { text-align:left; }.archive-list a { grid-template-columns:54px 1fr; }.archive-list span { display:none; }.admin-post-row,.version-list article { align-items:flex-start; flex-direction:column; }.admin-post-row .button-row { flex-wrap:wrap; }.editor-textarea { min-height:450px; }.article-tags { justify-content:flex-start; } }

/* Stage 6: configurable personal content */
.avatar-planet img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }.button-row--center { justify-content:center; margin-top:24px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.project-card { display:grid; gap:10px; padding:15px; text-decoration:none; }.project-card img,.project-card__art { display:grid; place-items:center; width:100%; aspect-ratio:16/10; border-radius:18px; object-fit:cover; }.project-card__art .icon { width:54px; height:54px; color:#fff; }.project-card strong { padding:7px 8px 0; font-size:21px; }.project-card p,.project-card small { padding-inline:8px; color:var(--text-soft); }.project-hero-image { display:block; width:min(1008px,100%); max-height:620px; margin:0 auto 28px; border-radius:26px; object-fit:cover; box-shadow:var(--shadow-md); }
.moment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.moment-card { display:grid; gap:12px; padding:24px; text-decoration:none; }.moment-card > span,.moment-card time { color:var(--text-faint); font-size:12px; }.moment-card .article-content p { margin:0; color:var(--text); }.moment-timeline { display:grid; gap:18px; }.moment-entry { padding:clamp(24px,4vw,38px); }.moment-entry .article-content { margin:22px 0; }.moment-entry--detail { margin-top:40px; }.home-about { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:32px; text-decoration:none; }.home-about h2 { margin:0 0 8px; }.home-about p { color:var(--text-soft); }.home-about > .icon { color:var(--blue-600); }
.social-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }.social-list a { padding:7px 11px; border-radius:99px; background:var(--surface-soft); color:var(--blue-600); text-decoration:none; }.profile-card > .button + .button { margin-top:9px; }.profile-card img.avatar { object-fit:cover; }
.skill-list { display:grid; gap:15px; margin:20px 0 38px; }.skill-list > div { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; }.skill-list span strong,.skill-list span small { display:block; }.skill-list span small { color:var(--text-faint); }.skill-list i { height:9px; overflow:hidden; border-radius:99px; background:var(--border); }.skill-list b { display:block; width:var(--skill-level); height:100%; border-radius:inherit; background:var(--progress-fill); }.goal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.goal-grid article { padding:20px; }.goal-grid p { margin-top:7px; color:var(--text-soft); }
.content-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; margin-bottom:18px; }.admin-form--wide { position:static; }.content-admin-grid .admin-form--wide { grid-column:1/-1; }.profile-items { margin-top:18px; }.profile-items h3 { margin-top:26px; }.module-config-list { display:grid; }.module-config-list form { display:grid; grid-template-columns:90px minmax(180px,1fr) 75px 75px 100px 85px auto; gap:10px; align-items:center; padding:13px 0; border-top:1px solid var(--border); }.module-config-list input,.module-config-list select { width:100%; min-height:42px; padding:7px 10px; border:1px solid var(--border); border-radius:11px; background:#fff; }
.navigation-config-list > div { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--border); }.navigation-config-list > div > form:first-child { display:grid; grid-template-columns:120px minmax(160px,1fr) 90px 70px auto auto auto; gap:8px; align-items:center; }.navigation-config-list input,.navigation-config-list select { min-height:42px; min-width:0; padding:7px 9px; border:1px solid var(--border); border-radius:11px; background:#fff; }
@media (max-width:1000px) { .project-grid,.moment-grid { grid-template-columns:repeat(2,1fr); }.module-config-list form { grid-template-columns:90px 1fr 75px 75px; }.module-config-list form select,.module-config-list form label,.module-config-list form button { grid-row:2; } }
@media (max-width:700px) { .project-grid,.moment-grid,.goal-grid,.content-admin-grid { grid-template-columns:1fr; }.project-card strong { font-size:19px; }.home-about { grid-template-columns:auto 1fr; }.home-about > .icon { display:none; }.skill-list > div { grid-template-columns:110px 1fr; }.module-config-list form { grid-template-columns:1fr 1fr; padding:18px 0; }.module-config-list form strong,.module-config-list form input[name=title] { grid-column:1/-1; }.module-config-list form select,.module-config-list form label,.module-config-list form button { grid-row:auto; }.module-config-list form button { grid-column:1/-1; } }
@media (max-width:900px) { .navigation-config-list > div,.navigation-config-list > div > form:first-child { grid-template-columns:1fr 1fr; }.navigation-config-list > div > form:first-child input[name=url] { grid-column:1/-1; }.navigation-config-list > div > form:last-child { grid-column:1/-1; } }

/* Stage 7: friends, albums and moderated interactions */
.interaction-page { --interaction-gap:18px; }.friend-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; min-height:145px; padding:20px; text-decoration:none; }.friend-card__copy { display:grid; gap:6px; }.friend-card__copy strong { font-size:18px; }.friend-card__copy small { color:var(--text-soft); line-height:1.55; }.friend-card__copy .badge { justify-self:start; }.friend-status { position:absolute; right:15px; bottom:12px; display:flex; align-items:center; gap:5px; color:var(--text-faint); font-size:10px; }.friend-status i { width:7px; height:7px; border-radius:50%; background:var(--border-strong); }.friend-status--ok i { background:#63c991; box-shadow:0 0 0 4px #dff7e8; }.friend-status--error i { background:#e99aaa; }.status-lookup { display:grid; gap:8px; margin-top:22px; }.status-lookup input { min-width:0; }.application-success { padding:14px; margin-top:18px; border-radius:16px; background:var(--state-success-100); }.application-success code { overflow-wrap:anywhere; }.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }.narrow-shell { width:min(680px,calc(100% - 32px)); margin:50px auto; }.status-card { padding:clamp(25px,6vw,48px); }.status-card dl div { display:grid; grid-template-columns:100px 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--border); }.status-card dt { color:var(--text-faint); }.status-card dd { margin:0; overflow-wrap:anywhere; }
.album-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.album-card { overflow:hidden; text-decoration:none; }.album-card img,.album-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:4/3; object-fit:cover; background:linear-gradient(145deg,var(--blue-100),var(--pink-100)); font-size:50px; }.album-card > span:last-child { display:grid; gap:6px; padding:17px; }.album-card strong { font-size:20px; }.album-card small { color:var(--text-soft); }.photo-waterfall { column-count:3; column-gap:16px; }.photo-tile { position:relative; width:100%; padding:0; margin:0 0 16px; overflow:hidden; break-inside:avoid; border:0; border-radius:20px; background:var(--surface-soft); box-shadow:var(--shadow-sm); cursor:zoom-in; }.photo-tile img { display:block; width:100%; height:auto; }.photo-tile span { position:absolute; right:8px; bottom:8px; left:8px; padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.9); color:var(--text); font-size:12px; text-align:left; backdrop-filter:blur(10px); }
.guestbook-layout,.comments-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }.guestbook-list,.comment-list,.guestbook-form,.comment-form { min-width:0; }.guestbook-list,.comment-list { display:grid; gap:14px; }.guestbook-form,.comment-form { position:sticky; top:20px; padding:24px; }.message-card,.comment-card { min-width:0; padding:22px; }.message-card header,.comment-card__meta { display:flex; align-items:center; gap:11px; }.message-card header > span:nth-child(2),.comment-card__meta > span:nth-child(2) { display:grid; min-width:0; overflow-wrap:anywhere; }.message-card time,.comment-card small { color:var(--text-faint); font-size:11px; }.message-card > p,.comment-card > p { overflow-wrap:anywhere; white-space:normal; line-height:1.7; }.message-card blockquote { padding:14px 16px; margin:15px 0 0; border:0; border-radius:14px; background:var(--blue-100); }.message-card blockquote p { margin:5px 0 0; }.comment-actions { display:flex; gap:10px; align-items:center; }.comment-actions form { margin:0; }.comment-actions button { padding:5px 8px; border-radius:9px; color:var(--text-faint); font-size:11px; cursor:pointer; }.comment-actions button:hover { background:var(--blue-100); color:var(--blue-600); }.comment-reply { padding:14px; margin-top:12px; border-radius:14px; background:var(--surface-soft); }.comment-reply p { margin:6px 0; }.comment-form > .field { margin-bottom:12px; }
.admin-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:18px; align-items:start; }.form-stack { display:grid; gap:10px; }.plain-list,.notification-list { padding:0; list-style:none; }.plain-list li,.notification-list li { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--border); }.notification-list li { flex-direction:column; }.notification-list .is-unread { padding-inline:10px; border-radius:11px; background:var(--blue-100); }.moderation-list > article { padding:18px 0; border-top:1px solid var(--border); }.moderation-list header { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }.moderation-list header small { color:var(--text-faint); }.moderation-list .button-row { flex-wrap:wrap; }.inline-reply { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:11px; }.upload-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }.album-editor .media-card > form { padding:10px; }
.status-pill--pending { background:var(--state-warning-100); color:var(--state-warning-700); }.status-pill--approved { background:var(--state-success-100); color:var(--state-success-700); }.status-pill--rejected,.status-pill--spam,.status-pill--blocked,.status-pill--disabled { background:var(--danger-100); color:var(--danger-700); }
@media (max-width:900px) { .album-grid { grid-template-columns:repeat(2,1fr); }.photo-waterfall { column-count:2; }.guestbook-layout,.comments-layout,.admin-grid { grid-template-columns:minmax(0,1fr); }.guestbook-form,.comment-form { position:static; } }
@media (max-width:560px) { .album-grid { grid-template-columns:1fr; }.photo-waterfall { column-count:1; }.status-card dl div { grid-template-columns:1fr; gap:4px; }.inline-reply { grid-template-columns:1fr; } }

/* Global interface, moderation and image preview */
.admin-menu--compact .admin-nav-group__toggle small,.admin-menu--compact .admin-nav-group__items a small { display:none; }
.admin-menu--compact .admin-nav-group__toggle { min-height:48px; }
.admin-menu--compact .admin-nav .admin-nav-group__items a { min-height:40px; }
.interface-settings-grid,.system-about-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:18px; align-items:start; }
.font-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.font-choice { position:relative; display:grid; gap:10px; min-height:128px; padding:18px; overflow:hidden; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,#fff,#f6f9fc); cursor:pointer; transition:transform 220ms var(--spring),border-color 180ms var(--ease),box-shadow 220ms var(--ease); }
.font-choice:hover { transform:translateY(-3px); border-color:var(--blue-300); box-shadow:var(--shadow-sm); }
.font-choice:has(input:checked) { border-color:#d5e8f6; background:linear-gradient(145deg,#fff,#eaf6ff); box-shadow:0 12px 28px rgba(120,165,199,.16); }
.font-choice input { position:absolute; top:14px; right:14px; accent-color:#bdd8eb; }
.font-choice__sample { display:grid; gap:4px; align-content:center; min-height:58px; }
.font-choice__sample strong { font-size:20px; }.font-choice__sample small { color:var(--text-faint); }
.font-choice__name { color:var(--text-soft); font-size:12px; font-weight:900; }
.font-choice--cloud-rounded { font-family:ui-rounded,"Microsoft YaHei UI",sans-serif; }.font-choice--candy-soft { font-family:"Segoe UI Variable","Microsoft YaHei UI",sans-serif; }.font-choice--playful-yuan { font-family:"YouYuan","Yuanti SC","Microsoft YaHei UI",sans-serif; }.font-choice--diary-serif { font-family:"Source Han Serif SC","Noto Serif CJK SC",SimSun,serif; }.font-choice--starlight-kaiti { font-family:KaiTi,STKaiti,serif; }.font-choice--neumorphic-clean { font-family:"Segoe UI",Arial,"Microsoft YaHei UI",sans-serif; }
.menu-subtitle-preview { display:grid; gap:8px; padding:16px; margin-bottom:18px; border:1px solid var(--border); border-radius:20px; background:var(--surface-soft); }
.menu-subtitle-preview span { display:grid; padding:10px 12px; border-radius:14px; background:#fff; font-weight:900; }.menu-subtitle-preview small { color:var(--text-faint); font-size:10px; font-weight:600; }.menu-subtitle-preview.is-compact small { display:none; }
.system-version-card { text-align:center; }.system-version-card__mark { display:grid; place-items:center; width:76px; height:76px; margin:10px auto 18px; border-radius:28px; background:linear-gradient(145deg,var(--blue-100),var(--pink-100)); color:var(--blue-600); font-size:30px; box-shadow:var(--shadow-sm); }.system-version-number { display:inline-flex; padding:7px 16px; border-radius:999px; background:var(--blue-100); color:var(--blue-600); }.system-version-card dl { display:grid; gap:8px; margin:24px 0 0; text-align:left; }.system-version-card dl div { display:flex; justify-content:space-between; padding:10px 12px; border-radius:14px; background:var(--surface-soft); }.system-version-card dt { color:var(--text-faint); }.system-version-card dd { margin:0; font-weight:900; }
.name-draft-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.name-draft-grid article { display:flex; align-items:center; gap:12px; min-height:82px; padding:16px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,#fff,#f8fbfd); }.name-draft-grid article span { display:grid; place-items:center; width:38px; height:38px; border-radius:14px; background:var(--pink-100); color:var(--pink-700); }
.moderation-dashboard { display:grid; gap:18px; }.moderation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.moderation-stat { position:relative; display:grid; gap:6px; min-height:108px; padding:18px 20px; overflow:hidden; }.moderation-stat::after { content:""; position:absolute; right:-18px; bottom:-25px; width:78px; height:78px; border-radius:30px; background:var(--stat-color); transform:rotate(18deg); opacity:.72; }.moderation-stat span { color:var(--text-soft); font-size:13px; font-weight:800; }.moderation-stat strong { font-size:31px; line-height:1; }.moderation-stat--blue { --stat-color:var(--blue-100); }.moderation-stat--pink { --stat-color:var(--pink-100); }.moderation-stat--mint { --stat-color:var(--mint-100); }.moderation-stat--yellow { --stat-color:var(--yellow-100); }
.moderation-filterbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:12px; }.moderation-filterbar > div { display:flex; flex-wrap:wrap; gap:5px; }.moderation-filterbar a { padding:8px 13px; border-radius:999px; color:var(--text-soft); font-size:12px; font-weight:900; text-decoration:none; transition:background 160ms var(--ease),transform 160ms var(--spring); }.moderation-filterbar a:hover { transform:translateY(-1px); background:var(--surface-soft); }.moderation-filterbar a.is-active { background:var(--blue-100); color:var(--blue-600); }
.moderation-section { padding:clamp(18px,3vw,28px); }.moderation-card-list { display:grid; gap:14px; }.moderation-card { display:grid; gap:14px; padding:20px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,#fff,#fbfcfe); transition:border-color 180ms var(--ease),box-shadow 220ms var(--ease),transform 220ms var(--spring); }.moderation-card:hover { transform:translateY(-2px); border-color:#e1ecf4; box-shadow:var(--shadow-sm); }.moderation-card header { display:flex; align-items:center; justify-content:space-between; gap:10px; }.moderation-card header > div { display:flex; align-items:center; gap:8px; }.moderation-card header strong { font-size:16px; }.moderation-card__meta { display:flex; flex-wrap:wrap; gap:7px 12px; color:var(--text-faint); font-size:12px; }.moderation-card__content { margin:0; padding:15px 17px; border-radius:17px; background:var(--surface-soft); font-size:15px; line-height:1.8; }.moderation-card__actions { display:flex; flex-wrap:wrap; gap:8px; }.moderation-reply { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; padding-top:2px; }.moderation-reply textarea { min-height:76px; }.moderation-notifications time { color:var(--text-faint); font-size:11px; }
.media-card__preview,.album-card__preview { width:100%; padding:0; border:0; cursor:zoom-in; }.album-card__preview { display:block; overflow:hidden; background:var(--surface-soft); }.album-card__content { display:grid; gap:6px; padding:17px; text-decoration:none; }.album-card__content strong { font-size:20px; }.album-card__content small { color:var(--text-soft); }
.global-image-lightbox { opacity:0; transform:translateY(18px) scale(.94); transition:opacity 240ms var(--ease),transform 420ms var(--spring),display 420ms allow-discrete,overlay 420ms allow-discrete; }.global-image-lightbox[open] { opacity:1; transform:translateY(0) scale(1); }.global-image-lightbox::backdrop { background:rgba(59,70,85,.4); opacity:0; backdrop-filter:blur(0); transition:opacity 300ms var(--ease),backdrop-filter 420ms var(--ease),display 420ms allow-discrete,overlay 420ms allow-discrete; }.global-image-lightbox[open]::backdrop { opacity:1; backdrop-filter:blur(10px); }.global-image-lightbox figure { display:grid; gap:10px; margin:0; }.global-image-lightbox figcaption { padding:8px 12px; color:var(--text-soft); text-align:center; }
@starting-style { .global-image-lightbox[open] { opacity:0; transform:translateY(18px) scale(.94); }.global-image-lightbox[open]::backdrop { opacity:0; backdrop-filter:blur(0); } }
@media (max-width:900px) { .interface-settings-grid,.system-about-grid { grid-template-columns:1fr; }.moderation-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .font-choice-grid,.name-draft-grid { grid-template-columns:1fr; }.moderation-summary { grid-template-columns:1fr 1fr; }.moderation-card { padding:16px; }.moderation-reply { grid-template-columns:1fr; }.moderation-filterbar { align-items:flex-start; flex-direction:column; } }

/* Stage 8: progressive performance, compatibility and accessible motion */
@view-transition { navigation:none; }
::view-transition-old(root) { animation:page-leave 150ms var(--ease); }
::view-transition-new(root) { animation:page-enter 260ms var(--ease); }
@keyframes page-enter { from { opacity:.15; transform:translateY(5px); } }
@keyframes page-leave { to { opacity:.35; transform:translateY(-3px); } }
@keyframes image-enter { from { opacity:.35; transform:scale(.995); } }

.card--interactive,.button,.icon-button { transform:translateZ(0); }
.card--interactive:active { transform:translateY(1px) scale(.99); }
img.is-loaded { animation:image-enter 240ms var(--ease); }
.project-hero-image { aspect-ratio:16/9; }
.home-module:not(:first-child),.message-card,.comment-card,.moment-entry,.archive-list section { content-visibility:auto; contain-intrinsic-size:auto 360px; }
.site-footer__links button { min-height:44px; padding:0; background:transparent; color:var(--text-soft); text-decoration:underline; cursor:pointer; }

.site-nav,.mobile-bottom-nav,.drawer-backdrop,.modal::backdrop,.image-lightbox::backdrop,.photo-tile span { -webkit-backdrop-filter:var(--compat-blur,blur(16px)); }
.drawer-backdrop,.modal::backdrop { --compat-blur:blur(4px); }.image-lightbox::backdrop { --compat-blur:blur(5px); }.photo-tile span { --compat-blur:blur(10px); }

html[data-performance="low"] { --shadow-md:0 10px 28px rgba(93,119,154,.1); --shadow-float:0 14px 34px rgba(93,119,154,.12); }
html[data-performance="low"] .avatar-planet,html[data-performance="low"] .skeleton-card i,html[data-performance="low"] .skeleton-card span { animation:none; }
html[data-performance="low"] .site-nav,html[data-performance="low"] .mobile-bottom-nav,html[data-performance="low"] .drawer-backdrop,html[data-performance="low"] dialog::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-nav,.mobile-bottom-nav { background:#fff; }
  .drawer-backdrop,dialog::backdrop { background:rgba(36,48,66,.56); }
}
@media (hover:none) { .button:hover,.icon-button:hover,.card--interactive:hover,.card:hover { transform:none; } }
@media (prefers-contrast:more) { :root { --border:#dde3ea; --border-strong:#c6ceda; }.card,.site-nav { border-width:2px; } }
@media (forced-colors:active) { .card,.site-nav,.button,.icon-button { border:1px solid CanvasText; }.online-dot,.friend-status i { forced-color-adjust:none; } }
@media print { .site-header,.site-footer,.mobile-bottom-nav,.mobile-drawer,.reading-progress,.comment-form { display:none!important; }.page-shell { width:100%; padding:0; }.card { box-shadow:none; }.card,[data-reveal] { opacity:1!important; transform:none!important; } }

/* UI 2.0 foundation: soft scrapbook surfaces and consistent control geometry */
:root {
  --canvas:#f5f9fd;
  --canvas-blue:#ebf6ff;
  --surface-soft:#f8fbfe;
  --border:#ecf2f7;
  --border-strong:#dee7f0;
  --blue-50:#f5faff;
  --blue-200:#e3f1fb;
  /* v1.30.0: second-step accents follow the same blue/grey collapse. */
  --pink-200:#dde5ee;
  --mint-200:#eaf0f6;
  --yellow-200:#eff3f7;
  --purple-200:#ebf0f6;
  --radius-control:16px;
  --radius-panel:22px;
  --shadow-card:0 1px 1px rgba(57,78,108,.04),0 12px 30px rgba(91,122,158,.09);
  --shadow-card-hover:0 2px 3px rgba(57,78,108,.05),0 20px 44px rgba(91,122,158,.14);
  --shadow-pressed:0 3px 8px rgba(67,96,132,.12);
}

body {
  background:
    radial-gradient(circle at 7% 2%,rgba(223, 238, 252, .82),transparent 29rem),
    radial-gradient(circle at 96% 17%,rgba(246,201,218,.58),transparent 31rem),
    radial-gradient(circle at 52% 88%,rgba(226,245,234,.56),transparent 34rem),
    linear-gradient(180deg,#f8fbfe 0%,var(--canvas) 46%,#f8fafb 100%);
}

.card {
  border-color:rgba(231, 238, 245, .96);
  background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(250,252,255,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-card);
}
.card--interactive { transition:transform 260ms var(--spring),box-shadow 240ms var(--ease),border-color 200ms var(--ease),background 240ms var(--ease); }
@media (hover:hover) {
  .card--interactive:hover { transform:translateY(-5px); border-color:var(--blue-200); background:linear-gradient(155deg,#fff,var(--blue-50)); box-shadow:inset 0 1px 0 #fff,var(--shadow-card-hover); }
}
.card--interactive:active { transform:translateY(2px) scale(.982); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--shadow-pressed); transition-duration:90ms; }
/* Base card motion: silky hover lift for every card; interactive variants keep
   their stronger effect through higher specificity (:where keeps this at 0,1,0). */
.card { transition:transform 260ms var(--spring),box-shadow 260ms var(--ease),border-color 240ms var(--ease),background 240ms var(--ease),opacity var(--reveal-duration) var(--ease); }
@media (hover:hover) {
  :where(.card):hover { transform:translateY(-3px); border-color:var(--blue-200); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-card-hover); }
}

.button {
  position:relative;
  min-height:46px;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 7px 18px rgba(72,103,139,.12);
  letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:transform 180ms var(--spring),box-shadow 180ms var(--ease),border-color 180ms var(--ease),background 180ms var(--ease),color 180ms var(--ease);
}
.button::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.26),transparent 80%); opacity:0; transform:translateX(-45%); transition:opacity 180ms var(--ease),transform 260ms var(--ease); }
.button:hover::after { opacity:1; transform:translateX(35%); }
.button:hover { transform:translateY(-3px); }
.button:active { transform:translateY(2px) scale(.945); box-shadow:inset 0 2px 5px rgba(54,73,100,.16),0 2px 5px rgba(72,103,139,.09); transition-duration:80ms; }
.button--primary { border-color:#d9eaf7; background:linear-gradient(145deg,#eff8ff,#ebf5fc); color:#43586b; box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 10px 24px rgba(120,165,199,.18); }
.button--primary:hover { border-color:#d1e5f4; background:linear-gradient(145deg,#f5fbff,#e3f2fb); color:#3f5568; box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 15px 30px rgba(120,165,199,.22); }
.button--soft { border-color:var(--border); background:linear-gradient(145deg,#fff,#f5f9fd); color:var(--text-soft); }
.button--soft:hover { border-color:var(--blue-200); background:linear-gradient(145deg,#fff,var(--blue-100)); color:var(--blue-600); }
.button--pink { border-color:#dae3eb; background:linear-gradient(145deg,#f7fafc,var(--pink-100)); color:var(--pink-700); }
.button--mint { border-color:#dce2e7; background:linear-gradient(145deg,#f8fafc,var(--mint-100)); color:var(--mint-700); }
.button--cream { border-color:#cddce8; background:linear-gradient(145deg,#f4f8fb,var(--yellow-100)); color:var(--yellow-700); }
.button--danger { border-color:#efc4c1; background:linear-gradient(145deg,#fff4f3,var(--danger-100)); }
.button--loading { border-color:#d9eaf7; background:linear-gradient(145deg,#edf7ff,#e8f3fc); color:#52687a; }
.button:disabled { box-shadow:none; filter:saturate(.55); }

.icon-button {
  border-color:var(--border);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#f5f9fd);
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(74,102,136,.1);
  transition:transform 180ms var(--spring),background 180ms var(--ease),box-shadow 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease);
}
.icon-button:hover { transform:translateY(-3px) rotate(-1deg); border-color:var(--blue-200); background:linear-gradient(145deg,#fff,var(--blue-100)); color:var(--blue-600); }
.icon-button:active { transform:translateY(2px) scale(.91) rotate(1deg); box-shadow:inset 0 2px 4px rgba(55,77,105,.13); transition-duration:80ms; }

.badge,.status-pill { border:1px solid rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 7px rgba(75,100,130,.06); }
.badge--blue { background:linear-gradient(135deg,#edf7ff,var(--blue-100)); }.badge--pink { background:linear-gradient(135deg,#f6f9fc,var(--pink-100)); }.badge--mint { background:linear-gradient(135deg,#f6f9fb,var(--mint-100)); }.badge--purple { background:linear-gradient(135deg,#f8fafc,var(--purple-100)); }.badge--yellow { background:linear-gradient(135deg,#f4f8fb,var(--yellow-100)); }

.field { gap:8px; }
.field__label { color:#455368; font-weight:900; letter-spacing:.015em; }
.field input,.field textarea,.field select {
  min-height:48px;
  border-color:var(--border);
  border-radius:var(--radius-control);
  background:linear-gradient(160deg,#fff,var(--surface-soft));
  box-shadow:inset 0 1px 2px rgba(57,78,108,.035),0 1px 0 rgba(255,255,255,.9);
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease),background 180ms var(--ease),transform 180ms var(--ease);
}
.field input:hover,.field textarea:hover,.field select:hover { border-color:var(--blue-200); background:#fff; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent-soft); background:#fff; box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(163, 198, 229, .22),inset 0 1px 2px rgba(57,78,108,.03); transform:translateY(-1px); }
.field--error input,.field--error textarea,.field--error select { border-color:#d97873; background:linear-gradient(160deg,#fff,var(--danger-100)); box-shadow:0 0 0 3px rgba(217,120,115,.11); }
.field--error small,.field-error { display:block; padding:7px 10px; border-radius:10px; background:var(--danger-100); }

.check-row,.check-field { padding:7px 9px; border:1px solid transparent; border-radius:13px; transition:background 160ms var(--ease),border-color 160ms var(--ease); }
.check-row:hover,.check-field:hover { border-color:var(--blue-200); background:var(--blue-50); }
.check-row input,.check-field input { width:19px; height:19px; accent-color:var(--accent-soft); }
.check-row input[type="checkbox"],.check-field input[type="checkbox"] { appearance:none; display:grid; flex:0 0 19px; place-content:center; border:1px solid #e0ebf3; border-radius:6px; background:linear-gradient(145deg,#fff,#f1f8fd); box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(91,130,169,.08); cursor:pointer; transition:transform 160ms var(--spring),border-color 160ms var(--ease),background 180ms var(--ease),box-shadow 180ms var(--ease); }
.check-row input[type="checkbox"]::after,.check-field input[type="checkbox"]::after { content:""; width:8px; height:4px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:0; transform:translateY(-1px) rotate(45deg) scale(.45); transition:opacity 130ms var(--ease),transform 180ms var(--spring); }
.check-row input[type="checkbox"]:checked,.check-field input[type="checkbox"]:checked { border-color:#bdd9eb; background:linear-gradient(145deg,#cde6f6,#b5d4e8); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(83,137,175,.18); }
.check-row input[type="checkbox"]:checked::after,.check-field input[type="checkbox"]:checked::after { opacity:1; transform:translateY(-1px) rotate(45deg) scale(1); }
.check-row input[type="checkbox"]:active,.check-field input[type="checkbox"]:active { transform:scale(.86); }
.check-row input[type="checkbox"]:focus-visible,.check-field input[type="checkbox"]:focus-visible { outline:3px solid rgba(187, 217, 238, .3); outline-offset:2px; }

.search-box { border-color:var(--border); background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,254,.96)); box-shadow:inset 0 1px 0 #fff,var(--shadow-card); transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease),transform 180ms var(--ease); }
.search-box:focus-within { border-color:var(--blue-300); box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(163, 198, 229, .18),var(--shadow-card); transform:translateY(-1px); }

.site-nav { border-color:rgba(229, 238, 245, .94); background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,250,254,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 12px 34px rgba(79,111,148,.11); }
.site-nav__links a { border:1px solid transparent; transition:color 180ms var(--ease),background 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--spring); }
.site-nav__links a:hover { transform:translateY(-2px); border-color:rgba(223, 238, 252, .9); }
.site-nav__links a.is-current { border-color:rgba(223, 238, 252, .9); background:linear-gradient(145deg,#f5fbff,var(--blue-100)); color:var(--blue-600); box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(91,130,169,.08); }

.message { border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 18px rgba(75,100,130,.07); }
.message--success { background:var(--state-success-100); }.message--warning { background:var(--state-warning-100); }.message--error { background:var(--danger-100); }
.modal { border-color:var(--border); border-radius:30px; background:linear-gradient(150deg,#fff,#f7fbff); box-shadow:inset 0 1px 0 #fff,var(--shadow-float); }

.admin-section,.admin-panel,.editor-sidebar .card { border-radius:var(--radius-panel); }
.admin-table { border-collapse:separate; border-spacing:0; overflow:hidden; }
.admin-table thead { background:linear-gradient(90deg,var(--blue-50),#fafcfd); }
.admin-table th:first-child { border-top-left-radius:14px; }.admin-table th:last-child { border-top-right-radius:14px; }
.admin-table tbody tr { transition:background 150ms var(--ease); }.admin-table tbody tr:hover { background:var(--blue-50); }
.module-config-list input,.module-config-list select,.navigation-config-list input,.navigation-config-list select,.form-stack input,.form-stack textarea,.inline-reply input,.inline-reply textarea { border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,#fff,var(--surface-soft)); outline:0; }
.module-config-list input:focus,.module-config-list select:focus,.navigation-config-list input:focus,.navigation-config-list select:focus,.form-stack input:focus,.form-stack textarea:focus,.inline-reply input:focus,.inline-reply textarea:focus { border-color:var(--accent-soft); box-shadow:0 0 0 3px rgba(163, 198, 229, .17); }
.file-drop { border-radius:22px; background:linear-gradient(145deg,var(--blue-50),#fafcfd); }
.pagination > span { display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:var(--shadow-xs); }
.table-scroll { border:1px solid var(--border); border-radius:18px; background:#fff; }
.editor-toolbar { min-height:62px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(145deg,var(--blue-50),#fafcfd); }
.markdown-help { padding:12px 14px; border:1px dashed var(--border-strong); border-radius:15px; background:var(--surface-soft); }.markdown-help summary { min-height:36px; padding:6px; border-radius:10px; }.markdown-help[open] summary { color:var(--blue-600); background:var(--blue-100); }
.status-lookup input,.upload-row input[type="file"] { min-height:46px; padding:9px 12px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,#fff,var(--surface-soft)); outline:0; }
.status-lookup input:focus,.upload-row input[type="file"]:focus { border-color:var(--accent-soft); box-shadow:0 0 0 3px rgba(163, 198, 229, .17); }
.comment-actions button,.text-button { border:1px solid transparent; border-radius:11px; background:transparent; transition:background 150ms var(--ease),border-color 150ms var(--ease),transform 100ms var(--ease); }.comment-actions button:hover,.text-button:hover { border-color:var(--blue-200); background:var(--blue-100); }.comment-actions button:active,.text-button:active { transform:scale(.92); }
.media-card { border-radius:20px; box-shadow:var(--shadow-xs); }.media-card img { border-radius:19px 19px 0 0; }

.component-section:nth-of-type(3n+1) { background:linear-gradient(150deg,#fff,var(--blue-50)); }
.component-section:nth-of-type(3n+2) { background:linear-gradient(150deg,#fff,#fafcfd); }
.component-section:nth-of-type(3n) { background:linear-gradient(150deg,#fff,#f7fafc); }

@media (max-width:620px) {
  .button { border-radius:15px; }
  .component-section { border-radius:24px; }
  .reading-progress { height:3px; }
}

/* Home 2.0 and interruptible physical motion */
:root {
  --press-duration:95ms;
  --release-duration:230ms;
  --reveal-duration:420ms;
  --ease-press:cubic-bezier(.4,0,.2,1);
  --ease-release:cubic-bezier(.16,1.35,.32,1);
}

.button:hover,.button.is-pressed,.icon-button:hover,.icon-button.is-pressed,
.card--interactive:hover,.card--interactive.is-pressed,.film-frame:hover,.film-frame.is-pressed,
.moment-note:hover,.moment-note.is-pressed { will-change:transform; }
.button::after { content:""; position:absolute; inset:1px 8px auto; height:42%; border-radius:inherit; background:linear-gradient(rgba(255,255,255,.35),transparent); opacity:.75; pointer-events:none; transition:transform var(--press-duration) var(--ease-press),opacity var(--press-duration) linear; }
.button { position:relative; overflow:hidden; isolation:isolate; }
.button.is-pressed,.button:active { transform:translateY(2px) scale(.945); box-shadow:0 3px 8px rgba(67,92,124,.14),inset 0 2px 4px rgba(56,82,111,.13); transition-duration:var(--press-duration); transition-timing-function:var(--ease-press); }
.button.is-pressed::after,.button:active::after { opacity:.38; transform:translateY(3px); }
.button.is-releasing { animation:control-release var(--release-duration) var(--ease-release); }
.icon-button.is-pressed { transform:translateY(2px) scale(.91); }.icon-button.is-pressed .icon { transform:rotate(-5deg) translateY(1px); }.icon-button .icon { transition:transform var(--release-duration) var(--ease-release); }
.card--interactive.is-pressed,.film-frame.is-pressed,.moment-note.is-pressed { transform:translateY(1px) scale(.982); transition-duration:var(--press-duration); }
@keyframes control-release { 45% { transform:translateY(-1px) scale(1.012); } to { transform:none; } }

html.is-motion-ready [data-reveal] { opacity:0; transform:translateY(16px) scale(.992); transition:opacity var(--reveal-duration) var(--ease),transform var(--reveal-duration) var(--ease-release); transition-delay:min(calc(var(--reveal-order,0) * 45ms),220ms); }
html.is-motion-ready [data-reveal].is-revealed { opacity:1; }
/* Every card on every page shares one motion vocabulary: staggered scroll
   enter/leave (driven by --reveal-order) plus an instant spring hover/press. */
html.is-motion-ready .card { transition:opacity var(--reveal-duration) var(--ease),transform 260ms var(--spring),box-shadow 260ms var(--ease),border-color 240ms var(--ease),background 240ms var(--ease); transition-delay:min(calc(var(--reveal-order,0) * 45ms),220ms),min(calc(var(--reveal-order,0) * 45ms),220ms),0s,0s,0s; }
html.is-motion-ready .card:not(.is-revealed) { opacity:0; transform:translateY(16px) scale(.992); }
html.is-motion-ready .card:hover,html.is-motion-ready .card:active { transition-delay:0s; }
[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:transform 240ms var(--ease-release),box-shadow 220ms var(--ease); }
[data-tilt].is-tilting { transition:box-shadow 180ms var(--ease); }

.site-nav { position:relative; }.site-nav__links { position:relative; isolation:isolate; }.site-nav__links a { position:relative; z-index:2; background:transparent!important; border-color:transparent!important; box-shadow:none!important; }.nav-indicator { position:absolute; z-index:1; top:0; left:0; height:44px; border:1px solid var(--blue-200); border-radius:var(--radius-pill); background:linear-gradient(145deg,#f5fbff,var(--blue-100)); box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(91,130,169,.08); pointer-events:none; transition:transform 260ms var(--ease-release),width 220ms var(--ease); }

.home-v2 { --home-gap:clamp(68px,8vw,112px); padding-top:clamp(30px,5vw,60px); }
.home-v2 .section { padding-top:var(--home-gap); }.home-v2 .section-heading { align-items:end; margin-bottom:30px; }.home-v2 .section-heading > div > p { max-width:600px; margin:8px 0 0; color:var(--text-soft); }
.home-v2 .section-heading h2 { font-size:clamp(30px,3.4vw,44px); }.home-v2 .eyebrow { letter-spacing:.15em; }

.home-hero-v2 { display:grid; grid-template-columns:minmax(0,7fr) minmax(280px,5fr); gap:20px; min-height:600px; }
.hero-story { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr); align-items:center; gap:28px; min-height:600px; padding:clamp(34px,5vw,70px); overflow:hidden; background:linear-gradient(142deg,#fff 0%,#f4faff 56%,#f8fafc 100%); box-shadow:inset 0 1px 0 #fff,0 24px 70px rgba(88,119,154,.13); }
.hero-story::before { content:""; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(167, 191, 214, .13) 1px,transparent 1px),linear-gradient(90deg,rgba(167, 191, 214, .13) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(110deg,#000,transparent 72%); }
.hero-story__copy { position:relative; z-index:3; }.hero-story h1 { max-width:760px; margin:4px 0 22px; font-size:clamp(40px,5vw,68px); line-height:1.08; }.hero-story__copy > p { max-width:620px; color:var(--text-soft); font-size:clamp(17px,1.6vw,20px); line-height:1.85; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }.hero-tags span { padding:7px 12px; border:1px dashed var(--blue-300); border-radius:12px 15px 11px 16px; background:rgba(255,255,255,.68); color:var(--blue-600); font-size:12px; font-weight:800; transform:rotate(var(--tag-rotate,-.4deg)); }.hero-tags span:nth-child(even) { --tag-rotate:.7deg; border-color:var(--pink-200); color:var(--pink-700); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }.button--text { min-height:44px; padding-inline:13px; background:transparent; color:var(--blue-600); box-shadow:none; }.button--text::after { display:none; }.button--text:hover { background:var(--blue-50); box-shadow:none; }
.hero-planet-wrap { position:relative; z-index:2; display:grid; place-items:center; min-height:300px; }.hero-avatar { width:min(20vw,230px); animation:planet-breathe 6s ease-in-out infinite; }.planet-orbit { position:absolute; width:min(25vw,290px); aspect-ratio:1; border:1px dashed rgba(160, 184, 208, .34); border-radius:50%; animation:orbit-spin 18s linear infinite; }.planet-orbit::before,.planet-orbit i { content:""; position:absolute; width:15px; height:15px; border:4px solid #fff; border-radius:50%; background:var(--pink-400); box-shadow:var(--shadow-sm); }.planet-orbit::before { top:15%; left:7%; }.planet-orbit i { right:5%; bottom:18%; background:var(--blue-300); }
.planet-status { position:absolute; right:2%; bottom:6%; display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #fff; border-radius:var(--radius-pill); background:rgba(255,255,255,.88); box-shadow:var(--shadow-sm); color:var(--mint-700); font-size:10px; font-weight:900; letter-spacing:.1em; }.planet-status i { width:7px; height:7px; border-radius:50%; background:#b0bdc8; box-shadow:0 0 0 4px var(--mint-100); }
.avatar-planet--wild { border:2px solid rgba(194, 212, 228, .6); border-radius:50%; background:transparent; box-shadow:none; color:transparent; }
.avatar-planet--wild::before { content:""; position:absolute; left:18%; top:25%; width:29%; height:43%; border:2px solid rgba(194, 212, 228, .48); border-radius:42% 58% 48% 52%/54% 44% 56% 46%; transform:rotate(-4deg); background:rgba(255,255,255,.18); }
.avatar-planet--wild::after { content:""; position:absolute; top:29%; right:17%; width:33%; height:41%; border:2px solid rgba(194, 212, 228, .62); border-radius:52% 48% 57% 43%/45% 55% 47% 53%; transform:rotate(3deg); background:rgba(255,255,255,.26); box-shadow:none; pointer-events:none; }
.about-avatar--planet { position:relative; border:2px solid rgba(194, 212, 228, .6); background:transparent; box-shadow:none; }
.about-avatar--planet::before { content:""; position:absolute; left:18%; top:36%; width:40%; height:14%; border:2px solid rgba(194, 212, 228, .4); border-radius:999px; transform:rotate(-10deg); background:none; }
.hero-planet-wrap .avatar-planet { position:relative; right:auto; bottom:auto; opacity:1; }
.hero-doodle { position:absolute; z-index:1; pointer-events:none; }.hero-doodle--cloud { right:8%; bottom:-28px; width:170px; height:75px; border-radius:60px 70px 0 0; background:rgba(235, 245, 255, .7); filter:blur(.2px); }.hero-doodle--spark { top:14%; right:7%; color:var(--pink-400); font-size:28px; animation:spark-pulse 3.8s ease-in-out infinite; }
/* v1.30.0: the two coloured hero side cards merge into one card with two rows. */
.hero-side { display:grid; }
.hero-status { position:relative; display:grid; grid-template-rows:1fr auto; overflow:hidden; }
.hero-status__row { display:grid; align-content:center; gap:8px; padding:clamp(24px,3vw,34px); }
.hero-status__row:first-child h2 { margin:0; font-size:clamp(22px,2.3vw,30px); }
.hero-status__row:first-child p { margin:0; color:var(--text-soft); }
.hero-status__row--time { position:relative; gap:6px; border-top:1px solid var(--border); }
.hero-status__row--time .eyebrow { margin-bottom:2px; }
.hero-status__row--time > strong { font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.05em; }
.hero-status__row--time > small { display:flex; align-items:center; gap:7px; color:var(--text-soft); }
.hero-status__row--time::after { content:""; position:absolute; right:-18px; bottom:-28px; width:90px; height:90px; border:18px solid rgba(205, 228, 249, .18); border-radius:50%; pointer-events:none; }
@keyframes planet-breathe { 0%,100% { border-radius:45% 55% 51% 49%/53% 45% 55% 47%; transform:translateY(0) rotate(-.4deg); } 50% { border-radius:52% 48% 46% 54%/47% 55% 45% 53%; transform:translateY(-7px) rotate(.5deg); } }
@keyframes orbit-spin { to { transform:rotate(1turn); } } @keyframes spark-pulse { 50% { opacity:.5; transform:scale(.86) rotate(12deg); } }

.soft-icon--purple { color:var(--purple-500); }

.featured-notes { display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,5fr); gap:18px; align-items:start; }.featured-note { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr); min-height:460px; overflow:hidden; }.featured-note__cover { display:grid; min-height:100%; overflow:hidden; text-decoration:none; }.featured-note__cover img { width:100%; height:100%; object-fit:cover; }.cover-symbol { position:relative; display:grid; place-items:center; min-height:100%; color:#fff; }.cover-symbol .icon { width:82px; height:82px; }.cover-symbol i { position:absolute; right:22px; bottom:16px; color:rgba(255,255,255,.75); font-size:55px; font-style:normal; font-weight:900; }.featured-note__copy { align-self:center; padding:clamp(28px,4vw,48px); }.featured-note__copy h3 { margin:22px 0 14px; font-size:clamp(28px,3.2vw,42px); }.featured-note__copy h3 a,.mini-note h3 a { text-decoration:none; }.featured-note__copy p { color:var(--text-soft); font-size:16px; line-height:1.8; }
.note-stack { display:grid; grid-auto-rows:1fr; gap:14px; min-height:460px; }.mini-note { position:relative; display:grid; grid-template-columns:auto 1fr; gap:17px; min-height:0; padding:24px; overflow:hidden; }.mini-note__index { color:var(--pink-200); font-size:28px; font-weight:900; }.mini-note .split-meta { margin-bottom:8px; }.mini-note h3 { margin:0 0 8px; font-size:20px; }.mini-note p { display:-webkit-box; margin:0; overflow:hidden; color:var(--text-soft); font-size:13px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.content-state--solo .featured-notes { grid-template-columns:1fr; }.content-state--solo .featured-note { max-width:960px; }

/* v1.30.0: three equal columns, no zig-zag alternation, no per-card hue rotation. */
.project-showcase { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.showcase-card { position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:18px; align-content:start; min-height:430px; padding:18px; overflow:hidden; text-decoration:none; }.showcase-card__media { display:grid; place-items:center; height:100%; min-height:210px; overflow:hidden; border-radius:20px; background:linear-gradient(145deg,var(--purple-100),var(--blue-100)); color:#fff; }.showcase-card__media img { width:100%; height:100%; object-fit:cover; }.showcase-card__media > .icon { width:72px; height:72px; }.showcase-card__media i { position:absolute; color:rgba(255,255,255,.62); font-size:70px; font-style:normal; font-weight:900; }.showcase-card__copy { display:grid; align-content:start; gap:7px; padding:2px 8px; }.showcase-card__copy > small { color:var(--blue-600); font-weight:900; letter-spacing:.08em; }.showcase-card__copy > strong { font-size:clamp(21px,1.9vw,26px); }.showcase-card__copy p { margin:0; color:var(--text-soft); }.tech-line { margin-top:8px; color:var(--gray-600); font-size:12px; font-weight:800; overflow-wrap:anywhere; }.showcase-card__arrow { justify-self:end; display:grid; place-items:center; width:46px; height:46px; border-radius:15px; background:var(--surface-soft); color:var(--blue-600); }
/* v1.30.0: every project layout variant now shares the same three-column grid. */
.content-state--solo .project-showcase { grid-template-columns:minmax(0,520px); }

/* v1.30.0: moments (5 cols) and the photo filmstrip (7 cols) share one row so the
   homepage stops growing vertically. Widths are bound to the content type, not to
   DOM position, so admin re-ordering cannot put the filmstrip in the narrow column. */
.home-duo { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,2.4vw,32px); align-items:start; }
.home-duo--solo { grid-template-columns:minmax(0,1fr); }
.home-duo__moments { grid-column:1; }
.home-duo__gallery { grid-column:2; min-width:0; }
.home-duo--solo .home-duo__moments,.home-duo--solo .home-duo__gallery { grid-column:1; }
.home-duo > .section { padding-top:var(--home-gap); }
.home-duo .section-heading { margin-bottom:22px; }
.home-duo .section-heading h2 { font-size:clamp(26px,2.6vw,34px); }

.moment-timeline { position:relative; display:grid; gap:14px; padding-left:26px; }
.moment-timeline::before { content:""; position:absolute; top:10px; bottom:10px; left:6px; border-left:2px dashed var(--blue-200); }
.moment-note { position:relative; display:grid; align-content:start; gap:8px; padding:18px 20px; border:1px solid var(--blue-200); border-radius:var(--radius-md); text-decoration:none; transition:transform 220ms var(--ease-release),box-shadow 180ms var(--ease); }
.moment-note:hover { transform:translateX(3px); box-shadow:var(--shadow-card); }
.moment-note__dot { position:absolute; top:24px; left:-26px; width:13px; height:13px; border:4px solid #fff; border-radius:50%; background:var(--blue-300); box-shadow:var(--shadow-xs); }
.moment-note__meta,.moment-note time { color:var(--text-faint); font-size:11px; font-weight:800; }
.moment-note__body { max-height:88px; overflow:hidden; }
.moment-note__body p { margin:0; }
.moment-note.is-pinned { border-color:var(--blue-300); }
.moment-note.is-pinned::after { content:""; position:absolute; top:14px; right:16px; width:9px; height:9px; border-radius:50%; background:#aec8dc; box-shadow:0 3px 0 #557c9a; }

.filmstrip { display:flex; gap:18px; padding:24px 24px 26px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-color:var(--pink-200) transparent; border:1px solid #edeff1; border-radius:28px; background:linear-gradient(90deg,#f9fbfd,#f5fbff 52%,#f6f9fc); box-shadow:inset 0 1px 0 #fff; }.filmstrip::before,.filmstrip::after { content:""; flex:0 0 2px; }.film-frame { flex:0 0 clamp(190px,18vw,262px); padding:12px 12px 18px; scroll-snap-align:start; border:1px solid rgba(229, 235, 242, .9); border-radius:5px 5px 20px 7px; background:#fff; box-shadow:0 10px 22px rgba(68,91,119,.1); text-decoration:none; transform:rotate(-.6deg); transition:transform 220ms var(--ease-release),box-shadow 180ms var(--ease); }.film-frame:nth-child(even) { transform:rotate(.8deg); }.film-frame:hover { transform:translateY(-5px) rotate(0); box-shadow:var(--shadow-card); }.film-frame > span { display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px 3px 14px 4px; background:var(--blue-100); }.film-frame img { width:100%; height:100%; object-fit:cover; }.film-frame small { display:block; padding:12px 5px 0; overflow:hidden; color:var(--text-soft); text-overflow:ellipsis; white-space:nowrap; }

/* v1.30.0: 8/4 top row, then a full-width trio of status cards, then the skills bar. */
.home-about-collage { display:grid; grid-template-columns:minmax(0,8fr) minmax(240px,4fr); grid-template-areas:"paper profile" "now now" "skills skills"; gap:18px; }.about-paper { grid-area:paper; padding:clamp(32px,5vw,56px); background:linear-gradient(145deg,#fff,var(--blue-50)); }.about-paper h2 { font-size:clamp(31px,3.6vw,46px); }.about-paper p { max-width:650px; color:var(--text-soft); font-size:17px; line-height:1.85; }.about-profile { grid-area:profile; display:grid; justify-items:center; align-content:center; padding:28px; text-align:center; }.about-avatar { width:104px; height:104px; margin-bottom:16px; overflow:hidden; border:7px solid #fff; box-shadow:var(--shadow-sm); font-size:34px; }.about-avatar img { width:100%; height:100%; object-fit:cover; }.about-profile > strong { font-size:22px; }.about-profile > small { margin-top:5px; color:var(--text-soft); }.about-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:16px; }.about-socials a { padding:6px 9px; border-radius:11px; background:rgba(255,255,255,.72); color:var(--pink-700); font-size:11px; text-decoration:none; }
.about-now-grid { grid-area:now; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.about-now-grid article { display:grid; gap:7px; min-height:120px; padding:20px; }.about-now-grid small { color:var(--text-faint); font-weight:800; }.about-skills { grid-area:skills; display:grid; align-content:start; gap:12px; padding:24px; }.about-skills__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px 26px; }.about-skills span:not(.eyebrow) { display:grid; grid-template-columns:minmax(70px,auto) 1fr; gap:10px; align-items:center; font-size:12px; }.about-skills i { height:7px; overflow:hidden; border-radius:var(--radius-pill); background:var(--border); }.about-skills b { display:block; width:var(--skill-level); height:100%; border-radius:inherit; background:var(--progress-fill); }
.home-about-collage > .card,.home-about-collage .about-now-grid > .card { box-shadow:none; }

.connection-layout { display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,5fr); gap:18px; align-items:start; }.planet-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:18px; }.planet-links > a { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; min-height:92px; padding:13px; border:1px solid rgba(255,255,255,.7); border-radius:19px; background:rgba(255,255,255,.62); text-decoration:none; transition:transform 200ms var(--ease-release),background 180ms var(--ease); }.planet-links > a:hover { transform:translateY(-3px); background:#fff; }.planet-links > a > span:last-child { display:grid; min-width:0; }.planet-links strong { font-size:15px; }.planet-links small { overflow:hidden; color:var(--text-soft); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.friend-orb { display:grid; place-items:center; width:50px; height:50px; border:5px solid #fff; border-radius:45% 55% 52% 48%; background:var(--blue-100); color:var(--blue-600); box-shadow:var(--shadow-xs); font-weight:900; }.friend-orb--pink { background:var(--pink-100); color:var(--pink-700); }.friend-orb--mint { background:var(--mint-100); color:var(--mint-700); }.friend-orb--purple { background:var(--purple-100); color:var(--purple-500); }.friend-orb--yellow { background:var(--yellow-100); color:var(--yellow-700); }.guest-invite { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:30px; }.guest-invite h3 { margin:18px 0 9px; font-size:25px; }.guest-invite > p { color:var(--text-soft); }.guest-invite blockquote { padding:16px; margin:8px 0 20px; border:0; border-radius:16px; background:rgba(255,255,255,.62); }.guest-invite blockquote p { margin:0; }.guest-invite cite { display:block; margin-top:8px; color:var(--text-faint); font-size:11px; }.connection-empty { grid-column:1/-1; display:grid; justify-items:center; padding:35px; text-align:center; }

.home-empty { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; min-height:170px; padding:30px; }.home-empty h3 { margin:0 0 5px; font-size:24px; }.home-empty p { margin:0; color:var(--text-soft); }.home-empty--film { background:linear-gradient(100deg,#f9fbfd,#f5fbff,#f6f9fc); }
.home-cta { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; min-height:270px; padding:clamp(36px,6vw,70px); margin-top:var(--home-gap); overflow:hidden; border-color:rgba(228, 235, 246, .9); background:linear-gradient(125deg,#eef7ff,#f7fafc 48%,#f2f6f9); box-shadow:inset 0 1px 0 #fff,0 22px 60px rgba(83,111,145,.12); }.home-cta h2 { max-width:720px; margin-bottom:12px; font-size:clamp(32px,4vw,50px); }.home-cta p { max-width:700px; margin:0; color:var(--text-soft); font-size:17px; }.home-cta__cloud { position:absolute; right:8%; bottom:-75px; width:250px; height:140px; border-radius:50%; background:rgba(255,255,255,.38); box-shadow:-90px 20px 0 rgba(255,255,255,.22); pointer-events:none; }

.home-config { margin-bottom:18px; }.home-config__groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }.home-config__group { padding:22px; border:1px solid var(--border); border-radius:20px; }.home-config__group h3 { margin-bottom:16px; }.sticky-form-actions { position:sticky; z-index:5; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding:12px 14px 12px 20px; margin-top:18px; border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:var(--shadow-float); backdrop-filter:blur(16px); }.sticky-form-actions span { color:var(--text-faint); font-size:12px; }.home-module-admin { margin-bottom:18px; }.module-config-list form { grid-template-columns:140px minmax(190px,1fr) 74px 74px 125px 80px auto; padding:15px 0; }.module-identity { display:grid; }.module-identity small,.compact-field span { color:var(--text-faint); font-size:10px; }.compact-field { display:grid; gap:2px; }.navigation-admin { margin-top:0; }

.home-admin-overview { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px 28px; margin-bottom:14px; background:linear-gradient(145deg,#fff,#f3f9fd 62%,#f6f9fc); }.home-admin-overview h2 { margin:3px 0 7px; font-size:24px; }.home-admin-overview p { max-width:680px; margin:0; color:var(--text-soft); font-size:13px; line-height:1.75; }
.home-admin-overview__stats { display:grid; grid-template-columns:repeat(3,94px); gap:10px; flex:0 0 auto; }.home-admin-overview__stats span { display:grid; place-items:center; min-height:78px; padding:9px; border:1px solid #eaf2f7; border-radius:19px; background:rgba(255,255,255,.82); box-shadow:inset 0 1px 0 #fff; }.home-admin-overview__stats strong { color:#668ba7; font-size:23px; }.home-admin-overview__stats small { color:var(--text-faint); font-size:10px; font-weight:800; }
.home-admin-jumpbar { position:sticky; z-index:4; top:10px; display:flex; gap:7px; padding:8px; margin-bottom:16px; overflow-x:auto; border:1px solid #eaf2f7; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 10px 26px rgba(67,94,123,.09); scrollbar-width:none; backdrop-filter:blur(16px); }.home-admin-jumpbar::-webkit-scrollbar { display:none; }.home-admin-jumpbar a { flex:0 0 auto; padding:8px 12px; border-radius:12px; color:var(--text-soft); font-size:11px; font-weight:900; }.home-admin-jumpbar a:hover,.home-admin-jumpbar a:focus-visible { background:var(--blue-50); color:#6386a1; outline:0; }
.home-config-v3 { display:grid; gap:16px; margin-bottom:18px; scroll-margin-top:88px; }.home-editor-section { overflow:hidden; border:1px solid #ebf2f7; border-radius:24px; background:#fff; scroll-margin-top:88px; }.home-editor-section__heading { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:center; padding:18px 20px; border-bottom:1px solid #eef4f8; background:linear-gradient(145deg,#fff,#f4f9fd); }.home-editor-section__heading > span { display:grid; place-items:center; width:42px; height:42px; border-radius:15px; background:linear-gradient(145deg,var(--blue-100),var(--pink-50)); color:#718fa8; font-size:12px; font-weight:950; }.home-editor-section__heading h3 { margin:0 0 4px; font-size:17px; }.home-editor-section__heading p { margin:0; color:var(--text-soft); font-size:11px; }.home-editor-section__heading > small { max-width:210px; padding:7px 10px; border-radius:99px; background:#fff; color:var(--text-faint); font-size:10px; font-weight:800; text-align:center; }.home-editor-section__body { padding:20px; }
.home-action-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px; }.home-action-editor { min-width:0; padding:16px; border:1px solid #ecf2f7; border-radius:19px; background:linear-gradient(145deg,#fff,#f8fbfd); }.home-action-editor header { display:flex; align-items:center; gap:10px; }.home-action-editor header > span { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:var(--blue-50); color:#7194ae; font-size:11px; font-weight:950; }.home-action-editor header div { display:grid; }.home-action-editor header strong { font-size:14px; }.home-action-editor header small { color:var(--text-faint); font-size:10px; }.home-action-editor > p { min-height:42px; margin:12px 0 14px; color:var(--text-soft); font-size:11px; line-height:1.65; }.home-action-editor .form-grid { grid-template-columns:1fr; }.home-action-editor .field--wide { grid-column:1; }
.home-state-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:20px; }
.home-module-admin-v3 { margin-bottom:18px; scroll-margin-top:88px; }.home-module-card-list { display:grid; gap:14px; }.home-module-card-v3 { overflow:hidden; border:1px solid #ebf1f6; border-radius:22px; background:#fff; transition:opacity 180ms var(--ease),border-color 180ms var(--ease),box-shadow 180ms var(--ease); }.home-module-card-v3:hover { border-color:#e1ecf3; box-shadow:0 12px 28px rgba(75,104,134,.08); }.home-module-card-v3.is-disabled { opacity:.72; background:#fafbfc; }.home-module-card-v3 > header { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:13px; align-items:center; padding:17px 18px; border-bottom:1px solid #f0f5f8; background:linear-gradient(145deg,#fff,#f7fafc); }.home-module-card-v3__index { display:grid; place-items:center; width:42px; height:42px; border-radius:15px; background:var(--blue-50); color:#7392a9; font-size:11px; font-weight:950; }.home-module-card-v3 header h3 { margin:0 0 3px; font-size:16px; }.home-module-card-v3 header p { margin:0; color:var(--text-soft); font-size:11px; line-height:1.55; }.home-module-card-v3__state { padding:6px 9px; border:1px solid #edf0f3; border-radius:99px; background:#f5f6f7; color:#8b969f; font-size:10px; font-weight:900; }.home-module-card-v3__state.is-on { border-color:#e6eaed; background:#f1f4f7; color:#788691; }
.home-module-card-v3__facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 18px; border-bottom:1px solid #f2f5f8; background:#fbfcfd; }.home-module-card-v3__facts span { display:grid; gap:3px; }.home-module-card-v3__facts small { color:var(--text-faint); font-size:9px; font-weight:850; }.home-module-card-v3__facts strong,.home-module-card-v3__facts code { overflow:hidden; color:var(--text-soft); font-size:11px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.home-module-card-v3__facts code { color:#7894a8; font-family:ui-monospace,monospace; }
.home-module-card-v3__fields { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(130px,1fr)); gap:12px; padding:18px; }.home-module-card-v3__fields .field { align-content:start; }.home-module-card-v3__fields input,.home-module-card-v3__fields select { min-height:43px; }.home-module-fixed-field { display:grid; align-content:start; gap:8px; min-width:0; }.home-module-fixed-field small { color:var(--text-soft); font-size:11px; font-weight:850; }.home-module-fixed-field strong { min-height:43px; padding:11px 12px; overflow:hidden; border:1px dashed #e9f0f5; border-radius:14px; background:#f8fafc; color:#7d909f; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.home-module-card-v3 > footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; border-top:1px solid #f0f5f8; background:#fafcfd; }.home-module-switch { display:flex; align-items:center; gap:10px; cursor:pointer; }.home-module-switch input { width:18px; height:18px; accent-color:#bedcee; }.home-module-switch span { display:grid; }.home-module-switch strong { font-size:12px; }.home-module-switch small { color:var(--text-faint); font-size:10px; }
.home-navigation-admin { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(460px,1.38fr); gap:16px; scroll-margin-top:88px; }.home-navigation-admin__intro { grid-column:1/-1; padding:24px 26px; background:linear-gradient(145deg,#fff,#f3f9fd); }.home-navigation-admin__intro h2 { margin:3px 0 7px; }.home-navigation-admin__intro p { max-width:820px; color:var(--text-soft); line-height:1.7; }.home-navigation-admin__intro ul { display:flex; flex-wrap:wrap; gap:8px 22px; padding:0; margin:13px 0 0; list-style:none; }.home-navigation-admin__intro li { color:var(--text-faint); font-size:11px; }.home-navigation-admin__intro li::before { content:"✓"; margin-right:6px; color:#88949e; font-weight:950; }
.home-navigation-create { align-self:start; position:sticky; top:74px; display:grid; gap:15px; }.home-navigation-create .form-grid { grid-template-columns:1fr; }.home-navigation-create .field--wide { grid-column:1; }.home-navigation-create__flags { display:flex; flex-wrap:wrap; gap:9px; }.home-navigation-create__flags .check-row { flex:1 1 150px; min-height:42px; padding:9px 11px; border:1px solid #ecf2f7; border-radius:13px; background:#f8fbfd; }
.home-navigation-list { min-width:0; }.home-navigation-card-list { display:grid; gap:12px; }.home-navigation-card { position:relative; overflow:hidden; border:1px solid #ebf1f6; border-radius:20px; background:#fff; }.home-navigation-card.is-hidden { opacity:.75; }.home-navigation-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:15px 17px; border-bottom:1px solid #eff4f7; background:linear-gradient(145deg,#fff,#f8fbfd); }.home-navigation-card > header div { min-width:0; }.home-navigation-card h3 { margin:5px 0 3px; font-size:15px; }.home-navigation-card code { display:block; overflow:hidden; color:#7991a5; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.home-navigation-card > header > small { flex:0 0 auto; color:var(--text-faint); font-size:10px; }.home-navigation-card__state { padding:4px 7px; border-radius:99px; background:var(--blue-50); color:#7190a7; font-size:9px; font-weight:900; }.home-navigation-card__editor { padding:16px; }.home-navigation-card__fields { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.home-navigation-card__actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }.home-navigation-card__actions > div { display:flex; flex-wrap:wrap; gap:8px; }.home-navigation-card__delete { position:absolute; top:11px; right:80px; }.home-navigation-card__delete .text-button { color:#909fab; font-size:10px; }

@media (max-width:1180px) {
  .home-action-editor-grid { grid-template-columns:1fr; }.home-action-editor > p { min-height:0; }.home-action-editor .form-grid { grid-template-columns:1fr 1fr; }
  .home-module-card-v3__fields { grid-template-columns:1fr 1fr; }
  .home-navigation-admin { grid-template-columns:1fr; }.home-navigation-create { position:static; }.home-navigation-create .form-grid { grid-template-columns:1fr 1fr; }.home-navigation-create .field--wide { grid-column:auto; }
}

@media (max-width:760px) {
  .home-admin-overview { align-items:stretch; flex-direction:column; padding:22px; }.home-admin-overview__stats { grid-template-columns:repeat(3,1fr); }.home-admin-overview__stats span { min-height:66px; }
  .home-editor-section__heading { grid-template-columns:38px minmax(0,1fr); padding:15px; }.home-editor-section__heading > span { width:38px; height:38px; }.home-editor-section__heading > small { grid-column:2; justify-self:start; }
  .home-editor-section__body,.home-action-editor-grid,.home-state-editor-grid { grid-template-columns:1fr; padding:15px; }.home-action-editor .form-grid { grid-template-columns:1fr; }
  .home-module-card-v3 > header { grid-template-columns:38px minmax(0,1fr); padding:14px; }.home-module-card-v3__index { width:38px; height:38px; }.home-module-card-v3__state { grid-column:2; justify-self:start; }.home-module-card-v3__facts { grid-template-columns:1fr; padding:11px 14px; }.home-module-card-v3__fields { grid-template-columns:1fr; padding:14px; }.home-module-card-v3 > footer { align-items:stretch; flex-direction:column; }.home-module-card-v3 > footer .button { width:100%; }
  .home-navigation-admin__intro { padding:21px; }.home-navigation-admin__intro ul { display:grid; }.home-navigation-create .form-grid,.home-navigation-card__fields { grid-template-columns:1fr; }.home-navigation-card__fields .field--wide { grid-column:1; }.home-navigation-card__actions { align-items:stretch; flex-direction:column; }.home-navigation-card__actions .button { width:100%; }.home-navigation-card__delete { position:static; padding:0 16px 13px; text-align:right; }
}

@media (max-width:1100px) {
  .home-hero-v2 { grid-template-columns:1fr; min-height:0; }.hero-story { min-height:560px; }.hero-status { grid-template-rows:auto auto; }.featured-notes { grid-template-columns:1fr; }.note-stack { grid-template-columns:repeat(2,1fr); min-height:0; }.project-showcase { grid-template-columns:repeat(2,minmax(0,1fr)); }.showcase-card { min-height:390px; }.home-duo { grid-template-columns:minmax(0,1fr); }.home-duo__moments,.home-duo__gallery { grid-column:1; }.home-about-collage { grid-template-columns:minmax(0,1fr); grid-template-areas:"paper" "profile" "now" "skills"; }.connection-layout { grid-template-columns:1fr; }.guest-invite { min-height:260px; }.home-config__groups { grid-template-columns:1fr; }.module-config-list form { grid-template-columns:130px 1fr 75px 75px; }.module-config-list form select,.module-config-list form .check-row,.module-config-list form button { grid-row:2; }
}
@media (max-width:760px) {
  .home-v2 { --home-gap:68px; }.home-hero-v2 { gap:14px; }.hero-story { grid-template-columns:1fr; min-height:0; padding:34px 24px 42px; }.hero-story h1 { font-size:clamp(38px,11.5vw,55px); }.hero-planet-wrap { min-height:260px; }.hero-avatar { width:min(58vw,210px); }.planet-orbit { width:min(70vw,270px); }.featured-note { grid-template-columns:1fr; min-height:0; }.featured-note__cover { min-height:260px; }.note-stack { grid-template-columns:1fr; }.project-showcase { grid-template-columns:1fr; }.showcase-card { min-height:0; gap:12px; }.showcase-card__media { min-height:220px; }.moment-timeline { gap:12px; padding-left:22px; }.moment-note { min-height:0; }.moment-note__dot { top:20px; left:-22px; }.home-about-collage { grid-template-columns:1fr; grid-template-areas:"paper" "profile" "now" "skills"; }.about-now-grid { grid-template-columns:1fr; }.planet-links { grid-template-columns:1fr; }.home-empty { grid-template-columns:1fr; justify-items:start; }.home-cta { grid-template-columns:1fr; min-height:0; }.home-cta .button { justify-self:start; }.module-config-list form { grid-template-columns:1fr 1fr; padding:18px 0; }.module-config-list form .module-identity,.module-config-list form > input[name="title"] { grid-column:1/-1; }.module-config-list form select,.module-config-list form .check-row,.module-config-list form button { grid-row:auto; }.module-config-list form select { grid-column:1/-1; }.sticky-form-actions { align-items:stretch; flex-direction:column; }.sticky-form-actions .button { width:100%; }
}
@media (max-width:420px) {
  .filmstrip { margin-inline:-8px; padding-inline:12px; border-radius:22px; }.film-frame { flex-basis:82vw; }.planet-links { padding:12px; }.home-cta { padding:32px 24px; }
}
@media (max-width:340px) {
  .hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .button { width:100%; }
}

html[data-motion="reduce"] .avatar-planet,html[data-motion="reduce"] .planet-orbit,html[data-motion="reduce"] .hero-doodle--spark,
html[data-performance="low"] .avatar-planet,html[data-performance="low"] .planet-orbit,html[data-performance="low"] .hero-doodle--spark { animation:none; }
html[data-motion="reduce"] [data-reveal],html[data-performance="low"] [data-reveal],html[data-motion="reduce"] .card,html[data-performance="low"] .card { opacity:1!important; transform:none!important; transition:none!important; }
html[data-motion="reduce"] [data-tilt],html[data-performance="low"] [data-tilt] { --tilt-x:0deg!important; --tilt-y:0deg!important; transform:none!important; transition:none!important; }
html[data-motion="reduce"] .nav-indicator,html[data-performance="low"] .nav-indicator { transition:none; }
html[data-motion="reduce"] .site-header,html[data-performance="low"] .site-header { transition:none; }
html[data-motion="reduce"] .site-header.is-nav-arriving .site-nav,html[data-performance="low"] .site-header.is-nav-arriving .site-nav { animation:none; }
@media (prefers-reduced-motion:reduce) { [data-reveal],.card { opacity:1!important; transform:none!important; transition:none!important; }.avatar-planet,.planet-orbit,.hero-doodle--spark { animation:none!important; } }

/* Article cards, stacked interaction forms and friend application board */
.article-card-link {
  position:relative;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  isolation:isolate;
  transition:transform 460ms var(--ease-release),box-shadow 360ms var(--ease),border-color 280ms var(--ease),background 360ms var(--ease);
}
.article-card-link::before {
  content:"";
  display:none;
  position:absolute;
  z-index:0;
  inset:-35% -18%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.72) 48%,rgba(234, 245, 254, .38) 55%,transparent 72%);
  opacity:0;
  pointer-events:none;
  transform:translate3d(-38%,0,0) rotate(-7deg);
  transition:opacity 260ms var(--ease),transform 720ms var(--ease-release);
}
.article-card-link > * { position:relative; z-index:1; }
.article-card-link:focus-visible { outline:0; border-color:var(--blue-300); box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(163, 198, 229, .22),var(--shadow-card-hover); }
.article-card-link .featured-note__cover,.article-card-link .list-post__cover { transition:transform 620ms var(--ease-release),filter 360ms var(--ease); }
.article-card-link .featured-note__title,.article-card-link .mini-note__title,.article-card-link h2 { transition:color 240ms var(--ease),transform 380ms var(--ease-release); }
.article-card-link__action,.article-card-link__arrow { transition:color 220ms var(--ease),transform 420ms var(--ease-release),opacity 220ms var(--ease); }
.article-card-link__arrow { position:absolute; right:18px; bottom:16px; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--blue-100); border-radius:13px; background:rgba(255,255,255,.72); color:var(--blue-600); opacity:.66; }
.article-card-link__arrow .icon { width:17px; height:17px; }
.featured-note__copy { display:flex; flex-direction:column; align-items:flex-start; }
.featured-note__title { display:block; margin:22px 0 14px; font-size:clamp(28px,3.2vw,42px); line-height:1.2; }
.featured-note__summary { display:block; margin-bottom:22px; color:var(--text-soft); font-size:16px; line-height:1.8; }
.mini-note__copy { position:relative; display:grid; align-content:center; min-width:0; padding-right:36px; }
.mini-note__title { display:block; margin:0 0 8px; font-size:20px; line-height:1.35; }
.mini-note__summary { display:-webkit-box; overflow:hidden; color:var(--text-soft); font-size:13px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.list-post.article-card-link { overflow:hidden; }
.list-post.article-card-link .list-post__copy { position:relative; padding-right:54px; }

@media (hover:hover) {
  .article-card-link:hover { transform:translateY(-7px) scale(1.006); border-color:var(--blue-200); background:linear-gradient(145deg,#fff 10%,#f3f9ff 72%,#f9fbfc); box-shadow:inset 0 1px 0 #fff,0 22px 48px rgba(83,119,155,.16); }
  .article-card-link:hover::before { opacity:1; transform:translate3d(38%,0,0) rotate(-7deg); }
  .article-card-link:hover .featured-note__cover,.article-card-link:hover .list-post__cover { transform:scale(1.035); filter:saturate(1.05) brightness(1.02); }
  .article-card-link:hover .featured-note__title,.article-card-link:hover .mini-note__title,.article-card-link:hover h2 { color:var(--blue-600); transform:translateX(4px); }
  .article-card-link:hover .article-card-link__action { transform:translateX(5px); }
  .article-card-link:hover .article-card-link__arrow { opacity:1; transform:translate3d(4px,-3px,0) rotate(-4deg); }
}
.article-card-link:active,.article-card-link.is-pressed { transform:translateY(-1px) scale(.992); box-shadow:inset 0 2px 5px rgba(65,91,120,.08),0 9px 20px rgba(83,119,155,.11); transition-duration:130ms; transition-timing-function:var(--ease-press); }
.article-card-link.is-releasing { animation:article-card-release 360ms var(--ease-release); }
@keyframes article-card-release { 42% { transform:translateY(-4px) scale(1.004); } to { transform:none; } }

.guestbook-layout,.comments-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.guestbook-layout { width:min(920px,100%); margin-inline:auto; }
.comments-section { width:min(800px,100%); margin-inline:auto; }
.guestbook-form,.comment-form { position:static; top:auto; width:100%; padding:clamp(24px,4vw,38px); }
.interaction-form-heading { margin-bottom:24px; }
.interaction-form-heading h2 { margin:4px 0 8px; font-size:clamp(26px,3vw,34px); }
.interaction-form-heading p { max-width:650px; margin:0; color:var(--text-soft); }

.friend-board { position:relative; min-height:430px; padding:clamp(24px,4vw,42px); overflow:hidden; background:linear-gradient(145deg,#fff 0%,#f2f9ff 55%,#f7fafc 100%); }
.friend-board::before { display:none; }
.friend-board__header { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:25px; border-bottom:1px solid rgba(229, 238, 245, .78); }
.friend-board__header h2 { margin:4px 0 8px; font-size:clamp(28px,3.4vw,42px); }
.friend-board__header p { max-width:620px; margin:0; color:var(--text-soft); }
.friend-board__apply { flex:0 0 auto; margin-left:auto; border-radius:var(--radius-pill); }
.friend-board .friend-grid { position:relative; z-index:2; margin-top:24px; }
.friend-board__empty { position:relative; z-index:1; display:grid; justify-items:center; align-content:center; min-height:290px; padding:42px 20px 24px; text-align:center; }
.friend-board__empty h3 { margin:18px 0 8px; font-size:clamp(24px,3vw,34px); }
.friend-board__empty p { max-width:520px; margin:0; color:var(--text-soft); }
.friend-board__orbit { position:absolute; width:180px; height:180px; border:1px dashed var(--blue-200); border-radius:50%; opacity:.6; animation:orbit-spin 20s linear infinite; }
.friend-board__orbit i { position:absolute; top:13px; right:25px; width:13px; height:13px; border:4px solid #fff; border-radius:50%; background:var(--pink-400); box-shadow:var(--shadow-xs); }
.friend-board__empty .empty-state__icon { position:relative; z-index:2; margin:0; background:rgba(255,255,255,.82); box-shadow:0 14px 30px rgba(91,129,167,.12); }
.friend-application-modal { width:min(920px,calc(100% - 28px)); max-height:min(820px,calc(100dvh - 32px)); padding:clamp(24px,4vw,38px); overflow:auto; }
.friend-application-modal__body { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); gap:28px; padding-top:22px; margin-top:22px; border-top:1px solid var(--border); }
.friend-application-status { padding:22px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,var(--blue-50),#fafcfd); }
.friend-application-status h3 { margin:0 0 7px; }
.friend-application-status > p { margin:0; font-size:13px; }
.friend-application-modal .status-lookup { margin-top:22px; }
.friend-application-modal .status-lookup label { font-weight:900; }
.friend-application-form { align-content:start; }

@media (max-width:760px) {
  .article-card-link__arrow { right:14px; bottom:13px; }
  .friend-board { min-height:390px; padding:22px; }
  .friend-board__header { align-items:stretch; flex-direction:column; }
  .friend-board__apply { align-self:flex-start; margin-left:0; }
  .friend-application-modal__body { grid-template-columns:1fr; }
  .friend-application-status { padding:18px; }
}

html[data-motion="reduce"] .article-card-link,html[data-performance="low"] .article-card-link,
html[data-motion="reduce"] .article-card-link *,html[data-performance="low"] .article-card-link * { transition:none!important; animation:none!important; }
html[data-motion="reduce"] .article-card-link::before,html[data-performance="low"] .article-card-link::before { display:none; }
html[data-motion="reduce"] .friend-board__orbit,html[data-performance="low"] .friend-board__orbit { animation:none; }
@media (prefers-reduced-motion:reduce) { .article-card-link,.article-card-link *,.friend-board__orbit { transition:none!important; animation:none!important; } }

/* Admin information architecture, media preview presets and visual article editor */
.admin-sidebar { overflow:hidden; }
.admin-nav {
  display:grid;
  gap:7px;
  min-height:0;
  padding:3px 5px 12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  scrollbar-width:thin;
  scrollbar-color:#e9ecf0 transparent;
}
.admin-nav-group { border:1px solid transparent; border-radius:18px; transition:none; }
.admin-nav[data-accordion-ready="true"] .admin-nav-group { transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease); }
.admin-nav-group.is-open { border-color:#eef0f3; box-shadow:0 5px 14px rgba(62,72,86,.045); }
.admin-nav-group__toggle {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  width:100%;
  min-height:58px;
  padding:9px 11px;
  border:0;
  border-radius:17px;
  background:transparent;
  color:#535d6b;
  text-align:left;
  cursor:pointer;
  transition:transform 240ms var(--spring),color 180ms var(--ease),background 180ms var(--ease);
}
.admin-nav-group__toggle:hover,.admin-nav-group__toggle:focus-visible { background:#fff; color:var(--text); transform:translateX(2px); }
.admin-nav-group__toggle > .icon:first-child { width:19px; height:19px; color:#8a94a1; }
.admin-nav-group__toggle > span { display:grid; gap:2px; }
.admin-nav-group__toggle strong { font-size:13px; }
.admin-nav-group__toggle small { color:#929aa5; font-size:9px; font-weight:600; }
.admin-nav-group__chevron { width:15px; height:15px; color:#a1a8b1; transition:none; }
.admin-nav[data-accordion-ready="true"] .admin-nav-group__chevron { transition:transform 260ms var(--spring); }
.admin-nav-group.is-open .admin-nav-group__chevron { transform:rotate(180deg); }
.admin-nav-group__items { display:grid; grid-template-rows:0fr; opacity:.25; transition:none; }
.admin-nav[data-accordion-ready="true"] .admin-nav-group__items { transition:grid-template-rows 280ms var(--spring),opacity 160ms var(--ease); }
.admin-nav-group__items > div { display:grid; gap:4px; min-height:0; padding:0 6px; overflow:hidden; }
.admin-nav-group.is-open .admin-nav-group__items { grid-template-rows:1fr; opacity:1; }
.admin-nav-group.is-open .admin-nav-group__items > div { padding-bottom:7px; }
.admin-nav .admin-nav-group__items a {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  min-height:47px;
  padding:8px 12px 8px 17px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  box-shadow:none;
  color:#68717d;
  text-decoration:none;
  transform:none;
  transition:transform 240ms var(--spring),border-color 180ms var(--ease),background 180ms var(--ease),color 180ms var(--ease);
}
.admin-nav .admin-nav-group__items a::before { content:""; position:absolute; top:13px; bottom:13px; left:6px; width:3px; border-radius:3px; background:#c8ccd2; opacity:0; transform:scaleY(.35); transition:opacity 180ms var(--ease),transform 280ms var(--spring); }
.admin-nav .admin-nav-group__items a span { font-size:12px; font-weight:900; }
.admin-nav .admin-nav-group__items a small { color:#9aa1aa; font-size:9px; }
.admin-nav .admin-nav-group__items a:hover,.admin-nav .admin-nav-group__items a:focus-visible { border-color:#eff0f3; background:#fff; color:var(--text); transform:translateX(3px); }
.admin-nav .admin-nav-group__items a.is-current { border-color:#eaebef; background:#fff; box-shadow:0 5px 13px rgba(62,72,86,.07); color:#424b57; }
.admin-nav .admin-nav-group__items a.is-current::before { opacity:1; transform:scaleY(1); }
.admin-nav .admin-nav-group__items a.is-current small { color:#737c87; }

.media-panel__heading { align-items:center; gap:18px; }
.media-preview-controls { display:inline-flex; flex:0 0 auto; gap:4px; padding:4px; border:1px solid #eceff2; border-radius:var(--radius-pill); background:#f7f8fa; }
.media-preview-controls button { min-width:42px; min-height:36px; padding:5px 11px; border:0; border-radius:var(--radius-pill); background:transparent; color:#737c87; font-weight:900; cursor:pointer; transition:transform 220ms var(--spring),background 180ms var(--ease),box-shadow 180ms var(--ease),color 180ms var(--ease); }
.media-preview-controls button:hover { transform:translateY(-2px); color:var(--text); }
.media-preview-controls button.is-active { background:#fff; box-shadow:0 4px 12px rgba(65,76,91,.1); color:#46505e; }
.media-grid[data-media-grid] { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--media-card-width),1fr)); gap:14px; transition:grid-template-columns 360ms var(--spring); }
.media-grid[data-preview-size="compact"] { --media-card-width:145px; --media-preview-height:118px; }
.media-grid[data-preview-size="standard"] { --media-card-width:220px; --media-preview-height:175px; }
.media-grid[data-preview-size="large"] { --media-card-width:320px; --media-preview-height:245px; }
.media-card__preview { display:block; height:var(--media-preview-height); overflow:hidden; border-radius:19px 19px 0 0; background:#eef1f4; transition:height 360ms var(--spring); }
.media-card__preview img,.media-card img { width:100%; height:100%; aspect-ratio:auto; border-radius:0; object-fit:cover; transition:transform 420ms var(--spring),filter 260ms var(--ease); }
.media-card:hover .media-card__preview img { transform:scale(1.035); filter:saturate(1.04); }

.post-editor--visual { grid-template-columns:minmax(0,1fr) 300px; }
.visual-editor-shell { min-width:0; padding:clamp(18px,3vw,30px); }
.editor-document-meta { display:grid; gap:15px; margin-bottom:24px; }
.visual-editor { position:relative; min-width:0; border:1px solid #ebf0f5; border-radius:26px; background:#f8fafc; overflow:hidden; box-shadow:inset 0 1px 0 #fff; }
.visual-editor__header { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:22px 24px 18px; border-bottom:1px solid #eef1f5; background:linear-gradient(145deg,#fff,#f7f8fa); }
.visual-editor__header h2 { margin:3px 0 7px; font-size:23px; }
.visual-editor__header p { max-width:650px; margin:0; color:var(--text-soft); font-size:12px; }
.editor-mode-switch { display:inline-flex; flex:0 0 auto; gap:4px; padding:4px; border:1px solid #eceff2; border-radius:var(--radius-pill); background:#f2f4f6; }
.editor-mode-switch button { min-height:38px; padding:6px 13px; border:0; border-radius:var(--radius-pill); background:transparent; color:#737c87; font-size:11px; font-weight:900; cursor:pointer; transition:transform 220ms var(--spring),background 180ms var(--ease),box-shadow 180ms var(--ease),color 180ms var(--ease); }
.editor-mode-switch button:hover { transform:translateY(-2px); color:var(--text); }
.editor-mode-switch button.is-active { background:#fff; box-shadow:0 4px 12px rgba(65,76,91,.1); color:#46505e; }
.visual-editor__toolbar { position:sticky; z-index:8; top:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:64px; padding:9px 12px; margin:0; border:0; border-bottom:1px solid #eef1f5; border-radius:0; background:rgba(255,255,255,.96); box-shadow:0 6px 18px rgba(68,82,101,.055); backdrop-filter:blur(14px); }
.editor-tool-group { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #eff1f3; border-radius:13px; background:#f7f8fa; }
.editor-tool-group > label,
.editor-tool-group .themed-select,
.editor-tool-group .themed-select__trigger { min-width:0; }
.editor-tool-group .themed-select__trigger { gap:5px; padding-inline:8px; }
.editor-tool-group .themed-select__trigger > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.editor-tool-group--end { margin-left:auto; }
.visual-editor__toolbar button,.visual-editor__toolbar select,.editor-upload-button,.editor-tool-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:35px; padding:5px 9px; border:0; border-radius:10px; background:transparent; color:#5d6672; font:800 11px/1.2 inherit; text-decoration:none; cursor:pointer; transition:transform 200ms var(--spring),background 160ms var(--ease),box-shadow 160ms var(--ease),color 160ms var(--ease); }
.visual-editor__toolbar button:hover,.visual-editor__toolbar button:focus-visible,.editor-upload-button:hover,.editor-tool-link:hover { background:#fff; box-shadow:0 3px 9px rgba(65,76,91,.08); color:var(--text); transform:translateY(-2px); }
.visual-editor__toolbar select { min-width:105px; outline:0; }
.editor-upload-button .icon { width:16px; height:16px; }
.editor-color-tool { position:relative; display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:transparent; cursor:pointer; }
.editor-color-tool:hover { background:#fff; }
.editor-color-tool input { position:absolute; inset:auto 4px 3px; width:27px; height:7px; padding:0; overflow:hidden; border:0; opacity:.8; cursor:pointer; }
.editor-statusbar { display:flex; justify-content:space-between; gap:16px; min-height:34px; padding:8px 16px; border-bottom:1px solid #eef1f5; background:#f4f6f8; color:#808894; font-size:10px; }
.visual-editor__workbench { position:relative; min-height:650px; background:#eef1f4; }
.visual-editor__canvas,.visual-editor__preview,.visual-editor__source { width:min(800px,calc(100% - 40px)); min-height:610px; padding:clamp(28px,5vw,62px); margin:20px auto; border:1px solid #ebeef2; border-radius:20px; background:#fff; box-shadow:0 12px 32px rgba(57,69,85,.08); outline:0; }
.visual-editor__canvas:focus { border-color:#d6dde4; box-shadow:0 0 0 3px rgba(168, 180, 193, .12),0 16px 38px rgba(57,69,85,.1); }
.visual-editor__canvas:empty::before { content:attr(data-placeholder); color:#a2a9b2; pointer-events:none; }
.visual-editor__source { display:none; font:14px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }
.visual-editor__preview { display:none; }
.visual-editor__workbench[data-mode="source"] .visual-editor__source { display:block; }
.visual-editor__workbench[data-mode="source"] .visual-editor__canvas,.visual-editor__workbench[data-mode="source"] .visual-editor__preview { display:none; }
.visual-editor__workbench[data-mode="preview"] .visual-editor__preview { display:block; }
.visual-editor__workbench[data-mode="preview"] .visual-editor__canvas,.visual-editor__workbench[data-mode="preview"] .visual-editor__source { display:none; }
.visual-editor.is-fullscreen { position:fixed; z-index:150; inset:12px; display:flex; flex-direction:column; border-radius:26px; box-shadow:0 28px 90px rgba(35,44,56,.24); }
.visual-editor.is-fullscreen .visual-editor__workbench { flex:1; min-height:0; overflow:auto; }
.visual-editor.is-fullscreen .visual-editor__canvas,.visual-editor.is-fullscreen .visual-editor__preview,.visual-editor.is-fullscreen .visual-editor__source { min-height:calc(100vh - 275px); }
body.visual-editor-fullscreen { overflow:hidden; }

.image-layout-inspector { padding:22px 24px; border-top:1px solid #eceff2; background:linear-gradient(145deg,#fff,#f6f7f9); }
.image-layout-inspector[hidden] { display:none; }
.image-layout-inspector > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.image-layout-inspector h3 { margin:3px 0 0; font-size:20px; }
.image-inspector-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:18px; }
.image-width-control .field__label { display:flex; align-items:center; justify-content:space-between; }
.image-width-control output { min-width:46px; padding:3px 8px; border-radius:var(--radius-pill); background:#eef1f4; color:#626c78; text-align:center; }
.image-width-control input[type="range"] { min-height:34px; padding:0; accent-color:#c7ced6; cursor:ew-resize; }
.image-inspector-grid fieldset { min-width:0; padding:12px; border:1px solid #edeff2; border-radius:16px; background:#fff; }
.image-inspector-grid legend { padding:0 6px; color:#68717d; font-size:10px; font-weight:900; }
.editor-segmented { display:flex; flex-wrap:wrap; gap:4px; }
.editor-segmented button { flex:1 1 auto; min-height:35px; padding:5px 8px; border:1px solid transparent; border-radius:10px; background:#f4f5f7; color:#707985; font-size:10px; font-weight:900; cursor:pointer; transition:transform 200ms var(--spring),background 160ms var(--ease),border-color 160ms var(--ease),box-shadow 160ms var(--ease); }
.editor-segmented button:hover { transform:translateY(-2px); background:#fff; border-color:#eceff2; }
.editor-segmented button.is-active { border-color:#e5e8eb; background:#fff; box-shadow:0 3px 9px rgba(65,76,91,.08); color:#424b57; }
.image-inspector-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; margin-top:17px; border-top:1px solid #eef0f3; }
.image-inspector-actions > span { color:#7c8590; font-size:11px; }
.editor-help-card ul { display:grid; gap:9px; padding-left:18px; margin:0; color:var(--text-soft); font-size:11px; }
.editor-help-card kbd { padding:2px 5px; border:1px solid #e9ecef; border-radius:6px; background:#f5f6f8; box-shadow:0 1px 0 #cfd4da; font-size:9px; }
.editor-insight-card { display:grid; gap:12px; }
.editor-insight-card h2 { margin:0; }
.editor-insight-card ol,.editor-insight-card ul { display:grid; gap:7px; padding:0; margin:0; list-style:none; }
.editor-insight-card li { position:relative; padding-left:18px; color:var(--text-soft); font-size:11px; line-height:1.55; }
.editor-insight-card li::before { content:""; position:absolute; top:.52em; left:2px; width:7px; height:7px; border:1px solid #d6dae0; border-radius:50%; background:#fff; transition:transform 220ms var(--spring),background 180ms var(--ease),border-color 180ms var(--ease); }
.editor-insight-card li.is-complete::before { border-color:#c4cacf; background:#dce2e7; transform:scale(1.16); }
.editor-insight-card [data-level="h3"] { padding-left:28px; }.editor-insight-card [data-level="h4"] { padding-left:38px; }.editor-insight-card .is-empty { color:var(--text-faint); }
.editor-media-dialog { width:min(840px,calc(100% - 28px)); }
.editor-media-dialog .modal__header p { margin:4px 0 0; font-size:11px; }
.editor-media-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; max-height:min(520px,62vh); padding:4px; margin-top:20px; overflow:auto; }
.editor-media-picker button { display:grid; min-width:0; padding:7px; border:1px solid #edeff2; border-radius:16px; background:#f8f9fa; color:var(--text); text-align:left; cursor:pointer; transition:transform 220ms var(--spring),border-color 180ms var(--ease),background 180ms var(--ease),box-shadow 180ms var(--ease); }
.editor-media-picker button:hover,.editor-media-picker button:focus-visible { border-color:#e1e5eb; background:#fff; box-shadow:0 8px 20px rgba(63,75,90,.09); transform:translateY(-3px); }
.editor-media-picker img { width:100%; aspect-ratio:4/3; border-radius:11px; background:#eef1f4; object-fit:cover; }
.editor-media-picker span { overflow:hidden; margin-top:7px; font-size:10px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.editor-media-picker small { color:var(--text-faint); font-size:9px; }

.article figure.article-media { position:relative; display:block; clear:both; width:var(--article-media-width,72%); margin:34px auto; transition:width 360ms var(--spring),transform 360ms var(--spring),box-shadow 260ms var(--ease); }
.article figure.article-media img { display:block; width:100%; height:auto; max-height:620px; border-radius:20px; object-fit:contain; object-position:center; box-shadow:0 13px 32px rgba(55,71,91,.12); transition:transform 360ms var(--spring),border-radius 260ms var(--ease); }
.article figure.article-media figcaption { padding:10px 12px 0; color:var(--text-faint); font-size:12px; line-height:1.6; text-align:center; outline:0; }
.article figure.article-media--small { --article-media-width:38%; }.article figure.article-media--medium { --article-media-width:62%; }.article figure.article-media--large { --article-media-width:84%; }.article figure.article-media--full { --article-media-width:100%; }
.article figure.article-media--left { margin-right:auto; margin-left:0; }.article figure.article-media--center { margin-right:auto; margin-left:auto; }.article figure.article-media--right { margin-right:0; margin-left:auto; }
.article figure.article-media--rotate-left img { transform:rotate(-3deg); }.article figure.article-media--rotate-right img { transform:rotate(3deg); }.article figure.article-media--rotate-none img { transform:none; }
.article figure.article-media--ratio-square img { aspect-ratio:1; object-fit:cover; }.article figure.article-media--ratio-landscape img { aspect-ratio:4/3; object-fit:cover; }.article figure.article-media--ratio-wide img { aspect-ratio:16/9; object-fit:cover; }
.visual-editor__canvas figure.article-media { cursor:grab; }
.visual-editor__canvas figure.article-media:hover { transform:translateY(-3px); }
.visual-editor__canvas figure.article-media.is-selected { padding:8px; border-radius:24px; outline:3px solid rgba(172, 184, 196, .2); background:#f6f7f9; box-shadow:0 16px 36px rgba(55,71,91,.12); }
.visual-editor__canvas figure.article-media.is-dragging { opacity:.55; transform:scale(.98); cursor:grabbing; }
.article font[size="2"] { font-size:.86em; }.article font[size="3"] { font-size:1em; }.article font[size="4"] { font-size:1.18em; }.article font[size="5"] { font-size:1.42em; }.article font[size="6"] { font-size:1.78em; }
.article table { width:100%; margin:28px 0; overflow:hidden; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:16px; }
.article th,.article td { padding:12px 14px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); text-align:left; }.article th { background:#f5f6f8; }.article tr:last-child td { border-bottom:0; }.article th:last-child,.article td:last-child { border-right:0; }

/* Light notifications and responsive editor overlays */

.admin-body .admin-main { animation:none; }

.image-layout-inspector { position:fixed; z-index:170; width:min(350px,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:14px; overflow:auto; border:1px solid rgba(223, 234, 243, .94); border-radius:22px; background:linear-gradient(150deg,rgba(255,255,255,.99),rgba(242,248,253,.98)); box-shadow:inset 0 1px 0 #fff,0 22px 54px rgba(60,87,117,.2); animation:image-popover-in 180ms var(--spring) both; transition:left 180ms var(--spring),top 180ms var(--spring),width 180ms var(--ease); backdrop-filter:blur(16px); will-change:left,top,width; }
.image-layout-inspector::before { content:""; position:absolute; top:28px; width:12px; height:12px; border:inherit; border-top:0; border-right:0; background:#fbfdff; transform:rotate(45deg); pointer-events:none; }
.image-layout-inspector[data-side="right"]::before { left:-7px; }
.image-layout-inspector[data-side="left"]::before { right:-7px; transform:rotate(225deg); }
.image-layout-inspector > header { position:sticky; z-index:2; top:-14px; align-items:center; padding:10px 2px 9px; background:linear-gradient(180deg,rgba(255,255,255,.99) 72%,rgba(255,255,255,0)); }
.image-layout-inspector > header strong { font-size:14px; }
.image-inspector-grid { grid-template-columns:1fr; gap:9px; margin-top:5px; }
.image-inspector-grid fieldset { padding:9px; border-color:#ebf2f7; border-radius:14px; background:rgba(255,255,255,.76); }
.image-inspector-grid .field { margin-bottom:0; }
.image-inspector-actions { justify-content:flex-end; padding-top:11px; margin-top:10px; border-color:#ebf2f7; }
.image-inspector-actions .button-row { justify-content:flex-end; width:100%; }
@keyframes image-popover-in { from { opacity:0; transform:translate3d(0,8px,0) scale(.985); } }

.article-media__settings { position:absolute; z-index:4; top:10px; right:10px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(225, 237, 246, .95); border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 8px 22px rgba(57,87,118,.18); color:#6e91af; opacity:0; transform:translate3d(0,-5px,0) scale(.88); cursor:pointer; transition:opacity 160ms var(--ease),transform 220ms var(--spring),background 160ms var(--ease),box-shadow 160ms var(--ease); backdrop-filter:blur(8px); }
.article-media__settings::before { content:"⚙"; font:700 18px/1 system-ui,sans-serif; }
.visual-editor__canvas figure.article-media:hover .article-media__settings,.visual-editor__canvas figure.article-media:focus-within .article-media__settings,.visual-editor__canvas figure.article-media.is-selected .article-media__settings { opacity:1; transform:none; }
.article-media__settings:hover,.article-media__settings:focus-visible { background:#eef8ff; box-shadow:0 10px 26px rgba(67,106,143,.24); outline:0; transform:rotate(18deg)!important; }
.visual-editor__canvas[data-inspector-side] { --image-inspector-reserve:min(260px,52vw); }
.visual-editor__canvas[data-inspector-side="right"] figure.article-media.is-selected { max-width:calc(100% - var(--image-inspector-reserve)); margin-right:auto; margin-left:0; }
.visual-editor__canvas[data-inspector-side="left"] figure.article-media.is-selected { max-width:calc(100% - var(--image-inspector-reserve)); margin-right:0; margin-left:auto; }
.visual-editor__canvas figure.article-media.is-just-inserted { animation:image-inserted 780ms var(--spring); }
@keyframes image-inserted { 0% { opacity:.35; transform:translateY(12px) scale(.975); } 55% { box-shadow:0 0 0 8px rgba(202,229,249,.38); } }

.editor-sidebar .editor-sidebar-widget { display:block; padding:0; overflow:hidden; }
.editor-sidebar-widget__toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:54px; padding:14px 18px; border:0; border-radius:inherit; background:transparent; color:var(--text); font:900 15px/1.2 inherit; text-align:left; cursor:pointer; }
.editor-sidebar-widget__toggle:hover { background:var(--blue-50); }
.editor-sidebar-widget__toggle i { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#f2f7fb; color:#7f9ab1; font-style:normal; transition:transform 260ms var(--spring),background 180ms var(--ease); }
.editor-sidebar-widget.is-open .editor-sidebar-widget__toggle i { background:var(--blue-100); transform:rotate(180deg); }
.editor-sidebar-widget__body { display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-4px); visibility:hidden; }
.editor-sidebar-widget__body > div { min-height:0; padding:0 18px; overflow:hidden; }
.editor-sidebar-widget.is-open .editor-sidebar-widget__body { grid-template-rows:1fr; opacity:1; transform:none; visibility:visible; }
.editor-sidebar-widget.is-open .editor-sidebar-widget__body > div { padding-bottom:17px; }
.editor-sidebar[data-widgets-ready="true"] .editor-sidebar-widget__body { transition:grid-template-rows 300ms var(--spring),opacity 170ms var(--ease),transform 230ms var(--spring),visibility 0s linear 300ms; }
.editor-sidebar[data-widgets-ready="true"] .editor-sidebar-widget.is-open .editor-sidebar-widget__body { transition:grid-template-rows 300ms var(--spring),opacity 180ms var(--ease) 50ms,transform 250ms var(--spring),visibility 0s; }
.editor-sidebar-widget .field:last-child { margin-bottom:0; }
.editor-sidebar > .editor-sidebar-widget { animation:editor-widget-enter 150ms var(--ease) both; }
.editor-sidebar > .editor-sidebar-widget:nth-child(2) { animation-delay:18ms; }.editor-sidebar > .editor-sidebar-widget:nth-child(3) { animation-delay:36ms; }.editor-sidebar > .editor-sidebar-widget:nth-child(4) { animation-delay:54ms; }.editor-sidebar > .editor-sidebar-widget:nth-child(5) { animation-delay:72ms; }.editor-sidebar > .editor-sidebar-widget:nth-child(6) { animation-delay:90ms; }
@keyframes editor-widget-enter { from { opacity:0; transform:translate3d(0,5px,0); } }

/* GPU route curtain: cover the old response completely, then reveal the new one. */
html::before,html::after { content:""; position:fixed; z-index:9998; inset:0; visibility:hidden; pointer-events:none; will-change:transform,opacity; }
html::before { background:linear-gradient(112deg,var(--route-color-start,#eaf6ff) 0%,var(--route-color-middle,#f9fbff) 48%,var(--route-color-end,#f1f6f9) 100%); }
html::after { z-index:9999; width:clamp(70px,11vw,180px); right:auto; background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent); }
html.is-page-leaving body { pointer-events:none; }

html[data-page-transition="stretch"].is-page-leaving::before { visibility:visible; transform-origin:left center; animation:route-stretch-cover var(--route-stretch-cover,420ms) cubic-bezier(.76,0,.24,1) both; }
html[data-page-transition="stretch"].is-page-leaving::after { visibility:visible; animation:route-stretch-glint-in var(--route-stretch-cover,420ms) cubic-bezier(.76,0,.24,1) both; }
html[data-page-transition="stretch"].is-page-entering::before { visibility:visible; transform-origin:right center; animation:route-stretch-reveal var(--route-stretch-reveal,620ms) cubic-bezier(.22,.72,.16,1) var(--route-reveal-delay,55ms) both; }
html[data-page-transition="stretch"].is-page-entering::after { visibility:visible; animation:route-stretch-glint-out var(--route-stretch-reveal,620ms) cubic-bezier(.22,.72,.16,1) var(--route-reveal-delay,55ms) both; }
html[data-page-transition="stretch"].is-page-entering :is(.admin-main,.site-main) { animation:route-content-stretch var(--route-duration,720ms) cubic-bezier(.18,.72,.16,1) var(--route-content-delay,115ms) both; transform-origin:left center; }

html[data-page-transition="fade"].is-page-leaving::before { visibility:visible; animation:route-fade-cover var(--route-fade-cover,190ms) var(--ease) both; }
html[data-page-transition="fade"].is-page-entering::before { visibility:visible; animation:route-fade-reveal var(--route-fade-reveal,330ms) var(--ease) var(--route-reveal-delay,55ms) both; }
html[data-page-transition="fade"].is-page-entering :is(.admin-main,.site-main,.site-footer) { animation:route-content-fade var(--route-fade-reveal,330ms) var(--ease) var(--route-content-delay,115ms) both; }

html[data-page-transition="zoom-blur"].is-page-leaving::before { visibility:visible; background:radial-gradient(circle at 50% 45%,var(--route-color-middle,#f9fbff) 0%,var(--route-color-start,#eaf6ff) 56%,var(--route-color-end,#f1f6f9) 100%); animation:route-focus-cover var(--route-focus-cover,300ms) cubic-bezier(.55,0,.25,1) both; }
html[data-page-transition="zoom-blur"].is-page-entering::before { visibility:visible; background:radial-gradient(circle at 50% 45%,var(--route-color-middle,#f9fbff) 0%,var(--route-color-start,#eaf6ff) 56%,var(--route-color-end,#f1f6f9) 100%); animation:route-focus-reveal var(--route-focus-reveal,500ms) var(--ease) var(--route-reveal-delay,55ms) both; }
html[data-page-transition="zoom-blur"].is-page-entering :is(.admin-main,.site-main) { animation:route-content-focus var(--route-focus-reveal,500ms) cubic-bezier(.18,.72,.16,1) var(--route-content-delay,115ms) both; }

@keyframes route-stretch-cover { from { transform:scaleX(0); border-radius:0 58% 58% 0; } 62% { border-radius:0 34px 34px 0; } to { transform:scaleX(1); border-radius:0; } }
@keyframes route-stretch-reveal { from { transform:scaleX(1); border-radius:0; } 45% { border-radius:52% 0 0 52%; } to { transform:scaleX(0); border-radius:72% 0 0 72%; } }
@keyframes route-stretch-glint-in { from { opacity:0; transform:translateX(-160%); } 35% { opacity:.92; } to { opacity:.18; transform:translateX(calc(100vw + 40px)); } }
@keyframes route-stretch-glint-out { from { opacity:0; transform:translateX(-160%); } 45% { opacity:.86; } to { opacity:0; transform:translateX(calc(100vw + 40px)); } }
@keyframes route-content-stretch { from { opacity:.22; clip-path:inset(0 100% 0 0 round 28px); transform:translate3d(-24px,0,0) scaleX(.975); } 45% { opacity:.74; } to { opacity:1; clip-path:inset(0 0 0 0 round 0); transform:none; } }
@keyframes route-fade-cover { from { opacity:0; } to { opacity:1; } }
@keyframes route-fade-reveal { from { opacity:1; } to { opacity:0; } }
@keyframes route-content-fade { from { opacity:0; transform:translate3d(0,7px,0); } to { opacity:1; transform:none; } }
@keyframes route-focus-cover { from { opacity:0; transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
@keyframes route-focus-reveal { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.055); } }
@keyframes route-content-focus { from { opacity:.12; filter:blur(12px); transform:translate3d(0,8px,0) scale(.965); } 58% { filter:blur(2px); } to { opacity:1; filter:blur(0); transform:none; } }

html:not([data-page-transition="none"]) .post-editor--visual { animation:editor-page-arrive var(--route-duration,720ms) cubic-bezier(.16,.78,.16,1) var(--route-editor-delay,120ms) both; transform-origin:54% 16%; }
html:not([data-page-transition="none"]) .post-editor--visual .visual-editor-shell { animation:editor-canvas-arrive var(--route-stretch-reveal,620ms) cubic-bezier(.16,.78,.16,1) var(--route-editor-canvas-delay,210ms) both; }
html:not([data-page-transition="none"]) .post-editor--visual .editor-sidebar { animation:editor-sidebar-arrive var(--route-focus-reveal,500ms) cubic-bezier(.16,.78,.16,1) var(--route-editor-sidebar-delay,300ms) both; }
@keyframes editor-page-arrive { from { opacity:0; transform:translate3d(-30px,10px,0) scale(.975); } 58% { opacity:1; } to { opacity:1; transform:none; } }
@keyframes editor-canvas-arrive { from { opacity:.12; filter:blur(9px); transform:translate3d(-18px,0,0) scale(.985); } to { opacity:1; filter:blur(0); transform:none; } }
@keyframes editor-sidebar-arrive { from { opacity:0; transform:translate3d(22px,0,0) scale(.98); } to { opacity:1; transform:none; } }

.transition-settings { overflow:hidden; }
.transition-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.transition-choice { position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); gap:17px; align-items:center; min-height:148px; padding:16px; border:1px solid var(--border); border-radius:24px; background:linear-gradient(145deg,#fff,#f7fbff); cursor:pointer; transition:transform 240ms var(--spring),border-color 180ms var(--ease),box-shadow 180ms var(--ease),background 180ms var(--ease); }
.transition-choice:hover { transform:translateY(-3px); border-color:#dfecf6; box-shadow:0 13px 30px rgba(71,103,137,.11); }
.transition-choice:has(input:checked) { border-color:#d6e9f6; background:linear-gradient(145deg,#fff,#edf8ff); box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(78,117,153,.13); }
.transition-choice > input { position:absolute; top:14px; right:14px; width:19px; height:19px; accent-color:#b9d7eb; }
.transition-choice__demo { position:relative; display:block; height:100px; overflow:hidden; border:1px solid #eaf1f6; border-radius:18px; background:#fff; box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(70,96,124,.08); }
.transition-choice__demo::before { content:""; position:absolute; inset:12px; border-radius:12px; background:linear-gradient(#eaf3fa 0 14px,transparent 14px),repeating-linear-gradient(180deg,#edf2f6 0 6px,transparent 6px 13px); }
.transition-choice__demo i { position:absolute; z-index:2; inset:0; display:block; background:linear-gradient(110deg,#e8f5ff,#eef3f7); transform-origin:left; }
.transition-choice__demo b,.transition-choice__demo em { position:absolute; z-index:3; display:block; border-radius:50%; background:#fff; box-shadow:0 3px 9px rgba(79,112,145,.14); }
.transition-choice__demo b { top:13px; right:13px; width:11px; height:11px; }.transition-choice__demo em { right:28px; bottom:14px; width:7px; height:7px; }
.transition-choice__copy { display:grid; gap:7px; }.transition-choice__copy strong { font-size:16px; }.transition-choice__copy small { color:var(--text-soft); line-height:1.7; }
.transition-choice:hover .transition-choice__demo i,.transition-choice:has(input:focus-visible) .transition-choice__demo i { animation:transition-demo-stretch 850ms cubic-bezier(.22,.72,.16,1) both; }
.transition-choice--fade:hover .transition-choice__demo i { animation:transition-demo-fade 700ms var(--ease) both; }
.transition-choice--zoom-blur:hover .transition-choice__demo::before { animation:transition-demo-focus 760ms var(--ease) both; }
.transition-choice--zoom-blur:hover .transition-choice__demo i { animation:transition-demo-fade 640ms var(--ease) reverse both; }
.transition-choice--none .transition-choice__demo i { display:none; }
@keyframes transition-demo-stretch { 0% { transform:scaleX(0); } 45% { transform:scaleX(1); transform-origin:left; } 46% { transform-origin:right; } 100% { transform:scaleX(0); transform-origin:right; } }
@keyframes transition-demo-fade { from { opacity:0; } 45% { opacity:1; } to { opacity:0; } }
@keyframes transition-demo-focus { from { opacity:.15; filter:blur(7px); transform:scale(.94); } to { opacity:1; filter:blur(0); transform:none; } }

.transition-duration-card { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(320px,1.2fr); gap:28px; align-items:center; padding:22px; margin-top:20px; border:1px solid #e8f1f7; border-radius:24px; background:linear-gradient(145deg,#fff,#eef8ff); }
.transition-duration-card h3 { margin:3px 0 7px; font-size:19px; }.transition-duration-card p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.transition-duration-control { display:grid; grid-template-columns:minmax(150px,1fr) 105px auto; gap:12px; align-items:end; }
.transition-duration-control > input[type="range"] { align-self:center; width:100%; height:8px; border-radius:var(--radius-pill); appearance:none; background:linear-gradient(90deg,var(--blue-200),var(--pink-100)); cursor:ew-resize; }
.transition-duration-control > input[type="range"]::-webkit-slider-thumb { width:22px; height:22px; border:4px solid #fff; border-radius:50%; appearance:none; background:#beddf0; box-shadow:0 3px 10px rgba(69,111,147,.24); }
.transition-duration-control .field { margin:0; }.transition-duration-control .field input { min-height:44px; }
.transition-duration-control output { align-self:center; min-width:76px; padding:8px 10px; border:1px solid #e7f0f7; border-radius:var(--radius-pill); background:#fff; color:#63839d; font-size:12px; font-weight:900; text-align:center; }

.appearance-color-card { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(360px,1.28fr); gap:28px; align-items:center; padding:22px; margin-top:20px; border:1px solid #eceff1; border-radius:24px; background:linear-gradient(145deg,#fff,#f8fafc); }
.appearance-color-card h3 { margin:3px 0 7px; font-size:19px; }.appearance-color-card p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.appearance-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.appearance-color-field { display:grid; grid-template-columns:42px minmax(0,1fr); gap:5px 9px; align-items:center; padding:11px; border:1px solid #edf2f6; border-radius:17px; background:rgba(255,255,255,.82); color:var(--text-soft); font-size:12px; font-weight:850; }
.appearance-color-field > span,.appearance-color-field > code,.appearance-color-field > .field-error { grid-column:1/-1; }
.appearance-color-field input[type="color"] { width:42px; height:42px; padding:3px; border:1px solid #e6eff5; border-radius:13px; background:#fff; cursor:pointer; }
.appearance-color-field code { overflow:hidden; color:#7891a6; font:750 11px/1.3 ui-monospace,monospace; text-overflow:ellipsis; text-transform:uppercase; }

.dialog-style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dialog-shape-card { display:grid; grid-template-columns:minmax(210px,.62fr) minmax(420px,1.38fr); gap:24px; align-items:start; padding:22px; margin-top:20px; border:1px solid #ebf2f7; border-radius:24px; background:linear-gradient(145deg,#fff,#f3f9fd); }
.dialog-shape-card h3 { margin:3px 0 7px; font-size:19px; }.dialog-shape-card p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.dialog-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.dialog-metric-control { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:9px; padding:12px; border:1px solid #ebf2f7; border-radius:17px; background:rgba(255,255,255,.86); }
.dialog-metric-control > label { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; gap:8px; color:var(--text-soft); font-size:12px; font-weight:850; }.dialog-metric-control output { color:var(--dialog-accent,#7eaed0); font-size:11px; }
.dialog-metric-control input[type="range"] { align-self:center; width:100%; height:7px; border-radius:99px; appearance:none; background:linear-gradient(90deg,var(--blue-200),var(--pink-100)); }.dialog-metric-control input[type="range"]::-webkit-slider-thumb { width:19px; height:19px; border:3px solid #fff; border-radius:50%; appearance:none; background:var(--dialog-accent,#b4d0e4); box-shadow:0 3px 9px rgba(69,111,147,.2); }
.dialog-metric-control input[type="number"] { min-height:40px; padding:6px 8px; border-radius:12px; text-align:center; }.dialog-metric-control .field-error { grid-column:1/-1; }
.dialog-shadow-fieldset { grid-column:2; padding:13px; border-color:#ebf2f7; border-radius:17px; background:rgba(255,255,255,.72); }.dialog-shadow-fieldset legend { padding:0 6px; color:var(--text-soft); font-size:12px; font-weight:900; }
.dialog-shadow-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.dialog-shadow-options label { position:relative; display:grid; place-items:center; min-height:42px; border:1px solid #ebf2f7; border-radius:13px; background:#fff; color:var(--text-soft); font-size:11px; font-weight:850; cursor:pointer; }.dialog-shadow-options input { position:absolute; opacity:0; }.dialog-shadow-options label:has(input:checked) { border-color:var(--dialog-accent,#b4d0e4); background:var(--blue-50); box-shadow:0 6px 15px rgba(75,107,139,.1); }
.dialog-live-preview { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:17px; align-items:center; width:min(var(--dialog-width,510px),100%); padding:18px; margin:20px auto 0; border:1px solid var(--dialog-accent,#b4d0e4); border-radius:var(--dialog-radius,30px); background:linear-gradient(145deg,var(--dialog-color-start,#fff),var(--dialog-color-end,#f5f8fb)); box-shadow:0 16px 36px rgba(74,102,133,.12); transition:width 220ms var(--spring),border-radius 220ms var(--spring),background 180ms var(--ease),box-shadow 180ms var(--ease); }
.dialog-live-preview__icon { display:grid; place-items:center; align-self:stretch; border-radius:18px; background:var(--dialog-accent,#b4d0e4); color:#fff; font-size:24px; }.dialog-live-preview > span:nth-child(2) { display:grid; gap:4px; }.dialog-live-preview small { color:var(--dialog-accent,#7eaed0); font-weight:900; letter-spacing:.12em; }.dialog-live-preview strong { font-size:17px; }.dialog-live-preview i { color:var(--text-soft); font-size:12px; font-style:normal; }.dialog-live-preview > b { padding:9px 15px; border-radius:99px; background:var(--dialog-accent,#b4d0e4); color:#fff; font-size:12px; }
.dialog-preview-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px 22px; margin-top:16px; border:1px dashed #e1ecf3; border-radius:22px; background:linear-gradient(145deg,#fff,#eef8ff); }.dialog-preview-panel h3 { margin:3px 0 5px; font-size:18px; }.dialog-preview-panel p { margin:0; color:var(--text-soft); font-size:12px; }.dialog-preview-panel .button-row { flex:0 0 auto; }

@media (max-width: 900px) {
  .dialog-shape-card { grid-template-columns:minmax(0,1fr); }
  .dialog-shadow-fieldset { grid-column:1; }
}

/* Project-wide themed fallbacks for controls that otherwise use browser defaults. */
:where(button:not([class]),input[type="button"]:not([class]),input[type="submit"]:not([class]),input[type="reset"]:not([class])) { min-height:42px; padding:7px 14px; border:1px solid #e7f0f7; border-radius:14px; background:linear-gradient(145deg,#fff,#edf7ff); box-shadow:inset 0 1px 0 #fff,0 5px 13px rgba(76,109,142,.08); color:var(--text-soft); font-weight:850; cursor:pointer; transition:transform 200ms var(--spring),border-color 160ms var(--ease),background 160ms var(--ease),box-shadow 160ms var(--ease),color 160ms var(--ease); }
:where(button:not([class]),input[type="button"]:not([class]),input[type="submit"]:not([class]),input[type="reset"]:not([class])):hover { border-color:#daebf5; background:linear-gradient(145deg,#fff,var(--blue-100)); box-shadow:0 8px 19px rgba(72,111,148,.13); color:#557c9a; transform:translateY(-2px); }
:where(button:not([class]),input[type="button"]:not([class]),input[type="submit"]:not([class]),input[type="reset"]:not([class])):active { transform:translateY(1px) scale(.96); }
:where(button,input[type="button"],input[type="submit"],input[type="reset"]):disabled { opacity:.48; box-shadow:none; cursor:not-allowed; transform:none!important; }

:where(select:not([class])) { min-height:42px; padding:7px 38px 7px 12px; border:1px solid #e8eff5; border-radius:13px; appearance:none; background-color:#fff; background-image:linear-gradient(45deg,transparent 50%,#b9cdda 50%),linear-gradient(135deg,#b9cdda 50%,transparent 50%),linear-gradient(145deg,#fff,#f3f9fd); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%,0 0; background-repeat:no-repeat; background-size:5px 5px,5px 5px,100% 100%; color:var(--text-soft); outline:0; cursor:pointer; transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease),background-color 160ms var(--ease); }
:where(select:not([class])):hover { border-color:var(--blue-200); }:where(select:not([class])):focus { border-color:#c5e0f0; box-shadow:0 0 0 3px rgba(178, 214, 238, .18); }
:where(select option) { background:#fff; color:var(--text); }
:where(input[type="file"])::file-selector-button { min-height:38px; padding:6px 13px; margin-right:10px; border:1px solid #e5eff6; border-radius:12px; background:linear-gradient(145deg,#fff,#edf7ff); color:#5f819b; font-weight:850; cursor:pointer; }
:where(details > summary:not([class])) { min-height:42px; padding:9px 12px; border:1px solid #ebf2f7; border-radius:14px; background:linear-gradient(145deg,#fff,#f3f9fd); color:var(--text-soft); font-weight:850; cursor:pointer; list-style:none; }
:where(details > summary:not([class]))::-webkit-details-marker { display:none; }
:where(details > summary:not([class]))::after { content:"⌄"; float:right; color:#84a5bd; transition:transform 220ms var(--spring); }:where(details[open] > summary:not([class]))::after { transform:rotate(180deg); }
dialog.modal { width:min(var(--dialog-width,510px),calc(100% - 28px)); border:1px solid var(--dialog-accent,var(--border)); border-radius:var(--dialog-radius,30px); background:linear-gradient(150deg,var(--dialog-color-start,#fff),var(--dialog-color-end,#f3f9fd)); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.88),var(--shadow-float); }
dialog.modal::backdrop { background:rgba(70,91,117,.28); -webkit-backdrop-filter:blur(var(--dialog-backdrop-blur,6px)); backdrop-filter:blur(var(--dialog-backdrop-blur,6px)); }

.app-system-dialog { width:min(var(--dialog-width,510px),calc(100% - 28px)); padding:0; overflow:hidden; border-color:var(--dialog-accent,#b4d0e4); background:linear-gradient(150deg,var(--dialog-color-start,#fff),var(--dialog-color-end,#f5f8fb)); }
.app-system-dialog[open] { display:grid; grid-template-columns:76px minmax(0,1fr); animation:system-dialog-enter 300ms var(--spring); }
.app-system-dialog__icon { display:grid; place-items:center; min-height:100%; background:linear-gradient(180deg,var(--dialog-color-end,#e7f5ff),var(--dialog-color-start,#eef3f7)); color:var(--dialog-accent,#7eaed0); font-size:28px; }
.app-system-dialog__content { min-width:0; padding:25px; }.app-system-dialog__content .modal__header { align-items:flex-start; }.app-system-dialog__content h2 { margin-top:3px; }
.app-system-dialog__content > p { min-height:24px; margin:15px 0 18px; color:var(--text-soft); line-height:1.75; white-space:pre-wrap; }
.app-system-dialog__field { margin-bottom:18px; }.app-system-dialog__field[hidden] { display:none; }
.app-system-dialog[data-dialog-mode="prompt"] .app-system-dialog__icon,.app-system-dialog[data-dialog-mode="alert"] .app-system-dialog__icon { color:var(--dialog-accent,#7eaed0); }
html[data-dialog-shadow="none"] dialog,html[data-dialog-shadow="none"] .dialog-live-preview { box-shadow:none; }
html[data-dialog-shadow="light"] dialog,html[data-dialog-shadow="light"] .dialog-live-preview { box-shadow:0 10px 24px rgba(66,91,119,.1); }
html[data-dialog-shadow="soft"] dialog,html[data-dialog-shadow="soft"] .dialog-live-preview { box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 22px 52px rgba(66,91,119,.16); }
html[data-dialog-shadow="deep"] dialog,html[data-dialog-shadow="deep"] .dialog-live-preview { box-shadow:inset 0 1px 0 #fff,0 34px 82px rgba(52,76,106,.25); }
@keyframes system-dialog-enter { from { opacity:0; transform:translate3d(0,14px,0) scale(.965); } to { opacity:1; transform:none; } }
.text-link,.corner-card,.showcase-card,.friend-card,.drawer__links a,.mobile-bottom-nav a,.mobile-bottom-nav button,.admin-topbar a { transition-property:transform,opacity,color,background,border-color,box-shadow; transition-duration:240ms; transition-timing-function:var(--spring); }
:where(button,a[href],summary,[role="button"]) { -webkit-tap-highlight-color:transparent; }
:where(button,a[href],summary,[role="button"]).is-pressed { filter:brightness(.98) saturate(.94); }
:where(button,a[href],summary,[role="button"]).is-releasing { transition:transform 240ms var(--spring),filter 180ms var(--ease),opacity 180ms var(--ease); }

@supports not (view-transition-name:root) {
  @media (prefers-reduced-motion:no-preference) { body:not(.admin-body) { animation:page-enter 280ms var(--ease); } }
}

@media (max-width:1100px) {
  .post-editor--visual { grid-template-columns:1fr; }
  .post-editor--visual .editor-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .post-editor--visual .editor-sidebar > .button { grid-column:1/-1; }
}
@media (max-width:760px) {
  .visual-editor__header { align-items:stretch; flex-direction:column; }
  .editor-mode-switch { align-self:flex-start; }
  .editor-tool-group--end { margin-left:0; }
  .visual-editor__canvas,.visual-editor__preview,.visual-editor__source { width:calc(100% - 20px); min-height:520px; padding:24px 20px; margin:10px auto; border-radius:16px; }
  .image-inspector-grid { grid-template-columns:1fr; }
  .image-inspector-actions { align-items:flex-start; flex-direction:column; }
  .post-editor--visual .editor-sidebar { grid-template-columns:1fr; }
  .article figure.article-media--small { --article-media-width:62%; }.article figure.article-media--medium { --article-media-width:82%; }.article figure.article-media--large,.article figure.article-media--full { --article-media-width:100%; }
  .media-panel__heading { align-items:flex-start; flex-direction:column; }
  .transition-choice-grid { grid-template-columns:1fr; }
  .transition-choice { grid-template-columns:112px minmax(0,1fr); }
  .transition-duration-card { grid-template-columns:1fr; gap:16px; }
  .transition-duration-control { grid-template-columns:1fr 96px; }.transition-duration-control > input[type="range"] { grid-column:1/-1; }
  .appearance-color-card { grid-template-columns:1fr; gap:16px; }.appearance-color-grid { grid-template-columns:1fr; }
  .dialog-style-grid { grid-template-columns:1fr; }.dialog-style-choice { grid-template-columns:105px minmax(0,1fr); }.dialog-shape-card { grid-template-columns:1fr; }.dialog-metric-grid { grid-template-columns:1fr; }.dialog-shadow-fieldset { grid-column:1; }.dialog-shadow-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.dialog-live-preview { grid-template-columns:50px minmax(0,1fr); }.dialog-live-preview > b { display:none; }.dialog-preview-panel { align-items:flex-start; flex-direction:column; }.dialog-preview-panel .button-row { width:100%; }
  .app-system-dialog[open] { grid-template-columns:1fr; }.app-system-dialog__icon { min-height:54px; }.app-system-dialog__content { padding:20px; }
}

@media (max-width:620px) {
  .visual-editor__toolbar .editor-tool-group {
    width:100%;
    min-width:0;
    flex-wrap:wrap;
    align-items:stretch;
  }
  .visual-editor__toolbar .editor-tool-group > button,
  .visual-editor__toolbar .editor-tool-group > .editor-upload-button,
  .visual-editor__toolbar .editor-tool-group > .editor-tool-link {
    flex:0 0 auto;
    min-width:42px;
    white-space:nowrap;
  }
  .visual-editor__toolbar .editor-tool-group > label:not(.editor-color-tool):not(.editor-upload-button) {
    flex:1 1 124px;
  }
}

@media (hover:none) { .article-media__settings { opacity:.82; transform:none; } }

html[data-motion="reduce"] .admin-nav-group__items,
html[data-motion="reduce"] .article figure.article-media,html[data-performance="low"] .article figure.article-media,
html[data-motion="reduce"] .media-grid[data-media-grid],html[data-performance="low"] .media-grid[data-media-grid],
html[data-motion="reduce"] .editor-sidebar-widget__body,html[data-performance="low"] .editor-sidebar-widget__body { transition:none!important; }
html[data-motion="reduce"] .admin-main,html[data-performance="low"] .admin-main,
html[data-motion="reduce"] .image-layout-inspector,html[data-performance="low"] .image-layout-inspector,
html[data-motion="reduce"] .editor-sidebar > .editor-sidebar-widget,html[data-performance="low"] .editor-sidebar > .editor-sidebar-widget { animation:none!important; }
html[data-motion="reduce"]::before,html[data-motion="reduce"]::after,html[data-performance="low"]::before,html[data-performance="low"]::after,
html[data-motion="reduce"] :is(.admin-main,.site-main,.site-footer,.post-editor--visual,.visual-editor-shell,.editor-sidebar),
html[data-performance="low"] :is(.admin-main,.site-main,.site-footer,.post-editor--visual,.visual-editor-shell,.editor-sidebar) { animation:none!important; filter:none!important; clip-path:none!important; }
html[data-performance="low"] .visual-editor__toolbar { backdrop-filter:none; }

/* User system foundation */
.nav-account-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid #e8f2f8; border-radius:50%; background:linear-gradient(145deg,#fff,#eaf6fd); color:#6f98b6; font-weight:900; box-shadow:inset 0 1px 0 #fff,0 7px 17px rgba(111,152,182,.12); transition:transform 220ms var(--spring),box-shadow 220ms var(--ease); }
.nav-account-button:hover { transform:translateY(-2px) scale(1.035); box-shadow:inset 0 1px 0 #fff,0 11px 24px rgba(111,152,182,.17); }
.nav-login-button { min-height:42px; padding-inline:17px; }
.auth-page { display:grid; place-items:center; min-height:calc(100vh - 170px); padding:72px 20px 100px; background:radial-gradient(circle at 22% 20%,rgba(231, 246, 255, .62),transparent 28%),radial-gradient(circle at 82% 76%,rgba(255,224,238,.58),transparent 28%); }
.auth-card { width:min(100%,480px); padding:34px; border-radius:34px; box-shadow:inset 0 1px 0 #fff,0 24px 64px rgba(88,119,145,.13); animation:account-card-arrive 620ms var(--spring) both; }
.auth-card--wide { width:min(100%,720px); }
.auth-card h1 { margin:7px 0 26px; font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.045em; }
.auth-links { display:flex; justify-content:space-between; gap:14px; margin-top:22px; color:#7395ad; font-weight:750; }
.button--wide { width:100%; justify-content:center; }
.honeypot { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; }
.account-page { padding-block:64px 110px; }
.account-page > header:not(.account-hero) { margin-bottom:24px; }.account-page > header h1 { margin:5px 0 0; }
.account-hero { display:flex; align-items:center; gap:22px; padding:27px 30px; border-radius:32px; }
.account-hero h1 { margin:4px 0; }.account-hero p { margin:0; color:var(--text-soft); }
.account-avatar { display:grid; flex:0 0 auto; place-items:center; width:72px; height:72px; border:1px solid rgba(255,255,255,.88); border-radius:25px; background:linear-gradient(145deg,#dff3ff,#eff4f8); color:#719bb8; font-size:28px; font-weight:950; box-shadow:inset 0 1px 0 #fff,0 13px 30px rgba(97,137,167,.15); }
.account-tabs { display:flex; gap:8px; align-items:center; padding:8px; margin:20px 0; overflow-x:auto; border:1px solid #eef3f7; border-radius:999px; background:rgba(255,255,255,.78); box-shadow:0 10px 28px rgba(88,119,145,.08); }
.account-tabs a,.account-tabs button { flex:0 0 auto; min-height:40px; padding:10px 17px; border:0; border-radius:999px; background:transparent; color:var(--text-soft); font-weight:850; cursor:pointer; transition:background 180ms var(--ease),color 180ms var(--ease),transform 200ms var(--spring); }
.account-tabs form { flex:0 0 auto; margin-left:auto; }
.account-tabs a:hover { transform:translateY(-1px); }.account-tabs a.is-current { background:linear-gradient(145deg,#e8f6ff,#f5fbff); color:#688faa; box-shadow:inset 0 1px 0 #fff; }
.account-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.account-stat-grid article { display:grid; gap:3px; padding:24px; border-radius:25px; }.account-stat-grid strong { color:#739bb7; font-size:30px; }.account-stat-grid span { color:var(--text-soft); font-weight:750; }
.account-panel { padding:28px; border-radius:28px; }.account-panel h2 { margin:0 0 20px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; }.detail-grid div { padding:16px; border-radius:18px; background:#f8fbfd; }.detail-grid dt { color:#8198aa; font-size:12px; font-weight:850; }.detail-grid dd { margin:5px 0 0; font-weight:800; }
.account-columns,.admin-user-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:18px; align-items:start; }
.session-list,.timeline-list { display:grid; gap:10px; }.session-list article,.timeline-list article { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid #f0f5f9; border-radius:18px; background:#fbfdff; }.session-list article > div,.timeline-list article { min-width:0; }.session-list span,.session-list small,.timeline-list span,.timeline-list small { display:block; overflow:hidden; color:var(--text-soft); text-overflow:ellipsis; white-space:nowrap; }.timeline-list article { display:grid; justify-content:stretch; }
.admin-filter-bar { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(150px,1fr)) auto; gap:12px; align-items:end; margin-bottom:22px; }.admin-filter-bar .field { margin:0; }
.user-data-list .data-row { color:inherit; text-decoration:none; transition:transform 180ms var(--spring),background 180ms var(--ease); }.user-data-list a.data-row:hover { z-index:1; border-radius:16px; background:#f6fbfe; transform:translateX(3px); }
.admin-user-hero { display:flex; align-items:center; gap:20px; padding:24px; margin-bottom:18px; border-radius:28px; }.admin-user-hero h2 { margin:3px 0 9px; }.tag-row { display:flex; flex-wrap:wrap; gap:7px; }
.admin-user-side,.button-stack { display:grid; gap:16px; }.button-stack form,.button-stack .button { width:100%; }
.role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.role-grid article { border-radius:27px; }.role-count { color:var(--text-soft); }
.permission-cloud { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }.permission-cloud span { padding:7px 10px; border:1px solid #edf3f7; border-radius:999px; background:#f8fbfd; color:#7893a7; font-size:12px; font-weight:750; }
.permission-fieldset { padding:18px; border:1px solid #ecf3f8; border-radius:22px; }.permission-fieldset legend { padding-inline:8px; font-weight:900; }.permission-fieldset select { width:100%; min-height:360px; padding:8px; background-image:none; }.permission-fieldset option { padding:8px; border-radius:8px; }
.settings-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.settings-sections > section { margin:0; border-radius:27px; }.settings-sections > div { grid-column:1/-1; }
@keyframes account-card-arrive { from { opacity:0; transform:translate3d(0,22px,0) scale(.97); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@media (max-width:900px) { .account-columns,.admin-user-layout { grid-template-columns:1fr; }.role-grid { grid-template-columns:1fr; }.admin-filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-filter-bar .button { align-self:end; }.settings-sections { grid-template-columns:1fr; }.settings-sections > div { grid-column:1; } }
@media (max-width:600px) { .nav-login-button { display:none; }.auth-page { padding:38px 13px 90px; }.auth-card { padding:25px 20px; border-radius:27px; }.account-page { padding-inline:13px; padding-top:35px; }.account-hero { align-items:flex-start; padding:21px; }.account-avatar { width:58px; height:58px; border-radius:20px; font-size:23px; }.account-stat-grid,.detail-grid { grid-template-columns:1fr; }.account-tabs { border-radius:22px; }.account-panel { padding:21px 18px; }.admin-filter-bar { grid-template-columns:1fr; }.session-list article { align-items:flex-start; flex-direction:column; }.session-list form,.session-list .button { width:100%; }.user-data-list .data-row { grid-template-columns:1fr; gap:7px; }.user-data-list .data-row--head { display:none; } }
html[data-motion="reduce"] :is(.auth-card,.account-page,.admin-user-hero),html[data-performance="low"] :is(.auth-card,.account-page,.admin-user-hero) { animation:none!important; filter:none!important; }

/* Complete member experience */
.nav-account-button{position:relative;overflow:visible}.nav-account-button img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.nav-account-unread,.nav-notification-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f1f5f9;color:#596771;font-size:.68rem;font-weight:800}.nav-account-unread{position:absolute;top:-5px;right:-7px;box-shadow:0 4px 12px rgba(122,80,98,.16)}
.account-avatar--image,.profile-avatar-preview,.public-user-avatar{object-fit:cover;border-radius:30%;border:4px solid rgba(255,255,255,.9);background:#eef7ff;box-shadow:0 14px 34px rgba(103,139,163,.15)}.profile-avatar-preview{width:132px;height:132px;align-self:center}.public-user-page{padding-block:clamp(48px,8vw,100px)}.public-user-card{display:grid;justify-items:center;gap:14px;padding:clamp(30px,6vw,64px);text-align:center;border-radius:36px;background:linear-gradient(145deg,#fff,#f0f8ff 55%,#f4f8fb)}.public-user-avatar{width:144px;height:144px;display:grid;place-items:center;font-size:3rem}.public-user-bio{max-width:42rem;white-space:pre-line;color:var(--text-muted);line-height:1.8}
.account-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.account-stat-grid a{display:grid;gap:3px;padding:24px;border-radius:25px;color:inherit;text-decoration:none;transition:transform .32s var(--spring),border-color .25s ease}.account-stat-grid a:hover{transform:translateY(-4px);border-color:#e0effa}.account-stat-grid a strong{color:#739bb7;font-size:30px}.account-columns--wide{grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);align-items:start}.account-interaction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.account-panel--span{grid-column:1/-1}.account-bookmark-grid{margin-top:20px}
@media(prefers-reduced-motion:reduce){.account-stat-grid a{transition:none}.account-stat-grid a:hover{transform:none}}

/* Account capsule navigation: one open parent at a time, with a soft slide. */
.account-nav-groups{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:100%;padding:3px 0;overflow-x:auto;scrollbar-width:none}
.account-nav-groups::-webkit-scrollbar{display:none}
.account-nav-group{position:relative;flex:0 0 auto}
.account-nav-group__toggle{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:7px 14px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-soft);font-weight:850;cursor:pointer;transition:background 180ms var(--ease),color 180ms var(--ease),transform 220ms var(--spring)}
.account-nav-group__toggle i{font-style:normal;font-size:14px;transition:transform 240ms var(--spring)}
.account-nav-group.is-open .account-nav-group__toggle,.account-nav-group__toggle:hover{background:var(--blue-100);color:var(--text)}
.account-nav-group.has-unread:not(.is-open) .account-nav-group__toggle{background:linear-gradient(145deg,#f9fbfd,#eef8ff);box-shadow:inset 0 0 0 1px #eef1f3}
.account-nav-group__unread{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f1f5f9;color:#5d6871;font-size:10px;line-height:1;box-shadow:0 4px 10px rgba(121,85,106,.14);transition:opacity 170ms var(--ease),transform 220ms var(--spring),width 180ms var(--ease)}
.account-nav-group.is-open .account-nav-group__unread{width:0;min-width:0;padding:0;opacity:0;overflow:hidden;transform:scale(.55)}
.account-nav-group.is-open .account-nav-group__toggle i{transform:rotate(180deg)}
.account-nav-group__items{position:absolute;z-index:70;top:calc(100% + 12px);left:50%;display:grid;gap:5px;width:max-content;min-width:176px;padding:8px;border:1px solid rgba(234, 241, 246, .96);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 20px 46px rgba(83,113,139,.18),inset 0 1px 0 #fff;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(-50%,-12px,0) scale(.96);transform-origin:50% 0;transition:opacity 190ms var(--ease),transform 280ms var(--spring),visibility 0s linear 280ms;backdrop-filter:blur(18px)}
.account-nav-group:first-child .account-nav-group__items{left:0;transform:translate3d(0,-12px,0) scale(.96);transform-origin:0 0}
.account-nav-group:last-child .account-nav-group__items{right:0;left:auto;transform:translate3d(0,-12px,0) scale(.96);transform-origin:100% 0}
.account-nav-group__items>a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 13px;border-radius:15px;white-space:nowrap;text-decoration:none;transition:background 180ms var(--ease),color 180ms var(--ease),transform 220ms var(--spring)}
.account-nav-group.is-open .account-nav-group__items{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(-50%,0,0) scale(1);transition-delay:0s}
.account-nav-group:first-child.is-open .account-nav-group__items,.account-nav-group:last-child.is-open .account-nav-group__items{transform:translate3d(0,0,0) scale(1)}
.account-nav-group__items>a:hover,.account-nav-group__items>a.is-current{background:linear-gradient(145deg,#eaf6ff,#f5f8fb);color:var(--text)}
.account-nav-group__items>a.is-current{box-shadow:inset 0 1px 0 #fff}
.notification-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.notification-type-grid article{display:grid;gap:5px;padding:14px 15px;border:1px solid #eef3f7;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fbfe)}
.notification-type-grid article p,.notification-type-grid article small{margin:0;color:var(--text-soft);font-size:12px;line-height:1.6}
.account-notification-catalog{padding-top:18px;margin-top:18px;border-top:1px solid var(--border)}
.account-notification-catalog h3{margin:0 0 12px;font-size:15px}
.account-notification-catalog .notification-type-grid{grid-template-columns:1fr}
.runtime-resource-grid{row-gap:22px}
.system-grid--host{row-gap:18px}
@media(max-width:900px){.account-nav-groups{justify-content:flex-start}.notification-type-grid{grid-template-columns:1fr}}

/* Account, role and system workspaces */
.user-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.user-stat-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:5px 13px;align-items:center;min-height:116px;padding:20px 22px;overflow:hidden;border-radius:26px}.user-stat-card::after{content:"";position:absolute;right:-24px;bottom:-34px;width:92px;height:92px;border-radius:34px;background:var(--user-stat-color);opacity:.78;transform:rotate(18deg)}.user-stat-card__mark{display:grid;grid-row:1/3;place-items:center;width:43px;height:43px;border-radius:16px;background:var(--user-stat-color);color:#6e8da5;font-size:20px;font-weight:900}.user-stat-card>span:not(.user-stat-card__mark){align-self:end;color:var(--text-soft);font-size:12px;font-weight:850}.user-stat-card strong{align-self:start;font-size:30px;line-height:1}.user-stat-card--blue{--user-stat-color:#e1f2fd}.user-stat-card--mint{--user-stat-color:#f2f5f8}.user-stat-card--pink{--user-stat-color:#eef4f8}.user-stat-card--yellow{--user-stat-color:#ebf2f7}
.user-directory{padding:22px;border-radius:29px}.user-filter-bar{grid-template-columns:minmax(210px,1.45fr) minmax(140px,.72fr) minmax(150px,.78fr) auto;padding:16px;margin:0 0 18px;border:1px solid #eff5f8;border-radius:22px;background:linear-gradient(145deg,#fbfdff,#f7fbfe)}.user-filter-bar .button{min-height:48px;border-radius:17px}.user-account-list{display:grid;gap:8px;min-width:0}.user-account-head,.user-account-row{display:grid;grid-template-columns:minmax(250px,1.55fr) minmax(170px,1fr) minmax(90px,.52fr) minmax(150px,.76fr);gap:16px;align-items:center}.user-account-head{padding:5px 18px;color:var(--text-faint);font-size:11px;font-weight:900;letter-spacing:.06em}.user-account-row{position:relative;padding:14px 18px;border:1px solid #f0f5f8;border-radius:21px;background:linear-gradient(145deg,#fff,#fbfdff);color:inherit;text-decoration:none;box-shadow:0 5px 15px rgba(88,119,145,.045);transition:transform 240ms var(--spring),border-color 190ms var(--ease),box-shadow 220ms var(--ease),background 190ms var(--ease)}.user-account-row::after{content:"›";position:absolute;right:13px;top:50%;opacity:0;color:#8fb2ca;transform:translate(-7px,-50%);transition:opacity 180ms var(--ease),transform 240ms var(--spring)}.user-account-row:hover{z-index:1;border-color:#e3eff8;background:linear-gradient(145deg,#fff,#f3faff);box-shadow:0 13px 28px rgba(88,119,145,.1);transform:translateY(-2px)}.user-account-row:hover::after{opacity:1;transform:translate(0,-50%)}.user-account-identity{display:flex;align-items:center;gap:12px;min-width:0}.user-account-identity>img,.user-account-identity>b{display:grid;flex:0 0 45px;place-items:center;width:45px;height:45px;border:1px solid #ebf3f8;border-radius:16px;background:linear-gradient(145deg,#e6f5ff,#f4f8fb);object-fit:cover;color:#7197b1;font-size:17px}.user-account-identity>span{min-width:0}.user-account-identity strong,.user-account-identity small,.user-account-identity em{display:block;min-width:0}.user-account-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-account-identity small{margin-top:3px;color:var(--text-soft);font-style:normal;overflow-wrap:anywhere}.user-account-identity em{margin-top:2px;color:var(--text-faint);font-size:11px;font-style:normal}.user-role-pills{display:flex;flex-wrap:wrap;gap:5px}.user-role-pills i{padding:6px 9px;border:1px solid #ecf3f7;border-radius:999px;background:#f7fbfd;color:#7893a7;font-size:11px;font-style:normal;font-weight:850}.user-account-login{padding-right:14px;color:var(--text-soft);font-size:12px;font-weight:750}
.choice-fieldset{min-width:0;padding:18px;border:1px solid #ecf3f7;border-radius:23px;background:linear-gradient(145deg,#fff,#f9fcfe)}.choice-fieldset legend{padding:0 9px;color:var(--text);font-weight:900}.role-choice-grid,.permission-choice-grid,.role-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice-pill,.permission-pill,.role-account-pill{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border:1px solid #edf3f7;border-radius:18px;background:#fff;cursor:pointer;transition:border-color 180ms var(--ease),background 180ms var(--ease),transform 210ms var(--spring),box-shadow 210ms var(--ease)}.choice-pill:hover,.permission-pill:hover,.role-account-pill:hover{border-color:#ddecf6;background:#f7fbff;transform:translateY(-1px)}.choice-pill:has(input:checked),.permission-pill:has(input:checked),.role-account-pill:has(input:checked){border-color:#d8ebf7;background:linear-gradient(145deg,#eff9ff,#f9fbfd);box-shadow:inset 0 1px 0 #fff,0 7px 17px rgba(105,151,181,.08)}.choice-pill input,.permission-pill input,.role-account-pill input{flex:0 0 auto}.choice-pill span,.permission-pill span,.role-account-pill>span:last-child{min-width:0}.choice-pill strong,.choice-pill small,.permission-pill strong,.permission-pill small,.role-account-pill strong,.role-account-pill small{display:block}.choice-pill small,.permission-pill small,.role-account-pill small{margin-top:3px;color:var(--text-faint);font-size:10px;overflow-wrap:anywhere}.account-editor-form{max-width:980px;margin-inline:auto;padding:clamp(22px,3vw,34px);border-radius:30px}.form-grid--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.form-actions{display:flex;justify-content:flex-end;padding-top:5px}
.role-editor-workspace{display:grid;gap:18px}.role-editor-identity{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:18px;align-items:center;padding:22px 24px;border-radius:29px}.role-editor-identity__mark{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#e2f4ff,#f0f5f9);color:#759bb5;font-size:25px;box-shadow:inset 0 1px 0 #fff}.role-editor-identity .field{margin:0}.role-editor-identity dl{display:flex;gap:8px;margin:0}.role-editor-identity dl div{min-width:82px;padding:11px 13px;border-radius:16px;background:#f6fafc}.role-editor-identity dt{color:var(--text-faint);font-size:10px;font-weight:850}.role-editor-identity dd{margin:3px 0 0;font-weight:900}.role-editor-section{padding:clamp(20px,3vw,30px);border-radius:29px}.permission-group-list{display:grid;gap:15px}.permission-group{min-width:0;padding:15px;border:1px solid #eff4f7;border-radius:22px}.permission-group legend{padding:0 9px;color:#698aa2;font-size:12px;font-weight:950}.permission-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.permission-pill{min-height:66px}.role-account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.role-account-pill__avatar{display:grid;flex:0 0 38px;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(145deg,#e2f4ff,#f0f5f9);color:#759ab4;font-weight:900}.role-editor-actions{position:sticky;z-index:4;bottom:18px;display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);box-shadow:0 16px 38px rgba(75,106,132,.14)}
.system-about-layout{display:grid;gap:18px}.system-about-hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:clamp(24px,4vw,42px);overflow:hidden;border-radius:34px;background:radial-gradient(circle at 94% 12%,rgba(255,223,237,.8),transparent 31%),linear-gradient(145deg,#fff,#f1f9ff)}.system-about-hero__orb{display:grid;place-items:center;width:84px;height:84px;border-radius:30px;background:linear-gradient(145deg,#dff3ff,#f1f6f9);color:#7298b4;font-size:32px;box-shadow:inset 0 1px 0 #fff,0 15px 34px rgba(90,127,154,.13)}.system-about-hero h2{margin:5px 0;font-size:clamp(1.8rem,4vw,3rem)}.system-about-hero p{margin:0;color:var(--text-soft)}.system-version-number{color:#7397b0;font-size:clamp(1.45rem,3vw,2.3rem)}.system-fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.system-fact-card{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;padding:18px;border-radius:23px}.system-fact-card>span{display:grid;grid-row:1/3;place-items:center;width:40px;height:40px;border-radius:14px;background:#eef8ff;color:#759ab4}.system-fact-card small{color:var(--text-faint);font-weight:800}.system-fact-card strong{overflow-wrap:anywhere}.system-name-drafts{padding:clamp(22px,3vw,32px);border-radius:30px}.name-draft-grid--bilingual{grid-template-columns:repeat(3,minmax(0,1fr))}.name-draft-grid--bilingual article{display:flex;align-items:center;gap:13px;min-height:86px}.name-draft-grid--bilingual article>span{flex:0 0 auto}.name-draft-grid--bilingual strong,.name-draft-grid--bilingual small{display:block}.name-draft-grid--bilingual small{margin-top:4px;color:var(--text-faint);font-size:11px;letter-spacing:.02em}
.interaction-mode-nav>div:first-child a{min-height:39px;padding-inline:17px;font-size:13px}.interaction-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:18px;align-items:start}.private-message-composer .button{justify-self:start}.broadcast-history article{align-items:start}.account-signout-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;grid-column:1/-1}.account-signout-panel h2{margin:3px 0 0}
.site-header--account{width:min(1380px,calc(100% - clamp(28px,4vw,64px)))}.site-header--account .site-nav{gap:12px}.site-nav__links--account{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.site-nav__links--account::-webkit-scrollbar{display:none}.site-nav__links--account a{flex:0 0 auto;min-height:40px;padding:6px 11px;font-size:12px;font-weight:850;white-space:nowrap}.account-exit-button{flex:0 0 auto;min-height:42px;padding-inline:15px;white-space:nowrap}
@media(max-width:1100px){.permission-choice-grid,.role-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.name-draft-grid--bilingual{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header--account .site-nav{grid-template-columns:auto 1fr auto}.site-header--account .site-nav__links{display:flex;justify-self:stretch}}
@media(max-width:900px){.user-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-account-head{display:none}.user-account-row{grid-template-columns:minmax(220px,1.4fr) minmax(150px,1fr) auto}.user-account-login{grid-column:2/4;padding-right:0}.role-editor-identity{grid-template-columns:auto 1fr}.role-editor-identity dl{grid-column:1/-1}.system-fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.interaction-split{grid-template-columns:1fr}.site-header--account{width:min(100% - 40px,760px)}.site-header--account .site-nav{grid-template-columns:1fr auto;gap:8px;border-radius:24px}.site-header--account .site-nav__links{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:flex-start;width:100%;padding:3px 1px 1px}.site-header--account .site-nav__actions{justify-content:flex-end}}
@media(max-width:620px){.user-stat-grid{gap:10px}.user-stat-card{min-height:97px;padding:15px;border-radius:21px}.user-stat-card__mark{width:36px;height:36px;border-radius:13px}.user-stat-card strong{font-size:25px}.user-directory{padding:14px}.user-filter-bar{padding:13px;border-radius:19px}.user-account-row{grid-template-columns:1fr auto;gap:11px;padding:13px}.user-account-identity{grid-column:1/-1}.user-role-pills{grid-column:1/-1}.user-account-login{grid-column:1/2}.role-choice-grid,.permission-choice-grid,.role-account-grid,.form-grid--two{grid-template-columns:1fr}.role-editor-identity{grid-template-columns:1fr;padding:18px}.role-editor-identity__mark{width:48px;height:48px;border-radius:17px}.role-editor-identity dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.role-editor-identity dl div{min-width:0;padding:9px}.role-editor-actions{bottom:10px}.system-about-hero{grid-template-columns:auto 1fr;padding:22px}.system-about-hero__orb{width:58px;height:58px;border-radius:21px}.system-about-hero .system-version-number{grid-column:1/-1}.system-fact-grid{grid-template-columns:1fr 1fr;gap:10px}.system-fact-card{grid-template-columns:auto 1fr;padding:13px}.name-draft-grid--bilingual{grid-template-columns:1fr}.account-signout-panel{align-items:flex-start;flex-direction:column}.account-signout-panel form,.account-signout-panel .button{width:100%}.site-header--account{position:relative;top:auto;width:calc(100% - 20px);margin-top:10px!important}.site-header--account .site-nav{padding:7px;border-radius:22px}.site-header--account .site-brand{padding-left:3px;font-size:14px}.site-header--account .site-brand .brand-mark{width:34px;height:34px}.site-header--account .account-exit-button{min-height:38px;padding:7px 11px;font-size:11px}.site-nav__links--account a{min-height:38px;padding:6px 10px}.account-page{padding-top:25px}}
@media(max-width:380px){.user-stat-grid,.system-fact-grid{grid-template-columns:1fr}.site-header--account .site-brand>span:last-child{display:none}.site-header--account .account-exit-button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.user-account-row,.choice-pill,.permission-pill,.role-account-pill{transition:none}.user-account-row:hover,.choice-pill:hover,.permission-pill:hover,.role-account-pill:hover{transform:none}}
[hidden]{display:none!important}

/* Cloudtrace global controls: themed selects, save alignment and image studio */
.themed-select{position:relative;display:block;min-width:0;width:100%}.themed-select__native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.themed-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,#fff,#f7fbfe);color:var(--text);font:inherit;font-weight:760;text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 #fff;transition:border-color 180ms var(--ease),box-shadow 220ms var(--ease),transform 200ms var(--spring),background 180ms var(--ease)}.themed-select__trigger:hover{border-color:#dfedf6;background:#f7fbff;box-shadow:0 8px 20px rgba(89,127,153,.08);transform:translateY(-1px)}.themed-select__trigger:focus-visible{outline:3px solid rgba(205, 231, 247, .42);outline-offset:2px}.themed-select__trigger i{width:8px;height:8px;border-right:2px solid #b9ccd9;border-bottom:2px solid #b9ccd9;transform:translateY(-2px) rotate(45deg);transition:transform 240ms var(--spring)}.themed-select.is-open .themed-select__trigger{border-color:#d6ebf5;box-shadow:0 10px 24px rgba(88,127,155,.12)}.themed-select.is-open .themed-select__trigger i{transform:translateY(2px) rotate(225deg)}.themed-select__menu{position:absolute;z-index:80;top:calc(100% + 7px);left:0;display:grid;width:max(100%,180px);max-height:280px;padding:7px;overflow:auto;border:1px solid rgba(227, 238, 245, .95);border-radius:19px;background:rgba(255,255,255,.97);box-shadow:0 20px 48px rgba(73,106,132,.16);backdrop-filter:blur(18px);opacity:0;transform:translateY(-7px) scale(.98);transform-origin:top;transition:opacity 150ms var(--ease),transform 190ms var(--spring)}.themed-select.is-open .themed-select__menu{opacity:1;transform:none}.themed-select__menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;padding:9px 11px;border:0;border-radius:13px;background:transparent;color:var(--text-soft);font:inherit;font-size:13px;font-weight:780;text-align:left;cursor:pointer;transition:background 150ms var(--ease),color 150ms var(--ease),transform 170ms var(--spring)}.themed-select__menu button:hover,.themed-select__menu button:focus-visible{outline:0;background:#edf8ff;color:#577f9a;transform:translateX(2px)}.themed-select__menu button.is-selected{background:linear-gradient(135deg,#e7f6ff,#f5f8fb);color:#6089a5}.themed-select__menu button i{display:grid;place-items:center;width:21px;height:21px;border-radius:8px;background:#dff2ff;color:#6c9bb9;font-size:11px;font-style:normal;opacity:0;transform:scale(.65);transition:opacity 150ms var(--ease),transform 190ms var(--spring)}.themed-select__menu button.is-selected i{opacity:1;transform:scale(1)}
.is-save-action{display:flex!important;width:max-content;margin-inline-start:auto!important;justify-self:end!important}.admin-form>.is-save-action,.form-stack>.is-save-action{align-self:flex-end}.account-form-actions,.form-actions,.sticky-form-actions,.role-editor-actions{justify-content:flex-end!important}.account-form-actions--start{justify-content:flex-end!important}.sticky-form-actions>span:first-child{margin-right:auto}.seo-save-bar{justify-content:flex-end}.seo-save-bar .button{margin-inline-start:auto}
.choice-control{display:grid!important;flex:0 0 25px;place-items:center;width:25px;height:25px;border:1px solid #e3ecf3;border-radius:9px;background:linear-gradient(145deg,#fff,#f2f8fc);box-shadow:inset 0 1px 0 #fff;color:#fff;transition:background 180ms var(--ease),border-color 180ms var(--ease),transform 210ms var(--spring),box-shadow 180ms var(--ease)}.choice-control::after{content:"✓";font-size:13px;font-weight:950;opacity:0;transform:scale(.4) rotate(-10deg);transition:opacity 160ms var(--ease),transform 220ms var(--spring)}.permission-pill>input,.role-account-pill>input,.seo-toggle-card>input{position:absolute;opacity:0;pointer-events:none}.permission-pill:has(input:checked) .choice-control,.role-account-pill:has(input:checked) .choice-control,.seo-toggle-card:has(input:checked) .choice-control{border-color:#c7e2f2;background:linear-gradient(145deg,#cdeafc,#bad9ec);box-shadow:0 6px 15px rgba(100,158,195,.22);transform:scale(1.04)}.permission-pill:has(input:checked) .choice-control::after,.role-account-pill:has(input:checked) .choice-control::after,.seo-toggle-card:has(input:checked) .choice-control::after{opacity:1;transform:scale(1) rotate(0)}
.seo-workspace{display:grid;gap:18px}.seo-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(23px,3vw,35px);border-radius:31px;background:radial-gradient(circle at 91% 18%,#eff4f8 0,transparent 29%),linear-gradient(145deg,#fff,#eff8ff)}.seo-intro h2{margin:5px 0;font-size:clamp(1.55rem,3vw,2.35rem)}.seo-intro p{margin:0;color:var(--text-soft)}.seo-intro__mark{display:grid;flex:0 0 70px;place-items:center;width:70px;height:70px;border-radius:25px;background:rgba(255,255,255,.78);color:#77a2bd;font-size:34px;box-shadow:0 14px 30px rgba(83,125,155,.12)}.seo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);gap:18px;align-items:start}.seo-form-column,.seo-preview-column{display:grid;gap:18px}.seo-preview-column{position:sticky;top:18px}.seo-panel,.seo-preview-card{padding:clamp(20px,2.8vw,29px);border-radius:28px}.seo-panel__fields{margin-top:18px}.seo-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.seo-toggle-card{position:relative;display:flex;align-items:center;gap:12px;min-height:78px;padding:14px;border:1px solid #ecf3f7;border-radius:19px;background:linear-gradient(145deg,#fff,#f9fcfe);cursor:pointer;transition:transform 210ms var(--spring),border-color 180ms var(--ease),box-shadow 210ms var(--ease)}.seo-toggle-card:hover{border-color:#ddecf6;box-shadow:0 9px 21px rgba(92,132,159,.08);transform:translateY(-1px)}.seo-toggle-card strong,.seo-toggle-card small{display:block}.seo-toggle-card small{margin-top:3px;color:var(--text-faint);font-size:11px;line-height:1.45}.seo-serp-preview{margin-top:18px;padding:18px;border:1px solid #eef3f6;border-radius:20px;background:#fff}.seo-serp-preview small,.seo-social-preview small{color:#7990a2}.seo-serp-preview h3{margin:7px 0 5px;color:#6d98b7;font-size:19px}.seo-serp-preview p,.seo-social-preview p{margin:0;color:var(--text-soft);font-size:13px;line-height:1.65}.seo-social-preview{padding:12px;overflow:hidden}.seo-social-preview__image{display:grid;place-items:center;min-height:170px;border-radius:20px;background:radial-gradient(circle at 68% 30%,#e9f0f6,transparent 28%),linear-gradient(145deg,#e1f3ff,#f9fbff);color:#7fa5bd;font-size:35px}.seo-social-preview>div:last-child{padding:15px 8px 7px}.seo-social-preview h3{margin:5px 0;font-size:17px}
.system-about-layout--cloudtrace{gap:18px}.system-version-lockup{display:grid;justify-items:end}.system-version-lockup small,.system-version-lockup span{color:var(--text-faint);font-size:10px;font-weight:900;letter-spacing:.08em}.system-version-lockup strong{margin:3px 0;color:#7199b4;font-size:clamp(1.5rem,3vw,2.25rem)}.system-about-story{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:18px}.system-identity-card,.system-developer-card,.system-runtime-panel{padding:clamp(21px,3vw,31px);border-radius:29px}.system-identity-card h2{margin:7px 0 10px;font-size:clamp(1.5rem,3vw,2.15rem)}.system-identity-card h2 small{color:#83a4ba;font-size:.5em}.system-identity-card p{max-width:680px;color:var(--text-soft);line-height:1.8}.system-identity-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.system-identity-tags span{padding:8px 12px;border-radius:999px;background:#edf8ff;color:#7197b0;font-size:11px;font-weight:850}.system-developer-card{display:flex;align-items:center;gap:18px;background:linear-gradient(145deg,#fff,#f7fafc)}.system-developer-card__mark{display:grid;flex:0 0 54px;place-items:center;width:54px;height:54px;border-radius:20px;background:#ecf2f7;color:#8f9fac;font-size:23px}.system-developer-card small,.system-developer-card strong,.system-developer-card p{display:block}.system-developer-card strong{margin:4px 0;font-size:19px}.system-developer-card p{margin:0;color:var(--text-faint);font-size:11px}.system-runtime-panel .system-fact-card{border:1px solid #eff5f8;background:linear-gradient(145deg,#fff,#f9fcfe);box-shadow:none}.status-dot{display:flex;align-items:center;gap:7px;color:#73828d;font-size:11px;font-weight:850}.status-dot i{width:8px;height:8px;border-radius:50%;background:#c7d2db;box-shadow:0 0 0 5px rgba(143,208,172,.15)}

/* About and protected update center */
.system-release-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:19px}.system-release-facts>div{min-width:0;padding:13px 14px;border:1px solid #eef5f9;border-radius:18px;background:rgba(248,252,255,.86)}.system-release-facts small,.system-release-facts strong{display:block}.system-release-facts small{margin-bottom:4px;color:var(--text-faint);font-size:10px;font-weight:850}.system-release-facts strong{overflow-wrap:anywhere;font-size:13px}.system-repository-link{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:12px;padding:8px 11px;border-radius:999px;background:#edf7fd;color:#678aa2;font-size:10px;font-weight:850;text-decoration:none;overflow-wrap:anywhere;transition:transform 220ms var(--spring),background 180ms var(--ease),color 180ms var(--ease)}.system-repository-link:hover{background:#e3f2fb;color:#53758d;transform:translateY(-2px)}.system-update-panel,.system-update-safety{padding:clamp(22px,3vw,32px);border-radius:30px}.system-update-heading{align-items:flex-start}.update-state-pill{display:inline-flex;align-items:center;justify-content:center;max-width:min(44%,420px);min-height:36px;padding:8px 13px;border:1px solid #e8f2f8;border-radius:999px;background:#f1f9fe;color:#65889f;font-size:10px;font-weight:850;text-align:center;overflow-wrap:anywhere}.system-update-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:20px}.system-update-summary article{min-width:0;padding:16px;border:1px solid #edf3f7;border-radius:20px;background:linear-gradient(145deg,#fff,#f6fbfe)}.system-update-summary small,.system-update-summary strong{display:block}.system-update-summary small{margin-bottom:6px;color:var(--text-faint);font-size:10px;font-weight:850}.system-update-summary strong{overflow-wrap:anywhere;font-size:14px}.system-update-progress{position:relative;height:11px;margin-top:18px;overflow:hidden;border-radius:999px;background:#f1f6f9;box-shadow:inset 0 1px 3px rgba(71,105,128,.09)}.system-update-progress i{display:block;width:var(--update-progress,0%);height:100%;border-radius:inherit;background:var(--progress-fill);box-shadow:0 0 15px rgba(120,174,209,.2);transition:width 520ms var(--spring)}.system-update-progress i::after{content:"";display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:update-progress-shimmer 1.5s linear infinite}.system-update-message{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}.system-update-message strong{font-size:12px}.system-update-message small{color:var(--text-faint);font-size:9px;text-align:right}.system-update-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:19px}.system-update-actions form{margin:0}.system-update-actions .button{min-width:112px}.system-update-actions .button:disabled{cursor:not-allowed;filter:saturate(.5);opacity:.58;transform:none;box-shadow:none}.system-update-notes{margin-top:20px;padding:17px 18px;border:1px solid #eef5f9;border-radius:20px;background:#f8fcfe}.system-update-notes p{margin:7px 0 0;white-space:pre-line;color:var(--text-soft);font-size:12px;line-height:1.75}.system-update-events{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}.system-update-events:empty{display:none}.system-update-events li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:11px 13px;border:1px solid #f0f5f8;border-radius:16px;background:rgba(251,253,255,.9);animation:update-event-in 300ms var(--spring) both}.system-update-events i{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#cde3f0;box-shadow:0 0 0 4px rgba(205, 227, 240, .18)}.system-update-events strong,.system-update-events small{display:block}.system-update-events strong{overflow-wrap:anywhere;font-size:11px}.system-update-events small{margin-top:3px;color:var(--text-faint);font-size:9px}.system-safety-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.system-safety-steps article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;min-width:0;padding:16px;border:1px solid #eef5f9;border-radius:21px;background:#f9fcfe}.system-safety-steps article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:13px;background:#e9f6fd;color:#7598ae;font-size:10px;font-weight:900}.system-safety-steps strong{font-size:12px}.system-safety-steps p{margin:5px 0 0;color:var(--text-soft);font-size:10px;line-height:1.65}.system-about-layout[data-update-status="error"] .update-state-pill{border-color:#ead6d5;background:#fff5f4;color:#a36e6b}.system-about-layout[data-update-status="downloaded"] .update-state-pill,.system-about-layout[data-update-status="current"] .update-state-pill{border-color:#d7e9e2;background:#f3fbf7;color:#688c7c}@keyframes update-progress-shimmer{from{transform:translateX(-120%)}to{transform:translateX(250%)}}@keyframes update-event-in{from{opacity:0;transform:translateY(-7px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:980px){.system-update-summary,.system-safety-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.system-release-facts{grid-template-columns:1fr}.system-update-panel,.system-update-safety{padding:19px;border-radius:25px}.system-update-heading{display:grid;gap:12px}.update-state-pill{justify-self:start;max-width:100%;text-align:left}.system-update-summary{gap:9px}.system-update-summary article{padding:13px;border-radius:17px}.system-update-message{align-items:flex-start;flex-direction:column;gap:4px}.system-update-message small{text-align:left}.system-update-actions{display:grid;grid-template-columns:1fr 1fr}.system-update-actions form,.system-update-actions .button{width:100%}.system-safety-steps{grid-template-columns:1fr}.system-developer-card{align-items:flex-start;flex-direction:column}.system-repository-link{border-radius:18px}}
@media(max-width:380px){.system-update-summary,.system-update-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.system-update-progress i,.system-repository-link,.system-update-events li{transition:none;animation:none}.system-update-progress i::after{display:none}}
.image-crop-dialog{width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;border:1px solid #ebf3f8;border-radius:32px;background:rgba(255,255,255,.98);box-shadow:0 30px 85px rgba(65,94,119,.24)}.image-crop-dialog::backdrop{background:rgba(232, 240, 246, .64);backdrop-filter:blur(8px)}.image-crop-dialog__head,.image-crop-dialog__actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 22px}.image-crop-dialog__head h2{margin:3px 0 0}.image-crop-stage{position:relative;display:grid;place-items:center;min-height:300px;padding:14px;overflow:hidden;background:linear-gradient(45deg,#f1f5f8 25%,transparent 25%),linear-gradient(-45deg,#f1f5f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f8 75%),linear-gradient(-45deg,transparent 75%,#f1f5f8 75%),#fbfdfe;background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.image-crop-stage canvas{display:block;max-width:100%;max-height:520px;border-radius:18px;box-shadow:0 15px 38px rgba(61,89,111,.18);cursor:grab;touch-action:none}.image-crop-stage canvas:active{cursor:grabbing}.image-crop-stage__hint{position:absolute;bottom:24px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.85);color:#748fa2;font-size:10px;font-weight:850;pointer-events:none;backdrop-filter:blur(10px)}.image-crop-controls{display:grid;grid-template-columns:1.15fr 1fr .8fr;gap:14px;padding:18px 22px;border-top:1px solid #eff5f8;border-bottom:1px solid #eff5f8;background:#fbfdff}.image-crop-control{display:grid;align-content:start;gap:9px}.image-crop-control>span{color:var(--text-faint);font-size:10px;font-weight:900}.image-crop-control--range{grid-template-columns:1fr auto;align-items:center}.image-crop-control--range>span{grid-column:1/-1}.image-crop-control--range input{width:100%;accent-color:#bfddef}.image-crop-control--range output{min-width:42px;color:#729ab5;font-size:11px;font-weight:900;text-align:right}.segmented-control{display:flex;gap:4px;padding:4px;border-radius:15px;background:#edf4f8}.segmented-control button{flex:1;min-height:34px;padding:6px 8px;border:0;border-radius:11px;background:transparent;color:#7891a4;font:inherit;font-size:11px;font-weight:850;cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease),box-shadow 180ms var(--ease)}.segmented-control button.is-active{background:#fff;color:#6b96b2;box-shadow:0 5px 13px rgba(76,112,139,.11)}.image-crop-dialog__actions{justify-content:flex-end}.upload-progress{position:relative;display:block;min-width:170px;height:29px;padding:7px 11px;overflow:hidden;border:1px solid #eaf2f7;border-radius:999px;background:#f5fafe;color:#688ba3}.upload-progress i{position:absolute;inset:0 auto 0 0;width:var(--upload-progress,0%);border-radius:inherit;background:var(--progress-fill);transition:width 180ms var(--ease)}.upload-progress i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.72) 50%,transparent 75%);animation:upload-shimmer 1.2s linear infinite}.upload-progress small{position:relative;z-index:1;display:block;font-size:10px;font-weight:900;text-align:center}.upload-progress.is-error{border-color:#e6ecf2;color:#81919d}.is-upload-complete .upload-progress{animation:upload-complete 350ms var(--spring)}@keyframes upload-shimmer{to{transform:translateX(100%)}}@keyframes upload-complete{50%{transform:scale(1.025)}}
@media(max-width:980px){.seo-layout{grid-template-columns:1fr}.seo-preview-column{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.system-about-story{grid-template-columns:1fr}.image-crop-controls{grid-template-columns:1fr 1fr}.image-crop-controls>.image-crop-control:first-child{grid-column:1/-1}}
@media(max-width:620px){.seo-toggle-grid,.seo-preview-column{grid-template-columns:1fr}.seo-intro__mark{width:52px;height:52px;flex-basis:52px;border-radius:19px}.system-version-lockup{grid-column:1/-1;justify-items:start}.image-crop-dialog{border-radius:24px}.image-crop-controls{grid-template-columns:1fr}.image-crop-controls>.image-crop-control:first-child{grid-column:auto}.image-crop-stage{min-height:230px}.is-save-action{width:100%;margin-inline-start:0!important}.admin-form>.is-save-action,.form-stack>.is-save-action{align-self:stretch}}

/* Account avatars use one consistent circular crop and a quiet upload surface. */
.account-avatar,.account-avatar--image,.profile-avatar-preview,.public-user-avatar,.nav-account-button img,.admin-user-avatar,.avatar--small,.avatar--large {
  aspect-ratio:1;
  border-radius:50%!important;
  object-fit:cover;
}
.profile-avatar-preview { width:132px; height:132px; }
.avatar-upload-controls { display:flex; align-items:center; justify-content:center; gap:10px; min-height:42px; }
.avatar-select-button { position:relative; overflow:hidden; justify-content:center; min-width:124px; cursor:pointer; }
.avatar-file-input { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.avatar-upload-controls .upload-progress { flex:1 1 170px; max-width:220px; }
.image-crop-dialog { transition: opacity 180ms var(--ease), transform 260ms var(--spring), filter 220ms var(--ease); }
.image-crop-dialog.is-avatar-mode .image-crop-stage canvas { border-radius:50%; }
.image-crop-dialog.is-avatar-mode [data-crop-ratio]:not([data-crop-ratio="1"]),
.image-crop-dialog.is-avatar-mode [data-crop-skip] { display:none; }
.image-crop-dialog.is-avatar-mode .image-crop-stage { background:radial-gradient(circle at 50% 45%,#fff 0 34%,#eef7ff 35% 58%,#eff6fa 59% 100%); }
@media (max-width:600px) {
  .avatar-upload-controls { align-items:stretch; flex-direction:column; }
  .avatar-upload-controls .upload-progress { max-width:none; }
  .profile-avatar-preview { width:112px; height:112px; }
}
.themed-select__native{min-width:1px!important;max-width:1px!important}
.themed-select__menu[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.themed-select__trigger,.themed-select__menu,.themed-select__menu button,.choice-control,.seo-toggle-card,.upload-progress i{transition:none}.upload-progress i::after{animation:none}}

/* Interaction inbox polish: cards are links, unread state is visible without shifting layout. */
.notification-card{position:relative;color:inherit;text-decoration:none;cursor:pointer;transition:transform 220ms var(--spring),border-color 190ms var(--ease),box-shadow 220ms var(--ease),background 190ms var(--ease)}
.notification-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(86,117,143,.11)}
.notification-card__arrow{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);font-weight:900;transition:transform 220ms var(--spring),background 180ms var(--ease)}
.notification-card:hover .notification-card__arrow{transform:translate(2px,-2px);background:var(--pink-100)}
.notification-card.is-unread::before,.interaction-row-card.is-unread::before,.moderation-card.is-unread::before{content:"";position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;background:#bee0f6;box-shadow:0 0 0 5px rgba(190, 224, 246, .18);animation:unread-dot-pulse 2.4s ease-in-out infinite}
.notification-card.is-unread,.interaction-row-card.is-unread{padding-right:38px}
.interaction-row-card{position:relative;color:inherit;text-decoration:none}
.interaction-row-card > a{display:grid;gap:6px;color:inherit;text-decoration:none}
.interaction-row-card.is-latest,.moderation-card.is-latest{border-color:#d8ecf7;box-shadow:0 10px 25px rgba(116,177,213,.13)}
.moderation-card{position:relative}
.moderation-card.is-unread::before{top:18px;right:18px}
.moderation-notifications li{list-style:none}
.moderation-notifications{padding:0;margin:0}
.moderation-notifications time{display:block}
.profile-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-top:18px}
.profile-content-grid > .card{min-width:0}
.profile-items{margin-top:0}
.home-admin-jumpbar a{text-decoration:none}
.choice-control{width:25px!important;height:25px!important;flex-basis:25px!important;border-radius:50%!important;position:relative;overflow:hidden;transition:background 220ms var(--spring),border-color 180ms var(--ease),transform 220ms var(--spring),box-shadow 220ms var(--ease)}
.choice-control::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;transform:scale(.2);transition:opacity 180ms var(--ease),transform 240ms var(--spring)}
.permission-pill:has(input:checked) .choice-control,.role-account-pill:has(input:checked) .choice-control,.seo-toggle-card:has(input:checked) .choice-control{background:linear-gradient(145deg,#cdeafc,#b5d6eb);border-color:#beddef;transform:scale(1.04)}
.permission-pill:has(input:checked) .choice-control::after,.role-account-pill:has(input:checked) .choice-control::after,.seo-toggle-card:has(input:checked) .choice-control::after{opacity:1;transform:scale(1)}
@keyframes unread-dot-pulse{0%,100%{box-shadow:0 0 0 4px rgba(143,202,240,.15)}50%{box-shadow:0 0 0 7px rgba(143,202,240,.04)}}
@media(max-width:700px){.profile-content-grid{grid-template-columns:1fr}.profile-items{margin-top:0}.notification-card{align-items:flex-start}.notification-card__arrow{align-self:flex-end}}

/* Unified administrator message center. */
.moderation-hub-nav a{color:inherit;text-decoration:none;cursor:pointer;isolation:isolate;transition:transform 260ms var(--spring),border-color 200ms var(--ease),box-shadow 240ms var(--ease),background 200ms var(--ease)}
.moderation-hub-nav a::after{z-index:-1;pointer-events:none}
.moderation-hub-nav a:hover{transform:translateY(-4px);border-color:#ddecf6;box-shadow:0 15px 32px rgba(100,151,184,.13)}
.moderation-hub-nav a.is-active{border-color:#cfe5f3;background:linear-gradient(145deg,#fff,#f0f9ff);box-shadow:0 0 0 4px rgba(216, 235, 247, .2),0 14px 30px rgba(100,151,184,.12)}
.moderation-hub-nav a.is-active strong{color:#6f9dbb}
.moderation-message-region{scroll-margin-top:110px}
.moderation-status-filter{justify-content:flex-start;padding:6px 0 18px;border:0;border-radius:0;background:transparent;box-shadow:none}
.moderation-inbox-list{display:grid;gap:10px}
.moderation-inbox-card{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px 14px;padding-right:46px}
.moderation-inbox-card strong{min-width:0}.moderation-inbox-card time{color:var(--text-faint);font-size:11px}.moderation-inbox-card>i{color:#8db6d0;font-size:18px;font-style:normal;transition:transform 220ms var(--spring)}
.moderation-inbox-card:hover>i{transform:translateX(4px)}
.moderation-message-card{overflow:clip;padding-right:72px;transition:opacity 220ms var(--ease),max-height 300ms var(--ease),margin 300ms var(--ease),padding 300ms var(--ease),border-width 300ms var(--ease),transform 240ms var(--spring),border-color 190ms var(--ease),box-shadow 230ms var(--ease)}
.moderation-message-card:target{border-color:#cde5f3;box-shadow:0 0 0 5px rgba(210, 232, 246, .18),0 16px 34px rgba(95,143,174,.12);animation:moderation-target-arrival 560ms var(--spring) both}
@keyframes moderation-target-arrival{from{opacity:.35;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.moderation-message-card.is-removing{max-height:0!important;padding-top:0;padding-bottom:0;margin-block:-7px;border-width:0;opacity:0;pointer-events:none;transform:translateX(24px) scale(.975)}
.moderation-card__header{padding-right:30px}.moderation-card__identity{display:grid!important;justify-items:start;gap:5px;min-width:0}.moderation-card__identity strong{overflow-wrap:anywhere}.moderation-card__identity small{color:var(--text-faint);font-size:11px}
.moderation-card__delete{position:absolute;z-index:3;top:50%;right:16px;margin:0;opacity:0;transform:translate(7px,-50%) scale(.82);transition:opacity 170ms var(--ease),transform 230ms var(--spring)}
.moderation-card__delete button{display:grid!important;place-items:center;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px;max-height:38px;aspect-ratio:1;padding:0!important;border:1px solid #f0f5f8;border-radius:50%!important;background:rgba(249,252,254,.96);box-shadow:0 6px 15px rgba(93,126,151,.1);color:#aac0cf;font:900 20px/1 inherit;cursor:pointer;transition:color 160ms var(--ease),border-color 160ms var(--ease),background 160ms var(--ease),transform 210ms var(--spring)}
.moderation-card:hover .moderation-card__delete,.moderation-card:focus-within .moderation-card__delete{opacity:1;transform:translateY(-50%)}
.moderation-card__delete button:hover,.moderation-card__delete button:focus-visible{border-color:#ebeff3;background:#f9fbfd;color:#9cafbd;transform:rotate(7deg) scale(1.06);outline:0}
.moderation-card__front-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;color:inherit;text-decoration:none;transition:color 180ms var(--ease),background 200ms var(--ease),box-shadow 220ms var(--ease),transform 220ms var(--spring)}
.moderation-card__front-link span{min-width:0;overflow-wrap:anywhere}.moderation-card__front-link i{color:#93b7cd;font-size:17px;font-style:normal;transition:transform 230ms var(--spring),color 180ms var(--ease)}
.moderation-card__front-link:hover,.moderation-card__front-link:focus-visible{background:linear-gradient(145deg,#f4faff,#fafcfd);box-shadow:inset 0 0 0 1px #e9f3f9;color:#547b96;outline:0;transform:translateX(2px)}
.moderation-card__front-link:hover i,.moderation-card__front-link:focus-visible i{color:#719db8;transform:translate(3px,-3px)}
.comment-card,.comment-reply,.message-card{scroll-margin-top:120px}
.comment-card:target,.comment-reply:target,.message-card:target{border-color:#cde5f3;box-shadow:0 0 0 5px rgba(210, 232, 246, .2),0 16px 34px rgba(95,143,174,.12);animation:public-interaction-target 620ms var(--spring) both}
@keyframes public-interaction-target{from{opacity:.45;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.moderation-edit-panel{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);transition:grid-template-rows 330ms var(--ease-release),opacity 210ms var(--ease),transform 300ms var(--spring)}
.moderation-edit-panel__inner{display:grid;gap:12px;min-height:0;overflow:hidden}
.moderation-edit-panel.is-open{grid-template-rows:1fr;opacity:1;transform:none}
.moderation-edit-panel .moderation-inline-editor,.moderation-edit-panel .moderation-reply{margin-top:2px}
.moderation-card__actions>[data-moderation-edit-toggle][aria-expanded="true"]{border-color:#d6e9f5;background:var(--blue-100);color:#668ca6}
.moderation-compose-drawer{overflow:hidden}.moderation-compose-drawer>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;list-style:none;cursor:pointer}.moderation-compose-drawer>summary::-webkit-details-marker{display:none}.moderation-compose-drawer>summary span{display:grid;gap:3px}.moderation-compose-drawer>summary small{color:var(--text-faint)}.moderation-compose-drawer>summary i{font-style:normal;transition:transform 260ms var(--spring)}.moderation-compose-drawer[open]>summary i{transform:rotate(180deg)}
.moderation-compose-drawer__body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 360ms var(--ease-release),opacity 220ms var(--ease)}.moderation-compose-drawer__body>.interaction-split{min-height:0;overflow:hidden;border-top:1px solid var(--border)}.moderation-compose-drawer[open] .moderation-compose-drawer__body{grid-template-rows:1fr;opacity:1}
@media(hover:none){.moderation-card__delete{opacity:1;transform:translateY(-50%)}}
@media(max-width:700px){.moderation-inbox-card{grid-template-columns:auto minmax(0,1fr) auto}.moderation-inbox-card time{grid-column:2}.moderation-inbox-card>i{grid-column:3;grid-row:1/3}.moderation-message-card{padding-right:62px}.moderation-card__header{align-items:flex-start;flex-direction:column}.moderation-card__delete{right:11px}.moderation-compose-drawer>summary{padding:18px}.moderation-compose-drawer .moderation-section{padding:18px}}
@media(prefers-reduced-motion:reduce){.moderation-hub-nav a,.moderation-message-card,.moderation-card__delete,.moderation-card__delete button,.moderation-edit-panel,.moderation-compose-drawer__body{transition:none!important}}

.system-runtime-panel .system-fact-card strong{font-size:12px;line-height:1.45}

/* Lightweight administrator navigation: solid fills and lines only.
   The accordion motion is preserved, while gradients, blur and layered shadows
   are kept out of the frequently repainted sidebar. */
.admin-nav-group,
.admin-subnav,
.admin-nav-group__toggle,
.admin-subnav__toggle,
.admin-nav .admin-nav-group__items a,
.admin-nav .admin-subnav__items a{
  background-image:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.admin-nav-group{
  border-color:transparent;
  background-color:transparent;
}
.admin-nav-group.is-open{
  border-color:#eef3f6;
  background-color:#fbfdff;
}
.admin-nav-group__toggle{
  background-color:transparent;
  transition:transform 240ms var(--spring),color 180ms var(--ease),background-color 180ms var(--ease),border-color 180ms var(--ease);
}
.admin-nav-group__toggle:hover,
.admin-nav-group__toggle:focus-visible{
  background-color:#f3f8fb;
}
.admin-nav-group__items{
  will-change:grid-template-rows,opacity;
}
.admin-nav .admin-nav-group__items a{
  border-color:transparent;
  background-color:transparent;
  transition:transform 240ms var(--spring),border-color 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease);
}
.admin-nav .admin-nav-group__items a:hover,
.admin-nav .admin-nav-group__items a:focus-visible{
  border-color:#ebf2f7;
  background-color:#f6fafc;
}
.admin-nav .admin-nav-group__items a.is-current{
  border-color:#e3eff6;
  background-color:#eef7fc;
}
.admin-subnav{
  border-color:#f0f5f7;
  background-color:#f8fafc;
  transition:border-color 190ms var(--ease),background-color 190ms var(--ease);
}
.admin-subnav.is-open{
  border-color:#e8f1f6;
  background-color:#fff;
}
.admin-subnav__toggle{
  background-color:transparent!important;
  transition:color 180ms var(--ease),background-color 180ms var(--ease)!important;
}
.admin-subnav__toggle:hover,
.admin-subnav__toggle:focus-visible{
  background-color:#f3f8fb!important;
}
.admin-subnav__items{
  will-change:grid-template-rows,opacity,transform;
}
.admin-subnav__items>div{
  margin-left:12px;
  border-left:1px solid #e9f2f7;
}
.admin-nav .admin-subnav__items a{
  margin-left:5px;
  border-color:transparent;
  background-color:transparent;
  transition:transform 210ms var(--spring),background-color 170ms var(--ease),border-color 170ms var(--ease),color 170ms var(--ease);
}
.admin-nav .admin-subnav__items a:hover,
.admin-nav .admin-subnav__items a:focus-visible{
  border-color:#ebf2f7;
  background-color:#f4f9fc;
}
.admin-nav .admin-subnav__items a.is-current{
  border-color:#e3eff6;
  background-color:#edf7fc;
}
.admin-nav .admin-subnav__items a.is-current::before{
  background:#bedff2;
  box-shadow:none;
}

/* Fixed, full-width dashboard. Font sizes follow the available viewport and no
   persisted layout editor is needed. */
.dashboard-live-shell{width:100%;max-width:none}
.dashboard-fixed-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.35vw,20px);
  width:100%;
  max-width:none;
}
.dashboard-fixed-grid>.dashboard-widget{
  --widget-font-scale:1;
  min-height:clamp(138px,14vw,190px);
  margin:0;
  border-color:#e9f2f7;
  background:#fbfdff;
  background-image:none;
  box-shadow:0 6px 18px rgba(76,103,126,.055);
}
.dashboard-fixed-grid>.dashboard-widget:hover{
  border-color:#dfecf4;
  box-shadow:0 11px 25px rgba(76,103,126,.09);
}
.dashboard-fixed-grid__hero{grid-column:1/-1;min-height:clamp(170px,17vw,230px)!important}
.dashboard-fixed-grid>.dashboard-widget--metric{grid-column:span 3}
.dashboard-fixed-grid__actions{grid-column:span 4}
.dashboard-fixed-grid__activity{grid-column:span 8;min-height:clamp(270px,27vw,370px)!important}
.dashboard-fixed-grid__status{grid-column:span 4;min-height:clamp(230px,23vw,320px)!important}
.dashboard-fixed-grid__progress{grid-column:span 8;min-height:clamp(230px,23vw,320px)!important}
.dashboard-fixed-grid .dashboard-widget__metric small{font-size:clamp(11px,.78vw,14px)}
.dashboard-fixed-grid .dashboard-widget__metric strong{font-size:clamp(30px,2.7vw,46px)}
.dashboard-fixed-grid .dashboard-widget__metric em{font-size:clamp(10px,.7vw,12px)}
.dashboard-fixed-grid .dashboard-widget__heading strong{font-size:clamp(15px,1.25vw,20px)}
.dashboard-fixed-grid .dashboard-widget__heading small{font-size:clamp(9px,.68vw,11px)}
.dashboard-fixed-grid .dashboard-widget__actions a,
.dashboard-fixed-grid .dashboard-widget__status>div,
.dashboard-fixed-grid .dashboard-widget__status>a{font-size:clamp(11px,.8vw,14px)}
.dashboard-fixed-grid .dashboard-widget__timeline strong{font-size:clamp(11px,.76vw,13px)}
.dashboard-fixed-grid .dashboard-widget__timeline small,
.dashboard-fixed-grid .dashboard-widget__timeline time{font-size:clamp(9px,.66vw,11px)}
@media(max-width:1180px){
  .dashboard-fixed-grid>.dashboard-widget--metric{grid-column:span 6}
  .dashboard-fixed-grid__actions,.dashboard-fixed-grid__status{grid-column:span 5}
  .dashboard-fixed-grid__activity,.dashboard-fixed-grid__progress{grid-column:span 7}
}
@media(max-width:760px){
  .dashboard-fixed-grid{grid-template-columns:1fr}
  .dashboard-fixed-grid>*{grid-column:1!important;min-height:0!important}
  .dashboard-fixed-grid__hero{grid-template-columns:auto minmax(0,1fr)}
  .dashboard-fixed-grid__hero>.badge{grid-column:1/-1;width:max-content}
  .dashboard-fixed-grid__activity{min-height:290px!important}
}
@media(max-width:460px){
  .dashboard-fixed-grid__hero{grid-template-columns:1fr}
  .dashboard-fixed-grid .dashboard-widget__hero-mark{width:52px;height:52px;border-radius:18px}
  .dashboard-fixed-grid .dashboard-widget__actions{grid-template-columns:1fr}
}

/* Measured-height accordion engine.
   Durations, easing, opacity and translation match the previous grid-track
   animation, but intrinsic grid sizing is no longer recalculated every frame. */
.admin-nav[data-height-accordion="true"] .admin-nav-group,
.admin-nav[data-height-accordion="true"] .admin-subnav{
  contain:layout style;
}
.admin-nav[data-height-accordion="true"] .admin-nav-group__items,
.admin-nav[data-height-accordion="true"] .admin-subnav__items{
  display:block;
  height:0;
  overflow:hidden;
  grid-template-rows:none;
  contain:layout style;
  will-change:auto;
}
.admin-nav[data-height-accordion="true"] .admin-nav-group.is-open>.admin-nav-group__items,
.admin-nav[data-height-accordion="true"] .admin-subnav.is-open>.admin-subnav__items{
  height:auto;
}
.admin-nav[data-height-accordion="true"][data-accordion-ready="true"] .admin-nav-group__items{
  transition:height 280ms var(--spring),opacity 160ms var(--ease);
}
.admin-nav[data-height-accordion="true"][data-submenus-ready="true"] .admin-subnav__items{
  transition:height 300ms var(--spring),opacity 180ms var(--ease),transform 240ms var(--spring),visibility 0s linear 300ms;
}
.admin-nav[data-height-accordion="true"][data-submenus-ready="true"] .admin-subnav.is-open>.admin-subnav__items{
  transition:height 300ms var(--spring),opacity 190ms var(--ease) 45ms,transform 250ms var(--spring),visibility 0s;
}
.admin-nav[data-height-accordion="true"] :is(.admin-nav-group__items,.admin-subnav__items).is-height-animating{
  will-change:height,opacity,transform;
}
.admin-nav[data-height-accordion="true"] .admin-nav-group:not(.is-open)>.admin-nav-group__items:not(.is-height-animating),
.admin-nav[data-height-accordion="true"] .admin-subnav:not(.is-open)>.admin-subnav__items:not(.is-height-animating){
  content-visibility:hidden;
}
html[data-motion="reduce"] .admin-nav[data-height-accordion="true"] :is(.admin-nav-group__items,.admin-subnav__items){
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  html[data-motion="system"] .admin-nav[data-height-accordion="true"] :is(.admin-nav-group__items,.admin-subnav__items){
    transition:none!important;
  }
}

/* Homepage large surfaces share one quiet pale-blue outline and warm-white fill.
   Button styling intentionally remains untouched. */
.home-v2 :is(
  .card,
  .moment-note,
  .showcase-card__media,
  .cover-symbol
){
  border-color:#e6f2f9!important;
  background-color:rgba(253,254,255,.94)!important;
  background-image:none!important;
}
.home-v2 :is(.hero-story,.featured-note,.showcase-card,.about-paper,.about-profile,.about-skills,.planet-links,.guest-invite,.home-cta,.home-empty){
  box-shadow:0 8px 24px rgba(91,132,160,.07);
}
.home-v2 .moment-note{
  box-shadow:0 5px 15px rgba(91,132,160,.055);
}
.home-v2 .showcase-card__media,
.home-v2 .cover-symbol{
  color:#8bbbd8;
}
.home-v2 .showcase-card__media>.icon,
.home-v2 .cover-symbol>.icon{
  color:#8bbbd8;
}
.home-v2 .showcase-card__media>i,
.home-v2 .cover-symbol>i{
  color:#a5c5d9;
}

/* Personal center card rhythm and responsive layouts */
.account-page{--account-grid-gap:20px;--account-card-padding:clamp(24px,2.35vw,32px);--account-inner-gap:16px}
.account-page>header:not(.account-hero){margin-bottom:clamp(26px,3vw,36px)}
.account-page>header:not(.account-hero) h1{line-height:1.12}
.account-panel{min-width:0;padding:var(--account-card-padding);border-radius:30px}
.account-panel h2{margin:0}
.account-section-heading{display:flex;align-items:center;min-width:0;margin-bottom:22px}
.account-section-heading--split{justify-content:space-between;gap:16px}
.account-section-heading .badge,.account-section-heading .text-link{flex:0 0 auto}
.account-columns{gap:var(--account-grid-gap)}
.account-overview-grid{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)}
.account-profile-grid{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)}
.account-security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-privacy-grid{grid-template-columns:minmax(320px,.84fr) minmax(0,1.16fr)}
.account-columns--wide{grid-template-columns:minmax(0,1.48fr) minmax(300px,.62fr);gap:var(--account-grid-gap)}
.account-panel.form-stack,.account-panel .form-stack{gap:var(--account-inner-gap)}
.account-panel .field{gap:9px;min-width:0;margin:0}
.account-panel .field>span{font-weight:850}
.account-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),textarea,select){width:100%;min-width:0}
.account-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:4px}
.account-form-actions--start{justify-content:flex-start}
.account-form-actions form{margin:0}
.account-avatar-panel{align-content:start}
.account-avatar-panel .profile-avatar-preview{margin:2px auto 6px}
.account-profile-form textarea{min-height:142px;resize:vertical}
.account-danger-form{margin:0}
.account-check-list{display:grid;gap:8px}
.account-check-list .check-row{min-height:48px;padding:11px 13px;border-color:#f0f5f8;background:rgba(249,252,254,.82)}
.account-check-list .check-row:hover{border-color:var(--blue-200);background:var(--blue-50)}
.account-stat-grid{gap:18px;margin-bottom:var(--account-grid-gap)}
.account-stat-grid a{align-content:center;min-height:118px;padding:22px 24px;gap:5px}
.account-stat-grid a strong{line-height:1.05}
.account-detail-grid{gap:14px}
.account-detail-grid div{min-width:0;padding:17px 18px}
.account-detail-grid dd{overflow-wrap:anywhere;line-height:1.55}
.notification-mini-list{gap:11px}
.notification-mini-list a{align-items:center;min-height:52px;padding:13px 15px;gap:14px}
.notification-mini-list a strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-mini-list a small{flex:0 0 auto}
.account-interaction-grid{gap:var(--account-grid-gap);align-items:start}
.account-timeline-list{gap:12px}
.timeline-list .account-timeline-item{gap:16px;padding:18px;border-radius:20px}
.account-timeline-copy{display:grid;gap:6px;min-width:0}
.account-timeline-copy :is(strong,span,small){display:block;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.account-timeline-copy span{line-height:1.65}
.account-timeline-copy small{line-height:1.55}
.account-timeline-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:14px;border-top:1px solid #f2f6f9}
.account-timeline-actions form{margin:0}
.account-timeline-actions .button{min-height:40px;padding:8px 15px}
.account-interaction-stats{margin-bottom:14px}
.account-interaction-stats dd{font-size:1.15rem}
.pagination--compact{padding:18px 0 0}
.account-notification-heading{align-items:flex-start;justify-content:space-between;gap:18px}
.account-notification-heading>div{min-width:0}
.account-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.account-filter-row .button{min-height:38px;padding:8px 14px}
.notification-list{gap:12px}
.notification-card{align-items:center;gap:20px;padding:19px 20px;border-radius:21px}
.notification-card__copy{display:grid;gap:5px;min-width:0}
.notification-card h3{margin:3px 0 0;line-height:1.4}
.notification-card p{margin:0;line-height:1.65;overflow-wrap:anywhere}
.notification-card small{color:var(--text-faint)}
.notification-card__action{flex:0 0 auto;margin:0}
.account-preference-panel{align-content:start}
.account-security-actions{display:grid;gap:18px}
.account-security-actions>form+form{padding-top:18px;border-top:1px solid #f1f5f8}
.account-session-list{gap:12px}
.session-list.account-session-list article{padding:18px 20px;border-radius:20px}
.account-session-list article>div{display:grid;gap:4px}
.account-session-list :is(span,small){line-height:1.5}
.account-signout-panel{min-height:126px;padding-block:24px}
.account-comment-form{width:min(100%,760px);margin-inline:auto}
.account-bookmark-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:0}
.account-bookmark-card{display:grid;align-content:start;gap:10px;min-height:168px;padding:22px 23px;border-radius:25px}
.account-bookmark-card small{color:var(--text-faint);font-weight:800}
.account-bookmark-card strong{font-size:1.08rem;line-height:1.45}
.account-bookmark-card span{color:var(--text-soft);line-height:1.65}
.account-empty-card{grid-column:1/-1;min-height:128px}

@media(max-width:1000px){
  .account-overview-grid{grid-template-columns:minmax(0,1fr) minmax(310px,.86fr)}
  .account-profile-grid{grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr)}
  .account-privacy-grid{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
  .account-bookmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .account-overview-grid,.account-profile-grid,.account-security-grid,.account-privacy-grid,.account-columns--wide{grid-template-columns:1fr}
  .account-avatar-panel .profile-avatar-preview{margin-inline:auto}
  .account-interaction-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .account-page{--account-grid-gap:14px;--account-card-padding:20px;--account-inner-gap:14px;padding-inline:12px;padding-bottom:88px}
  .account-page>header:not(.account-hero){margin-bottom:23px}
  .account-hero{gap:15px;padding:20px;border-radius:27px}
  .account-hero>div:last-child{min-width:0}
  .account-hero h1{font-size:clamp(1.5rem,8vw,2rem);overflow-wrap:anywhere}
  .account-panel{border-radius:25px}
  .account-section-heading{margin-bottom:18px}
  .account-section-heading--split{align-items:flex-start}
  .account-stat-grid{gap:12px;margin-bottom:14px}
  .account-stat-grid a{min-height:104px;padding:17px 18px;border-radius:22px}
  .account-stat-grid a strong{font-size:26px}
  .account-detail-grid{gap:10px}
  .account-detail-grid div{padding:14px 15px;border-radius:16px}
  .account-form-actions{justify-content:stretch}
  .account-form-actions>.button,.account-form-actions>input[type="submit"]{flex:1 1 180px;width:100%}
  .account-check-list{gap:7px}
  .timeline-list .account-timeline-item{padding:15px;gap:13px;border-radius:18px}
  .account-timeline-actions{padding-top:12px}
  .account-timeline-actions .button{width:auto}
  .account-notification-heading{align-items:stretch;flex-direction:column}
  .account-notification-heading>form,.account-notification-heading>form .button{width:100%}
  .notification-card{align-items:stretch;padding:16px;gap:14px;border-radius:19px}
  .notification-card__action,.notification-card__action .button{width:100%}
  .session-list.account-session-list article{padding:16px}
  .account-signout-panel{min-height:0;padding-block:20px}
  .account-bookmark-grid{gap:14px}
  .account-bookmark-card{min-height:148px;padding:19px 20px;border-radius:22px}
}

/* Unified interaction cards and editable administrator controls. */
.interaction-row-card,.broadcast-history article,.moderation-notifications li,.interaction-empty-card{display:grid;gap:6px;padding:15px 17px;border:1px solid #eef3f7;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fbfe);box-shadow:0 6px 16px rgba(86,117,143,.055);transition:transform 230ms var(--spring),border-color 190ms var(--ease),background 190ms var(--ease),box-shadow 230ms var(--ease)}
.interaction-row-card:hover,.broadcast-history article:hover,.moderation-notifications li:hover{border-color:#deecf6;background:linear-gradient(145deg,#fff,#eff8ff);box-shadow:0 12px 26px rgba(86,117,143,.11);transform:translateY(-2px)}
.moderation-card:focus-within,.interaction-row-card:focus-within,.broadcast-history article:focus-within,.moderation-notifications li:focus-within{border-color:#d8e9f5;background:linear-gradient(145deg,#fafdff,#eef8ff);box-shadow:0 0 0 4px rgba(217, 235, 247, .24),0 13px 28px rgba(86,117,143,.1)}
.moderation-card:active,.interaction-row-card:active,.broadcast-history article:active{transform:translateY(0) scale(.995)}
.moderation-inline-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:13px;border:1px solid #eff5f8;border-radius:18px;background:rgba(248,251,254,.88)}
.moderation-inline-editor .field{margin:0}.moderation-inline-editor textarea{min-height:78px}.moderation-inline-editor .is-save-action{align-self:end}
.moderation-card__actions{padding-top:2px}
@media(max-width:700px){.moderation-inline-editor{grid-template-columns:1fr}.moderation-inline-editor .is-save-action{width:100%}}

/* Final rhythm override for the system status dashboard. */
.admin-main>.admin-section{margin-bottom:22px}
.runtime-resource-grid{row-gap:22px}
.system-grid--host{row-gap:18px}
@media(max-width:620px){.admin-main>.admin-section{margin-bottom:16px}.runtime-resource-grid{row-gap:16px}}

/* Admin visual integrity pass: consistent type, spacing, controls and overflow. */
.admin-main{--admin-content-gap:18px;min-width:0;max-width:100%;overflow-x:clip}
.admin-main>*{min-width:0;max-width:100%}
.admin-main :where(.card,.admin-panel,.admin-section,section,article,form,fieldset,header,footer,div,dl){min-width:0}
.admin-main :where(h1,h2,h3,h4,p,label,legend,dt,dd,strong,small,span,a,button){overflow-wrap:anywhere}
.admin-main :where(.section-heading,.panel-heading){align-items:center;gap:16px}
.admin-main .section-heading h2{font-size:clamp(21px,2.1vw,25px);line-height:1.25}
.admin-main .panel-heading h2{font-size:20px;line-height:1.3}
.admin-main :where(.empty-state,.compact-empty) h2{font-size:22px;line-height:1.3}
.admin-main :where(.card,.admin-panel){max-width:100%}
.admin-main :where(.form-grid,.content-admin-grid,.management-grid,.settings-sections,.system-grid,.stat-grid){column-gap:18px;row-gap:18px;align-items:start}
.admin-main :where(.button,button.button,input.button[type="submit"],.icon-button){box-sizing:border-box;align-items:center;justify-content:center;margin-block:0;line-height:1.25;text-align:center;vertical-align:middle}
.admin-main .button{white-space:normal}
.admin-main :where(.button-row,.form-actions,.sticky-form-actions,.role-editor-actions,.managed-page-card__actions,.menu-editor-actions){align-items:center;gap:10px}
.admin-main :where(.sticky-form-actions,.role-editor-actions){min-height:72px;padding-block:12px}
.admin-main .admin-form>.is-save-action,.admin-main .form-stack>.is-save-action{margin-top:18px}
.admin-main :where(input,textarea,select,button){max-width:100%;font-family:inherit}

/* Sidebar text remains readable at all three navigation levels. */
.admin-nav{width:100%;max-width:100%;overflow-x:hidden}
.admin-nav-group,.admin-nav-group__items,.admin-nav-group__items>div,.admin-subnav,.admin-subnav__items,.admin-subnav__items>div{max-width:100%}
.admin-nav-group__toggle{grid-template-columns:21px minmax(0,1fr) 16px;gap:10px;min-height:60px;padding:10px 11px}
.admin-nav-group__toggle>span{min-width:0;gap:3px}
.admin-nav-group__toggle strong{font-size:14px;line-height:1.25}
.admin-nav-group__toggle small{font-size:10.5px;line-height:1.4}
.admin-nav .admin-nav-group__items a{min-height:50px;padding:9px 12px 9px 17px}
.admin-nav .admin-nav-group__items a span{font-size:12.5px;line-height:1.32}
.admin-nav .admin-nav-group__items a small{font-size:10px;line-height:1.42}
.admin-subnav__toggle{min-height:54px!important;padding:10px 10px 10px 13px!important}
.admin-subnav__toggle strong{font-size:12.5px;line-height:1.32}
.admin-subnav__toggle small{overflow:visible;font-size:9.5px;line-height:1.4;text-overflow:clip;white-space:normal}
.admin-nav .admin-subnav__items a{min-height:42px;padding:8px 10px 8px 17px}
.admin-nav .admin-subnav__items a span{font-size:11.5px;line-height:1.35}
.admin-nav .admin-subnav__items a small{font-size:9px;line-height:1.4}

/* The default dashboard keeps content inside its widgets and reflows on tablets. */
.dashboard-widget-canvas{--dashboard-row-size:30px}
.dashboard-widget{align-content:start}
.dashboard-widget__metric,.dashboard-widget__heading>span,.dashboard-widget__status>div{max-width:100%}
.dashboard-widget__metric em,.dashboard-widget__heading :where(strong,small),.dashboard-widget__status :where(span,strong){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-widget__timeline>.compact-empty{display:flex;grid-template-columns:none;align-items:center;min-height:74px;padding:14px}
.dashboard-widget__timeline>.compact-empty strong{overflow:visible;font-size:calc(11px*var(--widget-font-scale));text-overflow:clip;white-space:normal}
.footer-column-card input,.footer-link-row input{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid #ebf2f6;border-radius:14px;background:linear-gradient(145deg,#fff,#f5faff);box-shadow:inset 0 1px 1px rgba(73,103,128,.035);color:var(--text);font:inherit;outline:0;transition:border-color 170ms var(--ease),box-shadow 180ms var(--ease),background 170ms var(--ease),transform 180ms var(--ease)}
.footer-column-card input:hover,.footer-link-row input:hover{border-color:#ddecf5;background:#fff}
.footer-column-card input:focus,.footer-link-row input:focus{border-color:#cde5f3;background:#fff;box-shadow:0 0 0 3px rgba(190, 223, 243, .22);transform:translateY(-1px)}
@media(min-width:701px) and (max-width:1180px){
  .dashboard-widget-canvas:not(.is-layout-editing){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:14px;min-height:0;margin:0}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget{grid-column:auto!important;grid-row:auto!important;min-height:154px;margin:0}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--hero,.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--list{grid-column:1/-1!important}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--hero{min-height:180px}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--actions,.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--status{min-height:242px}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--list{min-height:330px}
}

/* Final form-control and readability pass for every admin content page. */
.admin-main input[type="checkbox"],
.admin-main input[type="radio"]{
  appearance:none!important;
  display:grid;
  flex:0 0 20px;
  place-items:center;
  width:20px;
  height:20px;
  margin:0;
  border:2px solid #d9e7f0;
  border-radius:50%!important;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(73,105,130,.07),0 2px 7px rgba(88,132,164,.07);
  cursor:pointer;
  transition:transform 190ms var(--spring),border-color 170ms var(--ease),background 180ms var(--ease),box-shadow 190ms var(--ease);
}
.admin-main input[type="checkbox"]::after,
.admin-main input[type="radio"]::after{content:none!important}
.admin-main input[type="checkbox"]:checked,
.admin-main input[type="radio"]:checked{
  border-color:#bedcee;
  background:#c7e3f3;
  box-shadow:inset 0 0 0 4px #eef8ff,0 4px 10px rgba(92,151,190,.2);
  transform:scale(1.05);
}
.admin-main input[type="checkbox"]:focus-visible,
.admin-main input[type="radio"]:focus-visible{outline:3px solid rgba(190, 222, 242, .3);outline-offset:3px}
.admin-main input[type="checkbox"]:disabled,
.admin-main input[type="radio"]:disabled{cursor:not-allowed;filter:saturate(.45);opacity:.58}

/* Security settings use a real themed switch and a compact confirmation card. */
.site-security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.security-setting-card,
.security-confirm-card{position:relative;min-width:0;border:1px solid #ecf2f7;border-radius:25px;background:linear-gradient(145deg,#fff,#f4faff);box-shadow:inset 0 1px 0 #fff,0 9px 23px rgba(83,117,143,.07)}
.security-setting-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;min-height:138px;padding:22px;cursor:pointer;transition:transform 220ms var(--spring),border-color 180ms var(--ease),box-shadow 220ms var(--ease),background 180ms var(--ease)}
.security-setting-card:hover{border-color:#deecf5;background:linear-gradient(145deg,#fff,#edf8ff);box-shadow:inset 0 1px 0 #fff,0 14px 30px rgba(83,117,143,.11);transform:translateY(-2px)}
.security-setting-card>input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.security-setting-card__switch{position:relative;display:block;width:46px;height:27px;border:1px solid #dfebf2;border-radius:999px;background:#edf3f7;box-shadow:inset 0 2px 5px rgba(82,112,136,.09);transition:border-color 180ms var(--ease),background 190ms var(--ease),box-shadow 190ms var(--ease)}
.security-setting-card__switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(72,105,131,.18);transition:transform 230ms var(--spring),background 180ms var(--ease)}
.security-setting-card>input:checked+.security-setting-card__switch{border-color:#c5e0f0;background:linear-gradient(90deg,#cde8f6,#ddf1fb);box-shadow:inset 0 1px 4px rgba(80,137,174,.1),0 0 0 4px rgba(209, 234, 249, .13)}
.security-setting-card>input:checked+.security-setting-card__switch::after{background:#fff;transform:translateX(19px)}
.security-setting-card>input:focus-visible+.security-setting-card__switch{outline:3px solid rgba(190, 222, 242, .3);outline-offset:3px}
.security-setting-card strong,
.security-setting-card small,
.security-confirm-card strong,
.security-confirm-card small{display:block;min-width:0}
.security-setting-card strong,.security-confirm-card strong{font-size:15px;line-height:1.45}
.security-setting-card small,.security-confirm-card small{margin-top:6px;color:var(--text-soft);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.security-confirm-card{grid-column:1/-1;display:grid;grid-template-columns:20px minmax(0,1fr);gap:13px;align-items:center;padding:18px 22px;cursor:pointer;transition:border-color 180ms var(--ease),background 180ms var(--ease),box-shadow 200ms var(--ease)}
.security-confirm-card:hover,.security-confirm-card:has(input:checked){border-color:#ddecf5;background:linear-gradient(145deg,#fff,#eef8ff);box-shadow:inset 0 1px 0 #fff,0 11px 25px rgba(83,117,143,.09)}
.site-security-grid>.sticky-form-actions{grid-column:1/-1;margin:0}

@media(max-width:700px){
  .site-security-grid{grid-template-columns:1fr;gap:13px}
  .security-setting-card{min-height:0;padding:18px;border-radius:22px}
  .security-confirm-card{grid-column:auto;padding:17px 18px;border-radius:22px}
  .site-security-grid>.sticky-form-actions{grid-column:auto}
  .interaction-row-card>small{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere}
}

/* Consolidated site identity and balanced content cards. */
.site-identity-workspace{display:grid;gap:18px}
.site-identity-form{position:static;padding:26px}
.site-identity-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-identity-logo{align-items:stretch}
.site-identity-logo>.card{height:100%}
.role-editor-identity dd{max-width:100%;overflow-wrap:anywhere;word-break:break-word}

@media(max-width:900px){
  .admin-main :where(.form-grid,.content-admin-grid,.management-grid,.settings-sections,.system-grid,.stat-grid){column-gap:14px;row-gap:14px}
}
@media(max-width:620px){
  .admin-topbar__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;width:100%}
  .admin-topbar__actions .button{min-width:0;min-height:44px;padding:8px 11px;font-size:12px;line-height:1.25}
  .admin-main{--admin-content-gap:14px}
  .admin-main :where(.section-heading,.panel-heading){align-items:flex-start;flex-direction:column;gap:10px}
  .admin-main .section-heading h2{font-size:21px}
  .admin-main .panel-heading h2{font-size:19px}
  .admin-main :where(.form-grid,.content-admin-grid,.management-grid,.settings-sections,.system-grid,.stat-grid){grid-template-columns:1fr;column-gap:12px;row-gap:12px}
  .user-filter-bar{grid-template-columns:1fr!important;gap:11px}
  .user-filter-bar .button{width:100%}
  .user-stat-grid{grid-template-columns:1fr 1fr}
  .site-identity-form{padding:19px}
  .site-identity-form .form-grid{grid-template-columns:1fr}
  .site-identity-logo{gap:14px}
  .role-editor-identity dl{grid-template-columns:1fr}
}

/* Site management: pages, navigation, footer and verification */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.choice-grid--compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.choice-card{position:relative;display:flex;align-items:center;gap:11px;min-width:0;min-height:58px;padding:13px 15px;border:1px solid #ecf3f7;border-radius:19px;background:linear-gradient(145deg,#fff,#f7fbfe);cursor:pointer;transition:transform 210ms var(--spring),border-color 190ms ease,background 190ms ease,box-shadow 210ms ease}.choice-card:hover{transform:translateY(-2px);border-color:#dcecf7;box-shadow:0 10px 23px rgba(90,128,155,.09)}.choice-card:has(input:checked){border-color:#d6eaf6;background:linear-gradient(145deg,#eaf7ff,#f9fbfc);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(98,143,175,.1)}.choice-card input[type="checkbox"],.choice-card input[type="radio"]{appearance:none;display:grid;flex:0 0 20px;place-items:center;width:20px;height:20px;margin:0;border:2px solid #d7e5ef;border-radius:50%;background:#fff;box-shadow:inset 0 1px 2px rgba(75,111,138,.07);transition:transform 190ms var(--spring),border-color 180ms ease,background 180ms ease,box-shadow 180ms ease}.choice-card input:checked{border-color:#bfddef;background:#cde6f6;box-shadow:inset 0 0 0 4px #edf8ff,0 3px 9px rgba(102,159,196,.2);transform:scale(1.05)}.choice-card>span{min-width:0}.choice-card strong,.choice-card small{display:block}.choice-card small{margin-top:3px;color:var(--text-faint);font-size:11px}.choice-card--inline{width:max-content;max-width:100%;margin-top:12px}
.site-management-grid,.managed-page-grid,.site-identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.managed-page-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.managed-page-card,.menu-editor-card,.page-block-card,.footer-column-card,.admin-layout-parent{position:relative;overflow:hidden;border:1px solid rgba(207, 224, 236, .52);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,249,255,.92));box-shadow:0 14px 34px rgba(84,115,139,.08),inset 0 1px 0 #fff;transition:transform 240ms var(--spring),box-shadow 240ms ease,border-color 240ms ease,opacity 200ms ease}
.managed-page-card:hover,.menu-editor-card:hover,.page-block-card:hover{transform:translateY(-3px);border-color:#deecf7;box-shadow:0 19px 42px rgba(84,115,139,.12),inset 0 1px 0 #fff}
.managed-page-card{display:grid;gap:15px;padding:22px}
.managed-page-card header,.menu-editor-card>header,.page-block-card>header,.footer-column-card>header,.admin-layout-parent>header{display:flex;align-items:center;gap:12px}
.managed-page-card header>div,.menu-editor-card>header>div{min-width:0;flex:1}.managed-page-card header small,.menu-editor-card header small{display:block;margin-top:3px;color:var(--text-faint)}
.managed-page-card__actions,.menu-editor-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.system-page-editor,.footer-settings-editor,.admin-layout-editor{display:grid;gap:18px}
.system-page-editor__blocks{display:grid;gap:18px}.page-block-editor,.menu-editor-list,.footer-column-editor,.admin-layout-parent-list{display:grid;gap:15px}
.page-block-card,.menu-editor-card,.footer-column-card,.admin-layout-parent{padding:19px}.page-block-card>header strong,.admin-layout-parent>header strong{flex:1}
.page-block-card.is-dragging,.menu-editor-card.is-dragging,.admin-layout-parent.is-dragging,[data-layout-child].is-dragging{opacity:.48;transform:scale(.985)}
.page-block-card.is-removing{opacity:0;transform:scale(.94) translateY(-8px)}
.drag-grip{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:12px;background:#edf7fd;color:#86a9c1;font:900 15px/1 system-ui;cursor:grab}.drag-grip:active{cursor:grabbing;transform:scale(.92)}
.menu-order-form{margin-bottom:16px}.menu-editor-card>form{margin-top:18px}.menu-editor-card>header .status-pill{margin-left:auto}
.footer-column-card{display:grid;gap:13px}.footer-column-card header input{flex:1;font-weight:850}.footer-link-row{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(150px,1.3fr) auto;gap:9px;margin-top:9px}
.admin-layout-parent-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.admin-layout-children{display:grid;min-width:0;gap:8px;margin-top:14px;overflow:clip}.admin-layout-children article{display:flex;align-items:center;min-width:0;gap:10px;padding:10px 12px;border:1px solid #edf5f9;border-radius:16px;background:#f8fcff;transition:transform 180ms var(--spring),background 180ms ease}.admin-layout-children article:hover{transform:translateX(3px);background:#eef8fe}
.site-identity-logo{display:grid;grid-template-columns:1fr 1fr;gap:18px}.site-logo-preview{display:grid;place-items:center;gap:10px;min-height:190px;border-radius:24px;background:radial-gradient(circle at 50% 20%,#fff 0,#eff8ff 68%,#f1f5f8 100%)}.site-logo-preview img{max-width:150px;max-height:110px;object-fit:contain}.site-logo-preview__fallback{display:grid;place-items:center;width:90px;height:90px;border-radius:29px;background:#fff;color:#89b8d6;box-shadow:0 15px 35px rgba(100,142,173,.14)}
.site-address-list{display:grid;gap:10px}.site-address-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.custom-page-blocks{display:grid;gap:16px;margin-block:22px}.custom-page-block{padding:22px;border:1px solid rgba(211, 226, 236, .48);border-radius:25px;background:linear-gradient(145deg,#fff,#f2f9fe);box-shadow:0 12px 30px rgba(94,124,147,.075)}.custom-page-block--note{background:linear-gradient(145deg,#fafcfd,#f0f9ff)}.custom-page-block--quote{border-left:5px solid #daecf8}.custom-page-block--wide{padding:28px}.custom-page-block h2{margin-top:0}
.site-footer{display:grid;grid-template-columns:minmax(230px,1.2fr) minmax(280px,1.8fr);gap:30px}.site-footer__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px}.site-footer__column{display:grid;align-content:start;gap:8px}.site-footer__column a{text-decoration:none;color:var(--text-soft);transition:transform 180ms var(--spring),color 180ms ease}.site-footer__column a:hover{transform:translateX(4px);color:#78a9c8}
@media(max-width:820px){.site-management-grid,.site-identity-grid,.site-identity-logo,.admin-layout-parent-list,.site-footer{grid-template-columns:1fr}.site-footer__columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.managed-page-grid,.choice-grid{grid-template-columns:1fr}.managed-page-card,.menu-editor-card,.page-block-card,.footer-column-card,.admin-layout-parent{padding:16px;border-radius:21px}.footer-link-row,.site-address-row{grid-template-columns:1fr}.site-footer__columns{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.managed-page-card,.menu-editor-card,.page-block-card{transition:none}}

/* Site identity, domain and protocol controls. */
.site-logo-workspace{display:grid;grid-template-columns:minmax(280px,.86fr) minmax(340px,1.14fr);gap:18px;align-items:start}
.site-logo-preview-card,.site-logo-upload-card,.site-address-card{padding:26px}
.site-logo-preview-card{display:grid;gap:20px}
.site-logo-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;min-height:132px;padding:22px;border:1px solid #ecf3f7;border-radius:26px;background:linear-gradient(145deg,#f5fbff,#f8fafc);transition:transform 320ms var(--spring),box-shadow 260ms var(--ease),border-color 260ms var(--ease)}
.site-logo-preview:hover{transform:translateY(-3px) scale(1.006);border-color:#e0eff9;box-shadow:0 18px 42px rgba(93,119,154,.12)}
.site-logo-preview img,.site-logo-preview__fallback{display:grid;place-items:center;width:88px;height:88px;padding:8px;border:1px solid rgba(255,255,255,.9);border-radius:27px;background:rgba(255,255,255,.82);box-shadow:0 12px 28px rgba(91,122,149,.12);object-fit:contain}
.site-logo-preview__fallback .icon{width:40px;height:40px;color:#7399b4}
.site-logo-preview strong{min-width:0;font-size:clamp(22px,3vw,32px);overflow-wrap:anywhere}
.site-logo-preview-card>form{display:flex;justify-content:flex-end}
.site-logo-upload-card{display:grid;gap:18px;overflow:hidden;transition:transform 300ms var(--spring),box-shadow 260ms var(--ease)}
.site-logo-upload-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.site-logo-select{position:relative;width:max-content;max-width:100%;overflow:hidden}
.site-logo-file-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-logo-upload-card .upload-progress{width:min(100%,360px)}
.site-logo-upload-card.is-upload-complete{animation:site-logo-upload-complete 420ms var(--spring)}
.site-access-workspace{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(380px,1.28fr);gap:18px;align-items:start}
.site-address-card{display:grid;gap:12px;position:sticky;top:20px}
.site-address-card h2{margin:0}
.site-address-card>strong{padding:14px 16px;border:1px solid #ecf3f8;border-radius:18px;background:#f4faff;color:#5f7f96;overflow-wrap:anywhere}
.site-address-card .badge{width:max-content;max-width:100%;overflow-wrap:anywhere}
.site-access-form{min-width:0}
.image-crop-dialog[open]{animation:image-studio-arrive 360ms var(--spring) both}
.image-crop-dialog[open] .image-crop-stage{animation:image-studio-stage-arrive 460ms var(--spring) 60ms both}
.image-crop-dialog.is-logo-mode .image-crop-stage canvas{border-radius:24px}
@keyframes image-studio-arrive{from{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.972)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes image-studio-stage-arrive{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes site-logo-upload-complete{50%{transform:translateY(-3px) scale(1.008)}}
@media(max-width:900px){.site-logo-workspace,.site-access-workspace{grid-template-columns:1fr}.site-address-card{position:static}}
@media(max-width:620px){.site-logo-preview-card,.site-logo-upload-card,.site-address-card{padding:19px}.site-logo-preview{min-height:112px;padding:16px;border-radius:22px}.site-logo-preview img,.site-logo-preview__fallback{width:70px;height:70px;border-radius:22px}.site-logo-select{width:100%}.site-logo-upload-card .upload-progress{width:100%}}
html[data-motion="reduce"] .site-logo-preview,html[data-motion="reduce"] .site-logo-upload-card,html[data-motion="reduce"] .image-crop-dialog[open],html[data-motion="reduce"] .image-crop-dialog[open] .image-crop-stage{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){.site-logo-preview,.site-logo-upload-card,.image-crop-dialog[open],.image-crop-dialog[open] .image-crop-stage{animation:none;transition:none}}

/* Three-level administrator navigation. */
.admin-subnav{display:grid;min-width:0;border:1px solid transparent;border-radius:17px;background:rgba(247,249,251,.62);transition:border-color 210ms var(--ease),background 210ms var(--ease),box-shadow 240ms var(--ease)}
.admin-subnav+.admin-subnav{margin-top:5px}
.admin-subnav.is-open{border-color:#edf1f4;background:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(72,88,108,.055)}
.admin-subnav__toggle{display:grid!important;grid-template-columns:minmax(0,1fr) 20px!important;gap:8px!important;align-items:center!important;width:100%!important;min-height:48px!important;padding:9px 10px 9px 13px!important;border:0!important;border-radius:16px!important;background:transparent!important;color:#59636f!important;text-align:left!important;cursor:pointer!important;box-shadow:none!important;transform:none!important}
.admin-subnav__toggle>span{display:grid;gap:2px;min-width:0}
.admin-subnav__toggle strong{font-size:12px;font-weight:920;line-height:1.25}
.admin-subnav__toggle small{overflow:hidden;color:#9aa4ad;font-size:8px;font-weight:760;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.admin-subnav__toggle>.icon{width:14px;height:14px;color:#a1adb7;transform:rotate(0);transition:transform 260ms var(--spring),color 180ms var(--ease)}
.admin-subnav.is-open>.admin-subnav__toggle>.icon{color:#7e99ad;transform:rotate(180deg)}
.admin-subnav__toggle:hover,.admin-subnav__toggle:focus-visible{background:linear-gradient(145deg,#fff,#f1f8fd)!important;color:#455362!important;outline:0!important}
.admin-subnav__items{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-5px);visibility:hidden}
.admin-subnav__items>div{display:grid;gap:3px;min-height:0;padding:0 8px;overflow:hidden}
.admin-subnav.is-open>.admin-subnav__items{grid-template-rows:1fr;opacity:1;transform:none;visibility:visible}
.admin-subnav.is-open>.admin-subnav__items>div{padding-bottom:8px}
.admin-nav[data-submenus-ready="true"] .admin-subnav__items{transition:grid-template-rows 300ms var(--spring),opacity 180ms var(--ease),transform 240ms var(--spring),visibility 0s linear 300ms}
.admin-nav[data-submenus-ready="true"] .admin-subnav.is-open>.admin-subnav__items{transition:grid-template-rows 300ms var(--spring),opacity 190ms var(--ease) 45ms,transform 250ms var(--spring),visibility 0s}
.admin-nav .admin-subnav__items a{position:relative;display:grid;gap:2px;min-height:37px;padding:7px 10px 7px 17px;border:1px solid transparent;border-radius:12px;background:rgba(248,251,253,.76);color:#75808a;text-decoration:none;transition:transform 210ms var(--spring),background 170ms var(--ease),border-color 170ms var(--ease),color 170ms var(--ease)}
.admin-nav .admin-subnav__items a::before{position:absolute;top:50%;left:7px;width:5px;height:5px;border-radius:50%;background:#dfebf2;content:"";transform:translateY(-50%) scale(.65);transition:transform 210ms var(--spring),background 170ms var(--ease),box-shadow 170ms var(--ease)}
.admin-nav .admin-subnav__items a span{font-size:10px;font-weight:880}.admin-nav .admin-subnav__items a small{font-size:7px;font-weight:740}
.admin-nav .admin-subnav__items a:hover,.admin-nav .admin-subnav__items a:focus-visible{border-color:#ecf3f8;background:#f4faff;color:#58758a;transform:translateX(2px)}
.admin-nav .admin-subnav__items a.is-current{border-color:#e5f0f7;background:linear-gradient(145deg,#fff,#edf8ff);color:#506f85;box-shadow:0 5px 12px rgba(84,119,144,.075)}
.admin-nav .admin-subnav__items a.is-current::before{background:#bedff3;box-shadow:0 0 0 4px rgba(190, 223, 243, .16);transform:translateY(-50%) scale(1)}
.admin-menu--compact .admin-subnav__toggle small,.admin-menu--compact .admin-subnav__items a small{display:none}

/* Dashboard widget catalogue, live canvas and snap-grid editor. */
.dashboard-live-shell{min-width:0}.dashboard-widget-canvas{--dashboard-row-size:24px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(var(--dashboard-rows),var(--dashboard-row-size));grid-auto-rows:var(--dashboard-row-size);min-height:calc(var(--dashboard-rows)*var(--dashboard-row-size));margin:-3px}
.dashboard-widget{position:relative;display:flex;align-items:center;gap:16px;min-width:0;min-height:0;padding:clamp(14px,2vw,22px);margin:3px;overflow:hidden;border:1px solid rgba(234, 240, 245, .9);border-radius:clamp(18px,2.2vw,27px);background:linear-gradient(145deg,#fff,var(--widget-color));box-shadow:0 9px 24px rgba(76,103,126,.075),inset 0 1px 0 rgba(255,255,255,.92);font-size:calc(1rem*var(--widget-font-scale));transition:transform 260ms var(--spring),box-shadow 220ms var(--ease),border-color 190ms var(--ease),background 190ms var(--ease),opacity 180ms var(--ease)}
.dashboard-widget:not(.is-layout-editing .dashboard-widget):hover{z-index:2;border-color:#e0ecf5;box-shadow:0 15px 34px rgba(76,103,126,.12);transform:translateY(-3px)}
.dashboard-widget.is-widget-disabled{display:none}.dashboard-widget .soft-icon{flex:0 0 48px;width:48px;height:48px;border-radius:17px;background:rgba(255,255,255,.72);color:#7294ac}.dashboard-widget .soft-icon .icon{width:23px;height:23px}
.dashboard-widget__metric{display:grid;gap:2px;min-width:0}.dashboard-widget__metric small{color:var(--text-soft);font-size:calc(11px*var(--widget-font-scale));font-weight:860}.dashboard-widget__metric strong{font-size:calc(34px*var(--widget-font-scale));line-height:1}.dashboard-widget__metric em{overflow:hidden;color:var(--text-faint);font-size:calc(9px*var(--widget-font-scale));font-style:normal;font-weight:720;text-overflow:ellipsis;white-space:nowrap}
.dashboard-widget--hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px}.dashboard-widget__hero-mark{display:grid;place-items:center;width:62px;height:62px;border-radius:21px;background:rgba(255,255,255,.78);color:#7397af;font-size:26px;font-weight:950;box-shadow:0 9px 24px rgba(80,112,137,.1)}.dashboard-widget--hero h2{margin:4px 0;font-size:calc(clamp(20px,2.4vw,32px)*var(--widget-font-scale))}.dashboard-widget--hero p{margin:0;color:var(--text-soft);font-size:calc(11px*var(--widget-font-scale))}
.dashboard-widget--list,.dashboard-widget--actions,.dashboard-widget--status,.dashboard-widget--progress{display:grid;align-content:start;gap:14px}.dashboard-widget__heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.dashboard-widget__heading>span{display:grid;gap:2px}.dashboard-widget__heading small{color:#879ba9;font-size:calc(8px*var(--widget-font-scale));font-weight:900;letter-spacing:.11em}.dashboard-widget__heading strong{font-size:calc(16px*var(--widget-font-scale))}.dashboard-widget__heading>a{color:#718da1;font-size:10px;font-weight:850;text-decoration:none}.dashboard-widget__heading>b{font-size:calc(23px*var(--widget-font-scale))}
.dashboard-widget__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-widget__actions a{display:flex;align-items:center;gap:8px;min-height:45px;padding:9px 11px;border:1px solid rgba(229, 238, 243, .85);border-radius:15px;background:rgba(255,255,255,.72);color:#60798b;font-size:calc(10px*var(--widget-font-scale));font-weight:900;text-decoration:none;transition:transform 210ms var(--spring),background 170ms var(--ease),box-shadow 180ms var(--ease)}.dashboard-widget__actions a:hover{background:#fff;box-shadow:0 8px 18px rgba(81,111,134,.1);transform:translateY(-2px)}.dashboard-widget__actions .icon{width:17px;height:17px}
.dashboard-widget__timeline{display:grid;gap:7px;min-height:0;overflow:auto}.dashboard-widget__timeline>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:35px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.55)}.dashboard-widget__timeline i{width:6px;height:6px;border-radius:50%;background:#c5e1f3}.dashboard-widget__timeline span{display:grid;min-width:0}.dashboard-widget__timeline strong{overflow:hidden;font-size:calc(9px*var(--widget-font-scale));text-overflow:ellipsis;white-space:nowrap}.dashboard-widget__timeline small,.dashboard-widget__timeline time{color:var(--text-faint);font-size:calc(7px*var(--widget-font-scale));font-style:normal}
.dashboard-widget__status{display:grid;gap:8px}.dashboard-widget__status>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.6);font-size:calc(9px*var(--widget-font-scale))}.dashboard-widget__status>a{color:#66869d;font-size:calc(9px*var(--widget-font-scale));font-weight:850;text-decoration:none}.dashboard-widget__progress{height:12px;overflow:hidden;border-radius:999px;background:rgba(232, 240, 244, .72);box-shadow:inset 0 1px 3px rgba(70,97,117,.08)}.dashboard-widget__progress i{display:block;height:100%;border-radius:inherit;background:var(--progress-fill);transition:width 650ms var(--spring)}.dashboard-widget--progress p{margin:0;color:var(--text-soft);font-size:calc(10px*var(--widget-font-scale))}
.dashboard-widget-catalog{padding:26px;scroll-margin-top:110px}.dashboard-widget-catalog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.dashboard-widget-option{--widget-color:#eaf6ff;position:relative;display:grid;grid-template-columns:82px minmax(0,1fr) 24px;gap:13px;align-items:center;min-height:112px;padding:14px;border:1px solid #eef2f6;border-radius:22px;background:linear-gradient(145deg,#fff,var(--widget-color));cursor:pointer;box-shadow:0 7px 18px rgba(78,105,128,.055);transition:transform 240ms var(--spring),border-color 180ms var(--ease),box-shadow 220ms var(--ease),filter 180ms var(--ease)}.dashboard-widget-option:hover{border-color:#e1ecf3;box-shadow:0 13px 27px rgba(78,105,128,.1);transform:translateY(-3px)}.dashboard-widget-option:not(.is-enabled){filter:saturate(.55);opacity:.7}.dashboard-widget-option>input{position:absolute;opacity:0;pointer-events:none}.dashboard-widget-option>span:nth-of-type(2){display:grid;gap:4px;min-width:0}.dashboard-widget-option strong{font-size:14px}.dashboard-widget-option small{color:var(--text-soft);font-size:10px;line-height:1.5}.dashboard-widget-option em{width:max-content;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.76);color:#8299a9;font-size:8px;font-style:normal;font-weight:850}.dashboard-widget-option>b{display:block;width:20px;height:20px;border:2px solid #dfe8ef;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:background 180ms var(--ease),border-color 180ms var(--ease),transform 220ms var(--spring)}.dashboard-widget-option.is-enabled>b{border-color:#bfddf0;background:#bfddf0;transform:scale(1.06)}.dashboard-widget-option__preview{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;width:82px;height:72px;padding:9px;border:1px solid rgba(255,255,255,.86);border-radius:17px;background:rgba(255,255,255,.7);box-shadow:0 7px 17px rgba(83,110,132,.08)}.dashboard-widget-option__preview i{border-radius:5px;background:#e3f0f7}.dashboard-widget-option__preview i:first-child{grid-column:1/-1}.dashboard-widget-option__preview i:nth-child(2){grid-column:1/3}.dashboard-widget-option--list .dashboard-widget-option__preview{grid-template-columns:1fr}.dashboard-widget-option--hero .dashboard-widget-option__preview i:first-child{grid-row:1/-1;grid-column:1}.dashboard-widget-option--progress .dashboard-widget-option__preview i:nth-child(3){grid-column:1/-1;height:5px;align-self:end;border-radius:999px}
.dashboard-builder{position:fixed;z-index:220;inset:0;display:grid;grid-template-rows:1fr;padding:16px;background:rgba(239,246,251,.92);opacity:0;visibility:hidden;pointer-events:none;backdrop-filter:blur(20px);transition:opacity 230ms var(--ease),visibility 0s linear 230ms}.dashboard-builder.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 250ms var(--ease),visibility 0s}.dashboard-builder>form{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0}.dashboard-builder__toolbar{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:11px;padding:12px 14px;border-radius:23px;box-shadow:0 16px 36px rgba(62,91,115,.13);animation:dashboard-toolbar-arrive 380ms var(--spring) both}.dashboard-builder__toolbar>div:first-child{display:grid;min-width:180px;margin-right:auto}.dashboard-builder__toolbar>div:first-child strong{font-size:14px}.dashboard-color-control{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid #ebf1f5;border-radius:14px;background:#f8fbfd;color:var(--text-soft);font-size:9px;font-weight:850}.dashboard-color-control input{width:34px;height:28px;padding:2px;border:0;border-radius:9px;background:#fff;cursor:pointer}.dashboard-color-presets{display:flex;gap:5px}.dashboard-color-presets button{width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ebf0f4;cursor:pointer;transition:transform 180ms var(--spring)}.dashboard-color-presets button:hover{transform:translateY(-2px) scale(1.08)}.dashboard-builder__state{padding:6px 10px;border-radius:999px;background:#eef8ff;color:#7897ad;font-size:9px;font-weight:850}.dashboard-builder__state[data-tone="error"]{background:#f4f8fb;color:#8698a5}.dashboard-builder__state[data-tone="dirty"]{background:#eff5f9;color:#6e8292}.dashboard-builder__viewport{min-height:0;overflow:auto;border-radius:26px}.dashboard-builder__stage{width:max(100%,960px);min-height:100%;padding:18px;border-radius:26px}.dashboard-builder .dashboard-widget-canvas{background-image:radial-gradient(circle,#d9e5ee 1.1px,transparent 1.2px);background-position:0 0;background-size:12px 12px;min-height:max(720px,calc(var(--dashboard-rows)*var(--dashboard-row-size)));padding:0;touch-action:none}.dashboard-builder .dashboard-widget{overflow:visible;cursor:default}.dashboard-builder .dashboard-widget::after{position:absolute;z-index:8;inset:4px;border:1px dashed transparent;border-radius:inherit;content:"";pointer-events:none;transition:border-color 160ms var(--ease),box-shadow 180ms var(--ease)}.dashboard-builder .dashboard-widget.is-selected{z-index:9;box-shadow:0 18px 42px rgba(68,105,133,.18),0 0 0 3px rgba(190, 223, 243, .18)}.dashboard-builder .dashboard-widget.is-selected::after{border-color:#bad9eb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}.dashboard-builder .dashboard-widget.is-collision{animation:dashboard-collision 260ms var(--spring);box-shadow:0 0 0 4px rgba(235,164,188,.28)}.dashboard-widget__drag{position:absolute;z-index:12;top:8px;left:50%;display:grid;place-items:center;min-width:50px;min-height:24px;padding:3px 10px;border:1px solid #e7eff5;border-radius:999px;background:rgba(255,255,255,.92);color:#7a95a8;font-size:8px;font-weight:900;opacity:0;cursor:grab;transform:translate(-50%,-4px);transition:opacity 160ms var(--ease),transform 220ms var(--spring),box-shadow 170ms var(--ease)}.dashboard-widget.is-selected .dashboard-widget__drag{opacity:1;transform:translate(-50%,0)}.dashboard-widget__drag:active{cursor:grabbing}.dashboard-resize{position:absolute;z-index:13;width:13px!important;min-width:13px!important;height:13px!important;min-height:13px!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;background:#bddcee!important;box-shadow:0 0 0 1px #b4cede,0 3px 8px rgba(65,97,122,.18)!important;opacity:0;transition:opacity 140ms var(--ease),transform 180ms var(--spring)!important}.dashboard-widget.is-selected .dashboard-resize{opacity:1}.dashboard-resize--nw{top:-5px;left:-5px;cursor:nwse-resize}.dashboard-resize--n{top:-5px;left:50%;cursor:ns-resize;transform:translateX(-50%)}.dashboard-resize--ne{top:-5px;right:-5px;cursor:nesw-resize}.dashboard-resize--e{top:50%;right:-5px;cursor:ew-resize;transform:translateY(-50%)}.dashboard-resize--se{right:-5px;bottom:-5px;cursor:nwse-resize}.dashboard-resize--s{bottom:-5px;left:50%;cursor:ns-resize;transform:translateX(-50%)}.dashboard-resize--sw{bottom:-5px;left:-5px;cursor:nesw-resize}.dashboard-resize--w{top:50%;left:-5px;cursor:ew-resize;transform:translateY(-50%)}.dashboard-widget.is-dragging,.dashboard-widget.is-resizing{z-index:20;opacity:.9;transition:none}.dashboard-exit-dialog{width:min(560px,calc(100% - 28px))}.dashboard-exit-dialog p{margin:0;padding:0 22px 8px;color:var(--text-soft);line-height:1.75}.dashboard-exit-dialog .button-row{padding:14px 22px 22px}.dashboard-builder-open{overflow:hidden}
@keyframes dashboard-toolbar-arrive{from{opacity:0;filter:blur(8px);transform:translateY(-14px) scale(.98)}}@keyframes dashboard-collision{50%{transform:translateX(4px)}}
@media(max-width:1100px){.dashboard-widget-catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-builder__toolbar{align-items:stretch}.dashboard-builder__state{order:5;width:100%;text-align:center}}
@media(max-width:900px){.dashboard-widget-canvas:not(.is-layout-editing){display:grid;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;gap:12px;min-height:0;margin:0}.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget{grid-column:1!important;grid-row:auto!important;min-height:128px;margin:0}.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--hero{min-height:170px}.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--list{min-height:320px}.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--actions,.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--status{min-height:230px}}
@media(max-width:700px){.dashboard-widget-catalog{padding:19px}.dashboard-widget-catalog .section-heading{align-items:stretch;flex-direction:column}.dashboard-widget-catalog .section-heading .button{width:100%}.dashboard-widget-catalog__grid{grid-template-columns:1fr}.dashboard-widget-option{grid-template-columns:70px minmax(0,1fr) 22px;min-height:100px}.dashboard-widget-option__preview{width:70px;height:62px}.dashboard-builder{padding:8px}.dashboard-builder__toolbar{gap:8px;padding:10px;border-radius:20px}.dashboard-builder__toolbar>div:first-child{width:100%;margin:0}.dashboard-color-control{flex:1}.dashboard-color-presets{order:4;width:100%;justify-content:center}.dashboard-builder__toolbar>.button{flex:1}.dashboard-builder__stage{padding:12px}.dashboard-widget--hero{grid-template-columns:auto minmax(0,1fr)}.dashboard-widget--hero>.badge{grid-column:1/-1;width:max-content}.dashboard-widget__actions{grid-template-columns:1fr 1fr}}
html[data-motion="reduce"] .admin-subnav__items,html[data-motion="reduce"] .dashboard-widget,html[data-motion="reduce"] .dashboard-builder,html[data-motion="reduce"] .dashboard-builder__toolbar{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.admin-subnav__items,.dashboard-widget,.dashboard-builder,.dashboard-builder__toolbar{animation:none!important;transition:none!important}}

/* Complete appearance and component gallery. */
.component-page--complete{max-width:1180px}
.component-hero{max-width:860px;margin-bottom:32px}
.component-hero p{max-width:720px;margin-inline:auto}
.component-index{position:sticky;z-index:12;top:102px;display:flex;gap:7px;max-width:100%;padding:9px;margin:0 0 24px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;background:rgba(255,255,255,.9);backdrop-filter:blur(18px)}
.component-index::-webkit-scrollbar{display:none}
.component-index a{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:38px;padding:6px 14px;border-radius:var(--radius-pill);color:var(--text-soft);font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap;transition:color 170ms var(--ease),background 180ms var(--ease),transform 210ms var(--spring)}
.component-index a:hover,.component-index a:focus-visible{background:var(--blue-100);color:var(--text);outline:0;transform:translateY(-2px)}
.appearance-showcase{display:grid;gap:24px}
.component-showcase{padding:clamp(22px,3vw,34px);scroll-margin-top:170px;overflow:clip}
.component-section__title{display:flex;align-items:flex-start;gap:15px;margin-bottom:25px}
.component-section__title>span{display:grid;flex:0 0 42px;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,#eef8ff,#f2f6f9);color:#7896aa;font-size:12px;font-weight:950;box-shadow:inset 0 1px 0 #fff}
.component-section__title h2{margin:0;font-size:clamp(22px,2.5vw,30px)}
.component-section__title p{margin:5px 0 0;color:var(--text-soft);font-size:13px}
.component-swatch-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.component-swatch{display:grid;gap:7px;min-width:0;padding:9px;border:1px solid var(--border);border-radius:18px;background:#fff}
.component-swatch i{display:block;min-height:72px;border-radius:12px;background:var(--swatch);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.component-swatch strong{font-size:12px}.component-swatch small{color:var(--text-faint);font-size:9px;font-weight:800}
.component-swatch--blue{--swatch:#eaf6ff}.component-swatch--pink{--swatch:#f4f8fb}.component-swatch--mint{--swatch:#f2f5f8}.component-swatch--cream{--swatch:#eff5f9}.component-swatch--purple{--swatch:#f5f8fb}.component-swatch--gray{--swatch:#f4f7f9}.component-swatch--white{--swatch:#fff}
.component-surface-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:15px}
.component-surface{display:grid;gap:5px;min-height:108px;align-content:center;padding:19px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff}
.component-surface span{color:var(--text-faint);font-size:11px}.component-surface--soft{border-radius:22px;background:linear-gradient(145deg,#fff,#edf7ff)}.component-surface--float{border-radius:28px;box-shadow:var(--shadow-md)}.component-surface--glass{border-color:rgba(255,255,255,.85);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(246,236,249,.67));box-shadow:inset 0 1px 0 #fff,0 13px 30px rgba(88,117,143,.11);backdrop-filter:blur(14px)}
.component-font-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.component-font-card{min-height:132px;cursor:default}.component-font-card:hover{transform:translateY(-3px);border-color:var(--blue-300);box-shadow:var(--shadow-sm)}
.component-demo,.component-control-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.component-control-row+.component-control-row{margin-top:16px}.component-control-row--icons{gap:9px}.component-control-row--icons .icon-button:nth-child(2){background:var(--pink-100)}.component-control-row--icons .icon-button:nth-child(3){background:var(--mint-100)}
.component-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.component-content-card{position:relative;display:grid;align-content:start;min-height:190px;padding:22px;overflow:hidden;border:1px solid var(--border);border-radius:23px;background:linear-gradient(145deg,#fff,#eff8ff);cursor:pointer;box-shadow:var(--shadow-xs);transition:transform 260ms var(--spring),border-color 190ms var(--ease),box-shadow 230ms var(--ease)}
.component-content-card:hover{border-color:#ddecf6;box-shadow:var(--shadow-md);transform:translateY(-5px) rotate(-.25deg)}.component-content-card:active{transform:translateY(-1px) scale(.985)}
.component-content-card h3{margin:8px 0;font-size:20px}.component-content-card p{margin:0;color:var(--text-soft);font-size:13px}.component-card-meta{color:#7d9bb0;font-size:10px;font-weight:900;letter-spacing:.06em}.component-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:20px;color:#7194ac;font-size:12px;font-weight:900}.component-card-link .icon{width:15px}
.component-content-card--pink{background:linear-gradient(145deg,#fff,#f4f8fb)}.component-sticker-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.component-sticker-row span{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.8);color:var(--text-soft);font-size:10px;font-weight:900}.component-sticker-row .is-active{background:var(--blue-100);color:#6e95af}
.component-friend-preview{grid-template-columns:auto 1fr;gap:16px;align-content:center}.component-friend-avatar{display:grid;place-items:center;width:62px;height:62px;border:5px solid rgba(255,255,255,.75);border-radius:24px;background:linear-gradient(145deg,var(--pink-100),var(--blue-100));color:#7396ae;font-size:20px;font-weight:950;box-shadow:var(--shadow-sm)}
.component-notification-preview{min-height:190px;background:linear-gradient(145deg,#eff8ff,#f8fafc)}
.component-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 18px}.component-form-span{grid-column:1/-1}.component-form-grid .field{margin:0}.component-form-grid textarea{resize:vertical}
.component-choice-group{display:flex;flex-wrap:wrap;align-content:start;gap:9px;padding:15px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.component-choice-group legend{padding:0 7px;color:var(--text-faint);font-size:11px;font-weight:900}.component-radio{position:relative;display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 11px;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer}.component-radio input{position:absolute;opacity:0}.component-radio i{display:block;width:18px;height:18px;border:1px solid #ddebf2;border-radius:50%;background:#f8fcff;box-shadow:inset 0 1px 0 #fff;transition:background 180ms var(--ease),box-shadow 180ms var(--ease),transform 220ms var(--spring)}.component-radio:has(input:checked){border-color:#d6e9f4;background:#f1f9ff}.component-radio input:checked+i{border:5px solid #c7e1f1;background:#fff;box-shadow:0 0 0 3px rgba(210, 232, 246, .2);transform:scale(1.05)}.component-radio span{font-size:11px;font-weight:900}
.component-color-input{width:100%;height:46px;padding:5px;border:1px solid var(--border);border-radius:14px;background:#fff;cursor:pointer}.component-upload-preview{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border:1px dashed #e3edf3;border-radius:19px;background:#f9fcfe}.component-form-actions{display:flex;justify-content:flex-end}
.component-navigation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.component-preview-panel{display:grid;align-content:start;gap:14px;min-height:150px;padding:19px;border:1px solid var(--border);border-radius:21px;background:linear-gradient(145deg,#fff,#f7fafc)}.component-preview-panel>strong{font-size:12px}.component-preview-panel>p{margin:0;color:var(--text-faint);font-size:11px}
.component-capsule{display:flex;gap:4px;padding:5px;border:1px solid #eef3f6;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm)}.component-capsule button{flex:1;min-height:37px;padding:5px 9px;border-radius:999px;background:transparent;color:var(--text-soft);font-size:11px;font-weight:900;cursor:pointer}.component-capsule button.is-active{background:var(--blue-100);color:#698ba2;box-shadow:inset 0 1px 0 #fff}
.component-admin-nav{gap:8px}.component-admin-parent{display:grid;gap:6px}.component-admin-parent>span{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#f4f8fb;font-size:11px;font-weight:900}.component-admin-parent>span>i{margin-left:auto;font-style:normal}.component-admin-parent>span .icon{width:16px}.component-admin-parent>div{display:grid;gap:4px;padding-left:17px}.component-admin-parent b{padding:7px 11px;border-left:2px solid #e9f2f8;color:var(--text-soft);font-size:10px}.component-admin-parent b:first-child{border-color:#cde4f2;color:#668aa1}
.component-details{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff}.component-details summary{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;list-style:none;font-size:11px;font-weight:900;cursor:pointer}.component-details summary::-webkit-details-marker{display:none}.component-details summary i{font-style:normal;transition:transform 220ms var(--spring)}.component-details[open] summary i{transform:rotate(180deg)}.component-details>div{display:grid;gap:5px;padding:0 13px 13px}.component-details span{padding:7px 9px;border-radius:10px;background:var(--surface-soft);font-size:10px}
.component-motion-layout{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.5fr);gap:18px}.component-motion-options{display:grid;gap:8px}.component-motion-options .transition-choice{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:11px 14px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(145deg,#fff,#f7fafc);cursor:pointer;transition:transform 220ms var(--spring),border-color 180ms var(--ease),background 180ms var(--ease),box-shadow 180ms var(--ease)}.component-motion-options .transition-choice:hover{transform:translateX(4px);border-color:#dfecf6}.component-motion-options .transition-choice.is-active{border-color:#d6e9f5;background:linear-gradient(145deg,#fff,#eaf6ff);box-shadow:0 8px 20px rgba(93,139,170,.11)}.component-motion-options .transition-choice strong{font-size:12px}.component-motion-options .transition-choice small{color:var(--text-faint);font-size:9px}
.component-motion-stage{position:relative;display:grid;place-items:center;min-height:295px;overflow:hidden;border:1px solid #ebf2f6;border-radius:27px;background:linear-gradient(145deg,#edf7ff,#f6f9fc);isolation:isolate}.component-motion-stage article{position:relative;z-index:2;display:grid;width:min(310px,80%);min-height:165px;align-content:center;padding:25px;border:1px solid rgba(255,255,255,.85);border-radius:23px;background:rgba(255,255,255,.85);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}.component-motion-stage article span{color:#84a0b4;font-size:9px;font-weight:900;letter-spacing:.1em}.component-motion-stage article strong{margin:8px 0 5px;font-size:22px}.component-motion-stage article p{margin:0;color:var(--text-soft);font-size:11px}.component-motion-curtain{position:absolute;z-index:4;inset:0;background:linear-gradient(90deg,#dff1ff,#edf3f7);pointer-events:none;transform-origin:left}
.component-motion-stage.is-playing[data-preview-motion="stretch"] .component-motion-curtain{animation:component-curtain 820ms var(--ease-release, var(--ease)) both}.component-motion-stage.is-playing[data-preview-motion="stretch"] article{animation:component-stretch-content 820ms var(--ease-release, var(--ease)) both}.component-motion-stage.is-playing[data-preview-motion="fade"] .component-motion-curtain,.component-motion-stage.is-playing[data-preview-motion="zoom-blur"] .component-motion-curtain,.component-motion-stage.is-playing[data-preview-motion="none"] .component-motion-curtain{display:none}.component-motion-stage.is-playing[data-preview-motion="fade"] article{animation:component-fade 620ms var(--ease) both}.component-motion-stage.is-playing[data-preview-motion="zoom-blur"] article{animation:component-zoom-blur 720ms var(--spring) both}.component-motion-stage.is-playing[data-preview-motion="none"] article{animation:none}
@keyframes component-curtain{0%{transform:scaleX(0);transform-origin:left}48%{transform:scaleX(1);transform-origin:left}49%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes component-stretch-content{0%,48%{opacity:.15;transform:translateX(-28px) scaleX(.92)}65%{opacity:.7}100%{opacity:1;transform:none}}
@keyframes component-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes component-zoom-blur{from{opacity:0;filter:blur(14px);transform:scale(.86)}to{opacity:1;filter:blur(0);transform:none}}
.component-dialog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.component-dialog-card{grid-template-columns:110px minmax(0,1fr);min-height:120px;cursor:default}.component-dialog-card:hover{transform:translateY(-3px)}
.component-shadow-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.component-shadow-card{display:grid;justify-items:center;gap:9px;padding:13px;border:1px solid var(--border);border-radius:17px;background:var(--surface-soft);font-size:10px}.component-shadow-card i{display:block;width:70px;height:48px;border:1px solid #f0f3f6;border-radius:15px;background:#fff}.component-shadow-card--light i{box-shadow:0 7px 15px rgba(76,104,128,.08)}.component-shadow-card--soft i{box-shadow:0 12px 26px rgba(76,104,128,.14)}.component-shadow-card--deep i{box-shadow:0 18px 34px rgba(76,104,128,.23)}
.component-message-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.component-message-grid .message{margin:0}.component-feedback-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.component-feedback-grid>div{display:grid;gap:8px;align-content:center;min-height:105px;padding:17px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.component-feedback-grid span{font-size:11px;font-weight:900}.component-feedback-grid small{color:var(--text-faint);font-size:9px}.component-progress{height:10px;overflow:hidden;border-radius:999px;background:#eaf0f4;box-shadow:inset 0 1px 3px rgba(70,94,112,.08)}.component-progress i{display:block;height:100%;border-radius:inherit;background:var(--progress-fill);animation:component-progress-glow 2.8s ease-in-out infinite}.component-progress--pink i{background:var(--progress-fill)}@keyframes component-progress-glow{50%{filter:saturate(1.15);transform:scaleX(.985);transform-origin:left}}
.component-unread-sample{grid-template-columns:auto 1fr!important;align-items:center}.component-unread-sample>i{width:10px;height:10px;border-radius:50%;background:#bee0f6;box-shadow:0 0 0 6px rgba(190, 224, 246, .18);animation:unread-dot-pulse 2.4s ease-in-out infinite}.component-unread-sample span{display:grid}
.component-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.component-image-preview,.component-crop-preview{display:grid;gap:11px;padding:15px;border:1px solid var(--border);border-radius:21px;background:var(--surface-soft)}.component-image-preview>div:first-child{position:relative;display:grid;place-items:center;min-height:150px;border-radius:16px;background:linear-gradient(145deg,#e9f5ff,#e9eff4);color:#fff}.component-image-preview>div:first-child>span .icon{width:48px;height:48px}.component-image-preview>div:first-child .icon-button{position:absolute;top:9px;right:9px;width:37px;height:37px;flex-basis:37px;border-radius:50%;background:rgba(255,255,255,.84)}.component-image-preview strong{font-size:13px}.component-image-preview small{color:var(--text-faint);font-size:10px}
.component-crop-canvas{position:relative;display:grid;place-items:center;min-height:150px;overflow:hidden;border-radius:16px;background:linear-gradient(45deg,#edf2f5 25%,transparent 25%),linear-gradient(-45deg,#edf2f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf2f5 75%),linear-gradient(-45deg,transparent 75%,#edf2f5 75%),#fafcfd;background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.component-crop-canvas i{width:75%;height:75%;border-radius:13px;background:linear-gradient(145deg,#e0f1fb,#eef2f6);transform:rotate(-2deg)}.component-crop-canvas b{position:absolute;width:62%;height:62%;border:1px solid rgba(255,255,255,.92);box-shadow:0 0 0 100px rgba(67,89,106,.18)}.component-crop-preview label{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:10px}.component-crop-preview label input{width:100%;accent-color:#c7e1f2}.component-skeleton{grid-template-columns:1fr;align-content:start;padding:2px}
.component-editor-preview{overflow:hidden;border:1px solid #ecf1f5;border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}.component-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--border);background:linear-gradient(145deg,#f7fbfe,#f9fbfd)}.component-editor-toolbar>span{flex:1}.component-editor-toolbar .editor-tool-group{display:flex}.component-editor-toolbar .editor-tool-group button{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:transparent;color:var(--text-soft);cursor:pointer}.component-editor-toolbar .editor-tool-group button:hover{background:#fff;box-shadow:var(--shadow-xs)}.component-editor-toolbar .icon{width:16px}.component-rich-text{max-width:760px;padding:clamp(24px,5vw,52px);margin:auto}.component-rich-text h2{font-size:clamp(24px,3vw,34px)}.component-rich-text p{color:var(--text-soft);line-height:1.9}.component-rich-text blockquote{padding:16px 18px;margin:22px 0;border:0;border-left:4px solid #d5e9f5;border-radius:8px 18px 18px 8px;background:#f1f9ff;color:#5f7585}.component-rich-text aside{padding:17px 19px;margin:22px 0;border:1px solid #ecf0f3;border-radius:19px;background:linear-gradient(145deg,#fff,#f6f9fb)}.component-rich-text aside p{margin:4px 0 0;font-size:12px}.component-rich-text pre{padding:18px;overflow:auto;border-radius:17px;background:#f1f5f8;color:#516270;font:12px/1.75 ui-monospace,Consolas,monospace}
@media(max-width:980px){.component-swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.component-font-grid,.component-dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.component-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.component-skeleton{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.component-index{top:88px}.component-surface-grid,.component-feedback-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.component-motion-layout{grid-template-columns:1fr}.component-motion-options{grid-template-columns:repeat(2,minmax(0,1fr))}.component-dialog-grid{grid-template-columns:1fr}.component-shadow-row{grid-template-columns:repeat(2,minmax(0,1fr))}.component-card-grid,.component-navigation-grid,.component-message-grid{grid-template-columns:1fr}}
@media(max-width:620px){.component-showcase{padding:19px;border-radius:22px;scroll-margin-top:150px}.component-section__title{gap:11px}.component-section__title>span{flex-basis:36px;width:36px;height:36px;border-radius:13px}.component-section__title p{font-size:12px}.component-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.component-swatch i{min-height:58px}.component-surface-grid,.component-font-grid,.component-form-grid,.component-media-grid,.component-feedback-grid{grid-template-columns:1fr}.component-form-span{grid-column:auto}.component-skeleton{grid-column:auto;grid-template-columns:1fr}.component-motion-options{grid-template-columns:1fr 1fr}.component-motion-options .transition-choice{min-height:50px;padding:9px 11px}.component-motion-stage{min-height:235px}.component-dialog-card{grid-template-columns:96px minmax(0,1fr);padding:12px}.component-control-row .button{flex:1 1 140px}.component-editor-toolbar>span{display:none}.component-editor-toolbar .editor-tool-group{width:100%;justify-content:space-between}.component-capsule{overflow-x:auto}.component-capsule button{flex:0 0 auto;padding-inline:14px}}
@media(max-width:390px){.component-motion-options{grid-template-columns:1fr}.component-shadow-row{grid-template-columns:1fr 1fr}.component-section__title>span{display:none}.component-dialog-card{grid-template-columns:82px minmax(0,1fr)}.component-dialog-card .dialog-style-choice__preview{height:74px}.component-feedback-grid{grid-template-columns:1fr}}
html[data-motion="reduce"] .component-motion-stage article,html[data-motion="reduce"] .component-motion-curtain,html[data-performance="low"] .component-motion-stage article,html[data-performance="low"] .component-motion-curtain{animation:none!important}
@media(prefers-reduced-motion:reduce){.component-index a,.component-content-card,.component-radio i,.component-motion-options .transition-choice,.component-motion-stage article,.component-motion-curtain,.component-progress i,.component-unread-sample>i{animation:none!important;transition:none!important}}

/* Final account capsule overflow and narrow-screen spacing guard. */
.site-header--account .site-nav__links--account{overflow:visible}
@media(max-width:620px){
  .site-header--account .site-nav__links--account{overflow:visible}
  .site-header--account .site-nav__links--account>a[href*="/admin/"]{display:none}
}

/* Account submenus float below the capsule instead of changing its height. */
.site-header--account .site-nav,.site-header--account .site-nav__links--account,.site-header--account .account-nav-groups{overflow:visible}
.site-nav__links--account{padding-block:3px;margin-block:0}
@media(max-width:620px){
  .account-nav-groups{width:100%;gap:2px;justify-content:space-between}
  .account-nav-group__toggle{min-height:38px;gap:3px;padding:6px 5px;font-size:11px;white-space:nowrap}
  .account-nav-group__toggle i{font-size:11px}
  .account-nav-group__items{top:calc(100% + 9px);min-width:158px;border-radius:19px}
  .site-header--account .site-nav>a[href*="/admin/"]{display:none}
}
@media(max-width:420px){
  .account-bookmark-grid{grid-template-columns:1fr}
  .notification-mini-list a{align-items:flex-start;flex-direction:column;gap:5px}
  .notification-mini-list a strong{white-space:normal;overflow-wrap:anywhere}
  .account-section-heading--split{flex-wrap:wrap}
}
@media(max-width:360px){
  .account-stat-grid{grid-template-columns:1fr}
  .account-page{--account-card-padding:18px;padding-inline:10px}
  .account-hero{padding:18px}
  .account-avatar{width:52px;height:52px;border-radius:18px}
  .account-filter-row .button{flex:1 1 0}
}

/* Unified public/account capsule navigation */
.site-nav__links a,.site-nav__links--account a{min-height:44px;padding:7px 15px;font-size:15px;font-weight:850;line-height:1.2}
.site-nav__links--account{max-width:100%;padding:4px 2px 7px;margin:-4px -2px -7px;overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-inline:contain;scrollbar-width:none}
.site-nav__links--account a{flex:0 0 auto;white-space:nowrap}
.nav-indicator{height:44px;will-change:width,height,transform;transition:transform 260ms var(--ease-release),width 220ms var(--ease),height 220ms var(--ease)}

/* Overview cards share one exact spacing rhythm */
.account-page--overview{--account-overview-gap:18px}
.account-page--overview .account-hero{margin-bottom:var(--account-overview-gap)}
.account-page--overview .account-stat-grid{gap:var(--account-overview-gap);margin:0 0 var(--account-overview-gap)}
.account-page--overview .account-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--account-overview-gap);align-items:stretch}
.account-page--overview .account-overview-grid>.account-panel{height:100%}

/* Live host resources */
.system-grid--host{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.runtime-resource-panel{overflow:hidden}
.runtime-sampled-at{color:var(--text-faint);font-size:12px;font-weight:750}
.runtime-sampled-at b{color:#7294ad;font-variant-numeric:tabular-nums}
.runtime-resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.runtime-resource-card{--runtime-accent:#d6ebf8;--runtime-surface:#eef8ff;display:grid;align-content:start;gap:12px;min-width:0;padding:19px;border:1px solid #eef3f7;border-radius:24px;background:linear-gradient(145deg,#fff,var(--runtime-surface));box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(85,116,144,.065)}
.runtime-resource-card--pink{--runtime-accent:#e0e8ee;--runtime-surface:#f6f9fb}
.runtime-resource-card--mint{--runtime-accent:#dce3e8;--runtime-surface:#f2f6f9}
.runtime-resource-card--purple{--runtime-accent:#e4ebf1;--runtime-surface:#f7fafc}
.runtime-resource-card__heading{display:flex;align-items:center;gap:12px}
.runtime-resource-card__heading>span{display:grid;flex:0 0 42px;place-items:center;width:42px;height:42px;border-radius:15px;background:var(--runtime-surface);color:#708fa6;font-size:20px;box-shadow:inset 0 1px 0 #fff}
.runtime-resource-card__heading small,.runtime-resource-card__heading strong{display:block}
.runtime-resource-card__heading small{color:var(--text-faint);font-size:11px;font-weight:850;letter-spacing:.06em}
.runtime-resource-card__heading strong{margin-top:2px;font-size:25px;line-height:1;font-variant-numeric:tabular-nums}
.runtime-resource-card p{min-height:26px;margin:0;color:var(--text-soft);font-size:13px;font-weight:800;line-height:1.5;overflow-wrap:anywhere}
.runtime-resource-card>small{color:var(--text-faint);font-size:11px;line-height:1.55;overflow-wrap:anywhere}
.runtime-progress{position:relative;height:11px;overflow:hidden;border:1px solid rgba(187, 204, 217, .14);border-radius:999px;background:rgba(238, 243, 247, .7);box-shadow:inset 0 1px 3px rgba(82,110,133,.07)}
.runtime-progress i{display:block;width:var(--runtime-percent);height:100%;border-radius:inherit;background:var(--progress-fill);box-shadow:0 0 14px rgba(156,194,219,.22);transition:width 650ms var(--spring)}
.runtime-live-state{margin-top:12px;color:var(--text-faint);font-size:11px;text-align:right}
@keyframes runtime-progress-shimmer{to{background-position:-180% 0}}

@media(max-width:1100px){.runtime-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.account-page--overview .account-overview-grid{grid-template-columns:1fr}}
@media(max-width:620px){
  .site-nav__links a,.site-nav__links--account a{min-height:44px;padding:7px 13px;font-size:14px}
  .account-page--overview{--account-overview-gap:14px}
  .runtime-resource-grid{grid-template-columns:1fr;gap:11px}
  .runtime-resource-card{padding:16px;border-radius:21px}
}
html[data-motion="reduce"] .runtime-progress i,html[data-performance="low"] .runtime-progress i{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){.runtime-progress i{animation:none;transition:none}}

/* Final rhythm override for the system status dashboard. */
.admin-main>.admin-section{margin-bottom:22px}
.runtime-resource-grid{row-gap:22px}
.system-grid--host{row-gap:18px}
@media(max-width:620px){.admin-main>.admin-section{margin-bottom:16px}.runtime-resource-grid{row-gap:16px}}

/* Final cascade for the admin integrity pass. */
.admin-nav{width:100%;max-width:100%;overflow-x:hidden}
.admin-nav-group,.admin-nav-group__items,.admin-nav-group__items>div,.admin-subnav,.admin-subnav__items,.admin-subnav__items>div{max-width:100%}
.admin-nav-group__toggle{grid-template-columns:21px minmax(0,1fr) 16px;gap:10px;min-height:60px;padding:10px 11px}
.admin-nav-group__toggle>span{min-width:0;gap:3px}
.admin-nav-group__toggle strong{font-size:14px;line-height:1.25}
.admin-nav-group__toggle small{font-size:10.5px;line-height:1.4}
.admin-nav .admin-nav-group__items a{min-height:50px;padding:9px 12px 9px 17px}
.admin-nav .admin-nav-group__items a span{font-size:12.5px;line-height:1.32}
.admin-nav .admin-nav-group__items a small{font-size:10px;line-height:1.42}
.admin-subnav__toggle{min-height:54px!important;padding:10px 10px 10px 13px!important}
.admin-subnav__toggle strong{font-size:12.5px;line-height:1.32}
.admin-subnav__toggle small{overflow:visible;font-size:9.5px;line-height:1.4;text-overflow:clip;white-space:normal}
.admin-nav .admin-subnav__items a{min-height:42px;padding:8px 10px 8px 17px}
.admin-nav .admin-subnav__items a span{font-size:11.5px;line-height:1.35}
.admin-nav .admin-subnav__items a small{font-size:9px;line-height:1.4}
.dashboard-widget-canvas{--dashboard-row-size:30px}
.dashboard-widget{align-content:start}
.dashboard-widget__metric,.dashboard-widget__heading>span,.dashboard-widget__status>div{max-width:100%}
.dashboard-widget__metric em,.dashboard-widget__heading :where(strong,small),.dashboard-widget__status :where(span,strong){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-widget__timeline>.compact-empty{display:flex;grid-template-columns:none;align-items:center;min-height:74px;padding:14px}
.dashboard-widget__timeline>.compact-empty strong{overflow:visible;font-size:calc(11px*var(--widget-font-scale));text-overflow:clip;white-space:normal}
@media(min-width:701px) and (max-width:1180px){
  .dashboard-widget-canvas:not(.is-layout-editing){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:14px;min-height:0;margin:0}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget{grid-column:auto!important;grid-row:auto!important;min-height:154px;margin:0}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--hero,.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--list{grid-column:1/-1!important}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--hero{min-height:180px}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--actions,.dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--status{min-height:242px}
  .dashboard-widget-canvas:not(.is-layout-editing)>.dashboard-widget--list{min-height:330px}
}

/* Absolute final type floor: widget scaling must never make admin copy unreadable. */
.dashboard-widget__metric em{font-size:max(10.5px,calc(10.5px*var(--widget-font-scale)))}
.dashboard-widget__heading small{font-size:max(10px,calc(10px*var(--widget-font-scale)));letter-spacing:.09em}
.dashboard-widget__heading>a{font-size:max(10.5px,calc(10.5px*var(--widget-font-scale)))}
.dashboard-widget__timeline strong{font-size:max(11px,calc(11px*var(--widget-font-scale)))}
.dashboard-widget__timeline small,.dashboard-widget__timeline time{font-size:max(10px,calc(10px*var(--widget-font-scale)))}
.dashboard-widget__status>div,.dashboard-widget__status>a{font-size:max(10.5px,calc(10.5px*var(--widget-font-scale)))}
.dashboard-widget-option em{font-size:10px}
.component-motion-options .transition-choice small{font-size:10px}
.home-module-card-v3__facts small{font-size:10.5px}

/* Final lightweight sidebar and fixed-dashboard cascade. */
.admin-nav-group,
.admin-subnav,
.admin-nav-group__toggle,
.admin-subnav__toggle,
.admin-nav .admin-nav-group__items a,
.admin-nav .admin-subnav__items a{
  background-image:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.admin-nav-group{border-color:transparent;background-color:transparent}
.admin-nav[data-accordion-ready="true"] .admin-nav-group{
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease)!important;
}
.admin-nav-group.is-open{border-color:#eef3f6;background-color:#fbfdff}
.admin-nav-group__toggle{
  background-color:transparent;
  transition:transform 240ms var(--spring),color 180ms var(--ease),background-color 180ms var(--ease),border-color 180ms var(--ease);
}
.admin-nav-group__toggle:hover,.admin-nav-group__toggle:focus-visible{background-color:#f3f8fb}
.admin-nav-group__items{will-change:grid-template-rows,opacity}
.admin-nav .admin-nav-group__items a{
  border-color:transparent;
  background-color:transparent;
  transition:transform 240ms var(--spring),border-color 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease);
}
.admin-nav .admin-nav-group__items a:hover,.admin-nav .admin-nav-group__items a:focus-visible{border-color:#ebf2f7;background-color:#f6fafc}
.admin-nav .admin-nav-group__items a.is-current{border-color:#e3eff6;background-color:#eef7fc}
.admin-subnav{
  border-color:#f0f5f7;
  background-color:#f8fafc;
  transition:border-color 190ms var(--ease),background-color 190ms var(--ease);
}
.admin-subnav.is-open{border-color:#e8f1f6;background-color:#fff}
.admin-subnav__toggle{
  background-color:transparent!important;
  transition:color 180ms var(--ease),background-color 180ms var(--ease)!important;
}
.admin-subnav__toggle:hover,.admin-subnav__toggle:focus-visible{background-color:#f3f8fb!important}
.admin-subnav__items{will-change:grid-template-rows,opacity,transform}
.admin-subnav__items>div{margin-left:12px;border-left:1px solid #e9f2f7}
.admin-nav .admin-subnav__items a{
  margin-left:5px;
  border-color:transparent;
  background-color:transparent;
  transition:transform 210ms var(--spring),background-color 170ms var(--ease),border-color 170ms var(--ease),color 170ms var(--ease);
}
.admin-nav .admin-subnav__items a:hover,.admin-nav .admin-subnav__items a:focus-visible{border-color:#ebf2f7;background-color:#f4f9fc}
.admin-nav .admin-subnav__items a.is-current{border-color:#e3eff6;background-color:#edf7fc}
.admin-nav .admin-subnav__items a.is-current::before{background:#bedff2;box-shadow:none}
.admin-nav-direct>.admin-nav-group__toggle{
  grid-template-columns:21px minmax(0,1fr);
  width:100%;
  color:inherit;
  text-decoration:none;
}
.admin-nav-direct>.admin-nav-group__toggle.is-current{
  border-color:#e3eff6;
  background-color:#eef7fc;
  color:#58758a;
}

.dashboard-live-shell{width:100%;max-width:none}
.dashboard-fixed-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.35vw,20px);
  width:100%;
  max-width:none;
}
.dashboard-fixed-grid>.dashboard-widget{
  --widget-font-scale:1;
  min-height:clamp(138px,14vw,190px);
  margin:0;
  border-color:#e9f2f7;
  background:#fbfdff;
  background-image:none;
  box-shadow:0 6px 18px rgba(76,103,126,.055);
}
.dashboard-fixed-grid>.dashboard-widget:hover{border-color:#dfecf4;box-shadow:0 11px 25px rgba(76,103,126,.09)}
.dashboard-fixed-grid__hero{grid-column:1/-1;min-height:clamp(170px,17vw,230px)!important}
.dashboard-fixed-grid>.dashboard-widget--metric{grid-column:span 3}
.dashboard-fixed-grid__actions{grid-column:span 4}
.dashboard-fixed-grid__activity{grid-column:span 8;min-height:clamp(270px,27vw,370px)!important}
.dashboard-fixed-grid__status{grid-column:span 4;min-height:clamp(230px,23vw,320px)!important}
.dashboard-fixed-grid__progress{grid-column:span 8;min-height:clamp(230px,23vw,320px)!important}
.dashboard-fixed-grid .dashboard-widget__metric small{font-size:clamp(11px,.78vw,14px)}
.dashboard-fixed-grid .dashboard-widget__metric strong{font-size:clamp(30px,2.7vw,46px)}
.dashboard-fixed-grid .dashboard-widget__metric em{font-size:clamp(10.5px,.7vw,12px)}
.dashboard-fixed-grid .dashboard-widget__heading strong{font-size:clamp(15px,1.25vw,20px)}
.dashboard-fixed-grid .dashboard-widget__heading small{font-size:clamp(10px,.68vw,11px)}
.dashboard-fixed-grid .dashboard-widget__actions a,.dashboard-fixed-grid .dashboard-widget__status>div,.dashboard-fixed-grid .dashboard-widget__status>a{font-size:clamp(11px,.8vw,14px)}
.dashboard-fixed-grid .dashboard-widget__timeline strong{font-size:clamp(11px,.76vw,13px)}
.dashboard-fixed-grid .dashboard-widget__timeline small,.dashboard-fixed-grid .dashboard-widget__timeline time{font-size:clamp(10px,.66vw,11px)}
@media(max-width:1180px){
  .dashboard-fixed-grid>.dashboard-widget--metric{grid-column:span 6}
  .dashboard-fixed-grid__actions,.dashboard-fixed-grid__status{grid-column:span 5}
  .dashboard-fixed-grid__activity,.dashboard-fixed-grid__progress{grid-column:span 7}
}
@media(max-width:760px){
  .dashboard-fixed-grid{grid-template-columns:1fr}
  .dashboard-fixed-grid>*{grid-column:1!important;min-height:0!important}
  .dashboard-fixed-grid__hero{grid-template-columns:auto minmax(0,1fr)}
  .dashboard-fixed-grid__hero>.badge{grid-column:1/-1;width:max-content}
  .dashboard-fixed-grid__activity{min-height:290px!important}
}
@media(max-width:460px){
  .dashboard-fixed-grid__hero{grid-template-columns:1fr}
  .dashboard-fixed-grid .dashboard-widget__hero-mark{width:52px;height:52px;border-radius:18px}
  .dashboard-fixed-grid .dashboard-widget__actions{grid-template-columns:1fr}
}
/* Cloudgate relying-party surfaces · v1.17.0 */
.button--gateway {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #315f7e;
  border: 1px solid #deedf6;
  background: linear-gradient(135deg, #edf8ff 0%, #f8fbfe 55%, #f8fafc 100%);
  box-shadow: 0 12px 28px rgba(88, 137, 170, 0.12);
}

.button--gateway:hover {
  color: #244f6d;
  border-color: #c7e0ef;
  transform: translateY(-2px);
}

.button--gateway svg,
.gateway-nav-login svg {
  width: 18px;
  height: 18px;
}

.gateway-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: #8aa1b2;
  font-size: 0.78rem;
}

.gateway-auth-divider::before,
.gateway-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eaf3f8;
}

.gateway-auth-note {
  margin: 12px 0 0;
  color: #8499a8;
  font-size: 0.78rem;
  line-height: 1.65;
  text-align: center;
}

.gateway-nav-login {
  min-height: 42px;
  padding: 0 16px;
  gap: 7px;
  border-color: #e7f1f7;
}

.gateway-nav-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 172px;
  min-height: 42px;
  padding: 5px 13px 5px 6px;
  color: #41677f;
  border: 1px solid #e5f1f7;
  border-radius: 999px;
  background: rgba(251, 254, 255, 0.92);
  transition:
    transform 220ms var(--spring),
    border-color 180ms var(--ease),
    box-shadow 220ms var(--ease);
}

.gateway-nav-account:hover {
  transform: translateY(-2px);
  border-color: #cde5f2;
  box-shadow: 0 10px 24px rgba(74, 126, 160, 0.12);
}

.gateway-nav-account > span,
.drawer-gateway__avatar {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  background: linear-gradient(145deg, #bce0f2, #ccd9f0 58%, #d6e1ea);
  box-shadow: 0 5px 14px rgba(105, 155, 187, 0.2);
}

.gateway-nav-account strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-gateway {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border-color: #e7f2f9;
  background: rgba(251, 254, 255, 0.96);
}

.drawer-gateway > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.drawer-gateway strong,
.drawer-gateway small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-gateway small {
  color: #8198a8;
  font-size: 0.75rem;
}

.gateway-account-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(24px, 4vw, 42px);
  border-color: #e3f0f8;
  background:
    radial-gradient(circle at 8% 15%, rgba(212, 238, 250, 0.28), transparent 30%),
    radial-gradient(circle at 92% 90%, rgba(247, 207, 226, 0.22), transparent 32%),
    rgba(253, 254, 255, 0.96);
}

.gateway-account-hero__avatar {
  display: grid;
  width: clamp(72px, 10vw, 104px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 850;
  border: 6px solid rgba(255, 255, 255, 0.88);
  border-radius: 32%;
  background: linear-gradient(145deg, #b5dcef, #cdd8f1 56%, #d5e0e9);
  box-shadow: 0 18px 38px rgba(86, 137, 171, 0.2);
}

.gateway-account-hero__avatar,
.gateway-nav-account > span,
.drawer-gateway__avatar {
  overflow: hidden;
}

.gateway-account-hero__avatar img,
.gateway-nav-account > span img,
.drawer-gateway__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gateway-account-hero h1 {
  margin: 7px 0 8px;
}

.gateway-account-hero p {
  max-width: 680px;
  margin: 0;
  color: #718999;
  line-height: 1.75;
}

.gateway-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 8px 12px;
  color: #4a5e6e;
  font-size: 0.78rem;
  font-weight: 750;
  border: 1px solid #e5ebee;
  border-radius: 999px;
  background: #f2f6f9;
}

.gateway-status-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0c0cd;
  box-shadow: 0 0 0 4px rgba(99, 189, 152, 0.13);
}

.gateway-status-pill.is-offline {
  color: #8a7680;
  border-color: #eceef0;
  background: #f8f9f9;
}

.gateway-status-pill.is-offline i {
  background: #acb5bb;
  box-shadow: 0 0 0 4px rgba(190, 170, 180, 0.12);
}

.gateway-account-grid,
.gateway-admin-grid,
.gateway-admin-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gateway-account-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  padding: clamp(22px, 3vw, 32px);
}

.gateway-account-panel .panel-heading svg,
.gateway-admin-grid .panel-heading svg {
  width: 24px;
  height: 24px;
  color: #83afd0;
}

.gateway-identity-list,
.gateway-config-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.gateway-identity-list > div,
.gateway-config-list > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid #eff5f9;
}

.gateway-identity-list dt,
.gateway-config-list dt {
  color: #7c94a4;
  font-size: 0.82rem;
}

.gateway-identity-list dd,
.gateway-config-list dd {
  min-width: 0;
  margin: 0;
  color: #36576c;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gateway-identity-list .badge {
  margin-left: 8px;
}

.gateway-account-actions {
  justify-content: space-between;
}

.gateway-account-actions p {
  color: #718999;
  line-height: 1.75;
}

.gateway-account-actions form {
  padding-top: 16px;
  border-top: 1px solid #eff5f9;
}

.gateway-admin-overview {
  margin-top: 0;
}

.gateway-admin-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-color: #e6f2f9;
  background: rgba(253, 254, 255, 0.96);
}

.gateway-admin-status h2 {
  margin: 5px 0;
}

.gateway-admin-status p {
  margin: 0;
  color: #78909f;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.gateway-config-list code {
  display: inline;
  padding: 3px 7px;
  color: #426b85;
  border-radius: 8px;
  background: #eff7fb;
  white-space: normal;
  overflow-wrap: anywhere;
}

.gateway-connection-result {
  padding: 22px;
  color: #687f8f;
  border: 1px solid #ebf3f7;
  border-radius: 20px;
  background: #f8fbfd;
}

.gateway-connection-result.is-online {
  color: #4b5d6a;
  border-color: #e5ebee;
  background: #f3f6f8;
}

.gateway-connection-result.is-error {
  color: #6d7f8c;
  border-color: #eaeef2;
  background: #f9fbfc;
}

.gateway-connection-result strong {
  display: block;
  margin-bottom: 7px;
  color: inherit;
}

.gateway-connection-result p {
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .gateway-nav-login,
  .gateway-nav-account {
    display: none;
  }

  .gateway-account-hero,
  .gateway-admin-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gateway-account-hero .gateway-status-pill,
  .gateway-admin-status .gateway-status-pill {
    grid-column: 1 / -1;
  }

  .gateway-account-grid,
  .gateway-admin-grid,
  .gateway-admin-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .drawer-gateway {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .drawer-gateway .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .gateway-account-hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .gateway-account-hero__avatar,
  .gateway-account-hero .gateway-status-pill {
    justify-self: center;
  }

  .gateway-identity-list > div,
  .gateway-config-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button--gateway,
  .gateway-nav-account {
    transition: none;
  }
}

/* Homepage v3: editorial content rhythm with only two elevated surface types. */
.home-v3 {
  --home-gap: clamp(58px, 7vw, 88px);
  padding-top: clamp(20px, 3vw, 36px);
}
.home-v3 > .home-module:not(:first-child),
.home-v3 > .home-daily {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.home-v3 .section { padding-top: var(--home-gap); }
.home-v3 .text-link { text-decoration: none; }
.home-v3 .article-card-link::before { display: none; }
.home-v3 .article-card-link:hover::before { opacity: 0; }

.home-intro__surface {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: stretch;
  min-height: clamp(400px, 40vw, 470px);
  overflow: hidden;
  border-color: rgba(223, 235, 243, .94);
  border-radius: 30px;
  background: rgba(250, 253, 255, .92);
  box-shadow: 0 18px 48px rgba(76, 104, 132, .09), inset 0 1px 0 rgba(255,255,255,.94);
}
.home-intro__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(34px, 4vw, 48px);
}
.home-intro__mark {
  display: grid;
  grid-template-columns: 15px 18px;
  align-items: end;
  gap: 4px;
  width: 41px;
  height: 32px;
  padding: 3px;
  margin-bottom: 18px;
  border: 1px solid rgba(194, 217, 232, .84);
  border-radius: 12px 15px 11px 14px;
  transform: rotate(-3deg);
}
.home-intro__mark i { display: block; border-radius: 6px 8px 5px 7px; background: var(--cloud-blue); }
.home-intro__mark i:first-child { height: 19px; }
.home-intro__mark i:last-child { height: 24px; background: var(--pink-50); }
.home-intro__copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.home-intro__copy > p:not(.home-intro__topics) {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.8;
}
.home-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.home-intro__topics {
  margin: 16px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}
.home-intro__portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 4vw, 50px);
  border-left: 1px solid rgba(226, 237, 244, .82);
  background: rgba(229, 239, 251, .42);
}
.home-intro__portrait .hero-avatar { position:relative; inset:auto; width:clamp(140px,16vw,204px); opacity:1; }
.home-intro__focus { display: grid; gap: 4px; width: min(100%, 250px); margin-top: 26px; text-align: center; }
.home-intro__focus small { color: var(--text-faint); font-size: 11px; }
.home-intro__focus strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.home-intro__focus span { color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.home-intro__gallery-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--action-blue-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.home-intro__gallery-link .icon { width: 13px; }

.home-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}
.home-section-header h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.025em; }
.home-section-header p { max-width: 560px; margin: 8px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.home-section-header > .text-link { flex: 0 0 auto; }

.home-reading__list { border-top: 1px solid rgba(218, 232, 240, .94); }
.home-article-lead {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
  padding: clamp(28px, 4vw, 50px) 0;
  border-bottom: 1px solid rgba(226, 236, 242, .92);
  color: inherit;
  text-decoration: none;
}
.home-article-lead--text { grid-template-columns: minmax(0, 760px); }
.home-article-lead__cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--cloud-blue); }
.home-article-lead__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.home-article-lead__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.home-entry-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.home-article-lead__copy > strong { margin: 16px 0 12px; overflow-wrap: anywhere; font-size: clamp(28px, 3.3vw, 43px); line-height: 1.2; }
.home-article-lead__copy > span:not(.home-entry-meta):not(.text-link) { max-width: 620px; color: var(--text-soft); font-size: 15px; line-height: 1.75; }
.home-article-lead__copy > .text-link { margin-top: 22px; }
.home-article-lead--brief { padding-block: 28px; }
.home-article-lead--brief .home-article-lead__copy > strong { font-size: clamp(24px, 2.4vw, 32px); }
.home-article-lead--brief .home-article-lead__copy > .text-link { margin-top: 16px; }
.home-article-index { display: grid; }
.home-article-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 20px 0;
  border-bottom: 1px solid rgba(232, 238, 243, .9);
  color: inherit;
  text-decoration: none;
}
.home-article-row > time { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.home-article-row > span:nth-child(2) { display: grid; min-width: 0; gap: 5px; }
.home-article-row strong, .home-article-row small { overflow-wrap: anywhere; }
.home-article-row strong { font-size: 17px; }
.home-article-row small { color: var(--text-soft); font-size: 12px; }
.home-article-row > span:last-child { display: inline-flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 11px; white-space: nowrap; }

.home-project-feature {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr) auto;
  align-items: stretch;
  min-height: 310px;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(250, 253, 255, .9);
  color: inherit;
  text-decoration: none;
}
.home-project-feature--text { grid-template-columns: minmax(0, 1fr) auto; min-height: 240px; }
.home-project-feature__media { min-width: 0; overflow: hidden; background: var(--cloud-blue); }
.home-project-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.home-project-feature__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: clamp(30px, 4vw, 52px); }
.home-project-feature__copy small { color: var(--text-faint); font-size: 11px; }
.home-project-feature__copy strong { margin: 12px 0; overflow-wrap: anywhere; font-size: clamp(25px, 3vw, 38px); }
.home-project-feature__copy > span { color: var(--text-soft); line-height: 1.75; }
.home-project-feature__copy em { margin-top: 20px; color: var(--action-blue-ink); font-size: 12px; font-style: normal; }
.home-project-feature__arrow { display: grid; place-items: center; width: 64px; color: var(--action-blue-ink); }
.home-project-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 16px; }
.home-project-more a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.home-project-more a span { overflow: hidden; color: var(--text-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.home-project-more a .icon { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 14px; color: var(--text-faint); }

.home-inline-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 13px; }
.home-inline-empty a { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--action-blue-ink); font-weight: 800; text-decoration: none; }
.home-inline-empty .icon { width: 13px; }

.home-daily { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 74px); padding-top: var(--home-gap); }
.home-daily--solo { grid-template-columns: minmax(0, 1fr); }
.home-daily > .section { min-width: 0; padding-top: 0; }
.home-moment-list { border-top: 1px solid var(--border); }
.home-moment-list > a { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.home-moment-list time, .home-moment-list small { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.home-moment-list__body { overflow-wrap: anywhere; color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.home-photo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; }
.home-photo-grid a { position: relative; grid-column: span 2; min-width: 0; color: inherit; text-decoration: none; }
.home-photo-grid a:first-child { grid-column: span 4; grid-row: span 2; }
.home-photo-grid img { display: block; width: 100%; height: 100%; min-height: 132px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease; }
.home-photo-grid a:first-child img { aspect-ratio: 16 / 10; }
.home-photo-grid small { display: block; padding: 7px 2px 0; overflow-wrap: anywhere; color: var(--text-soft); font-size: 11px; }

.home-about-v3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.home-about-v3 > .card { min-width: 0; min-height: 320px; padding: clamp(30px, 4.5vw, 54px); border-radius: 26px; background: rgba(250, 253, 255, .9); box-shadow: none; }
.home-about-v3__intro > div, .home-about-v3__facts > div { min-height: 100%; }
.home-about-v3__intro > div { display: flex; flex-direction: column; align-items: flex-start; }
.home-about-v3__facts > div { display: flex; flex-direction: column; justify-content: center; }
.home-about-v3__identity { display: flex; align-items: center; gap: 13px; }
.home-about-v3__identity .about-avatar { width: 54px; height: 54px; }
.home-about-v3__identity > span { display: grid; gap: 2px; }
.home-about-v3__identity small { color: var(--text-faint); font-size: 10px; }
.home-about-v3__identity strong { font-size: 15px; }
.home-about-v3__intro h2 { margin: auto 0 12px; font-size: clamp(28px, 3vw, 40px); }
.home-about-v3__intro p { max-width: 520px; margin: 0 0 24px; color: var(--text-soft); font-size: 15px; line-height: 1.8; }
.home-about-v3__facts dl { display: grid; margin: 0; }
.home-about-v3__facts dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.home-about-v3__facts dt { color: var(--text-faint); font-size: 11px; }
.home-about-v3__facts dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.65; }
.home-about-v3__tools { margin-top: 24px; }
.home-about-v3__tools > small { color: var(--text-faint); font-size: 10px; }
.home-about-v3__tools p { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; }
.home-about-v3__tools span { color: var(--text-soft); font-size: 12px; }
.home-about-v3__socials { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; }
.home-about-v3__socials a { color: var(--action-blue-ink); font-size: 12px; font-weight: 800; text-decoration: none; }

.home-link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.home-link-list > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 18px 14px 18px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.home-link-list > a:nth-child(odd) { padding-right: 26px; }
.home-link-list > a:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--border); }
.home-link-list .friend-orb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--cloud-blue); color: var(--action-blue-ink); font-size: 13px; font-weight: 900; }
.home-link-list a > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.home-link-list strong, .home-link-list small { overflow-wrap: anywhere; }
.home-link-list small { color: var(--text-soft); font-size: 11px; }
.home-link-list .icon { width: 13px; color: var(--text-faint); }

.home-message { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(30px, 4vw, 46px) 0; margin-top: var(--home-gap); border-top: 1px solid rgba(216, 231, 240, .94); }
.home-message h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); }
.home-message p { max-width: 620px; margin: 8px 0 0; color: var(--text-soft); line-height: 1.7; }

@media (hover: hover) {
  .home-article-lead:hover .home-article-lead__cover img,
  .home-project-feature:hover .home-project-feature__media img,
  .home-photo-grid a:hover img { transform: scale(1.012); }
  .home-article-row:hover strong,
  .home-project-more a:hover strong,
  .home-moment-list a:hover .home-moment-list__body,
  .home-link-list a:hover strong { color: var(--action-blue-ink); }
}

@media (max-width: 980px) {
  .home-intro__surface { grid-template-columns: minmax(0, 1.12fr) minmax(230px, .88fr); min-height: 430px; }
  .home-intro__copy { padding: 38px; }
  .home-intro__copy h1 { font-size: clamp(38px, 5.8vw, 52px); }
  .home-project-feature { grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr) auto; }
  .home-daily { grid-template-columns: 1fr; gap: var(--home-gap); }
  .home-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-photo-grid a { grid-column: span 1; }
  .home-photo-grid a:first-child { grid-column: span 2; }
}

@media (max-width: 700px) {
  .home-v3 { --home-gap: 48px; padding-top: 14px; }
  .home-intro__surface { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; }
  .home-intro__copy { padding: 30px 22px 24px; }
  .home-intro__mark { margin-bottom: 20px; }
  .home-intro__copy h1 { font-size: clamp(34px, 10vw, 44px); }
  .home-intro__copy > p:not(.home-intro__topics) { margin-top: 17px; font-size: 15px; }
  .home-intro__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 24px; }
  .home-intro__actions .button { width: 100%; min-width: 0; padding-inline: 12px; white-space: nowrap; }
  .home-intro__topics { margin-top: 18px; }
  .home-intro__portrait { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px; border-top: 1px solid rgba(226, 237, 244, .82); border-left: 0; }
  .home-intro__portrait .hero-avatar { grid-row: 1 / 3; width: 92px; }
  .home-intro__focus { width: auto; margin: 0; text-align: left; }
  .home-intro__gallery-link { margin: 0; }
  .home-section-header { align-items: flex-start; gap: 16px; }
  .home-section-header h2 { font-size: 27px; }
  .home-section-header p { font-size: 13px; }
  .home-section-header > .text-link { padding-top: 7px; font-size: 11px; }
  .home-article-lead, .home-article-lead--text { grid-template-columns: 1fr; gap: 22px; padding: 24px 0 28px; }
  .home-article-lead__copy > strong { font-size: 29px; }
  .home-article-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .home-article-row small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .home-article-row > span:last-child { font-size: 0; }
  .home-article-row > span:last-child .icon { width: 14px; }
  .home-project-feature, .home-project-feature--text { grid-template-columns: 1fr auto; min-height: 0; }
  .home-project-feature__media { grid-column: 1 / -1; min-height: 210px; }
  .home-project-feature__media img { aspect-ratio: 16 / 10; }
  .home-project-feature__copy { padding: 28px 22px; }
  .home-project-feature__arrow { width: 48px; }
  .home-project-more { grid-template-columns: 1fr; }
  .home-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-photo-grid a, .home-photo-grid a:first-child { grid-column: span 1; grid-row: auto; }
  .home-photo-grid a:first-child { grid-column: 1 / -1; }
  .home-photo-grid a:first-child img { aspect-ratio: 16 / 10; }
  .home-about-v3 { grid-template-columns: 1fr; gap: 12px; }
  .home-about-v3 > .card { min-height: 0; padding: 28px 22px; border-radius: 22px; }
  .home-about-v3__intro h2 { margin: 34px 0 10px; }
  .home-link-list { grid-template-columns: 1fr; }
  .home-link-list > a:nth-child(odd), .home-link-list > a:nth-child(even) { padding: 16px 0; border-left: 0; }
  .home-message { align-items: flex-start; flex-direction: column; gap: 22px; }
  .home-message .button { width: 100%; }
}

@media (max-width: 390px) {
  .home-intro__actions { grid-template-columns: 1fr; }
  .home-intro__portrait { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .home-intro__portrait .hero-avatar { width: 72px; }
  .home-section-header { display: grid; }
  .home-section-header > .text-link { justify-self: start; padding-top: 0; }
  .home-moment-list > a { grid-template-columns: 54px minmax(0, 1fr); }
  .home-moment-list small { grid-column: 2; }
  .home-about-v3__facts dl > div { grid-template-columns: 72px minmax(0, 1fr); }
}

/* v1.30.1: compact mobile search and a translucent scroll-aware bottom capsule. */
@keyframes mobile-capsule-nav-arrive {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(0, 26px, 0) scale(.96);
  }
  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -2px, 0) scale(1.006);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 860px) {
  body:not(.admin-body) {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    --mobile-nav-indicator-lift: 1.5px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    gap: 3px;
    min-height: 64px;
    padding: 6px;
    overflow: visible;
    border-color: rgba(229, 238, 245, .9);
    border-radius: var(--radius-pill);
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(246, 250, 254, .84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 12px 34px rgba(79, 111, 148, .11);
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition:
      transform 420ms var(--spring),
      opacity 240ms var(--ease),
      visibility 0s linear 0s;
  }

  .mobile-bottom-nav.is-mobile-nav-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + 26px), 0) scale(.97);
    transition:
      transform 360ms var(--ease),
      opacity 220ms var(--ease),
      visibility 0s linear 360ms;
  }

  .mobile-bottom-nav.is-mobile-nav-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .mobile-bottom-nav.is-mobile-nav-arriving {
    transform-origin: 50% 100%;
    animation: mobile-capsule-nav-arrive 620ms var(--spring) both;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 5px 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: none;
    line-height: 1;
    align-content: center;
    grid-auto-rows: min-content;
    gap: 2px;
    transition:
      transform 240ms var(--spring),
      color 180ms var(--ease),
      background-color 220ms var(--ease),
      border-color 220ms var(--ease),
      box-shadow 240ms var(--ease);
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active {
    transform: translateY(1px) scale(.94);
  }

  .mobile-bottom-nav .is-current {
    border-color: rgba(217, 235, 247, .88);
    border-radius: var(--radius-pill);
    background: rgba(226, 243, 254, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 5px 14px rgba(91, 130, 169, .09);
    color: #648ba5;
  }

  .mobile-bottom-nav small {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.1;
  }

  .drawer-gateway {
    margin-top: 12px;
    padding: 11px 12px;
    gap: 9px;
    border-radius: 24px;
  }

  .drawer-gateway > div {
    gap: 0;
  }
}

@media (max-width: 700px) {
  .global-search-box {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 64px;
    padding: 8px 9px 8px 16px;
    border-radius: var(--radius-pill);
  }

  .global-search-box .button {
    grid-column: auto;
    width: auto;
    min-width: 60px;
    min-height: 46px;
    padding-inline: 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  .page-shell.search-page { padding-bottom: 232px; }
}

@media (max-width: 560px) {
  .drawer-gateway {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .drawer-gateway__avatar {
    width: 34px;
    height: 34px;
  }

  .drawer-gateway__actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 6px !important;
    width: 100%;
    margin-top: 1px;
  }

  .drawer-gateway__actions form {
    min-width: 0;
  }

  .drawer-gateway__actions .button {
    width: 100%;
    min-height: 36px;
    padding-inline: 8px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .mobile-bottom-nav {
    right: 7px;
    left: 7px;
    padding-inline: 4px;
  }

  .global-search-box {
    gap: 7px;
    padding-left: 13px;
  }

  .global-search-box > svg {
    width: 20px;
    height: 20px;
  }

  .global-search-box .button {
    min-width: 54px;
    padding-inline: 11px;
  }
}

/* Visual QA: keep About/update metadata readable without changing the menu motion model. */
.admin-brand > span:last-child small,
.admin-nav .admin-nav-group__items a small {
  font-size: 11px;
}

.system-version-lockup small,
.system-version-lockup span,
.system-release-facts small,
.system-update-summary small,
.system-update-message small,
.system-update-events small {
  font-size: 11px;
}

.system-developer-card p,
.system-safety-steps p {
  font-size: 14px;
}

.system-repository-link,
.update-state-pill,
.system-safety-steps article > span {
  font-size: 11px;
}

.system-update-events strong,
.system-safety-steps strong {
  font-size: 13px;
}

html[data-motion="reduce"] .mobile-bottom-nav,
html[data-performance="low"] .mobile-bottom-nav {
  animation: none !important;
  transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* 页面管理：只编辑前台导航页的短文案，避免与菜单配置产生职责重叠。 */
.page-copy-intro { margin-bottom:18px; padding:26px 28px; background:linear-gradient(145deg,#fff,#f4faff); }
.page-copy-intro h2 { margin:4px 0 8px; font-size:25px; }
.page-copy-intro p { max-width:720px; margin:0; color:var(--text-soft); font-size:13px; line-height:1.75; }
.admin-page-copy-list { display:grid; gap:16px; }
.admin-page-copy-card { overflow:hidden; border:1px solid #ebf2f7; border-radius:24px; background:linear-gradient(145deg,#fff,#fbfdff); box-shadow:0 10px 24px rgba(83,121,145,.055); transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease); }
.admin-page-copy-card:hover { border-color:#dfeef6; box-shadow:0 16px 34px rgba(83,121,145,.09); transform:translateY(-2px); }
.admin-page-copy-card__header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px 16px; border-bottom:1px solid #f1f6f9; }
.admin-page-copy-card__header h2 { margin:2px 0 0; font-size:18px; }
.admin-page-copy-card .form-grid { padding:20px 22px; }
.admin-page-copy-card .sticky-form-actions { position:static; z-index:auto; min-height:0; margin:0; padding:14px 22px; border:0; border-top:1px solid #f1f6f9; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.admin-page-copy-card .sticky-form-actions .button { margin-left:auto; }
@media (max-width:620px) {
  .page-copy-intro { padding:20px; }
  .page-copy-intro h2 { font-size:22px; }
  .admin-page-copy-card__header { align-items:stretch; flex-direction:column; padding:18px; }
  .admin-page-copy-card__header .button { width:100%; }
  .admin-page-copy-card .form-grid { padding:18px; }
  .admin-page-copy-card .sticky-form-actions { padding:13px 18px; }
  .admin-page-copy-card .sticky-form-actions .button { width:100%; }
}

/* Third-party link gateway · v1.27 */
.external-routed-link,
.external-text-link {
  color: #537b98;
  font-weight: 760;
  text-decoration: none;
  transition: color 180ms var(--ease), opacity 180ms var(--ease);
}

.external-routed-link:hover,
.external-text-link:hover {
  color: #315a77;
}

.external-link-admin {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
}

.external-link-admin__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  align-items: end;
  gap: clamp(20px, 3vw, 42px);
  min-width: 0;
}

.external-link-admin__intro > div,
.external-link-rule-panel__head > div,
.external-link-rule__identity {
  min-width: 0;
}

.external-link-admin__intro h2,
.external-link-rule-panel__head h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.5vw, 34px);
}

.external-link-admin__intro p {
  max-width: 720px;
  margin: 0;
  color: var(--text-soft);
}

.external-link-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.external-link-stat {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 98px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, .78);
}

.external-link-stat span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.external-link-stat strong {
  overflow-wrap: anywhere;
  font-size: clamp(22px, 2vw, 30px);
}

.external-link-stat--safe { border-color: #e2e7eb; background: #f5f7f9; }
.external-link-stat--dangerous { border-color: #f2c9ca; background: #fff6f6; }
.external-link-stat--unknown { border-color: #e7eff6; background: #f6fbff; }

.external-link-create,
.external-link-rule-panel {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 30px);
}

.external-link-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(190px, .75fr);
  gap: 18px;
  min-width: 0;
}

.external-link-form-grid__note { grid-column: 1 / -1; }
.external-link-create textarea,
.external-link-edit-form textarea { resize: vertical; min-height: 104px; }
.external-link-create__actions { display: flex; justify-content: flex-end; margin-top: 20px; }

.external-link-rule-panel__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  margin-bottom: 20px;
}

.external-link-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, auto) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 600px);
  min-width: 0;
}

.external-link-filter label,
.external-link-filter input { width: 100%; min-width: 0; }

.external-link-filter input {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font: inherit;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.external-link-filter input:focus {
  border-color: var(--blue-300);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(208, 234, 249, .2);
}

.external-link-rule-list { display: grid; gap: 14px; min-width: 0; }

.external-link-rule {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(251, 253, 255, .92);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--spring);
}

.external-link-rule--safe { border-left: 4px solid #bec7cf; }
.external-link-rule--dangerous { border-left: 4px solid #d98d90; }
.external-link-rule.is-editing { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }

.external-link-rule__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 17px 18px;
}

.external-link-rule__status {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 900;
}

.external-link-rule--safe .external-link-rule__status { color: #465968; background: var(--mint-100); }
.external-link-rule--dangerous .external-link-rule__status { color: var(--danger-700); background: var(--danger-100); }
.external-link-rule__identity { display: grid; gap: 2px; }
.external-link-rule__identity strong,
.external-link-rule__identity code,
.external-link-rule__identity p { overflow-wrap: anywhere; }
.external-link-rule__identity code { color: #537b98; font-family: inherit; font-size: 13px; }
.external-link-rule__identity p { margin: 4px 0 0; color: var(--text-soft); font-size: 13px; }
.external-link-rule__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.external-link-rule__actions form { display: flex; margin: 0; }
.external-link-rule__delete { color: var(--danger-700); background: var(--danger-100); border-radius: 50%; }

.external-link-rule__editor {
  height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  opacity: 0;
  transition: height 340ms var(--spring), opacity 220ms var(--ease), border-color 220ms var(--ease);
}

.external-link-rule.is-editing .external-link-rule__editor { border-top-color: var(--border); opacity: 1; }
.external-link-rule__editor > div { padding: 18px; }
.external-link-edit-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, .55fr); gap: 16px; min-width: 0; }
.external-link-edit-form__note { grid-column: 1 / -1; }
.external-link-edit-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.external-link-empty { display: grid; justify-items: center; gap: 6px; padding: clamp(40px, 7vw, 72px) 20px; text-align: center; }
.external-link-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; color: #537b98; background: var(--blue-100); font-size: 24px; }
.external-link-empty p { max-width: 440px; margin: 0; color: var(--text-soft); }
.external-link-pagination { margin-top: 20px; }

.external-jump {
  --jump-accent: #b0c7d9;
  --jump-soft: #eaf6ff;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1120px);
  min-height: calc(100svh - 210px);
  margin: 0 auto;
  padding: clamp(42px, 7vw, 88px) clamp(14px, 4vw, 44px) 96px;
  overflow: hidden;
  isolation: isolate;
}

.external-jump--safe { --jump-accent: #a8b3bb; --jump-soft: #eaeff3; }
.external-jump--dangerous { --jump-accent: #bd676d; --jump-soft: #fdebec; }
.external-jump--unknown { --jump-accent: #b2bfc9; --jump-soft: #edf4f8; }

.external-jump__ambient {
  position: absolute;
  z-index: -1;
  width: min(44vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(3px);
  opacity: .62;
  animation: external-ambient-float 8s ease-in-out infinite alternate;
}

.external-jump__ambient--one { top: 4%; left: -10%; background: radial-gradient(circle, var(--jump-soft), transparent 68%); }
.external-jump__ambient--two { right: -8%; bottom: 2%; background: radial-gradient(circle, var(--pink-100), transparent 68%); animation-delay: -3s; }

.external-jump__panel {
  width: min(100%, 760px);
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(227, 235, 242, .9);
  border-radius: clamp(28px, 4vw, 42px);
  background: rgba(255, 255, 255, .88);
  box-shadow: 18px 22px 55px rgba(95, 119, 146, .12), -12px -14px 38px rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  animation: external-panel-enter 720ms var(--spring) both;
  transition: opacity 420ms var(--ease), transform 520ms var(--spring), filter 420ms var(--ease);
}

.external-jump.is-leaving .external-jump__panel { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(14px); }
.external-jump__signal { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 24px; border-radius: 26px; color: var(--jump-accent); background: var(--jump-soft); }
.external-jump__signal span { width: 22px; height: 22px; border: 3px solid currentColor; border-radius: 50%; }
.external-jump__signal i { position: absolute; width: 9px; height: 9px; right: 15px; top: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgba(255,255,255,.7); }
.external-jump__eyebrow { display: block; margin-bottom: 10px; color: var(--jump-accent); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.external-jump h1 { max-width: 660px; margin-bottom: 14px; font-size: clamp(32px, 5vw, 54px); overflow-wrap: anywhere; }
.external-jump__lead { max-width: 660px; margin-bottom: 26px; color: var(--text-soft); font-size: clamp(15px, 2vw, 18px); }
.external-jump__destination { display: grid; gap: 4px; min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-color: color-mix(in srgb, var(--jump-accent) 24%, var(--border)); border-radius: 22px; background: #f8fbfd; background: color-mix(in srgb, var(--jump-soft) 58%, white); }
.external-jump__destination span { color: var(--text-soft); font-size: 12px; font-weight: 800; }
.external-jump__destination strong { font-size: clamp(18px, 3vw, 25px); overflow-wrap: anywhere; }
.external-jump__destination code { display: block; max-width: 100%; overflow: hidden; color: var(--jump-accent); font-family: inherit; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.external-jump__note { margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; color: var(--text-soft); background: var(--surface-soft); overflow-wrap: anywhere; }
.external-jump__checks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.external-jump__checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; color: var(--text-soft); font-size: 14px; }
.external-jump__checks i { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--jump-accent); box-shadow: 0 0 0 5px var(--jump-soft); }
.external-jump__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.external-jump__home { display: block; width: fit-content; margin: 18px auto 0; color: var(--text-soft); font-size: 13px; text-decoration: none; }

@keyframes external-panel-enter {
  from { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(14px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes external-ambient-float {
  from { transform: translate3d(-2%, -2%, 0) scale(.96); }
  to { transform: translate3d(5%, 6%, 0) scale(1.06); }
}

@media (max-width: 900px) {
  .external-link-admin__intro { grid-template-columns: 1fr; }
  .external-link-stat-grid { max-width: 620px; }
  .external-link-rule-panel__head { align-items: stretch; flex-direction: column; }
  .external-link-filter { width: 100%; }
}

@media (max-width: 680px) {
  .external-link-stat-grid { grid-template-columns: 1fr; }
  .external-link-stat { min-height: 76px; }
  .external-link-form-grid,
  .external-link-edit-form,
  .external-link-filter { grid-template-columns: 1fr; }
  .external-link-form-grid__note,
  .external-link-edit-form__note,
  .external-link-edit-form__actions { grid-column: 1; }
  .external-link-create__actions,
  .external-link-edit-form__actions { justify-content: stretch; }
  .external-link-create__actions .button,
  .external-link-edit-form__actions .button,
  .external-link-filter .button { width: 100%; }
  .external-link-rule__summary { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .external-link-rule__actions { grid-column: 1 / -1; justify-content: flex-end; }
  .external-jump { min-height: calc(100svh - 120px); padding-inline: 10px; }
  .external-jump__panel { padding: 26px 20px; border-radius: 28px; }
  .external-jump__destination code { white-space: normal; overflow-wrap: anywhere; }
  .external-jump__actions { display: grid; grid-template-columns: 1fr; }
  .external-jump__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .external-jump__panel,
  .external-jump__ambient { animation: none; }
  .external-jump__panel,
  .external-link-rule__editor { transition: none; }
}

/* Unified public search · v1.26 */
.search-page {
  width: min(1120px, calc(100% - 32px));
  padding-block: clamp(36px, 7vw, 86px) 96px;
}

.search-hero {
  position: relative;
  display: grid;
  justify-items: center;
  overflow-x: clip;
  text-align: center;
  isolation: isolate;
}

.search-hero::before,
.search-hero::after {
  position: absolute;
  z-index: -1;
  width: clamp(150px, 23vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  opacity: .58;
  animation: search-orb-float 7s ease-in-out infinite alternate;
}

.search-hero::before {
  top: -72px;
  left: 2%;
  background: radial-gradient(circle, rgba(235, 247, 255, .92), rgba(235, 247, 255, 0) 70%);
}

.search-hero::after {
  top: -32px;
  right: 8px;
  background: radial-gradient(circle, rgba(255, 229, 242, .82), rgba(255, 229, 242, 0) 70%);
  animation-delay: -3.4s;
}

.search-hero h1 {
  max-width: 820px;
  margin: 9px 0 12px;
  font-size: clamp(2.45rem, 7vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.search-hero > p {
  max-width: 650px;
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(.98rem, 2vw, 1.13rem);
}

.global-search-form {
  display: grid;
  gap: 16px;
  width: min(780px, 100%);
  margin-top: clamp(28px, 5vw, 48px);
}

.global-search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 8px 9px 8px 22px;
  border: 1px solid rgba(217, 234, 243, .9);
  border-radius: 29px;
  background: rgba(251, 253, 255, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -6px 14px rgba(210, 229, 242, .22),
    0 18px 46px rgba(91, 126, 150, .12);
  transition:
    border-color 240ms var(--ease),
    box-shadow 320ms var(--spring),
    transform 320ms var(--spring);
}

.global-search-box:focus-within {
  border-color: #cfe7f4;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 4px rgba(220, 238, 249, .38),
    0 24px 54px rgba(91, 126, 150, .16);
  transform: translateY(-3px) scale(1.006);
}

.global-search-box > svg {
  width: 23px;
  height: 23px;
  color: #7fa4bc;
}

.global-search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
}

.global-search-box input::-webkit-search-cancel-button {
  opacity: .55;
}

.global-search-box .button {
  min-height: 54px;
  margin: 0;
  padding-inline: 27px;
  border-radius: 22px;
}

.search-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.search-mode-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 70px;
  padding: 13px 18px;
  overflow: hidden;
  border: 1px solid #eaf3f8;
  border-radius: 24px;
  background: rgba(250, 253, 255, .84);
  box-shadow: inset 0 1px 0 #fff, 0 9px 22px rgba(91, 126, 150, .06);
  cursor: pointer;
  transition:
    transform 260ms var(--spring),
    border-color 220ms var(--ease),
    background-color 220ms var(--ease),
    box-shadow 260ms var(--ease);
}

.search-mode-option:hover {
  transform: translateY(-3px);
  border-color: #deeef6;
  box-shadow: inset 0 1px 0 #fff, 0 15px 30px rgba(91, 126, 150, .1);
}

.search-mode-option:active {
  transform: translateY(0) scale(.985);
}

.search-mode-option:has(input:checked) {
  border-color: #d6ebf6;
  background: #eff9ff;
  box-shadow: inset 0 1px 0 #fff, 0 13px 30px rgba(116, 167, 198, .12);
}

.search-mode-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.search-mode-option__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #dae9f2;
  border-radius: 50%;
  background: #fff;
  transition: border-color 220ms var(--ease), box-shadow 260ms var(--spring), transform 260ms var(--spring);
}

.search-mode-option__dot::after {
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: #beddee;
  content: "";
  transform: scale(0);
  transition: transform 260ms var(--spring);
}

.search-mode-option input:checked + .search-mode-option__dot {
  border-color: #beddee;
  box-shadow: 0 0 0 5px rgba(217, 237, 247, .34);
}

.search-mode-option input:checked + .search-mode-option__dot::after {
  transform: scale(1);
}

.search-mode-option input:focus-visible + .search-mode-option__dot {
  outline: 3px solid rgba(190, 221, 238, .32);
  outline-offset: 4px;
}

.search-mode-option strong,
.search-mode-option small {
  display: block;
  text-align: left;
}

.search-mode-option small {
  margin-top: 3px;
  color: var(--text-faint);
}

.global-search-panel {
  width: min(930px, 100%);
  height: auto;
  margin: clamp(34px, 6vw, 64px) auto 0;
  padding: clamp(20px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(225, 238, 245, .94);
  border-radius: clamp(28px, 4vw, 40px);
  background:
    radial-gradient(circle at 92% 5%, rgba(233, 246, 255, .76), transparent 31%),
    rgba(252, 254, 255, .94);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 8px 8px 24px rgba(219, 233, 242, .2),
    0 28px 70px rgba(78, 112, 137, .12);
  opacity: 0;
  transform: translateY(26px) scale(.975);
  transform-origin: 50% 0;
  transition:
    height 480ms var(--spring),
    padding 420ms var(--spring),
    margin 420ms var(--spring),
    opacity 320ms var(--ease),
    transform 480ms var(--spring);
}

.global-search-panel.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.global-search-panel.is-resizing {
  will-change: height, transform, opacity;
}

.global-search-panel__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.global-search-panel__head h2 {
  margin: 5px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.search-request-state {
  color: #7898ad;
  font-size: .82rem;
  font-weight: 800;
}

.global-search-panel.is-loading .search-request-state::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #bfdeee;
  box-shadow: 0 0 0 0 rgba(144, 198, 226, .5);
  content: "";
  animation: search-loading-pulse 1.1s ease-out infinite;
}

.search-result-list {
  display: grid;
  gap: 12px;
}

.search-result-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid #ecf3f8;
  border-radius: 25px;
  background: rgba(251, 253, 255, .9);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(84, 119, 143, .055);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation: search-result-enter 440ms var(--spring) forwards;
  animation-delay: calc(var(--search-order, 0) * 42ms);
  transition:
    border-color 220ms var(--ease),
    background-color 220ms var(--ease),
    box-shadow 300ms var(--spring),
    transform 300ms var(--spring);
}

.search-result-card::after {
  position: absolute;
  inset: 0 auto 0 -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
  content: "";
  opacity: 0;
  transform: skewX(-16deg);
  transition: left 620ms var(--ease), opacity 180ms var(--ease);
  pointer-events: none;
}

.search-result-card:hover,
.search-result-card:focus-visible {
  border-color: #d9ebf6;
  background: #f5fbff;
  box-shadow: inset 0 1px 0 #fff, 0 16px 34px rgba(84, 119, 143, .11);
  transform: translateY(-4px) scale(1.006);
}

.search-result-card:hover::after,
.search-result-card:focus-visible::after {
  left: 112%;
  opacity: 1;
}

.search-result-card:active {
  transform: translateY(-1px) scale(.988);
}

.search-result-card__source {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eaf6fd;
  color: #698da5;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.search-result-card--project .search-result-card__source,
.search-result-card--friend .search-result-card__source {
  background: #f4f8fb;
  color: #7c8993;
}

.search-result-card--moment .search-result-card__source {
  background: #f1f1ff;
  color: #7d7fa5;
}

.search-result-card--guestbook .search-result-card__source {
  background: #f0f4f7;
  color: #73828d;
}

.search-result-card__copy {
  min-width: 0;
}

.search-result-card__copy strong,
.search-result-card__copy small {
  display: block;
}

.search-result-card__copy strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.search-result-card__copy small {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: var(--text-soft);
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-result-card time {
  color: var(--text-faint);
  font-size: .75rem;
  white-space: nowrap;
}

.search-result-card__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e8f2f7;
  border-radius: 50%;
  background: #fff;
  color: #7ca2ba;
  transition: transform 280ms var(--spring), background-color 220ms var(--ease);
}

.search-result-card:hover .search-result-card__arrow,
.search-result-card:focus-visible .search-result-card__arrow {
  background: #eaf6fd;
  transform: translateX(4px) rotate(-5deg);
}

.search-empty-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 190px;
  place-content: center;
  color: var(--text-soft);
  text-align: center;
}

.search-empty-state span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #e7f2f8;
  border-radius: 22px;
  background: #f0f9ff;
  color: #83abc3;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 #fff, 0 11px 24px rgba(99, 139, 165, .09);
}

.search-pagination {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms var(--ease), transform 320ms var(--spring);
}

.search-pagination[hidden] {
  display: none;
}

.search-pagination a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8f2f7;
  border-radius: 15px;
  background: #fbfdff;
  color: var(--text-soft);
  font-weight: 850;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 6px 15px rgba(92, 128, 151, .06);
  transition: transform 260ms var(--spring), border-color 220ms var(--ease), background-color 220ms var(--ease);
}

.search-pagination a:hover,
.search-pagination a:focus-visible {
  border-color: #d8ebf5;
  background: #eff9ff;
  transform: translateY(-3px);
}

.search-pagination a:active {
  transform: scale(.9);
}

.search-pagination a.is-current {
  border-color: #cde5f2;
  background: #ecf7fd;
  color: #628aa3;
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(103, 153, 184, .13);
}

.page-search-entry {
  display: inline-flex;
  width: fit-content;
  margin: 24px auto 0;
  border-radius: 999px;
}

.page-search-entry svg {
  width: 18px;
  height: 18px;
}

@keyframes search-result-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes search-loading-pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(144, 198, 226, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(144, 198, 226, 0);
  }
}

@keyframes search-orb-float {
  to {
    transform: translate3d(0, 16px, 0) scale(1.06);
  }
}

@media (max-width: 700px) {
  .search-page {
    width: min(100% - 22px, 1120px);
    padding-top: 28px;
  }

  .search-hero {
    justify-items: stretch;
    text-align: left;
  }

  .search-hero h1 {
    font-size: clamp(2.45rem, 15vw, 4rem);
  }

  .global-search-form {
    margin-top: 28px;
  }

  .global-search-box {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 66px;
    padding: 9px 13px 9px 18px;
    border-radius: 25px;
  }

  .global-search-box .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
  }

  .search-mode-picker {
    grid-template-columns: 1fr;
  }

  .global-search-panel {
    padding: 20px 14px;
    border-radius: 29px;
  }

  .global-search-panel__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-inline: 5px;
  }

  .search-result-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 15px 13px;
    border-radius: 21px;
  }

  .search-result-card time {
    display: none;
  }

  .search-result-card__source {
    min-width: 45px;
    padding-inline: 8px;
  }

  .search-result-card__arrow {
    width: 32px;
    height: 32px;
  }

  .page-search-entry {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-hero::before,
  .search-hero::after,
  .global-search-panel.is-loading .search-request-state::before,
  .search-result-card {
    animation: none;
  }

  .global-search-panel,
  .search-result-card,
  .search-result-card::after,
  .search-pagination a,
  .search-mode-option,
  .global-search-box {
    transition-duration: .01ms;
  }

  .search-result-card {
    opacity: 1;
    transform: none;
  }
}

/* Cloudgate admin connection layout and theme live-preview motion · v1.25.1 */
.gateway-page-heading {
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding-block: 4px;
}

.gateway-page-heading > div {
  min-width: 0;
}

.gateway-page-heading h1 {
  margin: 5px 0 7px;
  font-size: clamp(30px, 3.5vw, 43px);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.gateway-page-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.gateway-page-heading > .button {
  flex: 0 0 auto;
  min-height: 44px;
}

.gateway-binding-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 25px);
  min-width: 0;
  min-height: 118px;
  padding: clamp(21px, 2.7vw, 28px);
  margin-top: 22px;
  overflow: hidden;
}

.gateway-binding-card > div {
  min-width: 0;
}

.gateway-binding-card .soft-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 18px;
}

.gateway-binding-card h2 {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.75vw, 21px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gateway-binding-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.gateway-binding-card > :is(.button, form) {
  align-self: center;
  margin: 0;
}

.gateway-binding-card > form .button {
  min-height: 44px;
}

.gateway-connection-section {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin-top: 20px;
}

.gateway-connection-card {
  grid-template-columns: minmax(220px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
}

.gateway-connection-card__facts {
  grid-column: 1 / -1;
  grid-row: 2;
}

.gateway-connection-card__facts > div {
  display: grid;
  align-content: center;
  min-height: 64px;
  padding: 12px 14px;
}

.gateway-connection-card__facts dd {
  overflow: visible;
  line-height: 1.5;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gateway-connection-card__actions {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  align-content: center;
}

.gateway-connection-card__actions :is(.button, .gateway-status-pill) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}

.gateway-connection-card__actions form {
  align-self: center;
  margin: 0;
}

.gateway-connection-result {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #edf0f3;
  border-radius: 16px;
  background: #fbfcfd;
}

.gateway-connection-result strong,
.gateway-connection-result p {
  overflow-wrap: anywhere;
}

.gateway-connection-card--empty {
  min-height: 154px;
  padding: clamp(22px, 3vw, 30px);
}

.gateway-connection-editor {
  min-width: 0;
}

.gateway-connection-editor[aria-hidden="true"] {
  height: 0;
  overflow: hidden;
}

.gateway-connection-editor__inner {
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  overflow: hidden;
  border-color: #e7f1f7;
  background: linear-gradient(145deg, #fff, #f4faff);
  box-shadow: inset 0 1px 0 #fff, 0 16px 36px rgba(75, 112, 140, .1);
}

.gateway-editor-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding-bottom: 21px;
  border-bottom: 1px solid #eef3f7;
}

.gateway-editor-heading > div {
  min-width: 0;
}

.gateway-editor-heading h2 {
  margin: 4px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gateway-editor-heading .icon-button {
  align-self: center;
  font-size: 22px;
}

.gateway-connection-form {
  gap: 21px;
  min-width: 0;
  padding-top: 22px;
}

.gateway-protocol-grid {
  gap: 18px 20px;
  min-width: 0;
}

.gateway-protocol-grid .field,
.gateway-protocol-grid input {
  min-width: 0;
  width: 100%;
}

.gateway-protocol-grid .field {
  gap: 8px;
  margin: 0;
}

.gateway-protocol-grid :is(input, code) {
  min-height: 48px;
}

.gateway-registration-note {
  min-width: 0;
  margin-top: 0;
  padding: 17px 19px;
}

.gateway-registration-note > * {
  min-width: 0;
}

.gateway-registration-note span {
  overflow-wrap: anywhere;
}

.gateway-editor-actions {
  min-height: 48px;
  padding-top: 1px;
}

.gateway-editor-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

[data-gateway-connection-editor][data-editor-ready="true"] .gateway-connection-editor {
  margin: 0;
}

[data-gateway-connection-editor][data-editor-ready="true"] .gateway-connection-editor.is-open {
  margin-top: 0;
}

.transition-settings,
.dialog-appearance-settings,
.interface-font-panel,
.interface-hints-panel {
  min-width: 0;
  overflow: hidden;
}

.transition-choice,
.dialog-style-choice,
.font-choice,
.hint-control-card,
.appearance-color-field,
.dialog-metric-control,
.dialog-shadow-options label {
  min-width: 0;
  transition:
    transform 330ms var(--spring),
    border-color 260ms var(--ease),
    background-color 300ms var(--ease),
    box-shadow 330ms var(--ease),
    filter 300ms var(--ease);
}

.transition-choice__demo,
.dialog-style-choice__preview,
.font-choice__sample,
.appearance-color-card,
.dialog-shape-card,
.dialog-preview-panel {
  min-width: 0;
  transition:
    transform 420ms var(--spring),
    opacity 280ms var(--ease),
    filter 360ms var(--ease),
    border-color 300ms var(--ease),
    background 420ms var(--ease),
    box-shadow 420ms var(--ease),
    border-radius 420ms var(--spring);
}

.transition-choice.is-choice-switching,
.dialog-style-choice.is-choice-switching,
.font-choice.is-choice-switching,
.hint-control-card.is-choice-switching,
.appearance-color-field.is-choice-switching,
.dialog-metric-control.is-choice-switching {
  animation:theme-choice-settle 560ms var(--spring);
}

.transition-settings.is-preview-updating,
.dialog-appearance-settings.is-preview-updating,
.interface-font-panel.is-preview-updating,
.interface-hints-panel.is-preview-updating,
.appearance-color-card.is-preview-updating,
.dialog-shadow-fieldset.is-preview-updating {
  animation:theme-panel-breathe 560ms var(--ease);
}

.transition-choice__demo.is-preview-playing i {
  animation:transition-demo-stretch var(--theme-preview-duration, 850ms) cubic-bezier(.22,.72,.16,1) both;
}

.transition-choice--fade .transition-choice__demo.is-preview-playing i {
  animation-name: transition-demo-fade;
}

.transition-choice--zoom-blur .transition-choice__demo.is-preview-playing::before {
  animation: transition-demo-focus var(--theme-preview-duration, 760ms) var(--ease) both;
}

.transition-choice--zoom-blur .transition-choice__demo.is-preview-playing i {
  animation: transition-demo-fade var(--theme-preview-duration, 640ms) var(--ease) reverse both;
}

.transition-choice--none .transition-choice__demo.is-preview-playing {
  animation: theme-none-preview 520ms var(--ease);
}

.appearance-color-field {
  overflow: hidden;
}

.appearance-color-field > :is(span, code) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dialog-style-choice__preview :is(i, b, em) {
  transition:
    width 420ms var(--spring),
    height 420ms var(--spring),
    inset 420ms var(--spring),
    opacity 300ms var(--ease),
    background-color 420ms var(--ease),
    transform 420ms var(--spring);
}

dialog.modal,
.app-system-dialog[open],
.app-system-dialog__icon,
.app-system-dialog__content {
  transition:
    width 420ms var(--spring),
    border-radius 420ms var(--spring),
    border-color 320ms var(--ease),
    background 420ms var(--ease),
    box-shadow 420ms var(--ease),
    transform 420ms var(--spring),
    filter 320ms var(--ease);
}

.hint-control-card {
  overflow: hidden;
}

.hint-control-card :is(strong, small),
.hint-catalog-grid :is(strong, small) {
  overflow-wrap: anywhere;
}

@keyframes theme-choice-settle {
  0% { filter: brightness(.98); transform: translateY(0) scale(.985); }
  48% { filter: brightness(1.015); transform: translateY(-3px) scale(1.006); }
  100% { filter: none; transform: none; }
}

@keyframes theme-panel-breathe {
  0% { filter: blur(0); }
  38% { filter: blur(.35px) brightness(1.008); }
  100% { filter: none; }
}

@keyframes theme-none-preview {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: .72; transform: scale(.985); }
}

@media (max-width: 1080px) {
  .gateway-connection-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-connection-card__facts,
  .gateway-connection-card__actions,
  .gateway-connection-result {
    grid-column: 1;
    grid-row: auto;
  }

  .gateway-connection-card__actions {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .gateway-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .gateway-page-heading > .button {
    width: 100%;
  }

  .gateway-binding-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px;
  }

  .gateway-binding-card > :is(.gateway-status-pill, .button, form) {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .gateway-binding-card > form .button,
  .gateway-binding-card > .button {
    width: 100%;
  }

  .gateway-connection-card--empty {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }

  .gateway-connection-card--empty .gateway-connection-plus {
    justify-self: center;
  }

  .gateway-connection-card--empty .gateway-connection-card__empty-facts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .gateway-editor-heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .gateway-registration-note {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gateway-registration-note span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .gateway-page-heading h1 {
    font-size: 30px;
  }

  .gateway-binding-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-binding-card .soft-icon,
  .gateway-binding-card > .gateway-status-pill {
    justify-self: start;
  }

  .gateway-connection-card--empty {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 190px;
    text-align: center;
  }

  .gateway-connection-card--empty .gateway-connection-card__empty-facts {
    grid-column: 1;
    justify-content: center;
  }

  .gateway-connection-card__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-connection-card__actions :is(.gateway-status-pill, form, .button),
  .gateway-connection-card__actions form .button {
    grid-column: 1;
    width: 100%;
  }

  .gateway-connection-editor__inner {
    padding: 19px;
  }

  .gateway-editor-heading .soft-icon {
    display: none;
  }

  .gateway-editor-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .transition-choice,
  .dialog-style-choice {
    grid-template-columns: minmax(0, 1fr);
  }

  .transition-choice__demo,
  .dialog-style-choice__preview {
    width: 100%;
  }

  .dialog-preview-panel .button-row,
  .dialog-preview-panel .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-choice,
  .dialog-style-choice,
  .font-choice,
  .hint-control-card,
  .appearance-color-field,
  .dialog-metric-control,
  .transition-choice__demo,
  .dialog-style-choice__preview,
  .appearance-color-card,
  .dialog-shape-card,
  dialog.modal,
  .app-system-dialog[open] {
    animation: none !important;
    transition: none !important;
  }
}

/* Cloudgate call waiting and protocol-only connection panel · v1.25.1 */
.gateway-call-waiting{display:grid;place-items:center;min-height:calc(100vh - 180px);padding:clamp(36px,7vw,90px) 20px}
.gateway-call-waiting__card{display:grid;justify-items:center;gap:17px;width:min(100%,720px);padding:clamp(32px,6vw,58px);text-align:center;overflow:hidden}
.gateway-call-waiting__card h1{margin:0;font-size:clamp(31px,5vw,50px);line-height:1.14;overflow-wrap:anywhere}
.gateway-call-waiting__card>p{max-width:560px;margin:0;color:var(--text-soft);font-size:14px;line-height:1.85}
.gateway-call-waiting__visual{position:relative;display:grid;place-items:center;width:132px;height:132px;margin-bottom:2px}
.gateway-call-waiting__visual>span{position:relative;z-index:2;display:grid;place-items:center;width:66px;height:66px;border-radius:23px;color:#568eac;background:#eaf6fc;box-shadow:inset 8px 8px 17px #d7e8f1,inset -8px -8px 17px #fff,0 16px 34px rgba(80,137,168,.17)}
.gateway-call-waiting__visual>span .icon{width:34px;height:34px;animation:gateway-call-breathe 1.7s ease-in-out infinite}
.gateway-call-waiting__visual>i{position:absolute;inset:0;border:1px solid rgba(177, 210, 227, .3);border-radius:47% 53% 42% 58%;animation:gateway-call-orbit 2.8s linear infinite}
.gateway-call-waiting__visual>i:nth-of-type(2){inset:10px;animation-duration:2.15s;animation-direction:reverse}
.gateway-call-waiting__visual>i:nth-of-type(3){inset:21px;animation-duration:1.75s}
.gateway-call-progress{width:min(100%,500px);height:10px;padding:2px;overflow:hidden;border-radius:999px;background:#edf4f8;box-shadow:inset 2px 2px 5px rgba(75,117,142,.12)}
.gateway-call-progress i{display:block;width:36%;height:100%;border-radius:inherit;background:var(--progress-fill);animation:gateway-call-progress 1.1s cubic-bezier(.2,.74,.24,1) infinite}
.gateway-call-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,520px)}
.gateway-call-steps span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 12px;border:1px solid #edf3f6;border-radius:14px;color:var(--text-faint);background:#fafcfd;font-size:11px;font-weight:850}
.gateway-call-steps span.is-active{color:#527f98;border-color:#e3f0f7;background:#eef8fd}.gateway-call-steps .icon{width:14px;height:14px}
.gateway-protocol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gateway-readonly-field code{display:flex;align-items:center;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#f5f8fa;color:#52758a;overflow-wrap:anywhere;word-break:break-word}
.gateway-registration-note{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;margin-top:20px;padding:16px 18px;border:1px solid #ebf3f7;border-radius:17px;background:#f5fbfe;color:var(--text-soft)}
.gateway-registration-note .icon{width:20px;height:20px;color:#5d91ad}.gateway-registration-note strong{font-size:13px}.gateway-registration-note span{font-size:12px;line-height:1.7}
.gateway-editor-actions,.gateway-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.gateway-card-actions{padding-top:18px}.gateway-card-actions form{margin:0}
.gateway-connection-plus{display:grid!important;place-items:center!important}.gateway-connection-plus b{display:block;line-height:1;transform:translateY(-1px)}
[data-fallback-media]{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.safe-media__fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center;width:auto;height:auto;font-weight:900}
[data-fallback-media]>img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
[data-fallback-media].has-image .safe-media__fallback{opacity:0}
[data-fallback-media].is-fallback .safe-media__fallback{opacity:1}
@keyframes gateway-call-orbit{to{transform:rotate(360deg)}}
@keyframes gateway-call-breathe{50%{transform:translateY(-2px) scale(1.06)}}
@keyframes gateway-call-progress{0%{transform:translateX(-115%)}55%{transform:translateX(95%)}100%{transform:translateX(280%)}}
@media(max-width:720px){
  .gateway-call-waiting{padding-inline:14px}.gateway-call-waiting__card{padding:30px 20px}
  .gateway-call-steps,.gateway-protocol-grid{grid-template-columns:1fr}
  .gateway-registration-note{grid-template-columns:auto minmax(0,1fr)}.gateway-registration-note span{grid-column:1/-1}
  .gateway-editor-actions,.gateway-card-actions{align-items:stretch;flex-direction:column}.gateway-editor-actions .button,.gateway-card-actions .button,.gateway-card-actions form{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .gateway-call-waiting__visual>i,.gateway-call-waiting__visual>span .icon,.gateway-call-progress i{animation:none}
  .gateway-call-progress i{width:100%}
}

/* Cloudgate OAuth application metadata and permission cards · v1.24.0 */
.gateway-application-heading {
  min-width: 0;
  margin-top: 5px;
  padding: 18px 20px;
  border: 1px solid #ecf2f6;
  border-radius: 18px;
  background: #f8fafc;
}

.gateway-application-heading h3 {
  margin: 5px 0 3px;
  font-size: 18px;
}

.gateway-application-heading p,
.gateway-permission-fieldset > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.gateway-permission-fieldset {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid #ecf2f6;
  border-radius: 20px;
  background: #fbfcfd;
}

.gateway-permission-fieldset legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 900;
}

.gateway-permission-fieldset > p {
  margin-bottom: 14px;
}

.gateway-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.gateway-permission-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 106px;
  padding: 16px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  overflow: hidden;
  border: 1px solid #edf2f5;
  border-radius: 17px;
  background: #fff;
  cursor: pointer;
  transition: transform 240ms var(--spring), border-color 190ms var(--ease), background 190ms var(--ease), box-shadow 210ms var(--ease);
}

.gateway-permission-card:hover {
  border-color: #d7e5ef;
  box-shadow: 0 12px 28px rgba(77, 104, 128, 0.09);
  transform: translateY(-3px);
}

.gateway-permission-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.gateway-permission-card__check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #e0e8ee;
  border-radius: 9px;
  background: #f2f6f8;
  color: transparent;
  transition: color 190ms var(--ease), background 190ms var(--ease), border-color 190ms var(--ease), transform 230ms var(--spring);
}

.gateway-permission-card__check .icon {
  width: 15px;
  height: 15px;
}

.gateway-permission-card strong,
.gateway-permission-card small {
  display: block;
  overflow-wrap: anywhere;
}

.gateway-permission-card strong {
  margin: 2px 0 5px;
  font-size: 13px;
}

.gateway-permission-card small {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.6;
}

.gateway-permission-card:has(input:checked) {
  border-color: #d6e5f0;
  background: #f1f8fc;
}

.gateway-permission-card:has(input:checked) .gateway-permission-card__check {
  border-color: #bad1df;
  background: #ebf4fa;
  color: #527b96;
  transform: scale(1.04);
}

.gateway-permission-card:has(input:focus-visible) {
  outline: 3px solid rgba(186, 212, 231, 0.28);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .gateway-permission-grid {
    grid-template-columns: 1fr;
  }

  .gateway-permission-card {
    min-height: 86px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-permission-card,
  .gateway-permission-card__check {
    transition: none;
  }
}

/* Cloudgate connection, access controls and administrator binding · v1.21.0 */
.gateway-admin-status,
.gateway-settings-lock,
.gateway-connection-result,
.gateway-connection-card {
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
}

.gateway-admin-status > div,
.gateway-settings-lock > div,
.gateway-connection-result > *,
.gateway-connection-card__identity > div {
  min-width: 0;
}

.gateway-admin-status .soft-icon,
.gateway-settings-lock .soft-icon {
  width: clamp(38px, 9cqi, 46px);
  height: clamp(38px, 9cqi, 46px);
  flex: 0 0 auto;
  border-radius: clamp(13px, 3cqi, 15px);
}

.gateway-admin-status .soft-icon .icon,
.gateway-settings-lock .soft-icon .icon {
  width: clamp(18px, 4.5cqi, 22px);
  height: clamp(18px, 4.5cqi, 22px);
}

.gateway-admin-status .eyebrow {
  max-width: 100%;
  margin-bottom: clamp(5px, 1.5cqi, 8px);
  font-size: clamp(0.58rem, 2.45cqi, 0.7rem);
  line-height: 1.35;
  letter-spacing: clamp(0.055em, 0.3cqi, 0.1em);
}

.gateway-admin-status h2 {
  max-width: 100%;
  font-size: clamp(1rem, 4.25cqi, 1.28rem);
  line-height: 1.28;
}

.gateway-admin-status p,
.gateway-settings-lock p,
.gateway-connection-result p {
  max-width: 100%;
  font-size: clamp(0.75rem, 2.85cqi, 0.86rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gateway-settings-lock strong,
.gateway-connection-result strong {
  font-size: clamp(0.86rem, 3.4cqi, 1rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gateway-admin-status .gateway-status-pill {
  max-width: 100%;
  padding: clamp(6px, 1.8cqi, 8px) clamp(9px, 2.6cqi, 12px);
  font-size: clamp(0.66rem, 2.35cqi, 0.78rem);
  white-space: nowrap;
}

.gateway-admin-status .gateway-status-pill i {
  flex: 0 0 auto;
}

.gateway-settings-panel .panel-heading > div,
.gateway-admin-grid .panel-heading > div {
  min-width: 0;
}

.gateway-settings-panel .panel-heading > .icon,
.gateway-admin-grid .panel-heading > .icon {
  flex: 0 0 auto;
}

.gateway-connection-shell {
  display: grid;
  min-width: 0;
  margin-top: 20px;
}

.gateway-connection-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr) auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  width: 100%;
  min-height: 142px;
  padding: clamp(20px, 2.7vw, 28px);
  border-color: #e3eff7;
  background:
    radial-gradient(circle at 4% 8%, rgba(216, 239, 251, 0.34), transparent 26%),
    radial-gradient(circle at 96% 95%, rgba(246, 211, 229, 0.26), transparent 27%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 251, 255, 0.97));
  box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(83, 126, 157, 0.09);
}

.gateway-connection-card__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.gateway-connection-card__icon {
  display: grid;
  width: clamp(48px, 6vw, 60px);
  aspect-ratio: 1;
  place-items: center;
  color: #649bc0;
  border: 1px solid rgba(214, 234, 246, 0.86);
  border-radius: 20px;
  background: linear-gradient(145deg, #f9fdff, #e5f5ff);
  box-shadow: 0 9px 22px rgba(96, 151, 188, 0.12);
}

.gateway-connection-card__icon .icon {
  width: clamp(22px, 3vw, 27px);
  height: clamp(22px, 3vw, 27px);
}

.gateway-connection-card__identity .eyebrow {
  margin-bottom: 5px;
  font-size: clamp(0.6rem, 1.1vw, 0.7rem);
}

.gateway-connection-card__identity h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.3;
}

.gateway-connection-card__identity p {
  margin: 5px 0 0;
  color: var(--text-faint);
  font-size: clamp(0.72rem, 1.05vw, 0.82rem);
  line-height: 1.55;
}

.gateway-connection-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  margin: 0;
}

.gateway-connection-card__facts > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ebf3f8;
  border-radius: 15px;
  background: rgba(248, 252, 255, 0.88);
}

.gateway-connection-card__facts dt {
  margin-bottom: 4px;
  color: #8196a5;
  font-size: clamp(0.59rem, 1vw, 0.68rem);
  font-weight: 800;
}

.gateway-connection-card__facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #496a80;
  font-size: clamp(0.68rem, 1.1vw, 0.76rem);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-connection-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.gateway-connection-card__actions form {
  display: contents;
}

.gateway-connection-card__actions .button {
  min-height: 42px;
  padding-inline: 15px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.gateway-connection-card__actions .button .icon {
  width: 17px;
  height: 17px;
}

.gateway-connection-delete {
  color: #6e808d;
  border-color: #eaeef2;
  background: #fafcfd;
}

.gateway-connection-card--empty {
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  transition:
    transform 280ms var(--spring),
    border-color 220ms var(--ease),
    box-shadow 280ms var(--ease),
    background 220ms var(--ease);
}

.gateway-connection-card--empty:hover,
.gateway-connection-card--empty:focus-visible {
  border-color: #cfe7f5;
  background:
    radial-gradient(circle at 4% 8%, rgba(207, 235, 250, 0.43), transparent 28%),
    radial-gradient(circle at 96% 95%, rgba(244, 202, 223, 0.32), transparent 29%),
    linear-gradient(145deg, #fff, #edf8ff);
  box-shadow: inset 0 1px 0 #fff, 0 20px 42px rgba(83, 126, 157, 0.14);
  transform: translateY(-3px);
}

.gateway-connection-card--empty:active {
  transform: translateY(0) scale(0.992);
}

.gateway-connection-plus {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: clamp(68px, 8vw, 88px);
  aspect-ratio: 1;
  place-items: center;
  color: #6fa9cc;
  border: 1px dashed #cde3f1;
  border-radius: 50%;
  background: rgba(238, 249, 255, 0.92);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.55);
  font-size: 0;
  line-height: 0;
  transition: transform 380ms var(--spring), color 220ms var(--ease), background 220ms var(--ease);
}

.gateway-connection-plus::before,
.gateway-connection-plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.gateway-connection-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.gateway-connection-card--empty[aria-expanded="true"] .gateway-connection-plus {
  color: #7b8d9a;
  background: #f5f8fb;
  transform: rotate(45deg) scale(0.92);
}

.gateway-connection-card__empty-copy {
  display: block;
  min-width: 0;
}

.gateway-connection-card__empty-copy .eyebrow,
.gateway-connection-card__empty-copy strong,
.gateway-connection-card__empty-copy small {
  display: block;
}

.gateway-connection-card__empty-copy .eyebrow {
  margin-bottom: 5px;
  font-size: clamp(0.62rem, 1vw, 0.72rem);
}

.gateway-connection-card__empty-copy strong {
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  line-height: 1.3;
}

.gateway-connection-card__empty-copy small {
  margin-top: 6px;
  color: var(--text-faint);
  font-size: clamp(0.72rem, 1.1vw, 0.84rem);
  line-height: 1.65;
}

.gateway-connection-card__empty-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.gateway-connection-card__empty-facts i {
  padding: 7px 10px;
  color: #718b9d;
  border: 1px solid #e8f2f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.63rem, 0.9vw, 0.72rem);
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.gateway-connection-editor {
  min-width: 0;
}

.gateway-connection-editor__inner {
  padding-top: 16px;
}

[data-gateway-connection-editor][data-editor-ready="true"] .gateway-connection-editor {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.992);
  transform-origin: 50% 0;
  transition:
    height 430ms var(--ease),
    opacity 240ms var(--ease),
    transform 430ms var(--spring),
    visibility 0s linear 430ms;
  will-change: height, opacity, transform;
}

[data-gateway-connection-editor][data-editor-ready="true"] .gateway-connection-editor.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    height 430ms var(--ease),
    opacity 260ms var(--ease),
    transform 430ms var(--spring),
    visibility 0s linear 0s;
}

.gateway-nav-register {
  min-height: 42px;
  padding: 0 17px;
  white-space: nowrap;
}

.drawer-gateway__actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 7px !important;
}

.gateway-settings-workspace {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.gateway-settings-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gateway-settings-fieldset[disabled] {
  opacity: 0.58;
}

.gateway-settings-lock {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 118px;
  padding: clamp(23px, 2.6vw, 29px);
  border-color: #ebeff3;
  background: #fbfcfd;
}

.gateway-settings-lock > div {
  padding-block: 3px;
}

.gateway-settings-lock p {
  margin: 4px 0 0;
  color: var(--text-faint);
}

.gateway-connection-form {
  display: grid;
  gap: 18px;
}

.gateway-connection-form .field small,
.gateway-secret-note {
  color: var(--text-faint);
  font-size: 0.75rem;
  line-height: 1.55;
}

.gateway-secret-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
}

.gateway-secret-note .icon {
  width: 17px;
  height: 17px;
  color: #7a8d9b;
}

.gateway-danger-stack {
  margin-top: 20px;
}

.gateway-danger-stack > .button-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gateway-settings-panel {
  min-width: 0;
}

.gateway-settings-panel .panel-heading p {
  margin: 5px 0 0;
  color: var(--text-faint);
  line-height: 1.6;
}

.gateway-toggle-grid {
  display: grid;
  gap: 11px;
}

.gateway-toggle-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 15px 16px;
  border: 1px solid #ecf3f7;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f8fcff);
  cursor: pointer;
  transition: transform 210ms var(--spring), border-color 180ms var(--ease), box-shadow 210ms var(--ease), background 180ms var(--ease);
}

.gateway-toggle-card:hover {
  border-color: #d9ebf5;
  box-shadow: 0 10px 24px rgba(88, 132, 161, 0.09);
  transform: translateY(-1px);
}

.gateway-toggle-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gateway-toggle-card__control {
  position: relative;
  display: block;
  width: 48px;
  height: 28px;
  border: 1px solid #e5eef3;
  border-radius: 999px;
  background: #edf3f6;
  box-shadow: inset 0 2px 5px rgba(72, 98, 117, 0.08);
  transition: background 220ms var(--ease), border-color 180ms var(--ease);
}

.gateway-toggle-card__control i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 9px rgba(72, 101, 123, 0.2);
  transition: transform 260ms var(--spring);
}

.gateway-toggle-card:has(input:checked) {
  border-color: #d6ebf6;
  background: linear-gradient(145deg, #fff, #eef9ff);
}

.gateway-toggle-card:has(input:checked) .gateway-toggle-card__control {
  border-color: #bdddef;
  background: linear-gradient(135deg, #c5e7f7, #bfdaee 58%, #d8e0e5);
}

.gateway-toggle-card:has(input:checked) .gateway-toggle-card__control i {
  transform: translateX(20px);
}

.gateway-toggle-card:has(input:focus-visible) {
  outline: 3px solid rgba(187, 217, 238, 0.28);
  outline-offset: 2px;
}

.gateway-toggle-card strong,
.gateway-toggle-card small {
  display: block;
}

.gateway-toggle-card small {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 0.74rem;
  line-height: 1.55;
}

.gateway-button-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 16px;
  border: 1px dashed #e3eef5;
  border-radius: 19px;
  background: #f7fbfd;
}

.gateway-button-preview > span {
  margin-right: auto;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 850;
}

.gateway-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.gateway-settings-actions > span {
  display: grid;
  margin-right: auto;
}

.gateway-settings-actions small {
  margin-top: 3px;
  color: var(--text-faint);
}

.gateway-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .gateway-admin-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-settings-fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-settings-actions {
    grid-column: auto;
  }

  .gateway-connection-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .gateway-connection-card__facts {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .gateway-connection-card__actions {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: wrap;
    max-width: 260px;
  }

  .gateway-connection-card--empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gateway-connection-card__empty-facts {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .gateway-nav-register {
    display: none;
  }

  .gateway-connection-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .gateway-connection-card__facts,
  .gateway-connection-card__actions {
    grid-column: 1;
    grid-row: auto;
  }

  .gateway-connection-card__actions {
    justify-content: flex-start;
    max-width: none;
  }

  .gateway-connection-card--empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gateway-connection-card--empty .gateway-connection-card__empty-facts {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .drawer-gateway__actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .drawer-gateway__actions .button {
    grid-column: auto;
  }

  .gateway-settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .gateway-settings-lock {
    align-items: flex-start;
    min-height: 112px;
    padding: 22px;
  }

  .gateway-admin-status {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 18px;
  }

  .gateway-admin-status .gateway-status-pill {
    grid-column: 1 / -1;
  }

  .gateway-connection-card {
    min-height: 0;
    padding: 18px;
    border-radius: 24px;
  }

  .gateway-connection-card--empty {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .gateway-connection-card--empty .gateway-connection-card__empty-facts {
    grid-column: 1;
    justify-content: center;
  }

  .gateway-connection-card__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway-connection-card__actions,
  .gateway-connection-card__actions form,
  .gateway-connection-card__actions .button {
    width: 100%;
  }

  .gateway-connection-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gateway-connection-card__actions .gateway-status-pill {
    grid-column: 1 / -1;
  }

  .gateway-connection-form .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .gateway-connection-form .gateway-secret-note {
    grid-column: 1 / -1;
  }

  .gateway-settings-actions .button {
    width: 100%;
  }

  .gateway-danger-stack {
    align-items: stretch;
  }

  .gateway-danger-stack > .button-row,
  .gateway-danger-stack form,
  .gateway-danger-stack .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-toggle-card,
  .gateway-toggle-card__control,
  .gateway-toggle-card__control i,
  .gateway-connection-card,
  .gateway-connection-plus,
  .gateway-connection-editor {
    transition: none;
  }
}

/* Blog identity menu and final admin-layout integrity pass. */
html.is-page-entering .admin-main .card {
  animation: admin-card-arrive 520ms var(--spring) both;
}

html.is-page-entering .admin-main .card:nth-child(2n) {
  animation-delay: 45ms;
}

html.is-page-entering .admin-main .card:nth-child(3n) {
  animation-delay: 85ms;
}

@keyframes admin-card-arrive {
  from {
    opacity: 0;
    transform: translateY(13px) scale(.988);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-nav,
.site-nav__actions {
  overflow: visible;
}

.identity-menu {
  position: relative;
  z-index: 8;
  display: grid;
}

.identity-menu::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  width: 46px;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}

.identity-menu__trigger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #ebf2f7;
  border-radius: 50%;
  background: #f9fcfe;
  color: #7398b2;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(83, 116, 141, .08);
  transition: transform 260ms var(--spring), border-color 190ms var(--ease), box-shadow 220ms var(--ease);
}

.identity-menu__trigger:hover,
.identity-menu.is-open .identity-menu__trigger,
.identity-menu:focus-within .identity-menu__trigger {
  border-color: #d8ebf5;
  box-shadow: inset 0 1px 0 #fff, 0 9px 21px rgba(83, 116, 141, .13);
  transform: translateY(-2px) scale(1.035);
}

.identity-menu__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #e4f4ff, #f4f8fb);
  font-size: 14px;
  font-weight: 950;
}

.identity-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.identity-menu__avatar .icon {
  width: 19px;
  height: 19px;
}

.identity-menu__panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  gap: 5px;
  width: max-content;
  min-width: 178px;
  max-width: min(260px, calc(100vw - 28px));
  padding: 9px;
  border: 1px solid rgba(227, 237, 244, .95);
  border-radius: 21px;
  background: rgba(255, 255, 255, .96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 20px 44px rgba(74, 105, 130, .17), inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
  transform: translateY(-10px) scale(.94);
  transform-origin: top right;
  transition: opacity 190ms var(--ease), visibility 0s linear 230ms, transform 310ms var(--spring);
}

.identity-menu.is-open .identity-menu__panel,
.identity-menu:hover .identity-menu__panel,
.identity-menu:focus-within .identity-menu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.identity-menu__panel > a,
.identity-menu__panel form button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 230ms var(--spring);
}

.identity-menu__panel > a:hover,
.identity-menu__panel form button:hover {
  background: #edf8ff;
  color: #6088a3;
  transform: translateX(3px);
}

.identity-menu__panel .icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.identity-menu__profile {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0 3px 4px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #e9f0f5;
}

.identity-menu__profile strong,
.identity-menu__profile small {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-menu__profile strong {
  font-size: 13px;
}

.identity-menu__profile small {
  color: var(--text-faint);
  font-size: 10px;
}

.taxonomy-workspace,
.taxonomy-list,
.taxonomy-create-panel {
  min-width: 0;
}

.taxonomy-list {
  display: grid;
  gap: 13px;
}

.taxonomy-library,
.taxonomy-create-page {
  padding: clamp(19px, 2.5vw, 27px);
}

.taxonomy-items {
  display: grid;
  gap: 13px;
}

.taxonomy-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid #eef3f7;
  border-radius: 20px;
  background: #f9fcfe;
  transition: border-color 190ms var(--ease), box-shadow 220ms var(--ease), transform 240ms var(--spring);
}

.taxonomy-list-card:hover {
  border-color: #e0eef6;
  box-shadow: 0 10px 24px rgba(76, 107, 132, .08);
  transform: translateY(-2px);
}

.taxonomy-list-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.taxonomy-list-card small {
  color: var(--text-faint);
}

.taxonomy-list-card p {
  margin: 4px 0 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.taxonomy-create-page {
  display: grid;
  gap: 22px;
}

.page-manager-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(390px, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 156px;
  padding: clamp(27px, 3.8vw, 42px);
  overflow: visible;
}

.page-manager-hero h2 {
  max-width: none;
  margin: 7px 0 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.18;
}

.page-manager-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 12px;
}

.page-manager-stats > span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 88px;
  padding: 14px 11px;
  border: 1px solid #eef3f7;
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  text-align: center;
}

.page-manager-stats strong,
.page-manager-stats small {
  display: block;
}

.page-manager-stats strong {
  font-size: 26px;
}

.page-manager-stats small {
  color: var(--text-faint);
  font-size: 11px;
}

.managed-page-grid {
  align-items: stretch;
}

.managed-page-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 264px;
  height: 100%;
  overflow: visible;
}

.managed-page-card > div {
  align-self: start;
  min-width: 0;
}

.managed-page-card h3 {
  margin: 8px 0;
  font-size: 20px;
  line-height: 1.3;
}

.managed-page-card p,
.managed-page-card small {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.managed-page-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-height: 42px;
  margin-top: auto;
}

.managed-page-card footer form {
  display: inline-flex;
}

.system-page-editor__identity,
.system-page-editor__blocks,
.menu-manager-intro,
.menu-order-form,
.footer-identity-panel,
.footer-columns-panel,
.site-address-workspace > .card,
.site-address-workspace > form {
  padding: clamp(21px, 3vw, 30px);
  overflow: visible;
}

.system-page-editor__identity {
  display: grid;
  gap: 22px;
}

.system-page-editor__identity .form-grid,
.system-page-editor__switches {
  width: 100%;
}

.system-page-editor__switches .choice-card {
  align-items: center;
  min-height: 96px;
  padding: 18px 20px;
}

.system-page-editor__switches .choice-card > span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-right: 5px;
}

.system-page-editor__switches small {
  color: var(--text-soft);
  line-height: 1.55;
}

.page-block-card,
.menu-editor-card,
.footer-column-card {
  overflow: visible;
}

.menu-order-form {
  min-height: 88px;
}

.menu-order-form .section-heading {
  min-height: 40px;
  margin: 0;
}

.menu-editor-card {
  padding: clamp(21px, 2.8vw, 29px);
}

.menu-editor-card > header {
  padding-right: 3px;
}

.menu-editor-card > form {
  gap: 18px;
}

.menu-editor-actions {
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding: 3px 2px 1px 0;
}

.footer-settings-editor {
  gap: 22px;
}

.footer-columns-panel .section-heading {
  margin-bottom: 20px;
}

.footer-column-editor {
  gap: 20px;
}

.footer-column-card {
  gap: 16px;
  padding: 22px;
}

.footer-column-card > header {
  gap: 11px;
}

.footer-column-card > header input {
  min-width: 0;
}

.footer-column-card > div {
  display: grid;
  gap: 12px;
}

.footer-link-row {
  gap: 12px;
  padding: 12px;
  border-radius: 17px;
  background: #f7fafc;
}

.site-address-workspace {
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: start;
}

.site-address-workspace .admin-form {
  display: grid;
  gap: 18px;
}

.site-address-workspace textarea {
  min-height: 240px;
}

.site-address-list {
  gap: 16px;
}

.site-address-row {
  gap: 16px;
  padding: 14px;
  border: 1px solid #eff5f8;
  border-radius: 18px;
  background: #f9fcfe;
}

.hint-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hint-control-card {
  min-height: 94px;
  padding: 18px;
}

.hint-control-card > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hint-catalog {
  margin-top: 26px;
  padding: 23px;
  border: 1px solid #eef3f7;
  border-radius: 24px;
  background: #f9fcfe;
}

.hint-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.hint-catalog-grid article {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 15px;
  border: 1px solid #eff5f8;
  border-radius: 17px;
  background: #fff;
  transition: transform 230ms var(--spring), box-shadow 210ms var(--ease);
}

.hint-catalog-grid article:hover {
  box-shadow: 0 9px 20px rgba(76, 107, 132, .08);
  transform: translateY(-2px);
}

.hint-catalog-grid small {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.55;
}

html[data-panel-descriptions="hidden"] .admin-main :is(.panel-heading, .section-heading) p,
html[data-card-descriptions="hidden"] .admin-main .choice-card small,
html[data-card-descriptions="hidden"] .admin-main :is(.gateway-step-card, .gateway-connection-card) p,
html[data-field-descriptions="hidden"] .admin-main .field > small:not(.field-error) {
  display: none;
}

.runtime-resource-card {
  --runtime-accent: #cfe8f7;
  --runtime-surface: #f0f9ff;
}

.runtime-resource-card--pink,
.runtime-resource-card--mint,
.runtime-resource-card--purple {
  --runtime-accent: #cfe8f7;
  --runtime-surface: #f0f9ff;
}

.runtime-progress i,
.dashboard-widget__progress i {
  background: var(--progress-fill);
  background-image: none;
  animation: none;
  box-shadow: none;
}

.dashboard-fixed-grid__hero {
  align-items: center;
}

.dashboard-fixed-grid__hero .dashboard-widget__hero-mark {
  width: 76px;
  height: 76px;
  border-radius: 25px;
  font-size: 31px;
}

.dashboard-fixed-grid__hero h2 {
  margin: 8px 0 7px;
  font-size: clamp(28px, 3.15vw, 46px);
  line-height: 1.16;
}

.dashboard-fixed-grid__hero p {
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.7;
}

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.audit-summary-card {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 132px;
  padding: 22px;
}

.audit-summary-card > span,
.audit-summary-card small {
  color: var(--text-faint);
}

.audit-summary-card strong {
  font-size: clamp(23px, 2.8vw, 34px);
}

.audit-filter-panel,
.audit-log-panel,
.audit-retention-card,
.audit-delete-card {
  padding: clamp(21px, 3vw, 30px);
}

.audit-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 14px;
}

.audit-log-panel {
  margin: 20px 0;
}

.audit-table {
  min-width: 920px;
}

.audit-table details {
  min-width: 130px;
}

.audit-table details p {
  max-width: 420px;
  margin: 9px 0 0;
  color: var(--text-soft);
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 900px) {
  .audit-log-panel .table-scroll { overflow:visible; border:0; background:transparent; }
  .audit-table { display:block; min-width:0; }
  .audit-table thead { display:none; }
  .audit-table tbody { display:grid; gap:12px; }
  .audit-table tbody tr {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 18px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
  }
  .audit-table tbody td {
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    align-items:start;
    gap:10px;
    min-width:0;
    padding:10px 0;
    border-top:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .audit-table tbody td::before {
    content:attr(data-label);
    color:var(--text-faint);
    font-size:11px;
    font-weight:800;
  }
  .audit-table tbody td.audit-table__empty { display:block; grid-column:1/-1; text-align:center; }
  .audit-table tbody td.audit-table__empty::before { content:none; }
  .audit-table details { min-width:0; }
}

@media (max-width: 620px) {
  .audit-table tbody tr { grid-template-columns:minmax(0,1fr); }
}

.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 18px;
}

.audit-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 18px;
  align-items: stretch;
}

.audit-retention-card {
  display: grid;
  gap: 18px;
}

.audit-retention-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audit-delete-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-color: #eef1f3;
  background: #fbfcfd;
}

.audit-delete-card p {
  color: var(--text-soft);
  line-height: 1.7;
}

.component-font-card {
  cursor: pointer;
}

.component-font-card.is-active {
  border-color: #c7e2f2;
  background: #eff9ff;
  box-shadow: 0 11px 25px rgba(75, 109, 134, .11);
}

.component-showcase .button--primary {
  border-color: var(--component-accent, #d6ebf9);
  background: linear-gradient(145deg, #fff, var(--component-accent, #d6ebf9));
}

.component-admin-parent {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.component-admin-parent .component-admin-children {
  display: grid;
  gap: 4px;
  max-height: 0;
  padding: 0 0 0 17px;
  overflow: hidden;
  opacity: 0;
  border-radius: 0;
  background: transparent;
  transition: max-height 300ms var(--spring), opacity 180ms var(--ease), padding 250ms var(--ease);
}

.component-admin-parent.is-open .component-admin-children {
  max-height: 130px;
  padding-top: 2px;
  opacity: 1;
}

.component-media-stage {
  background-position: center;
  background-size: cover;
}

.component-media-stage.has-image > span {
  opacity: 0;
}

.component-sticker-row button {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: #edf3f7;
  color: var(--text-soft);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.component-sticker-row button.is-active {
  background: #dff2ff;
  color: #638da8;
}

.component-crop-canvas i {
  transform: scale(var(--crop-scale, 1.32));
  transition: transform 220ms var(--ease);
}

.component-rich-text[contenteditable="true"] {
  outline: none;
}

.component-rich-text[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px #e0eff8;
}

.component-rich-text.is-source-mode {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(208, 224, 235, .18) 28px);
  color: #69879b;
  font-family: Consolas, monospace;
}

@media (max-width: 1080px) {
  .page-manager-hero {
    grid-template-columns: 1fr;
  }

  .audit-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hint-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .site-address-workspace,
  .audit-management-grid {
    grid-template-columns: 1fr;
  }

  .audit-summary-grid {
    grid-template-columns: 1fr;
  }

  .audit-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .identity-menu {
    display: none;
  }

  .page-manager-hero,
  .system-page-editor__identity,
  .system-page-editor__blocks,
  .menu-order-form,
  .footer-identity-panel,
  .footer-columns-panel,
  .site-address-workspace > .card,
  .site-address-workspace > form,
  .audit-filter-panel,
  .audit-log-panel,
  .audit-retention-card,
  .audit-delete-card {
    padding: 18px;
  }

  .page-manager-stats,
  .hint-control-grid,
  .hint-catalog-grid,
  .audit-filter-grid,
  .audit-retention-fields {
    grid-template-columns: 1fr;
  }

  .taxonomy-list-card {
    grid-template-columns: 1fr;
  }

  .taxonomy-list-card form,
  .taxonomy-list-card .button {
    width: 100%;
  }

  .managed-page-card {
    min-height: 240px;
  }

  .dashboard-fixed-grid__hero h2 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-page-entering .admin-main .card {
    animation: none;
  }

  .identity-menu__trigger,
  .identity-menu__panel,
  .identity-menu__panel > a,
  .identity-menu__panel form button,
  .hint-catalog-grid article,
  .component-admin-parent .component-admin-children {
    transition: none;
  }
}

/* v1.30.1 final mobile overrides must stay at the end of this layered stylesheet. */
.global-search-box input {
  min-height: 44px;
}

.site-footer__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(235, 241, 245, .82);
}

/* v1.36.0 overlay tokens. Since 1.39.0 the top capsule and dialog
   presentation live in notifications.css; these remain the colour defaults. */
:root {
  --toast-background: #fff;
  --toast-text: #354052;
  --toast-accent: #bfd9e8;
  --toast-success: #78b894;
  --toast-warning: #c99a4a;
  --toast-error: #c97676;
  --toast-radius: 28px;
}

.site-footer__meta { justify-content: flex-start; }

dialog.modal,
.app-system-dialog {
  isolation: isolate;
  position: fixed;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--dialog-accent) 42%, #ebf0f5);
  border-radius: var(--dialog-radius);
  background: color-mix(in srgb, var(--dialog-color-start) 92%, var(--dialog-color-end));
}

dialog.modal[open] { display: block; }
dialog.modal::backdrop { background: rgba(74,87,107,.2); backdrop-filter: blur(var(--dialog-backdrop-blur)); }
.app-system-dialog[open] { display: block; animation: none; }
.app-system-dialog__icon { display: none !important; }
.app-system-dialog__content { min-width: 0; padding: clamp(20px, 4vw, 28px); }
.app-system-dialog__content > p { min-height: 0; margin: 14px 0 20px; color: var(--text-soft); line-height: 1.7; }

.toast-appearance-card,
.toast-shape-card { margin-top: 20px; }
.toast-shape-card .dialog-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog-preview-panel .button-row { flex-wrap: wrap; justify-content: flex-end; }

.admin-body {
  --admin-surface: rgba(255,255,255,.88);
  --admin-line: rgba(224, 234, 242, .94);
  background: #f7f9fc;
  color: #354052;
}
.admin-sidebar,
.admin-topbar,
.admin-main .card,
.admin-panel,
.admin-section {
  border-color: var(--admin-line);
  background-color: var(--admin-surface);
  color: #354052;
}
.admin-main .card,
.admin-panel,
.admin-section { box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 10px 28px rgba(68,91,118,.07); }
.admin-nav a:hover,
.admin-nav button:hover,
.admin-nav .is-active { border-color: #ddebf4; background: #e5effb; color: #526fa6; }

@media (max-width: 700px) {
  .toast-shape-card .dialog-metric-grid { grid-template-columns: 1fr; }
  .dialog-preview-panel { align-items: stretch; flex-direction: column; }
  .dialog-preview-panel .button-row { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .global-search-box {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 64px;
    padding: 8px 9px 8px 16px;
    border-radius: var(--radius-pill);
  }

  .global-search-box .button {
    grid-column: auto;
    width: auto;
    min-width: 60px;
    min-height: 46px;
    padding-inline: 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .site-footer__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .drawer-gateway {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 24px;
  }

  .drawer-gateway__avatar {
    width: 34px;
    height: 34px;
  }

  .drawer-gateway__actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 6px !important;
    width: 100%;
    margin-top: 1px;
  }

  .drawer-gateway__actions form {
    min-width: 0;
  }

  .drawer-gateway__actions .button {
    grid-column: auto;
    width: 100%;
    min-height: 36px;
    padding-inline: 8px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .global-search-box {
    gap: 7px;
    padding-left: 13px;
  }

  .global-search-box > svg {
    width: 20px;
    height: 20px;
  }

  .global-search-box .button {
    min-width: 54px;
    padding-inline: 11px;
  }
}

/* --------------------------------------------------------------------------
   v1.34.7 · 小窗动效与本地身份
   The historical stylesheet is intentionally kept above this point so older
   templates and motion hooks remain compatible. This final layer is the
   single source of truth for the visual language: fog white, cloud blue,
   petal pink, silver grey, graphite text and sunny blue actions.
   -------------------------------------------------------------------------- */
:root {
  --fog-white: #F7F9FC;
  --cloud-blue: #E5EFFB;
  --petal-pink: #F7E5ED;
  --silver-mist: #f2f5f7;
  --graphite-blue: #354052;
  --sunny-blue: #526FA6;
  --canvas: var(--fog-white);
  --canvas-blue: var(--cloud-blue);
  --surface: #FFFFFF;
  --surface-soft: var(--fog-white);
  --text: var(--graphite-blue);
  --text-soft: #5E6A7D;
  --text-faint: #788496;
  --border: var(--silver-mist);
  --border-strong: #e5ebf1;
  --blue-50: #F8FBFF;
  --blue-050: var(--blue-50);
  --blue-100: var(--cloud-blue);
  --blue-200: #e0eaf5;
  --blue-300: #d1deef;
  --blue-500: var(--sunny-blue);
  --blue-600: var(--sunny-blue);
  --gray-100: var(--silver-mist);
  --gray-300: #e5ebf1;
  --gray-600: #657286;
  --progress-fill: #d1deef;
  --pink-100: var(--petal-pink);
  --pink-200: #EACBD8;
  --pink-400: #D5A8BC;
  --pink-700: #8A5D6D;
  --purple-100: #EAF0F7;
  --purple-500: #a6b2c6;
  --mint-100: #E9F0F4;
  --mint-700: #5D7488;
  --yellow-100: #F2F0E9;
  --yellow-700: #786C4D;
  --state-success-100: #E6F3EC;
  --state-success-700: #397557;
  --state-warning-100: #F7F0DC;
  --state-warning-700: #806A2D;
  --danger-100: #F8E7E7;
  --danger-700: #A04440;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 21px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --shadow-xs: 0 1px 2px rgba(53,64,82,.045);
  --shadow-sm: 0 10px 26px rgba(80,103,137,.075);
  --shadow-md: 0 18px 42px rgba(80,103,137,.12);
  --shadow-float: 0 26px 64px rgba(80,103,137,.16);
  --font: ui-rounded,"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
  --font-reading: "Source Han Serif SC","Noto Serif CJK SC","Songti SC",SimSun,serif;
  --font-mono: ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",monospace;
  --motion-enter: 460ms;
  --motion-hover: 170ms;
  --motion-press: 105ms;
  --motion-card: 220ms;
  --motion-panel: 280ms;
}

html { background: var(--fog-white); }
body {
  background: var(--fog-white) !important;
  color: var(--graphite-blue);
  font-size: 16px;
  line-height: 1.65;
}

h1,h2,h3,h4 { color: var(--graphite-blue); letter-spacing: -.025em; }
p,li,dd { overflow-wrap: anywhere; }
code,kbd,pre,.tabular-nums,[data-number],time { font-variant-numeric: tabular-nums; }
code,kbd,pre { font-family: var(--font-mono); }

/* Flat, quiet surfaces keep the page readable; image covers remain expressive. */
:where(.card,.admin-panel,.admin-section,.component-showcase,.modal,.dialog,
  .filter-card,.toc,.article,.profile-card,.friend-board,.guestbook,
  .comments,.editor-sidebar-widget,.system-fact-card,.seo-panel,
  .seo-preview-card,.site-footer,.auth-card,.message-card,.comment-card,
  .moderation-message-card,.account-panel,.account-section) {
  border-color: var(--silver-mist) !important;
  border-radius: var(--radius-card);
  background-color: var(--surface) !important;
  background-image: none !important;
  box-shadow: var(--shadow-sm);
}

:where(.hero-card,.hero-story,.featured-note,.showcase-card,.project-showcase,
  .home-cta,.home-about-collage,.now-card,.note-card,.post-card,.corner-card,
  .moment-note,.friend-board,.guestbook,.comments,.profile-card,
  .content-state,.home-config,.admin-card) {
  background-color: var(--surface) !important;
  background-image: none !important;
}
/* The homepage has an older, intentionally strong selector for its large
   surfaces. Match that specificity here so the new palette wins everywhere. */
body .home-v2 :is(.card,.hero-story,.featured-note,.showcase-card,
  .project-showcase,.home-cta,.home-about-collage,.now-card,.note-card,
  .post-card,.corner-card,.moment-note,.friend-board,.guestbook,.comments,
  .profile-card,.content-state,.home-config,.admin-card) {
  background-color: var(--surface) !important;
  background-image: none !important;
}

:where(.cover--blue,.cover--pink,.cover--purple,.list-post__cover,
  .post-card__cover) {
  background: var(--cloud-blue) !important;
  color: var(--sunny-blue) !important;
}
:where(.wash--pink,.wash--blue,.wash--mint,.wash--purple,.wash--yellow) {
  background: var(--surface) !important;
}

.site-nav {
  border-color: rgba(229, 235, 241, .92);
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 26px rgba(80,103,137,.08);
  backdrop-filter: blur(16px);
}
.brand-mark {
  border-radius: 13px;
  background: var(--cloud-blue);
  color: var(--sunny-blue);
}
.site-nav__links a:hover,
.site-nav__links a.is-current,
.icon-button:hover,
.filter-group button:hover,
.filter-group button.is-selected,
.toc a:hover,
.toc a.is-current {
  background: var(--cloud-blue);
  color: var(--graphite-blue);
}
.site-nav__links a.is-current { box-shadow: inset 0 0 0 1px rgba(153, 171, 205, .08); }

/* The original two-pane window mark. It is deliberately small and imperfect. */
.window-symbol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 24px;
  height: 20px;
  color: currentColor;
  transform: rotate(-2deg);
}
.window-symbol i {
  display: block;
  min-width: 0;
  border: 1.5px solid currentColor;
  border-radius: 7px 5px 6px 5px;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.window-symbol i:last-child {
  transform: translateY(2px) rotate(3deg);
  border-radius: 5px 7px 5px 6px;
}
.brand-mark .window-symbol { width: 23px; height: 19px; }
.window-symbol--loading { color: var(--sunny-blue); animation: window-symbol-breathe 1.2s var(--ease) infinite; }
@keyframes window-symbol-breathe {
  50% { opacity: .56; transform: rotate(2deg) scale(.94); }
}

.button {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-weight: 800;
  transition: transform var(--motion-press) var(--spring),
    box-shadow var(--motion-hover) var(--ease),
    background-color var(--motion-hover) var(--ease),
    border-color var(--motion-hover) var(--ease), color var(--motion-hover) var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.975); }
.button--primary {
  border-color: var(--sunny-blue) !important;
  background: var(--sunny-blue) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(82,111,166,.2);
}
.button--primary:hover { background: #476398 !important; box-shadow: 0 14px 28px rgba(82,111,166,.25); }
.button--soft { border-color: var(--silver-mist) !important; background: #fff !important; color: var(--graphite-blue); }
.button--soft:hover { border-color: var(--blue-300) !important; background: var(--cloud-blue) !important; }
.button--pink { border-color: #EBCDD9 !important; background: var(--petal-pink) !important; color: var(--pink-700) !important; }
.button--mint,.button--cream,.button--danger { background-image: none !important; }
.button--mint { border-color: #e6eff3 !important; background: var(--mint-100) !important; color: var(--mint-700) !important; }
.button--cream { border-color: #E8DFC3 !important; background: var(--yellow-100) !important; color: var(--yellow-700) !important; }
.button--danger { border-color: #EBCACA !important; background: var(--danger-100) !important; color: var(--danger-700) !important; }

.icon-button {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: var(--radius-control);
  border-color: var(--silver-mist);
  background: #fff;
  color: var(--graphite-blue);
}
.icon-button:hover { border-color: var(--blue-300); background: var(--cloud-blue); }
.icon-button:active { transform: scale(.95); }
.text-link { color: var(--sunny-blue); }
.text-link:hover { text-decoration: none; color: #476398; }
.badge--blue { background: var(--cloud-blue); color: var(--sunny-blue); }
.badge--pink { background: var(--petal-pink); color: var(--pink-700); }

/* Native fields are still accessible, but no longer look like browser defaults. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select) {
  min-height: 44px;
  border: 1px solid var(--silver-mist);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--graphite-blue);
  box-shadow: inset 0 1px 0 rgba(53,64,82,.025);
  transition: border-color var(--motion-hover) var(--ease), box-shadow var(--motion-hover) var(--ease), background-color var(--motion-hover) var(--ease);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select):focus {
  border-color: var(--accent-soft);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(153, 171, 205, .12);
  outline: 0;
}
:where(input[type="checkbox"],input[type="radio"]) { accent-color: var(--accent-soft); }
.field__label,.field > span { color: var(--graphite-blue); }

.admin-body { background: var(--fog-white) !important; }
.admin-sidebar {
  border-color: var(--silver-mist);
  background: #fff;
  box-shadow: 10px 0 30px rgba(80,103,137,.055);
}
.admin-topbar { color: var(--graphite-blue); }
.admin-main { background: transparent; }
.admin-nav-group.is-open { border-color: var(--silver-mist) !important; background: var(--fog-white) !important; }
.admin-nav-group__toggle:hover,
.admin-nav-group__toggle:focus-visible { background: var(--cloud-blue) !important; }
.admin-nav .admin-nav-group__items a.is-current {
  border-color: var(--blue-200) !important;
  background: var(--cloud-blue) !important;
  color: var(--graphite-blue);
}
.admin-nav .admin-nav-group__items a:hover,
.admin-nav .admin-nav-group__items a:focus-visible { border-color: var(--silver-mist) !important; background: #fff !important; }
.admin-panel,.admin-section { box-shadow: var(--shadow-sm); }
.panel-heading,.section-heading { border-color: var(--silver-mist); }

/* The main dashboard is a calm white work surface, not a grid of candy colours. */
:where(.dashboard-widget,.dashboard-widget-option,.dashboard-fixed-grid > .dashboard-widget) {
  border-color: var(--silver-mist) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--shadow-sm);
}
:where(.dashboard-widget:hover,.dashboard-widget-option:hover,.dashboard-fixed-grid > .dashboard-widget:hover) {
  border-color: var(--blue-300) !important;
  box-shadow: var(--shadow-md);
}
.dashboard-widget .soft-icon,
.dashboard-widget__hero-mark { background: var(--cloud-blue); color: var(--sunny-blue); box-shadow: none; }
.dashboard-widget__actions a,
.dashboard-widget__timeline > div,
.dashboard-widget__status > div { border-color: var(--silver-mist); background: var(--fog-white); }
.dashboard-widget__progress { background: var(--silver-mist); box-shadow: none; }
.dashboard-widget__progress i { background: var(--accent-soft); }

.site-footer { border-top-color: var(--silver-mist); box-shadow: none; background: transparent !important; }
.article { max-width: 740px; font-family: var(--font-reading); line-height: 1.8; }
.article :is(button,.button,.badge,.eyebrow,.article-meta,.toc) { font-family: var(--font); }
.article blockquote { border-left-color: var(--accent-soft); color: var(--graphite-blue); background: var(--cloud-blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.progress { background: var(--silver-mist); }
.progress span { background: var(--accent-soft); }

/* One small window mark in album and loading feedback, never as decoration soup. */
.album-card { position: relative; }
.album-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 13px;
  width: 25px;
  height: 19px;
  border: 1px solid rgba(153, 171, 205, .58);
  border-radius: 7px 5px 6px 5px;
  background:
    linear-gradient(var(--accent-soft),var(--accent-soft)) 4px 4px/6px 8px no-repeat,
    linear-gradient(var(--accent-soft),var(--accent-soft)) 13px 3px/7px 10px no-repeat,
    rgba(255,255,255,.82);
  opacity: .9;
  pointer-events: none;
  transform: rotate(3deg);
}
.button--loading i {
  position: relative;
  width: 20px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: none;
  animation: none;
}
.button--loading i::before,
.button--loading i::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 7px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 4px 3px 4px 3px;
  opacity: .76;
  animation: window-loading-pane 900ms var(--ease) infinite;
}
.button--loading i::before { left: 1px; }
.button--loading i::after { right: 1px; transform: translateY(2px) rotate(3deg); animation-delay: 90ms; }
@keyframes window-loading-pane { 50% { opacity: .32; transform: translateY(-1px) scale(.9); } }
.skeleton-card i {
  position: relative;
  background: var(--cloud-blue) !important;
  animation: none !important;
}
.skeleton-card i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 24px;
  border: 1px solid rgba(153, 171, 205, .38);
  border-radius: 8px 6px 7px 6px;
  background:
    linear-gradient(var(--accent-soft),var(--accent-soft)) 6px 6px/8px 10px no-repeat,
    linear-gradient(var(--accent-soft),var(--accent-soft)) 18px 5px/8px 12px no-repeat;
  opacity: .65;
  transform: translate(-50%,-50%);
  animation: window-symbol-breathe 1.2s var(--ease) infinite;
}

/* Compact swatches and component gallery now expose the exact production palette. */
.component-swatch i { border-color: rgba(255,255,255,.92); box-shadow: var(--shadow-xs); }
.component-swatch--fog i { background: var(--fog-white) !important; }
.component-swatch--blue i { background: var(--cloud-blue) !important; }
.component-swatch--pink i { background: var(--petal-pink) !important; }
.component-swatch--gray i { background: var(--silver-mist) !important; }
.component-swatch--graphite i { background: var(--graphite-blue) !important; }
.component-swatch--sunny i { background: var(--sunny-blue) !important; }
.component-swatch--white i { background: #fff !important; }
.component-window-symbol-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--silver-mist);
  border-radius: var(--radius-md);
  background: var(--fog-white);
}
.component-window-symbol-preview .window-symbol { flex: 0 0 auto; color: var(--sunny-blue); }
.component-window-symbol-preview strong,
.component-window-symbol-preview small { display: block; }
.component-window-symbol-preview small { margin-top: 2px; color: var(--text-faint); font-size: 12px; }

/* Motion remains expressive but only transform/opacity are animated on entry. */
:where(.card--interactive,.component-content-card,.post-card,.list-post,
  .project-card,.moment-entry,.album-card,.photo-tile,.friend-card,
  .message-card,.comment-card,.admin-panel,.admin-section) {
  transition: transform var(--motion-card) var(--spring),
    border-color var(--motion-hover) var(--ease),
    box-shadow var(--motion-card) var(--ease),
    background-color var(--motion-hover) var(--ease);
}
@media (hover: hover) {
  :where(.card--interactive,.component-content-card,.post-card,.list-post,
    .project-card,.moment-entry,.album-card,.photo-tile,.friend-card,
    .message-card,.comment-card):hover {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .page-hero h1,.article-header h1 { font-size: clamp(30px, 9vw, 36px); }
  .page-hero p { font-size: 16px; }
  .page-shell { padding-top: 40px; padding-bottom: 72px; }
  .admin-panel,.admin-section,.component-showcase { border-radius: 18px; }
  .card { border-radius: 18px; }
  .article { font-size: 16px; line-height: 1.8; }
  .component-window-symbol-preview { align-items: flex-start; }
}
@media (max-width: 480px) {
  .button { min-height: 42px; padding-inline: 15px; }
  .icon-button { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-mark { width: 36px; height: 36px; }
  .window-symbol { transform: scale(.92) rotate(-2deg); }
}

html[data-motion="reduce"] :where(.window-symbol--loading,.button--loading i::before,.button--loading i::after,.skeleton-card i::after),
html[data-performance="low"] :where(.window-symbol--loading,.button--loading i::before,.button--loading i::after,.skeleton-card i::after) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :where(.window-symbol--loading,.button--loading i::before,.button--loading i::after,.skeleton-card i::after) { animation: none !important; }
}

/* --------------------------------------------------------------------------
   v1.34.7 · 小窗动效收束与本地身份入口
   Keep the physical language quiet: the surface enters as a thin line,
   expands into its content, and leaves by drawing back to that line.
   -------------------------------------------------------------------------- */
:root {
  --sunny-blue: #6f9fbb;
  --action-blue: #ddeef7;
  --action-blue-hover: #d4e8f4;
  --action-blue-ink: #3f6277;
  --motion-feature: 460ms;
  --motion-compact: 340ms;
  --motion-control: 210ms;
  --motion-heading: 250ms;
}

.button--primary {
  border-color: #cde2ef !important;
  background: var(--action-blue) !important;
  background-image: none !important;
  color: var(--action-blue-ink) !important;
  box-shadow: 0 9px 22px rgba(112, 164, 198, .18);
}
.button--primary:hover {
  border-color: #c2dcec !important;
  background: var(--action-blue-hover) !important;
  color: #36596e !important;
  box-shadow: 0 13px 28px rgba(112, 164, 198, .22);
}
.button--primary:focus-visible { outline-color: rgba(195, 224, 240, .72); }

/* The hero is a welcome, not a full-screen dashboard. */
.home-v2 { --home-gap: clamp(52px, 6vw, 82px); padding-top: clamp(24px, 4vw, 46px); }
.home-hero-v2 { min-height: 0; gap: clamp(16px, 1.8vw, 22px); }
.hero-story {
  grid-template-columns: minmax(0, 1.1fr) minmax(200px, .9fr);
  min-height: clamp(400px, 37vw, 500px);
  padding: clamp(28px, 3vw, 44px);
  box-shadow: inset 0 1px 0 #fff, 0 18px 48px rgba(88, 119, 154, .1);
}
.hero-story h1 { font-size: clamp(36px, 3.3vw, 46px); }
.hero-story__copy > p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.72; }
.hero-planet-wrap { min-height: clamp(220px, 26vw, 290px); }
.hero-avatar { width: min(18vw, 204px); }
.planet-orbit { width: min(23vw, 260px); }
.hero-side { align-content: start; }
.hero-status {
  align-self: start;
  grid-template-rows: auto auto;
  min-height: 0;
}
.hero-status__row { padding: clamp(22px, 2.6vw, 30px); }
.featured-note { min-height: 360px; }
.note-stack { min-height: 360px; }

/* v1.34.25 · tiered, interruptible motion timeline */
/* The bootstrap class exists before the stylesheet is parsed. Explicit motion
   surfaces therefore reserve their layout without flashing a finished card. */
html.motion-preparing [data-motion-surface],
html.motion-preparing [data-motion-control],
html.motion-preparing .card,
html.motion-preparing .button,
html.motion-preparing .icon-button { opacity: 0; }
/* Reveal transform must settle, otherwise every revealed block remains subtly
   shifted and the page reads as if it is constantly moving. */
html.is-motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
html.is-motion-ready .card.is-revealed:not([data-tilt]) { opacity: 1; transform: none; }
html.is-motion-ready .card.is-revealed[data-tilt] { opacity: 1; }
html.is-motion-ready .card:not(.is-revealed)[data-tilt] { opacity: 1; }
html.is-motion-ready [data-motion-shell="true"] {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

/* The homepage shell stays transparent. Surfaces belong to the individual
   cards, so no wrapper can become a single white slab between modules. */
.home-v2 { background: transparent !important; }
.home-v2 > .page-custom-blocks { background: transparent !important; }
/* The collage is a layout wrapper, not a content card.  Keeping its
   inherited white surface creates one oversized slab behind the four
   independent about cards. */
body .home-v2 .home-about-collage {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.is-motion-ready body .motion-line-target {
  position: relative;
  --motion-static-border: rgba(230, 242, 249, .92);
}
html.is-motion-ready body .motion-line-target.is-outline-ready {
  border-color: transparent !important;
}
html.is-motion-ready body .motion-line-target.motion-surface-owned,
html.is-motion-ready body .motion-child-control.motion-surface-owned,
html.is-motion-ready body .motion-control-target.motion-surface-owned {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition-property: transform, color !important;
}
.motion-line-target.motion-surface-snap,
.motion-child-control.motion-surface-snap,
.motion-control-target.motion-surface-snap {
  transition: none !important;
}
/* Motion targets opt out of the generic reveal/card opacity transition. It
   used to run beside the outline timeline and made one gesture look like two
   consecutive stages. Hover and press feedback remain intact. */
html.is-motion-ready [data-reveal].motion-line-target:not(.card) {
  transition: none;
  transition-delay: 0s;
}
html.is-motion-ready .card.motion-line-target {
  transition-property: transform, box-shadow, background;
  transition-duration: 220ms, 220ms, 200ms;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
  transition-delay: 0s;
}
html.is-motion-ready .motion-line-target,
html.is-motion-ready .motion-line-target:not(.is-revealed) {
  opacity: 1;
}
html.is-motion-ready .motion-line-target:not([data-tilt]) {
  transform: none;
}

/* The animated SVG is also the final border. There is no SVG-to-CSS border
   hand-off at the last frame, so the motion cannot pause or flash at 100%. */
.motion-outline {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--component-motion-color, rgba(191, 217, 232, .76));
  opacity: 1;
  transition: none;
  shape-rendering: geometricPrecision;
}
.motion-line-target:not(.is-outline-ready) > .motion-outline {
  opacity: 0;
}
.motion-outline__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--motion-path-length, 260);
  stroke-dashoffset: var(--motion-path-length, 260);
  transition: none;
}
.motion-line-target[data-motion-kind="compact"] > .motion-outline {
  color: rgba(198, 220, 232, .58);
}
.motion-line-target[data-motion-kind="compact"] .motion-outline__path {
  stroke-width: 1.1;
}
.motion-line-target[data-motion-kind="control"] > .motion-outline {
  color: rgba(191, 217, 232, .68);
}
.motion-line-target[data-motion-kind="control"] .motion-outline__path {
  stroke-width: 1;
}
/* A card owns one physical timeline. Only its visual layers are promoted;
   the layout box never receives a directional wipe or a moving shadow. */
.motion-line-target,
.motion-child-control,
.motion-control-target { isolation: isolate; }
.motion-child-control,
.motion-control-target { position: relative; }
.motion-child-control.is-outline-ready,
.motion-control-target.is-outline-ready { border-color: transparent !important; }
.motion-surface-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}
.motion-content,
.motion-control-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  transform-origin: center;
}
.motion-control-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  max-width: 100%;
}
html.is-motion-ready .motion-line-target.is-motion-active > .motion-outline,
html.is-motion-ready .motion-line-target.is-motion-active > .motion-surface-layer,
html.is-motion-ready .motion-line-target.is-motion-active .motion-child-control > .motion-outline,
html.is-motion-ready .motion-line-target.is-motion-active .motion-child-control > .motion-surface-layer,
html.is-motion-ready .motion-line-target.is-motion-active .motion-content,
html.is-motion-ready .motion-line-target.is-motion-active .motion-control-label,
html.is-motion-ready .motion-heading-target.is-motion-active {
  will-change: opacity, transform, filter;
}
html.is-motion-ready .motion-line-target[data-motion-state="idle"] > .motion-surface-layer,
html.is-motion-ready .motion-line-target[data-motion-state="idle"] .motion-child-control > .motion-surface-layer {
  opacity: 0;
  filter: blur(3px);
  transform: scale(.982);
  will-change: auto;
}
html.is-motion-ready .motion-line-target[data-motion-state="idle"] .motion-content,
html.is-motion-ready .motion-line-target[data-motion-state="idle"] .motion-control-label {
  opacity: 0;
  filter: blur(3px);
  transform: scale(.992);
  will-change: auto;
}
html[data-component-motion-softness="light"] .motion-line-target[data-motion-state="idle"] > .motion-surface-layer,
html[data-component-motion-softness="light"] .motion-line-target[data-motion-state="idle"] .motion-content,
html[data-component-motion-softness="light"] .motion-line-target[data-motion-state="idle"] .motion-control-label {
  filter: blur(1.5px);
}
html[data-component-motion-softness="none"] .motion-line-target[data-motion-state="idle"] > .motion-surface-layer,
html[data-component-motion-softness="none"] .motion-line-target[data-motion-state="idle"] .motion-content,
html[data-component-motion-softness="none"] .motion-line-target[data-motion-state="idle"] .motion-control-label {
  filter: none;
}
html.is-motion-ready .motion-line-target[data-motion-state="idle"] .motion-child-control > .motion-outline {
  opacity: 0;
}
html.is-motion-ready .motion-line-target[data-motion-state="settled"] > .motion-surface-layer,
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-child-control > .motion-surface-layer {
  opacity: 0;
  filter: none;
  transform: none;
}
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-content,
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-control-label {
  opacity: 1;
  filter: none;
  transform: none;
  will-change: auto;
}
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-outline {
  opacity: 1;
  filter: none;
  transform: none;
}
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-outline__path,
html.is-motion-ready .motion-line-target[data-motion-state="settled"] .motion-child-control .motion-outline__path {
  stroke-dashoffset: 0;
}
html.is-motion-ready .motion-heading-target {
  opacity: 0;
  filter: blur(2px);
  transform: scale(.992);
}
html.is-motion-ready .motion-heading-target[data-motion-state="settled"] {
  opacity: 1;
  filter: none;
  transform: none;
  will-change: auto;
}

html[data-motion="reduce"] .motion-line-target .motion-outline,
html[data-performance="low"] .motion-line-target .motion-outline {
  opacity: 0 !important;
  animation: none !important;
}
html[data-motion="reduce"] .motion-line-target,
html[data-performance="low"] .motion-line-target {
  border-color: var(--motion-static-border) !important;
  opacity: 1 !important;
}
html[data-motion="reduce"] .motion-child-control.is-outline-ready,
html[data-performance="low"] .motion-child-control.is-outline-ready,
html[data-motion="reduce"] .motion-control-target.is-outline-ready,
html[data-performance="low"] .motion-control-target.is-outline-ready {
  border-color: var(--motion-static-border) !important;
}
html.is-motion-ready[data-motion="reduce"] body .motion-line-target.is-outline-ready,
html.is-motion-ready[data-performance="low"] body .motion-line-target.is-outline-ready {
  border-color: var(--motion-static-border) !important;
}
html[data-motion="reduce"] .motion-line-target .motion-outline__path,
html[data-performance="low"] .motion-line-target .motion-outline__path {
  stroke-dashoffset: 0;
  animation: none !important;
}
html[data-motion="reduce"] .motion-line-target .motion-content,
html[data-performance="low"] .motion-line-target .motion-content,
html[data-motion="reduce"] .motion-line-target .motion-control-label,
html[data-performance="low"] .motion-line-target .motion-control-label {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}
html[data-motion="reduce"] .motion-surface-layer,
html[data-performance="low"] .motion-surface-layer,
.motion-line-target[data-motion-preview-reduced="true"] .motion-surface-layer,
.motion-line-target[data-motion-preview-reduced="true"] .motion-outline {
  display: none !important;
}
.motion-line-target[data-motion-preview-reduced="true"] {
  border-color: var(--motion-static-border) !important;
}
.motion-line-target[data-motion-preview-reduced="true"] .motion-content,
.motion-line-target[data-motion-preview-reduced="true"] .motion-control-label {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
html[data-motion="reduce"] .motion-heading-target,
html[data-performance="low"] .motion-heading-target {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Single-line physical damping controls and shared-timeline preview. */
.component-motion-settings {
  min-width: 0;
  padding-top: 28px;
  margin-top: 26px;
  border-top: 1px solid #eef3f7;
}
.component-motion-settings__grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
  gap: clamp(20px,3vw,34px);
  align-items: start;
}
.component-motion-settings :is(.transition-duration-card,.transition-duration-control) {
  min-width: 0;
}
.component-motion-settings .transition-duration-card {
  grid-template-columns: minmax(120px,.55fr) minmax(0,1.45fr);
  gap: 18px;
}
.component-motion-settings .transition-duration-control {
  grid-template-columns: minmax(110px,1fr) minmax(86px,112px) auto;
  width: 100%;
}
.component-motion-settings .transition-duration-control > * { min-width: 0; }
.component-motion-settings__controls {
  display: grid;
  min-width: 0;
  gap: 18px;
}
.component-motion-duration-card { margin: 0; }
.component-motion-option-group {
  min-width: 0;
  padding: 18px;
  margin: 0;
  border: 1px solid #ecf3f7;
  border-radius: 20px;
  background: #fbfdff;
}
.component-motion-option-group legend {
  padding: 0 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}
.component-motion-choice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.component-motion-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #ebf2f6;
  border-radius: 15px;
  background: #fff;
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 180ms var(--ease),border-color 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease);
}
.component-motion-choice:hover { transform: translateY(-1px); border-color: #deecf5; color: var(--text); }
.component-motion-choice:has(input:checked) { border-color: #d6e9f3; background: #eef8fd; color: #56778d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); }
.component-motion-choice input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid #d8e6ee;
  border-radius: 50%;
  appearance: none;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
  transition: border-color 170ms var(--ease),background-color 170ms var(--ease),transform 170ms var(--ease);
}
.component-motion-choice input:checked { border-color: #b1d1e4; background: #b1d1e4; transform: scale(1.04); }
.component-motion-choice input:focus-visible { outline: 3px solid rgba(205, 228, 249, .5); outline-offset: 2px; }
.component-motion-choice span,.component-motion-choice strong { min-width: 0; overflow-wrap: anywhere; }
.component-motion-choice strong { font-size: 12px; line-height: 1.35; }
.component-motion-color-grid { grid-template-columns: minmax(0,1fr); }
.component-motion-live-preview { display: grid; min-width: 0; gap: 14px; }
.component-motion-live-preview__stage {
  display: grid;
  min-height: 370px;
  place-items: center;
  padding: clamp(20px,4vw,36px);
  overflow: hidden;
  border: 1px solid #ebf2f6;
  border-radius: 25px;
  background-color: #f4f8fb;
  background-image: radial-gradient(circle at 1px 1px,rgba(178, 202, 218, .16) 1px,transparent 0);
  background-size: 18px 18px;
}
.component-motion-preview-card {
  display: grid;
  width: min(100%,390px);
  min-height: 210px;
  align-content: center;
  padding: clamp(24px,4vw,34px);
  border: 1px solid #e7f1f7;
  border-radius: 25px;
  background: #fcfeff;
  box-shadow: 0 18px 42px rgba(69,96,119,.12);
}
.component-motion-preview-card > div { position: relative; z-index: 2; min-width: 0; }
.component-motion-preview-card small { color: #7594a8; font-size: 11px; font-weight: 820; }
.component-motion-preview-card h3 { margin: 12px 0 8px; font-size: clamp(20px,2.4vw,27px); line-height: 1.25; overflow-wrap: anywhere; }
.component-motion-preview-card p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.component-motion-preview-card__controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.component-motion-preview-card__controls .button { flex: 1 1 128px; min-width: 0; }
.component-motion-stage-strip {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  min-width: 0;
}
.component-motion-stage-strip button {
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid #ebf2f6;
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 160ms var(--ease),border-color 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease);
}
.component-motion-stage-strip button:hover { border-color: #dfecf5; transform: translateY(-1px); }
.component-motion-stage-strip button[aria-pressed="true"] { border-color: #d1e5f0; background: #eaf6fd; color: #587b92; }
.component-motion-stage-strip span { font-size: 11px; font-weight: 900; }
.component-motion-stage-strip small { color: inherit; font-size: 8px; line-height: 1.2; text-align: center; }
.component-motion-preview-actions { justify-content: flex-end; margin: 0; }
.component-motion-preview-actions .button { min-width: 0; }
@media (max-width: 1000px) {
  .component-motion-settings__grid { grid-template-columns: 1fr; }
  .component-motion-live-preview__stage { min-height: 320px; }
}
@media (max-width: 620px) {
  .component-motion-settings { padding-top: 22px; margin-top: 20px; }
  .component-motion-option-group { padding: 15px; }
  .component-motion-settings .transition-duration-card { grid-template-columns: 1fr; }
  .component-motion-settings .transition-duration-control { grid-template-columns: 1fr auto; }
  .component-motion-settings .transition-duration-control > input[type="range"] { grid-column: 1 / -1; width: 100%; }
  .component-motion-choice-grid { grid-template-columns: 1fr; }
  .component-motion-color-grid { grid-template-columns: 1fr; }
  .component-motion-live-preview__stage { min-height: 280px; padding: 18px; border-radius: 21px; }
  .component-motion-preview-card { min-height: 190px; padding: 23px; border-radius: 22px; }
  .component-motion-stage-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .component-motion-preview-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .component-motion-preview-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .component-motion-choice,.component-motion-preview-card { transition: none !important; }
}

/* Homepage content groups each own one composited copy layer. */
.hero-status__content {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}
.moment-note__content {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.planet-links__content {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.planet-links__content > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 19px;
  background: rgba(255,255,255,.62);
  color: inherit;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), background 180ms cubic-bezier(.2,.7,.2,1);
}
.planet-links__content > a > span:last-child { display: grid; min-width: 0; }

/* Direct feedback replaces spring overshoot and decorative sheen. */
.button::after { display: none !important; }
.button,
.icon-button,
.card--interactive,
.film-frame,
.moment-note,
.article-card-link {
  transition-timing-function: cubic-bezier(.2,.7,.2,1) !important;
}
.button.is-releasing,
.icon-button.is-releasing,
.card--interactive.is-releasing,
.film-frame.is-releasing,
.moment-note.is-releasing,
.article-card-link.is-releasing {
  animation: none !important;
  transform: none;
}
.button.is-pressed,
.button:active,
.icon-button.is-pressed,
.icon-button:active,
.card--interactive.is-pressed,
.card--interactive:active,
.film-frame.is-pressed,
.film-frame:active,
.moment-note.is-pressed,
.moment-note:active,
.article-card-link.is-pressed,
.article-card-link:active {
  transform: translate3d(0, 1px, 0) !important;
  box-shadow: inset 0 1px 2px rgba(56,82,111,.08), 0 3px 8px rgba(67,92,124,.08);
}
@media (hover: hover) {
  html.is-motion-ready .card--interactive:hover,
  html.is-motion-ready .film-frame:hover,
  html.is-motion-ready .moment-note:hover,
  html.is-motion-ready .article-card-link:hover,
  .button:hover,
  .icon-button:hover,
  .planet-links__content > a:hover {
    transform: translate3d(0, -1px, 0) !important;
  }
  .article-card-link:hover .featured-note__cover,
  .article-card-link:hover .list-post__cover { transform: scale(1.012); }
  .article-card-link:hover .featured-note__title,
  .article-card-link:hover .mini-note__title,
  .article-card-link:hover h2 { transform: translateX(1px); }
  .article-card-link:hover .article-card-link__action { transform: translateX(2px); }
  .article-card-link:hover .article-card-link__arrow { transform: translate3d(1px, -1px, 0); }
}
.home-v2 .hero-avatar,
.home-v2 .planet-orbit,
.home-v2 .hero-doodle--spark { animation: none; }

/* One moving base makes mobile navigation feel like the desktop capsule. */
.mobile-bottom-nav { position: fixed; isolation: isolate; }
.mobile-nav-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 52px;
  border: 1px solid rgba(205, 226, 239, .9);
  border-radius: var(--radius-pill);
  background: rgba(225, 242, 252, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 6px 16px rgba(91, 130, 169, .09);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 360ms var(--ease-release), width 280ms var(--ease), height 240ms var(--ease);
}
.mobile-bottom-nav a,
.mobile-bottom-nav button { position: relative; z-index: 1; background: transparent !important; }
.mobile-bottom-nav .is-current { border-color: transparent !important; background: transparent !important; box-shadow: none !important; color: #5d8aa7; }

.local-auth-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 480px); align-items: center; gap: clamp(28px, 6vw, 86px); width: min(100%, 980px); }
.local-auth-intro { display: grid; align-content: center; gap: 12px; }
.local-auth-intro .window-symbol { width: 50px; height: 42px; margin-bottom: 10px; color: var(--action-blue-ink); transform: rotate(-4deg) scale(1.3); transform-origin: left center; }
.local-auth-intro h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); }
.local-auth-intro p { max-width: 410px; margin: 0; color: var(--text-soft); font-size: 16px; line-height: 1.85; }
.local-auth-note { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 12px 14px; margin-top: 14px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.72); }
.local-auth-note strong, .local-auth-note small { display: block; }
.local-auth-note small { margin-top: 2px; color: var(--text-faint); font-size: 11px; }
.local-auth-card h2 { margin: 6px 0 24px; font-size: clamp(28px, 4vw, 42px); }
.local-auth-card .auth-links { flex-wrap: wrap; align-items: center; }
.account-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-link-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); text-decoration: none; transition: transform 220ms var(--spring), border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 220ms var(--ease); }
.account-link-card:hover { border-color: var(--blue-300); background: var(--cloud-blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.account-link-card strong, .account-link-card small { display: block; overflow-wrap: anywhere; }
.account-link-card small { margin-top: 3px; color: var(--text-faint); font-size: 11px; }
.account-link-card > .icon { width: 15px; color: var(--text-faint); }
.account-connection-note { padding: 13px 15px; margin: 18px 0 0; border: 1px solid var(--border); border-radius: 16px; background: var(--cloud-blue); color: var(--text-soft); font-size: 12px; }
.account-signout-panel { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.account-signout-panel span { margin-right: auto; color: var(--text-faint); font-size: 12px; }
body.local-auth-body .mobile-bottom-nav { display: none; }

@media (max-width: 980px) {
  .hero-story { min-height: 440px; }
  .hero-status { min-height: 238px; }
  .local-auth-layout { grid-template-columns: 1fr; max-width: 520px; gap: 28px; }
  .local-auth-intro { justify-items: center; text-align: center; }
  .local-auth-intro .window-symbol { margin-inline: auto; transform: rotate(-4deg) scale(1.1); transform-origin: center; }
  .local-auth-intro p { max-width: 480px; }
}
@media (max-width: 620px) {
  .home-v2 { --home-gap: 52px; padding-top: 18px; }
  .hero-story { grid-template-columns: 1fr; min-height: 0; padding: 27px 21px 30px; gap: 14px; }
  .hero-story h1 { font-size: clamp(36px, 10.6vw, 48px); }
  .hero-story__copy > p { font-size: 16px; line-height: 1.72; }
  .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:8px; }
  .hero-actions .button { width:100%; }
  .hero-actions .button:first-child { grid-column:1/-1; }
  .hero-planet-wrap { min-height:190px; }
  .hero-avatar { width:148px; }
  .planet-orbit { width:190px; }
  .hero-status { min-height: 0; }
  .hero-status__content { grid-template-rows: auto auto; }
  .hero-status__row { padding: 21px; }
  .featured-note { min-height: 0; }
  .note-stack { min-height: 0; }
  .planet-links__content { grid-template-columns: 1fr; }
  .account-link-grid { grid-template-columns: 1fr; }
  .account-signout-panel { align-items: stretch; flex-direction: column; }
  .account-signout-panel span { margin-right: 0; }
  .local-auth-page { padding-inline: 13px; }
  .local-auth-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-outline,
  .motion-outline__path,
  .motion-content,
  .motion-control-label,
  .motion-heading-target { transition: none; }
  .mobile-nav-indicator { transition: none; }
  html.is-motion-ready[data-motion="system"] body .motion-line-target.is-outline-ready {
    border-color: var(--motion-static-border) !important;
  }
  html.is-motion-ready[data-motion="system"] body .motion-child-control.is-outline-ready,
  html.is-motion-ready[data-motion="system"] body .motion-control-target.is-outline-ready {
    border-color: var(--motion-static-border) !important;
  }
  html[data-motion="system"] .motion-line-target .motion-outline { opacity: 0 !important; }
  html[data-motion="system"] .motion-line-target .motion-content,
  html[data-motion="system"] .motion-line-target .motion-control-label,
  html[data-motion="system"] .motion-heading-target {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}
/* Local human verification: compact, readable and consistent with the light desk theme. */
.human-check {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 42px minmax(120px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(212, 230, 243, .7);
  border-radius: 18px;
  background: rgba(247, 249, 252, .88);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.human-check__image {
  min-height: 76px;
  overflow: hidden;
  border: 1px solid rgba(153, 171, 205, .16);
  border-radius: 13px;
  background: #f7f9fc;
}
.human-check__image img { display: block; width: 100%; height: 76px; object-fit: cover; }
.human-check__refresh { align-self: center; border-radius: 50%; }
.human-check__field { min-width: 0; }
.human-check__field input { text-transform: uppercase; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.human-check__status { grid-column: 1 / -1; color: #667286; }
.human-check.is-loading .human-check__refresh { animation: human-check-spin 680ms linear infinite; }
.human-check.is-refreshed { border-color: rgba(153, 171, 205, .5); transform: scale(.995); }
.human-check.is-error { border-color: rgba(182, 92, 104, .55); background: rgba(255, 246, 247, .9); }
.admin-login-security { grid-column: 1 / -1; }
.admin-login-security > p { margin: 0 0 18px; color: #667286; }
@keyframes human-check-spin { to { transform: rotate(1turn); } }
@media (max-width: 620px) {
  .human-check { grid-template-columns: minmax(0, 1fr) 42px; }
  .human-check__field { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .human-check, .human-check__refresh { transition: none; animation: none !important; }
}
/* v1.36.4 · Administrator navigation restored to the small-window language.
   The sidebar owns one outline timeline; its dense menu controls keep direct
   feedback so opening a long group never creates dozens of competing paths. */
.admin-shell {
  grid-template-columns: 264px minmax(0, 1fr);
}
.admin-sidebar {
  --motion-static-border: rgba(209, 222, 239, .82);
  flex: 0 0 auto;
  padding: 14px 12px 12px;
  border-color: var(--motion-static-border);
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 10px 0 32px rgba(80,103,137,.065);
  backdrop-filter: blur(16px);
}
.admin-sidebar.motion-line-target.is-outline-ready {
  border-color: transparent !important;
}
.admin-sidebar > .motion-outline {
  z-index: 4;
  color: var(--component-motion-color, rgba(191, 217, 232, .76));
}
.admin-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 70px;
  padding: 9px 11px 15px;
  margin: 0 4px 8px;
  border-bottom: 1px solid var(--silver-mist);
  color: var(--graphite-blue);
  text-decoration: none;
}
.admin-brand .brand-mark {
  flex: 0 0 auto;
}
.admin-brand > span:last-child {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.admin-nav {
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  padding: 2px 4px 18px;
  scrollbar-gutter: stable;
}
.admin-nav-group {
  border-color: transparent;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
.admin-nav-group.is-open {
  border-color: var(--silver-mist) !important;
  background: rgba(247, 249, 252, .94) !important;
  box-shadow: none;
}
.admin-nav-group__toggle {
  min-height: 56px;
  border-radius: 17px;
  color: var(--text-soft);
}
.admin-nav-group__toggle:hover,
.admin-nav-group__toggle:focus-visible {
  background: var(--cloud-blue) !important;
  color: var(--graphite-blue);
}
.admin-nav-group__toggle.is-current {
  border-color: var(--blue-200) !important;
  background: var(--cloud-blue) !important;
  color: var(--graphite-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.admin-nav-group__toggle > .icon:first-child,
.admin-nav-group__toggle.is-current > .icon:first-child {
  color: var(--sunny-blue);
}
.admin-nav-group__toggle strong {
  font-size: 13px;
  line-height: 1.35;
}
.admin-nav-group__toggle small {
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.45;
}
.admin-nav .admin-nav-group__items a {
  min-height: 46px;
  border-radius: 14px;
}
.admin-nav .admin-nav-group__items a.is-current {
  border-color: var(--blue-200) !important;
  background: var(--cloud-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.admin-nav .admin-nav-group__items a::before {
  background: var(--accent-soft);
}
.admin-profile {
  flex: 0 0 auto;
  min-height: 68px;
  padding: 12px 7px 0;
  margin-top: 0;
  background: rgba(255,255,255,.9);
}
.admin-profile > span:nth-child(2) {
  min-width: 0;
}
.admin-profile strong,
.admin-profile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-menu-button[data-motion-skip] {
  border-color: var(--blue-200);
  background: rgba(255,255,255,.94);
  color: var(--graphite-blue);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-xs);
}
.admin-menu-button[data-motion-skip] .icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 1180px) {
  html.is-motion-ready .admin-sidebar.motion-line-target:not(.is-open) {
    transform: translateX(-105%);
  }
  html.is-motion-ready .admin-sidebar.motion-line-target.is-open {
    transform: none;
  }
  .admin-sidebar {
    width: min(304px, 88vw);
    height: 100vh;
    height: 100dvh;
    padding: 14px 12px max(12px, env(safe-area-inset-bottom));
    margin: 0;
    border-radius: 0 30px 30px 0;
    transition: transform 280ms var(--ease);
  }
}
@media (max-width: 620px) {
  .admin-sidebar {
    width: min(300px, 90vw);
  }
  .admin-brand {
    min-height: 64px;
  }
  .admin-nav-group__toggle {
    min-height: 54px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,
  .admin-nav-group__toggle,
  .admin-nav-group__items {
    transition-duration: 0ms !important;
  }
}

/* 长标题保护：网格子项允许收缩，不可断开的长字符串在卡片内换行，避免撑出横向滚动 */
.article-neighbors > a,.post-grid > a,.corner-grid > a,.archive-list section,.archive-list a { min-width:0; }
.article-neighbors strong,.corner-card strong,.archive-list strong,.archive-list h2 { overflow-wrap:anywhere; min-width:0; }
.archive-list a { grid-template-columns:70px minmax(0,1fr) auto; }
@media (max-width:620px) { .archive-list a { grid-template-columns:54px minmax(0,1fr); } }