@font-face {
  font-family: "Bebas Neue";
  src: url("./fonts/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Asap Sharp";
  src: url("./fonts/AsapSharp-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Asap Sharp";
  src: url("./fonts/AsapSharp-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --page-background: #FFFDFB;
  --primary: #286B76;
  --primary-hover: #1F5660;
  --main-text: #2B2530;
  --muted-text: #625A64;
  --purple: #C49ABE;
  --pink: #EBA6B9;
  --coral: #F9BDB2;
  --yellow: #FDE8B1;
  --peach: #F8D7C4;
  --light-blue: #B9E1ED;
  --bright-teal: #79C1CD;
  --border: #DED5D2;
  --night: #100D16;
  --night-2: #18131F;
  --surface: #211A29;
  --surface-2: #2B2234;
  --bg: var(--night);
  --panel: color-mix(in srgb, var(--surface) 88%, var(--purple));
  --panel-2: color-mix(in srgb, var(--surface-2) 90%, var(--coral));
  --ink: var(--page-background);
  --muted: color-mix(in srgb, var(--page-background) 68%, var(--purple));
  --line: color-mix(in srgb, var(--purple) 28%, transparent);
  --brand: var(--bright-teal);
  --brand-2: var(--light-blue);
  --good: var(--bright-teal);
  --warn: var(--yellow);
  --bad: var(--pink);
  --accent-text: var(--light-blue);
  --success-text: var(--good);
  --warning-text: var(--warn);
  --danger-text: var(--bad);
  --text-on-accent: #2B2530;
  --text-on-dark: #FFFDFB;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --hero-font: "Bebas Neue", "Arial Narrow", sans-serif;
  --display-font: "Asap Sharp", "Segoe UI", sans-serif;
  --small-title-font: "Asap Sharp", "Segoe UI", sans-serif;
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

body[data-palette="ocean"] {
  --primary: #236A8A;
  --primary-hover: #194F69;
  --purple: #8EA9D6;
  --pink: #83C8DC;
  --coral: #83D5C2;
  --yellow: #D6F0DA;
  --peach: #C9E8F2;
  --light-blue: #A9E5F2;
  --bright-teal: #54C5D8;
}
body[data-palette="sunset"] {
  --primary: #8A4E62;
  --primary-hover: #6D394B;
  --purple: #C79AC9;
  --pink: #F092AA;
  --coral: #F6A184;
  --yellow: #F7D36B;
  --peach: #F7C6A8;
  --light-blue: #E7C1D9;
  --bright-teal: #E99B9B;
}
body[data-palette="forest"] {
  --primary: #356A58;
  --primary-hover: #274F42;
  --purple: #8FAE91;
  --pink: #B8C58A;
  --coral: #D6B878;
  --yellow: #E8D99A;
  --peach: #D7C7A7;
  --light-blue: #B8D9C7;
  --bright-teal: #78B89C;
}
body[data-theme="light"] {
  --night: #F5F2F6;
  --night-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0EBF2;
  --page-background: #2B2530;
  --main-text: #2B2530;
  --muted-text: #625A64;
  --border: #D8CFD8;
  --bg: var(--night);
  --panel: color-mix(in srgb, var(--surface) 92%, var(--purple));
  --panel-2: color-mix(in srgb, var(--surface-2) 92%, var(--coral));
  --ink: var(--main-text);
  --muted: color-mix(in srgb, var(--main-text) 67%, var(--purple));
  --line: color-mix(in srgb, var(--primary) 20%, transparent);
  --accent-text: color-mix(in srgb, var(--primary) 78%, #17212B);
  --brand: #1F5660;
  --brand-2: #235F73;
  --good: #246B57;
  --warn: #725500;
  --bad: #963B59;
  --success-text: #246B57;
  --warning-text: #725500;
  --danger-text: #963B59;
  --shadow: 0 20px 60px rgba(54, 42, 58, .14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(circle at 4% 4%, color-mix(in srgb, var(--bright-teal) 32%, transparent), transparent 27%), radial-gradient(circle at 96% 16%, color-mix(in srgb, var(--light-blue) 28%, transparent), transparent 29%), radial-gradient(circle at 92% 86%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 32%), radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 30%), var(--bg); color: var(--ink); }
h1, h2 { font-family: var(--display-font); font-weight: 700; }
h3 { font-family: var(--small-title-font); font-weight: 700; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { position: relative; width: min(1480px, calc(100% - 56px)); min-height: 100vh; margin: 0 auto; padding: 22px 0 28px; }
body.setup-only .shell { width: 100%; max-width: none; margin: 0; padding: 0; display: block; }
body.setup-only .sidebar,
body.setup-only .workspace > header { display: none; }
body.setup-only .workspace main { width: 100%; min-height: 100vh; padding: clamp(24px, 5vw, 64px) clamp(18px, 5vw, 54px); display: grid; align-content: center; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 27%), radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--bright-teal) 20%, transparent), transparent 30%), radial-gradient(circle at 48% 105%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 34%), var(--night); }
.launch-screen { min-height: 100vh; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 27%), radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--bright-teal) 20%, transparent), transparent 30%), radial-gradient(circle at 48% 105%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 34%), var(--night); }
.launch-card { width: min(1180px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr); align-items: center; gap: clamp(24px, 5vw, 68px); padding: clamp(34px, 5.5vw, 72px); position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent); border-radius: 36px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--primary)), color-mix(in srgb, var(--night-2) 90%, var(--purple))); box-shadow: 0 34px 100px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.06); }
.launch-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink), var(--coral), var(--yellow)); z-index: 3; }
.launch-card::after { content: ""; position: absolute; width: 420px; aspect-ratio: 1; right: -170px; bottom: -230px; border-radius: 50%; background: color-mix(in srgb, var(--pink) 18%, transparent); filter: blur(12px); z-index: -1; }
.launch-copy { position: relative; z-index: 2; }
.launch-copy h1 { margin: 12px 0 20px; max-width: 650px; display: grid; justify-items: start; gap: 2px; line-height: .96; }
.launch-copy h1 { font-family: var(--hero-font); font-weight: 400; }
.launch-title-intro { color: var(--page-background); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; }
.launch-title-main { color: transparent; background: linear-gradient(105deg, var(--page-background) 12%, var(--light-blue) 38%, var(--pink) 68%, var(--yellow)); background-clip: text; -webkit-background-clip: text; font-size: clamp(64px, 8vw, 104px); line-height: .92; letter-spacing: -.035em; }
.launch-feature-showcase { width: min(820px, 100%); margin: 22px auto 24px; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: center; gap: 0; }
.first-launch-charlie { display: block; width: 100%; height: auto; margin: 0; position: relative; z-index: 1; border-radius: 50%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.42)); }
.launch-copy > p:not(.eyebrow):not(.launch-status) { max-width: 620px; color: color-mix(in srgb, var(--page-background) 78%, var(--purple)); font-size: 18px; line-height: 1.7; }
.launch-feature-panel { min-width: 0; margin-left: -30px; display: grid; grid-template-columns: 190px minmax(250px, 310px); align-items: center; justify-content: start; gap: 24px; position: relative; z-index: 2; }
.launch-capabilities { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 8px 0; position: relative; }
.launch-capability { min-height: 48px; padding: 10px 14px; position: relative; border: 1px solid color-mix(in srgb, var(--feature-color) 34%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--feature-color) 11%, var(--surface)); color: color-mix(in srgb, var(--feature-color) 64%, var(--ink)); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.15; text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,.16); box-shadow: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.launch-capability:nth-child(1) { --feature-color: var(--light-blue); transform: translateX(-10px); }
.launch-capability:nth-child(2) { --feature-color: var(--purple); transform: translateX(8px); }
.launch-capability:nth-child(3) { --feature-color: var(--pink); transform: translateX(8px); }
.launch-capability:nth-child(4) { --feature-color: var(--yellow); transform: translateX(-10px); }
.launch-capability:hover { background: color-mix(in srgb, var(--feature-color) 16%, var(--surface)); border-color: color-mix(in srgb, var(--feature-color) 52%, var(--line)); }
.launch-capability:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }
.launch-capability.active { background: color-mix(in srgb, var(--feature-color) 24%, var(--surface)); border-color: color-mix(in srgb, var(--feature-color) 72%, var(--line)); font-weight: 750; box-shadow: 0 8px 18px color-mix(in srgb, var(--feature-color) 13%, transparent); }
.launch-capability-detail[data-tone="blue"] { --feature-color: var(--light-blue); }
.launch-capability-detail[data-tone="purple"] { --feature-color: var(--purple); }
.launch-capability-detail[data-tone="pink"] { --feature-color: var(--pink); }
.launch-capability-detail[data-tone="yellow"] { --feature-color: var(--yellow); }
.launch-capability-detail { min-height: 220px; margin: 0; padding: 30px 32px; display: flex; align-items: center; border: 1px solid color-mix(in srgb, var(--feature-color) 42%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--feature-color) 10%, var(--surface-2)); color: var(--ink); text-align: left; opacity: 1; transform: translateY(0); transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease; }
.launch-capability-detail.changing { opacity: 0; transform: translateY(5px); }
.launch-capability-copy { max-width: 400px; }
.launch-capability-emoji { margin: 18px auto 0; display: block; width: fit-content; font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.14)); }
.launch-capability-copy h2 { margin: 0 0 12px; color: color-mix(in srgb, var(--feature-color) 72%, var(--ink)); font-family: inherit; font-size: 27px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; text-align: left; transition: color .18s ease; }
.launch-capability-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.launch-status { width: fit-content; min-height: 54px; margin: 0; padding: 6px 14px 6px 8px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--bright-teal) 25%, transparent); border-radius: 14px; background: rgba(10, 8, 14, .34); color: var(--accent-text); font-weight: 700; }
.launch-first-heading, .launch-progress-wrap { display: none; }
.launch-first-heading { color: var(--page-background); font-family: var(--display-font); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.05; letter-spacing: .01em; }
.launch-progress-wrap { width: min(430px, 78vw); gap: 7px; }
.launch-progress-track { width: 100%; height: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--bright-teal) 38%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .25); }
.launch-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink)); transition: width .5s ease; }
.launch-progress-wrap small { color: var(--muted); font-size: 12px; font-weight: 600; }
.launch-warning { max-width: 560px; margin: 12px auto 0; color: var(--warning-text); font-size: 13px; line-height: 1.45; font-weight: 700; }
.loading-charlie { width: 56px; height: auto; flex: 0 0 auto; }
.launch-continue { min-width: 140px; margin-top: 14px; }
.launch-error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.launch-error-actions .launch-continue { margin-top: 14px; }
.launch-dismiss-update { align-self: center; margin-top: 14px; padding: 6px 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.launch-dismiss-update:hover { color: var(--page-background); }
.launch-dismiss-update[data-confirming="true"] { color: var(--warning-text); }
.launch-visual { min-width: 0; position: relative; display: grid; place-items: center; align-content: center; min-height: 450px; z-index: 1; }
body[data-launch-mode="returning"] .launch-card { min-height: 560px; grid-template-columns: 1fr; place-items: center; text-align: center; }
body[data-launch-mode="returning"] .launch-copy { display: grid; justify-items: center; }
body[data-launch-mode="returning"] .launch-copy h1 { justify-items: center; margin: 0 0 28px; }
body[data-launch-mode="returning"] .launch-title-intro { font-size: clamp(30px, 4vw, 50px); }
body[data-launch-mode="returning"] .launch-title-main { font-size: clamp(86px, 11vw, 142px); }
body[data-launch-mode="returning"] #launch-eyebrow,
body[data-launch-mode="returning"] #launch-description,
body[data-launch-mode="returning"] .launch-capabilities,
body[data-launch-mode="returning"] .launch-feature-showcase,
body[data-launch-mode="returning"] .launch-visual,
body[data-launch-mode="returning"] .launch-label { display: none; }
body[data-launch-mode="returning"] .launch-status { min-height: 0; padding: 0; flex-direction: column; gap: 18px; border: 0; background: transparent; color: var(--accent-text); font-size: 18px; }
body[data-launch-mode="returning"] #launch-status { order: -1; }
body[data-launch-mode="returning"] .loading-charlie { width: clamp(150px, 18vw, 220px); }
body[data-launch-mode="returning"] .first-launch-charlie { display: none; }
body[data-launch-mode="returning"] .launch-redirect-note { max-width: 360px; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 500; }
body[data-launch-mode="update"] .launch-card { min-height: 560px; grid-template-columns: 1fr; place-items: center; text-align: center; }
body[data-launch-mode="update"] .launch-copy { display: grid; justify-items: center; max-width: 780px; }
body[data-launch-mode="update"] .launch-copy h1 { display: grid; justify-items: center; gap: 8px; margin: 0 0 22px; line-height: .98; }
body[data-launch-mode="update"] .update-title-charlie { font-size: clamp(96px, 13vw, 164px); }
body[data-launch-mode="update"] .update-title-message { color: var(--page-background); font-family: var(--hero-font); font-size: clamp(34px, 4.5vw, 58px); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
body[data-launch-mode="update"] #launch-description { max-width: 620px; margin: 0 0 24px; text-align: center; }
body[data-launch-mode="update"] .launch-status { min-height: 0; margin: 0; padding: 0; flex-direction: column; gap: 14px; border: 0; background: transparent; color: var(--accent-text); font-size: 17px; line-height: 1.5; }
body[data-launch-mode="update"].update-installing .launch-status { padding: 22px; border: 1px solid color-mix(in srgb, var(--bright-teal) 55%, var(--line)); background: rgba(10, 8, 14, .34); }
body[data-launch-mode="update"] .loading-charlie { width: clamp(120px, 15vw, 180px); }
body[data-launch-mode="update"] .launch-error-actions { align-items: center; }
body[data-launch-mode="first"] .launch-card { min-height: 650px; grid-template-columns: 1fr; place-items: center; text-align: center; }
body[data-launch-mode="first"] .launch-copy { display: grid; justify-items: center; max-width: 960px; }
body[data-launch-mode="first"] .launch-copy h1 { justify-items: center; margin: 0 0 22px; }
body[data-launch-mode="first"] .launch-title-intro { font-size: clamp(30px, 4vw, 50px); }
body[data-launch-mode="first"] .launch-title-main { font-size: clamp(96px, 13vw, 164px); }
body[data-launch-mode="first"] #launch-description { margin: 0; text-align: center; }
body[data-launch-mode="first"] .launch-capabilities { justify-content: center; }
body[data-launch-mode="first"] .launch-visual { display: none; }
body[data-launch-mode="first"] .launch-status { min-height: 46px; padding: 8px 0; flex-direction: column; gap: 4px; border: 0; background: transparent; font-size: 15px; }
body[data-launch-mode="first"] .loading-charlie { width: clamp(100px, 13vw, 130px); }
body[data-launch-mode="first"] .launch-first-heading { display: block; margin-top: 4px; }
body[data-launch-mode="first"] .launch-progress-wrap { margin-top: 10px; display: grid; }
body[data-launch-mode="first"] .launch-redirect-note { display: none; }
.visual-orbit { position: absolute; width: min(92%, 470px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--bright-teal) 25%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--light-blue) 13%, transparent), transparent 61%); box-shadow: 0 0 80px color-mix(in srgb, var(--primary) 18%, transparent); }
.visual-orbit::before, .visual-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.visual-orbit::before { inset: 11%; border: 1px dashed color-mix(in srgb, var(--purple) 45%, transparent); }
.visual-orbit::after { width: 18px; height: 18px; top: 9%; right: 18%; background: var(--pink); box-shadow: -280px 230px 0 var(--yellow), 40px 285px 0 -3px var(--bright-teal); }
.visual-orbit span { position: absolute; border-radius: 50%; filter: blur(.2px); }
.visual-orbit span:nth-child(1) { width: 54px; height: 54px; left: 2%; top: 32%; background: color-mix(in srgb, var(--purple) 60%, transparent); }
.visual-orbit span:nth-child(2) { width: 34px; height: 34px; right: 2%; top: 48%; background: color-mix(in srgb, var(--coral) 70%, transparent); }
.visual-orbit span:nth-child(3) { width: 22px; height: 22px; left: 22%; bottom: 5%; background: var(--light-blue); }
.dog-stage { width: 100%; min-height: 330px; display: grid; place-items: center; position: relative; background: transparent; border: 0; overflow: visible; z-index: 2; }
.dog-stage img { display: block; width: min(100%, 430px); height: auto; border-radius: 50%; image-rendering: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.48)); transform: translateX(2%); }
.visual-caption { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; margin-top: -30px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--purple) 34%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.visual-caption strong, .visual-caption small { display: block; }
.visual-caption strong { color: var(--page-background); }
.visual-caption small { margin-top: 2px; color: var(--muted); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bright-teal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bright-teal) 16%, transparent), 0 0 18px var(--bright-teal); }
.launch-label { position: absolute; left: clamp(30px, 6vw, 72px); bottom: 20px; margin: 0; color: color-mix(in srgb, var(--page-background) 45%, var(--purple)); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.sidebar { position: relative; z-index: 35; height: auto; margin-bottom: 16px; padding: 7px 8px 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--purple) 32%, var(--line)); border-radius: 18px; background: linear-gradient(100deg, color-mix(in srgb, var(--light-blue) 13%, var(--surface)), color-mix(in srgb, var(--pink) 10%, var(--surface)), color-mix(in srgb, var(--yellow) 9%, var(--surface))); color: var(--ink); box-shadow: 0 14px 38px rgba(54,42,58,.11); backdrop-filter: blur(18px); }
.sidebar::before { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink), var(--coral), var(--yellow)); content: ""; }
.brand-area { max-width: none; flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; gap: 9px; align-items: center; padding: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 13px; }
.brand small { color: var(--muted); margin-top: 1px; font-size: 10px; white-space: nowrap; }
.brand-actions { padding: 0; display: flex; align-items: center; gap: 6px; }
.brand-action { min-width: 34px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.brand-action:hover { border-color: color-mix(in srgb, var(--purple) 50%, var(--line)); background: color-mix(in srgb, var(--purple) 12%, var(--surface)); color: var(--ink); transform: translateY(-1px); }
.brand-action svg { width: 17px; height: 17px; }
.brand-bug-action { padding-inline: 9px 10px; }
.mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: color-mix(in srgb, var(--surface) 80%, var(--pink)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pink) 22%, transparent); }
.mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.primary-nav-area { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; overflow: hidden; }
.primary-nav-tools { order: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.primary-nav-tools button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--accent-text); font: inherit; font-size: 18px; font-weight: 850; box-shadow: 0 7px 18px rgba(0,0,0,.08); }
.primary-nav-tools button:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); transform: translateY(-1px); }
.primary-nav { order: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.primary-nav button { min-width: 72px; min-height: 56px; padding: 5px 6px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 750; line-height: 1.1; white-space: nowrap; }
.primary-nav button:hover { background: color-mix(in srgb, var(--bright-teal) 12%, var(--surface)); color: var(--accent-text); }
.primary-nav button.active { background: color-mix(in srgb, var(--pink) 18%, var(--surface)); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 35%, transparent); }
.primary-nav button > span { width: auto; height: auto; display: inline; border-radius: 0; background: transparent; color: inherit; font-size: 16px; }
.primary-nav button .nav-notice-count { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 8px; }
.nav-notice-count { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--pink); color: var(--text-on-accent); font-size: 10px; }
.sidebar-foot { display: none; }
.connection-statuses { display: none !important; }
.workspace, main, #app { min-width: 0; max-width: 100%; }
#app:focus { outline: none; }
.app-header { display: none; }
header { height: 88px; padding: 18px 30px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--night-2) 84%, transparent); position: sticky; top: 0; backdrop-filter: blur(16px); z-index: 4; }
header h1 { margin: 2px 0 0; font-size: 24px; }
.eyebrow { margin: 0; color: var(--brand); font-family: var(--small-title-font); font-weight: 400; font-size: 12px; letter-spacing: .015em; }
.eyebrow:empty { display: none; }
.health { margin-left: auto; padding: 8px 12px; background: color-mix(in srgb, var(--bright-teal) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bright-teal) 34%, transparent); border-radius: 999px; font-size: 13px; color: var(--accent-text); }
.health span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 6px; }
.icon-button { display: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 8px 10px; }
main { width: 100%; max-width: none; margin: 0; padding: 0; }
.workspace-footer { padding: 24px 5px 0; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px; }
.internet-status, .cli-status {
  display: flex;
  width: max-content;
  max-width: min(230px, calc(100vw - 28px));
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 8px 24px rgba(31, 48, 42, .12);
  font-size: 10px;
  backdrop-filter: blur(14px);
}
.internet-status span, .cli-status span { width: 9px; height: 9px; border-radius: 50%; background: #d8a548; }
.internet-status.is-online span, .cli-status.is-online span { background: var(--good); }
.internet-status.is-offline, .cli-status.is-offline { color: #8d2f31; border-color: rgba(174, 55, 59, .32); background: #fff1ef; }
.internet-status.is-offline span, .cli-status.is-offline span { background: #c54448; box-shadow: 0 0 0 4px rgba(197, 68, 72, .12); }
.connectivity-banner {
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid rgba(197, 68, 72, .3);
  border-radius: 15px;
  color: #74272a;
  background: #fff0ed;
}
.connectivity-banner strong { display: block; margin-bottom: 3px; font-family: var(--small-title-font); }
.connectivity-banner span { font-size: 13px; }
body.setup-only .connectivity-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 100;
  width: min(560px, calc(100% - 28px));
  margin: 0;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(34, 16, 18, .2);
  backdrop-filter: blur(16px);
}
body.setup-only .connectivity-banner::before {
  content: "!";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #c54448;
  font-size: 12px;
  font-weight: 900;
}
body.setup-only .connectivity-banner strong {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
}
body.setup-only .connectivity-banner span {
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 620px) {
  body.setup-only .connectivity-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  body.setup-only .connectivity-banner span {
    flex-basis: calc(100% - 31px);
    margin-left: 31px;
    margin-top: -7px;
  }
}
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 20px; margin-bottom: 20px; }
.card, .hero-card { background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--surface-2) 90%, var(--primary))); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.hero-card { padding: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 55%, var(--surface)), color-mix(in srgb, var(--purple) 35%, var(--surface-2))); border-color: color-mix(in srgb, var(--bright-teal) 32%, transparent); }
.hero-card h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.08; margin: 8px 0 12px; max-width: 700px; }
.hero-card p { color: var(--muted); max-width: 740px; line-height: 1.6; }
.card { padding: 18px; }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app > section + section { margin-top: 18px !important; }
.stack { display: grid; gap: 12px; }
.setup-stepper { margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.setup-stepper > div { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: color-mix(in srgb, var(--surface) 84%, transparent); }
.setup-stepper span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.setup-stepper .active { border-color: var(--bright-teal); color: var(--page-background); }
.setup-stepper .active span, .setup-stepper .complete span { background: var(--bright-teal); color: var(--text-on-accent); }
.setup-stepper .complete { color: var(--accent-text); }
.setup-wizard-card { padding: clamp(20px, 3vw, 32px); }
.permission-grid { display: grid; gap: 10px; }
.permission-row { padding: 14px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.permission-row input { margin-top: 4px; }
.permission-row span, .permission-row strong, .permission-row small { display: block; }
.permission-row small { margin-top: 4px; color: var(--muted); }
.wizard-actions { display: flex; justify-content: flex-end; gap: 10px; }
.setup-simple-shell { width: min(1180px, 100%); margin: auto; }
.setup-dots { margin: 0 auto 22px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; }
.setup-intro-note { max-width: 520px; margin: 0 auto; text-align: center; color: var(--muted); }
.startup-options { margin-top: 24px; display: grid; gap: 10px; }
.startup-options h3 { margin: 0 0 2px; color: var(--accent-text); text-align: center; font-size: 24px; }
.startup-options code { padding: 1px 5px; border-radius: 5px; background: var(--panel-2); color: var(--ink); }
.setup-dots > .setup-dot { min-width: 0; padding: 0; position: relative; display: grid; justify-items: center; gap: 8px; border: 0; color: var(--muted); text-align: center; background: transparent; }
.setup-dots > .setup-dot:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: calc(50% + 12px); width: calc(100% - 24px); height: 2px; background: var(--line); }
.setup-dots span { width: 16px; height: 16px; border: 2px solid var(--line); border-radius: 50%; background: var(--night); z-index: 1; }
.setup-dots small { font-size: 11px; }
.setup-dots .active, .setup-dots .visited { color: var(--accent-text); }
.setup-dots .active span { border-color: var(--bright-teal); background: var(--bright-teal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bright-teal) 14%, transparent); }
.setup-dots .complete span { border-color: var(--pink); background: var(--pink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 14%, transparent); }
.setup-dots .in-progress span { border-color: var(--bright-teal); background: var(--night); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bright-teal) 14%, transparent); }
.setup-dots button.visited:hover small { color: var(--page-background); }
.setup-simple-card { min-height: 650px; padding: clamp(34px, 5.5vw, 72px); border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent); border-radius: 36px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--primary)), color-mix(in srgb, var(--night-2) 90%, var(--purple))); box-shadow: 0 34px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
body[data-theme="light"] .setup-simple-card { --accent-text: var(--main-text); --muted: var(--muted-text); }
.setup-simple-card .section-head { display: block; text-align: center; margin-bottom: 24px; }
.setup-simple-card .section-head h2 { font-size: clamp(32px, 5vw, 44px); }
.setup-simple-card .section-head p { max-width: 560px; margin: 8px auto 0; }
.setup-charlie { display: block; width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; }
.setup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.setup-avatar-preview { margin-bottom: 18px; padding: 14px 16px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; border: 1px solid color-mix(in srgb, var(--bright-teal) 42%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--bright-teal) 9%, var(--surface-2)); }
.setup-avatar-preview .user-profile-avatar { width: 64px; height: 64px; font-size: 20px; }
.setup-avatar-preview h3, .setup-avatar-preview p { margin: 0; }
.setup-avatar-preview p { margin-top: 3px; color: var(--accent-text); }
.setup-avatar-preview small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.4; }
.profile-loading { margin-bottom: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.profile-loading img { width: 52px; height: auto; flex: 0 0 auto; }
.profile-loading span, .profile-loading strong, .profile-loading small { display: block; }
.profile-loading small { margin-top: 3px; color: var(--muted); }
.profile-retrieve { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.profile-retrieve > small { max-width: 430px; color: var(--muted); line-height: 1.4; }
.setup-fields label { display: grid; gap: 7px; color: var(--accent-text); font-size: 13px; font-weight: 700; }
.setup-fields > label:last-of-type:nth-child(odd), .setup-fields > .wide { grid-column: 1 / -1; }
.setup-fields.compact { margin-top: 16px; }
.responsibilities-field { display: grid; gap: 7px; }
.responsibilities-file { margin-top: 4px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.responsibilities-file small { color: var(--muted); }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-heading label { display: block; }
.field-heading .button-secondary { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
.context-prompt-toggle { justify-self: start; margin-top: 3px; }
.context-prompt-action { margin-top: 3px; display: flex; align-items: center; gap: 12px; }
.context-prompt-action .context-prompt-toggle { flex: 0 0 auto; margin-top: 0; }
.context-prompt-action > small { max-width: 330px; color: var(--muted); line-height: 1.4; }
.context-prompt-panel { display: grid; gap: 9px; margin-top: 5px; padding: 14px; border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.context-prompt-panel small { color: var(--muted); }
.context-prompt-text { min-height: 260px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.context-prompt-panel .actions { margin-top: 0; }
.connector-grid, .agent-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.connector-option { min-width: 0; }
.connector-choice { min-height: 84px; padding: 16px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.connector-choice > input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: 0 0 24px; accent-color: var(--bright-teal); }
.connector-choice > span { flex: 1; text-align: left; }
.connector-choice span, .connector-choice strong, .connector-choice small { display: block; }
.connector-choice small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.expandable-agent-option { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); overflow: hidden; }
.expandable-agent-option > .connector-choice { border: 0; border-radius: 0; background: transparent; }
.expandable-agent-option > .third-party-skill-catalog, .expandable-agent-option > .custom-agent-brief { padding: 16px; border-top: 1px solid color-mix(in srgb, var(--bright-teal) 25%, transparent); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.built-in-agent-option { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); overflow: hidden; }
.built-in-agent-option > .connector-choice { border: 0; border-radius: 0; background: transparent; }
.built-in-agent-option > .connector-choice input:disabled { opacity: 1; cursor: not-allowed; }
.built-in-agent-heading .built-in-agents-disclosure { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
.built-in-agents-list { padding: 0 16px 16px; display: grid; gap: 10px; border-top: 1px solid color-mix(in srgb, var(--bright-teal) 25%, transparent); }
.built-in-agents-list > strong { padding-top: 14px; color: var(--accent-text); }
.built-in-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.built-in-agent { padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--surface) 86%, var(--primary)); }
.built-in-agent strong, .built-in-agent small { display: block; }
.built-in-agent small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.out-of-box-skills { grid-column: 1 / -1; padding: 16px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.skill-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.skill-picker-heading strong, .skill-picker-heading small { display: block; }
.skill-picker-heading strong { color: var(--accent-text); }
.skill-picker-heading small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.skill-picker-heading .out-of-box-skills-disclosure { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
.out-of-box-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.out-of-box-skill-grid .connector-choice { min-height: 132px; align-items: flex-start; background: color-mix(in srgb, var(--surface) 86%, var(--primary)); }
.out-of-box-skill-grid .connector-choice > input { margin-top: 2px; }
.reusable-skill-catalog, .third-party-skill-catalog { display: grid; gap: 10px; }
.reusable-skill-catalog .field-heading > div strong, .reusable-skill-catalog .field-heading > div small, .third-party-skill-catalog .field-heading > div strong, .third-party-skill-catalog .field-heading > div small { display: block; }
.reusable-skill-catalog .field-heading > div strong, .third-party-skill-catalog .field-heading > div strong { color: var(--accent-text); }
.reusable-skill-catalog .field-heading > div small, .third-party-skill-catalog .field-heading > div small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.add-reusable-skill span, .add-third-party-skill span, .add-custom-agent span { margin-right: 4px; font-size: 18px; line-height: 0; }
.section-add-button { justify-self: start; }
.reusable-skill-entries, .third-party-skill-entries { display: grid; gap: 10px; }
.reusable-skill-entry, .third-party-skill-entry { padding: 13px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.reusable-skill-entry > label, .third-party-skill-entry > label { align-self: start; }
.reusable-skill-entry-head, .third-party-skill-entry-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--accent-text); }
.reusable-skill-entry textarea, .third-party-skill-entry textarea { min-height: 84px; }
.third-party-agent-summary, .third-party-agent-editor { grid-column: 1 / -1; }
.third-party-agent-summary { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.third-party-agent-summary strong, .third-party-agent-summary small { display: block; }
.third-party-agent-summary small { margin-top: 4px; color: var(--muted); }
.third-party-agent-editor, .third-party-structured-fields { display: grid; gap: 10px; }
.third-party-structured-fields { grid-template-columns: 1fr; }
.gui-preference-card { padding: 14px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--bright-teal) 25%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gui-preference-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gui-preference-title { display: block; color: var(--accent-text); }
.trust-gui-choice { margin-left: auto; padding: 8px 10px; display: flex !important; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 84%, var(--primary)); }
.trust-gui-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--bright-teal); }
.trust-gui-choice span, .trust-gui-choice strong, .trust-gui-choice small { display: block; }
.trust-gui-choice small { margin-top: 3px; color: var(--muted); }
.gui-preference-card > textarea:not([hidden]) { min-height: 110px; }
.third-party-agent-editor > .generate-third-party-prompt { justify-self: start; }
.generate-agent-prompt, .generate-third-party-prompt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.prompt-loading-charlie { width: 24px; height: 24px; object-fit: contain; }
.custom-agent-brief { display: grid; gap: 7px; }
.custom-agent-brief .field-heading > div strong, .custom-agent-brief .field-heading > div small { display: block; }
.custom-agent-brief .field-heading > div strong { color: var(--accent-text); }
.custom-agent-brief .field-heading > div small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.custom-agent-brief > small { color: var(--muted); line-height: 1.45; }
.custom-agent-more { border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-2) 76%, transparent); }
.custom-agent-more { width: 100%; box-sizing: border-box; }
.custom-agent-more summary { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; color: var(--accent-text); font-weight: 700; cursor: pointer; list-style: none; }
.custom-agent-more summary::after { content: "+"; color: var(--muted); font-size: 18px; }
.custom-agent-more[open] summary::after { content: "−"; }
.custom-agent-more p { margin: 0; padding: 0 12px 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.custom-agent-brief textarea { min-height: 190px; }
.custom-agent-entries { display: grid; gap: 10px; }
.custom-agent-entry { display: grid; gap: 7px; }
.custom-agent-entry-head { display: flex; align-items: center; justify-content: space-between; color: var(--accent-text); }
.custom-agent-title { min-width: 0; flex: 1; border: 0; padding: 4px 6px; background: transparent; color: var(--accent-text); font: inherit; font-weight: 800; }
.custom-agent-title:focus { border-radius: 7px; outline: 2px solid var(--bright-teal); }
.custom-agent-summary { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.custom-agent-summary strong, .custom-agent-summary small { display: block; }
.custom-agent-summary small { margin-top: 4px; color: var(--muted); }
.custom-agent-editor { display: grid; gap: 10px; }
.custom-agent-structured-fields { display: grid; grid-template-columns: 1fr; gap: 9px; }
.custom-agent-structured-fields textarea { min-height: 76px; }
.custom-agent-entry > .generate-agent-prompt { justify-self: start; }
.generated-agent-prompt, .generated-third-party-prompt { padding: 13px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.generated-agent-prompt[hidden], .generated-third-party-prompt[hidden] { display: none; }
.generated-agent-prompt textarea, .generated-third-party-prompt textarea { min-height: 300px; font-size: 13px; line-height: 1.45; }
.prompt-approval-row { display: flex; align-items: center; gap: 10px; }
.prompt-approval-row small { color: var(--muted); }
.remove-custom-agent, .remove-reusable-skill, .remove-third-party-skill { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 18px; cursor: pointer; }
.remove-custom-agent:hover, .remove-reusable-skill:hover, .remove-third-party-skill:hover { border-color: var(--pink); color: var(--danger-text); }
.professional-profile-option { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); overflow: hidden; }
.professional-profile-option .connector-choice { border: 0; border-radius: 0; background: transparent; }
.professional-profile-fields { padding: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--bright-teal) 32%, transparent); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.professional-profile-fields label { display: grid; gap: 7px; color: var(--accent-text); font-size: 13px; font-weight: 700; }
.professional-profile-fields > small { color: var(--muted); }
.professional-profile-fields input[type="file"] { color: var(--muted); font: inherit; }
.professional-profile-fields input[type="file"]::file-selector-button,
.responsibilities-file input[type="file"]::file-selector-button { margin-right: 10px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--ink); font: inherit; font-weight: 750; cursor: pointer; }
.professional-profile-fields input[type="file"]::file-selector-button:hover,
.responsibilities-file input[type="file"]::file-selector-button:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--panel-2) 78%, var(--bright-teal)); }
.context-history-fields { margin-top: 12px; padding: 14px; display: grid; gap: 8px; border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.context-history-fields label { display: grid; gap: 7px; color: var(--accent-text); font-size: 13px; font-weight: 700; }
.context-history-fields small { color: var(--muted); }
.day-count-input { width: min(220px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--night) 76%, var(--surface)); }
.day-count-input input { min-width: 0; border: 0; border-radius: 0; background: transparent; }
.day-count-input input:focus { outline: 0; }
.day-count-input span { padding: 0 12px; color: var(--muted); font-size: 13px; font-weight: 700; }
.day-count-input:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.setup-permissions { margin-top: 20px; }
.setup-connectors h3, .setup-permissions h3 { margin: 0 0 10px; color: var(--accent-text); font-size: 24px; }
.setup-note { margin: -3px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.setup-permissions .permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-permissions .permission-row { min-height: 64px; padding: 14px; align-items: center; gap: 14px; }
.setup-permissions .permission-row input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: 0 0 24px; accent-color: var(--bright-teal); }
.setup-simple-card .wizard-actions { margin-top: 26px; justify-content: center; }
.wizard-button { min-width: 126px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.button-arrow { font-size: .86em; line-height: 1; }
.appearance-section h3 { margin: 18px 0 10px; color: var(--accent-text); font-size: 24px; }
.appearance-section h3:first-child { margin-top: 0; }
.appearance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appearance-choice { min-height: 78px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.appearance-choice > input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--bright-teal); }
.appearance-choice > span, .appearance-choice strong, .appearance-choice small { display: block; }
.appearance-choice small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.palette-preview { display: flex !important; gap: 4px; }
.palette-preview i { width: 18px; height: 32px; border-radius: 6px; background: #79C1CD; }
.palette-preview i:nth-child(2) { background: #EBA6B9; }
.palette-preview i:nth-child(3) { background: #FDE8B1; }
.palette-ocean .palette-preview i:nth-child(1) { background: #54C5D8; }
.palette-ocean .palette-preview i:nth-child(2) { background: #83C8DC; }
.palette-ocean .palette-preview i:nth-child(3) { background: #D6F0DA; }
.palette-sunset .palette-preview i:nth-child(1) { background: #E99B9B; }
.palette-sunset .palette-preview i:nth-child(2) { background: #F092AA; }
.palette-sunset .palette-preview i:nth-child(3) { background: #F7D36B; }
.palette-forest .palette-preview i:nth-child(1) { background: #78B89C; }
.palette-forest .palette-preview i:nth-child(2) { background: #B8C58A; }
.palette-forest .palette-preview i:nth-child(3) { background: #E8D99A; }
.goal-picker { grid-column: 1 / -1; }
.goal-picker-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.goal-picker-head strong, .goal-picker-head small { display: block; }
.goal-picker-head strong { color: var(--accent-text); }
.goal-picker-head small { margin-top: 4px; color: var(--muted); }
.priority-context { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 76%, transparent); }
.priority-context > div:first-child strong, .priority-context > div:first-child small { display: block; }
.priority-context > div:first-child strong { color: var(--accent-text); }
.priority-context > div:first-child small { margin-top: 4px; color: var(--muted); }
.priority-context-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#priority-timeframe, #priority-file-locations { display: grid; gap: 7px; }
#priority-timeframe[hidden], #priority-file-locations[hidden] { display: none; }
.goal-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.goal-choice { min-height: 58px; padding: 12px; display: flex !important; grid-template-columns: none !important; align-items: center; gap: 11px !important; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); color: var(--ink) !important; font-weight: 600 !important; }
.goal-choice input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--bright-teal); }
.custom-goal { margin-top: 12px; }
.section-head { display: flex; align-items: end; gap: 14px; justify-content: space-between; margin: 6px 0 15px; }
.section-head h2 { margin: 0; font-size: clamp(26px, 2.2vw, 30px); line-height: 1.15; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.metric { font-size: 28px; font-weight: 850; margin: 4px 0; }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent); border-radius: 999px; padding: 5px 9px; font-size: 12px; color: var(--warning-text); background: color-mix(in srgb, var(--yellow) 10%, var(--surface)); }
.pill.good { color: var(--success-text); }
.pill.warn { color: var(--warning-text); }
.pill.bad { color: var(--danger-text); }
.button, .button-secondary, .button-danger { border: 0; border-radius: 9px; padding: 9px 13px; font-weight: 750; }
.button { color: var(--text-on-accent); background: linear-gradient(135deg, var(--bright-teal), var(--light-blue)); box-shadow: 0 8px 24px color-mix(in srgb, var(--bright-teal) 20%, transparent); }
.button:hover { background: linear-gradient(135deg, var(--light-blue), var(--pink)); }
.button-secondary { color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); }
.button-danger { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; background: color-mix(in srgb, var(--night) 76%, var(--surface)); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted-text); opacity: .72; }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.source-row { display: grid; grid-template-columns: 140px 90px 1fr 1fr 1.2fr; gap: 10px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line); }
.toggle { display: flex; align-items: center; gap: 7px; }
.toggle input { width: auto; }
.item { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 88%, var(--purple)); }
.item h3 { margin: 0 0 6px; font-size: 16px; }
.item p { margin: 6px 0; line-height: 1.45; }
.meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.chat { display: flex; gap: 8px; }
.chat input { flex: 1; }
.chat-log { max-height: 300px; overflow: auto; display: grid; gap: 8px; margin-top: 12px; }
.message { border-left: 3px solid var(--bright-teal); padding: 9px 12px; background: color-mix(in srgb, var(--purple) 22%, var(--surface)); border-radius: 0 9px 9px 0; }
.timeline { display: grid; gap: 0; }
.event { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.event time { color: var(--muted); font-size: 12px; }
details { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
summary { cursor: pointer; font-weight: 750; }
pre { white-space: pre-wrap; word-break: break-word; padding: 12px; border-radius: 10px; background: var(--main-text); color: var(--text-on-dark); max-height: 340px; overflow: auto; font-size: 12px; }
.empty { padding: 34px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.banner { padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 42%, transparent); color: var(--warning-text); margin-bottom: 16px; }
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 20; opacity: 0; transition: opacity .15s; overflow: hidden; }
.progress.active { opacity: 1; }
.progress span { display: block; width: 35%; height: 100%; background: var(--bright-teal); animation: loading 1s infinite ease-in-out; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 420px; padding: 12px 16px; background: var(--coral); color: var(--main-text); border-radius: 10px; transform: translateY(120px); transition: transform .2s; z-index: 30; }
.toast.show { transform: translateY(0); }
.skeleton { height: 140px; border-radius: 15px; background: linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton.short { height: 70px; margin-top: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.setup-build-screen {
  width: min(1180px, 100%);
  min-height: 650px;
  margin: 0 auto;
  padding: clamp(34px, 5.5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, transparent);
  border-radius: 36px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--primary)), color-mix(in srgb, var(--night-2) 90%, var(--purple)));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
.setup-build-screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink), var(--coral), var(--yellow)); }
.setup-build-screen h1 { margin: 0; font-size: clamp(42px, 7vw, 76px); }
.setup-build-title { display: grid; justify-items: center; gap: 2px; line-height: .96; }
.setup-build-screen p { max-width: 560px; margin: 0; }
.setup-build-charlie { width: clamp(160px, 22vw, 230px); height: auto; margin-top: 8px; object-fit: contain; }
.setup-build-message { color: var(--muted); font-size: 18px; }
.setup-build-progress {
  width: min(520px, 100%);
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
}
.setup-build-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bright-teal), var(--coral));
  transition: width .35s ease;
}
.setup-build-warning { color: var(--warning-text); font-size: clamp(12px, 2.5vw, 15px); font-weight: 800; white-space: nowrap; }
.setup-build-avatar { margin: 10px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.setup-build-avatar .user-profile-avatar { width: 46px; height: 46px; font-size: 14px; }
body.setup-building .workspace main { width: 100%; max-width: none; min-height: 100vh; padding: 28px; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 27%), radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--bright-teal) 20%, transparent), transparent 30%), radial-gradient(circle at 48% 105%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 34%), var(--night); }

