:root {
     --primary: #4f46e5;
     --primary-dark: #3730a3;
     --primary-light: #eef2ff;
     --ink: #0f172a;
     --muted: #64748b;
     --line: #e2e8f0;
     --bg: #f4f6fb;
     --white: #fff;
     --green: #059669;
     --amber: #d97706;
     --red: #e11d48;
     --blue: #2563eb;
     --gold: #d4af37;
     --dark: #111827;
     --shadow: 0 18px 55px rgba(15, 23, 42, .08);
 }

 * {
     box-sizing: border-box
 }

@media (max-width: 768px) {

    .sidebar
    {
        display: none !important;
    }

}

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: linear-gradient(145deg, #f7f9fc, #eef2f7);
     color: var(--ink);
     font-family: Inter, system-ui, sans-serif;
     font-size: 14px
 }

 button,
 input,
 select,
 textarea {
     font: inherit
 }

 button {
     cursor: pointer
 }

 .app {
     display: grid;
     grid-template-columns: 292px minmax(0, 1fr);
     min-height: 100vh
 }

 .sidebar {
     background: linear-gradient(160deg, #111827, #172554 75%, #1e1b4b);
     color: #e5e7eb;
     padding: 25px 19px;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: auto
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 0 8px 26px
 }

 .brandmark {
     width: 43px;
     height: 43px;
     border-radius: 14px;
     background: linear-gradient(135deg, #818cf8, #4f46e5);
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 20px;
     box-shadow: 0 10px 25px #4f46e555
 }

 .brand strong {
     font-size: 18px;
     letter-spacing: .7px
 }

 .brand small {
     display: block;
     color: #a5b4fc;
     font-size: 9px;
     letter-spacing: 1.5px;
     margin-top: 3px
 }

 .side-title {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: #94a3b8;
     font-weight: 800;
     margin: 20px 10px 11px
 }

 .stepnav {
     display: flex;
     flex-direction: column;
     gap: 5px
 }

 .stepnav button {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 10px 11px;
     border: 0;
     border-radius: 12px;
     background: transparent;
     color: #cbd5e1;
     text-align: left;
     transition: .2s
 }

 .stepnav button:hover {
     background: #ffffff0d
 }

 .stepnav button.active {
     background: linear-gradient(90deg, #4f46e533, #4f46e510);
     color: #fff;
     box-shadow: inset 3px 0 #a5b4fc
 }

 .stepnav button.done .num {
     background: #059669;
     color: #fff;
     border-color: #059669
 }

 .num {
     width: 29px;
     height: 29px;
     display: grid;
     place-items: center;
     border: 1px solid #475569;
     border-radius: 9px;
     font-size: 10px;
     font-weight: 800;
     flex-shrink: 0
 }

 .navlabel {
     font-weight: 600;
     font-size: 11px;
     line-height: 1.25
 }

 .sideprogress {
     background: #1f2937aa;
     padding: 15px;
     border-radius: 16px;
     margin-top: 22px;
     border: 1px solid #ffffff0a
 }

 .progressrow {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #cbd5e1;
     margin-bottom: 9px
 }

 .progressbar {
     height: 7px;
     background: #374151;
     border-radius: 20px;
     overflow: hidden
 }

 .progressbar span {
     display: block;
     height: 100%;
     background: linear-gradient(90deg, #818cf8, #a5b4fc);
     width: 0;
     transition: .3s
 }

 .sidefoot {
     font-size: 10px;
     line-height: 1.7;
     color: #9ca3af;
     margin: 19px 8px
 }

 .main {
     min-width: 0
 }

 .topbar {
     height: 72px;
     background: #ffffffdc;
     backdrop-filter: blur(14px);
     border-bottom: 1px solid var(--line);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 34px;
     position: sticky;
     top: 0;
     z-index: 30
 }

 .crumb {
     font-size: 12px;
     color: var(--muted)
 }

 .crumb b {
     color: var(--ink)
 }

 .savebadge {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700
 }

 .save-dot {
     width: 8px;
     height: 8px;
     background: #10b981;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #10b98118
 }

 .content {
     max-width: 1180px;
     margin: 0 auto;
     padding: 30px 34px 65px
 }

 .hero {
     background: linear-gradient(120deg, #1e1b4b, #312e81 48%, #4f46e5 82%, #6366f1);
     border-radius: 24px;
     padding: 30px 34px;
     color: #fff;
     position: relative;
     overflow: hidden;
     box-shadow: 0 20px 55px #312e8126;
     margin-bottom: 24px
 }

 .hero:before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border: 1px solid #ffffff20;
     border-radius: 50%;
     right: -180px;
     top: -240px;
     box-shadow: 0 0 0 55px #ffffff07, 0 0 0 110px #ffffff04
 }

 .hero-kicker {
     text-transform: uppercase;
     letter-spacing: 1.8px;
     font-size: 10px;
     font-weight: 800;
     color: #c7d2fe
 }

 .hero h1 {
     font: 700 30px 'Playfair Display', serif;
     margin: 9px 0
 }

 .hero p {
     max-width: 800px;
     color: #e0e7ff;
     line-height: 1.7;
     margin: 0
 }

 .hero-tags {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 19px
 }

 .hero-tags span {
     border: 1px solid #ffffff35;
     background: #ffffff12;
     border-radius: 30px;
     padding: 7px 11px;
     font-size: 10px;
     font-weight: 600
 }

 .card {
     background: #fff;
     border: 1px solid #e8edf5;
     border-radius: 20px;
     box-shadow: var(--shadow);
     overflow: hidden
 }

 .step {
     display: none
 }

 .step.active {
     display: block;
     animation: fade .28s ease
 }

 @keyframes fade {
     from {
         opacity: 0;
         transform: translateY(7px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .stephead {
     padding: 27px 32px 22px;
     border-bottom: 1px solid #edf0f5;
     display: flex;
     gap: 16px;
     align-items: flex-start
 }

 .stepicon {
     width: 52px;
     height: 52px;
     border-radius: 16px;
     background: var(--primary-light);
     color: var(--primary);
     display: grid;
     place-items: center;
     font-size: 21px;
     flex-shrink: 0
 }

 .stephead h2 {
     margin: 2px 0 7px;
     font-size: 23px;
     letter-spacing: -.5px
 }

 .stephead p {
     margin: 0;
     color: var(--muted);
     line-height: 1.6;
     max-width: 790px
 }

 .stepcount {
     margin-left: auto;
     background: #f1f5f9;
     color: #475569;
     border-radius: 30px;
     padding: 8px 12px;
     font-size: 10px;
     font-weight: 800;
     white-space: nowrap
 }

 .formbody {
     padding: 28px 32px
 }

 .section-title {
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 13px;
     font-weight: 800;
     color: #334155;
     margin: 25px 0 16px;
     padding-bottom: 11px;
     border-bottom: 1px solid #eef2f7
 }

 .section-title:first-child {
     margin-top: 0
 }

 .section-title i {
     color: var(--primary)
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 17px 20px
 }

 .grid.three {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .field {
     min-width: 0
 }

 .field.full {
     grid-column: 1/-1
 }

 .field label,
 .field-label {
     display: block;
     font-size: 12px;
     font-weight: 700;
     color: #334155;
     margin-bottom: 8px
 }

 .req {
     color: var(--red);
     margin-left: 3px
 }

 .hint {
     font-size: 10px;
     color: #94a3b8;
     line-height: 1.5;
     margin-top: 6px
 }

 .field input:not([type=checkbox]):not([type=radio]),
 .field select,
 .field textarea {
     width: 100%;
     border: 1px solid #dbe2ed;
     background: #fbfcfe;
     border-radius: 11px;
     padding: 12px 13px;
     outline: none;
     color: var(--ink);
     transition: .2s;
     min-height: 44px
 }

 .field textarea {
     min-height: 100px;
     resize: vertical
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
     border-color: #818cf8;
     box-shadow: 0 0 0 3px #818cf81c;
     background: #fff
 }

 .checks {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 9px
 }

 .checks.cols3 {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .check {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 11px;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     transition: .15s;
     line-height: 1.45
 }

 .check:hover {
     border-color: #a5b4fc;
     background: #fafaff
 }

 .check:has(input:checked) {
     border-color: #818cf8;
     background: #eef2ff
 }

 .check input {
     accent-color: var(--primary);
     margin-top: 2px;
     flex-shrink: 0
 }

 .check span {
     font-size: 11px;
     font-weight: 600;
     color: #334155
 }

 .notice {
     display: flex;
     gap: 12px;
     padding: 14px 16px;
     border-radius: 13px;
     background: #eef2ff;
     color: #3730a3;
     font-size: 11px;
     line-height: 1.6;
     margin: 18px 0
 }

 .notice i {
     font-size: 16px;
     margin-top: 1px
 }

 .notice.green {
     background: #ecfdf5;
     color: #065f46
 }

 .notice.amber {
     background: #fffbeb;
     color: #92400e
 }

 .repeat-wrap {
     display: flex;
     flex-direction: column;
     gap: 12px
 }

 .repeat-card {
     border: 1px solid #e2e8f0;
     border-radius: 15px;
     padding: 18px;
     background: #fcfdff;
     position: relative
 }

 .repeat-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 14px;
     font-size: 12px;
     font-weight: 800
 }

 .remove {
     border: 0;
     background: #fff1f2;
     color: #e11d48;
     border-radius: 9px;
     padding: 7px 10px;
     font-size: 10px;
     font-weight: 700
 }

 .addbtn {
     border: 1px dashed #a5b4fc;
     background: #f5f3ff;
     color: #4f46e5;
     border-radius: 11px;
     padding: 11px 15px;
     font-weight: 800;
     font-size: 11px;
     margin-top: 11px
 }

 .upload {
     border: 1.5px dashed #cbd5e1;
     border-radius: 14px;
     background: #fafcff;
     padding: 19px;
     text-align: center;
     cursor: pointer;
     display: block
 }

 .upload i {
     font-size: 23px;
     color: #818cf8;
     margin-bottom: 8px
 }

 .upload strong {
     display: block;
     font-size: 11px
 }

 .upload small {
     display: block;
     color: #94a3b8;
     margin-top: 5px;
     font-size: 10px
 }

 .filelist {
     font-size: 10px;
     color: var(--green);
     margin-top: 7px;
     word-break: break-word
 }

 .hidden {
     display: none !important
 }

 .navbuttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 22px;
     gap: 12px
 }

 .btn {
     border: 0;
     border-radius: 12px;
     padding: 13px 19px;
     font-weight: 800;
     font-size: 11px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     transition: .2s
 }

 .btn.primary {
     background: var(--primary);
     color: #fff;
     box-shadow: 0 8px 18px #4f46e52b
 }

 .btn.primary:hover {
     background: var(--primary-dark);
     transform: translateY(-1px)
 }

 .btn.secondary {
     background: #fff;
     color: #475569;
     border: 1px solid #dbe2ed
 }

 .btn.light {
     background: #eef2ff;
     color: #4f46e5
 }

 .btn.gold {
     background: linear-gradient(135deg, #d4af37, #b8860b);
     color: #1a1a2e
 }

 .map-shell {
     border: 1px solid #dbe2ed;
     border-radius: 17px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 8px 25px #0f172a0a
 }

 .map-toolbar {
     padding: 13px;
     background: #f8fafc;
     border-bottom: 1px solid #e2e8f0
 }

 .map-search-row {
     display: flex;
     gap: 9px
 }

 .map-search-row input {
     flex: 1;
     min-height: 46px;
     border: 1px solid #cbd5e1;
     border-radius: 11px;
     padding: 0 13px;
     outline: none
 }

 .map-search-row input:focus {
     border-color: #818cf8;
     box-shadow: 0 0 0 3px #818cf81c
 }

 .map-search-row button {
     border: 0;
     border-radius: 11px;
     padding: 0 14px;
     background: #eef2ff;
     color: #4338ca;
     font-weight: 800;
     font-size: 11px
 }

 .map-actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 9px
 }

 .map-actions button {
     border: 1px solid #dbe2ed;
     background: #fff;
     border-radius: 9px;
     padding: 8px 10px;
     font-size: 10px;
     font-weight: 700;
     color: #475569
 }

 .map-actions button:hover {
     border-color: #a5b4fc;
     color: #4338ca
 }

 #locationMap {
     height: 400px;
     width: 100%;
     background: #e2e8f0
 }

 .map-status {
     padding: 10px 13px;
     font-size: 10px;
     color: #64748b;
     background: #fff;
     border-top: 1px solid #eef2f7
 }

 .location-preview {
     margin-top: 14px;
     padding: 14px;
     border: 1px solid #dbe2ed;
     border-radius: 13px;
     background: #fbfcfe;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px
 }

 .location-preview div {
     padding: 9px;
     border-radius: 9px;
     background: #fff;
     border: 1px solid #edf0f5
 }

 .location-preview small {
     display: block;
     color: #94a3b8;
     font-size: 9px;
     margin-bottom: 3px
 }

 .location-preview strong {
     font-size: 10px;
     word-break: break-word
 }

 .review-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px
 }

 .review-section {
     margin-bottom: 24px
 }

 .review-section h3 {
     font-size: 14px;
     margin: 0 0 12px
 }

 .review-item {
     padding: 13px;
     border: 1px solid #e2e8f0;
     border-radius: 12px
 }

 .review-item small {
     display: block;
     color: #94a3b8;
     font-size: 9px;
     margin-bottom: 5px
 }

 .review-item strong {
     font-size: 11px;
     line-height: 1.5;
     word-break: break-word
 }

 .footer {
     text-align: center;
     color: #94a3b8;
     font-size: 10px;
     margin: 24px 0
 }

 .toast {
     position: fixed;
     right: 24px;
     bottom: 24px;
     background: #0f172a;
     color: #fff;
     padding: 13px 17px;
     border-radius: 12px;
     box-shadow: var(--shadow);
     z-index: 99;
     font-size: 11px;
     display: none;
     max-width: 380px
 }

 .toast.show {
     display: block;
     animation: fade .2s
 }

 .modalback {
     position: fixed;
     inset: 0;
     background: #0f172a99;
     display: none;
     place-items: center;
     z-index: 100;
     padding: 20px
 }

 .modalback.show {
     display: grid
 }

 .modal {
     background: #fff;
     border-radius: 20px;
     padding: 30px;
     max-width: 530px;
     width: 100%;
     text-align: center;
     box-shadow: 0 30px 90px #0003
 }

 .successicon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: #d1fae5;
     color: #059669;
     display: grid;
     place-items: center;
     font-size: 30px;
     margin: 0 auto 18px
 }

 .modal h2 {
     margin: 0 0 9px
 }

 .modal p {
     color: #64748b;
     line-height: 1.7;
     font-size: 12px
 }

 .refcode {
     font-weight: 900;
     font-size: 20px;
     letter-spacing: 1px;
     background: #f1f5f9;
     padding: 14px;
     border-radius: 12px;
     margin: 18px 0
 }

 @media(max-width:1050px) {
     .app {
         grid-template-columns: 240px 1fr
     }

     .sidebar {
         padding: 21px 14px
     }

     .content {
         padding: 24px 20px
     }

     .topbar {
         padding: 0 20px
     }

     .grid.three,
     .location-preview {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }

     .checks.cols3 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }

 @media(max-width:760px) {
     .app {
         display: block
     }

     .sidebar {
         position: relative;
         height: auto;
         padding: 15px
     }

     .brand {
         margin-bottom: 14px
     }

     .side-title,
     .sideprogress,
     .sidefoot {
         display: none
     }

     .stepnav {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 6px
     }

     .stepnav button {
         padding: 8px;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
         border: 1px solid #ffffff10
     }

     .navlabel {
         font-size: 9px
     }

     .num {
         width: 24px;
         height: 24px
     }

     .topbar {
         height: 58px
     }

     .content {
         padding: 14px 11px 40px
     }

     .hero {
         padding: 23px 19px;
         border-radius: 18px
     }

     .hero h1 {
         font-size: 25px
     }

     .stephead {
         padding: 20px;
         gap: 12px
     }

     .stephead h2 {
         font-size: 19px
     }

     .stepcount {
         display: none
     }

     .formbody {
         padding: 20px
     }

     .grid,
     .grid.three,
     .checks,
     .checks.cols3,
     .review-grid,
     .location-preview {
         grid-template-columns: 1fr
     }

     .navbuttons {
         flex-wrap: wrap
     }

     .navbuttons .btn {
         flex: 1
     }

     .map-search-row {
         flex-direction: column
     }

     .map-search-row button {
         min-height: 42px
     }

     #locationMap {
         height: 330px
     }

     .toast {
         left: 15px;
         right: 15px;
         bottom: 15px
     }
 }

 /* FINAL PREVIEW */
 .final-preview {
     background: linear-gradient(135deg, #f8fafc, #fff);
     border: 1px solid #e2e8f0;
     border-radius: 18px;
     padding: 18px;
     margin-top: 20px
 }

 .preview-top {
     display: flex;
     justify-content: space-between;
     gap: 15px;
     align-items: flex-start;
     padding: 16px;
     border-radius: 15px;
     background: linear-gradient(135deg, #eef2ff, #f8fafc);
     border: 1px solid #e0e7ff;
     margin-bottom: 18px
 }

 .preview-top h3 {
     margin: 0 0 5px;
     font-size: 16px
 }

 .preview-top p {
     margin: 0;
     color: #64748b;
     font-size: 11px;
     line-height: 1.55
 }

 .preview-state {
     white-space: nowrap;
     border-radius: 999px;
     padding: 8px 11px;
     background: #fef3c7;
     color: #92400e;
     font-size: 10px;
     font-weight: 800
 }

 .review-step-card {
     border: 1px solid #e2e8f0;
     border-radius: 16px;
     background: #fff;
     margin-bottom: 14px;
     overflow: hidden
 }

 .review-step-head {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 14px 16px;
     background: #f8fafc;
     border-bottom: 1px solid #edf0f5
 }

 .review-step-head .review-num {
     width: 30px;
     height: 30px;
     border-radius: 9px;
     background: #eef2ff;
     color: #4f46e5;
     display: grid;
     place-items: center;
     font-weight: 900;
     font-size: 10px
 }

 .review-step-head strong {
     font-size: 12px
 }

 .review-step-head span {
     margin-left: auto;
     font-size: 9px;
     color: #94a3b8
 }

 .review-fields {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px;
     padding: 14px 16px
 }

 .review-value {
     padding: 10px 11px;
     border: 1px solid #edf0f5;
     border-radius: 10px;
     background: #fcfdff;
     min-width: 0
 }

 .review-value.full {
     grid-column: 1/-1
 }

 .review-value small {
     display: block;
     color: #94a3b8;
     font-size: 9px;
     margin-bottom: 4px
 }

 .review-value strong {
     display: block;
     color: #334155;
     font-size: 10px;
     line-height: 1.55;
     word-break: break-word;
     white-space: pre-wrap
 }

 .review-empty {
     padding: 15px 16px;
     color: #94a3b8;
     font-size: 10px
 }

 .file-pill {
     display: inline-block;
     margin: 3px 4px 3px 0;
     padding: 5px 7px;
     border-radius: 7px;
     background: #ecfdf5;
     color: #047857;
     font-size: 9px;
     font-weight: 700
 }

 .submit-box {
     margin-top: 18px;
     padding: 17px;
     border: 1px solid #fde68a;
     background: #fffbeb;
     border-radius: 15px
 }

 .submit-box strong {
     font-size: 12px
 }

 .submit-box p {
     font-size: 10px;
     color: #92400e;
     line-height: 1.6;
     margin: 7px 0 0
 }

 .review-toolbar {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 15px
 }

 .review-toolbar button {
     border: 1px solid #dbe2ed;
     background: #fff;
     color: #475569;
     border-radius: 10px;
     padding: 9px 11px;
     font-size: 10px;
     font-weight: 800
 }

 .review-toolbar button:hover {
     border-color: #818cf8;
     color: #4338ca
 }

 @media(max-width:760px) {
     .review-fields {
         grid-template-columns: 1fr
     }

     .review-value.full {
         grid-column: auto
     }

     .preview-top {
         flex-direction: column
     }

     .preview-state {
         white-space: normal
     }
 }

 .preview-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
     margin-bottom: 20px;
 }

 .preview-top h3 {
     margin: 0 0 6px;
 }

 .preview-top p {
     margin: 0;
     color: #667085;
 }

 .preview-state {
     padding: 10px 14px;
     border-radius: 10px;
     background: #fff7ed;
     color: #c2410c;
     white-space: nowrap;
     font-size: 13px;
     font-weight: 600;
 }

 .review-toolbar {
     display: flex;
     gap: 10px;
     margin-bottom: 20px;
 }

 .review-toolbar button {
     border: 1px solid #d0d5dd;
     background: #fff;
     padding: 10px 14px;
     border-radius: 8px;
     cursor: pointer;
 }

 .review-section {
     border: 1px solid #e4e7ec;
     border-radius: 14px;
     margin-bottom: 18px;
     overflow: hidden;
     background: #fff;
 }

 .review-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     padding: 16px 18px;
     background: #f8fafc;
     border-bottom: 1px solid #e4e7ec;
 }

 .review-title span {
     font-size: 16px;
     font-weight: 700;
 }

 .review-title span i {
     margin-right: 8px;
 }

 .review-title a {
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
 }

 .review-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     padding: 18px;
 }

 .review-grid>div {
     min-width: 0;
 }

 .review-grid .full {
     grid-column: 1 / -1;
 }

 .review-grid label {
     display: block;
     font-size: 12px;
     color: #667085;
     margin-bottom: 5px;
 }

 .review-grid strong {
     display: block;
     color: #101828;
     font-size: 14px;
     font-weight: 500;
     line-height: 1.6;
     word-break: break-word;
 }

 .review-subcard {
     margin: 16px;
     padding: 16px;
     border: 1px solid #eaecf0;
     border-radius: 10px;
 }

 .review-subcard h4 {
     margin: 0 0 12px;
 }

 .tag-list {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
 }

 .tag-list span {
     padding: 6px 10px;
     border-radius: 20px;
     background: #f2f4f7;
     font-size: 12px;
 }

 .file-list {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .file-list span {
     padding: 8px 10px;
     border-radius: 8px;
     background: #f9fafb;
     border: 1px solid #eaecf0;
     font-size: 13px;
 }

 .empty-review {
     padding: 20px;
     color: #667085;
 }

 .submit-box {
     margin-top: 20px;
     padding: 20px;
     border: 1px solid #d0d5dd;
     border-radius: 14px;
     background: #f8fafc;
 }

 .submit-box .check {
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .submit-box .check input {
     margin-top: 4px;
 }

 .submit-box p {
     color: #667085;
     font-size: 13px;
     line-height: 1.6;
     margin: 15px 0;
 }

 .submit-btn {
     border: 0;
     padding: 12px 20px;
     border-radius: 9px;
     cursor: pointer;
     font-weight: 700;
 }

 @media (max-width: 768px) {
     .preview-top {
         flex-direction: column;
     }

     .preview-state {
         white-space: normal;
     }

     .review-grid {
         grid-template-columns: 1fr;
     }

     .review-grid .full {
         grid-column: auto;
     }

     .review-toolbar {
         flex-direction: column;
     }
 }

 .success-modal {
     position: fixed;
     inset: 0;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .success-modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(15, 23, 42, 0.65);
     backdrop-filter: blur(4px);
 }

 .success-modal-box {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 520px;
     background: #fff;
     border-radius: 20px;
     padding: 35px 32px 30px;
     text-align: center;
     box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
     animation: successPopup .25s ease;
 }

 .success-modal-close {
     position: absolute;
     top: 14px;
     right: 14px;
     width: 34px;
     height: 34px;
     border: 0;
     border-radius: 50%;
     background: #f2f4f7;
     cursor: pointer;
     font-size: 16px;
 }

 .success-icon {
     width: 72px;
     height: 72px;
     margin: 0 auto 18px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #dcfae6;
     color: #16a34a;
     font-size: 32px;
 }

 .success-modal-box h2 {
     margin: 0 0 10px;
     font-size: 24px;
     color: #101828;
 }

 .success-main-text {
     margin: 0 0 20px;
     color: #475467;
     font-size: 15px;
 }

 .verification-message {
     display: flex;
     align-items: flex-start;
     gap: 13px;
     text-align: left;
     padding: 16px;
     margin-bottom: 18px;
     border-radius: 12px;
     background: #eff8ff;
     border: 1px solid #b2ddff;
     color: #175cd3;
 }

 .verification-message>i {
     font-size: 20px;
     margin-top: 2px;
 }

 .verification-message strong {
     display: block;
     margin-bottom: 5px;
     color: #1849a9;
 }

 .verification-message p {
     margin: 0;
     color: #344054;
     font-size: 13px;
     line-height: 1.6;
 }

 .success-note {
     margin: 0 0 22px;
     color: #667085;
     font-size: 13px;
     line-height: 1.6;
 }

 .success-ok-btn {
     width: 100%;
     border: 0;
     border-radius: 10px;
     padding: 13px 20px;
     background: #101828;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
 }

 .success-ok-btn i {
     margin-right: 6px;
 }

 .form-error {
     margin-top: 8px;
     color: #d92d20;
     font-size: 13px;
 }

 @keyframes successPopup {
     from {
         opacity: 0;
         transform: scale(.92) translateY(10px);
     }

     to {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 @media (max-width: 600px) {
     .success-modal-box {
         padding: 30px 20px 22px;
     }

     .success-modal-box h2 {
         font-size: 21px;
     }
 }

 /* =========================
   STEP SIDEBAR
========================= */

 .stepnav {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-top: 18px;
     padding: 0;
 }

 /* Every step link */
 .stepnav .step-link {
     width: 100%;
     min-height: 58px;
     display: flex;
     align-items: center;
     gap: 13px;
     padding: 8px 12px;
     border-radius: 14px;

     color: #d8def0;
     background: transparent;

     text-decoration: none !important;
     border: 1px solid transparent;

     transition:
         background 0.2s ease,
         border-color 0.2s ease,
         color 0.2s ease,
         transform 0.2s ease;

     box-sizing: border-box;
 }

 /* Remove browser default link styling */
 .stepnav .step-link:visited,
 .stepnav .step-link:hover,
 .stepnav .step-link:active {
     text-decoration: none !important;
 }

 /* Number box */
 .stepnav .step-link .num {
     flex: 0 0 36px;
     width: 36px;
     height: 36px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 10px;
     border: 1px solid rgba(148, 163, 184, 0.35);

     color: #cbd5e1;
     background: rgba(255, 255, 255, 0.025);

     font-size: 13px;
     font-weight: 700;

     box-sizing: border-box;
 }

 /* Step title */
 .stepnav .step-link .navlabel {
     flex: 1;
     min-width: 0;

     color: #cbd5e1;

     font-size: 14px;
     line-height: 1.35;
     font-weight: 500;

     white-space: normal;
     word-break: break-word;

     text-decoration: none !important;
 }

 /* Hover */
 .stepnav .step-link:hover {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.08);
     transform: translateX(2px);
 }

 .stepnav .step-link:hover .num {
     border-color: rgba(255, 255, 255, 0.35);
     color: #ffffff;
 }

 .stepnav .step-link:hover .navlabel {
     color: #ffffff;
 }


 /* =========================
   ACTIVE STEP
========================= */

 .stepnav .step-link.active {
     background: linear-gradient(90deg,
             rgba(99, 102, 241, 0.22),
             rgba(99, 102, 241, 0.08));

     border-color: rgba(129, 140, 248, 0.22);

     box-shadow: inset 3px 0 0 #a5b4fc;
 }

 .stepnav .step-link.active .num {
     color: #ffffff;
     background: rgba(99, 102, 241, 0.18);
     border-color: #a5b4fc;
 }

 .stepnav .step-link.active .navlabel {
     color: #ffffff;
     font-weight: 700;
 }


 /* =========================
   COMPLETED STEPS
========================= */

 .stepnav .step-link.done {
     color: #b8c2d9;
 }

 .stepnav .step-link.done .num {
     color: #a7f3d0;
     background: rgba(16, 185, 129, 0.08);
     border-color: rgba(52, 211, 153, 0.35);
 }

 .stepnav .step-link.done .navlabel {
     color: #b8c2d9;
 }


 /* =========================
   SIDEBAR SCROLL
========================= */

 .sidebar {
     height: 100vh;
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: border-box;
 }

 .sidebar::-webkit-scrollbar {
     width: 7px;
 }

 .sidebar::-webkit-scrollbar-track {
     background: transparent;
 }

 .sidebar::-webkit-scrollbar-thumb {
     background: rgba(148, 163, 184, 0.35);
     border-radius: 10px;
 }

 .sidebar::-webkit-scrollbar-thumb:hover {
     background: rgba(148, 163, 184, 0.55);
 }


 /* =========================
   IF YOUR SIDEBAR HAS
   A MAIN WRAPPER
========================= */

 .sidebar-content {
     width: 100%;
     box-sizing: border-box;
     padding: 0 14px 30px;
 }


 /* =========================
   SIDEBAR HEADING
========================= */

 .sidebar .eyebrow,
 .sidebar .sidebar-title,
 .sidebar .kicker {
     color: #93c5fd;
 }


 /* =========================
   MOBILE
========================= */

 @media (max-width: 900px) {

     .stepnav {
         gap: 5px;
     }

     .stepnav .step-link {
         min-height: 54px;
         padding: 7px 10px;
     }

     .stepnav .step-link .num {
         width: 34px;
         height: 34px;
         flex-basis: 34px;
     }

     .stepnav .step-link .navlabel {
         font-size: 13px;
     }
 }