:root { --rm-primary:#696cff; --rm-ink:#2f3349; --rm-soft:#f5f5ff; --rm-raised:#fff; --rm-control:#fff; --rm-border:rgba(105,108,255,.14); }
.dark-style { --rm-ink:#e6e7f2; --rm-soft:rgba(105,108,255,.12); --rm-raised:#2b2d42; --rm-control:#24263a; --rm-border:rgba(158,160,255,.22); }
.layout-navbar-fixed .layout-page { padding-top:90px!important; }
#roadmapApp { max-width:1440px; }
.rm-hero { position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:260px;margin-bottom:24px;padding:38px 42px;overflow:hidden;border-radius:20px;color:#fff;background:linear-gradient(130deg,#4f46d8 0%,#696cff 48%,#009cbd 100%);box-shadow:0 16px 40px rgba(80,82,190,.24); }
.rm-hero::before,.rm-hero::after { content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08); }
.rm-hero::before { width:320px;height:320px;right:-90px;top:-160px; }
.rm-hero::after { width:180px;height:180px;left:42%;bottom:-130px; }
.rm-hero__content,.rm-hero__progress { position:relative;z-index:1; }
.rm-eyebrow { display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.rm-hero h1 { margin:0 0 8px;color:#fff;font-size:36px; }
.rm-hero p { max-width:650px;margin:0;color:rgba(255,255,255,.82);font-size:16px; }
.rm-hero__actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:24px; }
.rm-hero .btn-light { border-color:#fff;background:#fff;color:#4f46d8;box-shadow:0 7px 18px rgba(35,38,100,.2); }
.rm-hero .btn-light:hover,.rm-hero .btn-light:focus { border-color:#f1f1ff;background:#f1f1ff;color:#3f39bf; }
.rm-hero .btn-outline-light { border-color:rgba(255,255,255,.6);background:rgba(38,40,109,.2);color:#fff; }
.rm-hero .btn-outline-light:hover,.rm-hero .btn-outline-light:focus { border-color:#fff;background:rgba(255,255,255,.12);color:#fff; }
.rm-hero__progress { min-width:300px;display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(34,37,92,.22);backdrop-filter:blur(8px); }
.rm-hero__progress>div:last-child { display:flex;min-width:0;flex-direction:column; }
.rm-hero__progress>div:last-child strong { color:#fff;font-size:14px; }
.rm-hero__progress>div:last-child small { color:rgba(255,255,255,.7); }
.rm-progress-ring { --progress:0; width:92px;height:92px;display:flex;flex:0 0 92px;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle closest-side,rgba(70,71,155,1) 77%,transparent 78% 99%),conic-gradient(#fff calc(var(--progress)*1%),rgba(255,255,255,.18) 0); }
.rm-progress-ring strong { color:#fff;font-size:22px;line-height:1; }
.rm-progress-ring small { margin-top:4px;color:rgba(255,255,255,.72);font-size:9px; }
.rm-setup,.rm-next,.rm-summary,.rm-stage { border:1px solid var(--rm-border);border-radius:16px;box-shadow:0 8px 28px rgba(47,51,73,.05); }
.rm-setup .card-body { padding:30px; }
.rm-setup .form-select { border-color:var(--rm-border);background-color:var(--rm-control);color:var(--bs-body-color); }
.rm-setup .form-select:focus { border-color:var(--rm-primary);box-shadow:0 0 0 .2rem rgba(105,108,255,.16); }
.rm-setup .form-select option { background:var(--rm-control);color:var(--bs-body-color); }
.rm-section-heading,.rm-section-heading>div { display:flex;align-items:center;justify-content:space-between;gap:14px; }
.rm-section-heading h2 { margin:0 0 3px;font-size:21px; }
.rm-section-heading p { margin:0;color:var(--bs-secondary-color); }
.rm-step-number { width:38px;height:38px;display:grid;flex:0 0 38px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--rm-primary),#03c3ec);font-weight:800; }
.rm-route-preview { min-height:92px;margin-top:22px;padding:18px;border:1px dashed rgba(105,108,255,.28);border-radius:13px;background:var(--rm-soft); }
.rm-route-preview__inner { display:flex;align-items:center;gap:14px; }
.rm-route-preview__icon { width:54px;height:54px;display:grid;flex:0 0 54px;place-items:center;border-radius:14px;color:var(--rm-primary);background:var(--rm-raised);font-size:26px;box-shadow:0 5px 15px rgba(105,108,255,.1); }
.rm-route-preview h5 { margin:0 0 3px;color:var(--bs-heading-color); }.rm-route-preview p { margin:0;color:var(--bs-secondary-color); }
.rm-loading { min-height:130px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;border:1px solid var(--rm-border); }
.rm-loading>div { display:flex;flex-direction:column; }.rm-loading small { color:var(--bs-secondary-color); }
.rm-workspace { display:block; }.rm-next { margin-bottom:24px;overflow:hidden;background:linear-gradient(90deg,rgba(105,108,255,.08),rgba(3,195,236,.04)); }
.rm-next .card-body { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px; }
.rm-next__copy { display:flex;align-items:center;gap:16px; }.rm-next__icon { width:52px;height:52px;display:grid;flex:0 0 52px;place-items:center;border-radius:14px;color:#fff;background:var(--rm-primary);font-size:25px; }
.rm-next h2 { margin:2px 0 4px;font-size:20px; }.rm-next p { margin:0;color:var(--bs-secondary-color); }
.rm-stages { display:flex;flex-direction:column;gap:15px; }
.rm-stage { overflow:hidden;background:var(--rm-raised);color:var(--bs-body-color); }
.rm-stage__header { width:100%;display:flex;align-items:center;gap:14px;padding:20px 22px;border:0;background:transparent;text-align:left; }
.rm-stage__icon { width:42px;height:42px;display:grid;flex:0 0 42px;place-items:center;border-radius:12px;color:var(--rm-primary);background:var(--rm-soft);font-size:21px; }
.rm-stage__title { flex:1; }.rm-stage__title strong { display:block;color:var(--bs-heading-color);font-size:15px; }.rm-stage__title small { color:var(--bs-secondary-color); }
.rm-stage__count { font-size:11px;font-weight:700;color:var(--rm-primary); }.rm-stage__chevron { font-size:21px;transition:transform .2s; }.rm-stage.is-open .rm-stage__chevron { transform:rotate(180deg); }
.rm-stage__body { display:none;border-top:1px solid var(--rm-border);background:var(--rm-raised); }.rm-stage.is-open .rm-stage__body { display:block; }
.rm-task { display:flex;align-items:flex-start;gap:13px;padding:17px 22px;border-bottom:1px solid var(--rm-border);background:var(--rm-raised); }.rm-task:last-child { border-bottom:0; }
.rm-task__check { width:24px;height:24px;display:grid;flex:0 0 24px;place-items:center;margin-top:2px;border:2px solid #c5c7df;border-radius:7px;background:var(--rm-raised);color:transparent;cursor:pointer; }
.rm-task.is-complete .rm-task__check { border-color:#28c76f;background:#28c76f;color:#fff; }.rm-task.is-complete h4 { text-decoration:line-through;opacity:.7; }
.rm-task__copy { min-width:0;flex:1; }.rm-task h4 { margin:0 0 4px;color:var(--bs-heading-color);font-size:14px; }.rm-task p { margin:0 0 8px;color:var(--bs-secondary-color);font-size:12px; }
.rm-task__meta { display:flex;flex-wrap:wrap;gap:8px; }.rm-task__meta span { display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:var(--rm-soft);color:#6669ad;font-size:10px; }
.rm-task__action { flex:0 0 auto; }.rm-summary { position:sticky;top:88px; }.rm-summary h3 { margin:0 0 8px;font-size:21px; }
.rm-summary__facts { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px; }.rm-summary__fact { padding:12px;border-radius:11px;background:var(--rm-soft); }.rm-summary__fact strong { display:block;color:var(--rm-primary);font-size:18px; }.rm-summary__fact small { color:var(--bs-secondary-color); }
.rm-module-cloud { display:flex;flex-wrap:wrap;gap:8px; }.rm-module-chip { display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--rm-border);border-radius:8px;color:var(--bs-heading-color);background:var(--rm-raised);font-size:11px; }
@media (max-width:991.98px){.layout-navbar-fixed .layout-page{padding-top:86px!important}.rm-hero{padding:30px;flex-direction:column;align-items:stretch}.rm-hero__progress{min-width:0}.rm-summary{position:static}.rm-section-heading{align-items:flex-start;flex-direction:column}.rm-section-heading>div{align-items:flex-start}}
@media (max-width:575.98px){.rm-hero{padding:25px 20px;border-radius:15px}.rm-hero h1{font-size:29px}.rm-hero__progress{padding:14px}.rm-progress-ring{width:76px;height:76px;flex-basis:76px}.rm-setup .card-body{padding:22px 18px}.rm-next .card-body{align-items:stretch;flex-direction:column}.rm-task{padding:15px}.rm-task__action{width:100%}.rm-task__action .btn{width:100%}}