:root {
  color-scheme: light;
  --ink: #111727; --ink-soft: rgba(17,23,39,.68); --muted: rgba(17,23,39,.53);
  --paper: #f4f7fc; --paper-warm: #fffaf7; --surface: rgba(255,255,255,.76); --surface-solid: #fff;
  --surface-alt: #f3f7ff; --line: rgba(17,23,39,.11); --line-strong: rgba(17,23,39,.21);
  --indigo: #2d1592; --blue: #0b63ce; --cyan: #28b7df; --violet: #b837c4; --portal-violet: #4b2bbd; --coral: #ef4d62;
  --green: #177a58; --amber: #a65d05; --red: #bd2438; --shadow: 0 18px 52px rgba(35,59,100,.12); --focus: 0 0 0 3px rgba(11,99,206,.22);
  --font-ui: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --font-code: "SFMono-Regular", Consolas, monospace;
  font-family: var(--font-ui);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f6ff; --ink-soft: rgba(239,245,255,.72); --muted: rgba(223,233,251,.56);
  --paper: #0e1424; --paper-warm: #11192b; --surface: rgba(20,30,51,.78); --surface-solid: #17213a;
  --surface-alt: #1d2945; --line: rgba(211,226,255,.14); --line-strong: rgba(211,226,255,.29);
  --green: #4dd7a2; --amber: #ffc35c; --red: #ff8b99; --shadow: 0 22px 62px rgba(0,0,0,.32); --focus: 0 0 0 3px rgba(40,183,223,.32);
}
.privacy-notice-panel { width:min(780px,100%); margin:clamp(28px,8vh,88px) auto; padding:clamp(24px,5vw,52px); border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); box-shadow:var(--shadow); }
.privacy-notice-panel h1,.privacy-notice-panel h2 { font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:500; letter-spacing:-.03em; }
.privacy-policy-copy { margin:28px 0 20px; padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); }
.privacy-policy-copy h2 { margin:0; font-size:1.45rem; }.privacy-policy-copy p { line-height:1.6; }.privacy-policy-copy div p { white-space:pre-wrap; }
.privacy-check { display:flex; align-items:flex-start; gap:10px; padding:15px 0; font-weight:650; line-height:1.45; }.privacy-check input { width:18px; height:18px; margin-top:2px; accent-color:var(--blue); }
.privacy-accepted-record { margin:18px 0; padding:14px; border-left:3px solid var(--green); background:color-mix(in srgb,var(--green) 10%,var(--surface-solid)); color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
.privacy-signout { margin-top:22px; border-color:var(--line-strong); background:transparent; color:var(--ink); box-shadow:none; }
/* This is a full-screen access gate, so it must reach the viewport edges rather
   than inherit the workspace shell's desktop gutter.  The policy card itself
   remains constrained below for comfortable reading. */
#individual-policy-acknowledgement-view { min-height:100vh; width:calc(100% + (2 * clamp(14px,2.5vw,34px))); margin-inline:calc(-1 * clamp(14px,2.5vw,34px)); padding:0 0 clamp(28px,6vw,68px); background:radial-gradient(circle at 81% 0%,rgba(184,55,196,.18),transparent 31rem),radial-gradient(circle at 8% 20%,rgba(11,99,206,.14),transparent 28rem),linear-gradient(160deg,#f7f7ff 0%,#f1f4ff 51%,#edf1fb 100%); }
html[data-theme="dark"] #individual-policy-acknowledgement-view { background:radial-gradient(circle at 81% 0%,rgba(184,55,196,.21),transparent 31rem),radial-gradient(circle at 8% 20%,rgba(45,21,146,.24),transparent 28rem),linear-gradient(160deg,#0e1424 0%,#151138 52%,#11172c 100%); }
.individual-policy-topbar { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:0 clamp(16px,3vw,42px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
.individual-policy-brand { display:flex; align-items:center; gap:9px; min-width:0; color:#f7fffc; font:800 .9rem/1 var(--font-ui); letter-spacing:-.025em; }.individual-policy-brand img { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(8,12,52,.25)); }.individual-policy-brand small { padding-left:10px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:700 .72rem/1 var(--font-ui); letter-spacing:0; }.individual-policy-topbar .theme-toggle { width:32px; height:32px; min-height:32px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; box-shadow:none; }
.individual-policy-panel { width:min(820px,calc(100% - 32px)); margin:clamp(28px,6vw,66px) auto 0; padding:clamp(26px,5vw,54px); border:1px solid var(--line); border-radius:24px; background:var(--surface-solid); box-shadow:var(--shadow); }
.individual-policy-panel h1,.individual-policy-panel h2 { font-family:var(--font-ui); font-weight:750; letter-spacing:-.055em; }.individual-policy-panel h1 { max-width:16ch; margin-bottom:14px; font-size:clamp(2.5rem,5.2vw,4.6rem); line-height:.94; }.individual-policy-panel h2 { margin:0; font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.15; }
.individual-policy-panel>#individual-policy-intro { max-width:61ch; color:var(--ink-soft); font-size:1rem; line-height:1.55; }.individual-policy-copy { margin:30px 0 22px; padding:clamp(18px,3vw,28px); border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }.individual-policy-copy>.muted { margin:7px 0 0; font-size:.78rem; }.individual-policy-copy a { display:inline-block; margin-top:14px; color:var(--blue); font-size:.8rem; font-weight:800; }.individual-policy-body { display:grid; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }.individual-policy-body p { margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.65; white-space:pre-wrap; }
.individual-policy-panel form { display:grid; gap:14px; }.individual-policy-panel .privacy-check { align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--blue) 8%,transparent); color:var(--ink); font-size:.89rem; font-weight:700; }.individual-policy-panel input[type="checkbox"] { flex:0 0 auto; width:21px; min-width:21px; height:21px; min-height:21px; margin:2px 0 0; accent-color:var(--blue); }.individual-policy-panel form button { justify-self:start; min-height:42px; padding:9px 17px; }.individual-policy-panel form button:disabled { cursor:not-allowed; filter:grayscale(.65); opacity:.5; transform:none; }.individual-policy-panel .individual-policy-skip-test { color:var(--ink-soft); border:1px solid var(--line); background:transparent; box-shadow:none; }.individual-policy-panel #individual-policy-status { margin:0; font-size:.79rem; }
@media (max-width:608px) { .individual-policy-topbar { min-height:54px; }.individual-policy-brand small { display:none; }.individual-policy-panel { width:min(100% - 24px,820px); margin-top:20px; padding:22px; border-radius:18px; }.individual-policy-panel h1 { font-size:clamp(2.2rem,13vw,3.3rem); }.individual-policy-panel form button { width:100%; }.individual-policy-body p { font-size:.86rem; } }
.privacy-agreement { margin-top:28px; }
.document-downloads { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }.document-downloads a,.billing-pdf { display:inline-flex; align-items:center; min-height:34px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:6px; color:var(--ink); font-size:.74rem; font-weight:750; text-decoration:none; }.document-downloads a:hover,.billing-pdf:hover { background:var(--surface-alt); }
.invoice-row .billing-pdf { justify-self:end; }.agreement-card .billing-pdf { position:absolute; left:22px; bottom:14px; }.agreement-card .billing-status + .billing-pdf { bottom:14px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:linear-gradient(115deg,rgba(45,21,146,.1),transparent 25%),linear-gradient(245deg,rgba(40,183,223,.13),transparent 34%),linear-gradient(180deg,var(--paper-warm),var(--paper) 42%,#e8f2ff); }
html[data-theme="dark"] body { background:linear-gradient(118deg,rgba(84,45,205,.21),transparent 27%),linear-gradient(247deg,rgba(11,99,206,.18),transparent 38%),linear-gradient(180deg,#121a2e,#0e1424 56%,#111d32); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.8; background-image:linear-gradient(rgba(17,23,39,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(17,23,39,.032) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,#000,transparent 86%); }
button,input { font:inherit; } button { min-height:38px; border:1px solid transparent; border-radius:999px; background:linear-gradient(135deg,var(--indigo),var(--blue) 57%,var(--cyan)); color:#fff; cursor:pointer; font-size:.82rem; font-weight:750; padding:8px 15px; box-shadow:0 8px 20px rgba(11,99,206,.16); transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; } button:hover { filter:saturate(1.16) brightness(1.04); transform:translateY(-1px); box-shadow:0 12px 26px rgba(11,99,206,.24); } button:focus-visible,input:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; } button:focus-visible { box-shadow:0 8px 20px rgba(11,99,206,.16); } input:focus-visible { box-shadow:var(--focus); }
.shell { min-height:100vh; padding:0 clamp(14px,2.5vw,34px) 30px; } #board-view:not([hidden]) { display:flex; flex-direction:column; height:100vh; min-height:0; }
body[data-view="portal"] { background:linear-gradient(180deg,#edf1eb 0%,#f9f9f4 47%,#e1e9e3 100%); --ink:#121712; --ink-soft:rgba(18,23,18,.72); --muted:rgba(18,23,18,.57); --paper:#eef2ed; --paper-warm:#fbfbf7; --surface:rgba(251,251,247,.83); --surface-solid:#fbfbf7; --surface-alt:#e9efeb; --line:rgba(18,23,18,.14); --line-strong:rgba(18,23,18,.25); --indigo:#1f3a33; --blue:#506b5c; --cyan:#9ab8b8; --shadow:0 24px 54px rgba(14,27,23,.13); --font-ui:"Avenir Next","Helvetica Neue",sans-serif; } body[data-view="portal"]::before { opacity:.42; background-image:linear-gradient(rgba(31,58,51,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,51,.045) 1px,transparent 1px); }
html[data-theme="dark"] body[data-view="portal"] { --ink:#f5f7f0; --ink-soft:rgba(245,247,240,.74); --muted:rgba(245,247,240,.58); --paper:#101b18; --paper-warm:#16231f; --surface:rgba(22,35,31,.84); --surface-solid:#16231f; --surface-alt:#20352e; --line:rgba(245,247,240,.15); --line-strong:rgba(245,247,240,.29); --indigo:#d49a74; --blue:#9ab8b8; --cyan:#dce9e6; --shadow:0 28px 64px rgba(0,0,0,.34); } html[data-theme="dark"] body[data-view="portal"] { background:radial-gradient(circle at 82% 8%,rgba(154,184,184,.18),transparent 30rem),linear-gradient(180deg,#101b18,#16231f 58%,#0d1714); }
#portal-view .shellbar { margin-bottom:8px; border-bottom-color:rgba(18,23,18,.16); background:rgba(251,251,247,.68); } html[data-theme="dark"] #portal-view .shellbar { background:rgba(16,27,24,.72); } .qi-monogram { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--line-strong); border-radius:50%; background:rgba(251,251,247,.6); color:var(--pine,#1f3a33); font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:.82rem; font-weight:700; letter-spacing:-.05em; } html[data-theme="dark"] .qi-monogram { color:#dce9e6; background:rgba(251,251,247,.06); }
#portal-view { min-height:100vh; } .portal-workspace { display:grid; grid-template-columns:184px minmax(0,1fr); gap:22px; max-width:1390px; margin:0 auto; padding:8px 0 36px; } .portal-rail { position:sticky; top:14px; align-self:start; display:grid; gap:7px; padding:12px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(22px); } .portal-rail-mark { display:grid; place-items:center; width:42px; height:42px; margin:0 0 12px; border-radius:13px; background:linear-gradient(135deg,var(--indigo),var(--blue),var(--cyan)); color:#fff; font-size:.85rem; font-weight:850; letter-spacing:.04em; text-decoration:none; } .portal-rail-link { min-height:34px; padding:8px; border:0; border-radius:9px; background:transparent; box-shadow:none; color:var(--ink-soft); font-size:.76rem; font-weight:800; text-align:left; text-decoration:none; } .portal-rail-link:hover,.portal-rail-link.active { background:rgba(11,99,206,.10); color:var(--blue); transform:none; box-shadow:none; } .portal-content { min-width:0; } .portal-hero { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:22px 0; } .portal-hero h1 { max-width:none; margin-bottom:8px; font-size:clamp(2.7rem,5vw,4.8rem); } .portal-hero .muted { max-width:600px; margin:0; } .portal-scope,.portal-app-card.inactive span { display:inline-flex; align-items:center; width:max-content; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.06em; padding:6px 9px; text-transform:uppercase; } .portal-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:28px; } .portal-summary article,.portal-app-card,.service-preview { border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(22px) saturate(1.25); } .portal-summary article { min-height:122px; padding:16px; border-radius:17px; } .portal-summary span,.portal-summary small { display:block; color:var(--muted); font-size:.72rem; font-weight:750; line-height:1.35; } .portal-summary strong { display:block; margin:7px 0; color:var(--ink); font-size:1.45rem; letter-spacing:-.04em; } .section-heading { margin:0 0 13px; } .section-heading h2 { margin-bottom:7px; font-size:1.55rem; } .section-heading .muted { max-width:760px; margin:0; } .portal-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .portal-app-card { display:flex; min-height:205px; flex-direction:column; justify-content:space-between; gap:15px; padding:20px; border-radius:20px; } .portal-app-card.active { position:relative; overflow:hidden; } .portal-app-card.active::after { content:""; position:absolute; right:-30px; bottom:-44px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(40,183,223,.27),transparent 67%); pointer-events:none; } .portal-app-card h3 { margin:6px 0 8px; color:var(--ink); font-size:1.22rem; letter-spacing:-.03em; } .portal-app-card p { max-width:45ch; margin:0; color:var(--ink-soft); font-size:.82rem; line-height:1.5; } .app-kicker { color:var(--blue); font-size:.68rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; } .portal-link-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; width:max-content; border-radius:999px; background:linear-gradient(135deg,var(--indigo),var(--blue) 57%,var(--cyan)); box-shadow:0 8px 20px rgba(11,99,206,.16); color:#fff; font-size:.82rem; font-weight:750; padding:8px 15px; text-decoration:none; } .available-heading { margin-top:31px; } .inactive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .portal-app-card.inactive { min-height:154px; opacity:.68; filter:saturate(.6); } .portal-app-card.inactive h3 { font-size:1rem; } .service-preview { margin-top:34px; padding:22px; border-radius:24px; } .service-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; } .service-tabs a { border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); font-size:.75rem; font-weight:800; padding:7px 10px; text-decoration:none; } .service-tabs a:hover { border-color:var(--blue); color:var(--blue); } .service-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .service-panels article { display:flex; min-height:310px; flex-direction:column; justify-content:space-between; padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--surface-alt); } .service-panels h3 { margin:6px 0 8px; font-size:1.08rem; } .service-panels p { color:var(--ink-soft); font-size:.8rem; line-height:1.45; } .service-panels dl { display:grid; gap:10px; } .service-panels dl div { padding-top:9px; border-top:1px solid var(--line); } .service-panels dt { color:var(--ink); font-size:.72rem; text-transform:none; letter-spacing:0; } .service-panels dd { color:var(--muted); font-size:.74rem; font-weight:600; line-height:1.4; } .service-panels button:disabled { cursor:not-allowed; filter:grayscale(.7); opacity:.58; }
.login-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,440px); gap:clamp(18px,3vw,42px); max-width:1180px; margin:clamp(28px,8vh,86px) auto 0; align-items:stretch; } .login-copy,.auth-card,.session-box,.metric,.lane,.card,.controls-panel { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(22px) saturate(1.25); }
.login-copy { display:grid; align-content:center; min-height:620px; padding:clamp(28px,5vw,64px); border-radius:32px 8px 32px 32px; position:relative; overflow:hidden; } .login-copy::after { content:"QI"; position:absolute; right:-.08em; bottom:-.22em; color:rgba(45,21,146,.055); font:750 clamp(7rem,18vw,13rem)/.84 var(--font-ui); letter-spacing:-.1em; pointer-events:none; } html[data-theme="dark"] .login-copy::after { color:rgba(132,105,255,.07); } .login-brand { display:flex; align-items:center; gap:.6rem; margin-bottom:36px; color:var(--ink); font-size:.88rem; font-weight:800; letter-spacing:.04em; } .login-brand img { width:2.25rem; height:2.25rem; } .auth-card { align-content:start; display:grid; min-height:620px; padding:clamp(24px,3vw,36px); border-radius:8px 32px 32px 32px; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:13ch; margin-bottom:18px; color:var(--ink); font-family:var(--font-ui); font-size:clamp(2.7rem,5.3vw,5.2rem); font-weight:750; letter-spacing:-.06em; line-height:.9; } .topbar h1 { max-width:none; font-size:clamp(2rem,3.4vw,3.35rem); } h2 { color:var(--ink); font-family:var(--font-ui); font-size:1.55rem; font-weight:750; letter-spacing:-.04em; margin:0; } h3 { font-family:var(--font-ui); } .lane h2 { font-family:inherit; font-size:.91rem; font-weight:700; } .eyebrow,.step-label { margin:0 0 9px; color:var(--blue); font-size:.7rem; font-weight:850; letter-spacing:.125em; text-transform:uppercase; } .muted,.hint { color:var(--muted); line-height:1.58; } .hint { font-size:.79rem; margin:-4px 0 0; } .login-copy .muted { max-width:38rem; font-size:1.05rem; } .tag,.slice-id,.count { border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.3); color:var(--ink-soft); font-size:.69rem; font-weight:800; padding:4px 8px; } html[data-theme="dark"] .tag,html[data-theme="dark"] .slice-id,html[data-theme="dark"] .count { background:rgba(255,255,255,.055); }
label { color:var(--muted); display:grid; gap:6px; font-size:.78rem; font-weight:800; } input { width:100%; min-height:39px; border:1px solid var(--line-strong); border-radius:11px; background:var(--surface-solid); color:var(--ink); padding:8px 11px; } .error { border-left:3px solid var(--red); color:var(--red); font-weight:700; margin:0; padding-left:10px; }
.form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; } .form-heading .theme-toggle { flex:0 0 auto; } .auth-form { display:grid; gap:15px; align-content:start; } .auth-status { min-height:1.4em; margin:0 0 12px; color:var(--green); font-size:.78rem; font-weight:750; line-height:1.45; } .auth-card > .error { margin:0 0 14px; padding:7px 0 7px 12px; } .text-button { min-height:auto; padding:4px; border:0; border-radius:4px; background:transparent; box-shadow:none; color:var(--blue); font-size:.78rem; text-align:left; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .text-button:hover { transform:none; box-shadow:none; filter:none; color:var(--indigo); } .text-button:focus-visible { box-shadow:var(--focus); }
.access-sequence { display:grid; gap:11px; margin:30px 0 0; padding:0; list-style:none; position:relative; z-index:1; } .access-sequence li { display:grid; grid-template-columns:38px 92px minmax(0,1fr); align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); } .access-sequence li > span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%; color:var(--blue); font:700 .68rem/1 var(--font-ui); } .access-sequence strong { font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; } .access-sequence small { color:var(--muted); font-size:.76rem; line-height:1.35; }
.qr-frame { display:grid; place-items:center; min-height:276px; padding:10px; border:1px solid var(--line); border-radius:18px; background:#fff; } .qr-frame img { width:min(100%,256px); height:auto; } .manual-key { display:grid; gap:6px; padding:12px; border:1px dashed var(--line-strong); border-radius:12px; background:var(--surface-alt); } .manual-key span,.recovery-header span { color:var(--muted); font-size:.67rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .manual-key output { color:var(--ink); font-family:var(--font-code); font-size:.82rem; font-weight:750; letter-spacing:.08em; overflow-wrap:anywhere; user-select:all; }
.one-time-note { margin:0; padding:10px 12px; border-left:3px solid var(--amber); background:rgba(166,93,5,.08); color:var(--ink-soft); font-size:.76rem; font-weight:700; line-height:1.45; } .recovery-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; } .recovery-header p { margin:0; color:var(--ink); font-family:var(--font-ui); font-size:1.15rem; font-weight:750; } .recovery-header span { color:var(--amber); } .recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; width:100%; min-width:0; margin:0; padding:14px 16px 14px 36px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); } .recovery-grid li { min-width:0; padding-left:2px; color:var(--muted); font-size:.67rem; } .recovery-grid output { display:inline; min-width:0; color:var(--ink); font-family:var(--font-code); font-size:clamp(.66rem,1.7vw,.75rem); font-weight:750; letter-spacing:.025em; overflow-wrap:anywhere; user-select:all; } .recovery-notice { padding:18px; border:1px solid rgba(166,93,5,.28); border-radius:16px; background:rgba(166,93,5,.07); } .recovery-notice h3 { margin-bottom:8px; font-size:1.45rem; } .recovery-notice p:not(.eyebrow) { color:var(--ink-soft); font-size:.82rem; line-height:1.5; }
.authenticator-steps { min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); } .authenticator-steps-title { margin:0 0 11px; color:var(--ink); font-family:var(--font-ui); font-size:.98rem; font-weight:800; letter-spacing:-.02em; } .authenticator-steps ol { display:grid; width:100%; gap:10px; margin:0; padding:0; list-style:none; counter-reset:authenticator-step; } .authenticator-steps li { display:grid; grid-template-columns:25px minmax(0,1fr); column-gap:9px; min-width:0; } .authenticator-steps li::before { content:counter(authenticator-step); counter-increment:authenticator-step; display:grid; grid-column:1; grid-row:1 / span 2; place-items:center; align-self:start; width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font:800 .67rem/1 var(--font-ui); } .authenticator-steps li strong,.authenticator-steps li span { grid-column:2; min-width:0; } .authenticator-steps li strong { display:block; color:var(--ink); font-size:.76rem; line-height:1.25; } .authenticator-steps li span { display:block; margin-top:2px; color:var(--muted); font-size:.74rem; font-weight:600; line-height:1.4; } .authenticator-steps li b { color:var(--ink-soft); } .authenticator-steps-meta { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.shellbar { align-items:center; display:flex; justify-content:space-between; gap:16px; flex:0 0 auto; margin:0 calc(-1 * clamp(14px,2.5vw,34px)) 18px; min-height:62px; padding:9px clamp(14px,2.5vw,34px); border-bottom:1px solid var(--line); background:rgba(250,252,255,.72); backdrop-filter:blur(24px) saturate(1.4); } html[data-theme="dark"] .shellbar { background:rgba(14,20,36,.74); } .shellbar-brand,.shellbar-actions { display:flex; align-items:center; gap:10px; min-width:0; } .brand-mark { width:35px; height:35px; flex:0 0 auto; } .shellbar-brand strong { display:block; font-size:.82rem; letter-spacing:.035em; } .shellbar-brand small { display:block; color:var(--muted); font-size:.67rem; margin-top:2px; } .shellbar-actions > span { color:var(--muted); font-size:.78rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shellbar-actions #logout,.theme-toggle,.clear-search { background:transparent; border-color:var(--line-strong); color:var(--ink); box-shadow:none; } .theme-toggle { display:grid; place-items:center; min-height:34px; width:34px; padding:0; font-size:1rem; }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,460px); gap:20px; align-items:end; flex:0 0 auto; margin:0 0 12px; } .session-box { padding:15px; border-radius:18px; } .session-box dl,.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; } dt { color:var(--muted); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; } dd { margin:4px 0 0; color:var(--ink); font-size:.78rem; font-weight:750; overflow-wrap:anywhere; }
.metrics { grid-template-columns:repeat(7,minmax(108px,1fr)); flex:0 0 auto; width:100%; margin:0 0 12px; overflow-x:auto; padding-bottom:2px; } .metric { min-height:78px; padding:12px; border-radius:16px; } .metric strong { display:block; margin-top:9px; color:var(--ink); font-size:1.42rem; font-weight:700; line-height:1; letter-spacing:-.04em; }
.controls-panel { align-items:end; display:grid; grid-template-columns:minmax(260px,520px) max-content minmax(140px,1fr); gap:10px; flex:0 0 auto; margin:0 0 10px; padding:12px; border-radius:18px; } .search-field { gap:5px; } .search-field span { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .search-field input { padding-left:34px; background-color:var(--surface-solid); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b63ce' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-position:11px 50%; background-repeat:no-repeat; } .clear-search { align-self:end; min-height:39px; } .search-result { align-self:end; margin:0 0 10px; color:var(--muted); font-size:.78rem; font-weight:700; }
.board-scrollbar-wrap { align-items:center; display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:8px; flex:0 0 auto; margin:0 0 9px; } .board-scrollbar { height:14px; overflow-x:auto; border-radius:999px; background:rgba(11,99,206,.08); } .board-scrollbar-inner { height:1px; } .board-scrollbar::-webkit-scrollbar { height:10px; } .board-scrollbar::-webkit-scrollbar-thumb { border:2px solid rgba(11,99,206,.08); border-radius:999px; background:linear-gradient(90deg,var(--indigo),var(--blue),var(--cyan)); } .scroll-hint { color:var(--muted); font-size:.7rem; font-weight:750; white-space:nowrap; }
.board { align-items:start; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(470px,550px); gap:13px; flex:0 0 auto; height:calc(100vh - 276px); min-height:580px; overflow-x:auto; padding-bottom:8px; width:100%; } .lane { display:flex; flex-direction:column; height:100%; min-height:0; min-width:470px; padding:10px; border-radius:20px; background:color-mix(in srgb,var(--surface) 72%,var(--surface-alt)); } .lane-head { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; margin:-2px 0 10px; padding:4px 3px 11px; border-bottom:1px solid var(--line); } .count { color:var(--blue); min-width:27px; text-align:center; } .lane-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px; scrollbar-gutter:stable; } .lane-body::-webkit-scrollbar { width:8px; } .lane-body::-webkit-scrollbar-thumb { border-radius:999px; background:var(--line-strong); }
.card { height:auto; margin-bottom:9px; overflow:hidden; padding:12px; border-radius:15px; box-shadow:none; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; } .card:hover { border-color:rgba(11,99,206,.43); transform:translateY(-2px); box-shadow:0 12px 24px rgba(31,72,137,.13); } .card-topline { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) 28px; gap:7px; align-items:start; margin-bottom:7px; } .slice-id { display:block; border-radius:7px; color:var(--blue); line-height:1.22; overflow-wrap:anywhere; } .project-title { color:var(--muted); font-size:.68rem; font-weight:850; line-height:1.25; overflow-wrap:anywhere; text-transform:uppercase; letter-spacing:.04em; } .icon-button { display:grid; place-items:center; width:28px; height:28px; min-height:28px; padding:0; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); box-shadow:none; } .icon-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; } .icon-button:hover { color:var(--red); border-color:rgba(239,77,98,.48); } .icon-button:disabled { cursor:progress; opacity:.55; } .card h3 { margin:0 0 6px; color:var(--ink); font-size:.94rem; font-weight:750; line-height:1.25; overflow-wrap:anywhere; } .card p { color:var(--ink-soft); margin:0 0 8px; } .summary { font-size:.81rem; line-height:1.43; overflow-wrap:anywhere; } .tags { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; } .tag { padding:3px 7px; } .critical,.status-fail { border-color:rgba(239,77,98,.43); color:var(--red); background:rgba(239,77,98,.08); } .high,.status-blocked { border-color:rgba(244,183,75,.52); color:var(--amber); background:rgba(244,183,75,.11); } .medium,.status-decision { border-color:rgba(11,99,206,.36); color:var(--blue); background:rgba(11,99,206,.07); } .low,.status-pass { border-color:rgba(23,122,88,.36); color:var(--green); background:rgba(23,122,88,.08); } .status-closed { color:var(--muted); background:var(--surface-alt); } .evidence { border:1px solid var(--line); border-radius:9px; background:var(--surface-alt); color:var(--muted); font-size:.74rem; overflow-wrap:anywhere; padding:6px 8px; } .next { border-left:3px solid var(--cyan); font-size:.78rem; line-height:1.35; padding-left:8px; } .ops-details { margin:8px 0; overflow:hidden; border:1px solid var(--line); border-radius:9px; } .ops-details summary { padding:6px 8px; background:var(--surface-alt); cursor:pointer; font-size:.74rem; font-weight:800; } .ops-details dl { display:grid; gap:0; margin:0; } .ops-details div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:6px; padding:8px; border-top:1px solid var(--line); } .ops-details dd { font-size:.78rem; line-height:1.35; font-weight:600; } .missing { margin:10px 0; padding:8px; border:1px solid rgba(239,77,98,.43); border-radius:9px; color:var(--red); font-size:.78rem; font-weight:700; } .empty-lane { padding:10px 4px; }
/* Quantum Intelligence portal: calm editorial surfaces, alpine palette, deliberate copper accent. */
#portal-view .portal-hero { min-height:315px; align-items:flex-end; padding:46px clamp(24px,5vw,72px); border:1px solid rgba(251,251,247,.12); background:linear-gradient(100deg,rgba(8,15,13,.94) 0%,rgba(22,35,31,.88) 54%,rgba(22,35,31,.59) 100%); box-shadow:var(--shadow); color:#fbfbf7; } #portal-view .portal-hero h1 { color:#fbfbf7; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:500; letter-spacing:-.045em; line-height:.94; } #portal-view .portal-hero .muted { color:rgba(251,251,247,.74); font-size:1rem; } #portal-view .portal-hero .eyebrow { color:#d49a74; } #portal-view .portal-scope { border-color:rgba(251,251,247,.3); color:rgba(251,251,247,.78); } #portal-view .portal-summary { gap:1px; background:var(--line); border:1px solid var(--line); } #portal-view .portal-summary article { border:0; border-radius:0; box-shadow:none; backdrop-filter:none; background:var(--surface-solid); } #portal-view .section-heading h2,#portal-view .portal-app-card h3,#portal-view .service-panels h3 { font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:500; letter-spacing:-.025em; } #portal-view .portal-card-grid { gap:1px; background:var(--line); border:1px solid var(--line); } #portal-view .portal-app-card { border:0; border-radius:0; box-shadow:none; backdrop-filter:none; background:var(--surface-solid); } #portal-view .portal-app-card.active::after { background:radial-gradient(circle,rgba(180,111,66,.18),transparent 67%); } #portal-view .app-kicker,#portal-view .eyebrow { color:#b46f42; } #portal-view .portal-link-button,#portal-view .portal-app-card.active button { border-radius:0; background:#1f3a33; box-shadow:none; } #portal-view .portal-link-button:hover,#portal-view .portal-app-card.active button:hover { background:#506b5c; } #portal-view .portal-app-card.inactive { filter:none; opacity:1; background:color-mix(in srgb,var(--surface-solid) 65%,var(--surface-alt)); } #portal-view .portal-app-card.inactive span { border-color:var(--line); color:var(--muted); } #portal-view .service-preview { border-radius:0; box-shadow:none; background:#16231f; color:#fbfbf7; } #portal-view .service-preview h2 { color:#fbfbf7; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:500; } #portal-view .service-preview .muted { color:rgba(251,251,247,.7); } #portal-view .service-tabs a { border-radius:0; border-color:rgba(251,251,247,.28); color:rgba(251,251,247,.75); } #portal-view .service-tabs a:hover { border-color:#d49a74; color:#d49a74; } #portal-view .service-panels article { border-radius:0; border-color:rgba(251,251,247,.15); background:rgba(251,251,247,.055); } #portal-view .service-panels h3,#portal-view .service-panels dt { color:#fbfbf7; } #portal-view .service-panels p,#portal-view .service-panels dd { color:rgba(251,251,247,.68); } #portal-view .service-panels dl div { border-top-color:rgba(251,251,247,.14); } #portal-view .service-panels button { border-radius:0; background:rgba(251,251,247,.1); border-color:rgba(251,251,247,.2); color:rgba(251,251,247,.75); box-shadow:none; } #portal-view .portal-rail { border-radius:0; box-shadow:none; background:var(--surface-solid); } #portal-view .portal-rail-mark { border-radius:50%; background:#1f3a33; box-shadow:none; font-family:"Iowan Old Style",Palatino,Georgia,serif; } #portal-view .portal-rail-link { border-radius:0; } #portal-view .portal-rail-link:hover,#portal-view .portal-rail-link.active { background:#dce9e6; color:#1f3a33; }
/* Portal shell: familiar productivity-suite structure with a QI editorial character. */
#portal-view { position:relative; }
#portal-view .portal-commandbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; min-height:56px; margin:0 calc(-1 * clamp(14px,2.5vw,34px)); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface-solid) 93%,transparent); backdrop-filter:blur(18px); }
#portal-view .portal-commandbar-left,#portal-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
#portal-view .app-launcher { display:grid; width:38px; min-height:38px; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:#1f3a33; box-shadow:none; }
#portal-view .app-launcher:hover,#portal-view .app-launcher[aria-expanded="true"] { background:#dce9e6; transform:none; box-shadow:none; }
#portal-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); grid-template-rows:repeat(3,4px); gap:3px; }
#portal-view .waffle-icon i { display:block; width:4px; height:4px; border-radius:1px; background:currentColor; }
#portal-view .portal-wordmark { display:flex; align-items:center; gap:8px; font-size:.81rem; font-weight:800; letter-spacing:.015em; white-space:nowrap; }
#portal-view .qi-monogram { width:27px; height:27px; border:0; border-radius:6px; background:#1f3a33; color:#fff; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:.72rem; }
#portal-view .portal-product { padding-left:12px; border-left:1px solid var(--line); color:var(--muted); font-size:.78rem; font-weight:650; white-space:nowrap; }
#portal-view .portal-icon-button { border-color:transparent; }
#portal-view .profile-wrap { position:relative; }
#portal-view .profile-trigger { display:flex; align-items:center; min-height:44px; gap:8px; padding:3px 7px 3px 3px; border:0; border-radius:7px; background:transparent; color:var(--ink); box-shadow:none; text-align:left; }
#portal-view .profile-trigger:hover,#portal-view .profile-trigger[aria-expanded="true"] { background:var(--surface-alt); transform:none; box-shadow:none; }
#portal-view .portal-avatar { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border-radius:50%; background:#b46f42; color:#fff; font-size:.72rem; font-weight:850; letter-spacing:.03em; }
#portal-view .portal-avatar.has-photo { color:transparent; background-color:#b46f42; background-image:var(--avatar-image); background-position:center; background-size:cover; }
#portal-view .profile-trigger-copy { display:grid; gap:1px; line-height:1.1; }
#portal-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }
#portal-view .profile-trigger-copy small { color:var(--muted); font-size:.64rem; }
#portal-view .chevron { color:var(--muted); font-size:1rem; line-height:.7; }
#portal-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 9px); right:0; width:min(318px,calc(100vw - 28px)); padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); box-shadow:0 18px 44px rgba(14,27,23,.18); }
#portal-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
#portal-view .profile-menu-identity .portal-avatar { width:42px; height:42px; font-size:.84rem; }
#portal-view .profile-menu-identity div { min-width:0; } #portal-view .profile-menu-identity strong,#portal-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#portal-view .profile-menu-identity strong { font-size:.83rem; } #portal-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.7rem; }
#portal-view .profile-menu-meta { display:flex; justify-content:space-between; padding:14px 0; color:var(--muted); font-size:.72rem; } #portal-view .profile-menu-meta strong { color:var(--ink); }
#portal-view .profile-learning-link,#billing-app-view .profile-learning-link,#services-app-view .profile-learning-link,#glossary-app-view .profile-learning-link,#board-view .profile-learning-link { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; padding:10px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; color:var(--muted); background:transparent; font:.72rem/1.2 var(--font-ui); text-align:left; cursor:pointer; box-shadow:none; transform:none; }.profile-learning-link strong { color:var(--portal-violet); font:800 .72rem/1.2 var(--font-ui); }.profile-learning-link:hover,.profile-learning-link:focus-visible { color:var(--portal-violet); background:transparent; box-shadow:none; transform:none; }.profile-learning-link:focus-visible { outline:2px solid var(--portal-violet); outline-offset:3px; }
#portal-view .profile-signout { width:100%; border-radius:6px; background:transparent; border-color:var(--line-strong); color:var(--ink); box-shadow:none; }
#portal-view .profile-photo-actions { display:grid; gap:7px; padding:0 0 14px; }
#portal-view .profile-photo-button,#portal-view .profile-photo-remove { display:flex; align-items:center; justify-content:center; min-height:34px; padding:7px 9px; border:1px solid var(--line-strong); border-radius:6px; background:transparent; color:var(--ink); box-shadow:none; cursor:pointer; font-size:.71rem; font-weight:750; text-align:center; }
#portal-view .profile-photo-button:hover,#portal-view .profile-photo-remove:hover { background:var(--surface-alt); transform:none; box-shadow:none; }
#portal-view .profile-photo-actions small { color:var(--muted); font-size:.62rem; line-height:1.35; }
#portal-view .app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); box-shadow:0 20px 48px rgba(14,27,23,.19); }
#portal-view .app-launcher-title { margin:0 0 14px; color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
#portal-view .app-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#portal-view .launcher-item { display:flex; align-items:flex-start; min-height:79px; gap:9px; padding:10px; border-radius:7px; color:var(--muted); font-size:.72rem; font-weight:750; line-height:1.25; text-decoration:none; }
#portal-view button.launcher-item { border:0; background:transparent; box-shadow:none; text-align:left; } #portal-view .launcher-item.launcher-active { color:var(--ink); cursor:pointer; } #portal-view .launcher-active:hover { background:var(--surface-alt); transform:none; box-shadow:none; }
#portal-view .launcher-item span:last-child { display:grid; gap:4px; } #portal-view .launcher-item small { color:var(--muted); font-size:.61rem; font-weight:600; }
#portal-view .launcher-glyph { display:grid; flex:0 0 auto; width:29px; height:29px; place-items:center; border-radius:6px; background:#1f3a33; color:#fff; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:700; } #portal-view .muted-glyph { background:#aebbb3; }
#portal-view .portal-workspace { display:block; max-width:1240px; padding:32px 0 52px; }
#portal-view .portal-hero { min-height:0; padding:0 0 25px; border:0; border-bottom:1px solid var(--line); background:transparent; box-shadow:none; color:var(--ink); }
#portal-view .portal-hero h1 { color:var(--ink); font-size:clamp(2.2rem,4.3vw,3.6rem); line-height:1.03; } #portal-view .portal-hero .muted { color:var(--ink-soft); font-size:.94rem; }
#portal-view .portal-scope { align-self:center; border-color:var(--line-strong); color:var(--muted); }
#portal-view .portal-summary { grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0 38px; border:0; background:transparent; gap:0; }
#portal-view .portal-summary article { min-height:101px; padding:10px 20px; border:0; border-left:1px solid var(--line); background:transparent; } #portal-view .portal-summary article:first-child { padding-left:0; border-left:0; }
#portal-view .portal-summary strong { margin:6px 0; font-size:1.34rem; }
#portal-view .section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; } #portal-view .section-heading .eyebrow { margin-bottom:4px; }
#portal-view .portal-card-grid { gap:14px; border:0; background:transparent; } #portal-view .portal-app-card { min-height:194px; padding:22px; border:1px solid var(--line); border-radius:9px; background:var(--surface-solid); }
#portal-view .portal-app-card.active { border-top:3px solid #1f3a33; } #portal-view .portal-app-card.active::after { display:none; }
#portal-view .portal-app-card h3 { font-family:var(--font-ui); font-size:1.08rem; font-weight:800; letter-spacing:-.015em; }
#portal-view .portal-link-button,#portal-view .portal-app-card.active button { border-radius:6px; }
#portal-view .available-heading { margin-top:44px; } #portal-view .inactive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#portal-view .portal-app-card.inactive { min-height:142px; border:1px solid var(--line); background:var(--surface-alt); } #portal-view .portal-app-card.inactive h3 { font-size:.92rem; }
#portal-view .service-preview { margin-top:48px; border-radius:9px; } #portal-view .service-tabs a,#portal-view .service-panels article,#portal-view .service-panels button { border-radius:6px; }
html[data-theme="dark"] #portal-view .app-launcher { color:#dce9e6; } html[data-theme="dark"] #portal-view .app-launcher:hover,html[data-theme="dark"] #portal-view .app-launcher[aria-expanded="true"] { background:#294138; }
@media (max-width:1280px) { .topbar { grid-template-columns:1fr; } .board { grid-auto-columns:minmax(440px,520px); } }
@media (max-width:760px) { body { overflow:auto; } .shell { padding:0 14px 24px; } #board-view:not([hidden]) { height:auto; min-height:100vh; } .login-panel { grid-template-columns:1fr; margin:18px auto 28px; } .login-copy { min-height:auto; padding:30px 24px; border-radius:24px 24px 8px 8px; } .auth-card { min-height:0; padding:24px 20px 28px; border-radius:8px 8px 24px 24px; } .login-copy h1 { font-size:clamp(2.5rem,14vw,4rem); } .access-sequence li { grid-template-columns:36px 76px minmax(0,1fr); gap:8px; } .recovery-grid { grid-template-columns:1fr; } .qr-frame { min-height:230px; } .shellbar { margin:0 -14px 18px; padding:9px 14px; } .shellbar-actions > span { max-width:92px; } .topbar { gap:12px; } .session-box dl,.controls-panel,.ops-details div,.card-topline { grid-template-columns:1fr; } .metrics { grid-template-columns:repeat(7,130px); } .search-result { margin:0; } .board { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; height:auto; min-height:0; overflow:visible; } .board-scrollbar-wrap { display:none; } .lane { height:700px; max-height:76vh; min-height:570px; min-width:0; } }
@media (max-width:760px) { #portal-view .portal-workspace { grid-template-columns:1fr; gap:12px; } #portal-view .portal-rail { position:static; display:flex; align-items:center; overflow-x:auto; padding:8px; } #portal-view .portal-rail-mark { flex:0 0 38px; margin:0 5px 0 0; } #portal-view .portal-rail-link { flex:0 0 auto; white-space:nowrap; } #portal-view .portal-hero { min-height:270px; align-items:flex-start; flex-direction:column; padding:30px 24px; } #portal-view .portal-summary,#portal-view .portal-card-grid,#portal-view .inactive-grid,#portal-view .service-panels { grid-template-columns:1fr; } #portal-view .portal-summary { gap:1px; } #portal-view .portal-app-card { min-height:170px; } #portal-view .service-preview { padding:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media (max-width:760px) {
  #portal-view .portal-commandbar { min-height:54px; } #portal-view .portal-product { display:none; }
  #portal-view .profile-trigger-copy,#portal-view .chevron { display:none; } #portal-view .portal-commandbar-left,#portal-view .portal-commandbar-right { gap:7px; }
  #portal-view .app-launcher-menu { top:61px; padding:13px; } #portal-view .app-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #portal-view .portal-workspace { display:block; padding:24px 0 38px; } #portal-view .portal-hero { padding-bottom:20px; }
  #portal-view .portal-summary { grid-template-columns:1fr; margin:19px 0 31px; } #portal-view .portal-summary article,#portal-view .portal-summary article:first-child { min-height:0; padding:12px 0; border:0; border-top:1px solid var(--line); }
  #portal-view .portal-summary article:first-child { border-top:0; } #portal-view .section-heading { align-items:start; flex-direction:column; gap:5px; }
  #portal-view .portal-card-grid,#portal-view .inactive-grid { gap:10px; } #portal-view .portal-app-card { min-height:168px; }
}

/* Portal refinement: a light, luminous KI Atelier palette for the QI Client Portal. */
#portal-view {
  --portal-night: #20285d;
  --portal-indigo: #453bb9;
  --portal-blue: #2588d8;
  --portal-cyan: #59d4e7;
  --portal-lilac: #c7c1ff;
  --portal-glow: rgba(89,212,231,.22);
  isolation: isolate;
}
#portal-view::before {
  position: fixed;
  z-index: -1;
  inset: 56px 0 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(62rem 42rem at -8% 7%, rgba(89,212,231,.18), transparent 62%),
    radial-gradient(48rem 34rem at 104% 13%, rgba(199,193,255,.22), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(241,246,255,.28));
}
#portal-view .portal-commandbar {
  min-height:64px;
  border-bottom-color:rgba(255,255,255,.2);
  background:linear-gradient(100deg, #2d2582 0%, #3e43aa 54%, #2285cf 115%);
  box-shadow:0 9px 28px rgba(35,42,128,.18);
}
#portal-view .portal-wordmark,#portal-view .portal-product,#portal-view .profile-trigger { color:#f7fffc; }
#portal-view .portal-product { border-left-color:rgba(255,255,255,.22); color:rgba(247,255,252,.72); }
#portal-view .qi-logo-mark {
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(8, 12, 52, .25));
}
/* The Ärztezentrum Bettlach wordmark is intentionally framed as a header
   mark: retain the shared 30px square while showing its distinctive emblem
   and primary wordmark at a legible scale. */