body[data-theme="light"] nav button:hover { color: var(--main-text); }
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder { opacity: 1; }

.primary-nav button { display: flex; align-items: center; gap: 3px; font-weight: 700; }
.primary-nav button > span { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--accent-text); font-size: 16px; }
.primary-nav button.active > span { background: var(--bright-teal); color: var(--text-on-accent); }
.workspace-card { min-width: 0; max-width: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 94%, var(--primary)); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.overview-hero { min-height: 178px; margin-bottom: 18px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid color-mix(in srgb, var(--bright-teal) 30%, transparent); border-radius: 24px; background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 48%, var(--surface)), color-mix(in srgb, var(--purple) 28%, var(--surface-2))); box-shadow: var(--shadow); }
.overview-hero h2 { margin: 4px 0 8px; font-size: clamp(36px, 5vw, 58px); line-height: .98; }
.overview-hero p:last-child { margin: 0; color: var(--muted); font-size: 16px; }
.assistant-status-card { min-width: 265px; padding: 16px; display: flex; align-items: center; gap: 13px; border: 1px solid color-mix(in srgb, var(--bright-teal) 34%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--night-2) 72%, transparent); }
.assistant-status-card strong, .assistant-status-card small { display: block; }
.assistant-status-card small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.overview-metrics { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { min-width: 0; padding: 18px; display: grid; gap: 4px; border: 1px solid color-mix(in srgb, var(--bright-teal) 28%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--light-blue) 10%, var(--panel)); color: var(--ink); text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,.14); transition: transform .18s ease, border-color .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--bright-teal); }
.metric-card.tone-pink { background: color-mix(in srgb, var(--pink) 11%, var(--panel)); border-color: color-mix(in srgb, var(--pink) 30%, var(--line)); }
.metric-card.tone-purple { background: color-mix(in srgb, var(--purple) 11%, var(--panel)); border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); }
.metric-card.tone-yellow { background: color-mix(in srgb, var(--yellow) 10%, var(--panel)); border-color: color-mix(in srgb, var(--yellow) 28%, var(--line)); }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-family: var(--display-font); font-size: 42px; font-weight: 400; line-height: 1; }
.overview-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; margin-bottom: 16px; }
.overview-layout.lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.focus-list, .resource-links, .task-list, .knowledge-list, .notice-list, .file-list { display: grid; gap: 12px; }
.focus-item, .resource-links button { padding: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--ink); text-align: left; }
.focus-item small, .resource-links span { color: var(--muted); }
.resource-links button { grid-template-columns: 1fr; gap: 3px; }
.resource-links button:hover, .focus-item:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); }
.workspace-tabs { width: 100%; max-width: 100%; min-width: 0; margin: 18px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; overflow: visible; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 12px 36px rgba(0,0,0,.06); }
.workspace-tabs button { min-width: 0; min-height: 43px; padding: 9px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 750; white-space: normal; text-align: center; }
.workspace-tabs button i { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; font-style: normal; }
.workspace-tabs button span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); font-size: 11px; text-align: center; }
.workspace-tabs button:hover { color: var(--ink); }
.workspace-tabs button.active { background: color-mix(in srgb, var(--bright-teal) 18%, var(--surface)); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bright-teal) 36%, transparent); }
.workspace-panel-frame { position: relative; min-height: 560px; padding: 25px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--pink) 19%, transparent), transparent 30%), radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--light-blue) 19%, transparent), transparent 32%), color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 24px 64px rgba(0,0,0,.1); backdrop-filter: blur(20px); }
.workspace-panel-frame::before, .nehoray-overview::before, .windows-settings::before { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink), var(--coral), var(--yellow)); content: ""; }
.tasks-workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
.task-state-panel { position: sticky; top: 108px; display: grid; gap: 12px; }
.task-state-panel > section { padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); }
.task-state-panel .section-head { margin-bottom: 10px; align-items: center; }
.task-state-panel h3 { margin: 0; font-size: 17px; }
.task-state-list { display: grid; gap: 8px; }
.task-state-list > p { margin: 0; color: var(--muted); font-size: 12px; }
.task-state-list article { padding: 10px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.task-state-list strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; }
.task-state-list small { color: var(--muted); line-height: 1.35; }
.task-state-list button { justify-self: start; padding: 6px 9px; font-size: 11px; }
.tasks-main-column { min-width: 0; }
.tracker-menu-layout { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); align-items: start; gap: 18px; }
.tracker-status-menu { padding: 8px; display: grid; gap: 6px; position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 91%, transparent); box-shadow: var(--shadow); }
.tracker-status-menu button { min-height: 50px; padding: 10px 12px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); text-align: left; }
.tracker-status-menu button:hover { background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); }
.tracker-status-menu button.active { position: relative; background: color-mix(in srgb, var(--purple) 14%, var(--surface)); color: var(--accent-text); }
.tracker-status-menu button.active::before { position: absolute; left: 0; width: 4px; height: 26px; border-radius: 999px; background: var(--bright-teal); content: ""; }
.tracker-status-menu button > span { display: grid; place-items: center; font-size: 18px; }
.tracker-status-menu button > strong { font-size: 13px; }
.tracker-status-menu button > em { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-style: normal; font-weight: 800; text-align: center; }
.tracker-page-content { min-width: 0; }
.tracker-create { margin-bottom: 14px; }
.tracker-create > button { margin-left: auto; display: block; }
.tracker-create > div { margin-top: 16px; }
.task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.closed-task-list { grid-template-columns: minmax(0, 1fr); }
.closed-tracker-heading { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.closed-tracker-heading h2 { margin: 5px 0 8px; font-size: clamp(34px, 4vw, 48px); }
.closed-tracker-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 16px; }
.closed-tracker-heading > span { min-width: 92px; min-height: 70px; padding: 10px; display: grid; place-content: center; justify-items: center; border: 1px solid color-mix(in srgb, var(--light-blue) 65%, var(--line)); border-radius: 17px; background: color-mix(in srgb, var(--light-blue) 12%, var(--surface)); color: var(--muted); font-size: 11px; font-weight: 800; }
.closed-tracker-heading > span strong { color: var(--ink); font-size: 22px; }
.task-card { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--light-blue) 58%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--light-blue)), color-mix(in srgb, var(--light-blue) 7%, var(--surface))); box-shadow: 0 9px 24px color-mix(in srgb, var(--purple) 7%, transparent); }
.task-card > summary, .knowledge-card > summary { min-height: 94px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.task-card > summary { min-height: 164px; padding: 18px 19px; display: block; }
.task-card-main { min-width: 0; width: 100%; }
.task-card-summary-actions { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.task-card-summary-actions button { font-family: inherit; }
.task-card > summary::-webkit-details-marker, .knowledge-card > summary::-webkit-details-marker, .person-card > summary::-webkit-details-marker { display: none; }
.task-card[open], .knowledge-card[open], .person-card[open] { border-color: color-mix(in srgb, var(--bright-teal) 55%, var(--line)); }
.task-card[open] .task-expand, .knowledge-card[open] .expand-mark, .person-card[open] .expand-mark { transform: rotate(45deg); }
.task-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.task-title-row h3 { margin: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.25; }
.expand-mark { flex: 0 0 auto; color: var(--accent-text); font-size: 24px; transition: transform .18s ease; }
.task-card-body, .knowledge-card-body, .person-card-body { padding: 0 19px 19px; border-top: 1px solid var(--line); }
.knowledge-summary { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.knowledge-summary > div { padding: 13px 15px; display: flex; align-items: baseline; gap: 8px; border: 1px solid color-mix(in srgb, var(--light-blue) 42%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); }
.knowledge-summary strong { color: var(--accent-text); font-size: 22px; }
.knowledge-summary span { color: var(--muted); font-size: 11px; }
.knowledge-toolbar { margin-bottom: 15px; display: grid; gap: 10px; }
.knowledge-toolbar .workspace-search { margin: 0; }
.knowledge-category-filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.knowledge-category-filters button { min-height: 34px; padding: 7px 10px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.knowledge-category-filters button span { margin-left: 4px; color: var(--accent-text); }
.knowledge-category-filters button:hover, .knowledge-category-filters button.active { border-color: var(--bright-teal); background: color-mix(in srgb, var(--bright-teal) 13%, var(--surface)); color: var(--ink); }
.knowledge-list { max-height: min(68vh, 760px); padding-right: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; overflow-y: auto; scrollbar-width: thin; }
.knowledge-card { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--light-blue) 42%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--light-blue)), color-mix(in srgb, var(--light-blue) 5%, var(--surface))); }
.knowledge-card.needs-review { border-color: color-mix(in srgb, var(--pink) 52%, var(--line)); }
.knowledge-card > summary { min-height: 158px; padding: 16px 17px; align-items: flex-start; }
.knowledge-card-summary { min-width: 0; }
.knowledge-card-kicker { margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.knowledge-card-kicker > span:first-child { color: var(--purple); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }
.knowledge-card-kicker .pill { font-size: 9px; }
.knowledge-card h3 { margin: 0; display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 15px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.knowledge-card-summary > p { margin: 10px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-card-stats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-card-stats span { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 7%, var(--surface-2)); color: var(--muted); font-size: 9px; font-weight: 750; }
.knowledge-card .expand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); font-size: 20px; }
.knowledge-card-body { padding-top: 15px; }
.knowledge-detail, .knowledge-bullets { color: var(--ink); font-size: 12px; line-height: 1.55; }
.knowledge-sources { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-sources strong { width: 100%; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.knowledge-sources span { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--light-blue) 10%, var(--surface)); color: var(--accent-text); font-size: 10px; }
.task-card-body { max-height: min(52vh, 440px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; font-size: 13px; line-height: 1.5; }
.task-card-body p, .task-card-body li { overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.task-card-body ul { padding-left: 19px; }
.task-blocked-reason { margin: 14px 0 13px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--pink) 42%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--pink) 9%, var(--surface)); }
.task-blocked-reason strong { color: var(--danger-text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.task-blocked-reason p { margin: 5px 0 0; color: var(--ink); font-size: 13px; line-height: 1.45; }
.task-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-card-head h3 { margin: 8px 0 0; font-size: 22px; }
.task-priority { width: fit-content; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); color: var(--accent-text); font-size: 11px; font-weight: 850; text-transform: capitalize; letter-spacing: .01em; }
.priority-high, .priority-urgent { background: color-mix(in srgb, var(--pink) 22%, var(--surface)); color: var(--danger-text); }
.priority-low { background: color-mix(in srgb, var(--bright-teal) 16%, var(--surface)); color: var(--success-text); }
.task-summary { width: 100%; max-width: none; margin: 12px 0 10px; color: color-mix(in srgb, var(--accent-text) 66%, var(--muted)); font-size: 14px; line-height: 1.55; }
.task-facts { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 12px; }
.task-context-strip { width: 100%; max-width: 100%; padding: 6px 10px; box-sizing: border-box; overflow-wrap: anywhere; border-radius: 7px; background: color-mix(in srgb, var(--purple) 8%, var(--surface)); color: color-mix(in srgb, var(--accent-text) 78%, var(--muted)); font-size: 11px; font-weight: 750; line-height: 1.45; white-space: normal; }
.task-overdue-strip { width: fit-content; max-width: 100%; margin-top: 9px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; border-radius: 8px; background: color-mix(in srgb, var(--pink) 22%, var(--surface)); color: var(--danger-text); font-size: 11px; }
.task-overdue-strip > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--surface) 74%, var(--pink)); color: var(--purple); }
.task-overdue-strip b { padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--pink) 55%, var(--line)); }
.task-priority-controls { padding: 2px; display: flex; border: 1px solid color-mix(in srgb, var(--light-blue) 58%, var(--line)); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 10%, transparent); }
.task-priority-shift { min-width: 104px; min-height: 38px; padding: 7px 11px !important; border: 1px solid color-mix(in srgb, var(--light-blue) 68%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); color: var(--accent-text); font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 4px 10px color-mix(in srgb, var(--purple) 9%, transparent); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.task-priority-shift + .task-priority-shift { border-left: 1px solid var(--line); }
.task-priority-shift:disabled { color: color-mix(in srgb, var(--muted) 48%, transparent); opacity: .55; }
.task-management-actions { align-items: center; flex-wrap: wrap; }
.task-complete { min-height: 40px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--good) 70%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--success-text); font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 12%, transparent); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.task-complete[data-confirming="true"] { border-color: color-mix(in srgb, var(--yellow) 70%, var(--coral)); background: color-mix(in srgb, var(--yellow) 28%, var(--surface)); color: color-mix(in srgb, var(--coral) 72%, var(--ink)); }
.task-expand { width: 40px; height: 40px; padding: 0 !important; border: 1px solid color-mix(in srgb, var(--light-blue) 62%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--light-blue) 22%, var(--surface)); color: var(--accent-text); font-size: 23px; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--purple) 10%, transparent); transition: transform .18s ease, border-color .16s ease, background .18s ease; }
.task-priority-shift:not(:disabled):hover, .task-complete:hover, .task-expand:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--bright-teal) 16%, var(--surface)); transform: translateY(-1px); }
.task-full-facts { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.task-full-facts span { padding: 10px; border: 1px solid color-mix(in srgb, var(--light-blue) 34%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--light-blue) 7%, var(--surface)); color: var(--muted); }
.task-full-facts strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.closed-task-card > summary { min-height: 104px; padding: 18px 20px; }
.closed-task-card .task-summary { max-width: none; margin: 8px 0; font-size: 12px; }
.closed-task-scope { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--light-blue) 22%, var(--surface)); color: var(--accent-text); font-size: 10px; font-weight: 800; }
.closed-task-date { color: var(--muted); font-size: 10px; }
.task-sources { margin-top: 14px; display: grid; gap: 8px; }
.task-sources > div { display: flex; flex-wrap: wrap; gap: 7px; }
.task-source { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--light-blue) 40%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--light-blue) 11%, var(--surface)); color: var(--accent-text); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.task-update-dialog, .task-source-dialog, .add-person-dialog { width: min(540px, calc(100vw - 36px)); padding: 24px; border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--line)); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.task-update-dialog::backdrop, .task-source-dialog::backdrop, .add-person-dialog::backdrop { background: rgba(12, 13, 24, .58); backdrop-filter: blur(5px); }
.task-update-dialog form, .add-person-dialog form { display: grid; gap: 14px; }
.task-update-dialog textarea, .add-person-dialog textarea { min-height: 110px; resize: vertical; }
.task-source-dialog #task-source-detail { white-space: pre-wrap; line-height: 1.55; }
.daily-focus-panel { position: static; padding: 21px; border-color: color-mix(in srgb, var(--yellow) 34%, var(--line)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--yellow) 17%, transparent), transparent 36%), color-mix(in srgb, var(--surface) 96%, var(--yellow)); }
.daily-focus-panel h2 { margin: 5px 0 10px; font-size: 24px; line-height: 1.12; }
.daily-focus-summary { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.daily-focus-metrics { margin: 17px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.daily-focus-metrics span { min-width: 0; padding: 9px 6px; display: grid; justify-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); color: var(--muted); font-size: 9px; text-align: center; }
.daily-focus-metrics strong { color: var(--ink); font-size: 17px; }
.daily-focus-list { display: grid; gap: 8px; }
.daily-focus-item { min-width: 0; padding: 10px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); }
.daily-focus-item > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--bright-teal) 20%, var(--surface)); color: var(--accent-text); font-size: 11px; font-weight: 850; }
.daily-focus-item strong, .daily-focus-item small { display: block; overflow-wrap: anywhere; }
.daily-focus-item strong { font-size: 12px; line-height: 1.35; }
.daily-focus-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.daily-focus-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.daily-focus-note { margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.workspace-details { margin-top: 14px; border-top: 1px solid var(--line); }
.workspace-details summary { padding: 12px 0 0; color: var(--accent-text); font-weight: 750; cursor: pointer; }
.workspace-details p { margin: 10px 0 0; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.workspace-details p strong { color: var(--ink); }
.daily-tracker-layout { display: grid; grid-template-columns: minmax(470px, .9fr) minmax(0, 1.1fr); align-items: stretch; gap: 18px; }
.daily-calendar-card { background: var(--surface); }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; }
.calendar-heading h3 { margin: 0; font-size: 17px; }
.icon-action { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--ink); }
.calendar-weekdays, .tracker-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekdays { margin: 18px 0 7px; color: color-mix(in srgb, var(--accent-text) 70%, var(--muted)); font-size: 10px; font-weight: 800; text-align: center; }
.calendar-day { min-height: 80px; padding: 9px; display: grid; align-content: space-between; justify-items: center; border: 1px solid color-mix(in srgb, var(--light-blue) 60%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--light-blue) 12%, var(--surface)); color: var(--accent-text); }
.calendar-day.blank { border-color: transparent; background: transparent; }
.calendar-day.non-working { border-color: color-mix(in srgb, var(--muted) 18%, var(--line)); background: color-mix(in srgb, var(--muted) 10%, var(--surface)); color: color-mix(in srgb, var(--muted) 70%, var(--surface)); }
.calendar-day.pre-charlie { filter: grayscale(1); opacity: .32; }
.calendar-day.pre-charlie.has-record { opacity: .58; }
.calendar-day.has-record { border-color: color-mix(in srgb, var(--light-blue) 75%, var(--line)); }
.calendar-day.selected { border-color: color-mix(in srgb, var(--bright-teal) 76%, var(--line)); background: color-mix(in srgb, var(--bright-teal) 70%, var(--light-blue)); color: var(--text-on-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bright-teal) 70%, white); }
.calendar-day span { justify-self: center; color: var(--accent-text); font-size: 18px; line-height: .5; }
.daily-record { max-height: 650px; overflow-y: auto; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); scrollbar-color: color-mix(in srgb, var(--muted) 58%, transparent) transparent; scrollbar-width: thin; }
.daily-record > .section-head { align-items: flex-start; }
.daily-record > .section-head h2 { font-size: 21px; }
.current-day-pill { display: inline-flex; margin-left: 7px; padding: 5px 9px; vertical-align: middle; border-radius: 999px; background: color-mix(in srgb, var(--light-blue) 28%, var(--surface)); color: var(--accent-text); font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 10px; }
.daily-record > .section-head p { max-width: 780px; color: var(--muted); line-height: 1.65; }
.daily-record-sections { display: grid; gap: 22px; }
.daily-record-sections section { padding-top: 18px; border-top: 1px solid var(--line); }
.daily-record-sections h3 { margin: 0 0 10px; color: var(--accent-text); font-family: inherit; font-size: 13px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.daily-record-sections ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.daily-record-sections li { color: var(--muted); line-height: 1.55; }
.daily-backfill { margin-top: 18px; padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: end; gap: 12px; border-top: 1px solid var(--line); }
.daily-backfill strong { display: block; color: var(--ink); }
.daily-backfill p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.daily-backfill label { display: grid; gap: 5px; color: var(--accent-text); font-size: 11px; font-weight: 800; }
.daily-backfill input { min-width: 0; }
.daily-backfill-status { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 10px; color: var(--muted); font-size: 12px; }
.daily-backfill-status strong { color: var(--accent-text); text-transform: capitalize; }
.daily-backfill-status progress { grid-column: 1 / -1; width: 100%; accent-color: var(--bright-teal); }
.button-spinner { width: 13px; height: 13px; display: inline-block; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin .75s linear infinite; }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.person-card { padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--light-blue) 58%, var(--line)); background: var(--surface); }
.person-card > summary { min-height: 104px; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; cursor: pointer; list-style: none; }
.person-avatar { width: 46px; height: 46px; display: grid; place-items: center; position: relative; overflow: hidden; border: 0; border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 18%, var(--surface)), color-mix(in srgb, var(--light-blue) 28%, var(--surface))); color: var(--accent-text); box-shadow: none; font-family: var(--small-title-font); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.person-avatar img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(1.08) contrast(1.03); }
.person-avatar > span { display: grid; place-items: center; position: absolute; inset: 0; }
.person-avatar.has-photo > span, .person-avatar.has-image > span { opacity: 0; }
.person-avatar.photo-failed img { display: none; }
.person-avatar.photo-failed > span { opacity: 1; }
.person-card-summary { min-width: 0; }
.person-card h3, .file-card h3, .notice-card h3 { margin: 0 0 5px; }
.person-card h3 { color: var(--ink); font-size: 15px; line-height: 1.2; }
.person-card-summary > strong { display: block; overflow: hidden; color: var(--accent-text); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.person-card-summary > p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.person-card .expand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); font-size: 20px; }
.person-card p, .file-card p, .notice-card p { color: var(--muted); line-height: 1.5; }
.person-card-body { padding-top: 18px; }
.person-card-body h4 { margin: 0 0 8px; color: var(--ink); font-family: var(--small-title-font); font-size: 16px; font-weight: 700; }
.person-card-body section > p { margin: 5px 0; font-size: 13px; }
.person-detail-grid { margin: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.person-detail-grid > section { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.person-meta { color: var(--muted); font-size: 11px !important; }
.person-relevance { margin-top: 14px; display: grid; gap: 6px; color: var(--accent-text); font-size: 12px; font-weight: 800; }
.person-relevance select { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.person-card-body footer { margin-top: 15px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.person-card.is-irrelevant { opacity: .68; }
.person-card.is-irrelevant .person-card-summary::after { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; content: "Ignored for context and prioritization"; }
.people-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.people-action { min-height: 40px; margin: 0; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; font-size: 12px; white-space: nowrap; }
.people-action span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--bright-teal) 16%, var(--surface)); color: var(--accent-text); font-size: 15px; line-height: 1; }
.workspace-search { margin: 0 0 14px; display: grid; gap: 7px; color: var(--accent-text); font-weight: 750; }
.file-search-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.file-list { max-height: min(58vh, 650px); padding-right: 5px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow-y: auto; scrollbar-color: color-mix(in srgb, var(--bright-teal) 56%, transparent) transparent; scrollbar-width: thin; }
.library-folder-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.library-folder { min-width: 0; padding: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--light-blue) 9%, var(--surface)); }
.library-folder > span { font-size: 22px; }
.library-folder h3 { margin: 0 0 3px; overflow-wrap: anywhere; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 13px; font-weight: 800; }
.library-folder p { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.library-folder > strong { min-width: 28px; padding: 5px 7px; border-radius: 999px; background: var(--surface-2); font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 11px; text-align: center; }
.file-card { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 15px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.file-card:hover { border-color: var(--bright-teal); background: linear-gradient(145deg, color-mix(in srgb, var(--bright-teal) 9%, var(--surface)), color-mix(in srgb, var(--light-blue) 8%, var(--surface))); box-shadow: 0 14px 30px color-mix(in srgb, var(--purple) 12%, transparent); transform: translateY(-2px); }
.file-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--bright-teal) 45%, transparent); outline-offset: 2px; }
.file-card h3, .file-card p { overflow-wrap: anywhere; }
.file-location, .file-size { margin-top: 5px; display: block; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.file-content-match { margin: 10px 0 0 !important; padding: 9px 10px; border-left: 3px solid var(--bright-teal); border-radius: 7px; background: color-mix(in srgb, var(--bright-teal) 9%, transparent); color: var(--ink) !important; font-size: 11px; }
.file-provenance-note { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.file-open { margin-top: 10px; display: inline-flex; color: var(--accent-text); font-size: 11px; font-weight: 850; }
.file-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); font-size: 22px; }
.file-viewer-dialog { width: min(820px, calc(100% - 32px)); }
.file-viewer-dialog h2 { margin: 4px 44px 10px 0; font-size: 30px; overflow-wrap: anywhere; }
.file-viewer-location { margin: 12px 0; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--light-blue) 10%, var(--surface)); color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.file-viewer-content { max-height: min(62vh, 620px); margin-top: 18px; padding: 18px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.file-viewer-content pre { margin: 0; color: var(--ink); font: 13px/1.6 Inter, "Segoe UI", system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-card { padding: 14px 15px; border-color: color-mix(in srgb, var(--pink) 38%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 97%, var(--pink)); box-shadow: 0 8px 22px color-mix(in srgb, var(--pink) 7%, transparent); }
.notice-card.seen { border-color: color-mix(in srgb, var(--light-blue) 35%, var(--line)); }
.notice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.notice-copy { min-width: 0; }
.notice-copy h3 { margin: 1px 0 5px; color: var(--ink); font-size: 15px; line-height: 1.25; }
.notice-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.notice-status { display: flex; align-items: center; gap: 11px; }
.notice-status time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.notice-status .notice-seen { min-width: 52px; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--light-blue) 28%, var(--surface)); color: var(--accent-text); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.notice-status .notice-seen:hover { background: color-mix(in srgb, var(--bright-teal) 24%, var(--surface)); transform: translateY(-1px); }
.notice-details { margin: 11px 0 0; overflow: visible; }
.notice-details > summary { width: fit-content; padding: 10px 14px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--light-blue) 74%, var(--surface)); color: var(--ink); font-size: 11px; font-weight: 850; cursor: pointer; list-style: none; box-shadow: 0 7px 17px color-mix(in srgb, var(--light-blue) 18%, transparent); transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.notice-details > summary::-webkit-details-marker { display: none; }
.notice-details > summary:hover { background: color-mix(in srgb, var(--bright-teal) 48%, var(--light-blue)); transform: translateY(-1px); box-shadow: 0 9px 20px color-mix(in srgb, var(--light-blue) 25%, transparent); }
.notice-details > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--bright-teal) 38%, transparent); outline-offset: 2px; }
.notice-details[open] > summary span { display: inline-block; transform: rotate(90deg); }
.notice-detail-body { margin-top: 9px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--purple) 6%, var(--surface-2)); }
.notice-detail-body ul { margin: 0; padding: 0 0 0 17px; display: grid; gap: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.notice-detail-body .actions { margin: 11px 0 0; gap: 8px; }
.notice-detail-body .button-secondary { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.empty-state { min-height: 180px; padding: 28px; display: grid; place-content: center; justify-items: center; gap: 7px; grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--accent-text); font-size: 18px; }
.activity-day-nav { margin-bottom: 14px; display: flex; gap: 8px; overflow-x: auto; }
.activity-day { padding: 9px 12px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--muted); }
.activity-day span { padding: 2px 6px; border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.activity-day.active { border-color: var(--bright-teal); color: var(--ink); }
.detection-shell { min-height: 430px; display: grid; place-items: center; }
.detection-placeholder { max-width: 620px; display: grid; justify-items: center; text-align: center; }
.detection-placeholder > span { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 28px; background: color-mix(in srgb, var(--pink) 18%, var(--surface)); font-size: 44px; box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.detection-placeholder h3 { margin: 8px 0; font-size: 28px; line-height: 1.2; }
.detection-placeholder p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.settings-embedded { min-height: 280px; padding: 32px; display: grid; place-content: center; justify-items: center; gap: 10px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }

.windows-settings { position: relative; min-height: 680px; display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: 28px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--purple) 32%, var(--line)); border-radius: 26px; background: radial-gradient(circle at 2% 92%, color-mix(in srgb, var(--yellow) 19%, transparent), transparent 31%), radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--pink) 17%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--light-blue) 16%, var(--surface)), color-mix(in srgb, var(--yellow) 10%, var(--surface)) 46%, color-mix(in srgb, var(--pink) 13%, var(--surface))); box-shadow: var(--shadow); }
.settings-sidebar { min-width: 0; padding: 4px; }
.settings-identity { margin-bottom: 24px; padding: 10px; display: flex; align-items: center; gap: 12px; }
.settings-identity .mark { width: 58px; height: 58px; border-radius: 50%; }
.user-profile-avatar { display: grid; width: 100%; height: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid color-mix(in srgb, var(--bright-teal) 58%, #fff); border-radius: 50%; clip-path: circle(50%); color: #fff; background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--purple) 72%, var(--pink))); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); font-family: var(--small-title-font); font-size: .38em; font-weight: 700; letter-spacing: .03em; }
.user-profile-avatar img { width: 100%; height: 100%; grid-area: 1 / 1; border-radius: 50%; object-fit: cover; object-position: center; }
.user-profile-avatar > span { grid-area: 1 / 1; }
.user-profile-avatar.has-image > span { opacity: 0; }
.settings-identity .user-profile-avatar { font-size: 21px; }
.settings-identity strong, .settings-identity small { display: block; }
.settings-identity strong { font-size: 18px; }
.settings-identity small { margin-top: 3px; color: var(--muted); }
.settings-sidebar nav { display: grid; gap: 5px; }
.settings-sidebar nav button { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 15px; text-align: left; }
.settings-sidebar nav button > span { width: 28px; display: grid; place-items: center; font-size: 18px; }
.settings-sidebar nav button:hover { background: color-mix(in srgb, var(--light-blue) 16%, var(--surface)); }
.settings-sidebar nav button.active { position: relative; background: color-mix(in srgb, var(--purple) 14%, var(--surface)); color: var(--accent-text); }
.settings-sidebar nav button.active::before { position: absolute; left: 0; width: 4px; height: 24px; border-radius: 999px; background: var(--bright-teal); content: ""; }
.settings-sidebar .settings-alert-count { width: auto; min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; color: var(--text-on-accent); font-size: 10px; }
.update-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.update-impact-review { margin: 16px 0; padding: 20px; border: 1px solid color-mix(in srgb, var(--bright-teal) 38%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.update-impact-review.has-local-changes { border-color: color-mix(in srgb, var(--yellow) 60%, var(--line)); }
.update-impact-counts { min-width: 110px; display: grid; justify-items: end; }
.update-impact-counts strong { color: var(--accent-text); font-size: 30px; line-height: 1; }
.update-impact-counts span, .update-impact-counts small { color: var(--muted); font-size: 11px; }
.update-impact-warning { margin-bottom: 13px; padding: 12px 14px; display: grid; gap: 4px; border-left: 4px solid var(--yellow); border-radius: 10px; background: color-mix(in srgb, var(--yellow) 12%, var(--surface)); }
.update-impact-warning span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.update-impact-files { max-height: 420px; display: grid; gap: 8px; overflow-y: auto; scrollbar-gutter: stable; }
.update-impact-file { padding: 12px 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 230px); align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.update-impact-file.is-conflict { border-color: color-mix(in srgb, var(--bad) 52%, var(--line)); }
.update-impact-file strong, .update-impact-file small, .update-impact-file em { display: block; overflow-wrap: anywhere; }
.update-impact-file small { margin-top: 4px; color: var(--muted); }
.update-impact-file em { margin-top: 5px; color: var(--danger-text); font-size: 10px; font-style: normal; line-height: 1.35; }
.update-impact-file select { min-width: 0; }
.update-impact-confirm { margin-top: 13px; display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.update-impact-confirm input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--bright-teal); }
.update-impact-clean { padding: 18px; display: grid; gap: 5px; border-radius: 13px; background: color-mix(in srgb, var(--bright-teal) 10%, var(--surface)); }
.update-impact-clean span { color: var(--muted); }
.settings-content { min-width: 0; padding: 2px 0 20px; }
.settings-page > .section-head { margin-bottom: 22px; }
.settings-page > .section-head h2 { font-family: var(--small-title-font); font-size: clamp(30px, 3vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.settings-row-list { display: grid; gap: 9px; }
.settings-row { min-height: 96px; padding: 17px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2px 7px rgba(0,0,0,.05); }
.settings-row > div { min-width: 0; }
.settings-row strong { font-size: 17px; }
.settings-row p { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--muted); line-height: 1.45; }
.settings-row > span:last-child { color: var(--muted); font-size: 12px; text-align: right; }
.settings-update-row > form { justify-self: end; }
.settings-update-row.update-ready {
  border-color: color-mix(in srgb, var(--bright-pink) 72%, var(--line));
  background: color-mix(in srgb, var(--bright-pink) 13%, var(--surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bright-pink) 18%, transparent);
}
.settings-update-row.update-ready strong,
.settings-update-row.update-ready .settings-inline-action { color: var(--accent-text); }
.settings-inline-action { margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--accent-text); font-size: 12px; font-weight: 800; }
.settings-switch { display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch > span { position: relative; width: 42px; height: 22px; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.settings-switch > span::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 7px rgba(0,0,0,.24); content: ""; transition: transform .18s ease; }
.settings-switch input:checked + span { background: var(--bright-teal); }
.settings-switch input:checked + span::after { transform: translateX(20px); }
.settings-switch input:focus-visible + span { outline: 2px solid var(--bright-teal); outline-offset: 3px; }
.settings-switch small { color: var(--muted); font-size: 10px; font-weight: 800; }
.settings-row-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; font-size: 21px; }
.settings-row-icon.tone-blue { background: color-mix(in srgb, var(--light-blue) 28%, var(--surface)); }
.settings-row-icon.tone-purple { background: color-mix(in srgb, var(--purple) 26%, var(--surface)); }
.settings-row-icon.tone-teal { background: color-mix(in srgb, var(--bright-teal) 24%, var(--surface)); }
.settings-row-icon.tone-yellow { background: color-mix(in srgb, var(--yellow) 32%, var(--surface)); }
.settings-row-icon.tone-pink { background: color-mix(in srgb, var(--pink) 27%, var(--surface)); }
.customize-settings, .settings-form-card, .settings-permission-list { display: grid; gap: 22px; }
.appearance-preview { min-height: 185px; padding: 28px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--bright-teal) 38%, transparent), transparent 35%), radial-gradient(circle at 82% 80%, color-mix(in srgb, var(--pink) 35%, transparent), transparent 35%), var(--surface-2); }
.appearance-preview-window { width: min(540px, 92%); min-height: 112px; padding: 18px; display: grid; grid-template-columns: repeat(3, 9px) 1fr; align-content: start; gap: 7px; border: 1px solid color-mix(in srgb, var(--purple) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.appearance-preview-window > span { width: 9px; height: 9px; border-radius: 50%; background: var(--bright-teal); }
.appearance-preview-window > span:nth-child(2) { background: var(--purple); }
.appearance-preview-window > span:nth-child(3) { background: var(--pink); }
.appearance-preview-window strong, .appearance-preview-window small { grid-column: 1 / -1; }
.appearance-preview-window strong { margin-top: 16px; font-family: var(--display-font); font-size: 30px; font-weight: 400; }
.appearance-preview-window small { color: var(--muted); }
.customize-settings fieldset { margin: 0; padding: 0; border: 0; }
.customize-settings legend { margin-bottom: 11px; color: var(--ink); font-size: 16px; font-weight: 800; }
.settings-choice-grid { display: grid; gap: 11px; }
.settings-choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-choice-grid.palettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-mode-row { display: grid; grid-template-columns: repeat(2, minmax(190px, 270px)); gap: 11px; }
.settings-choice { position: relative; padding: 13px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); cursor: pointer; }
.mode-choice { min-height: 92px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; }
.mode-choice > span:last-child { min-width: 0; display: grid; gap: 3px; }
.mode-emoji { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--yellow) 27%, var(--surface)); font-size: 25px; }
.mode-choice:nth-child(2) .mode-emoji { background: color-mix(in srgb, var(--purple) 24%, var(--surface)); }
.settings-choice:has(input:checked) { border-color: var(--bright-teal); box-shadow: inset 0 0 0 1px var(--bright-teal), 0 10px 24px color-mix(in srgb, var(--bright-teal) 12%, transparent); }
.settings-choice input { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; margin: 0; }
.settings-choice small { color: var(--muted); line-height: 1.4; }
.settings-palettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-form-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.settings-source-note { padding: 13px 15px; display: flex; justify-content: space-between; gap: 16px; border-radius: 12px; background: color-mix(in srgb, var(--light-blue) 13%, var(--surface)); color: var(--muted); }
.settings-source-note strong { color: var(--ink); }
.settings-permission-list { gap: 9px; }
.settings-permission-row { min-height: 84px; padding: 15px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.settings-permission-row strong, .settings-permission-row small { display: block; }
.settings-permission-row small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.settings-permission-row input { width: 20px; height: 20px; accent-color: var(--bright-teal); }
.settings-help { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.profile-avatar-settings { padding: clamp(18px, 3vw, 28px); display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.profile-avatar-preview { width: 148px; height: 148px; }
.profile-avatar-preview .user-profile-avatar { font-size: 42px; }
.profile-avatar-details h3 { margin: 0 0 12px; font-size: 24px; }
.profile-avatar-details p { margin: 7px 0; }
.profile-avatar-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-avatar-actions > .button,
.profile-avatar-actions > .button-secondary { min-width: 190px; min-height: 48px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; cursor: pointer; }
.profile-avatar-upload { position: relative; overflow: hidden; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.profile-avatar-upload:hover { border-color: color-mix(in srgb, var(--purple) 56%, var(--line)); background: color-mix(in srgb, var(--purple) 12%, var(--panel-2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 14%, transparent); transform: translateY(-1px); }
.profile-avatar-upload:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.profile-avatar-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.agent-map-page { min-width: 0; }
.custom-agents-page { margin-bottom: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow); }
.custom-agent-menu-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); align-items: start; gap: 18px; }
.custom-agent-menu { padding: 8px; display: grid; gap: 6px; position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 91%, transparent); }
.custom-agent-menu > button[role="tab"] { min-height: 58px; padding: 9px 11px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); text-align: left; }
.custom-agent-menu > button[role="tab"]:hover { background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); }
.custom-agent-menu > button[role="tab"].active { position: relative; background: color-mix(in srgb, var(--purple) 14%, var(--surface)); color: var(--accent-text); }
.custom-agent-menu > button[role="tab"].active::before { position: absolute; left: 0; width: 4px; height: 28px; border-radius: 999px; background: var(--bright-teal); content: ""; }
.custom-agent-menu > button[role="tab"] > span:last-child { min-width: 0; }
.custom-agent-menu > button[role="tab"] strong, .custom-agent-menu > button[role="tab"] small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-agent-menu > button[role="tab"] small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.custom-agent-menu .custom-agent-create-link { min-height: 50px; border: 1px solid color-mix(in srgb, var(--bright-teal) 32%, var(--line)); }
.custom-agent-create-link > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--bright-teal) 22%, var(--surface)); font-size: 21px; }
.custom-agent-menu-heading { margin-top: 6px; padding: 9px 8px 5px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.custom-agent-menu-heading strong { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-align: center; }
.custom-agent-menu-heading { align-items: center; position: relative; gap: 6px; }
.custom-agent-menu > .agent-plan-menu-item { min-height: 58px; padding: 9px 11px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; position: relative; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ink); text-align: left; }
.custom-agent-menu > .agent-plan-menu-item:hover { background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); }
.custom-agent-menu > .agent-plan-menu-item.ready { border-color: color-mix(in srgb, var(--bright-teal) 52%, var(--line)); }
.custom-agent-menu > .agent-plan-menu-item.active { border-color: color-mix(in srgb, var(--bright-teal) 65%, var(--line)); background: color-mix(in srgb, var(--bright-teal) 11%, var(--surface)); }
.agent-plan-menu-item strong, .agent-plan-menu-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-plan-menu-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.agent-ready-dot { width: 9px; height: 9px; position: absolute; top: 8px; right: 8px; border: 2px solid var(--surface); border-radius: 50%; background: #d9293e; box-shadow: 0 0 0 2px color-mix(in srgb, #d9293e 20%, transparent); }
.agent-plan-loading { min-height: 180px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid color-mix(in srgb, var(--bright-teal) 38%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--bright-teal) 7%, var(--surface-2)); }
.agent-plan-loading img { width: 76px; height: 76px; object-fit: contain; }
.agent-plan-loading > div { width: min(100%, 480px); }
.agent-plan-loading h3, .agent-plan-loading p { margin: 0; }
.agent-plan-loading p { margin-top: 6px; color: var(--muted); }
.agent-plan-loading progress { width: 100%; margin-top: 15px; accent-color: var(--bright-teal); }
.agent-plan-ready-summary { display: grid; gap: 12px; }
.agent-plan-ready-summary h3, .agent-plan-ready-summary p { margin: 0; }
.agent-plan-ready-summary .button { width: fit-content; }
.agent-plan-inline-editor { display: grid; gap: 14px; }
.agent-plan-inline-editor textarea { width: 100%; resize: vertical; }
.agent-gui-section { overflow: hidden; border: 1px solid color-mix(in srgb, var(--bright-teal) 40%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, var(--light-blue)); }
.agent-gui-section .agent-gui-review { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--bright-teal) 9%, var(--surface)); }
.agent-gui-section .agent-gui-review > div { display: grid; gap: 4px; }
.agent-gui-preview { position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--light-blue) 24%, var(--surface)), color-mix(in srgb, var(--purple) 8%, var(--surface)) 48%, color-mix(in srgb, var(--bright-teal) 10%, var(--surface))); }
.agent-preview-intro { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid color-mix(in srgb, var(--purple) 24%, var(--line)); background: linear-gradient(105deg, color-mix(in srgb, var(--purple) 14%, var(--surface)), color-mix(in srgb, var(--bright-teal) 13%, var(--surface))); }
.agent-preview-intro span { color: var(--accent-text); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.agent-preview-intro strong { display: block; margin-top: 4px; font-size: 20px; }
.agent-preview-intro p { margin: 5px 0 0; color: var(--muted); }
.agent-live-intro ul { margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; list-style: none; }
.agent-live-intro li { min-width: 0; display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 12px; }
.agent-live-intro li::before { color: var(--purple); content: "•"; font-size: 18px; line-height: .7; }
.agent-live-intro li b { color: var(--ink); }
.agent-live-intro li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-preview-intro em { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 18%, var(--surface)); color: var(--accent-text); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.agent-preview-connections { padding: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line); }
.agent-preview-connections article { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--connection-accent, var(--purple)) 35%, var(--line)); border-top: 3px solid var(--connection-accent, var(--purple)); border-radius: 11px; background: color-mix(in srgb, var(--connection-accent, var(--purple)) 8%, var(--surface)); box-shadow: 0 5px 14px rgba(42, 32, 68, .06); }
.agent-preview-connections article:nth-child(1) { --connection-accent: #7657d8; }
.agent-preview-connections article:nth-child(2) { --connection-accent: #278ed1; }
.agent-preview-connections article:nth-child(3) { --connection-accent: #13a889; }
.agent-preview-connections article:nth-child(4) { --connection-accent: #e19a2a; }
.agent-preview-connections article:nth-child(5) { --connection-accent: #d15f91; }
.agent-preview-connections span, .agent-preview-connections strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-preview-connections span { color: var(--muted); font-size: 10px; }
.agent-preview-connections strong { margin-top: 4px; font-size: 11px; }
.agent-preview-connections button { width: 100%; margin-top: 9px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--connection-accent, var(--purple)) 38%, var(--line)); border-radius: 8px; background: var(--surface); color: var(--accent-text); font: inherit; font-size: 10px; font-weight: 800; }
.agent-preview-tabs { padding: 10px 12px 0; display: flex; gap: 6px; overflow-x: auto; }
.agent-preview-tabs button { --tab-accent: var(--purple); padding: 8px 10px; border: 1px solid transparent; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--tab-accent) 7%, transparent); color: var(--muted); font: inherit; font-size: 11px; font-weight: 750; white-space: nowrap; }
.agent-preview-tabs button:nth-child(1) { --tab-accent: #7657d8; }
.agent-preview-tabs button:nth-child(2) { --tab-accent: #278ed1; }
.agent-preview-tabs button:nth-child(3) { --tab-accent: #13a889; }
.agent-preview-tabs button:nth-child(4) { --tab-accent: #e19a2a; }
.agent-preview-tabs button:nth-child(5) { --tab-accent: #d15f91; }
.agent-preview-tabs button.active { border-color: color-mix(in srgb, var(--tab-accent) 42%, var(--line)); border-bottom-color: color-mix(in srgb, var(--tab-accent) 10%, var(--surface)); background: color-mix(in srgb, var(--tab-accent) 10%, var(--surface)); color: var(--accent-text); box-shadow: inset 0 3px 0 var(--tab-accent); }
.agent-preview-controls button, .agent-preview-controls input { pointer-events: none; cursor: default; }
.agent-preview-controls button:disabled, .agent-preview-controls input:disabled { opacity: 1; }
.agent-preview-panels { padding: 0 12px 12px; }
.agent-preview-panels > section { --panel-accent: #7657d8; padding: 18px; border: 1px solid color-mix(in srgb, var(--panel-accent) 32%, var(--line)); border-radius: 0 14px 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-accent) 8%, var(--surface)), var(--surface) 58%); box-shadow: 0 12px 28px rgba(42, 32, 68, .08); }
.agent-preview-panels > section:nth-child(2) { --panel-accent: #278ed1; }
.agent-preview-panels > section:nth-child(3) { --panel-accent: #13a889; }
.agent-preview-panels > section:nth-child(4) { --panel-accent: #e19a2a; }
.agent-preview-panels > section:nth-child(5) { --panel-accent: #d15f91; }
.agent-preview-panel-heading { display: flex; justify-content: space-between; gap: 16px; }
.agent-preview-panel-heading h4 { margin: 2px 0 5px; font-size: 22px; }
.agent-preview-panel-heading p { margin: 0; color: var(--muted); }
.agent-preview-panel-heading > span { height: fit-content; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; white-space: nowrap; }
.agent-preview-metrics { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.agent-preview-metrics article { padding: 13px; border: 1px solid color-mix(in srgb, var(--metric-accent) 30%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--metric-accent) 10%, var(--surface)); }
.agent-preview-metrics article:nth-child(1) { --metric-accent: #7657d8; }
.agent-preview-metrics article:nth-child(2) { --metric-accent: #278ed1; }
.agent-preview-metrics article:nth-child(3) { --metric-accent: #13a889; }
.agent-preview-metrics strong, .agent-preview-metrics span { display: block; }
.agent-preview-metrics strong { font-size: 20px; }
.agent-preview-metrics span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.agent-preview-metrics small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.agent-preview-controls { margin-top: 12px; display: flex; align-items: end; gap: 8px; }
.agent-preview-controls label { flex: 1; color: var(--muted); font-size: 10px; }
.agent-preview-controls input { width: 100%; margin-top: 4px; }
.agent-preview-controls button { min-height: 38px; }
.agent-preview-table-wrap { margin-top: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--panel-accent) 25%, var(--line)); border-radius: 12px; background: var(--surface); }
.agent-preview-table-heading { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--panel-accent) 8%, var(--surface)); }
.agent-preview-table-heading span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.agent-preview-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.agent-preview-table th, .agent-preview-table td { padding: 9px 12px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.agent-preview-table th { color: var(--muted); background: var(--surface-2); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.agent-preview-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-accent) 4%, var(--surface)); }
.agent-preview-empty { margin-top: 12px; padding: 14px; display: flex; justify-content: space-between; gap: 16px; border: 1px dashed var(--line); border-radius: 11px; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); }
.agent-preview-empty span { color: var(--muted); font-size: 11px; text-align: right; }
.agent-preview-loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 20, 28, .72); color: #fff; text-align: center; backdrop-filter: blur(3px); }
.agent-preview-loading img { width: 74px; height: 74px; object-fit: contain; }
.agent-preview-loading strong { font-size: 17px; }
.agent-preview-loading span { max-width: 440px; color: rgba(255,255,255,.82); font-size: 12px; }
.agent-gui-refinement-dialog { width: min(580px, calc(100% - 32px)); }
.agent-gui-refinement-dialog h2 { margin: 5px 0 8px; }
.agent-gui-refinement-dialog form { margin-top: 18px; display: grid; gap: 16px; }
.agent-gui-refinement-dialog label { display: grid; gap: 7px; color: var(--accent-text); font-weight: 800; }
.agent-gui-refinement-dialog textarea { width: 100%; min-height: 150px; resize: vertical; }
.agent-final-information { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--line)); border-radius: 18px; background: var(--surface); }
.agent-final-information-heading { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--purple) 8%, var(--surface)); }
.agent-final-information-heading > div { display: grid; gap: 4px; }
.agent-final-information-heading span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.agent-final-information-body { padding: 18px; }
.agent-final-information-body > p { margin: 0 0 16px; line-height: 1.58; }
.agent-final-information .custom-agent-data-grid { margin: 0; }
.final-information-status { color: var(--muted); font-weight: 500; }
.agent-details-loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 20, 28, .72); color: #fff; text-align: center; backdrop-filter: blur(3px); }
.agent-details-loading img { width: 74px; height: 74px; object-fit: contain; }
.agent-details-loading strong { font-size: 17px; }
.agent-details-loading span { max-width: 440px; color: rgba(255,255,255,.82); font-size: 12px; }
.agent-details-refinement-dialog { width: min(580px, calc(100% - 32px)); }
.agent-details-refinement-dialog h2 { margin: 5px 0 8px; }
.agent-details-refinement-dialog form { margin-top: 18px; display: grid; gap: 16px; }
.agent-details-refinement-dialog label { display: grid; gap: 7px; color: var(--accent-text); font-weight: 800; }
.agent-details-refinement-dialog textarea { width: 100%; min-height: 150px; resize: vertical; }
.agent-connection-dialog { width: min(580px, calc(100% - 32px)); }
.agent-connection-dialog form { margin-top: 18px; display: grid; gap: 15px; }
.agent-connection-dialog label:not(.permission-toggle) { display: grid; gap: 7px; color: var(--accent-text); font-weight: 800; }
.agent-connection-dialog textarea { resize: vertical; }
.top-nav-dialog { width: min(560px, calc(100% - 32px)); }
.top-nav-dialog form { display: grid; gap: 18px; }
.top-nav-options { display: grid; gap: 9px; }
.top-nav-option { padding: 11px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--light-blue) 38%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); }
.top-nav-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--bright-teal); }
.top-nav-option strong, .top-nav-option small { display: block; }
.top-nav-option small { margin-top: 3px; color: var(--muted); }
.top-nav-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.agent-setup-complete { margin-bottom: 16px; padding: 17px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid color-mix(in srgb, var(--bright-teal) 48%, var(--line)); border-radius: 16px; background: linear-gradient(115deg, color-mix(in srgb, var(--bright-teal) 13%, var(--surface)), color-mix(in srgb, var(--light-blue) 13%, var(--surface))); box-shadow: 0 10px 24px color-mix(in srgb, var(--bright-teal) 10%, transparent); }
.agent-setup-complete-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--bright-teal); color: var(--text-on-accent); font-size: 20px; font-weight: 900; }
.agent-setup-complete h3, .agent-setup-complete p { margin: 0; }
.agent-setup-complete h3 { margin-top: 2px; font-size: 20px; }
.agent-setup-complete p:last-child { margin-top: 4px; color: var(--muted); font-size: 12px; }
.agent-workspace-highlight { animation: agent-workspace-highlight 1.4s ease; }
@keyframes agent-workspace-highlight { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bright-teal) 28%, transparent), 0 16px 38px color-mix(in srgb, var(--purple) 18%, transparent); } }
.custom-agent-tab-panel { position: relative; }
.agent-finish-loading { position: absolute; inset: 0; z-index: 8; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px; border-radius: 18px; background: rgba(17, 20, 28, .78); color: #fff; text-align: center; backdrop-filter: blur(4px); }
.agent-finish-loading img { width: 88px; height: 88px; object-fit: contain; }
.agent-finish-loading strong { font-size: 19px; }
.agent-finish-loading span { max-width: 440px; color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.5; }
.agent-finish-loading progress { width: min(340px, 80%); margin-top: 7px; accent-color: var(--bright-teal); }
.custom-agent-menu-empty { margin: 2px 8px 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.custom-agent-menu > .import-agent-button { width: 100%; margin-top: 5px; }
.custom-agent-page-area { min-width: 0; }
.custom-agent-tab-panel { display: grid; gap: 14px; }
.agent-build-steps { padding: 10px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.agent-build-steps > div { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; position: relative; color: var(--muted); }
.agent-build-steps > div:not(:last-child)::after { position: absolute; right: -7px; width: 7px; height: 2px; background: var(--line); content: ""; }
.agent-build-steps span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 850; }
.agent-build-steps small { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-build-steps .active { color: var(--accent-text); }
.agent-build-steps .active span { border-color: var(--bright-teal); background: color-mix(in srgb, var(--bright-teal) 22%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bright-teal) 12%, transparent); }
.agent-build-steps .complete { color: var(--success-text); }
.agent-build-steps .complete span { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); background: color-mix(in srgb, var(--good) 16%, var(--surface)); }
.custom-agent-builder { padding: 22px; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(360px, 1.28fr); gap: 22px; }
.custom-agent-builder h3 { margin: 3px 0 7px; font-size: 24px; }
.custom-agent-builder p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.custom-agent-builder form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.custom-agent-builder form label { display: grid; gap: 6px; color: var(--accent-text); font-weight: 750; }
.custom-agent-builder form .wide { grid-column: 1 / -1; }
.custom-agent-builder select[multiple] { min-height: 132px; }
.agent-file-picker { min-height: 48px; padding: 6px 8px; display: flex; align-items: center; gap: 11px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.agent-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.agent-file-button { margin: 0; padding: 8px 12px; flex: 0 0 auto; cursor: pointer; }
.agent-file-name { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-link-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; color: var(--accent-text); font-size: 12px; font-weight: 800; }
.agent-link-field > span { grid-column: 1 / -1; }
.agent-link-field > span > small { margin-top: 3px; display: block; color: var(--muted); font-size: 10px; font-weight: 650; }
.agent-link-list { min-width: 0; display: grid; gap: 7px; }
.agent-link-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.agent-link-row input { min-width: 0; }
.agent-link-add, .agent-link-remove { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--bright-teal) 50%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--bright-teal) 12%, var(--surface)); color: var(--accent-text); font-size: 22px; font-weight: 800; line-height: 1; }
.agent-link-remove { width: 34px; height: 34px; align-self: center; border-color: color-mix(in srgb, var(--pink) 38%, var(--line)); background: color-mix(in srgb, var(--pink) 9%, var(--surface)); color: var(--danger-text); font-size: 17px; }
.agent-link-add:hover, .agent-link-remove:hover { transform: translateY(-1px); filter: brightness(1.04); }
.agent-package-upload-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.agent-handoff-prompt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.agent-handoff-prompt-row .handoff-prompt-button { flex: 0 0 auto; }
.agent-handoff-prompt-row small { max-width: 470px; }
.agent-package-title { color: var(--ink); font-weight: 800; }
.agent-package-source { margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; }
.agent-package-source legend { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 750; }
.agent-package-source label { min-width: 0; padding: 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); cursor: pointer; }
.agent-package-source label:has(input:checked) { border-color: color-mix(in srgb, var(--bright-teal) 62%, var(--line)); background: color-mix(in srgb, var(--bright-teal) 10%, var(--surface)); }
.agent-package-source input { width: auto; margin-top: 3px; accent-color: var(--bright-teal); }
.agent-package-source strong, .agent-package-source small { display: block; }
.agent-package-source small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.handoff-prompt-dialog { width: min(900px, calc(100vw - 34px)); }
.handoff-prompt-dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.handoff-prompt-dialog textarea { width: 100%; min-height: min(54vh, 560px); resize: vertical; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; line-height: 1.5; }
.agent-communication-field { margin: 0; padding: 13px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 13px; }
.agent-communication-field legend { padding: 0 5px; color: var(--accent-text); font-weight: 800; }
.agent-communication-field > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.agent-communication-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.agent-communication-choice { min-width: 0; padding: 9px 10px; display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink) !important; font-size: 12px; font-weight: 700 !important; cursor: pointer; }
.agent-communication-choice input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--bright-teal); }
.agent-communication-choice span { min-width: 0; overflow-wrap: anywhere; }
.agent-communication-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.agent-communication-choice.fixed { border-color: color-mix(in srgb, var(--bright-teal) 45%, var(--line)); background: color-mix(in srgb, var(--bright-teal) 9%, var(--surface)); cursor: default; }
.agent-required-check { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; background: var(--bright-teal); color: var(--text-on-accent); font-size: 14px; font-weight: 900; }
.agent-build-review { padding: 22px; display: grid; gap: 15px; border-color: color-mix(in srgb, var(--bright-teal) 52%, var(--line)); }
.agent-build-review > label { display: grid; gap: 7px; color: var(--accent-text); font-weight: 800; }
.agent-build-review textarea { width: 100%; resize: vertical; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.agent-build-review #agent-build-master-prompt { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; line-height: 1.55; }
.agent-build-safety, .agent-gui-review { padding: 13px 14px; display: grid; gap: 4px; border: 1px solid color-mix(in srgb, var(--bright-teal) 38%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--bright-teal) 8%, var(--surface)); }
.agent-build-safety span, .agent-gui-review span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.custom-agent-source-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.custom-agent-source-summary span { min-width: 0; padding: 11px 13px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--light-blue) 9%, var(--surface)); color: var(--muted); font-size: 11px; }
.custom-agent-source-summary strong { color: var(--ink); font-size: 19px; line-height: 1; }
.custom-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.custom-agent-card { display: grid; gap: 12px; }
.custom-agent-card-heading { display: flex; align-items: center; gap: 12px; }
.custom-agent-card-heading h3 { margin: 0 0 5px; }
.custom-agent-detail-page { min-height: 310px; padding: 24px; align-content: start; }
.custom-agent-workspace-page { min-height: 520px; padding: 24px; align-content: start; }
.custom-agent-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.custom-agent-workspace-heading .custom-agent-card-heading h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.agent-workspace-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.agent-live-workspace { margin-top: 4px; }
.custom-agent-data-grid { margin: 6px 0; }
.custom-agent-danger-zone { margin-top: 18px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); }
.custom-agent-danger-zone strong, .custom-agent-danger-zone span { display: block; }
.custom-agent-danger-zone span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.delete-agent-button { min-width: 130px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--bad) 58%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--danger-text); font-weight: 850; }
.delete-agent-button[data-confirming="true"] { background: var(--bad); color: white; }
.agent-origin-pill { background: color-mix(in srgb, var(--purple) 16%, var(--surface-2)); color: var(--accent-text); }
.about-agent-architecture { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.custom-agent-card .actions, .installed-agent-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.completed-agent-preview { margin-bottom: 14px; border-color: color-mix(in srgb, var(--bright-teal) 52%, var(--line)); }
.portability-dialog { width: min(760px, calc(100% - 32px)); }
.portability-dialog form { display: grid; gap: 13px; }
.portability-dialog form > label { display: grid; gap: 6px; color: var(--accent-text); font-weight: 750; }
.import-review-dialog { width: min(1040px, calc(100% - 32px)); }
.import-review-heading { display: flex; align-items: center; gap: 14px; }
.import-review-heading h2 { margin: 3px 0 6px; }
.import-review-grid { margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.import-review-grid > section { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.import-review-grid h3 { margin: 0 0 8px; font-size: 16px; }
.import-review-grid p, .import-review-grid ul { margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.import-review-grid code, .import-confirmation code { overflow-wrap: anywhere; }
.import-review-grid pre { max-height: 180px; overflow: auto; white-space: pre-wrap; color: var(--muted); font-size: 11px; }
.import-warning-list { color: #e77f7f !important; }
.import-pass { color: #67c587 !important; font-weight: 750; }
.package-content-list { max-height: 260px; margin-top: 10px; display: grid; gap: 5px; overflow: auto; }
.package-content-list span { padding: 7px 9px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; }
.package-content-list small { color: var(--muted); }
.import-warning, .import-confirmation, .agent-credential-banner { padding: 13px; border: 1px solid color-mix(in srgb, var(--pink) 46%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--pink) 10%, var(--surface)); }
.import-confirmation { margin-top: 14px; border-color: color-mix(in srgb, var(--bright-teal) 42%, var(--line)); background: color-mix(in srgb, var(--bright-teal) 8%, var(--surface)); }
.agent-credential-banner { display: grid; gap: 4px; }
.agent-credential-banner strong { color: var(--accent-text); }
.agent-credential-banner span, .agent-credential-banner p, .agent-credential-banner small { color: var(--muted); }
.agent-credential-banner.detailed { margin: 14px 0; }
.agent-credential-banner.detailed li { margin-bottom: 7px; }
.agent-credential-banner.detailed small { display: block; margin-top: 2px; }
.installed-agent-actions { margin-top: 16px; }
.agent-flow-scroll { overflow-x: auto; padding: 8px 2px 18px; }
.agent-flow-map { min-width: 1180px; min-height: 560px; display: grid; grid-template-columns: 150px 55px 190px 70px minmax(470px, 1fr) 60px 150px; align-items: center; gap: 6px; }
.agent-endpoint { min-height: 128px; padding: 18px 14px; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 24px; color: var(--text-on-accent); text-align: center; box-shadow: 0 18px 36px rgba(0,0,0,.16); }
.agent-endpoint > span { font-size: 28px; }
.agent-endpoint strong { max-width: 100%; overflow-wrap: anywhere; font-family: var(--display-font); font-size: 26px; font-weight: 400; line-height: 1; }
.agent-endpoint small { max-width: 125px; color: inherit; opacity: .84; line-height: 1.35; }
.agent-user-node { background: linear-gradient(145deg, var(--bright-teal), var(--primary)); }
.agent-result-node { background: linear-gradient(145deg, var(--purple), color-mix(in srgb, var(--purple) 72%, var(--primary))); }
.agent-flow-arrow, .agent-network-bridge { display: grid; place-items: center; align-content: center; color: var(--accent-text); text-align: center; }
.agent-flow-arrow span, .agent-network-bridge span { font-size: 46px; line-height: 1; }
.agent-flow-arrow small, .agent-network-bridge small { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 7px; padding: 6px 5px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1.25; text-transform: uppercase; box-shadow: 0 5px 14px rgba(0,0,0,.06); }
.agent-flow-arrow-wide span { color: var(--pink); }
.agent-manager-stage { display: grid; align-content: center; gap: 8px; }
.chat-agent-route { display: grid; gap: 5px; padding: 8px; border: 1px dashed color-mix(in srgb, var(--light-blue) 48%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); }
.chat-agent-route > small { color: var(--accent-text); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.direct-manager-route { padding: 0 4px; color: var(--muted); font-size: 9px; line-height: 1.35; text-align: center; }
.agent-network { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) 46px minmax(0, 1fr); align-items: center; gap: 8px; }
.agent-network-group { position: relative; display: grid; gap: 9px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--bright-teal) 45%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--light-blue) 8%, var(--surface)); }
.agent-network-group.review-group { border-color: color-mix(in srgb, var(--purple) 48%, var(--line)); background: color-mix(in srgb, var(--purple) 8%, var(--surface)); }
.agent-network-group > p { margin: 0 0 2px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.agent-node { width: 100%; min-height: 76px; padding: 11px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 93%, transparent); color: var(--ink); text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,.07); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.agent-node:hover { border-color: var(--bright-teal); box-shadow: 0 12px 28px color-mix(in srgb, var(--bright-teal) 14%, transparent); transform: translateY(-2px); }
.agent-node > span:nth-child(2) { min-width: 0; }
.agent-node strong, .agent-node small { display: block; }
.agent-node strong { max-width: 100%; overflow-wrap: anywhere; font-size: 13px; line-height: 1.25; }
.agent-node small { max-width: 100%; margin-top: 3px; display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.agent-node em { grid-column: 2; width: fit-content; color: var(--success-text); font-size: 9px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.agent-node-icon { width: 38px; height: 38px; display: grid; place-items: center; grid-row: span 2; border-radius: 12px; background: color-mix(in srgb, var(--light-blue) 22%, var(--surface)); font-size: 20px; }
.agent-node-manager { min-height: 155px; border-color: color-mix(in srgb, var(--yellow) 65%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 25%, var(--surface)), color-mix(in srgb, var(--coral) 16%, var(--surface))); }
.agent-node-knowledge-agent, .agent-node-knowledge-librarian { border-color: color-mix(in srgb, var(--purple) 40%, var(--line)); }
.agent-node-task-intelligence, .agent-node-semantic-validator { border-color: color-mix(in srgb, var(--bright-teal) 45%, var(--line)); }
.agent-node-implementation-agent, .agent-node-gui-design { border-color: color-mix(in srgb, var(--pink) 44%, var(--line)); }
.agent-map-legend { padding: 12px 15px; display: flex; flex-wrap: wrap; gap: 12px 22px; border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); color: var(--muted); font-size: 11px; }
.agent-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.legend-dot.route { background: var(--pink); }
.agent-detail-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 28px; overflow: auto; border: 1px solid color-mix(in srgb, var(--purple) 42%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 32%), var(--surface); color: var(--ink); box-shadow: 0 34px 100px rgba(0,0,0,.38); }
.agent-detail-dialog::backdrop { background: rgba(15,12,18,.58); backdrop-filter: blur(4px); }
.agent-dialog-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 22px; }
.agent-dialog-heading { padding-right: 42px; display: flex; align-items: center; gap: 14px; }
.agent-dialog-heading .agent-node-icon { flex: 0 0 auto; }
.agent-dialog-heading h2 { margin: 2px 0 8px; font-size: 32px; line-height: 1.15; }
.agent-dialog-purpose { margin: 20px 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.agent-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agent-dialog-grid section { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.agent-dialog-grid h3 { margin: 0 0 10px; font-family: inherit; font-size: 14px; }
.agent-dialog-grid ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.55; }
.bug-report-dialog { width: min(680px, calc(100% - 32px)); padding-bottom: 20px; overflow: hidden; }
.bug-report-form { max-height: calc(100vh - 245px); min-height: 0; padding: 2px 12px 8px 0; display: grid; gap: 15px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; scrollbar-width: thin; }
.bug-report-form::-webkit-scrollbar { width: 8px; }
.bug-report-form::-webkit-scrollbar-track { margin-block: 8px; background: transparent; }
.bug-report-form::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--muted) 58%, transparent); background-clip: padding-box; }
.bug-report-form::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.bug-report-form > label { display: grid; gap: 7px; font-weight: 800; }
.bug-report-form select, .bug-report-form textarea { width: 100%; }
.bug-report-form textarea { min-height: 140px; resize: vertical; }
.bug-image-field { display: grid; gap: 7px; }
.bug-file-picker { min-height: 48px; padding: 7px 9px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.bug-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.bug-file-button { flex: 0 0 auto; margin: 0; padding: 8px 12px; cursor: pointer; }
.bug-file-picker span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.bug-image-field small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.bug-image-preview { max-height: 260px; padding: 10px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.bug-image-preview img { display: block; width: 100%; max-height: 238px; object-fit: contain; border-radius: 9px; background: var(--surface); }
.bug-report-note { padding: 12px 14px; display: grid; gap: 3px; border: 1px solid color-mix(in srgb, var(--light-blue) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--light-blue) 10%, var(--surface)); font-size: 12px; line-height: 1.45; }
.bug-report-note span { color: var(--muted); }
.bug-outlook-consent { margin-top: 8px; padding-top: 9px; display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid color-mix(in srgb, var(--light-blue) 26%, var(--line)); cursor: pointer; }
.bug-outlook-consent input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--bright-teal); }
.bug-outlook-consent span { color: var(--ink); font-weight: 750; }
.queue-summary { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.queue-settings-page, .queue-settings-page h1, .queue-settings-page h2, .queue-settings-page h3, .queue-settings-page strong { font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.queue-summary article { min-height: 88px; padding: 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.queue-summary article > span { grid-row: span 2; font-size: 24px; }
.queue-summary strong { font-size: 25px; line-height: 1; }
.queue-summary small { color: var(--muted); font-weight: 750; }
.queue-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.queue-column { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.queue-column > header { width: 100%; height: auto; min-height: 68px; margin-bottom: 12px; padding: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: static; border: 0; background: transparent; backdrop-filter: none; z-index: auto; }
.queue-column > header > div { min-width: 0; }
.queue-column > header p { margin-bottom: 5px; }
.queue-column > header span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.queue-column > header > strong { min-width: 30px; padding: 5px 8px; flex: 0 0 auto; border-radius: 999px; background: var(--surface); color: var(--accent-text); text-align: center; }
.queue-column-list { height: clamp(260px, 45vh, 430px); min-height: 0; padding-right: 5px; display: grid; align-content: start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-behavior: auto; overflow-anchor: none; }
.queue-item { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 7px 18px rgba(0,0,0,.06); }
.queue-item h3, .queue-item p { overflow-wrap: anywhere; }
.queue-item h3 { margin: 0 0 5px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 14px; line-height: 1.35; }
.queue-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.queue-item-details { margin: 7px 0 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.queue-item-details summary { padding: 7px 0; color: var(--accent-text); font-size: 11px; font-weight: 800; cursor: pointer; }
.queue-item-details p { padding: 0 0 9px; }
.queue-item time { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.queue-progress { margin-top: 11px; }
.queue-progress > div { margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.queue-progress-charlie { width: 27px; height: 19px; object-fit: contain; flex: 0 0 auto; }
.queue-progress strong { color: var(--accent-text); font-size: 12px; }
.queue-progress progress { width: 100%; height: 9px; accent-color: var(--bright-teal); }
.queue-empty { min-height: 90px; display: grid; place-items: center; padding: 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); font-size: 12px; text-align: center; }
.queue-activity-panel { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 62%, transparent); }
.queue-activity-panel > header { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.queue-activity-panel > header h3 { margin: 1px 0 0; font-size: 16px; }
.queue-activity-panel > header > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.queue-activity-list { max-height: 230px; min-height: 0; padding-right: 5px; display: grid; align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.queue-activity-list article { min-width: 0; padding: 8px 10px; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 10px; background: var(--surface); }
.queue-activity-list time, .queue-activity-list span, .queue-activity-list a { color: var(--muted); font-size: 10px; }
.queue-activity-list strong, .queue-activity-list span { display: block; overflow-wrap: anywhere; }
.queue-activity-list strong { font-size: 11px; line-height: 1.35; }
.queue-activity-list span { margin-top: 2px; }
.queue-activity-list a { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-running { border-color: color-mix(in srgb, var(--bright-teal) 45%, var(--line)); }
.queue-waiting { border-color: color-mix(in srgb, var(--yellow) 52%, var(--line)); }
.queue-solved { border-color: color-mix(in srgb, var(--purple) 42%, var(--line)); }

.nehoray-overview { position: relative; overflow: hidden; padding: 24px 26px 26px; border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); border-radius: 26px; background: radial-gradient(circle at 92% 26%, color-mix(in srgb, var(--light-blue) 34%, transparent), transparent 31%), radial-gradient(circle at 14% 86%, color-mix(in srgb, var(--yellow) 19%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--primary)), color-mix(in srgb, var(--surface-2) 78%, var(--pink))); box-shadow: var(--shadow); }
.overview-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; color: var(--muted); font-size: 13px; font-weight: 700; }
.workspace-label { display: inline-flex; align-items: center; gap: 9px; }
.workspace-label::before { width: 9px; height: 9px; border-radius: 50%; background: var(--bright-teal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bright-teal) 18%, transparent); content: ""; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); gap: 30px; align-items: center; }
.overview-greeting > .eyebrow { color: color-mix(in srgb, var(--purple) 68%, var(--pink)); font-family: var(--small-title-font); font-size: 15px; font-weight: 800; letter-spacing: .025em; }
.overview-greeting h2 { max-width: none; margin: 14px 0 12px; font-family: var(--small-title-font); font-size: clamp(46px, 4.5vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.overview-greeting h2 em { color: var(--bright-teal); font-style: normal; }
.overview-greeting h2 span { font-family: initial; font-size: .48em; }
.overview-greeting > p:last-child { max-width: 580px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.overview-side { display: grid; gap: 12px; }
.overview-shortcut-tools { min-height: 34px; display: flex; align-items: center; gap: 7px; }
.overview-shortcut-tools button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--accent-text); font: inherit; font-size: 18px; font-weight: 850; line-height: 1; box-shadow: 0 7px 18px rgba(0,0,0,.08); }
.overview-shortcut-tools button:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); transform: translateY(-1px); }
.overview-shortcut-tools button:focus-visible { outline: 3px solid color-mix(in srgb, var(--bright-teal) 42%, transparent); outline-offset: 2px; }
.overview-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.overview-shortcuts button, .overview-shortcuts a { min-width: 0; min-height: 78px; padding: 9px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; text-decoration: none; }
.overview-shortcuts button:hover, .overview-shortcuts a:hover { border-color: var(--bright-teal); background: color-mix(in srgb, var(--light-blue) 12%, var(--surface)); transform: translateY(-1px); }
.overview-shortcuts button span, .overview-shortcuts a > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--light-blue) 16%, var(--surface)); font-size: 17px; }
.overview-shortcuts .quick-link-icon { position: relative; overflow: hidden; }
.overview-shortcuts .quick-link-icon img { width: 24px; height: 24px; object-fit: contain; }
.overview-shortcuts .quick-link-icon b { display: none; font-size: 12px; letter-spacing: -.02em; color: var(--ink); }
.overview-shortcuts .quick-link-icon.is-fallback img { display: none; }
.overview-shortcuts .quick-link-icon.is-fallback b { display: block; }
.overview-shortcuts .quick-link-icon[data-tone="0"] { background: color-mix(in srgb, var(--bright-teal) 28%, var(--surface)); }
.overview-shortcuts .quick-link-icon[data-tone="1"] { background: color-mix(in srgb, var(--pink) 28%, var(--surface)); }
.overview-shortcuts .quick-link-icon[data-tone="2"] { background: color-mix(in srgb, var(--purple) 28%, var(--surface)); }
.overview-shortcuts .quick-link-icon[data-tone="3"] { background: color-mix(in srgb, var(--light-blue) 30%, var(--surface)); }
.overview-shortcuts .quick-link-icon[data-tone="4"] { background: color-mix(in srgb, #ffbf69 32%, var(--surface)); }
.overview-shortcuts .quick-link-icon[data-tone="5"] { background: color-mix(in srgb, #8bd17c 30%, var(--surface)); }
.overview-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.overview-summary > button, .overview-summary > a, .overview-summary > .summary-service { min-width: 0; min-height: 72px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); text-align: center; text-decoration: none; }
.overview-summary .summary-metric { grid-column: span 2; }
.overview-summary .summary-service { grid-column: span 3; min-height: 82px; }
.overview-summary .summary-service.on-call { background: color-mix(in srgb, var(--light-blue) 14%, var(--surface)); }
.overview-summary .summary-service.on-call-soon { background: color-mix(in srgb, var(--yellow) 32%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--yellow) 76%, transparent); }
.overview-summary .summary-service.on-call-active { background: color-mix(in srgb, var(--coral) 34%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--coral) 82%, transparent), 0 0 26px color-mix(in srgb, var(--coral) 28%, transparent); }
.overview-summary .summary-service.on-call-active small, .overview-summary .summary-service.on-call-active strong { color: var(--danger-text); }
.overview-summary .summary-service.vest { background: color-mix(in srgb, var(--purple) 14%, var(--surface)); }
.overview-summary > button:hover, .overview-summary > a:hover { background: color-mix(in srgb, var(--bright-teal) 12%, var(--surface)); }
.overview-summary strong { font-family: var(--display-font); font-size: 27px; font-weight: 400; line-height: 1; }
.overview-summary span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.overview-summary small { margin-bottom: 5px; color: var(--accent-text); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.summary-service-actions { margin-top: 7px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.summary-service-actions a, .summary-service-actions button { min-height: 0; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--bright-teal) 34%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--accent-text); font-size: 10px; font-weight: 800; text-decoration: none; }
.summary-service-actions a:hover, .summary-service-actions button:hover { border-color: var(--bright-teal); }
.summary-service-actions button:disabled { opacity: .62; cursor: wait; }
.inline-charlie-loading { min-height: 22px; margin: 1px 0 2px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; color: var(--accent-text) !important; font-size: 10px !important; font-weight: 800; }
.inline-charlie-loading img { width: 22px; height: 22px; object-fit: contain; }
.inline-button-charlie { width: 18px; height: 18px; margin-right: 3px; object-fit: contain; vertical-align: middle; }
.quick-link-dialog { width: min(520px, calc(100% - 32px)); padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.quick-link-dialog::backdrop { background: rgba(20, 25, 35, .58); backdrop-filter: blur(4px); }
.quick-link-dialog h2 { margin: 5px 0 18px; font-size: 32px; line-height: 1.15; }
.quick-link-dialog form { display: grid; gap: 14px; }
.quick-link-dialog label { display: grid; gap: 6px; color: var(--accent-text); font-weight: 750; }
.quick-link-editor { width: min(860px, calc(100% - 32px)); }
.quick-link-editor h3 { margin: 8px 0 0; font-size: 18px; }
.quick-link-editor-help { margin: -7px 0 0; color: var(--muted); font-size: 12px; }
.quick-link-editor-list { max-height: min(58vh, 560px); display: grid; gap: 10px; overflow: auto; }
.quick-link-editor-row { padding: 12px; display: grid; grid-template-columns: 38px minmax(120px, .7fr) minmax(240px, 1.5fr) auto; align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.quick-link-editor-row.is-built-in { grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; }
.quick-link-built-in-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); font-size: 18px; }
.quick-link-built-in-name strong, .quick-link-built-in-name small { display: block; }
.quick-link-built-in-name small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.quick-link-editor-row .quick-link-icon { align-self: center; display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--light-blue) 18%, var(--surface)); }
.quick-link-editor-row .quick-link-icon img { width: 25px; height: 25px; object-fit: contain; }
.quick-link-editor-row .quick-link-icon b { display: none; font-size: 12px; }
.quick-link-editor-row .quick-link-icon.is-fallback img { display: none; }
.quick-link-editor-row .quick-link-icon.is-fallback b { display: block; }
.quick-link-row-actions { display: flex; gap: 6px; }
.quick-link-row-actions button { min-width: 34px; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 750; }
.quick-link-row-actions button:hover:not(:disabled) { border-color: var(--bright-teal); }
.quick-link-row-actions button:disabled { opacity: .35; }
.quick-link-row-actions .quick-link-remove { color: #e26767; }
.quick-link-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.quick-link-or::before, .quick-link-or::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.overview-attention { margin-top: 18px; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--pink) 30%, var(--line)); border-radius: 17px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.attention-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.attention-heading .eyebrow { margin-bottom: 3px; font-size: 11px; }
.attention-heading h3 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 800; }
.attention-heading > span, .overview-attention > p { color: var(--muted); font-size: 11px; }
.attention-heading > span { font-weight: 800; }
.overview-attention > p { margin: 0 0 11px; line-height: 1.45; }
.attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.attention-item { min-height: 50px; padding: 8px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--light-blue) 50%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 96%, var(--light-blue)); color: var(--ink); text-align: left; }
.attention-item:hover { border-color: var(--bright-teal); transform: translateY(-1px); }
.attention-item > span { min-width: 0; display: grid; gap: 2px; }
.attention-item strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item b { color: var(--accent-text); font-size: 14px; }
.priority-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 13%, transparent); }
.priority-dot.priority-high, .priority-dot.priority-urgent { background: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 14%, transparent); }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-layout, .daily-tracker-layout, .tasks-workspace-layout, .tracker-menu-layout { grid-template-columns: 1fr; }
  .tracker-status-menu { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-focus-panel { position: static; }
  .source-row { grid-template-columns: 1fr 100px; }
  .source-row label:not(:first-child) { grid-column: span 2; }
  .launch-feature-showcase { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
  .launch-feature-panel { margin-left: -24px; grid-template-columns: 170px minmax(220px, 280px); gap: 16px; }
  .sidebar { gap: 8px; padding: 7px 8px; }
  .brand-area { max-width: none; }
  .brand small { display: none; }
  .primary-nav { justify-content: flex-start; }
  .overview-grid { grid-template-columns: 1fr; }
  .windows-settings { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 18px; }
  .settings-choice-grid.palettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-flow-map { min-width: 1180px; }
  .file-search-grid, .file-list { grid-template-columns: 1fr; }
}

.schedule-create-panel,
.schedule-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--light-blue) 30%, var(--line));
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--light-blue)), color-mix(in srgb, var(--surface) 96%, var(--purple)));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--purple) 8%, transparent);
}
.schedule-create-panel { margin-bottom: 20px; border-color: color-mix(in srgb, var(--bright-teal) 42%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--bright-teal) 10%, var(--surface)), color-mix(in srgb, var(--light-blue) 9%, var(--surface)), color-mix(in srgb, var(--pink) 6%, var(--surface))); }
.schedule-create-panel > summary,
.schedule-card > summary {
  padding: 17px 19px;
  cursor: pointer;
  font-weight: 800;
}
.schedule-create-panel > summary { min-height: 58px; display: flex; align-items: center; gap: 11px; list-style: none; color: var(--accent-text); }
.schedule-create-panel > summary::-webkit-details-marker, .schedule-card > summary::-webkit-details-marker { display: none; }
.schedule-create-panel > summary::before { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--bright-teal), var(--light-blue)); color: var(--text-on-accent); content: "+"; font-size: 20px; font-weight: 850; transition: transform .18s ease; }
.schedule-create-panel[open] > summary::before { transform: rotate(45deg); }
.schedule-card > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.schedule-card > summary::after { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--bright-teal), var(--light-blue), var(--purple), var(--pink)); content: ""; opacity: .7; }
.schedule-card:hover { border-color: color-mix(in srgb, var(--purple) 42%, var(--line)); box-shadow: 0 16px 36px color-mix(in srgb, var(--purple) 12%, transparent); }
.schedule-card[open] { border-color: color-mix(in srgb, var(--bright-teal) 50%, var(--line)); }
.schedule-card > summary h3 { margin: 3px 0; }
.schedule-card > summary p { max-width: 900px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.schedule-card > summary small { width: fit-content; margin-top: 9px; padding: 4px 8px; display: block; border-radius: 999px; background: color-mix(in srgb, var(--bright-teal) 13%, var(--surface)); color: var(--accent-text); font-size: 10px; font-weight: 850; }
.schedule-origin {
  color: var(--success-text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.schedule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.schedule-summary-meta { margin-top: 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.schedule-summary-meta small { margin-top: 0 !important; }
.schedule-source-link { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--purple) 9%, var(--surface)); color: var(--accent-text); font-size: 10px; font-weight: 850; text-decoration: none; }
.schedule-source-link:hover { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 16%, var(--surface)); }
.schedule-blocked-reason { margin-top: 9px !important; padding: 8px 10px; border-left: 3px solid var(--bad); border-radius: 8px; background: color-mix(in srgb, var(--bad) 9%, var(--surface)); color: var(--danger-text) !important; }
.schedule-form { padding: 0 19px 19px; }
.schedule-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.schedule-form-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }
.schedule-form-grid .wide { grid-column: 1 / -1; }
.schedule-enabled { align-content: end; grid-template-columns: auto 1fr !important; align-items: center; justify-content: start; }
.schedule-enabled input { width: auto; }
.schedule-last-run {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(31, 105, 82, .07);
  color: var(--muted);
  font-size: 12px;
}

