/* ==========================================================================
   CaseZero Emerald — customer-zero product system
   Professional, restrained, self-explanatory. Advanced controls are progressive.
   ========================================================================== */
:root{
  --bg:#06110d;
  --panel:#0b1913;
  --panel2:#0e2119;
  --border:#1c3a2d;
  --line:#1c3a2d;
  --muted:#89a99a;
  --text:#f3faf6;
  --accent:#34d399;
  --accent2:#6ee7b7;
  --warn:#f5c76b;
  --bad:#fb7185;
  --shadow:0 24px 80px rgba(0,0,0,.36);
  --emerald-900:#064e3b;
  --emerald-800:#065f46;
  --emerald-700:#047857;
  --emerald-500:#10b981;
  --emerald-400:#34d399;
  --emerald-300:#6ee7b7;
  --emerald-50:#ecfdf5;
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(900px 520px at 78% -10%,rgba(16,185,129,.12),transparent 62%),
    radial-gradient(760px 520px at -8% 100%,rgba(5,150,105,.08),transparent 64%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.006em;
}
.app-shell{grid-template-columns:236px minmax(0,1fr)}
.sidebar{
  background:linear-gradient(180deg,rgba(6,17,13,.98),rgba(5,14,11,.97));
  border-right:1px solid rgba(52,211,153,.13);
  padding:20px 12px;
  box-shadow:14px 0 50px rgba(0,0,0,.12);
}
.brand{padding:2px 8px 20px;gap:10px}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(145deg,#6ee7b7,#10b981);
  box-shadow:0 10px 28px rgba(16,185,129,.18);
  color:#03271d;font-size:11px;
}
.brand strong{font-size:15px;letter-spacing:-.02em}
.brand small{color:#719486;font-size:9px;letter-spacing:.025em}
.nav-group{margin:15px 10px 6px;color:#547768;font-size:8px;letter-spacing:.16em}
.nav-item{
  min-height:38px;padding:9px 10px;border-radius:9px;color:#a4bdb2;
  gap:10px;font-weight:650;font-size:11px;transition:.15s ease;
}
.nav-item>span{
  width:22px;height:22px;display:grid;place-items:center;border-radius:7px;
  color:#78a592;background:rgba(255,255,255,.015);font-size:11px;
}
.nav-item:hover{background:rgba(52,211,153,.06);color:#e7f7ef}
.nav-item.active{
  background:linear-gradient(90deg,rgba(16,185,129,.16),rgba(16,185,129,.045));
  color:#f2fff8;box-shadow:inset 2px 0 var(--accent);
}
.nav-item.active>span{color:var(--accent);background:rgba(16,185,129,.10)}
.advanced-nav{
  margin-top:12px;border-top:1px solid rgba(52,211,153,.09);padding-top:10px
}
.advanced-nav summary{
  list-style:none;cursor:pointer;color:#648878;padding:8px 10px;font-size:9px;
  text-transform:uppercase;letter-spacing:.11em;font-weight:800;
}
.advanced-nav summary::-webkit-details-marker{display:none}
.advanced-nav summary:before{content:"＋";margin-right:7px;color:#4e7463}
.advanced-nav[open] summary:before{content:"−"}
.sidebar-foot{border-top:1px solid rgba(52,211,153,.09);padding-top:8px}
.platform-badge{font-size:9px;color:#698b7d}
.status-dot{width:6px;height:6px;background:var(--accent);box-shadow:0 0 10px rgba(52,211,153,.65)}

.topbar{
  min-height:88px;padding:18px 28px 15px;align-items:center;
  border-bottom:1px solid rgba(52,211,153,.10);
  background:rgba(6,17,13,.82);backdrop-filter:blur(20px);
}
.topbar h1{font-size:23px;font-weight:750;letter-spacing:-.035em}
.page-context{font-size:10px;color:#7e9f91;max-width:700px}
.eyebrow{font-size:8px;color:#4fe0aa;letter-spacing:.16em}
.topbar-actions{gap:7px}
.topbar-actions .select{min-width:180px}
.content{padding:24px 28px 48px;max-width:1600px}
.content.workspace-wide{padding:18px 22px 38px}

.btn{
  min-height:34px;border-color:#234536;background:#10241b;color:#e9f8f0;
  border-radius:9px;padding:8px 12px;font-size:10px;box-shadow:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.btn:hover{filter:none;background:#153125;border-color:#32604b}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#34d399,#10b981);color:#03271d;border-color:#45dda7;
  box-shadow:0 8px 24px rgba(16,185,129,.13)
}
.btn.primary:hover{background:linear-gradient(180deg,#49dfa8,#18c38a)}
.btn.ghost{background:transparent}
.btn.large{min-height:40px;padding:10px 16px;font-size:11px}
input,select,textarea,.select{
  background:#081710;color:#eef8f3;border-color:#244437;border-radius:9px;
}
input:focus,select:focus,textarea:focus{
  border-color:#27996f;box-shadow:0 0 0 3px rgba(16,185,129,.10)
}
label{color:#9bb7aa;font-size:10px}
small{color:var(--muted)}

.card,.ui-card{
  background:linear-gradient(180deg,rgba(11,27,20,.96),rgba(8,21,16,.98));
  border-color:rgba(52,211,153,.13);border-radius:14px;
  box-shadow:0 14px 42px rgba(0,0,0,.12);
}
.card:hover{border-color:rgba(52,211,153,.22)}
.hero{
  background:
    radial-gradient(circle at 90% 0,rgba(52,211,153,.11),transparent 34%),
    linear-gradient(135deg,rgba(13,45,33,.75),rgba(8,22,17,.96));
  border-color:rgba(52,211,153,.22)
}
.badge{border-color:#284a3c;color:#bdd2c8;background:rgba(255,255,255,.015)}
.badge.good{color:#70e7ba;border-color:#286c50;background:rgba(16,185,129,.08)}
.badge.blue{color:#9fe7ce;border-color:#315e4d;background:#10261d}
.badge.warn{color:#f4cf83;border-color:#63552e;background:#2a2413}
.badge.bad{color:#ff9cab;border-color:#663742;background:#2a171c}
.metric.good .value,.good-text{color:#51e1a9}
.metric.blue .value{color:#8ee7c7}
.flow-pill,.case-capability-flow span,.marketplace-flow span{
  background:#0a1e16;border-color:#25483a;color:#d8ece2
}
.arrow,.workflow-link{color:#4d8a71}

.modal,.drawer{
  background:linear-gradient(180deg,#0b1c15,#07150f);border-color:#28503e;
}
.modal-backdrop,.drawer-backdrop{background:rgba(1,8,5,.76);backdrop-filter:blur(10px)}
.modal-head,.drawer-head{background:#0a1a14}
.icon-btn{background:#10261c;border-color:#28503e}
.toast{background:#0d281d;border-color:#2b6b50;color:#eafff4}
.empty{border-color:#254437;color:#779b8b}

/* Customer-zero home */
.emerald-home-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:22px;padding:28px;margin-bottom:14px;border:1px solid rgba(52,211,153,.20);
  border-radius:18px;background:linear-gradient(118deg,#0d2b20 0,#091b14 58%,#0b2118 100%);
}
.emerald-home-hero:after{
  content:"";position:absolute;width:360px;height:360px;right:-120px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.14),transparent 66%);pointer-events:none
}
.emerald-home-hero h2{font-size:27px;line-height:1.12;margin:6px 0 9px;letter-spacing:-.04em;max-width:700px}
.emerald-home-hero p{color:#a0bbae;max-width:720px;font-size:12px;margin:0}
.emerald-hero-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.readiness-ring{
  align-self:center;justify-self:end;width:160px;height:160px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) var(--ready-angle,0deg),#153126 0);
  box-shadow:0 20px 60px rgba(0,0,0,.22),0 0 50px rgba(16,185,129,.07)
}
.readiness-ring:before{content:"";grid-area:1/1;width:132px;height:132px;background:#0a1b14;border-radius:50%;border:1px solid #224435}
.readiness-ring>div{grid-area:1/1;z-index:1;text-align:center}
.readiness-ring b{display:block;font-size:31px;letter-spacing:-.04em}
.readiness-ring span{font-size:9px;color:#79a18f;text-transform:uppercase;letter-spacing:.08em}
.resolution-lifecycle{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0 18px
}
.lifecycle-step{padding:10px;border:1px solid #1d3a2d;border-radius:10px;background:#091b14}
.lifecycle-step b{display:block;font-size:10px;color:#e6f5ed}
.lifecycle-step span{font-size:8px;color:#718f82}
.lifecycle-step.active{border-color:#2d8a67;background:rgba(16,185,129,.07)}
.emerald-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.emerald-kpi{padding:14px 15px}
.emerald-kpi small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.emerald-kpi b{display:block;font-size:24px;margin:5px 0 1px;letter-spacing:-.04em}
.next-best{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  border:1px solid rgba(52,211,153,.20);background:rgba(16,185,129,.055);padding:14px 16px;border-radius:13px;margin-bottom:12px
}
.next-best-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(52,211,153,.11);color:#65e5b5;font-size:17px}
.next-best h3{font-size:13px;margin:0 0 2px}.next-best p{font-size:10px;color:var(--muted);margin:0}

/* Guided setup */
.setup-stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}
.setup-stage{
  position:relative;padding:15px;border:1px solid #1d3b2d;border-radius:13px;background:#0a1b14;min-height:138px
}
.setup-stage.complete{border-color:#286b50;background:linear-gradient(180deg,rgba(16,185,129,.07),#0a1b14)}
.setup-stage .stage-no{
  width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#123025;color:#62dfae;
  font-size:9px;font-weight:900;margin-bottom:10px
}
.setup-stage.complete .stage-no{background:#166044;color:#b8f7dc}
.setup-stage h3{margin:0 0 5px;font-size:13px}.setup-stage p{margin:0 0 12px;font-size:9.5px;color:#78998a;line-height:1.45}
.setup-stage .stage-status{font-size:8px;color:#7ba491;text-transform:uppercase;letter-spacing:.07em}
.readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.readiness-tile{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:11px;
  border:1px solid #1d3a2d;border-radius:11px;background:#091b14
}
.readiness-dot{width:8px;height:8px;border-radius:50%;background:#5f756b}
.readiness-tile.verified .readiness-dot{background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.5)}
.readiness-tile.needs_attention .readiness-dot{background:#f5c76b}
.readiness-tile b{font-size:10px}.readiness-tile span{font-size:8px;color:#759486;display:block}
.readiness-tile button{padding:5px 8px;min-height:26px;font-size:8px}
.activation-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 17px;margin-top:12px}

/* Get Help / resolution sessions */
.help-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:12px}
.help-compose{padding:20px}
.help-compose h2{font-size:20px;margin:4px 0 7px}
.intent-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}
.intent-card{
  cursor:pointer;border:1px solid #234336;border-radius:11px;background:#0a1c15;padding:11px;color:var(--text);text-align:left
}
.intent-card:hover,.intent-card.selected{border-color:#35ae80;background:rgba(16,185,129,.075)}
.intent-card b{display:block;font-size:10px;margin-bottom:3px}.intent-card span{font-size:8px;color:#77998a;line-height:1.35}
.help-message{min-height:116px!important;font-size:12px!important;line-height:1.55}
.help-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.help-options label{display:flex;flex-direction:row;align-items:center;gap:6px}
.help-options input[type=checkbox]{width:auto}
.session-card{padding:12px;border:1px solid #1d3a2d;border-radius:11px;background:#091b14;margin-bottom:7px;cursor:pointer}
.session-card:hover{border-color:#2d6e52}.session-card-head{display:flex;gap:8px;align-items:center;justify-content:space-between}
.session-card h3{font-size:10.5px;margin:0}.session-card p{font-size:9px;color:#759486;margin:5px 0 0}
.session-state{font-size:7.5px;text-transform:uppercase;letter-spacing:.07em;color:#87ad9c}
.message-thread{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.message-bubble{max-width:86%;padding:10px 12px;border-radius:12px;background:#10241b;border:1px solid #254537}
.message-bubble.in{align-self:flex-end;background:#123326;border-color:#2b6b50}
.message-bubble b{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#73a28d;display:block;margin-bottom:4px}
.message-bubble p{margin:0;font-size:10.5px;white-space:pre-wrap}
.action-intent-card{padding:12px;border:1px solid #5e4f2c;background:rgba(245,199,107,.055);border-radius:11px;margin:8px 0}

/* Enterprise setup modals */
.setup-quick-actions{display:flex;gap:7px;flex-wrap:wrap}
.permission-callout{border-color:rgba(52,211,153,.24)!important;background:rgba(16,185,129,.05)!important}
.enterprise-form-help{padding:10px;border:1px solid #204235;border-radius:10px;background:#091b14;font-size:9px;color:#77998a;line-height:1.5}
.member-list{display:grid;gap:6px;margin:8px 0}
.member-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #173126}

/* Marketplace and studios — same visual language */
.marketplace-hero,.marketplace-principle,.collab-flow,.workflow-quick-flow,.agent-quick-setup{
  border-color:rgba(52,211,153,.18)!important;background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(7,21,15,.95))!important
}
.marketplace-card.recommended{border-color:#27775a!important;box-shadow:0 10px 34px rgba(16,185,129,.06)}
.marketplace-icon{background:rgba(52,211,153,.10)!important;color:#65dfb0!important;border-color:#2b644d!important}
.workflow-node.selected,.agent-node.selected{border-color:#34d399!important;box-shadow:0 0 0 2px rgba(52,211,153,.10)!important}
.agent-canvas-wrap,.workflow-canvas-wrap{
  background-color:#07150f!important;
  background-image:linear-gradient(90deg,rgba(52,211,153,.035) 1px,transparent 1px),linear-gradient(rgba(52,211,153,.035) 1px,transparent 1px)!important
}

/* Auth */
.login-card{background:linear-gradient(180deg,#0c2118,#07150f);border-color:#26503e}
.login-card .brand-mark{width:42px;height:42px}
.login-card h1{font-size:26px}

/* Responsive */
@media(max-width:1180px){
  .setup-stage-grid,.readiness-grid{grid-template-columns:repeat(2,1fr)}
  .emerald-home-hero{grid-template-columns:1fr}.readiness-ring{justify-self:start;width:120px;height:120px}.readiness-ring:before{width:98px;height:98px}
  .resolution-lifecycle{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:850px){
  .help-layout{grid-template-columns:1fr}.intent-picker{grid-template-columns:1fr}
  .emerald-kpis{grid-template-columns:repeat(2,1fr)}
  .next-best{grid-template-columns:auto 1fr}.next-best>.btn{grid-column:1/-1}
}
@media(max-width:620px){
  .setup-stage-grid,.readiness-grid,.emerald-kpis,.resolution-lifecycle{grid-template-columns:1fr}
  .topbar{padding:14px 12px}.content{padding:14px 12px 36px}
  .emerald-home-hero{padding:18px}.emerald-home-hero h2{font-size:22px}
}

/* 5.9.1: readable connection/policy dialogs at system, light and dark contrast */
.modal-head,.drawer-head{background:#f1f7fd!important;color:#12273c!important;border-radius:10px 10px 0 0;padding:12px 14px!important;border-bottom:1px solid #d6e3ee}
.modal-head h2,.drawer-head h2,.modal-head .eyebrow,.drawer-head .eyebrow{color:#163756!important}
.modal-head .icon-btn,.drawer-head .icon-btn{background:white!important;color:#173550!important;border:1px solid #cbddec!important}
.modal .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.modal .form-grid>label,.modal .form-grid>div{min-width:0;overflow-wrap:anywhere}
.modal label,.modal p,.modal small{overflow-wrap:anywhere}
.cz-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #dce6ee;padding-top:12px;margin-top:12px;font-size:12px;color:#53687f}.cz-pagination>div{display:flex;gap:10px;align-items:center}.cz-pagination button:disabled{opacity:.45;cursor:not-allowed}
.cz-node-guide{background:#eef7ff;border:1px solid #c8deef;border-radius:10px;padding:11px;margin:10px 0 15px;color:#17354f}.cz-node-guide p{margin:5px 0}.cz-node-guide small{color:#46677d}
@media(max-width:740px){.modal .form-grid{grid-template-columns:1fr!important}.cz-pagination{flex-wrap:wrap}}

/* Configuration UX: reliable grid width and legible header across themes */
.modal .form-grid, .cz-modal .form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.modal .form-grid label, .cz-modal .form-grid label {min-width:0;width:auto!important}
.modal input,.modal select,.modal textarea,.cz-modal input,.cz-modal select,.cz-modal textarea {max-width:100%;box-sizing:border-box}
.modal-head *, .drawer-head * {color:#19334c!important}
@media(max-width:650px){.modal .form-grid,.cz-modal .form-grid{grid-template-columns:1fr}}