:root{
  /* ITMAM Brand Manual v1.4 ("AI Era 2026-2030", blue-ring identity): three neutrals
     (Ink/Paper/Slate) + one sparing accent (Royal), Outfit + IBM Plex Sans + IBM Plex Mono */
  --ink:#101322; --ink-2:#2A2E42; --ink-3:#454A5E;
  --accent:#2F4BE0; --accent-deep:#1F36AD; --accent-soft:#EAEEFC;   /* Royal — the one brand accent */
  --info:#44b0ee; --info-deep:#138dd2;                            /* secondary blue (info) */
  --canvas:#F3F4F7; --surface:#FFFFFF; --surface-2:#EEF0F6; --surface-3:#E3E6F0;
  --line:#E5E8F0; --line-2:#EEF0F7;
  --text:#101322; --muted:#6A7080; --faint:#9AA0B0;
  --ok:#17845A; --ok-bg:#E6F5EE; --warn:#B4761A; --warn-bg:#FBF2DD;
  --danger:#C23B3B; --danger-bg:#FBEAEA;
  --nafath:#006C35; --gold:#C9A961;
  --display:'Outfit','IBM Plex Sans','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --radius:16px; --radius-sm:11px; --radius-xs:5px;
  --shadow:0 1px 2px rgba(16,19,34,.05),0 6px 22px rgba(16,19,34,.07);
  --shadow-sm:0 1px 2px rgba(16,19,34,.06);
  --rail-w:236px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--text);background:var(--canvas);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
