/* ICODE R107.6 - consolidated compact Step 1 + real DOM previews */

/* hard anti-flash: previews stay hidden until their real UI is built */
#icode-option1-root:not(.r1076-ready) [data-panel="1"] .r1070-preview{
  visibility:hidden!important;
  opacity:0!important;
}
#icode-option1-root.r1076-ready [data-panel="1"] .r1070-preview{
  visibility:visible!important;
  opacity:1!important;
}

/* vertical hierarchy */
#icode-option1-root .o1-shell{
  max-width:1220px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
#icode-option1-root .o1-shell > .r1076-intro{
  order:1!important;
  position:relative!important;
  width:100%!important;
  max-width:700px!important;
  margin:0 auto 14px!important;
  padding:0 18px!important;
  text-align:center!important;
}
#icode-option1-root .r1076-intro h2{
  margin:0 0 5px!important;
  color:#073747!important;
  font-size:27px!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  font-weight:900!important;
}
#icode-option1-root .r1076-intro h2 span{color:#f36b21!important}
#icode-option1-root .r1076-intro p{
  margin:0!important;
  color:#718692!important;
  font-size:13.5px!important;
  line-height:1.4!important;
}
#icode-option1-root .o1-shell > .o1-stepper{
  order:2!important;
  position:relative!important;
  min-height:56px!important;
  height:auto!important;
  margin:0 0 14px!important;
  padding:0!important;
  border-bottom:1px solid #e5ecef!important;
  background:#fff!important;
}
#icode-option1-root .o1-step{
  min-height:56px!important;
  padding:9px 12px 10px!important;
  align-items:center!important;
}
#icode-option1-root .o1-num{
  width:28px!important;height:28px!important;min-width:28px!important;font-size:12px!important;
}
#icode-option1-root .o1-step b{font-size:12.5px!important;line-height:1.15!important}
#icode-option1-root .o1-step small{font-size:10.5px!important;line-height:1.2!important;margin-top:2px!important}
#icode-option1-root .o1-step.on:after{height:3px!important;bottom:-1px!important}
#icode-option1-root .o1-shell > .o1-stage{
  order:3!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
#icode-option1-root .o1-stage > .o1-panel:not(.active){display:none!important}
#icode-option1-root .o1-stage > .o1-panel.active{display:block!important}

/* no duplicate/legacy selector text */
#icode-option1-root [data-panel="1"] .o1-center,
#icode-option1-root [data-panel="1"] .r1070-intro,
#icode-option1-root [data-panel="1"] .r1073-top-intro,
#icode-option1-root [data-panel="1"] .r1074-obsolete-copy,
#icode-option1-root [data-panel="1"] .r1073-legacy-copy-hidden{
  display:none!important;
}

/* cards */
#icode-option1-root [data-panel="1"] .o1-step1,
#icode-option1-root [data-panel="1"] .r1070-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
#icode-option1-root [data-panel="1"] .r1070-grid{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  margin:0!important;
  padding:0 14px!important;
  overflow:visible!important;
}
#icode-option1-root [data-panel="1"] .r1070-card{
  position:relative!important;
  width:100%!important;
  min-height:264px!important;
  height:auto!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid #dfe7eb!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(7,55,71,.045)!important;
  overflow:hidden!important;
}
#icode-option1-root [data-panel="1"] .r1070-card.on{
  border-color:#18b899!important;
  background:#fbfffe!important;
  box-shadow:0 10px 26px rgba(20,185,149,.11)!important;
}
#icode-option1-root [data-panel="1"] .r1070-head{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:9px!important;
  min-height:70px!important;
  padding-right:22px!important;
  align-items:start!important;
}
#icode-option1-root [data-panel="1"] .r1070-icon{
  width:44px!important;height:44px!important;border-radius:11px!important;font-size:21px!important;
}
#icode-option1-root [data-panel="1"] .r1070-head h3,
#icode-option1-root [data-panel="1"] .r1070-familiar,
#icode-option1-root [data-panel="1"] .r1070-copy{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
#icode-option1-root [data-panel="1"] .r1070-head h3{
  margin:0 0 3px!important;
  font-size:15.5px!important;
  line-height:1.12!important;
}
#icode-option1-root [data-panel="1"] .r1070-familiar{
  display:block!important;
  margin:0 0 3px!important;
  font-size:11px!important;
  line-height:1.2!important;
}
#icode-option1-root [data-panel="1"] .r1070-copy{
  margin:0!important;
  font-size:10px!important;
  line-height:1.2!important;
  color:#6c818d!important;
}
#icode-option1-root [data-panel="1"] .r1070-radio{
  width:18px!important;height:18px!important;top:13px!important;right:13px!important;
}
html[dir="rtl"] #icode-option1-root [data-panel="1"] .r1070-head{
  padding-right:0!important;padding-left:22px!important;
}
html[dir="rtl"] #icode-option1-root [data-panel="1"] .r1070-radio{
  right:auto!important;left:13px!important;
}

