@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --b:#0A0A0A;--w:#fff;--off:#F7F6F3;
  --g800:#2C2C2A;--g600:#5A5A58;--g400:#9B9B97;--g200:#D0D0CE;--g100:#EBEBEB;
  --crit:#B52D2D;--crit-bg:#FAEAEA;
  --warn:#C47A1A;--warn-bg:#FBF0DC;
  --good:#2D6B3A;--good-bg:#E5F2E8;
  --info:#0F52A0;--info-bg:#E6EFF9;
  --fn:'DM Sans',sans-serif;--mo:'DM Mono',monospace;
}
body{font-family:var(--fn);background:var(--off);font-size:13px;}

/* TOP BAR */
.tb{background:var(--b);display:flex;align-items:center;height:46px;padding:0 18px;flex-shrink:0;}
.tb-logo{font-size:11px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:#fff;margin-right:24px;}
.tb-nav{display:flex;flex:1;}
.tn{font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.38);padding:0 13px;height:46px;display:flex;align-items:center;cursor:pointer;border-bottom:2px solid transparent;gap:5px;white-space:nowrap;}
.tn.on{color:#fff;border-bottom-color:#fff;}
.tn:hover{color:rgba(255,255,255,0.65);}
.tb-r{display:flex;align-items:center;gap:8px;margin-left:auto;}
.csel{font-size:10px;color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);padding:5px 10px;display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;}
.av{width:26px;height:26px;border-radius:50%;background:#2C2C2A;border:1px solid #3a3a38;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:rgba(255,255,255,0.55);}

/* LAYOUT */
.app{display:flex;flex-direction:column;min-height:100vh;}
.body{display:flex;flex:1;overflow:hidden;}

/* SIDEBAR */
.sb{width:250px;background:var(--w);border-right:1px solid var(--g100);flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;transition:width 0.18s ease,border-color 0.18s ease,overflow 0s 0.18s;}
.body.sb-collapsed>.sb{width:0;overflow:hidden;border-right-color:transparent;transition:width 0.18s ease,border-color 0.18s ease,overflow 0s;}
.sb-toggle-btn{background:none;border:none;border-right:1px solid rgba(255,255,255,0.1);cursor:pointer;padding:0 13px;height:46px;display:flex;align-items:center;color:rgba(255,255,255,0.45);font-size:16px;flex-shrink:0;margin-right:8px;}
.sb-toggle-btn:hover{color:#fff;background:rgba(255,255,255,0.07);}
.sbl{font-size:9px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--g400);padding:14px 16px 5px;}
.si{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:12px;color:var(--g600);cursor:pointer;border-left:2px solid transparent;user-select:none;}
.si i{font-size:14px;color:var(--g400);flex-shrink:0;}
.si.on{color:var(--b);background:var(--off);border-left-color:var(--b);font-weight:500;}
.si.on i{color:var(--b);}
.si:hover:not(.on){background:var(--off);}
.si.sub{padding-left:30px;font-size:11px;}
.si.sub i{font-size:13px;}
.sb-foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--g100);}
/* SIDEBAR FOLD */
.sbl.sf{display:flex;align-items:center;justify-content:space-between;padding-right:14px;cursor:pointer;}
.sbl.sf:hover{color:var(--g600);}
.si.sf{justify-content:space-between;}
.sf-chev{font-size:10px;color:var(--g200);transition:transform 0.15s;flex-shrink:0;}
.sf-chev.cl{transform:rotate(-90deg);}
.sf-body.cl{display:none;}

/* MAIN */
.main{flex:1;overflow-y:auto;padding:24px 28px;}
.view{display:none;}
.view.on{display:block;}

/* PAGE HEADER */
.ph{margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between;}
.ph-left .pl{font-size:9px;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:var(--g400);margin-bottom:4px;}
.ph-left .pt{font-size:20px;font-weight:300;letter-spacing:-0.01em;color:var(--b);}
.ph-left .ps{font-size:11px;color:var(--g400);margin-top:3px;}
.ph-meta{display:flex;align-items:center;gap:10px;}

