:root {
  --ink: #142137;
  --ink-soft: #536078;
  --ink-faint: #7a8496;
  --line: rgba(20, 33, 55, 0.11);
  --line-strong: rgba(20, 33, 55, 0.2);
  --action: #0b7379;
  --action-hover: #075d63;
  --accent: #08747c;
  --focus: #006ec8;
  --danger: #a63f50;
  --font-user: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-user);
  --motion: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 24px 70px rgba(29, 56, 71, 0.1);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #edf2f1;
  font-family: var(--font-user);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-font="sf"] { --font-user: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
body[data-font="inter"] { --font-user: "Inter", "Segoe UI", Arial, sans-serif; }
body[data-font="montserrat"] { --font-user: "Montserrat", "Avenir Next", Arial, sans-serif; }
body[data-font="ubuntu"] { --font-user: "Ubuntu", "Segoe UI", Arial, sans-serif; }
body[data-font="open-sans"] { --font-user: "Open Sans", "Segoe UI", Arial, sans-serif; }
body[data-font="arial"] { --font-user: Arial, Helvetica, sans-serif; }
body[data-font="verdana"] { --font-user: Verdana, Geneva, sans-serif; }
body[data-font="trebuchet"] { --font-user: "Trebuchet MS", Arial, sans-serif; }
body[data-font="tahoma"] { --font-user: Tahoma, Verdana, sans-serif; }
body[data-font="aptos"] { --font-user: Aptos, Calibri, "Segoe UI", sans-serif; }
body[data-font="times"] { --font-user: "Times New Roman", Times, serif; }
body[data-font="georgia"] { --font-user: Georgia, "Times New Roman", serif; }
body[data-font="garamond"] { --font-user: Garamond, "Times New Roman", serif; }
body[data-font="palatino"] { --font-user: Palatino, "Palatino Linotype", Georgia, serif; }
body[data-font="mono"] { --font-user: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; }

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.04;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; outline-offset: 4px; }
a { color: inherit; }

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 78%, white);
}

[hidden] { display: none !important; }
.symbol-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 60;
  padding: 11px 17px;
  color: white;
  background: var(--ink);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 280ms var(--motion);
}
.skip-link:focus { transform: translateY(0); }

.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background-color: #edf4f2;
  background-position: center;
  background-size: cover;
  transition: background 720ms var(--motion);
}

.wallpaper::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(250, 252, 251, 0.54));
  content: "";
}

body[data-wallpaper="mist"] .wallpaper {
  background:
    radial-gradient(circle at 4% 5%, rgba(65, 190, 184, 0.38), transparent 31%),
    radial-gradient(circle at 95% 12%, rgba(245, 171, 92, 0.34), transparent 27%),
    radial-gradient(circle at 62% 92%, rgba(116, 146, 198, 0.2), transparent 32%),
    #eef5f2;
}

body[data-wallpaper="tide"] .wallpaper {
  background:
    radial-gradient(circle at 8% 6%, rgba(30, 151, 196, 0.4), transparent 31%),
    radial-gradient(circle at 84% 92%, rgba(43, 186, 163, 0.3), transparent 34%),
    #ebf5f8;
}

body[data-wallpaper="grove"] .wallpaper {
  background:
    radial-gradient(circle at 7% 8%, rgba(88, 170, 102, 0.36), transparent 31%),
    radial-gradient(circle at 91% 76%, rgba(239, 183, 63, 0.3), transparent 33%),
    #f1f6ec;
}

body[data-wallpaper="dawn"] .wallpaper {
  background:
    radial-gradient(circle at 10% 8%, rgba(244, 139, 84, 0.4), transparent 31%),
    radial-gradient(circle at 88% 77%, rgba(206, 90, 126, 0.24), transparent 34%),
    #faf0ea;
}

.wallpaper > img { display: none; width: 100%; height: 100%; object-fit: cover; }
body[data-wallpaper="custom"] .wallpaper > img { display: block; filter: brightness(0.91) saturate(0.8) contrast(0.94); }
body[data-wallpaper="custom"] .wallpaper::before { z-index: 1; background: rgba(248, 251, 250, 0.35); }
body[data-wallpaper="custom"] .wallpaper span { display: none; }

.wallpaper span {
  position: absolute;
  display: block;
  border: 1px solid rgba(36, 65, 82, 0.045);
  background: rgba(255, 255, 255, 0.12);
  clip-path: polygon(52% 0, 100% 100%, 0 78%);
}
.wallpaper span:nth-of-type(1) { width: 46vw; height: 39vw; top: -21vw; left: 36vw; transform: rotate(12deg); }
.wallpaper span:nth-of-type(2) { width: 44vw; height: 40vw; right: -14vw; bottom: -15vw; transform: rotate(-17deg); }
.wallpaper span:nth-of-type(3) { width: 29vw; height: 27vw; left: -12vw; bottom: 7vh; transform: rotate(31deg); }

.workspace-os { min-height: 100vh; min-height: 100dvh; }

.status-bar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  width: min(calc(100% - 28px), 1540px);
  min-height: 70px;
  padding: 8px 10px 8px 16px;
  margin: 14px auto 0;
  background: rgba(252, 253, 251, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 24px;
  box-shadow: 0 14px 46px rgba(35, 66, 78, 0.1), inset 0 0 0 1px rgba(20, 33, 55, 0.07);
  backdrop-filter: blur(24px) saturate(145%);
}