/* preview frame */
#icode-option1-root [data-panel="1"] .r1070-preview{
  position:relative!important;
  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;
  margin-top:8px!important;
  border:1px solid #e1e9ed!important;
  border-radius:12px!important;
  background:#f9fbfc!important;
  overflow:hidden!important;
}
#icode-option1-root [data-panel="1"] .o1-footer{
  position:relative!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:48px!important;
  margin:9px 0 0!important;
  padding:0 0 9px!important;
}
#icode-option1-root [data-panel="1"] .o1-next{
  min-width:145px!important;
  min-height:36px!important;
  height:36px!important;
  padding:0 22px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  font-weight:800!important;
}

/* shared mini UI */
#icode-option1-root .r1076-ui{
  width:100%;height:100%;position:relative;background:#fff;color:#163a49;font-family:inherit;
}
#icode-option1-root .r1076-bar{
  height:25px;display:flex;align-items:center;gap:6px;padding:0 8px;border-bottom:1px solid #edf1f3;background:#fbfcfd;
}
#icode-option1-root .r1076-dot{width:5px;height:5px;border-radius:50%;background:#c7d4da}
#icode-option1-root .r1076-muted{color:#83949d}

/* enterprise real selector */
#icode-option1-root .r1076-ent{display:grid;grid-template-columns:72px 1fr}
#icode-option1-root .r1076-ent-side{background:#0c4958;color:white;padding:8px 6px}
#icode-option1-root .r1076-ent-logo{font-size:7px;font-weight:900;letter-spacing:.04em;margin:0 0 7px}
#icode-option1-root .r1076-ent-nav{
  display:flex;align-items:center;height:17px;padding:0 6px;margin:3px 0;border-radius:5px;
  font-size:6.5px;color:#b9d0d8;transition:.18s ease;
}
#icode-option1-root .r1076-ent-nav.active{background:#fff;color:#0c4958;font-weight:800}
#icode-option1-root .r1076-ent-main{padding:7px;position:relative}
#icode-option1-root .r1076-ent-select{
  appearance:none;border:1px solid #dce6ea;background:#fff;border-radius:6px;height:23px;
  padding:0 22px 0 7px;font:700 7px/1 inherit;color:#173d4b;position:relative;cursor:pointer;
}
#icode-option1-root .r1076-ent-select:after{content:"⌄";position:absolute;right:7px}
#icode-option1-root .r1076-ent-menu{
  display:none;position:absolute;left:7px;top:34px;width:96px;padding:3px;background:white;border:1px solid #dce6ea;
  border-radius:7px;box-shadow:0 8px 20px rgba(7,55,71,.12);z-index:4;
}
#icode-option1-root .r1076-ent-menu.open{display:block}
#icode-option1-root .r1076-ent-menu button{
  display:block;width:100%;height:19px;border:0;background:transparent;border-radius:4px;text-align:left;
  padding:0 6px;font:700 6.5px/1 inherit;color:#345763;cursor:pointer;
}
#icode-option1-root .r1076-ent-menu button:hover{background:#eef6f7}
#icode-option1-root .r1076-ent-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}
#icode-option1-root .r1076-ent-kpi{border:1px solid #e7edef;border-radius:6px;padding:5px;background:#fff}
#icode-option1-root .r1076-ent-kpi small{display:block;font-size:5.5px;color:#84949c}
#icode-option1-root .r1076-ent-kpi b{display:block;font-size:10px;margin-top:1px}
#icode-option1-root .r1076-ent-table{margin-top:6px;border-top:1px solid #edf1f3;padding-top:4px}
#icode-option1-root .r1076-ent-row{height:12px;display:grid;grid-template-columns:1.3fr .7fr .6fr;gap:5px;align-items:center}
#icode-option1-root .r1076-ent-row i{display:block;height:4px;border-radius:3px;background:#e4ebee}
#icode-option1-root .r1076-ent-row i:last-child{background:#d8f1e8}

