:root {
  --ink: #172126;
  --muted: #778188;
  --line: #e8ecec;
  --canvas: #f6f8f7;
  --surface: #ffffff;
  --accent: #ec684e;
  --accent-dark: #cf5038;
  --blue: #3f79a8;
  --green: #4b9473;
  --yellow: #c99638;
  --shadow: 0 10px 30px rgba(25, 37, 39, .05);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; width: 246px; height: 100vh; max-height: 100vh; flex: 0 0 246px; align-self: flex-start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #425255 transparent; background: #202a2d; color: #d6dede; display: flex; flex-direction: column; padding: 26px 16px 18px; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 5px; background: #425255; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 26px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.brand-mark svg { width: 19px; }
.brand-mark-image { overflow: hidden; }
.brand-mark-image img { width: 100%; height: 100%; object-fit: cover; }
.brand strong { display: block; color: #fff; font-size: 20px; letter-spacing: 2px; line-height: 1; }
.brand small, .workspace-switcher small, .user-row small { color: #849194; display: block; font-size: 11px; margin-top: 5px; }
.workspace-switcher { min-height: 63px; padding: 10px 11px; border: 1px solid #344144; border-radius: 9px; display: flex; align-items: center; gap: 10px; background: #263235; text-decoration: none; }
.workspace-switcher:hover { border-color: #4b5b5d; background: #2b393b; }
.workspace-avatar, .user-avatar, .avatar-button { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 8px; font-weight: 700; }
.workspace-avatar { background: #e4efeb; color: #315d52; font-family: "DM Sans", sans-serif; }
.workspace-avatar svg { width: 16px; height: 16px; }
.workspace-switcher b, .user-row b { display: block; color: #e5ebeb; font-size: 12px; font-weight: 600; }
.workspace-switcher > span:nth-child(2) { min-width: 0; }
.main-nav { padding-top: 31px; }
.nav-label { display: block; padding: 0 12px 9px; color: #748184; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.nav-label-spaced { margin-top: 26px; }
.nav-item { min-height: 43px; padding: 0 12px; color: #aab5b6; display: flex; align-items: center; gap: 12px; border-radius: 7px; transition: .2s ease; }
.nav-item:hover { color: #fff; background: #293639; }
.nav-item.active { color: #fff; background: #344346; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-item span { font-size: 13px; }
.nav-item em { margin-left: auto; color: #718083; font-family: "DM Sans", sans-serif; font-size: 11px; font-style: normal; }
.sidebar-bottom { margin-top: auto; }
.usage-card { padding: 14px; border: 1px solid #354346; border-radius: 8px; background: #263235; }
.usage-head { display: flex; justify-content: space-between; color: #b7c3c3; font-size: 11px; }
.usage-head strong { color: #f1bf8f; font-family: "DM Sans", sans-serif; font-size: 12px; }
.progress { height: 5px; margin: 12px 0 8px; overflow: hidden; border-radius: 9px; background: #3a484a; }
.progress span { display: block; height: 100%; border-radius: inherit; background: #e6a271; }
.usage-card small { color: #839092; font-size: 10px; }
.help-link { display: flex; align-items: center; gap: 9px; color: #8e9b9d; font-size: 12px; padding: 22px 10px 19px; }
.help-link:hover { color: #fff; }
.help-link svg { width: 15px; }
.user-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid #344144; padding: 17px 4px 0; }
.user-avatar { background: #d9b19d; color: #6d3e2d; border-radius: 50%; }
.user-row .icon-button { margin-left: auto; color: #8b9799; }
.main-area { min-width: 0; flex: 1; }
.topbar { position: sticky; top: 0; z-index: 60; height: 68px; padding: 0 46px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #9aa3a5; font-size: 12px; }
.breadcrumbs svg { width: 14px; }
.breadcrumbs strong { color: #455156; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.area-switcher { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 3px; border: 1px solid #dce6e2; border-radius: 8px; background: #f7faf8; }
.area-switch-button { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; color: #82918e; font-size: 11px; font-weight: 600; white-space: nowrap; transition: .2s ease; }
.area-switch-button svg { width: 14px; height: 14px; }
.area-switch-button:hover { color: #4e6c63; background: #edf5f1; }
.area-switch-button.active { color: #fff; background: #4b9473; box-shadow: 0 4px 10px rgba(75, 148, 115, .17); }
.area-switch-button-destination { color: #4f826f; border: 1px solid #cfe3d8; background: #eef7f2; }
.area-switch-button-destination:hover { color: #376b58; border-color: #aacdbb; background: #e3f2ea; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; color: #7d8a8b; font: 11px "DM Sans", sans-serif; }
.quota-badge { color: #b46a3f; }
.local-badge svg { width: 14px; height: 14px; color: #8da3a0; }
.language-toggle { min-width: 48px; height: 31px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #d9e3df; border-radius: 6px; color: #6e817d; background: #fff; font: 600 10px "DM Sans", sans-serif; cursor: pointer; }
.language-toggle:hover { color: var(--accent-dark); border-color: #b9d3c9; background: #f5faf7; }
.language-toggle svg { width: 14px; height: 14px; }
.connection { display: flex; align-items: center; gap: 7px; color: #789087; font-family: "DM Sans", sans-serif; font-size: 11px; }
.connection i, .model-state i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #5ab37c; box-shadow: 0 0 0 3px #e2f2e8; }
.icon-button { width: 31px; height: 31px; padding: 0; border: 0; background: transparent; color: #899497; display: inline-grid; place-items: center; border-radius: 6px; }
.icon-button:hover { color: var(--ink); background: #edf1f0; }
.icon-button svg { width: 17px; height: 17px; }
.avatar-button { padding: 0; border: 0; background: #d9b19d; color: #6d3e2d; border-radius: 50%; }
.auth-page { --auth-shift-x: 0px; --auth-shift-y: 0px; --auth-grid-x: 0px; --auth-grid-y: 0px; position: relative; min-height: 100vh; overflow: hidden; display: grid; place-items: center; padding: 42px 28px; background: #edf3f1; }
.auth-page::before { position: absolute; inset: 18px; content: ""; pointer-events: none; border: 1px solid rgba(116,153,144,.13); border-radius: 20px; }
.auth-ambient { position: absolute; inset: -14px; overflow: hidden; pointer-events: none; transform: translate3d(var(--auth-shift-x), var(--auth-shift-y), 0); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.auth-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(77,112,105,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(77,112,105,.07) 1px, transparent 1px); background-position: var(--auth-grid-x) var(--auth-grid-y); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent); animation: auth-grid-drift 18s linear infinite; }
.auth-orbit { position: absolute; display: block; border: 1px solid rgba(83,137,123,.16); border-radius: 50%; transform: rotate(-18deg); animation: auth-orbit-float 12s ease-in-out infinite; }
.auth-orbit-one { width: 420px; height: 190px; top: -66px; left: -90px; }
.auth-orbit-two { width: 500px; height: 220px; right: -180px; bottom: -65px; animation-delay: -4s; }
.auth-orbit-three { width: 180px; height: 180px; right: 11%; top: 9%; border-color: rgba(236,104,78,.13); animation-delay: -8s; }
.auth-sweep { position: absolute; width: 46vw; min-width: 360px; max-width: 700px; height: 1px; opacity: .42; background: linear-gradient(90deg, transparent, rgba(236,104,78,.48), rgba(106,160,142,.2), transparent); transform: rotate(-24deg); animation: auth-sweep-move 13s ease-in-out infinite; }
.auth-sweep-one { top: 23%; left: -25%; }
.auth-sweep-two { right: -25%; bottom: 22%; transform: rotate(-24deg); animation-delay: -6s; }
.auth-data-rail { position: absolute; top: 13%; width: 1px; height: 74%; opacity: .3; background: repeating-linear-gradient(to bottom, rgba(87,143,128,.65) 0 1px, transparent 1px 13px, rgba(236,104,78,.45) 13px 15px, transparent 15px 34px); animation: auth-rail-pulse 6s ease-in-out infinite; }
.auth-data-rail-one { left: 10.5%; }
.auth-data-rail-two { right: 10.5%; height: 54%; top: 24%; opacity: .22; animation-delay: -3s; }
.auth-hero-arc { position: absolute; border: 1px solid rgba(76,131,117,.2); border-radius: 50%; transform: rotate(-21deg); animation: auth-hero-arc-float 18s ease-in-out infinite; }
.auth-hero-arc::before { position: absolute; content: ""; border: 1px solid rgba(236,104,78,.19); border-radius: 50%; }
.auth-hero-arc-one { width: 900px; height: 410px; top: -230px; left: -270px; }
.auth-hero-arc-one::before { inset: 28px 48px 34px 36px; }
.auth-hero-arc-two { width: 760px; height: 360px; right: -280px; bottom: -220px; border-color: rgba(236,104,78,.16); animation-delay: -9s; }
.auth-hero-arc-two::before { inset: 35px 38px 24px 54px; border-color: rgba(76,131,117,.15); }
.auth-hero-ring { position: absolute; width: 310px; height: 310px; border: 1px dashed rgba(89,142,128,.19); border-radius: 50%; animation: auth-ring-turn 32s linear infinite; }
.auth-hero-ring::before, .auth-hero-ring::after { position: absolute; content: ""; border-radius: 50%; }
.auth-hero-ring::before { inset: 35px; border: 1px solid rgba(236,104,78,.13); }
.auth-hero-ring::after { top: -4px; left: 50%; width: 7px; height: 7px; background: #ec684e; box-shadow: 0 0 0 5px rgba(236,104,78,.1); }
.auth-hero-ring-one { top: -106px; right: 16%; }
.auth-hero-ring-two { width: 220px; height: 220px; right: -56px; bottom: 13%; opacity: .62; animation-direction: reverse; animation-duration: 24s; }
.auth-tracer { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(236,104,78,.7); transform: rotate(45deg); animation: auth-tracer-float 10s ease-in-out infinite; }
.auth-tracer-one { top: 24%; left: 27%; }
.auth-tracer-two { right: 25%; bottom: 26%; border-color: rgba(77,154,123,.7); animation-delay: -5s; }
.auth-starfield { position: absolute; width: 2px; height: 2px; background: rgba(74,130,116,.65); box-shadow: 34px 18px rgba(74,130,116,.35), 82px 62px rgba(236,104,78,.5), 146px 27px rgba(74,130,116,.42), 205px 96px rgba(74,130,116,.3), 270px 44px rgba(236,104,78,.32), 320px 132px rgba(74,130,116,.4), 398px 74px rgba(74,130,116,.3), 470px 18px rgba(236,104,78,.35); animation: auth-starfield-breathe 8s ease-in-out infinite; }
.auth-starfield-one { top: 16%; left: 12%; }
.auth-starfield-two { right: 14%; bottom: 20%; opacity: .72; transform: rotate(180deg); animation-delay: -4s; }
.auth-marker { position: absolute; width: 24px; height: 24px; opacity: .48; border: 1px solid rgba(91,144,130,.38); animation: auth-marker-pulse 4s ease-in-out infinite; }
.auth-marker::before, .auth-marker::after { position: absolute; content: ""; background: rgba(91,144,130,.5); }
.auth-marker::before { top: 11px; left: -6px; width: 34px; height: 1px; }
.auth-marker::after { top: -6px; left: 11px; width: 1px; height: 34px; }
.auth-marker-one { top: 18%; left: 38%; }
.auth-marker-two { right: 29%; bottom: 19%; border-color: rgba(236,104,78,.32); animation-delay: -2s; }
.auth-marker-two::before, .auth-marker-two::after { background: rgba(236,104,78,.42); }
.auth-beacon { position: absolute; width: 42px; height: 42px; opacity: .28; border: 1px solid rgba(91,144,130,.3); transform: rotate(45deg); animation: auth-beacon-breathe 5s ease-in-out infinite; }
.auth-beacon::before, .auth-beacon::after { position: absolute; content: ""; background: rgba(91,144,130,.5); }
.auth-beacon::before { top: 20px; left: -12px; width: 64px; height: 1px; }
.auth-beacon::after { top: -12px; left: 20px; width: 1px; height: 64px; }
.auth-beacon-one { top: 32%; right: 30%; }
.auth-beacon-two { bottom: 29%; left: 22%; width: 27px; height: 27px; border-color: rgba(236,104,78,.27); animation-delay: -2.5s; }
.auth-beacon-two::before, .auth-beacon-two::after { background: rgba(236,104,78,.4); }
.auth-particle { position: absolute; width: 4px; height: 4px; background: #6da58f; animation: auth-particle-drift 7s ease-in-out infinite; }
.auth-particle-one { top: 30%; left: 16%; }
.auth-particle-two { top: 66%; left: 31%; width: 3px; height: 3px; animation-delay: -2.2s; }
.auth-particle-three { right: 18%; top: 35%; width: 3px; height: 3px; background: #e98168; animation-delay: -4.4s; }
.auth-particle-four { right: 12%; bottom: 29%; animation-delay: -5.6s; }
.auth-shell { position: relative; z-index: 1; width: min(980px, 100%); display: grid; grid-template-columns: minmax(280px, .78fr) minmax(390px, 440px); align-items: center; gap: clamp(44px, 8vw, 110px); }
.auth-identity { min-width: 0; padding: 12px 0; }
.auth-brand { display: flex; align-items: center; gap: 12px; width: fit-content; }
.auth-logo { width: 48px !important; height: 48px !important; border-radius: 13px; box-shadow: 0 10px 22px rgba(236,104,78,.2); }
.auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand strong { display: block; color: var(--ink); font-size: 25px; letter-spacing: 2px; line-height: 1; }
.auth-brand p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.auth-signal { display: flex; align-items: center; gap: 8px; margin-top: 58px; color: #6e8981; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1.5px; }
.auth-signal-dot { width: 7px; height: 7px; border-radius: 50%; background: #58aa7f; box-shadow: 0 0 0 4px rgba(88,170,127,.13); animation: auth-signal-pulse 2.2s ease-in-out infinite; }
.auth-signal b { margin-left: auto; color: #a4b4af; font-weight: 600; }
.auth-identity-copy { max-width: 340px; margin-top: 31px; }
.auth-identity-copy h2 { margin: 0 0 13px; color: #26383d; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: 0; }
.auth-identity-copy > p:last-child { margin: 0; color: #70817f; font-size: 13px; line-height: 1.9; }
.auth-trace { display: flex; align-items: center; gap: 9px; margin-top: 56px; color: #92a7a1; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1px; }
.auth-trace i { width: 27px; height: 1px; background: #c4d6d0; }
.auth-trace span:first-child { color: var(--accent); }
.auth-panel { position: relative; overflow: hidden; padding: 34px 34px 24px; border: 1px solid rgba(205,221,216,.95); background: rgba(255,255,255,.94); box-shadow: 0 26px 70px rgba(38, 64, 59, .13), 0 2px 6px rgba(38,64,59,.04); border-radius: 12px; animation: auth-panel-in .65s cubic-bezier(.2,.8,.2,1) both; }
.auth-panel::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, var(--accent), #f49a73 45%, #6da790); }
.auth-panel-header { position: relative; display: flex; justify-content: space-between; margin-bottom: 30px; color: #9aaba6; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1.4px; }
.auth-panel-header .language-toggle { position: absolute; top: -8px; right: 28px; }
.auth-panel-header b { color: var(--accent); font-weight: 700; }
.auth-heading { position: relative; margin-bottom: 25px; }
.auth-heading h1 { margin: 7px 0 8px; font-size: 30px; line-height: 1.2; }
.auth-heading p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.7; }
.auth-form { position: relative; display: grid; gap: 16px; }
.auth-invite-note { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #f1cfc4; border-radius: 7px; color: #a65c4a; background: #fff7f3; font-size: 11px; }
.auth-invite-note svg { width: 16px; color: var(--accent); }
.auth-invite-note strong { color: var(--accent-dark); font: 700 11px "DM Sans", sans-serif; letter-spacing: .5px; }
.auth-field { margin-bottom: 0; }
.auth-field > span { margin-bottom: 7px; }
.auth-field > span small { margin-left: auto; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > svg { position: absolute; z-index: 1; top: 13px; left: 13px; width: 16px; height: 16px; color: #9aafaa; transition: color .2s ease; }
.auth-input-wrap input { padding-left: 39px !important; padding-right: 43px !important; background: #fbfdfc !important; }
.auth-input-wrap:focus-within > svg { color: var(--accent); }
.auth-input-wrap:focus-within input { border-color: #e59a89; background: #fff !important; box-shadow: 0 0 0 4px rgba(236,104,78,.09), 0 4px 13px rgba(49,73,68,.05); transform: translateY(-1px); }
.auth-password-toggle { position: absolute; z-index: 2; top: 4px; right: 5px; width: 31px; height: 31px; padding: 0; border: 0; color: #a2adae; background: transparent; display: grid; place-items: center; }
.auth-password-toggle:hover { color: var(--accent-dark); }
.auth-password-toggle svg { width: 16px; }
.auth-submit { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; border-radius: 7px; box-shadow: 0 9px 20px rgba(236,104,78,.2); }
.auth-submit:hover { box-shadow: 0 12px 24px rgba(236,104,78,.26); }
.auth-submit svg { transition: transform .2s ease; }
.auth-submit:hover svg { transform: translate(2px, -2px); }
.auth-verify-form { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.auth-switch { position: relative; margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.auth-switch + .auth-switch { margin-top: 8px; }
.auth-switch a { color: var(--accent-dark); font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-register-options { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.auth-register-separator { color: #b6c2be; }
.auth-mutual-register { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-dark); font-size: 12px; }
.auth-mutual-register svg { width: 14px; height: 14px; }
.auth-mutual-register b { font-weight: 700; }
.auth-panel-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 1px solid #edf1f0; color: #9ba8a5; font: 700 8px "DM Sans", sans-serif; letter-spacing: .8px; }
.auth-panel-footer span { display: inline-flex; align-items: center; gap: 5px; }
.auth-panel-footer svg { width: 13px; height: 13px; color: #64a083; }
.auth-footnote { position: relative; display: flex; align-items: center; justify-content: center; grid-column: 1 / -1; gap: 6px; margin: -18px 0 0; color: #899d98; font-size: 10px; }
.auth-footnote svg { width: 14px; }
.auth-page .flash { margin: -7px 0 18px; padding: 10px 12px; border-radius: 7px; font-size: 11px; }
@keyframes auth-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-grid-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(42px,42px,0); } }
@keyframes auth-orbit-float { 0%, 100% { transform: rotate(-18deg) translate3d(0,0,0); } 50% { transform: rotate(-14deg) translate3d(8px, -8px); } }
@keyframes auth-sweep-move { 0%, 100% { opacity: .12; transform: translate3d(-4%, 0, 0) rotate(-24deg); } 50% { opacity: .48; transform: translate3d(22%, 14px, 0) rotate(-24deg); } }
@keyframes auth-rail-pulse { 0%, 100% { opacity: .16; background-position: 0 0; } 50% { opacity: .42; background-position: 0 22px; } }
@keyframes auth-hero-arc-float { 0%, 100% { transform: rotate(-21deg) translate3d(0, 0, 0); } 50% { transform: rotate(-18deg) translate3d(12px, -7px, 0); } }
@keyframes auth-ring-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auth-tracer-float { 0%, 100% { opacity: .22; transform: translate3d(0, 0, 0) rotate(45deg); } 50% { opacity: .8; transform: translate3d(14px, -12px, 0) rotate(135deg); } }
@keyframes auth-starfield-breathe { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.12); } }
@keyframes auth-beacon-breathe { 0%, 100% { opacity: .18; transform: rotate(45deg) scale(.84); } 50% { opacity: .6; transform: rotate(45deg) scale(1); } }
@keyframes auth-marker-pulse { 0%, 100% { opacity: .25; transform: scale(.88); } 50% { opacity: .62; transform: scale(1); } }
@keyframes auth-particle-drift { 0%, 100% { opacity: .25; transform: translate3d(0, 0, 0); } 50% { opacity: .85; transform: translate3d(12px, -9px, 0); } }
@keyframes auth-signal-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(88,170,127,.13); } 50% { box-shadow: 0 0 0 8px rgba(88,170,127,.04); } }
@media (prefers-reduced-motion: reduce) { .auth-grid, .auth-orbit, .auth-sweep, .auth-data-rail, .auth-hero-arc, .auth-hero-ring, .auth-tracer, .auth-starfield, .auth-marker, .auth-beacon, .auth-particle, .auth-signal-dot, .auth-panel { animation: none; } }
@media (max-width: 820px) {
  .auth-shell { width: min(520px, 100%); grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .auth-identity { padding: 0; }
  .auth-brand { margin: 0 auto; }
  .auth-signal { max-width: 420px; margin: 24px auto 0; }
  .auth-identity-copy { display: none; }
  .auth-trace { justify-content: center; margin: 16px auto 0; }
}
.user-management-row, .users-table-head { display: grid; grid-template-columns: minmax(220px, 1.4fr) 150px minmax(250px, 1.3fr) 120px 165px 165px 165px 100px; align-items: center; gap: 16px; }
.users-table-head { padding: 0 18px 12px; color: #849194; font: 700 10px "DM Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.users-panel { padding: 18px; overflow-x: auto; }
.user-management-row { min-width: 1400px; padding: 14px 0; border-top: 1px solid var(--line); }
.user-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-account strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-account small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.user-date { color: var(--muted); font-size: 12px; }
.user-date::before { display: none; }
.user-permissions { display: grid; gap: 8px; }
.permission-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.permission-check input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent); }
.permission-check span { display: grid; gap: 2px; }
.permission-check b { color: var(--ink); font-size: 12px; font-weight: 600; }
.permission-check small, .permission-note { color: var(--muted); font-size: 10px; line-height: 1.35; }
.permission-note { display: block; margin-top: 1px; color: #4d8871; }
.users-empty { padding: 50px 20px; color: var(--muted); text-align: center; }
.users-empty svg { width: 28px; margin-bottom: 8px; }
.users-empty p { margin: 0; }
@media (max-width: 700px) {
  .auth-page { padding: 30px 16px; }
  .auth-panel { padding: 24px 20px; }
  .auth-panel-footer { flex-wrap: wrap; margin-top: 20px; }
  .auth-footnote { margin: -2px 0 0; }
  .page { padding-left: 20px; padding-right: 20px; }
  .topbar { padding: 0 20px; }
  .sidebar { width: 210px; flex-basis: 210px; }
}
@media (max-width: 1100px) {
  .users-panel { overflow-x: auto; }
  .users-table-head, .user-management-row { min-width: 1400px; }
}
.page { max-width: 1320px; margin: 0 auto; padding: 38px 46px 64px; }
.page-heading { margin-bottom: 31px; }
.workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.workspace-heading > div:first-child { min-width: 0; padding-top: 2px; }
.hot-topics { width: min(520px, 46%); flex: 0 0 auto; padding: 13px 15px 11px; border: 1px solid #dfe8e4; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.hot-topics-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #edf1f0; }
.hot-topics-kicker { display: block; margin-bottom: 4px; color: var(--accent); font: 700 8px "DM Sans", sans-serif; letter-spacing: 1.3px; }
.hot-topics h2 { margin: 0; color: #354247; font-size: 14px; }
.hot-topics-controls { display: flex; align-items: center; gap: 4px; }
.hot-topics-controls select { width: auto; height: 28px; padding: 0 22px 0 7px; color: #55756e; border-color: #dce8e4; border-radius: 5px; font-size: 10px; box-shadow: none; }
.hot-topics-controls select:focus { box-shadow: 0 0 0 2px #e4f2ed; }
.hot-topics-heading .icon-button { width: 28px; height: 28px; color: #70958b; }
.hot-topics-heading .icon-button svg { width: 15px; height: 15px; }
.hot-topics-status { min-height: 17px; padding-top: 7px; color: #93a19f; font-size: 10px; }
.hot-topics-status.is-error { color: #b45b4a; }
.hot-topics.is-loading .hot-topics-heading .icon-button svg { animation: spin .8s linear infinite; }
.hot-topics-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding: 0; margin: 0; list-style: none; }
.hot-topics-list li { min-width: 0; min-height: 25px; display: flex; align-items: center; gap: 6px; color: #536165; font-size: 10px; }
.hot-topics-list li a { min-width: 0; overflow: hidden; color: #536165; text-overflow: ellipsis; white-space: nowrap; }
.hot-topics-list li a:hover { color: var(--accent); }
.hot-topic-rank { width: 15px; flex: 0 0 15px; color: #a1aeac; font: 700 10px "DM Sans", sans-serif; text-align: center; }
.hot-topics-list li:nth-child(-n+3) .hot-topic-rank { color: var(--accent); }
.hot-topic-label { flex: 0 0 auto; padding: 2px 4px; border-radius: 3px; color: #d47a38; background: #fff1e5; font-size: 8px; }
.hot-topic-heat { flex: 0 0 auto; margin-left: auto; color: #a7b1b0; font: 9px "DM Sans", sans-serif; }
.hot-topics-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; margin-top: 4px; border-top: 1px solid #edf1f0; color: #a0abaa; font-size: 9px; }
.hot-topics-footer a { display: inline-flex; align-items: center; gap: 3px; color: #6c9388; white-space: nowrap; }
.hot-topics-footer a:hover { color: var(--accent); }
.hot-topics-footer svg { width: 11px; height: 11px; }
.heading-with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font: 700 10px/1 "DM Sans", sans-serif; letter-spacing: 1.8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: 31px; line-height: 1.25; letter-spacing: -0.3px; }
.subheading { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.button { min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; font-weight: 600; transition: .2s ease; }
.button svg { width: 16px; height: 16px; }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 5px 12px rgba(236,104,78,.18); }
.button-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.button-ghost { color: #59666a; background: #fff; border-color: var(--line); }
.button-ghost:hover, .button-secondary:hover { border-color: #c9d1d1; background: #f8faf9; }
.button-secondary { color: #455156; background: #fff; border-color: #dce3e1; }
.button:disabled { cursor: wait; opacity: .7; }
.spin { animation: spin .8s linear infinite; }
.full-width { width: 100%; }
.reference-form { margin: -7px 0 25px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #d8e7e0; border-radius: 8px; background: #f4faf7; }
.reference-form-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reference-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: #4b9473; border-radius: 7px; background: #dff1e8; }
.reference-icon svg { width: 16px; }
.reference-form-copy strong { display: block; color: #3d6557; font-size: 12px; }
.reference-form-copy small { display: block; margin-top: 4px; color: #8aa397; font-size: 10px; }
.reference-input { width: min(510px, 48%); display: flex; gap: 8px; }
.reference-input input { min-width: 0; height: 38px; background: #fff; }
.reference-input .button { flex: 0 0 auto; }
.workspace-grid { display: grid; grid-template-columns: minmax(480px, 1.08fr) minmax(420px, .92fr); gap: 34px; align-items: start; }
.page-workspace .config-column { margin-top: -140px; }
.section-title { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; }
.step-number { width: 27px; height: 27px; border: 1px solid #f1c0b4; color: var(--accent); display: grid; place-items: center; border-radius: 50%; font: 700 10px "DM Sans", sans-serif; }
.section-title h2 { margin: 1px 0 4px; font-size: 16px; }
.section-title p { margin: 0; color: #9aa3a5; font-size: 11px; }
.section-title-spaced { margin-top: 31px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.form-panel { padding: 24px 23px 23px; }
.field { display: block; min-width: 0; margin-bottom: 18px; }
.field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #4e5c60; font-size: 12px; font-weight: 600; }
.field > span small { color: #a4adae; font-size: 10px; font-weight: 400; }
.field-label-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.field-label-action > span { margin: 0; color: #4e5c60; font-size: 12px; font-weight: 600; }
.topic-generator-trigger { min-height: 27px; padding: 0 8px; color: #5d8277; font-size: 10px; }
.topic-generator-trigger svg { width: 13px; height: 13px; }
.field-help { display: block; margin-top: 7px; color: #9aa6a7; font-size: 10px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-width: 0; color: var(--ink); border: 1px solid #d7e0de; border-radius: 6px; outline: 0; background: #fff; box-shadow: 0 1px 2px rgba(25, 37, 39, .03); transition: border-color .2s, box-shadow .2s, background-color .2s; }
input:not([type="checkbox"]):not([type="radio"]), select { height: 42px; padding: 0 13px; }
textarea { min-height: 96px; padding: 10px 13px; resize: vertical; line-height: 1.65; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: #c4d1ce; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #e7a294; box-shadow: 0 0 0 3px #fff0ed; background: #fff; }
input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; }
input::placeholder, textarea::placeholder { color: #aebbbb; opacity: 1; }
select { appearance: auto; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.field-row .field { min-width: 0; }
.custom-number-field { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.custom-number-field[hidden] { display: none !important; }
.custom-number-field input { height: 36px; }
.custom-number-field small { flex: 0 0 auto; color: #9aa6a6; font-size: 10px; white-space: nowrap; }
.check-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 2px; }
.check-item { position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0; cursor: pointer; }
.check-item input, .style-card input, .pill-group input, .provider-options input { position: absolute; opacity: 0; pointer-events: none; }
.fake-check { width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #d3dcda; border-radius: 4px; display: grid; place-items: center; color: #fff; }
.fake-check svg { width: 12px; height: 12px; opacity: 0; }
.check-item input:checked + .fake-check { border-color: var(--accent); background: var(--accent); }
.check-item input:checked + .fake-check svg { opacity: 1; }
.check-item b { display: block; color: #526063; font-size: 11px; font-weight: 600; white-space: nowrap; }
.check-item small { display: block; margin-top: 3px; color: #a1acad; font-size: 9px; }
.style-panel { padding: 20px; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.style-card { position: relative; min-height: 111px; padding: 13px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #e5eaea; border-radius: 7px; cursor: pointer; transition: .2s ease; }
.style-card:hover { border-color: #d4dede; background: #fcfdfd; }
.style-card input:checked + .style-icon { color: #fff; }
.style-card:has(input:checked) { border-color: #e8a192; background: #fffaf8; box-shadow: inset 0 0 0 1px #f9d9d2; }
.style-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 6px; }
.style-icon svg { width: 16px; }
.style-icon-blue { color: var(--blue); background: #e8f1f8; }
.style-icon-coral { color: var(--accent); background: #fcebe7; }
.style-icon-green { color: var(--green); background: #e7f2ed; }
.style-icon-yellow { color: var(--yellow); background: #f9f1dd; }
.style-card b { color: #3e4b4f; font-size: 12px; }
.style-card small { margin-top: 4px; color: #9ba6a7; font-size: 10px; }
.divider { height: 1px; margin: 20px 0 18px; background: var(--line); }
.pill-group { display: flex; flex-wrap: wrap; gap: 7px; }
.pill-group label { cursor: pointer; }
.pill-group span { display: block; padding: 7px 11px; border: 1px solid #e0e6e5; border-radius: 100px; color: #748083; font-size: 11px; transition: .2s ease; }
.pill-group label:hover span { border-color: #cbd5d3; }
.pill-group input:checked + span { color: #b64b39; border-color: #f1b3a7; background: #fff1ed; }
.field-row-bottom { margin-top: 18px; }
.field-row-bottom .field { margin-bottom: 0; }
.image-requirements-panel { margin-top: 18px; padding: 19px 20px 5px; }
.image-requirements-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.image-requirements-kicker { display: block; margin-bottom: 4px; color: #e37a63; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1.4px; }
.image-requirements-heading h3 { margin: 0; color: #3d4c4f; font-size: 15px; }
.image-requirements-heading p { margin: 5px 0 0; color: #9aa6a7; font-size: 10px; }
.image-requirements-heading-actions { display: flex; align-items: center; gap: 12px; }
.image-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.image-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.image-toggle-track { width: 28px; height: 17px; flex: 0 0 28px; padding: 2px; display: flex; align-items: center; border-radius: 20px; background: #cbd6d3; transition: background .2s ease; }
.image-toggle-track:after { width: 13px; height: 13px; content: ""; display: block; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(35, 53, 50, .18); transition: transform .2s ease; }
.image-toggle input:checked + .image-toggle-track { background: var(--green); }
.image-toggle input:checked + .image-toggle-track:after { transform: translateX(11px); }
.image-toggle input:focus-visible + .image-toggle-track { outline: 3px solid #e1f0ea; }
.image-toggle-track svg { display: none; }
.image-toggle > span:last-child { display: block; }
.image-toggle b, .image-toggle small { display: block; white-space: nowrap; }
.image-toggle b { color: #536762; font-size: 10px; font-weight: 600; }
.image-toggle small { margin-top: 3px; color: #9aa6a7; font-size: 9px; }
.image-requirements-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: #b66a54; border-radius: 8px; background: #fff0eb; }
.image-requirements-icon svg { width: 17px; }
.image-count-hint { display: block; min-height: 15px; margin-top: 7px; color: #81a090; font-size: 10px; }
.image-count-hint.is-error { color: #b45b4a; }
.image-requirements-note { display: flex; align-items: flex-start; gap: 7px; margin: 30px 0 18px; color: #8b9b9a; font-size: 10px; line-height: 1.5; }
.image-requirements-note svg { width: 14px; flex: 0 0 14px; color: #76a18b; }
.image-notes-field textarea { min-height: 69px; }
.image-requirements-disabled .image-requirements-note { opacity: .58; }
.image-requirements-disabled .field > span, .image-requirements-disabled .image-count-hint { color: #a7b2b0; }
.image-requirements-disabled select:disabled, .image-requirements-disabled textarea:disabled { color: #9da9a7; cursor: not-allowed; background: #f4f7f6; }
.preview-strip { min-height: 77px; margin-top: 24px; padding: 15px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #cfe3da; border-radius: 8px; background: #f3faf6; }
.preview-strip-disabled { border-color: #e2e7e6; background: #f7f9f8; }
.preview-strip-disabled .preview-icon { color: #9aa7a5; background: #e9eeec; }
.preview-strip-disabled b, .preview-strip-disabled p { color: #7f8c8b; }
.preview-icon { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; color: #4b9473; border-radius: 8px; background: #dff1e8; }
.preview-icon svg { width: 18px; }
.preview-strip b { display: block; color: #335c4c; font-size: 12px; }
.preview-strip p { margin: 5px 0 0; color: #83a092; font-size: 10px; }
.preview-strip p span { padding: 0 5px; color: #b0c7bb; }
.preview-strip .button { margin-left: auto; flex: 0 0 auto; }
.generation-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.generation-actions .button { margin-left: 0; }
.mini-note { margin-top: 16px; display: flex; gap: 8px; align-items: center; color: #a0abad; font-size: 10px; }
.mini-note svg { width: 15px; color: #72a38c; }
.generation-history { margin-top: 38px; }
.generation-history.is-loading { opacity: .62; transition: opacity .16s ease; }
.generation-history .section-title { margin-bottom: 15px; }
.generation-history .step-number svg { width: 14px; height: 14px; }
.generation-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.generation-filter { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe7e4; border-radius: 6px; color: #7c8d8a; background: #fff; font-size: 10px; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.generation-filter:hover { border-color: #c5d8d1; color: #476c61; background: #f7fbf9; }
.generation-filter b { min-width: 16px; padding: 2px 4px; border-radius: 9px; color: #98a6a4; background: #f0f4f2; font: 10px "DM Sans", sans-serif; text-align: center; }
.generation-filter.active { border-color: #e8a092; color: #b75643; background: #fff6f3; box-shadow: inset 0 0 0 1px #f9ddd7; }
.generation-filter.active b { color: #b75643; background: #ffe5de; }
.generation-filter-pending.active { border-color: #e5c28e; color: #9b703c; background: #fff9ed; box-shadow: inset 0 0 0 1px #f5e5c8; }
.generation-filter-pending.active b { color: #9b703c; background: #ffedc9; }
.generation-filter-running.active { border-color: #e4b28f; color: #b87348; background: #fff5ed; box-shadow: inset 0 0 0 1px #f5ddca; }
.generation-filter-running.active b { color: #b87348; background: #ffe6d2; }
.generation-filter-completed.active { border-color: #b9ddc9; color: #4d8b6f; background: #f1faf5; box-shadow: inset 0 0 0 1px #dcefe4; }
.generation-filter-completed.active b { color: #4d8b6f; background: #dff1e8; }
.generation-filter-error.active { border-color: #eab9ae; color: #ab5746; background: #fff5f2; box-shadow: inset 0 0 0 1px #f5ddd7; }
.generation-filter-error.active b { color: #ab5746; background: #fbe2dc; }
.generation-filter-canceled.active { border-color: #cbd7d4; color: #718083; background: #f4f7f6; box-shadow: inset 0 0 0 1px #e5ecea; }
.generation-filter-canceled.active b { color: #718083; background: #e6eeeb; }
.generation-history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.generation-history-row { min-height: 76px; padding: 12px 17px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; column-gap: 11px; border-bottom: 1px solid var(--line); }
.generation-history-row:last-child { border-bottom: 0; }
.generation-history-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 7px; color: #4b9473; background: #e8f5ed; }
.generation-history-icon svg { width: 16px; height: 16px; }
.generation-history-main { min-width: 0; display: grid; gap: 6px; }
.generation-history-title { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 7px 9px; }
.generation-history-title strong { min-width: 0; max-width: 280px; flex: 0 1 auto; color: #344247; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generation-status-label { padding: 3px 7px; border-radius: 100px; color: #4d8b6f; background: #eaf6ef; font-size: 9px; }
.generation-history-topic { min-width: 0; max-width: 240px; flex: 0 1 200px; overflow: hidden; color: #8b999b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.generation-status-label { text-decoration: none; cursor: pointer; }
.generation-status-label:hover { text-decoration: underline; }
.generation-history-meta { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 9px 14px; overflow: hidden; color: #a4adae; font-size: 9px; white-space: nowrap; }
.generation-history-meta > span { flex: 0 0 auto; }
.generation-history-error { min-width: 0; max-width: none; flex: 1 1 180px; display: block; overflow: hidden; margin: 0; color: #ad5c4a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.generation-history-actions { display: flex; align-items: center; justify-self: end; flex: 0 0 auto; gap: 5px; margin-left: 0; }
.generation-history-row { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.generation-history-icon { flex: 0 0 28px; }
.generation-history-main { flex: 1 1 auto; }
.generation-history-actions { margin-left: auto; }
.generation-fill-button { min-height: 30px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.generation-fill-button svg { width: 13px; height: 13px; }
.generation-history-empty { min-height: 105px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #d8e0df; border-radius: 8px; color: #aebbbb; background: #fbfcfc; text-align: center; }
.generation-history-empty svg { width: 22px; height: 22px; margin-bottom: 8px; }
.generation-history-empty p { margin: 0 0 4px; color: #778789; font-size: 12px; }
.generation-history-empty small { color: #a5b0b0; font-size: 10px; }
.generation-history-running .generation-history-icon { color: #c07a4f; background: #fff1e8; }
.generation-history-running .generation-status-label { color: #b87348; background: #fff1e8; }
.generation-history-canceled .generation-history-icon { color: #77898b; background: #edf1f0; }
.generation-history-canceled .generation-status-label { color: #718083; background: #edf1f0; }
.generation-history-pending .generation-history-icon { color: #a87942; background: #fff3df; }
.generation-history-pending .generation-status-label { color: #9b703c; background: #fff3df; }
.generation-history-error .generation-history-icon { color: #b45543; background: #fff0ed; }
.generation-history-error .generation-status-label { color: #ab5746; background: #fff0ed; }
.flash { position: fixed; top: 82px; right: 28px; z-index: 90; width: min(390px, calc(100vw - 56px)); max-width: none; min-height: 48px; margin: 0; padding: 12px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #cfe3da; border-radius: 9px; color: #3a755a; background: rgba(249, 255, 252, .97); box-shadow: 0 14px 35px rgba(32, 54, 48, .14); font-size: 12px; line-height: 1.5; animation: notification-in .22s ease-out; transition: opacity .24s ease, transform .24s ease, max-height .24s ease, margin .24s ease, padding .24s ease, border-width .24s ease; }
.flash.is-dismissing { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; opacity: 0; transform: translateY(-5px); overflow: hidden; }
.flash-error { border-color: #f0c8bd; color: #a05242; background: #fff4f0; }
.flash > svg { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.local-notification { position: fixed; top: 82px; right: 28px; z-index: 90; width: min(390px, calc(100vw - 56px)); min-height: 48px; margin: 0; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #cfe3da; border-radius: 9px; color: #3a755a; background: rgba(249, 255, 252, .97); box-shadow: 0 14px 35px rgba(32, 54, 48, .14); font-size: 12px; animation: notification-in .22s ease-out; }
.local-notification-info { border-color: #cfe3da; }
.local-notification-error { border-color: #f0c8bd; color: #a05242; background: rgba(255, 248, 245, .98); }
.local-notification-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; color: #4b9473; background: #dff1e8; }
.local-notification-error .local-notification-icon { color: #b75b49; background: #fbe5df; }
.local-notification-icon svg { width: 17px; height: 17px; }
.local-notification-copy { min-width: 0; flex: 1; }
.local-notification-copy b, .local-notification-copy small { display: block; }
.local-notification-copy b { color: #335c4c; font-size: 12px; font-weight: 700; }
.local-notification-error .local-notification-copy b { color: #994d3e; }
.local-notification-copy small { margin-top: 4px; overflow: hidden; color: #78958a; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: normal; }
.local-notification-error .local-notification-copy small { color: #a56d62; }
.local-notification-close { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #8aa49a; background: transparent; }
.local-notification-close:hover { color: #45675b; background: #e8f3ee; }
.local-notification-error .local-notification-close:hover { color: #994d3e; background: #fdebe6; }
.local-notification-close svg { width: 15px; height: 15px; }
.generation-confirm-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(23, 33, 38, .42); }
.generation-confirm-backdrop[hidden] { display: none; }
.modal-open { overflow: hidden; }
.generation-confirm-dialog { width: min(100%, 610px); max-height: calc(100vh - 48px); overflow: auto; padding: 25px; border: 1px solid #dfe7e4; border-radius: 8px; background: #fff; box-shadow: 0 22px 65px rgba(23, 33, 38, .2); }
.generation-confirm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.generation-confirm-header .eyebrow { margin-bottom: 8px; }
.generation-confirm-header h2 { margin: 0; color: #273338; font-size: 20px; }
.generation-confirm-description { margin: 15px 0 17px; color: #7d898b; font-size: 12px; }
.generation-confirm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid #e4eae8; border-radius: 6px; overflow: hidden; background: #e4eae8; }
.generation-confirm-item { min-width: 0; padding: 11px 12px; background: #fbfcfc; }
.generation-confirm-item .generation-confirm-label { display: block; margin-bottom: 5px; color: #8b9899; font-size: 10px; }
.generation-confirm-item strong { display: block; overflow-wrap: anywhere; color: #334247; font-size: 12px; font-weight: 500; line-height: 1.5; }
.generation-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.topic-generator-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; background: rgba(23, 33, 38, .45); }
.topic-generator-backdrop[hidden] { display: none; }
.topic-generator-dialog { width: min(100%, 680px); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border: 1px solid #dfe7e4; border-radius: 9px; background: #fff; box-shadow: 0 22px 65px rgba(23, 33, 38, .22); }
.topic-generator-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 17px; margin-bottom: 19px; border-bottom: 1px solid var(--line); }
.topic-generator-header .eyebrow { margin-bottom: 8px; }
.topic-generator-header h2 { margin: 0 0 6px; color: #273338; font-size: 20px; }
.topic-generator-header p:last-child { margin: 0; color: #7d898b; font-size: 11px; line-height: 1.6; }
.topic-generator-form .field { margin-bottom: 15px; }
.topic-generator-hot-toggle { margin-bottom: 15px; }
.topic-generator-hot-toggle b, .topic-generator-hot-toggle small { display: block; }
.topic-generator-hot-toggle b { color: #50635f; font-size: 11px; }
.topic-generator-hot-toggle small { margin-top: 3px; color: #94a29f; font-size: 10px; }
.topic-generator-status { padding: 10px 12px; margin: 3px 0 12px; border: 1px solid #cfe5dc; border-radius: 6px; color: #4d846e; background: #f2faf6; font-size: 11px; line-height: 1.5; }
.topic-generator-status.is-error { border-color: #f0c3b8; color: #ae5746; background: #fff6f3; }
.topic-generator-status.is-loading::before { content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 7px -2px 0; border: 2px solid #cfe5dc; border-top-color: #5b9b80; border-radius: 50%; animation: spin .8s linear infinite; }
.topic-generator-results { display: grid; gap: 8px; }
.topic-suggestion { width: 100%; min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #dfe8e4; border-radius: 7px; text-align: left; cursor: pointer; background: #fbfdfc; transition: border-color .2s, background-color .2s, transform .2s; }
.topic-suggestion:hover { border-color: #e6a293; background: #fff9f7; transform: translateY(-1px); }
.topic-suggestion-index { color: #6a9887; font: 700 11px "DM Sans", sans-serif; }
.topic-suggestion-body { min-width: 0; }
.topic-suggestion-body strong, .topic-suggestion-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-suggestion-body strong { color: #344247; font-size: 12px; line-height: 1.5; }
.topic-suggestion-body small { margin-top: 3px; color: #899997; font-size: 10px; line-height: 1.45; }
.topic-suggestion > svg { width: 15px; height: 15px; color: #8ba59b; }
.topic-generator-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wechat-open-dialog { width: min(100%, 620px); }
.wechat-open-content { display: flex; align-items: center; gap: 24px; padding: 4px 0 3px; }
.wechat-open-qr { width: 224px; height: 224px; flex: 0 0 224px; display: grid; place-items: center; padding: 9px; border: 1px solid #e2eae7; border-radius: 8px; background: #fff; }
.wechat-open-qr img { width: 204px; height: 204px; object-fit: contain; }
.wechat-open-details { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wechat-open-details strong { color: #334247; font-size: 15px; line-height: 1.5; }
.wechat-open-details p { margin: 0; overflow-wrap: anywhere; color: #899796; font-size: 11px; line-height: 1.6; }
.wechat-open-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.wechat-open-actions .button { min-height: 32px; font-size: 10px; }
.generation-global-status { max-width: 1320px; margin: 16px auto -2px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfe3da; border-radius: 8px; color: #3a755a; background: #eff9f3; }
.generation-global-status > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.generation-global-status b { color: #356e59; font-size: 12px; }
.generation-global-status small { color: #7d9b8d; font-size: 10px; }
.generation-global-status .button { min-height: 30px; margin-left: auto; padding: 0 10px; font-size: 10px; }
.generation-global-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: #4b9473; border-radius: 7px; background: #dff1e8; }
.generation-global-icon svg { width: 16px; height: 16px; }
.generation-strip { border-color: #cfe3da; background: #f3faf6; }
.generation-strip .button { margin-left: auto; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 28px; }
.stat-card { position: relative; min-height: 97px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.stat-card span { color: #8c9899; font-size: 11px; }
.stat-card strong { display: block; margin-top: 10px; color: #334044; font: 700 24px "DM Sans", sans-serif; }
.stat-card svg { position: absolute; top: 20px; right: 18px; width: 17px; color: #bcc8c7; }
.list-toolbar { min-height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.tabs { align-self: stretch; display: flex; gap: 22px; }
.tab { position: relative; padding: 0; border: 0; color: #9ba5a6; background: transparent; font-size: 12px; }
.tab.active { color: #3e4c50; font-weight: 600; }
.tab.active:after { position: absolute; content: ""; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); }
.tab span { margin-left: 4px; color: #afb9b9; font: 10px "DM Sans", sans-serif; }
.search-box { width: 210px; position: relative; }
.search-box svg { position: absolute; top: 11px; left: 10px; width: 15px; color: #a4adae; }
.search-box input { height: 34px; padding-left: 32px; font-size: 11px; }
.search-box .search-submit { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 5px; color: #79908b; background: transparent; }
.search-box .search-submit:hover { color: var(--accent); background: #fff1ed; }
.search-box .search-submit svg { position: static; width: 14px; }
.tabs .tab { display: inline-flex; align-items: center; text-decoration: none; }
.inline-form { display: inline-flex; margin: 0; }
.danger-button:hover { color: #b64b39; background: #fff1ed; }
.article-editor-form { max-width: 1040px; }
.article-edit-page .article-editor-shell { position: relative; overflow: visible; border: 1px solid #dfe7e5; border-radius: 9px; background: #eef2f1; box-shadow: var(--shadow); }
.article-edit-page .article-editor-tools { position: sticky; top: 68px; z-index: 35; box-shadow: 0 8px 16px rgba(38,57,55,.06); }
.article-editor-tools { position: relative; min-height: 55px; padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #dfe7e5; background: #fff; }
.article-ai-popover { position: sticky; z-index: 34; top: 123px; width: min(420px, calc(100% - 24px)); margin: 8px 12px 0 auto; padding: 16px; border: 1px solid #cfe1db; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(39, 62, 58, .16); }
.article-ai-popover-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e4ece9; }
.article-ai-popover-heading strong { display: block; color: #3e5753; font-size: 12px; }
.article-ai-popover-heading p { margin: 4px 0 0; color: #93a29f; font-size: 10px; line-height: 1.5; }
.article-ai-close { width: 27px; height: 27px; flex: 0 0 27px; }
.article-ai-close svg { width: 15px; height: 15px; }
.article-ai-mode { display: flex; gap: 5px; padding: 12px 0 14px; }
.article-ai-mode-button { min-height: 29px; padding: 0 11px; border: 1px solid #dce8e4; border-radius: 5px; color: #70827f; background: #fff; font-size: 10px; }
.article-ai-mode-button:hover, .article-ai-mode-button.active { border-color: #efb1a2; color: #b95643; background: #fff7f4; }
.article-ai-selection { min-height: 31px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #4d8172; border: 1px solid #cde6da; border-radius: 5px; background: #f1faf5; font-size: 10px; line-height: 1.45; }
.article-ai-selection.is-empty { color: #84928f; border-color: #dce8e4; background: #f8faf9; }
.article-ai-selection svg { width: 14px; height: 14px; flex: 0 0 14px; }
.article-ai-selection span { flex: 1 1 auto; min-width: 0; }
.article-ai-selection button { flex: 0 0 auto; padding: 2px 0; border: 0; color: #6e8d84; background: transparent; font-size: 10px; cursor: pointer; }
.article-ai-selection button:hover { color: #b95643; }
.article-ai-pane[hidden], .article-ai-popover[hidden] { display: none; }
.article-ai-pane { display: grid; gap: 12px; }
.article-ai-field { min-width: 0; }
.article-ai-field label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 7px; color: #536762; font-size: 10px; font-weight: 600; }
.article-ai-field label small { color: #a1aeab; font-weight: 400; }
.article-ai-field select, .article-ai-field textarea { width: 100%; border-color: #d4e1dd; background: #fff; }
.article-ai-field textarea { min-height: 76px; resize: vertical; }
.article-ai-run, .article-ai-image-run { min-height: 37px; white-space: nowrap; }
.article-ai-run svg, .article-ai-image-run svg { width: 15px; height: 15px; }
.article-ai-image-run { justify-self: end; }
.article-ai-status { min-height: 31px; padding: 8px 10px; display: flex; align-items: flex-start; gap: 7px; margin-top: 13px; color: #4d8172; border: 1px solid #cde6da; border-radius: 5px; background: #f1faf5; font-size: 10px; line-height: 1.55; }
.article-ai-status.is-error { color: #a84f42; border-color: #efc8bf; background: #fff7f5; }
.article-ai-status svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.article-ai-history { display: grid; gap: 10px; margin-top: 12px; }
.article-ai-history[hidden] { display: none; }
.article-ai-history-item { min-width: 0; padding: 10px; border: 1px solid #dce8e4; border-radius: 6px; background: #fff; }
.article-ai-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.article-ai-history-heading strong { color: #526d67; font-size: 10px; }
.article-ai-apply { min-height: 27px; padding: 0 9px; font-size: 10px; }
.article-ai-apply svg { width: 13px; height: 13px; }
.article-ai-apply.is-applied { color: #4d8172; border-color: #cde6da; background: #f1faf5; }
.article-ai-text-result-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.article-ai-diff-card { min-width: 0; overflow: hidden; border: 1px solid #dce8e4; border-radius: 6px; background: #f8faf9; }
.article-ai-diff-card.is-after { border-color: #cde6da; background: #f3faf6; }
.article-ai-diff-label { padding: 8px 10px; color: #788985; border-bottom: 1px solid #e3ebe8; font-size: 10px; font-weight: 700; }
.article-ai-diff-card.is-after .article-ai-diff-label { color: #4d8172; border-bottom-color: #d8ebe1; }
.article-ai-diff-content { max-height: 190px; overflow: auto; padding: 10px; color: #667873; font-size: 10px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.article-ai-diff-card.is-after .article-ai-diff-content { color: #365e53; }
.article-ai-result { max-width: 360px; }
.article-ai-result-image { overflow: hidden; border-radius: 4px; background: #eef3f1; }
.article-ai-result-image img { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.article-ai-result > span { display: block; margin-top: 7px; color: #81918f; font-size: 10px; line-height: 1.5; }
.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; }
.editor-tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.editor-tool { min-width: 34px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px; color: #647174; background: transparent; font-size: 11px; font-weight: 600; }
.editor-tool:hover, .editor-tool.active { color: var(--accent-dark); border-color: #f1d1c9; background: #fff5f2; }
.editor-tool-icon { padding: 0; }
.editor-tool-icon svg { width: 16px; height: 16px; }
.editor-tool-divider { width: 1px; height: 21px; margin: 0 5px; background: #e2e8e6; }
.editor-save-state { flex: 0 0 auto; color: #91a09e; font-size: 10px; }
.article-preview-card { max-width: 900px; min-height: 680px; margin: 28px auto; padding: 32px 54px 58px; border: 1px solid #e5e9e8; border-radius: 7px; background: #fff; box-shadow: 0 10px 28px rgba(40, 53, 55, .06); }
.article-preview-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #9ba5a5; font-size: 10px; }
.article-preview-meta > span:not(.article-preview-status) { padding-left: 9px; border-left: 1px solid #e1e7e5; }
.article-preview-status { padding: 4px 8px; color: #bd664a; border-radius: 4px; background: #fff0eb; font-weight: 700; }
.article-preview-title, .article-preview-summary { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none !important; background: transparent !important; }
.article-preview-title { margin: 29px 0 11px; color: #182329; font-size: 29px; line-height: 1.35; font-weight: 800; }
.article-preview-title:focus { outline: 0; }
.article-preview-summary { color: #7f8d91; font-size: 13px; line-height: 1.65; }
.article-preview-summary:focus { outline: 0; }
.article-preview-summary::placeholder { color: #b5c0c1; }
.article-preview-divider { height: 1px; margin: 25px 0 25px; background: #dfe5e4; }
.article-cover-editor { display: block; margin-bottom: 18px; }
.article-cover-editor > span { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; color: #536064; font-size: 11px; font-weight: 600; }
.article-cover-editor small { color: #a0abad; font-size: 10px; font-weight: 400; }
.cover-paste-zone { width: 100%; min-height: 82px; padding: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed #c9d8d4; border-radius: 7px; color: #6d8983; background: #f7fbf9; }
.cover-paste-zone:hover, .cover-paste-zone:focus-visible { border-color: #e59c8b; color: #b85a47; background: #fff8f5; outline: 0; }
.cover-paste-zone:disabled { cursor: wait; opacity: .72; }
.cover-paste-zone svg { width: 20px; height: 20px; }
.cover-paste-zone b { font-size: 11px; font-weight: 600; }
.cover-paste-zone small { color: #9baaa7; font-size: 10px; font-weight: 400; }
.article-preview-cover { position: relative; min-height: 180px; margin: 0 0 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; background: #f3f6f5; color: #a5b2b1; }
.article-preview-cover img { display: block; width: 100%; max-height: 390px; object-fit: cover; }
.article-preview-cover svg { width: 27px; height: 27px; }
.article-preview-cover span { font-size: 11px; }
.article-preview-cover:not(.is-empty) { background: #edf1f0; }
.article-preview-body { min-height: 390px; color: #38464b; font-size: 15px; line-height: 2; outline: 0; overflow-wrap: anywhere; }
.article-preview-body:focus { outline: 0; }
.article-preview-body:empty:before { content: attr(data-placeholder); color: #b1bdbd; pointer-events: none; }
.article-preview-body p { margin: 0 0 19px; }
.article-preview-body h2 { margin: 31px 0 16px; color: #1e2a2f; font-size: 20px; line-height: 1.45; font-weight: 800; }
.article-preview-body h3 { margin: 25px 0 13px; color: #263238; font-size: 17px; line-height: 1.5; font-weight: 700; }
.article-preview-body blockquote { padding: 10px 17px; margin: 20px 0; border-left: 3px solid #e69c8b; color: #667477; background: #fff8f5; }
.article-preview-body blockquote p { margin: 0 0 8px; }
.article-preview-body blockquote p:last-child { margin-bottom: 0; }
.article-preview-body ul, .article-preview-body ol { padding-left: 27px; margin: 0 0 20px; }
.article-preview-body li { padding-left: 5px; margin-bottom: 5px; }
.article-preview-body a { color: #347da2; text-decoration: underline; text-decoration-color: #b9d5e2; text-underline-offset: 3px; }
.article-preview-body strong { color: #202d32; font-weight: 700; }
.article-preview-body code { padding: 2px 5px; border-radius: 4px; color: #a44f3f; background: #fff1ed; font-family: Consolas, monospace; font-size: .9em; }
.article-preview-body hr { height: 1px; margin: 30px 0; border: 0; background: #dfe5e4; }
.article-inline-figure { margin: 25px 0 30px; }
.article-inline-figure img { display: block; width: 100%; height: auto; max-height: none; border-radius: 5px; object-fit: contain; }
.article-inline-figure figcaption { margin-top: 7px; color: #9ba7a8; text-align: center; font-size: 10px; }
.editor-empty-copy { color: #aebbbb; }
.article-editor-footer { min-height: 57px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.article-editor-footer > span { display: flex; align-items: center; gap: 6px; color: #96a3a2; font-size: 10px; }
.article-editor-footer > span svg { width: 14px; color: #77a18e; }
.article-editor-footer .model-actions { margin-top: 0; }
.article-edit-form { max-width: 900px; padding: 25px; }
.article-edit-form textarea { min-height: 360px; }
.article-list { margin-top: 11px; }
.article-row { min-height: 139px; padding: 19px 4px 19px 0; display: flex; align-items: flex-start; gap: 17px; border-bottom: 1px solid var(--line); }
.reference-row { position: relative; cursor: pointer; }
.reference-row:hover { background: #fbfdfc; }
.reference-click-layer { position: absolute; inset: 0; z-index: 3; }
.reference-row > *:not(.reference-click-layer) { position: relative; z-index: 2; pointer-events: none; }
.reference-row .article-actions, .reference-row .article-actions .inline-form, .reference-row .article-actions button, .reference-row .article-actions .reference-action, .reference-row .retry-reference { pointer-events: auto; }
.reference-row .retry-reference { position: relative; z-index: 5; }
.reference-row .article-actions { position: relative; z-index: 5; }
.reference-title { color: inherit; }
.reference-title:hover { color: var(--accent); }
.article-cover { position: relative; width: 112px; height: 100px; flex: 0 0 112px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 6px; color: #fff; overflow: hidden; }
.cover-published { background: #356c63; }
.cover-draft { background: #ba7a59; }
.cover-reference { justify-content: flex-end; background: #477e72; }
.cover-reference svg { width: 28px; height: 28px; align-self: flex-end; opacity: .86; }
.reference-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reference-cover-label { position: relative; z-index: 1; align-self: flex-start; padding: 4px 5px; border-radius: 3px; color: #fff; background: rgba(24, 52, 47, .55); opacity: 1 !important; }
.draft-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.draft-cover-label { position: relative; z-index: 1; align-self: flex-start; padding: 4px 5px; border-radius: 3px; color: #fff; background: rgba(89, 52, 37, .58); opacity: 1 !important; }
.draft-cover-chapters { position: relative; z-index: 1; }
.article-cover span { opacity: .75; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1px; }
.article-cover strong { align-self: flex-end; font: 700 31px "DM Sans", sans-serif; opacity: .85; }
.article-main { min-width: 0; flex: 1; padding: 2px 0; }
.article-title-row { display: flex; align-items: center; gap: 10px; }
.article-title-row h2 { min-width: 0; overflow: hidden; margin: 0; color: #334044; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 7px; border-radius: 100px; font-size: 9px; }
.status i { width: 5px; height: 5px; border-radius: 50%; }
.status-published { color: #4c8a70; background: #e9f5ed; }
.status-published i { background: #57aa7e; }
.status-draft { color: #b27a52; background: #fcf1e8; }
.status-draft i { background: #d79962; }
.article-main > p { max-width: 700px; overflow: hidden; margin: 11px 0 14px; color: #889496; font-size: 11px; line-height: 1.7; text-overflow: ellipsis; white-space: nowrap; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: #a3adae; font-size: 10px; }
.article-meta span { display: inline-flex; align-items: center; gap: 4px; }
.article-meta svg { width: 12px; }
.article-author { max-width: 220px; overflow: hidden; color: #66847c; text-overflow: ellipsis; white-space: nowrap; }
.reference-status { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; color: #7a9b91; font-size: 10px; }
.reference-status svg { width: 13px; height: 13px; }
.reference-status-error { color: #ad5c4a; }
.retry-reference { min-height: 28px; margin-top: 8px; padding: 0 9px; font-size: 10px; }
.retry-reference svg { width: 13px; height: 13px; }
.meta-style { padding: 4px 7px; color: #9a716a; border-radius: 4px; background: #f9efec; }
.article-actions { display: flex; gap: 2px; }
.reference-action { min-height: 31px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; color: #4b8a6d; font-size: 10px; }
.reference-action:hover { color: #357254; background: #f0f8f4; }
.reference-action svg { width: 14px; height: 14px; }
.export-link { min-height: 31px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d8e7e0; border-radius: 6px; color: #4b8a6d; background: #f5faf7; font: 700 9px "DM Sans", sans-serif; letter-spacing: .3px; }
.export-link:hover { border-color: #b9d8c9; color: #357254; background: #eaf6ef; }
.export-link svg { width: 14px; height: 14px; }
.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed #d8e0df; border-radius: 8px; background: #fbfcfc; }
.empty-state > svg { width: 32px; height: 32px; color: #aebcba; }
.empty-state h2 { margin: 15px 0 8px; font-size: 17px; }
.empty-state p { margin-bottom: 18px; color: #98a4a4; font-size: 12px; }
.page-settings { max-width: 900px; }
.site-settings-page { max-width: 980px; }
.site-settings-form { width: 100%; }
.site-brand-card { padding: 25px; }
.site-type { color: #b25c49; background: #fff0eb; }
.site-brand-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; align-items: start; }
.site-logo-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-logo-preview { width: 104px; height: 104px; flex: 0 0 104px; display: grid; place-items: center; margin-bottom: 6px; overflow: hidden; border: 1px dashed #d7e1de; border-radius: 12px; color: #fff; background: var(--accent); }
.site-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.site-logo-preview svg { width: 38px; height: 38px; }
.site-logo-editor .button { min-height: 31px; padding: 0 9px; font-size: 10px; }
.site-logo-editor .button svg { width: 14px; height: 14px; }
.site-logo-remove[hidden] { display: none; }
.site-logo-editor p { width: 100%; margin: 4px 0 0; color: #9aa6a7; font-size: 10px; line-height: 1.6; }
.site-brand-fields .field:last-child { margin-bottom: 0; }
.site-settings-preview { min-height: 68px; margin-top: 25px; padding: 13px 15px; display: flex; align-items: center; gap: 16px; border: 1px solid #dfe8e4; border-radius: 7px; background: #f8fbfa; }
.site-settings-preview-label { flex: 0 0 auto; color: #91a09e; font-size: 10px; }
.site-preview-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-preview-mark { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #fff; background: var(--accent); }
.site-preview-mark img { width: 100%; height: 100%; object-fit: cover; }
.site-preview-mark svg { width: 17px; height: 17px; }
.site-preview-brand b, .site-preview-brand small { display: block; }
.site-preview-brand b { color: #3f4e51; font-size: 12px; }
.site-preview-brand small { margin-top: 3px; color: #92a09f; font-size: 9px; }
.site-preview-workspace { margin-left: auto; padding: 6px 9px; color: #52756a; border: 1px solid #d7e6df; border-radius: 5px; background: #fff; font-size: 10px; }
.site-save-note { display: inline-flex; align-items: center; gap: 6px; color: #8c9d9a; font-size: 10px; }
.site-save-note svg { width: 14px; color: #70a08b; }
.page-announcements { width: min(1120px, calc(100% - 40px)); max-width: 1120px; }
.announcement-editor, .announcement-list-panel { padding: 25px; }
.announcement-type { color: #5b7b70; background: #edf7f1; }
.announcement-editor .field-row { gap: 16px; }
.announcement-editor textarea { min-height: 174px; resize: vertical; line-height: 1.75; }
.announcement-editor-options { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 2px 0 18px; }
.announcement-editor-options .field-toggle-box { min-width: 250px; margin: 0; }
.announcement-editor-hint { display: flex; align-items: center; gap: 7px; color: #8c9d98; font-size: 10px; }
.announcement-editor-hint svg { width: 15px; color: #70a08b; }
.announcement-time-row .field { margin-bottom: 0; }
.announcement-editor-actions { display: flex; align-items: center; gap: 8px; }
.announcement-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 6px; color: #4b8d6c; background: #e8f5ed; font: 600 11px "DM Sans", sans-serif; }
.announcement-list-panel { margin-top: 18px; }
.announcement-list-panel .panel-heading { margin-bottom: 0; }
.announcement-admin-list { display: grid; }
.announcement-admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid #edf1ef; }
.announcement-admin-row:last-child { border-bottom: 0; }
.announcement-admin-main { min-width: 0; }
.announcement-admin-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.announcement-admin-title h3 { min-width: 0; overflow: hidden; margin: 0; color: #35474a; font-size: 15px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.announcement-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 5px; font-size: 10px; }
.announcement-status-published { color: #4a8b6b; background: #e9f6ee; }
.announcement-status-draft { color: #9a6b3c; background: #fff4e8; }
.announcement-status-archived { color: #7d8988; background: #eef2f1; }
.announcement-pin { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: #be7154; font-size: 10px; }
.announcement-pin svg { width: 13px; height: 13px; }
.announcement-pin.is-hidden { display: none; }
.announcement-admin-summary { display: -webkit-box; overflow: hidden; max-width: 820px; margin: 8px 0 11px; color: #7f908d; font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.announcement-admin-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; color: #a0adaa; font-size: 10px; }
.announcement-admin-meta span { display: inline-flex; align-items: center; gap: 4px; }
.announcement-admin-meta svg { width: 13px; height: 13px; color: #91aaa1; }
.announcement-admin-actions { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 7px; min-width: 270px; }
.announcement-admin-actions form { margin: 0; }
.announcement-admin-actions .button { min-height: 31px; padding: 0 9px; font-size: 10px; }
.announcement-delete-button { color: #a4665a; }
.announcement-empty { margin-top: 3px; }
.model-form { width: 100%; }
.image-model-form, .mail-model-form { margin-top: 18px; }
.model-carousel { --carousel-bleed: 56px; position: relative; width: calc(100% + (var(--carousel-bleed) * 2)); margin-top: 20px; margin-left: calc(var(--carousel-bleed) * -1); overflow: hidden; }
.model-carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0; margin-bottom: 12px; }
.model-carousel-bar, .model-carousel-stage { width: calc(100% - (var(--carousel-bleed) * 2)); margin-right: auto; margin-left: auto; }
.model-carousel-nav { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid #e4ece9; border-radius: 9px; background: rgba(255, 255, 255, .86); box-shadow: 0 5px 18px rgba(72, 99, 92, .05); }
.model-carousel-arrow { width: 32px; height: 32px; border: 1px solid #dce5e1; color: #58766e; background: #fff; box-shadow: none; }
.model-carousel-arrow:disabled { cursor: default; color: #aebbb7; background: #f7faf9; opacity: .55; }
.model-carousel-counter { min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.model-carousel-counter strong { color: #4f6762; font: 600 11px "DM Sans", sans-serif; }
.model-carousel-counter small { max-width: 220px; overflow: hidden; color: #9aa7a5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-carousel-stage { position: relative; min-height: 1px; padding: 0; overflow: visible; isolation: isolate; }
.model-carousel-card { display: none; width: 100%; margin: 0; transition: transform .28s ease, opacity .28s ease, filter .28s ease; }
.model-carousel-card[data-profile-index="0"], .model-carousel-card.is-active, .model-carousel-card.is-side { display: block; }
.model-carousel-card.is-active { position: relative; z-index: 3; opacity: 1; transform: translateX(0) scale(1); filter: none; }
.model-carousel-card.is-active .model-card { box-shadow: 0 18px 42px rgba(66, 92, 85, .11); }
.model-carousel-card.is-side { position: absolute; top: 18px; z-index: 2; width: 84%; cursor: pointer; opacity: .38; filter: blur(2px) saturate(.62); }
.model-carousel-card.is-side .model-actions, .model-carousel-card.is-side .model-test-result { visibility: hidden; pointer-events: none; }
.model-carousel-card.is-side .model-card { box-shadow: 0 12px 30px rgba(66, 92, 85, .06); }
.model-carousel-card.is-side:hover { opacity: .58; filter: blur(1.15px) saturate(.8); }
.model-carousel-card.is-prev { left: -84%; transform: scale(.82); transform-origin: center right; }
.model-carousel-card.is-next { right: -84%; transform: scale(.82); transform-origin: center left; }
.model-carousel-card.is-carousel-hidden { display: none !important; }
.model-carousel-card[data-image-profile-new="true"] .model-type-image { color: #6e8b81; background: #edf3f1; }
.model-carousel-card[data-image-profile-new="true"].is-active .model-card { border-color: #d5e6df; }
.model-carousel .image-model-form { margin-top: 0; }
.field-row-profile { grid-template-columns: minmax(0, 1fr) 170px; }
.field-toggle { display: block; }
.field-toggle-box { min-height: 42px; padding: 9px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfe8e4; border-radius: 6px; background: #f8fbfa; }
.field-toggle-box input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--green); }
.field-toggle-box span { color: #6f817d; font-size: 11px; line-height: 1.55; }
.model-card { padding: 25px; }
.model-card .panel-heading { padding-bottom: 0; margin-bottom: 26px; border-bottom: 0; }
.model-card .field { margin-bottom: 20px; }
.model-card .field-row { gap: 16px; }
.model-type { padding: 6px 10px; color: #2f8b79; border-radius: 5px; background: #e8f6f2; font-size: 10px; font-weight: 600; }
.model-type-image { color: #b26a3e; background: #fff1e8; }
.model-type-mail { color: #347c87; background: #e8f5f7; }
.model-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 16px; }
.model-actions .button { min-height: 38px; }
.model-actions .button:disabled { color: #8d9899; border-color: #d9e1df; background: #fff; box-shadow: none; opacity: .72; }
.model-transport { display: flex; flex-wrap: wrap; gap: 20px; padding: 14px 15px; margin-top: 2px; border: 1px solid #e1e9e6; border-radius: 6px; background: #f8fbfa; }
.model-transport span { display: flex; align-items: center; gap: 8px; color: #94a1a0; font-size: 10px; }
.model-transport b { font-weight: 500; }
.model-transport strong { color: #4f7770; font-weight: 600; }
.model-test-result { padding: 15px 16px; margin-top: 16px; border: 1px solid #dce8e4; border-radius: 7px; background: #f8fbfa; }
.model-test-result.is-testing { color: #5a7771; }
.model-test-result.is-success { border-color: #cbe5d8; background: #f2faf5; }
.model-test-result.is-error { border-color: #f0c4ba; background: #fff7f5; }
.model-test-heading { display: flex; align-items: center; gap: 8px; color: #416e63; font-size: 12px; }
.model-test-result.is-error .model-test-heading { color: #b14e3d; }
.model-test-heading svg { width: 16px; height: 16px; }
.model-test-heading span { margin-left: auto; color: #90a19d; font-size: 10px; }
.model-test-reply { padding-top: 12px; margin-top: 12px; border-top: 1px solid #dce8e4; }
.model-test-image { max-width: 520px; margin-top: 14px; overflow: hidden; border: 1px solid #dce8e4; border-radius: 8px; background: #eef3f1; }
.model-test-image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #eef3f1; }
.model-test-reply b { color: #65827b; font-size: 10px; font-weight: 600; }
.model-test-reply p, .model-test-error { margin: 7px 0 0; color: #536762; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.model-test-error { color: #a54f40; }
.public-import-page { max-width: 980px; }
.public-import-panel { max-width: 860px; padding: 25px; }
.public-import-dropzone { min-height: 144px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px dashed #bcd8cb; border-radius: 8px; color: #4b806b; background: #f6fbf8; cursor: pointer; transition: border-color .2s, background-color .2s; }
.public-import-dropzone:hover { border-color: #76ae94; background: #f0faf4; }
.public-import-dropzone > svg { width: 28px; height: 28px; flex: 0 0 28px; }
.public-import-dropzone span { display: grid; gap: 5px; min-width: 0; }
.public-import-dropzone strong { color: #416c5b; font-size: 13px; }
.public-import-dropzone small { color: #8ba198; font-size: 10px; line-height: 1.5; }
.public-import-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.public-import-mode { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public-import-mode-option { position: relative; min-width: 0; cursor: pointer; }
.public-import-mode-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.public-import-mode-option > span { min-height: 68px; padding: 12px 13px; display: grid; align-content: center; gap: 6px; border: 1px solid #dfe8e4; border-radius: 7px; background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.public-import-mode-option > span strong { display: flex; align-items: center; gap: 7px; color: #536760; font-size: 12px; }
.public-import-mode-option > span strong svg { width: 15px; height: 15px; color: #6b9f88; }
.public-import-mode-option > span small { color: #94a39e; font-size: 9px; line-height: 1.4; }
.public-import-mode-option input:checked + span { border-color: #6ca588; background: #f3faf6; box-shadow: inset 0 0 0 1px #b8dcc8; }
.public-import-mode-option input:focus-visible + span { outline: 2px solid #9bcab0; outline-offset: 2px; }
.public-import-warning { margin-top: 18px; padding: 12px 13px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #f0dfc8; border-radius: 6px; color: #9b7854; background: #fffaf2; font-size: 10px; line-height: 1.6; }
.public-import-warning svg { width: 15px; height: 15px; flex: 0 0 15px; color: #c28b52; }
.public-import-confirm { margin: 18px 0 0; }
.public-import-loading[hidden] { display: none; }
.public-import-loading { margin-top: 18px; padding: 13px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; border: 1px solid #cfe3da; border-radius: 7px; color: #477b66; background: #f4fbf6; }
.public-import-loading-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #4b9473; background: #dff1e8; }
.public-import-loading-icon svg { width: 17px; height: 17px; }
.public-import-loading-copy { min-width: 0; display: grid; gap: 3px; }
.public-import-loading-copy strong { color: #477b66; font-size: 11px; font-weight: 600; }
.public-import-loading-copy small { color: #8ba198; font-size: 9px; line-height: 1.5; }
.public-import-loading-bar { grid-column: 1 / -1; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #dcece4; }
.public-import-loading-bar > span { display: block; width: 34%; height: 100%; border-radius: inherit; background: #4b9473; animation: public-import-loading 1.2s ease-in-out infinite; }
.public-import-panel[data-import-loading="true"] .public-import-dropzone,
.public-import-panel[data-import-loading="true"] .public-import-mode,
.public-import-panel[data-import-loading="true"] .public-import-warning,
.public-import-panel[data-import-loading="true"] .public-import-confirm { pointer-events: none; opacity: .62; }
.public-import-message { max-width: 860px; margin: -9px 0 18px; padding: 12px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid #cfe3da; border-radius: 7px; color: #3f795f; background: #f4fbf6; font-size: 11px; }
.public-import-message svg { width: 16px; height: 16px; flex: 0 0 16px; }
.public-import-message.is-error { border-color: #efcfc5; color: #a25847; background: #fff6f3; }
.public-import-result { max-width: 860px; margin: -3px 0 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #d8e8df; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.public-import-result span { min-height: 72px; padding: 12px 15px; display: grid; align-content: center; gap: 4px; border-right: 1px solid #e4eee9; }
.public-import-result span:last-child { border-right: 0; }
.public-import-result b { color: #39775d; font: 700 20px/1 "DM Sans", sans-serif; }
.public-import-result small { color: #91a29b; font-size: 9px; }
@keyframes public-import-loading { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(320%); } }
.usage-filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.usage-filter { min-height: 31px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid #dfe7e4; border-radius: 6px; color: #7c8d8a; background: #fff; font-size: 10px; text-decoration: none; }
.usage-filter:hover, .usage-filter.active { border-color: #efb1a2; color: #b95643; background: #fff7f4; }
.usage-list { position: relative; overflow: visible; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.usage-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.usage-pagination .button { min-height: 30px; padding: 0 11px; }
.usage-row { position: relative; z-index: 1; min-height: 92px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid var(--line); }
.usage-row:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.usage-row:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.usage-row:has(.usage-details[open]) { z-index: 120; }
.usage-row:last-child { border-bottom: 0; }
.usage-row-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 7px; color: #4b9473; background: #e8f5ed; }
.usage-row-icon svg { width: 16px; height: 16px; }
.usage-row-main { min-width: 0; flex: 1 1 auto; }
.usage-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.usage-row-title strong { color: #344247; font-size: 12px; }
.usage-status-label, .usage-image-badge { padding: 3px 7px; border-radius: 100px; color: #4d8b6f; background: #eaf6ef; font-size: 9px; }
.usage-image-badge { display: inline-flex; align-items: center; gap: 4px; color: #9b6d45; background: #fff2e6; }
.usage-image-badge svg { width: 11px; height: 11px; }
.usage-row-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; margin-top: 7px; color: #9aa7a5; font-size: 9px; }
.usage-cost { color: #b46a3f; }
.usage-refund { color: #4b9270; }
.usage-owner { color: #668d80; }
.usage-preview, .usage-error, .usage-returned { max-width: 850px; margin: 8px 0 0; overflow: hidden; color: #7b8a89; font-size: 10px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.usage-error { color: #ad5c4a; }
.usage-returned { display: flex; align-items: center; gap: 5px; color: #9b703c; }
.usage-returned svg { width: 13px; height: 13px; }
.usage-row-actions { display: flex; align-items: flex-start; gap: 6px; margin-left: auto; }
.usage-image-button { min-height: 29px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.usage-image-button svg { width: 13px; height: 13px; }
.usage-details { position: relative; z-index: 121; flex: 0 0 30px; }
.usage-details summary { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #dce6e2; border-radius: 6px; color: #78908a; cursor: pointer; list-style: none; }
.usage-details summary::-webkit-details-marker { display: none; }
.usage-details summary svg { width: 14px; height: 14px; }
.usage-detail-popover { position: absolute; z-index: 40; top: 38px; right: 0; width: min(430px, calc(100vw - 48px)); max-height: min(420px, calc(100vh - 132px)); box-sizing: border-box; overflow: auto; padding: 14px; border: 1px solid #dce7e3; border-radius: 7px; background: #fff; box-shadow: 0 15px 38px rgba(30, 54, 48, .16); }
.usage-detail-popover.is-floating { position: fixed; z-index: 160; max-height: min(420px, calc(100vh - 24px)); margin: 0; }
.usage-detail-popover b { color: #3e5753; font-size: 11px; }
.usage-detail-popover dl { margin: 10px 0 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 7px 9px; font-size: 10px; }
.usage-detail-popover dt { color: #9aa7a5; }
.usage-detail-popover dd { margin: 0; overflow-wrap: anywhere; color: #596d68; line-height: 1.5; }
.usage-status-provider_error .usage-row-icon, .usage-status-system_error .usage-row-icon { color: #b45543; background: #fff0ed; }
.usage-status-provider_error .usage-status-label, .usage-status-system_error .usage-status-label { color: #ab5746; background: #fff0ed; }
.usage-status-returned .usage-status-label { color: #9b703c; background: #fff3df; }
.usage-status-quota_error .usage-row-icon { color: #b46a3f; background: #fff3e8; }
.usage-status-quota_error .usage-status-label { color: #b46a3f; background: #fff3e8; }
.page-quota, .page-redeem { width: min(1120px, calc(100% - 40px)); max-width: 1120px; padding-right: 0; padding-left: 0; }
.page-quota > .quota-redeem-panel, .page-quota > .quota-code-create-panel, .page-quota > .quota-batch-result, .page-quota > .quota-codes-panel, .page-quota > .quota-config-panel, .page-quota > .quota-users-panel, .page-quota > .quota-transactions-panel { width: min(1120px, calc(100vw - 40px)); max-width: none; margin-right: auto; margin-left: auto; align-self: stretch; box-sizing: border-box; }
.quota-redeem-panel, .quota-code-create-panel, .quota-batch-result, .quota-codes-panel, .quota-config-panel, .quota-users-panel, .quota-transactions-panel { width: min(1120px, calc(100vw - 40px)); max-width: none; margin-right: auto; margin-left: auto; box-sizing: border-box; }
@media (max-width: 760px) { .page-quota > .quota-redeem-panel, .page-quota > .quota-code-create-panel, .page-quota > .quota-batch-result, .page-quota > .quota-codes-panel, .page-quota > .quota-config-panel, .page-quota > .quota-users-panel, .page-quota > .quota-transactions-panel { width: 100%; } }
@media (max-width: 760px) { .quota-redeem-panel, .quota-code-create-panel, .quota-batch-result, .quota-codes-panel, .quota-config-panel, .quota-users-panel, .quota-transactions-panel { width: 100%; } }
.quota-summary-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.page-invite { max-width: 1120px; }
.invite-status { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 16px; border: 1px solid #dbe9e2; border-radius: 8px; background: #f5fbf7; }
.invite-status.is-disabled { border-color: #eadfd7; background: #fffaf6; }
.invite-status > svg { width: 22px; color: #4c9a73; }
.invite-status.is-disabled > svg { color: #b88358; }
.invite-status span { display: grid; gap: 4px; }
.invite-status b { color: #416d5a; font-size: 12px; }
.invite-status.is-disabled b { color: #8d674d; }
.invite-status small { color: #8b9d96; font-size: 10px; }
.invite-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 18px; margin-top: 18px; }
.invite-link-panel, .invite-reward-panel, .invite-records-panel { padding: 24px; }
.invite-link-panel .panel-heading, .invite-reward-panel .panel-heading { margin-bottom: 24px; }
.invite-link-field { margin: 0; }
.invite-link-control { display: flex; gap: 8px; }
.invite-link-control input { min-width: 0; flex: 1 1 auto; }
.invite-link-control .button { flex: 0 0 auto; white-space: nowrap; }
.invite-code-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #899b95; font-size: 10px; }
.invite-code-note svg { width: 15px; color: #66a484; }
.invite-code-note strong { color: #4e8f70; font-family: "DM Sans", sans-serif; letter-spacing: .5px; }
.invite-reward-panel .panel-heading > svg { width: 23px; color: #e27a5e; }
.invite-reward-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.invite-reward-list > div { display: grid; gap: 6px; padding: 15px 13px; border: 1px solid #e1ebe6; border-radius: 7px; background: #f8fcfa; }
.invite-reward-list span { color: #879993; font-size: 10px; }
.invite-reward-list strong { color: #4b9270; font: 700 22px "DM Sans", sans-serif; }
.invite-reward-list small { color: #a0afaa; font-size: 9px; }
.invite-records-panel { margin-top: 18px; }
.invite-records-panel .panel-heading { margin-bottom: 22px; }
.invite-count { color: #4d916f; font: 700 13px "DM Sans", sans-serif; }
.invite-records-table { overflow-x: auto; }
.invite-records-head, .invite-record-row { min-width: 620px; display: grid; grid-template-columns: minmax(220px, 1.6fr) 120px 120px 170px; gap: 16px; align-items: center; }
.invite-records-head { padding: 0 12px 10px; color: #a0acab; font-size: 10px; }
.invite-record-row { padding: 13px 12px; border-top: 1px solid var(--line); }
.invite-record-row > span:first-child b, .invite-record-row > span:first-child small { display: block; }
.invite-record-row > span:first-child b { color: #536462; font-size: 11px; }
.invite-record-row > span:first-child small, .invite-record-row > span:last-child { margin-top: 4px; color: #9aa8a5; font-size: 9px; }
.invite-record-row > strong { color: #4b9270; font: 600 12px "DM Sans", sans-serif; }
.invite-empty { padding: 36px 20px; }
.quota-balance-card { min-height: 132px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; border-top: 3px solid var(--accent); }
.quota-card-kicker { color: #9aa8a5; font: 9px "DM Sans", sans-serif; letter-spacing: 1.5px; }
.quota-balance-card strong { margin: 10px 0 5px; color: #253b3e; font: 700 31px "DM Sans", sans-serif; }
.quota-balance-card > span:last-child { color: #9aa7a5; font-size: 10px; }
.quota-summary-note { padding: 20px; display: flex; align-items: center; gap: 13px; color: #5d7770; background: #f4faf7; }
.quota-summary-note > svg { width: 27px; height: 27px; flex: 0 0 27px; color: #5b9a7c; }
.quota-summary-note b { color: #45675d; font-size: 13px; }
.quota-summary-note p { margin: 6px 0 0; color: #8aa19a; font-size: 11px; line-height: 1.6; }
.quota-redeem-panel, .quota-config-panel, .quota-code-create-panel, .quota-codes-panel, .quota-users-panel, .quota-transactions-panel { padding: 24px; margin-top: 18px; overflow: hidden; }
.quota-config-panel { display: grid; gap: 0 22px; }
.quota-config-panel > .panel-heading, .quota-config-panel > .quota-checks, .quota-config-panel > .model-actions, .quota-config-panel > .quota-payment-url-field, .quota-config-panel > .quota-invite-config { grid-column: 1 / -1; }
.quota-config-panel > .field-row { min-width: 0; grid-column: 1 / -1; }
.quota-config-panel > .field-row + .field-row { margin-top: 2px; }
.quota-config-panel > .field { margin-bottom: 18px; }
.quota-payment-url-field { margin-top: 2px; }
.quota-config-panel .panel-heading { margin-bottom: 23px; }
.quota-config-panel .quota-invite-config { margin-top: 4px; }
.quota-code-create-panel .panel-heading { margin-bottom: 26px; }
.quota-code-create-panel .field-row { gap: 22px; }
.quota-code-create-panel .field { margin-bottom: 22px; }
.quota-code-create-panel textarea { min-height: 88px; }
.quota-code-create-panel .model-actions { margin-top: 2px; padding-top: 18px; border-top: 1px solid var(--line); }
.quota-code-batch-tip { min-height: 42px; margin-top: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #e1ebe6; border-radius: 7px; color: #719086; background: #f7fbf9; font-size: 10px; line-height: 1.55; }
.quota-code-batch-tip svg { width: 16px; flex: 0 0 16px; color: #62a080; }
.quota-batch-result { padding: 24px; margin-top: 18px; }
.quota-batch-result .panel-heading { align-items: center; margin-bottom: 18px; }
.quota-batch-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 6px; color: #4b8d6c; background: #e8f5ed; font: 600 11px "DM Sans", sans-serif; }
.quota-batch-result-text { width: 100%; min-height: 148px; padding: 13px 14px; resize: vertical; border: 1px solid #d9e5e0; border-radius: 7px; color: #49615b; background: #fbfdfc; font: 12px/1.75 "DM Sans", sans-serif; white-space: pre; }
.quota-batch-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.quota-batch-result-actions .site-save-note { margin: 0; }
.quota-invite-config { margin: 22px 0; padding: 18px 20px 4px; border: 1px solid #dcebe4; border-radius: 8px; background: #f7fbf9; }
.quota-config-subheading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.quota-config-subheading h3 { margin: 0; color: #4b625d; font-size: 13px; }
.quota-config-subheading p { margin: 5px 0 0; color: #91a19d; font-size: 10px; }
.toggle-field { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #5a756d; font-size: 11px; white-space: nowrap; }
.toggle-field input { accent-color: var(--accent); }
.quota-type { color: #b46a3f; background: #fff1e7; }
.quota-redeem-form { display: grid; gap: 14px; }
.quota-redeem-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: -2px 0 22px; padding: 14px; border: 1px solid #e2ebe6; border-radius: 8px; background: #f8fcfa; }
.quota-redeem-steps > div { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.quota-redeem-steps > div > span { width: 25px; height: 25px; display: grid; place-items: center; grid-row: span 2; border-radius: 7px; color: #4c9872; background: #e5f4eb; font: 700 10px "DM Sans", sans-serif; }
.quota-redeem-steps strong, .quota-redeem-steps small { min-width: 0; display: block; }
.quota-redeem-steps strong { color: #4d625d; font-size: 11px; }
.quota-redeem-steps small { margin-top: 3px; color: #91a19d; font-size: 9px; line-height: 1.45; }
.quota-redeem-steps > svg { width: 15px; color: #9ab5aa; }
.quota-redeem-purchase { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid #f0e2d8; border-radius: 8px; background: #fffaf6; }
.quota-redeem-purchase > span { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.quota-redeem-purchase > span > svg { width: 18px; grid-row: span 2; color: #c98261; }
.quota-redeem-purchase b, .quota-redeem-purchase small { display: block; }
.quota-redeem-purchase b { color: #6d554a; font-size: 11px; }
.quota-redeem-purchase small { margin-top: 3px; color: #a48f85; font-size: 9px; }
.quota-redeem-purchase .button { flex: 0 0 auto; }
.quota-redeem-field { max-width: 560px; }
.quota-redeem-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quota-redeem-actions .site-save-note { margin: 0; }
.quota-codes-table { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.quota-code-toolbar { margin: -6px 0 18px; padding: 12px; display: grid; grid-template-columns: minmax(240px, 1fr) 118px auto auto auto auto minmax(190px, auto); align-items: center; gap: 8px; border: 1px solid #dcebe4; border-radius: 8px; background: #f7fbf9; }
.quota-code-search { min-width: 0; height: 34px; display: flex; align-items: center; gap: 7px; overflow: hidden; padding: 0 10px; border: 1px solid #dce6e2; border-radius: 6px; color: #92a29e; background: #fff; }
.quota-code-search:focus-within { border-color: #b8d8c8; box-shadow: 0 0 0 3px rgba(95, 162, 128, .1); }
.quota-code-search svg { width: 14px; flex: 0 0 14px; }
.quota-code-search > input[type="search"] { width: auto; height: 100%; min-width: 0; flex: 1 1 auto; padding: 0; border: 0 !important; border-radius: 0; outline: 0; box-shadow: none !important; color: #526361; background: transparent; appearance: none; font-size: 10px; }
.quota-code-search input::placeholder { color: #a8b4b1; }
.quota-code-status-filter, .quota-code-bulk-status { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #dce6e2; border-radius: 6px; color: #667875; background: #fff; font-size: 10px; }
.quota-code-selected-count { color: #79918a; font-size: 10px; white-space: nowrap; }
.quota-code-bulk-control { min-width: 0; display: flex; align-items: center; gap: 6px; }
.quota-code-bulk-control .quota-code-bulk-status { flex: 1 1 auto; }
.quota-code-bulk-control .button { flex: 0 0 auto; }
.quota-code-toolbar .button { min-height: 32px; padding: 0 10px; font-size: 10px; }
.quota-code-toolbar .button svg { width: 14px; height: 14px; }
.quota-code-toolbar .button:disabled { cursor: not-allowed; opacity: .48; }
.quota-code-select-all { display: inline-flex; align-items: center; gap: 6px; margin-right: 3px; color: #71817e; font-size: 10px; white-space: nowrap; }
.quota-code-select-all input, .quota-code-select-column input { accent-color: var(--accent); }
.quota-codes-head, .quota-code-row { min-width: 1000px; display: grid; grid-template-columns: 28px minmax(180px, 1.35fr) minmax(150px, 1.25fr) 80px 105px minmax(130px, 1fr) 80px 110px; gap: 14px; align-items: center; white-space: nowrap; }
.quota-codes-head { padding: 0 12px 10px; color: #a0acab; font-size: 10px; }
.quota-code-row { padding: 14px 12px; border-top: 1px solid var(--line); }
.quota-code-select-column { display: flex; align-items: center; justify-content: center; }
.quota-code-filter-empty { padding: 30px 20px; color: #9aa7a5; font-size: 11px; text-align: center; }
.quota-code-identity { min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.quota-code-identity b, .quota-code-identity small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quota-code-identity b { flex: 1 1 auto; color: #435254; font-size: 12px; }
.quota-code-identity small { flex: 0 1 auto; color: #93a1a0; font-size: 9px; }
.quota-code-copy-row { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: nowrap; }
.quota-code-summary-cell { min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.quota-code-summary-cell strong, .quota-code-summary-cell small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quota-code-summary-cell strong { flex: 0 1 auto; color: #526361; font-size: 11px; }
.quota-code-summary-cell small { flex: 0 1 auto; color: #98a6a4; font-size: 9px; }
.quota-code-title-cell strong { color: #3f5252; }
.quota-code-note-text { color: #a4afad !important; }
.quota-code-value strong { color: #4d916f; font: 600 12px "DM Sans", sans-serif; }
.quota-code-validity strong { font: 10px "DM Sans", sans-serif; }
.quota-code-status { align-items: center; }
.quota-code-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 9px; }
.quota-code-badge.is-active { color: #4b8d6c; background: #e8f5ed; }
.quota-code-badge.is-pending { color: #a08b4b; background: #fff6df; }
.quota-code-badge.is-warning { color: #b46a3f; background: #fff3e8; }
.quota-code-badge.is-muted { color: #889694; background: #edf3f2; }
.quota-code-copy { width: 26px; height: 26px; padding: 0; }
.quota-code-field { display: grid; gap: 6px; }
.quota-code-field span { color: #8a9896; font-size: 10px; }
.quota-code-field input, .quota-code-field select, .quota-code-field textarea { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid #d9e2df; border-radius: 6px; background: #fff; color: #37484a; font-size: 11px; }
.quota-code-field textarea { min-height: 58px; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.quota-code-field small { color: #98a6a4; font-size: 9px; line-height: 1.5; }
.quota-code-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.quota-code-actions strong { color: #4d916f; font: 700 14px "DM Sans", sans-serif; }
.quota-code-actions span { color: #9aa7a5; font-size: 9px; }
.quota-code-actions .button { white-space: nowrap; }
.quota-code-edit-trigger { min-height: 30px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.quota-code-edit-trigger svg { width: 13px; height: 13px; }
.quota-code-edit-backdrop { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 24px; background: rgba(23, 33, 38, .46); }
.quota-code-edit-backdrop[hidden] { display: none; }
.quota-code-edit-dialog { width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 26px; border: 1px solid #d9e5e0; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(24, 42, 42, .22); }
.quota-code-edit-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.quota-code-edit-header .eyebrow { margin-bottom: 8px; }
.quota-code-edit-header h2 { margin: 0; color: #273338; font-size: 20px; }
.quota-code-edit-header p:last-child { margin: 7px 0 0; color: #899796; font-size: 11px; }
.quota-code-edit-code { display: grid; gap: 5px; margin: 18px 0 20px; padding: 12px 14px; border: 1px solid #e0ebe6; border-radius: 7px; background: #f5faf7; }
.quota-code-edit-code span { color: #8a9a96; font-size: 10px; }
.quota-code-edit-code strong { color: #416b5b; font: 600 14px "DM Sans", sans-serif; letter-spacing: .4px; }
.quota-code-edit-code small { color: #9aa9a5; font-size: 9px; }
.quota-code-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.quota-code-edit-grid .field { margin-bottom: 18px; }
.quota-code-edit-note { grid-column: 1 / -1; }
.quota-code-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.quota-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 12px 14px; border: 1px solid #e2e9e6; border-radius: 6px; background: #f8fbfa; }
.quota-checks label { display: inline-flex; align-items: center; gap: 7px; color: #6b7d78; font-size: 11px; }
.quota-checks input { accent-color: var(--accent); }
.quota-users-table { overflow-x: auto; }
.quota-users-head, .quota-user-row { min-width: 930px; display: grid; grid-template-columns: 1.25fr .72fr .72fr 1fr 2fr; gap: 13px; align-items: center; }
.quota-users-head { padding: 0 12px 10px; color: #a0acab; font-size: 10px; }
.quota-user-row { padding: 12px; border-top: 1px solid var(--line); }
.quota-user-row > span:first-child b, .quota-user-row > span:first-child small { display: block; }
.quota-user-row > span:first-child b { color: #435254; font-size: 11px; }
.quota-user-row > span:first-child small { margin-top: 4px; color: #9aa7a5; font-size: 9px; }
.quota-user-row > strong { color: #4c8b70; font: 600 13px "DM Sans", sans-serif; }
.quota-user-row > span { color: #7d8d8a; font-size: 10px; }
.quota-adjust-controls { display: grid; grid-template-columns: 100px minmax(130px, 1fr) auto; gap: 6px; }
.quota-adjust-controls input { height: 31px !important; padding: 0 8px !important; font-size: 10px; }
.quota-adjust-controls .button { min-height: 31px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.quota-transactions-list { display: grid; }
.quota-transaction-row { min-height: 59px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); }
.quota-transaction-row:last-child { border-bottom: 0; }
.quota-transaction-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #4b9473; border-radius: 7px; background: #e8f5ed; }
.quota-transaction-icon svg { width: 15px; }
.quota-transaction-row b, .quota-transaction-row small { display: block; }
.quota-transaction-row b { color: #526361; font-size: 11px; }
.quota-transaction-row small { margin-top: 4px; color: #9aa7a5; font-size: 9px; }
.quota-transaction-row > strong { font: 600 12px "DM Sans", sans-serif; }
.quota-transaction-filter { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; }
.quota-transaction-filter label { color: #748681; font-size: 10px; }
.quota-transaction-filter select { width: 220px; height: 35px; box-sizing: border-box; font-size: 11px; }
.quota-transaction-filter .button { min-height: 35px; padding: 0 11px; }
.quota-transaction-filter .icon-button { width: 35px; height: 35px; }
.quota-negative { color: #b45b4a; }
.quota-positive { color: #4d916f; }
.quota-after { color: #9aa7a5; font: 10px "DM Sans", sans-serif; }
.usage-empty { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }
.settings-panel { padding: 25px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 23px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0 0 5px; font-size: 16px; }
.panel-heading p { margin: 0; color: #9ca6a7; font-size: 11px; }
.model-state { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #4a8c6c; border-radius: 100px; background: #ecf8f0; font-size: 10px; }
.provider-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.provider-options label { position: relative; cursor: pointer; }
.provider-options label > span { display: block; min-height: 73px; padding: 12px; border: 1px solid #e2e8e7; border-radius: 6px; transition: .2s ease; }
.provider-options label:has(input:checked) > span { border-color: #e8a192; background: #fffaf8; box-shadow: inset 0 0 0 1px #f9d9d2; }
.provider-options b { display: block; color: #536064; font-size: 11px; }
.provider-options small { display: block; margin-top: 7px; color: #a2acad; font-size: 9px; line-height: 1.45; }
.input-with-icon { position: relative; }
.input-with-icon input { padding-right: 40px; }
.inside-button { position: absolute; top: 4px; right: 5px; width: 31px; height: 31px; padding: 0; border: 0; color: #a2adae; background: transparent; display: grid; place-items: center; }
.inside-button svg { width: 16px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 26px; padding-top: 19px; border-top: 1px solid var(--line); }
.form-footer > span { display: flex; gap: 6px; align-items: center; color: #9ba6a7; font-size: 10px; }
.form-footer svg { width: 14px; color: #75a28c; }
.settings-aside { display: grid; gap: 13px; }
.aside-card { padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.accent-card { border-top: 3px solid var(--accent); }
.aside-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 17px; color: var(--accent); border-radius: 7px; background: #fcece8; }
.aside-icon svg { width: 17px; }
.aside-card h3 { margin: 0 0 9px; color: #4a565a; font-size: 13px; }
.aside-card p { margin: 0; color: #939e9f; font-size: 11px; line-height: 1.75; }
.aside-card-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.aside-card-heading svg { width: 16px; color: #6e9d89; }
.aside-card-heading h3 { margin: 0; }
.connection-detail { display: flex; gap: 9px; align-items: center; padding: 11px; margin-bottom: 14px; border-radius: 6px; background: #f6f9f8; }
.state-dot { width: 7px; height: 7px; border-radius: 50%; background: #58ae7e; box-shadow: 0 0 0 3px #dff2e6; }
.connection-detail b { display: block; color: #526063; font: 11px "DM Sans", sans-serif; }
.connection-detail small { display: block; margin-top: 4px; color: #9aa6a6; font-size: 9px; }
.test-result { min-height: 16px; margin: 11px 0 0 !important; color: #4e9871 !important; font-size: 10px !important; }
@media (max-width: 1080px) { .workspace-heading { display: block; } .hot-topics { width: 100%; margin-top: 20px; } .workspace-grid { grid-template-columns: 1fr; } .page-workspace .config-column { margin-top: 0; } .editor-column { max-width: none; } .page { padding-right: 32px; padding-left: 32px; } .topbar { padding: 0 32px; } }
@media (max-width: 760px) { .sidebar { width: 66px; flex-basis: 66px; padding: 20px 9px; } .brand { padding: 0 7px 28px; } .brand > span:last-child, .workspace-switcher > span:not(.workspace-avatar), .workspace-switcher > svg, .nav-label, .nav-item span, .nav-item em, .usage-card, .help-link, .user-row > span:not(.user-avatar), .user-row .icon-button { display: none; } .workspace-switcher { justify-content: center; padding: 10px 5px; } .nav-item { justify-content: center; padding: 0; } .user-row { justify-content: center; } .main-nav { padding-top: 26px; } .topbar { height: 58px; padding: 0 18px; } .connection { display: none; } .page { padding: 28px 18px 45px; } h1 { font-size: 26px; } .heading-with-action { align-items: flex-start; flex-direction: column; } .heading-with-action .button { align-self: flex-start; } .field-row, .provider-options { grid-template-columns: 1fr; } .check-list { grid-template-columns: 1fr; gap: 13px; } .preview-strip { align-items: flex-start; flex-wrap: wrap; } .preview-strip .button { width: 100%; margin-left: 47px; } .stats-row { grid-template-columns: 1fr 1fr; } .list-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 12px; } .search-box { width: 100%; } .article-row { gap: 10px; } .article-cover { width: 76px; height: 80px; flex-basis: 76px; padding: 8px; } .article-cover strong { font-size: 22px; } .article-main > p { display: none; } .article-title-row { display: block; } .article-title-row h2 { margin-bottom: 7px; white-space: normal; } .article-meta { gap: 7px 10px; } .meta-style { display: none !important; } .article-actions { display: flex; align-self: flex-start; } .article-actions .export-link { width: 31px; padding: 0; justify-content: center; font-size: 0; } .article-actions .export-link span { display: none; } .settings-layout { grid-template-columns: 1fr; } .model-actions { align-items: stretch; flex-wrap: wrap; } .model-actions .button { flex: 1 1 auto; } .generation-history-meta { gap: 6px 9px; } .generation-history-row { align-items: flex-start; padding-right: 10px; padding-left: 10px; } .generation-history-title { flex-wrap: wrap; } .generation-history-title strong, .generation-history-topic, .generation-history-error { max-width: 100%; } .generation-history-meta { flex-wrap: wrap; white-space: normal; } .generation-history-actions { margin-left: auto; } .article-ai-grid, .article-ai-image-row { grid-template-columns: 1fr; } .article-ai-run, .article-ai-image-run { width: 100%; } .article-ai-model { display: none; } .public-import-panel { padding: 18px 15px; } .public-import-dropzone { min-height: 118px; padding: 16px 11px; text-align: center; } .public-import-dropzone small { line-height: 1.45; } .public-import-result { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-import-result span:nth-child(2) { border-right: 0; } .public-import-result span:nth-child(-n+2) { border-bottom: 1px solid #e4eee9; } }
@media (max-width: 760px) { .generation-actions { width: 100%; margin-left: 47px; flex-wrap: wrap; } .generation-actions .button { width: auto; margin-left: 0; flex: 1 1 150px; } }
@media (max-width: 760px) { .flash, .local-notification { top: 70px; right: 16px; width: min(390px, calc(100vw - 32px)); } }
@media (max-width: 700px) { .site-brand-layout { grid-template-columns: 1fr; gap: 20px; } .site-logo-editor { max-width: 280px; } .site-settings-preview { align-items: flex-start; flex-wrap: wrap; } .site-preview-workspace { margin-left: 0; } .site-save-note { width: 100%; } }
@media (max-width: 760px) { .page-quota, .page-redeem { width: 100%; padding-right: 14px; padding-left: 14px; } .quota-summary-row { grid-template-columns: 1fr; } .quota-redeem-panel, .quota-config-panel, .quota-code-create-panel, .quota-codes-panel, .quota-users-panel, .quota-transactions-panel, .quota-batch-result { padding: 18px 15px; } .quota-config-panel { display: block; } .quota-config-panel > .field-row { margin-top: 0; } .quota-transaction-row { grid-template-columns: 30px minmax(0, 1fr) auto; } .quota-after { grid-column: 2 / -1; } .quota-transaction-filter { width: 100%; align-items: center; } .quota-transaction-filter select { flex: 1 1 auto; min-width: 0; } .top-actions .quota-badge { display: none; } .quota-codes-panel .panel-heading { align-items: flex-start; flex-direction: column; } .quota-code-toolbar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; justify-content: stretch; } .quota-code-search, .quota-code-status-filter, .quota-code-select-all, .quota-code-selected-count, .quota-code-bulk-control { grid-column: 1 / -1; } .quota-code-toolbar .button, .quota-code-bulk-status { width: 100%; } .quota-code-bulk-control .button { width: auto; } .quota-codes-head, .quota-code-row { min-width: 1180px; } .quota-batch-result-actions { align-items: stretch; flex-direction: column; } .quota-batch-result-actions .button { width: 100%; } }
@media (max-width: 760px) { .quota-redeem-steps { grid-template-columns: 1fr; gap: 10px; } .quota-redeem-steps > svg { display: none; } .quota-redeem-purchase { align-items: stretch; flex-direction: column; } .quota-redeem-purchase .button { width: 100%; } }
@media (max-width: 760px) { .invite-grid { grid-template-columns: 1fr; } .invite-link-panel, .invite-reward-panel, .invite-records-panel { padding: 18px; } .invite-link-control { align-items: stretch; flex-direction: column; } .invite-link-control .button { width: 100%; } .invite-reward-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .quota-code-edit-backdrop { padding: 12px; align-items: end; } .quota-code-edit-dialog { max-height: calc(100svh - 24px); padding: 20px 16px; } .quota-code-edit-grid { grid-template-columns: 1fr; } .quota-code-edit-note { grid-column: auto; } .quota-code-edit-actions { align-items: stretch; } .quota-code-edit-actions .button { flex: 1 1 0; } }
@media (max-width: 760px) {
  .article-edit-page .article-editor-shell { overflow: visible; }
  .article-edit-page .article-editor-tools { top: 58px; }
  .article-ai-popover { top: 113px; width: calc(100% - 24px); margin-right: 12px; }
  .article-ai-text-result-grid { grid-template-columns: 1fr; }
}

/* Mutual support workspace */
.page-mutual-workspace { max-width: 1400px; }
.mutual-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.mutual-heading .button { flex: 0 0 auto; }
.mutual-flash { margin: -10px 0 22px; max-width: none; }
.mutual-overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 24px; align-items: center; margin-bottom: 24px; padding: 22px 24px; border: 1px solid #d9e8e1; border-radius: 9px; background: #f1f9f5; }
.mutual-overview-copy { display: flex; align-items: flex-start; gap: 15px; min-width: 0; }
.mutual-overview-mark, .mutual-panel-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #4b9473; }
.mutual-overview-mark svg, .mutual-panel-icon svg { width: 19px; height: 19px; }
.mutual-overview-copy h2 { margin: 0 0 7px; color: #31584d; font-size: 18px; line-height: 1.4; }
.mutual-overview-copy p:not(.eyebrow) { max-width: 700px; margin: 0; color: #78958a; font-size: 11px; line-height: 1.7; }
.mutual-overview-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.mutual-overview-rules span { display: grid; gap: 6px; min-width: 0; padding-left: 13px; border-left: 1px solid #cfe2d8; }
.mutual-overview-rules svg { width: 16px; color: #5c9d80; }
.mutual-overview-rules b { color: #466c60; font-size: 11px; font-weight: 700; }
.mutual-overview-rules small { color: #8aa399; font-size: 9px; line-height: 1.4; }
.mutual-stats-row { margin-bottom: 26px; }
.mutual-layout { display: grid; grid-template-columns: minmax(0, 1fr) 325px; gap: 25px; align-items: start; }
.mutual-feed, .mutual-publish-panel, .mutual-integrity-panel { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.mutual-feed { padding: 21px 21px 23px; }
.mutual-feed-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.mutual-feed-heading h2 { margin: 0; color: #344247; font-size: 17px; }
.mutual-tabs { display: flex; align-self: stretch; gap: 18px; }
.mutual-tabs .tab { display: inline-flex; align-items: center; font-size: 11px; }
.mutual-feed-note { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0 4px; color: #78968a; font-size: 10px; line-height: 1.55; }
.mutual-feed-note svg { width: 14px; flex: 0 0 14px; color: #70a28b; }
.mutual-article-list { display: grid; gap: 13px; margin-top: 15px; }
.mutual-article-card { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid #e2e9e7; border-radius: 8px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.mutual-article-card:hover { border-color: #c9ded5; box-shadow: 0 9px 22px rgba(47, 76, 68, .07); }
.mutual-article-card.is-mine { border-color: #e6ddd9; }
.mutual-article-cover { position: relative; min-height: 238px; overflow: hidden; display: grid; place-items: center; color: #d8eee4; background: #4f8776; }
.mutual-article-cover.is-empty { color: #f5d8ce; background: #bd8063; }
.mutual-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.mutual-article-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 42%, rgba(21, 53, 44, .55)); pointer-events: none; }
.mutual-article-cover > svg { width: 34px; height: 34px; }
.mutual-article-cover > span { position: absolute; z-index: 1; right: 11px; bottom: 11px; color: #fff; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1.1px; }
.mutual-article-body { min-width: 0; padding: 17px 18px 15px; }
.mutual-article-meta { display: flex; align-items: center; gap: 7px; color: #a0acab; font-size: 9px; }
.mutual-article-meta span { overflow: hidden; max-width: 240px; color: #5a8677; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mutual-article-meta i { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: #c3cfcb; }
.mutual-article-meta small { font-size: 9px; }
.mutual-article-body h3 { overflow: hidden; margin: 10px 0 7px; color: #324047; font-size: 16px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.mutual-article-body h3 a:hover { color: var(--accent-dark); }
.mutual-article-summary { display: -webkit-box; overflow: hidden; min-height: 35px; margin: 0; color: #8a9897; font-size: 10px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mutual-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: #8b9997; font-size: 10px; }
.mutual-progress-head b { color: #4d7969; font: 600 10px "DM Sans", sans-serif; }
.mutual-progress-track { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 9px; background: #e8eeeb; }
.mutual-progress-track span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: #65a688; transition: width .3s ease; }
.mutual-article-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; color: #a0acab; font-size: 9px; }
.mutual-article-foot span, .mutual-article-foot a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mutual-article-foot svg { width: 13px; height: 13px; color: #84aa99; }
.mutual-article-foot a { color: #638a7c; }
.mutual-article-foot a:hover { color: var(--accent-dark); }
.mutual-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f0; }
.mutual-action { min-width: 0; min-height: 48px; padding: 6px 5px; display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: 17px 14px; align-items: center; column-gap: 5px; border: 1px solid #dfe8e4; border-radius: 6px; color: #5f8176; background: #fbfdfc; text-align: left; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.mutual-action:hover { border-color: #9ec7b4; color: #3d7460; background: #f1faf5; }
.mutual-action > svg { grid-row: 1 / span 2; width: 15px; height: 15px; align-self: center; }
.mutual-action b { min-width: 0; overflow: hidden; color: #9aa9a4; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mutual-action-done { border-color: #cde6d8; color: #4b9473; background: #f0faf4; cursor: default; }
.mutual-action-done b { color: #5f9b7b; }
.mutual-action-pending { border-color: #edd6cd; color: #bd6b56; background: #fff9f6; }
.mutual-action-pending:hover { border-color: #e4ad9d; color: #a84f3b; background: #fff2ed; }
.mutual-action-own { color: #a99087; border-color: #eee4e0; background: #fdfafa; cursor: default; }
.mutual-action.is-loading { cursor: wait; }
.mutual-sidebar { display: grid; gap: 15px; }
.mutual-publish-panel, .mutual-integrity-panel { padding: 19px; }
.mutual-panel-heading { display: flex; align-items: center; gap: 11px; }
.mutual-panel-heading h2 { margin: 0; color: #3b4b4f; font-size: 15px; }
.mutual-panel-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 7px; }
.mutual-panel-icon.is-soft { color: #bd745c; background: #fff0eb; }
.mutual-panel-icon svg { width: 17px; height: 17px; }
.mutual-panel-copy { margin: 15px 0 19px; color: #899a98; font-size: 10px; line-height: 1.7; }
.mutual-publish-panel .field { margin-bottom: 15px; }
.mutual-publish-panel .field > span { font-size: 11px; }
.mutual-publish-panel input { height: 39px; font-size: 11px; }
.mutual-submit { width: 100%; margin-top: 2px; }
.mutual-integrity-list { display: grid; gap: 11px; margin-top: 18px; }
.mutual-integrity-list span { display: flex; align-items: flex-start; gap: 7px; color: #768a85; font-size: 10px; line-height: 1.55; }
.mutual-integrity-list svg { width: 14px; flex: 0 0 14px; color: #63a081; }
.mutual-empty { margin-top: 15px; }
.mutual-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin-top: 17px; padding: 11px 13px; color: #a08b83; border: 1px solid #eee2dc; border-radius: 7px; background: #fffaf7; font-size: 10px; line-height: 1.6; }
.mutual-disclaimer svg { width: 14px; flex: 0 0 14px; color: #d08c75; }
@media (max-width: 1120px) {
  .mutual-overview { grid-template-columns: 1fr; }
  .mutual-overview-rules { max-width: 560px; }
  .mutual-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
  .mutual-article-card { grid-template-columns: 135px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mutual-layout { grid-template-columns: 1fr; }
  .mutual-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 700px) {
  .mutual-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .mutual-heading .button { width: 100%; }
  .mutual-overview { padding: 18px; }
  .mutual-overview-copy h2 { font-size: 16px; }
  .mutual-overview-rules { grid-template-columns: 1fr; gap: 11px; }
  .mutual-overview-rules span { grid-template-columns: 17px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; padding-left: 0; border-left: 0; }
  .mutual-overview-rules svg { grid-row: 1 / span 2; }
  .mutual-overview-rules b, .mutual-overview-rules small { align-self: center; }
  .mutual-feed { padding: 17px 13px 19px; }
  .mutual-feed-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .mutual-tabs { min-height: 32px; }
  .mutual-article-card { grid-template-columns: 1fr; }
  .mutual-article-cover { min-height: 150px; height: 150px; }
  .mutual-article-body { padding: 16px 14px 14px; }
  .mutual-article-body h3 { white-space: normal; }
  .mutual-actions { gap: 5px; }
  .mutual-action { font-size: 10px; }
  .mutual-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .mutual-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-action { min-height: 42px; }
}

.mutual-stats-page { min-height: calc(100vh - 82px); padding: 31px clamp(18px, 3.4vw, 52px) 52px; color: #27383b; }
.mutual-stats-heading, .mutual-stats-filter, .mutual-stats-period, .mutual-stats-overview, .mutual-stats-grid, .mutual-personal-stats-grid, .mutual-personal-trend-panel, .mutual-stats-login { width: min(1320px, 100%); margin-right: auto; margin-left: auto; }
.mutual-stats-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.mutual-stats-heading h1 { margin: 6px 0 7px; color: #223437; font-size: 29px; line-height: 1.2; letter-spacing: 0; }
.mutual-stats-heading p:last-child { max-width: 670px; margin: 0; color: #758a86; font-size: 11px; line-height: 1.7; }
.mutual-stats-back { flex: 0 0 auto; min-height: 34px; font-size: 10px; }
.mutual-stats-filter { padding: 14px 16px; display: flex; align-items: flex-end; gap: 12px; border: 1px solid #d9e4df; border-radius: 8px; background: rgba(251, 253, 252, .92); box-shadow: 0 8px 24px rgba(52, 82, 73, .035); }
.mutual-stats-filter-field { min-width: 0; flex: 0 1 190px; }
.mutual-stats-filter-field > span { display: block; margin: 0 0 6px; color: #6d827c; font-size: 10px; font-weight: 700; }
.mutual-stats-filter-field input, .mutual-stats-filter-field select { width: 100%; height: 35px; box-sizing: border-box; padding: 0 10px; border: 1px solid #d4e2dc; border-radius: 6px; outline: 0; color: #516d64; background: #fff; font: 10px "DM Sans", "Noto Sans SC", sans-serif; }
.mutual-stats-filter-field input:focus, .mutual-stats-filter-field select:focus { border-color: #8fbda8; box-shadow: 0 0 0 3px rgba(75, 148, 115, .1); }
.mutual-stats-filter-submit { min-height: 35px; padding: 0 17px; flex: 0 0 auto; font-size: 10px; }
.mutual-stats-period { margin-top: 13px; display: flex; align-items: center; gap: 7px; color: #8a9b97; font-size: 10px; }
.mutual-stats-period svg { width: 14px; height: 14px; color: #72a38d; }
.mutual-stats-period strong { color: #557d6d; }
.mutual-stats-error { width: min(1320px, 100%); box-sizing: border-box; margin: 0 auto 16px; padding: 11px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #efd6cd; border-radius: 7px; color: #a85f4b; background: #fff8f5; font-size: 10px; }
.mutual-stats-error svg { width: 14px; height: 14px; flex: 0 0 14px; }
.mutual-stats-overview { margin-top: 19px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mutual-personal-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mutual-stat-card { min-width: 0; padding: 15px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #d9e4df; border-radius: 8px; background: rgba(251, 253, 252, .92); box-shadow: 0 8px 24px rgba(52, 82, 73, .035); }
.mutual-stat-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 7px; }
.mutual-stat-icon svg { width: 15px; height: 15px; }
.mutual-stat-icon.is-coral { color: #c76b54; background: #fff0eb; }
.mutual-stat-icon.is-green { color: #4d9874; background: #eaf7ef; }
.mutual-stat-icon.is-blue { color: #628ba0; background: #edf4f8; }
.mutual-stat-icon.is-teal { color: #568e87; background: #e8f5f2; }
.mutual-stat-icon.is-warm { color: #b97859; background: #fff3e8; }
.mutual-stat-icon.is-slate { color: #718197; background: #eef1f5; }
.mutual-stat-card div { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.mutual-stat-card small { width: 100%; color: #82938f; font-size: 9px; }
.mutual-stat-card strong { color: #385d55; font: 700 22px/1.15 "DM Sans", sans-serif; }
.mutual-stat-value, .mutual-stat-number { border: 0; outline: 0; cursor: pointer; background: transparent; }
.mutual-stat-value { padding: 0; color: #385d55; font: 700 22px/1.15 "DM Sans", sans-serif; }
.mutual-stat-number { min-width: 24px; padding: 0; color: #4b806d; font: 700 12px/1.2 "DM Sans", sans-serif; }
.mutual-stat-value:hover, .mutual-stat-value:focus-visible, .mutual-stat-number:hover, .mutual-stat-number:focus-visible { color: #2f7458; text-decoration: underline; }
.mutual-stat-value:focus-visible, .mutual-stat-number:focus-visible { outline: 2px solid #8fbda8; outline-offset: 3px; border-radius: 3px; }
.mutual-stat-card em { color: #91a29e; font-size: 9px; font-style: normal; }
.mutual-stats-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 16px; align-items: start; }
.mutual-stats-panel { min-width: 0; padding: 19px; border: 1px solid #d9e4df; border-radius: 8px; background: rgba(251, 253, 252, .92); box-shadow: 0 8px 24px rgba(52, 82, 73, .045); }
.mutual-stats-trend-panel { min-height: 300px; }
.mutual-stats-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #edf2f0; }
.mutual-stats-panel-heading .eyebrow { margin: 0 0 4px; color: #ec684e; font-size: 9px; }
.mutual-stats-panel-heading h2 { margin: 0; color: #354b4d; font-size: 16px; line-height: 1.3; }
.mutual-stats-rate, .mutual-stats-panel-note { flex: 0 0 auto; padding-top: 4px; color: #719586; font-size: 9px; }
.mutual-stats-rate { color: #4d9874; font-weight: 700; }
.mutual-stats-table-wrap { overflow-x: auto; }
.mutual-stats-table { width: 100%; border-collapse: collapse; color: #71847f; font-size: 10px; }
.mutual-stats-table th { padding: 13px 10px 9px; color: #94a39f; font-size: 9px; font-weight: 500; text-align: left; white-space: nowrap; }
.mutual-stats-table td { padding: 10px; border-top: 1px solid #eef3f1; white-space: nowrap; }
.mutual-stats-table td:first-child { color: #55766b; font-family: "DM Sans", sans-serif; }
.mutual-stats-table td:not(:first-child) { color: #4b806d; text-align: right; }
.mutual-stats-table td b { font: 700 12px "DM Sans", sans-serif; }
.mutual-stats-action-list, .mutual-stats-ranking, .mutual-stats-article-list { display: grid; gap: 3px; margin-top: 10px; }
.mutual-stats-action-row, .mutual-stats-ranking-row, .mutual-stats-article-row { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 5px; border-bottom: 1px solid #eef3f1; }
.mutual-stats-action-row:last-child, .mutual-stats-ranking-row:last-child, .mutual-stats-article-row:last-child { border-bottom: 0; }
.mutual-stats-action-icon, .mutual-stats-avatar { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 7px; color: #5c947c; background: #eaf5ef; }
.mutual-stats-action-icon svg { width: 15px; height: 15px; }
.mutual-stats-action-main, .mutual-stats-ranking-main, .mutual-stats-article-main { min-width: 0; flex: 1 1 auto; }
.mutual-stats-action-main strong, .mutual-stats-ranking-main strong, .mutual-stats-article-main strong { display: block; overflow: hidden; color: #48625d; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mutual-stats-action-main small, .mutual-stats-ranking-main small, .mutual-stats-article-main small { display: block; overflow: hidden; margin-top: 3px; color: #99a7a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mutual-stats-action-row > b, .mutual-stats-ranking-row > b, .mutual-stats-article-row > b { min-width: 32px; color: #4b806d; font: 700 15px "DM Sans", sans-serif; text-align: right; }
.mutual-stats-ranking-row > b small, .mutual-stats-article-row > b small { margin-left: 2px; color: #9aa9a4; font-size: 8px; font-weight: 500; }
.mutual-stats-rank { width: 17px; flex: 0 0 17px; color: #a1afaa; font: 700 10px "DM Sans", sans-serif; text-align: center; }
.mutual-stats-avatar { color: #fff; background: #6b92a1; font: 700 11px "DM Sans", sans-serif; text-transform: uppercase; }
.mutual-stats-ranking-row:nth-child(3n + 1) .mutual-stats-avatar { background: #5a9a7b; }
.mutual-stats-ranking-row:nth-child(3n) .mutual-stats-avatar { background: #c17c61; }
.mutual-stats-empty { min-height: 208px; display: grid; place-items: center; align-content: center; gap: 7px; color: #9aaca5; text-align: center; }
.mutual-stats-empty svg { width: 28px; height: 28px; margin-bottom: 4px; color: #8cbaa3; }
.mutual-stats-empty strong { color: #638078; font-size: 11px; }
.mutual-stats-empty span { color: #a0aeaa; font-size: 9px; }
.mutual-stats-empty.is-compact { min-height: 164px; }
.mutual-stats-login { min-height: 270px; box-sizing: border-box; margin-top: 19px; padding: 34px 20px; display: grid; place-items: center; align-content: center; gap: 9px; border: 1px solid #d9e4df; border-radius: 8px; background: rgba(251, 253, 252, .92); box-shadow: 0 8px 24px rgba(52, 82, 73, .045); color: #9aaca5; text-align: center; }
.mutual-stats-login svg { width: 34px; height: 34px; margin-bottom: 4px; color: #78ab91; }
.mutual-stats-login strong { color: #55766b; font-size: 13px; }
.mutual-stats-login span { color: #92a39e; font-size: 10px; }
.mutual-stats-login .button { margin-top: 7px; }
.mutual-personal-stats-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mutual-personal-table-wrap { overflow-x: auto; }
.mutual-personal-table { width: 100%; border-collapse: collapse; color: #70837d; font-size: 10px; }
.mutual-personal-table th { padding: 13px 10px 9px; color: #94a39f; font-size: 9px; font-weight: 500; text-align: right; white-space: nowrap; }
.mutual-personal-table th:first-child { text-align: left; }
.mutual-personal-table td { padding: 11px 10px; border-top: 1px solid #eef3f1; color: #4b806d; font: 700 12px "DM Sans", sans-serif; text-align: right; white-space: nowrap; }
.mutual-personal-table td:first-child { width: 100%; color: #55766b; font: 500 10px "Noto Sans SC", sans-serif; text-align: left; }
.mutual-personal-table td:first-child svg { width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; color: #70a28a; }
.mutual-personal-foot { margin-top: 13px; padding-top: 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #edf2f0; color: #91a29e; font-size: 9px; }
.mutual-personal-foot span:nth-of-type(2) { margin-left: auto; }
.mutual-personal-foot b { color: #56836f; font: 700 10px "DM Sans", sans-serif; }
.mutual-personal-foot b .mutual-stat-number { font-size: 10px; }
.mutual-personal-trend-panel { margin-top: 16px; }
@media (max-width: 1100px) {
  .mutual-stats-overview, .mutual-personal-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mutual-stats-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr); }
  .mutual-stats-filter-field { flex-basis: 160px; }
}
@media (max-width: 820px) {
  .mutual-stats-grid, .mutual-personal-stats-grid { grid-template-columns: 1fr; }
  .mutual-stats-trend-panel { min-height: 0; }
  .mutual-stats-filter { flex-wrap: wrap; }
  .mutual-stats-filter-field { flex: 1 1 180px; }
}
@media (max-width: 620px) {
  .mutual-stats-page { padding: 22px 14px 36px; }
  .mutual-stats-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .mutual-stats-back { width: 100%; }
  .mutual-stats-overview, .mutual-personal-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-stats-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-stats-filter-field { flex: none; }
  .mutual-stats-filter-submit { width: 100%; }
}
@media (max-width: 430px) {
  .mutual-stats-overview, .mutual-personal-overview { grid-template-columns: 1fr; }
  .mutual-stats-filter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .image-requirements-heading { flex-direction: column; } .image-requirements-heading-actions { width: 100%; justify-content: space-between; } }
@keyframes notification-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .reference-form { align-items: flex-start; flex-direction: column; } .reference-input { width: 100%; } }
@media (max-width: 560px) { .generation-confirm-backdrop { padding: 12px; } .generation-confirm-dialog { padding: 19px; } .generation-confirm-list { grid-template-columns: 1fr; } .generation-confirm-actions { flex-direction: column-reverse; } .generation-confirm-actions .button { width: 100%; } }
@media (max-width: 560px) { .topic-generator-backdrop { padding: 10px; align-items: end; } .topic-generator-dialog { max-height: calc(100svh - 20px); padding: 19px 16px; } .topic-generator-header { gap: 9px; } .topic-generator-header h2 { font-size: 18px; } .topic-generator-actions { flex-direction: column-reverse; } .topic-generator-actions .button { width: 100%; } }
@media (max-width: 560px) { .wechat-open-content { align-items: stretch; flex-direction: column; gap: 17px; } .wechat-open-qr { align-self: center; } .wechat-open-actions { flex-direction: column; } .wechat-open-actions .button { width: 100%; } }
@media (max-width: 760px) { .generation-history-row { grid-template-columns: 28px minmax(0, 1fr); align-items: start; } .generation-history-icon { grid-column: 1; grid-row: 1; } .generation-history-main { grid-column: 2; grid-row: 1; } .generation-history-actions { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 2px; } .generation-history-title { flex-wrap: wrap; } .generation-history-title strong, .generation-history-topic, .generation-history-error { max-width: 100%; } .generation-history-meta { flex-wrap: wrap; overflow: visible; white-space: normal; } .generation-history-error { flex-basis: 100%; } }
@media (max-width: 760px) { .generation-history-row { flex-wrap: wrap; } .generation-history-icon { order: 1; } .generation-history-main { order: 2; flex-basis: 0; } .generation-history-actions { order: 3; flex: 0 0 100%; margin-left: 39px; } }

.public-page { min-height: 100vh; overflow-x: hidden; color: #172126; background: #f7f9f8; }
.public-header { width: min(1240px, calc(100% - 72px)); height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.public-brand { display: inline-flex; align-items: center; gap: 11px; }
.public-brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--accent); }
.public-brand-mark svg { width: 18px; }
.public-brand-image { overflow: hidden; }
.public-brand-image img { width: 100%; height: 100%; object-fit: cover; }
.public-brand strong { display: block; color: #213033; font-size: 18px; letter-spacing: 1.5px; line-height: 1; }
.public-brand small { display: block; margin-top: 5px; color: #91a09f; font-size: 10px; }
.public-nav { display: flex; align-items: center; gap: 30px; color: #82908f; font-size: 11px; }
.public-nav .language-toggle { height: 30px; }
.public-nav a:hover { color: var(--accent-dark); }
.public-login-link { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d9e3df; border-radius: 5px; color: #4d6963 !important; background: #fff; }
.public-login-link svg, .public-secondary-button svg, .public-primary-button svg { width: 14px; height: 14px; }
.public-section-meta { min-width: 132px; padding: 10px 0 2px 21px; border-left: 1px solid #dbe6e2; color: #9aa8a5; font-size: 10px; line-height: 1.8; }
.public-section-meta strong { color: #54776d; font: 700 17px "DM Sans", sans-serif; }
.public-section-meta small { display: block; color: #a7b2b0; font-size: 10px; }
.public-intro-dot { width: 6px; height: 6px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #67ad85; box-shadow: 0 0 0 4px #e4f3e9; }
.public-hero { display: none; }
.public-hero-copy { padding: 60px 0 70px; }
.public-kicker { margin: 0 0 16px; color: var(--accent); font: 700 10px "DM Sans", sans-serif; letter-spacing: 2px; }
.public-hero h1 { max-width: 650px; margin: 0; color: #1b2a2e; font-size: 64px; letter-spacing: 0; line-height: 1.18; font-weight: 800; }
.public-hero h1 em { color: var(--accent); font-style: normal; }
.public-hero-text { max-width: 430px; margin: 25px 0 0; color: #7f8c8d; font-size: 14px; line-height: 2; }
.public-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 31px; }
.public-primary-button, .public-secondary-button { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 5px; font-size: 11px; }
.public-primary-button { color: #fff; background: var(--accent); box-shadow: 0 7px 16px rgba(236,104,78,.18); }
.public-primary-button:hover { background: var(--accent-dark); }
.public-secondary-button { border: 1px solid #d6e1dd; color: #58716b; background: #fff; }
.public-secondary-button:hover { border-color: #b6cbc4; color: #3e5b54; }
.public-hero-note { display: flex; align-items: center; gap: 8px; margin-top: 32px; color: #9aa7a5; font-size: 10px; }
.public-hero-note span { width: 6px; height: 6px; border-radius: 50%; background: #67ad85; box-shadow: 0 0 0 4px #e4f3e9; }
.public-hero-note b { color: #55756b; font-weight: 600; }
.public-hero-visual { position: relative; min-height: 425px; }
.public-visual-frame { position: absolute; top: 35px; right: 18px; width: 78%; height: 85%; border: 1px solid #d9e5e1; background: #eff5f2; transform: rotate(5deg); }
.public-visual-frame::before { position: absolute; inset: 18px; content: ""; border: 1px solid #d9e5e1; background: #f7faf8; }
.public-visual-card { position: absolute; display: flex; flex-direction: column; border-radius: 4px; box-shadow: 0 18px 45px rgba(36, 63, 58, .12); }
.public-visual-card-main { top: 75px; right: 82px; width: 260px; height: 285px; padding: 27px; justify-content: space-between; color: #edf8f3; background: #355d58; transform: rotate(-5deg); }
.public-visual-card-main::before { position: absolute; inset: 13px; content: ""; border: 1px solid rgba(231,249,241,.22); }
.public-visual-card-main > * { position: relative; z-index: 1; }
.public-visual-label { font: 700 9px "DM Sans", sans-serif; letter-spacing: 1.5px; opacity: .7; }
.public-visual-card-main strong { font: 700 42px/1.08 "DM Sans", sans-serif; letter-spacing: 0; }
.public-visual-card-main svg { align-self: flex-end; width: 22px; color: #efad95; }
.public-visual-card-side { right: 12px; bottom: 48px; width: 108px; height: 124px; padding: 17px; justify-content: space-between; color: #b45b47; background: #fff0ea; transform: rotate(8deg); }
.public-visual-card-side svg { width: 19px; }
.public-visual-card-side span { font: 700 9px/1.45 "DM Sans", sans-serif; letter-spacing: 1px; }
.public-visual-line { position: absolute; height: 1px; background: #c9dcd5; transform-origin: left; }
.public-visual-line-one { top: 65px; left: 8px; width: 96px; transform: rotate(-34deg); }
.public-visual-line-two { right: 2px; bottom: 30px; width: 78px; transform: rotate(-18deg); }
.public-announcements { width: min(1240px, calc(100% - 72px)); margin: 0 auto; padding: 52px 0 58px; border-top: 1px solid #e2e9e6; border-bottom: 1px solid #e2e9e6; }
.public-announcements-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.public-announcements-heading .public-kicker { margin-bottom: 10px; }
.public-announcements-heading h2 { margin: 0; color: #233235; font-size: 25px; line-height: 1.3; }
.public-announcements-heading p:not(.public-kicker) { margin: 8px 0 0; color: #91a09e; font-size: 11px; }
.public-announcements-link { display: inline-flex; align-items: center; gap: 6px; color: #5c8177; font-size: 10px; }
.public-announcements-link svg { width: 14px; }
.public-announcement-nav { color: #5c8177; font-size: 11px; }
.public-announcement-nav:hover { color: var(--accent-dark); }
.public-announcement-list { display: grid; gap: 11px; }
.public-announcement { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; padding: 18px 20px; border: 1px solid #e0e8e5; border-radius: 6px; background: #fff; }
.public-announcement.is-pinned { border-color: #ead8cc; background: #fffaf7; }
.public-announcement-marker { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; color: #bd684f; background: #fff0e9; }
.public-announcement-marker svg { width: 17px; }
.public-announcement-body { min-width: 0; }
.public-announcement-meta { display: flex; align-items: center; gap: 9px; color: #a0adaa; font-size: 9px; }
.public-announcement-meta span { color: #b66750; font-weight: 700; letter-spacing: .7px; }
.public-announcement-body h3 { margin: 7px 0 7px; color: #35474a; font-size: 15px; line-height: 1.5; }
.public-announcement-summary { margin: 0; color: #758783; font-size: 11px; line-height: 1.8; }
.public-announcement-content { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2ebe6; color: #6e7f7b; font-size: 11px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-articles-section { width: min(1240px, calc(100% - 72px)); margin: 0 auto; padding: 0 0 90px; }
.public-announcements + .public-articles-section { padding-top: 70px; }
.public-section-heading { min-height: 176px; padding: 42px 0 33px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; border-top: 1px solid #e2e9e6; border-bottom: 1px solid #e2e9e6; }
.public-section-heading .public-kicker { margin-bottom: 12px; }
.public-section-heading h2, .public-about h2 { margin: 0; color: #233235; font-size: 30px; letter-spacing: 0; line-height: 1.3; }
.public-section-heading p:not(.public-kicker) { margin: 9px 0 0; color: #91a09e; font-size: 11px; }
.public-section-count { color: #9baba7; font: 700 10px "DM Sans", sans-serif; letter-spacing: 1px; }
.public-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.public-article-card { min-width: 0; overflow: hidden; border: 1px solid #e0e8e5; border-radius: 6px; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.public-article-card:hover { border-color: #c5d9d1; box-shadow: 0 14px 30px rgba(42, 67, 62, .09); transform: translateY(-4px); }
.public-article-cover { position: relative; height: 188px; overflow: hidden; display: grid; place-items: center; color: #d3e9e1; background: #416f67; }
.public-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.public-article-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 48%, rgba(20, 43, 39, .38)); pointer-events: none; }
.public-article-cover > svg { width: 34px; height: 34px; }
.public-article-cover > span { position: absolute; z-index: 1; right: 14px; bottom: 12px; color: #fff; font: 700 12px "DM Sans", sans-serif; letter-spacing: 1px; }
.public-article-cover-empty { background: #bd8063; }
.public-article-body { padding: 18px 18px 17px; }
.public-article-meta { display: flex; align-items: center; gap: 9px; color: #9aa7a4; font-size: 9px; }
.public-article-meta span { color: #bf684f; font: 700 9px "DM Sans", sans-serif; letter-spacing: 1px; }
.public-article-body h3 { overflow: hidden; margin: 13px 0 9px; color: #334347; font-size: 16px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.public-article-body p { display: -webkit-box; overflow: hidden; min-height: 42px; margin: 0; color: #8a9897; font-size: 11px; line-height: 1.9; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.public-read-more { display: flex; align-items: center; gap: 5px; margin-top: 18px; color: #5c8177; font-size: 10px; }
.public-read-more svg { width: 13px; }
.public-empty { grid-column: 1 / -1; padding: 70px 20px; text-align: center; border: 1px dashed #d5e2de; background: #fbfdfc; }
.public-empty > svg { width: 33px; color: #9bb4ac; }
.public-empty h3 { margin: 14px 0 6px; color: #536b65; font-size: 15px; }
.public-empty p { margin: 0 0 18px; color: #98a6a3; font-size: 11px; }
.public-about { width: min(1240px, calc(100% - 72px)); min-height: 250px; margin: 0 auto 70px; padding: 47px 52px; display: grid; grid-template-columns: 58px minmax(220px, 1fr) minmax(240px, .9fr) auto; align-items: center; gap: 25px; border-radius: 6px; color: #e8f5f0; background: #2c4b49; }
.public-about .public-kicker { color: #e8a18f; }
.public-about h2 { color: #f2faf7; font-size: 26px; }
.public-about > p { margin: 0; color: #b8d0c8; font-size: 12px; line-height: 1.9; }
.public-about .public-secondary-button { border-color: #68847d; color: #eff8f4; background: transparent; white-space: nowrap; }
.public-about .public-secondary-button:hover { border-color: #a4c4ba; }
.public-about-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #698b83; border-radius: 50%; color: #eaa18c; }
.public-about-mark svg { width: 19px; }
.public-footer { width: min(1240px, calc(100% - 72px)); min-height: 68px; margin: 0 auto; display: flex; align-items: center; gap: 18px; border-top: 1px solid #dfe8e4; color: #9aa7a4; font-size: 10px; }
.public-footer span:first-child { color: #5c7770; font-weight: 700; }
.public-footer a { margin-left: auto; color: #5c8177; }
.public-footer a:hover { color: var(--accent-dark); }
@media (max-width: 900px) { .public-about { grid-template-columns: 48px minmax(180px, 1fr) minmax(220px, 1fr); } .public-about .public-secondary-button { grid-column: 2 / -1; justify-self: start; } }
@media (max-width: 700px) { .public-header, .public-articles-section, .public-about, .public-footer { width: min(100% - 36px, 560px); } .public-nav { gap: 12px; } .public-section-heading { min-height: 0; padding: 31px 0 25px; align-items: flex-start; flex-direction: column; gap: 20px; } .public-section-heading h2 { font-size: 32px; } .public-section-meta { padding: 0; border-left: 0; } .public-section-count { display: block; margin-top: 17px; } .public-article-grid { grid-template-columns: 1fr; } .public-article-cover { height: 210px; } .public-about { display: block; padding: 31px 25px; } .public-about-mark { margin-bottom: 25px; } .public-about > p { margin: 24px 0; } .public-footer { flex-wrap: wrap; padding: 17px 0; } .public-footer a { margin-left: auto; } }

/* Mobile layout overrides for the authenticated workspace. */
@media (max-width: 760px) {
  html, body { min-width: 0; overflow-x: hidden; }
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { position: sticky; top: 0; z-index: 80; width: 100%; height: auto; max-height: none; padding: 10px 12px 0; overflow: visible; border-bottom: 1px solid #344144; }
  .brand { min-width: 0; padding: 0; gap: 9px; }
  .brand > span:last-child { display: block; min-width: 0; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  .brand strong { overflow: hidden; font-size: 17px; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
  .brand small { overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-switcher { display: none; }
  .main-nav { display: flex; gap: 4px; overflow-x: auto; padding: 10px 12px 8px; margin: 0 -12px; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-label, .nav-label-spaced { display: none; }
  .nav-item { min-height: 36px; flex: 0 0 auto; padding: 0 10px; gap: 6px; white-space: nowrap; }
  .nav-item span { display: inline; font-size: 11px; }
  .nav-item em { display: none; }
  .nav-item svg { width: 15px; height: 15px; }
  .sidebar-bottom { position: absolute; top: 11px; right: 12px; margin: 0; }
  .help-link { display: none; }
  .user-row { justify-content: center; gap: 0; padding: 0; border-top: 0; }
  .user-row > span:not(.user-avatar) { display: none; }
  .user-row .icon-button { display: inline-grid; margin-left: 5px; }
  .user-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .main-area { width: 100%; min-width: 0; }
  .topbar { position: relative; height: 52px; padding: 0 14px; gap: 7px; }
  .breadcrumbs { min-width: 0; flex: 1 1 auto; max-width: none; }
  .breadcrumbs span, .breadcrumbs svg { display: none; }
  .breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { gap: 5px; }
  .top-actions .local-badge { display: none; }
  .area-switcher { gap: 1px; padding: 2px; }
  .area-switch-button { min-height: 30px; padding: 0 6px; gap: 4px; font-size: 10px; }
  .area-switch-button svg { width: 13px; height: 13px; }
  .page { width: 100%; max-width: none; padding: 24px 14px 40px; }
  .page-heading { margin-bottom: 22px; }
  h1 { font-size: 25px; }
  .heading-with-action { align-items: flex-start; flex-direction: column; gap: 15px; }
  .heading-with-action .button { align-self: flex-start; }
  .panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 17px; margin-bottom: 17px; }
  .panel, .settings-panel, .model-card, .site-brand-card { padding: 18px 15px; }
  .field-row, .provider-options, .article-ai-grid, .article-ai-image-row { grid-template-columns: 1fr; }
  .form-footer, .article-editor-footer { align-items: flex-start; flex-direction: column; gap: 13px; }
  .form-footer .button, .article-editor-footer .model-actions { width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { min-height: 86px; padding: 14px 12px; }
  .list-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 12px; }
  .search-box { width: 100%; }
  .usage-filter-bar, .generation-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; scrollbar-width: none; }
  .usage-filter-bar::-webkit-scrollbar, .generation-filter-bar::-webkit-scrollbar { display: none; }
  .usage-filter, .generation-filter { flex: 0 0 auto; }
  .usage-row { flex-wrap: wrap; padding: 13px 12px; gap: 9px; }
  .usage-row-main { flex-basis: calc(100% - 39px); }
  .usage-row-actions { width: calc(100% - 39px); flex: 0 0 calc(100% - 39px); flex-wrap: wrap; margin-left: 39px; }
  .generation-global-status { margin: 12px 14px 0; flex-wrap: wrap; gap: 8px; }
  .generation-global-status .button { width: 100%; margin-left: 38px; }
  .generation-actions { margin-left: 0; }
  .article-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 9px; padding: 14px 0; }
  .article-cover { width: 76px; height: 80px; flex-basis: auto; grid-column: 1; grid-row: 1; padding: 8px; }
  .article-cover strong { font-size: 22px; }
  .article-main { grid-column: 2 / -1; grid-row: 1; }
  .article-main > p { display: none; }
  .article-title-row { display: block; }
  .article-title-row h2 { margin-bottom: 7px; white-space: normal; overflow-wrap: anywhere; }
  .article-meta { gap: 7px 10px; }
  .meta-style { display: none !important; }
  .article-actions { grid-column: 2 / -1; grid-row: 2; justify-self: start; display: flex; align-self: start; }
  .article-actions .export-link { width: 31px; padding: 0; justify-content: center; font-size: 0; }
  .article-actions .export-link span { display: none; }
  .article-editor-tools { position: sticky; top: 52px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 8px 10px; scrollbar-width: none; }
  .article-editor-tools::-webkit-scrollbar { display: none; }
  .article-editor-tools .editor-tool-group { flex-wrap: nowrap; flex: 0 0 auto; }
  .editor-save-state { margin-left: auto; white-space: nowrap; }
  .article-edit-page .article-editor-tools { top: 52px; }
  .article-preview-card { min-height: 0; margin: 18px 0; padding: 23px 16px 35px; }
  .article-preview-title { margin-top: 23px; font-size: 25px; }
  .article-preview-body { min-height: 300px; font-size: 14px; line-height: 1.9; }
  .article-preview-cover { min-height: 140px; margin-bottom: 22px; }
  .article-editor-footer .model-actions { align-items: stretch; flex-wrap: wrap; }
  .article-editor-footer .model-actions .button { flex: 1 1 150px; }
  .settings-layout { grid-template-columns: 1fr; }
  .model-actions { align-items: stretch; flex-wrap: wrap; }
  .model-actions .button { flex: 1 1 auto; }
  .model-carousel { --carousel-bleed: 16px; }
  .model-carousel-bar { align-items: flex-start; flex-wrap: wrap; }
  .model-carousel-bar { padding: 0; }
  .model-carousel-counter small { max-width: 165px; }
  .model-carousel-stage { padding: 0; }
  .model-carousel-card.is-side { top: 12px; width: 94%; filter: blur(1.5px) saturate(.72); }
  .model-carousel-card.is-prev { left: -94%; }
  .model-carousel-card.is-next { right: -94%; }
  .quota-summary-row { grid-template-columns: 1fr; }
  .quota-config-panel, .quota-users-panel, .quota-transactions-panel { padding: 18px 15px; }
  .quota-adjust-controls { grid-template-columns: 88px minmax(0, 1fr); }
  .quota-adjust-controls .button { grid-column: 1 / -1; }
  .quota-transaction-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
  .quota-after { grid-column: 2 / -1; }
  .users-panel { overflow: visible; padding: 14px 15px; }
  .users-table-head { display: none; }
  .user-management-row { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(92px, auto); gap: 12px; padding: 15px 0; }
  .user-account, .user-permissions { grid-column: 1 / -1; }
  .user-management-row select { width: 100%; min-width: 0; }
  .user-date { grid-column: 1 / -1; align-self: center; }
  .user-date::before { display: inline-block; width: 72px; color: #849194; font-size: 10px; }
  .user-management-row > button { grid-column: 1 / -1; width: 100%; }
  .site-brand-layout { grid-template-columns: 1fr; gap: 20px; }
  .site-logo-editor { max-width: 280px; }
  .site-settings-preview { align-items: flex-start; flex-wrap: wrap; }
  .site-preview-workspace { margin-left: 0; }
  .site-save-note { width: 100%; }
}

@media (max-width: 760px) {
  .auth-page { min-height: 100svh; overflow-y: auto; padding: 24px 14px 32px; place-items: start center; }
  .auth-ambient { inset: 0; }
  .auth-page::before { inset: 9px; border-radius: 14px; }
  .auth-shell { width: 100%; display: block; }
  .auth-identity { padding: 0 4px 20px; }
  .auth-brand { margin: 0; }
  .auth-brand strong { font-size: 21px; }
  .auth-signal { margin: 20px 0 0; }
  .auth-signal b { display: none; }
  .auth-trace { display: none; }
  .auth-panel { padding: 25px 17px 20px; border-radius: 10px; }
  .auth-panel-header { margin-bottom: 23px; }
  .auth-heading { margin-bottom: 21px; }
  .auth-heading h1 { font-size: 27px; }
  .auth-panel-footer { flex-wrap: wrap; margin-top: 20px; }
  .auth-footnote { margin: 0; }
}

@media (max-width: 700px) {
  .public-header, .public-articles-section, .public-about, .public-footer { width: min(100% - 28px, 560px); }
  .public-header { height: auto; min-height: 68px; padding: 12px 0; gap: 10px; }
  .public-nav { gap: 9px; font-size: 10px; }
  .public-login-link { min-height: 32px; padding: 0 9px; }
  .public-section-heading h2 { font-size: 29px; }
}

@media (max-width: 420px) {
  .page { padding-right: 12px; padding-left: 12px; }
  .topbar { padding-right: 12px; padding-left: 12px; }
  .area-switch-button { padding-right: 5px; padding-left: 5px; }
  .area-switch-button svg { display: none; }
  .brand small { display: none; }
  .stats-row { grid-template-columns: 1fr; }
  .article-cover { width: 64px; }
  .article-row { grid-template-columns: 64px minmax(0, 1fr); }
  .article-actions { grid-column: 2; }
  .generation-confirm-backdrop { padding: 10px; }
  .auth-page { padding: 18px 12px 28px; }
  .auth-panel { padding: 22px 15px 18px; }
  .public-nav a:not(.public-login-link) { display: none; }
  .public-section-heading h2 { font-size: 27px; }
  .public-about { padding: 27px 20px; }
}

.guide-backdrop { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px; background: rgba(23, 33, 38, .46); }
.guide-backdrop[hidden] { display: none; }
.guide-dialog { width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #d9e5e0; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(24, 42, 42, .22); }
.guide-header { padding: 25px 28px 21px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.guide-header .eyebrow { margin-bottom: 8px; }
.guide-header h2 { margin: 0; color: #27383c; font-size: 22px; }
.guide-header p:last-child { margin: 7px 0 0; color: #899796; font-size: 11px; }
.guide-body { min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.guide-steps { padding: 18px 13px; border-right: 1px solid #e7eeeb; background: #f7faf8; }
.guide-step { width: 100%; min-height: 60px; padding: 10px 9px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 7px; color: #7e8f8b; background: transparent; text-align: left; cursor: pointer; }
.guide-step + .guide-step { margin-top: 5px; }
.guide-step:hover { background: #fff; }
.guide-step.active { border-color: #efd0c7; color: #b25442; background: #fff8f5; box-shadow: inset 2px 0 0 var(--accent); }
.guide-step-number { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 7px; color: #94a4a0; background: #e9f0ed; font: 700 10px "DM Sans", sans-serif; }
.guide-step.active .guide-step-number { color: #fff; background: var(--accent); }
.guide-step strong, .guide-step small { display: block; }
.guide-step strong { font-size: 11px; font-weight: 700; }
.guide-step small { margin-top: 4px; color: #a2afac; font-size: 9px; }
.guide-step.active small { color: #c78576; }
.guide-content { min-width: 0; overflow: auto; padding: 30px 34px 35px; }
.guide-panel { max-width: 555px; min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.guide-panel[hidden] { display: none; }
.guide-panel-icon { width: 40px; height: 40px; margin-bottom: 20px; display: grid; place-items: center; color: #4b9473; border-radius: 9px; background: #e5f3ec; }
.guide-panel-icon svg { width: 19px; height: 19px; }
.guide-panel .eyebrow { margin-bottom: 8px; }
.guide-panel h3 { margin: 0; color: #29393d; font-size: 20px; line-height: 1.4; }
.guide-panel > p:not(.eyebrow) { max-width: 510px; margin: 12px 0 21px; color: #758683; font-size: 12px; line-height: 1.85; }
.guide-checklist { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.guide-check { min-width: 0; padding: 11px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #e1ebe6; border-radius: 6px; background: #fbfdfc; }
.guide-check > svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: #4b9473; }
.guide-check strong, .guide-check small { display: block; }
.guide-check strong { color: #526862; font-size: 10px; }
.guide-check small { margin-top: 4px; color: #9aa8a5; font-size: 9px; line-height: 1.45; }
.guide-info-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-info-row > span { min-width: 0; padding: 14px; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; border: 1px solid #e1ebe6; border-radius: 6px; background: #fbfdfc; }
.guide-info-row svg { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--accent); }
.guide-info-row strong { color: #526862; font-size: 11px; }
.guide-info-row small { margin-top: 4px; color: #9aa8a5; font-size: 9px; line-height: 1.45; }
.guide-note { width: 100%; margin-top: 14px; padding: 11px 12px; display: flex; align-items: flex-start; gap: 8px; color: #668279; border: 1px solid #d9eae1; border-radius: 6px; background: #f3faf6; font-size: 10px; line-height: 1.6; }
.guide-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: #4b9473; }
.guide-action { margin-top: auto; }
.guide-action-group { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-footer { min-height: 65px; padding: 13px 28px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.guide-footer > div { display: flex; gap: 8px; }
.guide-progress { color: #a1aeab; font: 10px "DM Sans", sans-serif; }
.guide-progress b { color: var(--accent); font-weight: 700; }
.guide-footer .button { min-height: 34px; font-size: 10px; }

@media (max-width: 760px) {
  .guide-trigger { display: inline-grid; }
  .guide-backdrop { padding: 10px; place-items: end center; }
  .guide-dialog { width: 100%; max-height: calc(100svh - 20px); border-radius: 10px; }
  .guide-header { padding: 20px 18px 16px; }
  .guide-header h2 { font-size: 20px; }
  .guide-body { display: block; overflow: auto; }
  .guide-steps { display: flex; gap: 5px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid #e7eeeb; scrollbar-width: none; }
  .guide-steps::-webkit-scrollbar { display: none; }
  .guide-step { width: 132px; min-height: 48px; flex: 0 0 132px; padding: 7px; }
  .guide-step + .guide-step { margin-top: 0; }
  .guide-step small { white-space: nowrap; }
  .guide-content { padding: 22px 18px 26px; overflow: visible; }
  .guide-panel { min-height: 0; }
  .guide-panel h3 { font-size: 18px; }
  .guide-checklist, .guide-info-row { grid-template-columns: 1fr; }
  .guide-action, .guide-action-group { width: 100%; }
  .guide-action-group .button { flex: 1 1 145px; }
  .guide-footer { min-height: 61px; padding: 11px 18px; }
  .guide-footer > div { min-width: 0; }
  .guide-footer .button { padding: 0 10px; }
}

@media (max-width: 420px) {
  .guide-header p:last-child { max-width: 210px; line-height: 1.5; }
  .guide-step { width: 120px; flex-basis: 120px; }
  .guide-step-number { width: 25px; height: 25px; flex-basis: 25px; }
  .guide-step strong { font-size: 10px; }
  .guide-footer .button:first-child { font-size: 0; }
  .guide-footer .button:first-child svg { margin: 0; }
}

@media (max-width: 820px) {
  .auth-ambient { inset: 0; }
}

@media (max-width: 760px) {
  .page-announcements { width: 100%; max-width: none; padding-right: 14px; padding-left: 14px; }
  .announcement-editor, .announcement-list-panel { padding: 18px 15px; }
  .announcement-editor-options { align-items: flex-start; flex-direction: column; gap: 12px; }
  .announcement-editor-options .field-toggle-box { width: 100%; min-width: 0; }
  .announcement-editor-actions { width: 100%; }
  .announcement-editor-actions .button { flex: 1 1 0; }
  .announcement-admin-row { grid-template-columns: 1fr; gap: 15px; }
  .announcement-admin-actions { justify-content: flex-start; min-width: 0; }
  .announcement-admin-actions .button { flex: 0 1 auto; }
  .public-announcements, .public-announcements + .public-articles-section { width: min(100% - 28px, 560px); }
  .public-announcements { padding: 35px 0 40px; }
  .public-announcements + .public-articles-section { padding-top: 42px; }
  .public-announcements-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .public-announcement { grid-template-columns: 33px minmax(0, 1fr); gap: 11px; padding: 15px 13px; }
  .public-announcement-marker { width: 30px; height: 30px; }
  .public-announcement-marker svg { width: 15px; }
}

.page-audit-logs { width: min(1120px, calc(100% - 40px)); max-width: 1120px; padding-right: 0; padding-left: 0; }
.audit-stats { margin-bottom: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.audit-filter-panel { display: grid; grid-template-columns: minmax(220px, 1.35fr) 180px minmax(180px, 1fr) auto; align-items: end; gap: 13px; padding: 17px 18px; }
.audit-filter-field { min-width: 0; display: grid; gap: 6px; }
.audit-filter-field label, .audit-filter-field > span { color: #748681; font-size: 10px; }
.audit-filter-field input, .audit-filter-field select { width: 100%; height: 35px; box-sizing: border-box; font-size: 11px; }
.audit-filter-actions { display: flex; gap: 7px; }
.audit-filter-actions .button { min-height: 35px; padding: 0 11px; white-space: nowrap; }
.audit-list-panel { padding: 22px; margin-top: 18px; overflow: hidden; }
.audit-list-panel .panel-heading { margin-bottom: 17px; }
.audit-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.audit-row { min-height: 84px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-row-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 7px; color: #4b9473; background: #e8f5ed; }
.audit-row-icon svg { width: 15px; height: 15px; }
.audit-row-main { min-width: 0; flex: 1 1 auto; }
.audit-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.audit-row-title strong { color: #344247; font: 600 12px "DM Sans", sans-serif; }
.audit-result-label { padding: 3px 7px; border-radius: 100px; color: #4d8b6f; background: #eaf6ef; font-size: 9px; }
.audit-row-meta, .audit-row-detail { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: #91a09d; font-size: 9px; }
.audit-row-detail { color: #6c837c; }
.audit-request-id { color: #a1aeab; font-family: "DM Sans", sans-serif; }
.audit-user-agent { max-width: 100%; margin: 7px 0 0; overflow: hidden; color: #a1aeab; font: 9px/1.5 "DM Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.audit-result-denied .audit-row-icon, .audit-result-error .audit-row-icon { color: #b45543; background: #fff0ed; }
.audit-result-denied .audit-result-label, .audit-result-error .audit-result-label { color: #ab5746; background: #fff0ed; }
.audit-result-failure .audit-row-icon { color: #b46a3f; background: #fff3e8; }
.audit-result-failure .audit-result-label { color: #b46a3f; background: #fff3e8; }
.audit-empty { padding: 52px 20px; }
.audit-pagination { margin-top: 14px; }

@media (max-width: 1080px) {
  .audit-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-audit-logs { width: calc(100% - 28px); }
  .audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-filter-panel { grid-template-columns: 1fr; gap: 11px; }
  .audit-filter-actions .button { flex: 1 1 0; }
  .audit-list-panel { padding: 18px 15px; }
  .audit-row { padding: 12px; }
  .audit-row-meta, .audit-row-detail { gap: 5px 9px; }
}

@media (max-width: 420px) {
  .audit-stats { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .public-import-mode { grid-template-columns: 1fr; }
  .public-import-result span:nth-child(2n) { border-right: 0; }
  .public-import-result span:nth-child(-n+4) { border-bottom: 1px solid #e4eee9; }
}

/* Mutual plaza */
.mutual-main-area { min-height: 100vh; background: #edf2f0; }
.mutual-main-area .topbar { height: 82px; padding-right: clamp(24px, 4.3vw, 72px); padding-left: clamp(24px, 4.3vw, 72px); justify-content: space-between; gap: 24px; background: rgba(247, 250, 248, .92); }
.mutual-stats-link { min-height: 32px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; color: #638579; font-size: 10px; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.mutual-stats-link svg { width: 14px; height: 14px; }
.mutual-stats-link:hover, .mutual-stats-link.is-active { border-color: #c9ddd4; color: #3e8066; background: #eef8f2; }
.mutual-access-backdrop { position: fixed; z-index: 140; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(35, 53, 52, .42); }
.mutual-access-dialog { width: min(430px, 100%); box-sizing: border-box; padding: 22px; border: 1px solid #d3e3dc; border-radius: 9px; background: #fbfdfc; box-shadow: 0 22px 60px rgba(30, 60, 51, .2); }
.mutual-access-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #e8efec; }
.mutual-access-header h2 { margin: 5px 0 7px; color: #304448; font-size: 20px; }
.mutual-access-header p:last-child { margin: 0; color: #859793; font-size: 10px; line-height: 1.6; }
.mutual-access-article { margin-top: 16px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #dceae4; border-radius: 6px; color: #5c8877; background: #f1f9f5; }
.mutual-access-article > svg { width: 17px; height: 17px; flex: 0 0 17px; }
.mutual-access-article span { min-width: 0; }
.mutual-access-article strong, .mutual-access-article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mutual-access-article strong { color: #4a7567; font-size: 11px; }
.mutual-access-article small { margin-top: 3px; color: #8ca19a; font-size: 9px; }
.mutual-access-error { margin-top: 13px; padding: 10px 11px; display: flex; align-items: flex-start; gap: 7px; border: 1px solid #efd4ca; border-radius: 6px; color: #aa634f; background: #fff8f5; font-size: 10px; line-height: 1.5; }
.mutual-access-error svg, .mutual-access-note svg { width: 14px; flex: 0 0 14px; }
.mutual-access-form { margin-top: 17px; display: grid; gap: 13px; }
.mutual-access-form .field { margin: 0; }
.mutual-access-form .field > span { margin-bottom: 6px; color: #667f77; font-size: 10px; font-weight: 700; }
.mutual-access-form .field > span small { margin-left: 5px; color: #9aa9a4; font-size: 9px; font-weight: 400; }
.mutual-access-form input { width: 100%; height: 39px; box-sizing: border-box; padding: 0 11px; border: 1px solid #d2e1db; border-radius: 6px; outline: 0; color: #4a625d; background: #fff; font-size: 11px; }
.mutual-access-form input:focus { border-color: #8fbda8; box-shadow: 0 0 0 3px rgba(75, 148, 115, .1); }
.mutual-access-form input[readonly] { color: #678a7d; background: #f0f7f3; }
.mutual-access-submit { width: 100%; min-height: 39px; margin-top: 2px; }
.mutual-access-note { margin: 16px 0 0; padding-top: 13px; display: flex; align-items: flex-start; gap: 7px; border-top: 1px solid #edf2f0; color: #92a29d; font-size: 9px; line-height: 1.6; }
.mutual-access-note svg { color: #73a48f; }
@media (max-width: 520px) {
  .mutual-access-backdrop { padding: 14px; }
  .mutual-access-dialog { padding: 18px; }
}
.mutual-topbar-brand { min-width: 0; flex: 1 1 auto; }
.mutual-topbar-brand .eyebrow { margin: 0 0 3px; color: #ec684e; font-size: 9px; }
.mutual-topbar-brand h1 { overflow: hidden; margin: 0; color: #223437; font-size: 23px; line-height: 1.15; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.mutual-topbar-brand p:last-child { max-width: 690px; overflow: hidden; margin: 4px 0 0; color: #758a86; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.mutual-topbar-actions { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 0 0 auto; }
.mutual-topbar-actions .mutual-mini-stats { gap: 18px; }
.mutual-topbar-actions .mutual-mini-stats b { font-size: 17px; }
.mutual-topbar-publish-form { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.mutual-topbar-url { width: clamp(210px, 23vw, 350px); min-width: 0; height: auto; padding: 0; display: block; border: 0; background: transparent; }
.mutual-topbar-url input { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid #d4e2dc; border-radius: 6px; outline: 0; color: #4b625d; background: #fff; font-size: 10px; }
.mutual-topbar-url input:focus { border-color: #8fbda8; box-shadow: 0 0 0 3px rgba(75, 148, 115, .1); }
.mutual-topbar-url input::placeholder { color: #a4b2ae; }
.mutual-topbar-publish { min-height: 36px; padding: 0 13px; flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.mutual-only-switcher { margin: 0; }
.mutual-only-switch-button { color: #4f826f; border: 1px solid #cfe3d8; background: #eef7f2; box-shadow: none; }
.mutual-only-switch-button:hover { color: #376b58; border-color: #aacdbb; background: #e3f2ea; box-shadow: none; }
.mutual-topbar-user { min-width: 0; min-height: 36px; padding-left: 12px; display: flex; align-items: center; gap: 7px; border-left: 1px solid #dce7e2; }
.mutual-topbar-user-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #5a9a7b; font: 700 11px "DM Sans", sans-serif; }
.mutual-topbar-user-copy { min-width: 0; max-width: 145px; display: grid; gap: 2px; }
.mutual-topbar-user-copy small { color: #9aa9a4; font-size: 8px; line-height: 1; }
.mutual-topbar-user-copy strong { overflow: hidden; color: #466158; font-size: 10px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.mutual-topbar-logout { margin: 0; }
.mutual-topbar-logout .icon-button { width: 28px; height: 28px; color: #849b92; }
.mutual-topbar-logout .icon-button:hover { color: #b15e4b; background: #fff2ed; }
.mutual-topbar-login { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d7e5de; border-radius: 6px; color: #57836f; background: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.mutual-topbar-login:hover { border-color: #a9cdbb; color: #397357; background: #f2faf5; }
.mutual-topbar-login svg { width: 14px; height: 14px; }
.mutual-plaza { min-height: calc(100vh - 82px); padding: 26px clamp(18px, 3.4vw, 52px) 48px; color: #27383b; }
.mutual-plaza-header, .mutual-plaza-grid { width: min(1510px, 100%); margin-right: auto; margin-left: auto; }
.mutual-plaza-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.mutual-plaza-header h1 { margin: 6px 0 8px; color: #223437; font-size: 31px; line-height: 1.2; letter-spacing: 0; }
.mutual-plaza-header .subheading { max-width: 650px; margin: 0; color: #758a86; font-size: 12px; line-height: 1.7; }
.mutual-plaza-header-actions { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.mutual-mini-stats { display: flex; align-items: center; gap: 20px; }
.mutual-mini-stats span { display: grid; gap: 2px; min-width: 49px; }
.mutual-mini-stats b { color: #3e7162; font: 700 19px/1 "DM Sans", sans-serif; }
.mutual-mini-stats small { color: #91a29e; font-size: 9px; white-space: nowrap; }
.mutual-plaza-flash { width: min(390px, calc(100vw - 56px)); margin: 0; }
.mutual-plaza-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 285px; gap: 16px; align-items: start; }
.mutual-mobile-side-tools, .mutual-mobile-panel-backdrop { display: none; }
.mutual-plaza-panel { min-width: 0; border: 1px solid #d9e4df; border-radius: 8px; background: rgba(251, 253, 252, .9); box-shadow: 0 8px 24px rgba(52, 82, 73, .045); }
.mutual-plaza-left-column { min-width: 0; display: grid; align-self: start; gap: 16px; position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbdad4 transparent; }
.mutual-plaza-right-column { min-width: 0; display: grid; gap: 16px; align-self: start; position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbdad4 transparent; }
.mutual-people-panel { padding: 18px 12px 13px; }
@media (min-width: 951px) {
  .mutual-plaza-left-column { max-height: none; overflow: visible; }
  .mutual-people-panel { max-height: calc(66.6667vh - 69.3333px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbdad4 transparent; }
}
.mutual-return-panel, .mutual-returned-panel { padding: 18px 14px 14px; }
.mutual-plaza-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 5px; }
.mutual-plaza-panel-heading h2 { margin: 4px 0 0; color: #32474a; font-size: 16px; line-height: 1.3; }
.mutual-count-badge { min-width: 25px; height: 25px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 6px; color: #4b806d; background: #e8f3ee; font: 700 11px "DM Sans", sans-serif; }
.mutual-count-badge-warm { color: #ad6a53; background: #fff0e9; }
.mutual-plaza-panel-copy { margin: 11px 5px 14px; color: #8a9b97; font-size: 10px; line-height: 1.65; }
.mutual-people-list, .mutual-return-list { display: grid; gap: 5px; }
.mutual-person-card, .mutual-return-user { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.mutual-person-card:hover, .mutual-return-user:hover { border-color: #c9ddd4; background: #f1f8f4; transform: translateY(-1px); }
.mutual-person-card.is-selected { border-color: #a7cdbb; background: #eaf6ef; box-shadow: inset 3px 0 0 #57a27e; }
.mutual-person-avatar { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #5a9a7b; font: 700 13px "DM Sans", sans-serif; text-transform: uppercase; }
.mutual-person-card:nth-child(3n + 2) .mutual-person-avatar { background: #6d8fa1; }
.mutual-person-card:nth-child(3n) .mutual-person-avatar { background: #c17c61; }
.mutual-person-main { min-width: 0; flex: 1 1 auto; }
.mutual-person-main strong, .mutual-person-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mutual-person-main strong { color: #405b58; font-size: 11px; font-weight: 700; }
.mutual-person-main small { margin-top: 4px; color: #91a29e; font-size: 9px; line-height: 1.25; }
.mutual-person-card > svg { width: 13px; flex: 0 0 13px; color: #a5b6b1; }
.mutual-person-pending { min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 5px; color: #af654f; background: #fff0e9; font: 700 9px "DM Sans", sans-serif; }
.mutual-plaza-empty { display: grid; justify-items: center; gap: 8px; padding: 42px 18px; color: #9aa9a5; text-align: center; }
.mutual-plaza-empty svg { width: 28px; height: 28px; color: #8ab49e; }
.mutual-plaza-empty strong { color: #607872; font-size: 11px; }
.mutual-plaza-empty span { max-width: 200px; color: #a0afab; font-size: 10px; line-height: 1.6; }
.mutual-people-empty { padding: 28px 10px 24px; }
.mutual-publish-box { margin-top: 18px; padding: 15px 7px 3px; border-top: 1px solid #e0e9e5; }
.mutual-publish-box-heading { display: flex; align-items: center; gap: 9px; }
.mutual-publish-box-heading h3 { margin: 3px 0 0; color: #435752; font-size: 13px; }
.mutual-publish-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #d17a5f; }
.mutual-publish-icon svg { width: 14px; }
.mutual-publish-box > p { margin: 11px 0 14px; color: #91a09d; font-size: 9px; line-height: 1.6; }
.mutual-publish-box .field { margin-bottom: 12px; }
.mutual-publish-box .field > span { color: #6c817b; font-size: 10px; }
.mutual-publish-box .field > span small { color: #a3afac; font-size: 9px; }
.mutual-publish-box input { height: 36px; font-size: 10px; }
.mutual-submit { width: 100%; min-height: 37px; margin-top: 2px; justify-content: center; font-size: 10px; }
.mutual-articles-panel { padding: 21px 22px 24px; background: #fafdfc; }
.mutual-articles-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #e3ebe7; }
.mutual-articles-heading h2 { margin: 4px 0 5px; color: #2f4446; font-size: 20px; line-height: 1.35; }
.mutual-articles-heading p:not(.eyebrow) { margin: 0; color: #8b9b97; font-size: 10px; line-height: 1.6; }
.mutual-article-count { padding-top: 3px; color: #6b8b80; font: 700 11px "DM Sans", sans-serif; white-space: nowrap; }
.mutual-article-board-note { display: flex; align-items: center; gap: 7px; margin: 15px 0 -1px; padding: 9px 10px; border: 1px solid #dbece3; border-radius: 6px; color: #6d8e82; background: #f1f9f4; font-size: 10px; line-height: 1.55; }
.mutual-article-board-note svg { width: 14px; height: 14px; flex: 0 0 14px; color: #68a386; }
.mutual-plaza-article-list { display: grid; gap: 13px; margin-top: 15px; }
.mutual-plaza-article { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid #dfe9e5; border-radius: 7px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.mutual-plaza-article:hover { border-color: #b9d8ca; box-shadow: 0 8px 20px rgba(48, 83, 70, .07); }
.mutual-plaza-article:target, .mutual-plaza-article.is-focus-target { scroll-margin-top: 18px; border-color: #65a987; box-shadow: 0 0 0 3px rgba(101, 169, 135, .16), 0 8px 20px rgba(48, 83, 70, .08); }
.mutual-plaza-cover { position: relative; min-height: 218px; overflow: hidden; display: grid; place-items: center; color: #dcefe5; background: #568d79; }
.mutual-plaza-cover.is-empty { color: #f9ded4; background: #bd8063; }
.mutual-plaza-cover img { width: 100%; height: 100%; object-fit: cover; }
.mutual-plaza-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(24, 57, 47, .62)); pointer-events: none; }
.mutual-plaza-cover > svg { width: 34px; height: 34px; }
.mutual-plaza-cover > span { position: absolute; z-index: 1; right: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; color: #fff; font: 700 9px "DM Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.mutual-plaza-article-body { min-width: 0; padding: 17px 18px 15px; }
.mutual-article-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.mutual-plaza-article-body h3 { overflow: hidden; margin: 10px 0 7px; color: #324047; font-size: 16px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.mutual-plaza-article-body h3 a:hover { color: #3f8469; }
.mutual-plaza-summary { display: -webkit-box; overflow: hidden; min-height: 35px; margin: 0; color: #8a9897; font-size: 10px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mutual-mobile-card-source { display: none; }
.mutual-plaza-article-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; color: #a0acab; font-size: 9px; }
.mutual-plaza-article-foot span, .mutual-plaza-article-foot a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mutual-action-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-width: 0; color: #91a29e; }
.mutual-action-count { min-height: 22px; padding: 2px 4px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 4px; color: inherit; background: transparent; font: inherit; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.mutual-action-count:hover, .mutual-action-count.is-expanded { border-color: #cfe3d8; color: #4b896e; background: #f1f9f4; }
.mutual-action-count:focus-visible { outline: 3px solid rgba(75, 148, 115, .16); outline-offset: 2px; }
.mutual-action-count svg { width: 12px; height: 12px; color: #86a99b; }
.mutual-action-count-number { display: none; }
.mutual-action-record-list { display: grid; gap: 7px; margin-top: 9px; }
.mutual-action-records { padding: 10px 11px; border: 1px solid #e1ece6; border-radius: 6px; background: #f8fcfa; }
.mutual-action-records[hidden] { display: none; }
.mutual-action-records-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: #537a6b; font-size: 10px; }
.mutual-action-records-heading span { color: #91a29e; font: 9px "DM Sans", sans-serif; }
.mutual-action-record { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 0; border-top: 1px solid #eaf1ed; }
.mutual-record-avatar { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: #75a98e; font: 700 9px "DM Sans", sans-serif; }
.mutual-action-record:nth-child(3n) .mutual-record-avatar { background: #c17c61; }
.mutual-action-record:nth-child(3n + 1) .mutual-record-avatar { background: #6d8fa1; }
.mutual-record-main { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 auto; }
.mutual-record-main strong { overflow: hidden; color: #617d73; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mutual-record-main small { flex: 0 0 auto; color: #9aaaa5; font-size: 8px; }
.mutual-action-record-empty { padding: 7px 0 2px; border-top: 1px solid #eaf1ed; color: #9aaaa5; font-size: 9px; }
.mutual-plaza-article-links { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.mutual-plaza-article-links form { margin: 0; }
.mutual-plaza-article-foot svg { width: 13px; height: 13px; color: #84aa99; }
.mutual-plaza-article-foot a { color: #638a7c; }
.mutual-plaza-article-foot a:hover { color: #376b58; }
.mutual-delete-button { min-height: 22px; padding: 0; display: inline-flex; align-items: center; gap: 4px; border: 0; color: #b46b59; background: transparent; font-size: 9px; }
.mutual-delete-button:hover { color: #a34836; }
.mutual-delete-button svg { color: currentColor; }
.mutual-help-line { display: flex; align-items: center; flex: 0 0 auto; min-height: 0; margin: 0; padding: 0; border: 0; color: #9aa9a5; font-size: 10px; }
.mutual-help-line > span, .mutual-help-trigger { display: inline-flex; align-items: center; gap: 6px; }
.mutual-help-line svg { width: 14px; height: 14px; }
.mutual-help-line > span svg { color: #a8b7b2; }
.mutual-help-line > span.is-complete { color: #5d9a7a; }
.mutual-help-line > span.is-complete svg { color: #5b9e7a; }
.mutual-help-trigger { padding: 0; border: 0; color: #4d9474; background: transparent; font-size: 11px; font-weight: 700; }
.mutual-help-trigger:hover { color: #2f7458; }
.mutual-help-trigger svg:last-child { width: 13px; margin-left: 2px; transition: transform .18s ease; }
.mutual-help-trigger:hover svg:last-child { transform: translateX(3px); }

.mutual-help-backdrop { position: fixed; z-index: 90; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(28, 48, 44, .38); }
.mutual-help-backdrop[hidden] { display: none; }
.mutual-helped-detail-backdrop { z-index: 150; }
.mutual-help-dialog { width: min(600px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; padding: 23px; border: 1px solid #d4e2dc; border-radius: 10px; background: #fbfdfc; box-shadow: 0 24px 70px rgba(28, 57, 49, .2); }
.mutual-stats-detail-dialog { width: min(640px, 100%); }
.mutual-stats-detail-status { margin-top: 17px; padding: 12px 13px; border: 1px solid #dce9e3; border-radius: 7px; color: #78948a; background: #f3faf6; font-size: 10px; line-height: 1.5; }
.mutual-stats-detail-status.is-error { border-color: #efd0c6; color: #aa624f; background: #fff7f4; }
.mutual-stats-detail-summary { margin-top: 17px; color: #719285; font-size: 10px; }
.mutual-stats-detail-list { display: grid; gap: 8px; max-height: 450px; margin-top: 12px; overflow: auto; }
.mutual-stats-detail-item { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #dfebe5; border-radius: 7px; background: #fff; }
.mutual-stats-detail-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #6798a5; font: 700 11px "DM Sans", sans-serif; }
.mutual-stats-detail-item:nth-child(3n + 1) .mutual-stats-detail-avatar { background: #5a9a7b; }
.mutual-stats-detail-item:nth-child(3n) .mutual-stats-detail-avatar { background: #c17c61; }
.mutual-stats-detail-main { min-width: 0; flex: 1 1 auto; }
.mutual-stats-detail-main strong, .mutual-stats-detail-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mutual-stats-detail-main strong { color: #45625a; font-size: 11px; font-weight: 700; }
.mutual-stats-detail-main small { margin-top: 4px; color: #94a49f; font-size: 9px; }
.mutual-stats-detail-link { flex: 0 0 auto; color: #528b72; font-size: 9px; white-space: nowrap; }
.mutual-stats-detail-link:hover { color: #2f7458; text-decoration: underline; }
.mutual-help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #e4ece8; }
.mutual-help-header h2 { margin: 5px 0 5px; color: #2f4545; font-size: 20px; }
.mutual-help-header p:not(.eyebrow) { margin: 0; color: #899b96; font-size: 10px; line-height: 1.6; }
.mutual-mobile-help-notice { display: flex; align-items: center; gap: 10px; margin: 15px 0 2px; padding: 11px 12px; border: 1px solid #efb09f; border-radius: 7px; color: #8e4e3e; background: #fff4ef; box-shadow: inset 3px 0 0 #ec684e; }
.mutual-mobile-help-notice > svg { width: 20px; height: 20px; flex: 0 0 20px; color: #ec684e; }
.mutual-mobile-help-notice div { min-width: 0; }
.mutual-mobile-help-notice strong, .mutual-mobile-help-notice span { display: block; }
.mutual-mobile-help-notice strong { color: #a85440; font-size: 11px; }
.mutual-mobile-help-notice span { margin-top: 3px; color: #9b6b5c; font-size: 10px; line-height: 1.5; }
.mutual-help-article-name { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 9px 11px; border: 1px solid #dfebe5; border-radius: 6px; color: #54796b; background: #f2f9f5; font-size: 11px; }
.mutual-help-article-name svg { width: 15px; flex: 0 0 15px; }
.mutual-help-article-name > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mutual-help-article-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.mutual-help-article-actions .button { min-height: 29px; padding: 0 9px; font-size: 9px; white-space: nowrap; }
.mutual-help-article-actions .button svg { width: 13px; height: 13px; }
.mutual-help-section + .mutual-help-section { margin-top: 20px; }
.mutual-help-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mutual-help-section-title > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #5a9a7b; font: 700 10px "DM Sans", sans-serif; }
.mutual-help-section-title strong, .mutual-help-section-title small { display: block; }
.mutual-help-section-title strong { color: #4c625d; font-size: 11px; }
.mutual-help-section-title small { margin-top: 3px; color: #9baaa6; font-size: 9px; }
.mutual-evidence-paste { position: relative; min-height: 145px; padding: 15px; display: grid; place-items: center; border: 1px dashed #b8d4c6; border-radius: 7px; background: #f6fbf8; text-align: center; outline: 0; }
.mutual-evidence-paste:focus, .mutual-evidence-paste:hover { border-color: #70a88b; background: #f0f9f4; }
.mutual-evidence-placeholder { display: grid; justify-items: center; gap: 6px; color: #89a39a; }
.mutual-evidence-placeholder svg { width: 27px; height: 27px; color: #6ea58a; }
.mutual-evidence-placeholder strong { color: #638278; font-size: 11px; }
.mutual-evidence-placeholder small { color: #a0b1aa; font-size: 9px; }
.mutual-evidence-paste > img { max-width: 100%; max-height: 220px; border-radius: 5px; object-fit: contain; }
.mutual-evidence-file { margin-top: 8px; padding: 0; border: 0; color: #5f947b; background: transparent; font: inherit; font-size: 9px; cursor: pointer; }
.mutual-evidence-file:hover { color: #367456; }
.mutual-evidence-file-input { display: none; }
.mutual-help-checks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mutual-help-check { position: relative; min-width: 0; cursor: pointer; }
.mutual-help-check input { position: absolute; opacity: 0; pointer-events: none; }
.mutual-help-check > span { min-height: 68px; padding: 10px 8px; display: grid; justify-items: center; gap: 4px; border: 1px solid #dfe9e5; border-radius: 6px; color: #76918a; background: #fff; text-align: center; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mutual-help-check:hover > span { border-color: #a9cdbb; background: #f4faf6; }
.mutual-help-check input:checked + span { border-color: #77b291; color: #3e8062; background: #eaf7ef; box-shadow: inset 0 0 0 1px #77b291; }
.mutual-help-check input:focus-visible + span { outline: 3px solid rgba(75, 148, 115, .16); outline-offset: 2px; }
.mutual-help-check > span svg { width: 17px; height: 17px; }
.mutual-help-check b { font-size: 10px; }
.mutual-help-check small { color: #a1afab; font-size: 8px; }
.mutual-help-check.is-completed > span { color: #8ca59c; background: #f4f8f6; cursor: not-allowed; }
.mutual-help-check.is-completed input:checked + span { border-color: #c8ddd2; box-shadow: none; }
.mutual-help-error { margin: 13px 0 0; color: #b35d49; font-size: 10px; }
.mutual-help-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e4ece8; }
.mutual-guest-dialog { width: min(430px, 100%); }
.mutual-guest-article { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 12px; border: 1px solid #dfebe5; border-radius: 6px; color: #54796b; background: #f2f9f5; }
.mutual-guest-article > svg { width: 17px; flex: 0 0 17px; }
.mutual-guest-article strong, .mutual-guest-article small { display: block; }
.mutual-guest-article strong { overflow: hidden; color: #4c625d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mutual-guest-article small { margin-top: 3px; color: #9baaa6; font-size: 9px; }
.mutual-guest-actions { display: grid; gap: 8px; margin-top: 16px; }
.mutual-guest-actions .button { width: 100%; justify-content: flex-start; }
.mutual-guest-note { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0 0; padding-top: 13px; border-top: 1px solid #e4ece8; color: #9b8178; font-size: 9px; line-height: 1.65; }
.mutual-guest-note svg { width: 14px; flex: 0 0 14px; color: #c1846e; }
.mutual-return-user { align-items: flex-start; padding: 10px 7px; }
.mutual-return-avatar { border-radius: 50%; color: #a45a43; background: #f4cdbf; }
.mutual-return-user .mutual-person-main small + small { margin-top: 3px; color: #a5b0ad; }
.mutual-return-arrow { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 6px; color: #b8785f; background: #fff3ee; }
.mutual-return-arrow svg { width: 13px; }
.mutual-returned-arrow { color: #4b9271; background: #eaf6ef; }
.mutual-return-empty { padding: 30px 7px 28px; }
.mutual-return-note { display: flex; align-items: flex-start; gap: 7px; margin: 18px 2px 0; padding-top: 13px; border-top: 1px solid #e4ece8; color: #9b8178; font-size: 9px; line-height: 1.65; }
.mutual-return-note svg { width: 14px; flex: 0 0 14px; color: #c1846e; }
.mutual-helped-panel { padding: 18px 14px 14px; }
.mutual-helped-list { display: grid; gap: 6px; }
.mutual-helped-record { min-width: 0; padding: 10px 7px; border: 1px solid #e1ebe6; border-radius: 6px; background: #fbfdfc; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.mutual-helped-record:hover, .mutual-helped-record:focus-visible { border-color: #9cc7b0; background: #f5fbf7; box-shadow: 0 4px 14px rgba(58, 116, 88, .08); outline: none; }
.mutual-helped-record-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mutual-helped-avatar { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #75a98e; font: 700 10px "DM Sans", sans-serif; }
.mutual-helped-record:nth-child(3n) .mutual-helped-avatar { background: #c17c61; }
.mutual-helped-record:nth-child(3n + 1) .mutual-helped-avatar { background: #6d8fa1; }
.mutual-helped-record-main { min-width: 0; display: grid; gap: 3px; }
.mutual-helped-record-main strong { overflow: hidden; color: #55756b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mutual-helped-record-main a { overflow: hidden; color: #435b5b; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.mutual-helped-record-main a:hover { color: #3f8469; }
.mutual-helped-actions { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 8px 0 0 33px; color: #729386; font-size: 9px; }
.mutual-helped-actions span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mutual-helped-actions svg { width: 11px; height: 11px; color: #86aa9a; }
.mutual-helped-record-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 0 0 33px; }
.mutual-helped-time { display: block; margin: 0; color: #a1afab; font-size: 8px; }
.mutual-helped-detail-trigger { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; color: #4c9271; background: transparent; font: 500 9px "Noto Sans SC", sans-serif; cursor: pointer; }
.mutual-helped-detail-trigger:hover, .mutual-helped-detail-trigger:focus-visible { color: #286746; outline: none; }
.mutual-helped-detail-trigger svg { width: 11px; height: 11px; }
.mutual-helped-empty { padding: 28px 7px 25px; }
.mutual-helped-detail-dialog { width: min(560px, 100%); }
.mutual-helped-detail-article { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 11px 12px; border: 1px solid #dfebe5; border-radius: 6px; color: #54796b; background: #f2f9f5; }
.mutual-helped-detail-article > div { min-width: 0; display: grid; gap: 3px; }
.mutual-helped-detail-article strong { overflow: hidden; color: #405b55; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mutual-helped-detail-article small { color: #9baaa6; font-size: 9px; }
.mutual-helped-detail-article a { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; color: #4c9271; font-size: 10px; white-space: nowrap; }
.mutual-helped-detail-article a:hover { color: #286746; }
.mutual-helped-detail-article a svg { width: 13px; height: 13px; }
.mutual-helped-detail-status { margin-top: 15px; padding: 11px 12px; border: 1px solid #dceae3; border-radius: 6px; color: #729386; background: #f5faf7; font-size: 10px; }
.mutual-helped-detail-status.is-error { border-color: #efc9bf; color: #b35d49; background: #fff5f1; }
.mutual-helped-detail-section { margin-top: 18px; }
.mutual-helped-detail-section > .eyebrow { margin-bottom: 8px; }
.mutual-helped-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mutual-helped-detail-actions span { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #dceae3; border-radius: 6px; color: #4e826d; background: #f7fbf8; font-size: 10px; }
.mutual-helped-detail-actions svg { width: 14px; height: 14px; color: #72a58d; }
.mutual-helped-detail-evidence { min-height: 90px; display: grid; place-items: center; padding: 12px; border: 1px dashed #a9cdbb; border-radius: 7px; color: #9baaa6; background: #f8fcfa; font-size: 10px; }
.mutual-helped-detail-evidence img { display: block; max-width: 100%; max-height: 430px; object-fit: contain; border-radius: 4px; }

@media (max-width: 1180px) {
  .mutual-plaza-grid { grid-template-columns: 225px minmax(0, 1fr) 260px; gap: 12px; }
  .mutual-plaza { padding-right: 25px; padding-left: 25px; }
  .mutual-plaza-article { grid-template-columns: 145px minmax(0, 1fr); }
}
@media (max-width: 950px) {
  .mutual-main-area .topbar { height: auto; min-height: 78px; padding-top: 10px; padding-bottom: 10px; }
  .mutual-topbar-actions { gap: 11px; }
  .mutual-topbar-actions .mutual-mini-stats { gap: 11px; }
  .mutual-topbar-url { width: clamp(190px, 27vw, 300px); }
  .mutual-topbar-brand p:last-child { max-width: 390px; }
  .mutual-topbar-user-copy { max-width: 110px; }
  .mutual-plaza-header { align-items: flex-start; flex-direction: column; gap: 17px; }
  .mutual-plaza-header-actions { width: 100%; justify-content: space-between; }
  .mutual-plaza-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .mutual-plaza-left-column, .mutual-plaza-right-column { position: static; max-height: none; overflow: visible; }
  .mutual-plaza-right-column { grid-column: 1 / -1; }
  .mutual-return-panel, .mutual-returned-panel, .mutual-helped-panel { grid-column: auto; position: static; max-height: none; overflow: visible; }
  .mutual-return-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-return-note { max-width: 600px; }
}
@media (max-width: 680px) {
  .mutual-main-area .topbar { align-items: stretch; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .mutual-topbar-brand { width: 100%; flex: 0 0 auto; }
  .mutual-topbar-brand p:last-child { display: none; }
  .mutual-topbar-actions { width: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "stats metrics switch" "user user user" "publish publish publish"; gap: 9px 6px; align-items: center; }
  .mutual-stats-link { min-width: 0; grid-area: stats; min-height: 30px; padding: 0 5px; gap: 4px; font-size: 9px; }
  .mutual-stats-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-topbar-actions .mutual-mini-stats { grid-area: metrics; min-width: 0; justify-content: space-around; gap: 2px; }
  .mutual-topbar-actions .mutual-mini-stats span { min-width: 0; flex: 1 1 0; text-align: center; }
  .mutual-topbar-actions .mutual-mini-stats b { font-size: 14px; }
  .mutual-topbar-actions .mutual-mini-stats small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-only-switcher { grid-area: switch; }
  .mutual-only-switch-button { min-height: 30px; padding: 0 6px; gap: 4px; font-size: 10px; }
  .mutual-topbar-user { grid-area: user; justify-self: stretch; justify-content: flex-end; min-height: 33px; margin-left: 0; padding: 7px 0 0; border-top: 1px solid #e5eeea; border-left: 0; }
  .mutual-topbar-login { grid-area: user; justify-self: end; margin-left: 0; }
  .mutual-topbar-publish-form { width: 100%; min-width: 0; grid-area: publish; order: initial; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .mutual-topbar-url { width: auto; min-width: 0; }
  .mutual-topbar-url input, .mutual-topbar-publish { height: 35px; min-height: 35px; }
  .mutual-topbar-user-copy { max-width: min(220px, calc(100vw - 128px)); }
  .mutual-plaza { min-height: calc(100vh - 52px); padding: 25px 14px 34px; }
  .mutual-plaza-header h1 { font-size: 27px; }
  .mutual-plaza-header-actions { align-items: flex-end; flex-direction: column; gap: 14px; }
  .mutual-mini-stats { align-self: flex-start; }
  .mutual-plaza-grid { grid-template-columns: 1fr; }
  .mutual-plaza-left-column, .mutual-plaza-right-column { position: static; max-height: none; display: contents; }
  .mutual-plaza-left-column > [data-mutual-mobile-panel], .mutual-plaza-right-column > [data-mutual-mobile-panel] { display: none; }
  .mutual-mobile-side-tools { position: fixed; z-index: 120; top: 50%; right: 0; display: grid; gap: 6px; transform: translateY(-50%); }
  .mutual-mobile-side-tool { width: 43px; min-height: 48px; padding: 6px 3px; display: grid; place-items: center; gap: 3px; border: 1px solid #d4e4dc; border-right: 0; border-radius: 8px 0 0 8px; color: #4f826f; background: #f8fcfa; box-shadow: 0 5px 16px rgba(46, 80, 68, .12); cursor: pointer; }
  .mutual-mobile-side-tool:hover, .mutual-mobile-side-tool[aria-expanded="true"] { color: #fff; border-color: #4b9473; background: #4b9473; }
  .mutual-mobile-side-tool.is-warm { color: #ad6a53; border-color: #ecd9d1; background: #fffaf7; }
  .mutual-mobile-side-tool.is-warm:hover, .mutual-mobile-side-tool.is-warm[aria-expanded="true"] { color: #fff; border-color: #c17c61; background: #c17c61; }
  .mutual-mobile-side-tool svg { width: 16px; height: 16px; }
  .mutual-mobile-side-tool span { font-size: 8px; line-height: 1; white-space: nowrap; }
  .mutual-mobile-side-tool b { min-width: 14px; height: 14px; padding: 0 2px; box-sizing: border-box; display: grid; place-items: center; border-radius: 4px; color: #56836f; background: #e6f3ec; font: 700 8px/1 "DM Sans", sans-serif; }
  .mutual-mobile-side-tool.is-warm b { color: #ad6a53; background: #ffede6; }
  .mutual-mobile-panel-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(31, 52, 47, .26); }
  .mutual-mobile-panel-backdrop[hidden] { display: none; }
  .mutual-plaza-left-column > [data-mutual-mobile-panel].is-mobile-panel-open, .mutual-plaza-right-column > [data-mutual-mobile-panel].is-mobile-panel-open { position: fixed; z-index: 110; top: 86px; right: 54px; bottom: 12px; left: 12px; display: block !important; max-height: none; overflow-y: auto; box-shadow: 0 18px 48px rgba(31, 58, 50, .2); }
  .mutual-plaza-flash { width: min(390px, calc(100vw - 32px)); }
  .mutual-people-panel { padding-right: 9px; padding-left: 9px; }
  .mutual-people-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-publish-box { grid-column: 1 / -1; }
  .mutual-articles-panel { padding: 17px 13px 19px; }
  .mutual-plaza-article-list { gap: 8px; }
  .mutual-plaza-article { position: relative; grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "body cover"; column-gap: 10px; align-items: start; padding: 10px; border: 0; border-radius: 6px; background: #f0f0f2; box-shadow: none; }
  .mutual-plaza-article:hover, .mutual-plaza-article:target { border-color: transparent; box-shadow: none; }
  .mutual-plaza-cover { grid-area: cover; width: 48px; min-height: 48px; height: 48px; border-radius: 3px; }
  .mutual-plaza-cover::after { display: none; }
  .mutual-plaza-cover > svg { width: 18px; height: 18px; }
  .mutual-plaza-cover > span { display: none; }
  .mutual-plaza-article-body { position: relative; grid-area: body; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; padding: 0; }
  .mutual-article-topline { display: contents; }
  .mutual-article-meta { display: none; }
  .mutual-help-line { order: 4; flex: 0 0 auto; margin-top: 6px; pointer-events: auto; font-size: 9px; }
  .mutual-help-line > span, .mutual-help-trigger { width: auto; height: 22px; justify-content: center; padding: 0 6px; border: 1px solid #d5d7dc; border-radius: 4px; color: #8f969f; background: transparent; font-size: 9px; }
  .mutual-help-trigger { color: #5d8c79; background: #f7faf8; }
  .mutual-help-trigger svg:last-child { display: none; }
  .mutual-plaza-article-body h3 { width: 100%; display: -webkit-box; min-height: 0; margin: 0 0 5px; font-size: 14px; line-height: 1.4; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mutual-plaza-summary { width: 100%; min-height: 0; font-size: 10px; line-height: 1.55; -webkit-line-clamp: 2; }
  .mutual-mobile-card-source { width: 100%; min-width: 0; display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #9a9da4; font-size: 9px; line-height: 1.3; }
  .mutual-mobile-card-source svg { width: 13px; height: 13px; flex: 0 0 13px; color: #a7abb2; }
  .mutual-mobile-card-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-mobile-card-source small { min-width: 0; margin-left: auto; overflow: hidden; color: #aaadb3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-progress-head { width: auto; min-width: 0; flex: 0 0 auto; order: 2; display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin-top: 8px; margin-left: auto; font-size: 9px; white-space: nowrap; }
  .mutual-progress-head span { min-width: 0; }
  .mutual-progress-head b { flex: 0 0 auto; margin-left: 0; text-align: right; }
  .mutual-action-counts { width: auto; min-width: 0; flex: 0 1 auto; order: 1; flex-wrap: nowrap; gap: 2px; margin-top: 8px; overflow: hidden; }
  .mutual-action-count { min-width: 20px; min-height: 20px; flex: 0 0 auto; justify-content: center; padding: 1px 2px; gap: 1px; font-size: 8px; }
  .mutual-plaza-article-foot .mutual-action-count-copy { display: none; }
  .mutual-action-count-number { display: inline; color: #91a29e; font: 700 8px/1 "DM Sans", sans-serif; }
  .mutual-plaza-article-foot { display: contents; }
  .mutual-plaza-article-links { width: auto; max-width: 100%; flex: 0 1 auto; order: 3; margin: 6px 0 0; justify-content: flex-start; gap: 12px; white-space: nowrap; }
  .mutual-action-record-list { width: 100%; flex: 0 0 100%; order: 5; }
  .mutual-plaza-article-links > a, .mutual-plaza-article-links .mutual-delete-button { width: auto; height: auto; justify-content: flex-start; padding: 2px 0; font-size: 9px; }
  .mutual-return-list { grid-template-columns: 1fr; }
}

.mutual-plaza-article.is-focus-target { outline: 3px solid rgba(101, 169, 135, .22); outline-offset: 2px; }
@media (max-width: 430px) {
  .mutual-topbar-actions { gap: 8px 4px; }
  .mutual-stats-link { padding-right: 3px; padding-left: 3px; gap: 3px; font-size: 8px; }
  .mutual-stats-link svg, .mutual-only-switch-button svg { width: 12px; height: 12px; }
  .mutual-topbar-actions .mutual-mini-stats b { font-size: 12px; }
  .mutual-topbar-actions .mutual-mini-stats small { font-size: 7px; }
  .mutual-only-switch-button { min-height: 29px; padding-right: 4px; padding-left: 4px; gap: 3px; font-size: 9px; }
  .mutual-people-list { grid-template-columns: 1fr; }
  .mutual-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-action { min-height: 42px; }
}
@media (max-width: 560px) {
  .mutual-help-backdrop { padding: 10px; align-items: end; }
  .mutual-help-dialog { max-height: calc(100vh - 20px); padding: 18px 15px; }
  .mutual-helped-detail-article { align-items: flex-start; flex-wrap: wrap; }
  .mutual-helped-detail-article a { margin-left: auto; }
  .mutual-help-article-name { align-items: flex-start; flex-wrap: wrap; }
  .mutual-help-article-actions { flex: 1 1 100%; margin-left: 23px; }
  .mutual-help-article-actions .button { flex: 1 1 0; }
  .mutual-help-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mutual-help-footer { align-items: stretch; }
  .mutual-help-footer .button { flex: 1 1 0; }
}

/* Keep the mutual header compact and on one line on phones. */
@media (max-width: 680px) {
  .mutual-main-area .topbar { min-height: 52px; height: auto; padding: 8px 10px; display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow: visible; }
  .mutual-topbar-brand { width: auto; min-width: 0; flex: 0 1 auto; }
  .mutual-topbar-brand .eyebrow, .mutual-topbar-brand p:last-child { display: none; }
  .mutual-topbar-brand h1 { max-width: 66px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-topbar-actions { width: auto; height: auto; min-width: 0; margin-left: auto; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; overflow: visible; }
  .mutual-stats-link { width: auto; min-width: 0; max-width: 82px; height: 28px; min-height: 28px; box-sizing: border-box; padding: 0 5px; align-self: center; justify-content: center; gap: 4px; flex: 0 1 auto; line-height: 1; }
  .mutual-stats-link span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-topbar-actions .mutual-mini-stats small, .mutual-topbar-user-copy { display: none; }
  .mutual-stats-link svg { width: 14px; height: 14px; }
  .mutual-topbar-actions .mutual-mini-stats { display: none; }
  .mutual-topbar-actions .mutual-mini-stats span { min-width: 0; flex: 1 1 0; display: block; text-align: center; }
  .mutual-topbar-actions .mutual-mini-stats b { display: block; overflow: hidden; font-size: 12px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  .mutual-topbar-publish-form { position: relative; width: auto; min-width: 0; flex: 0 0 auto; order: 0; display: flex; gap: 0; }
  .mutual-topbar-url { display: none; }
  .mutual-topbar-publish-form.is-mobile-upload-open { z-index: 130; }
  .mutual-topbar-publish-form.is-mobile-upload-open .mutual-topbar-url { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; display: block; width: min(280px, calc(100vw - 24px)); padding: 7px; border: 1px solid #d4e2dc; border-radius: 7px; background: #fbfdfc; box-shadow: 0 12px 28px rgba(31, 58, 50, .18); }
  .mutual-topbar-url input { width: 100%; height: 32px; min-height: 32px; }
  .mutual-topbar-publish { height: 28px; min-height: 28px; padding: 0 7px; font-size: 9px; }
  .mutual-topbar-publish { padding: 0 9px; font-size: 9px; }
  .mutual-only-switcher { height: 28px; min-height: 28px; flex: 0 0 auto; align-self: center; padding: 0; border: 0; background: transparent; display: flex; align-items: center; }
  .mutual-only-switch-button { min-height: 28px; height: 28px; box-sizing: border-box; padding: 0 6px; gap: 3px; font-size: 9px; }
  .mutual-only-switch-button svg { width: 12px; height: 12px; }
  .mutual-topbar-user { width: auto; height: 28px; min-width: 28px; min-height: 28px; margin-left: 0; padding-top: 0; padding-left: 3px; box-sizing: border-box; gap: 2px; border-top: 0; border-left: 1px solid #dce7e2; justify-content: flex-end; align-self: center; flex: 0 0 auto; }
  .mutual-topbar-user-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
  .mutual-topbar-logout .icon-button { width: 28px; height: 28px; }
  .mutual-topbar-login { min-height: 28px; height: 28px; box-sizing: border-box; padding: 0 5px; gap: 0; font-size: 0; }
  .mutual-topbar-login svg { width: 14px; height: 14px; }
}

@media (max-width: 380px) {
  .mutual-main-area .topbar { padding-right: 7px; padding-left: 7px; gap: 4px; }
  .mutual-topbar-brand h1 { max-width: 54px; font-size: 14px; }
  .mutual-topbar-actions { gap: 2px; }
  .mutual-stats-link { max-width: 72px; padding-right: 3px; padding-left: 3px; gap: 3px; font-size: 8px; }
  .mutual-stats-link svg { width: 12px; height: 12px; flex: 0 0 12px; }
  .mutual-topbar-actions .mutual-mini-stats b { font-size: 11px; }
  .mutual-only-switch-button { width: auto; max-width: 72px; min-width: 0; padding: 0 3px; justify-content: center; font-size: 8px; }
  .mutual-topbar-user { min-width: 28px; padding-left: 1px; border-left: 0; }
  .mutual-topbar-logout { display: none; }
}