body { font-family: 'Inter', sans-serif; }

        .offer-container {
            background: linear-gradient(135deg, #168ca8 0%, #1faa8c 100%);
            color: #fff; padding: 15px; border-radius: 8px;
            text-align: center; margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            font-size: 16px; font-weight: 500;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .dark-mode .offer-container { background: linear-gradient(135deg, #388E3C 0%, #2b6b2f 100%); }
        .offer-container .free-text { font-weight: 700; color: #ffd700; }

        .form-card {
            background: #fff; border-radius: 12px; padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 600px;
            margin: 1px auto;
        }
        .dark-mode .form-card { background: #2b2d51; color: #fff; }

        .form-group { margin-bottom: 15px; position: relative; }
        .form-group label { display: block; font-weight: 600; margin-bottom: 5px; }
        .form-group label span { font-size: 10px; color: #069683; vertical-align: middle; }

        .input-with-icon { position: relative; }
        .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #17a0a0; z-index: 1; }
        .dark-mode .input-icon { color: #aaa; }
        .input-with-icon input, .input-with-icon select {
            padding-left: 40px; width: 100%;
            padding: 10px 10px 10px 40px;
            border-radius: 8px; border: 1px solid #ccc;
            font-size: 14px; box-sizing: border-box;
        }
        .dark-mode .input-with-icon input,
        .dark-mode .input-with-icon select { background: #2d2d42; color: #fff; border-color: #444; }
        .form-group input[readonly] { background: #f0f0f0; cursor: not-allowed; }
        .dark-mode .form-group input[readonly] { background: #3a3a4a; }

        .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #777; z-index: 2; }
        .dark-mode .password-toggle { color: #aaa; }

        /* Role preview badge inside role input */
        .role-badge-inline {
            display: inline-block; padding: 2px 10px; border-radius: 20px;
            font-size: 12px; font-weight: 700; margin-left: 8px;
        }
        .role-badge-rep { background: #e8f5e9; color: #2e7d32; }
        .role-badge-mer { background: #fff3e0; color: #ef6c00; }
        .role-badge-par { background: #e8eaf6; color: #3f51b5; }

        /* Target info box */
        .target-info-box {
            background: #e8f8f2; border: 1px solid #a5d6c2;
            border-radius: 8px; padding: 10px 14px;
            font-size: 12px; color: #2e7d55; margin-top: 8px;
            display: flex; flex-direction: column; gap: 3px;
        }
        .dark-mode .target-info-box { background: #0e2929; border-color: #1e5c3a; color: #80cfa8; }
        .target-info-box .tinfo-row { display: flex; align-items: center; gap: 6px; }
        .tinfo-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .dot-rep { background: #2e7d32; }
        .dot-mer { background: #ef6c00; }
        .dot-par { background: #3f51b5; }

        .submit-btn {
            padding: 10px 20px; width: 100%; border-radius: 8px; border: none;
            background: #168ca8; color: white; cursor: pointer;
            font-weight: 600; display: flex; align-items: center; gap: 6px;
            justify-content: center; transition: all 0.3s ease; position: relative;
        }
        .dark-mode .submit-btn { background: #388E3C; }
        .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
        .submit-btn .spinner {
            display: none; width: 16px; height: 16px;
            border: 2px solid transparent; border-top: 2px solid #fff;
            border-radius: 50%; animation: spin 1s linear infinite;
        }
        @keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

        .error { color: #F44336; font-size: 12px; margin-top: 5px; display: none; }

        .terms-container {
            display: flex; align-items: center; justify-content: flex-start;
            gap: 8px; font-size: 14px; margin-bottom: 15px;
        }
        .terms-container input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
        .terms-container label { display: flex; align-items: center; gap: 5px; cursor: pointer; margin-bottom: 0; }
        .terms-container a { color: #168ca8; font-weight: 600; text-decoration: none; }
        .terms-container a:hover { text-decoration: underline; }

        .merchant-title { padding-top: 5px; padding-bottom: 5px; font-size: 12px; color: #207878; }
        .dark-mode .merchant-title { color: #3dd6e8; }

        .form-header {
            text-align: center; padding: 20px;
            background: linear-gradient(135deg, #168ca8 0%, #1faa8c 100%);
            color: #fff; border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px;
        }
        .dark-mode .form-header { background: linear-gradient(135deg, #388E3C 0%, #2b6b2f 100%); }
        .form-header .logo { width: 80px; height: auto; margin-bottom: 15px; }
        .form-header .title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
        .form-header .subtitle { font-size: 15px; color: #e0f7fa; }

        /* Commission table */
        .comm-table-wrap { margin-top: 10px; border-radius: 8px; overflow: hidden; border: 1px solid #c8e6d0; }
        .dark-mode .comm-table-wrap { border-color: #1b4d2a; }
        .comm-table {
            width: 100%; border-collapse: collapse; font-size: 12px;
        }
        .comm-table thead tr {
            background: linear-gradient(135deg, #168ca8, #1faa8c);
            color: #fff;
        }
        .dark-mode .comm-table thead tr { background: linear-gradient(135deg, #0d5c6e, #1a7a62); }
        .comm-table th { padding: 8px 10px; text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid rgba(255,255,255,0.2); }
        .comm-table th:last-child { border-right: none; }
        .comm-table td { padding: 8px 10px; text-align: center; border-top: 1px solid #d5ede0; border-right: 1px solid #d5ede0; }
        .comm-table td:last-child { border-right: none; }
        .dark-mode .comm-table td { border-top-color: #1e4030; border-right-color: #1e4030; }
        .comm-table tbody tr:nth-child(odd)  { background: #f7fdf9; }
        .comm-table tbody tr:nth-child(even) { background: #edf7f0; }
        .dark-mode .comm-table tbody tr:nth-child(odd)  { background: #1a2e22; }
        .dark-mode .comm-table tbody tr:nth-child(even) { background: #142519; }
        .comm-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
        .badge-hm { background: #e8f5e9; color: #2e7d32; }
        .badge-mer { background: #fff3e0; color: #ef6c00; }
        .badge-par { background: #e8eaf6; color: #3f51b5; }
        .comm-amt  { font-weight: 700; color: #168ca8; font-size: 14px; }
        .dark-mode .comm-amt { color: #3dd6e8; }
        /* Target label */
        .target-label-wrap { text-align: center; margin-bottom: 6px; }
        .target-label-wrap .main-lbl { font-weight: 700; font-size: 14px; display: block; }
        .target-label-wrap .sub-lbl  { font-size: 11px; color: #069683; display: block; margin-top: 2px; }