.assistant-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 9px;
}
.connection-statuses { display: flex; align-items: center; gap: 6px; }
body:not(.assistant-ready) .assistant-float,
body:not(.assistant-ready) .chat-popover { display: none; }

.chat-launcher {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: visible;
  border: 3px solid color-mix(in srgb, var(--bright-teal) 72%, #fff);
  border-radius: 22px;
  background: linear-gradient(145deg, #fffdf8, color-mix(in srgb, var(--light-blue) 28%, #fff));
  box-shadow: 0 16px 38px rgba(31, 48, 42, .24), inset 0 0 0 2px rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(31, 48, 42, .3), inset 0 0 0 2px rgba(255, 255, 255, .82); }
.chat-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--bright-teal) 42%, transparent); outline-offset: 4px; }
.chat-launcher img { display: block; width: 48px; height: 48px; margin: auto; object-fit: contain; object-position: center; }
.chat-launcher-bubble {
  position: absolute;
  right: -8px;
  bottom: -5px;
  display: flex;
  width: 29px;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid #fff;
  border-radius: 12px 12px 12px 4px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 14px rgba(31, 48, 42, .24);
}
.chat-launcher-bubble > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.chat-launcher.is-thinking .chat-launcher-bubble > span { animation: launcher-typing-bounce 1.05s infinite ease-in-out; }
.chat-launcher.is-thinking .chat-launcher-bubble > span:nth-child(2) { animation-delay: .13s; }
.chat-launcher.is-thinking .chat-launcher-bubble > span:nth-child(3) { animation-delay: .26s; }
@keyframes launcher-typing-bounce {
  0%, 60%, 100% { opacity: .45; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.chat-unread-badge {
  position: absolute;
  top: -9px;
  right: -10px;
  display: grid;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #d8353f;
  box-shadow: 0 5px 16px rgba(132, 17, 25, .34);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.chat-popover {
  position: fixed;
  left: 22px;
  bottom: 132px;
  z-index: 40;
  display: grid;
  width: min(390px, calc(100vw - 28px));
  height: min(570px, calc(100vh - 160px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 28px 80px rgba(24, 35, 31, .3);
  backdrop-filter: blur(18px);
}
.chat-popover-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 68%, transparent);
}
.chat-popover-header .chat-charlie-avatar { width: 42px; height: 42px; }
.chat-popover-title { min-width: 0; }
.chat-popover-title strong { display: block; overflow: hidden; font-family: var(--small-title-font); font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-popover-title span { color: var(--muted); font-size: 11px; }
.chat-popover-actions { display: flex; gap: 5px; }
.chat-popover-actions button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 15px;
}
.mini-chat-messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}
.mini-chat-messages .chat-message { max-width: 94%; gap: 7px; }
.mini-chat-messages .chat-message-avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 8px; }
.mini-chat-messages .chat-message-bubble { padding: 10px 12px; font-size: 13px; }
.mini-chat-messages .chat-typing { min-width: 48px; min-height: 18px; }
.mini-chat-empty { margin: auto; padding: 24px; color: var(--muted); text-align: center; line-height: 1.55; }
.mini-chat-empty img { width: 76px; height: 76px; object-fit: contain; }
.mini-chat-empty strong { display: block; margin: 7px 0 3px; color: var(--ink); font-family: var(--small-title-font); font-size: 20px; font-weight: 700; }
.mini-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
  padding: 11px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.mini-chat-composer textarea {
  min-height: 42px;
  max-height: 100px;
  padding: 10px 12px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface);
}
.mini-chat-composer button { width: 42px; height: 42px; padding: 0; border-radius: 13px; }

