/* YOUNA's quiet editorial workspace language with soft, purposeful color.
 * Reference: https://openai.com/about/ and https://openai.com/business/.
 * Keep the homepage's continuous glass atmosphere and existing business flows.
 */
@font-face {
  font-family: "Youna Rounded";
  src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #fff;
  --ink: #182329;
  --muted: #60676b;
  --line: #e4e8e9;
  --green: #28574e;
  --mint: #edf5f2;
  --accent: #28574e;
  --space-color: #28574e;
  --space-tint: #edf5f2;
  --space-surface: #f8fbfa;
  --shadow: none;
  --studio-accent: #28574e;
  --studio-accent-hover: #1d443d;
}
body[data-space="ai"] { --space-color: #315e7a; --space-tint: #e7f1f9; --space-surface: #f6f9fc; }
body[data-space="agents"] { --space-color: #32695b; --space-tint: #e5f3ec; --space-surface: #f5faf7; }
body[data-space="commerce"] { --space-color: #92583d; --space-tint: #faeade; --space-surface: #fdf9f6; }
body[data-space="company"] { --space-color: #655086; --space-tint: #eee9f7; --space-surface: #faf8fd; }
body[data-space="about"] { --space-color: #796432; --space-tint: #f6efdb; --space-surface: #fcfaf5; }
body:not(.youna-home) {
  background: #fff;
  color: var(--ink);
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wordmark {
  font-family: "Youna Rounded", "Arial Rounded MT Bold", sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.035em;
}
.wordmark small {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-style: normal;
  letter-spacing: 1px;
}
.home-minimal .hero-title {
  font-family: "Youna Rounded", "Arial Rounded MT Bold", sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.045em;
  text-shadow: 0 3px 28px #315a6d18;
}
.home-minimal .room-wordmark {
  font-family: "Youna Rounded", "Arial Rounded MT Bold", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}
.nav-bar {
  height: auto;
  min-height: 80px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.nav-bar .wordmark { flex-shrink: 0; }
.nav-bar > .row { min-width: 0; max-width: 40%; }
.nav-bar .btn.small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.nav-account { min-width: 0; max-width: 200px; }
.nav-account-name { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-bottom-nav .nav-account { max-width: 100%; }
.nav-links a { color: #606060; }
.nav-links a.active { color: #000; font-weight: 500; }
.nav-links a.active:after { height: 2px; background: var(--space-color); }
.btn {
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--space-tint);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color .18s, color .18s;
}
.btn:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--space-tint) 88%, var(--space-color));
}
.btn.primary,
.btn.accent { background: #000; border-color: #000; color: #fff; }
.btn.primary:hover,
.btn.accent:hover { background: #333; border-color: #333; }
.btn.subtle { background: transparent; border-color: transparent; color: #000; }
.btn.subtle:hover { background: #f2f2f2; }
.btn.small { min-height: 36px; padding: 7px 15px; font-size: 13px; }
.btn.icon { width: 40px; min-height: 40px; padding: 0; }
.btn.danger { color: #b42318; background: #fff; border-color: #e6e6e6; }
.btn.danger:hover { background: #fff1f0; }
.btn:disabled { opacity: .42; box-shadow: none; }
button:focus-visible, a:focus-visible { outline-color: var(--space-color); }
input:focus, textarea:focus, select:focus {
  border-color: var(--space-color);
  outline: 3px solid color-mix(in srgb, var(--space-color) 10%, transparent);
}
input, select, textarea { border-color: #dedede; background: #fff; border-radius: 14px; }
::placeholder { color: #8c8c8c; }
.home-minimal .hero-actions .btn { min-height: 44px; padding: 10px 20px; font-size: 13px; }
.home-minimal .hero-actions .primary { background: #000; color: #fff; }
.home-minimal .hero-actions .primary:hover { background: #333; }
.home-minimal .hero-actions .primary svg { color: #000; }
.home-minimal .hero-glass-link:after,
.home-minimal .glass-image-front:after,
.home-minimal .lobby:after { display: none; }
.home-minimal .hero-glass-link:before { animation: none; }
body:not(.youna-home) .page { padding-top: 64px; padding-bottom: 96px; }
body:not(.youna-home) .page-heading { margin-bottom: 44px; align-items: flex-start; }
body:not(.youna-home) .page-heading h1 {
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.05em;
}
body:not(.youna-home) .page-heading p { font-size: 16px; line-height: 1.65; color: #606060; }
body:not(.youna-home) :is(.eyebrow,.tiny,.muted,.field-hint,.side-caption,.side-group-title,.message-meta,.composer-status,.footer) { color: #666; }
body:not(.youna-home) .eyebrow { color: var(--space-color); font-weight: 500; letter-spacing: .12em; }
body:not(.youna-home) .panel {
  background: color-mix(in srgb, var(--space-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--space-color) 12%, #fff);
  border-radius: 24px;
  box-shadow: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body:not(.youna-home) .panel-title h2 { font-weight: 500; font-size: 22px; }
body:not(.youna-home) .panel p { color: #606060; font-size: 14px; }
/* Public information reads as one page, with no empty cards or decorative workflows. */
body:not(.youna-home) .about-editorial { max-width: 1080px; }
.about-editorial .page-heading { border-bottom: 1px solid var(--line); padding-bottom: 32px; }
.about-intro { max-width: 760px; margin: 64px 0 72px; }
.about-intro h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.35; margin-bottom: 24px; letter-spacing: -.04em; text-wrap: balance; }
.about-intro p { font-size: 18px; line-height: 1.85; max-width: 660px; white-space: pre-line; }
.about-opc { padding: 40px 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; border-top: 1px solid var(--line); }
.about-opc h2 { font-size: 28px; font-weight: 500; line-height: 1.3; }
.about-opc p { font-size: 16px; line-height: 1.9; max-width: 660px; white-space: pre-line; }
.about-opc p + p { margin-top: 16px; }
.about-opc .eyebrow { display: block; font-size: 12px; margin-bottom: 12px; }
.about-details, .about-cases { padding: 36px 0; border-top: 1px solid var(--line); }
.about-details h2, .about-cases h2 { font-size: 22px; font-weight: 500; margin-bottom: 24px; }
.about-details dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px 32px; font-size: 15px; }
.about-details dt { color: var(--muted); }
.about-details dd { margin: 0; overflow-wrap: anywhere; }
.about-details a { text-decoration: underline; text-underline-offset: 4px; }
.about-cases p { max-width: 760px; font-size: 16px; line-height: 1.9; white-space: pre-line; }
.about-cases p + p { margin-top: 16px; }
.ai-editorial { max-width: 1080px; }
.ai-entry { padding-bottom: 56px; }
.ai-entry .primary { background: #315e7a; border-color: #315e7a; }
.ai-entry .primary:hover { background: #264b62; border-color: #264b62; }
.editorial-links { border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.editorial-links a { display: flex; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.editorial-links a > svg { color: var(--space-color); flex-shrink: 0; }
.editorial-links h3 { font-size: 20px; font-weight: 500; }
.editorial-links p { margin: 5px 0 0; font-size: 14px; }
.editorial-links .arrow { margin-left: auto; color: var(--space-color); }
.editorial-links a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
body:not(.youna-home) .ai-hero { background: #e7f1f9; border-radius: 24px; padding: 44px; }
body:not(.youna-home) .ai-hero h2 { font-weight: 500; font-size: clamp(30px, 3.5vw, 44px); }
body:not(.youna-home) .ai-sketch { background: #ffffff8f; border-color: #cadde9; }
body:not(.youna-home) .sketch-node { box-shadow: none; border-color: #e6e6e6; }
body:not(.youna-home) .sketch-node.output { background: #d8e9f6a8; color: #315e7a; }
body:not(.youna-home) :is(.tool-link,.domain-card,.process article,.integration-card) {
  background: color-mix(in srgb, var(--space-surface) 85%, transparent);
  border-color: color-mix(in srgb, var(--space-color) 12%, #fff);
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body:not(.youna-home) .domain-card { border-radius: 24px; }
body:not(.youna-home) a.domain-card { background: color-mix(in srgb, var(--domain) 42%, #fff); }
body:not(.youna-home) a.domain-card:hover { transform: none; background: color-mix(in srgb, var(--domain) 72%, #fff); box-shadow: none; }
body:not(.youna-home) .domain-card .domain-art { background: var(--domain); border-radius: 50%; color: #2f504a; }
body:not(.youna-home) .domain-card span,
body:not(.youna-home) .tool-link svg,
body:not(.youna-home) .facts dd { color: var(--space-color); }
body:not(.youna-home) .process b,
body:not(.youna-home) .facts dt { color: #666; }
body:not(.youna-home) .side-panel { background: color-mix(in srgb, var(--space-surface) 82%, transparent); border-color: #eeeeee; box-shadow: none; }
body:not(.youna-home) .side-link { font-size: 13px; color: #505050; }
body:not(.youna-home) .side-link.active { background: var(--space-tint); color: var(--space-color); font-weight: 500; }
body:not(.youna-home) .side-link:hover { background: #ececec; }
body:not(.youna-home) .tabs { background: var(--space-tint); }
body:not(.youna-home) .tabs button { min-height: 40px; font-size: 13px; color: #555; }
body:not(.youna-home) .tabs button.active { background: #000; color: #fff; font-weight: 500; box-shadow: none; }
body:not(.youna-home) :is(.chat-welcome .welcome-icon,.message.user,.citation) { background: var(--space-tint); color: var(--space-color); }
body:not(.youna-home) .chat-composer textarea { background: #fff; color: var(--ink); }
body:not(.youna-home) :is(.starter-grid button,.upload-zone,.brief-item:hover) { background: #f8f8f8; border-color: #ddd; color: #555; }
body:not(.youna-home) .result-stage { background: var(--space-tint); border-color: color-mix(in srgb, var(--space-color) 14%, #fff); }
body:not(.youna-home) .result-stage svg { color: var(--space-color); }
body:not(.youna-home) .notice { background: var(--space-surface); border-color: #e6e6e6; color: #555; }
body:not(.youna-home) .notice.warning { background: #fffbf2; color: #796647; }
body:not(.youna-home) .metric { background: var(--space-surface); border-color: color-mix(in srgb, var(--space-color) 14%, #fff); }
body:not(.youna-home) .metric strong { color: var(--space-color); }
body:not(.youna-home) :is(.empty,.empty p,.loading,.brief-item small,.knowledge-item small) { color: #777; }
body:not(.youna-home) th { background: #f5f5f5; color: #666; font-weight: 500; }
body:not(.youna-home) tbody tr:hover { background: #fafafa; }
.auth-wall {
  border: 0;
  background: transparent;
  padding: 64px 24px;
  max-width: 680px;
  margin: 20px auto;
}
.auth-wall > svg { color: var(--space-color); }
.auth-wall h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 500; }
.auth-wall p { color: #666; font-size: 16px; line-height: 1.7; }
.auth-wall .row { justify-content: center; flex-wrap: wrap; }
dialog { background: #ffffffed; border: 1px solid #e6e6e6; color: #000; box-shadow: 0 24px 80px #00000012; }
dialog::backdrop { background: #00000025; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog-head { background: #ffffffed; border-color: #e6e6e6; }
.dialog-head h2 { font-weight: 500; }
#youna-toast { background: #000; }
.enterprise-account-panel .row { flex-wrap: wrap; }
.enterprise-account-panel .panel-title { align-items: flex-start; }
.enterprise-account-panel td:last-child { min-width: 240px; }
.enterprise-wall .eyebrow { margin-top: 24px; }
/* Let controls reflow at their available width. Tables scroll inside their
 * own frame; page content is never clipped to disguise overflow. */
.page :is(.grid2,.grid3,.grid4,.form-grid,.module-grid,.integrations-grid,.commerce-layout,.agent-layout,.workspace-layout) > * { min-width: 0; }
.page :is(.panel,.workspace-content,.stack,.side-panel) { min-width: 0; max-width: 100%; }
.page :is(.row,.panel-title,.management-header,.page-heading) { flex-wrap: wrap; }
.page :is(.row,.panel-title,.management-header,.page-heading) > * { min-width: 0; }
.page :is(p,.text-result,.side-link,.metric strong), dialog :is(p,h2,h3,label,.text-result) { overflow-wrap: anywhere; }
.page .btn, dialog .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.btn > svg { flex-shrink: 0; }
.management-header > div:first-child { flex: 1 1 260px; }
.management-header > .row { flex: 0 1 auto; gap: 8px; }
.filter-bar { flex-wrap: wrap; gap: 10px; min-width: 0; }
.filter-bar input { flex: 1 1 240px; width: auto; min-width: 0; max-width: 100%; }
.filter-bar select { flex: 0 1 160px; width: 160px; min-width: 0; max-width: 100%; }
.filter-bar #records-total { flex: 0 1 auto; overflow-wrap: anywhere; }
.filter-bar #refresh-records { margin-left: auto; }
.table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
#record-pagination { flex-wrap: wrap; gap: 12px; }
dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
dialog :is(.field,.dialog-body,.dialog-head h2) { min-width: 0; }
.dialog-head .btn.icon { flex-shrink: 0; }
.dialog-actions { flex-wrap: wrap; }
.chat-composer select { min-width: 0; max-width: 100%; }
.chat-composer .row { flex-wrap: wrap; }
body:not(.youna-home) .page .chat-panel { padding: 0; }
.chat-composer select { flex: 1 1 140px; }
.chat-header h2 { min-width: 0; overflow-wrap: anywhere; }
.chat-header > .row { flex-shrink: 0; }
.knowledge-item .grow, .brief-item .grow { min-width: 0; }
.knowledge-item strong, .brief-item strong { overflow-wrap: anywhere; }
#conversation-list .side-link { width: 100%; max-width: 100%; min-width: 0; }
#conversation-list .side-link > span { min-width: 0; flex: 1; }
#conversation-list .side-link > svg { flex-shrink: 0; }
.page .facts, dialog .facts { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
.page .facts dd, dialog .facts dd { min-width: 0; overflow-wrap: anywhere; }
.integration-card .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.order-row { flex-wrap: wrap; }
.order-row > div:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.order-row > .row { min-width: 0; flex-wrap: wrap; }
/* Existing studio controls share the clean button shape and blue-green accent without changing
 * canvas geometry, node editing, media previews or selection behavior. */
.studio-canvas-shell .cs-btn {
  border-radius: 999px;
  background: #edf5f2;
  border-color: #dedede;
  color: #000;
  box-shadow: none;
  font-weight: 500;
}
.studio-canvas-shell .cs-primary,
.studio-canvas-shell .node-run.cs-primary { background: #28574e !important; border-color: #28574e !important; color: #fff !important; }
.studio-canvas-shell .cs-primary:hover { background: #1d443d !important; }
.shell .btn.primary, .studio-login .btn.primary, .studio-landing .btn.primary {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: none;
}
@media (max-width: 850px) {
  body:not(.youna-home) .nav-bar { height: auto; min-height: 72px; }
  .nav-bar > .row { max-width: calc(100% - 110px); }
  body:not(.youna-home) .page { padding-top: 36px; padding-bottom: 60px; }
  body:not(.youna-home) .page-heading { margin-bottom: 32px; }
  body:not(.youna-home) .ai-hero { padding: 28px; }
  .about-opc { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .home-minimal .hero-title { letter-spacing: -.045em; }
  .home-minimal .hero-actions .btn { padding: 10px 17px; font-size: 12px; }
  body:not(.youna-home) .page-heading h1 { font-size: 36px; }
  body:not(.youna-home) .page-heading p { font-size: 14px; }
  body:not(.youna-home) .panel { padding: 22px; }
  .auth-wall { padding: 48px 12px; }
  .auth-wall h2 { font-size: 30px; }
  .auth-wall p { font-size: 14px; }
  .about-intro { margin: 36px 0 48px; }
  .about-intro p { font-size: 16px; }
  .about-opc { display: block; padding: 28px 0; }
  .about-opc h2 { margin-bottom: 18px; }
  .about-details dl { grid-template-columns: 86px minmax(0, 1fr); gap: 14px 20px; font-size: 14px; }
  .ai-entry { padding-bottom: 40px; }
  .editorial-links a { gap: 15px; padding: 22px 0; }
  .editorial-links h3 { font-size: 18px; }
  .management-header > div:first-child { flex-basis: auto; }
  .filter-bar input { flex-basis: 100%; }
  .filter-bar select { flex: 1 1 140px; }
  dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page .facts, dialog .facts { grid-template-columns: 90px minmax(0, 1fr); }
}

/* The enterprise area is a working canvas: one edge-to-edge navigation rail,
 * one content column, and business groups that disclose only when needed. */
body.company-workspace {
  --company-rail-width: 248px;
  --company-header-height: 72px;
  background: #fff;
}
body.company-workspace.company-nav-collapsed { --company-rail-width: 76px; }
body.company-workspace #portal > header.wrap {
  max-width: none;
  margin: 0;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 35;
  background: #ffffffed;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.company-workspace .nav-bar {
  height: var(--company-header-height);
  min-height: var(--company-header-height);
  gap: 24px;
  border-color: #eeeaf2;
}
body.company-workspace .nav-links { gap: 22px; }
body.company-workspace .nav-bar .wordmark { font-size: 26px; }
body.company-workspace .page {
  max-width: none;
  margin: 0 0 0 var(--company-rail-width);
  padding: 0;
  min-height: calc(100dvh - var(--company-header-height) - 120px);
  transition: margin-left .22s ease;
}
body.company-workspace #portal > footer.wrap {
  max-width: none;
  margin-left: var(--company-rail-width);
  padding: 0 40px;
  transition: margin-left .22s ease;
}
body.company-workspace #portal > footer .footer { padding: 26px 0; margin: 0; border-color: #eeeaf2; }
body.company-workspace .company-layout { display: block; }
body.company-workspace .company-layout > .workspace-content {
  width: 100%;
  min-width: 0;
  max-width: 1600px;
  padding: 0 40px 44px;
}
.company-sidebar {
  position: fixed;
  z-index: 30;
  inset: var(--company-header-height) auto 0 0;
  width: var(--company-rail-width);
  background: linear-gradient(160deg, #f5f2fae8, #fbfaffed 78%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-right: 1px solid #e8e3ef;
  padding: 18px 14px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width .22s ease;
}
.company-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 17px; gap: 10px; }
.company-sidebar-head > span { color: #6c6575; font-size: 12px; letter-spacing: .04em; }
.company-sidebar-head .btn.icon { width: 32px; min-height: 32px; border-radius: 10px; }
.company-sidebar #company-navigation { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; scrollbar-width: thin; }
.company-sidebar :is(.side-link, summary), .company-mobile-navigation :is(.side-link, summary) {
  min-height: 43px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 14px;
  color: #524c5a;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.company-sidebar .side-link:hover, .company-sidebar summary:hover,
.company-mobile-navigation .side-link:hover, .company-mobile-navigation summary:hover { background: #eae4f4; }
.company-sidebar .side-link.active, .company-mobile-navigation .side-link.active {
  background: #e8e0f4;
  color: #5f467e;
  font-weight: 600;
}
.company-nav-label { min-width: 0; overflow-wrap: anywhere; }
.company-sidebar .side-link > svg, .company-sidebar summary > svg { color: #81728e; }
.company-nav-groups { padding-top: 15px; margin-top: 12px; border-top: 1px solid #e8e3ef; }
.company-nav-group { margin: 0 0 5px; }
.company-nav-group summary { list-style: none; }
.company-nav-group summary::-webkit-details-marker, .company-module-group summary::-webkit-details-marker { display: none; }
.company-nav-chevron { margin-left: auto; display: inline-flex; color: #918697; transition: transform .18s ease; }
details[open] > summary .company-nav-chevron { transform: rotate(90deg); }
.company-nav-group[open] > summary { color: #5f467e; font-weight: 600; }
.company-nav-items { padding: 3px 0 5px 9px; }
.company-sidebar .company-nav-items .side-link, .company-mobile-navigation .company-nav-items .side-link {
  min-height: 39px;
  padding-left: 17px;
  font-size: 12px;
  gap: 14px;
}
.company-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: #c9bfd6; flex: none; }
.side-link.active .company-nav-dot { background: #70548f; }
.company-nav-bottom { border-top: 1px solid #e8e3ef; padding-top: 12px; margin-top: 16px; }
.company-sidebar-actions { border-top: 1px solid #e8e3ef; padding-top: 9px; margin-top: 12px; flex-shrink: 0; }
.company-sidebar-foot { border-top: 1px solid #e8e3ef; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 12px 4px; color: #918697; font-size: 11px; }
body.company-nav-collapsed .company-sidebar { padding-right: 10px; padding-left: 10px; }
body.company-nav-collapsed .company-sidebar-head { padding: 0 0 17px; justify-content: center; }
body.company-nav-collapsed .company-sidebar .company-nav-label,
body.company-nav-collapsed .company-sidebar .company-nav-chevron,
body.company-nav-collapsed .company-sidebar .company-nav-items { display: none; }
body.company-nav-collapsed .company-sidebar :is(.side-link, summary) { justify-content: center; padding: 10px; min-height: 45px; }
body.company-nav-collapsed .company-sidebar-foot { justify-content: center; padding-right: 0; padding-left: 0; }
.company-topbar { min-height: 104px; padding: 23px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid #eeeaf2; margin-bottom: 30px; }
.company-topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.company-topbar h1 { font-size: 23px; font-weight: 650; letter-spacing: -.045em; }
.company-topbar p { font-size: 12px; margin-top: 4px; color: #88808d; }
#company-nav-open { display: none; }
#workspace-switch { flex: 0 1 auto; background: #f2edf8; border-color: transparent; max-width: 45%; }
#workspace-switch > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.company-workspace #management-content > .panel { background: #fff; border-color: #eeeaf2; padding: 26px; border-radius: 24px; }
body.company-workspace .management-header { margin-bottom: 25px; align-items: center; }
body.company-workspace .management-header h2 { font-size: 27px; font-weight: 600; }
body.company-workspace .management-header .eyebrow { font-size: 10px; letter-spacing: .1em; color: #8b769f; }
body.company-workspace .management-header p { font-size: 13px; max-width: 720px; margin-top: 8px; color: #827a87; }
body.company-workspace .filter-bar { background: #faf8fc; border: 1px solid #f0edf4; border-radius: 19px; padding: 10px; gap: 10px; }
body.company-workspace .filter-bar input { max-width: none; min-height: 42px; border-color: #e6e0ec; font-size: 13px; flex: 1 1 260px; }
body.company-workspace .filter-bar select { border-color: #e6e0ec; min-height: 42px; font-size: 13px; }
body.company-workspace .filter-bar #records-total { white-space: nowrap; padding: 0 3px; font-size: 11px; }
body.company-workspace #records-table .empty { min-height: 300px; padding: 45px 20px; align-content: center; }
body.company-workspace #records-table .empty h3 { font-size: 16px; color: #554862; font-weight: 600; }
body.company-workspace #records-table .empty > svg { color: #b5a8c4; }
body.company-workspace .table-wrap { border-color: #ede8f2; border-radius: 17px; }
body.company-workspace .table-wrap table { min-width: 740px; }
body.company-workspace .table-wrap :is(th, td):first-child { min-width: 180px; }
body.company-workspace .table-wrap [data-record-view] {
  display: block;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.company-workspace th { background: #faf8fc; color: #8a7b98; }
body.company-workspace td { border-color: #f0edf4; }
.company-overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.company-overview-heading .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 9px; }
.company-overview-heading h2 { font-size: 29px; font-weight: 600; }
.company-metrics { margin-bottom: 27px; gap: 0; border: 1px solid #eeeaf2; border-radius: 22px; background: #faf8fd; overflow: hidden; }
body.company-workspace .company-metrics .metric { border: 0; border-right: 1px solid #eeeaf2; border-radius: 0; background: transparent; padding: 24px; min-width: 0; }
body.company-workspace .company-metrics .metric:last-child { border-right: 0; }
.company-metrics .metric strong { font-size: clamp(23px, 2.5vw, 32px); margin: 8px 0 3px; line-height: 1.25; }
.company-metrics .metric small { font-size: 12px; color: #72657f; }
.company-metrics .metric span { font-size: 11px; color: #9c919f; }
body.company-workspace .company-pending { margin-bottom: 27px; }
body.company-workspace .company-pending .panel-title { margin-bottom: 20px; }
body.company-workspace :is(.company-pending,.company-module-browser) .panel-title h2 { font-size: 18px; font-weight: 600; }
.company-pending-empty { padding: 10px 2px 6px; display: flex; gap: 15px; align-items: center; }
.company-pending-empty > svg { color: #9f8eb2; }
.company-pending-empty strong { font-size: 14px; font-weight: 500; }
body.company-workspace .company-pending-empty p { font-size: 12px; margin-top: 5px; color: #998f9f; }
.company-module-browser .panel-title { margin-bottom: 15px; }
.company-module-group { border-top: 1px solid #eeeaf2; }
.company-module-group summary { padding: 18px 4px; list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 14px; font-weight: 600; border-radius: 12px; }
.company-module-group summary > svg { color: #897398; }
.company-module-group summary small { margin-left: auto; font-size: 11px; font-weight: 400; color: #a298a9; }
.company-module-group summary .company-nav-chevron { margin-left: 8px; }
.company-module-group summary:hover { color: #655086; }
.company-module-list { padding: 0 6px 14px 32px; }
.company-module-row { padding: 13px 12px; border-radius: 15px; display: flex; align-items: center; gap: 18px; }
.company-module-row:hover { background: #f5f1fa; }
.company-module-row > div { min-width: 0; flex: 1; }
.company-module-row strong { font-size: 13px; font-weight: 500; }
body.company-workspace .company-module-row p { font-size: 12px; color: #928699; margin-top: 4px; overflow-wrap: anywhere; }
.company-module-count { font-size: 11px; color: #a194ac; white-space: nowrap; }
.company-module-row > svg { color: #ab9aba; }
.company-data-note { padding: 20px 2px 0; font-size: 11px; color: #9b919f; }
dialog.company-navigation-dialog { width: min(460px, calc(100vw - 32px)); }
.company-mobile-navigation { padding: 2px 0; }
.company-mobile-navigation .company-nav-items { padding-bottom: 8px; }

@media (max-width: 1100px) and (min-width: 761px) {
  body.company-workspace { --company-rail-width: 222px; }
  body.company-workspace.company-nav-collapsed { --company-rail-width: 76px; }
  body.company-workspace .company-layout > .workspace-content { padding-right: 26px; padding-left: 26px; }
  body.company-workspace #portal > footer.wrap { padding-right: 26px; padding-left: 26px; }
  body.company-workspace .company-metrics .metric { padding: 20px 16px; }
}
@media (max-width: 760px) {
  body.company-workspace, body.company-workspace.company-nav-collapsed { --company-rail-width: 0px; --company-header-height: 64px; }
  body.company-workspace #portal > header.wrap { padding-right: 18px; padding-left: 18px; }
  body.company-workspace .nav-bar { gap: 12px; }
  body.company-workspace .company-sidebar { display: none; }
  body.company-workspace .company-layout > .workspace-content { padding: 0 18px 28px; }
  body.company-workspace #portal > footer.wrap { padding-right: 18px; padding-left: 18px; }
  body.company-workspace .company-topbar { min-height: 90px; padding: 20px 0; margin-bottom: 22px; gap: 12px; }
  .company-topbar h1 { font-size: 19px; }
  .company-topbar p { font-size: 11px; }
  .company-topbar-title { gap: 8px; }
  #company-nav-open { display: inline-flex; width: 34px; min-height: 38px; }
  #workspace-switch { padding: 8px 11px; min-height: 37px; font-size: 11px; max-width: 42%; gap: 7px; }
  #workspace-switch > svg:last-child { display: none; }
  body.company-workspace #management-content > .panel { padding: 22px; border-radius: 22px; }
  body.company-workspace .management-header { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 20px; }
  body.company-workspace .management-header h2 { font-size: 25px; }
  body.company-workspace .management-header > .row { justify-content: flex-start; }
  body.company-workspace .filter-bar { padding: 9px; }
  body.company-workspace .filter-bar input { flex-basis: 100%; }
  body.company-workspace .filter-bar select { flex: 1 1 120px; width: auto; }
  body.company-workspace .filter-bar #refresh-records { padding: 7px 12px; min-height: 36px; }
  body.company-workspace #records-table .empty { min-height: 260px; padding: 35px 2px; }
  body.company-workspace #record-pagination { font-size: 11px; gap: 10px; }
  body.company-workspace #record-pagination > .row { gap: 7px; }
  body.company-workspace #record-pagination .btn { min-height: 34px; padding: 6px 12px; font-size: 11px; }
  .company-overview-heading h2 { font-size: 26px; }
  .company-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.company-workspace .company-metrics .metric { padding: 20px; border-bottom: 1px solid #eeeaf2; }
  body.company-workspace .company-metrics .metric:nth-child(2) { border-right: 0; }
  body.company-workspace .company-metrics .metric:nth-child(n + 3) { border-bottom: 0; }
  .company-module-list { padding-left: 0; }
  .company-module-row { padding: 12px 4px; gap: 10px; }
}
@media (max-width: 390px) {
  body.company-workspace .company-topbar-title { gap: 4px; }
  .company-topbar h1 { font-size: 17px; }
  body.company-workspace #management-content > .panel { padding: 18px; }
  body.company-workspace .filter-bar #records-total { flex-basis: auto; font-size: 10px; }
  .company-module-group summary { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.company-workspace :is(.page, #portal > footer.wrap, .company-sidebar, .company-nav-chevron) { transition: none; }
}

.login-registration { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.login-registration a { color: #655086; display: inline-flex; align-items: center; gap: 8px; }
.login-registration a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Project progress keeps the schedule, reports and editing in one workspace. */
body.company-workspace .company-progress-summary { margin-bottom: 27px; }
body.company-workspace .company-progress-summary h2 { font-size: 18px; font-weight: 600; }
.company-progress-summary .panel-title { align-items: center; gap: 16px; margin-bottom: 14px; }
.company-progress-summary .panel-title > div:first-child { min-width: 0; }
.project-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #8e8597; }
.project-sync::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8db6a4; }
.project-sync.is-delayed::before { background: #d8a06f; }
.project-summary-list { margin: 2px 0 18px; }
.project-summary-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 220px) auto; align-items: center; gap: 24px; padding: 15px 2px; border-bottom: 1px solid #f0edf4; }
.project-summary-row > a { min-width: 0; }
.project-summary-row strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.project-summary-row small { display: block; font-size: 11px; color: #a094aa; margin-top: 4px; }
.project-summary-percent { display: flex; align-items: center; gap: 14px; min-width: 0; }
.project-summary-percent > span { color: #7a6594; font-size: 12px; min-width: 37px; text-align: right; }
.project-progress-track { flex: 1; height: 5px; border-radius: 99px; overflow: hidden; background: #eeE8f6; min-width: 30px; }
.project-progress-track > span { display: block; height: 100%; background: #a289bc; border-radius: inherit; }
.progress-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.progress-toolbar .tabs { margin: 0; padding: 3px; border-radius: 99px; flex: none; background: #f3eef9; gap: 2px; }
.progress-toolbar .tabs button { min-height: 34px; padding: 7px 14px; font-size: 12px; border-radius: 99px; }
.progress-toolbar select { width: auto; min-width: 0; flex: 1 1 180px; max-width: 300px; min-height: 40px; font-size: 12px; border-color: #e9e1ef; }
.progress-archived-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 400; color: #91849e; white-space: nowrap; }
.progress-archived-toggle input { width: 15px; height: 15px; min-height: 15px; accent-color: #806494; padding: 0; }
.progress-toolbar #progress-refresh { margin-left: auto; }
.progress-sync-line { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin: 20px 0 17px; min-width: 0; flex-wrap: wrap; }
.progress-sync-line .tiny { font-size: 11px; color: #a093aa; }
.gantt-scroll { overflow: auto; max-width: 100%; min-width: 0; max-height: 580px; border: 1px solid #ece6f2; border-radius: 17px; scrollbar-width: thin; }
.gantt-chart { min-width: 750px; background: #fff; }
.gantt-header, .gantt-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 58px; }
.gantt-header { position: sticky; top: 0; z-index: 4; min-height: 42px; border-bottom: 1px solid #ece6f2; background: #faf8fc; font-size: 10px; color: #9785a5; }
.gantt-header > span { display: flex; align-items: center; padding: 12px 16px; position: sticky; left: 0; background: #faf8fc; z-index: 4; }
.gantt-ticks { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; min-width: 0; }
.gantt-row { border-bottom: 1px solid #f1edf5; }
.gantt-row:last-child { border-bottom: 0; }
.gantt-name { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; padding: 10px 16px 10px 27px; min-width: 0; border-right: 1px solid #eee8f4; border-radius: 0; line-height: 1.4; }
.gantt-name strong { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-name small { display: block; font-size: 10px; color: #ab9db4; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-name:hover { background: #f8f4fc; }
.gantt-timeline { position: relative; background-image: linear-gradient(to right, #eee8f280 1px, transparent 1px); background-size: 25% 100%; min-width: 0; margin: 0 10px; }
.gantt-project-row { background: #fcfafE; }
.gantt-project-row .gantt-name { background: #fcfafe; padding-left: 16px; }
.gantt-project-row .gantt-name strong { font-weight: 650; }
.gantt-bar { position: absolute; top: 18px; height: 23px; border-radius: 8px; background: #e7ddef; overflow: hidden; color: #69527e; min-width: 8px; padding: 0; }
.gantt-bar-fill { position: absolute; inset: 0 auto 0 0; background: #bea5d1; border-radius: 7px; }
.gantt-project-bar { top: 22px; height: 15px; border-radius: 5px; background: #e3dfeb; color: #5e526f; }
.gantt-project-bar .gantt-bar-fill { background: #9885b1; border-radius: 4px; }
.gantt-bar-label { position: relative; z-index: 1; display: block; font-size: 10px; line-height: 23px; text-align: center; white-space: nowrap; }
.gantt-project-bar .gantt-bar-label { line-height: 15px; font-size: 9px; }
.gantt-bar.is-late { background: #f3e1ce; color: #926137; }
.gantt-bar.is-late .gantt-bar-fill { background: #dfb88e; }
.gantt-bar.is-blocked { background: #f2dcdE; color: #934e5b; }
.gantt-bar.is-blocked .gantt-bar-fill { background: #d5a2ac; }
.gantt-today { position: absolute; inset: 0 auto 0 0; border-left: 1px dashed #a7bdb4; pointer-events: none; }
.gantt-unscheduled { display: inline-flex; align-items: center; height: 58px; font-size: 10px; color: #b1a4bb; padding-left: 10px; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 17px 0 0; font-size: 10px; color: #9c8dab; }
.gantt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend i { width: 7px; height: 7px; border-radius: 2px; background: #bea5d1; }
.gantt-legend i.late { background: #dfb88e; }
.gantt-legend i.blocked { background: #d5a2ac; }
.progress-empty { display: grid; justify-items: center; text-align: center; align-content: center; min-height: 230px; gap: 13px; padding: 30px; color: #b5a8c4; }
.progress-empty h3 { font-size: 16px; color: #715982; font-weight: 500; }
body.company-workspace .progress-empty p { max-width: 370px; font-size: 13px; color: #a493af; }
body.company-workspace .progress-report-panel { margin-top: 25px; }
body.company-workspace .progress-report-panel .panel-title h2 { font-size: 18px; font-weight: 600; }
.project-report-list { display: grid; gap: 0; }
.project-report { display: flex; gap: 16px; padding: 16px 2px; border-bottom: 1px solid #f1edf5; }
.project-report:last-child { border-bottom: 0; padding-bottom: 0; }
.project-report:first-child { padding-top: 7px; }
.project-report .grow { min-width: 0; }
.project-report-dot { width: 6px; height: 6px; background: #c0acd3; border-radius: 50%; flex: none; margin-top: 7px; }
.project-report .row { gap: 12px; align-items: start; flex-wrap: wrap; }
.project-report strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.project-report strong small { font-size: 10px; font-weight: 400; color: #b29cbe; margin-left: 10px; }
.project-report-percent { font-size: 11px; color: #866e9b; }
body.company-workspace .project-report p, dialog .project-report p { font-size: 12px; line-height: 1.8; color: #867590; margin: 7px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
body.company-workspace .project-report .project-report-blocker, dialog .project-report .project-report-blocker { display: flex; gap: 6px; align-items: start; color: #b16e69; }
.project-report-blocker > svg { margin-top: 4px; }
.project-report-meta { font-size: 10px; color: #b1a1ba; margin-top: 8px; }
.project-report-empty { padding: 18px 2px 8px; color: #a292ad; font-size: 12px; }
.progress-project-section + .progress-project-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee8f4; }
.progress-project-title { display: flex; align-items: start; justify-content: space-between; gap: 22px; margin-bottom: 17px; }
.progress-project-title > button { min-width: 0; background: none; text-align: left; padding: 0; }
.progress-project-title strong { display: block; font-size: 16px; font-weight: 600; }
.progress-project-title > button > span { display: block; font-size: 11px; color: #a291ad; margin-top: 5px; }
.progress-project-stats { min-width: 150px; display: grid; grid-template-columns: auto auto; gap: 9px 15px; align-items: center; }
.progress-project-stats > strong { font-size: 14px; color: #806494; text-align: right; }
.progress-project-stats .project-progress-track { grid-column: 1 / -1; }
.progress-project-stats .pill { font-size: 10px; }
body.company-workspace .progress-project-no-tasks { font-size: 12px; color: #a595af; padding: 10px 2px; }
.progress-blocker-label { display: block; margin-top: 7px; font-size: 10px; color: #b47b73; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#progress-history-pagination { margin-top: 22px; gap: 15px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .company-progress-summary .panel-title { align-items: start; }
  .company-progress-summary .panel-title > .row { gap: 7px; flex-wrap: wrap; }
  .company-progress-summary .panel-title .btn { min-height: 34px; padding: 7px 11px; font-size: 10px; }
  .project-summary-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 15px; }
  .project-summary-percent { grid-column: 1; grid-row: 2; max-width: 230px; }
  .project-summary-row > .btn { grid-column: 2; grid-row: 1 / 3; font-size: 11px; }
  #progress-actions { gap: 7px; flex-wrap: wrap; }
  #progress-actions .btn { font-size: 11px; padding: 8px 12px; }
  .progress-toolbar { gap: 10px; }
  .progress-toolbar .tabs { flex: 1 0 auto; }
  .progress-toolbar select { flex-basis: 100%; max-width: none; order: 3; }
  .progress-toolbar #progress-refresh { order: 2; margin-left: 0; }
  .progress-archived-toggle { font-size: 11px; }
  .progress-sync-line { gap: 8px; }
  .project-sync { font-size: 10px; }
  .progress-sync-line .tiny { font-size: 10px; }
  .gantt-legend { gap: 11px; font-size: 9px; }
  .gantt-chart { min-width: 700px; }
  .gantt-header, .gantt-row { grid-template-columns: 150px minmax(0, 1fr); }
  .gantt-name { padding-left: 20px; padding-right: 10px; }
  .gantt-name strong { font-size: 11px; }
  .progress-project-title { flex-wrap: wrap; gap: 14px; }
  .progress-project-stats { min-width: 135px; }
  .project-report { gap: 11px; }
  .project-report strong { font-size: 12px; }
  .progress-empty { padding: 25px 4px; }
}
/* Close controls share one borderless hit area on every portal page. */
body :is(#youna-dialog,#modal,#mw-sheet) :is(.dialog-head,.modal-head,.mw-sheet-head) :is(.btn.icon,[data-close],[data-mw-close]) {
  position:relative;width:44px;height:44px;min-height:44px;padding:0;
  border:0;border-radius:12px;background:transparent;background-image:none;
  box-shadow:none;outline:0;outline-offset:0;filter:none;appearance:none;-webkit-appearance:none;
  transform:none;translate:none;
}
body :is(#youna-dialog,#modal,#mw-sheet) :is(.dialog-head,.modal-head,.mw-sheet-head) :is(.btn.icon,[data-close],[data-mw-close]):is(:hover,:active,:focus,:focus-visible) {
  border:0;box-shadow:none;outline:0;outline-offset:0;background:#00000005;
}
body :is(#youna-dialog,#modal,#mw-sheet) :is(.dialog-head,.modal-head,.mw-sheet-head) :is(.btn.icon,[data-close],[data-mw-close])::before {content:none}
body :is(#youna-dialog,#modal,#mw-sheet) :is(.dialog-head,.modal-head,.mw-sheet-head) :is(.btn.icon,[data-close],[data-mw-close]):focus-visible::after {
  content:"";position:absolute;bottom:6px;left:13px;right:13px;height:2px;border:0;
  border-radius:2px;background:currentColor;opacity:.55;
}
.home-minimal .hero-destinations--single {
  justify-content: center;
}
.home-minimal .hero-destinations--single .hero-glass-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 0 1 218px;
  width: 218px;
  height: 72px;
  padding: 13px 17px 13px 13px;
  max-width: 100%;
  border: 1px solid #ffffff66;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff73, #ffffff38);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  box-shadow: inset 0 1px 0 #ffffffad, 0 6px 20px #31566a0a;
}
.home-minimal .hero-destinations--single .glass-orb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}
.home-minimal .hero-destinations--single .glass-orb::after {
  inset: 6px -1px 7px;
  border-width: 3.5px;
}
.home-minimal .hero-destinations--single .glass-link-text {
  position: static;
  inset: auto;
  flex: 1;
  min-width: 0;
}
.home-minimal .hero-destinations--single .glass-link-text strong {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
}
.home-minimal .hero-destinations--single .glass-link-arrow {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  flex: 0 0 16px;
  opacity: .65;
}
.home-minimal .hero-destinations--single .hero-glass-link:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #ffffff8a, #ffffff4a);
  box-shadow: inset 0 1px 0 #ffffffc2, 0 8px 22px #31566a14;
}
.home-minimal .hero-destinations--single .hero-glass-link:hover .glass-link-arrow {
  transform: translateX(3px);
  opacity: 1;
}
@media (max-width: 600px) {
  .home-minimal .hero-destinations--single .hero-glass-link {
    flex-basis: 208px;
    width: 208px;
    height: 68px;
    padding: 11px 16px 11px 12px;
  }
  .home-minimal .hero-destinations--single .glass-link-arrow svg {
    width: 16px;
    height: 16px;
  }
}