/* CRM KIA pages - shared styles (scoped with .ems- prefix) */
/* Enquiry Management System page - scoped styles (prefix: ems-) */
.ems-page { font-family: 'Poppins', sans-serif; color: #1f2a44; --ems-brand:#f05423; --ems-navy:#1b2559; --ems-soft:#fff4ef; --ems-line:#e8ebf3; }
.ems-page h1, .ems-page h2, .ems-page h3, .ems-page h4, .ems-page h5 { font-family: 'Poppins', sans-serif; color: var(--ems-navy); }
.ems-section { padding: 80px 0; }
.ems-section.alt { background: #f7f8fc; }
.ems-eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ems-brand); background:var(--ems-soft); padding:6px 14px; border-radius:30px; margin-bottom:16px; }
.ems-heading { font-size:34px; font-weight:700; line-height:1.3; margin:0 0 14px; }
.ems-sub { font-size:16px; line-height:1.8; color:#5b6580; max-width:720px; margin:0 auto 46px; }
.ems-center { text-align:center; }

/* Hero */
.ems-hero { position:relative; padding:150px 0 90px; background:linear-gradient(135deg,#fff4ef 0%,#ffffff 45%,#eef1ff 100%); overflow:hidden; }
.ems-hero:before { content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(240,84,35,.18),transparent 70%); }
.ems-hero:after { content:""; position:absolute; left:-140px; bottom:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(27,37,89,.12),transparent 70%); }
.ems-hero .container { position:relative; z-index:2; }
.ems-hero h1 { font-size:46px; font-weight:700; line-height:1.2; margin:0 0 20px; }
.ems-hero h1 span { color:var(--ems-brand); }
.ems-hero p { font-size:17px; line-height:1.8; color:#5b6580; margin-bottom:30px; }
.ems-btn { display:inline-block; padding:14px 30px; border-radius:8px; font-weight:600; font-size:14px; transition:all .25s; margin:0 10px 10px 0; }
.ems-btn.primary { background:var(--ems-brand); color:#fff; box-shadow:0 10px 24px rgba(240,84,35,.3); }
.ems-btn.primary:hover { background:#d8431a; color:#fff; transform:translateY(-2px); }
.ems-btn.ghost { border:2px solid var(--ems-navy); color:var(--ems-navy); }
.ems-btn.ghost:hover { background:var(--ems-navy); color:#fff; }

/* CRM app window mock (hero) */
.ems-app { background:#fff; border-radius:14px; box-shadow:0 30px 70px rgba(27,37,89,.22); border:1px solid var(--ems-line); overflow:hidden; font-size:12px; }
.ems-app-bar { background:#f1f3fa; padding:9px 14px; display:flex; align-items:center; border-bottom:1px solid var(--ems-line); }
.ems-app-bar i { width:9px; height:9px; border-radius:50%; margin-right:5px; display:inline-block; }
.ems-app-bar .url { margin:0 auto; background:#fff; border-radius:20px; padding:3px 18px; font-size:11px; color:#8a93ab; }
.ems-app-body { display:flex; min-height:360px; }
.ems-side { width:46px; background:var(--ems-navy); padding:12px 0; text-align:center; }
.ems-side span { display:block; width:30px; height:30px; line-height:30px; margin:0 auto 8px; border-radius:8px; color:#9aa5d6; font-size:14px; }
.ems-side span.on { background:var(--ems-brand); color:#fff; }
.ems-main { flex:1; padding:14px; background:#f7f8fc; min-width:0; }
.ems-main-head { display:flex; align-items:center; margin-bottom:12px; }
.ems-main-head b { font-size:14px; color:var(--ems-navy); }
.ems-main-head .add { margin-left:auto; background:var(--ems-brand); color:#fff; font-size:11px; padding:5px 12px; border-radius:6px; font-weight:600; }
.ems-kpis { display:flex; margin:0 -4px 12px; }
.ems-kpi { flex:1; margin:0 4px; background:#fff; border:1px solid var(--ems-line); border-radius:8px; padding:9px 10px; }
.ems-kpi small { display:block; color:#8a93ab; font-size:10px; }
.ems-kpi b { font-size:17px; color:var(--ems-navy); }
.ems-kpi em { font-style:normal; font-size:10px; color:#188a4f; margin-left:4px; }
.ems-funnel { background:#fff; border:1px solid var(--ems-line); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.ems-funnel small { color:#8a93ab; font-size:10px; display:block; margin-bottom:6px; }
.ems-bar { height:9px; border-radius:6px; margin-bottom:5px; }
.ems-list { background:#fff; border:1px solid var(--ems-line); border-radius:8px; }
.ems-list .r { display:flex; align-items:center; padding:8px 10px; border-bottom:1px solid var(--ems-line); }
.ems-list .r:last-child { border-bottom:0; }
.ems-list .av { width:24px; height:24px; border-radius:50%; background:var(--ems-soft); color:var(--ems-brand); font-weight:700; text-align:center; line-height:24px; margin-right:9px; font-size:11px; flex:none; }
.ems-list .r small { color:#8a93ab; font-size:10px; margin-left:6px; }
.ems-tag { margin-left:auto; font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.ems-tag.t1 { background:#e8ebff; color:#3b4bb8; } .ems-tag.t2 { background:#e3f7ec; color:#188a4f; } .ems-tag.t3 { background:#fff0d9; color:#b66d00; } .ems-tag.t4 { background:#ffe5e5; color:#c23030; }
.ems-float { position:absolute; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 14px 30px rgba(27,37,89,.2); font-size:12px; font-weight:600; color:var(--ems-navy); z-index:3; }
.ems-float span { color:var(--ems-brand); }

/* Kanban board */
.ems-board { display:flex; flex-wrap:wrap; align-items:stretch; padding:6px 0; margin:0 -6px; }
.ems-col { flex:1 1 150px; min-width:0; margin:6px; background:#eef0f8; border-radius:12px; padding:12px; }
.ems-col-h { display:flex; align-items:center; font-size:13px; font-weight:600; color:var(--ems-navy); margin-bottom:12px; }
.ems-col-h i { width:9px; height:9px; border-radius:50%; margin-right:8px; }
.ems-col-h span { margin-left:auto; background:#fff; border-radius:10px; padding:1px 8px; font-size:11px; color:#5b6580; }
.ems-lead { background:#fff; border-radius:9px; padding:11px 12px; margin-bottom:9px; box-shadow:0 3px 8px rgba(27,37,89,.06); font-size:12px; color:#44506b; }
.ems-lead b { display:block; color:var(--ems-navy); font-size:12.5px; margin-bottom:2px; }
.ems-lead small { display:block; color:#8a93ab; font-size:11px; }
.ems-lead .src { display:inline-block; margin-top:6px; font-size:10px; background:var(--ems-soft); color:var(--ems-brand); padding:2px 8px; border-radius:10px; font-weight:600; }

/* Stats strip */
.ems-stats { position:relative; z-index:11; background:#fff; padding:40px 0 0; }
.ems-stats .box { background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(27,37,89,.12); padding:30px 20px; }
.ems-stat { text-align:center; padding:6px 10px; }
.ems-stat b { display:block; font-size:30px; color:var(--ems-brand); font-weight:700; }
.ems-stat span { font-size:13px; color:#5b6580; }

/* Compare table */
.ems-table-wrap { border-radius:14px; overflow:hidden; box-shadow:0 14px 40px rgba(27,37,89,.08); border:1px solid var(--ems-line); background:#fff; }
.ems-table { width:100%; border-collapse:collapse; margin:0; }
.ems-table th { background:var(--ems-navy); color:#fff; font-size:14px; font-weight:600; padding:16px 22px; text-align:left; }
.ems-table td { padding:15px 22px; font-size:14px; border-top:1px solid var(--ems-line); color:#44506b; vertical-align:top; }
.ems-table tr:nth-child(even) td { background:#fafbfe; }
.ems-table td:first-child { font-weight:600; color:var(--ems-navy); width:38%; }
.ems-table td .bad { color:#c23030; margin-right:6px; } .ems-table td .good { color:#188a4f; margin-right:6px; }
.ems-table.fields td:first-child { width:30%; }

/* Pipeline stages */
.ems-stages { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
.ems-stage { position:relative; flex:1 1 150px; max-width:190px; margin:8px; padding:20px 12px; text-align:center; background:#fff; border:1px solid var(--ems-line); border-radius:14px; box-shadow:0 10px 26px rgba(27,37,89,.07); transition:all .25s; }
.ems-stage:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,37,89,.14); }
.ems-stage .n { width:38px; height:38px; line-height:38px; border-radius:50%; margin:0 auto 10px; color:#fff; font-weight:700; font-size:14px; }
.ems-stage h5 { font-size:14px; font-weight:600; margin:0; }
.ems-stage:not(:last-child):after { content:"\2192"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:#b7bdd1; font-size:18px; }

/* Process flow */
.ems-flow { display:flex; flex-wrap:wrap; margin:0 -10px; }
.ems-flow-item { width:20%; padding:10px; }
.ems-flow-card { height:100%; background:#fff; border:1px solid var(--ems-line); border-radius:16px; padding:26px 16px 22px; text-align:center; position:relative; box-shadow:0 10px 26px rgba(27,37,89,.06); transition:all .25s; }
.ems-flow-card:hover { transform:translateY(-6px); border-color:var(--ems-brand); box-shadow:0 18px 36px rgba(240,84,35,.15); }
.ems-flow-card .no { position:absolute; top:-15px; left:50%; margin-left:-15px; width:30px; height:30px; line-height:30px; border-radius:50%; background:var(--ems-brand); color:#fff; font-weight:700; font-size:13px; box-shadow:0 6px 14px rgba(240,84,35,.4); }
.ems-flow-card .ic { width:54px; height:54px; margin:6px auto 12px; border-radius:14px; background:var(--ems-soft); color:var(--ems-brand); font-size:24px; line-height:54px; }
.ems-flow-card h5 { font-size:14px; font-weight:600; margin:0 0 6px; }
.ems-flow-card p { font-size:12.5px; color:#5b6580; margin:0; line-height:1.6; }

/* Enquiry record panel */
.ems-record { background:#fff; border:1px solid var(--ems-line); border-radius:16px; box-shadow:0 20px 50px rgba(27,37,89,.1); overflow:hidden; }
.ems-record-head { display:flex; align-items:center; padding:14px 22px; background:linear-gradient(90deg,var(--ems-navy),#2b3a86); color:#fff; }
.ems-record-head .dot { width:10px; height:10px; border-radius:50%; margin-right:6px; }
.ems-record-head b { margin-left:12px; font-size:14px; font-weight:600; color:#fff; }
.ems-record-head .id { margin-left:auto; font-size:12px; background:rgba(255,255,255,.15); padding:3px 12px; border-radius:20px; }
.ems-record-grid { display:flex; flex-wrap:wrap; }
.ems-field { width:50%; display:flex; align-items:flex-start; padding:20px 24px; border-bottom:1px solid var(--ems-line); transition:background .25s; }
.ems-field:nth-child(odd) { border-right:1px solid var(--ems-line); }
.ems-field:nth-last-child(-n+2) { border-bottom:0; }
.ems-field:hover { background:#fff8f5; }
.ems-field .fi { flex:none; width:46px; height:46px; line-height:46px; text-align:center; font-size:20px; border-radius:12px; background:var(--ems-soft); margin-right:16px; transition:all .25s; }
.ems-field:hover .fi { transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 18px rgba(240,84,35,.25); }
.ems-field h5 { font-size:15px; font-weight:600; margin:0 0 4px; }
.ems-field p { font-size:13.5px; color:#5b6580; margin:0; line-height:1.6; }
.ems-field p.chips span { display:inline-block; font-size:11px; font-weight:600; padding:2px 10px; border-radius:20px; margin:2px 0; }
.ems-field p.chips i { font-style:normal; color:#9aa3bd; margin:0 5px; }
.ems-field .c1 { background:#e8ebff; color:#3b4bb8; } .ems-field .c2 { background:#e3eaff; color:#2f5fd0; } .ems-field .c3 { background:#e3f7ec; color:#188a4f; } .ems-field .c4 { background:#ffe5e5; color:#c23030; }
@media (max-width: 767px) {
  .ems-field { width:100%; padding:16px 18px; border-right:0 !important; border-bottom:1px solid var(--ems-line) !important; }
  .ems-field:last-child { border-bottom:0 !important; }
}

/* JS circular flow diagram */
.ems-circle-wrap { width:100%; max-width:760px; margin:0 auto; position:relative; }
.ems-stage-box { position:relative; width:760px; height:760px; transform-origin:top left; }
.ems-stage-box svg { position:absolute; left:0; top:0; width:760px; height:760px; pointer-events:none; }
.ems-node { position:absolute; width:128px; height:128px; margin:-64px 0 0 -64px; border-radius:50%; background:#fff; border:5px solid #ccc; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; cursor:pointer; transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease, opacity .35s ease; box-shadow:0 8px 20px rgba(27,37,89,.1); animation:emsPop .6s cubic-bezier(.22,.8,.3,1) backwards; will-change:transform; }
.ems-stage-box.has-active .ems-node:not(.on) { opacity:.5; }
.ems-center-in { transition:opacity .22s ease, transform .22s ease; display:flex; flex-direction:column; align-items:center; }
.ems-center-in.swap { opacity:0; transform:scale(.96); }
.ems-node .ico { font-size:28px; line-height:1; margin-bottom:5px; }
.ems-node .lbl { font-size:11.5px; font-weight:600; line-height:1.25; color:var(--ems-navy); }
.ems-node .no { position:absolute; top:-6px; left:-6px; width:28px; height:28px; line-height:28px; border-radius:50%; color:#fff; font-weight:700; font-size:13px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.ems-node.on { transform:scale(1.12); box-shadow:0 16px 34px rgba(27,37,89,.25); z-index:5; }
@keyframes emsPop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
.ems-center-box { position:absolute; left:380px; top:380px; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; background:radial-gradient(circle,#fff 60%,#f7f8fc); border:1px dashed #d7dbe9; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px; }
.ems-center-box .t1 { font-size:26px; font-weight:700; color:var(--ems-navy); line-height:1.1; letter-spacing:.5px; }
.ems-center-box .t2 { font-size:30px; font-weight:800; color:var(--ems-navy); line-height:1.1; letter-spacing:1px; }
.ems-center-box .t3 { font-size:14px; letter-spacing:3px; color:#5b6580; margin-bottom:12px; }
.ems-center-box .dots { height:4px; width:120px; border-radius:4px; background:linear-gradient(90deg,#f7941d,#e8457a,#7b4bd1,#3b82f6,#17a2b8,#22a964); margin:6px 0 12px; }
.ems-center-box .desc { font-size:12.5px; color:#5b6580; line-height:1.55; min-height:58px; }
.ems-center-box .desc b { display:block; color:var(--ems-brand); margin-bottom:2px; font-size:13px; }
.ems-steps-list { list-style:none; margin:0; padding:0 0 0 10px; position:relative; }
.ems-steps-list:before { content:""; position:absolute; left:28px; top:14px; bottom:14px; width:2px; background:var(--ems-line); }
.ems-steps-list li { position:relative; padding:0 0 22px 62px; min-height:44px; }
.ems-steps-list li .n { position:absolute; left:0; top:0; width:38px; height:38px; line-height:38px; border-radius:50%; color:#fff; text-align:center; font-weight:700; font-size:14px; box-shadow:0 6px 14px rgba(0,0,0,.18); }
.ems-steps-list li b { display:block; font-size:15px; color:var(--ems-navy); }
.ems-steps-list li span { font-size:13px; color:#5b6580; line-height:1.6; }

/* Feature cards */
.ems-card { --mx:50%; --my:0%; position:relative; background:linear-gradient(165deg,#ffffff 0%,#f8f9fe 100%); border:1px solid var(--ems-line); border-radius:22px; padding:32px 28px 28px; height:100%; margin-bottom:0; overflow:hidden; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease; }
/* cursor spotlight */
.ems-card:before { content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx) var(--my), rgba(240,84,35,.12), transparent 70%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
/* top accent line */
.ems-card:after { content:""; position:absolute; left:28px; right:28px; top:0; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--ems-brand),#ff9a6b); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,.8,.3,1); }
.ems-card:hover { transform:translateY(-8px); box-shadow:0 28px 56px rgba(27,37,89,.14); border-color:#ffd9c9; }
.ems-card:hover:before { opacity:1; }
.ems-card:hover:after { transform:scaleX(1); }
.ems-card .num { position:absolute; right:24px; top:20px; font-size:44px; font-weight:700; line-height:1; letter-spacing:-1px; color:transparent; -webkit-text-stroke:1.5px #e3e6f2; transition:-webkit-text-stroke-color .35s ease, transform .35s ease; }
.ems-card:hover .num { -webkit-text-stroke-color:#ffc4ad; transform:translateY(-3px); }
.ems-card .ic { position:relative; width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#fff1ea,#ffe0d2); box-shadow:inset 0 0 0 1px rgba(240,84,35,.15); color:var(--ems-brand); font-size:24px; line-height:56px; text-align:center; margin-bottom:22px; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, background .4s ease; }
.ems-card:hover .ic { background:#fff; box-shadow:inset 0 0 0 2px var(--ems-brand), 0 12px 24px rgba(240,84,35,.25); transform:scale(1.08) rotate(-6deg); }
.ems-card h4 { position:relative; font-size:18px; font-weight:600; line-height:1.35; margin:0 0 10px; }
.ems-card p { position:relative; font-size:14px; line-height:1.75; color:#5b6580; margin:0; }
.ems-card .more { position:relative; display:inline-flex; align-items:center; margin-top:18px; font-size:12.5px; font-weight:600; color:var(--ems-brand); opacity:0; transform:translateX(-8px); transition:all .35s ease; }
.ems-card:hover .more { opacity:1; transform:translateX(0); }
.ems-row-eq { display:flex; flex-wrap:wrap; }
.ems-row-eq > [class*="col-"] { display:flex; box-sizing:border-box; padding-bottom:24px; }
.ems-row-eq .ems-card { width:100%; }
.ems-row-eq .ems-card:hover { z-index:3; }

/* Tip */
.ems-tip { display:flex; align-items:center; background:linear-gradient(90deg,#fff4ef,#fff); border:1px solid #ffd9c9; border-left:5px solid var(--ems-brand); border-radius:12px; padding:22px 26px; margin-top:40px; }
.ems-tip .bulb { font-size:28px; margin-right:18px; }
.ems-tip p { margin:0; font-size:14.5px; line-height:1.7; color:#44506b; font-style:italic; }
.ems-tip p b { color:var(--ems-brand); font-style:normal; }

/* CTA */
.ems-cta { background:linear-gradient(135deg,#1b2559,#2b3a86); border-radius:22px; padding:60px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.ems-cta:before { content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(240,84,35,.35); filter:blur(30px); }
.ems-cta h2 { color:#fff; font-size:32px; font-weight:700; margin:0 0 12px; position:relative; }
.ems-cta p { color:#cfd5f0; margin:0 0 28px; font-size:16px; position:relative; }
.ems-cta a.ems-btn { position:relative; z-index:2; font-family:'Poppins',sans-serif; text-decoration:none; }
.ems-cta a.ems-btn.primary { background:#f05423 !important; border:2px solid #f05423 !important; color:#fff !important; box-shadow:0 10px 24px rgba(240,84,35,.4); }
.ems-cta a.ems-btn.primary:hover { background:#ff6a3d !important; border-color:#ff6a3d !important; color:#fff !important; transform:translateY(-2px); }
.ems-cta a.ems-btn.ghost { background:transparent !important; border:2px solid #fff !important; color:#fff !important; }
.ems-cta a.ems-btn.ghost:hover { background:#fff !important; color:#1b2559 !important; transform:translateY(-2px); }

@media (max-width: 991px) {
  .ems-flow-item { width:33.333%; }
  .ems-hero h1 { font-size:36px; }
  .ems-mock { margin-top:40px; }
}
@media (max-width: 767px) {
  .ems-section { padding:55px 0; }
  .ems-hero { padding:120px 0 80px; }
  .ems-hero h1 { font-size:30px; }
  .ems-heading { font-size:26px; }
  .ems-flow-item { width:50%; }
  .ems-stage:after { display:none; }
  .ems-stat { margin-bottom:16px; }
  .ems-table th, .ems-table td { padding:12px 14px; }
  .ems-cta { padding:40px 22px; }
}
@media (max-width: 480px) { .ems-flow-item { width:100%; } }

/* mobile fixes */
.ems-tip .bulb { flex:none; }
@media (max-width: 767px) {
  .ems-row-eq > [class*="col-"] { flex:0 0 100%; width:100%; max-width:100%; }
  .ems-float { display:none; }
  .ems-row-eq .ems-card { height:auto; }
  .ems-row-eq .ems-card:hover { transform:translateY(-3px); }
  .ems-main { padding:10px; }
  .ems-list .r small { display:none; }
  .ems-kpi b { font-size:15px; }
  .ems-tip { align-items:flex-start; padding:18px; }
  .ems-tip .bulb { margin-right:12px; font-size:24px; }
  .ems-btn { display:block; text-align:center; margin-right:0; }
  .ems-cta a.ems-btn { display:block; max-width:320px; margin:0 auto 12px; }
  .ems-heading { font-size:24px; }
}

/* Product screens showcase */
.ems-showcase { background:linear-gradient(160deg,#141b45 0%,#1b2559 55%,#26357f 100%); overflow:hidden; }
.ems-showcase:before { content:""; position:absolute; left:50%; top:-120px; width:700px; height:700px; margin-left:-350px; border-radius:50%; background:radial-gradient(circle,rgba(240,84,35,.22),transparent 65%); pointer-events:none; }
.ems-showcase .container { position:relative; z-index:2; }
.ems-showcase .ems-eyebrow { background:rgba(255,255,255,.1); color:#ffb399; }
.ems-showcase .ems-heading { color:#fff; }
.ems-showcase .ems-sub { color:#c6cdee; margin-bottom:34px; }

.ems-shot-tabs { display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.ems-shot-tabs button { font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:500; color:#cfd5f0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:9px 18px; border-radius:30px; margin:4px; cursor:pointer; transition:all .3s ease; outline:none; }
.ems-shot-tabs button span { display:inline-block; margin-left:6px; font-size:11px; padding:1px 8px; border-radius:10px; background:rgba(255,255,255,.14); transition:all .3s ease; }
.ems-shot-tabs button:hover { background:rgba(255,255,255,.14); color:#fff; transform:translateY(-2px); }
.ems-shot-tabs button.on { background:#f05423; border-color:#f05423; color:#fff; box-shadow:0 10px 24px rgba(240,84,35,.4); }
.ems-shot-tabs button.on span { background:rgba(255,255,255,.25); }

.ems-shot-frame { max-width:1100px; margin:0 auto; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); }
.ems-shot-bar { display:flex; align-items:center; background:#eceff8; padding:10px 16px; border-bottom:1px solid #dde1ef; }
.ems-shot-bar i { width:10px; height:10px; border-radius:50%; margin-right:6px; display:inline-block; }
.ems-shot-bar .url { margin:0 auto; background:#fff; border-radius:20px; padding:3px 22px; font-size:12px; color:#8a93ab; }
.ems-shot-bar .zoom { font-size:11px; color:#8a93ab; }
.ems-shot-stage { position:relative; width:100%; aspect-ratio:1920 / 945; background:#f7f8fc; cursor:zoom-in; }
.ems-shot-stage img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.015); transition:opacity .5s ease, transform .6s cubic-bezier(.22,.8,.3,1); pointer-events:none; }
.ems-shot-stage img.on { opacity:1; transform:scale(1); }

.ems-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(10,14,40,.92); display:flex; align-items:center; justify-content:center; padding:30px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; cursor:zoom-out; }
.ems-lightbox.open { opacity:1; visibility:visible; }
.ems-lightbox img { max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.96); transition:transform .35s cubic-bezier(.22,.8,.3,1); }
.ems-lightbox.open img { transform:scale(1); }
.ems-lightbox .x { position:absolute; right:22px; top:14px; background:none; border:0; color:#fff; font-size:38px; line-height:1; cursor:pointer; }

@media (max-width: 767px) {
  .ems-shot-bar .zoom { display:none; }
  .ems-shot-bar .url { padding:3px 12px; font-size:11px; }
  .ems-shot-tabs button { font-size:12.5px; padding:8px 14px; }
  .ems-lightbox { padding:10px; }
}

/* ===== Field Sales Management System page (fs- prefix) ===== */

/* hero visit-card mock */
.fs-visit { background:#fff; border-radius:16px; box-shadow:0 30px 70px rgba(27,37,89,.22); border:1px solid var(--ems-line); overflow:hidden; font-size:12px; }
.fs-map { position:relative; height:180px; background:linear-gradient(135deg,#e6efff,#f4f7ff); overflow:hidden; }
.fs-map:before { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background-image:linear-gradient(rgba(27,37,89,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(27,37,89,.07) 1px,transparent 1px); background-size:30px 30px; }
.fs-map:after { content:""; position:absolute; left:-10%; top:46%; width:120%; height:14px; background:rgba(255,255,255,.9); transform:rotate(-14deg); box-shadow:0 0 0 1px rgba(27,37,89,.06); }
.fs-road2 { position:absolute; left:55%; top:-10%; width:12px; height:130%; background:rgba(255,255,255,.9); transform:rotate(18deg); box-shadow:0 0 0 1px rgba(27,37,89,.06); }
.fs-pin { position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-26px 0 0 -11px; background:var(--ems-brand); border-radius:50% 50% 50% 0; transform:rotate(-45deg); z-index:3; box-shadow:0 8px 16px rgba(240,84,35,.45); }
.fs-pin:after { content:""; position:absolute; left:7px; top:7px; width:8px; height:8px; border-radius:50%; background:#fff; }
.fs-pulse { position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-6px 0 0 -10px; border-radius:50%; background:rgba(240,84,35,.35); z-index:2; animation:fsPulse 2s infinite; }
@keyframes fsPulse { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(4); opacity:0; } }
.fs-map .tag { position:absolute; left:14px; top:14px; background:#fff; border-radius:20px; padding:5px 12px; font-weight:600; color:var(--ems-navy); font-size:11px; box-shadow:0 6px 14px rgba(27,37,89,.12); z-index:4; }
.fs-map .tag b { color:#188a4f; }
.fs-vbody { padding:16px; }
.fs-vhead { display:flex; align-items:center; margin-bottom:14px; }
.fs-vhead .av { width:36px; height:36px; line-height:36px; border-radius:50%; background:var(--ems-soft); color:var(--ems-brand); font-weight:700; text-align:center; margin-right:10px; }
.fs-vhead b { display:block; color:var(--ems-navy); font-size:13px; }
.fs-vhead small { color:#8a93ab; font-size:11px; }
.fs-vhead .st { margin-left:auto; background:#e3f7ec; color:#188a4f; font-weight:600; font-size:10.5px; padding:4px 11px; border-radius:20px; }
.fs-checks { display:flex; flex-wrap:wrap; margin:0 -4px; }
.fs-chk { width:calc(50% - 8px); margin:4px; border:1px solid var(--ems-line); border-radius:10px; padding:9px 11px; background:#fbfcff; }
.fs-chk small { display:block; color:#8a93ab; font-size:10px; }
.fs-chk b { font-size:12px; color:var(--ems-navy); }
.fs-chk b i { font-style:normal; color:#188a4f; margin-right:4px; }
.fs-vfoot { display:flex; align-items:center; margin-top:12px; }
.fs-timer { font-weight:700; color:var(--ems-navy); font-size:15px; letter-spacing:.5px; }
.fs-timer small { display:block; font-weight:500; color:#8a93ab; font-size:10px; letter-spacing:0; }
.fs-out { margin-left:auto; background:var(--ems-navy); color:#fff; font-weight:600; font-size:12px; padding:9px 18px; border-radius:8px; }

/* 2.1 tracked stages */
.fs-stages { display:flex; flex-wrap:wrap; margin:0 -12px; }
.fs-stage { width:33.333%; padding:0 12px 24px; display:flex; }
.fs-stage-in { position:relative; width:100%; background:linear-gradient(165deg,#fff,#f8f9fe); border:1px solid var(--ems-line); border-radius:22px; padding:28px 26px; overflow:hidden; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease; }
.fs-stage-in:before { content:""; position:absolute; left:0; top:0; right:0; height:5px; background:var(--c); }
.fs-stage-in:hover { transform:translateY(-8px); box-shadow:0 28px 56px rgba(27,37,89,.14); }
.fs-stage-top { display:flex; align-items:center; margin-bottom:20px; }
.fs-stage-top .n { width:44px; height:44px; line-height:44px; border-radius:14px; background:var(--c); color:#fff; text-align:center; font-weight:700; font-size:18px; box-shadow:0 10px 20px rgba(27,37,89,.18); margin-right:14px; }
.fs-stage-top h4 { margin:0; font-size:19px; font-weight:600; }
.fs-step { display:flex; align-items:flex-start; padding:14px 0; border-top:1px dashed #dde1ef; }
.fs-step .lb { flex:none; width:82px; font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--c); padding-top:2px; }
.fs-step p { margin:0; font-size:14px; line-height:1.65; color:#44506b; }

/* 2.2 classification */
.fs-class { display:flex; flex-wrap:wrap; margin:0 -12px; }
.fs-class-item { width:25%; padding:0 12px 24px; display:flex; }
.fs-class-card { width:100%; background:#fff; border:1px solid var(--ems-line); border-radius:20px; padding:26px 22px; position:relative; overflow:hidden; transition:all .4s cubic-bezier(.22,.8,.3,1); }
.fs-class-card:after { content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--c); opacity:.1; transition:transform .5s ease; }
.fs-class-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(27,37,89,.13); border-color:var(--c); }
.fs-class-card:hover:after { transform:scale(1.6); }
.fs-class-card .pill { display:inline-block; font-size:12.5px; font-weight:600; color:#fff; background:var(--c); padding:5px 14px; border-radius:30px; margin-bottom:18px; position:relative; z-index:1; }
.fs-class-card .al { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8a93ab; margin-bottom:6px; position:relative; z-index:1; }
.fs-class-card p { margin:0; font-size:14.5px; line-height:1.65; color:var(--ems-navy); font-weight:500; position:relative; z-index:1; }

/* 2.4 flowchart */
.fs-flow { max-width:720px; margin:0 auto; text-align:center; }
.fs-node { position:relative; background:#fff; border:1px solid var(--ems-line); border-radius:16px; padding:16px 22px 16px 62px; text-align:left; box-shadow:0 10px 26px rgba(27,37,89,.07); opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, border-color .3s ease; }
.fs-flow.in .fs-node, .fs-flow.in .fs-branch, .fs-flow.in .fs-arrow { opacity:1; transform:none; }
.fs-node:hover { box-shadow:0 18px 38px rgba(240,84,35,.16); border-color:#ffc9b3; }
.fs-node .no { position:absolute; left:16px; top:50%; width:34px; height:34px; margin-top:-17px; line-height:34px; text-align:center; border-radius:50%; background:var(--ems-brand); color:#fff; font-weight:700; font-size:14px; box-shadow:0 6px 14px rgba(240,84,35,.35); }
.fs-node.end .no { background:#22a465; box-shadow:0 6px 14px rgba(34,164,101,.35); }
.fs-node h5 { margin:0; font-size:15px; font-weight:600; }
.fs-node h5 em { font-style:normal; font-weight:500; color:#8a93ab; font-size:13px; }
.fs-node .chips { margin-top:8px; }
.fs-node .chips span { display:inline-block; font-size:11px; font-weight:600; background:var(--ems-soft); color:var(--ems-brand); padding:3px 11px; border-radius:20px; margin:2px 4px 2px 0; }
.fs-arrow { position:relative; height:34px; opacity:0; transition:opacity .6s ease; }
.fs-arrow:before { content:""; position:absolute; left:50%; top:4px; bottom:10px; width:2px; margin-left:-1px; background:repeating-linear-gradient(to bottom,var(--ems-brand) 0 4px,transparent 4px 8px); }
.fs-arrow:after { content:""; position:absolute; left:50%; bottom:3px; width:8px; height:8px; margin-left:-5px; border-right:2px solid var(--ems-brand); border-bottom:2px solid var(--ems-brand); transform:rotate(45deg); }
.fs-flow.in > :nth-child(1) { transition-delay:.05s; } .fs-flow.in > :nth-child(2) { transition-delay:.12s; } .fs-flow.in > :nth-child(3) { transition-delay:.2s; } .fs-flow.in > :nth-child(4) { transition-delay:.27s; } .fs-flow.in > :nth-child(5) { transition-delay:.35s; } .fs-flow.in > :nth-child(6) { transition-delay:.42s; } .fs-flow.in > :nth-child(7) { transition-delay:.5s; } .fs-flow.in > :nth-child(8) { transition-delay:.57s; } .fs-flow.in > :nth-child(9) { transition-delay:.65s; } .fs-flow.in > :nth-child(10) { transition-delay:.72s; } .fs-flow.in > :nth-child(11) { transition-delay:.8s; } .fs-flow.in > :nth-child(12) { transition-delay:.87s; } .fs-flow.in > :nth-child(13) { transition-delay:.95s; } .fs-flow.in > :nth-child(14) { transition-delay:1.02s; } .fs-flow.in > :nth-child(15) { transition-delay:1.1s; } .fs-flow.in > :nth-child(16) { transition-delay:1.17s; } .fs-flow.in > :nth-child(17) { transition-delay:1.25s; }
.fs-branch { display:flex; flex-wrap:wrap; margin:0 -8px; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.fs-branch .b { width:33.333%; padding:0 8px; display:flex; }
.fs-branch .bc { width:100%; background:#fff; border:1px solid var(--ems-line); border-top:4px solid var(--c); border-radius:14px; padding:14px 12px; box-shadow:0 8px 20px rgba(27,37,89,.06); transition:transform .3s ease, box-shadow .3s ease; }
.fs-branch .bc:hover { transform:translateY(-5px); box-shadow:0 16px 32px rgba(27,37,89,.12); }
.fs-branch .bc b { display:block; font-size:12.5px; color:var(--c); }
.fs-branch .bc i { display:block; font-style:normal; color:#9aa3bd; margin:2px 0; }
.fs-branch .bc span { font-size:13px; font-weight:600; color:var(--ems-navy); }

@media (max-width: 991px) {
  .fs-stage { width:100%; }
  .fs-class-item { width:50%; }
}
@media (max-width: 767px) {
  .fs-class-item { width:100%; }
  .fs-branch .b { width:100%; margin-bottom:10px; }
  .fs-node { padding:14px 16px 14px 56px; }
  .fs-map { height:150px; }
}

/* stats strip: keep 2 per row on mobile even when text heights differ */
@media (max-width: 767px) {
  .ems-stats .row > .ems-stat:nth-child(2n+1) { clear:left; }
}

/* Field Service Management diagram - hub with bubbles and side notes (JS-rendered) */
.fsv-wrap { width:100%; max-width:1200px; margin:0 auto; position:relative; }
.fsv-stage { position:relative; width:1200px; height:720px; transform-origin:top left; }
.fsv-stage svg { position:absolute; left:0; top:0; width:1200px; height:720px; pointer-events:none; }
.fsv-hub { position:absolute; left:600px; top:360px; width:270px; height:270px; margin:-135px 0 0 -135px; border-radius:50%; background:radial-gradient(circle at 32% 26%,#ffa87d,#f05423 68%); box-shadow:0 0 0 12px rgba(240,84,35,.14), 0 0 0 26px rgba(240,84,35,.07), 0 28px 56px rgba(240,84,35,.35); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; z-index:2; }
.fsv-hub .t { font-size:32px; font-weight:700; line-height:1.18; text-shadow:0 2px 8px rgba(0,0,0,.18); }
.fsv-node { position:absolute; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; background:#fff; border:4px solid #e3e6f2; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px; cursor:pointer; box-shadow:0 10px 24px rgba(27,37,89,.12); z-index:3; transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease, border-color .35s ease, opacity .35s ease; animation:emsPop .6s cubic-bezier(.22,.8,.3,1) backwards; }
.fsv-node .ico { font-size:25px; line-height:1; margin-bottom:4px; }
.fsv-node .lbl { font-size:10.5px; font-weight:600; line-height:1.2; color:var(--ems-navy); }
.fsv-node.on { transform:scale(1.14); border-color:var(--ems-brand); box-shadow:0 16px 34px rgba(240,84,35,.3); }
.fsv-txt { position:absolute; width:236px; font-size:12px; line-height:1.45; color:#44506b; z-index:1; transition:opacity .35s ease, transform .35s ease; }
.fsv-txt ul { list-style:none; margin:0; padding:0; }
.fsv-txt li { position:relative; margin-bottom:4px; }
.fsv-txt.r li { padding-left:14px; }
.fsv-txt.l { text-align:right; }
.fsv-txt.l li { padding-right:14px; }
.fsv-txt li:before { content:""; position:absolute; top:7px; width:6px; height:6px; border-radius:50%; background:var(--ems-brand); }
.fsv-txt.r li:before { left:0; }
.fsv-txt.l li:before { right:0; }
.fsv-txt.on { color:var(--ems-navy); transform:translateX(4px); }
.fsv-txt.l.on { transform:translateX(-4px); }
.fsv-txt.on li { font-weight:500; }
.fsv-stage.has-active .fsv-node:not(.on), .fsv-stage.has-active .fsv-txt:not(.on) { opacity:.45; }

.fsv-list { list-style:none; margin:0; padding:0; }
.fsv-list > li { background:#fff; border:1px solid var(--ems-line); border-left:5px solid var(--ems-brand); border-radius:14px; padding:16px 18px; margin-bottom:14px; box-shadow:0 8px 20px rgba(27,37,89,.06); }
.fsv-list h5 { margin:0 0 8px; font-size:15px; font-weight:600; }
.fsv-list ul { margin:0; padding-left:18px; }
.fsv-list ul li { margin:0 0 4px; font-size:13px; color:#5b6580; }

/* ===== Quotation Management System page (qt- prefix) ===== */

/* hero quotation document mock */
.qt-doc { background:#fff; border-radius:16px; box-shadow:0 30px 70px rgba(27,37,89,.22); border:1px solid var(--ems-line); overflow:hidden; font-size:12px; }
.qt-doc-head { display:flex; align-items:center; padding:16px 18px; background:linear-gradient(90deg,var(--ems-navy),#2b3a86); color:#fff; }
.qt-doc-head b { font-size:14px; letter-spacing:.5px; }
.qt-doc-head small { display:block; opacity:.75; font-size:11px; margin-top:2px; }
.qt-doc-head .st { margin-left:auto; background:#fff0d9; color:#b66d00; font-weight:600; font-size:10.5px; padding:4px 12px; border-radius:20px; }
.qt-doc-body { padding:16px 18px; }
.qt-meta { display:flex; margin-bottom:14px; }
.qt-meta div { flex:1; }
.qt-meta small { display:block; color:#8a93ab; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.qt-meta b { color:var(--ems-navy); font-size:12.5px; }
.qt-lines { width:100%; border-collapse:collapse; margin:0 0 12px; }
.qt-lines th { text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#8a93ab; padding:6px 0; border-bottom:1px solid var(--ems-line); }
.qt-lines th:nth-child(n+2), .qt-lines td:nth-child(n+2) { text-align:right; }
.qt-lines td { padding:8px 0; border-bottom:1px solid var(--ems-line); color:#44506b; font-size:12px; }
.qt-lines td b { color:var(--ems-navy); display:block; }
.qt-lines td small { color:#8a93ab; font-size:10px; }
.qt-tot { margin-left:auto; width:60%; }
.qt-tot div { display:flex; justify-content:space-between; padding:3px 0; color:#5b6580; }
.qt-tot div.g { font-weight:700; color:var(--ems-navy); font-size:14px; border-top:1px solid var(--ems-line); margin-top:4px; padding-top:8px; }
.qt-tot div.g span:last-child { color:var(--ems-brand); }
.qt-doc-foot { display:flex; align-items:center; padding:12px 18px; background:#f7f8fc; border-top:1px solid var(--ems-line); }
.qt-doc-foot .ch span { display:inline-block; font-size:10.5px; font-weight:600; background:#fff; border:1px solid var(--ems-line); border-radius:20px; padding:3px 10px; margin-right:5px; color:var(--ems-navy); }
.qt-doc-foot .go { margin-left:auto; background:var(--ems-brand); color:#fff; font-weight:600; font-size:11.5px; padding:8px 14px; border-radius:8px; box-shadow:0 8px 16px rgba(240,84,35,.3); }

/* 3.1 lifecycle */
.qt-life { display:flex; flex-wrap:wrap; justify-content:center; }
.qt-step { position:relative; flex:1 1 150px; max-width:190px; margin:8px; text-align:center; }
.qt-step:not(:last-child):after { content:""; position:absolute; top:31px; left:calc(50% + 40px); width:calc(100% - 64px); border-top:3px dotted #c5cbe0; }
.qt-dot { position:relative; z-index:2; width:64px; height:64px; line-height:64px; margin:0 auto 14px; border-radius:20px; background:var(--c); color:#fff; font-size:26px; box-shadow:0 14px 28px rgba(27,37,89,.18); transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-radius .4s ease; }
.qt-step:hover .qt-dot { transform:translateY(-6px) scale(1.08); border-radius:50%; box-shadow:0 20px 36px rgba(27,37,89,.26); }
.qt-step h5 { margin:0; font-size:14.5px; font-weight:600; }
.qt-step small { display:block; margin-top:4px; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--c); }

/* 3.3 creation fields - tick lists */
.qt-list { list-style:none; margin:0; padding:0; }
.qt-list li { position:relative; padding:12px 0 12px 32px; border-top:1px dashed #dde1ef; font-size:14px; color:#44506b; line-height:1.55; }
.qt-list li:before { content:"\2713"; position:absolute; left:0; top:12px; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:var(--c); color:#fff; font-size:12px; font-weight:700; opacity:.92; }
.qt-list li em { display:block; font-style:normal; font-size:12px; color:#8a93ab; }

@media (max-width: 991px) {
  .qt-step:after { display:none; }
}
@media (max-width: 767px) {
  .qt-tot { width:100%; }
  .qt-doc-foot { flex-wrap:wrap; }
  .qt-doc-foot .ch { margin-bottom:8px; width:100%; }
}

/* ===== Font Awesome icon tuning ===== */
.ems-page i.fa-solid { line-height:inherit; }
.ems-float i { color:var(--ems-brand); margin-right:6px; }
.ems-tip .bulb { color:#f5a623; }
.ems-field .fi { color:var(--ems-brand); font-size:19px; }
.ems-side span i { font-size:14px; }
.ems-node .ico, .ems-node .ico i { line-height:1; }
.fsv-node .ico { color:var(--ems-brand); }
.fsv-list h5 i { color:var(--ems-brand); margin-right:6px; }
.ems-steps-list li b i { margin-right:4px; }
.ems-bad i, .ems-table td .bad i { color:#c23030; }

/* ===== Order Management System page (om- prefix) ===== */

/* 7-step lifecycle fits one row */
.qt-life.sm .qt-step { flex:1 1 128px; max-width:158px; }
.qt-life.sm .qt-step:not(:last-child):after { width:calc(100% - 60px); }

/* hero: order progress tracker */
.om-track { display:flex; align-items:center; margin:2px 0 14px; }
.om-track .d { width:16px; height:16px; border-radius:50%; background:#e3e6f2; flex:none; position:relative; }
.om-track .d.done { background:#22a465; }
.om-track .d.now { background:var(--ems-brand); box-shadow:0 0 0 5px rgba(240,84,35,.18); }
.om-track .ln { flex:1; height:3px; background:#e3e6f2; }
.om-track .ln.done { background:#22a465; }
.om-track-lbl { display:flex; justify-content:space-between; font-size:9.5px; color:#8a93ab; margin:-8px 0 12px; }
.om-pill { display:inline-block; font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:20px; background:#e8ebff; color:#3b4bb8; }

/* supply chain levels */
.om-levels { display:flex; flex-wrap:wrap; margin:0 -12px; }
.om-level { width:50%; padding:0 12px 24px; display:flex; }
.om-level-in { width:100%; background:linear-gradient(165deg,#fff,#f8f9fe); border:1px solid var(--ems-line); border-top:5px solid var(--c); border-radius:22px; padding:30px 28px; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
.om-level-in:hover { transform:translateY(-8px); box-shadow:0 28px 56px rgba(27,37,89,.14); }
.om-level-in .tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; background:var(--c); padding:4px 14px; border-radius:30px; margin-bottom:18px; }
.om-route { display:flex; align-items:center; }
.om-route .p { flex:1; text-align:center; }
.om-route .p i { display:block; width:60px; height:60px; line-height:60px; margin:0 auto 10px; border-radius:18px; background:var(--c); color:#fff; font-size:24px; box-shadow:0 12px 24px rgba(27,37,89,.18); }
.om-route .p b { font-size:14.5px; color:var(--ems-navy); }
.om-route .ar { flex:none; width:70px; height:3px; border-top:3px dotted #c5cbe0; position:relative; margin:0 6px 26px; }
.om-route .ar:after { content:""; position:absolute; right:-3px; top:-7px; width:9px; height:9px; border-right:3px solid #aab2cf; border-top:3px solid #aab2cf; transform:rotate(45deg); }

/* 4.2 who uses it pills */
.om-who { margin-top:8px; }
.om-who small { font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#8a93ab; margin-right:6px; }
.om-who span { display:inline-block; font-size:11px; font-weight:600; background:var(--ems-soft); color:var(--ems-brand); padding:2px 10px; border-radius:20px; margin:2px 4px 2px 0; }

/* 4.3 coloured order-creation flow */
.om-node { position:relative; display:flex; align-items:center; background:var(--bg); border:1px solid var(--bd); border-radius:18px; padding:14px 20px 14px 16px; text-align:left; box-shadow:0 10px 24px rgba(27,37,89,.06); opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease; }
.fs-flow.in .om-node { opacity:1; transform:none; }
.om-node:hover { box-shadow:0 18px 38px rgba(27,37,89,.14); }
.om-ic { flex:none; width:66px; height:66px; line-height:66px; text-align:center; border-radius:50%; background:#fff; color:var(--c); font-size:26px; box-shadow:0 8px 18px rgba(27,37,89,.12), inset 0 0 0 3px var(--bd); margin-right:16px; }
.om-txt { flex:1; min-width:0; }
.om-txt h5 { margin:0; font-size:15.5px; font-weight:600; display:flex; align-items:center; }
.om-txt h5 .no { flex:none; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:var(--c); color:#fff; font-size:12.5px; font-weight:700; margin-right:10px; }
.om-txt p { margin:3px 0 0 36px; font-size:12.5px; color:#5b6580; }
.om-side { flex:none; margin-left:14px; display:flex; align-items:center; }
.om-opt { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:78px; padding:8px 4px; margin-left:8px; background:#fff; border:1px solid var(--ems-line); border-radius:10px; font-size:11px; font-weight:600; color:var(--ems-navy); box-shadow:0 4px 10px rgba(27,37,89,.06); }
.om-opt i { font-size:18px; margin-bottom:3px; }
.om-oid { text-align:center; background:#fff; border:1.5px dashed #9db8e8; border-radius:10px; padding:7px 12px; }
.om-oid small { display:block; font-size:10px; color:#8a93ab; }
.om-oid b { font-size:12.5px; color:#2f5fd0; letter-spacing:.3px; }
.om-big { font-size:34px; color:var(--c); opacity:.9; }

@media (max-width: 991px) { .om-level { width:100%; } }
@media (max-width: 767px) {
  .om-node { flex-wrap:wrap; padding:14px; }
  .om-ic { width:54px; height:54px; line-height:54px; font-size:21px; margin-right:12px; }
  .om-side { width:100%; margin:12px 0 0; justify-content:flex-start; }
  .om-opt { margin:0 8px 0 0; }
  .om-route .ar { width:34px; }
  .qt-life.sm .qt-step { flex:1 1 40%; max-width:48%; }
}

/* ===== Dispatch Management System page (dm- prefix) ===== */
.qt-life.five .qt-step { flex:1 1 150px; max-width:200px; }

/* numbered coloured flow (number sits outside the icon, like the reference) */
.om-num { flex:none; width:38px; height:38px; line-height:38px; text-align:center; border-radius:50%; background:var(--c); color:#fff; font-size:13.5px; font-weight:700; margin-right:14px; box-shadow:0 6px 14px rgba(27,37,89,.2); }
.om-node.lead .om-txt h5 { line-height:1.35; }
.om-chips span { display:inline-block; font-size:11px; font-weight:600; background:#fff; color:var(--c); border:1px solid var(--bd); padding:3px 11px; border-radius:20px; margin:2px 0 2px 6px; }

/* odd last field spans the full row */
.ems-record-grid .ems-field:last-child:nth-child(odd) { width:100%; border-right:0; }

/* two documents per shipment */
.dm-doc { display:flex; align-items:center; }
.dm-doc .ico { flex:none; width:72px; height:72px; line-height:72px; text-align:center; border-radius:22px; background:var(--c); color:#fff; font-size:30px; box-shadow:0 14px 28px rgba(27,37,89,.2); margin-right:20px; transition:transform .4s cubic-bezier(.22,.8,.3,1), border-radius .4s ease; }
.om-level-in:hover .dm-doc .ico { transform:scale(1.08) rotate(-4deg); border-radius:50%; }
.dm-doc h4 { margin:0 0 6px; font-size:18px; font-weight:600; }
.dm-doc p { margin:0; font-size:14px; color:#5b6580; line-height:1.65; }

@media (max-width: 767px) {
  .dm-doc .ico { width:58px; height:58px; line-height:58px; font-size:24px; margin-right:14px; }
  .om-num { width:32px; height:32px; line-height:32px; margin-right:10px; }
  .om-chips { width:100%; margin-top:10px; }
  .om-chips span { margin:2px 6px 2px 0; }
}
.om-node.lead .om-txt p { margin-left:0; }

/* ===== Inventory Management System page (iv- prefix) ===== */

/* hero stock card */
.iv-kpis { display:flex; margin:0 -4px 14px; }
.iv-kpi { flex:1; margin:0 4px; background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:9px 11px; }
.iv-kpi small { display:block; color:#8a93ab; font-size:10px; }
.iv-kpi b { font-size:16px; color:var(--ems-navy); }
.iv-kpi.warn b { color:#c23030; }
.iv-row { display:flex; align-items:center; padding:9px 0; border-bottom:1px solid var(--ems-line); }
.iv-row:last-child { border-bottom:0; }
.iv-row .nm { width:96px; flex:none; }
.iv-row .nm b { display:block; color:var(--ems-navy); font-size:12px; }
.iv-row .nm small { color:#8a93ab; font-size:10px; }
.iv-bar { position:relative; flex:1; height:8px; background:#eceef7; border-radius:8px; margin:0 12px; }
.iv-bar i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#22a465,#4cd694); }
.iv-bar i.mid { background:linear-gradient(90deg,#f0a02a,#ffc66b); }
.iv-bar i.low { background:linear-gradient(90deg,#e2483d,#ff8a80); }
.iv-bar:after { content:""; position:absolute; left:30%; top:-3px; width:2px; height:14px; background:#8a93ab; opacity:.6; border-radius:2px; }
.iv-row .qty { width:82px; flex:none; text-align:right; font-size:11.5px; font-weight:600; color:var(--ems-navy); }
.iv-row .qty.low { color:#c23030; }

/* 6.1 component cards - key action block */
.iv-act { position:relative; margin-top:16px; padding-top:14px; border-top:1px dashed #dde1ef; }
.iv-act small { display:block; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ems-brand); margin-bottom:4px; }
.iv-act p { font-size:13.5px; color:#44506b; line-height:1.6; margin:0; }
.iv-act .om-who { margin-top:8px; }
.iv-purpose { font-size:14px; color:#5b6580; line-height:1.7; margin:0; position:relative; }

@media (max-width: 767px) {
  .iv-row .nm { width:80px; }
  .iv-row .qty { width:64px; font-size:10.5px; }
  .iv-kpi b { font-size:14px; }
}

/* ===== Production Management System page (pm- prefix) ===== */
.iv-act.nb { border-top:0; padding-top:0; margin-top:10px; }

/* hero production order */
.pm-prog { background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.pm-prog .top { display:flex; justify-content:space-between; font-size:11px; color:#8a93ab; margin-bottom:6px; }
.pm-prog .top b { color:var(--ems-navy); font-size:12.5px; }
.pm-prog .bar { height:9px; background:#e3e6f2; border-radius:9px; overflow:hidden; }
.pm-prog .bar i { display:block; width:64%; height:100%; border-radius:9px; background:linear-gradient(90deg,#f05423,#ff9a6b); }
.pm-stages { display:flex; margin:0 -3px 10px; }
.pm-st { flex:1; margin:0 3px; text-align:center; padding:7px 4px; border-radius:8px; font-size:10.5px; font-weight:600; background:#f1f3fa; color:#8a93ab; }
.pm-st i { display:block; font-size:13px; margin-bottom:2px; }
.pm-st.done { background:#e3f7ec; color:#188a4f; }
.pm-st.now { background:#fff0e8; color:var(--ems-brand); box-shadow:inset 0 0 0 1.5px var(--ems-brand); }

/* ===== QR Code Management System page (qr- prefix) ===== */
.qr-svg { display:block; width:100%; height:100%; }

/* hero QR card */
.qr-hero-body { display:flex; align-items:center; }
.qr-code { flex:none; width:132px; height:132px; padding:9px; background:#fff; border:1px solid var(--ems-line); border-radius:14px; box-shadow:0 10px 24px rgba(27,37,89,.1); margin-right:18px; position:relative; overflow:hidden; }
.qr-code:after { content:""; position:absolute; left:9px; right:9px; top:0; height:3px; background:var(--ems-brand); box-shadow:0 0 12px 2px rgba(240,84,35,.6); animation:qrScan 2.4s ease-in-out infinite; }
@keyframes qrScan { 0% { top:9px; } 50% { top:calc(100% - 12px); } 100% { top:9px; } }
.qr-info { flex:1; min-width:0; }
.qr-info .r { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--ems-line); font-size:12px; color:#5b6580; }
.qr-info .r:last-child { border-bottom:0; }
.qr-info .r b { color:var(--ems-navy); }
.qr-ok { display:inline-block; background:#e3f7ec; color:#188a4f; font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:20px; }

/* feature table as rows */
.qr-table-head, .qr-row { display:flex; align-items:center; }
.qr-table-head { padding:0 26px 10px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8a93ab; }
.qr-row { background:linear-gradient(165deg,#fff,#f8f9fe); border:1px solid var(--ems-line); border-radius:18px; padding:20px 26px; margin-bottom:14px; position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease; }
.qr-row:before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--ems-brand),#ff9a6b); transform:scaleY(0); transform-origin:top; transition:transform .4s ease; }
.qr-row:hover { transform:translateX(6px); box-shadow:0 18px 40px rgba(27,37,89,.12); border-color:#ffd9c9; }
.qr-row:hover:before { transform:scaleY(1); }
.qr-c1 { width:30%; display:flex; align-items:center; padding-right:16px; }
.qr-c2 { width:36%; padding-right:20px; font-size:14.5px; color:#44506b; line-height:1.6; }
.qr-c3 { width:34%; font-size:14.5px; color:var(--ems-navy); font-weight:500; line-height:1.6; display:flex; align-items:center; }
.qr-ic { flex:none; width:48px; height:48px; line-height:48px; text-align:center; border-radius:14px; background:linear-gradient(135deg,#fff1ea,#ffe0d2); box-shadow:inset 0 0 0 1px rgba(240,84,35,.15); color:var(--ems-brand); font-size:20px; margin-right:14px; transition:transform .4s cubic-bezier(.22,.8,.3,1); }
.qr-row:hover .qr-ic { transform:scale(1.1) rotate(-6deg); }
.qr-c1 b { font-size:16px; font-weight:600; color:var(--ems-navy); }
.qr-c3 i { flex:none; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; background:#e3f7ec; color:#188a4f; font-size:11px; margin-right:10px; }

/* in-app screens */
.qr-steps { display:flex; flex-wrap:wrap; align-items:stretch; margin:0 -12px; }
.qr-step { width:33.333%; padding:0 12px 24px; position:relative; display:flex; }
.qr-step-in { width:100%; background:#fff; border:1px solid var(--ems-line); border-radius:20px; box-shadow:0 14px 36px rgba(27,37,89,.08); overflow:hidden; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
.qr-step-in:hover { transform:translateY(-8px); box-shadow:0 26px 54px rgba(27,37,89,.15); }
.qr-step-t { display:flex; align-items:center; padding:16px 18px 12px; }
.qr-step-t .n { flex:none; width:32px; height:32px; line-height:32px; text-align:center; border-radius:50%; background:var(--ems-brand); color:#fff; font-weight:700; font-size:13px; margin-right:12px; box-shadow:0 6px 14px rgba(240,84,35,.35); }
.qr-step-t h4 { margin:0; font-size:15.5px; font-weight:600; }
.qr-screen { margin:0 14px 16px; border:1px solid var(--ems-line); border-radius:12px; overflow:hidden; background:#fbfcff; font-size:10.5px; color:#44506b; }
.qr-screen .bar { display:flex; align-items:center; padding:6px 10px; background:#eceff8; border-bottom:1px solid #dde1ef; }
.qr-screen .bar i { width:7px; height:7px; border-radius:50%; margin-right:4px; display:inline-block; }
.qr-screen .bd { padding:10px; }
.qr-tabs { display:flex; margin-bottom:8px; }
.qr-tabs span { padding:4px 9px; border-radius:6px; margin-right:5px; background:#eef0f8; font-weight:600; color:#6b7490; }
.qr-tabs span.on { background:var(--ems-navy); color:#fff; }
.qr-mini { width:100%; border-collapse:collapse; margin:0; }
.qr-mini th { text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:#8a93ab; padding:4px 5px; border-bottom:1px solid var(--ems-line); }
.qr-mini td { padding:5px; border-bottom:1px solid #eef0f8; }
.qr-btn { display:inline-block; background:var(--ems-navy); color:#fff; font-weight:600; font-size:10px; padding:5px 11px; border-radius:6px; }
.qr-btn.o { background:var(--ems-brand); }
.qr-form { display:flex; flex-wrap:wrap; margin:0 -3px 8px; }
.qr-form div { flex:1 1 45%; margin:3px; }
.qr-form small { display:block; color:#8a93ab; font-size:9px; margin-bottom:2px; }
.qr-form span { display:block; border:1px solid #d9deef; border-radius:5px; background:#fff; padding:5px 7px; color:#8a93ab; }
.qr-coupon { display:flex; align-items:center; }
.qr-coupon .q { flex:none; width:74px; height:74px; padding:5px; background:#fff; border:1px solid var(--ems-line); border-radius:8px; margin-right:12px; }
.qr-coupon p { margin:0 0 3px; }
.qr-flow-arrow { position:absolute; right:-14px; top:42%; width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; background:#22a465; color:#fff; font-size:12px; z-index:3; box-shadow:0 6px 14px rgba(34,164,101,.4); }

@media (max-width: 991px) {
  .qr-step { width:100%; }
  .qr-flow-arrow { display:none; }
}
@media (max-width: 767px) {
  .qr-table-head { display:none; }
  .qr-row { flex-wrap:wrap; padding:18px; }
  .qr-c1, .qr-c2, .qr-c3 { width:100%; padding-right:0; }
  .qr-c2 { margin:10px 0 8px; }
  .qr-hero-body { flex-wrap:wrap; }
  .qr-code { margin:0 0 12px; }
  .qr-info { width:100%; }
}

/* ===== Influencer Management System page (in- prefix) ===== */

/* 9.1 category tiles (no connector line, no step label) */
.qt-life.in-cats .qt-step:after { display:none; }
.qt-life.in-cats .qt-step { flex:1 1 150px; max-width:180px; margin:10px; padding:26px 12px 22px; background:#fff; border:1px solid var(--ems-line); border-radius:22px; box-shadow:0 10px 26px rgba(27,37,89,.06); transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease; }
.qt-life.in-cats .qt-step:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(27,37,89,.14); border-color:var(--c); }

/* hero influencer profile card */
.in-who { display:flex; align-items:center; margin-bottom:14px; }
.in-who .av { flex:none; width:52px; height:52px; line-height:52px; text-align:center; border-radius:50%; background:linear-gradient(135deg,var(--ems-brand),#ff9a6b); color:#fff; font-weight:700; font-size:18px; margin-right:14px; box-shadow:0 10px 20px rgba(240,84,35,.3); }
.in-who b { display:block; color:var(--ems-navy); font-size:14px; }
.in-who small { color:#8a93ab; font-size:11px; }
.in-who .vip { margin-left:auto; background:#fff0d9; color:#b66d00; font-weight:700; font-size:10.5px; padding:4px 12px; border-radius:20px; }
.in-feed { margin-top:12px; }
.in-feed .it { display:flex; align-items:center; padding:8px 0; border-bottom:1px solid var(--ems-line); font-size:12px; color:#44506b; }
.in-feed .it:last-child { border-bottom:0; }
.in-feed .it i { flex:none; width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; margin-right:10px; font-size:12px; }
.in-feed .it small { margin-left:auto; color:#8a93ab; font-size:10.5px; }

@media (max-width: 767px) {
  .qt-life.in-cats .qt-step { flex:1 1 40%; max-width:48%; margin:6px; }
}

/* ===== Offer / Gift / Redeem page (of- prefix) ===== */

/* hero rewards wallet */
.of-bal { display:flex; align-items:center; margin-bottom:12px; padding:14px 16px; background:linear-gradient(135deg,#fff4ef,#fff); border:1px solid #ffd9c9; border-radius:12px; }
.of-bal small { display:block; color:#8a93ab; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; }
.of-bal b { font-size:26px; color:var(--ems-navy); line-height:1.1; }
.of-bal b span { font-size:13px; color:var(--ems-brand); margin-left:4px; }
.of-bal .cash { margin-left:auto; text-align:right; }
.of-bal .cash b { font-size:16px; color:#188a4f; }
.of-next { background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:9px 12px; margin-bottom:10px; }
.of-next .t { display:flex; justify-content:space-between; font-size:11px; color:#8a93ab; margin-bottom:6px; }
.of-next .t b { color:var(--ems-navy); }
.of-next .bar { height:8px; background:#e3e6f2; border-radius:8px; overflow:hidden; }
.of-next .bar i { display:block; width:72%; height:100%; border-radius:8px; background:linear-gradient(90deg,#f05423,#ff9a6b); }

/* gift vs cash lists inside level cards */
.om-level-in .qt-list { margin-top:4px; }
.om-level-in .tag i { margin-right:6px; }

/* two-way branch */
.fs-branch.two .b { width:50%; }
.fs-branch.two .bc span small { display:block; font-weight:500; color:#8a93ab; font-size:11.5px; margin-top:2px; }

@media (max-width: 767px) {
  .fs-branch.two .b { width:100%; margin-bottom:10px; }
}

/* ===== Service Management System page (sv- prefix) ===== */
.qt-life.eight .qt-step { flex:1 1 108px; max-width:138px; margin:8px 6px; }
.qt-life.eight .qt-step:not(:last-child):after { width:calc(100% - 52px); left:calc(50% + 38px); }
.qt-life.eight .qt-step h5 { font-size:13.5px; }

/* hero ticket details */
.sv-issue { background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:10px 12px; margin:6px 0 10px; }
.sv-issue small { display:block; color:#8a93ab; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.sv-issue b { display:block; color:var(--ems-navy); font-size:12.5px; margin:2px 0 6px; }
.sv-chips span { display:inline-block; font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:20px; margin-right:6px; }
.sv-chips .g { background:#e3f7ec; color:#188a4f; }
.sv-chips .a { background:#fff0d9; color:#b66d00; }
.sv-hc { display:flex; align-items:center; background:linear-gradient(135deg,#fff4ef,#fff); border:1px dashed #ffb99f; border-radius:10px; padding:9px 12px; }
.sv-hc .ic { flex:none; width:32px; height:32px; line-height:32px; text-align:center; border-radius:10px; background:var(--ems-brand); color:#fff; font-size:13px; margin-right:12px; }
.sv-hc small { display:block; color:#8a93ab; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.sv-hc b { color:var(--ems-navy); letter-spacing:3px; }
.sv-hc .qr-ok { margin-left:auto; background:#fff0d9; color:#b66d00; }

@media (max-width: 991px) {
  .qt-life.eight .qt-step:after { display:none; }
}
@media (max-width: 767px) {
  .qt-life.eight .qt-step { flex:1 1 40%; max-width:48%; }
}

/* ===== Task Management System page (tk- prefix) ===== */
.qt-life.four .qt-step { flex:1 1 170px; max-width:220px; }

/* hero task card */
.tk-title { display:flex; align-items:flex-start; background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:10px 12px; margin:4px 0 10px; }
.tk-title .ic { flex:none; width:32px; height:32px; line-height:32px; text-align:center; border-radius:10px; background:var(--ems-soft); color:var(--ems-brand); margin-right:10px; font-size:13px; }
.tk-title small { display:block; color:#8a93ab; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.tk-title b { color:var(--ems-navy); font-size:12.5px; line-height:1.4; display:block; }
.tk-flags { display:flex; flex-wrap:wrap; }
.tk-flags span { font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:20px; margin:0 6px 4px 0; }
.tk-flags .a { background:#e8ebff; color:#3b4bb8; }
.tk-flags .r { background:#ffe5e5; color:#c23030; }
.tk-flags .g { background:#e3f7ec; color:#188a4f; }

/* decision node in the flow */
.om-node.dec { border-style:dashed; }
.om-node.dec .om-ic { border-radius:18px; transform:rotate(45deg); width:60px; height:60px; line-height:60px; margin:0 20px 0 8px; }
.om-node.dec .om-ic i { display:inline-block; transform:rotate(-45deg); }
.fs-branch .bc em { display:block; font-style:normal; font-size:11px; color:#8a93ab; margin-top:3px; font-weight:500; }

/* two-up in-app screens */
.qr-steps.two .qr-step { width:50%; }
.tk-modal .row2 { display:flex; margin:0 -3px; }
.tk-modal .row2 > div { flex:1; margin:3px; }
.tk-modal .full { margin:3px; }
.tk-modal small { display:block; color:#8a93ab; font-size:9px; margin-bottom:2px; }
.tk-modal span.f { display:block; border:1px solid #d9deef; border-radius:5px; background:#fff; padding:5px 7px; color:#8a93ab; }
.tk-modal span.f.tall { min-height:34px; }
.tk-list-tabs { display:flex; align-items:center; margin-bottom:8px; }
.tk-list-tabs .add { background:#17a89c; color:#fff; font-weight:600; font-size:10px; padding:5px 11px; border-radius:6px; margin-right:auto; }
.tk-list-tabs span.t { margin-left:12px; color:#6b7490; font-weight:600; padding-bottom:3px; }
.tk-list-tabs span.t.on { color:var(--ems-navy); border-bottom:2px solid var(--ems-brand); }
.tk-st { display:inline-block; font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:20px; }
.tk-st.p { background:#eef0f8; color:#6b7490; } .tk-st.o { background:#e8ebff; color:#3b4bb8; } .tk-st.h { background:#fff0d9; color:#b66d00; } .tk-st.c { background:#e3f7ec; color:#188a4f; } .tk-st.od { background:#ffe5e5; color:#c23030; }

@media (max-width: 991px) { .qr-steps.two .qr-step { width:100%; } }
@media (max-width: 767px) { .om-node.dec .om-ic { margin:0 14px 0 4px; width:50px; height:50px; line-height:50px; } }

.fs-flow.in > :nth-child(18) { transition-delay:1.32s; } .fs-flow.in > :nth-child(19) { transition-delay:1.4s; } .fs-flow.in > :nth-child(20) { transition-delay:1.47s; } .fs-flow.in > :nth-child(21) { transition-delay:1.55s; } .fs-flow.in > :nth-child(22) { transition-delay:1.62s; } .fs-flow.in > :nth-child(23) { transition-delay:1.7s; }

/* ===== Travel Plan Management System page (tp- prefix) ===== */
.qt-life.three .qt-step { flex:1 1 200px; max-width:260px; }

/* hero travel plan card */
.tp-route { display:flex; align-items:center; background:#f7f8fc; border:1px solid var(--ems-line); border-radius:10px; padding:10px 14px; margin:4px 0 10px; }
.tp-route .pt { flex:1; }
.tp-route .pt small { display:block; color:#8a93ab; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.tp-route .pt b { color:var(--ems-navy); font-size:13px; }
.tp-route .pt.r { text-align:right; }
.tp-route .mid { flex:none; width:90px; text-align:center; position:relative; color:var(--ems-brand); }
.tp-route .mid:before { content:""; position:absolute; left:6px; right:6px; top:50%; border-top:2px dashed #c5cbe0; }
.tp-route .mid i { position:relative; background:#f7f8fc; padding:0 6px; }
.tp-gps { display:flex; align-items:center; background:linear-gradient(135deg,#eefaf1,#fff); border:1px solid #c6e9cf; border-radius:10px; padding:9px 12px; font-size:11.5px; color:#188a4f; font-weight:600; }
.tp-gps i { margin-right:8px; }
.tp-go-ok { background:#22a465 !important; box-shadow:0 8px 16px rgba(34,164,101,.3) !important; }

/* GPS cross-verification */
.tp-verify { display:flex; align-items:stretch; flex-wrap:wrap; justify-content:center; }
.tp-box { flex:1 1 230px; max-width:300px; margin:8px; background:linear-gradient(165deg,#fff,#f8f9fe); border:1px solid var(--ems-line); border-top:5px solid var(--c); border-radius:20px; padding:24px 22px; text-align:center; transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
.tp-box:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(27,37,89,.14); }
.tp-box .ico { width:60px; height:60px; line-height:60px; margin:0 auto 12px; border-radius:18px; background:var(--c); color:#fff; font-size:24px; box-shadow:0 12px 24px rgba(27,37,89,.18); }
.tp-box small { display:block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8a93ab; }
.tp-box b { font-size:20px; color:var(--ems-navy); }
.tp-box p { margin:6px 0 0; font-size:13px; color:#5b6580; line-height:1.55; }
.tp-ne { flex:none; align-self:center; width:48px; height:48px; line-height:44px; text-align:center; border-radius:50%; background:#fff0e8; border:2px solid var(--ems-brand); color:var(--ems-brand); font-size:24px; font-weight:700; margin:8px 4px; }
.tp-result { width:100%; text-align:center; margin-top:14px; }
.tp-result span { display:inline-block; background:#ffe5e5; color:#c23030; font-weight:600; font-size:13px; padding:8px 18px; border-radius:30px; }
.tp-result span i { margin-right:8px; }

/* update status modal mock */
.tp-modal { margin:6px auto 4px; width:78%; background:#fff; border:1px solid #d9deef; border-radius:10px; box-shadow:0 14px 28px rgba(27,37,89,.15); padding:10px 12px; }
.tp-modal b { display:block; font-size:11px; color:var(--ems-navy); margin-bottom:6px; }
.tp-modal .sel { border:1px solid #d9deef; border-radius:5px; padding:5px 8px; margin-bottom:4px; color:#8a93ab; display:flex; justify-content:space-between; }
.tp-modal .opt { border:1px solid #d9deef; border-radius:5px; background:#fff; margin-bottom:8px; }
.tp-modal .opt div { padding:4px 8px; }
.tp-modal .opt div.on { background:#2f80ed; color:#fff; }
.tp-modal .btns { text-align:right; }
.tp-modal .btns span { display:inline-block; font-size:9.5px; font-weight:600; padding:4px 10px; border-radius:5px; margin-left:5px; border:1px solid #d9deef; color:#6b7490; }
.tp-modal .btns span.u { background:#2f80ed; border-color:#2f80ed; color:#fff; }

@media (max-width: 991px) { .tp-ne { transform:rotate(90deg); } }

/* ===== Navbar on CRM pages (light hero → solid white bar + dark logo) ===== */
body:has(.ems-page) #navbar { background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid #eceef6; box-shadow:0 4px 20px rgba(27,37,89,.07); }
body:has(.ems-page) #navbar .logo .logo-light { opacity:0; height:0; }
body:has(.ems-page) #navbar .logo .logo-dark { opacity:1; height:auto; }
body:has(.ems-page) #navbar .navigation-menu > li > a:hover { color:#1b2559; }
body:has(.ems-page) #navbar .menu-extras .menu-item > div { border-color:#e3e6f2; }
body:has(.ems-page) #navbar .menu-extras .header-socials > ul > li > a { color:#f05423; }
body:has(.ems-page) #navbar .hamburger-inner,
body:has(.ems-page) #navbar .hamburger-inner:before,
body:has(.ems-page) #navbar .hamburger-inner:after { background-color:#1b2559; }