/* GRIDS */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g100);margin-bottom:18px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--g100);margin-bottom:18px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--g100);margin-bottom:18px;}
.cell{background:var(--w);padding:16px 20px;}
.cell-off{background:var(--off);padding:16px 20px;}

/* KPI */
.kl{font-size:9px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--g400);margin-bottom:6px;}
.kv{font-size:20px;font-weight:300;color:var(--b);letter-spacing:-0.02em;font-family:var(--mo);}
.kd{font-size:10px;font-weight:500;margin-top:3px;}
.up{color:var(--good);}.dn{color:var(--crit);}.fl{color:var(--g400);}

/* ALERT */
.al{border:1px solid var(--g100);border-left-width:3px;padding:10px 14px;margin-bottom:6px;background:var(--w);}
.al.cr{border-left-color:var(--crit);}
.al.wa{border-left-color:var(--warn);}
.al.go{border-left-color:var(--good);}
.al.in{border-left-color:var(--info);}
.ah{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.at{font-size:12px;font-weight:500;color:var(--b);}
.ab{font-size:11px;color:var(--g600);font-weight:300;line-height:1.4;}

/* BADGE */
.bk{display:inline-block;padding:2px 7px;font-size:9px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;border-radius:2px;white-space:nowrap;}
.bk.cr{background:var(--crit-bg);color:var(--crit);}
.bk.wa{background:var(--warn-bg);color:var(--warn);}
.bk.go{background:var(--good-bg);color:var(--good);}
.bk.in{background:var(--info-bg);color:var(--info);}
.bk.nu{background:var(--g100);color:var(--g600);}

/* BTN */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;font-family:var(--fn);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;border:none;white-space:nowrap;}
.bp{background:var(--b);color:#fff;}
.bs{background:transparent;color:var(--b);border:1px solid var(--b);}
.bg{background:transparent;color:var(--g400);border:1px solid var(--g200);}
.btn:hover{opacity:0.8;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}

/* TABLE */
.tw{border:1px solid var(--g100);background:var(--w);margin-bottom:14px;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:var(--g400);font-weight:500;padding:8px 13px;border-bottom:1px solid var(--g100);background:var(--off);}
.tbl td{padding:9px 13px;border-bottom:1px solid var(--g100);color:var(--g600);font-size:11px;}
.tbl td:first-child{font-weight:500;color:var(--b);}
.tbl td.mn{font-family:var(--mo);text-align:right;color:var(--b);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--off);cursor:pointer;}

/* INSIGHT CARD */
.ic{border:1px solid var(--g100);background:var(--w);margin-bottom:8px;}
.ic-h{display:flex;align-items:flex-start;padding:12px 16px;gap:10px;border-bottom:1px solid var(--g100);}
.ic-info{flex:1;min-width:0;}
.ic-name{font-size:13px;font-weight:500;color:var(--b);margin-bottom:2px;}
.ic-meta{font-size:10px;color:var(--g400);}
.ic-body{padding:12px 16px;}
.ic-html-preview{background:var(--off);border:1px solid var(--g100);padding:10px 14px;font-size:10px;color:var(--g600);line-height:1.5;margin-bottom:10px;font-family:var(--mo);}
.history-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--g100);font-size:11px;}
.history-row:last-child{border-bottom:none;}

/* FORM */
.form-section{margin-bottom:20px;}
.form-label{font-size:9px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--g400);margin-bottom:5px;display:block;}
.form-input{width:100%;padding:8px 11px;border:1px solid var(--g200);background:var(--w);font-family:var(--fn);font-size:12px;color:var(--b);outline:none;border-radius:0;margin-bottom:10px;}
.form-input:focus{border-color:var(--b);}
.form-textarea{width:100%;padding:8px 11px;border:1px solid var(--g200);background:var(--w);font-family:var(--mo);font-size:11px;color:var(--b);outline:none;border-radius:0;min-height:72px;resize:vertical;line-height:1.5;margin-bottom:6px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.radio-row{display:flex;gap:16px;margin-bottom:10px;}
.radio-opt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g600);cursor:pointer;}
.radio-opt input{accent-color:var(--b);}
.divider{border:none;border-top:1px solid var(--g100);margin:18px 0;}
.section-title{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--b);margin-bottom:12px;}

