:root {
  --ink: #101827;
  --muted: #697586;
  --line: #e4e7ec;
  --surface: #ffffff;
  --canvas: #f4f6ff;
  --brand: #1761e8;
  --brand-dark: #254fc4;
  --blue: #356ae6;
  --danger: #d64545;
  --warning: #ba7a09;
  --shadow: 0 10px 30px rgba(30, 55, 95, .07), 0 1px 3px rgba(30, 55, 95, .05);
  --shadow-raised: 0 16px 36px rgba(31, 64, 124, .12), 0 2px 6px rgba(31, 64, 124, .06);
  --radius-card: 16px;
  --radius-control: 11px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; scrollbar-gutter: stable; background:radial-gradient(circle at 50% -180px, #fff 0, #f4f6ff 420px, var(--canvas) 760px); }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.shell { min-height: 100vh; }
.page-loader { min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:24px; }
.page-loader-card { width:min(420px,100%); text-align:center; padding:32px 24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.page-loader-card h1 { font-size:24px; line-height:1.4; letter-spacing:0; margin:16px 0 10px; }
.page-loader-card p { color:var(--muted); font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.page-loader-mark { color:var(--brand); }
.page-loader-mark .btn-spinner { width:24px; height:24px; }
.page-loader:has([data-action="retry-boot"]) .page-loader-mark { display:none; }
.page-loader-track { height:4px; border-radius:4px; overflow:hidden; background:var(--line); margin-top:24px; }
.page-loader-track i { display:block; width:38%; height:100%; background:var(--brand); animation:progress 1.35s ease-in-out infinite; }
.boot-underlay { min-height:100vh; min-height:100svh; background:radial-gradient(circle at 50% -180px, #fff 0, #f4f6ff 420px, var(--canvas) 760px); }
.boot-loading-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; background:rgba(255,255,255,.68); backdrop-filter:blur(9px); }
.boot-loading-card { width:min(390px,100%); padding:30px 26px 24px; text-align:center; border:1px solid rgba(214,224,240,.96); border-radius:18px; background:rgba(255,255,255,.97); box-shadow:0 20px 55px rgba(31,64,124,.16); }
.boot-loading-card h2 { margin:14px 0 7px; font-size:22px; }
.boot-loading-card p { margin:0; color:var(--muted); font-size:13px; }
.boot-loading-spinner { display:grid; place-items:center; color:var(--brand); }
.boot-loading-spinner .btn-spinner { width:26px; height:26px; border-width:3px; }
.boot-loading-track { height:4px; margin-top:22px; overflow:hidden; border-radius:99px; background:#e4e8ef; }
.boot-loading-track i { display:block; width:38%; height:100%; border-radius:99px; background:var(--brand); animation:progress 1.35s ease-in-out infinite; }
@media (max-width:600px) {
  .page-loader { padding:20px; }
  .page-loader-card { padding:24px 18px; }
  .page-loader-card .btn { width:100%; min-height:44px; }
}
.topbar { height: 68px; background:rgba(255,255,255,.9); border-bottom:1px solid rgba(218,225,236,.86); display:flex; align-items:center; justify-content:space-between; padding:0 max(5vw, 28px); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); box-shadow:0 1px 0 rgba(255,255,255,.7); }
.brand { display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap; padding:2px 0; }
.brand-button { border:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.brand-copy { font-family:"Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size:17px; line-height:1; font-weight:650; letter-spacing:.07em; color:#27344a; }
.brand-logo { width:46px; height:34px; object-fit:contain; display:block; }
.nav { display:flex; align-items:center; gap:5px; padding:4px; border-radius:13px; background:rgba(245,247,252,.78); }
.nav button { border:0; background:transparent; color:var(--muted); min-height:36px; padding:8px 13px; border-radius:9px; transition:color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.nav button.active { background:#fff; color:var(--brand-dark); box-shadow:0 3px 10px rgba(38,72,135,.09); }
.nav button:hover { background:#fff; color:var(--brand-dark); }
.nav button:focus-visible { outline:3px solid rgba(23,97,232,.24); outline-offset:2px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.avatar { width:31px; height:31px; background:var(--ink); color:#fff; border-radius:50%; display:grid; place-items:center; font-weight:700; }
.avatar-button { border:0; background:transparent; padding:2px; border-radius:50%; }
.avatar-button:hover, .avatar-button:focus-visible { outline:2px solid #80c4ff; outline-offset:3px; }
.notification-btn { display:flex; align-items:center; gap:6px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.top-actions > .activity-anchor,
.top-actions > .qq-popup-anchor,
.top-actions > .notification-btn { min-height:40px; }
.top-actions .activity-trigger,
.top-actions .qq-group-button,
.top-actions .notification-btn { min-height:40px; padding:0 13px; border-radius:11px; }
.top-actions .activity-trigger { border:1px solid #e3a900; background:#fff9e7; color:#a36b00; }
.top-actions .activity-trigger:hover { background:#fff1bf; }
.announcement-unread-count[hidden] { display:none; }
.admin-inline-actions, .announcement-settings-form > .btn { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.admin-inline-actions { justify-content:flex-end; }
.announcement-settings-form > .settings-submit, .activity-settings-form .settings-submit { justify-self:end; align-self:center; }
.announcement-activity-admin .settings-submit { margin-left:auto; }
.admin-inline-actions .small-muted { order:1; }
.admin-inline-actions .settings-submit { order:2; }
.announcement-settings-form { display:flow-root; }
.announcement-settings-form > .btn { float:right; margin-left:8px; }
.announcement-settings-form > .announcement-admin-list { clear:both; }
.announcement-settings-form > .announcement-admin-list + .btn { margin-top:12px; }
.announcement-activity-admin .card-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.bell-icon { width:16px; height:16px; display:block; }

.container { width:min(1180px, 90vw); margin:0 auto; }
.hero { display:grid; grid-template-columns: 1.05fr .95fr; gap:42px; padding:76px 0 42px; align-items:center; }
.eyebrow { color: var(--brand-dark); font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
h1 { margin: 13px 0 17px; letter-spacing:-.065em; font-size: clamp(42px, 6vw, 74px); line-height:1.03; }
h2 { margin:0; letter-spacing:-.015em; font-size:28px; font-weight:600; line-height:1.4; }
h3 { margin:0; font-size:17px; font-weight:600; }
.hero p { color:var(--muted); max-width:570px; line-height:1.8; font-size:16px; }
.hero-actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.hero-art { min-height:330px; border-radius:18px; background: linear-gradient(135deg, #111827, #293750); position:relative; overflow:hidden; box-shadow:var(--shadow); padding:28px; color:#fff; }
.hero-art:before, .hero-art:after { content:""; position:absolute; border-radius:50%; filter:blur(3px); opacity:.85; }
.hero-art:before { width:270px; height:270px; right:-40px; top:-60px; background:#13baf3; }
.hero-art:after { width:300px; height:300px; left:-100px; bottom:-150px; background:#8a43f6; }
.art-window { position:relative; z-index:1; height:100%; border:1px solid rgba(255,255,255,.22); border-radius:22px; padding:22px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); }
.art-top { display:flex; justify-content:space-between; color:#dbeafe; font-size:12px; }
.art-title { margin-top:82px; font-weight:800; font-size:39px; line-height:1.16; letter-spacing:-.02em; max-width:380px; }
.art-title-line { display:block; }
.art-caption { margin-top:14px; color:#dbeafe; font-size:13px; }

/* The homepage is one continuous document; only its new sections use these styles. */
.home-page .hero { position:relative; min-height:calc(100svh - 68px); padding-bottom:96px; }
.home-scroll-link { position:absolute; bottom:28px; left:0; display:inline-flex; align-items:center; gap:12px; padding:10px 0; color:var(--muted); font-size:13px; }
.home-scroll-link span { font-size:19px; color:var(--brand-dark); }
.home-scroll-link:hover { color:var(--brand-dark); }
.home-scroll-link:focus-visible { outline:2px solid var(--brand); outline-offset:5px; border-radius:4px; }
.home-page .home-section { padding:80px 0; border-top:1px solid var(--line); scroll-margin-top:88px; }
.home-section h2 { font-size:clamp(28px,3vw,38px); line-height:1.35; font-weight:650; letter-spacing:-.025em; }
.home-section-lead { margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.85; max-width:520px; }
.home-community { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); align-items:center; gap:80px; }
.home-group-number { margin-top:32px; display:grid; gap:8px; }
.home-group-number > span { color:var(--muted); font-size:13px; }
.qq-number { width:fit-content; font-size:clamp(26px,3vw,36px); font-weight:650; letter-spacing:.045em; line-height:1.3; user-select:all; -webkit-user-select:all; }
.home-community-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.home-community-actions .btn, .home-start .btn { min-height:46px; }
.home-community-note { margin:18px 0 0; max-width:430px; font-size:13px; color:var(--muted); line-height:1.8; }
.home-qr { width:min(100%,340px); justify-self:center; margin:0; padding:20px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.home-qr img { display:block; width:100%; height:auto; }
.home-qr figcaption { margin-top:16px; color:var(--muted); text-align:center; font-size:12px; line-height:1.6; }
.home-feature-heading { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.home-feature-heading .home-section-lead { margin:0; }
.home-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:44px 0; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-steps li { display:flex; align-items:flex-start; gap:16px; }
.home-step-number { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:50%; background:#eaf1ff; color:var(--brand-dark); font-size:16px; font-weight:650; }
.home-steps h3 { margin-top:5px; }
.home-steps p, .home-feature-grid p { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.home-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px 60px; }
.home-feature-grid > div { min-width:0; }
.home-start { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:24px 28px; border-radius:16px; background:#eaf1ff; }
.home-start p { margin:0; font-size:17px; font-weight:600; }
@media (max-width:900px) {
  .home-community { gap:36px; }
  .home-feature-heading { gap:32px; }
  .home-steps { gap:20px; }
  .home-steps li { gap:10px; }
}
@media (max-width:700px) {
  .home-page .hero { min-height:auto; padding-top:42px; padding-bottom:88px; }
  .home-scroll-link { bottom:20px; }
  .home-page .home-section { padding:48px 0; scroll-margin-top:76px; }
  .home-community { grid-template-columns:minmax(0,1fr); gap:30px; }
  .home-section-lead { margin-top:16px; font-size:15px; }
  .home-group-number { margin-top:24px; }
  .home-community-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .home-community-actions .btn { padding:10px; min-height:48px; }
  .home-qr { width:min(100%,300px); padding:18px; }
  .home-feature-heading { grid-template-columns:minmax(0,1fr); gap:16px; }
  .home-steps { grid-template-columns:minmax(0,1fr); gap:24px; margin:28px 0; padding:24px 0; }
  .home-steps li { gap:16px; }
  .home-feature-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .home-start { align-items:stretch; flex-direction:column; gap:18px; margin-top:32px; padding:22px; }
  .home-start p { font-size:16px; }
  body:has(.mobile-nav) .toast { bottom:calc(var(--mobile-nav-height,64px) + env(safe-area-inset-bottom) + 20px); }
}

/* 公告和QQ群统一为贴近按钮的白色侧面板 */
.announcement-overlay { display:flex; align-items:flex-start; justify-content:flex-end; padding:68px 16px 16px; background:transparent; pointer-events:auto; }
.announcement-modal { width:min(430px, calc(100vw - 32px)); max-height:calc(100vh - 84px); border:1px solid #dce3ed; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgba(21,35,58,.18); }
.announcement-modal .modal-heading { min-height:56px; padding:0 16px; border-bottom:1px solid #e3e8ef; }
.announcement-modal .modal-heading h3 { color:var(--ink); font-size:18px; }
.announcement-modal .modal-close { background:transparent; color:#8793a3; }
.announcement-modal .modal-close:hover { background:#f0f3f7; color:var(--ink); }
.announcement-modal .panel-kicker { color:#778599; }
.announcement-list { max-height:calc(100vh - 140px); }
.announcement-feed-row { min-height:72px; padding:12px 14px; border-bottom:1px solid #e4e9f0; background:#fff; color:var(--ink); }
.announcement-feed-row:hover, .announcement-feed-row:focus-visible { background:#f7f9fc; }
.announcement-feed-accent { background:#5b9ee8; }
.announcement-feed-row:nth-child(2n) .announcement-feed-accent { background:#e2ac3c; }
.announcement-feed-main strong { color:var(--ink); }
.announcement-feed-row.is-pinned .announcement-feed-main strong { color:var(--ink); }
.announcement-feed-main time { color:#8995a5; }
.announcement-feed-arrow { color:#8b98a8; }
.announcement-detail-head { color:#7b899a; }
.announcement-detail-title { color:var(--ink); }
.announcement-modal .announcement-content { color:#3e4b5d; }
.announcement-modal .announcement-today { color:#69778a; }
.announcement-modal .modal-confirm { background:var(--brand-dark); color:#fff; }
.qq-panel { width:270px; border:1px solid #dce3ed; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(21,35,58,.18); }
.qq-panel-head { padding:12px 13px; border-bottom:1px solid #e3e8ef; }
.qq-panel-head strong { color:var(--ink); }
.qq-panel-close { color:#8793a3; }
.qq-panel-close:hover { background:#f0f3f7; color:var(--ink); }
.qq-panel-qr { width:calc(100% - 24px); margin:12px; object-fit:contain; background:#fff; }
.qq-panel-number { padding:11px 12px 13px; border-top:1px solid #e3e8ef; }
.qq-panel-number small { color:#8793a3; }
.qq-panel-number strong { color:var(--ink); }
.qq-panel-number .btn-primary { background:var(--brand-dark); color:#fff; }
.qq-popup-anchor .qq-panel { top:calc(100% + 8px); right:0 !important; left:auto; transform:none; box-sizing:border-box; }
.qq-panel-qr { display:block; box-sizing:border-box; width:calc(100% - 24px); max-width:calc(100% - 24px); height:auto; margin:12px auto; object-fit:contain; object-position:center; }
@media (max-width:700px) {
  .announcement-overlay { padding:62px 8px 8px; }
  .announcement-modal { width:calc(100vw - 16px); max-height:calc(100svh - 70px); }
  .qq-popup-anchor .qq-panel { right:0 !important; width:248px; }
}

.card { background:rgba(255,255,255,.96); border:1px solid rgba(221,227,237,.92); border-radius:var(--radius-card); box-shadow:var(--shadow); }
.catalog-card { grid-column:1 / -1; }
.catalog-toolbar, .catalog-row-actions { display:flex; align-items:center; gap:8px; }
.catalog-toolbar { flex-wrap:wrap; }
.catalog-table th, .catalog-table td { padding:12px 10px; }
.catalog-table td:first-child { white-space:normal; min-width:190px; max-width:270px; }
.catalog-table th:nth-child(2), .catalog-table th:nth-child(3), .catalog-table th:nth-child(4) { min-width:74px; }
.catalog-row-actions { gap:4px; flex-wrap:wrap; }
.catalog-row-actions .btn { padding:5px 9px; min-height:30px; font-size:12px; }
.catalog-name-cell { min-width:190px; }
.catalog-model-name { display:flex; align-items:flex-start; gap:8px; }
.catalog-drag-handle { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border:1px solid #e2e8f2; border-radius:7px; background:#f8faff; color:#66758d; cursor:grab; font-size:17px; line-height:1; }
.catalog-drag-handle:active { cursor:grabbing; }
.catalog-drag-handle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.catalog-row-actions .btn:disabled { opacity:.4; cursor:not-allowed; }
.catalog-table [data-model-row].is-dragging { opacity:.45; }
.catalog-table [data-model-row].is-drop-target > td { background:#eef4ff; }
.catalog-upstream { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.catalog-status { color:var(--muted); font-size:12px; }
.catalog-status.is-enabled { color:#187451; }
.catalog-per-call { display:block; margin-top:3px; color:var(--muted); }
.catalog-details > td { background:#f8faff; padding:12px 16px; }
.catalog-route-list { display:grid; gap:8px; }
.catalog-route-list .provider-route-group { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; margin:0; padding:10px 0; border:0; background:transparent; }
.catalog-route-heading, .catalog-route-choices, .catalog-route-choice, .catalog-route-choice label { display:flex; align-items:center; gap:8px; }
.catalog-route-choices { flex-wrap:wrap; }
.catalog-route-choice { min-height:38px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.catalog-route-choice label { cursor:pointer; font-size:12px; }
.catalog-route-choice label small { max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.catalog-route-choice input { width:15px; height:15px; min-height:0; padding:0; }
.catalog-backdrop { position:fixed; inset:0; z-index:76; display:grid; place-items:center; overflow:auto; padding:24px; background:rgba(13,24,44,.46); backdrop-filter:blur(4px); }
.catalog-dialog { width:min(520px,100%); max-height:calc(100svh - 48px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(13,31,65,.25); }
.catalog-model-dialog { width:min(760px,100%); }
.catalog-dialog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.catalog-dialog-heading h3 { font-size:20px; }
.catalog-dialog-heading .icon-btn { width:36px; height:36px; font-size:22px; }
.catalog-form { display:grid; gap:20px; }
.catalog-form label { display:grid; gap:7px; font-size:13px; font-weight:600; }
.catalog-form input:not([type="checkbox"]), .catalog-form select { width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid #d8e0eb; border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }
.catalog-form input:focus-visible, .catalog-form select:focus-visible, .catalog-advanced summary:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.catalog-form-top { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.catalog-price-head, .catalog-price-row { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:14px; padding:8px 0; }
.catalog-price-head { color:var(--muted); font-size:12px; }
.catalog-prices { padding:10px 16px; border:1px solid var(--line); border-radius:12px; background:#f8faff; }
.catalog-form .catalog-check { display:flex; align-items:center; gap:9px; font-weight:500; }
.catalog-check input { width:17px; height:17px; min-height:0; padding:0; margin:0; }
.catalog-spec-routes { padding-top:16px; border-top:1px solid var(--line); }
.catalog-spec-routes-heading { margin-bottom:12px; }
.catalog-spec-routes-heading h4 { margin:0; font-size:14px; }
.catalog-spec-routes-heading p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.catalog-override { display:grid; grid-template-columns:64px minmax(140px,1fr) minmax(180px,1.25fr); align-items:center; gap:10px; margin-top:10px; font-size:12px; }
.catalog-override[hidden] { display:none; }
.catalog-override > strong { font-size:13px; }
.catalog-model-id { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.catalog-model-id .btn { white-space:nowrap; }
.catalog-sale { margin:0; }
.catalog-dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; border-top:1px solid var(--line); }
.catalog-connection-list { display:grid; gap:10px; margin-bottom:20px; }
.catalog-connection-note { margin:0 0 12px; }
.catalog-connection-list > div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.catalog-connection-list > div > div { flex:1; min-width:0; }
.catalog-connection-list strong, .catalog-connection-list small { display:block; overflow-wrap:anywhere; }
.catalog-connection-list small { margin-top:4px; color:var(--muted); font-size:12px; }
.catalog-connection-list .catalog-model-cache-status { color:#53637c; }
.dashboard { padding:25px 0 62px; }
.dashboard-head { display:flex; justify-content:space-between; gap:15px; align-items:flex-end; margin-bottom:22px; }
.dashboard-head p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.announcement { background:#eef2ff; border:1px solid #d5dffd; color:var(--brand-dark); padding:12px 15px; border-radius:12px; font-size:13px; }
.workspace { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 380px); gap:22px; align-items:start; }
.workspace-scroll { align-items:stretch; }
.workspace-scroll > .form-card, .workspace-scroll > .status-card { min-height:0; }
.workspace-scroll > .status-card { position:relative; top:auto; display:flex; flex-direction:column; max-height:calc(100vh - 112px); overflow:hidden; }
.form-card { padding:28px; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:21px; }
.balance { background:#f0f5ff; color:var(--brand-dark); border:1px solid #d7e4ff; border-radius:12px; padding:10px 13px; text-align:right; white-space:nowrap; }
.balance small { display:block; color:var(--muted); font-size:11px; margin-bottom:2px; }
.balance strong { font-size:20px; }
.field { margin:17px 0; }
.field > label:not(.upload) { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:700; font-size:13px; margin-bottom:8px; }
.field > label:not(.upload) > span { color:var(--muted); font-weight:400; }
textarea, input, select { width:100%; border:1px solid #d8e0eb; background:#fbfcfe; color:var(--ink); border-radius:var(--radius-control); padding:12px 13px; outline:none; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input, select { min-height:46px; }
textarea:hover, input:hover, select:hover { border-color:#b9c7da; background-color:#fff; }
select { appearance:none; padding-right:42px; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, #62718a 50%), linear-gradient(135deg, #62718a 50%, transparent 50%); background-position:calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px); background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
textarea { min-height:150px; resize:vertical; line-height:1.6; }
textarea:focus, input:not([type="radio"]):not([type="checkbox"]):focus, select:focus { border-color:#4b84f2; box-shadow:0 0 0 4px rgba(23,97,232,.13); background:#fff; }
.prompt-editor { width:100%; min-height:150px; max-height:420px; overflow-y:auto; resize:vertical; border:1px solid #d8e0eb; background:#fbfcfe; color:var(--ink); border-radius:var(--radius-control); padding:12px 13px; outline:none; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.prompt-editor:hover { border-color:#b9c7da; background-color:#fff; }
.prompt-editor:focus { border-color:#4b84f2; box-shadow:0 0 0 4px rgba(23,97,232,.13); background:#fff; }
.prompt-editor:empty::before { content:attr(data-placeholder); color:#8a96a8; pointer-events:none; }
.prompt-editor .prompt-highlight { color:#1f4fc1; font-weight:800; background:#eaf1ff; border-radius:4px; padding:1px 2px; }
.control-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.control-grid .field-model { grid-column:1 / -1; }
.custom-ratio { margin-top:8px; }
.custom-ratio label { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-bottom:6px; }
.custom-ratio input { padding:9px 10px; font-size:12px; }
.upload { border:1px dashed #b8c5d8; border-radius:12px; min-height:78px; padding:15px 16px; display:flex; align-items:center; justify-content:flex-start; gap:13px; color:var(--muted); background:#fafcff; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.upload:hover { border-color:var(--brand); background:#f3f7ff; box-shadow:0 0 0 3px rgba(23,97,232,.06); }
.upload.is-dragging { border-color:var(--brand); background:#eaf2ff; box-shadow:0 0 0 4px rgba(23,97,232,.1); }
.upload input { display:none; }
.upload-icon { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#edf3ff; color:var(--blue); font-size:19px; }
.upload-preview { width:52px; height:52px; border-radius:9px; object-fit:cover; }
.form-footer { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid #edf0f5; }
.balance-footer { display:flex; align-items:baseline; gap:7px; color:var(--muted); font-size:12px; }
.balance-footer strong { color:var(--ink); font-size:16px; }
.small-muted { font-size:12px; color:var(--muted); line-height:1.5; }
.btn { border:0; border-radius:10px; min-height:42px; padding:10px 16px; font-weight:750; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, color .18s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:3px solid rgba(23,97,232,.22); outline-offset:2px; }
.btn-primary { background:#111b2d; color:#fff; box-shadow:0 5px 12px rgba(16,24,39,.12); }
.btn-primary:hover { filter:brightness(1.12); box-shadow:0 8px 18px rgba(16,24,39,.16); }
.btn-brand { background:linear-gradient(115deg, #1461e8 0%, #5d50e6 100%); background-color:#315cdb; color:#ffffff; box-shadow:0 7px 16px rgba(53,83,214,.22); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; will-change:transform, filter; }
.btn-brand:hover { filter:brightness(1.06) saturate(1.04); box-shadow:0 9px 20px rgba(53,83,214,.27); }
.btn-brand:active { filter:brightness(.98); box-shadow:0 4px 9px rgba(53,83,214,.2); }
.btn-ghost { background:#f1f4f8; color:var(--ink); }
.btn-ghost:hover { background:#e8eef6; }
.btn-danger { background:#fff0f0; color:var(--danger); }
.btn-danger:hover { background:#ffe4e4; color:#b63737; }
.btn-small { min-height:34px; padding:7px 11px; font-size:12px; }
.btn:disabled { cursor:not-allowed; opacity:.55; transform:none; }
.status-card { padding:24px; position:sticky; top:90px; }
.status-card h3 { margin-bottom:16px; }
.workspace-task-list { display:grid; align-content:start; gap:14px; min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:4px; }
.workspace-task-item { min-width:0; }
.workspace-task-item .task-preview { border-radius:10px; }
.empty-state { border:1px dashed #ccd5e2; border-radius:14px; padding:27px 18px; color:var(--muted); font-size:13px; text-align:center; }
.task-preview { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.task-image-frame { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f4f6fa; }
.task-image-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; }
.task-image-loading span { width:14px; height:14px; border:2px solid #dce4ef; border-top-color:var(--brand); border-radius:50%; animation:button-spin .8s linear infinite; }
.task-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#edf1f7; cursor:zoom-in; transition:filter .2s ease; }
.task-preview img[hidden] { display:none; }
.task-preview img:hover { filter:brightness(.94); }
.task-preview img:focus-visible { outline:3px solid rgba(23,97,232,.35); outline-offset:-3px; }
.task-info { padding:13px; }
.task-result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.task-result-actions .btn { min-width:0; white-space:nowrap; }
.history-image-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:150px; }
.task-row { display:flex; justify-content:space-between; gap:9px; align-items:center; }
.task-model { font-weight:800; font-size:13px; }
.task-size { font-size:11px; color:var(--muted); }
.status { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; font-size:11px; white-space:nowrap; }
.status-queued, .status-running { background:#eef4ff; color:#3763c2; }
.status-succeeded { background:#edf4ff; color:#2853c8; }
.status-refunded, .status-failed { background:#fff0f0; color:#b03c3c; }
.progress { height:7px; background:#edf1f7; border-radius:20px; overflow:hidden; margin:16px 0 8px; }
.progress i { display:block; height:100%; width:38%; background:linear-gradient(90deg, var(--brand), #a477ff); border-radius:20px; animation:progress 1.35s ease-in-out infinite; }
@keyframes progress { 0% { transform:translateX(-130%); } 100% { transform:translateX(360%); } }
.btn-spinner { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:inline-block; vertical-align:-2px; animation:button-spin .7s linear infinite; }
@keyframes button-spin { to { transform:rotate(360deg); } }
.task-placeholder { aspect-ratio:4/3; display:grid; place-items:center; align-content:center; gap:8px; background:#f4f6fa; color:var(--muted); text-align:center; padding:20px; }
.task-placeholder-icon { font-size:34px; color:var(--brand); }
.prompt-library { margin-top:22px; padding:24px; }
.inspiration-page .prompt-library { margin-top:0; }
.prompt-library-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.prompt-library-heading h2, .prompt-library-heading h3 { margin-top:3px; font-size:20px; }
.prompt-library-total { color:var(--muted); font-size:12px; }
.prompt-library-tabs { display:flex; gap:7px; margin-bottom:18px; padding-bottom:2px; overflow-x:auto; scrollbar-width:thin; }
.prompt-library-tab { flex:0 0 auto; border:1px solid #dfe5ef; border-radius:999px; padding:7px 13px; background:#f8faff; color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.prompt-library-tab:hover, .prompt-library-tab.active { border-color:#bdd0ff; background:#edf3ff; color:var(--brand-dark); }
.prompt-library-tab:focus-visible { outline:3px solid rgba(23,97,232,.24); outline-offset:2px; }
.prompt-library-tab:active { transform:translateY(1px); }
.prompt-library-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; min-height:180px; align-items:start; }
.prompt-card { min-width:0; overflow:hidden; border:1px solid #e1e6ef; border-radius:14px; background:#fff; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.prompt-card:hover { transform:translateY(-2px); border-color:#c8d6f6; box-shadow:0 10px 24px rgba(32,63,120,.1); }
.prompt-card-preview { display:flex; align-items:flex-start; justify-content:center; min-height:220px; overflow:hidden; background:transparent; }
.prompt-card-preview img { width:100%; height:auto; display:block; object-fit:contain; }
.prompt-card-body { display:grid; flex:1; gap:8px; padding:12px; }
.prompt-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; white-space:nowrap; }
.prompt-card-meta span:first-child { overflow:hidden; text-overflow:ellipsis; }
.prompt-card-body h4 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:750; }
.prompt-card-description { margin:0; min-height:33px; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.prompt-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.prompt-card-actions .btn { min-width:0; padding-inline:8px; font-size:11px; }
.prompt-library-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.prompt-library-pagination span { color:var(--muted); font-size:12px; }
.prompt-library-empty { grid-column:1 / -1; min-height:180px; display:grid; place-items:center; align-content:center; gap:10px; border:1px dashed #ccd5e2; border-radius:14px; color:var(--muted); font-size:13px; }
.model-introductions { display:grid; gap:24px; margin-top:30px; }
.model-introductions-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.model-introductions-heading h2 { margin-top:4px; font-size:22px; }
.model-introductions-heading > span { color:var(--muted); font-size:12px; }
.model-intro-series { display:grid; gap:12px; }
.model-intro-series > h3 { padding-bottom:9px; border-bottom:1px solid var(--line); font-size:16px; }
.model-intro-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.model-intro-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.model-intro-card h4 { margin:0 0 8px; overflow-wrap:anywhere; font-size:14px; line-height:1.4; }
.model-intro-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }

.section { padding:24px 0 62px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.section-head p { color:var(--muted); margin:7px 0 0; font-size:13px; }
.table-wrap { overflow:auto; }
.history-pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px; border-top:1px solid var(--line); }
.history-pagination span { color:var(--muted); font-size:13px; }
.history-points { font-weight:700; white-space:nowrap; }
table { width:100%; border-collapse:collapse; font-size:13px; min-width:700px; }
th, td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; background:#fafbfd; }
@media (hover:hover) {
  .admin-card tbody tr:not(.skeleton-row):hover td { background:#fbfcff; }
}
.skeleton-row td { height:66px; }
.skeleton-line { display:block; width:72px; height:10px; border-radius:999px; background:linear-gradient(90deg,#edf1f7 25%,#f8fafc 50%,#edf1f7 75%); background-size:200% 100%; animation:skeleton-shimmer 1.25s ease-in-out infinite; }
.skeleton-line-wide { width:min(260px, 90%); }
.skeleton-line-short { width:110px; margin-top:8px; }
@keyframes skeleton-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.prompt-cell { max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:20px; font-variant-numeric:tabular-nums; }
.stat { padding:20px; min-height:112px; display:flex; flex-direction:column; justify-content:space-between; }
.stat small { color:var(--muted); font-size:12px; }
.stat strong { display:block; font-size:28px; margin-top:7px; letter-spacing:-.05em; }
.profile-stack { width:min(820px,100%); display:grid; gap:18px; margin:0 auto; }
.profile-overview { display:grid; gap:20px; }
.profile-overview .metric-list { margin:0; }
.profile-overview .profile-logout { margin-top:0; }
.profile-card { padding:23px; }
.profile-about { display:flex; flex-direction:column; }
.profile-list { display:grid; gap:15px; margin:2px 0 22px; }
.profile-list > div { display:flex; justify-content:space-between; gap:18px; padding-bottom:13px; border-bottom:1px solid var(--line); font-size:13px; }
.profile-list span { color:var(--muted); }
.profile-list strong { text-align:right; word-break:break-word; }
.profile-logout { margin-top:22px; align-self:flex-start; }
.benefits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:18px; margin-top:18px; }
.benefit-card { display:flex; flex-direction:column; min-width:0; padding:23px; }
.benefit-copy { min-height:4.5em; margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.65; }
.redeem-form { margin-top:auto; }
.redeem-row { display:flex; gap:8px; align-items:center; margin-top:0; }
.redeem-row input { min-width:0; }
.redeem-row .btn { flex:0 0 auto; min-height:46px; align-self:flex-end; }
.promo-state { flex:0 0 auto; padding:5px 9px; border:1px solid #ccebd9; border-radius:6px; background:#edf8f1; color:#237447; font-size:11px; font-weight:700; line-height:1.4; white-space:nowrap; }
.purchase-actions { display:flex; align-items:center; gap:10px; margin-top:auto; flex-wrap:wrap; }
.purchase-actions .btn { min-width:138px; min-height:46px; }
.purchase-shop-qr { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:12px; text-decoration:none; }
.purchase-shop-qr img { width:174px; max-width:100%; height:auto; padding:12px; background:#fff; image-rendering:pixelated; box-sizing:border-box; }
.purchase-actions { align-items:center; justify-content:space-between; }
.catalog-route-heading { flex-wrap:wrap; }
.catalog-ratio-mode { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; }
.catalog-ratio-mode select { width:auto; max-width:100%; }
.usage-card { padding:23px; margin-bottom:18px; }
.usage-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.usage-card-head p { color:var(--muted); margin:6px 0 0; font-size:12px; }
.usage-switch { display:flex; padding:3px; background:#f1f4f8; border-radius:8px; }
.usage-switch button { border:0; background:transparent; color:var(--muted); padding:7px 10px; border-radius:6px; font-size:12px; }
.usage-switch button.active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(24,38,64,.08); }
.usage-switch button:focus-visible, .mobile-more-list > button:focus-visible { outline:3px solid rgba(23,97,232,.24); outline-offset:2px; }
.usage-layout { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center; }
.usage-donut-wrap { display:grid; justify-items:center; gap:5px; }
.usage-donut { width:190px; height:190px; overflow:visible; }
.usage-segment { transition:stroke-dasharray .2s ease; }
.usage-donut-value { fill:var(--ink); font-size:20px; font-weight:800; }
.usage-donut-label { fill:var(--muted); font-size:10px; }
.usage-summary { display:flex; align-items:baseline; gap:7px; color:var(--muted); font-size:12px; }
.usage-summary strong { color:var(--ink); font-size:14px; }
.usage-legend { display:grid; gap:4px; }
.usage-legend-row { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 10px; border-bottom:1px solid var(--line); }
.usage-legend-row:last-child { border-bottom:0; }
.usage-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; }
.usage-legend-main { min-width:0; flex:1; display:grid; gap:3px; }
.usage-legend-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.usage-legend-main span { color:var(--muted); font-size:11px; }
.usage-legend-row b { font-size:12px; color:var(--muted); }
.usage-empty { border:1px dashed #ccd5e2; border-radius:10px; padding:28px 16px; color:var(--muted); text-align:center; font-size:13px; }
.profile-card, .admin-card { padding:23px; }
.profile-big { display:flex; align-items:center; gap:13px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.profile-big .avatar { width:47px; height:47px; font-size:18px; }
.profile-big strong { display:block; font-size:18px; }
.profile-big span { color:var(--muted); font-size:12px; }
.metric-list { display:grid; gap:11px; }
.metric-line { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.metric-line strong { color:var(--ink); }
.login-shell { min-height:calc(100vh - 72px); display:grid; place-items:center; padding:40px 0; }
.auth-card { width:min(450px, 90vw); padding:30px; }
.auth-card h2 { margin-bottom:8px; }
.auth-card > p { color:var(--muted); font-size:13px; line-height:1.6; margin-top:0; }
.auth-switch { border:0; background:transparent; color:var(--blue); padding:0; }
.reference-picker { display:grid; gap:10px; }
.reference-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.reference-thumb { position:relative; aspect-ratio:1; min-width:0; overflow:hidden; border:1px solid #d8e0eb; border-radius:12px; background:#edf1f7; }
.reference-thumb .upload-preview { width:100%; height:100%; border-radius:0; object-fit:cover; }
.reference-remove { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:26px; height:26px; padding:0; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(19,29,48,.78); color:#fff; font-size:17px; line-height:1; cursor:pointer; }
.reference-remove:hover { background:#13203a; }
.reference-add { min-height:70px; }
.admin-grid { display:grid; gap:20px; }
.admin-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.admin-toolbar .field { margin:0; min-width:130px; }
.admin-upstream-link { display:flex; gap:6px; align-items:center; flex-wrap:wrap; white-space:nowrap; }
.admin-upstream-link a { color:var(--brand-dark); font-size:12px; font-weight:700; }
.settings-form { display:grid; gap:16px; }
.settings-topline { display:grid; grid-template-columns:minmax(220px, 280px) minmax(240px, 1fr); gap:14px; align-items:stretch; }
.settings-form .field { margin:0; display:flex; flex-direction:column; }
.settings-form .field select { flex:1; min-height:44px; }
.settings-form .settings-submit { justify-self:start; min-width:170px; }
.provider-picker { border-top:1px solid #e3e8f0; padding-top:15px; }
.provider-picker-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.provider-picker-head strong { display:block; font-size:13px; }
.provider-picker-head small { display:block; color:var(--muted); margin-top:4px; line-height:1.4; }
.provider-route-group + .provider-route-group { margin-top:16px; }
.provider-route-group-title { color:#66758d; font-size:11px; font-weight:700; letter-spacing:.04em; margin-bottom:7px; text-transform:uppercase; }
.provider-route-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.provider-route { border:1px solid #d9e1ed; border-radius:10px; padding:9px 10px; background:#fbfcfe; transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.provider-route.is-selected { border-color:#7fa8ee; background:#f4f8ff; box-shadow:0 4px 14px rgba(38,72,135,.08); }
.provider-route.is-disabled { opacity:.62; }
.provider-route-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.provider-route-head label { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; cursor:pointer; }
.provider-route-head input { accent-color:var(--brand-dark); }
.provider-route-actions, .provider-group-actions { display:flex; align-items:center; gap:6px; }
.provider-route-actions .icon-btn { min-width:28px; min-height:28px; padding:0; border:1px solid #d9e1ed; background:#fff; }
.provider-route-actions .icon-btn.danger { color:#c44747; }
.provider-group-actions { margin-left:auto; }
.provider-route-group-title { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#273754; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; }
.provider-empty { padding:18px; border:1px dashed #cfd8e7; border-radius:10px; color:#72809a; text-align:center; }
.provider-editor-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(15,25,45,.42); }
.provider-editor { width:min(520px,100%); padding:22px; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(15,25,45,.25); }
.provider-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.provider-editor-head h3 { margin:0; }
.provider-editor-form { display:grid; gap:14px; }
.provider-editor-form label { display:grid; gap:7px; font-weight:700; color:var(--ink); }
.provider-editor-form input { width:100%; min-height:44px; padding:10px 12px; border:1px solid #d5deeb; border-radius:10px; font:inherit; }
.provider-editor-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.settings-submit { min-height:44px; }
.announcement-editor textarea { min-height:190px; font-family:inherit; }
.code-output { background:#101827; color:#d6f5b4; padding:13px; border-radius:12px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; line-height:1.7; white-space:pre-wrap; margin-top:14px; }
.notice { padding:12px 14px; background:#fff8e5; border:1px solid #f1dfab; color:#815d12; border-radius:12px; font-size:12px; line-height:1.6; }
.codex-tutorial { padding:23px; }
.agent-prompt-panel { margin-bottom:18px; }
.agent-prompt-panel .tutorial-head { align-items:center; }
.agent-prompt-panel .tutorial-head h3 { margin:0; }
.agent-prompt-panel .prompt-box { max-height:360px; }
.tutorial-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.tutorial-head p { color:var(--muted); font-size:13px; line-height:1.7; margin:8px 0 0; }
.prompt-box { margin:14px 0 0; padding:16px; max-height:520px; overflow:auto; background:#101827; color:#d6f5b4; border-radius:13px; font:12px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-word; }
.toast { position:fixed; right:22px; bottom:22px; background:#101827; color:#fff; padding:12px 15px; border-radius:11px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.25s; z-index:50; max-width:min(360px, 90vw); font-size:13px; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translateY(0); }
.footer { color:var(--muted); text-align:center; font-size:12px; padding:0 0 35px; }
.site-registration { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px; padding:16px 16px 24px; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; }
.site-registration a { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:26px; }
.site-registration img { display:block; width:16px; height:16px; flex-shrink:0; object-fit:contain; }
.site-registration a:hover { color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px; }
.site-registration a:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:3px; }
@media (max-width:700px) {
  .site-registration { flex-direction:column; gap:2px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  body:has(.mobile-nav) .site-registration { padding-bottom:calc(24px + var(--mobile-nav-height, 64px) + env(safe-area-inset-bottom)); }
}
.announcement-overlay { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; background:rgba(16,24,39,.28); }
.lightbox-overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:28px; background:rgba(8,14,26,.76); backdrop-filter:blur(8px); }
.lightbox-panel { width:min(1080px,94vw); max-height:92vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.32); }
.lightbox-toolbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px 12px 20px; border-bottom:1px solid var(--line); }
.lightbox-toolbar h2 { font-size:17px; letter-spacing:-.02em; }
.lightbox-image-wrap { min-height:260px; display:grid; place-items:center; overflow:auto; padding:20px; background:#eef1f5; }
.lightbox-image-wrap img { display:block; max-width:100%; max-height:calc(92vh - 150px); object-fit:contain; border-radius:10px; box-shadow:0 8px 30px rgba(16,24,39,.16); }
.lightbox-actions { display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--line); }
.announcement-modal { width:min(560px, 100%); padding:26px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 45px rgba(16,24,39,.16); }
.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-heading h3 { font-size:18px; }
.icon-btn { width:30px; height:30px; border:0; border-radius:7px; background:#f1f3f5; color:var(--muted); font-size:20px; line-height:1; }
.icon-btn:hover { background:#e9edf1; color:var(--ink); }
.announcement-content { margin:20px 0; max-height:min(52vh, 520px); overflow:auto; color:var(--ink); font-size:14px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.announcement-list { max-height:min(64vh, 620px); overflow:auto; }
.announcement-entry { padding:14px 0; border-bottom:1px solid var(--line); }
.announcement-entry:last-child { border-bottom:0; }
.announcement-entry.is-pinned { padding-top:8px; }
.announcement-entry-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.announcement-entry-head h4 { margin:0; font-size:15px; }
.announcement-entry-head time { color:var(--muted); font-size:12px; }
.announcement-entry details summary { margin-top:9px; color:var(--brand-dark); cursor:pointer; font-size:13px; }
.announcement-entry .announcement-content { margin:10px 0 2px; }
.qq-popup-anchor { position:relative; display:inline-flex; }
.qq-group-button { min-width:48px; }
.qq-popup { position:absolute; top:calc(100% + 8px); right:0; z-index:55; width:220px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(16,24,39,.18); }
.qq-popup img { display:block; width:100%; height:auto; border-radius:8px; }
.qq-popup-number { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:var(--ink); font-size:12px; }
.activity-trigger { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 11px; border:1px solid #f0b323; border-radius:9px; background:#fff8df; color:#9a6200; font-size:12px; font-weight:800; cursor:pointer; transition:transform .18s ease, background-color .18s ease, border-color .18s ease; }
.activity-trigger:hover { transform:translateY(-1px); background:#fff1b8; border-color:#e29b0b; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.14); }
.activity-overlay { position:fixed; inset:0; z-index:42; display:grid; place-items:center; padding:20px; background:rgba(16,24,39,.28); }
.activity-modal { width:min(620px,100%); max-height:min(82vh,760px); overflow:auto; padding:24px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 45px rgba(16,24,39,.16); }
.activity-modal-kicker, .activity-kicker { color:#a16b05; font-size:11px; font-weight:800; letter-spacing:.06em; }
.activity-modal h3 { margin-top:3px; font-size:20px; }
.activity-list { margin:16px 0 20px; }
.activity-entry { padding:16px; border:1px solid #e4e9f1; border-left:4px solid #4f7fe8; border-radius:12px; background:#fbfcff; }
.activity-entry + .activity-entry { margin-top:12px; }
.activity-entry.is-pinned { box-shadow:0 5px 16px rgba(37,77,150,.08); }
.activity-entry-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.activity-entry-head h4 { margin:3px 0 0; font-size:17px; }
.activity-entry-head time { color:var(--muted); font-size:11px; white-space:nowrap; }
.activity-summary { margin:9px 0 0; color:#4c5d73; font-size:13px; font-weight:650; }
.activity-content { margin:13px 0; color:var(--ink); font-size:14px; line-height:1.75; white-space:normal; overflow-wrap:anywhere; }
.activity-image-block { margin:14px 0; }
.activity-image-block img { display:block; width:100%; max-height:360px; object-fit:cover; border-radius:10px; border:1px solid #e1e6ef; }
.activity-gallery { display:flex; gap:10px; margin:14px 0; padding:2px 2px 10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.activity-gallery img { flex:0 0 min(78%, 360px); aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; border:1px solid #e1e6ef; scroll-snap-align:start; }
.activity-gallery:focus-visible { outline:2px solid rgba(23,97,232,.45); outline-offset:3px; }
.activity-gallery-wrap { position:relative; display:flex; align-items:center; gap:4px; }
.activity-gallery-wrap .activity-gallery { min-width:0; flex:1; }
.activity-gallery-control { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; padding:0 0 2px; border:1px solid #d6dfec; border-radius:50%; background:#fff; color:#35557c; font-size:22px; line-height:1; box-shadow:0 3px 8px rgba(35,63,101,.1); cursor:pointer; }
.activity-gallery-control:hover { background:#f2f6fb; border-color:#a8bdd8; }
.activity-gallery-control:focus-visible { outline:2px solid rgba(23,97,232,.4); outline-offset:2px; }
.announcement-overlay { background:rgba(7,10,15,.62); }
.announcement-modal { width:min(590px,100%); max-height:min(78vh,720px); padding:0; overflow:hidden; border:1px solid #414752; border-radius:13px; background:#202122; color:#f5f7fb; box-shadow:0 24px 70px rgba(0,0,0,.38); }
.announcement-modal .modal-heading { min-height:58px; padding:0 17px; border-bottom:1px solid #43464c; }
.announcement-modal .modal-heading h3 { color:#f5f7fb; font-size:19px; }
.panel-kicker { display:block; color:#9ca5b2; font-size:10px; font-weight:800; letter-spacing:.12em; }
.announcement-modal .modal-close { background:transparent; color:#9da4ad; }
.announcement-modal .modal-close:hover { background:#303236; color:#fff; }
.announcement-list { max-height:min(66vh,620px); overflow:auto; }
.announcement-feed { display:flex; flex-direction:column; }
.announcement-feed-row { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:76px; padding:13px 16px; border:0; border-bottom:1px solid #41444a; background:transparent; color:#f2f4f8; text-align:left; cursor:pointer; }
.announcement-feed-row:hover, .announcement-feed-row:focus-visible { background:#2a2c30; outline:none; }
.announcement-feed-accent { width:3px; align-self:stretch; border-radius:4px; background:#7cc4ff; }
.announcement-feed-row:nth-child(2n) .announcement-feed-accent { background:#f4c35e; }
.announcement-feed-main { min-width:0; display:flex; flex:1; flex-direction:column; gap:6px; }
.announcement-feed-main strong { overflow:hidden; font-size:14px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.announcement-feed-main time { color:#9da5af; font-size:12px; }
.announcement-feed-arrow { color:#8e969f; font-size:24px; line-height:1; }
.announcement-feed-row.is-pinned .announcement-feed-main strong { color:#fff; }
.announcement-detail-head { display:flex; align-items:center; justify-content:space-between; padding:14px 17px 0; color:#a9b1bb; font-size:12px; }
.announcement-back { padding:0; border:0; background:transparent; color:#9bcfff; font:inherit; cursor:pointer; }
.announcement-detail-title { margin:14px 17px 0; color:#fff; font-size:18px; line-height:1.45; }
.announcement-modal .announcement-content { margin:15px 17px 20px; color:#d8dce2; font-size:14px; line-height:1.85; }
.announcement-modal .announcement-today { margin:0 17px 18px; color:#aeb5be; }
.announcement-modal .modal-confirm { width:calc(100% - 34px); margin:0 17px 17px; background:#f0f2f5; color:#202122; }
.qq-panel { position:absolute; top:calc(100% + 9px); right:0; z-index:55; width:278px; padding:0; overflow:hidden; border:1px solid #414752; border-radius:13px; background:#202122; color:#f5f7fb; box-shadow:0 18px 45px rgba(0,0,0,.26); }
.qq-panel-head { display:flex; align-items:center; gap:10px; padding:13px 14px 11px; border-bottom:1px solid #41444a; }
.qq-panel-head strong { flex:1; font-size:15px; }
.qq-panel-close { width:28px; height:28px; background:transparent; color:#9da4ad; }
.qq-panel-close:hover { background:#303236; color:#fff; }
.qq-panel-copy { padding:12px 14px 10px; color:#aeb5be; font-size:12px; line-height:1.55; }
.qq-panel-qr { display:block; width:calc(100% - 28px); margin:0 14px; border-radius:8px; background:#fff; }
.qq-panel-number { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 14px; }
.qq-panel-number small { display:block; color:#9da5af; font-size:11px; }
.qq-panel-number strong { display:block; margin-top:3px; color:#fff; font-size:15px; letter-spacing:.04em; }
.qq-panel-number .btn-primary { min-height:32px; background:#f0f2f5; color:#202122; }
@media (max-width:700px) {
  .announcement-modal { max-height:86svh; border-radius:20px 20px 0 0; }
  .announcement-feed-row { min-height:70px; padding:12px 14px; }
  .qq-panel { right:-8px; width:252px; }
}
.activity-meta { display:grid; grid-template-columns:66px 1fr; gap:8px; padding-top:9px; margin-top:9px; border-top:1px solid #e7ebf2; color:#4c5d73; font-size:13px; line-height:1.6; }
.activity-meta strong { color:var(--ink); }
.activity-empty { padding:28px 10px; color:var(--muted); text-align:center; }
.activity-tone-orange { border-left-color:#f59e0b; background:#fffaf0; }
.activity-tone-green { border-left-color:#22a06b; background:#f4fcf7; }
.activity-tone-pink { border-left-color:#e56591; background:#fff6f9; }
.activity-tone-purple { border-left-color:#8b5cf6; background:#faf7ff; }
.activity-admin-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(130px,.7fr) auto auto; gap:12px; align-items:end; }
.activity-admin-wide { grid-column:1 / -1; }
.activity-form, .activity-edit-form { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.activity-edit-form:first-of-type { margin-top:16px; }
@media (max-width:700px) {
  .activity-trigger { padding:7px 9px; }
  .activity-modal { width:100%; max-height:86svh; padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; }
  .activity-admin-grid { grid-template-columns:1fr; }
  .activity-admin-wide { grid-column:auto; }
  .activity-entry-head { display:block; }
  .activity-entry-head time { display:block; margin-top:6px; }
}
.announcement-admin-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(130px,.7fr) auto; gap:12px; align-items:end; }
.announcement-admin-wide { grid-column:1 / -1; }
.announcement-admin-grid .checkbox-field { display:flex; align-items:center; gap:6px; min-height:40px; color:var(--muted); font-size:13px; }
.announcement-admin-grid .checkbox-field input { width:auto; min-height:auto; }
.announcement-admin-actions { display:flex; gap:8px; }
.announcement-edit-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
@media (max-width:700px) {
  .announcement-admin-grid { grid-template-columns:1fr; }
  .announcement-admin-wide { grid-column:auto; }
  .qq-popup { right:-10px; width:200px; }
}
.modal-confirm { width:100%; }

@media (max-width: 900px) {
  .topbar { padding:0 4vw; }
  .nav button { padding:9px 8px; font-size:12px; }
  .hero { grid-template-columns:1fr; padding-top:48px; }
  .hero-art { min-height:280px; }
  .workspace { grid-template-columns:1fr; }
  .usage-layout { grid-template-columns:1fr; }
  .control-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .model-intro-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-form { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .benefits-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .topbar { height:auto; min-height:64px; flex-wrap:wrap; padding:12px 5vw; gap:10px; }
  .nav { order:3; width:100%; overflow:auto; }
  .top-actions { margin-left:auto; }
  .usage-card-head { display:grid; }
  .usage-switch { width:max-content; }
  .container { width:90vw; }
  h1 { font-size:45px; }
  .dashboard-head, .section-head { align-items:flex-start; flex-direction:column; }
  .form-card, .status-card, .profile-card, .admin-card, .benefit-card { padding:18px; }
  .form-footer { align-items:stretch; flex-direction:column; }
  .form-footer .btn { width:100%; }
  .task-placeholder { min-height:220px; }
  .tutorial-head { align-items:stretch; flex-direction:column; }
  .tutorial-head .btn { width:100%; }
  .stats-grid { gap:9px; }
  .stat { padding:14px; }
  .stat strong { font-size:23px; }
  .skeleton-row td { height:60px; }
  .skeleton-line-wide { width:180px; }
  .lightbox-overlay { padding:0; }
  .lightbox-panel { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
  .lightbox-image-wrap { padding:12px; }
  .lightbox-actions .btn { flex:1; }
}

.select-control { position:relative; min-width:0; width:100%; }
.select-native { position:absolute; width:1px; height:1px; min-height:0; padding:0; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.select-trigger { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border:1px solid #d8e0eb; border-radius:11px; background:#fbfcfe; color:var(--ink); text-align:left; transition:border-color .18s, box-shadow .18s, background-color .18s; }
.select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-trigger:hover { border-color:#a9bbd5; background:#fff; }
.select-trigger:focus-visible, .select-control.is-open .select-trigger { outline:0; border-color:#6394ed; box-shadow:0 0 0 3px #1761e812; background:#fff; }
.select-chevron { width:7px; height:7px; border-right:1.5px solid #7c8ba1; border-bottom:1.5px solid #7c8ba1; transform:rotate(45deg) translateY(-2px); flex-shrink:0; transition:transform .18s; }
.is-open .select-chevron { transform:rotate(225deg); }
.select-backdrop { display:none; }
.select-menu { display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:100%; width:max-content; max-width:min(360px,80vw); max-height:280px; overflow-y:auto; padding:6px; border:1px solid #e2e8f2; border-radius:13px; background:#fff; box-shadow:0 16px 44px #24365b24, 0 3px 8px #24365b0c; z-index:30; }
.select-control.is-open { z-index:31; }
.is-open .select-menu { display:block; animation:select-reveal .16s ease-out; }
.opens-up .select-menu { top:auto; bottom:calc(100% + 8px); }
.select-option { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:9px 12px; border:0; border-radius:8px; background:transparent; color:#42516a; text-align:left; white-space:nowrap; font-weight:400; }
.select-option:hover, .select-option:focus { outline:0; background:#f1f5fc; color:#235fcb; }
.select-option.is-selected { background:#eef4ff; color:#225ecb; font-weight:600; }
.select-option.is-selected::after { content:'✓'; font-size:13px; }
.select-option:disabled, .select-trigger:disabled { opacity:.45; cursor:not-allowed; }
.settings-form .select-control { margin-top:auto; }
.admin-toolbar > .select-control { width:180px; }
@keyframes select-reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

.mobile-nav, .mobile-sheet-overlay { display:none; }

@media (max-width: 700px) {
  :root { --mobile-nav-height:64px; --mobile-submit-height:0px; }
  html, body { max-width:100%; overflow-x:clip; }
  html { scroll-padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-submit-height) + 24px); }
  body { background:#f5f7fc; overscroll-behavior-y:none; }
  body.mobile-select-open { position:fixed; top:var(--mobile-select-scroll-top,0); left:0; right:0; width:100%; overflow:hidden; }
  .shell { padding-bottom:0; }
  .shell:has(.mobile-nav) { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .container { width:auto; margin:0 18px; }

  .topbar { height:58px; min-height:58px; padding:0 18px; flex-wrap:nowrap; gap:10px; border-bottom-color:#e8ebf2; box-shadow:none; }
  .topbar .nav { display:none; }
  .brand { gap:7px; }
  .brand-logo { width:40px; height:30px; }
  .brand-copy { font-size:16px; }
  .top-actions { margin-left:auto; gap:7px; }
  .notification-btn { width:40px; min-height:40px; padding:0; border-radius:12px; }
  .notification-btn span { display:none; }
  .bell-icon { width:18px; height:18px; }
  .avatar-button { padding:3px; }
  .avatar-button .avatar { width:34px; height:34px; }

  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:0; right:0; bottom:0; z-index:45; height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding:5px 18px calc(4px + env(safe-area-inset-bottom)); border-top:1px solid rgba(218,224,235,.9); background:rgba(255,255,255,.96); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 -8px 28px rgba(36,53,84,.07); }
  .mobile-nav button { position:relative; min-width:0; min-height:52px; display:grid; place-items:center; align-content:center; gap:1px; padding:4px 2px; border:0; border-radius:14px; background:transparent; color:#8290a6; font-size:10px; font-weight:650; -webkit-tap-highlight-color:transparent; }
  .mobile-nav button::before { content:""; position:absolute; inset:3px 9px 17px; border-radius:12px; background:linear-gradient(120deg,#e9f3ff,#f0ebff); opacity:0; transform:scale(.68,.76); transition:opacity .18s ease, transform .24s cubic-bezier(.2,.9,.25,1.2); }
  .mobile-nav button.active { color:#275fd0; }
  .mobile-nav button.active::before { opacity:1; transform:scale(1); }
  .mobile-nav button:focus-visible { outline:3px solid rgba(23,97,232,.24); outline-offset:-2px; }
  .mobile-nav svg { position:relative; z-index:1; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-nav svg circle { fill:currentColor; stroke:none; }
  .mobile-nav span { position:relative; z-index:1; }

  .mobile-sheet-overlay { position:fixed; inset:0; z-index:72; display:grid; align-items:end; background:rgba(10,18,32,.42); backdrop-filter:blur(3px); animation:mobile-fade .18s ease-out; }
  .mobile-more-sheet { max-height:min(76svh,640px); overflow:auto; padding:9px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fff; box-shadow:0 -20px 60px rgba(10,25,55,.2); animation:mobile-sheet-in .28s cubic-bezier(.2,.86,.22,1); }
  .mobile-sheet-handle { width:42px; height:5px; margin:0 auto 15px; border-radius:99px; background:#d8dde7; }
  .mobile-sheet-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
  .mobile-sheet-heading small { color:#718096; font-size:11px; font-weight:700; letter-spacing:.12em; }
  .mobile-sheet-heading h2 { margin-top:2px; font-size:24px; }
  .mobile-sheet-heading .icon-btn { width:40px; height:40px; border-radius:12px; }
  .mobile-more-list { display:grid; gap:8px; }
  .mobile-more-list > button { min-height:66px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 15px; border:1px solid #e7ebf2; border-radius:16px; background:#f8faff; color:var(--ink); text-align:left; }
  .mobile-more-list span { display:grid; gap:2px; font-weight:700; }
  .mobile-more-list small { color:var(--muted); font-weight:400; }
  .mobile-more-list b { color:#7790bc; font-size:24px; font-weight:400; }

  .hero { display:flex; flex-direction:column; gap:28px; padding:42px 0 32px; }
  .hero h1 { margin:11px 0 14px; font-size:clamp(46px,14vw,62px); line-height:.98; }
  .hero p { font-size:15px; line-height:1.75; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-actions .btn { min-height:48px; padding:10px; }
  .hero-art { width:100%; min-height:250px; padding:18px; border-radius:22px; }
  .art-window { border-radius:18px; padding:18px; }
  .art-title { margin-top:58px; font-size:32px; line-height:1.18; letter-spacing:-.015em; }

  .dashboard, .section { padding:22px 0 calc(32px + var(--mobile-nav-height)); }
  .dashboard { padding-bottom:calc(34px + var(--mobile-nav-height)); }
  .dashboard-head { margin-bottom:20px; }
  .dashboard-head .eyebrow, .dashboard-head p { display:none; }
  .dashboard-head h2, .section-head h2 { font-size:24px; line-height:1.25; letter-spacing:-.025em; }
  .dashboard-head p, .section-head p { line-height:1.55; }
  .eyebrow { font-size:10px; letter-spacing:.16em; }
  .workspace { display:flex; flex-direction:column; gap:20px; }
  .workspace-scroll > .form-card, .workspace-scroll > .status-card { min-height:0; max-height:none; overflow:visible; }
  .form-card, .status-card, .profile-card, .admin-card, .benefit-card, .usage-card { padding:20px; border-radius:22px; box-shadow:0 8px 26px rgba(34,59,100,.05); }
  .form-card { padding-bottom:20px; }
  .card-heading { margin-bottom:18px; }
  .card-heading h3, .status-card h3 { font-size:18px; }
  .field { margin:20px 0; }
  .field > label:not(.upload) { font-size:12px; }
  textarea { min-height:148px; padding:15px; border-radius:15px; font-size:16px; line-height:1.65; resize:none; }
  .prompt-editor { min-height:148px; max-height:52svh; padding:15px; border-radius:15px; font-size:16px; line-height:1.65; resize:none; }
  input, select, .select-trigger { min-height:48px; font-size:16px; }
  .upload { min-height:78px; padding:14px; border-radius:15px; background:#f8fbff; }
  .upload-icon { width:42px; height:42px; border-radius:13px; }
  .upload-preview { width:56px; height:56px; border-radius:12px; }
  .control-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .control-grid .field { min-width:0; margin:0; }
  .control-grid .select-trigger { padding:10px 12px; font-size:13px; }
  .custom-ratio input { font-size:14px; }
  .form-footer { position:static; height:auto; margin:24px 0 0; padding:14px; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; border:1px solid #e4e9f3; border-radius:17px; background:#f7f9fd; box-shadow:none; }
  .form-footer .btn { width:auto; flex:1; min-width:0; min-height:52px; border-radius:14px; }
  .balance-footer { flex:0 0 auto; display:grid; gap:2px; }
  .balance-footer span { font-size:11px; }
  .balance-footer strong { font-size:21px; line-height:1.1; }
  .status-card { position:static; order:2; }
  .status-card > h3 { margin-bottom:18px; }
  .workspace-task-list { overflow:visible; padding-right:0; }
  .task-preview { border-radius:16px; }
  .task-image-frame { aspect-ratio:1/1; }
  .task-preview img { object-fit:contain; background:#eef2f8; }
  .task-placeholder { min-height:210px; aspect-ratio:auto; border-radius:13px; }
  .task-info { padding:14px; }
  .task-info .btn { width:100%; min-height:46px; }
  .prompt-library { margin-top:20px; padding:18px; border-radius:22px; }
  .model-introductions { gap:20px; margin-top:24px; }
  .model-intro-grid { grid-template-columns:1fr; gap:9px; }
  .model-intro-card { padding:14px; }
  .prompt-library-heading { margin-bottom:14px; }
  .prompt-library-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .prompt-card-preview { min-height:160px; }
  .prompt-card-body { padding:10px; gap:7px; }
  .prompt-card-actions { grid-template-columns:1fr; gap:6px; }
  .prompt-card-actions .btn { width:100%; min-height:38px; }

  .select-control.is-open { z-index:82; }
  .select-control.is-open .select-backdrop { position:fixed; inset:0; z-index:80; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:rgba(10,18,32,.42); backdrop-filter:blur(3px); animation:mobile-fade .18s ease-out; cursor:default; }
  .select-menu, .opens-up .select-menu { position:fixed; z-index:81; left:10px; right:10px; top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); width:auto; min-width:0; max-width:none; max-height:min(70svh,560px); padding:10px 10px 12px; border-radius:24px; box-shadow:0 20px 70px rgba(10,25,55,.28); animation:mobile-sheet-in .26s cubic-bezier(.2,.86,.22,1); }
  .select-menu::before { content:attr(data-title); display:block; padding:8px 10px 13px; border-bottom:1px solid #edf0f5; color:#253047; font-size:17px; font-weight:750; }
  .select-option { min-height:52px; padding:12px 13px; border-radius:12px; font-size:15px; white-space:normal; }
  .select-option + .select-option { margin-top:3px; }

  .section-head { gap:12px; margin-bottom:15px; }
  .section-head > .btn { min-height:40px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
  .stat { min-height:102px; padding:15px; border-radius:17px; }
  .stat strong { font-size:25px; }
  .usage-card-head { gap:12px; }
  .usage-switch { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .usage-switch button { min-height:40px; }
  .usage-donut { width:165px; height:165px; }
  .usage-legend-row { min-height:57px; padding:9px 4px; }
  .benefits-grid { gap:12px; }
  .redeem-row { align-items:stretch; }
  .redeem-row { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .purchase-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .purchase-actions .btn { min-width:0; min-height:48px; padding:10px 8px; font-size:12px; white-space:nowrap; }

  .profile-big .avatar { width:52px; height:52px; }
  .profile-logout { width:100%; min-height:46px; }
  .profile-about .admin-toolbar { display:grid; }
  .profile-about .admin-toolbar .field { width:100%; }
  .profile-about .admin-toolbar .btn { min-height:48px; }

  .history-table-wrap { border:0; background:transparent; box-shadow:none; overflow:visible; }
  .history-table-wrap table { min-width:0; }
  .history-table-wrap thead { display:none; }
  .history-table-wrap tbody { display:grid; gap:10px; }
  .history-table-wrap tr { display:grid; grid-template-columns:1fr auto; gap:7px 12px; padding:15px; border:1px solid #e1e6ee; border-radius:17px; background:#fff; box-shadow:0 7px 22px rgba(34,59,100,.045); }
  .history-table-wrap td { display:block; min-width:0; padding:0; border:0; }
  .history-table-wrap td:nth-child(1) { grid-column:1; grid-row:1; color:var(--muted); font-size:11px; }
  .history-table-wrap td:nth-child(2) { grid-column:1; grid-row:2; }
  .history-table-wrap td:nth-child(3) { grid-column:1 / -1; grid-row:3; }
  .history-table-wrap td:nth-child(4) { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .history-table-wrap td:nth-child(5) { grid-column:2; grid-row:3; align-self:end; text-align:right; }
  .history-table-wrap td:nth-child(6) { display:none; }
  .history-table-wrap td:nth-child(7) { grid-column:2; grid-row:4; align-self:end; text-align:right; }
  .history-table-wrap .prompt-cell { max-width:none; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .history-table-wrap .skeleton-row { min-height:118px; }
  .history-table-wrap .skeleton-row td { display:block; grid-column:auto; grid-row:auto; }
  .history-pagination { margin-top:12px; padding:12px 0 0; border:0; }
  .history-pagination .btn { min-height:42px; }

  .admin-grid { gap:12px; min-width:0; }
  .admin-card { width:100%; min-width:0; overflow:hidden; }
  .admin-toolbar { display:grid; grid-template-columns:1fr; align-items:stretch; }
  .admin-toolbar .field, .admin-toolbar > .select-control { width:100%; min-width:0; }
  .admin-toolbar > .btn { width:100%; }
  .settings-topline, .provider-route-grid { grid-template-columns:1fr; }
  .table-wrap:not(.history-table-wrap) { width:100%; max-width:100%; overflow:auto; border-radius:14px; }
  .admin-card .table-wrap { margin-inline:-8px; }
  .admin-card table { min-width:620px; }
  .announcement-editor textarea { min-height:180px; }

  .skill-page .codex-tutorial { padding:18px; border-radius:20px; }
  .agent-prompt-panel .tutorial-head { align-items:stretch; flex-direction:column; }
  .agent-prompt-panel .tutorial-head .btn { align-self:flex-end; }
  .agent-prompt-panel .prompt-box { max-height:55svh; }
  .prompt-box { max-height:58svh; font-size:12px; }
  .tutorial-head { gap:14px; }

  .announcement-overlay { z-index:76; padding:0; align-items:end; }
  .announcement-modal { width:100%; max-width:none; max-height:86svh; overflow:auto; padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; animation:mobile-sheet-in .28s cubic-bezier(.2,.86,.22,1); }
  .announcement-modal::before { content:""; display:block; width:42px; height:5px; margin:0 auto 16px; border-radius:99px; background:#d8dde7; }
  .announcement-content { max-height:48svh; }

  .lightbox-overlay { z-index:90; padding:0; background:#0b1020; backdrop-filter:none; }
  .lightbox-panel { position:relative; width:100%; height:100%; height:100svh; max-height:none; grid-template-rows:58px minmax(0,1fr) auto; border:0; border-radius:0; background:#0b1020; color:#fff; animation:lightbox-mobile-in .25s cubic-bezier(.2,.82,.22,1); touch-action:pan-x pinch-zoom; will-change:transform,opacity; }
  .lightbox-toolbar { border-color:rgba(255,255,255,.12); background:#0b1020; }
  .lightbox-toolbar::before { content:""; position:absolute; top:8px; left:50%; width:38px; height:4px; transform:translateX(-50%); border-radius:99px; background:rgba(255,255,255,.28); }
  .lightbox-toolbar .icon-btn { background:rgba(255,255,255,.12); color:#fff; }
  .lightbox-image-wrap { min-height:0; padding:10px; background:#0b1020; overflow:hidden; }
  .lightbox-image-wrap img { max-height:calc(100svh - 150px); border-radius:12px; box-shadow:none; }
  .lightbox-actions { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-color:rgba(255,255,255,.12); background:#0b1020; }
  .lightbox-actions .btn { min-height:48px; }
  .lightbox-actions .btn-ghost { background:rgba(255,255,255,.1); color:#fff; }

  body.mobile-keyboard-open .mobile-nav { transform:translateY(110%); pointer-events:none; }
  body.mobile-keyboard-open .form-footer { position:static; }

  @keyframes mobile-sheet-in { from { opacity:.6; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
  @keyframes mobile-fade { from { opacity:0; } to { opacity:1; } }
  @keyframes lightbox-mobile-in { from { opacity:0; transform:scale(.965); } to { opacity:1; transform:scale(1); } }
}

@media (max-width: 430px) {
  .control-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .control-grid .select-trigger { padding:9px 7px; font-size:12px; }
  .form-footer { align-items:stretch; flex-direction:column; }
  .form-footer .btn { width:100%; }
  .balance-footer { display:flex; align-items:baseline; justify-content:space-between; }
  .balance-footer strong { font-size:19px; }
}

@media (max-width: 350px) {
  .control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Static site panels: constrained to the viewport and independent from app layout. */
.announcement-overlay,
.activity-overlay {
  position:fixed; inset:0; z-index:76; display:flex; align-items:flex-start; justify-content:flex-end;
  box-sizing:border-box; width:100%; max-width:100vw; padding:72px 16px 16px; overflow:hidden;
  background:transparent;
}
.announcement-modal,
.activity-modal {
  display:flex; flex-direction:column; box-sizing:border-box; width:min(430px,calc(100vw - 32px)); max-width:100%;
  max-height:calc(100vh - 88px); min-width:0; padding:0; overflow:hidden; border:1px solid #dce3ed;
  border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgba(21,35,58,.18);
}
.announcement-modal .modal-heading,
.activity-modal .modal-heading { flex:0 0 auto; min-width:0; padding:0 16px; border-bottom:1px solid #e3e8ef; }
.announcement-list,
.activity-list { min-width:0; max-width:100%; max-height:none; overflow:auto; overscroll-behavior:contain; }
.announcement-feed-row { min-width:0; max-width:100%; }
.announcement-feed-main { min-width:0; overflow-wrap:anywhere; }
.announcement-feed-main strong { overflow-wrap:anywhere; white-space:normal; }
.announcement-detail-title,
.announcement-content,
.activity-entry,
.activity-content,
.activity-meta { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.announcement-content { max-height:none; white-space:normal; }
.announcement-modal .announcement-content,
.announcement-detail-title,
.announcement-detail-head { margin-left:16px; margin-right:16px; }
.announcement-today { display:flex; gap:8px; margin:0 16px 16px; }
.activity-entry { box-sizing:border-box; margin:12px; padding:14px; border-radius:8px; }
.activity-entry-head { min-width:0; flex-wrap:wrap; }
.activity-entry-head > div { min-width:0; }
.activity-entry-head h4 { overflow-wrap:anywhere; }
.activity-entry-head time { white-space:normal; }
.activity-image-block img { max-width:100%; object-fit:contain; }
.activity-gallery-wrap { min-width:0; max-width:100%; }
.qq-popup-anchor { position:relative; }
.qq-popup-anchor .qq-panel { box-sizing:border-box; right:0; left:auto; width:min(278px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
.qq-panel-qr { display:block; box-sizing:border-box; width:calc(100% - 24px); max-width:calc(100% - 24px); height:auto; margin:12px auto; object-fit:contain; object-position:center; }
@media (max-width:700px) {
  .announcement-overlay,
  .activity-overlay { padding:64px 12px 12px; }
  .announcement-modal,
  .activity-modal { width:min(430px,calc(100vw - 24px)); max-height:calc(100svh - 76px); }
  .activity-entry-head { display:flex; }
  .qq-popup-anchor .qq-panel { right:0; width:min(278px,calc(100vw - 24px)); }
}

/* Current multi-announcement feed */
.notification-btn { position:relative; }
.announcement-unread-count,
.announcement-modal-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#d94a4a; color:#fff; font-size:11px; font-weight:750; line-height:1; }
.notification-btn .announcement-unread-count { margin-left:2px; }
.announcement-overlay { position:fixed; inset:0; z-index:76; display:flex; align-items:flex-start; justify-content:flex-end; padding:68px 16px 16px; background:rgba(16,24,39,.12); }
.announcement-modal { display:flex; flex-direction:column; width:min(590px,calc(100vw - 32px)); max-height:calc(100vh - 84px); padding:0; overflow:hidden; border:1px solid #dce3ed; border-radius:14px; background:#fff; color:var(--ink); box-shadow:0 18px 55px rgba(21,35,58,.2); }
.announcement-modal .modal-heading { flex:0 0 auto; min-height:58px; padding:0 17px; border-bottom:1px solid #e4e9f0; }
.announcement-modal .modal-heading h3 { color:var(--ink); font-size:19px; }
.announcement-modal .modal-close { background:transparent; color:#8793a3; }
.announcement-modal .modal-close:hover { background:#f0f3f7; color:var(--ink); }
.announcement-list { min-height:0; max-height:none; overflow:auto; overscroll-behavior:contain; }
.announcement-entry { border-bottom:1px solid #e4e9f0; }
.announcement-entry:last-child { border-bottom:0; }
.announcement-entry-toggle { display:flex; width:100%; min-width:0; gap:12px; align-items:flex-start; padding:15px 17px; border:0; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.announcement-entry-toggle:hover, .announcement-entry-toggle:focus-visible { background:#f7f9fc; outline:none; }
.announcement-entry-toggle:hover .announcement-entry-main strong, .announcement-entry-toggle:focus-visible .announcement-entry-main strong { color:#2d73ce; }
.announcement-entry-accent { flex:0 0 4px; width:4px; min-height:48px; margin-top:1px; border-radius:4px; background:#aab6c5; }
.announcement-entry.is-unread .announcement-entry-accent { background:#4f8fe8; }
.announcement-entry.is-pinned .announcement-entry-accent { background:#d49335; }
.announcement-entry-main { display:flex; min-width:0; flex:1; flex-direction:column; gap:6px; }
.announcement-entry-main strong { overflow-wrap:anywhere; color:var(--ink); font-size:15px; line-height:1.4; }
.announcement-entry-meta { display:flex; gap:9px; align-items:center; color:#8a96a6; font-size:12px; }
.announcement-unread-label { color:#2d73ce; font-weight:700; }
.announcement-read-label { color:#98a2af; }
.announcement-entry-summary { overflow-wrap:anywhere; color:#536276; font-size:13px; line-height:1.55; }
.announcement-entry-chevron { flex:0 0 20px; color:#8a96a6; font-size:22px; line-height:1; text-align:center; }
.announcement-entry-body { padding:0 17px 16px 50px; }
.announcement-entry-body .announcement-content { margin:0 0 12px; max-height:none; color:#3e4b5d; font-size:14px; line-height:1.8; overflow-wrap:anywhere; white-space:normal; }
.announcement-entry-confirm { min-height:32px; padding:6px 12px; border:1px solid #d7e1ed; border-radius:8px; background:#fff; color:#386ca8; font:inherit; font-size:12px; cursor:pointer; }
.announcement-entry-confirm:hover { border-color:#8db3df; background:#f1f6fc; }
.announcement-modal-actions { display:flex; flex:0 0 auto; gap:9px; justify-content:flex-end; padding:13px 17px; border-top:1px solid #e4e9f0; background:#fbfcfe; }
.announcement-modal-actions .modal-confirm { width:auto; min-height:38px; margin:0; padding:8px 14px; background:var(--brand-dark); color:#fff; }
.announcement-modal-actions .modal-close-action { min-height:38px; }
.announcement-empty { padding:28px 17px; color:#7b899a; text-align:center; }
.announcement-detail-overlay { position:fixed; inset:0; z-index:88; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(16,24,39,.18); animation:announcement-detail-fade .18s ease-out both; }
.announcement-detail-modal { display:flex; flex-direction:column; width:min(560px,100%); max-height:min(720px,calc(100vh - 40px)); overflow:hidden; border:1px solid #dce3ed; border-radius:14px; background:#fff; color:var(--ink); box-shadow:0 20px 60px rgba(21,35,58,.24); animation:announcement-detail-in .22s cubic-bezier(.2,.82,.22,1) both; }
.announcement-detail-kicker { display:block; margin-bottom:3px; color:#738198; font-size:11px; font-weight:700; }
.announcement-detail-modal .modal-heading { flex:0 0 auto; }
.announcement-detail-modal .modal-heading h3 { margin:0; overflow-wrap:anywhere; font-size:21px; line-height:1.35; }
.announcement-detail-meta { display:flex; gap:12px; align-items:center; padding:14px 20px 0; color:#8793a3; font-size:12px; }
.announcement-detail-content { min-height:0; overflow:auto; padding:18px 20px 24px; color:#3e4b5d; font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
@keyframes announcement-detail-fade { from { opacity:0; } to { opacity:1; } }
@keyframes announcement-detail-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:700px) {
  .announcement-overlay { align-items:flex-end; padding:0; background:rgba(16,24,39,.18); }
  .announcement-modal { width:100%; max-width:none; max-height:86svh; border-radius:18px 18px 0 0; }
  .announcement-entry-toggle { padding:14px; }
  .announcement-entry-body { padding:0 14px 14px 44px; }
  .announcement-modal-actions { padding:11px 14px calc(11px + env(safe-area-inset-bottom)); }
}

/* 运行设置：模型分组与供应商卡片 */
body.modal-open { overflow:hidden; }
.settings-card { padding:26px; }
.settings-limit-field { align-self:stretch; }
.settings-limit-field select { min-height:48px; }
.provider-picker { margin-top:4px; padding:20px 0 0; border-top:1px solid #e7ecf4; }
.provider-picker-head { margin-bottom:16px; }
.provider-picker-head strong { color:#1d2b43; font-size:15px; }
.provider-route-group + .provider-route-group { margin-top:24px; }
.provider-route-group-title { align-items:center; margin-bottom:11px; }
.provider-model-heading { display:flex; align-items:center; gap:9px; min-width:0; }
.provider-model-heading strong { color:#1b2a43; font-size:14px; letter-spacing:-.01em; }
.provider-size-chip { padding:3px 8px; border:1px solid #d9e4f6; border-radius:999px; background:#f1f6ff; color:#3865b7; font-size:11px; font-weight:750; }
.provider-group-actions { gap:7px; }
.provider-action-btn { min-height:32px; padding:6px 11px; border:1px solid #d6dfec; border-radius:9px; background:#fff; color:#40516b; font-size:12px; font-weight:700; line-height:1.2; }
.provider-action-btn:hover, .provider-action-btn:focus-visible { border-color:#8aaef0; background:#f5f8ff; color:#2559bc; }
.provider-action-btn.is-add { border-color:#356ae6; background:#356ae6; color:#fff; box-shadow:0 4px 12px rgba(53,106,230,.18); }
.provider-action-btn.is-add:hover, .provider-action-btn.is-add:focus-visible { border-color:#254fc4; background:#254fc4; color:#fff; }
.provider-route-grid { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; scrollbar-color:#b6c5de transparent; scrollbar-width:thin; }
.provider-route-grid::-webkit-scrollbar { height:7px; }
.provider-route-grid::-webkit-scrollbar-thumb { border-radius:99px; background:#b6c5de; }
.provider-route { position:relative; flex:0 0 246px; min-height:64px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-color:#dce4f0; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(36,61,101,.04); scroll-snap-align:start; }
.provider-route.is-selected { border-color:#79a4ef; background:#f6f9ff; box-shadow:0 7px 20px rgba(49,96,180,.11); }
.provider-route.is-disabled { opacity:.56; filter:saturate(.7); }
.provider-route-head { flex:1; min-width:0; align-items:center; gap:9px; }
.provider-choice { min-width:0; }
.provider-route-head label { gap:9px; font-size:13px; }
.provider-route-head input { width:16px; height:16px; flex:0 0 auto; }
.provider-route-name { display:block; max-width:148px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-route-actions { justify-content:flex-end; gap:7px; }
.provider-route-actions .icon-btn { width:30px; min-width:30px; height:30px; min-height:30px; border-radius:8px; font-size:17px; }
.provider-route-actions .provider-edit-icon svg { width:15px; height:15px; display:block; }
.provider-route-actions .provider-delete-icon { font-size:20px; font-weight:400; }
.provider-route-actions .provider-delete-icon span { display:block; transform:translateY(-1px); }
.provider-empty { flex:1 0 246px; min-height:90px; display:grid; place-items:center; padding:14px; border-radius:14px; font-size:12px; }
.settings-topline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.settings-limit-field { min-height:72px; display:flex; flex-direction:row !important; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid #d7e1f0; border-radius:var(--radius-control); background:#f8faff; }
.settings-limit-field > label { margin:0; align-self:center; white-space:nowrap; }
.settings-limit-field select { width:min(150px,52%); min-height:42px; padding-top:8px; padding-bottom:8px; }
.settings-submit { min-height:40px; min-width:130px; padding:8px 15px; font-family:inherit; font-size:13px; font-weight:700; }
.btn, .provider-action-btn { font-family:inherit; font-weight:700; letter-spacing:0; }
.provider-route-head input[type="radio"] { border:0; box-shadow:none; outline-offset:3px; }
.provider-route-head input[type="radio"]:focus { border:0; box-shadow:none; }
.provider-route-head input[type="radio"]:focus-visible { outline:2px solid rgba(53,106,230,.52); }
.provider-editor-backdrop { overflow-y:auto; overscroll-behavior:contain; padding:24px; background:rgba(13,24,44,.46); backdrop-filter:blur(4px); }
.provider-editor { width:min(500px,100%); max-height:min(720px,calc(100vh - 48px)); overflow:auto; padding:24px; border:1px solid #e1e8f2; border-radius:20px; box-shadow:0 24px 70px rgba(13,31,65,.3); animation:provider-editor-in .2s ease-out; }
.provider-editor-head { margin-bottom:20px; }
.provider-editor-head h3 { font-size:20px; letter-spacing:-.025em; }
.provider-editor-close { width:34px; height:34px; border-radius:9px; }
.provider-editor-form { gap:15px; }
.provider-editor-form label { gap:6px; font-size:12px; }
.provider-editor-form input { min-height:43px; border-radius:10px; background:#fbfcfe; }
.provider-editor-form input:focus { outline:0; border-color:#6f9dec; box-shadow:0 0 0 3px rgba(53,106,230,.13); background:#fff; }
.provider-editor-actions { margin-top:4px; }
.provider-editor-actions .provider-action-btn { min-width:78px; min-height:38px; }
.provider-editor-actions .is-add { border:1px solid #356ae6; }
@keyframes provider-editor-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:700px) {
  .settings-card { padding:20px; }
  .provider-route-group-title { align-items:flex-start; gap:10px; }
  .provider-group-actions { flex-shrink:0; }
  .settings-topline { grid-template-columns:1fr; }
  .settings-limit-field { min-height:68px; }
  .provider-route { flex-basis:222px; min-height:60px; padding:10px 11px; }
  .provider-route-name { max-width:130px; }
  .provider-editor-backdrop { padding:12px; place-items:end center; }
  .provider-editor { max-height:calc(100svh - 24px); padding:20px; border-radius:20px 20px 14px 14px; }
  .catalog-override { grid-template-columns:minmax(0,1fr); gap:8px; padding:11px 0; border-top:1px solid var(--line); }
  .catalog-model-id { grid-template-columns:minmax(0,1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .provider-editor { animation:none; }
}

/* 管理后台交互：单行表头筛选、公告工具栏与顶栏滑块 */
.nav { position:relative; isolation:isolate; }
.nav-indicator { position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border:1px solid #c8d9ff; border-radius:9px; background:#edf3ff; box-shadow:0 3px 12px rgba(38,72,135,.12); opacity:1; pointer-events:none; transition:transform .28s cubic-bezier(.2,.8,.25,1), width .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s ease, opacity .18s ease; }
.nav-indicator.is-moving { box-shadow:0 5px 18px rgba(38,72,135,.2); }
.nav button { position:relative; z-index:1; }
.nav button.active { background:transparent; box-shadow:none; }

.admin-card .table-wrap { overflow:visible; }
.admin-card table { min-width:0; table-layout:auto; }
.admin-card th { position:relative; padding:11px 13px; vertical-align:middle; text-transform:none; letter-spacing:0; white-space:nowrap; }
.table-filter-trigger { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:#53627a; font:inherit; font-size:12px; font-weight:750; line-height:1.25; cursor:pointer; }
.table-filter-trigger:hover,
.table-filter-trigger:focus-visible { border-color:#cbd9f2; background:#f3f7ff; color:#245bc2; outline:none; }
.table-filter-trigger.is-filtered { border-color:#b8cdf7; background:#edf3ff; color:#245bc2; }
.table-filter-glyph { width:7px; height:7px; flex:0 0 auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; color:#7f91ad; transform:rotate(45deg) translateY(-2px); transform-origin:center; }
.table-filter-trigger i { width:5px; height:5px; border-radius:50%; background:#2d69df; }
.admin-filter-backdrop { position:fixed; inset:0; z-index:79; background:transparent; }
.admin-filter-popover { position:fixed; z-index:80; display:grid; gap:12px; padding:12px; border:1px solid #d8e1ef; border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(27,54,98,.18); }
.admin-filter-control { width:100%; min-height:36px; padding:8px 10px; border:1px solid #ccd8eb; border-radius:8px; background:#fff; color:var(--ink); font-size:13px; }
.admin-filter-control:focus { border-color:#4b84f2; box-shadow:0 0 0 3px rgba(23,97,232,.12); outline:none; }
.admin-filter-options { display:grid; gap:3px; }
.admin-filter-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:7px 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:#374660; font-size:12px; text-align:left; }
.admin-filter-option:hover,
.admin-filter-option:focus-visible,
.admin-filter-option.is-selected { border-color:#d2def4; background:#f0f5ff; color:#245bc2; outline:none; }
.admin-filter-option b { color:#2d69df; font-size:13px; }
.admin-filter-popover-actions { display:flex; justify-content:flex-end; gap:7px; padding-top:3px; border-top:1px solid #edf0f5; }

.settings-card .card-heading { margin-bottom:18px; }
.settings-card .settings-submit { min-width:132px; align-self:center; }
.admin-toolbar > .btn { align-self:flex-end; min-height:46px; }
.settings-limit-field,
.settings-limit-value { min-height:88px; display:flex; flex-direction:column !important; align-items:stretch; justify-content:center; gap:7px; padding:13px 15px; border:1px solid #d7e1f0; border-radius:var(--radius-control); background:#f8faff; }
.settings-limit-field > label,
.settings-limit-value > label { align-self:flex-start; margin:0; color:#53627a; font-size:12px; font-weight:750; line-height:1.35; white-space:nowrap; }
.settings-limit-field select { width:100%; min-height:42px; }
.settings-limit-input { display:flex; align-items:center; gap:8px; }
.settings-limit-input input { min-width:0; min-height:42px; flex:1; }
.settings-limit-input span { color:#53627a; font-size:13px; font-weight:700; }

.announcement-editor .card-heading { margin-bottom:18px; }
.announcement-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px; padding:7px 9px; border:1px solid #e0e7f1; border-radius:10px; background:#f8faff; }
.announcement-emoji-box,
.announcement-preset-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.announcement-emoji-box { padding:3px 6px 3px 4px; border:1px solid #d7e1ef; border-radius:8px; background:#fff; }
.announcement-emoji-box > span { margin-right:2px; color:#53627a; font-size:12px; font-weight:750; }
.announcement-emoji { width:30px; height:28px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:#263854; font-size:16px; line-height:1; }
.announcement-emoji:hover,
.announcement-emoji:focus-visible { border-color:#8aaef0; background:#edf3ff; outline:none; }
.announcement-preset-group select { width:132px; min-height:34px; padding:7px 28px 7px 9px; border-radius:8px; font-size:12px; }
.announcement-preset-group .btn { min-height:34px; padding:7px 10px; }

@media (max-width:700px) {
  .admin-card .table-wrap { overflow:auto; }
  .admin-card table { min-width:620px; }
  .admin-filter-popover { max-width:calc(100vw - 24px); }
  .settings-card .card-heading { align-items:flex-start; }
  .settings-card .settings-submit { flex:0 0 auto; }
  .announcement-toolbar { align-items:stretch; }
  .announcement-emoji-box,
  .announcement-preset-group { width:100%; }
  .announcement-preset-group select { flex:1; width:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition:none; }
}

/* 全站视觉校准：统一字阶、按钮基线、图标按钮与弹层对齐 */
.btn,
.provider-action-btn,
.icon-btn,
button,
input,
select,
textarea { font-family:inherit; }

.btn { font-size:13px; line-height:1.25; letter-spacing:0; }
.btn-small { font-size:12px; }
.icon-btn { display:inline-grid; place-items:center; align-content:center; padding:0; line-height:1; font-weight:600; }
.icon-btn:focus-visible { outline:2px solid rgba(23,97,232,.38); outline-offset:2px; }

.card-heading,
.modal-heading,
.provider-editor-head { align-items:center; }

@media (min-width:701px) {
  .section-head,
  .dashboard-head { align-items:center; }
}

.announcement-modal { width:min(560px,100%); padding:24px; border-radius:18px; }
.announcement-modal .modal-heading { min-height:36px; }
.announcement-modal .modal-heading h3 { font-size:19px; line-height:1.35; }
.announcement-modal .modal-close { width:36px; height:36px; border-radius:10px; font-size:21px; }
.announcement-modal .announcement-content { margin:18px 0 20px; font-size:15px; line-height:1.75; }
.announcement-today { min-height:22px; align-items:center; margin-bottom:18px; }
.announcement-today input { width:16px; height:16px; min-height:16px; margin:0; flex:0 0 auto; }
.modal-confirm { min-height:46px; border-radius:12px; font-size:14px; }

.field > label:not(.upload),
.announcement-form > .field > label { line-height:1.4; }
.settings-submit { align-self:flex-start; }

.provider-route-group { padding:14px 0 15px; border-bottom:1px solid #edf0f5; }
.provider-route-group + .provider-route-group { margin-top:0; }
.provider-route-group-title { width:fit-content; max-width:100%; justify-content:flex-start; }
.provider-group-actions { margin-left:20px; }
.stat small { color:#53627a; font-weight:700; }

@media (min-width:701px) {
  .provider-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .provider-picker-head { grid-column:1 / -1; margin-bottom:0; }
  .provider-route-group { padding:14px; border:1px solid #e7edf6; border-radius:14px; background:#fbfcff; }
}

@media (max-width:700px) {
  .announcement-modal { padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; }
  .announcement-modal .modal-heading h3 { font-size:18px; }
  .announcement-modal .modal-close { width:36px; height:36px; }
  .provider-route-group-title { width:100%; flex-wrap:wrap; }
  .provider-group-actions { margin-left:0; }
  .provider-picker { display:block; }
}

/* final panel treatment */
.announcement-overlay { display:flex; align-items:flex-start; justify-content:flex-end; padding:68px 16px 16px; background:transparent; }
.announcement-modal { width:min(430px,calc(100vw - 32px)); max-height:calc(100vh - 84px); padding:0; border:1px solid #dce3ed; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgba(21,35,58,.18); }
.announcement-modal .modal-heading { min-height:56px; padding:0 16px; border-bottom:1px solid #e3e8ef; }
.announcement-modal .modal-heading h3 { color:var(--ink); font-size:18px; }
.announcement-modal .modal-close { background:transparent; color:#8793a3; }
.announcement-modal .modal-close:hover { background:#f0f3f7; color:var(--ink); }
.announcement-modal .panel-kicker { color:#778599; }
.announcement-list { max-height:calc(100vh - 140px); }
.announcement-feed-row { min-height:72px; padding:12px 14px; border-bottom:1px solid #e4e9f0; background:#fff; color:var(--ink); }
.announcement-feed-row:hover, .announcement-feed-row:focus-visible { background:#f7f9fc; }
.announcement-feed-accent { background:#5b9ee8; }
.announcement-feed-row:nth-child(2n) .announcement-feed-accent { background:#e2ac3c; }
.announcement-feed-main strong { color:var(--ink); }
.announcement-feed-main time { color:#8995a5; }
.announcement-feed-arrow { color:#8b98a8; }
.announcement-detail-head { color:#7b899a; }
.announcement-detail-title { color:var(--ink); }
.announcement-modal .announcement-content { color:#3e4b5d; }
.announcement-modal .announcement-today { color:#69778a; }
.announcement-modal .modal-confirm { background:var(--brand-dark); color:#fff; }
.qq-panel { width:270px; border:1px solid #dce3ed; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(21,35,58,.18); }
.qq-panel-head { padding:12px 13px; border-bottom:1px solid #e3e8ef; }
.qq-panel-head strong { color:var(--ink); }
.qq-panel-close { color:#8793a3; }
.qq-panel-close:hover { background:#f0f3f7; color:var(--ink); }
.qq-panel-qr { width:calc(100% - 24px); height:auto; margin:12px; object-fit:contain; background:#fff; }
.qq-panel-number { padding:11px 12px 13px; border-top:1px solid #e3e8ef; }
.qq-panel-number small { color:#8793a3; }
.qq-panel-number strong { color:var(--ink); }
.qq-panel-number .btn-primary { background:var(--brand-dark); color:#fff; }
@media (max-width:700px) {
  .announcement-overlay { padding:62px 8px 8px; }
  .announcement-modal { width:calc(100vw - 16px); max-height:calc(100svh - 70px); }
  .qq-panel { right:-8px; width:248px; }
}

/* Static site panels stay inside the viewport and update independently. */
.announcement-overlay,
.activity-overlay {
  position:fixed; inset:0; z-index:76; display:flex; align-items:flex-start; justify-content:flex-end;
  box-sizing:border-box; width:100%; max-width:100vw; padding:72px 16px 16px; overflow:hidden; background:transparent;
}
.announcement-modal,
.activity-modal {
  display:flex; flex-direction:column; box-sizing:border-box; width:min(430px,calc(100vw - 32px)); max-width:100%;
  max-height:calc(100vh - 88px); min-width:0; padding:0; overflow:hidden; border:1px solid #dce3ed;
  border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgba(21,35,58,.18);
}
.announcement-modal .modal-heading,
.activity-modal .modal-heading { flex:0 0 auto; min-width:0; padding:0 16px; border-bottom:1px solid #e3e8ef; }
.announcement-list,
.activity-list { min-width:0; max-width:100%; max-height:none; overflow:auto; overscroll-behavior:contain; }
.announcement-feed-row { min-width:0; max-width:100%; }
.announcement-feed-main { min-width:0; overflow-wrap:anywhere; }
.announcement-feed-main strong { overflow-wrap:anywhere; white-space:normal; }
.announcement-detail-title,
.announcement-content,
.activity-entry,
.activity-content,
.activity-meta { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.announcement-content { max-height:none; white-space:normal; }
.announcement-modal .announcement-content,
.announcement-detail-title,
.announcement-detail-head { margin-left:16px; margin-right:16px; }
.announcement-today { display:flex; gap:8px; margin:0 16px 16px; }
.activity-entry { box-sizing:border-box; margin:12px; padding:14px; border-radius:8px; }
.activity-entry-head { min-width:0; flex-wrap:wrap; }
.activity-entry-head > div { min-width:0; }
.activity-entry-head h4 { overflow-wrap:anywhere; }
.activity-entry-head time { white-space:normal; }
.activity-image-block img { max-width:100%; object-fit:contain; }
.activity-gallery-wrap { min-width:0; max-width:100%; }
.qq-popup-anchor { position:relative; }
.qq-popup-anchor .qq-panel { box-sizing:border-box; right:0; left:auto; width:min(278px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
.qq-panel-qr { display:block; box-sizing:border-box; width:calc(100% - 24px); max-width:calc(100% - 24px); height:auto; margin:12px auto; object-fit:contain; object-position:center; }
@media (max-width:700px) {
  .announcement-overlay,
  .activity-overlay { padding:64px 12px 12px; }
  .announcement-modal,
  .activity-modal { width:min(430px,calc(100vw - 24px)); max-height:calc(100svh - 76px); }
  .activity-entry-head { display:flex; }
  .qq-popup-anchor .qq-panel { right:0; width:min(278px,calc(100vw - 24px)); }
}
html { scrollbar-gutter: stable; }
body.modal-open { overflow:hidden; scrollbar-gutter:stable; }
.announcement-admin-list { display:grid; gap:12px; }
.announcement-admin-item { margin:0; padding:14px; border:1px solid #dfe6ef; border-radius:10px; background:#fbfcfe; }
.announcement-admin-item legend { padding:0 6px; color:#4b5d73; font-size:13px; font-weight:700; }
.announcement-admin-row { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:10px; color:#52637a; font-size:13px; }
.announcement-admin-row label { display:flex; align-items:center; gap:6px; }
.announcement-admin-row input[type="date"] { display:block; margin-top:5px; }
.announcement-settings-form { display:grid; gap:12px; }
.announcement-settings-form > .btn { justify-self:start; }
.modal-heading-unified { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:0 16px; border-bottom:1px solid #e3e8ef; }
.modal-heading-unified h3 { margin:0; min-width:0; color:var(--ink); font-size:19px; line-height:1.3; }
.modal-heading-unified .modal-close { flex:0 0 auto; width:34px; height:34px; border-radius:9px; }
.modal-actions-unified { display:flex; align-items:center; justify-content:flex-end; gap:9px; min-height:62px; padding:11px 16px; border-top:1px solid #e3e8ef; background:#fbfcfe; }
.modal-actions-unified .modal-confirm { min-width:84px; min-height:38px; margin:0; }
.modal-actions-unified .activity-dismiss { margin-right:auto; }
.announcement-modal.is-panel, .announcement-overlay .announcement-modal { animation: announcement-panel-in .22s ease-out both; }
@keyframes announcement-panel-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }

/* Activity notice uses a centered dialog, separate from the announcement drawer. */
.activity-overlay {
  position:fixed; inset:0; z-index:76; display:grid; place-items:center; padding:20px;
  box-sizing:border-box; background:rgba(16,24,39,.58); animation:announcement-detail-fade .18s ease-out both;
}
.activity-modal {
  width:min(560px,calc(100vw - 32px)); max-height:min(82vh,760px); border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.28); animation:announcement-detail-in .2s cubic-bezier(.2,.82,.22,1) both;
}
.activity-modal .activity-list { min-height:0; padding:8px 4px; }
.activity-modal .activity-entry { margin:8px; }
.activity-modal .modal-actions-unified { flex:0 0 auto; min-height:58px; }
.modal-actions-unified .activity-dismiss {
  display:inline-flex; align-items:center; gap:7px; width:auto; min-height:32px; margin-right:auto;
  color:#536276; font-size:13px; line-height:1.3; cursor:pointer;
}
.activity-dismiss input { width:15px; height:15px; margin:0; accent-color:var(--brand-dark); }
.activity-modal .modal-actions-unified .modal-confirm { width:auto; min-width:64px; min-height:34px; padding:7px 15px; margin:0; }
@media (max-width:700px) {
  .activity-overlay { padding:16px; }
  .activity-modal { width:min(560px,calc(100vw - 32px)); max-height:calc(100svh - 32px); border-radius:14px; }
  .activity-modal .modal-actions-unified { padding:11px 14px; }
}

/* Activity is a viewport modal, independent of the top-right announcement panel. */
#app .activity-overlay {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:100%; max-width:none; padding:20px; overflow:auto;
}
@media (min-width:901px) {
  .topbar {
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); justify-content:initial;
  }
  .topbar > .brand { justify-self:start; }
  .topbar > .nav { justify-self:center; }
  .topbar > .top-actions { justify-self:end; }
}