/* flow real app launcher */
#icode-option1-root .r1076-flow{background:#fff;overflow:hidden}
#icode-option1-root .r1076-flow-shell{display:grid;grid-template-columns:38px 1fr;height:calc(100% - 25px)}
#icode-option1-root .r1076-flow-rail{border-right:1px solid #edf1f3;background:#fbfcfd;padding:6px 5px}
#icode-option1-root .r1076-flow-rail i{display:block;width:17px;height:17px;margin:0 auto 6px;border-radius:5px;background:#e6edef}
#icode-option1-root .r1076-flow-body{padding:6px;position:relative;overflow:hidden}
#icode-option1-root .r1076-flow-search{height:17px;border-radius:6px;background:#f0f4f6;margin-bottom:6px}
#icode-option1-root .r1076-flow-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
#icode-option1-root .r1076-flow-app{
  appearance:none;border:1px solid #e8edef;background:#fff;border-radius:8px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.18s ease;
}
#icode-option1-root .r1076-flow-app:hover,#icode-option1-root .r1076-flow-app.active{border-color:#75b3ff;box-shadow:0 0 0 2px rgba(85,148,255,.08)}
#icode-option1-root .r1076-flow-app span{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:900;
}
#icode-option1-root .r1076-flow-app:nth-child(1) span{background:#3e82f7}
#icode-option1-root .r1076-flow-app:nth-child(2) span{background:#f29a38}
#icode-option1-root .r1076-flow-app:nth-child(3) span{background:#7954da}
#icode-option1-root .r1076-flow-app:nth-child(4) span{background:#26b994}
#icode-option1-root .r1076-flow-app:nth-child(5) span{background:#ed5b9d}
#icode-option1-root .r1076-flow-app:nth-child(6) span{background:#347cf1}
#icode-option1-root .r1076-flow-app:nth-child(7) span{background:#f08b39}
#icode-option1-root .r1076-flow-app:nth-child(8) span{background:#75909e}
#icode-option1-root .r1076-flow-workspace{
  position:absolute;inset:6px;background:white;border:1px solid #dfe8ec;border-radius:8px;
  transform:translateX(112%);transition:transform .42s cubic-bezier(.2,.8,.2,1);z-index:3;padding:7px;
  box-shadow:0 10px 24px rgba(7,55,71,.10);
}
#icode-option1-root .r1076-flow-workspace.open{transform:translateX(0)}
#icode-option1-root .r1076-flow-workspace header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
#icode-option1-root .r1076-flow-workspace header b{font-size:8px}
#icode-option1-root .r1076-flow-workspace header button{border:0;background:#eef3f5;border-radius:5px;font-size:7px;cursor:pointer}
#icode-option1-root .r1076-flow-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#icode-option1-root .r1076-flow-card{height:39px;border:1px solid #e7edef;border-radius:6px;padding:5px}
#icode-option1-root .r1076-flow-card small{display:block;font-size:5.5px;color:#83949d}
#icode-option1-root .r1076-flow-card b{display:block;font-size:9px;margin-top:2px}

/* CRM real kanban */
#icode-option1-root .r1076-crm{background:#fff}
#icode-option1-root .r1076-crm-body{height:calc(100% - 25px);padding:6px}
#icode-option1-root .r1076-crm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:100%}
#icode-option1-root .r1076-crm-col{
  position:relative;border:1px solid #e7edef;border-radius:7px;background:#fbfcfd;padding:5px;overflow:hidden;
}
#icode-option1-root .r1076-crm-col header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
#icode-option1-root .r1076-crm-col header b{font-size:6.5px}
#icode-option1-root .r1076-crm-col header span{font-size:6px;color:#8a9aa2}
#icode-option1-root .r1076-deal{
  position:relative;height:22px;margin:4px 0;border-radius:6px;background:#eef3f5;padding:4px 5px 4px 14px;
  cursor:pointer;will-change:transform;
}
#icode-option1-root .r1076-deal:before{content:"";position:absolute;left:5px;top:8px;width:5px;height:5px;border-radius:50%;background:#f0a13a}
#icode-option1-root .r1076-crm-col:nth-child(2) .r1076-deal:before{background:#6ec7b4}
#icode-option1-root .r1076-crm-col:nth-child(3) .r1076-deal:before{background:#7a7fe5}
#icode-option1-root .r1076-deal b{display:block;font-size:5.5px;white-space:nowrap;overflow:hidden}
#icode-option1-root .r1076-deal small{display:block;font-size:4.8px;color:#8b9ba3}

/* responsive */
@media(max-width:1050px){
  #icode-option1-root [data-panel="1"] .r1070-grid{grid-template-columns:1fr!important;padding:0 12px!important}
  #icode-option1-root [data-panel="1"] .r1070-card{min-height:0!important}
  #icode-option1-root [data-panel="1"] .r1070-preview{height:180px!important;min-height:180px!important;max-height:180px!important}
}

@media(prefers-reduced-motion:reduce){
  #icode-option1-root .r1076-flow-workspace{transition:none!important}
}