#portal-view .qi-logo-mark[src*="aerztezentrum-bettlach-header-crop"] {
  /* The supplied mark is a wide lockup. Contain preserves every letter;
     cover crops it in a square frame. Removing the shared inset still makes
     this the largest undistorted, fully visible rendering in the 32px tile. */
  object-fit:contain;
  object-position:center;
  padding:0;
}
#portal-view .app-launcher { color:#f7fffc; border-radius:12px; }
#portal-view .app-launcher:hover,#portal-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.16); }
#portal-view .portal-icon-button { border-color:rgba(255,255,255,.18); color:#f7fffc; }
#portal-view .portal-icon-button:hover { background:rgba(255,255,255,.16); }
#portal-view .profile-trigger:hover,#portal-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.1); }
#portal-view .profile-trigger-copy small,#portal-view .chevron { color:rgba(247,255,252,.7); }
#portal-view .portal-avatar {
  border:2px solid rgba(255,255,255,.6);
  background:linear-gradient(145deg, #8b7df7, #32bfdc);
  box-shadow:0 4px 13px rgba(0,0,0,.2);
}
#portal-view .portal-workspace { max-width:1280px; padding:42px 0 72px; }
#portal-view .portal-hero {
  position:relative;
  display:flex;
  min-height:230px;
  align-items:flex-end;
  overflow:hidden;
  padding:38px clamp(26px,5vw,64px);
  border:1px solid rgba(106,129,232,.19);
  border-radius:24px;
  background:
    radial-gradient(circle at 82% 12%, rgba(89,212,231,.38), transparent 27%),
    radial-gradient(circle at 15% 112%, rgba(199,193,255,.34), transparent 32%),
    linear-gradient(125deg, #30288b 0%, #3d53bd 56%, #238bd2 130%);
  box-shadow:0 22px 58px rgba(49,60,164,.2);
}
#portal-view .portal-hero::after {
  position:absolute;
  inset:0;
  content:"";
  opacity:.35;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(105deg, transparent 8%, #000 60%, transparent 100%);
}
#portal-view .portal-hero > * { position:relative; z-index:1; }
#portal-view .portal-hero h1,#portal-view .section-heading h2,#portal-view .portal-app-card h3,#portal-view .service-panels h3 {
  font-family:var(--font-ui);
  font-weight:750;
  letter-spacing:-.038em;
}
#portal-view .portal-hero h1 { color:#fff; font-size:clamp(2.45rem,4.8vw,4.25rem); line-height:.99; }
#portal-view .portal-hero .eyebrow,#portal-view .app-kicker,#portal-view .eyebrow { color:var(--portal-indigo); }
#portal-view .portal-hero .eyebrow { color:#b9eefa; }
#portal-view .portal-hero .muted { max-width:600px; color:rgba(247,255,252,.82); }
#portal-view .portal-scope { align-self:flex-start; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.08); color:#f7fffc; backdrop-filter:blur(8px); }
#portal-view .portal-summary { gap:14px; margin:26px 0 44px; }
#portal-view .portal-summary article {
  min-height:113px;
  padding:15px 19px;
  border:1px solid rgba(62,70,168,.11);
  border-left:1px solid rgba(62,70,168,.11);
  border-radius:16px;
  background:rgba(255,255,255,.6);
  box-shadow:0 10px 25px rgba(39,65,159,.07);
  backdrop-filter:blur(14px);
}
#portal-view .portal-summary article:first-child { padding-left:19px; border-left:1px solid rgba(62,70,168,.11); }
#portal-view .portal-summary strong { color:var(--portal-indigo); }
#portal-view .portal-card-grid { gap:18px; }
#portal-view .portal-app-card {
  min-height:208px;
  padding:25px;
  border:1px solid rgba(62,70,168,.13);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(238,245,255,.76));
  box-shadow:0 13px 34px rgba(39,65,159,.09);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
#portal-view .portal-app-card.active { border-top:1px solid rgba(62,70,168,.13); }
#portal-view .portal-app-card.active::after {
  display:block;
  top:auto;
  right:-18%;
  bottom:-47%;
  width:180px;
  height:180px;
  background:radial-gradient(circle, var(--portal-glow), transparent 69%);
}
#portal-view .portal-app-card.active:hover { border-color:rgba(89,212,231,.56); transform:translateY(-5px); box-shadow:0 22px 43px rgba(39,65,159,.15); }
#portal-view .portal-app-card h3 { font-size:1.28rem; }
#portal-view .portal-link-button,#portal-view .portal-app-card.active button {
  border-radius:12px;
  background:linear-gradient(105deg, #4037b5, #2589d8);
  box-shadow:0 8px 18px rgba(54,62,181,.2);
}
#portal-view .portal-link-button:hover,#portal-view .portal-app-card.active button:hover { background:linear-gradient(105deg, #554dcc, #35a5df); transform:translateY(-1px); }
#portal-view .available-heading { margin-top:54px; }
#portal-view .inactive-grid { gap:14px; }
#portal-view .portal-app-card.inactive {
  min-height:150px;
  border:1px dashed rgba(62,70,168,.2);
  border-radius:17px;
  background:rgba(241,246,255,.68);
}
#portal-view .portal-app-card.inactive span { border-radius:999px; background:rgba(62,70,168,.07); }
#portal-view .service-preview {
  margin-top:58px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at 96% 0%, rgba(89,212,231,.28), transparent 32%),
    linear-gradient(135deg, #28216f, #3647a8 59%, #2589d8);
  box-shadow:0 24px 58px rgba(39,65,159,.22);
}
#portal-view .service-tabs a { border-radius:999px; transition:background .18s ease,border-color .18s ease,color .18s ease; }
#portal-view .service-tabs a:hover { border-color:var(--portal-cyan); background:rgba(75,199,219,.13); color:#e9ffff; }
#portal-view .service-panels article { border-radius:16px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }
#portal-view .service-panels button { border-radius:10px; }
.client-module-list { display:grid; gap:10px; margin-top:20px; }
.client-module-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); }
.client-module-item strong { min-width:0; overflow-wrap:anywhere; }
.client-module-item span { grid-column:1 / -1; color:rgba(255,255,255,.8); font-size:.9rem; }
.client-status { align-self:start; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; text-transform:capitalize; white-space:nowrap; }
.client-status-paid,.client-status-completed,.client-status-operational { background:rgba(48,183,127,.3); }
.client-status-overdue,.client-status-blocked,.client-status-degraded { background:rgba(239,77,98,.32); }
.client-status-maintenance,.client-status-in_progress { background:rgba(244,183,75,.3); }
#portal-view .app-launcher-menu,#portal-view .profile-menu {
  border-color:rgba(20,65,53,.14);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 54px rgba(8,31,25,.22);
  backdrop-filter:blur(22px);
}
#portal-view .launcher-item { border-radius:12px; }
#portal-view .launcher-glyph { border-radius:10px; background:linear-gradient(145deg,#4d42c4,#31afd9); }

html[data-theme="dark"] #portal-view::before { background:radial-gradient(60rem 42rem at -8% 7%,rgba(89,212,231,.13),transparent 62%),radial-gradient(48rem 34rem at 104% 13%,rgba(139,125,247,.15),transparent 64%),#111635; }
html[data-theme="dark"] #portal-view .portal-summary article,html[data-theme="dark"] #portal-view .portal-app-card { border-color:rgba(199,193,255,.15); background:linear-gradient(145deg,rgba(36,45,108,.92),rgba(25,32,82,.86)); }
html[data-theme="dark"] #portal-view .portal-summary strong { color:#b8ecf4; }
html[data-theme="dark"] #portal-view .portal-app-card.inactive { background:rgba(30,37,91,.72); border-color:rgba(199,193,255,.2); }
html[data-theme="dark"] #portal-view .app-launcher-menu,html[data-theme="dark"] #portal-view .profile-menu { background:rgba(28,35,86,.96); border-color:rgba(199,193,255,.16); }
html[data-theme="dark"] #portal-view .portal-icon-button { color:#f7fffc; }

@media (max-width:760px) {
  #portal-view .portal-workspace { padding-top:28px; }
  #portal-view .portal-hero { min-height:220px; padding:30px 24px; border-radius:19px; }
  #portal-view .portal-summary { gap:0; }
  #portal-view .portal-summary article,#portal-view .portal-summary article:first-child { padding:13px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  #portal-view .portal-summary article:first-child { border-top:0; }
  #portal-view .portal-app-card { border-radius:16px; }
}

/* Billing & Agreements is a dedicated commercial application, deliberately
   separate from delivery and support work. */
#billing-app-view { min-height:100vh; color:#1c1930; background:#f6f3ed; }
#billing-app-view[hidden] { display:none; }
.billing-commandbar { display:flex; min-height:68px; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid rgba(28,25,48,.12); background:rgba(246,243,237,.92); backdrop-filter:blur(18px); }
.billing-back,.billing-signout { border:0; background:transparent; color:#352f57; font:700 .78rem/1 var(--font-ui); letter-spacing:.02em; cursor:pointer; }
.billing-back { display:flex; align-items:center; gap:8px; padding:8px 0; }.billing-back:first-letter { font-size:1.7rem; font-weight:400; }
.billing-brand { color:#211c39; font:800 .9rem/1 var(--font-ui); letter-spacing:-.025em; }.billing-brand-dot { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:#e26a41; box-shadow:14px 0 0 #5046a4; }
.billing-signout { padding:9px 13px; border:1px solid rgba(28,25,48,.16); border-radius:999px; }.billing-signout:hover,.billing-back:hover { color:#e15f38; }
.billing-workspace { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:clamp(42px,7vw,100px) 0 88px; }
.billing-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:end; padding:0 0 clamp(48px,8vw,96px); border-bottom:1px solid rgba(28,25,48,.18); }
.billing-kicker { margin:0 0 12px; color:#e15f38; font:800 .7rem/1 var(--font-ui); letter-spacing:.13em; text-transform:uppercase; }.billing-hero h1 { margin:0; color:#211c39; font-family:Georgia,"Times New Roman",serif; font-size:clamp(4rem,9.5vw,8.8rem); font-weight:400; letter-spacing:-.075em; line-height:.77; }.billing-hero > div > p:last-child { max-width:480px; margin:30px 0 0; color:#5c5870; font-size:1.04rem; line-height:1.55; }
.billing-ledger,.agreement-register { padding-top:58px; }.agreement-register { margin-top:25px; border-top:1px solid rgba(28,25,48,.18); }.billing-section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:23px; }.billing-section-heading h2 { margin:0; color:#211c39; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.25rem,4vw,3.6rem); font-weight:400; letter-spacing:-.06em; }.billing-section-heading > p { max-width:270px; margin:0; color:#716d7e; font-size:.8rem; line-height:1.45; }
.billing-records { border-top:2px solid #211c39; }.invoice-row { display:grid; grid-template-columns:1.2fr 1.35fr .8fr 1.1fr auto; align-items:center; gap:14px; min-height:76px; padding:14px 0; border-bottom:1px solid rgba(28,25,48,.16); }.invoice-row > strong:first-child { color:#211c39; font:800 .88rem/1.2 var(--font-ui); }.invoice-row > span { color:#716d7e; font-size:.82rem; }.invoice-row > strong:nth-of-type(2) { justify-self:end; color:#211c39; font-size:.92rem; }
.billing-status { display:inline-flex; width:max-content; justify-self:end; padding:5px 8px; border-radius:999px; background:#e6e2d9; color:#373247; font:800 .62rem/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; }.billing-status.status-paid,.billing-status.status-active { background:#d7ead9; color:#1e6231; }.billing-status.status-overdue,.billing-status.status-terminated { background:#f4d7d1; color:#9e3225; }.billing-status.status-issued,.billing-status.status-pending_signature { background:#fff0c6; color:#825c00; }
.agreement-records { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.agreement-card { position:relative; min-height:210px; padding:22px; border:1px solid rgba(28,25,48,.17); background:#fffdf9; box-shadow:5px 5px 0 rgba(80,70,164,.14); }.agreement-card:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(226,106,65,.23); }.agreement-reference { margin:0 0 34px; color:#e15f38; font:800 .68rem/1 var(--font-ui); letter-spacing:.08em; }.agreement-card h3 { max-width:250px; margin:0 0 25px; color:#211c39; font-family:Georgia,"Times New Roman",serif; font-size:1.65rem; font-weight:400; letter-spacing:-.045em; line-height:1; }.agreement-card > p:not(.agreement-reference) { margin:0 0 9px; color:#716d7e; font-size:.78rem; }.agreement-card small { display:block; color:#716d7e; font-size:.66rem; }.agreement-card .billing-status { position:absolute; right:15px; bottom:14px; }
.billing-empty { margin:0; padding:26px 0; border-top:2px solid #211c39; border-bottom:1px solid rgba(28,25,48,.16); color:#716d7e; font-size:.92rem; }
@media (max-width:760px) { .billing-commandbar { min-height:58px; padding:0 18px; }.billing-back span,.billing-brand { display:none; }.billing-workspace { width:min(100% - 32px,1180px); padding-top:46px; }.billing-hero { grid-template-columns:1fr; gap:31px; }.billing-hero h1 { font-size:clamp(3.8rem,18vw,6.1rem); }.billing-section-heading { align-items:start; flex-direction:column; gap:13px; }.invoice-row { grid-template-columns:1fr auto; gap:8px 12px; min-height:0; padding:17px 0; }.invoice-row > span { grid-column:1 / -1; }.invoice-row > strong:nth-of-type(2) { grid-column:1; justify-self:start; }.invoice-row .billing-status { grid-column:2; grid-row:3; }.agreement-records { grid-template-columns:1fr; } }

/* Billing & Agreements must feel native to the QI Client Portal, not like a
   separate brand. Its information architecture remains focused, while the
   visual language uses the established portal palette and components. */
#billing-app-view { color:var(--ink); background:transparent; }
#billing-app-view::before { position:fixed; z-index:-1; inset:0; content:""; pointer-events:none; background:radial-gradient(58rem 40rem at -10% 3%,rgba(184,55,196,.13),transparent 62%),radial-gradient(46rem 32rem at 104% 7%,rgba(244,183,75,.12),transparent 63%),linear-gradient(135deg,rgba(255,255,255,.8),rgba(252,247,255,.42)); }
.billing-commandbar { border-bottom-color:rgba(255,255,255,.2); background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
.billing-back,.billing-signout,.billing-brand { color:#f7fffc; }.billing-back:hover { color:#ffe2a2; }.billing-signout { border-color:rgba(255,255,255,.25); }.billing-signout:hover { color:#fff; background:rgba(255,255,255,.12); }.billing-brand-dot { background:#ef4d62; box-shadow:14px 0 0 #f4b74b; }
.billing-workspace { padding-top:42px; }.billing-hero { position:relative; overflow:hidden; padding:clamp(32px,5vw,58px); border:1px solid rgba(184,55,196,.2); border-radius:24px; background:radial-gradient(circle at 85% 15%,rgba(244,183,75,.31),transparent 28%),radial-gradient(circle at 13% 110%,rgba(184,55,196,.3),transparent 33%),linear-gradient(125deg,#27106f 0%,#49229c 59%,#7a287d 132%); box-shadow:0 22px 58px rgba(45,21,146,.21); }
.billing-hero h1 { color:#fff; font-family:var(--font-ui); font-weight:750; font-size:clamp(3.2rem,7.3vw,6.5rem); letter-spacing:-.06em; line-height:.87; }.billing-hero > div > p:last-child { color:rgba(247,255,252,.84); }.billing-kicker { color:#ffe2a2; }
.billing-ledger,.agreement-register { margin-top:26px; padding:32px; border:1px solid rgba(45,21,146,.12); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,248,253,.77)); box-shadow:0 13px 34px rgba(45,21,146,.075); }.agreement-register { border-top:1px solid rgba(45,21,146,.12); }.billing-section-heading h2 { color:var(--ink); font-family:var(--font-ui); font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:750; letter-spacing:-.045em; }.billing-section-heading > p { color:var(--ink-soft); }.billing-section-heading .billing-kicker { color:var(--portal-violet); }
.billing-records { border-top-color:rgba(45,21,146,.35); }.invoice-row { border-bottom-color:rgba(45,21,146,.13); }.invoice-row > strong:first-child,.invoice-row > strong:nth-of-type(2) { color:var(--ink); }.invoice-row > span,.agreement-card > p:not(.agreement-reference),.agreement-card small,.billing-empty { color:var(--ink-soft); }.billing-status { background:rgba(45,21,146,.09); color:var(--portal-indigo); }.billing-status.status-paid,.billing-status.status-active { background:rgba(48,183,127,.16); color:#14723b; }.billing-status.status-overdue,.billing-status.status-terminated { background:rgba(239,77,98,.15); color:#a52d42; }.billing-status.status-issued,.billing-status.status-pending_signature { background:rgba(244,183,75,.22); color:#825c00; }
.agreement-card { border-color:rgba(45,21,146,.12); border-radius:16px; background:linear-gradient(145deg,#fff,#fcf5fb); box-shadow:0 10px 23px rgba(45,21,146,.07); }.agreement-card:hover { box-shadow:0 18px 34px rgba(45,21,146,.15); }.agreement-card h3 { color:var(--ink); font-family:var(--font-ui); font-size:1.3rem; font-weight:750; }.agreement-reference { color:var(--portal-violet); }.billing-empty { border-top-color:rgba(45,21,146,.35); border-bottom-color:rgba(45,21,146,.13); }
html[data-theme="dark"] #billing-app-view::before { background:radial-gradient(60rem 42rem at -8% 7%,rgba(184,55,196,.15),transparent 62%),radial-gradient(48rem 34rem at 104% 13%,rgba(139,125,247,.15),transparent 64%),#111635; } html[data-theme="dark"] .billing-ledger,html[data-theme="dark"] .agreement-register,html[data-theme="dark"] .agreement-card { border-color:rgba(199,193,255,.15); background:linear-gradient(145deg,rgba(36,45,108,.92),rgba(25,32,82,.86)); } html[data-theme="dark"] .billing-section-heading h2,html[data-theme="dark"] .invoice-row > strong:first-child,html[data-theme="dark"] .invoice-row > strong:nth-of-type(2),html[data-theme="dark"] .agreement-card h3 { color:#f5f2ff; } html[data-theme="dark"] .invoice-row > span,html[data-theme="dark"] .agreement-card > p:not(.agreement-reference),html[data-theme="dark"] .agreement-card small,html[data-theme="dark"] .billing-section-heading > p,html[data-theme="dark"] .billing-empty { color:#c9c4da; }

/* Native My QI commandbar inside Billing & Agreements.
   Command bars belong to the application shell, never to a page-width content
   rail. Keep this geometry identical to My QI and DevOps Kanban. */
#billing-app-view { position:relative; }
#billing-app-view .billing-commandbar {
  min-height:64px;
  margin:0 calc(50% - 50vw);
  padding:0 clamp(14px,2.5vw,34px);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
  background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%);
}
#billing-app-view .billing-commandbar .portal-commandbar-left,#billing-app-view .billing-commandbar .portal-commandbar-right { display:flex; align-items:center; gap:12px; }
#billing-app-view .app-launcher { display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; } #billing-app-view .app-launcher:hover,#billing-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.16); }
#billing-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #billing-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#billing-app-view .billing-brand { display:flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; color:#f7fffc; font:800 .9rem/1 var(--font-ui); letter-spacing:-.025em; cursor:pointer; } #billing-app-view .billing-brand .qi-logo-mark { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(8,12,52,.25)); } #billing-app-view .billing-brand-dot { display:none; }
#billing-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font-size:.76rem; font-weight:700; }
#billing-app-view .portal-icon-button { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:transparent; color:#f7fffc; cursor:pointer; } #billing-app-view .portal-icon-button:hover { background:rgba(255,255,255,.16); }
#billing-app-view .billing-signout { padding:9px 13px; border-color:rgba(255,255,255,.25); color:#f7fffc; }
#billing-app-view .billing-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(20,65,53,.14); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #billing-app-view .billing-app-launcher-menu[hidden] { display:none; } #billing-app-view .launcher-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(45,21,146,.14); border-radius:10px; } #billing-app-view .launcher-search input { width:100%; padding:10px 0; border:0; outline:0; background:transparent; } #billing-app-view .app-launcher-title { margin:16px 0 10px; color:#5c5870; font-size:.74rem; font-weight:800; } #billing-app-view .app-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } #billing-app-view .launcher-item { display:flex; min-height:68px; gap:9px; align-items:flex-start; padding:10px; border:0; border-radius:12px; background:transparent; color:#342d53; text-align:left; font:.72rem/1.25 var(--font-ui); font-weight:750; cursor:pointer; } #billing-app-view .launcher-item:hover { background:#f3effa; } #billing-app-view .launcher-glyph { display:grid; flex:0 0 auto; width:29px; height:29px; place-items:center; border-radius:10px; background:linear-gradient(145deg,#4d42c4,#31afd9); color:#fff; font-family:Georgia,serif; font-weight:700; }
@media (max-width:760px) { #billing-app-view .billing-commandbar { min-height:54px; } #billing-app-view .portal-product { display:none; } #billing-app-view .billing-brand span { display:none; } #billing-app-view .billing-commandbar .portal-commandbar-left,#billing-app-view .billing-commandbar .portal-commandbar-right { gap:7px; } }

/* KI Atelier palette correction: indigo-led, with warm spectrum accents—not blue-led. */
#portal-view {
  --portal-night:#201544;
  --portal-indigo:#2d1592;
  --portal-violet:#b837c4;
  --portal-coral:#ef4d62;
  --portal-amber:#f4b74b;
  --portal-cyan:#28b7df;
  --portal-glow:rgba(184,55,196,.17);
}
#portal-view::before {
  background:
    radial-gradient(58rem 40rem at -10% 3%,rgba(184,55,196,.13),transparent 62%),
    radial-gradient(46rem 32rem at 104% 7%,rgba(244,183,75,.12),transparent 63%),
    linear-gradient(135deg,rgba(255,255,255,.8),rgba(252,247,255,.42));
}
#portal-view .portal-commandbar {
  background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%);
  box-shadow:0 9px 28px rgba(45,21,146,.18);
}
#portal-view .portal-avatar { background:linear-gradient(145deg,#b837c4,#ef4d62); }
#portal-view .portal-hero {
  border-color:rgba(184,55,196,.2);
  background:
    radial-gradient(circle at 85% 15%,rgba(244,183,75,.31),transparent 28%),
    radial-gradient(circle at 13% 110%,rgba(184,55,196,.3),transparent 33%),
    linear-gradient(125deg,#27106f 0%,#49229c 59%,#7a287d 132%);
  box-shadow:0 22px 58px rgba(45,21,146,.21);
}
#portal-view .portal-hero .eyebrow { color:#ffe2a2; }
#portal-view .portal-summary article {
  border-color:rgba(45,21,146,.1);
  background:rgba(255,255,255,.68);
  box-shadow:0 10px 25px rgba(45,21,146,.065);
}
#portal-view .portal-summary strong { color:var(--portal-indigo); }
#portal-view .portal-app-card {
  border-color:rgba(45,21,146,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,248,253,.77));
  box-shadow:0 13px 34px rgba(45,21,146,.075);
}
#portal-view .portal-app-card.active:hover {
  border-color:rgba(184,55,196,.48);
  box-shadow:0 22px 43px rgba(45,21,146,.13);
}
#portal-view .portal-link-button,#portal-view .portal-app-card.active button {
  background:linear-gradient(108deg,#2d1592,#7d289b 60%,#b8378f);
  box-shadow:0 8px 18px rgba(45,21,146,.2);
}
#portal-view .portal-link-button:hover,#portal-view .portal-app-card.active button:hover { background:linear-gradient(108deg,#3d1eae,#9631a9 60%,#d14370); }
#portal-view .portal-app-card.inactive { border-color:rgba(45,21,146,.17); background:rgba(252,247,255,.72); }
#portal-view .portal-app-card.inactive span { background:rgba(184,55,196,.06); }
#portal-view .service-preview {
  background:
    radial-gradient(circle at 96% 0%,rgba(244,183,75,.24),transparent 32%),
    linear-gradient(135deg,#241064,#482093 60%,#81297f);
  box-shadow:0 24px 58px rgba(45,21,146,.22);
}
#portal-view .service-tabs a:hover { border-color:#f4b74b; background:rgba(244,183,75,.13); color:#fff0c8; }
#portal-view .launcher-glyph { background:linear-gradient(145deg,#4a249f,#b837a4); }
html[data-theme="dark"] #portal-view::before {
  background:radial-gradient(60rem 42rem at -8% 7%,rgba(184,55,196,.12),transparent 62%),radial-gradient(48rem 34rem at 104% 13%,rgba(244,183,75,.1),transparent 64%),#130d2c;
}
html[data-theme="dark"] #portal-view .portal-summary article,html[data-theme="dark"] #portal-view .portal-app-card { border-color:rgba(215,170,255,.15); background:linear-gradient(145deg,rgba(55,32,105,.92),rgba(34,21,72,.87)); }
html[data-theme="dark"] #portal-view .portal-summary strong { color:#f5b7f8; }
html[data-theme="dark"] #portal-view .portal-app-card.inactive { background:rgba(39,24,78,.74); border-color:rgba(215,170,255,.18); }
html[data-theme="dark"] #portal-view .app-launcher-menu,html[data-theme="dark"] #portal-view .profile-menu { background:rgba(36,20,76,.96); border-color:rgba(215,170,255,.15); }

/* My QI home is deliberately a calm landing surface. Application discovery
   belongs in the waffle launcher; nothing below the greeting competes for
   attention or implies that unavailable products are part of this workspace. */
#portal-view .portal-workspace { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:clamp(28px,6vh,76px) 0; }
#portal-view .portal-workspace {
  /* This view used to be a two-column portal layout.  The landing page is a
     one-column surface, so explicitly reset that inherited grid template.
     Without this, its only child lands in the old 184px rail column. */
  grid-template-columns:minmax(0,1fr);
}
#portal-view .portal-content { width:100%; min-width:0; }
#portal-view .portal-hero { min-height:clamp(300px,48vh,500px); align-items:center; padding:clamp(34px,6vw,84px); }
#portal-view .portal-hero .muted { margin:14px 0 0; }
@media (max-width:760px) {
  #portal-view .portal-workspace { min-height:calc(100vh - 54px); display:block; padding:24px 0; }
  #portal-view .portal-hero { min-height:calc(100vh - 102px); padding:30px 24px; }
}

/* Launcher finder: reserve its own row so the section heading never sits beneath
   the input.  It shares the portal's indigo/violet surface rather than the
   legacy green field treatment. */
#portal-view .launcher-search,
#board-view .launcher-search {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  margin:0 0 18px;
  padding:0 13px;
  border:1px solid rgba(74,36,159,.25);
  border-radius:12px;
  background:rgba(249,247,255,.94);
  color:#5b3fb5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#portal-view .launcher-search > span,
#board-view .launcher-search > span {
  flex:0 0 auto;
  color:#7d42b0;
  font-size:1.08rem;
  font-weight:800;
  line-height:1;
}
#portal-view .launcher-search input,
#board-view .launcher-search input {
  min-width:0;
  min-height:40px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
}
#portal-view .launcher-search input::placeholder,
#board-view .launcher-search input::placeholder { color:rgba(38,24,85,.58); opacity:1; }
#portal-view .launcher-search:focus-within,
#board-view .launcher-search:focus-within {
  border-color:#a23fa9;
  box-shadow:0 0 0 3px rgba(184,55,196,.18), inset 0 1px 0 rgba(255,255,255,.72);
}
#portal-view .launcher-search input:focus-visible,
#board-view .launcher-search input:focus-visible { outline:0; box-shadow:none; }
html[data-theme="dark"] #portal-view .launcher-search,
html[data-theme="dark"] #board-view .launcher-search {
  border-color:rgba(215,170,255,.34);
  background:rgba(28,16,64,.9);
  color:#ebb4ee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] #portal-view .launcher-search > span,