svg{display:block}
.ico{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mono{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}
::selection{background:#cfe6ff}

/* ============================================================
   IJR@ Service Management — design tokens + shell  (v0.8)
   Light working canvas · navy chrome · cyan accent · mono IDs
   Reserved: #006C35 Nafath only · #C9A961 Nitaqat only
   ============================================================ */

/* ---- app grid ---- */

.app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}

/* ---- left rail ---- */

.rail{background:var(--ink);color:#cdd9e6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}

.brand{padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.07)}

.brandmark{display:inline-flex;align-items:baseline;gap:1px;direction:ltr;unicode-bidi:isolate}

.brandmark b{font-weight:800;font-size:23px;letter-spacing:.5px;color:#fff}

.brandmark b .at{color:var(--accent)}

.brandmark .rule{display:block;height:2px;width:46px;background:var(--accent);margin-top:5px;border-radius:2px}

.brand .sub{margin-top:9px;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#7e93a8}

.layerlabel{padding:16px 20px 8px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#6f859c}

.nav{padding:0 12px;display:flex;flex-direction:column;gap:2px}

.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);color:#aebdcd;text-decoration:none;font-weight:500;font-size:13.5px;position:relative}

.nav a .ico{width:17px;height:17px;opacity:.85}

.nav a:hover{background:var(--ink-2);color:#e7eef5}

.nav a.active{background:linear-gradient(90deg,rgba(79,179,255,.16),rgba(79,179,255,.03));color:#fff}

.nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}

.nav .grp{margin:14px 12px 6px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#607589}

.rail .foot{margin-top:auto;padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#6f859c;display:flex;align-items:center;gap:8px}

.dotlive{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(79,179,255,.2)}

/* ---- main ---- */

.main{display:flex;flex-direction:column;min-width:0}

.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:11px 22px}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}

.crumb .sep{color:var(--faint)}

.crumb .here{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tenant{display:flex;align-items:center;gap:8px;margin-left:6px;padding:5px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}

.tenant b{color:var(--text);font-weight:600}

.spacer{flex:1}

.mockchip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--accent-deep);background:var(--accent-soft);border:1px solid #c7e2ff;padding:5px 11px;border-radius:999px}

.mockchip .v{font-family:var(--mono);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-sm);font-weight:600;font-size:13px;padding:9px 15px;border:1px solid transparent;transition:.12s}

.btn .ico{width:16px;height:16px}

.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}

.btn-ghost:hover{background:var(--surface-2);color:var(--text)}

.btn-primary{background:var(--ink);color:#fff}

.btn-primary:hover{background:var(--ink-3)}

.btn-primary:focus-visible{outline:3px solid rgba(79,179,255,.5);outline-offset:1px}

.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1c3a59,#0A1929);color:#cfe6ff;display:grid;place-items:center;font-weight:700;font-size:12.5px;border:1px solid rgba(255,255,255,.12)}

/* ---- workspace 3-zone ---- */

/* ---- panel area ---- */

@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px}

.b-ok{background:var(--ok-bg);color:var(--ok)}

.b-warn{background:var(--warn-bg);color:var(--warn)}

.b-proc{background:var(--accent-soft);color:var(--accent-deep)}

.b-stand{background:var(--surface-3);color:var(--muted)}

.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- form builder ---- */

/* ---- fulfillment / binding ---- */

/* lifecycle strip (standalone) */

/* ---- SLA matrix ---- */

/* approval chain */

/* visibility audience */

/* review checklist */

/* ---- preview rail ---- */

.footnote{padding:14px 28px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px;display:flex;gap:14px;flex-wrap:wrap}

.footnote .mono{color:var(--muted)}

/* ---- responsive ---- */

@media(max-width:980px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;overflow:auto}
  .rail .nav{flex-direction:row;padding:8px}.layerlabel, .brand .sub, .rail .foot, .nav .grp{display:none}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.cmgr .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.cmgr .workspace{display:grid;grid-template-columns:308px 1fr;align-items:start;flex:1;min-height:0}
.cmgr .treepane{position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.cmgr .tphead{padding:18px 18px 12px}
.cmgr .tphead h3{margin:0 0 3px;font-size:15px;font-weight:700}
.cmgr .tphead p{margin:0;font-size:11.5px;color:var(--muted)}
.cmgr .tsearch{margin:0 16px 8px;position:relative}
.cmgr .tsearch input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px 8px 32px;font-size:12.5px;font-family:inherit}
.cmgr .tsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,179,255,.18)}
.cmgr .tsearch .ico{width:15px;height:15px;position:absolute;left:10px;top:9px;color:var(--faint)}
.cmgr .tree{flex:1;overflow:auto;padding:4px 10px 10px}
.cmgr .tnode{margin-bottom:1px}
.cmgr .trow{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--radius-xs);cursor:pointer;color:var(--text);font-size:13px}
.cmgr .trow:hover{background:var(--surface-2)}
.cmgr .trow.sel{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.cmgr .trow .tw{width:15px;height:15px;color:var(--faint);transition:transform .15s;flex:0 0 auto}
.cmgr .trow.open .tw{transform:rotate(90deg)}
.cmgr .trow.sel .tw{color:var(--accent-deep)}
.cmgr .trow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmgr .trow .ct{font-family:var(--mono);font-size:10.5px;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.cmgr .trow.sel .ct{background:#fff;border-color:#cde4ff;color:var(--accent-deep)}
.cmgr .tchildren{margin-left:11px;padding-left:9px;border-left:1px dashed var(--line);display:none}
.cmgr .tchildren.open{display:block}
.cmgr .tsub .trow{font-size:12.5px;color:var(--muted)}
.cmgr .tsub .trow .nm{font-weight:500}
.cmgr .tleaf{display:flex;align-items:center;gap:8px;padding:6px 9px 6px 24px;font-size:12px;color:var(--muted);border-radius:var(--radius-xs);cursor:pointer}
.cmgr .tleaf:hover{background:var(--surface-2);color:var(--text)}
.cmgr .tleaf .d{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.cmgr .tleaf .id{margin-left:auto;font-family:var(--mono);font-size:10px;color:#a6b3c2}
.cmgr .tfoot{padding:10px 16px;border-top:1px solid var(--line-2)}
.cmgr .tfoot .btn{width:100%;justify-content:center}
.cmgr .catpane{padding:20px 26px 60px;min-width:0}
.cmgr .catchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cmgr .catchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.cmgr .catchip:hover{border-color:var(--accent)}
.cmgr .catchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cmgr .catchip .n{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--faint)}
.cmgr .catchip.on .n{background:rgba(255,255,255,.16);color:#cfe6ff}
.cmgr .catchip.add{color:var(--accent-deep);border-style:dashed}
.cmgr .cathead{display:flex;align-items:flex-start;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 20px;margin-bottom:20px}
.cmgr .cathead .cic{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.cmgr .cathead .cic .ico{width:22px;height:22px}
.cmgr .cathead h2{margin:0 0 5px;font-size:19px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}
.cmgr .cathead .sub{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted)}
.cmgr .cathead .sub b{color:var(--text);font-weight:600}
.cmgr .cathead .sub .it{display:inline-flex;align-items:center;gap:6px}
.cmgr .cathead .sub .ico{width:14px;height:14px;color:var(--faint)}
.cmgr .cathead .acts{margin-left:auto;display:flex;gap:8px;flex-direction:column;align-items:flex-end}
.cmgr .statrow{display:flex;gap:18px;margin-top:2px}
.cmgr .stat b{font-size:18px;font-weight:700;display:block;line-height:1.1}
.cmgr .stat span{font-size:11px;color:var(--faint)}
.cmgr .sec{margin-bottom:22px}
.cmgr .sech{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cmgr .sech h3{margin:0;font-size:14px;font-weight:700}
.cmgr .sech .hint{font-size:11.5px;color:var(--faint)}
.cmgr .sech .ico{width:17px;height:17px;color:var(--accent-deep)}
.cmgr .sech .r{margin-left:auto}
.cmgr .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.cmgr .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;position:relative;box-shadow:var(--shadow-sm)}
.cmgr .tile .ti{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:10px}
.cmgr .tile .ti .ico{width:18px;height:18px}
.cmgr .tile h4{margin:0 0 3px;font-size:13px;font-weight:600}
.cmgr .tile .id{font-family:var(--mono);font-size:10px;color:var(--faint)}
.cmgr .tile .star{position:absolute;top:11px;right:11px;color:var(--gold);cursor:pointer}
.cmgr .tile .star .ico{width:17px;height:17px;fill:var(--gold);stroke:var(--gold)}
.cmgr .tile.add{display:grid;place-items:center;border-style:dashed;color:var(--faint);min-height:108px;cursor:pointer}
.cmgr .tile.add .ico{width:20px;height:20px}
.cmgr .svctable{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.cmgr .svchdr, .cmgr .svcrow{display:grid;grid-template-columns:30px 1.7fr 1.1fr 96px 104px 48px 40px;align-items:center;gap:8px;padding:11px 14px}
.cmgr .svchdr{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);font-weight:700}
.cmgr .svcrow{border-bottom:1px solid var(--line-2)}
.cmgr .svcrow:last-child{border-bottom:none}
.cmgr .svcrow:hover{background:#fafcff}
.cmgr .drag{color:#c2cdda;cursor:grab}
.cmgr .drag .ico{width:16px;height:16px}
.cmgr .snm{display:flex;align-items:center;gap:10px;min-width:0}
.cmgr .snm .si{width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.cmgr .snm .si .ico{width:16px;height:16px}
.cmgr .snm .nm{min-width:0}
.cmgr .snm .nm b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmgr .snm .nm .id{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.cmgr .scat{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmgr .star2{cursor:pointer;color:#cbd5e1;display:grid;place-items:center}
.cmgr .star2 .ico{width:17px;height:17px}
.cmgr .star2.on{color:var(--gold)}
.cmgr .star2.on .ico{fill:var(--gold);stroke:var(--gold)}
.cmgr .rowact{color:var(--faint);cursor:pointer;display:grid;place-items:center}
.cmgr .rowact .ico{width:16px;height:16px}
.cmgr .note{display:flex;gap:10px;background:#f0f7ff;border:1px solid #d4e7fb;border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:#274b6d;margin-top:16px}
.cmgr .note .ico{width:17px;height:17px;color:var(--accent-deep);margin-top:1px;flex:0 0 auto}
@media(max-width:1100px){
  .cmgr .workspace{grid-template-columns:1fr}
  .cmgr .treepane{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .cmgr .tree{max-height:300px}
  .cmgr .svchdr, .cmgr .svcrow{grid-template-columns:24px 1.6fr 92px 92px 44px}
  .cmgr .scat, .cmgr .svchdr .h-cat{display:none}
}
@media(max-width:980px){
  .cmgr .cathead{flex-direction:column}.cmgr .cathead .acts{margin-left:0;align-items:flex-start;flex-direction:row}
}

#view-services .workspace{display:grid;grid-template-columns:236px 1fr 332px;gap:0;align-items:start;flex:1;min-height:0}
#view-services .steps{position:sticky;top:57px;align-self:start;padding:20px 16px;border-right:1px solid var(--line)}
#view-services .steps h4{margin:0 6px 12px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
#view-services .step{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 11px;color:var(--muted);font-weight:500;font-size:13.5px;margin-bottom:3px}
#view-services .step .num{width:21px;height:21px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
#view-services .step:hover{background:var(--surface)}
#view-services .step.active{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-sm)}
#view-services .step.active .num{background:var(--ink);border-color:var(--ink);color:#fff}
#view-services .step.done .num{background:var(--ok-bg);border-color:#bfe6d7;color:var(--ok)}
#view-services .step .st{margin-left:auto;width:7px;height:7px;border-radius:50%}
#view-services .step.attn .st{background:var(--warn)}
#view-services .panelarea{padding:24px 28px 60px;min-width:0}
#view-services .panel{display:none;animation:fade .18s ease}
#view-services .panel.is-active{display:block}
#view-services .phead{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
#view-services .phead .pn{font-family:var(--mono);font-size:12px;color:var(--accent-deep);background:var(--accent-soft);border:1px solid #cde4ff;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-weight:600}
#view-services .phead h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.2px}
#view-services .phead p{margin:3px 0 0;color:var(--muted);font-size:13px;max-width:60ch}
#view-services .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:18px}
#view-services .card>.ch{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
#view-services .card>.ch h3{margin:0;font-size:14px;font-weight:700}
#view-services .card>.ch .ico{width:17px;height:17px;color:var(--accent-deep)}
#view-services .card>.ch .tag{margin-left:auto;font-size:11px;color:var(--muted)}
#view-services .card>.cb{padding:18px}
#view-services .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#view-services .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
#view-services .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
#view-services .field:last-child{margin-bottom:0}
#view-services .field label{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
#view-services .field .req{color:var(--danger);font-weight:700}
#view-services .field .hint{font-size:11.5px;color:var(--faint);font-weight:400}
#view-services .inp, #view-services .sel, #view-services textarea.inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-xs);padding:9px 11px;font-size:13px;color:var(--text);font-family:inherit}
#view-services .inp:focus, #view-services .sel:focus, #view-services textarea.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,179,255,.18)}
#view-services .inp.mono{font-family:var(--mono);font-size:12.5px}
#view-services .inp.ro{background:var(--surface-2);color:var(--muted)}
#view-services .sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23566576' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
#view-services .chips{display:flex;flex-wrap:wrap;gap:7px}
#view-services .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
#view-services .chip.on{background:var(--accent-soft);border-color:#bcdcff;color:var(--accent-deep)}
#view-services .chip .x{color:var(--faint);font-weight:700;margin-left:2px}
#view-services .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}
#view-services .seg button{border:none;background:transparent;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--muted)}
#view-services .seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
#view-services .builder{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#view-services .palette{background:var(--surface-2);border-right:1px solid var(--line);padding:14px}
#view-services .palette h5, #view-services .props h5{margin:0 0 10px;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
#view-services .ptype{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:8px 10px;margin-bottom:7px;font-size:12.5px;font-weight:500;color:var(--text);cursor:grab}
#view-services .ptype .ico{width:15px;height:15px;color:var(--muted)}
#view-services .ptype:hover{border-color:var(--accent);color:var(--accent-deep)}
#view-services .canvas{padding:16px;background:repeating-linear-gradient(var(--surface),var(--surface) 0)}
#view-services .formrow{display:flex;flex-direction:column;gap:6px;border:1px dashed transparent;border-radius:var(--radius-xs);padding:9px;margin-bottom:8px;cursor:pointer}
#view-services .formrow:hover{background:var(--surface-2)}
#view-services .formrow.sel{border-color:var(--accent);background:var(--accent-soft)}
#view-services .formrow .fl{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
#view-services .formrow .fl .req{color:var(--danger)}
#view-services .formrow .fk{font-family:var(--mono);font-size:10.5px;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
#view-services .formrow.sel .fk{background:#fff}
#view-services .fakeinp{height:32px;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);display:flex;align-items:center;padding:0 10px;color:var(--faint);font-size:12px}
#view-services .props{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:12px}
#view-services .props .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px}
#view-services .props .pf{margin-bottom:0}
#view-services .props .pf label{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
#view-services .props .pf label.toggle{display:inline-flex;margin-bottom:0;font-size:12.5px;color:var(--text);align-self:center}
#view-services .props .pf .inp{padding:7px 9px;font-size:12px}
#view-services .toggle{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text);font-weight:500}
#view-services .tg{width:34px;height:20px;border-radius:999px;background:var(--surface-3);position:relative;transition:.15s;flex:0 0 auto}
#view-services .tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.15s}
#view-services .tg.on{background:var(--accent-deep)}
#view-services .tg.on::after{left:16px}
#view-services .tg.nf.on{background:var(--nafath)}
#view-services .fmode{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:18px}
#view-services .fmode .desc{font-size:12.5px;color:var(--muted)}
#view-services .fmode .desc b{color:var(--text)}
#view-services .modepane{display:none}
#view-services .modepane.on{display:block}
#view-services .bind{display:grid;grid-template-columns:1fr;gap:18px}
#view-services .kv{display:flex;flex-direction:column;gap:11px}
#view-services .kvrow{display:flex;align-items:center;gap:12px}
#view-services .kvrow .k{width:128px;font-size:12px;color:var(--muted);flex:0 0 auto}
#view-services .kvrow .val{font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;display:inline-flex;align-items:center;gap:7px}
#view-services .kvrow .val.accent{color:var(--accent-deep);background:var(--accent-soft);border-color:#cde4ff}
#view-services .maptable{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#view-services .maptable .mh{display:grid;grid-template-columns:1fr 44px 1fr;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:700}
#view-services .maptable .mh span{padding:9px 12px}
#view-services .maprow{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;border-bottom:1px solid var(--line-2)}
#view-services .maprow:last-child{border-bottom:none}
#view-services .maprow .src, #view-services .maprow .dst{padding:9px 12px}
#view-services .maprow .pill{font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:6px;display:inline-block}
#view-services .maprow .src .pill{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
#view-services .maprow .dst .pill{background:var(--accent-soft);border:1px solid #cde4ff;color:var(--accent-deep)}
#view-services .wire{display:grid;place-items:center;color:var(--accent)}
#view-services .wire svg{width:34px;height:18px}
#view-services .note{display:flex;gap:10px;background:#f0f7ff;border:1px solid #d4e7fb;border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:#274b6d;margin-top:14px}
#view-services .note .ico{width:17px;height:17px;color:var(--accent-deep);margin-top:1px}
#view-services .lifecycle{display:flex;align-items:stretch;gap:0;overflow:auto;padding:4px}
#view-services .lc{position:relative;background:var(--surface-2);border:1px solid var(--line);padding:11px 18px 11px 22px;font-size:12.5px;font-weight:600;color:var(--muted);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);margin-right:-10px;min-width:118px;text-align:center}
#view-services .lc:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:16px}
#view-services .lc.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
#view-services .lc small{display:block;font-weight:500;font-size:10px;opacity:.8;font-family:var(--mono)}
#view-services .matrix{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
#view-services .matrix th, #view-services .matrix td{border:1px solid var(--line-2);padding:9px 10px;text-align:center}
#view-services .matrix thead th{background:var(--surface-2);color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
#view-services .matrix tbody th{background:var(--surface-2);color:var(--muted);font-weight:600;text-align:left}
#view-services .pri{font-weight:700;border-radius:6px;padding:3px 9px;display:inline-block;font-size:11.5px}
#view-services .p1{background:var(--danger-bg);color:var(--danger)}
#view-services .p2{background:var(--warn-bg);color:var(--warn)}
#view-services .p3{background:var(--accent-soft);color:var(--accent-deep)}
#view-services .p4{background:var(--surface-3);color:var(--muted)}
#view-services .slatable{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;margin-top:14px}
#view-services .slatable th, #view-services .slatable td{padding:9px 12px;border-bottom:1px solid var(--line-2);text-align:left}
#view-services .slatable th{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint)}
#view-services .slatable td .mono{font-size:12px}
#view-services .chain{display:flex;align-items:center;gap:0;flex-wrap:wrap}
#view-services .chain .node{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:500}
#view-services .chain .node .av{width:22px;height:22px;border-radius:50%;background:var(--ink-3);color:#cfe6ff;display:grid;place-items:center;font-size:10px;font-weight:700}
#view-services .chain .arr{color:var(--faint);margin:0 8px}
#view-services .aud{display:flex;flex-direction:column;gap:10px}
#view-services .audrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
#view-services .audrow.on{border-color:var(--accent);background:var(--accent-soft)}
#view-services .audrow .radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center}
#view-services .audrow.on .radio{border-color:var(--accent-deep)}
#view-services .audrow.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-deep)}
#view-services .audrow .t b{font-size:13px}
#view-services .audrow .t span{display:block;font-size:11.5px;color:var(--muted)}
#view-services .nafrow{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #b9dcc7;border-radius:var(--radius-sm);background:#eef7f1}
#view-services .nafrow .shield{width:30px;height:30px;border-radius:8px;background:var(--nafath);color:#fff;display:grid;place-items:center;flex:0 0 auto}
#view-services .nafrow .shield .ico{width:17px;height:17px}
#view-services .nafrow b{color:#0a4d27;font-size:13px}
#view-services .nafrow span{display:block;font-size:11.5px;color:#3a6b4d}
#view-services .check{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--surface)}
#view-services .check .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
#view-services .check.ok .ic{background:var(--ok-bg);color:var(--ok)}
#view-services .check.attn .ic{background:var(--warn-bg);color:var(--warn)}
#view-services .check .ic .ico{width:14px;height:14px}
#view-services .check .t b{font-size:13px}
#view-services .check .t span{display:block;font-size:11.5px;color:var(--muted)}
#view-services .check .go{margin-left:auto;font-size:12px;color:var(--accent-deep);font-weight:600;text-decoration:none}
#view-services .preview{position:sticky;top:57px;align-self:start;border-left:1px solid var(--line);background:var(--surface-2);padding:20px 18px;min-height:calc(100vh - 57px)}
#view-services .preview h4{margin:0 0 4px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
#view-services .preview .ph{font-size:11.5px;color:var(--muted);margin:0 0 14px}
#view-services .svccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
#view-services .svccard .top{height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-deep))}
#view-services .svccard .bd{padding:16px}
#view-services .svccard .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:12px}
#view-services .svccard .ic .ico{width:22px;height:22px}
#view-services .svccard h5{margin:0 0 5px;font-size:15px;font-weight:700}
#view-services .svccard p{margin:0 0 12px;font-size:12px;color:var(--muted);line-height:1.45}
#view-services .svccard .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
#view-services .svccard .req-btn{width:100%;background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
#view-services .exp{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
#view-services .exp h6{margin:0 0 10px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
#view-services .exp .er{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:5px 0;color:var(--text)}
#view-services .exp .er .ico{width:15px;height:15px;color:var(--muted)}
#view-services .exp .er .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
#view-services .pubrow{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
@media(max-width:1240px){
  #view-services .workspace{grid-template-columns:212px 1fr}
  #view-services .preview{display:none}
  #view-services .bind{grid-template-columns:1fr}
}
@media(max-width:980px){
  #view-services .workspace{grid-template-columns:1fr}#view-services .steps{position:static;border-right:none;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow:auto;padding:12px}
  #view-services .step{width:auto;white-space:nowrap}#view-services .builder{grid-template-columns:1fr}
  #view-services .grid2, #view-services .grid3{grid-template-columns:1fr}
}
/* ============================================================
   (build notes)
   (Console · Portals · Categories detail · view switching)
   ============================================================ */
/* view switching */
.view{display:none;animation:vfade .18s ease}
.view.on{display:block}
@keyframes vfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* per-view header band */
.viewhdr{display:flex;align-items:flex-end;gap:16px;padding:20px 26px 0;max-width:1500px;margin:0 auto}
.viewhdr .vh-t{flex:1;min-width:0}
.viewhdr h1{margin:0;font-size:21px;font-weight:500;letter-spacing:0;color:var(--accent-deep)}
.viewhdr .vh-sub{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.viewhdr .vh-acts{display:flex;gap:9px;flex-shrink:0}
.viewhdr .badge{margin-left:9px;transform:translateY(-2px)}

/* generic section card reused by new views */
.nv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.nv-card>.h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.nv-card>.h .ico{width:16px;height:16px;color:var(--accent-deep)}
.nv-card>.h h3{margin:0;font-size:13.5px;font-weight:650;color:var(--ink)}
.nv-card>.h .tag{margin-left:auto;font:600 10.5px/1 var(--sans);letter-spacing:.4px;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:5px 9px;border-radius:20px}
.nv-card>.b{padding:16px}

/* ---------- CONSOLE ---------- */
#view-console .wrap{max-width:1500px;margin:0 auto;padding:18px 26px 40px}
.cs-topo{background:linear-gradient(180deg,#0A1929,#0d2236);border:1px solid #16314c;border-radius:14px;padding:26px 22px 30px;color:#cfe0f0;position:relative;overflow:hidden}
.cs-topo .tlbl{font:600 10.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#7fd0ff;margin-bottom:18px}
.cs-portals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-pnode{background:#0f2841;border:1px solid #24496c;border-radius:11px;padding:13px 14px;position:relative}
.cs-pnode .pn-aud{font:600 10px/1 var(--sans);letter-spacing:.6px;text-transform:uppercase;color:#6fb6ee}
.cs-pnode h4{margin:6px 0 4px;font-size:14px;color:#eaf4ff;font-weight:650}
.cs-pnode .pn-url{font:500 11px/1.3 var(--mono);color:#86a7c6;word-break:break-all}
.cs-pnode .pn-foot{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:#9fb6cc}
.cs-pnode .pn-foot .sc{margin-left:auto;color:#cfe0f0}
.cs-mnode{border-color:#2f6a5e;background:#0f2b2a}
.cs-pnode .pn-aud .pn-mi{width:12px;height:12px;display:inline-block;vertical-align:-2px;margin-right:4px;color:#7fe0c8}
.cs-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.cs-dot.live{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.cs-dot.draft{background:#e0a23b;box-shadow:0 0 0 3px rgba(224,162,59,.18)}
.cs-bus{height:34px;position:relative;margin:2px 0}
.cs-bus svg{position:absolute;inset:0;width:100%;height:100%}
.cs-api{display:flex;align-items:center;justify-content:center;gap:10px;background:#0c1f33;border:1px dashed #2c5378;border-radius:9px;padding:10px 14px;color:#bfe0ff;font-size:12.5px;font-weight:600}
.cs-api .ico{width:15px;height:15px;color:#7fd0ff}
.cs-api code{font:600 11.5px/1 var(--mono);color:#7fd0ff;background:#0a1a2b;padding:3px 7px;border-radius:5px}
.cs-core{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cs-core .b{border-radius:10px;padding:13px 15px}
.cs-core .b.sm{background:#102a44;border:1px solid #2a567c}
.cs-core .b.en{background:#0c2036;border:1px solid #213f5c}
.cs-core .b .k{font:600 10px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:#6fb6ee}
.cs-core .b h4{margin:6px 0 3px;font-size:14px;color:#eaf4ff}
.cs-core .b p{margin:0;font-size:11.5px;color:#9fb6cc;line-height:1.45}
.cs-down{display:block;text-align:center;color:#3c6286;font-size:16px;line-height:1;margin:7px 0}

.cs-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.cs-stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 15px;box-shadow:var(--shadow-sm)}
.cs-stat .v{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.5px}
.cs-stat .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.cs-stat .sub{font-size:10.5px;color:var(--faint);margin-top:7px}
.cs-stat .bar{height:5px;border-radius:3px;background:var(--surface-3);margin-top:8px;overflow:hidden;display:flex}
.cs-stat .bar i{height:100%;display:block}

.cs-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.cs-q{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:15px;cursor:pointer;transition:.15s;box-shadow:var(--shadow-sm)}
.cs-q:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.cs-q .qi{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.cs-q .qi .ico{width:17px;height:17px;color:var(--accent-deep)}
.cs-q h4{margin:0;font-size:13.5px;color:var(--ink)}
.cs-q p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.4}
.cs-q .go{margin-top:auto;font-size:11.5px;font-weight:600;color:var(--accent-deep);display:flex;align-items:center;gap:5px}
.cs-q .go .ico{width:13px;height:13px}

/* ---------- PORTALS ---------- */
#view-portals .wrap{max-width:1500px;margin:0 auto;padding:18px 26px 40px}
.pt-sel{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.pt-card{flex:1;min-width:240px;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.15s;position:relative}
.pt-card:hover{border-color:var(--accent)}
.pt-card.on{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}
.pt-card .pc-top{display:flex;align-items:center;gap:9px}
.pt-card .pc-ic{width:30px;height:30px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.pt-card .pc-ic .ico{width:16px;height:16px;color:var(--accent)}
.pt-card h4{margin:0;font-size:13.5px;color:var(--ink)}
.pt-card .pc-aud{font:600 9.5px/1 var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pt-card .pc-id{font:500 10.5px/1 var(--mono);color:var(--faint);margin-top:9px}
.pt-card .pc-st{position:absolute;top:13px;right:13px}
.pt-card.add{display:flex;align-items:center;justify-content:center;gap:8px;border-style:dashed;color:var(--accent-deep);font-weight:600;font-size:13px;flex:0 0 190px;min-width:0}
.pt-card.add .ico{width:16px;height:16px}

.pt-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.pt-col{display:flex;flex-direction:column;gap:16px}
.pt-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.pt-row:last-child{border-bottom:none}
.pt-row .k{width:140px;flex-shrink:0;font-size:12px;color:var(--muted)}
.pt-row .val{font-size:12.5px;color:var(--ink);font-weight:500}
.pt-row .val.mono{font-family:var(--mono);font-size:11.5px}
.pt-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font:500 11.5px/1 var(--mono);color:var(--ink-3)}
.pt-secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-secret .sv{font-family:var(--mono);font-size:11.5px;letter-spacing:1px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;min-width:140px}
.pt-mini{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer}
.pt-mini:hover{border-color:var(--accent);color:var(--accent-deep)}
.pt-mini .ico{width:12px;height:12px}
.pt-origins{display:flex;gap:7px;flex-wrap:wrap}
.pt-org{font:500 11px/1 var(--mono);background:var(--accent-soft);color:var(--accent-deep);border-radius:6px;padding:5px 9px}

/* end-user auth options */
.pt-auth{display:flex;flex-direction:column;gap:9px}
.pt-opt{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.12s}
.pt-opt:hover{border-color:var(--accent)}
.pt-opt .radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative}
.pt-opt.on{border-color:var(--accent-deep);background:var(--accent-soft)}
.pt-opt.on .radio{border-color:var(--accent-deep)}
.pt-opt.on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent-deep)}
.pt-opt.on.naf{border-color:var(--nafath);background:#E8F5EC}
.pt-opt.on.naf .radio{border-color:var(--nafath)}
.pt-opt.on.naf .radio::after{background:var(--nafath)}
.pt-opt .ax{flex:1}
.pt-opt .ax b{display:block;font-size:13px;color:var(--ink)}
.pt-opt .ax span{font-size:11.5px;color:var(--muted)}
.pt-opt .naf-badge{font:600 10px/1 var(--sans);letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--nafath);padding:5px 8px;border-radius:6px}

/* service exposure */
.pt-exp{display:flex;flex-direction:column}
.pt-exprow{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line-2)}
.pt-exprow:last-child{border-bottom:none}
.pt-exprow .ei{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.pt-exprow .ei .ico{width:15px;height:15px;color:var(--accent-deep)}
.pt-exprow .et{flex:1}
.pt-exprow .et b{display:block;font-size:13px;color:var(--ink)}
.pt-exprow .et span{font-size:11px;color:var(--muted)}
.pt-tg{width:38px;height:21px;border-radius:13px;background:var(--surface-3);position:relative;cursor:pointer;flex-shrink:0;transition:.16s}
.pt-tg::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.16s}
.pt-tg.on{background:var(--accent-deep)}
.pt-tg.on::after{left:19px}

.pt-health{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pt-h{background:var(--surface-2);border-radius:9px;padding:11px 12px}
.pt-h .hk{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.pt-h .hv{font-size:14px;color:var(--ink);font-weight:650;margin-top:4px;display:flex;align-items:center;gap:6px}

/* ---------- CATEGORIES detail ---------- */
#view-categories .catdetail{min-width:0}
.cd-head{display:flex;align-items:center;gap:13px;padding:4px 2px 16px}
.cd-head .cd-ic{width:46px;height:46px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.cd-head .cd-ic .ico{width:23px;height:23px;color:var(--accent)}
.cd-head h2{margin:0;font-size:19px;color:var(--ink);letter-spacing:-.2px}
.cd-head .cd-id{font:500 11.5px/1 var(--mono);color:var(--faint);margin-top:4px}
.cd-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.cd-f{display:flex;flex-direction:column;gap:6px}
.cd-f label{font-size:11.5px;font-weight:600;color:var(--muted)}
.cd-f .inp{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);display:flex;align-items:center}
.cd-f .inp.mono{font-family:var(--mono);font-size:12px}
.cd-sub h3{font-size:13px;margin:0 0 10px;color:var(--ink)}
.cd-srv{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;margin-bottom:8px;background:var(--surface)}
.cd-srv .si{width:28px;height:28px;border-radius:7px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.cd-srv .si .ico{width:14px;height:14px;color:var(--ink-3)}
.cd-srv .sn{flex:1}
.cd-srv .sn b{font-size:13px;color:var(--ink)}
.cd-srv .sn .id{font:500 10.5px/1 var(--mono);color:var(--faint);margin-left:8px}

/* ---------- STUB views ---------- */
.stub{max-width:760px;margin:30px auto;padding:0 26px}
.stub .nv-card>.b{padding:22px}
.stub .srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink)}
.stub .srow:last-child{border-bottom:none}
.stub .srow .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:auto}
.stub .lead{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 16px}

/* responsive */
@media(max-width:1180px){
  .pt-grid{grid-template-columns:1fr}
  .cd-fields{grid-template-columns:1fr}
}
@media(max-width:980px){
  .cs-portals,.cs-stats,.cs-quick{grid-template-columns:1fr 1fr}
  .cs-core{grid-template-columns:1fr}
}

/* fix: keep portal-card title clear of the status badge */
.pt-card .pc-top>div{padding-right:52px;min-width:0}
.pt-card.add .pc-top>div{padding-right:0}

/* portal selector: bottom status row (replaces absolute badge) */
.pt-card .pc-top>div{padding-right:0}
.pt-card .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px}
.pt-card .pc-foot .pc-id{margin-top:0}
.pt-card .pc-foot .pc-st{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--sans);color:var(--muted)}
.pt-card .pc-st{position:static}

/* ============================================================
   (build notes)
   ============================================================ */
/* small self-contained toggle (used in tables/steps/schema/ops) */
.tgs{width:34px;height:19px;border-radius:12px;background:var(--surface-3);position:relative;cursor:pointer;display:inline-block;vertical-align:middle;transition:.15s;flex-shrink:0}
.tgs::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.15s}
.tgs.on{background:var(--accent-deep)}
.tgs.on::after{left:17px}
.addbtn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;border:1px dashed var(--line);background:var(--surface);border-radius:8px;padding:8px 13px;font:600 12px/1 var(--sans);color:var(--accent-deep);cursor:pointer}
.addbtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.addbtn .ico{width:13px;height:13px}
.cardlede{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}

/* variables / schema table */
.vtbl{width:100%;border-collapse:collapse;font-size:12.5px}
.vtbl th{text-align:left;font:600 10.5px/1 var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:0 10px 9px;border-bottom:1px solid var(--line)}
.vtbl td{padding:9px 10px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.vtbl tr:last-child td{border-bottom:none}
.vtbl td.muted,.vtbl .muted{color:var(--faint)}
.vtbl .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* Service Designer scoped extras */
#view-services .cardlede{color:var(--muted)}
#view-services .chip.sm{padding:5px 9px;font-size:11px}
#view-services .chip.add{border-style:dashed;color:var(--accent-deep);background:var(--surface)}
#view-services .msel{gap:8px}
#view-services .pill.node{background:var(--ink);color:#dCEbFa;font-family:var(--mono);font-size:10.5px}
#view-services .mileh .dst{justify-content:flex-start}
#view-services .impbar{display:flex;align-items:center;gap:9px;margin-bottom:11px}
#view-services .impbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--accent-deep);background:var(--accent-soft);color:var(--accent-deep);border-radius:8px;padding:8px 12px;font:600 12px/1 var(--sans);cursor:pointer}
#view-services .impbtn:hover{background:#dCebFb}
#view-services .impbtn .ico{width:13px;height:13px}
#view-services .imphint{font-size:11px;color:var(--faint)}
#view-services .impchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:4px}
#view-services .muted2{font-size:11px;color:var(--muted);font-weight:600}
#view-services .steplist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
#view-services .steprow{display:flex;align-items:center;gap:11px;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;background:var(--surface)}
#view-services .steprow .drag{width:14px;height:14px;color:var(--faint);cursor:grab}
#view-services .steprow .sidx{width:20px;height:20px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--mono);color:var(--muted)}
#view-services .steprow .smain{flex:1;min-width:0}
#view-services .steprow .smain b{display:block;font-size:12.5px;color:var(--ink)}
#view-services .steprow .smain span{font-size:11px;color:var(--muted)}
#view-services .toggle.mini{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:0}

/* ---------- DATA RECORDS ---------- */
#view-datarecords .wrap{max-width:1500px;margin:0 auto;padding:18px 26px 40px}
.dr-srcdot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dr-srcdot.db{background:var(--accent-deep)}
.dr-srcdot.api{background:#7a5af0}
.drseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.drseg button{border:none;background:transparent;font:600 12.5px/1 var(--sans);color:var(--muted);padding:8px 16px;border-radius:7px;cursor:pointer}
.drseg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.drpane{display:none}
.drpane.on{display:block}
.drprov{margin-top:12px;border-radius:9px;padding:11px 13px;font-size:12.5px;display:flex;align-items:flex-start;gap:9px;line-height:1.45}
.drprov.exists{background:var(--ok-bg);color:#0a6b52}
.drprov.create{background:#EEF3FF;color:#244e9c;border:1px dashed #9db9ec}
.drprov .ico{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.drlbl{font:600 10.5px/1 var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin:16px 0 9px}
.drops{display:flex;flex-direction:column;gap:8px}
.drop{display:flex;align-items:center;gap:11px;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;background:var(--surface)}
.drop .verb{font:700 10px/1 var(--mono);letter-spacing:.5px;padding:5px 8px;border-radius:6px;flex-shrink:0;width:52px;text-align:center}
.verb.get{background:#E3F4EE;color:#0a6b52}
.verb.post{background:#E8F0FF;color:#244e9c}
.verb.put{background:#FBF0DD;color:#8a5200}
.verb.del{background:#FBE9E7;color:#a4291b}
.drop .opn{flex:1;min-width:0}
.drop .opn b{display:block;font-size:12.5px;color:var(--ink)}
.drop .opn .path{font:500 11px/1.3 var(--mono);color:var(--muted);word-break:break-all}
.drop .otest{font-size:10.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;flex-shrink:0}
.drop .otest:hover{border-color:var(--accent);color:var(--accent-deep)}
.druse{display:flex;flex-direction:column;gap:8px}
.druserow{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line-2)}
.druserow:last-child{border-bottom:none}
.druserow .ico{width:14px;height:14px;color:var(--accent-deep)}
.druserow .rk{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--faint)}

/* ---------- PORTAL SECTIONS ---------- */
.secmap{display:flex;flex-direction:column;gap:9px}
.secrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;background:var(--surface)}
.secrow .si{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.secrow .si .ico{width:16px;height:16px;color:var(--accent-deep)}
.secrow .sn{min-width:150px}
.secrow .sn b{display:block;font-size:13px;color:var(--ink)}
.secrow .sn span{font-size:11px;color:var(--muted)}
.secrow .swire{color:var(--accent);flex-shrink:0}
.secrow .swire svg{width:30px;height:14px;display:block}
.secrow .sbind{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.secrow .srctag{font:600 9.5px/1 var(--sans);letter-spacing:.5px;text-transform:uppercase;padding:5px 8px;border-radius:6px}
.srctag.cat{background:#E8F0FF;color:#244e9c}
.srctag.tax{background:#E3F4EE;color:#0a6b52}
.srctag.rec{background:#F0EBFF;color:#5b3fc0}
.srctag.eng{background:#FBF0DD;color:#8a5200}
.secrow .sbind .nm{font-size:12.5px;color:var(--ink);font-weight:500}
.secrow .stg{margin-left:auto}
@media(max-width:980px){
  #view-datarecords .pt-grid{grid-template-columns:1fr}
  .secrow{flex-wrap:wrap}
}

/* ============================================================
   (build notes)
   matrix · approvals · group authorization
   ============================================================ */
/* ---------- multi-level tree ---------- */
.tree2{font-size:12.5px}
.t2row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer}
.t2row:hover{background:var(--surface-2)}
.t2row.sel{background:var(--accent-soft)}
.t2chev{width:13px;height:13px;color:var(--faint);flex-shrink:0;transition:transform .15s}
.t2row.open>.t2chev{transform:rotate(90deg)}
.t2chev.nochev{visibility:hidden}
.t2nm{flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t2row.sel .t2nm{color:var(--accent-deep);font-weight:600}
.t2ct{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:2px 8px;flex-shrink:0}
.t2row.sel .t2ct{background:#d4e7fb}
.t2dot{width:5px;height:5px;border-radius:50%;background:var(--faint);flex-shrink:0;margin-left:2px}
.t2row.leaf .t2nm{color:var(--muted);font-weight:400}
.t2row.leaf:hover .t2nm{color:var(--accent-deep)}
.t2id{font:500 10px/1 var(--mono);color:var(--faint);flex-shrink:0}
.t2kids{display:none}
.t2kids.open{display:block}

/* ---------- shared group chips ---------- */
.grps{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.grp{font:600 11px/1 var(--sans);background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);border-radius:20px;padding:6px 11px;white-space:nowrap}
.grp.gl{background:var(--accent-soft);color:var(--accent-deep);border-color:#cfe6ff}
.grp.none{color:var(--faint);background:transparent;border-style:dashed}
.chip.add.sm{padding:5px 10px;font-size:11px;border:1px dashed var(--line);background:var(--surface);color:var(--accent-deep);border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.chip.add.sm:hover{border-color:var(--accent);background:var(--accent-soft)}
.cglbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.cglbl .ico{width:14px;height:14px;color:var(--accent-deep)}
.cginh{font-size:11px;color:var(--faint);font-style:italic;margin-left:2px}

/* catalogue + category group bars (cmgr views) */
.catgroups{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.cd-vis{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 2px 18px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}

/* ---------- Service Designer: milestone update flow ---------- */
#view-services .upflow{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-bottom:14px}
#view-services .uf{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
#view-services .uf>.ico{width:18px;height:18px;color:var(--accent-deep);flex-shrink:0}
#view-services .uf b{display:block;font-size:12px;color:var(--ink)}
#view-services .uf span{font-size:10.5px;color:var(--muted)}
#view-services .ufa{width:16px;height:16px;color:var(--faint);flex-shrink:0}
/* milestone rows */
#view-services .mileh .mh{display:flex;align-items:center;gap:10px}
#view-services .mileh .mh span:nth-child(1){flex:0 0 142px}
#view-services .mileh .mh span:nth-child(2){flex:1}
#view-services .mileh .mh span:nth-child(3){flex:0 0 96px;text-align:right}
#view-services .milerow{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line-2)}
#view-services .milerow:last-child{border-bottom:none}
#view-services .milerow>.pill:first-child{flex:0 0 132px}
#view-services .milerow .wire{flex:0 0 34px;color:var(--accent)}
#view-services .milerow .node{flex:1}
#view-services .trig{flex:0 0 auto;margin-left:auto;font:600 10px/1 var(--sans);padding:5px 8px;border-radius:6px;white-space:nowrap}
#view-services .trig.enter{background:#E8F0FF;color:#244e9c}
#view-services .trig.done{background:#E3F4EE;color:#0a6b52}

/* ---------- priority matrix clarity ---------- */
#view-services .pri.cell{cursor:pointer}
#view-services .pri.cell:hover{outline:2px solid var(--accent);outline-offset:1px}
#view-services .matnote{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);margin-top:10px}
#view-services .matnote .ico{width:13px;height:13px;color:var(--accent-deep);flex-shrink:0}

/* ---------- approvals ---------- */
#view-services .apvlist{display:flex;flex-direction:column;gap:8px;margin:14px 0}
#view-services .apvrow{display:flex;align-items:center;gap:11px;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
#view-services .apvtag{font:700 9.5px/1 var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);padding:5px 8px;border-radius:6px;flex-shrink:0}
#view-services .apvmain{flex:1;min-width:0}
#view-services .apvmain b{display:block;font-size:13px;color:var(--ink)}
#view-services .apvmain span{font-size:11px;color:var(--muted)}
#view-services .apvchain{margin-top:8px}
#view-services .chain .node.opt{border-style:dashed;opacity:.85}

/* ---------- visibility: group inheritance ---------- */
#view-services .inh{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
#view-services .inhrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;background:var(--surface-2)}
#view-services .inhcat{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);flex:0 0 200px}
#view-services .inhcat .ico{width:14px;height:14px;color:var(--accent-deep)}
#view-services .inha{width:14px;height:14px;color:var(--faint);flex-shrink:0}

/* ---------- portal authorization ---------- */
.azseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.azseg button{border:none;background:transparent;font:600 12.5px/1 var(--sans);color:var(--muted);padding:8px 14px;border-radius:7px;cursor:pointer}
.azseg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.azpane{display:none}
.azpane.on{display:block}
.azp{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.azlbl{font:600 10.5px/1 var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:14px 0 9px}
.azmap{display:flex;flex-direction:column;gap:8px}
.azrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px}
.azrow .pg{font-family:var(--mono);font-size:11px;color:var(--muted);flex:1;min-width:0}
.azrow>.ico{width:13px;height:13px;color:var(--faint);flex-shrink:0}

/* ---------- settings groups ---------- */
.grouplist{display:flex;flex-direction:column;gap:2px;margin:12px 0}
.grow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.grow:last-child{border-bottom:none}
.gdesc{font-size:12.5px;color:var(--muted);flex:1}
.gcount{font:500 11px/1 var(--mono);color:var(--faint)}

/* ============================================================
   (build notes)
   connection statement · live buttons (toast)
   ============================================================ */
/* ---------- services list ---------- */
.svctools{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.svcsearch{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 12px}
.svcsearch>.ico{width:15px;height:15px;color:var(--faint)}
.svcsearch input{border:none;outline:none;background:none;padding:10px 0;font:400 13px var(--sans);color:var(--ink);width:100%}
.svcfilters{display:flex;gap:7px}
.fchip{font:600 12px var(--sans);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fchip.on{background:var(--accent-soft);color:var(--accent-deep);border-color:#cfe6ff}
.fct{font-size:10.5px;opacity:.7}
.svctbl{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#view-services .svchead,#view-services .svcrow{display:grid;grid-template-columns:2.4fr 2.2fr 1.15fr 1.7fr 1fr 26px;gap:14px;align-items:center;padding:13px 18px}
.svchead{font:600 10.5px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
#view-services .svcrow{border-bottom:1px solid var(--line-2);cursor:pointer;transition:.1s}
#view-services .svcrow:last-child{border-bottom:none}
#view-services .svcrow:hover{background:var(--accent-soft)}
.sc-main{display:flex;align-items:center;gap:11px;min-width:0}
.sc-ic{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-ic .ico{width:17px;height:17px;color:var(--accent-deep)}
.sc-main b{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-id{font:500 10.5px var(--mono);color:var(--faint)}
.sc-cat{font-size:12px;color:var(--muted)}
.sc-vis .grps{gap:5px}
.sc-vis .grp{padding:4px 8px;font-size:10px}
.sc-chev{width:14px;height:14px;color:var(--faint);justify-self:end}
#view-services .svcrow:hover .sc-chev{color:var(--accent-deep)}
.svcempty{padding:30px;text-align:center;color:var(--faint);font-size:13px}
.backlink{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--accent-deep);font:600 12px var(--sans);cursor:pointer;padding:0;margin-bottom:7px}
.backlink .ico{width:13px;height:13px;transform:rotate(180deg)}
.b-ok{background:var(--ok-bg);color:#0a6b52}
.newrow{background:var(--accent-soft)!important}

/* ---------- data fabric ---------- */
.drmode{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.drmode button{border:none;background:transparent;font:600 12.5px var(--sans);color:var(--muted);padding:8px 16px;border-radius:7px;cursor:pointer}
.drmode button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.fabricwrap{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:6px}
.fabric{width:100%;height:auto;display:block}
.fedge{fill:none;stroke:#9cc7ee;stroke-width:1.6}
.fcard{fill:var(--muted);font:600 11px var(--sans)}
.fnode rect{fill:#fff;stroke:var(--line);stroke-width:1.4;cursor:pointer;transition:.12s}
.fnode:hover rect{stroke:var(--accent)}
.fnode.master rect{stroke:var(--accent-deep)}
.fn-t{fill:var(--ink);font:700 13px var(--sans);text-anchor:middle;pointer-events:none}
.fn-k{fill:var(--faint);font:500 10px var(--mono);text-anchor:middle;pointer-events:none}
.fn-dot.m{fill:var(--accent-deep);background:var(--accent-deep)}
.fn-dot.d{fill:var(--faint);background:var(--faint)}
.fableg{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:11.5px;color:var(--muted)}
.fableg>span{display:inline-flex;align-items:center;gap:7px}
.fableg .fn-dot{width:8px;height:8px;border-radius:50%}
.fledg{width:18px;border-top:2px solid #9cc7ee;display:inline-block}
.fabhint{margin-left:auto;color:var(--faint);font-style:italic}

/* ---------- relationships ---------- */
.rels{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.relrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;font-size:12.5px}
.relb{font:700 9.5px var(--sans);letter-spacing:.4px;text-transform:uppercase;padding:5px 8px;border-radius:6px;flex-shrink:0}
.relb.rm{background:#E8F0FF;color:#244e9c}
.relb.rd{background:#E3F4EE;color:#0a6b52}
.relb.rs{background:#F0EBFF;color:#5b3fc0}
.rela{color:var(--faint);font-weight:700}
.reltgt{color:var(--accent-deep);font-weight:600;cursor:pointer;text-decoration:none}
.reltgt:hover{text-decoration:underline}
.relcard{font:600 10.5px var(--mono);color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:3px 7px}
.relkey{font-size:11px;color:var(--muted);margin-left:auto}

/* ---------- connection statement ---------- */
.connstmt{font:500 11.5px/1.55 var(--mono);color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;word-break:break-all}
.connmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.connmeta .cm{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:5px 9px}

/* ---------- toast + button feedback ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;font:600 12.5px var(--sans);padding:11px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(10,25,41,.3);opacity:0;pointer-events:none;transition:.2s;z-index:9999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.otest.ok{border-color:#bfe6d6!important;color:#0a6b52!important;background:var(--ok-bg)}
.grp.new,.chip.new{opacity:.65;border-style:dashed}
@media(max-width:980px){
  #view-services .svchead,#view-services .svcrow{grid-template-columns:2fr 1.4fr 1fr 26px}
  .svchead span:nth-child(4),.svchead span:nth-child(5),.sc-vis,.sc-st{display:none}
}

/* data-records category chips container (chips flex is scoped to #view-services) */
#drCat{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#drCat .chip{display:inline-flex;align-items:center;gap:5px}

/* ============================================================
   (build notes)
   channels · mobile app · priority levels · clearer relations
   ============================================================ */
/* ---------- service version chip + menu ---------- */
.verwrap{position:relative}
.verchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:600 12px var(--sans);color:var(--ink);cursor:pointer}
.verchip:hover{border-color:var(--accent)}
.verchip .vdot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.vermenu{position:absolute;top:calc(100% + 6px);right:0;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 32px rgba(10,25,41,.16);padding:8px;z-index:60;display:none}
.vermenu.open{display:block}
.verlbl{font:700 10px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:6px 8px}
.verrow{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;cursor:pointer;font-size:12.5px}
.verrow:hover{background:var(--surface-2)}
.verrow.on{background:var(--accent-soft)}
.verrow b{font-family:var(--mono);font-size:12px;width:34px}
.vtag{font:600 9.5px var(--sans);text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--muted)}
.vtag.draft{background:#FFF3DF;color:#9a5a00}
.vtag.live{background:var(--ok-bg);color:#0a6b52}
.vmeta{font-size:11px;color:var(--faint);margin-left:auto}
.verfoot{display:flex;gap:8px;padding:8px 6px 4px;border-top:1px solid var(--line-2);margin-top:6px}
.btn-sm{padding:6px 10px!important;font-size:11.5px!important}
.sc-ver{font:600 9.5px var(--sans);background:var(--surface-2);color:var(--muted);border-radius:5px;padding:2px 6px;margin-left:4px;letter-spacing:.3px}

/* ---------- content multi-tabs ---------- */
.ctabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.ctab{border:none;background:none;font:600 12.5px var(--sans);color:var(--muted);padding:10px 13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
.ctab:hover{color:var(--ink)}
.ctab.on{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.ctab.addtab{color:var(--accent-deep);font-weight:500}
.ctpane{display:none}
.ctpane.on{display:block}
.rttool{display:flex;gap:2px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:6px;background:var(--surface-2)}
.rttool button{width:30px;height:28px;border:none;background:none;border-radius:6px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.rttool button:hover{background:var(--surface);color:var(--ink)}
.rttool .ico{width:14px;height:14px}
.rtbox{border:1px solid var(--line);border-radius:0 0 8px 8px;padding:14px;min-height:120px;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.rtbox:focus{outline:none;border-color:var(--accent)}
.rtbox p{margin:0 0 10px}
.ctpane>.rtbox{border-radius:8px}
.clist{margin:10px 0 0;padding-left:20px}
.clist li{padding:7px 0;font-size:13px;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.clist li:focus{outline:none;color:var(--ink)}
.docrows,.faqrows{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.docrow{display:flex;align-items:center;gap:10px}
.docrow>.ico{width:16px;height:16px;color:var(--accent-deep);flex-shrink:0}
.docrow .inp{flex:1}
.dlbl{font:600 11px var(--sans);color:var(--muted);width:62px}
.faqrow{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);border-radius:9px;padding:11px}
.faqq{font-weight:600}

/* ---------- service API panel ---------- */
.apiops{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.apiop{border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
.op-h{display:flex;align-items:center;gap:9px}
.op-sub{font-size:11.5px;color:var(--muted);margin-top:6px;padding-left:2px}
.oppath{flex:1;font-size:12px!important;padding:8px 10px!important}
.opmethod{flex-shrink:0;width:92px;font:700 11px var(--mono)!important;padding:8px 8px!important}
.opmethod.get{color:#0a6b52}.opmethod.post{color:#1769C4}.opmethod.put{color:#9a5a00}.opmethod.del{color:#b3261e}
.codebox{background:#0A1929;color:#cfe6ff;border-radius:9px;padding:14px;font:500 11.5px/1.6 var(--mono);overflow-x:auto;white-space:pre;margin:0}

/* ---------- priority matrix levels ---------- */
.prilevels{background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.plrow{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pllbl{font:600 11.5px var(--sans);color:var(--ink-3);width:130px;flex-shrink:0}
.plhint{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-top:4px}
.plhint .ico{width:13px;height:13px;color:var(--accent-deep)}

/* ---------- visibility: not inherited ---------- */
.notinh{display:flex;gap:10px;align-items:flex-start;background:#FFF3DF;border:1px solid #f0dcb0;border-radius:9px;padding:11px 13px;margin:6px 0 14px;font-size:12.5px;color:#7a4e00}
.notinh .ico{width:16px;height:16px;flex-shrink:0;color:#9a5a00}

/* ---------- portal channels ---------- */
.chrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.chrow:last-child{border-bottom:none}
.ch-ic{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-ic .ico{width:16px;height:16px;color:var(--accent-deep)}
.ch-t{flex:1;min-width:0}
.ch-t b{display:block;font-size:13px;color:var(--ink)}
.ch-t span{font-size:11.5px;color:var(--muted)}
.chrow.off{opacity:.55}
.chrow.off .ch-ic{background:var(--surface-2)}
.chrow.off .ch-ic .ico{color:var(--faint)}
.mobch{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}

/* ---------- data records: clearer relationships ---------- */
.relrow2{border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;margin-bottom:9px}
.rel-h{display:flex;align-items:center;gap:9px}
.rel-this{font-weight:600;font-size:13px;color:var(--ink)}
.rel-h .rela{color:var(--faint);font-weight:700}
.rel-h .reltgt{color:var(--accent-deep);font-weight:600;cursor:pointer;text-decoration:none;font-size:13px}
.rel-h .reltgt:hover{text-decoration:underline}
.rel-h .relcard{font:600 10.5px var(--mono);color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:3px 7px}
.rel-edit{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:6px;font:600 11px var(--sans);color:var(--muted);padding:5px 10px;cursor:pointer}
.rel-edit:hover{border-color:var(--accent);color:var(--accent-deep)}
.rel-d{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)}
.rel-kv{font-size:11.5px;color:var(--muted)}
.rel-kv b{color:var(--ink-3)}
.relform{border:1px solid var(--accent);background:var(--accent-soft);border-radius:11px;padding:14px;margin-top:10px}
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- data records: editable source/api ---------- */
.cstmt{font-size:11.5px!important;line-height:1.5!important;resize:vertical}
.tablerow{display:flex;gap:9px;align-items:center}
.tablerow .inp{flex:1}
.drop2{border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;margin-bottom:8px}
.drop2 .op-h{display:flex;align-items:center;gap:9px}

@media(max-width:900px){.rf-grid{grid-template-columns:1fr}}

/* ============================================================
   (build notes)
   ============================================================ */
/* one consistent form-control treatment across ALL views (overrides the
   earlier #view-services-scoped rule, which left other views looking plainer) */
.inp,.sel,textarea.inp,
#view-services .inp,#view-services .sel,#view-services textarea.inp{
  width:100%;height:40px;border:1px solid var(--line);background:var(--surface);
  border-radius:9px;padding:0 13px;font:inherit;font-size:13px;color:var(--ink);
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
  outline:none;box-sizing:border-box;
}
textarea.inp,#view-services textarea.inp{height:auto;min-height:66px;padding:11px 13px;line-height:1.55;resize:vertical}
.inp:hover,.sel:hover,#view-services .inp:hover,#view-services .sel:hover{border-color:#b9cee2}
.inp:focus,.sel:focus,textarea.inp:focus,
#view-services .inp:focus,#view-services .sel:focus,#view-services textarea.inp:focus{
  border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(79,179,255,.18);background:#fff;
}
.inp::placeholder{color:var(--faint)}
.inp.ro,.inp[readonly],#view-services .inp.ro,#view-services .inp[readonly]{
  background:var(--surface-2);color:var(--muted);cursor:default;box-shadow:none;border-color:var(--line)}
.inp.ro:hover,.inp[readonly]:hover{border-color:var(--line)}
/* custom chevron on every select */
.sel,#view-services .sel{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.inp.mono,.sel.mono,textarea.mono,textarea.inp.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.1px}
.field>label{font-weight:600}

/* editable API operation rows — tidy, aligned, method-coloured */
.drop2,.apiop{background:var(--surface);transition:border-color .12s}
.drop2:hover,.apiop:hover{border-color:#c8d8e8}
.op-h{display:flex;align-items:center;gap:8px}
.op-h .opmethod{flex:0 0 92px;height:36px;font:700 11px var(--mono)!important;padding:0 10px!important;border-radius:8px;background-color:var(--surface-2)}
.op-h .oppath{flex:1 1 0;width:auto;min-width:0;height:36px;font-size:12px!important;padding:0 11px!important;border-radius:8px}
.op-h .otest{flex-shrink:0;white-space:nowrap}
.opmethod.get{color:#0a6b52!important}.opmethod.post{color:#1769C4!important}.opmethod.put{color:#9a5a00!important}.opmethod.del{color:#b3261e!important}
.opmethod.get,.opmethod.post,.opmethod.put,.opmethod.del{background-color:var(--surface-2)}
.cstmt{font-size:11.5px!important;line-height:1.55!important;min-height:54px!important}
/* the Test pill */
.otest{border:1px solid var(--line);background:var(--surface);border-radius:7px;font:600 11px var(--sans);color:var(--muted);padding:7px 11px;cursor:pointer;transition:.12s}
.otest:hover{border-color:var(--accent);color:var(--accent-deep)}
/* small toggle used inline in editable rows */
.op-h .pt-tg,.op-h .tg{flex-shrink:0}

/* rich-text content box polish */
.rtbox:focus{box-shadow:0 0 0 3px rgba(79,179,255,.15);background:#fff}
.rttool{border-color:var(--line)}
.faqrow,.docrow .inp{transition:border-color .12s}

/* language hint strip (bilingual identity) */
.lnghint{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);background:var(--accent-soft);border-radius:8px;padding:9px 12px;margin-top:4px}
.lnghint .ico{width:14px;height:14px;color:var(--accent-deep);flex-shrink:0}
input[dir="rtl"]{text-align:right}

/* ---------- Mobile App view ---------- */
.ch-link{color:var(--accent-deep);cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--accent-deep)}
.ch-link:hover{color:var(--accent)}
.appid{display:flex;align-items:flex-end;gap:13px}
.appicon{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#1769C4,#4FB3FF);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 8px rgba(23,105,196,.25)}
.appicon .ico{width:24px;height:24px;color:#fff}
.platrow{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.platrow>.ico{width:18px;height:18px;color:var(--accent-deep)}
.platrow b{font-size:13px;color:var(--ink);display:block}
.platrow span{font-size:11.5px;color:var(--muted)}

/* global toggle pill (was scoped to #view-services, so Portals/Mobile toggles collapsed) */
.tg{width:34px;height:20px;border-radius:999px;background:var(--surface-3);position:relative;transition:.15s;flex:0 0 auto;cursor:pointer;display:inline-block;vertical-align:middle}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.15s}
.tg.on{background:var(--accent-deep)}
.tg.on::after{left:16px}
.tg.nf.on{background:var(--nafath)}
.ch-tg{cursor:pointer}

/* ============================================================
   v0.8 — top-docked section nav (module nests inside the platform;
   the platform's own left menu owns the left edge)
   ============================================================ */
.app{display:flex;flex-direction:column;min-height:100vh}
.apptop{position:sticky;top:0;z-index:30;background:var(--surface)}
.topbar{position:static;background:var(--surface);backdrop-filter:none;border-bottom:1px solid var(--line-2)}
/* module identity (left of top bar) */
.modid{display:flex;align-items:center;gap:12px;min-width:0}
.modid .brandmark b{color:var(--ink);font-size:19px;font-weight:800;letter-spacing:.4px}
.modid .brandmark b .at{color:var(--accent-deep)}
.moddiv{width:1px;height:20px;background:var(--line);flex-shrink:0}
.modname{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.1px;white-space:nowrap}
/* horizontal section tabs */
.topnav{display:flex;align-items:center;gap:1px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.topnav::-webkit-scrollbar{height:0}
.topnav a{display:inline-flex;align-items:center;gap:8px;padding:13px 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13px;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;transition:color .12s}
.topnav a .ico{width:16px;height:16px;opacity:.85}
.topnav a:hover{color:var(--ink)}
.topnav a:hover .ico{opacity:1}
.topnav a.active{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.topnav a.active .ico{opacity:1}
.tn-sep{width:1px;height:18px;background:var(--line);margin:0 9px;flex-shrink:0}
.tn-foot{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--faint);white-space:nowrap;padding:0 4px 0 16px;flex-shrink:0}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(14,138,106,.16);flex-shrink:0}
/* content fills the width the platform gives the module */
.views{min-width:0;width:100%}
@media(max-width:760px){
  .modname{display:none}
  .tn-foot{display:none}
  .topbar{gap:10px;padding:10px 14px}
}

.sel.cs-move{max-width:118px;font-size:11.5px;padding:4px 6px;height:auto;color:var(--muted)}
.qc-modal{width:min(470px,92vw);padding:22px 24px}
.qc-head{margin-bottom:16px}
.qc-head h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
.qc-head p{margin:0;font-size:12.5px;color:var(--muted)}
.qc-modal .field{margin-bottom:12px}
.qc-modal .req{color:var(--danger)}
.btn.danger,.btn-ghost.danger{color:var(--danger)}
.btn.danger:hover,.btn-ghost.danger:hover{background:var(--danger-bg);border-color:var(--danger)}
/* ---- styled confirmation popup (replaces window.confirm) ---- */
.sm-confirm-ov{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;
  background:rgba(20,20,20,.42);opacity:0;transition:opacity .16s ease;backdrop-filter:blur(1.5px)}
.sm-confirm-ov.show{opacity:1}
.sm-confirm-box{width:min(420px,92vw);background:var(--surface);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);padding:24px 24px 20px;text-align:center;
  transform:translateY(8px) scale(.98);transition:transform .16s ease}
.sm-confirm-ov.show .sm-confirm-box{transform:none}
.sm-confirm-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:2px auto 14px;
  background:var(--accent-soft);color:var(--accent-deep)}
.sm-confirm-ic.is-danger{background:var(--danger-bg);color:var(--danger)}
.sm-confirm-msg{font-size:14.5px;line-height:1.5;color:var(--text);margin-bottom:20px}
.sm-confirm-acts{display:flex;gap:10px;justify-content:center}
.sm-confirm-acts button{padding:9px 20px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.sm-confirm-cancel{background:var(--surface);border-color:var(--line);color:var(--text)}
.sm-confirm-cancel:hover{background:var(--surface-2)}
.sm-confirm-ok{background:var(--accent-deep);color:#fff}
.sm-confirm-ok:hover{filter:brightness(1.05)}
.sm-confirm-ok.is-danger{background:var(--danger)}