.chat-page {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  min-height: min(720px, calc(100vh - 210px));
  border: 1px solid rgba(31, 48, 42, .12);
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 50px rgba(31, 48, 42, .09);
}

.chat-history-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  padding: 20px 16px;
  border-right: 1px solid rgba(31, 48, 42, .1);
  background: rgba(240, 234, 217, .66);
}

.new-chat-button {
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.chat-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chat-history-heading strong {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 105, 82, .11);
}

.chat-history-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}

.chat-history-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-history-item:hover,
.chat-history-item.active { background: rgba(255, 255, 255, .82); }
.chat-history-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item span, .chat-history-empty { color: var(--muted); font-size: 11px; }
.chat-history-empty { padding: 12px 7px; line-height: 1.5; }

.chat-conversation {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(255, 252, 244, .82);
}

.chat-conversation-header {
  display: flex;
  height: auto;
  min-height: 76px;
  align-items: center;
  gap: 13px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(31, 48, 42, .09);
  background: rgba(255, 255, 255, .58);
}

.chat-conversation-header h2 { margin: 2px 0 0; font-family: var(--small-title-font); font-size: 22px; font-weight: 700; }
.chat-conversation-header .eyebrow { margin: 0; }
.chat-charlie-avatar, .chat-message-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background: #316e5a;
  font-size: 10px;
  font-weight: 800;
}
.chat-charlie-avatar { width: 44px; height: 44px; }
.chat-charlie-avatar img, .chat-message-avatar img { width: 100%; height: 100%; object-fit: contain; }

