/* YUYOU Hydraulics — load after style.css or login.css. */
:root {
  --brand-navy: #173b64;
  --brand-teal: #27998c;
  --brand-mint: #88d9c7;
  --module-blue: #89b6e3;
  --module-purple: #b8a9df;
  --module-amber: #e0bc7c;
  --module-teal: #88d9c7;
  --bg: #0b1622;
  --card: #142738;
  --surface: rgb(22 41 57 / 94%);
  --surface-solid: #162939;
  --surface-raised: #20394c;
  --tile: rgb(33 58 77 / 62%);
  --tile-hover: rgb(45 75 94 / 76%);
  --input: #102130;
  --border: rgb(155 191 213 / 16%);
  --border-strong: rgb(155 191 213 / 30%);
  --text: #edf4f8;
  --text-secondary: #b4c3d0;
  --secondary: #b4c3d0;
  --muted: #9dafc0;
  --accent: #88d9c7;
  --accent-bg: #204d4d;
  --accent-border: #4b8e86;
  --blue: #a1c6e9;
  --green: #99deca;
  --pending: #e0bc7c;
  --danger: #f0b5ba;
  --error: #ffd3d7;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
  background: radial-gradient(ellipse at 0% 0%, rgb(29 78 113 / 22%), transparent 46%), radial-gradient(ellipse at 100% 100%, rgb(31 95 89 / 12%), transparent 48%), var(--bg);
  color: var(--text);
}
body::before {
  position: fixed;
  z-index: 160;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #28537e 0%, #3b7299 26%, #27998c 56%, #87cba5 73%, #7795ba 100%);
  content: "";
  pointer-events: none;
}
::selection { background: #2d716b; color: #fff; }
:focus-visible { outline: 2px solid #9ee6d7; outline-offset: 4px; }

/* The original logo pixels retain their colours inside a quiet white frame. */
.brand { min-width: 0; max-width: 100%; }
.brand, .brand:link, .brand:visited, .brand:hover { color: var(--text); }
.brand > span:not(.brand-mark) { min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-navy);
  box-shadow: 0 3px 12px rgb(0 9 20 / 18%);
}
.brand-mark > span { display: none; }
.brand-logo {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}
.brand-mark .brand-logo { width: 100%; height: 100%; padding: 3px; border: 0; border-radius: 10px; }
.brand-name { color: #eff6fa; font-size: 20px; font-weight: 650; letter-spacing: .045em; }
.brand-subtitle { max-width: 240px; margin-top: 3px; color: #b0c5d4; font-size: 11px; letter-spacing: .015em; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.workspace-header { background: rgb(12 29 43 / 91%); border-bottom-color: rgb(116 170 188 / 20%); }
.topbar { grid-template-columns: minmax(280px, 1fr) minmax(210px, 360px) minmax(350px, 1.4fr); }
.search-box { background: #142d3e; border-color: #355569; color: #afc4d5; }
.search-box:focus-within { background: #19394a; border-color: #69b5a9; box-shadow: 0 0 0 2px rgb(91 180 164 / 12%); }
.search-box input { color: #edf5fa; font-size: 12px; }
.search-box input::placeholder { color: #aec0ce; }
.kbd { background: #1b3448; border-color: #426078; color: #bfd1df; }
.nav-button { color: #b1c3d2; font-size: 12px; }
.nav-button:hover { background: rgb(40 73 93 / 55%); color: #edf5fa; }
.nav-button.active { border-color: #4d9389; background: #205350; color: #d9f9ee; box-shadow: inset 0 1px 0 rgb(163 226 210 / 7%); }
.nav-icon { color: #adc4d7; }
.nav-button.active .nav-icon { color: #a8ead8; }
.nav-count { color: #bfd0df; background: #2e4b63; font-size: 9px; }
.nav-button.active .nav-count { color: #d1f6e9; background: #34716a; }
.private-badge, .private-badge svg { color: #bbd4d5; }
.avatar { background: #244759; border-color: #588394; color: #d4eeef; }
.user-button { color: #e0edf3; }
.user-button:hover { background: #2e5c6470; }
.workspace-context { min-width: 0; max-width: 100%; color: #aec1d0; }
.workspace-label, .breadcrumb, .page-description, .source-date { color: var(--text-secondary); }
.page-title { color: #e2eef5; font-weight: 600; }

/* A single fine colour edge identifies each module. It does not alter the board grid. */
.widget { --widget-accent: var(--module-blue); position: relative; background: var(--surface); border-color: var(--border); box-shadow: 0 8px 25px rgb(0 9 17 / 15%); }
.widget::before { position: absolute; top: 0; right: 15px; left: 15px; height: 2px; border-radius: 0 0 3px 3px; background: var(--widget-accent); opacity: .8; content: ""; pointer-events: none; }
.widget:hover { border-color: rgb(162 207 218 / 31%); }
.widget[data-widget-card="sites"], .widget[data-widget="sites"], .widget[data-widget-card="access"] { --widget-accent: var(--module-blue); }
.widget[data-widget-card="tasks"], .widget[data-widget="tasks"], .widget[data-widget-card="launchpad"], .widget[data-widget-card="connections"], .widget[data-widget-card="monitor"] { --widget-accent: var(--module-teal); }
.widget[data-widget-card="media"], .widget[data-widget="media"], .widget[data-widget-card="ai"], .widget[data-widget="ai"], .widget[data-widget-card="embedding"], .widget[data-widget-card="knowledge"] { --widget-accent: var(--module-purple); }
.widget[data-widget-card="calendar"], .widget[data-widget="calendar"], .widget[data-widget-card="source"] { --widget-accent: var(--module-amber); }
.widget-header { padding-top: 14px; }
.widget-header h2 { color: #e0edf4; font-size: 14px; font-weight: 600; }
.widget-header p, .widget-header .widget-subtitle { color: var(--text-secondary); font-size: 11px; line-height: 1.65; }
.widget-header h2 svg, .expand-button { color: #a2bdce; }
.expand-button:hover { border-color: #55798e; background: #2c4e63; color: #f0f8fc; }
.widget-footer { background: rgb(10 26 40 / 18%); border-top-color: var(--border); color: var(--text-secondary); }
.mini-stat { border-color: rgb(149 192 211 / 14%); background: rgb(28 53 72 / 75%); }
.mini-stat > strong { color: #e2eff6; }
.mini-stat > span, .mini-stat > label, .metric-label, .metric-note { color: var(--text-secondary); font-size: 11px; }
.service-tile, .account-tile, .launcher { border-color: rgb(139 182 205 / 16%); background: var(--tile); color: #d5e5ef; }
.service-tile:hover, .account-tile:hover, .launcher:hover { background: var(--tile-hover); border-color: #558195; }
.tile-info > strong, .service-tile .tile-info > strong, .account-tile .tile-info > strong { color: #e1edf4; font-size: 13px; font-weight: 550; }
.tile-info > span, .service-domain, .account-detail, .tile-status { color: var(--text-secondary); font-size: 11px; }
.launcher, .launcher strong, .launcher > span:not(.platform-icon) { color: #d4e5ee; font-size: 11px; }
.platform-icon, .launcher-icon { border-color: #4a6d83; background: #24435c; color: #d2e4f3; }
.launcher-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #4a6d83; border-radius: 9px; }
.platform-icon:has(> img.service-logo), .launcher-icon:has(> img.service-logo) { overflow: hidden; border-color: #cfdee6; background: #f7fbfd; }
.service-logo { display: block; width: 100%; height: 100%; max-width: 100%; padding: 3px; object-fit: contain; }
.platform-icon img.service-logo, .launcher-icon img.service-logo { border-radius: 7px; }
.ai-model { background: rgb(54 53 80 / 70%); border-color: #635e84; color: #e0daf3; }
.ai-model:hover { background: #454065; border-color: #9185b8; }
.ai-model .ai-icon { background: #514971; border-color: #8377ab; color: #e9e3ff; }
.ai-model strong { color: #e2dff5; font-size: 13px; }
.ai-model small, .ai-model p, .ai-description { color: #c2bdd7; font-size: 11px; }

/* Visible words are supplied by the task renderer; shapes distinguish states too. */
.task-row { border-bottom-color: rgb(146 185 205 / 17%); }
.task-detail strong, .task-title, .task-row strong { color: #e0edf4; font-size: 13px; }
.task-detail span, .task-meta, .task-row p { color: #b4c3d0; font-size: 11px; }
.task-check { border-color: #6e95a9; background: #18374a; color: #d7eee8; }
.task-check:hover { border-color: #99d1c5; background: #2c555c; }
.task-check.checked, .task-check[aria-pressed="true"] { background: #285c52; border-color: #77c8b1; color: #e1fff3; }
.task-status { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 25px; max-width: 100%; padding: 4px 7px; border: 1px solid #62728a; border-radius: 6px; background: #263d4e; color: #d5e2ec; font-size: 11px; line-height: 1.45; white-space: nowrap; }
.task-status .status-light { position: relative; display: inline-grid; place-items: center; flex: 0 0 11px; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; background: transparent; }
.task-status[data-status="todo"], .task-row[data-status="todo"] .task-status { background: #4a3c266b; border-color: #86714c; color: #f0d6a1; }
.task-status[data-status="in-progress"], .task-row[data-status="in-progress"] .task-status { background: #21486a8a; border-color: #628cac; color: #c4e1ff; }
.task-status[data-status="in-progress"] .status-light, .task-row[data-status="in-progress"] .status-light { border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; background: #99c9ec; box-shadow: 0 0 0 2px rgb(142 198 235 / 10%); animation: task-status-breathe 2.8s ease-in-out infinite; }
.task-status[data-status="done"], .task-row[data-status="done"] .task-status { background: #1d51466b; border-color: #579d86; color: #b1f0d4; }
.task-status[data-status="done"] .status-light, .task-row[data-status="done"] .status-light { border-color: #81d9b5; border-radius: 50%; background: #70cda8; color: #103c32; box-shadow: 0 0 5px rgb(123 223 187 / 24%); }
.task-status[data-status="done"] .status-light::after, .task-row[data-status="done"] .status-light::after { color: #103c32; content: "✓"; font-size: 8px; font-weight: 800; line-height: 1; }
.task-done .task-detail strong, .task-row[data-status="done"] .task-detail strong { color: #b7d6ce; }
.task-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.task-stats > * { min-width: 0; }
.task-stats .mini-stat { padding: 10px; }
.task-stats .mini-stat:nth-child(1) { border-top-color: #c9a562; }
.task-stats .mini-stat:nth-child(2) { border-top-color: #86b7dc; }
.task-stats .mini-stat:nth-child(3) { border-top-color: #70c6a9; }
.task-stats .mini-stat:nth-child(1) > strong { color: #ead1a1; }
.task-stats .mini-stat:nth-child(2) > strong { color: #b7d6f2; }
.task-stats .mini-stat:nth-child(3) > strong { color: #b3e8d5; }
.task-progress-bar { display: flex; width: 100%; height: 7px; min-height: 7px; margin: 12px 0 15px; overflow: hidden; border: 1px solid #365364; border-radius: 6px; background: #102535; }
.task-progress-bar > * { display: block; min-width: 0; height: 100%; flex-shrink: 1; }
.task-progress-bar > * + * { border-left: 1px solid #193247; }
.progress-todo { background: #d1ad70; }
.progress-active { background: #86b9df; }
.progress-done { background: #75caae; box-shadow: inset 0 1px 1px rgb(213 255 235 / 20%); }
@keyframes task-status-breathe { 0%, 100% { opacity: .8; box-shadow: 0 0 0 2px rgb(142 198 235 / 8%); } 50% { opacity: 1; box-shadow: 0 0 0 3px rgb(142 198 235 / 19%); } }

/* Beijing time remains visible when the breadcrumb collapses. */
.beijing-clock { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; padding: 3px 0; color: #d5e7ee; }
.clock-readout { display: grid; gap: 0; min-width: 0; }
.beijing-clock [data-clock-time] { display: block; color: #d9f2ee; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: .015em; font-variant-numeric: tabular-nums; }
.beijing-clock [data-clock-date] { display: block; color: #b4c6d5; font-size: 11px; line-height: 1.5; white-space: normal; }
.timezone-label { max-width: 100%; padding: 4px 7px; border: 1px solid #3e6571; border-radius: 5px; background: #1a3e4566; color: #b8dbd7; font-size: 10px; line-height: 1.4; white-space: normal; }
.clock-widget [data-clock-time] { color: #e0f3ed; }
.clock-date, .clock-note, .today-agenda, .source-widget p, .source-widget small { color: var(--text-secondary); }
.calendar-day { border-color: #405d71; background: #1d3749; color: #c8dce9; }
.calendar-day:hover { border-color: #6fada7; background: #2b535b; }
.calendar-day.today { border-color: #9bdcc4; background: #2c655d; color: #e8fff4; }
.calendar-day.has-tasks { color: #e7d1a6; }
.calendar-day small { background: #b2ddce; color: #102e31; }

.button-primary { border-color: #8dd3c0; background: #7bcdb8; color: #082e31; box-shadow: inset 0 1px 0 rgb(233 255 246 / 17%); }
.button-primary:hover { border-color: #b5ebda; background: #93dec9; color: #07282b; }
.button-secondary { border-color: #496a7d; background: #1b3a4d; color: #d2e4ed; }
.button-secondary:hover { border-color: #7ba9b3; background: #2c5364; color: #eef8fc; }
.button.is-favorite { border-color: #83baa6; background: #2a554d; color: #cfefdf; }
.filter-button { background: #173448; border-color: #3a5b70; color: #baccd9; }
.filter-button.active { background: #255850; border-color: #70a998; color: #d4f6e8; }
.text-link, .section-link, .text-button { color: #a9ddd4; }
.text-link:hover, .section-link:hover, .text-button:hover { color: #ddfff5; }
.notice { background: #18374570; border-color: #436472; color: #bdd2dc; }
.notice-dot { background: #dcbb82; }
.tag, .chip { border-color: #4b6c80; background: #244253; color: #c0d4e2; }
.connection-state { color: #d5c09e; }
.connection-row strong, .empty-widget strong, .empty-state h3 { color: #d0e2ec; }
.connection-row p, .empty-widget p, .empty-state p, .source-note, .footer-note { color: var(--text-secondary); font-size: 11px; }
.step-number { border-color: #64798b; background: #244459; color: #c9dbe8; }
.step-complete { border-color: #619c8b; background: #275449; color: #c6f2df; }
.config-row > span { color: var(--text-secondary); }
.config-row strong { color: #d9e8ef; }
.modal { border-color: #57788b; background: #142c3e; }
.modal-heading { background: #153246; border-bottom-color: #3e5d70; }
.modal-heading h2 { color: #e5f2f6; }
.modal-body p, .account-window-summary p, .embed-hint p { color: var(--text-secondary); }
.modal-body .widget { background: #1a3548; }
.modal-footer { background: #153043; border-top-color: #3a596d; }
.window-tabs button { color: #b6ccd9; }
.window-tabs button.active { color: #d4f4e9; background: #26574f; border-color: #669f91; }
.field input, .field select, .field textarea, .embed-controls select { background: #102837; border-color: #4a6c7e; color: #edf5f8; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #8acfc0; }
.field input::placeholder, .field textarea::placeholder { color: #9fb4c4; }
.field label { color: #d8e7ef; }
.field small { color: #b2c6d3; }
.toast { background: #1b4551; border-color: #6f9caa; color: #e0f2f2; }

/* The same brand treatment fits the independent login form. */
.login-brand { min-width: 0; align-items: center; }
.login-brand > div { min-width: 0; flex: 1; }
.login-brand strong { color: #eaf5fa; font-size: 22px; letter-spacing: .04em; }
.login-brand div > span { color: #b7cad8; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.login-card { position: relative; overflow: hidden; background: rgb(20 42 57 / 94%); border-color: #476c7e; box-shadow: 0 24px 60px rgb(0 11 20 / 32%); }
.login-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #487cab, #62beaa); content: ""; pointer-events: none; }
.login-card h1 { color: #edf6fa; }
.login-card .eyebrow { color: #a8d7d0; }
.login-card .intro, .access-note, .login-shell footer { color: var(--secondary); }
.private-label { color: #c7e9df; border-color: #528778; background: #1b4b4255; }
.login-card .status-message { border-color: #5f9b9b; background: #254f586e; color: #dcf5f0; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr); }
  .topbar > .search-box { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: 620px; margin: 0 auto; }
  .workspace-context .breadcrumb, .workspace-context .context-divider { display: none; }
  .navigation-bar { gap: 12px; }
  .beijing-clock { gap: 7px; }
  .timezone-label { font-size: 9px; padding: 3px 5px; }
}
@media (max-width: 820px) {
  .workspace-context { display: flex; }
  .navigation-bar { flex-wrap: wrap; }
  .navigation-bar .board-nav { flex: 1 1 100%; max-width: 100%; }
  .navigation-bar .workspace-context { flex: 1 1 100%; justify-content: flex-end; padding-top: 3px; }
  .clock-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  .beijing-clock [data-clock-time] { font-size: 18px; }
  .beijing-clock [data-clock-date] { font-size: 11px; }
}
@media (max-width: 700px) {
  .topbar { display: flex; flex-wrap: wrap; gap: 13px; padding: 16px; }
  .topbar .brand-section { flex: 1 1 100%; width: 100%; }
  .brand-section .brand { flex: 1; gap: 11px; }
  .brand-name { font-size: 19px; }
  .brand-subtitle { font-size: 11px; }
  .topbar .header-status { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .header-status #logout { margin-left: auto; }
  .topbar > .search-box { flex: 1 1 100%; max-width: 100%; order: 3; }
  .navigation-bar { padding-top: 0; padding-bottom: 12px; gap: 9px; }
  .navigation-bar .workspace-context { display: flex; justify-content: flex-start; padding: 8px 0 0; border-top: 1px solid #355568; }
  .beijing-clock { flex-wrap: wrap; gap: 6px 10px; padding: 0; }
  .timezone-label { font-size: 10px; }
  .task-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .task-stats .mini-stat { padding: 10px 8px; }
  .task-stats .mini-stat > strong { font-size: 24px; }
  .task-row { gap: 8px; }
  .task-detail strong { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
  .task-detail span { overflow-wrap: anywhere; white-space: normal; }
  .task-status { padding: 4px 6px; gap: 5px; font-size: 11px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .widget-header h2 { font-size: 14px; }
  .tile-info > strong, .service-tile .tile-info > strong { font-size: 13px; }
  .launcher > span:not(.platform-icon) { overflow-wrap: anywhere; }
  .login-brand { flex-wrap: wrap; gap: 10px; }
  .login-brand > div { flex: 1 1 145px; }
  .login-brand .private-label { margin-left: auto; max-width: 100%; }
  .login-shell { max-width: calc(100% - 30px); }
}
@media (max-width: 390px) {
  .topbar, .navigation-bar, .content { padding-right: 13px; padding-left: 13px; }
  .brand-name { font-size: 18px; }
  .brand-subtitle { font-size: 10px; }
  .task-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-stats .mini-stat { padding: 9px 7px; }
  .task-stats .mini-stat > span { font-size: 11px; }
  .task-status { font-size: 10px; }
  .timezone-label { font-size: 9px; }
  .beijing-clock [data-clock-date] { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-status .status-light { animation: none !important; opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.ai-model .ai-icon:has(> img.service-logo) { overflow: hidden; border-color: #cfdee6; background: #f7fbfd; }

.ai-connection-summary{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:20px;border:1px solid rgba(95,160,255,.25);border-radius:12px;background:rgba(41,91,151,.12)}
.ai-connection-summary .status-light{flex-shrink:0;margin-top:6px}.ai-connection-summary p{margin:6px 0;color:var(--muted)}.ai-connection-summary small{color:var(--muted);line-height:1.6}#deepseek-settings-form .inline-actions{gap:8px;flex-wrap:wrap}#deepseek-settings-form input{width:100%;min-width:0}

/* Direct AI conversation */
.ai-chat { margin-top: 18px; min-width: 0; }
.chat-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.chat-toolbar .field { margin: 0; flex: 1; max-width: 320px; }
.chat-toolbar select { width: 100%; }
.chat-messages { min-height: 200px; max-height: 430px; overflow-y: auto; padding: 16px; border: 1px solid #514e72; border-radius: 14px; background: #252536; overscroll-behavior: contain; }
.chat-message { max-width: 92%; padding: 12px 15px; border-radius: 13px; margin: 0 0 14px; border: 1px solid #4d4969; background: #34324b; }
.chat-message strong { display: block; color: #bfcde6; font-size: 11px; margin-bottom: 7px; }
.chat-user { margin-left: auto; background: #354761; border-color: #627b9d; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #eff0f8; font-size: 13px; line-height: 1.8; }
.chat-welcome { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 22px 10px; color: #bdb8d1; }
.chat-welcome strong { color: #eee8ff; }
.chat-welcome p { margin: 0; font-size: 12px; }
.chat-welcome .ai-icon { width: 44px; height: 44px; }
.chat-waiting { display: flex; align-items: center; gap: 10px; color: #bcb5e0; font-size: 12px; }
.ai-chat form { margin-top: 16px; }
.chat-send-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-send-row > span { color: #bdb7cf; font-size: 11px; }
.chat-error, .chat-truncated { color: #ffbc9d; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.ai-draft-details { margin-top: 22px; padding-top: 16px; border-top: 1px solid #4d4867; }
.ai-draft-details summary { color: #ccc5e7; cursor: pointer; font-size: 12px; }
.ai-draft-details form { margin-top: 14px; }
@media (max-width: 540px) { .chat-toolbar { align-items: stretch; } .chat-toolbar .field { min-width: 0; } .chat-toolbar button { align-self: flex-end; padding: 10px; } .chat-message { max-width: 100%; } .chat-messages { padding: 10px; } .chat-send-row { flex-wrap: wrap; } }

/* v08 actual provider usage and currency-preserving balances */
.ai-usage,.ai-balance { border:1px solid #253e55; border-radius:12px; padding:14px; background:linear-gradient(120deg,#101f31,#102938); }
.usage-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.usage-heading .tag { color:#8de8ed; background:#153e49; border-color:#235464; }
.token-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.token-metrics>div { border-left:3px solid #49c8e4; padding:8px 10px; background:#0c1b2b; border-radius:5px; min-width:0; }
.token-metrics>div:nth-child(2) { border-color:#c092f1; } .token-metrics>div:nth-child(3) { border-color:#4fe0ac; }
.token-metrics span,.token-metrics small { display:block; color:#98acc2; font-size:12px; }
.token-metrics strong { display:block; font-size:24px; font-variant-numeric:tabular-nums; line-height:1.6; color:#e3f2fc; overflow-wrap:anywhere; }
.balance-status { display:flex; gap:8px; align-items:center; font-size:13px; margin-bottom:10px; }
.balance-currencies { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.balance-currency { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline; }
.balance-currency strong { color:#6ae7c1; font-size:23px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.balance-currency small { grid-column:1/-1; color:#98acc2; } .ai-balance>small,.message-usage { font-size:11px; color:#9aabc1; }
.message-usage { display:block; margin-top:10px; }
@media(max-width:580px) { .token-metrics { gap:5px; } .token-metrics>div { padding:7px; } .token-metrics strong { font-size:19px; } .token-metrics small { font-size:10px; } }

/* External platform entries: main link and independent details button. */
.entry-card { position: relative; min-width: 0; }
.entry-card > .external-entry { height: 100%; padding-right: 49px; text-decoration: none; }
.entry-details { position: absolute; right: 8px; top: 8px; min-height: 28px; padding: 4px 6px; border: 1px solid #4a6d83; border-radius: 6px; background: #193248; color: #c8deec; font-size: 11px; cursor: pointer; }
.entry-details:hover, .entry-details:focus-visible { background: #31556c; border-color: #78b5cb; }
.external-entry:focus-visible { outline: 2px solid #78c6dd; outline-offset: 3px; }
.entry-card.launcher-entry > .external-entry { padding: 11px 8px 36px; }
.launcher-entry > .entry-details { top: auto; bottom: 6px; right: 50%; transform: translateX(50%); }
.entry-missing { color: #e3b97b; font-size: 10px; white-space: nowrap; }
.entry-card .tile-status { display: none; }
.external-browser-heading p { color: #b3c7d8; line-height: 1.7; }
.external-browser-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.external-browser-accounts { grid-column: 1 / -1; }
.external-browser-accounts .config-row { flex-wrap: wrap; gap: 8px; }

/* Network information and display timezone are separate from Shanghai task dates. */
.navigation-bar { flex-wrap: wrap; gap: 10px 20px; }
.navigation-bar .board-nav { flex: 1 1 730px; }
.navigation-bar .workspace-context { flex: 1 1 auto; min-width: 0; max-width: 100%; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.network-toolbar { --network-ink: #a9e4d4; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; padding: 6px 8px 6px 9px; border: 1px solid #426879; border-radius: 9px; background: linear-gradient(120deg, #142e41, #17383e); color: var(--network-ink); }
.network-toolbar[hidden] { display: none; }
.network-identity { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.network-identity > svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.4; fill: none; }
.network-readout { display: grid; gap: 1px; min-width: 0; }
.network-country-row { display: flex; align-items: center; gap: 7px; line-height: 1.35; min-width: 0; }
.network-country-row strong { overflow: hidden; max-width: 110px; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 11px; font-weight: 550; }
.network-status { color: #b2c4cf; font-size: 9px; white-space: nowrap; }
.network-readout code { overflow: hidden; max-width: 200px; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.network-speed { color: #b6d7de; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.network-test-button { padding: 5px 7px; border: 1px solid #4d7e7a; border-radius: 5px; background: #25514e; color: #c9f0e2; font-size: 10px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.network-test-button:hover { background: #32685f; border-color: #84c5b2; }
.network-test-button:disabled { cursor: default; opacity: .65; }
.network-toolbar[data-state="stale"] .network-status, .network-toolbar[data-state="auth"] .network-status { color: #f0cf9c; }
.network-toolbar.ip-changed { animation: network-ip-settle 6s ease-out both; }
.network-toolbar.ip-changed .network-status { color: inherit; }
@keyframes network-ip-settle { 0%, 12% { color: #ffd0d3; border-color: #d8858e; background: #572e3d; box-shadow: 0 0 16px #da68752e; } 100% { color: #a9e4d4; border-color: #426879; background: #17383e; box-shadow: 0 0 0 transparent; } }
.display-clock { gap: 8px; }
.display-clock [data-display-clock-time] { display: block; color: #d9f2ee; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: .015em; font-variant-numeric: tabular-nums; }
.display-clock [data-display-clock-date] { display: block; color: #b4c6d5; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.timezone-picker { display: grid; gap: 1px; max-width: 126px; padding: 2px 6px; border: 1px solid #426572; border-radius: 6px; background: #173b4366; }
.timezone-picker select { min-width: 0; max-width: 100%; padding: 1px 16px 1px 0; border: 0; border-radius: 3px; background: transparent; color: #c4e9df; font-family: inherit; font-size: 10px; cursor: pointer; }
.timezone-picker option, .timezone-picker optgroup { background: #183346; color: #e0efef; }
.timezone-picker [data-display-clock-offset] { color: #9fbfc5; font-size: 9px; line-height: 1.3; }
.network-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #547588; border-radius: 16px; background: #132c3e; color: #e1edf4; box-shadow: 0 28px 85px #0009; overflow: auto; }
.network-dialog::backdrop { background: #061320bb; backdrop-filter: blur(3px); }
.network-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px 16px; border-bottom: 1px solid #345668; background: #17374a; }
.network-dialog-heading h2 { margin: 5px 0 0; color: #edf7fa; font-size: 20px; font-weight: 600; }
.network-eyebrow { color: #a5dccc; font-size: 11px; }
.network-dialog-heading .icon-button { font-size: 24px; }
.network-dialog-body { padding: 19px 22px 20px; }
.network-details-list { display: grid; gap: 13px; margin: 0; }
.network-details-list > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.network-details-list dt { color: #a6becc; font-size: 12px; }
.network-details-list dd { min-width: 0; margin: 0; color: #dcecf2; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.network-details-list code { color: #b6ecdd; font-size: 12px; user-select: all; }
.network-details-list a { color: #a8dcd5; text-decoration: none; }
.network-text-button { padding: 2px 0; border: 0; background: none; color: #b0e3d7; font: inherit; font-size: 11px; line-height: 1.6; text-decoration: none; cursor: pointer; }
.network-details-list .network-text-button { margin-left: 9px; }
.network-text-button:hover, .network-details-list a:hover { color: #e0fff2; text-decoration: underline; }
.network-text-button:disabled { color: #6d8998; cursor: default; }
.network-explanation { margin: 18px 0; padding: 12px 13px; border: 1px solid #395b6a; border-radius: 8px; background: #1a3746; color: #b7ced9; font-size: 11px; line-height: 1.8; }
.network-test-card { padding: 14px 15px; border: 1px solid #3e716f; border-radius: 10px; background: #173c4166; }
.network-test-heading { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.network-test-heading > strong { flex: 1 1 210px; font-size: 13px; color: #c6ece0; }
.network-test-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 18px 0 12px; }
.network-test-results > div { min-width: 0; }
.network-test-results span { display: block; color: #acc8d0; font-size: 11px; }
.network-test-results strong { display: block; margin-top: 5px; color: #d9faeb; font-size: 23px; font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.network-test-card p { margin: 10px 0 7px; color: #c0dbe2; font-size: 11px; line-height: 1.7; }
.network-test-card small { display: block; color: #a6bfcb; font-size: 10px; line-height: 1.8; }
.network-test-time { display: block; margin-top: 9px; color: #9eb7c2; font-size: 10px; line-height: 1.7; }
.network-dialog-footer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.network-dialog-footer > [data-network-detail-status] { flex: 1 1 220px; color: #e4cba3; font-size: 11px; line-height: 1.6; }
@media (max-width: 1450px) { .navigation-bar .workspace-context { flex-basis: 100%; padding-top: 3px; } }
@media (max-width: 820px) { .navigation-bar .workspace-context { justify-content: flex-start; } }
@media (max-width: 700px) {
 .navigation-bar .workspace-context { gap: 9px 12px; align-items: flex-start; }
 .network-toolbar { flex: 0 1 auto; }
 .display-clock .clock-readout { display: grid; gap: 0; }
 .display-clock [data-display-clock-time] { font-size: 18px; }
 .display-clock [data-display-clock-date] { font-size: 10px; }
 .timezone-picker { max-width: 113px; }
 .network-dialog-heading { padding: 17px 17px 14px; }
 .network-dialog-body { padding: 17px; }
 .network-details-list > div { grid-template-columns: 83px minmax(0,1fr); gap: 10px; }
}
@media (max-width: 390px) { .network-toolbar { width: 100%; gap: 8px; } .network-identity { flex: 1; } .network-speed { font-size: 9px; } .network-dialog { width: calc(100vw - 24px); } .network-details-list > div { grid-template-columns: 1fr; gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .network-toolbar.ip-changed { animation: none; color: #ffd0d3; border-color: #d8858e; background: #572e3d; } }