:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, ui-monospace, monospace;
  --ink: #142236;
  --muted: #66758a;
  --navy: #0b1930;
  --blue: #2563eb;
  --cyan: #06b6d4;
  --line: #dce5ef;
  --surface: #ffffff;
  --soft: #f4f8fc;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(18, 45, 77, .09);
}
.landing-page{min-height:100vh;color:#e8f0fa;background:radial-gradient(circle at 78% 12%,#183e67 0,transparent 28%),#081220}.landing-header{display:flex;align-items:center;justify-content:flex-start;max-width:1220px;margin:0 auto;padding:22px 28px;background:transparent}.landing-header::after{display:none}.landing-brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:800;text-decoration:none}.landing-brand span{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;color:#071120;background:#8ad5ff;font-size:11px;letter-spacing:.05em}.landing-login{margin-left:auto;padding:8px 13px;border:1px solid rgba(203,226,248,.35);border-radius:8px;color:#e8f0fa;font-size:13px;font-weight:700;text-decoration:none}.landing-login:hover{border-color:#8ad5ff;background:rgba(138,213,255,.1)}.landing-main{max-width:1220px;margin:0 auto;padding:62px 28px 42px}.landing-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:70px;min-height:470px}.landing-hero .eyebrow{color:#8ad5ff}.landing-hero h1{max-width:720px;margin:12px 0 18px;color:#fff;font-size:clamp(40px,6vw,72px);line-height:1.03;letter-spacing:-.06em}.landing-hero p{max-width:600px;margin:0;color:#a9bdd2;font-size:17px;line-height:1.65}.landing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.landing-actions .button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;text-decoration:none}.landing-primary{gap:10px;padding:12px 18px;background:#68c6ff}.landing-primary span{font-size:20px;line-height:0}.landing-secondary{border-color:rgba(203,226,248,.3);color:#eaf4ff;background:transparent}.landing-note{margin-top:16px!important;color:#7088a1!important;font-size:12px!important}.landing-note code{padding:2px 5px;border-radius:4px;color:#b9e4ff;background:rgba(138,213,255,.1)}.landing-diagram{position:relative;min-height:330px;border:1px solid rgba(177,213,242,.22);border-radius:22px;background:linear-gradient(145deg,rgba(23,55,88,.88),rgba(9,23,40,.9));box-shadow:0 30px 80px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.06)}.landing-diagram::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(168,210,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(168,210,240,.06) 1px,transparent 1px);background-size:22px 22px}.landing-node,.landing-subnet{position:absolute;z-index:1;display:grid;place-items:center;border:1px solid #6f92b2;border-radius:10px;color:#eef7ff;background:#102942;font-size:12px;font-weight:750;box-shadow:0 8px 22px rgba(0,0,0,.2)}.landing-node.internet{top:70px;left:45px;width:102px;height:55px;border-color:#79c8f6;background:#12547e}.landing-node.firewall{top:68px;left:calc(50% - 48px);width:96px;height:58px;border-color:#e3a273;background:#5a3829}.landing-node.vnet{top:68px;right:36px;width:105px;height:58px;border-color:#65c7ad;background:#133f42}.landing-subnet{top:205px;width:92px;height:45px;color:#bce9dc;background:#143c45}.landing-subnet.s1{left:42%;}.landing-subnet.s2{right:8%;}.landing-line{position:absolute;z-index:0;height:2px;background:#8ab9d8;transform-origin:left}.landing-line.l1{top:97px;left:145px;width:calc(50% - 94px)}.landing-line.l2{top:97px;left:calc(50% + 48px);width:calc(50% - 84px)}.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;margin-top:34px;border:1px solid rgba(180,216,242,.18);border-radius:16px;background:rgba(180,216,242,.18)}.landing-features article{padding:22px 24px;background:#0c192a}.landing-features span{color:#75cfff;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace}.landing-features h2{margin:10px 0 7px;color:#fff;font-size:16px}.landing-features p{margin:0;color:#90a7bd;font-size:13px;line-height:1.55}.login-main{display:grid;min-height:calc(100vh - 76px);place-items:center;padding:28px}.login-card{width:min(480px,100%);padding:34px;border:1px solid rgba(180,216,242,.22);border-radius:18px;background:#0d1b2d;box-shadow:0 30px 90px rgba(0,0,0,.25)}.login-card h1{margin:8px 0;color:#fff;font-size:36px;letter-spacing:-.04em}.login-card p{margin:0 0 24px;color:#a9bdd2}.login-card .button{display:flex;justify-content:center;text-decoration:none}.login-back{display:block;margin-top:16px;color:#8acfff;font-size:13px;text-align:center;text-decoration:none}@media(max-width:800px){.landing-main{padding:36px 20px}.landing-header{padding:18px 20px}.landing-hero{grid-template-columns:1fr;gap:36px;min-height:0}.landing-hero h1{font-size:clamp(38px,12vw,58px)}.landing-diagram{min-height:275px}.landing-features{grid-template-columns:1fr}.landing-line.l1{width:calc(50% - 92px)}.landing-line.l2{width:calc(50% - 84px)}}
.library-hero,.workspace-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#fff,#f3f8fd);box-shadow:var(--shadow)}
.library-hero h2,.workspace-intro h1{margin:.3rem 0 .55rem;color:var(--ink);font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}.library-hero p,.workspace-intro p{max-width:720px;margin:0;color:var(--muted);line-height:1.65}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.library-card{min-height:220px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.library-card h3{margin:16px 0 8px}.library-card p{min-height:70px;color:var(--muted);line-height:1.55}.library-card a{color:var(--blue);font-weight:700;text-decoration:none}.library-card-new{border-color:#8db8e8;background:linear-gradient(155deg,#f0f7ff,#fff)}.library-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:#0b5cad;background:#e1efff;font-size:28px;font-weight:800}.muted{color:var(--muted);font-size:13px}@media(max-width:760px){.library-hero,.workspace-intro{display:block}.library-hero .button,.workspace-intro .button{display:inline-block;margin-top:18px}.library-grid{grid-template-columns:1fr}}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: #f5f8fc;
  font: 15px/1.55 var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
button,input,select,textarea{font-family:var(--font-ui)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-synthesis:none}

.app-header {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px max(24px, calc((100% - 1160px) / 2));
  color: #fff;
  background: #0d2138;
}
.app-header::before,
.app-header::after { display: none; content: none; }
.app-header h1, .app-header p { margin: 0; position: relative; z-index: 1; }
.app-header h1 { font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.03em; }
.app-header p { margin-top: 4px; color: #b9d2eb; }
.app-header { padding-top: 16px; padding-bottom: 16px; }
.header-title { position: relative; z-index: 1; min-width: 170px; }
.header-title h1 { font-size: 1.2rem; }
.header-title p { font-size: 12px; }
.tool-menu { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tool-menu a { padding: 8px 12px; border-radius: 9px; color: #c8d9eb; font-size: 13px; font-weight: 700; text-decoration: none; }
.tool-menu a:hover, .tool-menu a.active { color: #fff; background: rgba(255,255,255,.12); }
.header-menu-button { position: relative; z-index: 1; display: none; border: 1px solid rgba(255,255,255,.25); color: #fff; background: transparent; }
.library-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.library-section-head h2 { margin: 3px 0; font-size: clamp(24px,3vw,34px); letter-spacing: -.035em; }
.library-section-head p { margin: 0; color: var(--muted); }
.compact-button { padding: 10px 15px; white-space: nowrap; }
.library-toolbar { display: grid; grid-template-columns: minmax(220px,1.6fr) repeat(2,minmax(150px,1fr)) auto; align-items: end; gap: 10px; margin-bottom: 22px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(18,45,77,.05); }
.library-toolbar label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.library-toolbar input,.library-toolbar select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fbfdff; font: inherit; font-size: 13px; }
.filter-button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-weight: 700; }
.library-empty { display: grid; min-height: 340px; place-items: center; align-content: center; padding: 40px 22px; border: 1px dashed #b8c9db; border-radius: 18px; text-align: center; background: linear-gradient(180deg,#fff,#f8fbfe); }
.library-empty-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #2563eb; background: #e8f2ff; font-size: 27px; }
.library-empty h3 { margin: 16px 0 5px; font-size: 19px; }
.library-empty p { max-width: 500px; margin: 0 0 18px; color: var(--muted); }
.diagram-library-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:16px}.diagram-card{display:flex;min-height:250px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.diagram-card-preview{display:grid;width:180px;place-items:center;color:#1976d2;background:linear-gradient(145deg,#e9f4ff,#f9fcff);font-size:20px;font-weight:850;letter-spacing:.1em}.diagram-card-body{flex:1;padding:20px}.diagram-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.diagram-card-top h3{margin:0;font-size:18px}.diagram-status{padding:4px 8px;border-radius:999px;color:#1565a8;background:#eaf4ff;font-size:11px;font-weight:800}.diagram-card-body>p{margin:8px 0 16px;color:var(--muted)}.diagram-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.diagram-meta div{padding:8px 10px;border-radius:9px;background:#f7faff}.diagram-meta dt{color:var(--muted);font-size:10px;text-transform:uppercase}.diagram-meta dd{margin:2px 0 0;font-size:12px;font-weight:700}.diagram-card-actions{display:flex;align-items:center;gap:14px;margin-top:18px}.text-link{color:var(--blue);font-size:13px;font-weight:750;text-decoration:none}@media(max-width:760px){.diagram-library-grid{grid-template-columns:1fr}.diagram-card{display:block}.diagram-card-preview{width:100%;height:80px}.diagram-meta{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.tool-menu{display:none}.header-menu-button{display:block;margin-left:auto}.library-section-head{align-items:flex-start;flex-direction:column}.library-toolbar{grid-template-columns:1fr}.filter-button{width:100%}}
.diagram-editor-page main{max-width:none;margin:0;padding:0}.diagram-editor-page .app-header{height:72px;padding:10px 20px}.diagram-editor-page .editor-panel{position:fixed;z-index:2;inset:72px 0 0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#eef3f7}.diagram-editor-page .editor-heading{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:8px 18px;background:#fff;border-bottom:1px solid var(--line)}.diagram-editor-page .editor-heading h2,.diagram-editor-page .editor-heading p{display:none}.diagram-editor-page .editor-shell{height:calc(100vh - 124px);min-height:0}.diagram-editor-page .editor-actions{position:absolute;right:16px;top:9px;z-index:3;display:flex;gap:7px}.diagram-editor-page .editor-actions button{padding:7px 10px;font-size:12px}.diagram-editor-page .ai-chat{position:fixed;z-index:12;right:18px;bottom:18px;width:min(410px,calc(100vw - 36px));display:none;margin:0;border:1px solid #c8d7e6;border-radius:16px;background:#fff;box-shadow:0 20px 60px rgba(18,45,77,.25)}.diagram-editor-page.ai-open .ai-chat{display:block}.diagram-editor-page .tool-menu button{padding:8px 12px;border:0;border-radius:9px;color:#c8d9eb;background:transparent;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.diagram-editor-page .tool-menu button:hover,.diagram-editor-page .tool-menu button.active{color:#fff;background:rgba(255,255,255,.12)}.diagram-editor-page .editor-panel>.ai-chat .ai-chat-heading{padding:14px 16px}.diagram-editor-page .editor-panel>.ai-chat .chat-messages{max-height:240px}.diagram-editor-page .editor-panel>.ai-chat .chat-compose{padding:12px}
.editor-subnav{position:relative;z-index:4;display:flex;align-items:center;gap:14px;min-height:40px;padding:5px max(14px,calc((100% - 1160px)/2));border-bottom:1px solid #d6e1ec;color:var(--muted);background:#fff;font-size:12px}.editor-subnav>a{color:var(--blue);font-weight:750;text-decoration:none}.editor-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-subnav-actions{display:flex;align-items:center;gap:5px;margin-left:auto}.editor-subnav-actions button{padding:6px 10px;border:1px solid #d4dfeb;border-radius:7px;color:#34485e;background:#fff;font:inherit;font-weight:700;cursor:pointer}.editor-subnav-actions button:hover{border-color:#8eb5df;color:#155eab;background:#f4f9ff}.editor-subnav-actions #topSave{border-color:#9ec5ec;color:#125da7;background:#eef6ff}.diagram-editor-page .editor-panel{inset:112px 0 0}.diagram-editor-page .editor-shell{height:calc(100vh - 164px)}
@media(max-width:760px){.diagram-editor-page .editor-actions{right:8px}.diagram-editor-page .editor-actions #downloadEditor{display:none}.diagram-editor-page .editor-heading{padding-left:12px}.editor-subnav{gap:8px;padding:5px 9px}.editor-subnav-actions button{padding:6px 7px;font-size:11px}.editor-subnav-actions #topDiscard{font-size:0}.editor-subnav-actions #topDiscard::after{content:'Descartar';font-size:11px}}
.editor-subnav-actions button#toggleAi.active{border-color:#8eb5df;color:#125da7;background:#eef6ff}.editor-status-floating{display:none}
.realtime-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.realtime-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.16)}.realtime-toggle.connecting .realtime-dot{background:#e0a11a;box-shadow:0 0 0 3px rgba(224,161,26,.16);animation:realtime-pulse 1.2s ease-in-out infinite}.realtime-toggle.active{border-color:#8ec9a5!important;color:#17633a!important;background:#eefaf2!important}.realtime-toggle.active .realtime-dot{background:#22a45d;box-shadow:0 0 0 3px rgba(34,164,93,.16)}.realtime-toggle.off{color:#718096!important;background:#f7f9fb!important}.realtime-peer-count{display:inline-grid;min-width:18px;height:18px;padding:0 5px;place-items:center;border-radius:9px;color:#52677b;background:#e8eef4;font-size:10px;font-weight:800}.realtime-toggle.active .realtime-peer-count{color:#17633a;background:#d9f2e2}@keyframes realtime-pulse{50%{opacity:.42}}@media(max-width:980px){.realtime-label{display:none}.notification-label{display:none}}
.editor-shell{position:relative}.diagram-loading{position:absolute;z-index:5;inset:0;display:grid;place-items:center;color:#28435d;background:linear-gradient(135deg,rgba(247,251,255,.94),rgba(235,245,253,.9));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;transition:opacity .22s ease,visibility .22s ease}.diagram-loading.hidden{visibility:hidden;opacity:0;pointer-events:none}.diagram-loading-card{display:grid;justify-items:center;gap:9px;min-width:218px;padding:22px 26px;border:1px solid #d8e6f1;border-radius:15px;background:rgba(255,255,255,.92);box-shadow:0 14px 38px rgba(24,72,111,.12);text-align:center}.diagram-loading-card strong{font-size:14px;letter-spacing:-.01em}.diagram-loading-card small{color:#6f8295;font-size:11px}.diagram-loading-mark{display:flex;align-items:center;gap:5px;height:25px}.diagram-loading-mark i{display:block;width:7px;height:7px;border-radius:99px;background:#2384c6;animation:diagram-loading-bounce .9s ease-in-out infinite}.diagram-loading-mark i:nth-child(2){animation-delay:.13s;background:#4da8d8}.diagram-loading-mark i:nth-child(3){animation-delay:.26s;background:#89ccec}@keyframes diagram-loading-bounce{0%,100%{transform:translateY(0);opacity:.42}45%{transform:translateY(-8px);opacity:1}}
.brand {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  color: #bff7ff;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px rgba(255,255,255,.2);
  font-weight: 850;
  letter-spacing: .08em;
}

main { max-width: 1160px; margin: 34px auto; padding: 0 22px; }
.notice, .panel, .workspace-error-toast {
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.notice { border-color: #c9e5f4; border-left: 4px solid var(--cyan); background: linear-gradient(105deg, #eefaff, #f8fcff); }
.notice strong { color: #075985; }
.status-panel { margin-bottom: 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.status-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.status-heading h2, .status-heading p { margin: 0; }
.status-heading p { margin-top: 3px; color: var(--muted); font-size: 13px; }
.status-heading button { padding: 7px 12px; font-size: 13px; }
.status-actions { display: flex; align-items: center; gap: 8px; }
.status-link { color: var(--blue); font-size: 13px; font-weight: 750; text-decoration: none; }
.status-link:hover { text-decoration: underline; }
.health-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.health-card { display: flex; align-items: flex-start; gap: 9px; min-height: 72px; padding: 12px; border: 1px solid #dce5ef; border-radius: 12px; background: #fbfdff; }
.health-card strong, .health-card small { display: block; }
.health-card strong { font-size: 13px; }
.health-card small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.health-dot { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #94a3b8; }
.health-card.ok { border-color: #b8e3cf; background: #f3fcf7; }.health-card.ok .health-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.health-card.warn { border-color: #f3d79a; background: #fffaf0; }.health-card.warn .health-dot { background: #d97706; }
.health-card.bad { border-color: #f2c4c0; background: #fff7f6; }.health-card.bad .health-dot { background: #dc2626; }
.grid { display: grid; grid-template-columns: 2fr 1.3fr 1fr; gap: 18px; }
label { display: block; color: var(--ink); font-weight: 750; }
input, select, textarea {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 13px;
  border: 1px solid #c7d4e2;
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .82; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.11); }
textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
small { display: block; color: var(--muted); font-weight: 450; }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
button, .button {
  border: 1px solid #b9cbe0;
  border-radius: 10px;
  padding: 11px 17px;
  color: #1e4f91;
  background: #fff;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, background .16s;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(24, 67, 111, .12); }
.primary { border-color: var(--blue); color: #fff; background: linear-gradient(110deg, #2563eb, #0e7490); }
.primary:disabled { opacity: .55; cursor: wait; transform: none; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.metric { padding: 15px; border: 1px solid #e2eaf2; border-radius: 12px; background: var(--soft); }
.metric strong { display: block; color: var(--navy); font-size: 24px; letter-spacing: -.04em; }
table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: #4b6179; background: #f6f9fc; font-size: 13px; }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.preview-heading h2, .preview-heading p { margin-top: 0; }
.preview-tabs { display: flex; gap: 8px; }
.preview-tab { min-width: 100px; }
.preview-tab.active { border-color: var(--navy); color: white; background: var(--navy); }
.preview-tab:disabled { cursor: not-allowed; opacity: .45; }
.preview-canvas { display: grid; place-items: center; min-height: 360px; max-height: 680px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.preview-canvas img { display: block; width: 100%; height: auto; min-height: 340px; max-height: 650px; object-fit: contain; }
.preview-status { margin: 10px 0 0; color: var(--muted); }
.editor-panel { padding: 0; overflow: hidden; }
.editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f8fbff, #f3f8fd); }
.editor-heading h2, .editor-heading p { margin: 2px 0 0; }.editor-heading p { color: var(--muted); font-size: 13px; }
.editor-status, .chat-preserve { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #d5e1ec; border-radius: 999px; color: #56718c; background: #fff; font-size: 12px; font-weight: 700; }.editor-status.ready { border-color: #b8e3cf; color: #16803f; background: #f3fcf7; }.editor-status.pending { color: #9a6200; background: #fffaf0; }
.editor-shell { height: min(78vh, 820px); min-height: 520px; background: #eef3f7; }.editor-shell iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.editor-actions { display: flex; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fbfdff; }
.ai-chat { padding: 22px 24px 24px; border-top: 1px solid var(--line); background: linear-gradient(135deg, #f9fbff, #f5f8fc); }.ai-chat-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }.ai-chat-heading h3, .ai-chat-heading p { margin: 2px 0 0; }.ai-chat-heading p { color: var(--muted); font-size: 13px; }
.chat-messages { display: flex; flex-direction: column; gap: 9px; max-height: 210px; margin: 16px 0 12px; overflow: auto; }.chat-message { align-self: flex-start; max-width: min(760px, 88%); padding: 10px 13px; border: 1px solid #d9e4ef; border-radius: 12px 12px 12px 3px; color: #34506d; background: #fff; font-size: 13px; }.chat-message.user { align-self: flex-end; border-color: #b8d4f9; border-radius: 12px 12px 3px 12px; color: #174f91; background: #edf6ff; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }.chat-compose textarea { min-height: 84px; margin: 0; }.chat-compose button { min-width: 150px; }
.workspace-error-toast { position: fixed; z-index: 180; top: 82px; right: 22px; width: min(460px, calc(100vw - 44px)); margin: 0; padding: 18px 44px 18px 18px; border-left: 4px solid var(--danger); color: var(--danger); box-shadow: 0 18px 45px rgba(18, 45, 77, .22); }
.error-close { position: absolute; top: 7px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; color: var(--danger); background: transparent; font-size: 24px; line-height: 1; }
.error-close:hover { transform: none; box-shadow: none; background: rgba(180,35,24,.08); }

/* Global notification center for authenticated workspace pages. */
.workspace-notification-center{position:relative;z-index:190;flex:0 0 auto;margin-left:auto}.workspace-header .workspace-notification-center{margin-left:auto!important}.workspace-header .workspace-notification-center+.global-profile-menu{margin-left:8px!important}.workspace-notification-center>summary{list-style:none}.workspace-notification-center>summary::-webkit-details-marker{display:none}.workspace-notification-toggle{position:relative;display:grid;box-sizing:border-box;width:34px;height:34px;place-items:center;padding:0;border:1px solid #c9ddeb;border-radius:9px;color:#175d91;background:#f2f9fe;cursor:pointer}.workspace-notification-toggle:hover,.workspace-notification-center[open] .workspace-notification-toggle{border-color:#79b5dd;color:#0d4f7f;background:#e5f4fd}.workspace-notification-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.workspace-notification-badge{position:absolute;top:-5px;right:-6px;display:grid;min-width:17px;height:17px;padding:0 4px;place-items:center;border:2px solid #fff;border-radius:9px;color:#fff;background:#c93d49;font-size:8px;font-weight:900;line-height:1}.workspace-notification-badge[hidden]{display:none}.workspace-notification-popover{position:absolute;top:43px;right:0;display:grid;width:min(370px,calc(100vw - 28px));max-height:min(480px,calc(100vh - 92px));overflow:hidden;border:1px solid #c5d9e7;border-radius:13px;color:#173a57;background:#fff;box-shadow:0 20px 52px #102c4138}.workspace-notification-popover>header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 14px;border-bottom:1px solid #dce8f0;background:#f6fbfe}.workspace-notification-popover>header div{display:grid;gap:1px}.workspace-notification-popover>header span{color:#2375a8;font-size:8px;font-weight:900;letter-spacing:.1em}.workspace-notification-popover>header strong{font-size:13px}.workspace-notification-popover>header button{padding:5px 8px;border:1px solid #c7d9e6;border-radius:6px;color:#527089;background:#fff;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.workspace-notification-list{display:grid;max-height:390px;overflow:auto}.workspace-notification-empty{margin:0;padding:26px 18px;color:#758b9d;font-size:11px;text-align:center}.workspace-notification-item{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;padding:12px 14px;border-top:1px solid #e6eef4;background:#fff}.workspace-notification-item:first-child{border-top:0}.workspace-notification-item.unread{background:#f5fbfe}.workspace-notification-item i{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#4a91bc}.workspace-notification-item.error i{background:#c4444c}.workspace-notification-item.warning i{background:#cf861c}.workspace-notification-item.success i{background:#2f915b}.workspace-notification-item strong,.workspace-notification-item p,.workspace-notification-item time{display:block}.workspace-notification-item strong{color:#173a57;font-size:11px}.workspace-notification-item p{margin:3px 0 4px;color:#526e84;font-size:10px;line-height:1.45}.workspace-notification-item time{color:#8799a8;font-size:8px}.workspace-notification-toasts{position:fixed;z-index:200;top:82px;right:22px;display:grid;width:min(410px,calc(100vw - 44px));gap:9px;pointer-events:none}.workspace-notification-toast{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 13px 13px 15px;border:1px solid #c5d9e7;border-left:4px solid #3d8fbd;border-radius:10px;color:#173a57;background:#fff;box-shadow:0 16px 42px #102c4138;pointer-events:auto;animation:workspace-notice-in .18s ease-out}.workspace-notification-toast.error{border-left-color:#c4444c}.workspace-notification-toast.warning{border-left-color:#cf861c}.workspace-notification-toast.success{border-left-color:#2f915b}.workspace-notification-toast strong{display:block;font-size:11px}.workspace-notification-toast p{margin:3px 0 0;color:#526e84;font-size:10px;line-height:1.45}.workspace-notification-toast button{display:grid;flex:0 0 24px;width:24px;height:24px;place-items:center;padding:0;border:0;border-radius:6px;color:#617a8e;background:transparent;font-size:18px;cursor:pointer}.workspace-notification-toast.leaving{opacity:0;transform:translateY(-6px);transition:.18s ease}.notification-archived{display:none!important}@keyframes workspace-notice-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}:root[data-theme="dark"] .workspace-notification-toggle{border-color:#315b79;color:#d7f0ff;background:#12334e}:root[data-theme="dark"] .workspace-notification-toggle:hover,:root[data-theme="dark"] .workspace-notification-center[open] .workspace-notification-toggle{border-color:#67bde9;color:#fff;background:#1a4869}:root[data-theme="dark"] .workspace-notification-badge{border-color:#0c2034}:root[data-theme="dark"] .workspace-notification-popover{border-color:#355f7d;color:#e8f4fc;background:#102b43;box-shadow:0 20px 52px #0009}:root[data-theme="dark"] .workspace-notification-popover>header{border-color:#315a77;background:#0c2034}:root[data-theme="dark"] .workspace-notification-popover>header button{border-color:#3c6784;color:#bad2e2;background:#173650}:root[data-theme="dark"] .workspace-notification-item{border-color:#294e69;background:#102b43}:root[data-theme="dark"] .workspace-notification-item.unread{background:#15364f}:root[data-theme="dark"] .workspace-notification-item strong{color:#eaf6fd}:root[data-theme="dark"] .workspace-notification-item p{color:#a0bdcf}:root[data-theme="dark"] .workspace-notification-empty{color:#91adbf}:root[data-theme="dark"] .workspace-notification-toast{border-color:#355f7d;color:#eaf6fd;background:#102b43;box-shadow:0 18px 46px #0009}:root[data-theme="dark"] .workspace-notification-toast p{color:#a0bdcf}@media(max-width:760px){.workspace-notification-popover{position:fixed;top:70px;right:10px}.workspace-notification-toasts{top:74px;right:10px;width:calc(100vw - 20px)}}
.eyebrow { color: #5b21b6; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.hidden { display: none; }
.diagram-open-preview{width:min(1180px,calc(100% - 40px));min-height:calc(100vh - 160px);margin:24px auto;border:1px solid #d6e1eb;background:#fff}.diagram-open-preview>header{display:flex;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid #dce6ef}.diagram-open-preview>header h1{margin:0;color:#15395f;font-size:21px}.diagram-open-preview>header p{margin:0;color:#617991;font-size:13px}.diagram-open-preview-canvas{position:relative;display:grid;min-height:min(62vh,600px);place-items:center;background:#edf3f8;background-image:linear-gradient(#dce7f0 1px,transparent 1px),linear-gradient(90deg,#dce7f0 1px,transparent 1px);background-size:20px 20px}.diagram-open-preview-canvas img{z-index:1;display:block;max-width:94%;max-height:56vh;object-fit:contain;box-shadow:0 8px 24px rgba(22,65,99,.12)}.diagram-open-preview-canvas span{position:absolute;color:#6d8194;font-size:13px}.diagram-open-preview-canvas img[src]{min-width:160px;min-height:100px}.diagram-open-preview>footer{display:flex;align-items:center;gap:9px;padding:14px 18px;border-top:1px solid #dce6ef;background:#fbfdff}.diagram-open-preview>footer label{display:flex;align-items:center;gap:8px;color:#46627d;font-size:12px;font-weight:750}.diagram-open-preview>footer select,.diagram-open-preview>footer button{min-height:34px;padding:6px 10px;border:1px solid #c9d9e7;border-radius:7px;color:#244563;background:#fff;font:inherit;font-size:12px;font-weight:700}.diagram-open-preview>footer button{cursor:pointer}.diagram-open-preview>footer .primary{color:#fff;background:#126cb2;border-color:#126cb2}.diagram-preview-spacer{flex:1}@media(max-width:720px){.diagram-open-preview{width:calc(100% - 20px);margin:10px auto}.diagram-open-preview>header{display:block}.diagram-open-preview>header p{margin-top:7px}.diagram-open-preview-canvas{min-height:42vh}.diagram-open-preview>footer{flex-wrap:wrap}.diagram-preview-spacer{display:none}}
footer { max-width: 1160px; margin: 10px auto 34px; padding: 0 22px; color: var(--muted); font-size: 13px; }
@media (max-width: 750px) {
  header { padding: 24px 20px; }
  main { margin: 22px auto; padding: 0 14px; }
  .grid, .metrics, .health-cards { grid-template-columns: 1fr; }
  .actions { align-items: stretch; flex-direction: column; }
  .editor-heading, .ai-chat-heading { display: block; }.editor-status, .chat-preserve { display: inline-block; margin-top: 10px; }.editor-shell { height: 68vh; min-height: 430px; }.editor-actions { flex-direction: column; }.chat-compose { grid-template-columns: 1fr; }
  .button, button { width: 100%; text-align: center; }
  .preview-heading { display: block; }
  .preview-tabs { margin-bottom: 14px; }
  .preview-tab { width: auto; }
}
 .diagram-list-panel{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}.diagram-list-toolbar{display:flex;align-items:center;gap:16px;min-height:48px;padding:8px 14px;border-bottom:1px solid var(--line);background:#fbfdff}.select-all{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12px;font-weight:750}.select-all input,.check-column input{width:15px;height:15px;accent-color:var(--blue)}.selection-count{color:var(--muted);font-size:12px}.list-actions{display:flex;gap:6px;margin-left:auto}.list-actions button{padding:6px 9px;border:1px solid var(--line);border-radius:7px;color:#9aa8b7;background:#f5f7fa;font-size:11px}.diagram-table-wrap{overflow:auto}.diagram-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}.diagram-table th{height:38px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted);background:#f8fbfe;font-size:11px;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.04em}.diagram-table td{padding:11px 12px;border-bottom:1px solid #edf2f7;color:#405269;white-space:nowrap}.diagram-table tbody tr:hover{background:#f8fbff}.diagram-table tbody tr:last-child td{border-bottom:0}.diagram-table .check-column{width:40px;padding-right:0;text-align:center}.diagram-table .check-column input{margin:0}.diagram-name{display:block;color:var(--blue);font-weight:800;text-decoration:none}.diagram-name:hover,.row-open:hover{text-decoration:underline}.diagram-subtitle{display:block;margin-top:2px;color:#8a99aa;font-size:11px}.row-open{color:var(--blue);font-size:12px;font-weight:750;text-decoration:none}.list-footer{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.library-toolbar{grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(145px,1fr)) auto}@media(max-width:760px){.library-toolbar{grid-template-columns:1fr}.diagram-list-toolbar{flex-wrap:wrap}.list-actions{width:100%;margin-left:0}.list-footer{display:block}.list-footer span{display:block;margin-top:3px}}
.custom-date-filter{display:flex;align-items:end;gap:6px}.custom-date-filter label{flex:1}.custom-date-filter input{display:block;width:100%;margin-top:5px;padding:9px 7px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fbfdff;font:inherit;font-size:12px}.library-toolbar .filter-button{align-self:end;white-space:nowrap}
.custom-date-filter{max-width:360px;margin:-12px 0 22px auto;padding:0 12px;box-sizing:border-box}.custom-date-filter.hidden{display:none!important}.custom-date-filter label{color:var(--muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.library-toolbar{grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(145px,1fr)) auto}.library-toolbar .filter-button{height:38px}
.diagram-empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:13px;background:#fbfdff}.diagram-list-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:76px;color:#627b95;background:#fbfdff;font-size:12px}.diagram-list-loading.hidden{display:none}.diagram-list-spinner{width:15px;height:15px;border:2px solid #d7e6f3;border-top-color:#2c86c5;border-radius:50%;animation:diagram-list-spin .75s linear infinite}@keyframes diagram-list-spin{to{transform:rotate(360deg)}}
.library-toolbar .filter-button{align-self:start;margin-top:17px;box-sizing:border-box;height:38px}
.profile-menu{position:relative;margin-left:10px;color:#fff}.profile-menu summary{position:relative;display:grid;place-items:center;width:34px;height:34px;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#d9f3ff;background:#1e6ba8;font-size:0;cursor:pointer;list-style:none}.profile-menu summary::before{position:absolute;top:7px;width:9px;height:9px;border-radius:50%;background:currentColor;content:""}.profile-menu summary::after{position:absolute;bottom:6px;width:17px;height:10px;border-radius:10px 10px 5px 5px;background:currentColor;content:""}.profile-menu summary::-webkit-details-marker{display:none}.profile-popover{position:absolute;right:0;top:44px;z-index:20;display:grid;gap:7px;width:190px;padding:14px;border:1px solid #d6e2ee;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(15,42,70,.18)}.profile-popover strong{font-size:13px}.profile-popover span{color:var(--muted);font-size:11px}.profile-popover button,.profile-popover a{padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:#f7fafc;color:#8290a0;text-align:left;font:inherit;font-size:12px;text-decoration:none}.profile-popover button:disabled{cursor:not-allowed}
.icon-catalog-main{max-width:1240px;margin:0 auto;padding:34px clamp(18px,4vw,52px) 70px}.icon-catalog-intro{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:22px}.icon-catalog-intro h2{margin:5px 0 8px;color:var(--ink);font-size:clamp(26px,3vw,38px);letter-spacing:-.04em}.icon-catalog-intro p{max-width:720px;margin:0;color:var(--muted);line-height:1.6}.icon-catalog-count{flex:0 0 auto;padding:9px 12px;border:1px solid #d6e4f0;border-radius:999px;color:#285479;background:#f4f9fd;font-size:12px;font-weight:750}.icon-catalog-toolbar{display:grid;grid-template-columns:minmax(240px,1.8fr) repeat(3,minmax(150px,1fr));gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.icon-catalog-toolbar label{display:grid;gap:6px;color:#54708c;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.icon-catalog-toolbar input,.icon-catalog-toolbar select{width:100%;min-height:40px;padding:8px 10px;border:1px solid #d6e2ee;border-radius:8px;color:var(--ink);background:#fbfdff;font:600 13px var(--font-ui);letter-spacing:0;text-transform:none}.icon-library-note{display:flex;gap:10px;align-items:baseline;margin:16px 0;color:#60758d;font-size:12px}.icon-library-note strong{color:#294b6c;font-size:11px;letter-spacing:.06em;text-transform:uppercase}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.icon-card{display:flex;align-items:center;gap:12px;min-height:104px;padding:13px;border:1px solid #dbe6ef;border-radius:13px;background:#fff}.icon-card:hover{border-color:#90b5d8;box-shadow:0 5px 14px rgba(31,70,105,.08)}.icon-card-visual{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;overflow:hidden;border:1px solid #e0eaf2;border-radius:11px;background:#f8fbfd}.icon-card-visual img{width:46px;height:46px;object-fit:contain}.icon-card-visual .drawio-icon-preview{display:block;width:56px;height:56px;overflow:hidden}.icon-preview-loading,.icon-preview-error{color:#8aa0b3;font-size:9px;font-weight:800;text-align:center}.icon-card strong,.icon-card span,.icon-card small{display:block}.icon-card strong{color:#1d3853;font-size:13px;line-height:1.25}.icon-card span{margin-top:4px;color:#627c95;font-size:11px}.icon-card small{margin-top:4px;color:#91a2b3;font-size:10px;font-family:var(--font-mono)}@media(max-width:900px){.icon-catalog-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.icon-catalog-intro{align-items:start;flex-direction:column}.icon-catalog-toolbar{grid-template-columns:1fr}.icon-library-note{align-items:start;flex-direction:column;gap:4px}}
/* Editor panel controls and notification menu */
.floating-panel-header{display:flex;align-items:center;justify-content:space-between;margin:-18px -18px 14px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fbfdff}.floating-panel-header button,.ai-chat-heading-actions button{width:28px;height:28px;padding:0;border:1px solid #d6e2ee;border-radius:7px;color:#536b83;background:#fff;font-size:19px;line-height:1;cursor:pointer}.ai-chat-heading-actions{display:flex;align-items:center;gap:5px}.ai-chat.minimized .chat-messages,.ai-chat.minimized .chat-compose{display:none}.ai-chat.minimized{width:220px}.diagram-editor-page .editor-status{padding:5px 8px;border-radius:6px;color:#227044;background:#eaf8ef;font-size:11px;white-space:nowrap}.diagram-editor-page .editor-status.pending{color:#8a5b12;background:#fff5db}.diagram-editor-page .editor-status.ready{color:#227044;background:#eaf8ef}
.diagram-editor-page .ai-chat{box-sizing:border-box;width:min(680px,calc(100vw - 40px));max-height:calc(100vh - 148px);overflow:hidden;color:#173a57;background:#fff}.diagram-editor-page.ai-open .ai-chat{display:flex;flex-direction:column}.diagram-editor-page .ai-chat-heading{flex:0 0 auto;padding:20px 22px 13px;border-bottom:1px solid #e2ebf3;background:linear-gradient(135deg,#fbfdff,#f3f8fc)}.diagram-editor-page .ai-chat-heading h3{color:#173b5d;font-size:19px;letter-spacing:-.015em}.diagram-editor-page .ai-chat-heading p{max-width:470px;margin-top:4px;color:#617b91;line-height:1.4}.diagram-editor-page .editor-panel>.ai-chat .chat-messages{box-sizing:border-box;flex:1 1 auto;min-height:96px;max-height:min(320px,32vh);margin:0;padding:14px 22px;overflow:auto;border-top:1px solid #edf2f6;background:#fbfdff}.diagram-editor-page .editor-panel>.ai-chat .chat-compose{box-sizing:border-box;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 132px;gap:10px;padding:15px 22px 20px;border-top:1px solid #dfe9f1;background:#fff}.diagram-editor-page .chat-compose textarea{box-sizing:border-box;width:100%;min-height:104px;max-height:220px;margin:0;padding:12px 13px;resize:vertical;border-color:#bfd1df;border-radius:10px;color:#173a57;background:#fbfdff;font-size:14px;line-height:1.45}.diagram-editor-page .chat-compose textarea::placeholder{color:#7b91a3}.diagram-editor-page .chat-compose textarea:focus{border-color:#3d8fc3;outline:3px solid #5eb5e529}.diagram-editor-page .chat-compose button{min-width:0;padding:10px 13px;font-size:12px}
.chat-message.processing{display:flex;align-items:center;gap:8px;color:#4c657d;background:#eef5ff}.processing-dots{display:inline-flex;gap:3px}.processing-dots b{width:5px;height:5px;border-radius:50%;background:#3779bd;animation:chatPulse 1.1s infinite ease-in-out}.processing-dots b:nth-child(2){animation-delay:.15s}.processing-dots b:nth-child(3){animation-delay:.3s}@keyframes chatPulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}
.chat-compose-actions{display:flex;flex-direction:column;gap:7px}.diagram-editor-page .chat-compose-actions button{min-width:0;margin:0}.ai-chat.minimized .chat-config-grid,.ai-chat.minimized .chat-mode-hint,.ai-chat.minimized .chat-prompt-examples,.ai-chat.minimized .chat-messages,.ai-chat.minimized .chat-compose{display:none!important}.diagram-editor-page .ai-chat.minimized{width:300px;max-height:none}.diagram-editor-page .ai-chat.minimized .ai-chat-heading{border-bottom:0}.assessment-backdrop{position:fixed;z-index:24;inset:0;background:rgba(15,35,59,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.assessment-panel{position:fixed;z-index:25;top:116px;right:18px;display:flex;flex-direction:column;width:min(620px,calc(100vw - 36px));max-height:calc(100vh - 140px);overflow:auto;border:1px solid #c9d9e8;border-radius:18px;color:var(--ink);background:#fff;box-shadow:0 24px 70px rgba(18,45,77,.32)}.assessment-panel.hidden,.assessment-backdrop.hidden{display:none}.assessment-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px;border-bottom:1px solid #e4edf6;color:var(--ink);background:linear-gradient(135deg,#f8fbff,#f2f8f5)}.assessment-panel>header h2{margin:3px 0;color:#173b67;font-size:20px}.assessment-panel>header p{margin:0;color:var(--muted);font-size:12px}.assessment-overview{padding:18px 20px;border-bottom:1px solid #e4edf6}.assessment-overview>p{margin:12px 0;color:#294966;line-height:1.55}.assessment-overview>p:empty,.assessment-overview blockquote:empty{display:none}.assessment-overview blockquote{margin:12px 0 0;padding:11px 13px;border-left:3px solid #3677b7;border-radius:0 9px 9px 0;color:#3c5872;background:#f1f7fc;font-size:12px;line-height:1.5}.assessment-risk{display:inline-flex;padding:5px 9px;border-radius:999px;color:#52677f;background:#eef2f6;font-size:11px;font-weight:800;text-transform:uppercase}.assessment-risk.low{color:#227044;background:#eaf8ef}.assessment-risk.medium{color:#8a5b12;background:#fff5db}.assessment-risk.high,.assessment-risk.critical{color:#9f2538;background:#fff0f2}.assessment-panel>section{padding:14px 20px;border-bottom:1px solid #edf2f6}.assessment-panel>section h3{margin:0 0 9px;color:#294966;font-size:13px}.assessment-list{display:grid;gap:8px}.assessment-list article{padding:10px 12px;border:1px solid #dce7f0;border-radius:10px;background:#fbfdff}.assessment-list strong,.assessment-list p,.assessment-list small{display:block}.assessment-list strong{color:#1f405f;font-size:12px}.assessment-list p{margin:5px 0;color:#48647e;font-size:12px;line-height:1.45}.assessment-list small{color:#7a8da0;font-size:10px;text-transform:capitalize}

:root[data-theme="dark"] .diagram-editor-page .ai-chat{color-scheme:dark;border-color:#355f7d!important;color:#e8f4fc!important;background:#0d2438!important;box-shadow:0 24px 72px #000b!important}:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading{border-color:#31546d!important;background:linear-gradient(135deg,#143a55,#0c2034)!important}:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading h3{color:#f4f9ff!important}:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading p{color:#a6c3d6!important}:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading-actions button{border-color:#426984!important;color:#dff3ff!important;background:#173b56!important}:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading-actions button:hover,:root[data-theme="dark"] .diagram-editor-page .ai-chat-heading-actions button:focus-visible{border-color:#69b6df!important;color:#fff!important;background:#1d4d6d!important;outline:none}:root[data-theme="dark"] .diagram-editor-page .chat-agent-select{color:#b9d3e4!important}:root[data-theme="dark"] .diagram-editor-page .chat-agent-select select{border-color:#3a627e!important;color:#eff8ff!important;background:#0a1d2e!important}:root[data-theme="dark"] .diagram-editor-page .chat-agent-select select:focus-visible{border-color:#59b7e8!important;outline-color:#59b7e838!important}:root[data-theme="dark"] .diagram-editor-page .chat-agent-select option{color:#eff8ff;background:#0a1d2e}:root[data-theme="dark"] .diagram-editor-page .chat-mode-hint{color:#9bb9cc!important}:root[data-theme="dark"] .diagram-editor-page .chat-prompt-examples button{border-color:#386783!important;color:#b8e7ff!important;background:#12344d!important}:root[data-theme="dark"] .diagram-editor-page .chat-prompt-examples button:hover,:root[data-theme="dark"] .diagram-editor-page .chat-prompt-examples button:focus-visible{border-color:#65b9e7!important;color:#fff!important;background:#1a4a69!important}:root[data-theme="dark"] .diagram-editor-page .editor-panel>.ai-chat .chat-messages{border-color:#294b64!important;background:#0a1e30!important}:root[data-theme="dark"] .diagram-editor-page .chat-message{border-color:#355a73!important;color:#d9ebf7!important;background:#122f47!important}:root[data-theme="dark"] .diagram-editor-page .chat-message.user{border-color:#3f7fa7!important;color:#e5f6ff!important;background:#174360!important}:root[data-theme="dark"] .diagram-editor-page .chat-message.processing{border-color:#3a6785!important;color:#c9e5f4!important;background:#133a55!important}:root[data-theme="dark"] .diagram-editor-page .processing-dots b{background:#70c9f4!important}:root[data-theme="dark"] .diagram-editor-page .editor-panel>.ai-chat .chat-compose{border-color:#31536b!important;background:#0d2438!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose textarea{border-color:#3a627e!important;color:#eef8ff!important;background:#081a2a!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose textarea::placeholder{color:#7899af!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose textarea:focus{border-color:#59b7e8!important;outline-color:#59b7e838!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose-actions button:not(.primary){border-color:#426985!important;color:#d8eefc!important;background:#153750!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose-actions button:not(.primary):hover{border-color:#65b9e7!important;color:#fff!important;background:#1c4967!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose-actions .primary{border-color:#49ace0!important;color:#fff!important;background:#167fbd!important}:root[data-theme="dark"] .diagram-editor-page .chat-compose-actions .primary:hover{background:#2096d4!important}

@media(max-width:700px){.assessment-panel{top:104px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 112px)}.diagram-editor-page .ai-chat{right:8px;bottom:8px;width:calc(100vw - 16px);max-height:calc(100vh - 128px)}.diagram-editor-page .ai-chat-heading{padding:15px 16px 11px}.chat-config-grid{gap:8px;padding:12px 16px 0}.chat-mode-hint{margin-right:16px;margin-left:16px}.chat-prompt-examples{flex-wrap:nowrap;overflow-x:auto;padding-right:16px;padding-left:16px}.diagram-editor-page .editor-panel>.ai-chat .chat-messages{padding-right:16px;padding-left:16px}.diagram-editor-page .editor-panel>.ai-chat .chat-compose{grid-template-columns:1fr;padding:12px 16px 16px}.diagram-editor-page .chat-compose textarea{min-height:82px}.chat-compose-actions{flex-direction:row}.diagram-editor-page .chat-compose-actions button{min-width:0;flex:1}}
.editor-history-button{width:28px;min-width:28px;padding:3px!important;border-color:#d3e0eb!important;color:#315571!important;background:#f8fbfe!important;font-size:18px!important;line-height:1!important}.editor-history-button:hover{border-color:#8eb5d9!important;background:#eef6fd!important}
.icon-catalog-more{display:flex;justify-content:center;padding:22px 0}.icon-catalog-more .button{min-width:150px}
:root[data-theme="dark"] .icon-catalog-count{border-color:#31516b;color:#c7dceb;background:#112b40}:root[data-theme="dark"] .icon-card{border-color:#294b66;background:#10283c}:root[data-theme="dark"] .icon-card:hover{border-color:#4b84ad;box-shadow:0 6px 16px rgba(0,0,0,.2)}:root[data-theme="dark"] .icon-card-visual{border-color:#31516b;background:#eaf3f8}:root[data-theme="dark"] .icon-card strong{color:#edf7ff}:root[data-theme="dark"] .icon-card span{color:#a9c3d7}:root[data-theme="dark"] .icon-card small{color:#7894aa}
:root[data-theme="light"] body:has(.portal),:root[data-theme="light"] body.library-page,:root[data-theme="light"] body.diagram-editor-page,:root[data-theme="light"] body.icon-catalog-page,:root[data-theme="light"] body:has(.settings-main){background:radial-gradient(circle at 92% -12%,#c8e5f4 0,transparent 34rem),radial-gradient(circle at 4% 104%,#dcecf5 0,transparent 38rem),#f3f8fb!important}:root[data-theme="light"] .portal,:root[data-theme="light"] .library-page main,:root[data-theme="light"] .icon-catalog-page main,:root[data-theme="light"] .settings-main{background:transparent!important}:root[data-theme="light"] .diagram-editor-page .editor-panel{background:#e8f3f9!important}:root[data-theme="light"] .portal-topbar,:root[data-theme="light"] .app-header,:root[data-theme="light"] .settings-header{color:#edf7ff!important;border-color:#1e4766!important;background:#0d2138!important;box-shadow:0 2px 12px rgba(8,25,43,.16)!important}:root[data-theme="light"] .portal-topbar h1,:root[data-theme="light"] .app-header .header-title h1,:root[data-theme="light"] .settings-header strong{color:#f7fbff!important}:root[data-theme="light"] .portal-topbar p,:root[data-theme="light"] .app-header .header-title p,:root[data-theme="light"] .settings-header a{color:#a8c8df!important}:root[data-theme="light"] .app-header .tool-menu a{color:#a9c3d7!important}:root[data-theme="light"] .app-header .tool-menu a:hover,:root[data-theme="light"] .app-header .tool-menu a.active{color:#fff!important;background:#193a57!important}:root[data-theme="light"] .portal-topbar .org-switcher,:root[data-theme="light"] .portal-topbar .portal-logout,:root[data-theme="light"] .portal-topbar .theme-toggle,:root[data-theme="light"] .app-header .profile-menu summary{border-color:#355d7b!important;color:#e3f4ff!important;background:#12334e!important}:root[data-theme="dark"] body:has(.portal),:root[data-theme="dark"] body.library-page,:root[data-theme="dark"] body.diagram-editor-page,:root[data-theme="dark"] body.icon-catalog-page,:root[data-theme="dark"] body:has(.settings-main){background:radial-gradient(circle at 92% -12%,#173d5c 0,transparent 34rem),#081523!important}:root[data-theme="dark"] .portal,:root[data-theme="dark"] .library-page main,:root[data-theme="dark"] .icon-catalog-page main,:root[data-theme="dark"] .settings-main{background:transparent!important}:root[data-theme="dark"] .portal-topbar,:root[data-theme="dark"] .app-header,:root[data-theme="dark"] .settings-header{border-color:#234a68!important;background:#0c2034!important}
:root[data-theme="dark"] .library-page .library-section-head{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
:root[data-theme="light"] body.library-page{min-height:100vh!important;background:radial-gradient(circle at 92% -12%,#c8e5f4 0,transparent 34rem),radial-gradient(circle at 4% 104%,#dcecf5 0,transparent 38rem),#f3f8fb!important}:root[data-theme="light"] .library-page main{min-height:calc(100vh - 68px)!important;background:transparent!important}:root[data-theme="light"] .library-page .app-header{color:#edf7ff!important;border-color:#1e4766!important;background:#0d2138!important}:root[data-theme="light"] .library-page .brand,:root[data-theme="light"] .library-page .header-title h1{color:#f7fbff!important}:root[data-theme="light"] .library-page .header-title p,:root[data-theme="light"] .library-page .tool-menu a{color:#a9c8dd!important}:root[data-theme="light"] .library-page .tool-menu a:hover,:root[data-theme="light"] .library-page .tool-menu a.active{color:#fff!important;background:#193a57!important}:root[data-theme="light"] .library-page .compact-button,:root[data-theme="light"] .library-page .library-section-head .button.primary{color:#fff!important;background:#176eae!important}:root[data-theme="light"] .library-page .compact-button:hover,:root[data-theme="light"] .library-page .library-section-head .button.primary:hover{color:#fff!important;background:#0f5e99!important}
:root[data-theme="light"] .portal-topbar,:root[data-theme="light"] .app-header,:root[data-theme="light"] .settings-header{color:#173a57!important;border-color:#c8dce9!important;background:rgba(255,255,255,.9)!important;box-shadow:0 2px 12px rgba(27,67,98,.08)!important}:root[data-theme="light"] .portal-topbar h1,:root[data-theme="light"] .app-header .header-title h1,:root[data-theme="light"] .settings-header strong{color:#153b5d!important}:root[data-theme="light"] .portal-topbar p,:root[data-theme="light"] .app-header .header-title p,:root[data-theme="light"] .settings-header a,:root[data-theme="light"] .app-header .tool-menu a{color:#52738d!important}:root[data-theme="light"] .app-header .tool-menu a:hover,:root[data-theme="light"] .app-header .tool-menu a.active{color:#0d5e96!important;background:#e8f4fb!important}:root[data-theme="light"] .portal-topbar .org-switcher,:root[data-theme="light"] .portal-topbar .portal-logout,:root[data-theme="light"] .portal-topbar .theme-toggle,:root[data-theme="light"] .app-header .profile-menu summary{border-color:#b9d2e3!important;color:#1b527b!important;background:#f7fbfe!important}
.portal-topbar,.app-header,.settings-header{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:14px!important;padding-right:max(20px,calc((100% - 1240px)/2))!important;padding-left:max(20px,calc((100% - 1240px)/2))!important;border-bottom:1px solid!important;font-family:var(--font-ui)!important}.portal-topbar,.app-header{min-height:68px!important}.settings-header{min-height:68px!important}.app-header .brand{flex:0 0 38px!important;width:38px!important;height:38px!important}.app-header .header-title{min-width:220px!important}.app-header .header-title h1,.portal-topbar h1,.settings-header strong{font-size:15px!important;font-weight:780!important;letter-spacing:-.015em!important}.app-header .header-title p,.portal-topbar p{font-size:11px!important}.app-header .tool-menu{display:flex!important;align-items:center!important;gap:3px!important}.app-header .tool-menu a{padding:7px 10px!important;border-radius:7px!important;font-size:12px!important;font-weight:700!important}.settings-header a{margin-left:auto!important;padding:7px 10px!important;border:1px solid currentColor!important;border-radius:7px!important;font-size:12px!important;font-weight:750!important;text-decoration:none!important}:root[data-theme="dark"] .portal-topbar,:root[data-theme="dark"] .app-header,:root[data-theme="dark"] .settings-header{color:#eaf5fc!important;border-color:#234a68!important;background:#0c2034!important;box-shadow:0 2px 12px rgba(0,0,0,.18)!important}:root[data-theme="dark"] .portal-topbar h1,:root[data-theme="dark"] .app-header .header-title h1,:root[data-theme="dark"] .settings-header strong{color:#f4f9ff!important}:root[data-theme="dark"] .portal-topbar p,:root[data-theme="dark"] .app-header .header-title p,:root[data-theme="dark"] .settings-header a,:root[data-theme="dark"] .app-header .tool-menu a{color:#a9c8dc!important}:root[data-theme="dark"] .app-header .tool-menu a:hover,:root[data-theme="dark"] .app-header .tool-menu a.active{color:#fff!important;background:#193a57!important}
:root[data-theme="dark"] .library-page .library-section-head::before,:root[data-theme="dark"] .library-page .library-section-head::after{display:none!important;content:none!important}
.diagram-open-preview-canvas:has(.diagram-readonly-viewer:not(.hidden)){place-items:stretch}.diagram-readonly-viewer{z-index:1;width:100%;min-height:min(62vh,600px);overflow:auto;background:rgba(255,255,255,.72)}.diagram-readonly-viewer>div{margin:auto}.diagram-open-preview-canvas .diagram-readonly-viewer+img.hidden{display:none}
/* Diagram library: restrained product header and balanced filter grid. */
.library-page .app-header{min-height:68px;padding:10px max(24px,calc((100% - 1240px)/2));gap:14px;background:#0d2138;border-bottom:1px solid #203a55;box-shadow:0 2px 12px rgba(8,25,43,.16)}.library-page .app-header::after{display:none}.library-page .brand{width:38px;height:38px;border:0;border-radius:9px;color:#fff;background:#1672b8;box-shadow:none;font-size:0;letter-spacing:0}.library-page .brand span{font-size:17px;font-weight:850}.library-page .header-title{min-width:220px}.library-page .header-title h1{color:#f7fbff;font-size:15px;font-weight:760;letter-spacing:-.01em}.library-page .header-title p{margin-top:1px;color:#8faac2;font-size:11px}.library-page .tool-menu{gap:2px}.library-page .tool-menu a{padding:7px 10px;border-radius:6px;color:#a9bfd2;font-size:12px;font-weight:650}.library-page .tool-menu a:hover,.library-page .tool-menu a.active{color:#fff;background:#193a57}.library-page .profile-menu summary{width:32px;height:32px;border-color:#35536e;background:#17344f}.library-page main{max-width:1240px;padding-top:28px}.library-page .library-section-head{align-items:center;margin-bottom:20px}.library-page .library-section-head .eyebrow{color:#52708d}.library-page .library-section-head h2{margin:2px 0 1px;color:#102a44;font-size:30px;font-weight:760;letter-spacing:-.025em}.library-page .library-section-head p{font-size:13px}.library-page .compact-button{border-radius:7px;box-shadow:none}
.library-page .library-toolbar{grid-template-columns:minmax(300px,2fr) minmax(170px,1fr) minmax(170px,1fr) minmax(160px,.9fr) 142px;gap:12px;padding:16px;margin-bottom:20px;border-radius:12px;box-shadow:0 4px 14px rgba(18,45,77,.04)}.library-page .library-toolbar label{display:flex;min-width:0;flex-direction:column;gap:6px;color:#536d86;font-size:10px;font-weight:800;letter-spacing:.055em}.library-page .library-toolbar input,.library-page .library-toolbar select{height:42px;margin:0;padding:9px 11px;border-color:#ccdbea;border-radius:7px;background:#fff;font-size:13px;font-weight:600}.library-page .library-toolbar input:focus,.library-page .library-toolbar select:focus{outline:2px solid #9cc7ec;outline-offset:1px;border-color:#4b91cc}.library-page .library-toolbar .filter-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:end;width:100%;height:42px;margin:0;padding:9px 12px;border-color:#176eae;border-radius:7px;color:#fff;background:#176eae;font-size:12px;cursor:pointer}.library-page .library-toolbar .filter-button:hover{background:#115d96}.library-page .custom-date-filter{margin-top:-10px}
@media(max-width:1050px){.library-page .library-toolbar{grid-template-columns:minmax(280px,2fr) repeat(2,minmax(160px,1fr))}.library-page .library-toolbar .library-search{grid-column:span 2}.library-page .library-toolbar .filter-button{align-self:end}}@media(max-width:700px){.library-page .app-header{padding:10px 14px}.library-page .header-title{min-width:0}.library-page .header-title h1{font-size:14px}.library-page .library-toolbar{grid-template-columns:1fr}.library-page .library-toolbar .library-search{grid-column:auto}.library-page main{padding:20px 12px}.library-page .library-section-head h2{font-size:26px}}

/* Library shell v2: stable filter layout and product-grade navigation. */
.library-page{background:#f4f7fb}
.library-page .app-header{min-height:64px;padding:0 max(24px,calc((100% - 1240px)/2));gap:12px;color:#132c46;background:#fff;border-bottom:1px solid #dce5ee;box-shadow:0 1px 3px rgba(15,42,68,.04)}
.library-page .brand{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border:1px solid #0f5f9d;border-radius:10px;background:#1268a8}
.library-page .brand span{display:flex;align-items:flex-end;gap:3px;width:20px;height:20px}
.library-page .brand i{display:block;width:4px;border-radius:2px;background:#fff}.library-page .brand i:nth-child(1){height:10px;opacity:.72}.library-page .brand i:nth-child(2){height:17px}.library-page .brand i:nth-child(3){height:13px;opacity:.86}
.library-page .header-title{min-width:230px;padding-right:20px;border-right:1px solid #e2e9f0}.library-page .header-title h1{color:#102a44;font-size:14px;font-weight:780;letter-spacing:-.012em}.library-page .header-title p{display:flex;align-items:center;gap:6px;margin-top:1px;color:#6d8195;font-size:10px}.organization-status{width:6px;height:6px;border-radius:50%;background:#25a56a;box-shadow:0 0 0 2px #dff5e9}
.library-page .tool-menu{align-self:stretch;margin-left:4px;gap:0}.library-page .tool-menu a{position:relative;display:flex;align-items:center;padding:0 15px;border-radius:0;color:#5e748a;font-size:12px;font-weight:680}.library-page .tool-menu a:hover{color:#153e66;background:#f7f9fc}.library-page .tool-menu a.active{color:#105f9c;background:transparent}.library-page .tool-menu a.active::after{content:"";position:absolute;right:15px;bottom:0;left:15px;height:2px;border-radius:2px 2px 0 0;background:#1672b8}
.library-page .profile-menu{margin-left:auto}.library-page .profile-menu summary{border:1px solid #cbd9e6;color:#204668;background:#eef4f9}.library-page .header-menu-button{color:#204668;border-color:#cad8e4;background:#fff}
.library-page main{max-width:1240px;padding-top:30px}.library-page .library-toolbar{display:grid;grid-template-columns:minmax(380px,2.4fr) repeat(3,minmax(155px,1fr)) 142px;gap:12px;align-items:end;padding:16px;border:1px solid #dbe5ee;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(18,45,77,.035)}
.library-page .library-toolbar label{gap:6px}.library-page .library-toolbar .filter-button{justify-self:stretch;width:100%;min-width:142px;height:40px;margin:0;align-self:end}.library-page .filter-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.library-page .search-control{position:relative;display:block}.library-page .search-control svg{position:absolute;z-index:1;top:50%;left:12px;width:17px;height:17px;fill:none;stroke:#71879b;stroke-width:1.7;stroke-linecap:round;transform:translateY(-50%);pointer-events:none}.library-page .library-toolbar .search-control input{padding-left:38px}
.library-page .library-toolbar input,.library-page .library-toolbar select{box-sizing:border-box;width:100%;height:40px}.library-page .library-toolbar select{padding-right:30px}
@media(max-width:1180px){.library-page .library-toolbar{grid-template-columns:minmax(320px,2fr) repeat(2,minmax(170px,1fr))}.library-page .library-toolbar .library-search{grid-column:span 2}.library-page .library-toolbar .filter-button{grid-column:auto;justify-self:stretch;width:100%}}
@media(max-width:760px){.library-page .app-header{min-height:58px;padding:0 14px}.library-page .header-title{min-width:0;padding-right:0;border-right:0}.library-page .header-title p{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-page .profile-menu{display:none}.library-page .library-toolbar{grid-template-columns:1fr}.library-page .library-toolbar .library-search{grid-column:auto}.library-page .library-toolbar .filter-button{grid-column:auto}.library-page .library-section-head{gap:14px}.library-page .compact-button{width:100%;box-sizing:border-box;text-align:center}}
.diagram-editor-page .tool-menu button:disabled{opacity:.48;cursor:not-allowed}.diagram-editor-page .assessment-panel{width:min(720px,calc(100vw - 36px))}.assessment-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.assessment-header-actions>button{padding:7px 10px;border:1px solid #bdd0e1;border-radius:8px;color:#1f537f;background:#fff;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.assessment-header-actions>button:hover{border-color:#7faace;background:#edf6fd}.assessment-header-actions>button:disabled{opacity:.55;cursor:wait}.assessment-panel>footer{position:sticky;bottom:0;padding:11px 20px;border-top:1px solid #dce7f0;color:#63788d;background:#f8fbfe;font-size:10px;line-height:1.4}@media(max-width:700px){.assessment-panel>header{display:block}.assessment-header-actions{justify-content:flex-start;margin-top:12px}.assessment-close{position:absolute;top:14px;right:14px}}

/* Assessment report: quiet hierarchy, isolated scrolling and compact exports. */
.diagram-editor-page .assessment-panel{width:min(760px,calc(100vw - 36px));max-height:calc(100vh - 132px);overflow:hidden;border-color:#cbd9e5;border-radius:16px;box-shadow:0 24px 72px rgba(14,36,61,.3)}
.assessment-panel>.assessment-panel-header{position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:24px;padding:14px 18px;border-bottom:1px solid #dde6ee;color:#183b5d;background:#fff}
.assessment-panel>.assessment-panel-header::after{display:none}
.assessment-title-block{display:grid;min-width:0;gap:2px}.assessment-kicker{display:flex;align-items:center;gap:7px;color:#176ca8;font-size:9px;font-weight:850;line-height:1.2;letter-spacing:.105em}.assessment-kicker i{width:7px;height:7px;border-radius:2px;background:#247bb6;box-shadow:0 0 0 3px #e3f1fa}.assessment-panel>.assessment-panel-header h2{margin:2px 0 0;color:#173a5c;font-size:18px;font-weight:780;line-height:1.15;letter-spacing:-.018em}.assessment-panel>.assessment-panel-header p{display:flex;align-items:center;gap:6px;overflow:hidden;margin:0;color:#6c8093;font-size:10px;line-height:1.3;white-space:nowrap}.assessment-panel>.assessment-panel-header p span{overflow:hidden;text-overflow:ellipsis}.assessment-panel>.assessment-panel-header p b{color:#b0beca;font-weight:500}
.assessment-header-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap}.assessment-header-actions>.assessment-export-button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid #cedce8;border-radius:8px;color:#254e70;background:#fff;font:750 10px/1 var(--font-ui);cursor:pointer}.assessment-header-actions>.assessment-export-button svg{width:15px;height:15px;fill:none;stroke:#2873aa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.assessment-header-actions>.assessment-export-button:hover{border-color:#83acd0;color:#125f98;background:#f3f9fd}.assessment-header-actions>.assessment-export-button:disabled{opacity:.5;cursor:wait}.assessment-action-divider{width:1px;height:24px;margin:0 3px;background:#dce5ed}.assessment-header-actions>.assessment-close{display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid transparent;border-radius:8px;color:#63798d;background:transparent;cursor:pointer}.assessment-header-actions>.assessment-close:hover{border-color:#d6e1ea;color:#193e60;background:#f4f7fa}.assessment-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.assessment-panel-body{min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff}.assessment-panel-body::-webkit-scrollbar{width:8px}.assessment-panel-body::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:#aab8c5;background-clip:padding-box}.assessment-panel-body>.assessment-overview{padding:20px 22px;border-bottom:1px solid #e8eef3}.assessment-panel-body>.assessment-overview>p{font-size:14px;line-height:1.65}.assessment-panel-body>section{padding:16px 22px;border-bottom:1px solid #edf2f6}.assessment-panel-body>section h3{margin:0 0 10px;color:#294966;font-size:13px}.assessment-panel-body>footer{padding:12px 22px;color:#63788d;background:#f8fafc;font-size:10px;line-height:1.45}
@media(max-width:700px){.diagram-editor-page .assessment-panel{top:104px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 112px)}.assessment-panel>.assessment-panel-header{align-items:flex-start;gap:12px;padding:15px 14px}.assessment-panel>.assessment-panel-header h2{font-size:16px}.assessment-panel>.assessment-panel-header p>span:first-child,.assessment-panel>.assessment-panel-header p>b{display:none}.assessment-header-actions{gap:3px}.assessment-header-actions>.assessment-export-button{width:34px;padding:0;justify-content:center}.assessment-header-actions>.assessment-export-button span{display:none}.assessment-action-divider{margin:0 1px}.assessment-panel-body>.assessment-overview,.assessment-panel-body>section{padding-right:16px;padding-left:16px}}

/* Read-only diagram view: high-contrast identity and all actions in one header. */
.diagram-open-preview{width:min(1440px,calc(100% - 32px));min-height:calc(100vh - 126px);margin:16px auto;overflow:hidden;border:1px solid #c8d8e6;border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(18,45,77,.1);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizeLegibility}
.diagram-open-preview>header{position:relative;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:center;gap:24px;min-height:74px;padding:12px 18px;border-bottom:1px solid #284d70;color:#fff;background:#102d4f}
.diagram-open-preview>header::after{right:-5%;left:auto;width:48%;opacity:.42;background:radial-gradient(circle at 40% 50%,rgba(55,157,196,.46),transparent 67%)}
.diagram-preview-heading{position:relative;z-index:1;display:grid;min-width:0;gap:5px}.diagram-preview-heading>.eyebrow{color:#71d0f3;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.105em}.diagram-preview-heading>div{display:flex;min-width:0;align-items:baseline;gap:12px}.diagram-open-preview>header .diagram-preview-heading h1{overflow:hidden;margin:0;color:#fff;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.018em;text-overflow:ellipsis;white-space:nowrap}.diagram-open-preview>header .diagram-preview-heading p{margin:0;color:#a9c1d7;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.005em;white-space:nowrap}
.diagram-preview-actions{position:relative;z-index:1;display:flex;align-items:flex-end;gap:7px}.diagram-preview-status{display:grid;gap:4px;color:#bcd1e3;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.065em;text-transform:uppercase}.diagram-preview-status select,.diagram-preview-actions button,.diagram-preview-actions a{box-sizing:border-box;min-height:36px;margin:0;border-radius:8px;font:650 11px/1 var(--font-ui);letter-spacing:.005em}.diagram-preview-status select{min-width:154px;padding:0 30px 0 10px;border:1px solid #54718d;color:#173a59;background:#fff}.diagram-preview-actions button,.diagram-preview-actions a{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;text-decoration:none;cursor:pointer}.diagram-preview-status-save{border:1px solid #66839d;color:#e5eff7;background:rgba(255,255,255,.08)}.diagram-preview-status-save:hover{border-color:#8db0ca;background:rgba(255,255,255,.14)}.diagram-preview-back{border:1px solid #66839d;color:#e5eff7;background:transparent}.diagram-preview-back:hover{border-color:#9dbbd2;color:#fff;background:rgba(255,255,255,.1)}.diagram-preview-edit{border:1px solid #6dccf0;color:#08263e;background:#74d2f4}.diagram-preview-edit:hover{border-color:#9ce3fb;background:#93def7}
.realtime-toggle.preview,.realtime-toggle.preview:disabled{border-color:#d7e0e8!important;color:#7a8998!important;background:#f4f7f9!important;opacity:1;cursor:not-allowed}.realtime-toggle.preview .realtime-dot{background:#a7b2bd;box-shadow:0 0 0 3px rgba(148,163,184,.12)}
.diagram-open-preview-canvas{min-height:calc(100vh - 218px);place-items:stretch;background-color:#edf3f8}.diagram-readonly-viewer{min-height:calc(100vh - 218px);box-sizing:border-box;padding:18px;background:rgba(255,255,255,.78)}.diagram-open-preview-canvas img{align-self:center;justify-self:center;max-height:calc(100vh - 250px)}
@media(max-width:980px){.diagram-open-preview>header{grid-template-columns:1fr;gap:11px}.diagram-preview-actions{justify-content:flex-start;flex-wrap:wrap}.diagram-open-preview-canvas,.diagram-readonly-viewer{min-height:calc(100vh - 278px)}}
@media(max-width:620px){.diagram-open-preview{width:calc(100% - 16px);margin:8px auto;border-radius:10px}.diagram-open-preview>header{padding:13px}.diagram-preview-heading>div{display:grid;gap:2px}.diagram-preview-heading h1{font-size:17px}.diagram-preview-status{flex:1 1 150px}.diagram-preview-status select{width:100%}.diagram-preview-status-save{flex:1 1 112px}.diagram-preview-back,.diagram-preview-edit{flex:1 1 120px}.diagram-open-preview-canvas,.diagram-readonly-viewer{min-height:calc(100vh - 330px);padding:8px}}

:root[data-theme="dark"]{--ink:#e7f1fa;--muted:#9fb4c6;--line:#29445d;--surface:#112338;--soft:#0b1929;--shadow:0 18px 45px rgba(0,0,0,.32);color-scheme:dark}:root[data-theme="dark"] body:not(.landing-page):not(.login-shell):not(.onboarding-shell){color:var(--ink);background:#081523}:root[data-theme="dark"] main{color:var(--ink)}:root[data-theme="dark"] .library-page .app-header,:root[data-theme="dark"] .diagram-editor-page .app-header{border-color:#27455f;background:#0c2034}:root[data-theme="dark"] .library-page .header-title h1,:root[data-theme="dark"] .diagram-editor-page .header-title h1{color:#f2f8ff}:root[data-theme="dark"] .library-page .tool-menu a:hover,:root[data-theme="dark"] .library-page .tool-menu a.active{background:#1c3b56}:root[data-theme="dark"] .library-toolbar,:root[data-theme="dark"] .diagram-list-panel,:root[data-theme="dark"] .settings-card,:root[data-theme="dark"] .library-card,:root[data-theme="dark"] .workspace-intro,:root[data-theme="dark"] .library-hero,:root[data-theme="dark"] .diagram-card,:root[data-theme="dark"] .diagram-editor-page .editor-heading,:root[data-theme="dark"] .editor-subnav{border-color:#29445d;color:var(--ink);background:#102238}:root[data-theme="dark"] .library-section-head h2,:root[data-theme="dark"] .library-hero h2,:root[data-theme="dark"] .workspace-intro h1,:root[data-theme="dark"] .diagram-editor-page .editor-heading h2{color:#f1f7ff}:root[data-theme="dark"] .library-toolbar input,:root[data-theme="dark"] .library-toolbar select,:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{border-color:#36546d;color:#e7f1fa;background:#0a1828}:root[data-theme="dark"] .diagram-table th,:root[data-theme="dark"] .diagram-table td,:root[data-theme="dark"] .members-table th,:root[data-theme="dark"] .members-table td{border-color:#29445d;color:#dceaf6}:root[data-theme="dark"] .diagram-table tr,:root[data-theme="dark"] .diagram-list-toolbar,:root[data-theme="dark"] .list-footer{background:#102238}:root[data-theme="dark"] .diagram-action-bar,:root[data-theme="dark"] .row-actions-menu,:root[data-theme="dark"] .selection-actions-menu,:root[data-theme="dark"] .permission-dialog{border-color:#385873;color:#e7f1fa;background:#132941}:root[data-theme="dark"] .diagram-action-bar button,:root[data-theme="dark"] .row-actions-menu button,:root[data-theme="dark"] .selection-actions-menu button{color:#cae6fa;background:transparent}:root[data-theme="dark"] .diagram-status{color:#9cd6ff;background:#163b5a}:root[data-theme="dark"] .profile-popover{border-color:#385873;color:#e7f1fa;background:#132941}:root[data-theme="dark"] .profile-popover a{border-color:#385873;color:#d9ecfa;background:#0e2033}.theme-toggle{position:relative;z-index:5;display:grid;flex:0 0 34px;width:34px;height:34px;margin-left:10px;place-items:center;border:1px solid rgba(179,215,240,.42);border-radius:50%;color:#d9f2ff;background:rgba(6,24,42,.32);font:700 18px/1 var(--font-ui);cursor:pointer}.theme-toggle svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.theme-toggle:hover{border-color:#8bd7ff;background:rgba(97,191,239,.18)}:root[data-theme="dark"] .theme-toggle{border-color:#527895;color:#ffd98c;background:#152e46}:root[data-theme="dark"] .library-page main{min-height:calc(100vh - 68px);background:radial-gradient(circle at 76% -12%,#173d5c 0,transparent 32rem),#081523}:root[data-theme="dark"] .library-page .library-section-head h2{color:#f2f8ff}:root[data-theme="dark"] .library-page .library-section-head p,:root[data-theme="dark"] .library-page .library-toolbar label,:root[data-theme="dark"] .library-page .diagram-subtitle,:root[data-theme="dark"] .library-page .list-footer,:root[data-theme="dark"] .library-page .selection-count{color:#9bb4c7}:root[data-theme="dark"] .library-page .diagram-list-panel,:root[data-theme="dark"] .library-page .diagram-table-wrap,:root[data-theme="dark"] .library-page .diagram-table,:root[data-theme="dark"] .library-page .diagram-table thead,:root[data-theme="dark"] .library-page .diagram-table tbody,:root[data-theme="dark"] .library-page .diagram-table tr,:root[data-theme="dark"] .library-page .diagram-list-toolbar,:root[data-theme="dark"] .library-page .list-footer{background:#102238}:root[data-theme="dark"] .library-page .diagram-table th{color:#93aec2;background:#0d1d30}:root[data-theme="dark"] .library-page .diagram-table td{color:#e2eef8;background:#102238}:root[data-theme="dark"] .library-page .diagram-table tr:hover td{background:#142c45}:root[data-theme="dark"] .library-page .library-toolbar,:root[data-theme="dark"] .library-page .custom-date-filter{border-color:#2c4c67;background:#102238;box-shadow:0 12px 30px rgba(0,0,0,.2)}:root[data-theme="dark"] .library-page .row-actions-toggle,:root[data-theme="dark"] .library-page .selection-actions-button{border-color:#416583;color:#8bd8ff;background:#152f49}:root[data-theme="dark"] .library-page .row-actions-toggle:hover,:root[data-theme="dark"] .library-page .row-actions-toggle[aria-expanded=true],:root[data-theme="dark"] .library-page .selection-actions-button:hover{color:#dff6ff;background:#1d4a6c}:root[data-theme="dark"] .library-page .row-actions-menu,:root[data-theme="dark"] .library-page .selection-actions-menu{border-color:#416583;background:#132b43;box-shadow:0 18px 38px rgba(0,0,0,.4)}:root[data-theme="dark"] .library-page .row-actions-menu button,:root[data-theme="dark"] .library-page .selection-actions-menu button{color:#d9ecfa}:root[data-theme="dark"] .library-page .row-actions-menu button:hover,:root[data-theme="dark"] .library-page .selection-actions-menu button:hover:not(:disabled){background:#204968}:root[data-theme="dark"] .library-page .row-actions-menu .row-trash,:root[data-theme="dark"] .library-page .selection-actions-menu .danger{color:#ffaaa2}
/* Unified controls and dynamic library actions */
.theme-toggle{box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;padding:0!important;line-height:0!important}.theme-toggle svg{display:block!important;width:18px!important;height:18px!important;margin:0!important}.portal-profile{position:relative!important;overflow:hidden!important;font-size:0!important}.portal-profile::before{position:absolute;top:7px;width:9px;height:9px;border-radius:50%;background:currentColor;content:""}.portal-profile::after{position:absolute;bottom:6px;width:18px;height:10px;border-radius:10px 10px 5px 5px;background:currentColor;content:""}
.library-page input[type="checkbox"],.diagram-list-toolbar input[type="checkbox"]{appearance:none!important;width:16px!important;height:16px!important;margin:0!important;border:1px solid #819ab0!important;border-radius:4px!important;background:#fff!important;cursor:pointer!important;vertical-align:middle}.library-page input[type="checkbox"]:checked,.diagram-list-toolbar input[type="checkbox"]:checked{border-color:#1479bd!important;background:#1479bd!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.2 6.4 11.2 12.8 4.8' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}.library-page input[type="checkbox"]:focus-visible,.diagram-list-toolbar input[type="checkbox"]:focus-visible{outline:3px solid #77c9f4!important;outline-offset:2px!important}
.diagram-action-row{display:none!important}.diagram-action-popover{width:156px!important;padding:4px!important;border:1px solid #bdd1e1!important;border-radius:9px!important;background:#fff!important;box-shadow:0 14px 30px rgba(16,48,76,.22)!important}.diagram-action-popover button{display:block!important;width:100%!important;min-height:30px!important;padding:7px 9px!important;border:0!important;border-radius:5px!important;color:#254a69!important;background:transparent!important;text-align:left!important;font:750 11px/1.2 var(--font-ui)!important;cursor:pointer!important}.diagram-action-popover button:hover{background:#eaf5fc!important;color:#0b4e80!important}.diagram-action-popover .row-trash-action{color:#b1323c!important}.diagram-action-popover .row-trash-action:hover{background:#fff0f1!important;color:#941f2a!important}
:root[data-theme="dark"] .library-page input[type="checkbox"],:root[data-theme="dark"] .diagram-list-toolbar input[type="checkbox"]{border-color:#5e819b!important;background:#0c2033!important}:root[data-theme="dark"] .library-page input[type="checkbox"]:checked,:root[data-theme="dark"] .diagram-list-toolbar input[type="checkbox"]:checked{border-color:#36a8e1!important;background:#167fc1!important}:root[data-theme="dark"] .diagram-action-popover{border-color:#3e6785!important;background:#102b43!important;box-shadow:0 16px 34px rgba(0,0,0,.45)!important}:root[data-theme="dark"] .diagram-action-popover button{color:#d9ecfa!important}:root[data-theme="dark"] .diagram-action-popover button:hover{background:#1a4564!important;color:#fff!important}:root[data-theme="dark"] .diagram-action-popover .row-trash-action{color:#ffaaa2!important}:root[data-theme="dark"] .diagram-action-popover .row-trash-action:hover{background:#3d202b!important;color:#ffc2c5!important}
:root[data-theme="dark"] .portal-topbar,:root[data-theme="dark"] .settings-header{border-color:#254760!important;background:#0b1e30!important}:root[data-theme="dark"] .portal-table thead,:root[data-theme="dark"] .portal-table th{background:#0a1c2d!important;color:#9eb9ce!important}:root[data-theme="dark"] .settings-card input,:root[data-theme="dark"] .settings-card select,:root[data-theme="dark"] .settings-card textarea{border-color:#385b75!important;color:#e7f2fb!important;background:#0a1d2f!important}:root[data-theme="dark"] .settings-card button:not(.danger),:root[data-theme="dark"] .settings-card .button:not(.danger){border-color:#3f6682!important;color:#ddecfa!important;background:#153650!important}:root[data-theme="dark"] .settings-card button:hover:not(:disabled):not(.danger),:root[data-theme="dark"] .settings-card .button:hover:not(.danger){border-color:#55aee1!important;color:#fff!important;background:#1b5479!important}:root[data-theme="dark"] .settings-card button.danger,:root[data-theme="dark"] .settings-card .danger{border-color:#a6535d!important;color:#ffc0c4!important;background:#3a202b!important}
:root[data-theme="dark"] .library-page .diagram-name{color:#f7fbff!important;font-weight:780}
:root[data-theme="dark"] .recent-diagram{border-color:#294e6a!important;color:#e8f4fc!important;background:#0b2033!important}:root[data-theme="dark"] .recent-diagram:hover{border-color:#4b82a7!important;background:#123149!important}:root[data-theme="dark"] .recent-diagram-mark{color:#bceaff!important;background:#164565!important}:root[data-theme="dark"] .recent-diagram strong{color:#f3f9ff!important}:root[data-theme="dark"] .recent-diagram small{color:#9ab7cb!important}

:root[data-theme="dark"] .library-page main{background:#081523!important}

.login-shell > .login-main {
  padding-top: 36px !important;
}
.portal-topbar,
.portal-topbar::before,
.portal-topbar::after {
  background-image: none !important;
}

.portal-topbar::before,
.portal-topbar::after {
  content: none !important;
  display: none !important;
}

.portal-profile {
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  aspect-ratio: 1 !important;
  place-items: center !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
}

.portal-profile::before,
.portal-profile::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Shared light surface for public and authenticated areas. */
:root[data-theme="light"] body{background:#f4f8fc!important;color:#112b43!important}
:root[data-theme="light"] .landing-header,:root[data-theme="light"] .portal-topbar,:root[data-theme="light"] .app-header,:root[data-theme="light"] .settings-header{background:#f8fcff!important;background-image:none!important;border-color:#c8dce8!important;color:#112b43!important}
:root[data-theme="light"] .landing-brand,:root[data-theme="light"] .landing-brand span,:root[data-theme="light"] .landing-login,:root[data-theme="light"] .portal-topbar h1,:root[data-theme="light"] .portal-topbar p{color:#112b43!important}
:root[data-theme="light"] .login-shell,:root[data-theme="light"] .onboarding-shell{color:#112b43!important;background:radial-gradient(circle at 94% 0,#cceaf9 0,transparent 32rem),radial-gradient(circle at 5% 100%,#dcecf5 0,transparent 33rem),#f4f8fc!important}
:root[data-theme="light"] .login-intro h1,:root[data-theme="light"] .onboarding-copy h1,:root[data-theme="light"] .login-panel h2,:root[data-theme="light"] .onboarding-card h2{color:#112b43!important}
:root[data-theme="light"] .login-intro p,:root[data-theme="light"] .onboarding-copy>p,:root[data-theme="light"] .login-panel>p,:root[data-theme="light"] .onboarding-card>p{color:#506f87!important}
:root[data-theme="light"] .login-panel,:root[data-theme="light"] .onboarding-card{background:#fff!important;border-color:#b9d1e0!important;box-shadow:0 24px 64px #16435b26!important}
:root[data-theme="light"] .login-field label,:root[data-theme="light"] .field label{color:#264a64!important}
:root[data-theme="light"] .login-field input,:root[data-theme="light"] .field input,:root[data-theme="light"] .field select{color:#102d45!important;background:#fff!important;border-color:#9fbece!important}
:root[data-theme="light"] .sso-submit,:root[data-theme="light"] .identity-path{color:#12354e!important;background:#f7fbfe!important;border-color:#b7d0df!important}
:root[data-theme="light"] .sso-submit.entra{background:#edf8fd!important;border-color:#75b8d8!important}
:root[data-theme="light"] .identity-provider,:root[data-theme="light"] .identity-path strong{color:#12354e!important}
:root[data-theme="light"] .identity-provider small,:root[data-theme="light"] .identity-path small,:root[data-theme="light"] .onboarding-point{color:#55738a!important}
:root[data-theme="light"] .login-divider,:root[data-theme="light"] .form-divider{color:#55738a!important}
:root[data-theme="light"] .login-divider::before,:root[data-theme="light"] .login-divider::after,:root[data-theme="light"] .form-divider::before,:root[data-theme="light"] .form-divider::after{background:#bfd2df!important}
:root[data-theme="light"] .portal-shell,:root[data-theme="light"] .portal-main,:root[data-theme="light"] .portal-content,:root[data-theme="light"] .app-shell,:root[data-theme="light"] .workspace-shell,:root[data-theme="light"] .settings-shell,:root[data-theme="light"] .settings-page,:root[data-theme="light"] .library-page{background:#f4f8fc!important;color:#112b43!important}
:root[data-theme="light"] .portal-sidebar,:root[data-theme="light"] .app-sidebar,:root[data-theme="light"] .workspace-sidebar{background:#f8fcff!important;border-color:#c8dce8!important;color:#264a64!important}
:root[data-theme="light"] .portal-card,:root[data-theme="light"] .settings-card,:root[data-theme="light"] .library-card,:root[data-theme="light"] .workspace-card,:root[data-theme="light"] .diagram-action-popover,:root[data-theme="light"] dialog{background:#fff!important;border-color:#bfd4e1!important;color:#112b43!important;box-shadow:0 18px 46px #16435b1f!important}
:root[data-theme="light"] table,:root[data-theme="light"] thead,:root[data-theme="light"] tbody,:root[data-theme="light"] tr,:root[data-theme="light"] td,:root[data-theme="light"] th{background:transparent!important;color:#173b57!important;border-color:#c8dce8!important}
:root[data-theme="light"] a,:root[data-theme="light"] .portal-link,:root[data-theme="light"] .library-link{color:#087baa!important}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{color:#102d45!important;background:#fff!important;border-color:#9fbece!important}
:root[data-theme="light"] .theme-toggle{color:#175171!important;background:#eaf6fc!important;border-color:#91bdd1!important}
:root[data-theme="light"] .portal-profile{background:#e5f5fc!important;border-color:#78b6d2!important}
:root[data-theme="light"] .login-shell .landing-header,:root[data-theme="light"] .onboarding-shell .landing-header{background:transparent!important;border-color:transparent!important;box-shadow:none!important}

/* Reusable Diagram atmosphere: use these tokens for public and authenticated light/dark surfaces. */
:root{--diagram-atmosphere-light:radial-gradient(circle at 95% 0,#cbeafa 0,transparent 31rem),radial-gradient(circle at 5% 100%,#d9eaf4 0,transparent 32rem),#f4f8fc;--diagram-atmosphere-dark:radial-gradient(circle at 92% 0,#1b5b7c 0,transparent 31rem),radial-gradient(circle at 8% 100%,#123c59 0,transparent 30rem),#061423}
:root[data-theme="light"] .onboarding-shell{color:#112b43!important;background:var(--diagram-atmosphere-light)!important}:root[data-theme="light"] .onboarding-shell .landing-header{background:transparent!important;border:0!important;box-shadow:none!important}:root[data-theme="light"] .onboarding-shell .onboarding-copy h1{color:#112b43!important}:root[data-theme="light"] .onboarding-shell .onboarding-card{color:#112b43!important;background:#fff!important;border-color:#b9d1e0!important}:root[data-theme="dark"] .onboarding-shell{color:#edf7ff!important;background:var(--diagram-atmosphere-dark)!important}:root[data-theme="dark"] .onboarding-shell .landing-header{color:#edf7ff!important;background:transparent!important;border:0!important;box-shadow:none!important}:root[data-theme="dark"] .onboarding-shell .landing-brand{color:#f4faff!important}:root[data-theme="dark"] .onboarding-shell .landing-brand span{color:#061423!important;background:#8ad5ff!important;border-color:#8ad5ff!important}:root[data-theme="dark"] .onboarding-shell .landing-login{color:#e7f6ff!important;background:#0a1d30!important;border-color:#355d78!important}:root[data-theme="dark"] .onboarding-shell .onboarding-copy h1{color:#f3f9ff!important}:root[data-theme="dark"] .onboarding-shell .onboarding-copy>p{color:#a9c2d4!important}:root[data-theme="dark"] .onboarding-shell .onboarding-point{color:#c9deeb!important}:root[data-theme="dark"] .onboarding-shell .onboarding-card{color:#edf7ff!important;background:linear-gradient(145deg,#102a41,#091b2e)!important;border-color:#355c77!important;box-shadow:0 30px 90px #010b16a6!important}:root[data-theme="dark"] .onboarding-shell .onboarding-card>p{color:#a8c0d2!important}:root[data-theme="dark"] .onboarding-shell .identity-path{color:#e8f7ff!important;background:#0c2439!important;border-color:#365d79!important}:root[data-theme="dark"] .onboarding-shell .identity-path.personal{background:#0a1a2a!important;border-color:#3d566c!important}:root[data-theme="dark"] .onboarding-shell .identity-path small{color:#9ab7ca!important}:root[data-theme="dark"] .onboarding-shell .field label{color:#d1e1ed!important}:root[data-theme="dark"] .onboarding-shell .field input,:root[data-theme="dark"] .onboarding-shell .field select{color:#fff!important;background:#071625!important;border-color:#34506b!important}:root[data-theme="dark"] .onboarding-shell .form-divider{color:#89a7bd!important}
:root[data-theme="light"] body.onboarding-shell>.landing-header{color:#112b43!important;background:rgba(244,248,252,.96)!important;border-bottom:1px solid #c9dbe7!important;box-shadow:0 1px 14px rgba(34,76,108,.06)!important}:root[data-theme="light"] body.onboarding-shell>.landing-header .landing-brand{color:#112b43!important}:root[data-theme="light"] body.onboarding-shell>.landing-header .landing-login{color:#113752!important;background:#fff!important;border-color:#9db9cc!important}

/* Final visual alignment: public headers stay transparent; diagram preview owns diagram actions. */
:root[data-theme="light"] body.login-shell>.landing-header,:root[data-theme="light"] body.onboarding-shell>.landing-header,:root[data-theme="light"] body.landing-page>.landing-header{color:#112b43!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}:root[data-theme="light"] body.login-shell>.landing-header .landing-brand,:root[data-theme="light"] body.onboarding-shell>.landing-header .landing-brand,:root[data-theme="light"] body.landing-page>.landing-header .landing-brand{color:#112b43!important}:root[data-theme="light"] body.login-shell>.landing-header .landing-login,:root[data-theme="light"] body.onboarding-shell>.landing-header .landing-login,:root[data-theme="light"] body.landing-page>.landing-header .landing-login{color:#113752!important;background:transparent!important;border-color:#94b7cc!important}:root[data-theme="light"] .app-header,:root[data-theme="light"] .portal-topbar,:root[data-theme="light"] .settings-header{color:#112b43!important;background:#f8fcff!important;background-image:none!important;border-color:#c8dce8!important}
.diagram-preview-access,.diagram-preview-copy{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 11px;border:1px solid #b8d0e2;border-radius:8px;color:#1a5278;background:#f8fcff;font:750 11px/1 var(--font-ui);cursor:pointer}.diagram-preview-access:hover,.diagram-preview-copy:hover{border-color:#559ac5;color:#075f97;background:#eaf6fc}:root[data-theme="dark"] .diagram-preview-access,:root[data-theme="dark"] .diagram-preview-copy{border-color:#416783;color:#c9ecff;background:#143650}:root[data-theme="dark"] .diagram-preview-access:hover,:root[data-theme="dark"] .diagram-preview-copy:hover{border-color:#71c9f3;color:#f1fbff;background:#1e4a69}@media(max-width:620px){.diagram-preview-access,.diagram-preview-copy{flex:1 1 118px}}
/* Diagram actions live with the diagram identity in preview mode. */
.diagram-preview-option-row{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid #c8d9e5}.diagram-preview-option-row>span{margin-right:2px;color:#66839a;font:850 9px/1 var(--font-ui);letter-spacing:.1em}.diagram-preview-option-row .diagram-preview-access,.diagram-preview-option-row .diagram-preview-copy{min-height:28px;padding:0 9px;border-radius:7px;font-size:10px}:root[data-theme="dark"] .diagram-preview-option-row{border-color:#31536d}:root[data-theme="dark"] .diagram-preview-option-row>span{color:#8fb4c9}@media(max-width:620px){.diagram-preview-option-row{flex-wrap:wrap}.diagram-preview-option-row>span{flex:0 0 100%}.diagram-preview-option-row .diagram-preview-access,.diagram-preview-option-row .diagram-preview-copy{flex:1 1 120px}}
/* Authenticated header contract: the same neutral header across library and editor. */
:root[data-theme="light"] .library-page .app-header,:root[data-theme="light"] .diagram-editor-page .app-header{color:#132c46!important;background:#f8fcff!important;background-image:none!important;border-color:#d5e2eb!important;box-shadow:0 1px 3px rgba(15,42,68,.04)!important}:root[data-theme="light"] .library-page .header-title,:root[data-theme="light"] .diagram-editor-page .header-title{border-color:#dce6ee!important}:root[data-theme="light"] .library-page .header-title h1,:root[data-theme="light"] .diagram-editor-page .header-title h1{color:#102a44!important}:root[data-theme="light"] .library-page .header-title p,:root[data-theme="light"] .diagram-editor-page .header-title p{color:#688096!important}:root[data-theme="light"] .library-page .tool-menu a,:root[data-theme="light"] .diagram-editor-page .tool-menu a{color:#5d748a!important;background:transparent!important}:root[data-theme="light"] .library-page .tool-menu a:hover,:root[data-theme="light"] .diagram-editor-page .tool-menu a:hover{color:#155d92!important;background:#edf6fb!important}:root[data-theme="light"] .library-page .tool-menu a.active,:root[data-theme="light"] .diagram-editor-page .tool-menu a.active{color:#105f9c!important;background:transparent!important}:root[data-theme="light"] .library-page .tool-menu a.active::after,:root[data-theme="light"] .diagram-editor-page .tool-menu a.active::after{content:""!important;position:absolute!important;right:15px!important;bottom:0!important;left:15px!important;height:2px!important;border-radius:2px 2px 0 0!important;background:#1672b8!important}:root[data-theme="light"] .library-page .profile-menu summary,:root[data-theme="light"] .diagram-editor-page .profile-menu summary{border-color:#cbd9e6!important;color:#204668!important;background:#eef4f9!important}:root[data-theme="dark"] .library-page .app-header,:root[data-theme="dark"] .diagram-editor-page .app-header{color:#eaf5fc!important;border-color:#274b67!important;background:#0c2034!important}:root[data-theme="dark"] .library-page .tool-menu a,:root[data-theme="dark"] .diagram-editor-page .tool-menu a{color:#a9c8dc!important;background:transparent!important}:root[data-theme="dark"] .library-page .tool-menu a.active,:root[data-theme="dark"] .diagram-editor-page .tool-menu a.active{color:#f2f9ff!important;background:transparent!important}:root[data-theme="dark"] .library-page .tool-menu a.active::after,:root[data-theme="dark"] .diagram-editor-page .tool-menu a.active::after{content:""!important;position:absolute!important;right:15px!important;bottom:0!important;left:15px!important;height:2px!important;background:#72d5ff!important}
/* Compact table selection and a single primary action treatment for the portal. */
.library-page .diagram-list-panel .select-all input[type="checkbox"],.library-page .diagram-list-panel .check-column input[type="checkbox"]{display:inline-grid!important;box-sizing:border-box!important;width:13px!important;min-width:13px!important;height:13px!important;min-height:13px!important;margin:0!important;padding:0!important;border-radius:3px!important;transform:none!important;zoom:1!important}.library-page .diagram-list-panel .select-all input[type="checkbox"]:checked,.library-page .diagram-list-panel .check-column input[type="checkbox"]:checked{background-size:11px 11px!important;box-shadow:inset 0 0 0 2px #fff!important}:root[data-theme="dark"] .library-page .diagram-list-panel .select-all input[type="checkbox"]:checked,:root[data-theme="dark"] .library-page .diagram-list-panel .check-column input[type="checkbox"]:checked{box-shadow:inset 0 0 0 2px #0b1e30!important}.portal-primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;box-sizing:border-box!important;padding:0 15px!important;border:1px solid #176eae!important;border-radius:8px!important;color:#fff!important;background:#176eae!important;box-shadow:0 8px 20px rgba(23,110,174,.18)!important}.portal-primary:hover{border-color:#105d96!important;background:#105d96!important}:root[data-theme="dark"] .portal-primary{border-color:#238fcd!important;background:#167fc1!important;box-shadow:0 10px 24px rgba(2,19,35,.53)!important}:root[data-theme="dark"] .portal-primary:hover{border-color:#55bceb!important;background:#2197db!important}
/* Profile and organization option controls share the same theme contract. */
.profile-card{border:1px solid #bfd4e1!important;color:#112b43!important;background:#fff!important;box-shadow:0 18px 46px rgba(22,67,91,.07)!important}.profile-card>p,.profile-form label,.identity-row small{color:#55738a!important}.profile-form input{border-color:#9fbece!important;color:#102d45!important;background:#fff!important}.profile-form input:disabled{color:#6b7d90!important;background:#f1f5f9!important}.profile-form button,.identity-link{border:1px solid #176eae!important;color:#fff!important;background:#176eae!important}.profile-form button:hover:not(:disabled),.identity-link:hover{border-color:#105d96!important;background:#105d96!important}.identity-row{border-color:#d4e1ea!important;background:#f8fcff!important}.auth-switch{border-color:#d2e0ea!important;background:#f8fcff!important}.auth-switch small{color:#668096!important}.auth-switch i{background:#8ea5b8!important}.auth-switch input:checked+span+i{background:#176eae!important}.auth-switch input:disabled+span,.auth-switch input:disabled+span+i{opacity:.5!important}:root[data-theme="dark"] .profile-card{border-color:#315b78!important;color:#e9f5fc!important;background:#102b43!important;box-shadow:0 20px 52px rgba(0,0,0,.32)!important}:root[data-theme="dark"] .profile-card>p,:root[data-theme="dark"] .profile-form label,:root[data-theme="dark"] .identity-row small{color:#9ebbd0!important}:root[data-theme="dark"] .profile-form input{border-color:#3b637f!important;color:#edf8ff!important;background:#0a1d2f!important}:root[data-theme="dark"] .profile-form input:disabled{color:#9db8ca!important;background:#0b2033!important}:root[data-theme="dark"] .profile-form button,:root[data-theme="dark"] .identity-link{border-color:#238fcd!important;color:#f5fbff!important;background:#167fc1!important}:root[data-theme="dark"] .profile-form button:hover:not(:disabled),:root[data-theme="dark"] .identity-link:hover{border-color:#63c4f2!important;background:#2197db!important}:root[data-theme="dark"] .identity-row{border-color:#315a76!important;background:#0b2033!important}:root[data-theme="dark"] .auth-switch{border-color:#315a76!important;background:#102b43!important}:root[data-theme="dark"] .auth-switch small{color:#9dbbd0!important}:root[data-theme="dark"] .auth-switch i{background:#58728a!important}:root[data-theme="dark"] .auth-switch input:checked+span+i{background:#238fcd!important}:root[data-theme="dark"] .auth-switch input:focus-visible+span+i{outline-color:#78d5ff!important}
/* Keep diagrams.net flush with the authenticated editor chrome at every viewport height. */
.diagram-editor-page{height:100dvh;overflow:hidden}
.diagram-editor-page .editor-panel{display:flex;min-height:0;flex-direction:column;overflow:hidden}
.diagram-editor-page .editor-panel.hidden{display:none!important}
.diagram-editor-page .editor-shell{display:flex;min-height:0!important;height:auto!important;flex:1 1 auto}
.diagram-editor-page .editor-shell iframe{min-height:0;flex:1 1 auto}
.diagram-editor-page>footer{display:none}

/* Responsive behavior for the shared workspace navigation. */
@media (max-width: 760px) {
  .workspace-header .tool-menu { display: none !important; }
  .workspace-header.workspace-menu-open .tool-menu {
    position: absolute;
    z-index: 120;
    top: 100%;
    right: 12px;
    left: 12px;
    display: grid !important;
    padding: 8px;
    border: 1px solid #c8dce8;
    border-radius: 10px;
    background: #f8fcff;
    box-shadow: 0 18px 42px rgba(20, 58, 92, .2);
  }
  :root[data-theme="dark"] .workspace-header.workspace-menu-open .tool-menu {
    border-color: #315a77;
    background: #102b43;
  }
}

/* PORTAL_RESOURCE_LISTS
   These items are rendered after load, so their contract must be global. */
html:root[data-theme] body.portal-page .portal .portal-applications,
html:root[data-theme] body.portal-page .portal .portal-projects {
  display: grid !important;
  gap: 8px !important;
}

html:root[data-theme] body.portal-page .portal .portal-application,
html:root[data-theme] body.portal-page .portal .portal-project {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  min-height: 62px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border: 1px solid #d8e5ee !important;
  border-radius: 10px !important;
  color: #183b5d !important;
  background: #f8fbfe !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

html:root[data-theme] body.portal-page .portal .portal-application::before,
html:root[data-theme] body.portal-page .portal .portal-project::before {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border: 1px solid #c7deec !important;
  border-radius: 9px !important;
  color: #1673ad !important;
  background: #e5f4fc !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  content: "APP" !important;
}

html:root[data-theme] body.portal-page .portal .portal-project::before {
  content: "PRJ" !important;
}

html:root[data-theme] body.portal-page .portal .portal-application:hover,
html:root[data-theme] body.portal-page .portal .portal-project:hover {
  border-color: #79b7dd !important;
  color: #183b5d !important;
  background: #eff8fd !important;
  transform: translateY(-1px) !important;
}

html:root[data-theme] body.portal-page .portal .portal-application > span:first-of-type,
html:root[data-theme] body.portal-page .portal .portal-project > div {
  display: block !important;
  min-width: 0 !important;
}

html:root[data-theme] body.portal-page .portal .portal-application strong,
html:root[data-theme] body.portal-page .portal .portal-project strong {
  display: block !important;
  overflow: hidden !important;
  color: #163d60 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root[data-theme] body.portal-page .portal .portal-application small,
html:root[data-theme] body.portal-page .portal .portal-project small {
  display: block !important;
  margin-top: 3px !important;
  color: #637c91 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

html:root[data-theme] body.portal-page .portal .portal-application > span:last-child,
html:root[data-theme] body.portal-page .portal .portal-project::after {
  color: #2476aa !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  content: "→" !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application,
html:root[data-theme="dark"] body.portal-page .portal .portal-project {
  border-color: #294e6a !important;
  color: #dcecf7 !important;
  background: #0b2033 !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application:hover,
html:root[data-theme="dark"] body.portal-page .portal .portal-project:hover {
  border-color: #4b82a7 !important;
  color: #eef8ff !important;
  background: #102b43 !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application::before,
html:root[data-theme="dark"] body.portal-page .portal .portal-project::before {
  border-color: #315d78 !important;
  color: #8bd8fb !important;
  background: #173d59 !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application strong,
html:root[data-theme="dark"] body.portal-page .portal .portal-project strong {
  color: #f1f8ff !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application small,
html:root[data-theme="dark"] body.portal-page .portal .portal-project small {
  color: #a9c3d5 !important;
}

html:root[data-theme="dark"] body.portal-page .portal .portal-application > span:last-child,
html:root[data-theme="dark"] body.portal-page .portal .portal-project::after {
  color: #78c9f2 !important;
}

/* EDITOR_VIEWPORT_ALIGNMENT */
body.diagram-editor-page{display:grid;grid-template-rows:auto auto minmax(0,1fr);width:100%;height:100dvh;min-height:0;overflow:hidden}
.diagram-editor-page .app-header{position:relative!important;top:auto!important;height:auto!important;min-height:68px!important}
.diagram-editor-page .editor-subnav{position:relative!important;z-index:24;top:auto!important;min-height:46px}
.diagram-editor-page #editorWorkspace{width:100%;height:auto;min-height:0;max-width:none;margin:0;padding:0;overflow:auto}
.diagram-editor-page #editor:not(.hidden){position:relative!important;inset:auto!important;width:100%;height:100%;min-height:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;box-shadow:none}
.diagram-editor-page #editor:not(.hidden) .editor-shell{width:100%;height:100%!important;min-height:0!important}
.diagram-editor-page #drawioEditor{display:block;width:100%;height:100%;min-height:0;border:0}
.diagram-editor-page .diagram-open-preview{position:relative;z-index:5;overflow:visible!important}
.diagram-editor-page .diagram-open-preview>header{position:relative;z-index:40;overflow:visible!important;border-radius:13px 13px 0 0;background-clip:padding-box}
.diagram-editor-page .diagram-preview-heading,.diagram-editor-page .diagram-preview-option-row{position:relative;overflow:visible!important}
.diagram-editor-page .diagram-preview-heading{z-index:90}
.diagram-editor-page .diagram-preview-option-row{z-index:45}
.diagram-editor-page .diagram-download-menu{position:relative;z-index:60}
.diagram-editor-page .diagram-download-popover{z-index:1000;max-height:min(420px,calc(100dvh - 170px));overflow-y:auto}
.diagram-editor-page .diagram-open-preview-canvas{position:relative;z-index:1;overflow:hidden;border-radius:0 0 13px 13px;background-clip:padding-box}
.diagram-preview-fallback{position:absolute;z-index:3;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;color:#536f86;background:rgba(237,243,248,.9);text-align:center}.diagram-preview-fallback.hidden{display:none}.diagram-open-preview-canvas .diagram-preview-fallback span{position:static;color:inherit}.diagram-preview-fallback button{min-height:34px;padding:7px 12px;border:1px solid #8fb4cf;border-radius:7px;color:#155f93;background:#fff;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.diagram-open-preview-canvas:fullscreen{min-height:100vh;border-radius:0;background:#edf3f8}.diagram-open-preview-canvas:fullscreen .diagram-readonly-viewer{min-height:100vh;padding:24px}
.diagram-access-panel .user-picker-field{display:grid;gap:5px}.diagram-access-panel .user-picker-field input,.diagram-access-panel .user-picker-field select{width:100%;box-sizing:border-box}.diagram-access-panel .user-picker-field input{border-radius:7px 7px 3px 3px}.diagram-access-panel .user-picker-field select{border-radius:3px 3px 7px 7px}.permission-dialog .permission-user-search{margin-bottom:5px}
@media(max-width:620px){.diagram-editor-page .diagram-open-preview>header{border-radius:9px 9px 0 0}.diagram-editor-page .diagram-open-preview-canvas{border-radius:0 0 9px 9px}}
@media(max-width:720px){body.diagram-editor-page{grid-template-rows:auto auto minmax(0,1fr)}.diagram-editor-page .diagram-download-popover{right:0;left:auto;max-height:calc(100dvh - 190px)}}

/* Portal recent diagrams: external on purpose so CSP never degrades this list to raw links. */
.portal .portal-grid>.portal-card:first-child{grid-row:auto;align-self:start}
.portal #recentDiagrams.recent-diagrams{display:grid;gap:8px}
.portal #recentDiagrams .recent-diagram{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:68px;padding:11px 12px;border:1px solid #d9e5ef;border-radius:11px;color:#183b5d;background:#f8fbfe;text-decoration:none!important;box-shadow:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.portal #recentDiagrams .recent-diagram:hover{border-color:#79b7dd;background:#eff8fd;transform:translateY(-1px)}
.portal #recentDiagrams .recent-diagram:focus-visible{outline:3px solid #65b8e8;outline-offset:2px}
.portal #recentDiagrams .recent-diagram-mark{position:relative;display:block;width:42px;height:42px;border:1px solid #c7deec;border-radius:10px;color:#1673ad;background:#e5f4fc}
.portal #recentDiagrams .recent-diagram-mark::before{position:absolute;inset:9px 11px 8px 10px;border:1.5px solid currentColor;border-radius:3px;background:#f8fdff;content:""}
.portal #recentDiagrams .recent-diagram-mark::after{position:absolute;top:9px;right:11px;width:7px;height:7px;border-bottom:1.5px solid currentColor;border-left:1.5px solid currentColor;background:#e5f4fc;content:""}
.portal #recentDiagrams .recent-diagram-copy{display:grid;min-width:0;gap:4px}
.portal #recentDiagrams .recent-diagram-copy strong{display:block;overflow:hidden;color:#163d60;font-size:13px;font-weight:800;line-height:1.3;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.portal #recentDiagrams .recent-diagram-copy small{display:flex;align-items:center;gap:6px;color:#6f8599;font-size:10px;line-height:1.3;text-decoration:none}
.portal #recentDiagrams .recent-diagram-copy small::before{width:5px;height:5px;border-radius:50%;background:#65a9d3;content:""}
.portal #recentDiagrams .recent-diagram-end{display:flex;align-items:center;gap:10px}
.portal #recentDiagrams .recent-diagram-end .portal-status{padding:4px 8px;white-space:nowrap;text-decoration:none}
.portal #recentDiagrams .recent-diagram-arrow{color:#6c8ca3;font-size:16px;line-height:1;transition:transform .16s ease}
.portal #recentDiagrams .recent-diagram:hover .recent-diagram-arrow{color:#1472ae;transform:translateX(2px)}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram{border-color:#294e6a;color:#e8f4fc;background:#0b2033}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram:hover{border-color:#4b82a7;background:#123149}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-mark{border-color:#315e7d;color:#9cddfb;background:#143b58}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-mark::before{background:#0c2539}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-mark::after{background:#143b58}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-copy strong{color:#f3f9ff}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-copy small{color:#9ab7cb}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-copy small::before{background:#5ebbe8}
:root[data-theme="dark"] .portal #recentDiagrams .recent-diagram-arrow{color:#7ca7c1}
@media(max-width:560px){.portal #recentDiagrams .recent-diagram{grid-template-columns:38px minmax(0,1fr) auto;gap:9px;padding:10px}.portal #recentDiagrams .recent-diagram-mark{width:38px;height:38px}.portal #recentDiagrams .recent-diagram-end .portal-status{display:none}}

/* Internal application surfaces stay flat. Decorative atmosphere belongs only to public marketing/auth pages. */
:root[data-theme="light"] body.catalog-page,
:root[data-theme="light"] body.library-page,
:root[data-theme="light"] body.diagram-editor-page,
:root[data-theme="light"] body.icon-catalog-page,
:root[data-theme="light"] body.profile-page,
:root[data-theme="light"] body:has(.portal),
:root[data-theme="light"] body:has(.settings-shell),
:root[data-theme="light"] body:has(.settings-main) {
  background: #f3f6f9 !important;
  background-image: none !important;
}

:root[data-theme="dark"] body.catalog-page,
:root[data-theme="dark"] body.library-page,
:root[data-theme="dark"] body.diagram-editor-page,
:root[data-theme="dark"] body.icon-catalog-page,
:root[data-theme="dark"] body.profile-page,
:root[data-theme="dark"] body:has(.portal),
:root[data-theme="dark"] body:has(.settings-shell),
:root[data-theme="dark"] body:has(.settings-main) {
  background: #071523 !important;
  background-image: none !important;
}

/* Profile primary action: keep link text legible in every anchor state. */
.profile-page a.identity-link,
.profile-page a.identity-link:link,
.profile-page a.identity-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #176eae !important;
  border-radius: 8px;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: #176eae !important;
  box-shadow: 0 7px 16px rgba(23, 110, 174, .18);
  line-height: 1.2;
  opacity: 1;
}

.profile-page a.identity-link:hover {
  border-color: #105d96 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: #105d96 !important;
}

.profile-page a.identity-link:focus-visible {
  outline: 3px solid rgba(23, 110, 174, .28);
  outline-offset: 3px;
}

:root[data-theme="dark"] .profile-page a.identity-link,
:root[data-theme="dark"] .profile-page a.identity-link:link,
:root[data-theme="dark"] .profile-page a.identity-link:visited {
  border-color: #238fcd !important;
  color: #f5fbff !important;
  -webkit-text-fill-color: #f5fbff;
  background: #167fc1 !important;
}

.catalog-page,
.library-page main,
.icon-catalog-page main,
.settings-main,
.settings-shell,
.settings-workspace,
.settings-content,
.portal,
.portal-content {
  background-image: none !important;
}

.app-header,
.portal-topbar,
.settings-header,
.settings-topbar {
  background-image: none !important;
}

.app-header::before,
.app-header::after,
.portal-topbar::before,
.portal-topbar::after,
.settings-header::before,
.settings-header::after,
.settings-topbar::before,
.settings-topbar::after {
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* Shared authenticated user menu. */
.global-profile-menu {
  position: relative;
  z-index: 100;
  display: block !important;
  flex: 0 0 auto;
}

.global-profile-menu > .profile-popover {
  display: none;
}

.global-profile-menu[open] > .profile-popover {
  display: grid;
}

.portal-topbar,
.settings-topbar,
.app-header {
  overflow: visible !important;
}

.portal-actions .global-profile-menu,
.settings-topbar-actions .global-profile-menu {
  margin-left: 0;
}

:root[data-theme="dark"] .global-profile-menu > .profile-popover {
  border-color: #385873;
  color: #e7f1fa;
  background: #132941;
}

:root[data-theme="dark"] .global-profile-menu > .profile-popover a {
  border-color: #385873;
  color: #d9ecfa;
  background: #0e2033;
}

/* Text-only product identity. */
.workspace-wordmark {
  display: inline-flex;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  align-items: center;
  border: 0 !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.brand.workspace-wordmark {
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 0;
  place-items: initial;
}
.auth-card-brand.workspace-wordmark {
  margin: 0 0 18px;
  color: #eaf6ff;
  font-size: 13px;
}
:root[data-theme="light"] .auth-card-brand.workspace-wordmark {
  color: #153b5d !important;
}

/* Final page-surface contract: atmosphere remains, opaque internal header boxes do not. */
:root[data-theme="light"] body.catalog-page,
:root[data-theme="light"] body.library-page,
:root[data-theme="light"] body.diagram-editor-page,
:root[data-theme="light"] body.icon-catalog-page,
:root[data-theme="light"] body.profile-page,
:root[data-theme="light"] body:has(.portal),
:root[data-theme="light"] body:has(.settings-shell),
:root[data-theme="light"] body:has(.settings-main) {
  background: var(--diagram-atmosphere-light) !important;
  background-attachment: fixed !important;
}

:root[data-theme="dark"] body.catalog-page,
:root[data-theme="dark"] body.library-page,
:root[data-theme="dark"] body.diagram-editor-page,
:root[data-theme="dark"] body.icon-catalog-page,
:root[data-theme="dark"] body.profile-page,
:root[data-theme="dark"] body:has(.portal),
:root[data-theme="dark"] body:has(.settings-shell),
:root[data-theme="dark"] body:has(.settings-main) {
  background: var(--diagram-atmosphere-dark) !important;
  background-attachment: fixed !important;
}

.catalog-page main,
.library-page main,
.icon-catalog-page main,
.settings-main,
.settings-shell,
.settings-workspace,
.settings-content,
.portal,
.portal-content {
  background: transparent !important;
}

.app-header,
.portal-topbar,
.settings-header,
.settings-topbar {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme] body.catalog-page .app-header,
:root[data-theme] body.library-page .app-header,
:root[data-theme] body.diagram-editor-page .app-header,
:root[data-theme] body.icon-catalog-page .app-header,
:root[data-theme] body.profile-page .app-header,
:root[data-theme] body:has(.portal) .portal-topbar,
:root[data-theme] body:has(.settings-shell) .settings-header,
:root[data-theme] body:has(.settings-shell) .settings-topbar {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Final authenticated navigation surface: solid, global and theme-aware. */
:root[data-theme="light"] body .app-header.workspace-header {
  border-color: #c8dce8 !important;
  background: #f8fcff !important;
  background-image: none !important;
  box-shadow: 0 2px 12px rgba(27, 67, 98, .08) !important;
}

:root[data-theme="dark"] body .app-header.workspace-header {
  border-color: #234a68 !important;
  background: #0c2034 !important;
  background-image: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .22) !important;
}

.app-header .workspace-brand {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 38px !important;
  align-items: center;
  padding: 0 4px;
  border: 0 !important;
  color: #153b5d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  text-decoration: none;
  white-space: nowrap;
}

:root[data-theme="dark"] .app-header .workspace-brand {
  color: #f2f8ff !important;
}

.app-header .workspace-brand + .header-title {
  min-width: 165px !important;
}

/* UNIVERSAL_WORKSPACE_HEADER
   One exact navigation contract for every authenticated product surface. */
html:root[data-theme] body .app-header.workspace-header {
  position: relative !important;
  z-index: 80 !important;
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 0 max(24px, calc((100% - 1240px) / 2)) !important;
  border-width: 0 0 1px !important;
  border-style: solid !important;
  font-family: var(--font-ui) !important;
}

html:root[data-theme="light"] body .app-header.workspace-header {
  color: #132c46 !important;
  border-color: #d5e2eb !important;
  background: #f8fcff !important;
  box-shadow: 0 1px 3px rgba(15, 42, 68, .04) !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header {
  color: #eaf5fc !important;
  border-color: #274b67 !important;
  background: #0c2034 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .22) !important;
}

html:root[data-theme] body .app-header.workspace-header .workspace-brand {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  align-items: center !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #153b5d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .workspace-brand {
  color: #f2f8ff !important;
}

html:root[data-theme] body .app-header.workspace-header .header-title {
  display: flex !important;
  min-width: 230px !important;
  height: 38px !important;
  align-items: center !important;
  padding-right: 20px !important;
  border-right: 1px solid #dce6ee !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .header-title {
  border-color: #294b65 !important;
}

html:root[data-theme] body .app-header.workspace-header .header-title p {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #688096 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html:root[data-theme] body .app-header.workspace-header .header-title p > .organization-status {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 7px !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: 2px !important;
  border-radius: 50% !important;
  background: #25a56a !important;
  box-shadow: 0 0 0 2px #dff5e9 !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .header-title p > .organization-status {
  box-shadow: 0 0 0 2px #1b4a3c !important;
}

html:root[data-theme] body .app-header.workspace-header .header-title p > span:not(.organization-status) {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .header-title p {
  color: #a9c8dc !important;
}

html:root[data-theme] body .app-header.workspace-header .tool-menu {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  height: 100% !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 0 !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html:root[data-theme] body .app-header.workspace-header .tool-menu a {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
  align-items: center !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #5e748a !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  text-decoration: none !important;
}

html:root[data-theme="light"] body .app-header.workspace-header .tool-menu a:hover {
  color: #153e66 !important;
  background: #edf6fb !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .tool-menu a {
  color: #a9c8dc !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .tool-menu a:hover {
  color: #fff !important;
  background: #193a57 !important;
}

html:root[data-theme] body .app-header.workspace-header .tool-menu a.active {
  color: #105f9c !important;
  background: transparent !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .tool-menu a.active {
  color: #f2f9ff !important;
}

html:root[data-theme] body .app-header.workspace-header .tool-menu a.active::after {
  position: absolute !important;
  right: 15px !important;
  bottom: 0 !important;
  left: 15px !important;
  display: block !important;
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
  background: #1672b8 !important;
  content: "" !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .tool-menu a.active::after {
  background: #72d5ff !important;
}

html:root[data-theme] body .app-header.workspace-header .global-profile-menu {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html:root[data-theme] body .app-header.workspace-header .global-profile-menu > summary {
  box-sizing: border-box !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #cbd9e6 !important;
  color: #204668 !important;
  background: #eef4f9 !important;
}

html:root[data-theme="dark"] body .app-header.workspace-header .global-profile-menu > summary {
  border-color: #355d7b !important;
  color: #e3f4ff !important;
  background: #12334e !important;
}

html:root[data-theme] body.portal-page {
  min-height: 100vh !important;
  background: var(--diagram-atmosphere-light) !important;
  background-attachment: fixed !important;
}

html:root[data-theme="dark"] body.portal-page {
  background: var(--diagram-atmosphere-dark) !important;
  background-attachment: fixed !important;
}

html:root[data-theme] body.portal-page .portal,
html:root[data-theme] body.portal-page .portal-main,
html:root[data-theme] body.portal-page .portal-content {
  background: transparent !important;
  background-image: none !important;
}

html:root[data-theme] body.portal-page a.portal-primary {
  border-color: #176eae !important;
  color: #fff !important;
  background: #176eae !important;
  text-decoration: none !important;
}

html:root[data-theme] body.portal-page a.portal-primary:hover {
  border-color: #105d96 !important;
  color: #fff !important;
  background: #105d96 !important;
}

html:root[data-theme="dark"] body.portal-page a.portal-primary {
  border-color: #238fcd !important;
  color: #fff !important;
  background: #167fc1 !important;
}

html:root[data-theme] body.settings-page {
  min-height: 100vh !important;
  background: var(--diagram-atmosphere-light) !important;
  background-attachment: fixed !important;
}

html:root[data-theme="dark"] body.settings-page {
  background: var(--diagram-atmosphere-dark) !important;
}

@media (max-width: 980px) {
  html:root[data-theme] body .app-header.workspace-header .header-title {
    min-width: 160px !important;
  }
  html:root[data-theme] body .app-header.workspace-header .tool-menu a {
    padding: 0 9px !important;
  }
}

@media (max-width: 760px) {
  html:root[data-theme] body .app-header.workspace-header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 14px !important;
  }
  html:root[data-theme] body .app-header.workspace-header .header-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }
  html:root[data-theme] body .app-header.workspace-header .global-profile-menu {
    display: block !important;
  }
  html:root[data-theme] body .app-header.workspace-header .header-menu-button {
    display: grid !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: auto !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid #cad8e4 !important;
    border-radius: 8px !important;
    color: #204668 !important;
    background: #fff !important;
  }
  html:root[data-theme="dark"] body .app-header.workspace-header .header-menu-button {
    border-color: #355d7b !important;
    color: #e3f4ff !important;
    background: #12334e !important;
  }
  html:root[data-theme] body .app-header.workspace-header.workspace-menu-open .tool-menu {
    position: absolute !important;
    z-index: 120 !important;
    top: 100% !important;
    right: 12px !important;
    left: 12px !important;
    display: grid !important;
    height: auto !important;
    padding: 8px !important;
    border: 1px solid #c8dce8 !important;
    border-radius: 10px !important;
    background: #f8fcff !important;
    box-shadow: 0 18px 42px rgba(20, 58, 92, .2) !important;
  }
  html:root[data-theme="dark"] body .app-header.workspace-header.workspace-menu-open .tool-menu {
    border-color: #315a77 !important;
    background: #102b43 !important;
  }
  html:root[data-theme] body .app-header.workspace-header.workspace-menu-open .tool-menu a {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
  }
  html:root[data-theme] body .app-header.workspace-header.workspace-menu-open .tool-menu a.active::after {
    display: none !important;
  }
}

/* Keep the AI workspace faithful and usable below the global mobile breakpoint. */
.diagram-editor-page .ai-chat { padding: 0; }
@media (max-width: 750px) {
  .chat-prompt-examples { flex-wrap: nowrap; overflow-x: auto; }
  .chat-prompt-examples button { width: auto; }
  .diagram-editor-page .editor-panel > .ai-chat .chat-compose { grid-template-columns: 1fr; }
}

/* Preserve the panel's rounded top edge even when diagram action menus overflow it. */
.library-page .diagram-list-toolbar {
  border-radius: 14px 14px 0 0;
  background-clip: padding-box;
}

/* Icon previews select contrast automatically; this surface is never embedded in the icon. */
.icon-card-visual[data-icon-tone="dark"] { background: #f7fafc !important; }
.icon-card-visual[data-icon-tone="light"] { background: #16384f !important; }
.icon-card-visual[data-icon-tone="mixed"] { background: #f7fafc !important; }

/* Library loading/empty states belong to the list surface, not the editor iframe. */
:root[data-theme="dark"] .library-page .diagram-list-loading,
:root[data-theme="dark"] .library-page .diagram-empty {
  color: #a9c5d7;
  background: #0d263b;
}
:root[data-theme="dark"] .library-page .diagram-list-spinner {
  border-color: #31556f;
  border-top-color: #65c6f3;
}

/* Read-only identity keeps the full title and separates metadata from actions. */
.diagram-editor-page .diagram-open-preview > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 26px;
  min-height: 0;
  padding: 16px 20px;
}
.diagram-editor-page .diagram-preview-heading {
  gap: 10px;
}
.diagram-editor-page .diagram-preview-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.diagram-editor-page .diagram-preview-heading h1#diagramPreviewName {
  max-width: none;
  min-width: 0;
  overflow: visible;
  color: #f5fbff;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.diagram-preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  min-width: 0;
  gap: 6px;
  margin: 0;
}
.diagram-open-preview > header .diagram-preview-meta-item {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid #315475;
  border-radius: 7px;
  color: #b7ccdc;
  background: #0c2744;
  font: 550 10px/1.25 var(--font-ui);
}
.diagram-open-preview > header .diagram-preview-meta-item b {
  color: #75cff2;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.diagram-open-preview > header .diagram-preview-meta-item i,
.diagram-open-preview > header .diagram-preview-meta-item time {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #edf7fd;
  font-size: 10px;
  font-weight: 650;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-editor-page .diagram-preview-option-row {
  flex: 0 0 auto;
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 0;
  border-top: 0;
}
.diagram-editor-page .diagram-preview-controls {
  position: relative;
  z-index: 100;
  display: grid;
  min-width: 0;
  gap: 12px;
  justify-items: end;
  align-self: end;
}
.diagram-editor-page .diagram-preview-option-row .diagram-preview-interactive {
  color: #fff;
  background: #7041b5;
  border-color: #9870ce;
}
.diagram-editor-page .diagram-preview-option-row .diagram-preview-interactive:hover {
  color: #fff;
  background: #8050c7;
  border-color: #c4a3ec;
}
.diagram-editor-page .diagram-preview-option-row .diagram-preview-interactive:focus-visible {
  outline: 2px solid #dcc4ff;
  outline-offset: 3px;
}
.diagram-editor-page .diagram-preview-actions {
  align-self: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 510px;
}
.diagram-editor-page.diagram-preview-mode .editor-subnav-actions button:disabled {
  border-color: #d7e0e8 !important;
  color: #81909d !important;
  background: #f2f5f7 !important;
  box-shadow: none !important;
  opacity: .58;
  cursor: not-allowed !important;
}
:root[data-theme="dark"] .diagram-editor-page.diagram-preview-mode .editor-subnav-actions button:disabled {
  border-color: #314d63 !important;
  color: #718da2 !important;
  background: #102639 !important;
}
@media (max-width: 1180px) {
  .diagram-editor-page .diagram-preview-controls {
    justify-items: start;
  }
  .diagram-editor-page .diagram-preview-option-row {
    justify-self: start;
    justify-content: flex-start;
  }
  .diagram-editor-page .diagram-open-preview > header {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .diagram-editor-page .diagram-preview-actions {
    max-width: none;
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .diagram-editor-page .diagram-preview-identity {
    display: grid;
    align-items: start;
  }
  .diagram-editor-page .diagram-preview-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .diagram-editor-page .diagram-preview-heading h1#diagramPreviewName {
    max-width: none;
  }
  .diagram-editor-page .diagram-preview-option-row {
    width: 100%;
    justify-self: stretch;
  }
}
@media (max-width: 460px) {
  .diagram-editor-page .diagram-preview-meta {
    grid-template-columns: 1fr;
  }
  .diagram-editor-page .diagram-preview-actions > * {
    flex: 1 1 130px;
  }
}

/* Permission rows stay compact even under the global mobile button rule. */
.diagram-editor-page .diagram-permission-table > div:not(.diagram-history-event) {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 7px !important;
}
.diagram-editor-page .diagram-permission-table > div:not(.diagram-history-event) > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.diagram-editor-page .diagram-permission-table > div:not(.diagram-history-event) > strong {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #17689f !important;
  background: #eaf5fb;
  white-space: nowrap;
}
.diagram-editor-page .diagram-permission-table > div:not(.diagram-history-event) > button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0 9px !important;
  white-space: nowrap;
}
:root[data-theme="dark"] .diagram-editor-page .diagram-permission-table > div:not(.diagram-history-event) > strong {
  color: #a6e3ff !important;
  background: #153b55;
}

/* AI_SIDE_CHAT_PANEL
   A workspace drawer that shares the editor plane instead of covering the canvas. */
body.diagram-editor-page.ai-open .editor-panel > .editor-shell {
  width: calc(100% - 448px) !important;
  transition: width .2s ease;
}
body.diagram-editor-page.ai-open.ai-minimized .editor-panel > .editor-shell {
  width: 100% !important;
}
body.diagram-editor-page .editor-panel > .ai-chat {
  position: absolute;
  z-index: 32;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: 448px;
  max-width: calc(100vw - 292px);
  height: auto;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid #c8d8e5;
  border-radius: 0;
  color: #173a57;
  background: #fff;
  box-shadow: -14px 0 34px rgba(14, 48, 76, .16);
}
body.diagram-editor-page.ai-open .editor-panel > .ai-chat {
  display: flex;
  flex-direction: column;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px 15px;
  border-bottom: 1px solid #dbe6ef;
  background: linear-gradient(135deg, #f8fbfe, #eef6fb);
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading > div:first-child {
  min-width: 0;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading h3 {
  margin: 0;
  color: #123958;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.018em;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-usage-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid #bad7e8;
  border-radius: 999px;
  color: #26688f;
  background: #eef8fd;
  font: 800 9px/1 var(--font-ui);
  white-space: nowrap;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-usage-badge.near-limit {
  border-color: #e4c27e;
  color: #86550d;
  background: #fff6df;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading p {
  max-width: 325px;
  margin: 5px 0 0;
  color: #607a90;
  font-size: 11px;
  line-height: 1.45;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading-actions button {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid #bcd0df;
  border-radius: 8px;
  color: #345a77;
  background: #fff;
  font: 750 17px/1 var(--font-ui);
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading-actions button:hover,
body.diagram-editor-page .editor-panel > .ai-chat .ai-chat-heading-actions button:focus-visible {
  border-color: #5597c2;
  color: #0f639d;
  background: #eef8fe;
  outline: none;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-config-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 16px 0;
  background: #fff;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-agent-select {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #5e768c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-agent-select select {
  width: 100%;
  height: 37px;
  min-height: 37px;
  box-sizing: border-box;
  padding: 0 30px 0 10px;
  border: 1px solid #c7d7e4;
  border-radius: 8px;
  color: #173a57;
  background: #f9fcfe;
  font: 750 11px/1.2 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-agent-select select:focus-visible {
  border-color: #3c91c7;
  outline: 3px solid rgba(60, 145, 199, .16);
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-mode-hint {
  flex: 0 0 auto;
  margin: 8px 16px 0;
  color: #688095;
  font-size: 10px;
  line-height: 1.45;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 16px 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-bottom: 1px solid #dfe9f1;
  scrollbar-width: none;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples::-webkit-scrollbar { display: none; }
body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid #c5d9e7;
  border-radius: 999px;
  color: #2a648e;
  background: #f4f9fc;
  font: 750 10px/1.2 var(--font-ui);
  white-space: nowrap;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples button:hover,
body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples button:focus-visible {
  border-color: #65a8d3;
  color: #0e619a;
  background: #eaf6fd;
  outline: none;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-messages {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 17px 16px;
  overflow: auto;
  border: 0;
  background: #f5f9fc;
  scrollbar-gutter: stable;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-message {
  max-width: 91%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 11px 11px 11px 3px;
  font-size: 11px;
  line-height: 1.5;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-message.user {
  border-radius: 11px 11px 3px 11px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: 7px;
  padding: 13px;
  border: 1px solid #a8ccdf;
  border-left: 3px solid #1685bd;
  border-radius: 14px;
  color: #234861;
  background: linear-gradient(135deg, #fff, #f2f9fd);
  box-shadow: 0 7px 18px rgba(31, 83, 116, .09);
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card > strong {
  color: #153f5c;
  font-size: 12px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card > span,
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card > small {
  display: block;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card > small {
  color: #6b8396;
  font-size: 9px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-actions {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 7px;
  margin-top: 3px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-actions button {
  min-height: 33px;
  padding: 7px 9px;
  border-radius: 8px;
  font: 800 10px/1.2 var(--font-ui);
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-reject {
  border: 1px solid #c9d6df;
  color: #536a7b;
  background: #fff;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-approve {
  border: 1px solid #127aae;
  color: #fff;
  background: #1685bd;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-approve:hover,
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-approve:focus-visible {
  background: #0d6d9d;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-outcome {
  padding-top: 3px;
  color: #277044;
  font-size: 10px;
}
body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card.rejected .ai-review-outcome {
  color: #6a7782;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-compose {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 13px 16px 16px;
  border-top: 1px solid #dbe6ef;
  background: #fff;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-compose textarea {
  width: 100%;
  min-height: 88px;
  max-height: 180px;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid #bcd0df;
  border-radius: 10px;
  color: #173a57;
  background: #f9fcfe;
  font: 500 12px/1.5 var(--font-ui);
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-compose-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
body.diagram-editor-page .editor-panel > .ai-chat .chat-compose-actions button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
}
body.diagram-editor-page.ai-open.ai-minimized .editor-panel > .ai-chat {
  top: 12px;
  right: 12px;
  bottom: auto;
  width: 270px;
  max-width: calc(100vw - 24px);
  height: auto;
  border: 1px solid #b9cfde;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 30px rgba(14, 48, 76, .2);
}
body.diagram-editor-page .editor-panel > .ai-chat.minimized .ai-chat-heading {
  align-items: center;
  padding: 10px 10px 10px 13px;
  border-bottom: 0;
  border-radius: 15px;
}
body.diagram-editor-page .editor-panel > .ai-chat.minimized .ai-chat-heading h3 {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.diagram-editor-page .editor-panel > .ai-chat.minimized .ai-chat-heading p {
  display: none;
}
body.diagram-editor-page .editor-panel > .ai-chat.minimized .ai-usage-badge {
  display: none;
}
body.diagram-editor-page .editor-panel > .ai-chat.minimized .ai-chat-heading-actions button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 7px;
  font-size: 15px;
}

:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .chat-config-grid,
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .chat-compose {
  background: #0d2438 !important;
}
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples {
  border-color: #294b64;
  background: #0d2438;
}
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .chat-messages {
  border-color: #294b64 !important;
  background: #091d2e !important;
}
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .ai-usage-badge {
  border-color: #3d718e;
  color: #bce8ff;
  background: #123b55;
}
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card {
  border-color: #356884;
  border-left-color: #54b9e8;
  color: #d5e9f5;
  background: linear-gradient(135deg, #12334c, #0d293f);
}
:root[data-theme="dark"] body.diagram-editor-page .editor-panel > .ai-chat .ai-review-card > strong {
  color: #f0f9ff;
}

@media (max-width: 980px) {
  body.diagram-editor-page.ai-open .editor-panel > .editor-shell,
  body.diagram-editor-page.ai-open.ai-minimized .editor-panel > .editor-shell {
    width: 100% !important;
  }
  body.diagram-editor-page .editor-panel > .ai-chat {
    width: min(448px, calc(100vw - 24px));
    max-width: none;
    box-shadow: -18px 0 42px rgba(8, 33, 53, .28);
  }
}

@media (max-width: 560px) {
  body.diagram-editor-page .editor-panel > .ai-chat {
    left: 8px;
    right: 8px;
    width: auto;
  }
  body.diagram-editor-page .editor-panel > .ai-chat .chat-config-grid {
    grid-template-columns: 1fr;
  }
  body.diagram-editor-page .editor-panel > .ai-chat .chat-prompt-examples {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  body.diagram-editor-page.ai-open.ai-minimized .editor-panel > .ai-chat {
    right: 8px;
    left: auto;
  }
}

/* Account controls share one compact group on every authenticated surface. */
html:root[data-theme] body .app-header.workspace-header .workspace-account-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
html:root[data-theme] body .app-header.workspace-header .workspace-account-actions > * {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html:root[data-theme] body .app-header.workspace-header .workspace-account-actions .theme-toggle {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}
html:root[data-theme] body .app-header.workspace-header .workspace-notification-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
body.diagram-editor-page { min-width: 0; }
body.diagram-editor-page.diagram-preview-mode {
  grid-template-rows: auto minmax(0, 1fr);
}
.diagram-editor-page.diagram-preview-mode > .editor-subnav,
.diagram-editor-page > .editor-subnav[hidden] {
  display: none !important;
}
.diagram-editor-page #editorWorkspace { min-width: 0; }
@media (max-width: 760px) {
  html:root[data-theme] body .app-header.workspace-header:not(.workspace-menu-open) .tool-menu {
    display: none !important;
  }
  html:root[data-theme] body .app-header.workspace-header .workspace-account-actions { gap: 6px; }
  html:root[data-theme] body .app-header.workspace-header .profile-popover {
    position: fixed;
    top: 66px;
    right: 10px;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }
}