.os-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  gap: 11px;
  text-decoration: none;
}
.os-brand img {
  width: 44px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(23, 124, 135, 0.17));
  transition: transform 420ms var(--motion);
}
.os-brand:hover img { transform: translateY(-2px) rotate(-2deg); }
.os-brand span, .account-summary > span:last-child { display: grid; min-width: 0; }
.os-brand strong { font-size: 1rem; font-weight: 760; letter-spacing: -0.035em; }
.os-brand small, .account-summary small { overflow: hidden; color: var(--ink-faint); font-size: 0.67rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.clock { position: relative; display: grid; justify-items: center; padding-inline: 26px; color: var(--ink-faint); font-size: 0.62rem; line-height: 1.25; }
.clock-status { position: absolute; top: 7px; left: 7px; width: 6px; height: 6px; background: #35a275; border-radius: 50%; box-shadow: 0 0 0 5px rgba(53, 162, 117, 0.11); }
.clock time { color: var(--ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 730; letter-spacing: -0.035em; }

.status-actions { display: flex; align-items: center; justify-self: end; gap: 7px; }
.status-button, .text-button, .done-button, .primary-button, .close-button, .pin-button, .remove-app, .os-dock button { border: 0; cursor: pointer; }
.status-button {
  min-height: 46px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 15px;
  font-size: 0.73rem;
  font-weight: 720;
  transition: background-color 260ms var(--motion), border-color 260ms var(--motion), transform 260ms var(--motion);
}
.status-button:hover { background: white; border-color: var(--line-strong); transform: translateY(-1px); }
.status-button:active { transform: scale(0.97); }
.status-button:disabled, .os-dock button:disabled { cursor: default; opacity: 0.42; transform: none; }
.command-button { display: grid; grid-template-columns: auto auto auto; align-items: center; min-width: 168px; color: var(--ink-soft); gap: 8px; }
.command-button svg { width: 17px; height: 17px; }
.command-button kbd, .hero-command kbd { display: grid; place-items: center; min-width: 24px; height: 24px; color: var(--ink-faint); background: #edf1f0; border: 1px solid rgba(20, 33, 55, 0.08); border-radius: 8px; font: 650 0.68rem/1 var(--font-user); }
.edit-toggle[aria-pressed="true"] { color: white; background: var(--ink); border-color: var(--ink); }

.account-summary { display: flex; align-items: center; min-width: 0; margin-left: 5px; gap: 9px; }
.account-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; color: white; background: var(--ink); border-radius: 14px 14px 14px 5px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; }
.account-summary strong { max-width: 138px; overflow: hidden; font-size: 0.75rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.home-screen { width: min(100%, 1450px); min-height: calc(100dvh - 84px); margin: 0 auto; padding: clamp(42px, 6vh, 76px) clamp(24px, 5vw, 72px) 156px; }
.home-meta { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); align-items: end; max-width: 1290px; min-height: 250px; margin: 0 auto clamp(58px, 8vh, 96px); gap: clamp(34px, 8vw, 120px); }
.home-meta::before { position: absolute; top: -40px; right: 31%; width: 124px; height: 124px; border: 1px solid rgba(20, 33, 55, 0.07); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 22px rgba(255, 255, 255, 0.12); }
.hero-copy { position: relative; z-index: 1; }
.greeting, .section-kicker { margin: 0 0 8px; color: var(--accent); font-size: 0.64rem; font-weight: 820; letter-spacing: 0.17em; text-transform: uppercase; }
.home-meta h1 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: clamp(3.6rem, 6.7vw, 6.8rem); font-weight: 650; letter-spacing: -0.072em; line-height: 0.83; text-wrap: balance; }
.home-meta h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.workspace-context { margin: 20px 0 0; color: var(--ink-soft); font-size: 0.79rem; font-weight: 560; }

.hero-console { position: relative; z-index: 1; display: grid; align-self: end; padding: 9px; background: rgba(252, 253, 251, 0.52); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px 26px 26px 8px; box-shadow: inset 0 0 0 1px rgba(20, 33, 55, 0.08), 0 25px 70px rgba(34, 65, 78, 0.08); }
.network-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 48px; padding: 0 11px; color: var(--ink-soft); gap: 10px; font-size: 0.68rem; }
.network-line strong { color: #247d60; font-size: 0.64rem; }
.network-pulse { width: 7px; height: 7px; background: #35a275; border-radius: 50%; box-shadow: 0 0 0 5px rgba(53, 162, 117, 0.12); }
.catalogue-message { min-height: 1.45em; margin: 5px 12px 12px; color: var(--ink-soft); font-size: 0.71rem; font-variant-numeric: tabular-nums; }
.hero-command { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 54px; padding: 0 10px 0 16px; color: var(--ink-soft); background: white; border: 0; border-radius: 18px 18px 18px 5px; box-shadow: 0 9px 28px rgba(24, 48, 64, 0.07); cursor: pointer; gap: 10px; font-size: 0.72rem; text-align: left; transition: transform 300ms var(--motion), box-shadow 300ms var(--motion); }
.hero-command:hover:not(:disabled) { box-shadow: 0 13px 36px rgba(24, 48, 64, 0.11); transform: translateY(-2px); }
.hero-command:disabled { cursor: default; opacity: 0.45; }

.edit-banner { display: flex; align-items: center; justify-content: space-between; max-width: 1290px; margin: -52px auto 42px; padding: 12px 12px 12px 20px; color: #123b42; background: rgba(221, 242, 239, 0.9); border: 1px solid rgba(78, 149, 147, 0.2); border-radius: 22px 22px 22px 7px; gap: 22px; }
.edit-banner p { margin: 0; font-size: 0.74rem; }
.edit-banner > div { display: flex; flex: 0 0 auto; gap: 6px; }

.text-button, .done-button, .primary-button { min-height: 42px; padding: 0 17px; border-radius: 999px; font-size: 0.72rem; font-weight: 740; transition: background-color 260ms var(--motion), color 260ms var(--motion), transform 260ms var(--motion); }
.text-button { color: inherit; background: transparent; }
.text-button:hover { background: rgba(14, 77, 83, 0.08); }
.done-button, .primary-button { color: white; background: var(--ink); text-decoration: none; }
.done-button:hover, .primary-button:hover { background: #243149; }
.done-button:active, .primary-button:active, .text-button:active { transform: scale(0.96); }

.home-canvas { min-height: 480px; }
.products-section, .shortcuts-section, .operational-section, .attention-section, .recent-section, .activity-layout { max-width: 1290px; margin-inline: auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; gap: 30px; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading h2 { max-width: 22ch; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 2.15rem); font-weight: 670; letter-spacing: -0.052em; line-height: 1.05; text-wrap: balance; }
.section-heading > p, .empty-home p { max-width: 44ch; color: var(--ink-soft); font-size: 0.72rem; text-align: right; }
.section-kicker { margin-bottom: 5px !important; font-size: 0.58rem; }

.product-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; padding: 0; margin: 0; gap: 20px; list-style: none; }
.product-tile { --tone: #117b7e; --tone-deep: #0a6268; --tone-wash: #d9efec; --tone-surface: #eef8f5; position: relative; grid-column: span 7; min-width: 0; overflow: hidden; color: #10343a; background: var(--tone-wash); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 36px 36px 36px 10px; box-shadow: 0 32px 80px color-mix(in srgb, var(--tone) 15%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tone) 16%, white); isolation: isolate; }
.product-tile:nth-child(2) { grid-column: span 5; --tone: #b95436; --tone-deep: #994029; --tone-wash: #f5dfd6; --tone-surface: #fbf1ec; }
.product-tile::before { position: absolute; z-index: -1; top: -148px; right: -90px; width: 370px; height: 370px; background: var(--tone-surface); border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 50%; content: ""; transition: transform 760ms var(--motion); }
.product-tile::after { position: absolute; z-index: -1; right: 28px; bottom: 25px; width: 72px; height: 72px; border: 1px solid color-mix(in srgb, var(--tone) 18%, white); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.12); }
.product-tile:hover::before { transform: translate(-14px, 16px) scale(1.04); }

.product-launch { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(64px, 1fr) auto; grid-template-areas: "mark copy copy" "signals signals signals" "recent recent open"; align-items: start; min-height: 420px; padding: clamp(28px, 3vw, 42px) clamp(26px, 3.2vw, 44px) 82px; gap: 24px 24px; text-decoration: none; will-change: transform; }
.product-tile:not(:has(.product-signal-list)) .product-launch { min-height: 350px; grid-template-rows: auto minmax(20px, 1fr) auto; }
.product-mark { position: relative; grid-area: mark; display: grid; place-items: center; width: 86px; height: 86px; color: white; background: var(--tone); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 27px 27px 27px 9px; box-shadow: 0 20px 42px color-mix(in srgb, var(--tone) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.23); will-change: transform; }
.product-mark svg { width: 36px; height: 36px; }
.product-code { position: absolute; right: 8px; bottom: 7px; padding: 2px 5px; color: white; background: rgba(11, 31, 42, 0.26); border-radius: 6px; font-size: 0.46rem; font-weight: 820; letter-spacing: 0.05em; }
.product-copy { grid-area: copy; display: grid; min-width: 0; padding-top: 2px; }
.product-copy > small:first-child { color: var(--tone-deep); font-size: 0.58rem; font-weight: 820; letter-spacing: 0.17em; text-transform: uppercase; }
.product-copy > strong { max-width: 14ch; margin: 7px 0 9px; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 650; letter-spacing: -0.065em; line-height: 0.92; text-wrap: balance; }
.product-description { max-width: 39ch; color: color-mix(in srgb, var(--ink-soft) 88%, var(--tone)); font-size: 0.77rem; line-height: 1.55; }
.product-availability { display: inline-flex; align-items: center; width: max-content; margin-top: 14px; color: var(--tone-deep); font-size: 0.58rem; font-weight: 730; }
.product-availability::before { width: 6px; height: 6px; margin-right: 7px; background: #329d72; border-radius: 50%; box-shadow: 0 0 0 4px rgba(50, 157, 114, 0.12); content: ""; }

.product-signal-list { grid-area: signals; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 0 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--tone) 18%, white); gap: 10px 30px; list-style: none; }
.product-signal-list li { display: flex; align-items: baseline; min-width: 0; gap: 8px; }
.product-signal-list strong { color: var(--tone-deep); font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; }
.product-signal-list span { color: var(--ink-soft); font-size: 0.66rem; }
.product-recent { grid-area: recent; display: grid; min-width: 0; align-self: end; }
.product-recent small { color: var(--tone-deep); font-size: 0.53rem; font-weight: 820; letter-spacing: 0.13em; text-transform: uppercase; }
.product-recent strong { margin-top: 4px; overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.product-recent > span { margin-top: 2px; overflow: hidden; color: var(--ink-soft); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.product-open { grid-area: open; display: inline-flex; align-items: center; align-self: end; justify-self: end; min-height: 46px; padding: 5px 5px 5px 16px; color: white; background: var(--tone-deep); border-radius: 999px; gap: 11px; font-size: 0.66rem; font-weight: 760; white-space: nowrap; transition: transform 300ms var(--motion); }
.product-open::after { display: grid; place-items: center; width: 35px; height: 35px; color: var(--tone-deep); background: rgba(255, 255, 255, 0.9); border-radius: 50%; content: "→"; font-size: 0.86rem; }
.product-launch:hover .product-open { transform: translateX(4px); }
.product-launch:active .product-open { transform: translateX(2px) scale(0.97); }
.browse-product { position: absolute; left: clamp(26px, 3.2vw, 44px); bottom: 27px; z-index: 2; min-height: 40px; padding: 0; color: var(--tone-deep); background: transparent; border: 0; cursor: pointer; font-size: 0.63rem; font-weight: 750; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 240ms var(--motion); }
.browse-product:hover { text-decoration-color: currentColor; }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.75fr); align-items: stretch; margin-top: clamp(70px, 10vh, 112px); gap: 20px; }
.operational-section { position: relative; min-width: 0; padding: clamp(28px, 3.5vw, 44px); overflow: hidden; color: #f6faf9; background: #16283a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 36px 36px 12px 36px; box-shadow: 0 30px 75px rgba(23, 44, 61, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.operational-section::after { position: absolute; top: -95px; right: -62px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(55, 183, 178, 0.32), transparent 68%); content: ""; }
.operational-heading { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.operational-heading h2 { max-width: 15ch; margin: 0; font-family: var(--font-display); font-size: clamp(1.55rem, 2.6vw, 2.45rem); font-weight: 630; letter-spacing: -0.055em; line-height: 1; }
.operational-heading .section-kicker { color: #66ceca; }
.operational-heading > p { max-width: 28ch; margin: 0; color: #9eb0bd; font-size: 0.61rem; text-align: right; }
.operational-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 46px 0 0; list-style: none; }
.operational-metric { min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.13); }
.operational-metric:first-child { border-left: 0; }
.operational-metric a { position: relative; display: grid; min-height: 92px; padding: 3px 19px; text-decoration: none; transition: transform 280ms var(--motion); }
.operational-metric:first-child a { padding-left: 0; }
.operational-metric a:hover { transform: translateY(-4px); }
.operational-metric strong { font-size: clamp(1.9rem, 3.4vw, 3rem); font-variant-numeric: tabular-nums; letter-spacing: -0.07em; line-height: 1; }
.operational-metric span { margin-top: 7px; color: #dce6e8; font-size: 0.65rem; }
.operational-metric small { position: absolute; top: 5px; right: 13px; color: #66ceca; font-size: 0.5rem; font-weight: 820; letter-spacing: 0.08em; }

.attention-section { display: grid; min-width: 0; padding: 28px; background: rgba(252, 253, 251, 0.76); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 12px 36px 36px 36px; box-shadow: inset 0 0 0 1px rgba(20, 33, 55, 0.08), var(--shadow-soft); }
.attention-section .section-heading { align-items: start; margin-bottom: 20px; flex-direction: column; gap: 7px; }
.attention-section .section-heading > p { text-align: left; }
.attention-list, .recent-list { padding: 0; margin: 0; list-style: none; }
.attention-list { display: grid; align-content: start; overflow: hidden; }
.attention-item { --tone: #117b7e; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 92px; padding: 15px 0; gap: 13px; }
.attention-item + .attention-item { border-top: 1px solid var(--line); }
.attention-product { display: grid; place-items: center; width: 42px; height: 42px; color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, white); border-radius: 14px 14px 14px 5px; font-size: 0.51rem; font-weight: 850; }
.attention-copy { display: grid; min-width: 0; }
.attention-copy strong { font-size: 0.76rem; font-weight: 710; letter-spacing: -0.018em; }
.attention-copy small { margin-top: 3px; color: var(--ink-soft); font-size: 0.62rem; }
.attention-item > a { grid-column: 2; justify-self: start; min-height: 34px; padding: 7px 0; color: var(--tone); font-size: 0.64rem; font-weight: 760; text-decoration: none; transition: transform 240ms var(--motion); }
.attention-item > a:hover { transform: translateX(4px); }

.recent-section, .shortcuts-section { margin-top: clamp(70px, 10vh, 112px); }
.compact-heading { margin-bottom: 20px; }
.section-action, .text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--action); background: transparent; border: 0; cursor: pointer; gap: 10px; font-size: 0.68rem; font-weight: 760; text-decoration: none; }
.section-action > span:last-child { display: grid; place-items: center; width: 32px; height: 32px; color: white; background: var(--ink); border-radius: 50%; transition: transform 300ms var(--motion); }
.section-action:hover > span:last-child { transform: translate(2px, -2px); }
.text-link:hover { color: var(--action-hover); }

.recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: rgba(252, 253, 251, 0.64); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(20, 33, 55, 0.07); }
.recent-item + .recent-item { border-left: 1px solid var(--line); }
.recent-item a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 100px; padding: 20px 24px; gap: 8px 18px; text-decoration: none; transition: background-color 260ms var(--motion), transform 260ms var(--motion); }
.recent-item a:hover { background: white; transform: translateY(-2px); }
.recent-product { grid-column: 1 / -1; color: var(--tone); font-size: 0.55rem; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; }
.recent-item a > span:nth-child(2) { display: grid; min-width: 0; }
.recent-item strong { overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.recent-item small { margin-top: 3px; overflow: hidden; color: var(--ink-soft); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.recent-item a > span:last-child { color: var(--tone); font-size: 1rem; }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 0; gap: 12px; list-style: none; }
.app-tile { position: relative; min-width: 0; border-radius: 24px 24px 24px 7px; transition: transform 300ms var(--motion), opacity 280ms var(--motion); }
.app-launch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 112px; padding: 14px 16px; color: var(--ink); background: rgba(252, 253, 251, 0.78); border: 1px solid rgba(255, 255, 255, 0.74); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20, 33, 55, 0.07); gap: 16px; text-align: left; text-decoration: none; transition: background-color 260ms var(--motion), box-shadow 300ms var(--motion), transform 300ms var(--motion); }
.app-launch:hover { background: white; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, white), 0 18px 46px color-mix(in srgb, var(--tone) 10%, transparent); transform: translateY(-4px); }
.app-launch:active { transform: translateY(-1px) scale(0.985); }
.app-icon { --tone: #117b7e; position: relative; display: grid; place-items: center; width: 78px; height: 78px; overflow: hidden; color: white; background: var(--tone); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 24px 24px 24px 8px; box-shadow: 0 14px 30px color-mix(in srgb, var(--tone) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.app-icon::before { position: absolute; width: 82%; height: 66%; top: -30%; right: -14%; background: rgba(255, 255, 255, 0.16); border-radius: 50%; content: ""; transform: rotate(-22deg); }
.app-icon > svg { position: relative; z-index: 1; width: 32px; height: 32px; }
.app-icon.compact { width: 62px; height: 62px; border-radius: 19px 19px 19px 6px; box-shadow: 0 12px 26px color-mix(in srgb, var(--tone) 17%, transparent); }
.app-icon.compact > svg { width: 26px; height: 26px; }
.tone-teal { --tone: #117b7e; }
.tone-clay { --tone: #ad5135; }
.tone-mustard { --tone: #8b6c16; }
.tone-slate { --tone: #4b6677; }
.tone-berry { --tone: #9f4262; }
.tone-forest { --tone: #47745b; }
.tone-violet { --tone: #685b91; }
.tone-copper { --tone: #aa5d35; }
.product-badge { position: absolute; right: 6px; bottom: 6px; z-index: 2; min-width: 21px; padding: 3px 4px; color: white; background: rgba(20, 29, 45, 0.42); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; font-size: 0.44rem; font-weight: 820; letter-spacing: 0.04em; line-height: 1.2; text-align: center; }
.app-copy { display: grid; min-width: 0; }
.app-product { margin-bottom: 3px; color: var(--tone); font-size: 0.53rem; font-weight: 820; letter-spacing: 0.09em; text-transform: uppercase; }
.app-copy strong { font-size: 0.84rem; font-weight: 720; letter-spacing: -0.025em; }
.app-description { margin-top: 4px; overflow: hidden; color: var(--ink-soft); font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.app-arrow { display: grid; place-items: center; width: 34px; height: 34px; color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, white); border-radius: 50%; transition: transform 280ms var(--motion); }
.app-launch:hover .app-arrow { transform: translateX(3px); }
.remove-app { position: absolute; top: -8px; left: -8px; z-index: 4; display: none; place-items: center; width: 28px; height: 28px; padding: 0; color: white; background: var(--danger); border: 2px solid white; border-radius: 50%; box-shadow: 0 8px 18px rgba(87, 24, 34, 0.22); }
.remove-app svg { width: 14px; height: 14px; stroke-width: 2; }
.is-editing .remove-app { display: grid; }
.is-editing .app-tile { animation: edit-wiggle 320ms ease-in-out infinite alternate; cursor: grab; }
.is-editing .app-tile:nth-child(even) { animation-direction: alternate-reverse; }
.is-editing .app-launch:hover { transform: none; }
.app-tile.is-dragging { z-index: 4; cursor: grabbing; opacity: 0.78; transform: scale(1.025) rotate(1deg); }
.app-tile.is-drop-target { transform: translateY(-4px); }
.empty-home { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 112px; padding: 15px 18px; background: rgba(252, 253, 251, 0.45); border: 1px dashed rgba(20, 33, 55, 0.18); border-radius: 26px 26px 26px 8px; gap: 17px; }
.empty-home-mark { display: grid; place-items: center; width: 52px; height: 52px; color: var(--action); background: rgba(255, 255, 255, 0.66); border-radius: 17px 17px 17px 6px; box-shadow: inset 0 0 0 1px var(--line); }
.empty-home-mark svg { width: 20px; height: 20px; }
.empty-home > div { display: grid; }
.empty-home strong { font-size: 0.78rem; }
.empty-home p { max-width: 54ch; margin: 3px 0 0; text-align: left; }

.system-state { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 210px; padding: 12px 28px 12px 12px; background: rgba(252, 253, 251, 0.75); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 34px 34px 34px 10px; box-shadow: inset 0 0 0 1px var(--line); gap: 22px; }
.system-mark { display: grid; place-items: center; align-self: stretch; width: 160px; color: var(--accent); background: #dcefed; border-radius: 24px 24px 24px 8px; }
.system-mark svg { width: 42px; height: 42px; }
.system-state h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.04em; }
.system-state p { max-width: 54ch; margin: 0; color: var(--ink-soft); font-size: 0.74rem; }
.startup-mark { width: 66px; height: auto; margin: 0 45px; filter: drop-shadow(0 12px 22px rgba(28, 127, 138, 0.16)); }

.os-dock { position: fixed; left: 50%; bottom: 18px; z-index: 18; display: flex; align-items: center; justify-content: center; min-height: 78px; padding: 7px; background: rgba(251, 252, 250, 0.88); border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; box-shadow: 0 24px 70px rgba(31, 56, 71, 0.22), inset 0 0 0 1px rgba(20, 33, 55, 0.09); backdrop-filter: blur(26px) saturate(145%); transform: translateX(-50%); transform-origin: center bottom; }
.os-dock a, .os-dock button { display: grid; place-items: center; min-width: 72px; min-height: 62px; padding: 8px 11px; color: var(--ink-soft); background: transparent; border-radius: 19px; gap: 4px; font-size: 0.58rem; font-weight: 720; text-decoration: none; transform-origin: center bottom; }
.os-dock a:hover, .os-dock button:hover:not(:disabled) { color: var(--ink); }
.os-dock a:active, .os-dock button:active:not(:disabled) { scale: 0.97; }
.os-dock a[aria-current="page"], .os-dock button[aria-pressed="true"] { color: #075b64; background: #dceeed; }
.os-dock svg { width: 21px; height: 21px; }
.dock-icon { position: relative; }
.dock-icon small { position: absolute; top: -8px; right: -13px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; color: white; background: #bd3f5b; border: 2px solid white; border-radius: 999px; font-size: 0.51rem; font-weight: 820; }

.app-library, .appearance-dialog { width: min(1200px, calc(100% - 36px)); max-height: calc(100dvh - 44px); padding: 0; overflow: hidden; color: var(--ink); background: rgba(249, 251, 249, 0.96); border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 36px 36px 36px 12px; box-shadow: 0 42px 120px rgba(25, 50, 70, 0.3), inset 0 0 0 1px var(--line); backdrop-filter: blur(28px) saturate(145%); }
.app-library::backdrop, .appearance-dialog::backdrop { background: rgba(21, 34, 51, 0.38); backdrop-filter: blur(12px); }
.library-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: min(780px, calc(100dvh - 44px)); }
.library-header { display: flex; align-items: start; justify-content: space-between; padding: 36px 40px 24px; gap: 24px; }
.library-kicker { display: block; margin-bottom: 8px; color: var(--accent); font-size: 0.57rem; font-weight: 820; letter-spacing: 0.16em; text-transform: uppercase; }
.library-header h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.3rem, 4.7vw, 4.5rem); font-weight: 640; letter-spacing: -0.07em; line-height: 0.9; }
.library-header p { max-width: 54ch; margin: 13px 0 0; color: var(--ink-soft); font-size: 0.73rem; }
.close-button { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 16px; transition: background-color 240ms var(--motion), transform 300ms var(--motion); }
.close-button:hover { background: #eef2f1; transform: rotate(4deg); }
.close-button svg { width: 20px; height: 20px; }
.library-tools { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); align-items: center; padding: 0 40px 24px; gap: 18px; }
.library-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 52px; padding: 0 18px; background: white; border: 1px solid var(--line); border-radius: 17px 17px 17px 6px; gap: 11px; transition: border-color 240ms var(--motion), box-shadow 240ms var(--motion); }
.library-search:focus-within { border-color: rgba(0, 107, 199, 0.48); box-shadow: 0 12px 34px rgba(28, 56, 74, 0.08); }
.library-search svg { width: 18px; height: 18px; color: var(--ink-faint); }
.library-search input { width: 100%; min-width: 0; height: 50px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.library-search input::placeholder { color: var(--ink-faint); }
.library-filters { display: flex; justify-content: end; min-width: 0; overflow-x: auto; gap: 8px; scrollbar-width: none; }
.library-filters::-webkit-scrollbar { display: none; }
.library-filters button { flex: 0 0 auto; min-height: 44px; padding: 0 16px; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 0.67rem; font-weight: 720; transition: background-color 240ms var(--motion), color 240ms var(--motion); }
.library-filters button:hover { background: #e9efee; }
.library-filters button[aria-pressed="true"] { color: white; background: var(--ink); }
.library-groups { padding: 0 40px 32px; overflow: auto; overscroll-behavior: contain; }
.library-product-group + .library-product-group { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.library-product-group > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; gap: 18px; }
.library-product-group h3 { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.04em; }
.library-product-group > header a { color: var(--action); font-size: 0.67rem; font-weight: 760; text-decoration: none; }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 0; gap: 9px; list-style: none; }
.library-app { --tone: #117b7e; position: relative; min-width: 0; min-height: 92px; padding: 11px 105px 11px 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid transparent; border-radius: 18px 18px 18px 6px; transition: background-color 240ms var(--motion), border-color 240ms var(--motion), transform 280ms var(--motion); }
.library-app:hover { background: white; border-color: color-mix(in srgb, var(--tone) 22%, white); transform: translateY(-2px); }
.library-app > a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-width: 0; min-height: 68px; gap: 15px; text-decoration: none; }
.library-app > a > span:last-child { display: grid; min-width: 0; }
.library-app strong { font-size: 0.87rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.library-app small { max-width: 46ch; margin-top: 5px; overflow: hidden; color: var(--ink-soft); font-size: 0.64rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.pin-button { position: absolute; top: 26px; right: 15px; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 38px; padding: 0 11px; color: var(--action); background: #e7f1f0; border: 1px solid rgba(11, 115, 121, 0.12); border-radius: 12px; gap: 6px; font-size: 0.62rem; font-weight: 760; transition: background-color 240ms var(--motion), transform 240ms var(--motion); }
.pin-button[aria-pressed="true"] { color: white; background: var(--action); border-color: var(--action); }
.pin-button:active { transform: scale(0.96); }
.pin-button svg { width: 14px; height: 14px; }
.library-empty { padding: 70px 36px; margin: 0; color: var(--ink-soft); text-align: center; }
.library-footer { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 12px 40px; background: #edf2f1; border-top: 1px solid var(--line); gap: 20px; }
.library-footer span { display: inline-flex; align-items: center; color: var(--ink-faint); gap: 8px; font-size: 0.63rem; }
.library-footer svg { width: 15px; height: 15px; }

.appearance-dialog { width: min(860px, calc(100% - 36px)); overflow-y: auto; }
.appearance-dialog .library-footer { position: sticky; bottom: 0; z-index: 2; }
.appearance-panel { display: grid; }
.typography-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr); align-items: end; margin: 0 40px 30px; padding: 22px; background: white; border-radius: 22px 22px 22px 7px; box-shadow: inset 0 0 0 1px var(--line); gap: 30px; }
.appearance-label { display: block; color: var(--accent); font-size: 0.56rem; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; }
.typography-setting h3, .appearance-section-heading h3 { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.03em; }
.typography-setting p, .appearance-section-heading p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.65rem; }
.font-picker { display: grid; gap: 7px; }
.font-picker > span { color: var(--ink-soft); font-size: 0.62rem; font-weight: 700; }
.font-picker select { width: 100%; min-height: 48px; padding: 0 40px 0 14px; color: var(--ink); background: #f1f5f4; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 0.72rem; font-weight: 650; }
.appearance-section-heading { padding: 0 40px 15px; }
.wallpaper-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 40px 26px; gap: 12px; }
.wallpaper-option { display: grid; min-width: 0; padding: 7px 7px 15px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 21px 21px 21px 7px; cursor: pointer; text-align: left; transition: border-color 240ms var(--motion), transform 280ms var(--motion); }
.wallpaper-option:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.wallpaper-option[aria-checked="true"] { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.wallpaper-option > span { display: block; width: 100%; aspect-ratio: 1.34; margin-bottom: 12px; border: 1px solid rgba(25, 50, 70, 0.08); border-radius: 14px 14px 14px 5px; }
.wallpaper-mist > span { background: radial-gradient(circle at 18% 18%, #6bcac4, transparent 42%), #f5eadc; }
.wallpaper-tide > span { background: radial-gradient(circle at 20% 18%, #53aedd, transparent 42%), #eaf8f5; }
.wallpaper-grove > span { background: radial-gradient(circle at 20% 18%, #78ba75, transparent 42%), #fbf2cf; }
.wallpaper-dawn > span { background: radial-gradient(circle at 20% 18%, #f49f70, transparent 42%), #f8e9ef; }
.wallpaper-option strong, .wallpaper-option small { padding-inline: 8px; }
.wallpaper-option strong { font-size: 0.69rem; }
.wallpaper-option small { padding-top: 2px; color: var(--ink-faint); font-size: 0.58rem; }
.custom-wallpaper { display: flex; align-items: center; justify-content: space-between; min-height: 78px; margin: 0 40px 26px; padding: 13px 15px 13px 19px; background: white; border-radius: 20px 20px 20px 7px; box-shadow: inset 0 0 0 1px var(--line); gap: 20px; }
.custom-wallpaper > span:first-child { display: grid; }
.custom-wallpaper strong { font-size: 0.72rem; }
.custom-wallpaper small { color: var(--ink-faint); font-size: 0.59rem; }
.custom-wallpaper input { max-width: 250px; color: var(--ink-soft); font-size: 0.63rem; }
.custom-wallpaper input::file-selector-button { min-height: 42px; padding: 0 14px; margin-right: 10px; color: white; background: var(--ink); border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 750; }


.organisation-admin-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 8%, rgba(77, 180, 174, 0.18), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(231, 173, 101, 0.17), transparent 24%),
    #edf2f1;
}

.organisation-admin-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(30px, 5vw, 68px) 0 88px;
}

.admin-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 28px;
}
.admin-page-header h1 {
  max-width: 18ch;
  margin: 7px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.92;
}
.admin-page-header > div > p:last-child {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
}
.admin-back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 740;
  text-decoration: none;
}
.admin-back-link:hover { color: var(--action); }
.admin-role-badge {
  flex: 0 0 auto;
  padding: 8px 13px;
  color: #0b5e63;
  background: rgba(223, 242, 239, 0.86);
  border: 1px solid rgba(11, 115, 121, 0.16);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-card {
  padding: clamp(24px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px 30px 30px 9px;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line);
}
.organisation-profile-card { margin-bottom: 20px; }
.admin-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.admin-secondary-grid > .admin-card:only-child { grid-column: 1 / -1; }
.admin-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 28px;
}
.admin-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  font-weight: 670;
  letter-spacing: -0.05em;
  line-height: 1;
}
.admin-section-heading > p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.68rem;
  text-align: right;
}
.admin-card-copy {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.business-profile-form,
.invite-staff-form {
  display: grid;
  gap: 24px;
}
.business-profile-form fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
.business-profile-form legend {
  width: 100%;
  padding: 0 0 10px;
  margin-bottom: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 800;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-form-grid .span-2 { grid-column: 1 / -1; }
.business-profile-form label,
.invite-staff-form label {
  display: grid;
  gap: 7px;
}
.business-profile-form label > span,
.invite-staff-form label > span {
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 720;
}
.business-profile-form input,
.business-profile-form textarea,
.invite-staff-form textarea,
.invite-staff-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  background: #f6f8f7;
  border: 1px solid var(--line);
  border-radius: 13px;
  font: inherit;
  font-size: 0.72rem;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.business-profile-form textarea,
.invite-staff-form textarea { min-height: 92px; resize: vertical; }
.business-profile-form input:focus,
.business-profile-form textarea:focus,
.invite-staff-form textarea:focus,
.invite-staff-form select:focus {
  background: white;
  border-color: rgba(0, 110, 200, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 110, 200, 0.08);
  outline: none;
}
.business-profile-form input:disabled {
  color: var(--ink-faint);
  background: #eef2f1;
}
.field-help {
  margin: -4px 0 14px;
  color: var(--ink-faint);
  font-size: 0.62rem;
}
.admin-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.admin-form-actions p,
.admin-form-actions > span {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.62rem;
}
.admin-form-actions .primary-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 170px;
}

.admin-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  padding: 12px 14px;
  margin: 0 0 20px;
  border-radius: 14px;
  gap: 10px;
  font-size: 0.66rem;
}
.admin-notice strong { font-size: 0.67rem; }
.admin-notice[data-tone="success"] {
  color: #155f48;
  background: #e5f4ee;
  border: 1px solid rgba(21, 95, 72, 0.13);
}
.admin-notice[data-tone="error"] {
  color: #8d3342;
  background: #f8e8eb;
  border: 1px solid rgba(141, 51, 66, 0.12);
}
.admin-card code {
  overflow-wrap: anywhere;
  font-size: 0.62rem;
}

@media (max-width: 760px) {
  .organisation-admin-shell { width: min(100% - 24px, 1180px); padding-top: 26px; }
  .admin-page-header,
  .admin-section-heading,
  .admin-form-actions { align-items: stretch; flex-direction: column; }
  .admin-page-header { display: flex; }
  .admin-section-heading > p { max-width: none; text-align: left; }
  .admin-role-badge { align-self: flex-start; }
  .admin-secondary-grid,
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid .span-2 { grid-column: auto; }
  .admin-form-actions .primary-button { width: 100%; }
}

.toast { position: fixed; left: 50%; bottom: 116px; z-index: 55; max-width: min(480px, calc(100% - 32px)); padding: 12px 17px; color: white; background: var(--ink); border-radius: 999px; box-shadow: 0 18px 46px rgba(34, 45, 65, 0.22); font-size: 0.68rem; font-weight: 680; text-align: center; transform: translateX(-50%); animation: toast-enter 340ms var(--motion) both; }

@keyframes toast-enter { from { opacity: 0; transform: translate(-50%, 10px) scale(0.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes edit-wiggle { from { transform: rotate(-0.35deg); } to { transform: rotate(0.35deg); } }

@media (max-width: 1100px) {
  .product-tile, .product-tile:nth-child(2) { grid-column: span 6; }
  .activity-layout { grid-template-columns: 1fr; }
  .attention-section { border-radius: 30px 30px 30px 10px; }
}

@media (max-width: 900px) {
  .status-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .clock { display: none; }
  .account-summary > span:last-child { display: none; }
  .command-button span, .command-button kbd { display: none; }
  .command-button { min-width: 46px; width: 46px; padding: 0; place-items: center; }
  .home-screen { padding-inline: 24px; }
  .home-meta { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .home-meta::before { right: 10%; }
  .hero-console { width: min(100%, 520px); }
  .product-tile, .product-tile:nth-child(2) { grid-column: 1 / -1; }
  .product-launch { min-height: 390px; }
  .library-tools { grid-template-columns: 1fr; }
  .library-filters { justify-content: start; }
  .library-grid { grid-template-columns: 1fr; }
  .wallpaper-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .status-bar { position: relative; top: 0; width: calc(100% - 20px); min-height: 66px; margin-top: 10px; padding-left: 12px; border-radius: 20px; }
  .os-brand img { width: 38px; height: 40px; }
  .os-brand strong { font-size: 0.86rem; }
  .status-actions { gap: 5px; }
  .status-actions > .command-button, .account-summary { display: none; }
  .status-button { min-height: 42px; padding-inline: 13px; }
  .home-screen { padding: 42px 16px 126px; }
  .home-meta { margin-bottom: 62px; }
  .home-meta h1 { max-width: 9ch; font-size: clamp(3.35rem, 16vw, 5.1rem); }
  .hero-console { border-radius: 23px 23px 23px 8px; }
  .edit-banner { align-items: start; margin-top: -34px; padding: 14px; border-radius: 18px; flex-direction: column; }
  .edit-banner > div { width: 100%; flex-wrap: wrap; }
  .edit-banner .done-button { margin-left: auto; }
  .section-heading { align-items: end; }
  .section-heading > p { display: none; }
  .product-grid { display: block; }
  .product-tile + .product-tile { margin-top: 15px; }
  .product-launch { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "mark copy" "signals signals" "recent recent" "open open"; min-height: 0; padding: 23px 22px 78px; }
  .product-mark { width: 66px; height: 66px; border-radius: 21px 21px 21px 7px; }
  .product-mark svg { width: 29px; height: 29px; }
  .product-copy > strong { font-size: clamp(1.7rem, 9vw, 2.45rem); }
  .product-signal-list { grid-template-columns: 1fr; }
  .product-open { justify-self: start; }
  .browse-product { left: 22px; bottom: 24px; }
  .activity-layout { margin-top: 70px; }
  .operational-section { padding: 25px 20px; border-radius: 28px 28px 9px 28px; }
  .operational-heading { align-items: start; flex-direction: column; gap: 8px; }
  .operational-heading > p { text-align: left; }
  .operational-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .operational-metric:nth-child(3) { border-left: 0; }
  .operational-metric:nth-child(n + 3) { padding-top: 17px; margin-top: 17px; border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .operational-metric a { padding-inline: 13px; }
  .operational-metric:nth-child(odd) a { padding-left: 0; }
  .attention-section { padding: 22px; }
  .recent-list, .home-grid { grid-template-columns: 1fr; }
  .recent-item + .recent-item { border-top: 1px solid var(--line); border-left: 0; }
  .app-launch { min-height: 104px; }
  .empty-home { grid-template-columns: auto minmax(0, 1fr); }
  .empty-home .text-link { grid-column: 2; justify-self: start; }
  .os-dock { bottom: 10px; width: calc(100% - 20px); min-height: 70px; overflow-x: auto; justify-content: space-around; border-radius: 22px; scrollbar-width: none; }
  .os-dock::-webkit-scrollbar { display: none; }
  .os-dock a, .os-dock button { min-width: 59px; padding-inline: 7px; }
  .app-library, .appearance-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 25px 25px 25px 9px; }
  .library-panel { min-height: calc(100dvh - 16px); }
  .library-header { padding: 25px 20px 20px; }
  .library-tools, .library-groups { padding-inline: 20px; }
  .library-footer { padding-inline: 20px; }
  .library-footer > span { display: none; }
  .library-footer .done-button { width: 100%; }
  .wallpaper-options { padding-inline: 20px; }
  .typography-setting { grid-template-columns: 1fr; margin-inline: 20px; gap: 18px; }
  .appearance-section-heading { padding-inline: 20px; }
  .custom-wallpaper { align-items: stretch; margin-inline: 20px; flex-direction: column; }
  .custom-wallpaper input { max-width: 100%; }
  .system-state { grid-template-columns: 1fr; padding: 8px; }
  .system-mark { width: 100%; min-height: 120px; }
  .system-state > div, .system-state > .primary-button { margin: 0 18px; }
  .system-state > .primary-button { margin-bottom: 18px; }
  .startup-mark { margin: 28px auto 10px; }
}

@media (max-width: 390px) {
  .wallpaper-options { grid-template-columns: 1fr; }
  .os-dock a, .os-dock button { min-width: 54px; font-size: 0.54rem; }
  .product-description { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}