: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; --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);
}
* { 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; }
.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-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));
}
#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; }
#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; }
}

/* 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); }