:root {
  --bg: #f7f8fb; --surface: #fff; --surface-soft: #f1f3f7; --ink: #171c28; --muted: #7b8494; --faint: #aab2bf;
  --line: #e5e8ee; --line-strong: #d7dce5; --blue: #3d5fff; --blue-soft: #eef1ff; --orange: #ffad28; --green: #23a974;
  --red: #df5d70; --shadow: 0 16px 40px rgba(26, 35, 56, .06); --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: #eef2fb; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #eef2fb; font-family: var(--sans); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
.app-shell { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 12% 8%, rgba(119, 143, 255, .14), transparent 28%), radial-gradient(circle at 92% 18%, rgba(55, 196, 190, .11), transparent 25%), linear-gradient(135deg, #f7f9ff 0%, #eff3fb 52%, #f8faff 100%); }
.app-shell::before, .app-shell::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.app-shell::before { width: 560px; height: 560px; top: 72px; right: -230px; background: radial-gradient(circle, rgba(92, 111, 236, .14), rgba(92, 111, 236, 0) 68%); }
.app-shell::after { width: 480px; height: 480px; bottom: -210px; left: -170px; background: radial-gradient(circle, rgba(33, 181, 174, .11), rgba(33, 181, 174, 0) 68%); }
.app-shell > * { position: relative; z-index: 1; }
.app-shell .page-wrap { position: relative; }
.app-shell .page-wrap::before { content: ''; position: absolute; z-index: -1; inset: 22px -60px -40px; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(102, 121, 193, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 121, 193, .055) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 86%); }
.topbar { height: 72px; display: flex; align-items: center; gap: 30px; padding: 0 36px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); cursor: pointer; white-space: nowrap; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.02em; font-weight: 800; }
.brand small { display: block; margin-top: 2px; color: var(--faint); font-size: 8px; letter-spacing: .12em; }
.brand-mark { display: inline-flex; align-items: end; justify-content: center; gap: 3px; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: #10182e; transform: rotate(-7deg); box-shadow: 0 7px 18px rgba(16,24,46,.2); }
.brand-mark i { width: 3px; border-radius: 3px; background: #9eaaff; display: block; }.brand-mark i:nth-child(1) { height: 9px; opacity: .6; }.brand-mark i:nth-child(2) { height: 16px; background: #fff; }.brand-mark i:nth-child(3) { height: 12px; opacity: .78; }
.topnav { display: flex; align-self: stretch; align-items: center; gap: 2px; flex: 1; }
.nav-item { height: 100%; padding: 0 13px; color: #7c8491; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; transition: color .18s, background .18s, border-color .18s; }
.nav-item span { margin-right: 7px; color: #9aa4b4; font-size: 14px; }.nav-item:hover { color: var(--ink); background: #fafbfc; }.nav-item.active { color: var(--blue); border-bottom-color: var(--blue); }.nav-item.active span { color: var(--blue); }
.account { display: flex; align-items: center; gap: 8px; color: #697384; font-size: 12px; white-space: nowrap; }.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(35,169,116,.12); }.role-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 5px; color: #6071bf; background: var(--blue-soft); font-size: 10px; font-weight: 700; }.account-menu { margin-left: 6px; border: 0; background: transparent; color: #9ca6b5; font-size: 17px; }.account-menu:hover { color: var(--ink); }
.page-wrap { width: min(1220px, calc(100% - 72px)); margin: 0 auto; padding: 50px 0 80px; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 4px 0 38px; }.page-heading.compact { margin-bottom: 30px; }.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #7381c5; font-size: 10px; letter-spacing: .14em; font-weight: 800; }.eyebrow i, .eyebrow > i { display: inline-block; width: 21px; height: 1px; background: #98a5e4; }.page-heading h1 { margin: 12px 0 8px; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -.06em; }.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }.heading-chip { display: flex; align-items: center; gap: 9px; padding: 11px 14px; color: #606b7d; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 11px; box-shadow: 0 5px 18px rgba(30,38,60,.03); }.heading-actions { display: flex; align-items: center; gap: 10px; }.segmented { display: inline-flex; padding: 3px; background: var(--surface-soft); border-radius: 8px; }.segmented button { padding: 7px 11px; color: #7d8797; background: transparent; border: 0; border-radius: 6px; font-size: 11px; }.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 5px rgba(20,30,50,.08); }.outline-button { padding: 9px 12px; color: #657084; background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }.outline-button:hover { color: var(--blue); border-color: #acb8ec; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 18px; }.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }.prompt-panel, .insight-panel, .mini-panel, .form-panel, .list-panel, .setting-card { padding: 28px; }.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 25px; }.panel-head > div { display: flex; align-items: baseline; gap: 11px; }.panel-index { color: #94a2df; font-size: 10px; letter-spacing: .14em; font-weight: 800; }.panel h2 { margin: 0; font-size: 19px; letter-spacing: -.03em; }.panel-note { color: var(--faint); font-size: 9px; letter-spacing: .12em; }.field-label { display: block; color: #5e6878; font-size: 11px; font-weight: 700; }.field-label b { margin-left: 5px; color: var(--orange); font-size: 9px; font-weight: 700; }.field-label input, .field-label select, .field-label textarea { display: block; width: 100%; margin-top: 8px; color: var(--ink); outline: none; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; transition: border-color .2s, box-shadow .2s; }.field-label input, .field-label select { height: 43px; padding: 0 12px; font-size: 12px; }.field-label textarea { min-height: 210px; padding: 14px; resize: vertical; line-height: 1.7; font-size: 13px; }.field-label input:focus, .field-label select:focus, .field-label textarea:focus { border-color: #9ba9ed; box-shadow: 0 0 0 3px rgba(61,95,255,.08); background: #fff; }.textarea-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--faint); font-size: 10px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 22px; }.form-row .field-label { padding: 0; }.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }.mode-card { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px; color: #7c8696; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }.mode-card input { display: none; }.mode-card.active { color: var(--ink); border-color: #aab6ef; background: var(--blue-soft); }.mode-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: var(--blue); background: #fff; font-size: 15px; }.mode-card strong { display: block; font-size: 12px; }.mode-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.schedule-field { margin-top: 14px; padding: 14px; border: 1px dashed #bdc7ef; border-radius: 9px; background: #fafbff; }.schedule-field span { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }.storage-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; color: var(--muted); font-size: 11px; }.storage-row > span { color: #5e6878; font-weight: 700; margin-right: 3px; }.storage-row label { display: inline-flex; align-items: center; gap: 5px; }.storage-row input { accent-color: var(--blue); }.primary-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-top: 23px; color: #fff; background: var(--blue); border: 0; border-radius: 8px; box-shadow: 0 8px 18px rgba(61,95,255,.2); font-size: 13px; font-weight: 800; transition: transform .18s, box-shadow .18s, opacity .18s; }.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(61,95,255,.25); }.primary-button span { margin-left: auto; font-size: 17px; }.secure-note { margin: 12px 0 0; color: var(--faint); font-size: 10px; line-height: 1.5; }.studio-aside { display: flex; flex-direction: column; gap: 18px; }.insight-panel h3 { margin: 13px 0 25px; font-size: 16px; }.insight-list { display: grid; gap: 16px; }.insight-list div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.insight-list span { color: var(--muted); font-size: 11px; }.insight-list strong { max-width: 190px; overflow: hidden; color: #4b5669; font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.tip { margin-top: 25px; padding: 13px; border-radius: 9px; background: #fff8e8; }.tip b { color: #ca8b24; font-size: 9px; letter-spacing: .14em; }.tip p { margin: 7px 0 0; color: #8e7c5a; font-size: 11px; line-height: 1.55; }.mini-head, .list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }.mini-head h3, .list-head h2 { margin: 0; font-size: 15px; }.mini-head button { padding: 0; color: var(--blue); background: transparent; border: 0; font-size: 10px; }.task-row { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-top: 1px solid var(--line); }.task-row-main { min-width: 0; flex: 1; }.task-row-main strong { display: block; overflow: hidden; color: #465166; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.task-row-main small { display: block; margin-top: 4px; color: var(--faint); font-size: 9px; }.status-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,173,40,.13); }.status-dot.succeeded { background: var(--green); box-shadow: 0 0 0 3px rgba(35,169,116,.13); }.status-dot.failed, .status-dot.cancelled { background: var(--red); box-shadow: 0 0 0 3px rgba(223,93,112,.12); }.status-label { white-space: nowrap; color: #bd8523; font-size: 10px; font-weight: 700; }.status-label.succeeded { color: var(--green); }.status-label.failed, .status-label.cancelled { color: var(--red); }.status-label.running, .status-label.queued { color: var(--blue); }
.table-panel { overflow: hidden; }.table-head, .table-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) .72fr .72fr .9fr minmax(150px, .9fr); align-items: center; gap: 18px; padding: 14px 22px; }.table-head { color: var(--faint); background: #fafbfc; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; }.table-row { min-height: 75px; border-bottom: 1px solid var(--line); }.table-row:last-child { border-bottom: 0; }.task-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }.task-cell > div { min-width: 0; }.task-cell strong { display: block; overflow: hidden; color: #455064; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.task-cell small { display: block; margin-top: 5px; color: var(--faint); font-size: 10px; }.task-cell .task-error { overflow: visible; color: #b33d4d; line-height: 1.45; text-overflow: clip; white-space: normal; }.muted-cell { color: var(--muted); font-size: 11px; }.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }.row-actions button, .row-actions a { padding: 5px 7px; color: #6b7891; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; text-decoration: none; }.row-actions button:hover, .row-actions a:hover { color: var(--blue); border-color: #b5c0ef; }.icon-link { color: var(--blue) !important; }.empty-state { grid-column: 1 / -1; padding: 65px 20px; color: var(--muted); text-align: center; }.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; color: #95a2df; background: var(--blue-soft); border-radius: 14px; font-size: 22px; }.empty-state h3 { margin: 0 0 6px; color: #647085; font-size: 14px; }.empty-state p { margin: 0; font-size: 11px; }
.asset-tabs { display: flex; gap: 6px; margin: -8px 0 20px; }.asset-tabs button { padding: 8px 13px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font-size: 11px; }.asset-tabs button.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }.asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }.asset-preview { position: relative; aspect-ratio: 16 / 10; background: #171d2b; }.asset-preview.aspect-landscape { aspect-ratio: 16 / 9; }.asset-preview.aspect-portrait { aspect-ratio: 9 / 16; max-width: min(100%, 230px); margin-inline: auto; }.asset-preview.aspect-square { aspect-ratio: 1 / 1; }.asset-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }.asset-type { position: absolute; top: 10px; left: 10px; padding: 4px 6px; color: #fff; background: rgba(17,24,40,.62); border-radius: 4px; font-size: 8px; letter-spacing: .12em; }.asset-placeholder { display: grid; place-items: center; height: 100%; color: #6673ab; font-size: 15px; letter-spacing: .17em; }.asset-body { padding: 14px; }.asset-title { min-height: 34px; color: #4b5669; font-size: 12px; line-height: 1.45; }.asset-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--faint); font-size: 10px; }.asset-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }.asset-actions button { padding: 5px 7px; color: #778296; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; }.asset-actions button:hover, .asset-actions button.selected { color: var(--blue); border-color: #b6c1ef; background: #f8f9ff; }
.admin-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 18px; }.form-panel .field-label + .field-label { margin-top: 18px; }.list-head span { color: var(--faint); font-size: 10px; }.member-row, .token-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; color: #fff; border-radius: 10px; background: linear-gradient(145deg, #8798f2, #5068da); font-size: 12px; font-weight: 800; }.avatar.small { width: 25px; height: 25px; border-radius: 8px; font-size: 10px; }.member-main, .token-main { min-width: 0; flex: 1; }.member-main strong, .token-main strong { display: block; overflow: hidden; color: #4c5769; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.member-main small, .token-main small { display: block; margin-top: 4px; overflow: hidden; color: var(--faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.member-row > button, .token-row > button { padding: 6px 8px; color: #7a8494; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; }.token-symbol { display: grid; place-items: center; width: 31px; height: 31px; color: #c28a2b; background: #fff5de; border-radius: 10px; font-size: 17px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 18px; }.metric-card { padding: 21px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 10px; }.metric-card strong { display: block; margin: 11px 0 4px; color: #364158; font-size: 26px; letter-spacing: -.04em; }.bar-wrap { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #eef0f5; }.bar-wrap i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8291ed, #5169db); }.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.setting-card h2 { margin: 12px 0 9px; font-size: 17px; }.setting-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.storage-meter { margin-top: 28px; }.storage-meter > div:first-child, .settings-list div { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; }.storage-meter strong, .settings-list strong { color: #455064; font-size: 12px; }.meter { height: 9px; margin: 10px 0 8px; overflow: hidden; border-radius: 99px; background: #eef0f4; }.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7589e7, #9aa9f1); }.storage-meter small { color: var(--faint); font-size: 10px; }.settings-list { display: grid; gap: 16px; margin-top: 26px; }.settings-list div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inline-form { display: grid; gap: 14px; margin-top: 24px; }.inline-form .field-label { margin: 0; }.inline-form .outline-button { justify-self: start; margin-top: 4px; }.pricing-card { margin-top: 18px; }.pricing-form { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; align-items: end; gap: 12px; margin-top: 23px; }.pricing-form .outline-button { height: 43px; white-space: nowrap; }
.footer { display: flex; justify-content: space-between; gap: 18px; width: min(1220px, calc(100% - 72px)); margin: 0 auto; padding: 23px 0 30px; color: var(--faint); border-top: 1px solid var(--line); font-size: 9px; letter-spacing: .03em; }
.login-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 13% 20%, rgba(118, 141, 255, .16), transparent 31%), linear-gradient(135deg, #f7f9ff 0%, #eef2fb 100%); }.login-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(102, 121, 193, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 121, 193, .06) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to right, rgba(0,0,0,.8), transparent 68%); }.login-card { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: min(460px, calc(100% - 80px)); margin: 0 auto; }.brand.large { margin-bottom: 90px; }.login-copy .eyebrow { color: #7d8cdc; }.login-copy h1 { margin: 18px 0 13px; color: var(--ink); font-size: clamp(38px, 5vw, 65px); line-height: 1; letter-spacing: -.07em; }.login-copy h1 em { color: var(--blue); font-style: normal; }.login-copy p { margin: 0; color: var(--muted); font-size: 14px; }.login-form { margin-top: 42px; }.login-form label { display: block; margin-top: 16px; color: #697486; font-size: 11px; font-weight: 700; }.login-form input { width: 100%; height: 45px; margin-top: 8px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; outline: none; }.login-form input:focus { border-color: #9ba9ed; box-shadow: 0 0 0 3px rgba(61,95,255,.08); }.login-form .primary-button { margin-top: 25px; }.login-hint { margin: 14px 0 0; color: var(--faint); font-size: 10px; text-align: center; }.login-aside { position: relative; display: flex; align-items: end; overflow: hidden; padding: 65px; color: #fff; background: #11182d; }.aside-grid { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(163,177,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(163,177,255,.12) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent); }.login-aside::before, .login-aside::after { content: ''; position: absolute; border-radius: 50%; filter: blur(3px); }.login-aside::before { width: 420px; height: 420px; top: -170px; right: -110px; background: radial-gradient(circle, rgba(82,104,228,.7), transparent 67%); }.login-aside::after { width: 320px; height: 320px; bottom: -110px; left: -120px; background: radial-gradient(circle, rgba(30,180,167,.38), transparent 67%); }.aside-copy { position: relative; max-width: 460px; }.aside-copy > span { color: #aab5f1; font-size: 10px; letter-spacing: .17em; }.aside-copy h2 { margin: 17px 0 16px; font-size: clamp(33px, 4vw, 55px); line-height: 1.03; letter-spacing: -.06em; }.aside-copy p { max-width: 310px; margin: 0; color: #9da8c4; font-size: 13px; line-height: 1.7; }
.toast-region { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }.toast { max-width: min(370px, calc(100vw - 44px)); padding: 12px 14px; color: #fff; background: #1c2539; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; box-shadow: 0 15px 35px rgba(20,28,48,.22); font-size: 12px; animation: toast-in .2s ease both; }.toast.success { background: #14634a; }.toast.error { background: #8f3348; }.toast.out { animation: toast-out .2s ease both; } @keyframes toast-in { from { transform: translateY(10px); opacity: 0; } } @keyframes toast-out { to { transform: translateY(10px); opacity: 0; } }
@media (max-width: 1060px) { .topbar { gap: 10px; padding: 0 22px; }.topnav { overflow-x: auto; }.nav-item { padding: 0 10px; font-size: 11px; }.page-wrap, .footer { width: min(100% - 44px, 900px); }.studio-grid { grid-template-columns: 1fr; }.studio-aside { display: grid; grid-template-columns: 1fr 1fr; }.table-head, .table-row { grid-template-columns: minmax(220px, 1.5fr) .65fr .7fr .8fr; }.table-head span:last-child { display: none; }.row-actions { grid-column: 4; grid-row: 1; }.asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .topbar { height: auto; min-height: 68px; flex-wrap: wrap; padding: 10px 16px 0; }.topnav { order: 3; flex-basis: 100%; height: 42px; overflow-x: auto; }.nav-item { height: 42px; padding: 0 11px; white-space: nowrap; }.account { margin-left: auto; }.account > span:nth-child(2) { display: none; }.page-wrap { width: calc(100% - 28px); padding-top: 33px; }.page-heading { align-items: start; flex-direction: column; margin-bottom: 26px; }.heading-chip { width: 100%; }.heading-actions { width: 100%; justify-content: space-between; }.studio-aside, .admin-grid, .settings-grid { display: flex; flex-direction: column; }.prompt-panel, .insight-panel, .mini-panel, .form-panel, .list-panel, .setting-card { padding: 20px 17px; }.table-panel { overflow-x: auto; }.table-head, .table-row { min-width: 760px; }.asset-grid { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: 1fr; }.pricing-form { grid-template-columns: 1fr; }.pricing-form .outline-button { width: 100%; }.footer { width: calc(100% - 28px); flex-direction: column; gap: 8px; }.login-shell { display: block; }.login-card { width: calc(100% - 42px); min-height: 100vh; padding: 36px 0; }.brand.large { margin-bottom: 70px; }.login-aside { display: none; } }
.media-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 18px 0 22px; padding: 15px; border: 1px dashed #bdc7ef; border-radius: 9px; background: #fafbff; }
.media-input-grid .field-label { min-width: 0; }
.media-input-grid input[type="file"] { height: auto; padding: 11px 10px; font-size: 11px; }
.media-input-grid input[type="url"] { font-size: 11px; }
@media (max-width: 720px) { .media-input-grid { grid-template-columns: 1fr; } }
.provider-list { display: grid; gap: 20px; margin-top: 22px; }
.provider-editor { margin-top: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; }
.provider-form-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; color: #465166; font-size: 13px; }
.provider-form-title span { color: var(--blue); font-size: 10px; font-weight: 700; }
.provider-editor textarea { min-height: 100px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.toggle-line { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.toggle-line input { accent-color: var(--blue); }
.asset-search { width: 220px; height: 37px; padding: 0 11px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; outline: none; font-size: 11px; }
.asset-search:focus { border-color: #aab6ef; box-shadow: 0 0 0 3px rgba(61,95,255,.08); }
@media (max-width: 720px) { .asset-search { width: 100%; } }
.compact-select { height: 37px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font-size: 11px; }
.token-row-expanded { align-items: flex-start; }
.token-row-expanded .token-main { display: grid; gap: 7px; }
.token-member-select { min-width: 210px; min-height: 36px; padding: 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 10px; }
.token-provider-select { min-width: 210px; height: 36px; padding: 0 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 10px; }
.token-hint { color: var(--faint); font-size: 9px; }
.token-actions { display: grid; gap: 6px; }
.token-model-label, .token-member-label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.danger-button { color: #b94759 !important; border-color: #edc1c8 !important; }
.member-row-expanded { align-items: flex-start; }
.member-row-expanded .member-main { display: grid; gap: 4px; }
.member-permissions { margin-top: 6px; color: var(--muted); font-size: 10px; }
.member-permissions summary { cursor: pointer; color: #6170b7; }
.permission-block { margin-top: 18px; }
.permission-block > small { display: block; margin-top: 7px; color: var(--faint); font-size: 10px; line-height: 1.5; }
.permission-options { display: grid; gap: 7px; margin-top: 8px; }
.permission-option { display: flex; align-items: center; gap: 7px; color: #5f6a7c; font-size: 11px; }
.permission-option input { accent-color: var(--blue); }
.permission-form { margin-top: 8px; }
.permission-form .outline-button { margin-top: 10px; }
.copy-settings { margin-top: 18px; }
.copy-settings > p { margin: 9px 0 21px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.copy-settings-form { display: grid; gap: 18px; }
.copy-settings-form textarea { min-height: 82px; }
.copy-nav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px dashed #c6cdec; border-radius: 10px; background: #fafbff; }
.copy-nav-grid > span { grid-column: 1 / -1; }
@media (max-width: 760px) { .copy-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.token-actions button { padding: 6px 8px; color: #7a8494; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; white-space: nowrap; }
@media (max-width: 720px) { .token-row-expanded { min-width: 650px; } }
.settings-workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-catalog { padding: 18px; position: sticky; top: 18px; }
.catalog-head, .settings-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.catalog-head h2 { margin: 9px 0 0; font-size: 16px; }.catalog-head > span { padding: 4px 7px; color: var(--blue); border-radius: 5px; background: var(--blue-soft); font-size: 10px; font-weight: 800; }
.settings-model-list { display: grid; gap: 6px; margin-top: 17px; }
.settings-model-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 9px; color: #667186; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; }
.settings-model-item:hover { background: #fafbff; }.settings-model-item.active { color: #465166; border-color: #cbd3f4; background: var(--blue-soft); }
.settings-model-item > span:nth-child(2) { min-width: 0; flex: 1; }.settings-model-item strong, .settings-model-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.settings-model-item strong { font-size: 11px; }.settings-model-item small { margin-top: 4px; color: #8993a3; font-size: 9px; }.settings-model-item i { color: var(--blue); font-size: 19px; font-style: normal; }
.settings-model-dot { width: 7px; height: 7px; border-radius: 50%; background: #d7dbe3; }.settings-model-dot.enabled { background: var(--green); box-shadow: 0 0 0 3px rgba(35,169,116,.12); }
.add-model-fold, .advanced-fold { margin-top: 17px; border-top: 1px solid var(--line); }.add-model-fold summary, .advanced-fold summary { padding: 14px 0 2px; color: var(--blue); cursor: pointer; font-size: 11px; font-weight: 700; }.advanced-fold summary { color: #6f7b91; }
.settings-editor { padding: 29px; }.settings-editor-head h2 { margin: 9px 0 6px; font-size: 21px; }.settings-editor-head p { margin: 0; color: var(--muted); font-size: 11px; }.settings-status { padding: 6px 8px; color: #ab5d6b; border-radius: 6px; background: #fff2f3; font-size: 10px; font-weight: 700; }.settings-status.on { color: #1c8760; background: #edf9f4; }
.settings-editor-form { margin-top: 28px; }.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.settings-enable { margin-top: 19px; }.advanced-form { display: grid; gap: 15px; padding: 14px 0 3px; }.advanced-form textarea { min-height: 145px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }.advanced-form p { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.7; }
.settings-editor-actions { display: flex; align-items: center; gap: 14px; margin-top: 25px; }.settings-editor-actions > span { color: var(--faint); font-size: 10px; }.compact-primary { width: auto; min-width: 190px; margin-top: 0; padding: 0 15px; }
.settings-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.settings-bottom-grid .setting-card { padding: 24px; }.settings-bottom-grid .pricing-card { grid-column: 1 / -1; margin-top: 0; }.settings-bottom-grid .account-settings { grid-column: 2; grid-row: 1; }.account-settings .inline-form { margin-top: 18px; }
.pricing-form-expanded { display: block; margin-top: 20px; }.pricing-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }.pricing-form-expanded .outline-button { margin-top: 19px; }.pricing-help { display: block; margin-top: 12px; color: var(--faint); font-size: 10px; line-height: 1.65; }.pricing-rule-list { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }.pricing-rule-list > strong { display: block; margin-bottom: 10px; color: #4a566b; font-size: 11px; }.pricing-rule-row { display: grid; gap: 8px; padding: 13px 0; border-top: 1px solid var(--line); }.pricing-rule-main { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }.pricing-rule-main strong { min-width: 0; overflow-wrap: anywhere; color: #4b576b; font-size: 11px; }.pricing-rule-main span { flex: 0 0 auto; color: var(--blue); font-size: 10px; }.pricing-rule-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; color: var(--muted); font-size: 10px; line-height: 1.5; }.pricing-rule-meta span { white-space: nowrap; }
@media (max-width: 980px) { .settings-workspace { grid-template-columns: 1fr; }.settings-catalog { position: static; }.settings-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.settings-bottom-grid { grid-template-columns: 1fr 1fr; }.pricing-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .settings-editor { padding: 20px 17px; }.settings-model-list, .settings-form-grid, .settings-bottom-grid, .pricing-form-grid { grid-template-columns: 1fr; }.settings-bottom-grid .pricing-card, .settings-bottom-grid .account-settings { grid-column: auto; grid-row: auto; }.settings-editor-actions { align-items: stretch; flex-direction: column; }.compact-primary { width: 100%; }.settings-catalog { padding: 17px; }.pricing-rule-main { align-items: flex-start; flex-direction: column; gap: 5px; }.pricing-rule-meta span { white-space: normal; } }
/* A timed-out task is still recoverable through manual status refresh. */
.status-dot.timedout { background: #9b6de3; box-shadow: 0 0 0 3px rgba(155,109,227,.14); }
.status-label.timedout { color: #8154c2; }
.task-note-field { margin-top: 18px; }
.task-note-field input { max-width: 100%; }
.task-cell small.task-note, .task-cell small.task-api, .task-cell small.task-error { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.45; }
.task-cell small.task-note { color: #6977b8; }
.task-cell small.task-api { color: #8b94a6; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.muted-cell.time-stack span { display: block; margin-top: 3px; white-space: nowrap; }
.muted-cell.time-stack span:first-child { margin-top: 0; }
.asset-note { margin-top: 7px; color: #6977b8; font-size: 10px; line-height: 1.45; }
.asset-time-stack { display: grid; gap: 3px; margin-top: 10px; color: var(--faint); font-size: 10px; }
.task-detail-backdrop { position: fixed; z-index: 25; inset: 0; display: flex; justify-content: flex-end; background: rgba(17,24,45,.28); backdrop-filter: blur(3px); }
.task-detail-panel { width: min(680px, 100%); height: 100%; overflow-y: auto; padding: 28px; background: #fff; box-shadow: -15px 0 45px rgba(22,31,56,.18); }
.task-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.task-detail-head h2 { margin: 10px 0 6px; color: var(--ink); font-size: 20px; }.task-detail-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.task-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }.detail-metric { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }.detail-metric span { display: block; color: var(--faint); font-size: 9px; }.detail-metric strong { display: block; margin-top: 6px; overflow: hidden; color: #4b5669; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-block { margin-top: 18px; }.detail-block h3 { margin: 0 0 8px; color: #465166; font-size: 12px; }.detail-block p { margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.6; word-break: break-all; }.detail-block pre { max-height: 230px; overflow: auto; margin: 0; padding: 12px; color: #55627a; background: #f7f8fc; border: 1px solid var(--line); border-radius: 8px; font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 720px) { .task-detail-panel { padding: 20px 17px; }.task-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.provider-test-token { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.provider-test-token select { width: min(250px, 100%); height: 36px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font-size: 10px; }
.settings-editor-actions .provider-test-button { margin-top: 0; white-space: nowrap; }
.audit-panel { margin-top: 18px; padding: 24px 28px; }
.audit-panel .list-head { margin-bottom: 13px; }
.audit-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.audit-list { border-top: 1px solid var(--line); }
.audit-row { display: grid; grid-template-columns: 155px 120px 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.audit-time, .audit-actor { color: var(--faint); font-size: 10px; }
.audit-row strong { color: #4b5669; font-size: 11px; }
.audit-row small { min-width: 0; overflow-wrap: anywhere; color: var(--faint); font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 720px) { .audit-panel { padding: 20px 17px; }.audit-filters { align-items: stretch; flex-direction: column; }.audit-filters .asset-search { width: 100%; }.audit-row { grid-template-columns: 1fr; gap: 4px; } }
.chat-workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 650px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.chat-sidebar { padding: 17px; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: #fbfcff; }.chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 15px; color: #566176; font-size: 11px; }.chat-sidebar-head span { color: var(--faint); }
.chat-conversation-list { display: grid; gap: 5px; }.chat-conversation { width: 100%; min-width: 0; padding: 11px 10px; color: #657187; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; }.chat-conversation:hover { background: #fff; }.chat-conversation.active { color: #46516a; border-color: #cbd3f4; background: var(--blue-soft); }.chat-conversation strong, .chat-conversation small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chat-conversation strong { font-size: 11px; }.chat-conversation small { margin-top: 5px; color: #97a0af; font-size: 9px; }
.chat-main { display: flex; min-width: 0; min-height: 650px; flex-direction: column; }.chat-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 27px 18px; border-bottom: 1px solid var(--line); }.chat-main-head h2 { margin: 9px 0 5px; font-size: 19px; }.chat-main-head p { margin: 0; color: var(--muted); font-size: 10px; }
.chat-messages { display: grid; flex: 1; align-content: start; gap: 17px; max-height: 530px; overflow-y: auto; padding: 28px; }.chat-message { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; max-width: 92%; }.chat-message.user { margin-left: auto; grid-template-columns: minmax(0, 1fr) 28px; }.chat-message.user .chat-message-role { grid-column: 2; grid-row: 1; background: #526bdc; }.chat-message.user .chat-message-body { grid-column: 1; grid-row: 1; color: #fff; background: #5c74df; }.chat-message.user small { grid-column: 1; text-align: right; }.chat-message-role { display: grid; place-items: center; width: 28px; height: 28px; color: #7687dc; border-radius: 9px; background: #eef1ff; font-size: 10px; font-weight: 800; }.chat-message-body { padding: 12px 14px; color: #4f5b70; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }.chat-message small { color: var(--faint); font-size: 9px; }.chat-welcome { padding: 30px; color: var(--faint); text-align: center; font-size: 12px; }
.chat-composer { margin: auto 22px 22px; padding: 12px; border: 1px solid #d9dff0; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(34,47,80,.06); }.chat-composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 9px; }.chat-composer-tools label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }.chat-composer-tools select { height: 28px; padding: 0 7px; color: #59657a; border: 1px solid var(--line); border-radius: 6px; background: #fbfcff; font-size: 10px; }.chat-composer textarea { display: block; width: 100%; min-height: 84px; margin: 10px 0 0; padding: 6px 3px; color: var(--ink); border: 0; outline: 0; resize: vertical; font: 13px/1.6 var(--sans); }.chat-composer .primary-button { width: auto; min-width: 96px; height: 37px; margin: 3px 0 0 auto; padding: 0 12px; }
.chat-landing { align-items: center; justify-content: center; padding: 38px; text-align: center; }.chat-landing-mark { display: grid; place-items: center; width: 55px; height: 55px; margin-bottom: 19px; color: #fff; border-radius: 17px; background: linear-gradient(145deg, #1b2747, #101729); box-shadow: 0 12px 30px rgba(20,31,57,.18); font-size: 25px; }.chat-landing h1 { margin: 0; color: #11182c; font-size: clamp(30px, 4vw, 47px); letter-spacing: -.06em; }.chat-landing > p { max-width: 570px; margin: 13px 0 27px; color: #738099; font-size: 13px; }.chat-model-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; width: min(100%, 620px); }.chat-model-card { display: grid; gap: 6px; padding: 15px; color: #647086; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; }.chat-model-card.active, .chat-model-card:hover { border-color: #b6c2ee; background: #f7f8ff; }.chat-model-card i { color: #a747ed; font-size: 19px; font-style: normal; }.chat-model-card strong { color: #465167; font-size: 12px; }.chat-model-card small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.chat-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 19px 0 15px; }.chat-starters button { padding: 7px 10px; color: #6a7794; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 10px; }.chat-starters button:hover { color: var(--blue); border-color: #b8c3ef; }.chat-landing .chat-composer { width: min(100%, 700px); margin: 10px 0 0; text-align: left; }.chat-no-model { margin: auto; padding: 22px; color: var(--muted); border: 1px dashed #c4cdf0; border-radius: 10px; background: #fafbff; font-size: 12px; }
.quota-panel, .operations-card, .chat-provider-panel { margin-top: 18px; padding: 24px 28px; }.quota-panel > p, .operations-card > p, .chat-provider-panel > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.quota-form { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(100px, 1fr)) auto; align-items: end; gap: 11px; margin: 20px 0; }.quota-form .outline-button { height: 43px; white-space: nowrap; }.quota-list { border-top: 1px solid var(--line); }.quota-row { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(100px, .8fr)) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); color: #768196; font-size: 10px; }.quota-row strong, .quota-row small { display: block; }.quota-row strong { color: #4b5669; font-size: 11px; }.quota-row small { margin-top: 4px; color: var(--faint); font-size: 9px; }.quota-actions, .backup-actions { display: flex; flex-wrap: wrap; gap: 6px; }.quota-actions button, .backup-actions button, .backup-actions a { padding: 5px 7px; color: #738096; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 9px; text-decoration: none; }
.monitor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }.monitor-grid > div { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }.monitor-grid span, .monitor-grid small { display: block; color: var(--faint); font-size: 9px; }.monitor-grid strong { display: block; margin: 7px 0 4px; color: #465167; font-size: 16px; }.monitor-provider-list { display: grid; gap: 7px; margin-top: 15px; }.monitor-provider-list > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; color: #566176; border-top: 1px solid var(--line); font-size: 10px; }.monitor-provider-list small { color: var(--faint); font-size: 9px; }
.backup-form { display: flex; gap: 10px; margin: 18px 0; }.backup-form input { min-width: 0; flex: 1; height: 39px; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; font-size: 11px; }.backup-list { border-top: 1px solid var(--line); }.backup-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }.backup-row strong, .backup-row small { display: block; }.backup-row strong { color: #4d586c; font-size: 11px; }.backup-row small { margin-top: 4px; color: var(--faint); font-size: 9px; }.backup-actions > span { color: var(--faint); font-size: 9px; }
.chat-provider-panel code { padding: 1px 4px; color: #6978ba; border-radius: 4px; background: #f0f2fb; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }.chat-provider-editor { display: grid; gap: 14px; margin-top: 19px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; }.chat-provider-editor.create { border-style: dashed; }.chat-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #4d586c; font-size: 12px; }.chat-provider-head span { color: #218b61; font-size: 9px; }.chat-provider-list { display: grid; gap: 13px; margin-top: 17px; }
.prompt-composer { position: relative; overflow: hidden; margin-top: 8px; border: 1px solid #d6ddf4; border-radius: 13px; background: linear-gradient(145deg, #fcfdff, #f4f7ff); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(67,83,148,.06); transition: border-color .2s, box-shadow .2s, transform .2s; }
.prompt-composer::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, #607af0, #9a6cf0 48%, #44c6bc); opacity: .72; }
.prompt-composer:focus-within { border-color: #9cacf2; box-shadow: 0 0 0 4px rgba(86,111,232,.11), 0 15px 34px rgba(67,83,148,.11); transform: translateY(-1px); }
.prompt-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px 10px; color: #6074c7; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.prompt-composer-head small { color: #a0aabc; font-size: 9px; font-weight: 600; letter-spacing: 0; }
.prompt-composer textarea.field-label, .prompt-composer textarea, .field-label .prompt-composer textarea { display: block; width: 100%; min-height: 142px; margin: 0; padding: 5px 15px 14px; color: #344158; border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: vertical; font-size: 14px; line-height: 1.78; transition: min-height .22s ease; }
.prompt-composer textarea:focus { border: 0; background: transparent; box-shadow: none; }
.prompt-composer:focus-within textarea { min-height: 230px; }
.prompt-composer .textarea-meta { margin: 0; padding: 10px 15px 12px; color: #8490a7; border-top: 1px solid rgba(214,221,244,.75); background: rgba(255,255,255,.55); }
.prompt-composer .textarea-meta span:last-child { padding: 2px 7px; color: #6377ca; border-radius: 99px; background: #edf0ff; font-variant-numeric: tabular-nums; }
.point-time-preset { grid-column: span 2; padding: 11px 12px; border: 1px dashed #c7cff0; border-radius: 9px; background: #fafbff; }
.point-time-preset select { background: #fff; }
.point-time-readonly input { color: #8490a5; background: #f2f4fa !important; cursor: not-allowed; }
.task-cell small.task-points { color: #7b6bb4; }.task-cell small.task-points.charged { color: #1d8d67; font-weight: 700; }
.point-ledger-panel { margin-top: 18px; padding: 24px 28px; }.point-ledger-head, .point-ledger-row { display: grid; grid-template-columns: 155px 120px 110px 90px minmax(0, 1fr); gap: 12px; align-items: center; }.point-ledger-head { padding: 10px 0; color: var(--faint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 800; }.point-ledger-row { padding: 11px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; }.point-ledger-row strong { color: #4b5669; font-size: 11px; }.point-ledger-row b { font-variant-numeric: tabular-nums; font-size: 11px; }.point-ledger-row b.debit { color: #bd4c5a; }.point-ledger-row b.credit { color: #1e8b65; }.point-ledger-row small { overflow: hidden; color: var(--faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .prompt-composer-head { align-items: flex-start; flex-direction: column; gap: 4px; }.prompt-composer:focus-within textarea { min-height: 190px; }.point-time-preset { grid-column: auto; }.point-ledger-panel { padding: 20px 17px; }.point-ledger-head { display: none; }.point-ledger-row { grid-template-columns: 1fr 1fr; gap: 5px 12px; }.point-ledger-row small { grid-column: 1 / -1; white-space: normal; } }
@media (max-width: 980px) { .chat-workspace { grid-template-columns: 210px minmax(0, 1fr); }.quota-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }.quota-row { grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); }.quota-actions { grid-column: 1 / -1; } }
@media (max-width: 720px) { .chat-workspace { display: flex; flex-direction: column; min-height: 0; }.chat-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.chat-conversation-list { max-height: 190px; overflow-y: auto; }.chat-main { min-height: 560px; }.chat-main-head { padding: 20px 17px; }.chat-messages { max-height: 430px; padding: 20px 17px; }.chat-composer { margin: auto 13px 13px; }.chat-composer-tools { align-items: flex-start; flex-direction: column; }.chat-landing { padding: 30px 17px; }.quota-panel, .operations-card, .chat-provider-panel { padding: 20px 17px; }.quota-form, .monitor-grid { grid-template-columns: 1fr; }.quota-row { grid-template-columns: 1fr; gap: 5px; }.backup-form { align-items: stretch; flex-direction: column; }.backup-row { align-items: flex-start; flex-direction: column; }.monitor-provider-list > div { align-items: flex-start; flex-direction: column; gap: 4px; } }
.announcement-banner{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:12px 24px 0;padding:12px 18px;border:1px solid rgba(129,108,255,.28);border-radius:14px;background:linear-gradient(100deg,rgba(238,236,255,.95),rgba(247,244,255,.96));color:#1b2040;box-shadow:0 8px 24px rgba(62,49,132,.08)}
.announcement-banner strong{display:block;font-size:14px;margin-bottom:3px}.announcement-banner span{display:block;white-space:pre-wrap;font-size:13px;color:#61698a}.announcement-close{border:0;background:transparent;color:#707797;font-size:22px;line-height:1;cursor:pointer;padding:0 3px}.announcement-modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(16,20,43,.38);backdrop-filter:blur(5px)}.announcement-modal{width:min(560px,calc(100vw - 36px));padding:28px 30px;border:1px solid rgba(139,125,255,.35);border-radius:22px;background:#fff;box-shadow:0 24px 80px rgba(17,14,62,.28)}.announcement-modal-head{display:flex;justify-content:space-between;align-items:center}.announcement-modal h2{margin:18px 0 10px;font-size:24px}.announcement-modal p{margin:0;color:#5b6380;line-height:1.75;white-space:pre-wrap}.full-span{grid-column:1/-1}
#pointScheduleForm{grid-template-columns:.6fr .75fr .8fr .65fr .85fr 2fr 1fr auto;gap:10px}#pointScheduleForm select[multiple]{min-width:240px;min-height:86px;padding:8px}#pointScheduleForm .field-label:nth-child(1),#pointScheduleForm .field-label:nth-child(5){min-width:0}#pointScheduleForm .field-label:nth-child(6){min-width:240px}@media (max-width:1200px){#pointScheduleForm{grid-template-columns:repeat(4,minmax(0,1fr))}#pointScheduleForm .field-label:nth-child(6){grid-column:span 2}}@media (max-width:720px){#pointScheduleForm{grid-template-columns:1fr}#pointScheduleForm .field-label:nth-child(6){grid-column:auto}#pointScheduleForm select[multiple]{width:100%;min-width:0}}
#pointScheduleForm select[multiple]{width:100%;max-width:100%;height:132px;overflow:auto;box-sizing:border-box;background:#fff}#pointScheduleForm select[multiple] option{padding:5px 4px;white-space:nowrap}#pointScheduleForm select[multiple] option:checked{color:#22316d;background:#e9edff}
.prompt-panel #prompt{min-height:210px;max-height:560px;transition:min-height .25s ease,box-shadow .2s ease}.prompt-panel #prompt:focus{min-height:360px}
.effects-settings{position:relative;z-index:2}.effects-toolbar{display:grid;grid-template-columns:1fr 1.25fr minmax(150px,.55fr);align-items:end;gap:14px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fbfcff}.effects-toolbar .field-label{margin:0}.effects-option-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}.effects-option{display:flex;align-items:flex-start;gap:9px;min-height:76px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}.effects-option:hover{border-color:#b7c2ed;background:#fafbff;transform:translateY(-1px)}.effects-option input{margin-top:3px;accent-color:#6376e8}.effects-option-icon{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;color:#6d7ce5;border-radius:8px;background:#eef1ff;font-size:15px}.effects-option strong,.effects-option small{display:block}.effects-option strong{color:#4e5a70;font-size:11px}.effects-option small{margin-top:5px;color:var(--faint);font-size:9px;line-height:1.45}.effects-form .settings-editor-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.effects-form .outline-button{white-space:nowrap}@media (max-width:1060px){.effects-option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:720px){.effects-toolbar,.effects-option-grid{grid-template-columns:1fr}.effects-form .settings-editor-actions{align-items:stretch;flex-direction:column}.effects-form .outline-button{width:100%}}
.effects-root~#toastRegion.toast-region{position:fixed;top:84px;right:50%;bottom:auto;left:auto;z-index:220;width:min(520px,calc(100vw - 32px));display:flex;align-items:stretch;transform:translateX(50%);pointer-events:none}.toast{width:100%;max-width:none;text-align:center;line-height:1.55;pointer-events:auto}.toast.error{background:linear-gradient(135deg,#a63754,#7f2f47);box-shadow:0 16px 40px rgba(137,42,69,.28)}.toast.success{background:linear-gradient(135deg,#19755a,#125642)}@keyframes toast-in{from{transform:translateY(-12px);opacity:0}}@keyframes toast-out{to{transform:translateY(-12px);opacity:0}}
.settings-with-point-rule-management .pricing-card{display:none}.point-rule-manager{margin-top:18px;padding:24px 28px}.point-rule-manager>p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}.point-rule-form{margin-top:18px;padding:17px;border:1px solid #dbe1f3;border-radius:12px;background:linear-gradient(145deg,#fcfdff,#f7f8ff)}.point-rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.rule-resolution-field{grid-column:span 3;margin:0;padding:10px 12px 12px;border:1px dashed #bec8ee;border-radius:9px;min-width:0}.rule-resolution-field legend{padding:0 4px;color:#6573aa;font-size:10px;font-weight:800}.rule-resolution-options{display:flex;flex-wrap:wrap;gap:7px}.rule-resolution-option{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;color:#657188;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:10px;cursor:pointer}.rule-resolution-option:hover{border-color:#aebbed}.rule-resolution-option.all{color:#536fcf;border-color:#cbd4f6;background:#f1f3ff}.rule-resolution-option input{accent-color:#6177df}.point-rule-submit{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}.point-rule-submit small{color:var(--faint);font-size:9px}.point-rule-saved{margin-top:20px;border-top:1px solid var(--line)}.point-rule-saved>.list-head{margin-top:15px}.point-rule-saved>.list-head>span{color:var(--faint);font-size:9px}.point-rule-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.point-rule-row strong,.point-rule-row small{display:block}.point-rule-row strong{color:#4c586d;font-size:11px}.point-rule-row small{margin-top:5px;color:#8792a6;font-size:9px;line-height:1.5}.point-rule-actions{display:flex;flex:0 0 auto;gap:6px}.point-rule-actions button{padding:5px 8px;color:#68758b;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:9px}.point-rule-actions .danger-button{color:#b54f60;border-color:#f0c7ce;background:#fff8f9}@media(max-width:1080px){.point-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rule-resolution-field{grid-column:span 2}}@media(max-width:720px){.toast-region{top:70px}.point-rule-manager{padding:20px 17px}.point-rule-grid{grid-template-columns:1fr}.rule-resolution-field{grid-column:auto}.point-rule-row{align-items:flex-start;flex-direction:column}.point-rule-actions{width:100%}.point-rule-actions button{flex:1}.point-rule-submit{align-items:stretch;flex-direction:column}.point-rule-submit button{width:100%}}
.task-member-filter{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:700}.task-member-filter select{height:34px;min-width:132px;padding:0 25px 0 9px;color:#536076;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font-size:10px}.app-shell.settings-shell-active{overflow:visible}.settings-navigation-shell{display:grid;grid-template-columns:172px minmax(0,1fr);gap:18px;align-items:start}.settings-quick-nav{position:sticky;top:90px;z-index:3;display:grid;gap:6px;padding:15px;border:1px solid var(--line);border-radius:12px;background:rgba(251,252,255,.94);box-shadow:0 10px 25px rgba(42,56,103,.055);backdrop-filter:blur(12px)}.settings-quick-nav>span{padding:3px 9px 9px;color:#7e8ba4;font-size:11px;font-weight:800;letter-spacing:.08em}.settings-quick-nav button{width:100%;padding:10px 9px;color:#59677f;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;font-size:12px;font-weight:700;line-height:1.35;transition:.16s ease}.settings-quick-nav button:hover{color:#536bd1;border-color:#d9dff6;background:#f0f3ff;transform:translateX(2px)}.settings-navigation-content{min-width:0}.settings-navigation-content [id^="settings-"]{scroll-margin-top:92px}@media(max-width:1080px){.app-shell.settings-shell-active{overflow:hidden}.settings-navigation-shell{grid-template-columns:1fr}.settings-quick-nav{position:static;display:flex;flex-wrap:wrap;gap:7px;padding:12px}.settings-quick-nav>span{width:100%;padding-bottom:3px}.settings-quick-nav button{width:auto;padding:8px 10px;border-color:var(--line);background:#fff;font-size:11px}}@media(max-width:720px){.task-member-filter{width:100%;justify-content:space-between}.task-member-filter select{flex:1;min-width:0}.settings-navigation-shell{gap:14px}.settings-quick-nav button{font-size:10px}}