/* Orro colour system.
   Palette values are the theme colours read out of the official Orro PowerPoint
   template (ppt/theme/theme1.xml), which is the authoritative digital source and
   agrees with the Orro Word template. They correct four values originally
   transcribed from Colour Values.rtf, each off by a channel or two:
     navy   00 00 29 -> 00 00 28
     purple 61 00 A1 -> 60 01 A1
     blue   29 1C 8F -> 29 1D 8E
     cyan   00 D9 F7 -> 00 DA F8

   Theme mapping, for anyone round-tripping to Office:
     dk2/tx2 = navy    lt2/bg2 = white
     accent1 = teal    accent2 = cyan     accent3 = blue
     accent4 = purple  accent5 = pink     accent6 = gold
     hlink   = navy    folHlink = purple

   THE HIERARCHY — one Orro, not one colour per pillar:
     Navy    the base. Backgrounds, headings, primary actions.
     Purple  the brand colour. Identity, links, accents, gradients.
     Pink    the highlight. Accent CTAs, active markers, eyebrows on navy, selection.
   Teal, cyan, blue and orange are SUPPORTING only — gradient stops and status.
   They are not identity colours and must never be used to code a whole service
   line in layout: a Cloud page is purple like every other page.

   THE ONE EXCEPTION is the service ICON. Orro's icon set ships each service in
   its own colour, so --service-* below applies to the glyph and nothing else —
   never to that service's headings, rules, backgrounds or buttons. */