.chat-messages {
  display: flex;
  min-height: 380px;
  flex-direction: column;
  gap: 20px;
  padding: 28px clamp(18px, 5vw, 70px);
  overflow-y: auto;
}

.chat-message {
  display: flex;
  max-width: min(780px, 88%);
  align-items: flex-start;
  gap: 10px;
}
.chat-message-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-message-assistant.is-reply { position: relative; margin-left: 14px; }
.chat-message-assistant.is-reply::before {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 8px;
  height: 24px;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-radius: 0 0 0 11px;
  content: "";
}
.chat-message-avatar { width: 34px; height: 34px; border-radius: 11px; }
.chat-message-user .chat-message-avatar { background: transparent; }
.chat-message-user-avatar { width: 36px; height: 36px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; display: grid; place-items: center; }
.chat-message-user-avatar .user-profile-avatar { width: 34px; height: 34px; aspect-ratio: 1 / 1; flex: 0 0 34px; border-radius: 50%; font-size: 12px; }
.chat-message-content { min-width: 0; }
.chat-agent-label { margin: 0 0 4px 4px; display: block; color: var(--accent-text); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.chat-reply-context {
  display: flex;
  max-width: 420px;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-context span:last-child { overflow: hidden; text-overflow: ellipsis; }
.chat-message-bubble {
  padding: 13px 16px;
  border-radius: 6px 18px 18px 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(31, 48, 42, .08);
  line-height: 1.55;
}
.chat-message-user .chat-message-bubble {
  border-radius: 18px 6px 18px 18px;
  color: #fff;
  background: #286650;
}
.chat-message-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-typing { display: flex; min-width: 56px; min-height: 22px; align-items: center; justify-content: center; gap: 5px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: chat-typing-bounce 1.1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .14s; }
.chat-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { opacity: .38; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-5px); }
}
.chat-welcome {
  max-width: 500px;
  margin: auto;
  text-align: center;
}
.chat-welcome img { width: 118px; max-height: 118px; object-fit: contain; }
.chat-welcome h2 { margin: 7px 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; }
.chat-welcome p:last-child { color: var(--muted); line-height: 1.6; }

