* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #020710;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            width: 100vw;
            padding: 1rem 0.5rem;
        }

        .form-screen {
            display: none;
            width: 100%;
            max-width: 580px;
        }

        .form-screen.active {
            display: block;
        }

        .main-card {
            width: 100%;
            background: linear-gradient(180deg, #030c1b 0%, #01050d 100%);
            border-radius: 28px;
            border: 1px solid rgba(212, 165, 80, 0.25);
            box-shadow: 0 20px 35px rgba(0, 0, 0, 0.8);
            overflow: hidden;
             display: flex;
        flex-direction: column;
        }

        .content-area {
            padding: 1.2rem 1.5rem 1.5rem;
        }

      .top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 1.2rem 1.5rem 0.4rem;
    background: linear-gradient(180deg, #030c1b 95%, transparent 100%);
}
        .logo-area {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .logo-icon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
        }

        .brand h2 {
            color: #ffffff;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.3;
        }

        .brand .badge-row {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 3px;
        }

        .brand .gold-line {
            height: 1px;
            background: linear-gradient(90deg, transparent, #d4a550, transparent);
            width: 25px;
        }

        .brand .reg-tag {
            color: #d4a550;
            font-size: 0.58rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .lang-wrapper {
            background: rgba(4, 13, 29, 0.8);
            border: 1px solid rgba(212, 165, 80, 0.4);
            border-radius: 6px;
            padding: 4px 10px;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .lang-wrapper i {
            color: #d4a550;
            font-size: 0.7rem;
        }

        .lang-select {
            background: transparent;
            border: none;
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 0.7rem;
            cursor: pointer;
            outline: none;
        }

        .lang-select option {
            background: #030c1b;
            color: #ffffff;
        }

        .step-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 1.2rem;
        }

        .step-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(212, 165, 80, 0.15);
            border: 1px solid rgba(212, 165, 80, 0.3);
            transition: all 0.3s;
            flex-shrink: 0;
        }

        .step-dot.active {
            background: #d4a550;
            box-shadow: 0 0 6px rgba(212, 165, 80, 0.6);
            border-color: #d4a550;
        }

        .step-dot.done {
            background: rgba(212, 165, 80, 0.45);
            border-color: rgba(212, 165, 80, 0.45);
        }

        .step-line {
            width: 14px;
            height: 1px;
            background: rgba(212, 165, 80, 0.2);
            flex-shrink: 0;
        }

        .hero-container {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 10px;
            align-items: center;
            margin-bottom: 1.2rem;
        }

        .hero-section h1 {
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.35;
        }

        .hero-section h1 .gold {
            background: linear-gradient(135deg, #fcebc2, #d4a550);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-gold-divider {
            width: 30px;
            height: 2px;
            background: #d4a550;
            margin: 8px 0;
        }

        .global-tag {
            font-size: 0.68rem;
            color: #a0aec0;
            line-height: 1.4;
        }

        .temple-right-frame {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .temple-right-frame img {
            width: 100%;
            max-width: 220px;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
        }

        .info-card {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.12);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            margin-bottom: 0.7rem;
            display: grid;
            grid-template-columns: 55px 1fr 15px;
            gap: 12px;
            align-items: start;
        }

        .icon-frame-box {
            width: 55px;
            height: 55px;
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(2, 8, 19, 0.6);
            position: relative;
            flex-shrink: 0;
        }

        .icon-frame-box i {
            font-size: 1.3rem;
        }

        .icon-box-blue i {
            color: #2b6cb0;
        }

        .icon-box-green i {
            color: #2f855a;
        }

        .icon-box-purple i {
            color: #553c9a;
        }

        .icon-box-gold i {
            color: #d4a550;
        }

        .icon-box-amber i {
            color: #f59e0b;
        }

        .inner-dots {
            position: absolute;
            bottom: 4px;
            right: 4px;
            color: rgba(212, 165, 80, 0.3);
            font-size: 0.35rem;
            line-height: 3px;
            letter-spacing: 0.5px;
        }

        .card-main-body h3 {
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .card-text {
            color: #cbd5e0;
            font-size: 0.68rem;
            line-height: 1.4;
        }

        .sects-text {
            margin-top: 5px;
            color: #d4a550;
            font-size: 0.68rem;
        }

        .right-dots-deco {
            color: #d4a550;
            opacity: 0.6;
            font-size: 0.5rem;
            line-height: 4px;
            letter-spacing: 1px;
            text-align: right;
            padding-top: 2px;
        }

        .benefits-list {
            list-style: none;
        }

        .benefits-list li {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            color: #cbd5e0;
            font-size: 0.68rem;
            margin-bottom: 3px;
        }

        .benefits-list li i {
            color: #48bb78;
            font-size: 0.68rem;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .instruction-line {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            font-size: 0.68rem;
            color: #cbd5e0;
        }

        .instruction-line i {
            color: #d4a550;
            font-size: 0.65rem;
            flex-shrink: 0;
        }

        .security-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .sec-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sec-item i {
            color: #d4a550;
            font-size: 0.7rem;
        }

        .sec-item span {
            font-size: 0.6rem;
            color: #9ca3af;
        }

        .role-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin: 10px 0 8px;
        }

        .role-badge {
            background: rgba(2, 8, 19, 0.8);
            border: 1px solid rgba(212, 165, 80, 0.25);
            border-radius: 6px;
            padding: 6px 4px;
            text-align: center;
            font-size: 0.62rem;
            font-weight: 600;
            color: #e2e8f0;
        }

        .warning-text {
            font-size: 0.65rem;
            color: #f87171;
            line-height: 1.45;
            font-weight: 500;
            margin-top: 4px;
        }

        .action-card {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.12);
            border-radius: 12px;
            padding: 0.9rem 1rem;
            margin-bottom: 0.7rem;
        }

        .action-card-header {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 0.7rem;
        }

        .action-card-header i {
            color: #d4a550;
            font-size: 0.85rem;
        }

        .action-card-header span {
            color: #e2e8f0;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .yes-no-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .btn-yes {
            background: linear-gradient(135deg, #065f46, #047857);
            border: 1px solid rgba(16, 185, 129, 0.3);
            padding: 11px;
            border-radius: 8px;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-yes:hover {
            background: linear-gradient(135deg, #047857, #059669);
        }

        .btn-no {
            background: linear-gradient(135deg, #7f1d1d, #991b1b);
            border: 1px solid rgba(239, 68, 68, 0.3);
            padding: 11px;
            border-radius: 8px;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-no:hover {
            background: linear-gradient(135deg, #991b1b, #b91c1c);
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin: 1rem 0 0.8rem;
        }

        .btn-gold {
            background: linear-gradient(90deg, #b88428 0%, #e3b65f 50%, #b88428 100%);
            /* border: none; */
            padding: 10px;
            border-radius: 8px;
            color: #030c1b;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            /* width: 100%; */
            transition: opacity 0.2s;
        }

        .btn-gold:hover {
            opacity: 0.9;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid #d4a550;
            padding: 9px;
            border-radius: 8px;
            color: #d4a550;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            width: 100%;
            transition: background 0.2s;
        }

        .btn-outline:hover {
            background: rgba(212, 165, 80, 0.08);
        }

        .footer-pillars {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.3rem;
            border-top: 1px solid rgba(212, 165, 80, 0.15);
            padding-top: 0.8rem;
            margin-top: 0.6rem;
        }

        .pillar {
            text-align: center;
        }

        .pillar i {
            color: #d4a550;
            font-size: 1rem;
            margin-bottom: 4px;
            display: block;
        }

        .pillar h4 {
            color: #ffffff;
            font-size: 0.58rem;
            font-weight: 700;
        }

        .pillar p {
            color: #8a7a62;
            font-size: 0.5rem;
        }

        .copyright {
            text-align: center;
            color: rgba(255, 255, 255, 0.3);
            font-size: 0.55rem;
            margin-top: 0.8rem;
        }

        .s4-section-label {
            color: #d4a550;
            font-size: 0.72rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .s4-section-label i {
            font-size: 0.65rem;
        }

        .sampraday-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 1rem;
            align-items: stretch;
            /* ← हे add करा */
        }

        .sampraday-btn {
            background: rgba(5, 17, 38, 0.7);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 10px 8px;
            color: #cbd5e0;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .sampraday-btn:hover {
            border-color: rgba(212, 165, 80, 0.5);
            color: #ffffff;
        }

        .sampraday-btn.selected {
            background: linear-gradient(135deg, #92610a, #d4a550);
            border-color: #d4a550;
            color: #030c1b;
            font-weight: 700;
        }

        .sampraday-btn .sub-label {
            font-size: 0.55rem;
            font-weight: 400;
            display: inline;        /* ← block → inline */
            margin-top: 0;
            opacity: 0.8;
        }

        .subcategory-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 7px;
            margin-bottom: 1rem;
        }

        .subcategory-btn {
            background: rgba(5, 17, 38, 0.7);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 9px 6px;
            color: #cbd5e0;
            font-size: 0.65rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            line-height: 1.3;
        }

        .subcategory-btn:hover {
            border-color: rgba(212, 165, 80, 0.5);
            color: #ffffff;
        }

        .subcategory-btn.selected {
            background: linear-gradient(135deg, #92610a, #d4a550);
            border-color: #d4a550;
            color: #030c1b;
            font-weight: 700;
        }

        .role-select-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 7px;
            margin-bottom: 1rem;
        }

        .role-select-btn {
            background: rgba(5, 17, 38, 0.7);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 9px 4px;
            color: #cbd5e0;
            font-size: 0.62rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .role-select-btn:hover {
            border-color: rgba(212, 165, 80, 0.5);
            color: #ffffff;
        }

        .role-select-btn.selected {
            background: linear-gradient(135deg, #92610a, #d4a550);
            border-color: #d4a550;
            color: #030c1b;
            font-weight: 700;
        }

        .form-field-group {
            margin-bottom: 0.85rem;
        }

        .field-label {
            color: #e2e8f0;
            font-size: 0.72rem;
            font-weight: 600;
            margin-bottom: 0.35rem;
            display: block;
        }

        .field-label .optional-tag {
            color: #718096;
            font-size: 0.6rem;
            font-weight: 400;
            margin-left: 4px;
        }

        .field-label .required-star {
            color: #f87171;
            margin-left: 2px;
        }

        .form-input {
            width: 100%;
            background: rgba(5, 17, 38, 0.7);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 10px 12px;
            color: #ffffff;
            font-size: 0.75rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }

        .form-input::placeholder {
            color: #4a5568;
            font-size: 0.7rem;
        }

        .form-input:focus {
            border-color: rgba(212, 165, 80, 0.6);
            box-shadow: 0 0 0 2px rgba(212, 165, 80, 0.08);
        }

        .form-select {
            width: 100%;
            background: rgba(5, 17, 38, 0.9);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 10px 12px;
            color: #ffffff;
            font-size: 0.75rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4a550' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
            transition: border-color 0.2s;
        }

        .form-select:focus {
            border-color: rgba(212, 165, 80, 0.6);
        }

        .form-select option {
            background: #030c1b;
            color: #ffffff;
        }

        .custom-dropdown-container {
            position: relative;
        }

        .custom-dropdown-trigger {
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4a550' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }

        .custom-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            background: linear-gradient(180deg, #030c1b 0%, #01050d 100%);
            border: 1px solid rgba(212, 165, 80, 0.3);
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
            margin-top: 4px;
            max-height: 280px;
            overflow: hidden;
            animation: dropdownOpen 0.2s ease-out;
        }

        @keyframes dropdownOpen {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .custom-dropdown-search {
            padding: 10px;
            border-bottom: 1px solid rgba(212, 165, 80, 0.15);
        }

        .custom-dropdown-search-input {
            width: 100%;
            background: rgba(5, 17, 38, 0.8);
            border: 1px solid rgba(212, 165, 80, 0.25);
            border-radius: 6px;
            padding: 8px 12px;
            color: #ffffff;
            font-size: 0.7rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }

        .custom-dropdown-search-input:focus {
            border-color: rgba(212, 165, 80, 0.6);
        }

        .custom-dropdown-search-input::placeholder {
            color: #718096;
        }

        .custom-dropdown-options {
            max-height: 220px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(212, 165, 80, 0.4) rgba(5, 17, 38, 0.5);
        }

        .custom-dropdown-options::-webkit-scrollbar {
            width: 6px;
        }

        .custom-dropdown-options::-webkit-scrollbar-track {
            background: rgba(5, 17, 38, 0.5);
        }

        .custom-dropdown-options::-webkit-scrollbar-thumb {
            background: rgba(212, 165, 80, 0.4);
            border-radius: 3px;
        }

        .custom-dropdown-option {
            padding: 10px 12px;
            color: #e2e8f0;
            font-size: 0.72rem;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background-color 0.15s;
            border-bottom: 1px solid rgba(212, 165, 80, 0.05);
        }

        .custom-dropdown-option:last-child {
            border-bottom: none;
        }

        .custom-dropdown-option:hover {
            background: rgba(212, 165, 80, 0.15);
            color: #ffffff;
        }

        .custom-dropdown-option.selected {
            background: rgba(212, 165, 80, 0.25);
            color: #d4a550;
            font-weight: 600;
        }

        .custom-dropdown-option.no-results {
            padding: 20px;
            text-align: center;
            color: #718096;
            font-size: 0.7rem;
            cursor: default;
        }

        .custom-dropdown-option.no-results:hover {
            background: transparent;
        }

        .form-textarea {
            width: 100%;
            background: rgba(5, 17, 38, 0.7);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 10px 12px;
            color: #ffffff;
            font-size: 0.75rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s;
            resize: none;
            min-height: 80px;
        }

        .form-textarea::placeholder {
            color: #4a5568;
            font-size: 0.7rem;
        }

        .form-textarea:focus {
            border-color: rgba(212, 165, 80, 0.6);
            box-shadow: 0 0 0 2px rgba(212, 165, 80, 0.08);
        }

        .form-section-card {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.12);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.8rem;
        }

        .subcategory-section {
            display: none;
        }

        .subcategory-section.visible {
            display: block;
        }

        .input-with-icon {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-with-icon .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #d4a550;
            font-size: 0.7rem;
            pointer-events: none;
        }

        .input-with-icon .form-input {
            padding-left: 32px;
            flex: 1;
            min-width: 0;
        }

        .input-with-icon .form-select {
            padding-left: 32px;
        }

        .textarea-icon-wrap {
            position: relative;
        }

        .textarea-icon-wrap .input-icon {
            top: 12px;
            transform: none;
        }

        .textarea-icon-wrap .form-textarea {
            padding-left: 32px;
        }

        .verify-card {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.12);
            border-radius: 16px;
            padding: 1.3rem 1.2rem;
            margin-bottom: 0.8rem;
        }

        .verify-icon-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(212, 165, 80, 0.1);
        }

        .verify-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #0a1f3d, #102a45);
            border: 1px solid rgba(212, 165, 80, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .verify-icon-wrap .main-icon {
            font-size: 1.3rem;
            color: #3b82f6;
        }

        .verify-icon-wrap .badge-check {
            position: absolute;
            bottom: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, #059669, #10b981);
            border: 2px solid #030c1b;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .verify-icon-wrap .badge-check i {
            font-size: 0.45rem;
            color: #ffffff;
        }

        .verify-title-area h3 {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .verify-title-area .verify-subtitle {
            display: block;
            width: 36px;
            height: 2px;
            background: linear-gradient(90deg, #d4a550, transparent);
            margin-top: 6px;
        }

        .phone-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .phone-prefix {
            position: absolute;
            left: 12px;
            color: #d4a550;
            font-size: 0.75rem;
            font-weight: 600;
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .phone-prefix::after {
            content: '';
            display: inline-block;
            width: 1px;
            height: 14px;
            background: rgba(212, 165, 80, 0.3);
            margin-left: 4px;
        }

        .phone-input-wrap .form-input {
            padding-left: 64px;
        }

        .field-note {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
        }

        .field-note i {
            color: #d4a550;
            font-size: 0.6rem;
            flex-shrink: 0;
        }

        .field-note span {
            color: #718096;
            font-size: 0.6rem;
            line-height: 1.4;
        }

        .security-badges-row {
            display: flex;
            gap: 8px;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .sec-badge {
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(2, 8, 19, 0.6);
            border: 1px solid rgba(212, 165, 80, 0.15);
            border-radius: 6px;
            padding: 5px 8px;
            flex: 1;
            min-width: 90px;
        }

        .sec-badge i {
            color: #d4a550;
            font-size: 0.68rem;
            flex-shrink: 0;
        }

        .sec-badge span {
            color: #9ca3af;
            font-size: 0.58rem;
            line-height: 1.3;
        }

        .verify-progress-strip {
            height: 3px;
            background: rgba(212, 165, 80, 0.1);
            border-radius: 2px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .verify-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #b88428, #e3b65f);
            border-radius: 2px;
        }

        .step-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .step-label-row .step-tag {
            background: rgba(212, 165, 80, 0.12);
            border: 1px solid rgba(212, 165, 80, 0.25);
            border-radius: 20px;
            padding: 3px 10px;
            color: #d4a550;
            font-size: 0.6rem;
            font-weight: 600;
        }

        .step-label-row .step-of {
            color: #4a5568;
            font-size: 0.6rem;
        }

        .s6-form-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(212, 165, 80, 0.1);
        }

        .s6-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #0a1f3d, #102a45);
            border: 1px solid rgba(212, 165, 80, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s6-icon-wrap i {
            font-size: 1.4rem;
            color: #d4a550;
        }

        .s6-title-area h3 {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
        }

        .s6-title-area p {
            color: #a0aec0;
            font-size: 0.65rem;
            margin-top: 3px;
        }

        .s6-title-area .gold-bar {
            display: block;
            width: 36px;
            height: 2px;
            background: linear-gradient(90deg, #d4a550, transparent);
            margin-top: 6px;
        }

        .two-col-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .pincode-note {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
        }

        .pincode-note i {
            color: #48bb78;
            font-size: 0.6rem;
        }

        .pincode-note span {
            color: #718096;
            font-size: 0.6rem;
        }


        .s7-form-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(212, 165, 80, 0.1);
        }

        .s7-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #1a0a2e, #2d1050);
            border: 1px solid rgba(212, 165, 80, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s7-icon-wrap i {
            font-size: 1.4rem;
            color: #d4a550;
        }

        .s7-title-area h3 {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
        }

        .s7-title-area p {
            color: #a0aec0;
            font-size: 0.65rem;
            margin-top: 3px;
        }

        .s7-title-area .gold-bar {
            display: block;
            width: 36px;
            height: 2px;
            background: linear-gradient(90deg, #d4a550, transparent);
            margin-top: 6px;
        }

        .info-highlight-box {
            background: rgba(212, 165, 80, 0.05);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            padding: 0.7rem 0.9rem;
            margin-bottom: 0.85rem;
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }

        .info-highlight-box i {
            color: #d4a550;
            font-size: 0.7rem;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .info-highlight-box span {
            color: #a0aec0;
            font-size: 0.65rem;
            line-height: 1.5;
        }

        .s8-form-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(212, 165, 80, 0.1);
        }

        .s8-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #0a2a1a, #0d3d22);
            border: 1px solid rgba(212, 165, 80, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s8-icon-wrap i {
            font-size: 1.4rem;
            color: #d4a550;
        }

        .s8-title-area h3 {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
        }

        .s8-title-area p {
            color: #a0aec0;
            font-size: 0.65rem;
            margin-top: 3px;
        }

        .s8-title-area .gold-bar {
            display: block;
            width: 36px;
            height: 2px;
            background: linear-gradient(90deg, #d4a550, transparent);
            margin-top: 6px;
        }

        .facility-list {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        .facility-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 8px;
            border: 1px solid rgba(212, 165, 80, 0.15);
            border-radius: 8px;
            background: rgba(5, 17, 38, 0.4);
            cursor: pointer;
            transition: background 0.15s;
        }

        .facility-item:hover {
            background: rgba(212, 165, 80, 0.07);
            border-color: rgba(212, 165, 80, 0.3);
        }

        .facility-item-left {
            display: flex;
            align-items: center;
            gap: 7px;
            flex: 1;
            min-width: 0;
        }

        .facility-item-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .delete-custom-facility-btn {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.65rem;
            transition: all 0.2s;
        }

        .delete-custom-facility-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
        }

        .facility-emoji {
            font-size: 1rem;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 8, 19, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.15);
            border-radius: 6px;
            flex-shrink: 0;
        }

        .facility-name {
            color: #e2e8f0;
            font-size: 0.68rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toggle-switch {
            position: relative;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
            margin-left: 4px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(212, 165, 80, 0.15);
            border-radius: 20px;
            transition: 0.3s;
            border: 1px solid rgba(212, 165, 80, 0.2);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 2px;
            bottom: 2px;
            background: #718096;
            border-radius: 50%;
            transition: 0.3s;
        }

        .toggle-switch input:checked+.toggle-slider {
            background: rgba(212, 165, 80, 0.3);
            border-color: #d4a550;
        }

        .toggle-switch input:checked+.toggle-slider:before {
            transform: translateX(16px);
            background: #d4a550;
        }

        .custom-facility-area {
            margin-top: 0.8rem;
        }

        .custom-facility-add-btn {
            width: 100%;
            background: rgba(212, 165, 80, 0.07);
            border: 1px dashed rgba(212, 165, 80, 0.35);
            border-radius: 10px;
            padding: 10px;
            color: #d4a550;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }

        .custom-facility-add-btn:hover {
            background: rgba(212, 165, 80, 0.12);
        }

        .custom-input-row {
            display: none;
            margin-top: 8px;
            gap: 8px;
        }

        .custom-input-row.visible {
            display: flex;
        }

        .custom-input-row .form-input {
            flex: 1;
        }

        /* ===== SCREEN REVIEW (8.5) ===== */
        .review-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(212, 165, 80, 0.1);
        }

        .review-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #1a1205, #2d1e08);
            border: 1px solid rgba(212, 165, 80, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .review-icon-wrap i {
            font-size: 1.4rem;
            color: #d4a550;
        }

        .review-title-area h3 {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
        }

        .review-title-area p {
            color: #a0aec0;
            font-size: 0.65rem;
            margin-top: 3px;
        }

        .review-title-area .gold-bar {
            display: block;
            width: 36px;
            height: 2px;
            background: linear-gradient(90deg, #d4a550, transparent);
            margin-top: 6px;
        }

        .review-section-label {
            color: #d4a550;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .review-section-label i {
            font-size: 0.6rem;
        }

        .review-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 0.8rem;
        }

        .review-table tr {
            border-bottom: 1px solid rgba(212, 165, 80, 0.08);
        }

        .review-table tr:last-child {
            border-bottom: none;
        }

        .review-table td {
            padding: 7px 4px;
            font-size: 0.7rem;
            vertical-align: top;
        }

        .review-table td:first-child {
            color: #718096;
            font-weight: 500;
            width: 45%;
            padding-right: 8px;
        }

        .review-table td:last-child {
            color: #e2e8f0;
            font-weight: 600;
            text-align: right;
        }

        .review-block {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.12);
            border-radius: 10px;
            padding: 0.8rem 0.9rem;
            margin-bottom: 0.7rem;
        }

        .review-facilities-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 2px;
        }

        .review-fac-tag {
            background: rgba(212, 165, 80, 0.1);
            border: 1px solid rgba(212, 165, 80, 0.25);
            border-radius: 14px;
            padding: 3px 9px;
            color: #d4a550;
            font-size: 0.62rem;
            font-weight: 600;
        }

        .declaration-box {
            background: rgba(212, 165, 80, 0.05);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            margin-bottom: 0.8rem;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .declaration-box i {
            color: #d4a550;
            font-size: 0.9rem;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .declaration-box span {
            color: #a0aec0;
            font-size: 0.65rem;
            line-height: 1.6;
        }

        /* ===== SUCCESS ===== */
        .success-card {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 16px;
            padding: 2rem 1.5rem;
            margin-bottom: 0.8rem;
            text-align: center;
        }

        .success-icon-ring {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.2rem;
            background: linear-gradient(135deg, #065f46, #047857);
            border: 3px solid rgba(16, 185, 129, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.25);
        }

        .success-icon-ring i {
            font-size: 2rem;
            color: #ffffff;
        }

        .success-card h3 {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .success-card .success-sub {
            color: #a0aec0;
            font-size: 0.7rem;
            line-height: 1.6;
        }

        .success-divider {
            width: 50px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #d4a550, transparent);
            margin: 1rem auto;
        }

        .success-id-box {
            background: rgba(2, 8, 19, 0.6);
            border: 1px solid rgba(212, 165, 80, 0.3);
            border-radius: 10px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .success-id-box .id-label {
            color: #718096;
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .success-id-box .id-value {
            color: #d4a550;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .success-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 1rem;
        }

        .success-detail-item {
            background: rgba(5, 17, 38, 0.5);
            border: 1px solid rgba(212, 165, 80, 0.1);
            border-radius: 8px;
            padding: 0.7rem;
            text-align: left;
        }

        .success-detail-item .detail-label {
            color: #718096;
            font-size: 0.58rem;
            font-weight: 600;
            margin-bottom: 3px;
            text-transform: uppercase;
        }

        .success-detail-item .detail-value {
            color: #e2e8f0;
            font-size: 0.68rem;
            font-weight: 600;
        }

        .whatsapp-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: rgba(37, 211, 102, 0.07);
            border: 1px solid rgba(37, 211, 102, 0.2);
            border-radius: 8px;
            padding: 0.7rem;
            margin-top: 0.8rem;
        }

        .whatsapp-note i {
            color: #25d366;
            font-size: 0.85rem;
        }

        .whatsapp-note span {
            color: #a0aec0;
            font-size: 0.63rem;
        }

        /* ===== SANGH SUGGESTION CONTAINER ===== */
        .sangh-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(5, 17, 38, 0.95);
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 12px;
            margin-top: 4px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            display: none;
        }

        .sangh-suggestions.active {
            display: block;
        }

        .sangh-suggestions::-webkit-scrollbar {
            width: 6px;
        }

        .sangh-suggestions::-webkit-scrollbar-track {
            background: rgba(2, 8, 19, 0.5);
            border-radius: 3px;
        }

        .sangh-suggestions::-webkit-scrollbar-thumb {
            background: rgba(212, 165, 80, 0.3);
            border-radius: 3px;
        }

        .sangh-suggestions::-webkit-scrollbar-thumb:hover {
            background: rgba(212, 165, 80, 0.5);
        }

        .sangh-suggestion-item {
            background: rgba(5, 17, 38, 0.4);
            border: 1px solid rgba(212, 165, 80, 0.1);
            border-radius: 10px;
            padding: 0.8rem 1rem;
            margin: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .sangh-suggestion-item:hover {
            background: rgba(212, 165, 80, 0.08);
            border-color: rgba(212, 165, 80, 0.3);
            transform: translateY(-1px);
        }

        .sangh-suggestion-item.selected {
            background: rgba(212, 165, 80, 0.12);
            border-color: rgba(212, 165, 80, 0.4);
        }

        .sangh-suggestion-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border: 1px solid rgba(212, 165, 80, 0.2);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(2, 8, 19, 0.6);
            font-size: 1.1rem;
        }

        .sangh-suggestion-content {
            flex: 1;
            min-width: 0;
        }

        .sangh-suggestion-name {
            color: #ffffff;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sangh-suggestion-details {
            color: #a0aec0;
            font-size: 0.65rem;
            line-height: 1.4;
        }

        .sangh-suggestion-details span {
            color: #d4a550;
            font-weight: 500;
        }

        .suggestions-loading {
            padding: 1rem;
            text-align: center;
            color: #a0aec0;
            font-size: 0.7rem;
        }

        .suggestions-loading i {
            color: #d4a550;
            margin-right: 8px;
        }

        .suggestions-empty {
            padding: 1rem;
            text-align: center;
            color: #718096;
            font-size: 0.7rem;
        }

        .suggestions-empty-state {
            padding: 1.5rem;
            text-align: center;
            background: rgba(5, 17, 38, 0.4);
            border: 1px solid rgba(212, 165, 80, 0.1);
            border-radius: 10px;
            margin: 0.5rem;
        }

        .suggestions-empty-state-icon {
            font-size: 2rem;
            margin-bottom: 0.8rem;
            color: #d4a550;
        }

        .suggestions-empty-state-title {
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .suggestions-empty-state-message {
            color: #a0aec0;
            font-size: 0.7rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .suggestions-empty-state-query {
            color: #d4a550;
            font-weight: 500;
        }

        .suggestions-empty-state-btn {
            background: linear-gradient(135deg, #d4a550 0%, #b8942e 100%);
            color: #020710;
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .suggestions-empty-state-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(212, 165, 80, 0.3);
        }

        .suggestions-wrapper {
            position: relative;
            
            
            
        }
        
/* ===== RESPONSIVE ADJUSTMENTS FOR MOBILE (PERFECT FIT + SCROLL + FIXED INPUT PADDING) ===== */
@media (max-width: 768px) {
    /* Base configuration allowing global flow management */
    html, body {
        min-height: 100vh !important;
        height: 100svh !important; 
        overflow-x: hidden !important; /* आडवा स्क्रोल पूर्णपणे बंद करण्यासाठी */
        overflow-y: hidden !important; /* बॉडी लेव्हलवर स्क्रोल ब्लॉक करून कार्ड स्क्रोल चालू केला */
        background: #01050d !important;
        margin: 0 !important;   
        padding: 0 !important;  
    }

    body {
        display: flex !important;
        align-items: stretch !important; 
        justify-content: center !important;
    }

    .form-screen {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        display: none !important;
    }

    .form-screen.active {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
    }

    .main-card {
        width: 100% !important;
        height: 100% !important;
        max-height: 100svh !important; /* Dynamic mobile viewport height */
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0px !important; 
        border: none !important;        
        box-shadow: none !important;    
        background: linear-gradient(180deg, #040f22 0%, #01050d 100%) !important;
        overflow: hidden !important;   
    }

    /* ===== FIXED: NAVBAR LOGO & TWO LINE TEXT ALIGNMENT ===== */
    .top-nav {
        padding: 0.4rem 0.5rem !important; /* उंची अजून कमी केली */
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important; 
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
        flex-shrink: 0 !important; 
        gap: 6px !important;
    }

    /* ===== FIXED: JOIN SUCCESS PAGE MOBILE OPTIMIZATION (NO SCROLL) ===== */
    #screen12 .content-area {
        justify-content: space-between !important; /* संपूर्ण घटक स्क्रीनमध्ये समान विभागले जातील */
    }

    #screen12 .review-block {
        padding: 8px !important; /* पॅडिंग कमी केली */
        margin-top: 8px !important; /* मार्जिन कमी केली */
    }

    #screen12 h2 {
        font-size: 1.25rem !important; /* स्क्रीननुसार परफेक्ट रिस्पॉन्सिव्ह साईझ */
        margin-bottom: 4px !important;
    }

    #screen12 h3 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    #screen12 p {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    #screen12 .form-section-card {
        margin-top: 8px !important;
        padding: 8px !important;
    }

    #screen12 .review-table td {
        font-size: 0.75rem !important; /* टेबल टेक्स्ट लहान केला */
        padding: 4px 6px !important; /* आतील स्पेस कमी केली */
    }

    #screen12 .button-group button {
        padding: 8px 20px !important; /* बटण कॉम्पॅक्ट केले */
        font-size: 0.85rem !important;
    }

    .logo-area {
        display: flex !important;
        align-items: center !important; 
        gap: 8px !important; /* गॅप कमी केला */
        flex: 1 !important;
        min-width: 0 !important;
    }

    .logo-icon {
        width: 48px !important; /* लोगो थोडा लहान केला */ 
        height: 48px !important;
        object-fit: contain !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    .brand {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .brand h2 {
        font-size: 0.95rem !important; /* फॉन्ट थोडा लहान केला */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: normal !important; 
        max-width: 160px !important;   
    }

    .brand .badge-row {
        margin-top: 2px !important;
        gap: 3px !important;
        display: flex !important;
        align-items: center !important;
    }

    .brand .reg-tag {
        font-size: 0.5rem !important;
    }

    .lang-wrapper i, .lang-select {
        font-size: 0.7rem !important;
    }

    /* ===== MAIN CONTENT AREA (SCROLL PROBLEM FIXED) ===== */
    .content-area {
        padding: 0.4rem 0.6rem !important; /* पॅडिंग कमी केली जेणेकरून जास्त जागा मिळेल */
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important; 
        overflow-y: auto !important; /* बटन्स कट होऊ नयेत म्हणून ऑटो स्क्रोल चालू ठेवलं */
        overflow-x: hidden !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important; 
        scrollbar-width: none !important; 
    }

    .content-area::-webkit-scrollbar {
        display: none !important; 
    }

    /* FACILITY PAGE SPECIFIC SCROLL OVERRIDE */
    #facility-screen .content-area, 
    .facility-container-block,
    .form-screen[data-step="facility"] .content-area { 
        overflow-y: auto !important; 
        overflow-x: hidden !important;
    }

    /* Step Indicators */
    .step-indicator {
        margin-bottom: 0.2rem !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .step-dot { width: 4px !important; height: 4px !important; }
    .step-line { width: 8px !important; }

    .step-label-row {
        margin-bottom: 0.2rem !important;
        flex-shrink: 0 !important;
    }

    .step-label-row .step-tag, .step-label-row .step-of {
        font-size: 0.7rem !important; 
        font-weight: 600 !important;
    }

    .verify-progress-strip {
        margin-bottom: 0.25rem !important;
        height: 2px !important;
        flex-shrink: 0 !important;
    }

    /* ===== FIXED: TEMPLE (MANDIR) & HERO CONTAINER ADJUSTMENTS ===== */
    .hero-container {
        display: grid !important;
        grid-template-columns: 1.3fr 0.7fr !important; 
        gap: 4px !important; 
        margin-bottom: 0.3rem !important;
        align-items: center !important; 
        flex-shrink: 0 !important;
    }

    .hero-section h1 {
        font-size: 1.05rem !important; /* लहान मोबाईलसाठी परफेक्ट साइज */
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .hero-gold-divider {
        margin: 3px 0 !important;
        height: 1px !important;
    }

    .global-tag { font-size: 0.68rem !important; }
    
    .temple-right-frame {
        display: flex !important;
        justify-content: flex-end !important; 
        align-items: center !important;
    }

    .temple-right-frame img {
        width: 85px !important; /* इमेजची साईझ कमी केली जेणेकरून फॉर्म वर येईल */
        max-width: 90px !important;
        height: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0px 3px 8px rgba(212, 175, 55, 0.3)) !important; 
    }

    /* ===== FIXED: INPUT FIELDS & ICON OVERLAP SOLUTION ===== */
    .form-field-group {
        margin-bottom: 0.25rem !important; /* मार्जिन कमी केली */
    }

    .field-label {
        font-size: 0.8rem !important; /* थोडं लहान केलं */
        font-weight: 600 !important;
        margin-bottom: 0.1rem !important;
    }

    .form-input, .form-select, .form-textarea {
        padding: 6px 8px !important; /* इनपुट बॉक्सची उंची कमी केली */
        font-size: 0.85rem !important; 
        border-radius: 5px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .form-textarea {
        min-height: 38px !important;
    }

    .input-with-icon {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    .input-with-icon .input-icon {
        font-size: 0.8rem !important;
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* कंट्री किंवा कोणत्याही आयकॉन असलेल्या इनपुटसाठी डावीकडील पॅडिंग वाढवली */
    .input-with-icon .form-input, 
    .input-with-icon .form-select,
    select.form-select,
    [data-type="country"] .form-input,
    .country-input-wrap .form-input {
        padding-left: 36px !important; /* ३६px पॅडिंगमुळे मजकूर आयकॉनच्या मागे जाणार नाही */
    }

    .phone-input-wrap {
        position: relative !important;
    }

    /* फोन इनपुट फील्डसाठी विशेष पॅडिंग (कंट्री कोड +९१ साठी भरपूर जागा) */
    .phone-input-wrap .form-input {
        padding-left: 54px !important; 
    }
    
    .phone-prefix {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        z-index: 2 !important;
    }

    .field-note span, .pincode-note span {
        font-size: 0.65rem !important;
    }

    /* Card adjustments */
    .form-section-card, .verify-card, .review-block {
        padding: 0.35rem 0.55rem !important; /* कार्ड्स पॅडिंग कमी केली */
        margin-bottom: 0.25rem !important;
    }

    .verify-title-area h3, .s6-title-area h3, .s7-title-area h3, .review-title-area h3 {
        font-size: 0.9rem !important; 
        font-weight: 600 !important;
    }

    /* ===== TWO-COLUMN FACILITY LIST ===== */
    .facility-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important; 
    }

    .facility-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 6px !important; 
        border-radius: 5px !important;
        box-sizing: border-box !important;
        gap: 3px !important;
    }

    .facility-item > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .facility-name {
        font-size: 0.78rem !important; 
        line-height: 1.1 !important;
        font-weight: 600 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .facility-emoji {
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }

    .toggle-switch {
        width: 22px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .toggle-slider:before {
        height: 6px !important;
        width: 6px !important;
        left: 2px !important;
        bottom: 3px !important;
    }

    .toggle-switch input:checked+.toggle-slider:before {
        transform: translateX(10px) !important;
    }

    .custom-facility-add-btn {
        padding: 5px !important;
        font-size: 0.75rem !important;
        grid-column: span 2 !important;
        border-radius: 5px !important;
    }

    /* ===== SUMMARY SCREEN ===== */
    .review-table td {
        padding: 3px 2px !important;
        font-size: 0.7rem !important; 
    }

    /* ===== ACTION BUTTONS GROUP (FIXED FOR BOTTOM PRESENTATION) ===== */
    .button-group {
        margin-top: 0.3rem !important; 
        margin-bottom: 0.3rem !important;
        gap: 5px !important;
        padding-top: 0 !important;
        width: 100% !important;
        flex-shrink: 0 !important; /* बटन्स कधीही आक्रसणार नाहीत */
    }

    .btn-gold, .btn-outline {
        padding: 7px !important; /* बटन्सची उंची हलकी कमी केली */
        font-size: 0.85rem !important; 
        font-weight: 700 !important;
        border-radius: 5px !important;
    }

    /* ===== BASE TRUST FOOTER ===== */
    .footer-pillars {
        margin-top: auto !important; 
        padding-top: 0.2rem !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
        flex-shrink: 0 !important; /* फुटर नेहमी जाग्यावर राहील */
    }

    .pillar i { font-size: 0.7rem !important; margin-bottom: 1px !important; }
    .pillar h4 { font-size: 0.5rem !important; }
    .pillar p { display: none !important; } 

    .security-badges-row { margin-top: 0.1rem !important; gap: 4px !important; }
    .sec-badge { padding: 1px 3px !important; min-width: 60px !important; }
    .sec-badge span { font-size: 0.48rem !important; }
    .copyright { margin-top: 0.1rem !important; font-size: 0.5rem !important; }
}

/* ==========================================
   TABLET VIEWPORT OPTIMIZATION
   ========================================== */
@media (min-width: 769px) and (max-width: 1023px) {
    /* ===== JOIN SUCCESS PAGE TABLET ===== */
    #screen12 .review-block {
        padding: 20px !important;
        margin-top: 25px !important;
    }

    #screen12 h2 {
        font-size: 26px !important;
    }

    #screen12 h3 {
        font-size: 19px !important;
    }

    #screen12 p {
        font-size: 15px !important;
    }

    #screen12 .form-section-card {
        margin-top: 25px !important;
    }

    #screen12 .review-table td {
        font-size: 14px !important;
        padding: 10px !important;
    }

    #screen12 .button-group button {
        padding: 11px 35px !important;
        font-size: 15px !important;
    }
}


/* ==========================================
   DESKTOP VIEWPORT SCROLLLESS OPTIMIZATION
   ========================================== */
@media (min-width: 1024px) {
    /* 1. Eliminate any potential body overflow */
    body {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(0.4rem, 1.5vh, 1rem) 0.5rem !important;
        overflow: hidden !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }

    /* 2. Compact the main container wrapper */
    .main-card {
        max-height: calc(100vh - clamp(0.8rem, 3vh, 2rem)) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: clamp(16px, 2.5vh, 28px) !important;
        width: 100% !important;
        max-width: 1150px !important; /* Premium center responsive bounds */
    }

    /* 3. top-nav — Alignment for Desktop Logo & Text */
    .top-nav {
        padding: clamp(0.6rem, 1.8vh, 1.1rem) clamp(0.8rem, 2vw, 1.3rem) 0.4rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: clamp(0.4rem, 1.4vh, 1rem) !important;
    }

    .logo-area {
        display: flex !important;
        align-items: center !important;
        gap: clamp(10px, 1.2vw, 16px) !important;
    }

    .logo-icon {
        width: clamp(40px, 5.5vh, 52px) !important; /* Desktop center square bounding box */
        height: clamp(40px, 5.5vh, 52px) !important;
        object-fit: contain !important;
    }

    .brand {
        display: flex !important;
        flex-direction: column !important;
    }

    .brand h2 {
        font-size: clamp(1.2rem, 2.2vh, 1.5rem) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* 4. content-area — padding update */
    .content-area {
        padding: 0 clamp(0.8rem, 2vw, 1.3rem) clamp(0.8rem, 2vh, 1.3rem) !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }
    .content-area::-webkit-scrollbar {
        display: none !important;
    }

    .step-indicator {
        margin-bottom: clamp(0.4rem, 1.4vh, 1rem) !important;
    }
    
    /* 5. Scale down and shift the right temple graphic dynamically to fit within 100vh */
    .hero-container {
        display: grid !important;
        grid-template-columns: 1.4fr 0.6fr !important;
        margin-bottom: clamp(0.4rem, 1.4vh, 1rem) !important;
        gap: clamp(12px, 2vw, 24px) !important;
        align-items: center !important;
    }

    .temple-right-frame {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .temple-right-frame img {
        width: 100% !important;
        max-width: clamp(140px, 22vh, 200px) !important; /* Clean premium high-res boundary */
        height: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0px 6px 15px rgba(212, 175, 55, 0.25)) !important;
    }

    /* 6. Optimizing Card spacing and layout elements proportionally */
    .info-card, .action-card, .form-section-card, .verify-card {
        padding: clamp(0.5rem, 1.3vh, 0.8rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        margin-bottom: clamp(0.3rem, 1vh, 0.6rem) !important;
        gap: clamp(6px, 1.2vw, 12px) !important;
    }

    .icon-frame-box {
        width: clamp(40px, 6vh, 52px) !important;
        height: clamp(40px, 6vh, 52px) !important;
    }
    .icon-frame-box i {
        font-size: clamp(1rem, 2vh, 1.2rem) !important;
    }

    /* 7. Input fields and grid buttons structural height & ICON OVERLAP FIXED */
    .form-field-group {
        margin-bottom: clamp(0.4rem, 1.2vh, 0.75rem) !important;
    }
    .field-label {
        margin-bottom: clamp(0.2rem, 0.5vh, 0.35rem) !important;
    }
    
    /* Base configuration for Desktop input fields */
    .form-input, .form-select {
        padding: clamp(6px, 1.1vh, 9px) 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* CRITICAL FIX: Icon च्‍या मागे मजकूर जाण्यापासून रोखण्यासाठी Left Padding वाढवली */
    .input-with-icon {
        position: relative !important;
    }

    .input-with-icon .input-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }

    /* डेस्कटॉपवर इनपुट आणि सिलेक्ट बॉक्समधील मजकूर आयकॉन सोडून ३8px पुढून सुरु होईल */
    .input-with-icon .form-input, 
    .input-with-icon .form-select {
        padding-left: 42px !important; 
    }

    /* Phone Number Input Fix (Country Code +91 च्या पुढे मजकूर ढकलणे) */
    .phone-input-wrap {
        position: relative !important;
    }
    
    .phone-prefix {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
    }

    .phone-input-wrap .form-input {
        padding-left: 56px !important; /* +91 च्या मागे टेक्स्ट मिक्स होणार नाही */
    }

    .form-textarea {
        padding: clamp(6px, 1.1vh, 9px) 12px !important;
        min-height: clamp(50px, 8vh, 70px) !important;
    }

    /* 8. Action Grid Elements Scaling */
    .sampraday-grid, .subcategory-grid, .role-select-grid, .yes-no-grid {
        gap: clamp(4px, 0.8vh, 7px) !important;
        margin-bottom: clamp(0.4rem, 1.2vh, 0.8rem) !important;
    }
    .sampraday-btn, .subcategory-btn, .role-select-btn {
        padding: clamp(5px, 1vh, 8px) 4px !important;
    }

    /* 9. Header Icon Boxes sizing for workflow screens */
    .verify-icon-header, .s6-form-header, .s7-form-header, .s8-form-header, .review-header {
        margin-bottom: clamp(0.4rem, 1.4vh, 1rem) !important;
        padding-bottom: clamp(0.4rem, 1.2vh, 0.8rem) !important;
    }
    .verify-icon-wrap, .s6-icon-wrap, .s7-icon-wrap, .s8-icon-wrap, .review-icon-wrap {
        width: clamp(40px, 5.8vh, 48px) !important;
        height: clamp(40px, 5.8vh, 48px) !important;
    }
    .verify-icon-wrap .main-icon, .s6-icon-wrap i, .s7-icon-wrap i, .s8-icon-wrap i, .review-icon-wrap i {
        font-size: clamp(1.1rem, 2vh, 1.3rem) !important;
    }

    /* 10. Button and Footer adjustments */
    .btn-yes, .btn-no, .btn-gold, .btn-outline {
        padding: clamp(7px, 1.2vh, 10px) !important;
    }
    .button-group {
        margin: clamp(0.5rem, 1.5vh, 1rem) 0 clamp(0.4rem, 1.2vh, 0.8rem) !important;
        gap: clamp(4px, 1vh, 8px) !important;
    }
    .footer-pillars {
        padding-top: clamp(0.4rem, 1.2vh, 0.7rem) !important;
        margin-top: clamp(0.3rem, 1vh, 0.5rem) !important;
    }
    .copyright {
        margin-top: clamp(0.4rem, 1.2vh, 0.7rem) !important;
    }
}

/* Local form feedback uses the existing navy and gold visual language. */
[hidden] { display: none !important; }
.local-form-error { width:100%; border:1px solid rgba(252,129,129,.55); background:rgba(127,29,29,.18); color:#feb2b2; border-radius:12px; padding:.75rem; font-size:.78rem; line-height:1.5; margin-bottom:.8rem; }
#screen4 > .main-card > .content-area > .button-group:has(.local-form-error) { flex-wrap:wrap; }
.local-development-notice { background:rgba(212,165,80,.1); border:1px solid rgba(212,165,80,.4); color:#f6d99a; padding:.75rem; border-radius:12px; margin-bottom:1rem; font-size:.8rem; line-height:1.5; }
.otp-box-container .otp-box { min-width:0; flex:0 1 45px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #d4a550; outline-offset:3px; }


.local-otp-feedback { background:rgba(5,150,105,.12); border:1px solid rgba(72,187,120,.4); color:#9ae6b4; padding:.75rem; border-radius:12px; margin-bottom:1rem; font-size:.8rem; line-height:1.5; }
.local-otp-feedback.is-error { background:rgba(127,29,29,.18); border-color:rgba(252,129,129,.55); color:#feb2b2; }

/* Registration completion dialog */
.submission-modal[hidden], .submission-modal [hidden] { display: none !important; }
.submission-modal {
    position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
    padding: 20px; background: rgba(1, 8, 21, .76); backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px); color: #102c4c; isolation: isolate;
    animation: submission-backdrop-in .2s ease-out;
}
.submission-sheet {
    position: relative; width: min(100%, 456px); max-height: calc(100dvh - 40px);
    overflow: auto; padding: 26px 30px 22px; border-radius: 28px;
    background: radial-gradient(ellipse at 48% 12%, #fff3d6 0, transparent 46%), #fffdf8;
    border: 1px solid rgba(232, 202, 134, .9);
    box-shadow: 0 34px 100px #0008, 0 0 0 6px #ffffff08;
    animation: submission-sheet-in .32s cubic-bezier(.2,.8,.2,1);
    text-align: center; font-family: 'Inter', sans-serif;
}
.submission-sheet::before { content: ''; position: absolute; top: 0; left: 21%; right: 21%; height: 3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, #d1a548, transparent); }
.submission-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; }
.submission-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #112b4b; font-size: 21px; letter-spacing: .02em; line-height: 1.15; }
.submission-brand img { width: 44px; height: 44px; object-fit: contain; }
.submission-brand-sub { display: block; font-size: 8px; font-weight: 700; color: #87703d; letter-spacing: .13em; margin-top: 5px; }
.submission-secure { display: inline-flex; align-items: center; gap: 5px; color: #6e7d70; font-size: 8px; font-weight: 700; letter-spacing: .1em; background: #edf3e9; padding: 6px 8px; border-radius: 20px; }
.submission-close { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #dce1e4; color: #627086; background: #ffffffb3; border-radius: 50%; cursor: pointer; font-size: 12px; }
.submission-close:hover { background: #ecf0f4; color: #102c4c; }
.submission-art { position: relative; display: grid; place-items: center; width: 156px; height: 156px; margin: 29px auto 18px; }
.submission-art::before { content: ''; position: absolute; inset: 19px; border-radius: 50%; background: radial-gradient(circle, #f3d68a88 0, #f3d68a10 72%); }
.submission-orbit { position: absolute; border-radius: 50%; border: 1px solid #dfca9466; }
.submission-orbit-one { inset: 3px; border-top: 3px solid #c49a3c; border-right-color: transparent; animation: submission-turn 2.6s linear infinite; }
.submission-orbit-two { inset: 13px; border-bottom: 2px solid #103559; border-left-color: transparent; animation: submission-turn 3.8s linear infinite reverse; }
.submission-symbol { position: relative; display: grid; place-items: center; width: 91px; height: 91px; border-radius: 27px; font-size: 39px; box-shadow: 0 13px 25px #d2b46c35; }
.submission-symbol-document { background: linear-gradient(140deg, #fffefa, #ffedbd); color: #af822d; border: 1px solid #e8c879; transform: rotate(-6deg); }
.submission-symbol-document i { transform: rotate(6deg); }
.submission-symbol-success, .submission-symbol-warning { display: none; }
.submission-spark { position: absolute; width: 6px; height: 6px; border-radius: 2px; background: #d2a546; transform: rotate(45deg); }
.submission-spark-one { left: 8px; top: 37px; }
.submission-spark-two { right: 3px; top: 63px; width: 8px; height: 8px; }
.submission-spark-three { left: 37px; bottom: 5px; width: 4px; height: 4px; }
.submission-eyebrow { color: #a47c29; letter-spacing: .15em; font-size: 9px; font-weight: 800; margin: 0 0 10px; }
.submission-message h2 { margin: 0; color: #102b4d; font-size: clamp(27px, 5vw, 33px); line-height: 1.18; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.submission-message > p:last-child { max-width: 325px; margin: 14px auto 0; color: #67778b; line-height: 1.6; font-size: 13px; }
.submission-dots { display: inline-block; animation: submission-breathe 1.4s ease-in-out infinite; }
.submission-steps { display: flex; list-style: none; padding: 0; margin: 26px 0 22px; width: 100%; }
.submission-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #95a1ac; font-size: 9px; font-weight: 600; }
.submission-steps li:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 17px); top: 14px; width: calc(100% - 34px); height: 1px; background: #e0e3df; }
.submission-step-icon { position: relative; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #e0e4e2; background: #fffdf8; border-radius: 50%; font-size: 10px; z-index: 1; }
.submission-step-icon i { display: none; }
.submission-step-icon b { font-weight: 700; }
.submission-steps li.is-active { color: #a67a23; }
.submission-steps li.is-active .submission-step-icon { background: #fff3d3; border-color: #d1aa56; box-shadow: 0 0 0 4px #f1deb34d; }
.submission-steps li.is-complete { color: #248460; }
.submission-steps li.is-complete .submission-step-icon { color: #fff; border-color: #21946d; background: #21946d; }
.submission-steps li.is-complete .submission-step-icon i { display: block; }
.submission-steps li.is-complete .submission-step-icon b { display: none; }
.submission-steps li.is-complete::after { background: #b6dac8; }
.submission-delivery { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 13px; background: #eef5ef; border: 1px solid #dcebdd; text-align: left; }
.submission-delivery-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: #258460; color: #fff; box-shadow: 0 3px 8px #25846020; }
.submission-delivery-icon svg { display: block; width: 24px; height: 24px; color: #fff; }
#submission-delivery-copy { flex: 1; font-size: 10px; color: #507363; line-height: 1.55; }
.submission-small-spinner { width: 13px; height: 13px; flex-shrink: 0; border: 2px solid #c4dacf; border-top-color: #258663; border-radius: 50%; animation: submission-turn 1s linear infinite; }
.submission-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.submission-primary { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 15px 22px; border: 1px solid #0d3a50; border-radius: 12px; background: linear-gradient(110deg, #0c2b4c, #164b5b); box-shadow: 0 8px 18px #10324b24; color: #fff; font-family: inherit; font-size: 16px; line-height: 1.2; font-weight: 750; cursor: pointer; text-decoration: none; }
.submission-primary:hover { filter: brightness(1.1); }
.submission-primary i { font-size: 20px; }
.submission-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5px; border: 0; background: transparent; font-size: 11px; color: #4b6478; font-family: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.submission-secondary:hover { color: #102c4c; text-decoration: underline; }
.submission-footnote { display: flex; justify-content: center; align-items: center; gap: 6px; color: #8d969d; font-size: 9px; line-height: 1.5; margin: 22px 0 0; }
.submission-footnote i { color: #b69b5e; }
.submission-sheet[data-state="success"] { background: radial-gradient(ellipse at 50% 17%, #dcf6e8 0, transparent 48%), #fffdf8; }
.submission-sheet[data-state="success"] .submission-art { margin-top: 25px; width: 148px; height: 148px; }
.submission-sheet[data-state="success"] .submission-art::before { inset: 4px; background: #dcf3e6; }
.submission-sheet[data-state="success"] .submission-orbit-one { inset: 0; border: 1px solid #a7d9bd77; animation: none; }
.submission-sheet[data-state="success"] .submission-orbit-two { inset: 13px; border: 1px solid #b5dfc455; animation: none; }
.submission-sheet[data-state="success"] .submission-symbol-document { display: none; }
.submission-sheet[data-state="success"] .submission-symbol-success { display: grid; width: 92px; height: 92px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#56be80,#087d55); box-shadow: 0 12px 28px #1d8e5b38, inset 0 0 0 1px #ffffff55; font-size: 37px; }
.submission-sheet[data-state="success"] .submission-eyebrow { color: #258665; }
.submission-sheet[data-state="success"] .submission-message h2 { font-size: clamp(25px, 5vw, 30px); }
.submission-sheet[data-state="success"] .submission-small-spinner { display: none; }
.submission-sheet[data-state="success"] .submission-spark-one { background: #51a779; left: 3px; }
.submission-sheet[data-state="success"] .submission-spark-three { background: #51a779; }
.submission-sheet[data-state="warning"] .submission-orbit { animation: none; border-color: #e7cea0; }
.submission-sheet[data-state="warning"] .submission-symbol-document { display: none; }
.submission-sheet[data-state="warning"] .submission-symbol-warning { display: grid; border-radius: 50%; background: #fff0d3; border: 1px solid #edcc8d; color: #b47d20; }
.submission-sheet[data-state="warning"] .submission-small-spinner { display: none; }
.submission-sheet[data-state="warning"] .submission-delivery { background: #fff6e6; border-color: #eddbb7; }
.submission-sheet[data-state="warning"] #submission-delivery-copy { color: #9b752f; }
.submission-modal :focus-visible { outline: 3px solid #cfaa57; outline-offset: 4px; }
@keyframes submission-turn { to { transform: rotate(360deg); } }
@keyframes submission-breathe { 50% { opacity: .35; } }
@keyframes submission-sheet-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes submission-backdrop-in { from { opacity: 0; } }
@media (max-width: 380px) {
    .submission-modal { padding: 12px; }
    .submission-sheet { padding: 20px 20px 19px; border-radius: 23px; max-height: calc(100dvh - 24px); }
    .submission-brand { font-size: 19px; }
    .submission-brand img { width: 38px; height: 38px; }
    .submission-art { margin-top: 22px; width: 137px; height: 137px; }
    .submission-message > p:last-child { font-size: 12px; }
    .submission-steps { margin: 22px 0 18px; }
    .submission-delivery { padding: 11px; }
    .submission-primary { padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .submission-modal, .submission-sheet, .submission-orbit, .submission-dots, .submission-small-spinner { animation: none !important; }
}