html[data-theme="dark"] #board-view .launcher-search > span { color:#f0a6d6; }
html[data-theme="dark"] #portal-view .launcher-search input::placeholder,
html[data-theme="dark"] #board-view .launcher-search input::placeholder { color:rgba(248,233,255,.6); }

/* DevOps Kanban uses the same application shell as the QI Client Portal. */
#board-view { position:relative; }
#board-view .board-commandbar {
  /* Match the Client Portal command bar exactly: the shell uses a small,
     responsive gutter, not a separately centred 1280px content rail. */
  display:flex; align-items:center; justify-content:space-between; min-height:56px; margin:0 calc(50% - 50vw) 26px; padding:0 clamp(14px,2.5vw,34px);
  border-bottom:1px solid rgba(255,255,255,.2); background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18);
}
#board-view .portal-commandbar-left,#board-view .portal-commandbar-right { display:flex; align-items:center; gap:14px; }
#board-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; box-shadow:none; }
#board-view .app-launcher:hover,#board-view .app-launcher[aria-expanded="true"],#board-view .profile-trigger:hover,#board-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); transform:none; box-shadow:none; }
#board-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #board-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#board-view .board-wordmark { display:flex; align-items:center; gap:9px; border:0; padding:0; background:transparent; color:#f7fffc; font:700 .88rem var(--font-ui); cursor:pointer; box-shadow:none; }
#board-view .board-wordmark:hover { background:transparent; transform:none; box-shadow:none; }
#board-view .qi-logo-mark { width:29px; height:29px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(8,12,52,.25)); }
#board-view .portal-product { padding-left:14px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.74); font-size:.78rem; font-weight:700; }
#board-view .portal-icon-button { width:35px; height:35px; border-color:rgba(255,255,255,.18); background:transparent; color:#f7fffc; box-shadow:none; }
#board-view .portal-icon-button:hover { background:rgba(255,255,255,.14); transform:none; box-shadow:none; }
#board-view .profile-wrap { position:relative; }
#board-view .profile-trigger { display:flex; align-items:center; gap:9px; padding:5px 8px; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; box-shadow:none; }
#board-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; background-image:var(--avatar-image); background-position:center; background-size:cover; box-shadow:0 4px 13px rgba(0,0,0,.2); }
#board-view .portal-avatar.has-photo { color:transparent; }
#board-view .profile-trigger-copy { display:grid; gap:1px; text-align:left; } #board-view .profile-trigger-copy strong { font-size:.73rem; } #board-view .profile-trigger-copy small,#board-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; }
#board-view .app-launcher-menu,#board-view .profile-menu { position:absolute; z-index:25; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); }
#board-view .board-app-launcher-menu { top:56px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; }
#board-view .profile-menu { top:46px; right:0; width:270px; padding:16px; }
#board-view .app-launcher-title { margin:0 0 14px; color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
#board-view .app-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#board-view .launcher-item { display:flex; align-items:flex-start; min-height:79px; gap:9px; padding:10px; border-radius:12px; color:var(--muted); font-size:.72rem; font-weight:750; line-height:1.25; text-decoration:none; }
#board-view button.launcher-item { border:0; background:transparent; box-shadow:none; text-align:left; } #board-view .launcher-item.launcher-active { color:var(--ink); cursor:pointer; } #board-view .launcher-active:hover { background:var(--surface-alt); transform:none; box-shadow:none; } #board-view .launcher-current { cursor:default; }
#board-view .launcher-item span:last-child { display:grid; gap:4px; } #board-view .launcher-item small { color:var(--muted); font-size:.61rem; font-weight:600; }
#board-view .launcher-glyph { display:grid; flex:0 0 auto; width:29px; height:29px; place-items:center; border-radius:10px; background:linear-gradient(145deg,#4a249f,#b837a4); color:#fff; font-weight:800; } #board-view .muted-glyph { background:#a99ec7; }
#board-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #board-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #board-view .profile-menu-identity strong,#board-view .profile-menu-identity small { display:block; } #board-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; overflow-wrap:anywhere; }
#board-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #board-view .profile-menu-meta strong { color:var(--ink); }
#board-view .profile-open-portal,#board-view .profile-signout { width:100%; min-height:35px; border-radius:8px; box-shadow:none; font-size:.72rem; } #board-view .profile-open-portal { border:1px solid var(--line-strong); background:transparent; color:var(--ink); } #board-view .profile-open-portal:hover { background:var(--surface-alt); transform:none; box-shadow:none; } #board-view .profile-signout { margin-top:8px; }
html[data-theme="dark"] #board-view .app-launcher-menu,html[data-theme="dark"] #board-view .profile-menu { background:rgba(36,20,76,.98); border-color:rgba(215,170,255,.15); }
@media (max-width:760px) { #board-view .board-commandbar { min-height:54px; margin-bottom:18px; padding:0 14px; } #board-view .portal-product,#board-view .profile-trigger-copy,#board-view .chevron { display:none; } #board-view .portal-commandbar-left,#board-view .portal-commandbar-right { gap:7px; } #board-view .board-app-launcher-menu { top:54px; left:14px; padding:13px; } #board-view .app-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* One portal shell across every My QI application. Page views may vary, but
   their command bar must never inherit a content rail's horizontal margins. */
#portal-view .portal-commandbar,
#billing-app-view .billing-commandbar,
#board-view .board-commandbar {
  min-height:64px;
  margin:0 calc(50% - 50vw);
  padding-right:clamp(14px,2.5vw,34px);
  padding-left:clamp(14px,2.5vw,34px);
  background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%);
}
#portal-view .app-launcher-menu,
#billing-app-view .billing-app-launcher-menu,
#board-view .board-app-launcher-menu { top:64px; }

/* My QI app marks: semantic symbols keep the KI Atelier colour fields. The white
   treatment belongs exclusively to the Quantum Intelligence brand mark above. */
#portal-view .launcher-glyph,
#billing-app-view .launcher-glyph,
#board-view .launcher-glyph {
  width:36px;
  height:36px;
  border-radius:11px;
  border:0;
  color:#fff;
  background:linear-gradient(145deg,#4a249f,#b837a4);
  box-shadow:0 5px 14px rgba(20,8,66,.22);
}
#portal-view .launcher-glyph svg,
#billing-app-view .launcher-glyph svg,
#board-view .launcher-glyph svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}
#portal-view .app-icon-home,
#billing-app-view .app-icon-home,
#board-view .app-icon-home { background:linear-gradient(145deg,#3d208c,#6b43c6); }
#portal-view .app-icon-billing,
#billing-app-view .app-icon-billing,
#board-view .app-icon-billing { background:linear-gradient(145deg,#7d289b,#c5489c); }
#portal-view .app-icon-services,
#billing-app-view .app-icon-services,
#board-view .app-icon-services { background:linear-gradient(145deg,#087c91,#28b7ad); }
#portal-view .app-icon-glossary,
#billing-app-view .app-icon-glossary,
#board-view .app-icon-glossary { background:linear-gradient(145deg,#a24d1d,#e5a436); }
#portal-view .app-icon-prompt,#billing-app-view .app-icon-prompt,#services-app-view .app-icon-prompt,#glossary-app-view .app-icon-prompt,#board-view .app-icon-prompt { background:linear-gradient(145deg,#2f62af,#53a6d8); }
#portal-view .app-icon-risk,#billing-app-view .app-icon-risk,#services-app-view .app-icon-risk,#glossary-app-view .app-icon-risk,#board-view .app-icon-risk { background:linear-gradient(145deg,#a55020,#e28d39); }
#portal-view .app-icon-myth,#billing-app-view .app-icon-myth,#services-app-view .app-icon-myth,#glossary-app-view .app-icon-myth,#board-view .app-icon-myth { background:linear-gradient(145deg,#6a378f,#bd5ca8); }
#portal-view .app-icon-profile,#billing-app-view .app-icon-profile,#services-app-view .app-icon-profile,#glossary-app-view .app-icon-profile,#board-view .app-icon-profile { background:linear-gradient(145deg,#243265,#5f78c7); }
/* Learning marks: the cap signals the shared learning family; the lower pictogram
   carries the app identity and must remain legible at launcher size. */
.launcher-glyph .learning-cap { opacity:.72; }
.launcher-glyph .learning-sub { stroke-width:2.45; }
#portal-view .app-icon-devops,
#billing-app-view .app-icon-devops,
#board-view .app-icon-devops { background:linear-gradient(145deg,#5436a7,#8269d8); }
#portal-view .app-icon-platform,
#billing-app-view .app-icon-platform,
#board-view .app-icon-platform { background:linear-gradient(145deg,#2d59aa,#4c8fd5); }
#portal-view .app-icon-knowledge,
#billing-app-view .app-icon-knowledge,
#board-view .app-icon-knowledge { background:linear-gradient(145deg,#9a427e,#c7669e); }
#portal-view .app-icon-insights,
#billing-app-view .app-icon-insights,
#board-view .app-icon-insights { background:linear-gradient(145deg,#438463,#6aa77e); }
#portal-view .app-icon-support,
#billing-app-view .app-icon-support,
#board-view .app-icon-support { background:linear-gradient(145deg,#ad536f,#d47783); }
#portal-view .launcher-glyph.muted-glyph,
#billing-app-view .launcher-glyph.muted-glyph,
#board-view .launcher-glyph.muted-glyph { opacity:.46; filter:saturate(.68); }
#portal-view .launcher-item:hover .launcher-glyph,
#billing-app-view .launcher-item:hover .launcher-glyph,
#board-view .launcher-item:hover .launcher-glyph { transform:translateY(-1px) scale(1.035); }

/* Product icon family: original sculpted symbols inspired by modern office
   application iconography.  These are deliberately symbols, not coloured tiles. */