.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 clamp(16px, 5vw, 66px) 24px;
  padding: 9px 9px 9px 16px;
  border: 1px solid rgba(31, 48, 42, .14);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(31, 48, 42, .1);
}
.chat-composer textarea {
  min-height: 44px;
  max-height: 150px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}
.chat-composer .button { width: 44px; height: 44px; padding: 0; border-radius: 14px; font-size: 20px; }

@media (max-width: 760px) {
  .launch-screen { padding: 14px; }
  .launch-card { min-height: calc(100vh - 28px); grid-template-columns: 1fr; padding: 38px 24px 60px; border-radius: 26px; }
  .launch-title-intro { font-size: clamp(17px, 5vw, 23px); white-space: normal; }
  .launch-title-main { font-size: clamp(56px, 20vw, 84px); }
  .launch-feature-showcase { grid-template-columns: 1fr; justify-items: center; }
  .first-launch-charlie { width: min(190px, 62vw); }
  .launch-feature-panel { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 14px; }
  .launch-capabilities { display: flex; gap: 4px; padding: 0 0 10px; overflow-x: auto; }
  .launch-capability { min-height: 42px; flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
  .launch-capability:nth-child(n) { transform: none; }
  .overview-hero { align-items: flex-start; flex-direction: column; padding: 22px; }
  .assistant-status-card { width: 100%; min-width: 0; }
  .overview-metrics, .overview-layout.lower, .task-list, .people-grid, .file-list, .library-folder-grid { grid-template-columns: 1fr; }
  .queue-board, .queue-summary { grid-template-columns: 1fr; }
  .queue-activity-list article { grid-template-columns: 1fr; }
  .shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .sidebar { border-radius: 15px; }
  .brand { max-width: none; justify-content: center; padding: 2px 6px 5px; }
  .primary-nav-area { align-items: center; flex-direction: row; }
  .primary-nav-tools { justify-content: flex-end; }
  .primary-nav button { min-width: 68px; white-space: nowrap; }
  .agent-setup-complete { grid-template-columns: auto minmax(0, 1fr); }
  .agent-setup-complete .button { grid-column: 1 / -1; width: 100%; }
  .custom-agent-workspace-heading { align-items: stretch; flex-direction: column; }
  .agent-workspace-actions { align-items: stretch; flex-direction: column; }
  .agent-workspace-actions > .button-secondary { width: 100%; }
  .agent-live-intro ul { grid-template-columns: 1fr; }
  .workspace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-panel-frame { min-height: 420px; padding: 18px 14px; border-radius: 20px; }
  .nehoray-overview { padding: 22px 20px 24px; border-radius: 23px; }
  .overview-topline { margin-bottom: 36px; }
  .overview-topline span:last-child { text-align: right; }
  .overview-greeting h2 { font-size: clamp(38px, 12vw, 58px); white-space: normal; }
  .overview-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .custom-agent-grid, .custom-agent-source-summary, .custom-agent-builder, .custom-agent-menu-layout, .import-review-grid { grid-template-columns: 1fr; }
  .agent-build-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-agent-menu { position: static; }
  .custom-agent-catalog-heading { grid-template-columns: 1fr; }
  .quick-link-editor-row { grid-template-columns: 36px 1fr; }
  .quick-link-editor-row label, .quick-link-row-actions { grid-column: 2; }
  .overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-summary .summary-metric, .overview-summary .summary-service { grid-column: span 1; }
  .attention-list { grid-template-columns: 1fr; }
  .windows-settings { grid-template-columns: 1fr; padding: 14px; }
  .settings-identity { margin-bottom: 8px; }
  .settings-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-sidebar nav button { min-height: 44px; }
  .settings-choice-grid.two, .settings-choice-grid.palettes, .settings-mode-row, .settings-palettes { grid-template-columns: 1fr; }
  .settings-row { grid-template-columns: auto minmax(0, 1fr); }
  .settings-row > span:last-child { grid-column: 2; text-align: left; }
  .settings-permission-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agent-dialog-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head > div { min-width: 0; max-width: 100%; }
  .section-head p { overflow-wrap: anywhere; }
  .tracker-create > button { margin-left: 0; }
  .daily-tracker-layout { grid-template-columns: minmax(0, 1fr); }
  .calendar-day { min-height: 46px; padding: 5px; }
  .calendar-weekdays { font-size: 9px; }
  .person-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .launch-capability-detail { min-height: 96px; }
  .setup-fields, .connector-grid, .agent-choice-grid, .setup-permissions .permission-grid, .professional-profile-fields, .appearance-options, .goal-options, .built-in-agent-grid, .out-of-box-skill-grid { grid-template-columns: 1fr; }
  .field-heading { align-items: stretch; flex-direction: column; }
  .field-heading .button-secondary { width: 100%; }
  .context-prompt-action { align-items: stretch; flex-direction: column; }
  .profile-retrieve { align-items: stretch; flex-direction: column; }
  .context-prompt-toggle { width: 100%; }
  .gui-preference-head { align-items: stretch; flex-direction: column; }
  .trust-gui-choice { width: 100%; margin-left: 0; }
  .section-add-button { width: 100%; }
  .custom-agent-entry > .generate-agent-prompt { width: 100%; }
  .third-party-agent-editor > .generate-third-party-prompt { width: 100%; }
  .prompt-approval-row { align-items: stretch; flex-direction: column; }
  .custom-agent-summary, .third-party-agent-summary { align-items: stretch; flex-direction: column; }
  .built-in-agent-heading, .skill-picker-heading { align-items: flex-start; flex-wrap: wrap; }
  .built-in-agent-heading .built-in-agents-disclosure { width: 100%; }
  .skill-picker-heading .out-of-box-skills-disclosure { width: 100%; }
  .reusable-skill-entry, .third-party-skill-entry { grid-template-columns: 1fr; }
  .goal-picker-head { align-items: stretch; flex-direction: column; }
  .priority-context-options { grid-template-columns: 1fr; }
  .setup-dots small { font-size: 9px; }
  .setup-simple-card { padding: 24px 18px; border-radius: 24px; }
  .launch-visual { min-height: 280px; order: -1; }
  .visual-orbit { width: min(86%, 310px); }
  .dog-stage { min-height: 220px; }
  .dog-stage img { width: min(100%, 300px); }
  .loading-charlie { width: 72px; }
  .visual-caption { margin-top: -24px; }
  .hero, .grid, .grid.two, .form-grid { grid-template-columns: 1fr; }
  .profile-avatar-settings { grid-template-columns: 1fr; }
  .profile-avatar-preview { width: 112px; height: 112px; }
  .profile-avatar-actions { grid-column: 1; align-items: stretch; flex-direction: column; }
  .backup-management-grid { grid-template-columns: 1fr; }
  .backup-inventory-panel { max-height: 460px; }
  .backup-card dl { grid-template-columns: 1fr; }
  .health { display: none; }
  .source-row { grid-template-columns: 1fr; }
  .source-row label:not(:first-child) { grid-column: auto; }
  .event { grid-template-columns: 1fr; gap: 4px; }
  .chat-page { grid-template-columns: 1fr; min-height: calc(100vh - 185px); }
  .chat-history-panel { max-height: 168px; border-right: 0; border-bottom: 1px solid rgba(31, 48, 42, .1); }
  .chat-history-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .chat-history-item { min-width: 180px; }
  .chat-messages { min-height: 340px; padding: 22px 14px; }
  .chat-message { max-width: 96%; }
  .chat-composer { margin: 0 12px 16px; }
  .assistant-float { left: 14px; bottom: 14px; }
  .chat-launcher { width: 56px; height: 56px; border-radius: 19px; }
  .chat-launcher img { width: 42px; height: 42px; }
  .chat-popover { left: 14px; bottom: 124px; height: min(540px, calc(100vh - 142px)); }
  .schedule-form-grid { grid-template-columns: 1fr; }
  .schedule-form-grid .wide { grid-column: auto; }
  .schedule-list { grid-template-columns: 1fr; }
  .schedule-card > summary { align-items: flex-start; }
}

  .automation-page {
    display: grid;
    gap: 22px;
  }

  .automation-page > .grid,
  .automation-page .stack {
    gap: 18px;
  }

  .automation-page .card,
  .automation-page .item {
    margin: 0;
  }

  .recent-durable-jobs {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
  }

.update-hero,
.update-transaction,
.update-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(54, 42, 58, .1);
}