/* PROMPT BLOCK */
.prompt-block{border:1px solid var(--g100);background:var(--w);margin-bottom:8px;}
.pb-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--off);border-bottom:1px solid var(--g100);}
.pb-label{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--g600);}
.pb-body{padding:10px 14px;}

/* USER CHIP */
.uchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--g100);background:var(--off);cursor:pointer;}
.uchip:hover{border-color:var(--g200);}
.uav{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;flex-shrink:0;}
.uchip-name{font-size:11px;color:var(--b);font-weight:500;}
.uchip-contact{display:flex;gap:5px;margin-left:4px;}
.uchip-contact i{font-size:13px;color:var(--g400);}
.uchip-contact i:hover{color:var(--info);}

/* GLOSSARY SIDEBAR FILTER */
.g-filter-btn{font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;cursor:pointer;color:var(--g400);border:1px solid var(--g100);background:transparent;user-select:none;}
.g-filter-btn.active{color:var(--b);border-color:var(--g400);background:var(--off);}
.g-filter-btn:hover:not(.active){color:var(--g600);border-color:var(--g200);}

/* GLOSSARY */
.gc{border:1px solid var(--g100);background:var(--w);margin-bottom:8px;}
.gc-h{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--g100);}
.gc-term{font-size:13px;font-weight:500;color:var(--b);}
.gc-body{padding:14px 16px;}
.gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px;}
.gc-field label{font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--g400);display:block;margin-bottom:3px;}
.gc-field p{font-size:11px;color:var(--g600);line-height:1.5;}
.gc-field .mono{font-family:var(--mo);font-size:10px;color:var(--info);background:var(--info-bg);padding:4px 8px;display:block;margin-top:2px;}

/* REPORT */
.rf{border:1px solid var(--g100);background:var(--w);margin-bottom:6px;padding:11px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;}
.rf:hover{background:var(--off);}
.rf i{font-size:18px;color:var(--g400);}
.rf-name{font-size:12px;font-weight:500;color:var(--b);}
.rf-meta{font-size:10px;color:var(--g400);}

/* REPORT TABLE VIEW */
.filter-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.filter-input{padding:6px 10px;border:1px solid var(--g200);background:var(--w);font-family:var(--fn);font-size:11px;color:var(--b);outline:none;}
.filter-input:focus{border-color:var(--b);}
.filter-label{font-size:10px;font-weight:500;color:var(--g400);letter-spacing:0.06em;text-transform:uppercase;}

/* USER ROW */
.ur{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--g100);}
.ur:last-child{border-bottom:none;}
.ur-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}
.ur-name{font-size:12px;font-weight:500;color:var(--b);}
.ur-sub{font-size:10px;color:var(--g400);}
.ur-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* PERM MATRIX */
.perm-check{color:var(--good);font-weight:500;}
.perm-x{color:var(--crit);}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--w);border:1px solid var(--g100);padding:24px;width:380px;max-width:90vw;}
.modal-title{font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--b);margin-bottom:16px;}

/* TOAST */
.toast{display:none;position:fixed;bottom:20px;right:20px;padding:10px 16px;font-size:11px;font-weight:500;color:#fff;z-index:300;border-radius:2px;}

/* LOADING */
.loading-state{display:flex;align-items:center;justify-content:center;min-height:160px;color:var(--g400);font-size:12px;}
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:20px;height:20px;border:2px solid var(--g100);border-top-color:var(--g400);border-radius:50%;animation:spin 0.7s linear infinite;}

