:root {
  --navy-950: #0b1f33; --navy-900: #102b46; --navy-800: #173b5d;
  --blue: #1677ff; --teal: #0da89b; --amber: #e79a23; --red: #df4b5b;
  --ink: #17263a; --muted: #708096; --line: #e3e9f1; --surface: #fff;
  --canvas: #f4f7fb; --shadow: 0 12px 36px rgba(27, 52, 84, .09);
  --radius: 14px; --font: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--canvas); font-family: var(--font); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden, .admin-only { display: none !important; }
.admin-only.visible { display: flex !important; }
.hidden-force { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: #6b8cad; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 244px; display: flex; flex-direction: column; color: #dce9f5; background: linear-gradient(180deg, var(--navy-950), #102943 72%, #0e253c); }
.sidebar-brand { height: 82px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand strong { display: block; color: #fff; font-size: 17px; letter-spacing: .04em; }
.sidebar-brand small { display: block; margin-top: 3px; color: #6f94b6; font-size: 9px; letter-spacing: .15em; }
.brand-mark { width: 38px; height: 38px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #1b89ff, #0dc3b6); box-shadow: 0 7px 18px rgba(17, 137, 255, .25); font-size: 19px; font-weight: 900; }
.sidebar-nav { padding: 20px 12px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin: 3px 0; border: 0; border-radius: 9px; color: #a9c0d4; background: transparent; text-align: left; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(28,129,232,.28), rgba(18,167,159,.13)); box-shadow: inset 3px 0 #22a7ff; }
.nav-icon { width: 22px; text-align: center; font-size: 18px; }
.nav-section { margin: 28px 14px 8px; color: #547796; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.sidebar-security { margin: auto 16px 18px; display: flex; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.04); }
.security-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: #19c3a9; box-shadow: 0 0 0 4px rgba(25,195,169,.12); }
.sidebar-security strong { display: block; color: #c9dceb; font-size: 11px; }
.sidebar-security small { display: block; margin-top: 4px; color: #7190aa; font-size: 9px; line-height: 1.45; }
.workspace { width: calc(100% - 244px); min-width: 0; margin-left: 244px; }
.topbar { position: sticky; top: 0; z-index: 10; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.breadcrumb { margin: 0; color: #8090a4; font-size: 12px; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #16669e; background: #e3f2ff; font-weight: 800; }
.avatar.small { width: 34px; height: 34px; border-radius: 9px; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { font-size: 12px; }
.user-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; }
.content { max-width: 1500px; margin: 0 auto; padding: 34px 38px 60px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-heading h1 { margin: 0 0 7px; color: #10263e; font-size: 28px; letter-spacing: -.03em; }
.page-heading p:last-child { margin: 0; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; text-decoration: none; transition: .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.button-primary { color: #fff; border-color: #1473df; background: linear-gradient(135deg, #177ceb, #116ed1); box-shadow: 0 6px 15px rgba(23,124,235,.2); }
.button-secondary { color: #31506f; border-color: #d6e0ea; background: #fff; }
.button-ghost { min-height: 32px; color: #5e7288; border-color: #e2e8f0; background: transparent; }
.button-danger { color: #d33b4b; border-color: #ffd1d6; background: #fff6f7; }
.button-small { min-height: 30px; padding: 0 10px; font-size: 11px; }
.button-large { min-height: 47px; width: 100%; }
.inline-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid #c7e2ff; border-radius: 11px; background: #eef7ff; }
.inline-alert strong { color: #185783; }
.inline-alert p { margin: 4px 0 0; color: #5c7790; font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 15px; margin-bottom: 22px; }
.metric-card { display: flex; align-items: center; gap: 15px; padding: 19px; border: 1px solid #e6ebf2; border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 16px rgba(31,58,88,.035); }
.metric-card div { min-width: 0; }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.metric-card strong { color: #132c46; font-size: 24px; }
.metric-icon { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; font-weight: 800; }
.metric-icon.blue { color: #1977df; background: #eaf4ff; }.metric-icon.teal { color: #0c9f92; background: #e5f8f4; }.metric-icon.amber { color: #c47e13; background: #fff4df; }.metric-icon.red { color: #d94a5b; background: #ffedf0; }
.panel { border: 1px solid #e3e9f0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #edf1f5; }
.panel-head.compact { min-height: auto; padding: 0 0 18px; margin-bottom: 20px; }
.panel-head h2 { margin: 0 0 4px; font-size: 15px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 18px; color: #7d8da1; background: #f8fafc; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-align: left; white-space: nowrap; }
td { padding: 15px 18px; border-top: 1px solid #edf1f5; color: #53667b; font-size: 12px; vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
.clickable-row { cursor: pointer; transition: .15s; }.clickable-row:hover { background: #f7fbff; }
.table-title, .table-subtitle { display: block; max-width: 300px; }.table-title { color: #1c3048; font-size: 12px; }.table-subtitle { margin-top: 5px; overflow: hidden; color: #8796a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.table-progress { display: flex; align-items: center; gap: 8px; min-width: 105px; }.table-progress > span { width: 72px; height: 5px; overflow: hidden; border-radius: 5px; background: #e7edf3; }.table-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #1684ed, #12b3a6); }.table-progress small { color: #7b8ca0; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; font-size: 10px; font-weight: 800; white-space: nowrap; }.status-badge i { width: 6px; height: 6px; border-radius: 50%; }.status-badge.succeeded { color: #16826f; background: #e8f8f4; }.status-badge.succeeded i { background: #18aa93; }.status-badge.running { color: #166bc0; background: #e9f4ff; }.status-badge.running i { background: #1b83e9; box-shadow: 0 0 0 3px rgba(27,131,233,.13); }.status-badge.queued { color: #8b681a; background: #fff6e3; }.status-badge.queued i { background: #daa233; }.status-badge.failed { color: #bc4050; background: #ffedf0; }.status-badge.failed i { background: #dc4b5c; }
.status-badge.confirming { color: #7952b3; background: #f2ebff; }.status-badge.confirming i { background: #8a61c7; box-shadow: 0 0 0 3px rgba(138,97,199,.13); }.status-badge.neutral { color: #68798b; background: #edf1f5; }.status-badge.neutral i { background: #8997a6; }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #e1e8ef; border-radius: 8px; color: #6f8195; background: #fff; font-size: 21px; line-height: 1; }
.empty-state { padding: 65px 20px; text-align: center; }.empty-state > span { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 15px; color: #187bdc; background: #eaf4ff; font-size: 23px; font-weight: 900; }.empty-state h3 { margin: 0 0 7px; }.empty-state p { margin: 0 0 18px; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }.form-panel { padding: 24px; }.step-badge { padding: 6px 9px; border-radius: 8px; color: #2476c9; background: #edf6ff; font-size: 11px; font-weight: 800; }.form-grid { display: grid; gap: 17px; }.two-col { grid-template-columns: 1fr 150px; }.span-two { grid-column: 1 / -1; }
label { display: block; } label > span { display: block; margin-bottom: 7px; color: #43576c; font-size: 11px; font-weight: 700; } label small { display: block; margin-top: 6px; color: #8a98a9; font-size: 10px; line-height: 1.45; }
input, select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #dce4ec; border-radius: 8px; outline: 0; color: #26394f; background: #fff; transition: .16s; } input:focus, select:focus { border-color: #55a4e9; box-shadow: 0 0 0 3px rgba(39,135,220,.1); } input::placeholder { color: #a9b4c0; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }.check-row input { width: 16px; height: 16px; }.check-row span { margin: 0; font-weight: 500; }
.key-source-card { display: flex; gap: 12px; padding: 17px; border: 1px solid #caeae4; border-radius: 10px; background: #f2fbf8; }.key-source-card strong { color: #176f64; }.key-source-card p { margin: 5px 0 0; color: #66847f; font-size: 11px; line-height: 1.55; }.status-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; }.status-dot.success { background: #19aa92; box-shadow: 0 0 0 4px rgba(25,170,146,.12); }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 20px; }.form-message { margin: 0 auto 0 0; color: var(--muted); }.form-message.success { color: #16826f; }.form-message.error, .form-error { color: #d43f50; }.form-error { min-height: 19px; margin: 0; font-size: 11px; }
.admin-metrics { grid-template-columns: repeat(3, minmax(180px, 1fr)); max-width: 780px; }.user-cell { display: flex; align-items: center; gap: 10px; }.user-cell strong, .user-cell small { display: block; }.user-cell strong { color: #243950; }.user-cell small { margin-top: 3px; color: #8a99aa; }.type-tag, .config-state { display: inline-block; padding: 5px 8px; border-radius: 6px; color: #6c7e91; background: #f0f3f7; font-size: 10px; font-weight: 700; }.type-tag.admin { color: #7554b3; background: #f1ebff; }.config-state.ready { color: #178571; background: #e9f8f4; }.compact-select { width: 145px; height: 32px; padding: 0 7px; font-size: 11px; }.row-actions { display: flex; gap: 5px; }
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(7,22,37,.38); backdrop-filter: blur(2px); }.drawer { position: fixed; inset: 0 0 0 auto; z-index: 41; width: min(720px, 94vw); overflow-y: auto; background: #fff; box-shadow: -20px 0 60px rgba(12,34,55,.18); }.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }.drawer-head h2 { margin: 0; font-size: 18px; }.drawer-content { padding: 22px 24px 40px; }.drawer-loading { padding: 80px; color: var(--muted); text-align: center; }
.detail-status { padding: 18px; border: 1px solid #e0e8f0; border-radius: 12px; background: #f9fbfd; }.detail-status-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #66798e; font-size: 11px; }.large-progress { height: 8px; margin: 17px 0 9px; overflow: hidden; border-radius: 8px; background: #e5ebf1; }.large-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #1681eb, #0eb5a5); }.progress-copy { display: flex; justify-content: space-between; color: #7e8da0; font-size: 10px; }.error-card { margin-top: 13px; padding: 10px 12px; border-radius: 8px; color: #b73c4b; background: #fff0f2; font-size: 11px; line-height: 1.5; }
.detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 14px 0 22px; }.detail-metrics div { padding: 13px; border: 1px solid #e8edf2; border-radius: 9px; }.detail-metrics small, .detail-metrics strong { display: block; }.detail-metrics small { color: #8190a1; font-size: 9px; }.detail-metrics strong { margin-top: 5px; color: #18324d; font-size: 18px; }
.detail-section { margin-top: 24px; }.detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.detail-section h3 { margin: 0; font-size: 13px; }.detail-section h3 span { margin-left: 5px; color: #7d8da0; font-size: 10px; }.invoice-list { border: 1px solid #e5ebf1; border-radius: 10px; overflow: hidden; }.invoice-list article { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-top: 1px solid #edf1f5; }.invoice-list article:first-child { border-top: 0; }.invoice-list strong, .invoice-list small { display: block; }.invoice-list strong { color: #253b52; font-size: 11px; }.invoice-list small { margin-top: 4px; color: #8594a5; font-size: 9px; }.invoice-amount { text-align: right; }.invoice-amount strong { color: #126f69; }.review-tag { position: absolute; top: 5px; right: 5px; color: #b9791b; font-size: 8px; }.mini-empty { padding: 30px; border: 1px dashed #dce4ec; border-radius: 10px; color: #8c99a8; text-align: center; }
.download-actions { display: flex; align-items: center; gap: 7px; }
.token-cost-card { margin: 0 0 22px; padding: 16px; border: 1px solid #d9e6f0; border-radius: 12px; background: linear-gradient(135deg, #f8fbff, #f4fbf9); }.token-cost-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.token-cost-head strong, .token-cost-unavailable strong { color: #25445f; font-size: 12px; }.token-cost-head p, .token-cost-unavailable p { margin: 4px 0 0; color: #8493a4; font-size: 9px; }.token-cost-head > span { padding: 5px 8px; border-radius: 6px; color: #39756e; background: #e4f5f1; font-size: 8px; font-weight: 700; }.token-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }.token-usage-grid > div { padding: 11px 12px; border: 1px solid #e4ebf1; border-radius: 8px; background: #fff; }.token-usage-grid small, .token-usage-grid strong { display: block; }.token-usage-grid small { color: #8493a4; font-size: 8px; }.token-usage-grid strong { margin-top: 4px; color: #1e4765; font-size: 15px; }.token-cost-calculator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr); gap: 10px; align-items: end; margin-top: 11px; }.token-cost-calculator label > span { margin-bottom: 5px; font-size: 9px; }.token-cost-calculator label > div { display: flex; align-items: center; overflow: hidden; border: 1px solid #dce5ed; border-radius: 8px; background: #fff; }.token-cost-calculator input { height: 38px; border: 0; border-radius: 0; box-shadow: none; }.token-cost-calculator em { flex: 0 0 auto; padding-right: 10px; color: #8594a4; font-size: 8px; font-style: normal; }.token-cost-result { min-height: 60px; display: flex; flex-direction: column; justify-content: center; padding: 9px 12px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #167fc6, #0d9c8e); }.token-cost-result small { font-size: 8px; opacity: .75; }.token-cost-result strong { margin-top: 4px; font-size: 13px; }.token-cost-unavailable { background: #f7f9fb; }
.log-box { max-height: 250px; overflow: auto; padding: 10px 13px; border-radius: 9px; color: #b9c9d8; background: #10263b; font-family: Consolas, monospace; font-size: 9px; line-height: 1.55; }.log-box p { display: flex; gap: 10px; margin: 3px 0; }.log-box time { flex: 0 0 auto; color: #5f86a7; }.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 16px; border: 1px solid #f2dce0; border-radius: 10px; }.danger-zone strong { color: #a73a47; font-size: 11px; }.danger-zone p { margin: 3px 0 0; color: #96767b; font-size: 9px; }
.modal-overlay { z-index: 50; }.modal { position: fixed; top: 50%; left: 50%; z-index: 51; width: min(470px, calc(100vw - 28px)); max-height: 92vh; overflow-y: auto; padding: 24px; border-radius: 15px; background: #fff; box-shadow: 0 25px 80px rgba(8,29,49,.28); transform: translate(-50%, -50%); }.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }.modal-head h2 { margin: 0; font-size: 19px; }.stack-form { display: grid; gap: 16px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 2px; }
.two-date-columns { grid-template-columns: 1fr 1fr; }
.confirm-modal { width: min(540px, calc(100vw - 28px)); text-align: center; }.confirm-symbol { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #1683e9, #0eb29f); box-shadow: 0 8px 22px rgba(20,131,218,.22); font-size: 22px; font-weight: 900; }.confirm-heading h2 { margin: 0 0 8px; color: #193149; font-size: 22px; }.confirm-heading p:last-child { margin: 0; color: #7b8a9c; font-size: 11px; }.confirm-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 22px 0 17px; padding: 17px; border: 1px solid #dbe9f6; border-radius: 12px; background: linear-gradient(135deg, #f4f9ff, #f2fbf9); }.confirm-count strong { color: #156fc2; font-size: 34px; }.confirm-count span { color: #5d7389; font-weight: 700; }.confirm-details { margin: 0; overflow: hidden; border: 1px solid #e3e9ef; border-radius: 10px; text-align: left; }.confirm-details div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 13px; border-top: 1px solid #edf1f5; }.confirm-details div:first-child { border-top: 0; }.confirm-details dt { color: #8492a3; font-size: 10px; }.confirm-details dd { margin: 0; color: #31475d; font-size: 11px; font-weight: 700; }.confirm-warning { display: flex; gap: 8px; margin: 14px 0; padding: 11px 12px; border-radius: 9px; color: #87631b; background: #fff8e8; text-align: left; font-size: 10px; line-height: 1.5; }.confirm-warning strong { flex: 0 0 auto; }.confirm-modal .modal-actions { margin-top: 12px; }
.confirm-subjects { margin-top: 14px; overflow: hidden; border: 1px solid #e3e9ef; border-radius: 10px; background: #fafcfe; text-align: left; }.confirm-subjects-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #e7edf3; }.confirm-subjects-head strong { color: #31475d; font-size: 11px; }.confirm-subjects-head span { color: #7d8da0; font-size: 9px; }.confirm-subject-list { max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-gutter: stable; }.confirm-subject-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 9px 12px; border-top: 1px solid #edf1f5; }.confirm-subject-list li:first-child { border-top: 0; }.confirm-subject-list li > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #50708f; background: #eaf2f9; font-size: 9px; font-weight: 700; }.confirm-subject-list strong { display: block; overflow-wrap: anywhere; color: #2e465e; font-size: 10px; line-height: 1.5; }.confirm-subject-list small { display: block; margin-top: 2px; color: #8a98a7; font-size: 8px; }.confirm-subject-list .confirm-subject-loading { display: block; padding: 18px; color: #8795a5; text-align: center; }.confirm-subject-list .confirm-subject-loading.error { color: #b44c4c; }
.task-range-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 10px 0; padding: 9px 13px; border-radius: 8px; color: #718196; background: #f4f7fa; font-size: 10px; }.task-range-line strong { color: #3b526a; }.drawer-confirm-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 14px; border: 1px solid #ddcff3; border-radius: 10px; background: #f8f4ff; }.drawer-confirm-card strong { color: #654595; font-size: 11px; }.drawer-confirm-card p { margin: 4px 0 0; color: #8b77aa; font-size: 9px; }.drawer-confirm-card > div:last-child { display: flex; gap: 6px; }
.report-section { padding: 16px; border: 1px solid #dce8f2; border-radius: 12px; background: #f9fbfd; }.report-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }.report-summary div { padding: 11px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(23,50,76,.04); }.report-summary small, .report-summary strong { display: block; }.report-summary small { color: #8594a5; font-size: 8px; }.report-summary strong { margin-top: 5px; color: #193b58; font-size: 14px; }.report-email-list { display: grid; gap: 8px; }.report-email-list > article { padding: 12px; border: 1px solid #e4eaf0; border-radius: 9px; background: #fff; }.report-mail-head { display: flex; justify-content: space-between; gap: 14px; }.report-mail-head strong, .report-mail-head small { display: block; }.report-mail-head strong { color: #273e55; font-size: 11px; }.report-mail-head small { margin-top: 4px; color: #8493a4; font-size: 9px; }.mail-total { flex: 0 0 auto; color: #117d70; font-size: 12px; font-weight: 800; }.report-invoices { margin-top: 9px; border-top: 1px dashed #e1e7ed; }.report-invoices > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.4fr) auto auto; gap: 9px; align-items: center; padding-top: 8px; color: #728296; font-size: 9px; }.report-invoices strong { color: #27655e; }.report-invoices i { padding: 2px 4px; border-radius: 4px; color: #a56c17; background: #fff3dc; font-style: normal; }.candidate-note { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed #e1e7ed; color: #927035; font-size: 9px; line-height: 1.5; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 8px; }.toast { min-width: 250px; max-width: 400px; padding: 13px 16px; border: 1px solid #cbe9e4; border-radius: 10px; color: #176e63; background: #f2fbf8; box-shadow: var(--shadow); font-size: 12px; }.toast.error { color: #ad3544; border-color: #f2cdd2; background: #fff3f5; }.toast.info { color: #236b9d; border-color: #cbe3f4; background: #f1f8fd; }
.login-body { min-height: 100vh; overflow-x: hidden; background: #fff; }.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.08fr) minmax(420px, .92fr); }.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 9vw; color: #fff; background: radial-gradient(circle at 15% 15%, rgba(21,174,198,.26), transparent 34%), radial-gradient(circle at 85% 80%, rgba(29,117,213,.28), transparent 36%), linear-gradient(145deg, #0b2136, #123b5b); }.login-brand::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.015); }.brand-mark-large { width: 54px; height: 54px; margin-bottom: 45px; border-radius: 14px; font-size: 26px; }.login-brand .eyebrow { color: #4fc5cf; }.login-brand h1 { margin: 0; font-size: clamp(37px, 4.4vw, 62px); line-height: 1.16; letter-spacing: -.055em; }.login-description { max-width: 480px; margin: 25px 0 0; color: #a9c4d9; font-size: 15px; line-height: 1.8; }.brand-feature-row { position: absolute; left: 9vw; bottom: 55px; display: flex; gap: 22px; color: #82a5bf; font-size: 11px; }.brand-feature-row span::before { content: "✓"; margin-right: 7px; color: #29c4af; }.login-panel { display: grid; place-items: center; padding: 40px; background: #fff; }.login-form-wrap { width: min(390px, 100%); }.login-form-wrap h2 { margin: 0 0 9px; font-size: 27px; }.login-form-wrap > .muted { margin: 0 0 32px; }.login-form-wrap .stack-form { gap: 19px; }.login-form-wrap input { height: 47px; }.login-domain { margin-top: 32px; color: #a2adba; font-size: 10px; text-align: center; }.mobile-login-logo { display: none; align-items: center; gap: 10px; margin-bottom: 45px; font-size: 16px; font-weight: 800; }
@media (max-width: 1000px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.settings-grid { grid-template-columns: 1fr; }.form-actions { grid-column: 1; }.login-brand { padding: 7vw; }.brand-feature-row { left: 7vw; } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); transition: .2s; box-shadow: 20px 0 50px rgba(5,22,38,.2); }.sidebar.open { transform: translateX(0); }.workspace { width: 100%; margin-left: 0; }.topbar { height: 62px; padding: 0 16px; }.mobile-menu { display: block; }.breadcrumb, .user-copy { display: none; }.content { padding: 24px 15px 45px; }.page-heading { align-items: flex-start; }.page-heading h1 { font-size: 23px; }.metric-grid { gap: 9px; }.metric-card { padding: 14px; }.metric-icon { width: 36px; height: 36px; }.metric-card strong { font-size: 20px; }.panel-head { padding: 15px; } th, td { padding: 12px; }.two-col, .two-date-columns, .token-cost-calculator { grid-template-columns: 1fr; }.span-two { grid-column: 1; }.detail-metrics, .report-summary { grid-template-columns: repeat(2, 1fr); }.report-invoices > div { grid-template-columns: 1fr auto; }.report-invoices > div span:nth-child(2) { display: none; }.drawer-confirm-card { align-items: flex-start; flex-direction: column; }.login-shell { display: block; }.login-brand { display: none; }.login-panel { min-height: 100vh; padding: 28px; }.mobile-login-logo { display: flex; }.admin-metrics { grid-template-columns: 1fr; }.row-actions { flex-direction: column; } }
@media (max-width: 430px) { .metric-grid { grid-template-columns: 1fr 1fr; }.metric-card { gap: 10px; }.metric-card small { font-size: 9px; }.page-heading .button { flex: 0 0 auto; padding: 0 10px; }.form-panel { padding: 18px; }.drawer-content { padding: 18px 14px 30px; } }