:root{
  /* ---- Brand palette (the seven) ---- */
  --orro-navy:#000028;
  --orro-purple:#6001A1;
  --orro-pink:#FF2CC3;
  --orro-blue:#291D8E;
  --orro-teal:#00DEC4;
  --orro-cyan:#00DAF8;
  --orro-orange:#FFB81E;
  --orro-white:#FFFFFF;

  /* ---- Brand roles ---- */
  --brand-base:var(--orro-navy);
  --brand-primary:var(--orro-purple);
  --highlight:var(--orro-pink);
  --highlight-fg:var(--orro-navy);
  --highlight-soft:rgba(255,44,195,.12);
  --brand-primary-soft:rgba(97,0,161,.10);

  /* ---- Neutral ramp (navy-tinted; derived for UI use) ---- */
  --neutral-0:#FFFFFF;
  --neutral-50:#F5F6F9;
  --neutral-100:#EBEDF3;
  --neutral-200:#D8DBE6;
  --neutral-300:#B6BBCC;
  --neutral-400:#8A90A8;
  --neutral-500:#616881;
  --neutral-600:#454B60;
  --neutral-700:#2C3145;
  --neutral-800:#171B2C;
  --neutral-900:#0A0D1D;
  --neutral-1000:#000028;

  /* ---- Alpha helpers for dark surfaces ---- */
  --white-a04:rgba(255,255,255,.04);
  --white-a08:rgba(255,255,255,.08);
  --white-a12:rgba(255,255,255,.12);
  --white-a24:rgba(255,255,255,.24);
  --white-a64:rgba(255,255,255,.64);
  --navy-a08:rgba(0,0,40,.08);
  --navy-a12:rgba(0,0,40,.12);
  --navy-a60:rgba(0,0,40,.60);
  --navy-a88:rgba(0,0,40,.88);

  /* ---- Semantic: surfaces ---- */
  --surface-page:#FFFFFF;
  --surface-page-inverse:var(--orro-navy);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--neutral-50);
  --surface-card:#FFFFFF;
  --surface-card-inverse:var(--neutral-800);
  --surface-overlay:var(--navy-a88);
  --surface-brand:var(--orro-purple);
  --surface-accent:var(--orro-pink);

  /* ---- Semantic: text ---- */
  --text-heading:var(--orro-navy);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-inverse:#FFFFFF;
  --text-inverse-muted:var(--white-a64);
  --text-accent:var(--orro-purple);
  --text-accent-inverse:var(--orro-pink);
  --text-link:var(--orro-purple);
  --text-link-hover:#480078;
  --text-link-inverse:var(--orro-pink);
  --text-link-inverse-hover:#FF7ADB;

  /* ---- Semantic: borders ---- */
  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:var(--white-a12);
  --border-focus:var(--orro-purple);

  /* ---- Semantic: interactive ---- */
  --action-primary-bg:var(--orro-purple);
  --action-primary-fg:#FFFFFF;
  --action-primary-bg-hover:#480078;
  --action-brand-bg:var(--orro-purple);
  --action-brand-fg:#FFFFFF;
  --action-brand-bg-hover:#7A15C0;
  --action-accent-bg:var(--orro-pink);
  --action-accent-fg:var(--orro-navy);
  --action-accent-bg-hover:#FF5AD1;
  --action-inverse-bg:#FFFFFF;
  --action-inverse-fg:var(--orro-navy);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-fg:var(--neutral-400);

  /* ---- Service icon colours ----
     Sampled from the supplied icon artwork. Critical Infrastructure's red is the
     exact hex of the "Brand Red" master (#FF0066), which is where Orro Red in
     this system comes from — it is a brand colour after all, not an addition.

     Scope: the ICON GLYPH ONLY. See the note at the top of this file. */
  --service-cyber:var(--orro-orange);
  --service-network:var(--orro-pink);
  --service-cloud:var(--orro-cyan);
  --service-collaboration:var(--orro-teal);
  --service-critical-infrastructure:#FF0066;

  /* ---- Orro Red ----
     #FF0066, the Critical Infrastructure service colour, doing double duty as
     the critical-state alarm. A security business needs an unmistakable alarm and
     the other palette colours are spoken for: navy, purple and pink are identity,
     teal/cyan/orange carry the other states.

     Use it for critical state ONLY. Never a brand, accent or decorative colour;
     never in marketing; never on a CTA. The one non-status use is the Critical
     Infrastructure service icon, which is where the colour originates.

     --red-solid is a fractionally deeper tone used ONLY where white text sits on
     a red fill (badges, solid pills). White on --red is 3.9:1, which fails AA for
     small text; on --red-solid it is 4.7:1, which passes. Everywhere else — dots,
     rules, borders, icons, tints — use --red. */
  --red:#FF0066;
  --red-solid:#E60059;
  --red-dark:#B3003F;
  --red-soft:rgba(255,0,102,.10);

  /* ---- Semantic: status ----
     Status is functional, never brand. Navy, purple and pink are all spoken for
     as identity colours, so none of them may signal state. */
  --status-ok:var(--orro-teal);
  --status-info:var(--orro-cyan);
  --status-warn:var(--orro-orange);
  --status-critical:var(--red);
  --status-critical-strong:var(--red-dark);
  --status-critical-solid:var(--red-solid);
  --status-critical-fg:#FFFFFF;
  --status-ok-soft:rgba(0,222,196,.16);
  --status-info-soft:rgba(0,217,247,.16);
  --status-warn-soft:rgba(255,184,30,.18);
  --status-critical-soft:var(--red-soft);

  /* ---- Signature gradients — stop values taken verbatim from Elements.ai ----
     Note: the gradient stops use the CMYK→RGB renditions of the palette,
     which differ slightly from the master hexes above. Both are correct;
     use these for gradients and the palette hexes for flat fills. ---- */
  --gradient-stop-teal:#4ADEC3;
  --gradient-stop-cyan:#45D9FA;
  --gradient-stop-blue:#251B92;
  --gradient-stop-purple:#5A00A5;
  --gradient-stop-pink:#F42DC7;
  --gradient-stop-gold:#FAB900;

  /* The five official brand gradients, in artboard order */
  --gradient-purple-blue:linear-gradient(90deg,#5A00A5 0%,#251B92 100%); /* @kind color */
  --gradient-teal-blue:linear-gradient(90deg,#4ADEC3 3%,#251B92 92%); /* @kind color */
  --gradient-gold-pink:linear-gradient(90deg,#FAB900 8%,#F42DC7 96%); /* @kind color */
  --gradient-pink-purple:linear-gradient(90deg,#F42DC7 6%,#5A00A5 91%); /* @kind color */
  --gradient-cyan-blue:linear-gradient(90deg,#45D9FA 2%,#251B92 96%); /* @kind color */

  /* Composites for UI use. --gradient-brand is the default: pink → purple,
     the pairing that carries the identity. */
  --gradient-brand:var(--gradient-pink-purple); /* @kind color */
  --gradient-electric:var(--gradient-pink-purple); /* @kind color */
  --gradient-cool:var(--gradient-purple-blue); /* @kind color */
  --gradient-rule:linear-gradient(90deg,var(--orro-pink) 0%,var(--orro-purple) 100%); /* @kind color */
  --gradient-spectrum:var(--gradient-rule); /* @kind color */
  --gradient-night:linear-gradient(180deg,#000028 0%,#0A0D1D 60%,#160C3A 100%); /* @kind color */
  --gradient-protection:linear-gradient(180deg,rgba(0,0,40,0) 0%,rgba(0,0,40,.72) 70%,rgba(0,0,40,.92) 100%); /* @kind color */
}

:root{
  /* ---- Families ---- */
  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Space Grotesk","Space Grotesk Fallback",system-ui,sans-serif;
  --font-body:"Avenir","Avenir Next","Nunito Sans",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;

  /* ---- Weights ---- */
  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */
  --weight-black:900; /* @kind font */

  /* ---- Type scale (px, 1.25-ish major-third-lean) ---- */
  --size-3xs:11px;
  --size-2xs:12px;
  --size-xs:13px;
  --size-sm:14px;
  --size-md:16px;
  --size-lg:18px;
  --size-xl:21px;
  --size-2xl:26px;
  --size-3xl:32px;
  --size-4xl:40px;
  --size-5xl:52px;
  --size-6xl:64px;
  --size-7xl:80px;
  --size-8xl:104px;

  /* ---- Line heights ---- */
  --leading-tight:1.05; /* @kind font */
  --leading-snug:1.18; /* @kind font */
  --leading-normal:1.45; /* @kind font */
  --leading-relaxed:1.62; /* @kind font */

  /* ---- Tracking ---- */
  --tracking-tight:-.02em; /* @kind font */
  --tracking-snug:-.01em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-wide:.04em; /* @kind font */
  --tracking-eyebrow:.16em; /* @kind font */

  /* ---- Semantic roles ---- */
  --text-display-family:var(--font-display);
  --text-display-weight:var(--weight-light); /* @kind font */
  --text-display-tracking:var(--tracking-tight); /* @kind font */
  --text-heading-family:var(--font-display);
  --text-heading-weight:var(--weight-medium); /* @kind font */
  --text-body-family:var(--font-body);
  --text-body-weight:var(--weight-regular); /* @kind font */
  --text-eyebrow-family:var(--font-display);
  --text-eyebrow-weight:var(--weight-medium); /* @kind font */
  --text-eyebrow-size:var(--size-2xs);
  --text-label-family:var(--font-display);
  --text-label-weight:var(--weight-medium); /* @kind font */
}

:root{
  /* 4px base grid */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  /* Layout */
  --container-max:1280px;
  --container-narrow:760px;
  --gutter-desktop:var(--space-10);
  --gutter-mobile:var(--space-5);
  --section-y-desktop:var(--space-32);
  --section-y-mobile:var(--space-16);
  --grid-columns:12; /* @kind other */
  --grid-gap:var(--space-6);
}

:root{
  /* ---- Radii — Orro is squared-off; the pill is reserved for pills/tags ---- */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-button:6px;
  --radius-input:var(--radius-sm);

  /* ---- Borders ---- */
  --border-width-hairline:1px; /* @kind spacing */
  --border-width-thick:2px; /* @kind spacing */
  --border-hairline:1px solid var(--border-subtle); /* @kind other */
  --border-hairline-inverse:1px solid var(--border-inverse); /* @kind other */
  --rule-accent-height:3px; /* @kind spacing */

  /* ---- Shadows — restrained, navy-tinted, never grey ---- */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(0,0,40,.06);
  --shadow-md:0 4px 16px rgba(0,0,40,.08);
  --shadow-lg:0 16px 40px rgba(0,0,40,.12);
  --shadow-glow-pink:0 0 0 1px rgba(255,44,195,.45),0 8px 32px rgba(255,44,195,.26);
  --shadow-glow-purple:0 0 0 1px rgba(97,0,161,.45),0 8px 32px rgba(97,0,161,.30);
  --shadow-inset-hairline:inset 0 0 0 1px var(--white-a08);

  /* ---- Focus ---- */
  --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--border-focus);
  --focus-ring-inverse:0 0 0 2px var(--orro-navy),0 0 0 4px var(--orro-pink);

  /* ---- Blur / glass ---- */
  --blur-sm:blur(8px); /* @kind other */
  --blur-md:blur(20px); /* @kind other */
  --glass-light:rgba(255,255,255,.72);
  --glass-dark:rgba(0,0,40,.56);
}

:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:400ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */

  /* Confident, non-bouncy. Orro motion is engineered, not playful. */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */

  --transition-interactive:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-reveal:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out); /* @kind other */

  --press-scale:.98; /* @kind other */
  --hover-lift:-2px; /* @kind spacing */
}

/* Application roles. Campaign components opt into their existing display sizes. */
:root {
  --control-border:#767C91;
  --status-error-text:#B3003F;
  --status-success-text:#00594F;
  --status-warning-text:#765000;
  --status-info-text:#005A6B;
  --selected-bg:#F1E8F8;
  --selected-fg:#480078;
  --control-height:40px;
  --row-padding:12px;
  --page-gutter:24px;
}
.orro-application { --font-body:var(--font-ui); --font-display:var(--font-ui); --text-body-family:var(--font-ui); --text-heading-family:var(--font-ui); }
[data-density="compact"] { --control-height:32px; --row-padding:8px; }
*,*::before,*::after { box-sizing:border-box; }
button,input,textarea,select { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
::selection { background:var(--selected-bg); color:var(--selected-fg); }
.orro-field { display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; }
.orro-field label { font-size:13px; font-weight:500; color:var(--text-heading); }
.orro-control { width:100%; min-height:var(--control-height); border:1px solid var(--control-border); border-radius:4px; background:var(--surface-raised); color:var(--text-heading); padding:8px 12px; font-size:14px; }
.orro-control:focus-within { outline:2px solid var(--border-focus); outline-offset:2px; }
.orro-control[aria-invalid="true"],.orro-control:has([aria-invalid="true"]) { border-color:var(--status-error-text); }
.orro-control:disabled,.orro-control:has(:disabled) { background:var(--neutral-100); color:var(--text-muted); cursor:not-allowed; }
.orro-input-wrap { display:flex; align-items:center; gap:8px; }
.orro-input-wrap input { width:100%; min-width:0; padding:0; border:0; outline:none; box-shadow:none; background:transparent; color:inherit; }
.orro-help { font-size:13px; color:var(--text-muted); }
.orro-error { color:var(--status-error-text); }
.orro-check { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.orro-check input { width:18px; height:18px; flex-shrink:0; accent-color:var(--orro-purple); }
.orro-check:has(:disabled) { color:var(--text-muted); cursor:not-allowed; }
.orro-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--control-height); padding:8px 14px; border:1px solid transparent; border-radius:var(--radius-button); font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.25; text-decoration:none; cursor:pointer; background:var(--action-primary-bg); color:var(--action-primary-fg); }
.orro-button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--action-primary-bg-hover); color:white; }
.orro-button[data-variant="secondary"],.orro-button[data-variant="ghost"] { background:transparent; color:var(--text-heading); border-color:var(--control-border); }
.orro-button[data-variant="ghost"] { border-color:transparent; }
.orro-button[data-variant="inverse"],.orro-button[data-variant="inverse-outline"] { background:white; color:var(--orro-navy); }
.orro-button[data-variant="accent"] { background:var(--orro-purple); color:white; }
.orro-button[data-size="sm"] { min-height:32px; padding:6px 10px; font-size:13px; }
.orro-button[data-size="lg"] { min-height:44px; padding:10px 18px; }
.orro-button:disabled,.orro-button[aria-disabled="true"] { background:var(--neutral-100); color:var(--text-muted); border-color:var(--border-subtle); cursor:not-allowed; }
.orro-dialog { position:fixed; inset:0; margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; border:1px solid var(--border-subtle); border-radius:8px; box-shadow:var(--shadow-lg); max-height:calc(100dvh - 32px); width:calc(100% - 32px); color:var(--text-body); background:var(--surface-raised); }
.orro-dialog::backdrop { background:rgba(0,0,40,.6); }
.orro-dialog-body { padding:24px; }
.orro-dialog-footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:16px 24px; border-top:1px solid var(--border-subtle); }
.orro-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-subtle); overflow:auto; padding:4px; }
.orro-tab { border:0; border-radius:4px; background:transparent; color:var(--text-muted); padding:10px 14px; white-space:nowrap; cursor:pointer; }
.orro-tab[aria-selected="true"] { background:var(--selected-bg); color:var(--selected-fg); box-shadow:inset 0 -2px var(--orro-purple); }
@media (pointer:coarse) { :root,[data-density="compact"] { --control-height:44px; } .orro-button[data-size="sm"],.orro-tab { min-height:44px; } .orro-check { min-height:44px; } }
@media (max-width:640px) { :root { --page-gutter:16px; } .orro-dialog-body { padding:16px; } }
@media (prefers-reduced-motion:reduce) {
  :root { --duration-instant:0ms; --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-reveal:0ms; --press-scale:1; --hover-lift:0px; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:0ms!important; scroll-behavior:auto!important; }
}
@media (forced-colors:active) { :focus-visible,.orro-control:focus-within { outline:2px solid Highlight; } .orro-tab[aria-selected="true"] { border:2px solid Highlight; } }