/* DEV SECTION — stats strip */
.stats-strip{display:grid;gap:1px;background:var(--g100);border:1px solid var(--g100);margin-bottom:20px;}
.stat-cell{background:var(--w);padding:14px 18px;}
.stat-label{font-size:9px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--g400);margin-bottom:5px;}
.stat-value{font-size:20px;font-weight:300;color:var(--b);letter-spacing:-0.02em;font-family:var(--mo);}
.stat-sub{font-size:10px;color:var(--g400);margin-top:2px;}

/* DEV SECTION — card list */
.card-list{display:flex;flex-direction:column;gap:1px;background:var(--g100);border:1px solid var(--g100);margin-bottom:16px;}
.card-list-item{background:var(--w);display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;}
.card-list-item:hover{background:var(--off);}
.card-list-item.on{background:var(--off);}
.cli-icon{width:30px;height:30px;border:1px solid var(--g100);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--off);}
.cli-icon i{font-size:14px;color:var(--g400);}
.cli-info{flex:1;min-width:0;}
.cli-name{font-size:12px;font-weight:500;color:var(--b);margin-bottom:1px;}
.cli-meta{font-size:10px;color:var(--g400);}
.cli-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dot.live{background:var(--good);}
.dot.off{background:var(--g400);}
.dot.err{background:var(--crit);}

/* DEV SECTION — folder header */
.folder-hdr{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--off);border-bottom:1px solid var(--g100);}
.folder-hdr i{font-size:13px;color:var(--g400);}
.folder-hdr-name{font-size:9px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--g600);}
.folder-hdr-count{margin-left:auto;font-size:9px;color:var(--g400);font-family:var(--mo);}

/* DEV SECTION — detail panel + tabs */
.detail{background:var(--w);border:1px solid var(--g100);}
.detail-tabs{display:flex;border-bottom:1px solid var(--g100);background:var(--off);overflow-x:auto;}
.dt{padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--g400);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;}
.dt.on{color:var(--b);border-bottom-color:var(--b);background:var(--w);}
.dt:hover:not(.on){color:var(--g600);}
.tab-content{display:none;padding:22px;}
.tab-content.on{display:block;}

/* DEV SECTION — info panel */
.info-panel{background:var(--off);border:1px solid var(--g100);padding:16px;margin-bottom:14px;}
.ip-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--g100);}
.ip-row:last-child{border-bottom:none;}
.ip-key{font-size:10px;color:var(--g400);}
.ip-val{font-size:11px;font-weight:500;color:var(--b);text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;}
.ip-val.mono{font-family:var(--mo);font-size:10px;color:var(--info);}

/* DEV SECTION — dev team cards */
.dev-card{background:var(--w);border:1px solid var(--g100);margin-bottom:6px;}
.dev-card-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--g100);}
.dev-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;}
.dev-info{flex:1;}
.dev-name{font-size:13px;font-weight:500;color:var(--b);}
.dev-role{font-size:10px;color:var(--g400);}
.dev-card-body{padding:12px 16px;}
.client-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--g100);background:var(--off);margin:3px 4px 3px 0;font-size:11px;color:var(--b);}
.client-chip i{font-size:12px;color:var(--g400);}

/* DEV SECTION — run rows */
.run-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--g100);font-size:11px;}
.run-row:last-child{border-bottom:none;}

/* DEV SECTION — layout helpers */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.col-23{display:grid;grid-template-columns:2fr 1fr;gap:20px;}

/* DEV SECTION — form extensions */
.form-select{width:100%;padding:8px 11px;border:1px solid var(--g200);background:var(--w);font-family:var(--fn);font-size:12px;color:var(--b);outline:none;border-radius:0;appearance:none;cursor:pointer;margin-bottom:10px;}
.form-select:focus{border-color:var(--b);}
.form-hint{font-size:10px;color:var(--g400);margin-top:-6px;margin-bottom:10px;line-height:1.4;}

/* DEV SECTION — badge extensions */
.bk.draft{background:var(--g100);color:var(--g400);}

/* DEV SECTION — sidebar count badge */
.si-count{margin-left:auto;font-size:9px;background:var(--g100);color:var(--g600);padding:1px 6px;font-family:var(--mo);}