.update-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 24px;
  margin-bottom: 16px;
}

.update-hero h2 {
  margin: 4px 0 8px;
  font-family: "Cooper Black", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.update-state {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.update-state strong {
  font-size: 1.2rem;
}

.update-transaction,
.update-panel {
  padding: 20px;
  margin-bottom: 16px;
}

.update-transaction progress {
  width: 100%;
  height: 12px;
  accent-color: var(--accent);
}

.update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.updates-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.update-panel h3 {
  margin-top: 0;
}

.update-panel form {
  display: grid;
  gap: 14px;
}

.update-panel form > label:not(.settings-switch) {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.update-panel select {
  width: 100%;
}

.backup-location-panel { margin-bottom: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--light-blue) 34%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--light-blue) 7%, var(--surface)); }
.backup-location-panel h3 { margin: 5px 0 7px; overflow-wrap: anywhere; font-size: 14px; }
.backup-location-panel p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.5; }
.backup-management-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(380px, 1.22fr); gap: 16px; align-items: stretch; }
.backup-management-grid > .update-panel { min-width: 0; margin-bottom: 0; }
.backup-policy-panel { align-self: start; }
.backup-policy-form .settings-switch { justify-content: flex-start; }
.backup-policy-form .button-secondary { width: fit-content; min-width: 180px; cursor: pointer; }
.backup-inventory-panel { display: flex; min-height: 0; max-height: 520px; flex-direction: column; }
.backup-inventory-panel > .section-head { flex: 0 0 auto; }
.backup-list { min-height: 0; padding-right: 6px; display: grid; align-content: start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.backup-card { padding: 14px; display: grid; gap: 11px; border: 1px solid color-mix(in srgb, var(--light-blue) 32%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 95%, var(--light-blue)); }
.backup-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.backup-card > div:first-child span { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bright-teal) 12%, var(--surface)); color: var(--accent-text); font-size: 10px; font-weight: 800; }
.backup-card dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.backup-card dl div { padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.backup-card dt { color: var(--muted); font-size: 10px; font-weight: 750; }
.backup-card dd { margin: 3px 0 0; font-size: 11px; font-weight: 750; }
.backup-card > small { overflow-wrap: anywhere; color: var(--muted); }
.backup-card .restore-backup { width: fit-content; cursor: pointer; }

.update-panel ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.update-panel li,
.update-history article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.update-panel li span,
.update-history small {
  color: var(--muted);
}

.update-technical {
  margin-top: 16px;
}

.update-technical pre {
  max-height: 320px;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 840px) {
  .update-hero {
    display: grid;
    align-items: flex-start;
  }

  .update-state {
    justify-items: start;
    text-align: left;
  }

  .updates-grid {
    grid-template-columns: 1fr;
  }
}