.orro-panel { background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:6px;min-width:0; }
.orro-panel-header { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--border-subtle); }
.pagination { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px; }
.state-panel { border:1px solid var(--border-subtle);background:white;border-radius:6px;padding:32px 24px; }.state-panel h2 { margin-bottom:8px; }.state-error { border-color:var(--status-error-text); }
.inline-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

/* Kivi motion uses stable labels and a single selected surface. */
.orro-button-label { position:relative;display:inline-block;overflow:hidden; }
.orro-button-label-size { visibility:hidden;display:block; }
.orro-button-label-layer { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.orro-tab { position:relative;isolation:isolate; }
.orro-tab[data-motion][aria-selected="true"] { background:transparent;box-shadow:none; }
.orro-tab-indicator { position:absolute;inset:0;border-radius:4px;background:var(--selected-bg);box-shadow:inset 0 -2px var(--orro-purple);z-index:-1; }
.orro-tab-label { position:relative; }
@media (prefers-reduced-motion:no-preference) {
  .orro-dialog[open] { animation:orro-dialog-enter 180ms cubic-bezier(.22,1,.36,1); }
  .orro-dialog[open]::backdrop { animation:orro-backdrop-enter 180ms ease-out; }
  @keyframes orro-dialog-enter { from {opacity:0;transform:translateY(8px) scale(.985);} to {opacity:1;transform:none;} }
  @keyframes orro-backdrop-enter { from {background:rgba(0,0,40,0);} to {background:rgba(0,0,40,.6);} }
}

body{margin:0;background:var(--surface-sunken);color:var(--text-body);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app-header{background:var(--surface-raised);border-top:3px solid var(--brand-primary);border-bottom:1px solid var(--border-subtle)}
.header-inner{max-width:1120px;margin:auto;min-height:88px;padding:16px var(--page-gutter);display:flex;align-items:center;gap:24px}
.brand{display:block;width:88px;height:32px;object-fit:contain}.header-divider{height:24px;width:1px;background:var(--border-subtle)}.app-name{color:var(--text-heading);font-weight:600}.environment{margin-left:auto;color:var(--text-muted);font-size:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px 8px}
main{max-width:768px;margin:48px auto;padding:0 var(--page-gutter)}.page-heading{margin-bottom:24px}.eyebrow{color:var(--text-accent);font-size:12px;font-weight:600;margin:0 0 8px}h1{font-size:24px;line-height:1.3;font-weight:600;color:var(--text-heading);margin:0}p{margin:8px 0 0;color:var(--text-muted)}
.account-panel{overflow:hidden}.orro-panel-header{padding:16px 24px}.panel-title{font-weight:600;color:var(--text-heading)}.provider{font-size:12px;color:var(--text-muted)}.panel-body{padding:32px 24px}h2{margin:0;color:var(--text-heading);font-size:20px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}#intro{max-width:52ch}#status{margin-top:20px}#status:empty{display:none}#signin{margin-top:24px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;background:var(--status-ok-soft);color:var(--status-success-text);margin-top:20px}.status-dot{width:6px;height:6px;background:currentColor;border-radius:50%}
dl{margin:20px 0 24px}dl>div{display:grid;grid-template-columns:144px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}dt{color:var(--text-muted)}dd{margin:0;color:var(--text-heading);overflow-wrap:anywhere}.mono{font-family:var(--font-mono);font-size:13px}.profile-actions{display:flex;align-items:center;gap:16px}.profile-actions span{font-size:12px;color:var(--text-muted)}.panel-footer{padding:16px 24px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:12px;background:var(--surface-sunken)}.page-footer{display:flex;justify-content:space-between;gap:16px;margin-top:24px;color:var(--text-muted);font-size:12px}[hidden]{display:none!important}
@media(max-width:540px){.header-inner{gap:16px;min-height:80px}.environment{display:none}main{margin-top:32px}.panel-body{padding:24px 20px}.orro-panel-header,.panel-footer{padding:16px 20px}dl>div{grid-template-columns:1fr;gap:4px}.profile-actions{align-items:flex-start;flex-direction:column;gap:8px}.page-footer{flex-direction:column;gap:4px}}