.launcher-glyph.app-icon-home,.launcher-glyph.app-icon-billing,.launcher-glyph.app-icon-services,
.launcher-glyph.app-icon-glossary,.launcher-glyph.app-icon-prompt,.launcher-glyph.app-icon-risk,
.launcher-glyph.app-icon-myth,.launcher-glyph.app-icon-profile,.launcher-glyph.app-icon-devops {
  width:42px !important;
  height:42px !important;
  overflow:visible;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(2px 5px 4px rgba(32,23,72,.2));
}
.launcher-glyph.app-icon-home { color:#2463dd; }
.launcher-glyph.app-icon-billing { color:#e9008b; }
.launcher-glyph.app-icon-services { color:#008f91; }
.launcher-glyph.app-icon-glossary { color:#e63c1a; }
.launcher-glyph.app-icon-prompt { color:#1676d3; }
.launcher-glyph.app-icon-risk { color:#f06716; }
.launcher-glyph.app-icon-myth { color:#7829b9; }
.launcher-glyph.app-icon-profile { color:#1765c4; }
.launcher-glyph.app-icon-devops { color:#5533c7; }
.launcher-glyph .app-symbol-svg { width:42px !important; height:42px !important; overflow:visible; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.launcher-glyph .app-symbol-solid { fill:currentColor; stroke:currentColor; stroke-width:.75; }
.launcher-glyph .app-symbol-shadow { fill:currentColor; stroke:currentColor; stroke-width:.75; opacity:.36; transform:translate(1.4px,1.8px); }
.launcher-glyph .app-symbol-highlight { fill:none; stroke:#fff; stroke-width:1.65; opacity:.96; }
.launcher-glyph .app-symbol-line { fill:none; stroke:#fff; stroke-width:1.7; }
.launcher-item:hover .launcher-glyph.app-icon-home,.launcher-item:hover .launcher-glyph.app-icon-billing,.launcher-item:hover .launcher-glyph.app-icon-services,.launcher-item:hover .launcher-glyph.app-icon-glossary,.launcher-item:hover .launcher-glyph.app-icon-prompt,.launcher-item:hover .launcher-glyph.app-icon-risk,.launcher-item:hover .launcher-glyph.app-icon-myth,.launcher-item:hover .launcher-glyph.app-icon-profile,.launcher-item:hover .launcher-glyph.app-icon-devops { transform:translateY(-2px) scale(1.06); filter:drop-shadow(3px 7px 5px rgba(32,23,72,.24)); }

/* The Quantum Intelligence logo—not the application icons—needs a white
   rounded tile to retain contrast on the command bar. */
#portal-view .qi-logo-mark,
#billing-app-view .billing-brand .qi-logo-mark,
#services-app-view .services-brand .qi-logo-mark,
#board-view .qi-logo-mark {
  box-sizing:border-box;
  width:32px;
  height:32px;
  padding:3px;
  border-radius:8px;
  background:#fff;
  filter:drop-shadow(0 3px 8px rgba(8,12,52,.25));
}

/* The header logo frame is a fixed brand token.  Tenant marks may have a
   different native aspect ratio, but they must not change the shared header. */
#portal-view .qi-logo-mark[src*="egg-events-mark"],
#billing-app-view .billing-brand .qi-logo-mark[src*="egg-events-mark"],
#services-app-view .services-brand .qi-logo-mark[src*="egg-events-mark"],
#board-view .qi-logo-mark[src*="egg-events-mark"] { object-fit:contain; padding:4px; }
@media (max-width:760px) {
  #portal-view .portal-commandbar,
  #billing-app-view .billing-commandbar,
  #board-view .board-commandbar { min-height:54px; }
  #portal-view .app-launcher-menu,
  #billing-app-view .billing-app-launcher-menu,
  #board-view .board-app-launcher-menu { top:54px; }
}

/* My Services shares the My QI app shell while presenting only published,
   tenant-scoped operational records. */
#services-app-view { min-height:100vh; position:relative; color:var(--ink); background:transparent; }
#services-app-view[hidden] { display:none; }
#services-app-view::before { position:fixed; z-index:-1; inset:0; content:""; pointer-events:none; background:radial-gradient(58rem 40rem at -10% 3%,rgba(61,113,205,.13),transparent 62%),radial-gradient(46rem 32rem at 104% 7%,rgba(44,179,177,.12),transparent 63%),linear-gradient(135deg,rgba(255,255,255,.8),rgba(246,252,255,.42)); }
#services-app-view .services-commandbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(14px,2.5vw,34px); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); }
#services-app-view .portal-commandbar-left,#services-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; }
#services-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; box-shadow:none; }
#services-app-view .app-launcher:hover,#services-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.14); }
#services-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #services-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#services-app-view .services-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#f7fffc; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #services-app-view .services-brand .qi-logo-mark { width:30px; height:30px; object-fit:contain; }
#services-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font-size:.76rem; font-weight:700; }
#services-app-view .portal-icon-button { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#fff; background:transparent; cursor:pointer; } #services-app-view .portal-icon-button:hover { background:rgba(255,255,255,.16); }
#services-app-view .services-signout { padding:9px 13px; border-color:rgba(255,255,255,.25); color:#fff; }
#services-app-view .services-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); }
#services-app-view .services-app-launcher-menu[hidden] { display:none; }
#services-app-view .launcher-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(45,21,146,.14); border-radius:10px; } #services-app-view .launcher-search input { width:100%; padding:10px 0; border:0; outline:0; background:transparent; }
#services-app-view .app-launcher-title { margin:16px 0 10px; color:#5c5870; font-size:.74rem; font-weight:800; } #services-app-view .app-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#services-app-view .launcher-item { display:flex; min-height:68px; gap:9px; align-items:flex-start; padding:10px; border:0; border-radius:12px; background:transparent; color:#342d53; text-align:left; font:.72rem/1.25 var(--font-ui); font-weight:750; cursor:pointer; } #services-app-view .launcher-item:hover { background:#f3effa; } #services-app-view .launcher-current { cursor:default; background:#f3effa; }
#services-app-view .launcher-glyph { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; border:0; border-radius:11px; background:linear-gradient(145deg,#4a249f,#b837a4); color:#fff; box-shadow:0 5px 14px rgba(20,8,66,.22); } #services-app-view .launcher-glyph svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
#services-app-view .app-icon-home { background:linear-gradient(145deg,#3d208c,#6b43c6); } #services-app-view .app-icon-billing { background:linear-gradient(145deg,#7d289b,#c5489c); } #services-app-view .app-icon-services { background:linear-gradient(145deg,#087c91,#28b7ad); } #services-app-view .app-icon-glossary { background:linear-gradient(145deg,#a24d1d,#e5a436); } #services-app-view .app-icon-devops { background:linear-gradient(145deg,#5436a7,#8269d8); }
.services-workspace { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:42px 0 72px; }
.services-hero { display:flex; align-items:end; padding:44px; color:#f7fffc; background:linear-gradient(118deg,#1e1556,#40218d 62%,#2a7784); border-radius:22px; box-shadow:0 18px 42px rgba(42,30,115,.19); } .services-kicker { margin:0 0 8px; color:#b8f0ed; font-size:.7rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } .services-hero h1 { margin:0; color:#fff; font-size:clamp(2.5rem,5vw,4.3rem); line-height:.96; letter-spacing:-.055em; } .services-hero p:not(.services-kicker) { max-width:590px; margin:15px 0 0; color:rgba(255,255,255,.78); }
.services-section { margin-top:44px; } .services-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:15px; } .services-heading h2 { margin:0; font-size:1.65rem; letter-spacing:-.035em; } .services-heading > p { max-width:390px; margin:0; color:var(--muted); font-size:.8rem; text-align:right; }
.services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.service-card,.services-timeline,.services-requests-layout,.services-documents { border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 12px 28px rgba(43,38,108,.08); backdrop-filter:blur(16px); }.service-card { padding:21px; }.service-card-head,.service-update aside,.service-document { display:flex; align-items:center; justify-content:space-between; gap:12px; }.service-card h3,.service-update h3 { margin:18px 0 9px; font-size:1.18rem; letter-spacing:-.025em; }.service-card p,.service-update span { margin:0; color:var(--ink-soft); font-size:.82rem; line-height:1.52; }.service-card dl { display:grid; gap:10px; margin:21px 0 0; }.service-card dl div { padding-top:9px; border-top:1px solid var(--line); }.service-card dt { color:var(--muted); font-size:.67rem; font-weight:800; text-transform:uppercase; }.service-card dd { margin:3px 0 0; font-size:.78rem; }.service-card dd a { color:#3d2c9b; }.service-state { display:inline-flex; width:max-content; padding:4px 8px; border-radius:999px; background:#e7eefc; color:#244b9d; font-size:.66rem; font-weight:850; text-transform:capitalize; }.state-active,.state-completed { background:#ddf5eb; color:#18724b; }.state-maintenance,.state-in_progress { background:#fff0cc; color:#936500; }.state-suspended,.state-blocked { background:#ffe2e4; color:#a7333f; }.service-card-head small { color:var(--muted); font-size:.68rem; }
.delivery-search { display:flex; align-items:center; width:220px; height:38px; flex:0 0 220px; gap:8px; padding:0 11px; overflow:hidden; border:1px solid rgba(45,21,146,.18); border-radius:10px; background:rgba(255,255,255,.82); color:var(--ink-soft); box-shadow:0 4px 12px rgba(43,38,108,.05); white-space:nowrap; }.delivery-search:focus-within { border-color:var(--portal-violet); box-shadow:0 0 0 3px rgba(76,42,156,.12); }.delivery-search svg { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:2; }.delivery-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:.78rem var(--font-body); }.delivery-search input::placeholder { color:var(--muted); }
.delivery-kanban { display:grid; grid-template-columns:repeat(4,minmax(245px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; }.delivery-lane { display:grid; grid-template-rows:auto minmax(0,1fr); height:540px; overflow:hidden; border:1px solid rgba(45,21,146,.15); border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 12px 28px rgba(43,38,108,.07); }.delivery-lane > header { display:flex; align-items:center; justify-content:space-between; padding:14px 15px; border-bottom:1px solid var(--line); background:rgba(243,240,255,.7); }.delivery-lane h3 { margin:0; font-size:.83rem; font-weight:850; letter-spacing:.015em; }.delivery-lane > header span { display:grid; min-width:22px; height:22px; place-items:center; border-radius:999px; background:#e8e4ff; color:#51359c; font-size:.68rem; font-weight:850; }.delivery-lane-blocked > header { background:#fff2f3; }.delivery-lane-blocked > header span { background:#ffe0e4; color:#a7333f; }.delivery-lane-completed > header { background:#edf9f2; }.delivery-lane-completed > header span { background:#d8f2e4; color:#18724b; }.delivery-lane-body { display:grid; min-height:0; align-content:start; gap:8px; overflow-y:auto; overscroll-behavior:contain; padding:9px; scrollbar-gutter:stable; scrollbar-color:rgba(81,53,156,.62) rgba(81,53,156,.10); scrollbar-width:thin; }.delivery-lane-body:focus-visible { outline:2px solid var(--portal-violet); outline-offset:-3px; }.delivery-lane-body::-webkit-scrollbar { width:10px; }.delivery-lane-body::-webkit-scrollbar-track { margin:7px 0; border-radius:999px; background:rgba(81,53,156,.10); }.delivery-lane-body::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(81,53,156,.62); background-clip:padding-box; }.delivery-lane-body::-webkit-scrollbar-thumb:hover { background-color:rgba(81,53,156,.86); }.delivery-lane-empty { margin:0; padding:15px 7px; color:var(--muted); font-size:.75rem; }.delivery-slice-card { display:block; width:100%; min-height:0; padding:10px; overflow:hidden; border:1px solid rgba(45,21,146,.13); border-radius:10px; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 4px 10px rgba(43,38,108,.05); text-align:left; cursor:pointer; }.delivery-slice-card:hover,.delivery-slice-card:focus-visible { border-color:var(--portal-violet); background:rgba(247,245,255,.98); outline:none; box-shadow:0 6px 14px rgba(43,38,108,.12); }.delivery-slice-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.delivery-slice-id { min-width:0; color:#4c2a9c; font-size:.59rem; font-weight:900; letter-spacing:.04em; overflow-wrap:anywhere; }.delivery-slice-card h4 { display:-webkit-box; margin:6px 0 4px; overflow:hidden; font-size:.82rem; line-height:1.2; letter-spacing:-.015em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.delivery-slice-card > p { display:-webkit-box; margin:0; overflow:hidden; color:var(--ink-soft); font-size:.68rem; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.delivery-slice-topline-end { display:flex; align-items:flex-end; flex-direction:column; gap:6px; min-width:0; }.delivery-activity-pill { display:inline-flex; align-items:center; min-height:21px; padding:3px 8px; border:1px solid transparent; border-radius:999px; font-size:.61rem; font-weight:850; letter-spacing:.035em; line-height:1; text-transform:uppercase; white-space:nowrap; }.delivery-activity-technical { border-color:#c9d4ff; background:#edf1ff; color:#344cb3; }.delivery-activity-business { border-color:#bde9db; background:#e8f8f2; color:#146d59; }
.services-primary-action,.services-request-form button { width:max-content; padding:10px 15px; border:0; border-radius:9px; color:#fff; background:linear-gradient(105deg,#3d1eae,#087c91); font:750 .78rem var(--font-ui); cursor:pointer; }.services-primary-action:disabled { cursor:not-allowed; opacity:.52; }.service-request-register { --service-request-columns:minmax(210px,1.4fr) minmax(115px,.7fr) minmax(120px,.75fr) minmax(100px,.55fr) minmax(110px,.65fr); padding:28px 32px; border:1px solid rgba(45,21,146,.12); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,248,253,.77)); box-shadow:0 13px 34px rgba(45,21,146,.075); }.service-request-column-headings,.service-request-row { display:grid; grid-template-columns:var(--service-request-columns); align-items:center; justify-items:start; gap:18px; min-width:0; text-align:left; }.service-request-column-headings { padding:0 0 9px; color:var(--ink-soft); font:800 .6rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.service-request-records { border-top:2px solid rgba(45,21,146,.35); }.service-request-row { width:100%; min-height:82px; padding:16px 0; border:0; border-bottom:1px solid rgba(45,21,146,.13); background:transparent; color:var(--ink); cursor:pointer; font:inherit; }.service-request-row:hover,.service-request-row:focus-visible { background:rgba(92,70,192,.06); outline:none; }.service-request-identity { display:grid; gap:4px; min-width:0; }.service-request-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:750 1.02rem/1.2 var(--font-ui); letter-spacing:-.025em; }.service-request-identity small,.service-request-row time { color:var(--ink-soft); font:700 .72rem/1.35 var(--font-body); }.service-request-category,.service-request-priority { color:var(--portal-violet); font:800 .67rem/1.25 var(--font-ui); letter-spacing:.07em; text-transform:uppercase; }.service-request-status { display:inline-flex; padding:4px 8px; border-radius:999px; background:#e7eefc; color:#244b9d; font-size:.66rem; font-weight:850; text-transform:capitalize; }.portal-dialog { width:min(100% - 32px,650px); border:0; padding:0; background:transparent; }.portal-dialog::backdrop { background:rgba(13,17,48,.56); backdrop-filter:blur(3px); }.portal-dialog-shell { border:1px solid rgba(45,21,146,.17); border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(12,15,48,.28); overflow:hidden; }.portal-dialog-shell>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px 18px; border-bottom:1px solid var(--line); }.portal-dialog-shell h2 { margin:2px 0 0; font:760 1.35rem/1.2 var(--font-ui); letter-spacing:-.025em; }.dialog-close { width:32px; height:32px; border:0; border-radius:8px; color:var(--ink-soft); background:transparent; font-size:1.45rem; line-height:1; cursor:pointer; }.dialog-close:hover,.dialog-close:focus-visible { color:var(--ink); background:rgba(45,21,146,.08); outline:none; }.portal-dialog .services-request-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:24px 26px 26px; background:transparent; }.services-request-form label { display:grid; gap:5px; color:var(--ink-soft); font-size:.72rem; font-weight:780; }.services-request-form .full { grid-column:1/-1; }.services-request-form input,.services-request-form select,.services-request-form textarea { width:100%; border:1px solid var(--line-strong); border-radius:8px; padding:9px; color:var(--ink); background:#fff; font:inherit; }.services-request-form input[type="file"] { padding:7px; cursor:pointer; }.services-request-form textarea { min-height:125px; resize:vertical; }.portal-dialog-actions { display:flex; justify-content:flex-end; gap:10px; grid-column:1/-1; }.services-request-form .dialog-secondary { background:#f0eff9; color:var(--ink); }.services-request-form .muted { grid-column:1/-1; margin:0; font-size:.76rem; }.request-detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:18px 26px; }.request-detail-meta div { padding:12px 0; border-bottom:1px solid var(--line); }.request-detail-meta dt { color:var(--muted); font:800 .63rem/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; }.request-detail-meta dd { margin:5px 0 0; color:var(--ink); font:700 .82rem/1.4 var(--font-body); text-transform:capitalize; }.request-detail section { padding:4px 26px 26px; }.request-detail section h3 { margin:12px 0 8px; font:760 .9rem/1.2 var(--font-ui); }.request-detail section p { margin:0; white-space:pre-wrap; color:var(--ink-soft); font:.9rem/1.6 var(--font-body); }
.services-empty { margin:0; padding:24px; color:var(--muted); font-size:.82rem; }

/* Delivery notes may include full meeting minutes. Keep the dialog within the
   viewport and scroll only its detail region, leaving the close control fixed. */
#services-delivery-detail-dialog { max-height:calc(100dvh - 32px); }
#services-delivery-detail-dialog .delivery-detail { display:grid; grid-template-rows:auto minmax(0,1fr); max-height:calc(100dvh - 32px); }
#services-delivery-detail-dialog .delivery-detail-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.delivery-slice-meta { display:grid; align-content:start; gap:3px; margin-top:8px; padding-top:7px; overflow:hidden; border-top:1px solid rgba(45,21,146,.11); }.delivery-slice-meta > span { display:grid; grid-template-columns:52px minmax(0,1fr); gap:5px; min-width:0; color:var(--ink-soft); font-size:.64rem; line-height:1.3; }.delivery-slice-meta b { color:var(--muted); font:850 .56rem/1.3 var(--font-ui); letter-spacing:.055em; text-transform:uppercase; }.delivery-slice-meta > span:not(.delivery-slice-next) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.delivery-slice-meta .delivery-slice-next-value { display:-webkit-box; grid-column:2; min-width:0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/* One shared card budget for every lane and lifecycle state. Full notes stay
   in the dialog; the board always exposes the same high-level hierarchy. */
.delivery-slice-card { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); height:190px; min-height:190px; max-height:190px; }

/* Meeting records arrive as prose, but the canonical Action / Owner / Timing
   segment is a table. Give it stable column hierarchy without constraining
   long minutes or narrow portal viewports. */
.request-detail section .delivery-minutes { color:var(--ink-soft); font:.9rem/1.6 var(--font-body); }
.request-detail section .delivery-minutes-prose { margin:0; white-space:pre-wrap; }
.delivery-minutes-prose + .delivery-action-items { margin-top:22px; }
.delivery-action-items { margin:0; padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:12px; background:rgba(77,48,164,.035); }
.delivery-action-items h4 { margin:0 0 11px; color:var(--ink); font:800 .76rem/1 var(--font-ui); letter-spacing:.075em; text-transform:uppercase; }
.delivery-action-items-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:#fff; scrollbar-color:rgba(81,53,156,.62) rgba(81,53,156,.10); scrollbar-width:thin; }
.delivery-action-items-table-wrap:focus-visible { outline:2px solid var(--portal-violet); outline-offset:2px; }
.delivery-action-items-table { width:100%; min-width:540px; border-collapse:collapse; text-align:left; }
.delivery-action-items-table th { padding:9px 11px; background:rgba(81,53,156,.08); color:var(--muted); font:800 .62rem/1 var(--font-ui); letter-spacing:.075em; text-transform:uppercase; }
.delivery-action-items-table th:first-child { width:56%; }.delivery-action-items-table th:nth-child(2) { width:21%; }.delivery-action-items-table th:last-child { width:23%; }
.delivery-action-items-table td { padding:10px 11px; vertical-align:top; border-top:1px solid var(--line); color:var(--ink-soft); font:.78rem/1.45 var(--font-body); overflow-wrap:anywhere; }
.delivery-action-items-table td:first-child { color:var(--ink); font-weight:650; }
html[data-theme="dark"] .delivery-action-items { border-color:rgba(199,193,255,.18); background:rgba(110,88,198,.12); } html[data-theme="dark"] .delivery-action-items h4 { color:#f7f4ff; } html[data-theme="dark"] .delivery-action-items-table-wrap { border-color:rgba(199,193,255,.18); background:#20275c; } html[data-theme="dark"] .delivery-action-items-table th { background:rgba(199,193,255,.11); } html[data-theme="dark"] .delivery-action-items-table td { border-color:rgba(199,193,255,.16); color:#c9c4da; } html[data-theme="dark"] .delivery-action-items-table td:first-child { color:#f7f4ff; }
@media (max-width:760px) { .delivery-action-items { padding:13px; }.delivery-action-items-table { min-width:490px; } }
html[data-theme="dark"] #services-app-view::before { background:radial-gradient(60rem 42rem at -8% 7%,rgba(89,212,231,.13),transparent 62%),radial-gradient(48rem 34rem at 104% 13%,rgba(139,125,247,.15),transparent 64%),#111635; } html[data-theme="dark"] .service-card,html[data-theme="dark"] .services-documents,html[data-theme="dark"] .delivery-lane,html[data-theme="dark"] .service-request-register { border-color:rgba(199,193,255,.15); background:linear-gradient(145deg,rgba(36,45,108,.92),rgba(25,32,82,.86)); } html[data-theme="dark"] .delivery-lane > header { background:rgba(46,55,124,.76); border-bottom-color:rgba(199,193,255,.15); } html[data-theme="dark"] .delivery-slice-card { border-color:rgba(199,193,255,.18); background:rgba(23,30,75,.9); } html[data-theme="dark"] .delivery-slice-meta div { border-top-color:rgba(199,193,255,.15); } html[data-theme="dark"] .services-request-form { background:rgba(30,37,91,.65); } html[data-theme="dark"] .services-request-form input,html[data-theme="dark"] .services-request-form select,html[data-theme="dark"] .services-request-form textarea { border-color:rgba(199,193,255,.24); color:#f7f4ff; background:#20275c; } html[data-theme="dark"] .portal-dialog-shell { border-color:rgba(199,193,255,.2); background:#1c2458; } html[data-theme="dark"] .portal-dialog-shell>header,html[data-theme="dark"] .request-detail-meta div { border-color:rgba(199,193,255,.16); } html[data-theme="dark"] .portal-dialog-shell h2,html[data-theme="dark"] .request-detail-meta dd { color:#f7f4ff; } html[data-theme="dark"] .request-detail section p { color:#c9c4da; }
@media (max-width:760px) { #services-app-view .services-commandbar { min-height:54px; padding:0 14px; } #services-app-view .portal-product,#services-app-view .services-brand span { display:none; } #services-app-view .services-app-launcher-menu { top:54px; left:14px; padding:13px; } #services-app-view .app-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .services-workspace { width:min(100% - 28px,1180px); padding-top:24px; } .services-hero { align-items:flex-start; flex-direction:column; padding:29px 24px; } .services-heading { align-items:flex-start; flex-direction:column; }.services-heading > p { text-align:left;}.services-grid { grid-template-columns:1fr; }.delivery-kanban { grid-template-columns:repeat(4,minmax(265px,78vw)); }.delivery-slice-card { padding:14px; } .portal-dialog .services-request-form { grid-template-columns:1fr; } .request-detail-meta { grid-template-columns:1fr; } }

/* Service-request dialogs use a geometric close mark rather than the font
   glyph, whose visual centre varies between browser font renderers. */
.portal-dialog .dialog-close {
  position:relative;
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  font-size:0;
  line-height:0;
}
.portal-dialog .dialog-close::before,
.portal-dialog .dialog-close::after {
  position:absolute;
  width:14px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  content:"";
}
.portal-dialog .dialog-close::before { transform:rotate(45deg); }
.portal-dialog .dialog-close::after { transform:rotate(-45deg); }

/* Keep the services header on the same branded mark treatment as every other
   My QI view. This final selector intentionally wins over its local shell. */
#services-app-view .services-brand .qi-logo-mark {
  box-sizing:border-box;
  width:32px;
  height:32px;
  padding:3px;
  border-radius:8px;
  background:#fff;
  filter:drop-shadow(0 3px 8px rgba(8,12,52,.25));
}

/* QI portal header contract — every authenticated app must use this shell.
   It deliberately owns viewport geometry and account controls, so individual
   app pages cannot introduce page-width margins or omit the profile surface. */
#portal-view .portal-commandbar,
#billing-app-view .billing-commandbar,
#services-app-view .services-commandbar,
#board-view .board-commandbar {
  /* The command bar owns every account/launcher overlay.  Page-level cards
     such as Billing's hero create their own stacking contexts, so the shell
     must sit above them rather than relying on a child menu's z-index. */
  position:relative;
  z-index:40;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  width:100vw;
  margin:0 calc(50% - 50vw);
  padding:0 clamp(14px,2.5vw,34px);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
  color:#f7fffc;
  background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%);
  box-shadow:0 9px 28px rgba(45,21,146,.18);
}
#portal-view .portal-commandbar-left,#portal-view .portal-commandbar-right,
#billing-app-view .portal-commandbar-left,#billing-app-view .portal-commandbar-right,
#services-app-view .portal-commandbar-left,#services-app-view .portal-commandbar-right,
#board-view .portal-commandbar-left,#board-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; }

/* Product state is explicit on the shared authenticated header. */
.portal-beta-badge {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid rgba(255,226,162,.72);
  border-radius:999px;
  color:#fff0bc;
  background:rgba(56,20,94,.34);
  font:800 .62rem/1 var(--font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width:760px) { .portal-beta-badge { min-height:20px; padding:0 7px; font-size:.58rem; } }

/* Header-control contract: the theme switch uses the same 32px rounded-square
   frame as the Quantum Intelligence mark across every authenticated app. */
#portal-view .portal-icon-button,
#billing-app-view .portal-icon-button,
#services-app-view .portal-icon-button,
#board-view .portal-icon-button {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
}
#billing-app-view .profile-wrap,#services-app-view .profile-wrap { position:relative; }
#billing-app-view .profile-trigger,#services-app-view .profile-trigger,
#board-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; }
#billing-app-view .profile-trigger:hover,#billing-app-view .profile-trigger[aria-expanded="true"],
#services-app-view .profile-trigger:hover,#services-app-view .profile-trigger[aria-expanded="true"],
#board-view .profile-trigger:hover,#board-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); transform:none; box-shadow:none; }
#billing-app-view .portal-avatar,#services-app-view .portal-avatar,
#board-view .portal-avatar { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; background-image:var(--avatar-image); background-position:center; background-size:cover; box-shadow:0 4px 13px rgba(0,0,0,.2); }
#billing-app-view .portal-avatar.has-photo,#services-app-view .portal-avatar.has-photo,#board-view .portal-avatar.has-photo { color:transparent; }
#billing-app-view .profile-trigger-copy,#services-app-view .profile-trigger-copy,#board-view .profile-trigger-copy { display:grid; gap:1px; line-height:1.1; }
#billing-app-view .profile-trigger-copy strong,#services-app-view .profile-trigger-copy strong,#board-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
#billing-app-view .profile-trigger-copy small,#services-app-view .profile-trigger-copy small,#billing-app-view .chevron,#services-app-view .chevron,#board-view .profile-trigger-copy small,#board-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; }
#billing-app-view .profile-menu,#services-app-view .profile-menu,#board-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); }
#billing-app-view .profile-menu-identity,#services-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
#billing-app-view .profile-menu-identity .portal-avatar,#services-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); }
#billing-app-view .profile-menu-identity strong,#billing-app-view .profile-menu-identity small,#services-app-view .profile-menu-identity strong,#services-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#billing-app-view .profile-menu-identity small,#services-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; }
#billing-app-view .profile-menu-meta,#services-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; }
#billing-app-view .profile-menu-meta strong,#services-app-view .profile-menu-meta strong { color:var(--ink); }
#billing-app-view .profile-signout,#services-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
html[data-theme="dark"] #billing-app-view .profile-menu,html[data-theme="dark"] #services-app-view .profile-menu { background:rgba(36,20,76,.98); border-color:rgba(215,170,255,.15); }
.operator-tenant-controls { margin:12px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.operator-tenant-controls > p { margin:0 0 8px; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.operator-tenant-choice { margin:5px 0 9px; padding:8px; border:1px solid rgba(76,39,173,.16); border-radius:10px; }
.operator-tenant-choice > p { margin:0 0 5px; color:var(--ink); font-size:.76rem; font-weight:700; letter-spacing:normal; text-transform:none; }
.operator-tenant-button,.operator-tenant-exit { display:block; width:100%; margin:5px 0 0; padding:8px 10px; border:1px solid rgba(76,39,173,.2); border-radius:9px; background:transparent; color:var(--ink); cursor:pointer; font:inherit; font-size:.76rem; text-align:left; }
.operator-tenant-button:hover,.operator-tenant-exit:hover { background:rgba(106,61,205,.09); }
.operator-tenant-button:disabled { cursor:default; opacity:.7; }
.operator-tenant-exit { color:#7a1f5a; }
.tenant-view-banner { display:flex; align-items:center; gap:12px; padding:9px clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(111,35,91,.27); background:#fff0f8; color:#481034; font-size:.78rem; }
.tenant-view-banner strong { font-weight:800; }.tenant-view-banner span { color:#6e3b5c; }.tenant-view-banner button { margin-left:auto; padding:6px 10px; border:1px solid rgba(111,35,91,.38); border-radius:8px; background:white; color:#481034; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
html[data-theme="dark"] .tenant-view-banner { background:#3c1534; color:#ffe8f5; border-color:#8e456f; } html[data-theme="dark"] .tenant-view-banner span { color:#efc1dd; } html[data-theme="dark"] .tenant-view-banner button { background:#541d48; color:#ffe8f5; border-color:#a75f89; }
@media (max-width:760px) { .tenant-view-banner { align-items:flex-start; flex-wrap:wrap; gap:5px 10px; }.tenant-view-banner button { margin-left:0; width:100%; } }
@media (max-width:760px) {
  #portal-view .portal-commandbar,#billing-app-view .billing-commandbar,#services-app-view .services-commandbar,#board-view .board-commandbar { min-height:54px; padding:0 14px; }
  #billing-app-view .profile-trigger-copy,#billing-app-view .chevron,#services-app-view .profile-trigger-copy,#services-app-view .chevron { display:none; }
  #billing-app-view .portal-commandbar-left,#billing-app-view .portal-commandbar-right,#services-app-view .portal-commandbar-left,#services-app-view .portal-commandbar-right { gap:7px; }
}

/* Agreements are compact records, not promotional cards. Attachments deliberately
   resemble files rather than action controls. */
.agreement-records { display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:2px solid rgba(45,21,146,.35); }
.agreement-row { display:grid; grid-template-columns:minmax(165px,1.1fr) minmax(110px,.62fr) minmax(185px,.9fr) max-content minmax(250px,1.35fr); align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid rgba(45,21,146,.13); }
.agreement-identity { min-width:0; }.agreement-reference { margin:0 0 7px; color:var(--portal-violet); font:800 .68rem/1 var(--font-ui); letter-spacing:.08em; }.agreement-identity h3 { margin:0; color:var(--ink); font:750 1.05rem/1.2 var(--font-ui); letter-spacing:-.025em; }
.agreement-period,.agreement-document-date,.agreement-documents { min-width:0; }.agreement-period strong,.agreement-document-date strong { color:var(--ink); font-size:.8rem; line-height:1.35; }
.agreement-row .billing-status { justify-self:start; }
.agreement-documents { display:grid; gap:6px; }.agreement-attachment { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:37px; padding:5px 8px 5px 5px; border:1px solid rgba(45,21,146,.13); border-radius:8px; background:rgba(255,255,255,.56); color:var(--ink); text-decoration:none; }.agreement-attachment:hover { border-color:rgba(76,39,173,.4); background:rgba(106,61,205,.07); }.attachment-filetype { display:grid; place-items:center; width:30px; height:25px; border-radius:5px; background:#e75863; color:#fff; font:800 .55rem/1 var(--font-ui); letter-spacing:.04em; }.attachment-name { overflow:hidden; font-size:.76rem; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }.attachment-action { color:var(--portal-violet); font-size:.67rem; font-weight:800; }
.agreement-summary-pdf { justify-self:end; color:var(--portal-violet); font-size:.7rem; font-weight:800; text-decoration:none; white-space:nowrap; }.agreement-summary-pdf:hover { text-decoration:underline; }
.billing-status.status-signed { background:rgba(48,183,127,.16); color:#14723b; }
html[data-theme="dark"] .agreement-row { border-bottom-color:rgba(199,193,255,.16); } html[data-theme="dark"] .agreement-identity h3,html[data-theme="dark"] .agreement-period strong,html[data-theme="dark"] .agreement-document-date strong { color:#f5f2ff; } html[data-theme="dark"] .agreement-attachment { border-color:rgba(199,193,255,.17); background:rgba(24,30,75,.6); color:#f5f2ff; }
@media (max-width:900px) { .agreement-row { grid-template-columns:minmax(180px,1fr) minmax(155px,.8fr) max-content; }.agreement-document-date,.agreement-documents { grid-column:1 / -1; }.agreement-summary-pdf { grid-column:3; grid-row:2; } }
@media (max-width:600px) { .agreement-row { grid-template-columns:1fr auto; gap:14px; padding:18px 0; }.agreement-period,.agreement-document-date { grid-column:1; }.agreement-row .billing-status { grid-column:2; grid-row:1; }.agreement-documents { grid-column:1 / -1; }.agreement-summary-pdf { grid-column:1; grid-row:auto; justify-self:start; } }

/* Published documents use the Agreements register pattern: one compact,
   scan-friendly row per record with the protected file treated as a file. */
.service-document-register { --service-document-columns:minmax(190px,1.2fr) minmax(105px,.65fr) minmax(105px,.65fr) minmax(130px,.8fr) minmax(175px,1fr) minmax(160px,.85fr); padding:28px 32px; border:1px solid rgba(45,21,146,.12); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,248,253,.77)); box-shadow:0 13px 34px rgba(45,21,146,.075); }
.service-document-column-headings,.service-document-row { display:grid; grid-template-columns:var(--service-document-columns); align-items:center; justify-items:start; gap:18px; min-width:0; text-align:left; }
.service-document-actions { display:flex; flex-wrap:wrap; gap:6px; }.service-document-actions button { min-height:32px; padding:6px 9px; border:1px solid rgba(45,21,146,.2); border-radius:7px; background:rgba(255,255,255,.82); color:var(--portal-violet); font:750 .67rem var(--font-ui); cursor:pointer; }.service-document-actions button:hover,.service-document-actions button:focus-visible { border-color:var(--portal-violet); background:#f2efff; outline:none; }.service-document-actions button:disabled { cursor:not-allowed; opacity:.48; }.portal-dialog-actions .dialog-danger { border-color:rgba(159,41,56,.35); background:rgba(255,245,246,.9); color:#9f2938; }.portal-dialog-actions .dialog-danger:hover,.portal-dialog-actions .dialog-danger:focus-visible { border-color:#9f2938; background:#fff0f2; }
.service-document-column-headings { padding:0 0 9px; color:var(--ink-soft); font:800 .6rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }
.service-document-records { border-top:2px solid rgba(45,21,146,.35); }
.service-document-row { min-height:82px; padding:16px 0; border-bottom:1px solid rgba(45,21,146,.13); }
.service-document-identity,.service-document-type,.service-document-published,.service-document-service { min-width:0; color:var(--ink); font:700 .78rem/1.4 var(--font-body); }
.service-document-identity h3 { margin:0; color:var(--ink); font:750 1.02rem/1.2 var(--font-ui); letter-spacing:-.025em; }
.service-document-type { color:var(--portal-violet); font:800 .67rem/1.25 var(--font-ui); letter-spacing:.07em; text-transform:uppercase; }
.service-document-published,.service-document-service { color:var(--ink-soft); }
.service-document-attachment { width:100%; grid-template-columns:30px minmax(0,1fr); color:var(--ink); }
.service-document-attachment .attachment-action { min-width:0; overflow:hidden; color:var(--portal-violet); font-size:.73rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.service-document-attachment:hover { color:var(--ink); text-decoration:none; }
html[data-theme="dark"] .service-document-register { border-color:rgba(199,193,255,.15); background:linear-gradient(145deg,rgba(36,45,108,.92),rgba(25,32,82,.86)); }
html[data-theme="dark"] .service-document-row { border-bottom-color:rgba(199,193,255,.16); }
html[data-theme="dark"] .service-document-identity,html[data-theme="dark"] .service-document-identity h3 { color:#f5f2ff; }
html[data-theme="dark"] .service-document-published,html[data-theme="dark"] .service-document-service { color:#c9c4da; }

/* Agreement register tools: one aligned control row, with a reserved action area.
   The action button must never collapse or be clipped by the selection control. */
.agreement-toolbar {
  display:grid;
  grid-template-columns:minmax(240px,1fr) max-content;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
  padding:12px 14px;
  border:1px solid rgba(45,21,146,.12);
  border-radius:13px;
  background:rgba(255,255,255,.58);
}
.agreement-search {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(45,21,146,.17);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  color:var(--portal-violet);
}
.agreement-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:650 .78rem/1 var(--font-body); }
.agreement-bulk-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:365px;
  min-height:42px;
}
.agreement-select-all { display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:.72rem; font-weight:700; white-space:nowrap; }
.agreement-select-all input,.agreement-document-check { width:15px; height:15px; margin:0; accent-color:var(--portal-violet); }
.agreement-bulk-actions button {
  flex:0 0 178px;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:linear-gradient(108deg,#2d1592,#7d289b 60%,#b8378f);
  color:#fff;
  -webkit-text-fill-color:#fff;
  font:800 .68rem/1 var(--font-ui);
  cursor:pointer;
  white-space:nowrap;
}
.agreement-bulk-actions button:disabled { cursor:not-allowed; opacity:1; background:#9188ba; color:#fff; -webkit-text-fill-color:#fff; box-shadow:none; }
.agreement-register {
  --agreement-columns:minmax(165px,1.1fr) minmax(110px,.62fr) minmax(185px,.9fr) max-content minmax(250px,1.35fr);
}
.agreement-column-headings,
.agreement-row {
  display:grid;
  grid-template-columns:var(--agreement-columns);
  justify-items:start;
  text-align:left;
}
.agreement-column-headings { gap:18px; padding:0 0 9px; color:var(--ink-soft); font:800 .6rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.agreement-column-headings > span:nth-child(4) { padding-right:4px; }
.agreement-sort-heading { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }.sort-arrows { display:inline-flex; align-items:center; gap:2px; height:16px; }.sort-arrows button { display:grid; place-items:center; width:16px; height:16px; padding:0; border:0; outline:0; appearance:none; -webkit-appearance:none; border-radius:0; box-shadow:none; background:none !important; color:var(--ink-soft); cursor:pointer; }.sort-arrow svg { display:block; width:12px; height:12px; overflow:visible; }.sort-arrow path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.sort-arrows button:hover,.sort-arrows button:focus-visible { color:var(--portal-violet); }.sort-arrows button:focus-visible { outline:2px solid var(--portal-violet); outline-offset:2px; }.sort-arrows button[aria-pressed="true"] { color:var(--portal-violet); }
.billing-ledger {
  /* A register header and its records are separate grids.  Flexible tracks
     calculate against each grid's own content, which lets a long heading
     move independently of its values.  These definite shared tracks keep
     every column's left edge identical in the heading and every row. */
  /* Keep commercial identifiers compact and reserve a real attachment lane.
     The six tracks are deliberately shared by the header and rows. */
  --invoice-columns:minmax(0,12fr) minmax(0,15fr) minmax(0,22fr) minmax(0,16fr) minmax(96px,10fr) minmax(280px,25fr);
}
.invoice-toolbar { grid-template-columns:minmax(280px,1fr) max-content; }
.invoice-column-headings,
.invoice-row {
  display:grid;
  grid-template-columns:var(--invoice-columns);
  min-width:0;
  justify-items:start;
  text-align:left;
  gap:18px;
}
.invoice-column-headings { padding:0 0 9px; color:var(--ink-soft); font:800 .6rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.invoice-sort-heading { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }.invoice-row { align-items:center; min-height:118px; padding:18px 0; border-bottom:1px solid rgba(28,25,48,.16); }.invoice-identity,.invoice-agreement,.invoice-amount,.invoice-terms,.invoice-documents { display:grid; gap:5px; min-width:0; justify-items:start; text-align:left; }.invoice-identity h3 { margin:0; color:var(--ink); font:800 .92rem/1.18 var(--font-ui); }.invoice-identity > small,.invoice-agreement small,.invoice-amount small,.invoice-terms small,.invoice-documents small { color:var(--ink-soft); font:800 .58rem/1.25 var(--font-ui); letter-spacing:.07em; text-transform:uppercase; }.invoice-identity > small { font:650 .72rem/1.35 var(--font-body); letter-spacing:0; text-transform:none; }.invoice-agreement strong,.invoice-amount strong,.invoice-terms strong,.invoice-documents strong { color:var(--ink); font:700 .76rem/1.42 var(--font-body); }.invoice-amount strong { font:800 .84rem/1.2 var(--font-ui); }.invoice-terms small:last-child { font:650 .69rem/1.35 var(--font-body); letter-spacing:0; text-transform:none; }.invoice-row .billing-status { justify-self:start; }.invoice-documents .billing-pdf { width:max-content; min-height:auto; padding:6px 8px; font-size:.68rem; }.invoice-attachment { display:flex; align-items:center; gap:8px; }.invoice-document-check { width:15px; height:15px; margin:0; accent-color:var(--portal-violet); }.billing-status.status-not_invoiced { background:rgba(117,108,142,.14); color:#564d70; }
.agreement-attachment { grid-template-columns:16px 30px minmax(0,1fr) auto; }.attachment-detail { color:var(--ink-soft); font-size:.62rem; font-weight:700; white-space:nowrap; }.agreement-attachment .attachment-name { color:var(--ink); text-decoration:none; }.agreement-attachment .attachment-name:hover { color:var(--portal-violet); text-decoration:underline; }
html[data-theme="dark"] .agreement-toolbar { border-color:rgba(199,193,255,.16); background:rgba(24,30,75,.46); } html[data-theme="dark"] .agreement-search { border-color:rgba(199,193,255,.2); background:rgba(24,30,75,.7); color:#f5f2ff; } html[data-theme="dark"] .agreement-search input { color:#f5f2ff; }

/* Invoices and agreements share the same document-column component. */
.invoice-attachment { width:100%; }
.invoice-document-empty { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; min-height:37px; padding:5px 8px 5px 5px; border:1px solid rgba(45,21,146,.13); border-radius:8px; background:rgba(255,255,255,.56); color:var(--ink-soft); font:650 .78rem/1.35 var(--font-ui); }
.attachment-filetype-muted { background:#aaa3ba; }
html[data-theme="dark"] .invoice-document-empty { border-color:rgba(199,193,255,.17); background:rgba(24,30,75,.6); color:#c9c4da; }
@media (max-width:1120px) { .agreement-toolbar { grid-template-columns:minmax(240px,1fr) minmax(315px,390px); }.agreement-bulk-actions { grid-column:1 / -1; justify-content:flex-start; } .agreement-column-headings { display:none; }.agreement-row { grid-template-columns:minmax(180px,1fr) minmax(155px,.8fr) max-content; }.agreement-document-date,.agreement-documents { grid-column:1 / -1; } }
@media (max-width:1120px) { .invoice-column-headings { display:none; }.invoice-row { grid-template-columns:minmax(190px,1fr) minmax(185px,1fr) max-content; gap:16px; }.invoice-terms,.invoice-documents { grid-column:1 / -1; }.invoice-toolbar { grid-template-columns:1fr; }.invoice-toolbar .agreement-bulk-actions { grid-column:auto; } }
@media (max-width:600px) { .agreement-toolbar { grid-template-columns:1fr; }.agreement-bulk-actions { grid-column:auto; align-items:stretch; flex-direction:column; min-width:0; }.agreement-bulk-actions button { flex-basis:auto; width:100%; }.agreement-attachment { grid-template-columns:16px 30px minmax(0,1fr); }.attachment-detail { grid-column:3; }.agreement-row { grid-template-columns:1fr auto; }.agreement-document-date { grid-column:1; } }
@media (max-width:600px) { .invoice-row { grid-template-columns:1fr auto; gap:14px; padding:18px 0; }.invoice-agreement,.invoice-amount,.invoice-terms,.invoice-documents { grid-column:1 / -1; }.invoice-row .billing-status { grid-column:2; grid-row:1; } }
@media (max-width:980px) { .service-document-column-headings { display:none; }.service-document-register { padding:22px; }.service-document-row { grid-template-columns:minmax(190px,1fr) minmax(140px,.7fr) minmax(190px,1fr); }.service-document-service,.service-document-attachment { grid-column:1 / -1; }.service-document-attachment { max-width:390px; } }
@media (max-width:600px) { .service-document-register { padding:18px; border-radius:16px; }.service-document-row { grid-template-columns:1fr auto; gap:12px; }.service-document-type { grid-column:1; }.service-document-published { grid-column:2; }.service-document-service,.service-document-attachment { grid-column:1 / -1; }.service-document-attachment { max-width:none; min-height:44px; padding:7px 10px 7px 7px; }.service-document-attachment .attachment-action { font-size:.8rem; } }

/* The shared agreement attachment later gains checkbox/detail columns. A
   published-service file has neither, so it must explicitly opt out instead
   of inheriting that four-column grid on narrow screens. */
.agreement-attachment.service-document-attachment { display:flex; align-items:center; gap:12px; min-height:46px; padding:7px 12px 7px 7px; }
.agreement-attachment.service-document-attachment .attachment-filetype { flex:0 0 40px; width:40px; height:30px; font-size:.62rem; }
.agreement-attachment.service-document-attachment .attachment-action { flex:0 0 auto; overflow:visible; font-size:.78rem; letter-spacing:.01em; text-overflow:clip; }
@media (max-width:980px) { .service-request-column-headings { display:none; }.service-request-register { padding:22px; }.service-request-row { grid-template-columns:minmax(190px,1fr) minmax(140px,.7fr) minmax(120px,.6fr); }.service-request-priority,.service-request-status { grid-column:auto; } }
@media (max-width:600px) { .service-request-register { padding:18px; border-radius:16px; }.service-request-row { grid-template-columns:1fr auto; gap:12px; }.service-request-category { grid-column:1; }.service-request-row time { grid-column:2; }.service-request-priority,.service-request-status { grid-column:auto; } }

/* Billing register typography: values in agreement and invoice rows use one
   compact UI scale.  Only the agreement title is deliberately larger, as it
   is the row's primary descriptive label. */
.agreement-row,.invoice-row { font-family:var(--font-ui); }
.agreement-reference,
.invoice-identity .agreement-reference {
  margin:0;
  color:var(--portal-violet);
  font:750 .78rem/1.35 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
.agreement-identity h3 { margin-top:5px; font:750 .98rem/1.3 var(--font-ui); }
.agreement-period strong,
.agreement-document-date strong,
.invoice-agreement strong,
.invoice-amount strong,
.invoice-terms strong,
.invoice-documents strong {
  font:650 .82rem/1.35 var(--font-ui);
}
.invoice-amount strong { font-weight:750; }
.agreement-attachment .attachment-name { font:650 .78rem/1.35 var(--font-ui); }
.attachment-detail { font:650 .68rem/1.25 var(--font-ui); }
.billing-status { font:750 .64rem/1 var(--font-ui); }

/* A compact learning moment belongs on the landing surface; the full practice
   interaction opens in a dialog so the workspace stays calm and non-scrolling. */
#portal-view .learning-nugget { display:flex; align-items:end; justify-content:space-between; gap:24px; max-width:760px; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.26); }
#portal-view .learning-nugget-copy { max-width:570px; }
#portal-view .learning-kicker { margin:0 0 7px; color:#ffe2a2; font:800 .67rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }
#portal-view .learning-nugget h2 { margin:0; color:#fff; font:750 1.2rem/1.25 var(--font-ui); }
#portal-view .learning-nugget p:not(.learning-kicker) { margin:7px 0 0; color:rgba(247,255,252,.9); font:.88rem/1.5 var(--font-ui); }
#portal-view .learning-nugget small { display:block; margin-top:8px; color:rgba(247,255,252,.62); font:.67rem/1.35 var(--font-ui); }
#portal-view .learning-game-button { flex:0 0 auto; min-height:38px; padding:0 13px; border:1px solid rgba(255,255,255,.4); border-radius:8px; background:rgba(255,255,255,.1); color:#fff; font:750 .74rem/1 var(--font-ui); cursor:pointer; }
#portal-view .learning-game-button:hover { background:rgba(255,255,255,.19); transform:none; box-shadow:none; }
.glossary-game-dialog { width:min(620px,calc(100vw - 28px)); padding:0; border:1px solid rgba(45,21,146,.22); border-radius:14px; color:var(--ink); background:var(--surface-solid); box-shadow:0 28px 80px rgba(18,13,59,.36); }
.glossary-game-dialog::backdrop { background:rgba(15,10,43,.54); backdrop-filter:blur(3px); }
.glossary-game-dialog > * { padding-left:clamp(20px,4vw,32px); padding-right:clamp(20px,4vw,32px); }
.glossary-game-header { display:flex; align-items:start; justify-content:space-between; gap:18px; padding-top:26px; }
.glossary-game-header .learning-kicker { color:var(--portal-violet); }
.glossary-game-header h2 { margin:7px 0 0; font:750 1.5rem/1.2 var(--font-ui); }
.glossary-game-close { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-soft); font-size:1.35rem; cursor:pointer; }
.glossary-game-close:hover { background:var(--surface-alt); transform:none; box-shadow:none; }
.glossary-game-progress { margin:22px 0 0; color:var(--ink-soft); font:700 .72rem/1.3 var(--font-ui); }
.glossary-game-prompt { margin:8px 0 18px; font:750 1.02rem/1.42 var(--font-ui); }
.glossary-game-options { display:grid; gap:8px; }
.glossary-game-options button { width:100%; min-height:52px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:650 .8rem/1.42 var(--font-ui); text-align:left; cursor:pointer; }
.glossary-game-options button:hover:not(:disabled) { border-color:var(--portal-violet); background:rgba(106,61,205,.07); transform:none; box-shadow:none; }
.glossary-game-options button.is-correct { border-color:#278457; background:rgba(48,183,127,.13); color:#12653a; }
.glossary-game-options button.is-incorrect { border-color:#b83252; background:rgba(232,88,99,.11); color:#8e1e37; }
.glossary-game-feedback { min-height:40px; margin:17px 0 0; color:var(--ink-soft); font:.79rem/1.45 var(--font-ui); }
.glossary-game-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; padding-top:17px; padding-bottom:26px; border-top:1px solid var(--line); }
.glossary-game-footer small { max-width:365px; color:var(--muted); font:.66rem/1.4 var(--font-ui); }
.glossary-game-footer button { flex:0 0 auto; min-height:38px; padding:0 13px; border:0; border-radius:8px; background:var(--portal-violet,#4b2bbd); color:#fff; -webkit-text-fill-color:#fff; font:750 .74rem/1 var(--font-ui); cursor:pointer; }
.glossary-game-footer button:hover { background:#3d239f; color:#fff; transform:none; box-shadow:none; }
html[data-theme="dark"] .glossary-game-dialog { border-color:rgba(199,193,255,.2); background:#1b1647; color:#f5f2ff; }
html[data-theme="dark"] .glossary-game-options button { border-color:rgba(199,193,255,.2); color:#f5f2ff; } html[data-theme="dark"] .glossary-game-close { color:#f5f2ff; } html[data-theme="dark"] .glossary-game-options button.is-correct { color:#9be6be; } html[data-theme="dark"] .glossary-game-options button.is-incorrect { color:#ffb5c3; }
@media (max-width:760px) { #portal-view .learning-nugget { align-items:start; flex-direction:column; gap:17px; margin-top:27px; } .glossary-game-footer { align-items:start; flex-direction:column; } .glossary-game-footer button { width:100%; } }
.closed-pilot-banner { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; margin-bottom:20px; border:1px solid #c6a85b; border-radius:12px; background:#fff8df; color:#4f3d10; }
@media (max-width:760px) { .closed-pilot-banner { flex-direction:column; } }
.policy-governance-view { min-height:100vh; padding:clamp(24px,5vw,64px); background:var(--surface); }
.policy-governance-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; max-width:1280px; margin:0 auto 24px; }
.policy-governance-header h1 { margin:.2rem 0; font-size:clamp(2rem,5vw,4rem); }
.policy-governance-header p { max-width:720px; }
.policy-posture-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:1280px; margin:0 auto 24px; }
.policy-posture-grid article { display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.policy-posture-grid strong { font-size:1.5rem; }
.policy-posture-grid span { color:var(--muted); }
.policy-register { max-width:1280px; margin:0 auto 24px; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.policy-table-wrap { overflow:auto; }
.policy-register table { width:100%; border-collapse:collapse; }
.policy-register th,.policy-register td { padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.policy-authority-list { color:var(--muted); }
@media (max-width:900px) { .policy-posture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .policy-governance-header { flex-direction:column; } .policy-posture-grid { grid-template-columns:1fr; } }
.data-lifecycle-view { min-height:100vh; padding:clamp(24px,5vw,68px); color:#18332d; background:linear-gradient(90deg,rgba(27,76,63,.045) 1px,transparent 1px) 0 0/42px 42px,#f4f0e7; }
.lifecycle-masthead { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; max-width:1320px; margin:0 auto 30px; padding-bottom:26px; border-bottom:1px solid rgba(24,51,45,.24); }
.lifecycle-masthead h1 { max-width:740px; margin:.25rem 0 .5rem; color:#18332d; font:500 clamp(2.6rem,6vw,5.4rem)/.92 "Iowan Old Style",Palatino,Georgia,serif; letter-spacing:-.055em; }
.lifecycle-masthead p:last-child { max-width:680px; color:#52645f; }
.lifecycle-masthead button,.lifecycle-intake button { border-radius:0; background:#18332d; color:#fff; box-shadow:none; }
.lifecycle-gate { display:flex; align-items:center; gap:14px; max-width:1320px; margin:0 auto 24px; padding:15px 18px; border:1px solid #b69243; background:#fff8df; color:#55400f; }
.lifecycle-gate-mark { flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:#b69243; box-shadow:0 0 0 5px rgba(182,146,67,.16); }
.lifecycle-gate div { display:grid; gap:2px; } .lifecycle-gate span:last-child { font-size:.76rem; }
.lifecycle-gate.is-active { border-color:#257656; background:#e8f5ee; color:#174d39; } .lifecycle-gate.is-active .lifecycle-gate-mark { background:#257656; }
.lifecycle-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1320px; margin:0 auto 24px; border-top:1px solid rgba(24,51,45,.24); border-bottom:1px solid rgba(24,51,45,.24); }
.lifecycle-metrics article { display:grid; gap:5px; min-height:96px; padding:19px 22px; border-left:1px solid rgba(24,51,45,.2); }
.lifecycle-metrics article:first-child { border-left:0; } .lifecycle-metrics strong { font:500 2rem/1 "Iowan Old Style",Palatino,Georgia,serif; } .lifecycle-metrics span { color:#65746f; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.lifecycle-ledger-layout { display:grid; grid-template-columns:minmax(0,2.3fr) minmax(280px,.7fr); gap:18px; max-width:1320px; margin:0 auto 20px; }
.lifecycle-ledger,.lifecycle-sequence,.lifecycle-followup-grid article,.lifecycle-intake { border:1px solid rgba(24,51,45,.2); background:rgba(255,253,247,.88); }
.lifecycle-ledger { min-width:0; padding:24px; } .lifecycle-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.lifecycle-section-heading h2,.lifecycle-sequence h2,.lifecycle-followup-grid h2,.lifecycle-intake h2 { margin:.25rem 0 0; font:500 1.65rem/1.1 "Iowan Old Style",Palatino,Georgia,serif; }
.ledger-count { padding:5px 9px; border:1px solid rgba(24,51,45,.24); color:#52645f; font-size:.68rem; text-transform:uppercase; }
.lifecycle-table-wrap { overflow:auto; } .lifecycle-ledger table { width:100%; border-collapse:collapse; }
.lifecycle-ledger th,.lifecycle-ledger td { padding:13px 9px; border-bottom:1px solid rgba(24,51,45,.14); text-align:left; vertical-align:top; white-space:nowrap; }
.lifecycle-ledger th { color:#65746f; font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; } .lifecycle-ledger td { font-size:.77rem; }
.lifecycle-empty { margin:18px 0 0; color:#65746f; font-size:.78rem; }
.lifecycle-sequence { padding:24px; background:#18332d; color:#f8f3e8; } .lifecycle-sequence .eyebrow { color:#d5ae5a; } .lifecycle-sequence h2 { color:#f8f3e8; }
.lifecycle-sequence ol { display:grid; gap:0; margin:24px 0 0; padding:0; list-style:none; }
.lifecycle-sequence li { position:relative; display:flex; gap:13px; padding:0 0 21px; } .lifecycle-sequence li:not(:last-child)::after { position:absolute; top:25px; bottom:4px; left:12px; width:1px; background:rgba(248,243,232,.23); content:""; }
.lifecycle-sequence li>span { display:grid; z-index:1; flex:0 0 auto; width:25px; height:25px; place-items:center; border:1px solid rgba(248,243,232,.36); border-radius:50%; background:#18332d; color:#d5ae5a; font-size:.58rem; }
.lifecycle-sequence li div { display:grid; gap:3px; } .lifecycle-sequence li strong { font-size:.78rem; } .lifecycle-sequence li small { color:rgba(248,243,232,.62); font-size:.66rem; }
.lifecycle-followup-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1320px; margin:0 auto 20px; } .lifecycle-followup-grid article { padding:24px; }
.lifecycle-record-list { display:grid; gap:8px; margin-top:18px; } .lifecycle-record { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid rgba(24,51,45,.14); font-size:.72rem; }
.lifecycle-record strong { color:#52645f; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; }
.lifecycle-intake { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:1320px; margin:20px auto 0; padding:24px; }
.lifecycle-intake>div { grid-column:1/-1; } .lifecycle-intake label { display:grid; gap:6px; color:#52645f; font-size:.7rem; font-weight:700; } .lifecycle-intake button,.lifecycle-intake p:last-child { align-self:end; }
html[data-theme="dark"] .data-lifecycle-view { color:#edf5f1; background:linear-gradient(90deg,rgba(211,232,222,.055) 1px,transparent 1px) 0 0/42px 42px,#14231f; }
html[data-theme="dark"] .lifecycle-masthead h1 { color:#edf5f1; } html[data-theme="dark"] .lifecycle-masthead p:last-child { color:#a9bbb4; }
html[data-theme="dark"] .lifecycle-ledger,html[data-theme="dark"] .lifecycle-followup-grid article,html[data-theme="dark"] .lifecycle-intake { background:rgba(25,44,38,.92); border-color:rgba(222,237,230,.17); }
@media(max-width:900px){.lifecycle-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.lifecycle-metrics article:nth-child(3){border-left:0}.lifecycle-ledger-layout{grid-template-columns:1fr}.lifecycle-followup-grid{grid-template-columns:1fr}}
@media(max-width:620px){.lifecycle-masthead{align-items:stretch;flex-direction:column}.lifecycle-metrics{grid-template-columns:1fr}.lifecycle-metrics article{border-left:0;border-top:1px solid rgba(24,51,45,.15)}.lifecycle-metrics article:first-child{border-top:0}.lifecycle-intake{grid-template-columns:1fr}.lifecycle-section-heading{align-items:flex-start;flex-direction:column}}

/* AI Glossary is an authenticated My QI app: it uses the shared portal
   header and tenant context, while keeping its learning interaction focused. */
#glossary-app-view { min-height:100vh; color:var(--ink); background:radial-gradient(58rem 40rem at 0 0,rgba(229,164,54,.15),transparent 62%),radial-gradient(44rem 32rem at 100% 8%,rgba(97,72,196,.12),transparent 62%),var(--surface); }
#glossary-app-view[hidden] { display:none; }
#glossary-app-view .glossary-commandbar { display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border:0; border-bottom:1px solid rgba(255,255,255,.2); border-radius:0; color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#glossary-app-view .portal-commandbar-left,#glossary-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
#glossary-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; box-shadow:none; }
#glossary-app-view .app-launcher:hover,#glossary-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.14); }
#glossary-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #glossary-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#glossary-app-view .glossary-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#f7fffc; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; }
#glossary-app-view .glossary-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(8,12,52,.25)); }
#glossary-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; }
#glossary-app-view .portal-icon-button { display:grid; place-items:center; box-sizing:border-box; width:32px; height:32px; min-height:32px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#glossary-app-view .profile-wrap { position:relative; } #glossary-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #glossary-app-view .profile-trigger:hover,#glossary-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); transform:none; box-shadow:none; }
#glossary-app-view .portal-avatar { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; box-shadow:0 4px 13px rgba(0,0,0,.2); } #glossary-app-view .portal-avatar.has-photo { color:transparent; }
#glossary-app-view .profile-trigger-copy { display:grid; gap:1px; line-height:1.1; } #glossary-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #glossary-app-view .profile-trigger-copy small,#glossary-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; }
#glossary-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #glossary-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #glossary-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #glossary-app-view .profile-menu-identity strong,#glossary-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #glossary-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #glossary-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #glossary-app-view .profile-menu-meta strong { color:var(--ink); } #glossary-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#glossary-app-view .glossary-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #glossary-app-view .launcher-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(45,21,146,.14); border-radius:10px; } #glossary-app-view .launcher-search input { width:100%; padding:10px 0; border:0; outline:0; background:transparent; } #glossary-app-view .app-launcher-title { margin:16px 0 10px; color:#5c5870; font-size:.74rem; font-weight:800; } #glossary-app-view .app-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } #glossary-app-view .launcher-item { display:flex; min-height:68px; gap:9px; align-items:flex-start; padding:10px; border:0; border-radius:12px; background:transparent; color:#342d53; text-align:left; font:.72rem/1.25 var(--font-ui); font-weight:750; cursor:pointer; } #glossary-app-view .launcher-item:hover,#glossary-app-view .launcher-current { background:#f3effa; } #glossary-app-view .launcher-current { cursor:default; } #glossary-app-view .launcher-glyph { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; border:0; border-radius:11px; color:#fff; background:linear-gradient(145deg,#4a249f,#b837a4); box-shadow:0 5px 14px rgba(20,8,66,.22); } #glossary-app-view .launcher-glyph svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } #glossary-app-view .app-icon-home { background:linear-gradient(145deg,#3d208c,#6b43c6); } #glossary-app-view .app-icon-billing { background:linear-gradient(145deg,#7d289b,#c5489c); } #glossary-app-view .app-icon-services { background:linear-gradient(145deg,#087c91,#28b7ad); } #glossary-app-view .app-icon-glossary { background:linear-gradient(145deg,#a24d1d,#e5a436); } #glossary-app-view .app-icon-profile { background:linear-gradient(145deg,#243265,#5f78c7); } #glossary-app-view .app-icon-devops { background:linear-gradient(145deg,#5436a7,#8269d8); }
.glossary-workspace { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:46px 0 76px; }.glossary-hero { padding:38px 42px; color:#fff; border-radius:20px; background:linear-gradient(120deg,#24135e,#4c2c98 61%,#a45327); box-shadow:0 18px 42px rgba(42,30,115,.18); }.glossary-hero .learning-kicker { margin:0 0 8px; color:#ffe2a2; font:800 .67rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.glossary-hero h1 { margin:0; color:#fff; font:750 clamp(2.3rem,5vw,3.7rem)/1 var(--font-ui); letter-spacing:-.05em; }.glossary-hero p:last-child { max-width:580px; margin:14px 0 0; color:rgba(255,255,255,.82); font:.92rem/1.5 var(--font-ui); }.learning-mission-layout { display:grid; grid-template-columns:minmax(0,1fr) 302px; gap:20px; align-items:start; }.glossary-game-panel { margin-top:20px; padding:clamp(22px,4vw,34px); border:1px solid rgba(45,21,146,.16); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:0 16px 32px rgba(43,38,108,.09); }.glossary-game-header { display:flex; align-items:start; justify-content:space-between; gap:18px; }.glossary-game-header .learning-kicker,.learning-path-panel>.learning-kicker { margin:0 0 7px; color:var(--portal-violet); font:800 .67rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.glossary-game-header h2 { margin:0; font:750 1.5rem/1.2 var(--font-ui); }.glossary-game-restart { flex:0 0 auto; min-height:36px; padding:0 12px; border:1px solid var(--line-strong); border-radius:8px; color:var(--portal-violet); background:transparent; font:750 .72rem/1 var(--font-ui); cursor:pointer; }.glossary-game-restart:hover { background:rgba(106,61,205,.08); transform:none; box-shadow:none; }.mission-status { display:flex; gap:8px; margin:22px 0 0; }.mission-status span { padding:5px 8px; border-radius:999px; background:rgba(106,61,205,.08); color:var(--portal-violet); font:750 .66rem/1 var(--font-ui); }.mission-status #learning-timer { color:#9a3a17; background:#fff1df; }.glossary-game-progress { margin:17px 0 0; color:var(--ink-soft); font:700 .72rem/1.3 var(--font-ui); }.glossary-game-prompt { margin:8px 0 18px; font:750 1.02rem/1.42 var(--font-ui); }.glossary-game-options { display:grid; gap:8px; }.glossary-game-options button { width:100%; min-height:52px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:650 .8rem/1.42 var(--font-ui); text-align:left; cursor:pointer; }.glossary-game-options button:hover:not(:disabled) { border-color:var(--portal-violet); background:rgba(106,61,205,.07); transform:none; box-shadow:none; }.glossary-game-options button.is-correct { border-color:#278457; background:rgba(48,183,127,.13); color:#12653a; }.glossary-game-options button.is-incorrect { border-color:#b83252; background:rgba(232,88,99,.11); color:#8e1e37; }.glossary-game-feedback { min-height:28px; margin:17px 0 0; color:var(--ink-soft); font:.79rem/1.45 var(--font-ui); }.glossary-game-footer { display:flex; justify-content:flex-end; margin-top:12px; padding-top:17px; border-top:1px solid var(--line); }.glossary-game-footer button { min-height:38px; padding:0 13px; border:0; border-radius:8px; background:var(--portal-violet); color:#fff; font:750 .74rem/1 var(--font-ui); cursor:pointer; }.glossary-game-footer button:hover { background:#3d239f; transform:none; box-shadow:none; }
.glossary-reference-panel { margin-top:20px; padding:clamp(22px,4vw,34px); border:1px solid rgba(45,21,146,.16); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:0 16px 32px rgba(43,38,108,.09); }.glossary-reference-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }.glossary-reference-heading .learning-kicker { margin:0 0 7px; color:var(--portal-violet); font:800 .67rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.glossary-reference-heading h2 { margin:0; font:750 1.5rem/1.2 var(--font-ui); }.glossary-reference-search { display:flex; align-items:center; width:min(320px,100%); min-height:40px; gap:9px; padding:0 12px; border:1px solid var(--line-strong); border-radius:8px; color:var(--muted); background:transparent; }.glossary-reference-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font:650 .78rem/1 var(--font-ui); }.glossary-reference-list { columns:2 320px; column-gap:38px; }.glossary-reference-entry { break-inside:avoid; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--line); }.glossary-reference-entry h3 { margin:0; color:var(--portal-violet); font:750 .95rem/1.25 var(--font-ui); }.glossary-reference-entry p { margin:7px 0 0; color:var(--ink-soft); font:500 .8rem/1.55 var(--font-ui); }.glossary-reference-empty { margin:0; color:var(--muted); font:.8rem/1.5 var(--font-ui); }
.learning-path-panel { position:sticky; top:18px; margin-top:20px; padding:23px; border:1px solid rgba(45,21,146,.16); border-radius:18px; background:rgba(255,255,255,.74); box-shadow:0 16px 32px rgba(43,38,108,.06); }.learning-path-panel h2 { margin:0; font:750 1.18rem/1.2 var(--font-ui); letter-spacing:-.025em; }.learning-levels { display:grid; gap:14px; margin:22px 0; padding:0; list-style:none; }.learning-levels li { display:flex; gap:10px; align-items:center; opacity:.44; }.learning-levels li>span { display:grid; width:25px; height:25px; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--ink-soft); font:800 .66rem/1 var(--font-ui); }.learning-levels strong,.learning-levels small { display:block; }.learning-levels strong { font:750 .75rem/1.2 var(--font-ui); }.learning-levels small { margin-top:2px; color:var(--muted); font:.65rem/1.25 var(--font-ui); }.learning-levels .is-current,.learning-levels .is-complete { opacity:1; }.learning-levels .is-current>span { border-color:var(--portal-violet); color:#fff; background:var(--portal-violet); }.learning-levels .is-complete>span { border-color:#278457; color:#278457; }.learning-stats { display:grid; grid-template-columns:1fr 1fr; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.learning-stats div+div { padding-left:15px; border-left:1px solid var(--line); }.learning-stats strong,.learning-stats span { display:block; }.learning-stats strong { font:800 1.15rem/1 var(--font-ui); }.learning-stats span,.learning-path-note { margin-top:4px; color:var(--muted); font:.66rem/1.35 var(--font-ui); }.learning-badges h3 { margin:18px 0 9px; font:800 .68rem/1 var(--font-ui); text-transform:uppercase; letter-spacing:.08em; }.learning-badges>div { display:flex; flex-wrap:wrap; gap:6px; }.learning-badge { padding:6px 8px; border:1px solid rgba(162,77,29,.25); border-radius:999px; color:#8a451a; background:#fff5e7; font:750 .63rem/1 var(--font-ui); }.badge-empty { color:var(--muted); font:.67rem/1.35 var(--font-ui); }.learning-path-note { margin:18px 0 0; }
.learning-profile-panel { margin-top:20px; padding:clamp(22px,4vw,34px); border:1px solid rgba(45,21,146,.16); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:0 16px 32px rgba(43,38,108,.09); }.learning-profile-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }.learning-profile-hero .learning-kicker,.learning-profile-panel .learning-kicker { margin:0 0 7px; color:var(--portal-violet); font:800 .67rem/1 var(--font-ui); letter-spacing:.09em; text-transform:uppercase; }.learning-profile-hero h2,.learning-profile-panel h3 { margin:0; color:var(--ink); font:750 1.5rem/1.2 var(--font-ui); letter-spacing:-.025em; }.learning-profile-hero p:last-child { max-width:590px; margin:9px 0 0; color:var(--ink-soft); font:.82rem/1.5 var(--font-ui); }.learning-profile-level { flex:0 0 auto; min-width:142px; padding:14px 16px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#28186c,#6540b5); }.learning-profile-level span,.learning-profile-level small { display:block; color:rgba(255,255,255,.76); font:700 .63rem/1.35 var(--font-ui); }.learning-profile-level strong { display:block; margin:5px 0 2px; font:800 .98rem/1.15 var(--font-ui); }.learning-profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:24px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.learning-profile-stats div { padding:17px 18px; }.learning-profile-stats div+div { border-left:1px solid var(--line); }.learning-profile-stats strong,.learning-profile-stats span { display:block; }.learning-profile-stats strong { color:var(--ink); font:800 1.3rem/1 var(--font-ui); }.learning-profile-stats span { margin-top:6px; color:var(--muted); font:700 .66rem/1 var(--font-ui); text-transform:uppercase; letter-spacing:.06em; }.learning-profile-track,.learning-profile-scorecard,.learning-profile-badges { padding:22px 0; border-top:1px solid var(--line); }.learning-profile-panel h3 { font-size:1.02rem; }.learning-profile-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 0; padding:0; list-style:none; }.learning-profile-levels li { display:flex; gap:9px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; opacity:.5; }.learning-profile-levels li>span { display:grid; flex:0 0 auto; width:26px; height:26px; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--ink-soft); font:800 .66rem/1 var(--font-ui); }.learning-profile-levels strong,.learning-profile-levels small { display:block; }.learning-profile-levels strong { font:750 .75rem/1.2 var(--font-ui); }.learning-profile-levels small { margin-top:3px; color:var(--muted); font:.64rem/1.2 var(--font-ui); }.learning-profile-levels .is-current,.learning-profile-levels .is-complete { opacity:1; }.learning-profile-levels .is-current { border-color:rgba(106,61,205,.5); background:rgba(106,61,205,.07); }.learning-profile-levels .is-current>span { border-color:var(--portal-violet); color:#fff; background:var(--portal-violet); }.learning-profile-levels .is-complete>span { border-color:#278457; color:#278457; }.learning-profile-apps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }.learning-profile-app-row { padding:14px; border:1px solid var(--line); border-radius:10px; }.learning-profile-app-row strong,.learning-profile-app-row span { display:block; }.learning-profile-app-row strong { font:750 .78rem/1.25 var(--font-ui); }.learning-profile-app-row span { margin-top:6px; color:var(--ink-soft); font:.67rem/1.35 var(--font-ui); }.learning-profile-badges>div { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.learning-profile-note { margin:14px 0 0; color:var(--muted); font:.67rem/1.45 var(--font-ui); } html[data-theme="dark"] .learning-profile-panel { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .learning-profile-panel h2,html[data-theme="dark"] .learning-profile-panel h3,html[data-theme="dark"] .learning-profile-stats strong { color:#f5f2ff; } html[data-theme="dark"] .learning-profile-app-row span,html[data-theme="dark"] .learning-profile-hero p:last-child { color:#e8e4fa; }
.learning-profile-levels [data-rank="top-gun"].is-current { border-color:#c69a2b; background:linear-gradient(135deg,#151515,#514016); color:#fff; }.learning-profile-levels [data-rank="top-gun"].is-current>span { border-color:#dcb84f; color:#1b170d; background:#e7c457; }.learning-badge-top-gun { border-color:#c89b30; color:#2c220b; background:linear-gradient(135deg,#fff1b8,#d7a737); }.learning-profile-certificates { display:grid; gap:7px; margin-top:16px; }.learning-profile-certificates a { display:inline-flex; width:max-content; max-width:100%; align-items:center; min-height:36px; padding:0 11px; border:1px solid rgba(106,61,205,.28); border-radius:8px; color:var(--portal-violet); background:rgba(106,61,205,.05); font:750 .7rem/1.2 var(--font-ui); text-decoration:none; }.learning-profile-certificates a:hover { border-color:var(--portal-violet); background:rgba(106,61,205,.1); }
.pilot-insignia { display:inline-grid; width:1em; height:1em; place-items:center; vertical-align:-.13em; overflow:hidden; border-radius:22%; }.pilot-insignia img { display:block; width:100%; height:100%; object-fit:cover; }.pilot-insignia-compact { width:15px; height:15px; margin-right:3px; }.profile-trigger-copy .pilot-insignia { width:13px; height:13px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }.profile-learning-link .pilot-insignia { filter:drop-shadow(0 1px 1px rgba(54,31,120,.15)); }.learning-badge { display:inline-flex; align-items:center; gap:4px; }.learning-badge .pilot-insignia { width:13px; height:13px; }.learning-profile-levels li>span .pilot-insignia { width:42px; height:42px; margin:0; }.learning-profile-levels [data-rank="aviator"].is-current>span { border-color:#2c7f8e; background:#2c7f8e; }.learning-profile-levels [data-rank="wingman"].is-current>span { border-color:#3f5cac; background:#3f5cac; }.learning-profile-levels [data-rank="flight-lead"].is-current>span { border-color:#7342b8; background:#7342b8; }.learning-profile-levels [data-rank="instructor"].is-current>span { border-color:#9a4d25; background:#9a4d25; }.learning-profile-levels [data-rank="squadron-leader"].is-current>span { border-color:#165f68; background:#165f68; }.learning-badge-aviator { border-color:rgba(44,127,142,.3); color:#176773; background:#e8f8fa; }.learning-badge-wingman { border-color:rgba(63,92,172,.28); color:#314b98; background:#edf0ff; }.learning-badge-flight-lead { border-color:rgba(115,66,184,.28); color:#6136a3; background:#f2ecff; }.learning-badge-instructor { border-color:rgba(154,77,37,.28); color:#8d421e; background:#fff2e7; }.learning-badge-squadron-leader { border-color:rgba(22,95,104,.28); color:#135861; background:#e4f7f5; }
/* AI Pilot insignia are collectible rank cards: the icon is the hero, while
   the concise state marker makes progress legible at a glance. */
.learning-profile-levels { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.learning-profile-levels li { position:relative; min-height:132px; gap:16px; padding:20px; overflow:hidden; border:1px solid rgba(52,33,124,.14); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,241,255,.9)); box-shadow:0 8px 18px rgba(43,38,108,.06); opacity:1; }
.learning-profile-levels li::before { position:absolute; inset:auto -20px -35px auto; width:112px; height:112px; border-radius:50%; background:currentColor; content:""; opacity:.055; }
.learning-profile-levels li::after { position:absolute; top:13px; right:13px; padding:4px 6px; border-radius:999px; background:rgba(67,47,142,.08); color:currentColor; content:"NEXT"; font:800 .51rem/1 var(--font-ui); letter-spacing:.08em; }
.learning-profile-levels li>span { width:68px; height:68px; border:0; border-radius:18px; background:transparent; color:currentColor; box-shadow:none; }
.learning-profile-levels li>span .pilot-insignia { width:68px; height:68px; border-radius:18px; }
.learning-profile-levels li>div { position:relative; z-index:1; align-self:center; }
.learning-profile-levels strong { color:var(--ink); font-size:.95rem; letter-spacing:-.02em; }
.learning-profile-levels small { margin-top:5px; font-size:.7rem; line-height:1.35; }
.learning-profile-levels .is-locked { color:#89829e; border-color:rgba(85,69,136,.13); background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,243,250,.7)); }
.learning-profile-levels .is-locked>span { color:#aaa3b8; box-shadow:none; }
.learning-profile-levels .is-locked strong { color:#706a80; }
.learning-profile-levels .is-locked small { color:#9690a2; }
.learning-profile-levels .is-complete { color:#277d75; border-color:rgba(39,125,117,.28); background:linear-gradient(145deg,#effbf9,#e1f5f2); }
.learning-profile-levels .is-complete::after { background:rgba(39,125,117,.12); content:"EARNED"; }
.learning-profile-levels .is-complete>span { color:#19736c; border-color:rgba(25,115,108,.28); background:#dff4f1; }
.learning-profile-levels .is-current { color:#4a2cab; border-color:#7052d0; background:linear-gradient(145deg,#f3efff,#e5ddff); box-shadow:0 14px 28px rgba(74,44,171,.18),inset 0 1px 0 rgba(255,255,255,.92); }
.learning-profile-levels .is-current::after { background:#5131b8; color:#fff; content:"CURRENT"; }
.learning-profile-levels .is-current>span { color:#fff; border-color:#5131b8; background:linear-gradient(145deg,#7555d9,#35207f); box-shadow:0 11px 20px rgba(55,31,127,.26),inset 0 1px 0 rgba(255,255,255,.32); }
.learning-profile-levels .is-current strong { color:#2f1c75; }
.learning-profile-levels [data-rank="top-gun"].is-current { color:#8f6311; border-color:#c69a2b; background:linear-gradient(145deg,#fff6d8,#f6dc86); }
.learning-profile-levels [data-rank="top-gun"].is-current::after { background:#5a4010; }
.learning-profile-levels [data-rank="top-gun"].is-current>span { color:#2b210c; border-color:#dcb84f; background:linear-gradient(145deg,#fff6c6,#d6a22d); }
@media (prefers-reduced-motion:no-preference) { .learning-profile-levels li { transition:transform .18s ease,box-shadow .18s ease; }.learning-profile-levels li:hover { transform:translateY(-3px); box-shadow:0 16px 28px rgba(43,38,108,.13); } }
html[data-theme="dark"] .learning-profile-levels li { border-color:rgba(199,193,255,.2); background:linear-gradient(145deg,#211a4e,#17123a); box-shadow:0 10px 21px rgba(0,0,0,.24); }
html[data-theme="dark"] .learning-profile-levels strong { color:#f5f2ff; }
html[data-theme="dark"] .learning-profile-levels small { color:#d8d1ec; }
html[data-theme="dark"] .learning-profile-levels .is-locked { background:linear-gradient(145deg,#191530,#141126); color:#a69ebb; }
html[data-theme="dark"] .learning-profile-levels .is-locked strong { color:#c7c0d7; }
html[data-theme="dark"] .learning-profile-levels .is-current { border-color:#927ae9; background:linear-gradient(145deg,#39267b,#211650); }
html[data-theme="dark"] .learning-profile-levels .is-current strong { color:#fff; }
html[data-theme="dark"] .learning-profile-levels .is-complete { border-color:rgba(91,201,187,.42); background:linear-gradient(145deg,#163f45,#112d36); }
html[data-theme="dark"] #glossary-app-view { background:radial-gradient(58rem 40rem at 0 0,rgba(229,164,54,.12),transparent 62%),#111635; } html[data-theme="dark"] #glossary-app-view .profile-menu,html[data-theme="dark"] #glossary-app-view .glossary-app-launcher-menu,html[data-theme="dark"] .glossary-game-panel,html[data-theme="dark"] .learning-path-panel,html[data-theme="dark"] .glossary-reference-panel { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .glossary-game-options button { border-color:rgba(199,193,255,.2); color:#f5f2ff; } html[data-theme="dark"] .glossary-game-options button.is-correct { color:#9be6be; } html[data-theme="dark"] .glossary-game-options button.is-incorrect { color:#ffb5c3; } html[data-theme="dark"] .glossary-reference-search { border-color:rgba(199,193,255,.24); } html[data-theme="dark"] .glossary-reference-search input,html[data-theme="dark"] .glossary-reference-entry p { color:#e8e4fa; }
.learning-check-option { display:flex; align-items:flex-start; gap:11px; min-height:48px; padding:12px 13px; border:1px solid var(--line); border-radius:8px; color:var(--ink); font:650 .8rem/1.4 var(--font-ui); cursor:pointer; }
.learning-check-option:has(input:checked) { border-color:var(--portal-violet); background:rgba(106,61,205,.07); }
.learning-check-option input { flex:0 0 auto; width:16px; height:16px; margin:2px 0 0; accent-color:var(--portal-violet); }
.learning-check-submit,.learning-order-controls button { min-height:38px; padding:0 13px; border:0; border-radius:8px; background:var(--portal-violet); color:#fff; font:750 .74rem/1 var(--font-ui); cursor:pointer; }
.learning-check-submit:hover,.learning-order-controls button:hover { background:#3d239f; transform:none; box-shadow:none; }
.learning-order-answer { display:grid; gap:6px; min-height:50px; margin:0; padding:0; list-style-position:inside; }
.learning-order-answer li { padding:10px 12px; border:1px dashed rgba(106,61,205,.35); border-radius:8px; background:rgba(106,61,205,.05); color:var(--ink); font:650 .78rem/1.35 var(--font-ui); }
.learning-order-bank { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.learning-order-bank button { min-height:44px; padding:9px 11px; font-size:.76rem; }
.learning-order-bank button:disabled { opacity:.45; }
.learning-order-controls { display:flex; justify-content:flex-end; gap:8px; }
.learning-order-controls button:first-child { border:1px solid var(--line-strong); background:transparent; color:var(--portal-violet); }
.learning-fill-input { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line-strong); border-radius:8px; background:transparent; color:var(--ink); font:650 .84rem/1 var(--font-ui); }
.learning-fill-input:focus { outline:2px solid rgba(106,61,205,.26); outline-offset:2px; }

/* Compact reference launcher.  The whole launcher scales as one system so
   its flyout, headings, labels and pictograms stay visually proportional. */
.app-launcher-menu { width:min(675px,calc(100vw - 28px)) !important; max-height:calc(100vh - 82px); overflow:auto; padding:13px 15px 14px !important; }
.app-launcher-menu .launcher-search { gap:6px !important; margin:0 0 10px !important; padding:0 8px !important; border-radius:8px !important; }
.app-launcher-menu .launcher-search input { padding:8px 0 !important; font-size:.75rem !important; }
.app-launcher-menu .app-launcher-title { display:none; }
.app-launcher-menu .app-launcher-grid { display:block !important; }
.launcher-section { margin:0 0 13px; }
.launcher-section h3 { display:flex; align-items:center; gap:6px; margin:0 0 8px; color:#4d2aad; font:800 .51rem/1 var(--font-ui); letter-spacing:.065em; text-transform:uppercase; }
.launcher-section h3::after { flex:1; height:1px; margin-left:4px; background:rgba(74,52,142,.18); content:""; }
.launcher-section h3>span { width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#3a5fe0,#8d30bc); box-shadow:0 1px 2px rgba(58,35,132,.26); }
.launcher-section-items { display:grid; grid-template-columns:repeat(auto-fit,88px); justify-content:start; gap:14px 18px; }
.launcher-section-workspace .launcher-section-items { grid-template-columns:repeat(4,88px); max-width:none; }
.launcher-section .launcher-item { display:grid !important; grid-template-columns:1fr; gap:5px !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#25203a !important; font:750 .52rem/1.2 var(--font-ui) !important; text-align:center !important; }
.launcher-section .launcher-item[hidden] { display:none !important; }
.launcher-section .launcher-item>span:last-child { display:block; min-height:2.4em; padding:0 2px; }
.launcher-section .launcher-item small { display:block; margin-top:2px; color:#716b82; font:600 .45rem/1.15 var(--font-ui); }
/* The compact launcher owns icon geometry. Every new app inherits this 54px
   visual contract by using launcher-glyph; individual app classes only select
   artwork and colour. */
.app-launcher-menu .launcher-section .launcher-glyph { display:grid; width:54px !important; max-width:54px; aspect-ratio:1; height:54px !important; margin:0 auto; place-items:center; overflow:visible; border:0 !important; border-radius:8px !important; color:#fff !important; box-shadow:0 4px 8px rgba(37,24,92,.22),inset 0 1px 0 rgba(255,255,255,.26) !important; filter:none !important; }
.app-launcher-menu .launcher-glyph.app-icon-home { background:linear-gradient(145deg,#4630cf,#2c1598) !important; }
.app-launcher-menu .launcher-glyph.app-icon-billing { background:linear-gradient(145deg,#ae3dca,#7b238d) !important; }
.app-launcher-menu .launcher-glyph.app-icon-services { background:linear-gradient(145deg,#169fb1,#147481) !important; }
.app-launcher-menu .launcher-glyph.app-icon-glossary { background:linear-gradient(145deg,#6b38d1,#351796) !important; }
.app-launcher-menu .launcher-glyph.app-icon-prompt { background:linear-gradient(145deg,#426fe6,#1d47bd) !important; }
.app-launcher-menu .launcher-glyph.app-icon-risk { background:linear-gradient(145deg,#7138d0,#3f199c) !important; }
.app-launcher-menu .launcher-glyph.app-icon-myth { background:linear-gradient(145deg,#7440ce,#401b9e) !important; }
.app-launcher-menu .launcher-glyph.app-icon-devops,.app-launcher-menu .launcher-glyph.app-icon-lifecycle { background:linear-gradient(145deg,#6841cf,#391b9b) !important; }
.app-launcher-menu .launcher-glyph.app-icon-governance { background:linear-gradient(145deg,#ff8d17,#d75900) !important; }
.app-launcher-menu .launcher-glyph.app-icon-event-planning { background:transparent !important; }
.app-launcher-menu .launcher-glyph.app-icon-event-planning .app-symbol-svg { width:100% !important; height:100% !important; }
.app-launcher-menu .launcher-glyph.app-icon-profile { background:linear-gradient(145deg,#275ba8,#142f68) !important; }
.app-launcher-menu .app-symbol-svg { width:70% !important; height:70% !important; overflow:visible; }
.app-launcher-menu .app-pilot-helmet { width:24px; height:24px; }
.app-launcher-menu .app-symbol-solid { fill:rgba(255,255,255,.11) !important; stroke:#fff !important; stroke-width:1.25 !important; }
.app-launcher-menu .app-symbol-shadow { display:none; }
.app-launcher-menu .app-symbol-highlight,.app-launcher-menu .app-symbol-line { stroke:#fff !important; stroke-width:1.7 !important; opacity:1 !important; }
.app-launcher-menu .app-symbol-strong { stroke-width:1.95 !important; }
.app-launcher-menu .launcher-glyph.app-icon-snake {
  display:grid;
  width:54px !important;
  max-width:54px;
  height:54px !important;
  margin:0 auto;
  place-items:center;
  overflow:hidden;
  border:0 !important;
  border-radius:8px !important;
  background:#0b1730 !important;
  box-shadow:0 4px 8px rgba(37,24,92,.22),inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.app-launcher-menu .launcher-glyph.app-icon-snake .app-symbol-svg { width:100% !important; height:100% !important; }
.app-launcher-menu .launcher-glyph.app-icon-tetris { background:linear-gradient(145deg,#172c67,#5236a5) !important; }
.app-launcher-menu .launcher-glyph.app-icon-tetris .app-symbol-svg { width:82% !important; height:82% !important; }
.app-launcher-menu .app-learning-badge circle { fill:#f8f6ff; stroke:#f8f6ff; stroke-width:1.2; }
.app-launcher-menu .app-learning-badge path { fill:none !important; stroke:#5731bb !important; stroke-width:1.25 !important; }
.launcher-section-learn h3 { color:#5630b6; }.launcher-section-development h3 { color:#176b9b; }.launcher-section-build h3 { color:#6434ba; }.launcher-section-govern h3 { color:#dc6a00; }.launcher-section-personal h3 { color:#2058b9; }
.launcher-section-development h3>span { background:#1684b8; }.launcher-section-govern h3>span { background:#f57906; }.launcher-section-personal h3>span { background:#2863c9; }
.launcher-section-row { display:grid; grid-template-columns:max-content max-content max-content; justify-content:start; gap:26px; }
.launcher-section-row .launcher-section-items { grid-template-columns:repeat(var(--launcher-columns,2),88px); gap:14px 18px; }
.launcher-section-row .launcher-glyph { max-width:54px !important; }
.launcher-section .launcher-item:hover .launcher-glyph { transform:translateY(-2px) scale(1.02) !important; box-shadow:0 6px 11px rgba(37,24,92,.28),inset 0 1px 0 rgba(255,255,255,.32) !important; }
/* The compact launcher supplies its own light label token; restore readable
   labels once the surrounding application switches to its dark surface. */
html[data-theme="dark"] .app-launcher-menu .launcher-section .launcher-item { color:#f5f2ff !important; }
html[data-theme="dark"] .app-launcher-menu .launcher-section .launcher-item small { color:#d4cef0 !important; }
/* The launcher is shared by every authenticated app. Keep its surface, finder
   and labels on the same dark tokens, rather than inheriting a light shell's
   higher-specificity background after a theme change. */
html[data-theme="dark"] #portal-view .app-launcher-menu,
html[data-theme="dark"] #billing-app-view .billing-app-launcher-menu,
html[data-theme="dark"] #services-app-view .services-app-launcher-menu,
html[data-theme="dark"] #glossary-app-view .glossary-app-launcher-menu,
html[data-theme="dark"] #board-view .board-app-launcher-menu { border-color:rgba(199,193,255,.24) !important; background:#1b1647 !important; color:#f5f2ff; }
html[data-theme="dark"] .app-launcher-menu .launcher-search { border-color:rgba(199,193,255,.36) !important; background:rgba(11,8,34,.74) !important; color:#e8e4fa; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .app-launcher-menu .launcher-search > span { color:#d8cfff !important; }
html[data-theme="dark"] .app-launcher-menu .launcher-search input { color:#f5f2ff !important; }
html[data-theme="dark"] .app-launcher-menu .launcher-search input::placeholder { color:#d4cef0 !important; opacity:1; }
html[data-theme="dark"] .app-launcher-menu .launcher-section h3::after { background:rgba(199,193,255,.24); }
html[data-theme="dark"] .app-launcher-menu .launcher-section-workspace h3 { color:#c9bcff; }
@media (max-width:760px) { .app-launcher-menu { padding:12px !important; }.launcher-section-items,.launcher-section-workspace .launcher-section-items { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:11px; }.launcher-section-row { grid-template-columns:1fr; gap:6px; }.launcher-section-row .launcher-section-items { grid-template-columns:repeat(2,minmax(0,1fr)); }.launcher-section-row .launcher-section-govern .launcher-section-items,.launcher-section-row .launcher-section-personal .launcher-section-items { grid-template-columns:repeat(2,minmax(0,1fr)); }.app-launcher-menu .launcher-glyph.app-icon-home,.app-launcher-menu .launcher-glyph.app-icon-billing,.app-launcher-menu .launcher-glyph.app-icon-services,.app-launcher-menu .launcher-glyph.app-icon-glossary,.app-launcher-menu .launcher-glyph.app-icon-prompt,.app-launcher-menu .launcher-glyph.app-icon-risk,.app-launcher-menu .launcher-glyph.app-icon-myth,.app-launcher-menu .launcher-glyph.app-icon-profile,.app-launcher-menu .launcher-glyph.app-icon-devops,.app-launcher-menu .launcher-glyph.app-icon-lifecycle,.app-launcher-menu .launcher-glyph.app-icon-governance,.app-launcher-menu .launcher-glyph.app-icon-construction-permits,.app-launcher-menu .launcher-glyph.app-icon-snake { width:51px !important; max-width:51px; height:51px !important; } }

/* Mobile shell contract. Every authenticated surface has the same compact
   header: no clipped identity text, 44px touch targets and safe-area edges.
   Keep this selector list in sync with new portal app shells; the automated
   mobile contract test deliberately fails when a shell is omitted. */
@media (max-width:760px) {
  #portal-view .portal-commandbar,
  #billing-app-view .billing-commandbar,
  #services-app-view .services-commandbar,
  #glossary-app-view .glossary-commandbar,
  #eu-ai-act-app-view .eu-ai-act-commandbar,
  #snake-app-view .snake-commandbar,
  #tetris-app-view .tetris-commandbar,
  #construction-permits-app-view .construction-permits-commandbar,
  #egg-event-planning-app-view .egg-event-planning-commandbar,
  #egg-customer-portal-app-view .egg-customer-portal-commandbar,
  #board-view .board-commandbar {
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }

  #portal-view .portal-product,
  #portal-view .portal-wordmark span,
  #portal-view .profile-trigger-copy,
  #portal-view .chevron { display:none; }

  #portal-view .app-launcher,
  #portal-view .portal-icon-button,
  #portal-view .profile-trigger,
  #billing-app-view .app-launcher,
  #billing-app-view .portal-icon-button,
  #billing-app-view .profile-trigger,
  #services-app-view .app-launcher,
  #services-app-view .portal-icon-button,
  #services-app-view .profile-trigger,
  #glossary-app-view .app-launcher,
  #glossary-app-view .portal-icon-button,
  #glossary-app-view .profile-trigger,
  #eu-ai-act-app-view .app-launcher,
  #eu-ai-act-app-view .portal-icon-button,
  #eu-ai-act-app-view .profile-trigger,
  #snake-app-view .app-launcher,
  #snake-app-view .portal-icon-button,
  #snake-app-view .profile-trigger,
  #tetris-app-view .app-launcher,
  #tetris-app-view .portal-icon-button,
  #tetris-app-view .profile-trigger,
  #construction-permits-app-view .app-launcher,
  #construction-permits-app-view .portal-icon-button,
  #construction-permits-app-view .profile-trigger,
  #egg-event-planning-app-view .app-launcher,
  #egg-event-planning-app-view .portal-icon-button,
  #egg-event-planning-app-view .profile-trigger,
  #egg-customer-portal-app-view .app-launcher,
  #egg-customer-portal-app-view .portal-icon-button,
  #egg-customer-portal-app-view .profile-trigger,
  #board-view .app-launcher,
  #board-view .portal-icon-button,
  #board-view .profile-trigger {
    min-width:44px;
    min-height:44px;
  }
}

/* Launcher icon contract: the sculpted product symbols are transparent SVG
   artwork.  Every app shell must therefore supply the same coloured
   foreground—not the legacy white-on-colour tile foreground. */
#portal-view .launcher-glyph.app-icon-home,#billing-app-view .launcher-glyph.app-icon-home,#services-app-view .launcher-glyph.app-icon-home,#glossary-app-view .launcher-glyph.app-icon-home,#board-view .launcher-glyph.app-icon-home { color:#2463dd; }
#portal-view .launcher-glyph.app-icon-billing,#billing-app-view .launcher-glyph.app-icon-billing,#services-app-view .launcher-glyph.app-icon-billing,#glossary-app-view .launcher-glyph.app-icon-billing,#board-view .launcher-glyph.app-icon-billing { color:#e9008b; }
#portal-view .launcher-glyph.app-icon-services,#billing-app-view .launcher-glyph.app-icon-services,#services-app-view .launcher-glyph.app-icon-services,#glossary-app-view .launcher-glyph.app-icon-services,#board-view .launcher-glyph.app-icon-services { color:#008f91; }
#portal-view .launcher-glyph.app-icon-glossary,#billing-app-view .launcher-glyph.app-icon-glossary,#services-app-view .launcher-glyph.app-icon-glossary,#glossary-app-view .launcher-glyph.app-icon-glossary,#board-view .launcher-glyph.app-icon-glossary { color:#e63c1a; }
#portal-view .launcher-glyph.app-icon-prompt,#billing-app-view .launcher-glyph.app-icon-prompt,#services-app-view .launcher-glyph.app-icon-prompt,#glossary-app-view .launcher-glyph.app-icon-prompt,#board-view .launcher-glyph.app-icon-prompt { color:#1676d3; }
#portal-view .launcher-glyph.app-icon-risk,#billing-app-view .launcher-glyph.app-icon-risk,#services-app-view .launcher-glyph.app-icon-risk,#glossary-app-view .launcher-glyph.app-icon-risk,#board-view .launcher-glyph.app-icon-risk { color:#f06716; }
#portal-view .launcher-glyph.app-icon-myth,#billing-app-view .launcher-glyph.app-icon-myth,#services-app-view .launcher-glyph.app-icon-myth,#glossary-app-view .launcher-glyph.app-icon-myth,#board-view .launcher-glyph.app-icon-myth { color:#7829b9; }
#portal-view .launcher-glyph.app-icon-profile,#billing-app-view .launcher-glyph.app-icon-profile,#services-app-view .launcher-glyph.app-icon-profile,#glossary-app-view .launcher-glyph.app-icon-profile,#board-view .launcher-glyph.app-icon-profile { color:#1765c4; }
#portal-view .launcher-glyph.app-icon-devops,#billing-app-view .launcher-glyph.app-icon-devops,#services-app-view .launcher-glyph.app-icon-devops,#glossary-app-view .launcher-glyph.app-icon-devops,#board-view .launcher-glyph.app-icon-devops { color:#5533c7; }
#portal-view .launcher-glyph.app-icon-home,#portal-view .launcher-glyph.app-icon-billing,#portal-view .launcher-glyph.app-icon-services,#portal-view .launcher-glyph.app-icon-glossary,#portal-view .launcher-glyph.app-icon-prompt,#portal-view .launcher-glyph.app-icon-risk,#portal-view .launcher-glyph.app-icon-myth,#portal-view .launcher-glyph.app-icon-profile,#portal-view .launcher-glyph.app-icon-devops,
#billing-app-view .launcher-glyph.app-icon-home,#billing-app-view .launcher-glyph.app-icon-billing,#billing-app-view .launcher-glyph.app-icon-services,#billing-app-view .launcher-glyph.app-icon-glossary,#billing-app-view .launcher-glyph.app-icon-prompt,#billing-app-view .launcher-glyph.app-icon-risk,#billing-app-view .launcher-glyph.app-icon-myth,#billing-app-view .launcher-glyph.app-icon-profile,#billing-app-view .launcher-glyph.app-icon-devops,
#services-app-view .launcher-glyph.app-icon-home,#services-app-view .launcher-glyph.app-icon-billing,#services-app-view .launcher-glyph.app-icon-services,#services-app-view .launcher-glyph.app-icon-glossary,#services-app-view .launcher-glyph.app-icon-prompt,#services-app-view .launcher-glyph.app-icon-risk,#services-app-view .launcher-glyph.app-icon-myth,#services-app-view .launcher-glyph.app-icon-profile,#services-app-view .launcher-glyph.app-icon-devops,
#glossary-app-view .launcher-glyph.app-icon-home,#glossary-app-view .launcher-glyph.app-icon-billing,#glossary-app-view .launcher-glyph.app-icon-services,#glossary-app-view .launcher-glyph.app-icon-glossary,#glossary-app-view .launcher-glyph.app-icon-prompt,#glossary-app-view .launcher-glyph.app-icon-risk,#glossary-app-view .launcher-glyph.app-icon-myth,#glossary-app-view .launcher-glyph.app-icon-profile,#glossary-app-view .launcher-glyph.app-icon-devops,
#board-view .launcher-glyph.app-icon-home,#board-view .launcher-glyph.app-icon-billing,#board-view .launcher-glyph.app-icon-services,#board-view .launcher-glyph.app-icon-glossary,#board-view .launcher-glyph.app-icon-prompt,#board-view .launcher-glyph.app-icon-risk,#board-view .launcher-glyph.app-icon-myth,#board-view .launcher-glyph.app-icon-profile,#board-view .launcher-glyph.app-icon-devops { background:transparent; }

/* Reference launcher artwork supplied by Eric.  Each crop is the original
   coloured tile and pictogram from the approved launcher reference—not a
   recreated SVG approximation.  This final rule intentionally overrides the
   older icon-family experiments above for every authenticated app shell. */
.app-launcher-menu .launcher-glyph.app-icon-home { background:url('/assets/launcher-reference/workspace.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-billing { background:url('/assets/launcher-reference/billing.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-services { background:url('/assets/launcher-reference/services.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-glossary { background:url('/assets/launcher-reference/glossary.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-prompt { background:url('/assets/launcher-reference/prompt.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-risk { background:url('/assets/launcher-reference/risk.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-myth { background:url('/assets/launcher-reference/myth.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-devops { background:url('/assets/launcher-reference/devops.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-lifecycle { background:url('/assets/launcher-reference/lifecycle.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-governance { background:url('/assets/launcher-reference/governance.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-profile { background:url('/assets/launcher-reference/profile.jpg') center / cover no-repeat !important; }
.app-launcher-menu .launcher-glyph.app-icon-home svg,
.app-launcher-menu .launcher-glyph.app-icon-billing svg,
.app-launcher-menu .launcher-glyph.app-icon-services svg,
.app-launcher-menu .launcher-glyph.app-icon-glossary svg,
.app-launcher-menu .launcher-glyph.app-icon-prompt svg,
.app-launcher-menu .launcher-glyph.app-icon-risk svg,
.app-launcher-menu .launcher-glyph.app-icon-myth svg,
.app-launcher-menu .launcher-glyph.app-icon-devops svg,
.app-launcher-menu .launcher-glyph.app-icon-lifecycle svg,
.app-launcher-menu .launcher-glyph.app-icon-governance svg,
.app-launcher-menu .launcher-glyph.app-icon-profile svg { display:none !important; }
@media (max-width:900px) { .learning-mission-layout { grid-template-columns:1fr; }.learning-path-panel { position:static; } }
@media (max-width:700px) { .learning-profile-hero { display:block; }.learning-profile-level { width:max-content; margin-top:18px; }.learning-profile-stats,.learning-profile-levels,.learning-profile-apps { grid-template-columns:1fr 1fr; }.learning-profile-stats div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }.learning-profile-stats div:nth-child(4) { border-top:1px solid var(--line); } }

/* AI Pilot career path — ranks read as one connected progression instead of
   six unrelated tiles.  The rail stays outside the cards, so status and
   rank artwork remain uncluttered and readable at every viewport. */
.learning-profile-levels {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(760px,100%);
  margin:22px auto 0;
  padding:0 0 0 48px;
}
.learning-profile-levels::before {
  position:absolute;
  top:42px;
  bottom:42px;
  left:21px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#5b3bc0 0%,#7962cf 46%,rgba(117,99,185,.22) 100%);
  content:"";
}
.learning-profile-levels li {
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  min-height:112px;
  gap:18px;
  padding:18px 62px 18px 20px;
  overflow:visible;
  border-radius:16px;
}
.learning-profile-levels li::before {
  position:absolute;
  z-index:-1;
  top:50%;
  left:-28px;
  width:28px;
  height:2px;
  border-radius:999px;
  background:rgba(91,59,192,.5);
  content:"";
  opacity:1;
}
.learning-profile-levels li::after { top:16px; right:18px; }
.learning-profile-levels li>span {
  position:relative;
  z-index:1;
  width:72px;
  height:72px;
}
.learning-profile-levels li>span::before {
  position:absolute;
  z-index:-1;
  top:50%;
  left:-48px;
  width:14px;
  height:14px;
  border:3px solid #f8f7fc;
  border-radius:50%;
  background:#7562cf;
  box-shadow:0 0 0 2px rgba(91,59,192,.3),0 3px 8px rgba(42,28,117,.18);
  content:"";
  transform:translateY(-50%);
}
.learning-profile-levels li>span .pilot-insignia { width:72px; height:72px; border-radius:18px; }
.learning-profile-levels li>div { align-self:center; }
.learning-profile-levels strong { font-size:1rem; }
.learning-profile-levels small { max-width:46ch; font-size:.72rem; }
.learning-profile-levels li.is-complete::before { background:#277d75; }
.learning-profile-levels .is-complete>span::before { background:#277d75; box-shadow:0 0 0 2px rgba(39,125,117,.32),0 3px 8px rgba(21,91,85,.16); }
.learning-profile-levels .is-current>span::before { background:#5131b8; box-shadow:0 0 0 2px rgba(81,49,184,.36),0 0 0 7px rgba(81,49,184,.10),0 3px 8px rgba(42,28,117,.18); }
.learning-profile-levels .is-locked>span::before { background:#aaa3b8; box-shadow:0 0 0 2px rgba(117,108,139,.24); }
html[data-theme="dark"] .learning-profile-levels::before { background:linear-gradient(180deg,#9a83f0 0%,#7463bb 46%,rgba(167,154,215,.2) 100%); }
html[data-theme="dark"] .learning-profile-levels li::before { background:rgba(157,137,234,.52); }
html[data-theme="dark"] .learning-profile-levels li>span::before { border-color:#1b1647; }
html[data-theme="dark"] .learning-profile-levels .is-complete>span::before { background:#5bc9bb; }
html[data-theme="dark"] .learning-profile-levels .is-locked>span::before { background:#6f6880; }
@media (max-width:700px) {
  .learning-profile-levels { width:100%; padding-left:38px; }
  .learning-profile-levels::before { left:16px; }
  .learning-profile-levels li { grid-template-columns:58px minmax(0,1fr); min-height:96px; gap:13px; padding:15px 48px 15px 15px; }
  .learning-profile-levels li::before { left:-22px; width:22px; }
  .learning-profile-levels li>span { width:58px; height:58px; }
  .learning-profile-levels li>span .pilot-insignia { width:58px; height:58px; border-radius:15px; }
  .learning-profile-levels li>span::before { left:-38px; }
  .learning-profile-levels li::after { top:13px; right:13px; }
  .learning-profile-levels strong { font-size:.9rem; }
  .learning-profile-levels small { font-size:.66rem; }
}
@media (max-width:760px) { #glossary-app-view .glossary-commandbar { min-height:54px; padding:0 14px; } #glossary-app-view .portal-product,#glossary-app-view .glossary-brand span,#glossary-app-view .profile-trigger-copy,#glossary-app-view .chevron { display:none; } #glossary-app-view .portal-commandbar-left,#glossary-app-view .portal-commandbar-right { gap:7px; } #glossary-app-view .glossary-app-launcher-menu { top:54px; left:14px; padding:13px; } #glossary-app-view .app-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .glossary-workspace { width:min(100% - 28px,800px); padding-top:24px; }.glossary-hero { padding:29px 24px; }.glossary-reference-heading { align-items:stretch; flex-direction:column; }.glossary-reference-search { width:100%; box-sizing:border-box; }.glossary-reference-list { columns:1; }.glossary-game-header { align-items:flex-start; flex-direction:column; }.glossary-game-restart { width:100%; }.glossary-game-footer button { width:100%; }.learning-order-bank { grid-template-columns:1fr; }.learning-order-controls button { flex:1; } }

/* EU AI Act learning — uses the exact QI Platform authenticated-header geometry. */
#eu-ai-act-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#eu-ai-act-app-view .eu-ai-act-commandbar { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border:0; border-bottom:1px solid rgba(255,255,255,.2); border-radius:0; color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#eu-ai-act-app-view .portal-commandbar-left,#eu-ai-act-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
#eu-ai-act-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#f7fffc; cursor:pointer; box-shadow:none; }
#eu-ai-act-app-view .app-launcher:hover,#eu-ai-act-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.14); }
#eu-ai-act-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #eu-ai-act-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#eu-ai-act-app-view .eu-ai-act-brand { display:flex; align-items:center; gap:8px; min-width:0; border:0; padding:0; color:#f7fffc; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; }
#eu-ai-act-app-view .eu-ai-act-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(8,12,52,.25)); }
#eu-ai-act-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; }
#eu-ai-act-app-view .portal-icon-button { display:grid; place-items:center; box-sizing:border-box; width:32px; height:32px; min-height:32px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#eu-ai-act-app-view .profile-wrap { position:relative; } #eu-ai-act-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #eu-ai-act-app-view .profile-trigger:hover,#eu-ai-act-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); transform:none; box-shadow:none; }
#eu-ai-act-app-view .portal-avatar { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; box-shadow:0 4px 13px rgba(0,0,0,.2); } #eu-ai-act-app-view .portal-avatar.has-photo { color:transparent; }
#eu-ai-act-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #eu-ai-act-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #eu-ai-act-app-view .profile-trigger-copy small,#eu-ai-act-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; }
#eu-ai-act-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); }
#eu-ai-act-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #eu-ai-act-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #eu-ai-act-app-view .profile-menu-identity strong,#eu-ai-act-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #eu-ai-act-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #eu-ai-act-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #eu-ai-act-app-view .profile-menu-meta strong { color:var(--ink); } #eu-ai-act-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#eu-ai-act-app-view .eu-ai-act-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); }
#eu-ai-act-app-view .eu-ai-act-app-launcher-menu[hidden] { display:none; }
.eu-ai-act-workspace { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:42px 0 70px; }
.eu-ai-act-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:30px 32px; border:1px solid rgba(74,36,159,.14); border-radius:18px; background:linear-gradient(125deg,#2a176e,#5131b8 65%,#a53597); color:#fff; box-shadow:0 18px 42px rgba(45,21,146,.17); }
.eu-ai-act-hero h1 { margin:7px 0 8px; color:#fff; font:800 clamp(2rem,4vw,3.25rem)/1.02 var(--font-ui); letter-spacing:-.045em; }
.eu-ai-act-hero p { max-width:720px; margin:0; color:#e6f2ef; }
.eu-ai-act-score { flex:0 0 auto; min-width:130px; padding:18px; border:1px solid rgba(255,255,255,.24); border-radius:14px; background:rgba(255,255,255,.1); text-align:center; }
.eu-ai-act-score strong { display:block; font-size:2rem; }.eu-ai-act-score span { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.eu-ai-act-notice { margin:18px 0 28px; padding:17px 20px; border-left:5px solid #d78a24; border-radius:10px; background:#fff4df; color:#513b16; }.eu-ai-act-notice p { margin:4px 0 0; }
.eu-ai-act-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; align-items:start; }
.eu-ai-act-module-nav { position:sticky; top:18px; }.eu-ai-act-module-nav ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.eu-ai-act-module-nav button { display:grid; grid-template-columns:32px 1fr; gap:10px; width:100%; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); color:var(--ink); text-align:left; cursor:pointer; }
.eu-ai-act-module-nav button>span { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#dcebea; color:#164a4a; font-weight:850; }.eu-ai-act-module-nav button.current { border-color:#176f70; box-shadow:0 0 0 2px rgba(23,111,112,.12); }.eu-ai-act-module-nav small { display:block; margin-top:3px; color:var(--muted); }
.eu-ai-act-module { padding:30px; border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); box-shadow:0 16px 42px rgba(24,49,51,.08); }.eu-ai-act-module h2 { margin:5px 0 8px; font-size:1.8rem; }.eu-ai-act-copy { margin:22px 0; padding:18px; border-radius:10px; background:rgba(23,111,112,.07); font-size:1rem; line-height:1.7; }
.eu-ai-act-quiz,.eu-ai-act-classification { display:grid; gap:10px; margin:0; padding:20px; border:1px solid var(--line); border-radius:12px; }.eu-ai-act-quiz legend,.eu-ai-act-classification legend { padding:0 6px; font-weight:850; }.eu-ai-act-quiz label { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }.eu-ai-act-quiz input[type="radio"] { box-sizing:border-box; flex:0 0 20px; width:20px; min-width:20px; height:20px; min-height:20px; margin:1px 0 0; padding:0; accent-color:#176f70; }.eu-ai-act-quiz label>span { display:block; flex:1 1 auto; min-width:0; color:var(--ink); font:700 .88rem/1.45 var(--font-ui); overflow-wrap:anywhere; }
.eu-ai-act-help { margin:0 0 6px; color:var(--muted); }.eu-ai-act-dropzones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.eu-ai-act-dropzone { min-height:66px; padding:11px; border:1px dashed #3b8281; border-radius:9px; background:rgba(23,111,112,.05); }.eu-ai-act-dropzone span { display:block; margin-top:3px; color:var(--muted); font-size:.72rem; }
.eu-ai-act-scenario { display:grid; grid-template-columns:1fr minmax(190px,240px); gap:16px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); }.eu-ai-act-scenario p { margin:0; }.eu-ai-act-scenario label { display:grid; gap:4px; font-size:.72rem; font-weight:800; }.eu-ai-act-scenario select { min-height:40px; padding:0 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-solid); color:var(--ink); }
.eu-ai-act-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }.eu-ai-act-actions button { min-height:42px; padding:0 15px; border:1px solid #176f70; border-radius:9px; background:#176f70; color:#fff; font-weight:800; cursor:pointer; }.eu-ai-act-actions button:first-child { background:transparent; color:#176f70; }.eu-ai-act-actions button:disabled { opacity:.62; cursor:default; }
.eu-ai-act-feedback { margin-top:18px; padding:16px; border-radius:10px; background:rgba(23,111,112,.07); }.eu-ai-act-feedback p { margin:8px 0 0; }.eu-ai-act-feedback .incorrect { color:#8d321d; }.eu-ai-act-status { min-height:1.4em; color:var(--muted); }.eu-ai-act-completion { margin-top:24px; padding:22px; border:1px solid #3d8a64; border-radius:12px; background:#e8f7ee; color:#174c35; }
.app-launcher-menu .launcher-glyph.app-icon-eu-ai-act { display:grid; width:54px!important; height:54px!important; margin:0 auto; place-items:center; overflow:hidden; border-radius:8px!important; background:#2b238f!important; color:#fff!important; }
.app-launcher-menu .launcher-glyph.app-icon-eu-ai-act img { display:block; width:100%; height:100%; object-fit:cover; }
.app-launcher-menu .launcher-glyph.app-icon-venue-library { display:grid; width:54px!important; height:54px!important; margin:0 auto; place-items:center; overflow:hidden; border-radius:12px!important; background:#4b238f!important; color:#fff!important; box-shadow:0 4px 8px rgba(37,24,92,.22); }
.app-launcher-menu .launcher-glyph.app-icon-venue-library img { display:block; width:100%; height:100%; object-fit:cover; }
html[data-theme="dark"] #eu-ai-act-app-view { background:#111635; }.app-launcher-menu .launcher-glyph.app-icon-eu-ai-act { box-shadow:0 4px 8px rgba(37,24,92,.22); } html[data-theme="dark"] #eu-ai-act-app-view .profile-menu,html[data-theme="dark"] #eu-ai-act-app-view .eu-ai-act-app-launcher-menu,html[data-theme="dark"] .eu-ai-act-module { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .eu-ai-act-notice { background:#3d311d; color:#ffe6b8; } html[data-theme="dark"] .eu-ai-act-completion { background:#18372a; color:#c7f0da; }
@media(max-width:760px){#eu-ai-act-app-view .eu-ai-act-commandbar{min-height:54px;padding:0 14px}#eu-ai-act-app-view .portal-product,#eu-ai-act-app-view .eu-ai-act-brand span,#eu-ai-act-app-view .profile-trigger-copy,#eu-ai-act-app-view .chevron{display:none}.eu-ai-act-workspace{width:min(100% - 24px,720px);padding-top:22px}.eu-ai-act-hero{display:block;padding:25px}.eu-ai-act-score{width:max-content;margin-top:18px}.eu-ai-act-layout{grid-template-columns:1fr}.eu-ai-act-module-nav{position:static}.eu-ai-act-module{padding:20px}.eu-ai-act-dropzones{grid-template-columns:1fr}.eu-ai-act-scenario{grid-template-columns:1fr}.eu-ai-act-actions{align-items:stretch;flex-direction:column}.eu-ai-act-actions button{width:100%}}

/* Snake — a focused, tactile arcade surface inside the QI Platform shell. */
#snake-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#snake-app-view .snake-commandbar { display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#snake-app-view .portal-commandbar-left,#snake-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; } #snake-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#fff; cursor:pointer; } #snake-app-view .app-launcher:hover,#snake-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.14); } #snake-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #snake-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#snake-app-view .snake-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#fff; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #snake-app-view .snake-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; } #snake-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; } #snake-app-view .portal-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#snake-app-view .profile-wrap { position:relative; } #snake-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #snake-app-view .profile-trigger:hover,#snake-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); } #snake-app-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; } #snake-app-view .portal-avatar.has-photo { color:transparent; } #snake-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #snake-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #snake-app-view .profile-trigger-copy small,#snake-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; } #snake-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); } #snake-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #snake-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #snake-app-view .profile-menu-identity strong,#snake-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #snake-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #snake-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #snake-app-view .profile-menu-meta strong { color:var(--ink); } #snake-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#snake-app-view .snake-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #snake-app-view .snake-app-launcher-menu[hidden] { display:none; }
.snake-workspace { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }.snake-hero { padding:34px 38px; border:1px solid rgba(74,36,159,.16); border-radius:18px 18px 0 0; background:linear-gradient(132deg,#29156b,#5331b8 68%,#8a2a91); color:#fff; }.snake-hero h1 { margin:5px 0 8px; color:#fff; font:800 clamp(2.4rem,6vw,4.5rem)/.95 var(--font-ui); letter-spacing:-.06em; }.snake-hero p:last-child { max-width:520px; margin:0; color:#eeeaff; font-size:1.03rem; line-height:1.55; }.snake-console { padding:28px; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; background:var(--surface-solid); box-shadow:0 18px 42px rgba(24,49,51,.08); }.snake-scoreboard { display:flex; align-items:center; gap:18px; margin-bottom:22px; }.snake-scoreboard>div,.snake-level { display:grid; gap:2px; min-width:90px; }.snake-scoreboard span { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.snake-scoreboard strong { font:800 1.45rem/1 var(--font-ui); }.snake-level select { min-height:32px; padding:0 28px 0 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-solid); color:var(--ink); font:700 .78rem/1 var(--font-ui); }.snake-scoreboard button { margin-left:auto; min-height:40px; padding:0 14px; border:1px solid #382180; border-radius:9px; background:transparent; color:#382180; font-weight:850; cursor:pointer; }.snake-board { display:grid; grid-template-columns:repeat(18,1fr); aspect-ratio:1; width:min(100%,372px); margin:0 auto; overflow:hidden; border:12px solid #18113f; border-radius:12px; background:#080c19; box-shadow:inset 0 0 0 1px rgba(159,231,211,.12),0 18px 34px rgba(13,9,41,.18); }.snake-board span { min-width:0; min-height:0; border:1px solid rgba(121,169,169,.045); }.snake-board .snake-head,.snake-board .snake-body { border-color:transparent; background:#8de5bf; box-shadow:inset 0 0 0 1px rgba(17,80,56,.18); }.snake-board .snake-head { position:relative; overflow:hidden; border-radius:35%; background:#c7ff7c; }.snake-board .snake-head::after { position:absolute; top:18%; right:-7%; width:76%; height:64%; content:''; background:#080c19; clip-path:polygon(100% 50%,0 0,0 100%); animation:snake-chomp .18s steps(2,end) infinite; transform-origin:right center; }.snake-board .snake-head--left::after { transform:rotate(180deg); }.snake-board .snake-head--up::after { transform:rotate(-90deg); }.snake-board .snake-head--down::after { transform:rotate(90deg); } @keyframes snake-chomp { 0%,100% { clip-path:polygon(100% 50%,0 0,0 100%); } 50% { clip-path:polygon(100% 50%,0 40%,0 60%); } } @media (prefers-reduced-motion:reduce) { .snake-board .snake-head::after { animation:none; } }.snake-board .snake-food { border-radius:50%; background:#ff5d84; box-shadow:0 0 13px rgba(255,93,132,.8); }.snake-status { margin:17px 0 0; color:var(--muted); text-align:center; }.snake-controls { display:grid; grid-template-columns:repeat(3,46px); gap:7px; width:max-content; margin:20px auto 0; }.snake-controls button { width:46px; height:42px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-solid); color:var(--ink); cursor:pointer; font-weight:900; }.snake-controls button:hover { border-color:#382180; background:rgba(56,33,128,.08); } html[data-theme="dark"] #snake-app-view { background:#111635; } html[data-theme="dark"] .snake-console,html[data-theme="dark"] .snake-controls button,html[data-theme="dark"] .snake-level select { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .snake-scoreboard button { border-color:#c4b7ff; color:#ddd6ff; }
@media(max-width:760px){#snake-app-view .snake-commandbar{min-height:54px;padding:0 14px}#snake-app-view .portal-product,#snake-app-view .snake-brand span,#snake-app-view .profile-trigger-copy,#snake-app-view .chevron{display:none}#snake-app-view .snake-app-launcher-menu{top:54px;left:14px;padding:13px}.snake-workspace{width:min(100% - 24px,720px);padding-top:22px}.snake-hero{padding:28px 24px}.snake-console{padding:18px}.snake-scoreboard{gap:12px}.snake-scoreboard>div{min-width:70px}.snake-scoreboard button{padding:0 10px;font-size:.78rem}.snake-board{border-width:8px}}

/* Tetris uses the same commandbar, launcher, account chrome and compact arcade
   language as Snake, while its tiled well stays legible at every viewport. */
#tetris-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#tetris-app-view .tetris-commandbar { display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#tetris-app-view .portal-commandbar-left,#tetris-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; } #tetris-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#fff; cursor:pointer; } #tetris-app-view .app-launcher:hover,#tetris-app-view .app-launcher[aria-expanded="true"] { background:rgba(255,255,255,.14); } #tetris-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #tetris-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#tetris-app-view .tetris-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#fff; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #tetris-app-view .tetris-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; } #tetris-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; } #tetris-app-view .portal-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#tetris-app-view .profile-wrap { position:relative; } #tetris-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; text-align:left; } #tetris-app-view .profile-trigger:hover,#tetris-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); } #tetris-app-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; } #tetris-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #tetris-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #tetris-app-view .profile-trigger-copy small,#tetris-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; } #tetris-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); } #tetris-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #tetris-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #tetris-app-view .profile-menu-identity strong,#tetris-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #tetris-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #tetris-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #tetris-app-view .profile-menu-meta strong { color:var(--ink); } #tetris-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#tetris-app-view .tetris-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #tetris-app-view .tetris-app-launcher-menu[hidden] { display:none; }
.tetris-workspace { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }.tetris-hero { padding:34px 38px; border:1px solid rgba(74,36,159,.16); border-radius:18px 18px 0 0; background:linear-gradient(132deg,#29156b,#5331b8 68%,#8a2a91); color:#fff; }.tetris-hero h1 { margin:5px 0 8px; color:#fff; font:800 clamp(2.4rem,6vw,4.5rem)/.95 var(--font-ui); letter-spacing:-.06em; }.tetris-hero p:last-child { max-width:520px; margin:0; color:#eeeaff; font-size:1.03rem; line-height:1.55; }.tetris-console { padding:28px; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; background:var(--surface-solid); box-shadow:0 18px 42px rgba(24,49,51,.08); }.tetris-scoreboard { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:22px; }.tetris-scoreboard>div,.tetris-level { display:grid; gap:2px; min-width:76px; }.tetris-scoreboard span { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.tetris-scoreboard strong { font:800 1.45rem/1 var(--font-ui); }.tetris-level select { min-height:32px; padding:0 28px 0 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-solid); color:var(--ink); font:700 .78rem/1 var(--font-ui); }.tetris-scoreboard button { margin-left:auto; min-height:40px; padding:0 14px; border:1px solid #382180; border-radius:9px; background:transparent; color:#382180; font-weight:850; cursor:pointer; }.tetris-board { display:grid; grid-template-columns:repeat(10,1fr); aspect-ratio:1/2; width:min(100%,310px); margin:0 auto; overflow:hidden; border:12px solid #18113f; border-radius:12px; background:#080c19; box-shadow:inset 0 0 0 1px rgba(159,231,211,.12),0 18px 34px rgba(13,9,41,.18); }.tetris-board span { min-width:0; min-height:0; border:1px solid rgba(121,169,169,.06); }.tetris-block { border-color:rgba(255,255,255,.22)!important; box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.16); }.tetris-block--cyan{background:#35d6e9}.tetris-block--blue{background:#4978ec}.tetris-block--orange{background:#ff9c3f}.tetris-block--yellow{background:#f5da49}.tetris-block--green{background:#69d887}.tetris-block--purple{background:#b56be7}.tetris-block--red{background:#ef607d}.tetris-status { margin:17px 0 0; color:var(--muted); text-align:center; }.tetris-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:20px auto 0; }.tetris-controls button { width:46px; height:42px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-solid); color:var(--ink); cursor:pointer; font-weight:900; }.tetris-controls button:hover { border-color:#382180; background:rgba(56,33,128,.08); } html[data-theme="dark"] #tetris-app-view { background:#111635; } html[data-theme="dark"] .tetris-console,html[data-theme="dark"] .tetris-controls button,html[data-theme="dark"] .tetris-level select { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .tetris-scoreboard button { border-color:#c4b7ff; color:#ddd6ff; }
@media(max-width:760px){#tetris-app-view .tetris-commandbar{min-height:54px;padding:0 14px}#tetris-app-view .portal-product,#tetris-app-view .tetris-brand span,#tetris-app-view .profile-trigger-copy,#tetris-app-view .chevron{display:none}#tetris-app-view .tetris-app-launcher-menu{top:54px;left:14px;padding:13px}.tetris-workspace{width:min(100% - 24px,720px);padding-top:22px}.tetris-hero{padding:28px 24px}.tetris-console{padding:18px}.tetris-scoreboard{gap:12px}.tetris-scoreboard>div{min-width:70px}.tetris-scoreboard button{margin-left:0;padding:0 10px;font-size:.78rem}.tetris-board{border-width:8px}}

/* Construction Permits: tenant-scoped shell only; workflow surfaces follow later. */
#construction-permits-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#construction-permits-app-view .construction-permits-commandbar { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#construction-permits-app-view .portal-commandbar-left,#construction-permits-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; } #construction-permits-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#fff; cursor:pointer; } #construction-permits-app-view .app-launcher:hover,#construction-permits-app-view .app-launcher[aria-expanded="true"],#construction-permits-app-view .profile-trigger:hover,#construction-permits-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); } #construction-permits-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #construction-permits-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#construction-permits-app-view .construction-permits-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#fff; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #construction-permits-app-view .construction-permits-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; } #construction-permits-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; } #construction-permits-app-view .portal-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#construction-permits-app-view .profile-wrap { position:relative; } #construction-permits-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #construction-permits-app-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; } #construction-permits-app-view .portal-avatar.has-photo { color:transparent; } #construction-permits-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #construction-permits-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #construction-permits-app-view .profile-trigger-copy small,#construction-permits-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; } #construction-permits-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); } #construction-permits-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #construction-permits-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #construction-permits-app-view .profile-menu-identity strong,#construction-permits-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #construction-permits-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #construction-permits-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #construction-permits-app-view .profile-menu-meta strong { color:var(--ink); } #construction-permits-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#construction-permits-app-view .construction-permits-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #construction-permits-app-view .construction-permits-app-launcher-menu[hidden] { display:none; }
.construction-permits-workspace { width:min(960px,calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }.construction-permits-hero { padding:36px 40px; border:1px solid rgba(74,36,159,.16); border-radius:18px 18px 0 0; background:linear-gradient(132deg,#29156b,#5331b8 68%,#8a2a91); color:#fff; }.construction-permits-hero h1 { margin:5px 0 8px; color:#fff; font:800 clamp(2.4rem,6vw,4.5rem)/.95 var(--font-ui); letter-spacing:-.06em; }.construction-permits-hero p:last-child { max-width:600px; margin:0; color:#eeeaff; font-size:1.03rem; line-height:1.55; }.construction-permits-kicker { margin:0; color:#cfc5ff; font:.74rem/1 var(--font-ui); font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.construction-permits-empty { display:grid; grid-template-columns:64px minmax(0,1fr); gap:22px; align-items:start; padding:34px 40px; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; background:var(--surface-solid); box-shadow:0 18px 42px rgba(24,49,51,.08); }.construction-permits-empty>span { display:grid; width:58px; height:58px; place-items:center; border-radius:14px; background:#ece6ff; color:#43228d; font-size:2rem; }.construction-permits-empty .construction-permits-kicker { color:#5131b8; }.construction-permits-empty h2 { margin:7px 0 8px; font:800 clamp(1.4rem,3vw,2rem)/1.1 var(--font-ui); }.construction-permits-empty p:last-child { max-width:620px; margin:0; color:var(--muted); line-height:1.6; } .app-launcher-menu .launcher-glyph.app-icon-construction-permits { background:#5131b8; color:#fff; } .app-launcher-menu .launcher-glyph.app-icon-construction-permits svg { width:70%; height:70%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
html[data-theme="dark"] #construction-permits-app-view { background:#111635; } html[data-theme="dark"] #construction-permits-app-view .profile-menu,html[data-theme="dark"] #construction-permits-app-view .construction-permits-app-launcher-menu,html[data-theme="dark"] .construction-permits-empty { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .construction-permits-empty>span { background:#3b2a80; color:#e5ddff; }
@media(max-width:760px){#construction-permits-app-view .construction-permits-commandbar{min-height:54px;padding:0 14px}#construction-permits-app-view .portal-product,#construction-permits-app-view .construction-permits-brand span,#construction-permits-app-view .profile-trigger-copy,#construction-permits-app-view .chevron{display:none}#construction-permits-app-view .construction-permits-app-launcher-menu{top:54px;left:14px;padding:13px}.construction-permits-workspace{width:min(100% - 24px,720px);padding-top:22px}.construction-permits-hero{padding:28px 24px}.construction-permits-empty{grid-template-columns:1fr;padding:26px 24px}}

/* Construction permits review workspace: operational German UI, using the shared portal tokens. */
.construction-permits-demo-note{padding:10px 16px;border:1px solid #d7ccff;border-top:0;background:#f4f1ff;color:#43228d;font-size:.78rem;font-weight:750}.construction-permits-layout{display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:var(--surface-solid);box-shadow:0 18px 42px rgba(24,49,51,.08);overflow:hidden}.construction-permits-nav{display:grid;align-content:start;gap:4px;padding:18px 14px;border-right:1px solid var(--line);background:rgba(81,49,184,.035)}.construction-permits-nav button{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:750 .82rem/1 var(--font-ui);text-align:left;cursor:pointer}.construction-permits-nav button:hover,.construction-permits-nav button.is-active{background:#ece7ff;color:#382180}.construction-permits-nav span{display:grid;min-width:20px;height:20px;place-items:center;border-radius:10px;background:rgba(56,33,128,.12);font-size:.69rem}.construction-permits-content{min-width:0;padding:30px}.permit-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.permit-section-heading h2{margin:5px 0 0;font:800 clamp(1.5rem,3vw,2rem)/1.1 var(--font-ui);letter-spacing:-.03em}.permit-primary,.permit-secondary{min-height:38px;padding:0 13px;border:1px solid #382180;border-radius:8px;background:#382180;color:#fff;font:800 .76rem/1 var(--font-ui);cursor:pointer}.permit-secondary{background:transparent;color:#382180}.permit-primary:hover,.permit-secondary:hover{filter:brightness(.95)}.permit-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.permit-metrics article{padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}.permit-metrics span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.permit-metrics strong{display:block;margin:7px 0 4px;font:850 1.9rem/1 var(--font-ui)}.permit-metrics small{color:var(--muted);font-size:.7rem}.permit-focus{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px;border:1px solid rgba(81,49,184,.2);border-radius:13px;background:linear-gradient(135deg,rgba(81,49,184,.08),rgba(165,53,151,.04))}.permit-focus h3,.permit-checklist h3,.permit-timeline h3{margin:6px 0;font:800 1rem/1.25 var(--font-ui)}.permit-focus p:last-child,.permit-checklist p,.permit-timeline p{margin:0;color:var(--muted);line-height:1.55}.permit-search{display:flex;align-items:center;gap:7px;min-width:min(320px,100%);height:38px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-solid)}.permit-search input{width:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit}.permit-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.permit-table{width:100%;min-width:720px;border-collapse:collapse;text-align:left}.permit-table th{padding:11px 14px;background:rgba(81,49,184,.045);color:var(--muted);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}.permit-table td{padding:14px;border-top:1px solid var(--line);font-size:.82rem}.permit-table td strong{display:block}.permit-table td small{color:var(--muted)}.permit-table button{border:0;background:transparent;color:#382180;font:800 .76rem/1 var(--font-ui);cursor:pointer}.permit-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:12px;font-size:.68rem;font-weight:850;white-space:nowrap}.permit-status--review{background:#fff0cf;color:#795000}.permit-status--waiting{background:#e2f1ff;color:#185a86}.permit-status--complete{background:#dcf6e5;color:#18613b}.permit-checklist{display:grid;gap:12px}.permit-checklist article{padding:20px;border:1px solid var(--line);border-radius:12px}.permit-checklist .permit-secondary{margin-top:16px}.permit-timeline{display:grid;gap:0}.permit-timeline article{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}.permit-timeline time{color:#5131b8;font:850 .82rem/1.2 var(--font-ui)}.permit-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;background:rgba(15,12,35,.55)}.permit-modal-card{position:relative;width:min(720px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;padding:34px;border-radius:16px;background:var(--surface-solid);box-shadow:0 28px 70px rgba(14,10,43,.35)}.permit-modal-card h2{max-width:590px;margin:6px 0 22px;font:850 clamp(1.65rem,4vw,2.4rem)/1.06 var(--font-ui);letter-spacing:-.04em}.permit-modal-close{position:absolute;top:18px;right:18px;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-solid);color:var(--ink);font:300 1.5rem/1 sans-serif;cursor:pointer}.permit-detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.permit-detail-meta span{padding:6px 9px;border-radius:7px;background:rgba(81,49,184,.08);color:#382180;font-size:.73rem;font-weight:750}.permit-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.permit-detail-grid section{padding:16px;border:1px solid var(--line);border-radius:10px}.permit-detail-grid h3{margin:0 0 8px;font:800 .78rem/1 var(--font-ui)}.permit-detail-grid p,.permit-detail-grid li{margin:0;color:var(--muted);font-size:.84rem;line-height:1.55}.permit-detail-grid ul{margin:0;padding-left:18px}.permit-human-gate{margin:20px 0 0;padding:13px;border-left:3px solid #5131b8;background:rgba(81,49,184,.06);color:var(--muted);font-size:.78rem;line-height:1.55}@media(max-width:760px){.construction-permits-layout{grid-template-columns:1fr}.construction-permits-nav{display:flex;gap:5px;overflow:auto;padding:10px;border-right:0;border-bottom:1px solid var(--line)}.construction-permits-nav button{flex:0 0 auto}.construction-permits-content{padding:22px 16px}.permit-section-heading,.permit-focus{align-items:flex-start;flex-direction:column}.permit-metrics,.permit-detail-grid{grid-template-columns:1fr}.permit-search{min-width:100%}.permit-modal{padding:12px}.permit-modal-card{padding:28px 20px}.permit-timeline article{grid-template-columns:1fr;gap:6px}}

/* ERP: EGG's portal entry point uses the same authenticated shell. */
.permit-detail-citations{grid-column:1/-1}.permit-section-note{margin:-2px 0 12px!important;font-size:.74rem!important}.permit-detail-citations ol{display:grid;gap:9px;margin:0;padding:0;list-style:none}.permit-citation{position:relative;padding:12px 13px 12px 15px;border-left:3px solid #5131b8;background:rgba(81,49,184,.045)}.permit-citation strong,.permit-citation a{display:block;color:var(--ink);font:800 .78rem/1.35 var(--font-ui);text-decoration:none}.permit-citation a:hover{text-decoration:underline}.permit-citation-reference{margin:4px 0 7px!important;color:#5131b8!important;font-weight:800}.permit-citation-status{display:inline-flex;margin-bottom:7px;padding:3px 6px;border-radius:999px;font-size:.63rem;font-weight:850}.permit-citation-status--applied{background:#dcf6e5;color:#18613b}.permit-citation-status--consulted_not_applied{background:#fff0cf;color:#795000}.permit-citation-status--context_only{background:#e2f1ff;color:#185a86}.permit-citation-status--demo{background:#f2e9ff;color:#5f278e}.permit-citation-note{color:var(--muted)}.permit-citation-empty{padding:10px 0;list-style:none}
#egg-event-planning-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#egg-customer-portal-app-view { min-height:100vh; background:var(--surface); color:var(--ink); }
#egg-customer-portal-app-view .egg-customer-portal-commandbar { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#egg-customer-portal-app-view .portal-commandbar-left,#egg-customer-portal-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; } #egg-customer-portal-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#fff; cursor:pointer; } #egg-customer-portal-app-view .app-launcher:hover,#egg-customer-portal-app-view .app-launcher[aria-expanded="true"],#egg-customer-portal-app-view .profile-trigger:hover,#egg-customer-portal-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); } #egg-customer-portal-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #egg-customer-portal-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#egg-customer-portal-app-view .egg-customer-portal-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#fff; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #egg-customer-portal-app-view .egg-customer-portal-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; } #egg-customer-portal-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; } #egg-customer-portal-app-view .portal-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#egg-customer-portal-app-view .profile-wrap { position:relative; } #egg-customer-portal-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #egg-customer-portal-app-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; } #egg-customer-portal-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #egg-customer-portal-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #egg-customer-portal-app-view .profile-trigger-copy small,#egg-customer-portal-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; } #egg-customer-portal-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); } #egg-customer-portal-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #egg-customer-portal-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #egg-customer-portal-app-view .profile-menu-identity strong,#egg-customer-portal-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #egg-customer-portal-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #egg-customer-portal-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #egg-customer-portal-app-view .profile-menu-meta strong { color:var(--ink); } #egg-customer-portal-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#egg-customer-portal-app-view .egg-customer-portal-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #egg-customer-portal-app-view .egg-customer-portal-app-launcher-menu[hidden] { display:none; }
.egg-customer-portal-workspace { width:min(1480px,100%); margin:0 auto; padding:0; }.egg-customer-portal-frame { display:block; width:100%; min-height:calc(100vh - 64px); border:0; background:#f7f7fb; }
.app-launcher-menu .launcher-glyph.app-icon-customer-portal { background:linear-gradient(145deg,#2c328e,#d05989); }
#egg-event-planning-app-view .egg-event-planning-commandbar { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:64px; width:100vw; margin:0 calc(50% - 50vw); padding:0 clamp(14px,2.5vw,34px); border-bottom:1px solid rgba(255,255,255,.2); color:#f7fffc; background:linear-gradient(104deg,#21105e 0%,#40218d 58%,#742486 126%); box-shadow:0 9px 28px rgba(45,21,146,.18); }
#egg-event-planning-app-view .portal-commandbar-left,#egg-event-planning-app-view .portal-commandbar-right { display:flex; align-items:center; gap:12px; min-width:0; } #egg-event-planning-app-view .app-launcher { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:12px; background:transparent; color:#fff; cursor:pointer; } #egg-event-planning-app-view .app-launcher:hover,#egg-event-planning-app-view .app-launcher[aria-expanded="true"],#egg-event-planning-app-view .profile-trigger:hover,#egg-event-planning-app-view .profile-trigger[aria-expanded="true"] { background:rgba(255,255,255,.14); } #egg-event-planning-app-view .waffle-icon { display:grid; grid-template-columns:repeat(3,4px); gap:3px; } #egg-event-planning-app-view .waffle-icon i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#egg-event-planning-app-view .egg-event-planning-brand { display:flex; align-items:center; gap:8px; border:0; padding:0; color:#fff; background:transparent; font:800 .9rem/1 var(--font-ui); cursor:pointer; } #egg-event-planning-app-view .egg-event-planning-brand .qi-logo-mark { box-sizing:border-box; width:32px; height:32px; padding:3px; border-radius:8px; background:#fff; object-fit:contain; } #egg-event-planning-app-view .portal-product { padding-left:12px; border-left:1px solid rgba(255,255,255,.22); color:rgba(247,255,252,.72); font:.76rem/1 var(--font-ui); font-weight:700; } #egg-event-planning-app-view .portal-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; color:#fff; background:transparent; cursor:pointer; }
#egg-event-planning-app-view .profile-wrap { position:relative; } #egg-event-planning-app-view .profile-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:4px 7px; border:0; border-radius:12px; color:#f7fffc; background:transparent; box-shadow:none; text-align:left; } #egg-event-planning-app-view .portal-avatar { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:var(--avatar-image) center/cover,linear-gradient(145deg,#b837c4,#ef4d62); color:#fff; font-size:.67rem; font-weight:800; } #egg-event-planning-app-view .portal-avatar.has-photo { color:transparent; } #egg-event-planning-app-view .profile-trigger-copy { display:grid; gap:1px; min-width:0; line-height:1.1; } #egg-event-planning-app-view .profile-trigger-copy strong { max-width:178px; overflow:hidden; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } #egg-event-planning-app-view .profile-trigger-copy small,#egg-event-planning-app-view .chevron { color:rgba(247,255,252,.7); font-size:.64rem; } #egg-event-planning-app-view .profile-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); padding:16px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 22px 54px rgba(8,31,25,.22); } #egg-event-planning-app-view .profile-menu-identity { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); } #egg-event-planning-app-view .profile-menu-identity .portal-avatar { width:38px; height:38px; border-color:rgba(45,21,146,.18); } #egg-event-planning-app-view .profile-menu-identity strong,#egg-event-planning-app-view .profile-menu-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #egg-event-planning-app-view .profile-menu-identity small { margin-top:3px; color:var(--muted); font-size:.68rem; } #egg-event-planning-app-view .profile-menu-meta { display:flex; align-items:center; justify-content:space-between; margin:13px 0; color:var(--muted); font-size:.72rem; } #egg-event-planning-app-view .profile-menu-meta strong { color:var(--ink); } #egg-event-planning-app-view .profile-signout { width:100%; min-height:35px; border-radius:8px; }
#egg-event-planning-app-view .egg-event-planning-app-launcher-menu { position:absolute; z-index:25; top:64px; left:clamp(14px,2.5vw,34px); width:min(530px,calc(100vw - 28px)); padding:19px; border:1px solid rgba(45,21,146,.14); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 22px 54px rgba(8,31,25,.22); backdrop-filter:blur(22px); } #egg-event-planning-app-view .egg-event-planning-app-launcher-menu[hidden] { display:none; }
.egg-event-planning-workspace { width:min(1480px,100%); margin:0 auto; padding:0; }.egg-event-planning-frame { display:block; width:100%; min-height:calc(100vh - 64px); border:0; background:#f7f7fb; }
/* Governance Hub — same violet QI/EGG application shell; never transparent over
   an underlying workspace. */
#egg-governance-hub-app-view{min-height:100vh;background:#f6f5fb;color:var(--ink)}
#egg-governance-hub-app-view .egg-governance-hub-commandbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;min-height:64px;width:100vw;margin:0 calc(50% - 50vw);padding:0 clamp(14px,2.5vw,34px);border-bottom:1px solid rgba(255,255,255,.2);color:#fff;background:linear-gradient(104deg,#21105e 0%,#40218d 56%,#742486 126%);box-shadow:0 9px 28px rgba(45,21,146,.18)}
.egg-governance-hub-workspace{width:min(1480px,100%);margin:0 auto;padding:0}.egg-governance-hub-frame{display:block;width:100%;min-height:calc(100vh - 64px);border:0;background:#f6f5fb}
#egg-governance-hub-app-view .portal-commandbar-left,#egg-governance-hub-app-view .portal-commandbar-right{display:flex;align-items:center;gap:12px;min-width:0}#egg-governance-hub-app-view .app-launcher{display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}#egg-governance-hub-app-view .app-launcher:hover,#egg-governance-hub-app-view .app-launcher[aria-expanded="true"]{background:rgba(255,255,255,.14)}#egg-governance-hub-app-view .waffle-icon{display:grid;grid-template-columns:repeat(3,4px);gap:3px}#egg-governance-hub-app-view .waffle-icon i{width:4px;height:4px;border-radius:50%;background:currentColor}#egg-governance-hub-app-view .egg-governance-hub-brand{display:flex;align-items:center;gap:8px;border:0;padding:0;background:transparent;color:#fff;font:800 .9rem/1 var(--font-ui);cursor:pointer}#egg-governance-hub-app-view .egg-governance-hub-brand .qi-logo-mark{box-sizing:border-box;width:32px;height:32px;padding:3px;border-radius:8px;background:#fff;object-fit:contain}#egg-governance-hub-app-view .portal-product{padding-left:12px;border-left:1px solid rgba(255,255,255,.22);color:rgba(247,255,252,.72);font:.76rem/1 var(--font-ui);font-weight:700}#egg-governance-hub-app-view .portal-icon-button{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#fff;background:transparent;cursor:pointer}#egg-governance-hub-app-view .portal-avatar{display:grid;width:32px;height:32px;place-items:center;border:2px solid rgba(255,255,255,.6);border-radius:50%;background:linear-gradient(145deg,#b837c4,#ef4d62);color:#fff;font-size:.67rem;font-weight:800}#egg-governance-hub-app-view .profile-trigger-copy{display:grid;gap:1px;color:#fff;line-height:1.1}#egg-governance-hub-app-view .profile-trigger-copy small{color:rgba(255,255,255,.7);font-size:.64rem}.egg-governance-hub-app-launcher-menu{position:absolute;z-index:35;top:64px;left:clamp(14px,2.5vw,34px);width:min(530px,calc(100vw - 28px));padding:19px;border:1px solid rgba(45,21,146,.14);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 22px 54px rgba(8,31,25,.22)}.egg-governance-hub-app-launcher-menu[hidden]{display:none}@media(max-width:760px){#egg-governance-hub-app-view .egg-governance-hub-commandbar{min-height:54px;padding:0 14px}#egg-governance-hub-app-view .portal-product,#egg-governance-hub-app-view .egg-governance-hub-brand span,#egg-governance-hub-app-view .profile-trigger-copy{display:none}.egg-governance-hub-app-launcher-menu{top:54px;left:14px;padding:13px}}
html[data-theme="dark"] #egg-event-planning-app-view { background:#111635; } html[data-theme="dark"] #egg-event-planning-app-view .profile-menu,html[data-theme="dark"] #egg-event-planning-app-view .egg-event-planning-app-launcher-menu,html[data-theme="dark"] .egg-event-planning-launch { border-color:rgba(199,193,255,.18); background:#1b1647; color:#f5f2ff; } html[data-theme="dark"] .egg-event-planning-launch>span { background:#6d2e3d; color:#ffe2d8; }
@media(max-width:760px){#egg-event-planning-app-view .egg-event-planning-commandbar{min-height:54px;padding:0 14px}#egg-event-planning-app-view .portal-product,#egg-event-planning-app-view .egg-event-planning-brand span,#egg-event-planning-app-view .profile-trigger-copy,#egg-event-planning-app-view .chevron{display:none}#egg-event-planning-app-view .egg-event-planning-app-launcher-menu{top:54px;left:14px;padding:13px}.egg-event-planning-workspace{width:min(100% - 24px,720px);padding-top:22px}.egg-event-planning-hero{padding:28px 24px}.egg-event-planning-launch{grid-template-columns:1fr;padding:26px 24px}}

/* EU AI Act v1.2 — practical, readable field guide for everyday work. */
.eu-ai-act-workspace { width:min(1240px,calc(100% - 48px)); padding-top:52px; }
.eu-ai-act-hero { padding:40px 44px; }
.eu-ai-act-hero p { font-size:1.05rem; line-height:1.55; }
.eu-ai-act-layout { grid-template-columns:300px minmax(0,1fr); gap:30px; }
.eu-ai-act-module-nav button { padding:14px; }
.eu-ai-act-module-nav button strong { font-size:.96rem; }
.eu-ai-act-module { padding:42px 46px; }
.eu-ai-act-module h2 { max-width:760px; font-size:clamp(2rem,3.1vw,2.75rem); line-height:1.08; }
.eu-ai-act-objective { max-width:760px; margin:0; color:var(--muted); font-size:1.12rem; line-height:1.55; }
.eu-ai-act-copy { margin:28px 0 20px; padding:24px 26px; border-left:5px solid #5131b8; border-radius:0 12px 12px 0; background:rgba(81,49,184,.08); font-size:1.16rem; line-height:1.7; }
.eu-ai-act-copy p { margin:0; }
.eu-ai-act-eyebrow { display:block; color:#5131b8; font-size:.76rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.eu-ai-act-workplace { margin:20px 0; padding:24px 26px; border:1px solid rgba(81,49,184,.22); border-radius:14px; background:linear-gradient(135deg,rgba(81,49,184,.09),rgba(165,53,151,.06)); }
.eu-ai-act-workplace p { max-width:800px; margin:10px 0 0; font-size:1.06rem; line-height:1.65; }
.eu-ai-act-provisions { display:grid; gap:12px; margin:24px 0; padding:24px 26px; border:1px solid rgba(81,49,184,.2); border-radius:14px; background:var(--surface-solid); }
.eu-ai-act-provisions>.eu-ai-act-eyebrow { margin:0 0 2px; }
.eu-ai-act-provisions article { display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; padding:15px 0; border-top:1px solid var(--line); }
.eu-ai-act-provisions article>span { align-self:start; width:max-content; padding:5px 8px; border-radius:7px; background:#e9e2ff; color:#43228d; font-size:.78rem; font-weight:900; }
.eu-ai-act-provisions h3 { margin:0; color:var(--ink); font-size:1rem; }
.eu-ai-act-provisions p { margin:6px 0 0; color:var(--muted); font-size:1rem; line-height:1.55; }
.eu-ai-act-remember { margin:20px 0; padding:15px 18px; border-radius:10px; background:#fff4df; color:#513b16; font-size:1rem; line-height:1.55; }
.eu-ai-act-practical { margin:24px 0 30px; padding:0; }
.eu-ai-act-practical h3 { margin:0 0 12px; font-size:1.15rem; }
.eu-ai-act-practical ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:practical; }
.eu-ai-act-practical li { position:relative; min-height:30px; padding:12px 14px 12px 50px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); font-size:1rem; line-height:1.5; }
.eu-ai-act-practical li::before { position:absolute; left:13px; top:10px; display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#5131b8; color:#fff; content:counter(practical); counter-increment:practical; font-size:.78rem; font-weight:900; }
.eu-ai-act-check { margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.eu-ai-act-check>.eu-ai-act-eyebrow { margin:0 0 9px; }
.eu-ai-act-quiz,.eu-ai-act-classification { padding:26px; }
.eu-ai-act-quiz legend,.eu-ai-act-classification legend { max-width:820px; font-size:1.15rem; line-height:1.45; }
.eu-ai-act-quiz label { padding:16px; }
.eu-ai-act-quiz label>span { font-size:1rem; line-height:1.5; }
.eu-ai-act-help,.eu-ai-act-scenario p { font-size:1rem; line-height:1.5; }
.eu-ai-act-scenario { padding:18px; }
.eu-ai-act-actions button { min-height:48px; font-size:.96rem; }
html[data-theme="dark"] .eu-ai-act-copy { background:rgba(148,119,255,.14); }
html[data-theme="dark"] .eu-ai-act-workplace { border-color:rgba(190,176,255,.28); background:linear-gradient(135deg,rgba(148,119,255,.18),rgba(216,115,203,.1)); }
html[data-theme="dark"] .eu-ai-act-provisions { border-color:rgba(199,193,255,.18); background:#211b53; }
html[data-theme="dark"] .eu-ai-act-provisions article>span { background:#3b2a80; color:#e5ddff; }
html[data-theme="dark"] .eu-ai-act-eyebrow { color:#c5b6ff; }
html[data-theme="dark"] .eu-ai-act-remember { background:#3d311d; color:#ffe6b8; }
html[data-theme="dark"] .eu-ai-act-practical li { border-color:rgba(199,193,255,.18); background:#211b53; }
@media(max-width:760px){.eu-ai-act-workspace{width:min(100% - 28px,720px);padding-top:26px}.eu-ai-act-hero{padding:28px 24px}.eu-ai-act-layout{grid-template-columns:1fr}.eu-ai-act-module{padding:26px 20px}.eu-ai-act-copy,.eu-ai-act-workplace,.eu-ai-act-provisions{padding:20px}.eu-ai-act-provisions article{grid-template-columns:1fr;gap:9px}.eu-ai-act-copy{font-size:1.06rem}.eu-ai-act-quiz,.eu-ai-act-classification{padding:18px}.eu-ai-act-practical li{padding-left:48px}}

/* EU AI Act layout containment: every generated lesson tile must keep its
   own text inside its box at desktop, tablet, and narrow widths. */
.eu-ai-act-module-nav button { grid-template-columns:32px minmax(0,1fr); min-width:0; }
.eu-ai-act-module-nav button>div { min-width:0; overflow-wrap:anywhere; }
.eu-ai-act-dropzone { min-width:0; overflow-wrap:anywhere; }
.eu-ai-act-scenario { grid-template-columns:minmax(0,1fr) minmax(190px,240px); min-width:0; }
.eu-ai-act-scenario p,.eu-ai-act-scenario label { min-width:0; overflow-wrap:anywhere; }
.eu-ai-act-scenario select { width:100%; min-width:0; }
.eu-ai-act-actions { flex-wrap:wrap; }
.eu-ai-act-actions button { max-width:100%; }
.eu-ai-act-provisions article { grid-template-columns:minmax(112px,168px) minmax(0,1fr); min-width:0; }
.eu-ai-act-provisions article>span { justify-self:start; box-sizing:border-box; max-width:100%; width:auto; line-height:1.3; overflow-wrap:anywhere; }
.eu-ai-act-provisions article>div { min-width:0; }
.eu-ai-act-provisions h3,.eu-ai-act-provisions p { overflow-wrap:anywhere; }
@media(max-width:960px){
  .eu-ai-act-workspace { width:min(100% - 32px,900px); }
  .eu-ai-act-layout { grid-template-columns:1fr; }
  .eu-ai-act-module-nav { position:static; }
  .eu-ai-act-module-nav ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eu-ai-act-module { min-width:0; }
}
@media(max-width:760px){
  .eu-ai-act-module-nav ol { grid-template-columns:1fr; }
}

/* Construction-permit register: the desktop shell is intentionally wide
   enough for every field.  Smaller windows retain the complete register in
   a clearly scrollable surface instead of allowing the pinned action column
   to cover the Status field. */
@media (min-width: 1080px) {
  .construction-permits-workspace { width:min(1360px,calc(100% - 32px)); }
  .construction-permits-layout { grid-template-columns:190px minmax(0,1fr); }
}
.permit-table-wrap {
  position:relative;
  overflow-x:auto;
  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
  scrollbar-color:rgba(56,33,128,.72) rgba(81,49,184,.10);
  scrollbar-width:auto;
}
.permit-table-wrap::-webkit-scrollbar { width:13px; height:13px; }
.permit-table-wrap::-webkit-scrollbar-track { background:rgba(81,49,184,.10); border-radius:999px; }
.permit-table-wrap::-webkit-scrollbar-thumb { border:3px solid rgba(81,49,184,.10); border-radius:999px; background:#5131b8; }
.permit-table { min-width:980px; table-layout:fixed; }
.permit-col-reference { width:13%; }
.permit-col-project { width:27%; }
.permit-col-applicant { width:21%; }
.permit-col-received { width:13%; }
.permit-col-status { width:16%; }
.permit-col-action { width:10%; }
.permit-table td { overflow-wrap:anywhere; }
.permit-table th:last-child,.permit-table td:last-child { min-width:92px; text-align:right; }
.permit-table button { min-width:76px; white-space:nowrap; }
.permit-action-header { white-space:nowrap; }

/* The modal's layout rule uses display:grid.  Keep the HTML hidden contract
   explicit so a browser stylesheet or later global rule can never leave a
   detail dialog invisible after the Open action removes [hidden]. */
.permit-modal[hidden] { display:none !important; }

/* Native dialog rendering is used for protected permit details.  It avoids
   relying on a hidden div as a modal implementation and gives the browser a
   guaranteed top layer for the opened case. */
dialog.permit-modal {
  width:min(720px,calc(100vw - 48px));
  max-width:none;
  max-height:min(760px,calc(100vh - 48px));
  margin:auto;
  padding:0;
  border:0;
  background:transparent;
}
dialog.permit-modal:not([open]) { display:none; }
dialog.permit-modal::backdrop { background:rgba(15,12,35,.55); }
dialog.permit-modal .permit-modal-card { width:auto; }
@media(max-width:760px) { dialog.permit-modal { width:calc(100vw - 24px); } }

/* Geometric close mark: font glyph metrics place “×” above its visual centre
   in several browser/font combinations. Two centered strokes are invariant. */
.permit-modal-close {
  padding:0;
  font:inherit;
}
.permit-modal-close > span {
  position:relative;
  display:block;
  width:16px;
  height:16px;
}
.permit-modal-close > span::before,
.permit-modal-close > span::after {
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  content:"";
  transform:translate(-50%,-50%) rotate(45deg);
}
.permit-modal-close > span::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* QI-PORTAL-001F-A2: account and tenant language settings. */
#portal-view .profile-settings-link {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--ink);
  font:750 .72rem/1.25 var(--font-ui);
  cursor:pointer;
  text-align:left;
}
#portal-view .profile-settings-link:hover,#portal-view .profile-settings-link:focus-visible { border-color:#5131b8; background:rgba(81,49,184,.07); outline:none; }
#portal-view .profile-settings-link strong { color:var(--muted); font-size:.64rem; font-weight:700; }
.language-settings-dialog { width:min(100% - 28px,680px); }
.language-settings-body { display:grid; gap:20px; padding:24px 26px 28px; }
.language-settings-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.72fr); align-items:end; gap:14px 18px; padding:18px; border:1px solid var(--line); border-radius:13px; }
.language-settings-form>div { align-self:center; }
.language-settings-form h3 { margin:0; font:780 1rem/1.25 var(--font-ui); }
.language-settings-form p { margin:6px 0 0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.language-settings-form label { display:grid; gap:6px; color:var(--ink-soft); font-size:.72rem; font-weight:760; }
.language-settings-form select { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-solid); color:var(--ink); font:inherit; }
.language-settings-form fieldset { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 16px; margin:0; padding:14px; border:1px solid var(--line); border-radius:10px; }
.language-settings-form legend { padding:0 6px; color:var(--ink-soft); font-size:.72rem; font-weight:800; }
.language-settings-form fieldset label { display:flex; align-items:center; gap:8px; min-height:30px; }
.language-settings-form input[type="checkbox"] { width:17px; height:17px; accent-color:#5131b8; }
.language-settings-form button[type="submit"] { justify-self:end; min-height:40px; padding:0 15px; border:0; border-radius:8px; background:#5131b8; color:#fff; font:800 .76rem/1 var(--font-ui); cursor:pointer; }
.language-settings-form button:disabled { cursor:wait; opacity:.6; }
#language-settings-status { min-height:1.2em; margin:0; }
html[data-theme="dark"] .language-settings-form { border-color:rgba(199,193,255,.18); }
html[data-theme="dark"] .language-settings-form select { border-color:rgba(199,193,255,.24); background:#20275c; color:#f7f4ff; }
@media(max-width:760px){.language-settings-body{padding:18px}.language-settings-form{grid-template-columns:1fr}.language-settings-form fieldset{grid-template-columns:1fr}.language-settings-form button[type="submit"]{justify-self:stretch}}

/* QI-PORTAL-001F-D2: tenant-admin role/profile app visibility policy. */
.entitlement-settings-dialog { width:min(100% - 28px,900px); }
.entitlement-settings-body { display:grid; gap:20px; padding:24px 26px 28px; }
.entitlement-settings-body>p,.entitlement-profile-settings p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.5; }
.entitlement-role-matrix { display:grid; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.entitlement-role-row { display:grid; grid-template-columns:minmax(190px,1fr) repeat(3,minmax(92px,.3fr)); align-items:center; gap:10px; min-height:48px; padding:8px 14px; border-top:1px solid var(--line); }
.entitlement-role-row:first-child { border-top:0; background:var(--surface-soft); color:var(--muted); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.entitlement-role-row strong { font-size:.8rem; }
.entitlement-role-row label { display:flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700; }
.entitlement-role-row input[type="checkbox"] { width:17px; height:17px; accent-color:#5131b8; }
.entitlement-profile-settings { display:grid; gap:14px; padding:18px; border:1px solid var(--line); border-radius:13px; }
.entitlement-profile-settings h3 { margin:0 0 4px; font:780 1rem/1.25 var(--font-ui); }
.entitlement-profile-card { display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; }
.entitlement-profile-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.entitlement-profile-apps,.entitlement-profile-members { display:flex; flex-wrap:wrap; gap:8px 14px; }
.entitlement-profile-apps label,.entitlement-profile-members label { display:flex; align-items:center; gap:6px; font-size:.72rem; }
.entitlement-profile-create { display:grid; grid-template-columns:1fr 1.3fr auto; align-items:end; gap:12px; }
.entitlement-profile-create label { display:grid; gap:5px; color:var(--ink-soft); font-size:.72rem; font-weight:760; }
.entitlement-profile-create input { min-height:40px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-solid); color:var(--ink); font:inherit; }
.entitlement-profile-create button,.entitlement-settings-actions button { min-height:40px; padding:0 15px; border:0; border-radius:8px; background:#5131b8; color:#fff; font:800 .76rem/1 var(--font-ui); cursor:pointer; }
.entitlement-settings-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }
html[data-theme="dark"] .entitlement-role-matrix,html[data-theme="dark"] .entitlement-profile-settings,html[data-theme="dark"] .entitlement-profile-card { border-color:rgba(199,193,255,.18); }
html[data-theme="dark"] .entitlement-role-row:first-child { background:#20275c; }
html[data-theme="dark"] .entitlement-profile-create input { border-color:rgba(199,193,255,.24); background:#20275c; color:#f7f4ff; }
@media(max-width:760px){.entitlement-settings-body{padding:18px}.entitlement-role-row{grid-template-columns:1fr;gap:7px}.entitlement-role-row:first-child{display:none}.entitlement-profile-create{grid-template-columns:1fr}.entitlement-settings-actions{align-items:stretch;flex-direction:column}.entitlement-settings-actions button{width:100%}}
/* Venue Library uses the same EGG command bar as Customer Portal and Governance Hub. */
#egg-venue-library-app-view{min-height:100vh;background:#f6f5fb;color:var(--ink)}
#egg-venue-library-app-view .egg-venue-library-commandbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;min-height:64px;width:100vw;margin:0 calc(50% - 50vw);padding:0 clamp(14px,2.5vw,34px);border-bottom:1px solid rgba(255,255,255,.2);color:#fff;background:linear-gradient(104deg,#21105e 0%,#40218d 56%,#742486 126%);box-shadow:0 9px 28px rgba(45,21,146,.18)}
#egg-venue-library-app-view .portal-commandbar-left,#egg-venue-library-app-view .portal-commandbar-right{display:flex;align-items:center;gap:12px;min-width:0}#egg-venue-library-app-view .app-launcher{display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}#egg-venue-library-app-view .app-launcher:hover,#egg-venue-library-app-view .app-launcher[aria-expanded="true"],#egg-venue-library-app-view .profile-trigger:hover,#egg-venue-library-app-view .profile-trigger[aria-expanded="true"]{background:rgba(255,255,255,.14)}#egg-venue-library-app-view .waffle-icon{display:grid;grid-template-columns:repeat(3,4px);gap:3px}#egg-venue-library-app-view .waffle-icon i{width:4px;height:4px;border-radius:50%;background:currentColor}#egg-venue-library-app-view .egg-venue-library-brand{display:flex;align-items:center;gap:8px;border:0;padding:0;background:transparent;color:#fff;font:800 .9rem/1 var(--font-ui);cursor:pointer}#egg-venue-library-app-view .egg-venue-library-brand .qi-logo-mark{box-sizing:border-box;width:32px;height:32px;padding:3px;border-radius:8px;background:#fff;object-fit:contain}#egg-venue-library-app-view .portal-product{padding-left:12px;border-left:1px solid rgba(255,255,255,.22);color:rgba(247,255,252,.72);font:.76rem/1 var(--font-ui);font-weight:700}#egg-venue-library-app-view .portal-icon-button{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#fff;background:transparent;cursor:pointer}#egg-venue-library-app-view .profile-wrap{position:relative}#egg-venue-library-app-view .profile-trigger{display:flex;align-items:center;gap:9px;min-height:44px;padding:4px 7px;border:0;border-radius:12px;color:#f7fffc;background:transparent;box-shadow:none;text-align:left;cursor:pointer}#egg-venue-library-app-view .portal-avatar{display:grid;width:32px;height:32px;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.6);border-radius:50%;background:linear-gradient(145deg,#b837c4,#ef4d62);color:#fff;font-size:.67rem;font-weight:800}#egg-venue-library-app-view .profile-trigger-copy{display:grid;gap:1px;min-width:0;line-height:1.1}#egg-venue-library-app-view .profile-trigger-copy strong{max-width:178px;overflow:hidden;font-size:.73rem;text-overflow:ellipsis;white-space:nowrap}#egg-venue-library-app-view .profile-trigger-copy small,#egg-venue-library-app-view .chevron{color:rgba(247,255,252,.7);font-size:.64rem}#egg-venue-library-app-view .profile-menu{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:min(290px,calc(100vw - 28px));padding:16px;border:1px solid rgba(45,21,146,.14);border-radius:18px;background:rgba(255,255,255,.98);color:var(--ink);box-shadow:0 22px 54px rgba(8,31,25,.22)}.egg-venue-library-app-launcher-menu{position:absolute;z-index:35;top:64px;left:clamp(14px,2.5vw,34px);width:min(530px,calc(100vw - 28px));padding:19px;border:1px solid rgba(45,21,146,.14);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 22px 54px rgba(8,31,25,.22)}.egg-venue-library-app-launcher-menu[hidden]{display:none}.egg-venue-library-workspace{width:min(1480px,100%);margin:0 auto;padding:0}.egg-venue-library-frame{display:block;width:100%;min-height:calc(100vh - 64px);border:0;background:#f6f5fb}@media(max-width:760px){#egg-venue-library-app-view .egg-venue-library-commandbar{min-height:54px;padding:0 14px}#egg-venue-library-app-view .portal-product,#egg-venue-library-app-view .egg-venue-library-brand span,#egg-venue-library-app-view .profile-trigger-copy,#egg-venue-library-app-view .chevron{display:none}.egg-venue-library-app-launcher-menu{top:54px;left:14px;padding:13px}}

/* Website Draft: restrained private-preview shell using the shared QI chrome. */
#website-draft-app-view,.website-draft-shell{min-height:100vh;background:linear-gradient(180deg,#f7f5fb 0%,#eeebf5 100%);color:var(--ink)}
#website-draft-app-view>.portal-commandbar,.website-draft-shell>.portal-commandbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;min-height:64px;width:100%;padding:0 clamp(14px,2.5vw,34px);color:#fff;background:linear-gradient(104deg,#21105e 0%,#40218d 56%,#742486 126%);box-shadow:0 9px 28px rgba(45,21,146,.18)}
#website-draft-app-view .portal-commandbar-left,#website-draft-app-view .portal-commandbar-right,.website-draft-shell .portal-commandbar-left,.website-draft-shell .portal-commandbar-right{display:flex;align-items:center;gap:12px;min-width:0}
.website-draft-shell .profile-trigger-copy{display:grid;gap:2px;min-width:0;line-height:1.05;text-align:left}.website-draft-shell .profile-trigger-copy strong,.website-draft-shell .profile-trigger-copy small{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.website-draft-shell .profile-trigger-copy strong{font-size:.76rem}.website-draft-shell .profile-trigger-copy small{color:rgba(255,255,255,.72);font-size:.64rem;text-transform:capitalize}
.website-draft-brand,.website-draft-shell .website-draft-brand{display:flex;align-items:center;gap:9px;border:0;padding:0;background:transparent;color:#fff;font:800 .9rem/1 var(--font-ui);text-decoration:none;cursor:pointer}
.website-draft-brand .qi-logo-mark{box-sizing:border-box;width:32px;height:32px;padding:3px;border-radius:8px;background:#fff;object-fit:contain}
.website-draft-launcher-link{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#fff;font-weight:900;letter-spacing:2px;text-decoration:none}
.website-draft-workspace{width:min(1600px,100%);margin:0 auto;padding:clamp(18px,3vw,34px)}
.website-draft-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 auto 18px;padding:20px 22px;border:1px solid rgba(45,21,146,.12);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 16px 42px rgba(31,17,75,.08)}
.website-draft-heading h1{margin:3px 0 6px;font:800 clamp(1.5rem,3vw,2.25rem)/1.05 var(--font-ui)}.website-draft-heading p{margin:0;color:var(--muted)}
.website-draft-frame{display:block;width:100%;min-height:calc(100vh - 210px);border:1px solid rgba(45,21,146,.14);border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(31,17,75,.13)}
@media(max-width:760px){#website-draft-app-view>.portal-commandbar,.website-draft-shell>.portal-commandbar{min-height:54px;padding:0 14px}.website-draft-heading{align-items:stretch;flex-direction:column}.website-draft-heading .secondary-button{width:100%}.website-draft-workspace{padding:12px}.website-draft-frame{min-height:calc(100vh - 250px)}}