/* Unified visual theme derived from index5.php.
 * Loaded after the legacy stylesheet/Tailwind so it controls presentation
 * without changing application logic, API calls or JavaScript behavior.
 */

/* ===== extracted legacy styles: 404.html block 1 ===== */
body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background: #f3f4f6;
            color: #1f2937;
        }
        .container {
            text-align: center;
            padding: 2rem;
        }
        .container h1 {
            font-size: 6rem;
            margin: 0;
            background: linear-gradient(135deg, #111111 0%, #111111 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .container h2 {
            font-size: 1.5rem;
            margin: 0.5rem 0;
            color: #374151;
        }
        .container p {
            color: #6b7280;
            margin: 0.5rem 0 1.5rem;
        }
        .container a {
            display: inline-block;
            padding: 0.75rem 2rem;
            background: linear-gradient(135deg, #111111 0%, #111111 100%);
            color: #ffffff;
            text-decoration: none;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .container a:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }

/* ===== extracted legacy styles: auth.php block 1 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; -webkit-text-size-adjust: 100%; }
        body {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            padding: 1rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #111111 0%, #111111 100%);
        }
        .card {
            background: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            max-width: 28rem;
            width: 100%;
        }
        .card .icon { font-size: 3rem; text-align: center; margin-bottom: 0.5rem; }
        .card h2 { 
            font-size: 1.5rem; 
            font-weight: 700; 
            color: #1f2937; 
            text-align: center;
            margin-bottom: 0.25rem;
        }
        .card .subtitle { 
            font-size: 0.875rem; 
            color: #6b7280; 
            text-align: center; 
            margin-bottom: 1.5rem;
        }
        .card .input-field {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 0.75rem;
            outline: none;
            font-size: 1rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            background: #ffffff;
            -webkit-appearance: none;
            appearance: none;
        }
        .card .input-field:focus {
            border-color: #111111;
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
        }
        .card .input-field.error {
            border-color: #dc2626;
        }
        .card .input-field.error:focus {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
        }
        .card .btn-submit {
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 0.75rem;
            color: #ffffff;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            margin-top: 0.75rem;
            -webkit-tap-highlight-color: transparent;
        }
        .card .btn-submit:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        .card .btn-submit:active { transform: scale(0.97); }
        .card .form-group {
            margin-bottom: 1rem;
        }
        .card .form-group:last-child {
            margin-bottom: 0;
        }
        .card .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 0.25rem;
        }
        .error-message {
            background: #fef2f2;
            border: 1px solid #fca5a5;
            color: #dc2626;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            text-align: center;
        }
        .card .footer-link {
            text-align: center;
            margin-top: 1rem;
            font-size: 0.8rem;
            color: #9ca3af;
        }
        .card .footer-link a {
            color: #111111;
            text-decoration: none;
            font-weight: 500;
        }
        .card .footer-link a:hover {
            text-decoration: underline;
        }
        @media (max-width: 480px) {
            .card { padding: 1.5rem; border-radius: 1rem; }
            .card h2 { font-size: 1.25rem; }
            .card .icon { font-size: 2.5rem; }
            .card .input-field { font-size: 0.9rem; padding: 0.6rem 0.875rem; }
        }
        @supports (padding: max(0px)) {
            body { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
        }
        @media (prefers-reduced-motion: reduce) {
            .card .btn-submit:hover { transform: none; }
        }

/* ===== extracted legacy styles: client.php block 1 ===== */
body { background: #f9fafb; }
        .loader {
            border: 4px solid #f3f4f6;
            border-top: 4px solid #111111;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.5rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* ===== extracted legacy styles: dynamic.php block 1 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; -webkit-text-size-adjust: 100%; }
        body {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            padding: 1rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
        }
        .loader {
            border: 4px solid #f3f4f6;
            border-top: 4px solid #111111;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.25rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .card {
            background: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            max-width: 28rem;
            width: 100%;
            text-align: center;
        }
        .card h2 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }
        .card p {
            font-size: 0.875rem;
            color: #6b7280;
        }
        @media (max-width: 480px) {
            .card { padding: 1.5rem; border-radius: 1rem; }
            .card h2 { font-size: 1.1rem; }
            .loader { width: 32px; height: 32px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .loader { animation-duration: 0.01ms; }
        }
        @supports (padding: max(0px)) {
            body { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
        }

/* ===== extracted legacy styles: encrypt.php block 1 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; -webkit-text-size-adjust: 100%; }
        body {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            padding: 1rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
        }
        .loader {
            border: 4px solid #f3f4f6;
            border-top: 4px solid #111111;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.25rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .card {
            background: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            max-width: 28rem;
            width: 100%;
            text-align: center;
        }
        .card h2 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }
        .card p {
            font-size: 0.875rem;
            color: #6b7280;
        }
        .error-message {
            color: #dc2626;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }
        .error-message.show {
            display: block;
        }
        .debug-info {
            display: none;
            font-size: 0.7rem;
            color: #9ca3af;
            margin-top: 0.5rem;
            word-break: break-all;
            text-align: left;
            background: #f9fafb;
            padding: 0.5rem;
            border-radius: 0.25rem;
        }
        @media (max-width: 480px) {
            .card { padding: 1.5rem; border-radius: 1rem; }
            .card h2 { font-size: 1.1rem; }
            .loader { width: 32px; height: 32px; margin-bottom: 1rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .loader { animation-duration: 0.01ms; }
        }
        @supports (padding: max(0px)) {
            body { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
        }

/* ===== extracted legacy styles: password.php block 1 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--visual-viewport-height, 100dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
}
.gradient-bg {
    background: linear-gradient(135deg, #111111 0%, #111111 100%);
}
.card {
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    max-width: 32rem;
    width: 100%;
    transition: all 0.3s ease;
    max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.card .icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin-bottom: 0.25rem;
}
.card .subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ===== КНОПКИ-АККОРДЕОНЫ ===== */
.accordion-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.accordion-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: scale(1.01);
}
.accordion-btn:active {
    transform: scale(0.98);
}
.accordion-btn .arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: #9ca3af;
}
.accordion-btn .arrow.open {
    transform: rotate(180deg);
}

.accordion-btn.telegram {
    border-left: 4px solid #0088cc;
}
.accordion-btn.happ {
    border-left: 4px solid #6c5ce7;
}
.accordion-btn.password {
    border-left: 4px solid #f59e0b;
}

/* ===== ИНСТРУКЦИИ ===== */
.instruction {
    background: #f9fafb;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
    border-left: 3px solid #111111;
}
.instruction strong {
    color: #1f2937;
}
.instruction-centered {
    text-align: center;
    border-left: 0;
    border-top: 3px solid #111111;
}
.accordion-btn.select {
    border-left: 4px solid #111111;
}
.button-grid .btn-download {
    text-decoration: none;
}
.button-grid a.btn-download {
    color: #1f2937;
}

/* ===== БЛОКИ АККОРДЕОНА ===== */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin 0.3s ease;
    opacity: 0;
    margin-top: 0;
}
.accordion-content.open {
    max-height: 2000px;
    opacity: 1;
    margin-top: 0.5rem;
}

/* ===== БЛОКИ С КНОПКАМИ ===== */
.button-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.button-grid .btn-download {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.button-grid .btn-download:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: scale(1.01);
}
.button-grid .btn-download:active {
    transform: scale(0.98);
}
.button-grid .btn-download .arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.3s ease;
}
.button-grid .btn-download .arrow.open {
    transform: rotate(180deg);
}

/* ===== ВЛОЖЕННЫЕ АККОРДЕОНЫ ДЛЯ HAPP ===== */
.nested-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    opacity: 0;
    margin-top: 0;
    padding-left: 0.5rem;
}
.nested-content.open {
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.5rem;
}
.nested-content .btn-download {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    border-color: #e5e7eb;
    background: #fafafa;
}
.nested-content .btn-download:hover {
    background: #f3f4f6;
}

/* ===== ПИНКОД-ПОЛЯ ===== */
.pin-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    width: 100%;
}

.pin-inputs {
    --pin-gap: clamp(0.25rem, 1.8vw, 0.625rem);
    position: relative;
    width: min(100%, 32rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.25rem;
    margin: 0 auto;
}

.pin-track {
    display: grid;
    grid-template-columns: repeat(var(--pin-length), minmax(2.15rem, 1fr));
    gap: var(--pin-gap);
    align-items: center;
    min-width: max-content;
    width: max(100%, calc(var(--pin-length) * 2.15rem + (var(--pin-length) - 1) * var(--pin-gap)));
    pointer-events: none;
}

.pin-cell {
    width: clamp(2.15rem, 9vw, 3.5rem);
    height: clamp(2.8rem, 11vw, 4.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: clamp(1.15rem, 5vw, 1.6rem);
    border: 3px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pin-cell.filled {
    border-color: #111111;
    background: #f1f1f3;
}

.pin-cell { user-select: none; -webkit-user-select: none; }

.pin-cell.active {
    border-color: #111111;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
    transform: scale(1.04);
}

.pin-cell.error {
    border-color: #dc2626;
    background: #fef2f2;
    animation: shake 0.3s ease;
}

.pin-cell.success {
    border-color: #059669;
    background: #ecfdf5;
}

.pin-real-input {
    position: absolute;
    inset: 0.25rem;
    z-index: 2;
    width: calc(100% - 0.5rem);
    height: calc(100% - 0.5rem);
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    opacity: 0.01;
    font-size: 16px; /* предотвращает auto-zoom iOS */
    line-height: 1;
    cursor: text;
    -webkit-appearance: none;
    appearance: none;
}

.pin-real-input:focus {
    outline: none;
}

.pin-real-input::selection {
    background: transparent;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.pin-status {
    font-size: 0.8rem;
    color: #6b7280;
    min-height: 1.25rem;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

.pin-status.error {
    color: #dc2626;
}

.pin-status.success {
    color: #059669;
}

.pin-submit-btn {
    width: 100%;
    max-width: 200px;
    padding: 0.75rem 2rem;
    margin: 0.25rem auto 0;
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #111111 0%, #111111 100%);
    display: block;
}

.pin-submit-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pin-submit-btn:active { transform: scale(0.97); }

.pin-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

@media (max-width: 640px) {
    body {
        align-items: flex-start;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
    .card {
        padding: 1.25rem;
        border-radius: 1rem;
        max-height: calc(var(--visual-viewport-height, 100dvh) - 1.5rem);
    }
}

@media (max-width: 480px) {
    .pin-inputs {
        width: 100%;
        padding-inline: 0.125rem;
    }
    .pin-track {
        grid-template-columns: repeat(var(--pin-length), minmax(1.9rem, 1fr));
        width: max(100%, calc(var(--pin-length) * 1.9rem + (var(--pin-length) - 1) * var(--pin-gap)));
    }
    .pin-cell {
        width: clamp(1.9rem, 12vw, 3rem);
        height: clamp(2.55rem, 15vw, 3.6rem);
        border-width: 2px;
        border-radius: 0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pin-cell { transition: none; }
    .pin-cell.error { animation: none; }
}

/* ===== СООБЩЕНИЯ ОБ ОШИБКАХ ===== */
.error-block {
    text-align: center;
    padding: 2rem 1rem;
}
.error-block .icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.error-block h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.error-block p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

.error-block.deactivated h2 {
    color: #dc2626;
}
.error-block.invalid h2 {
    color: #f59e0b;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 640px) {
    .pin-input {
        min-width: 2.2rem;
        min-height: 2.8rem;
        border-width: 2.5px;
    }
    .pin-inputs {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card { padding: 1.5rem; border-radius: 1rem; }
    .card h2 { font-size: 1.25rem; }
    .card .icon { font-size: 2.5rem; }
    .accordion-btn { font-size: 0.9rem; padding: 0.6rem 0.875rem; }
    .button-grid .btn-download { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
    .instruction { font-size: 0.8rem; padding: 0.6rem 0.875rem; }
    .pin-input {
        min-width: 2rem;
        min-height: 2.5rem;
        border-width: 2px;
        border-radius: 0.6rem;
    }
    .pin-inputs {
        gap: 0.4rem;
    }
    .pin-submit-btn {
        max-width: 160px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    .error-block h2 { font-size: 1.25rem; }
    .error-block .icon { font-size: 3rem; }
}

@media (max-width: 380px) {
    .card { padding: 1rem; }
    .accordion-btn { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
    .button-grid .btn-download { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
    .pin-input {
        min-width: 1.6rem;
        min-height: 2rem;
        border-width: 2px;
        border-radius: 0.5rem;
    }
    .pin-inputs {
        gap: 0.3rem;
    }
    .pin-submit-btn {
        max-width: 140px;
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 330px) {
    .pin-input {
        min-width: 1.3rem;
        min-height: 1.6rem;
        border-width: 1.5px;
        border-radius: 0.4rem;
    }
    .pin-inputs {
        gap: 0.2rem;
    }
}

@supports (padding: max(0px)) {
    body {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== extracted legacy styles: welcome.php block 1 ===== */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
}
.main-container {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}
@media (max-width: 480px) {
    body { padding: 0.5rem; align-items: center; min-height: 100vh; min-height: 100dvh; }
    .main-container { margin: 0 auto; }
}
@media (max-width: 380px) {
    body { padding: 0.25rem; }
    .card-body { padding: 0.75rem !important; }
}

/* ===== extracted legacy styles: whisper2.php block 1 ===== */
.gradient-bg {
            background: linear-gradient(135deg, #111111 0%, #111111 100%);
        }
        /* Стили для форматированного текста */
        .markdown-body {
            font-size: 16px;
            line-height: 1.6;
            color: #1f2937;
        }
        .markdown-body h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
        .markdown-body h2 { font-size: 1.5rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
        .markdown-body h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; }
        .markdown-body p { margin: 0.5rem 0; }
        .markdown-body ul, .markdown-body ol { margin: 0.5rem 0 0.5rem 1.5rem; }
        .markdown-body li { margin: 0.25rem 0; }
        .markdown-body blockquote {
            border-left: 4px solid #111111;
            padding-left: 1rem;
            margin: 0.5rem 0;
            color: #4b5563;
            background: #f9fafb;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
        }
        .markdown-body code {
            background: #f3f4f6;
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }
        .markdown-body pre {
            background: #1f2937;
            color: #f9fafb;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 0.5rem 0;
        }
        .markdown-body pre code {
            background: transparent;
            padding: 0;
            color: inherit;
        }
        .markdown-body img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
        }
        .markdown-body a {
            color: #111111;
            text-decoration: underline;
        }
        .markdown-body a:hover {
            color: #111111;
        }
        .markdown-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.5rem 0;
        }
        .markdown-body th, .markdown-body td {
            border: 1px solid #e5e7eb;
            padding: 0.5rem;
            text-align: left;
        }
        .markdown-body th {
            background: #f3f4f6;
            font-weight: 600;
        }
        .empty-message {
            color: #9ca3af;
            font-style: italic;
            text-align: center;
            padding: 2rem 0;
        }
        .message-container {
            min-height: 100px;
        }
        /* Адаптивность */
        @media (max-width: 640px) {
            .markdown-body {
                font-size: 14px;
            }
            .markdown-body h1 { font-size: 1.5rem; }
            .markdown-body h2 { font-size: 1.25rem; }
            .markdown-body h3 { font-size: 1.1rem; }
            .p-6 { padding: 1rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: 0.01ms !important; }
        }

/* ================================================================
   INDEX5-STYLE DESIGN SYSTEM — final overrides
   ================================================================ */
:root {
  --ui-bg: #f5f5f7;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7f7f8;
  --ui-border: #d7d7dc;
  --ui-border-soft: #e9e9ed;
  --ui-text: #111111;
  --ui-text-2: #44444a;
  --ui-muted: #66666d;
  --ui-subtle: #9999a1;
  --ui-accent: #111111;
  --ui-accent-soft: #f1f1f3;
  --ui-danger: #c62828;
  --ui-danger-bg: #fff0f0;
  --ui-success: #23652a;
  --ui-success-bg: #f0f9f1;
  --ui-radius: 15px;
  --ui-card-radius: 24px;
  --ui-shadow: 0 8px 35px rgba(0,0,0,.07);
  --ui-shadow-lg: 0 16px 45px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif !important;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* Generic page shells */
.main-container, .page-shell, .shorturl-shell {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.card {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border: 1px solid rgba(17,17,17,.04) !important;
  border-radius: var(--ui-card-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.card-body { padding: 26px 20px 24px !important; }

/* Welcome / generator */
.header-title { text-align: left !important; margin-bottom: 18px !important; }
.header-title h1 {
  color: var(--ui-text) !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  font-weight: 750 !important;
}
.header-title .gradient-text {
  background: none !important;
  color: var(--ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
.header-title p, .description, .subtitle {
  color: var(--ui-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.input-row { gap: 10px !important; }
.input-field, .card .input-field {
  min-height: 56px;
  padding: 0 17px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 16px !important;
  line-height: 1.3;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-field:focus, .card .input-field:focus {
  border-color: var(--ui-text) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05) !important;
}
.input-field::placeholder { color: #a1a1a8 !important; }
.btn-primary, .btn-submit, .button {
  min-height: 54px;
  border: 0 !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-text) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: opacity .15s ease, background .15s ease !important;
}
.btn-primary:hover, .btn-submit:hover, .button:hover { transform: none !important; box-shadow: none !important; }
.btn-primary:active, .btn-submit:active, .button:active { transform: none !important; opacity: .82; }

/* Settings become compact index5-like sections */
.settings-group { margin-top: 22px !important; }
.group-title {
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.feature-chip { transform: none !important; }
.feature-chip:hover, .feature-chip:active { transform: none !important; }
.feature-chip label {
  min-height: 44px;
  padding: 8px 13px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.feature-chip input:checked + label {
  border-color: var(--ui-text) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
.extent-field.show { margin-top: 10px !important; }
.extent-field label { color: var(--ui-text-2) !important; font-size: 13px !important; }
.extent-field .input-field { min-height: 50px; font-size: 16px !important; }
.extent-field .input-hint, .input-hint { color: var(--ui-subtle) !important; font-size: 12px !important; }

/* Accordion: same interaction language as index5.php, no jumpy scaling */
.accordion-toggle {
  min-height: 48px;
  justify-content: space-between !important;
  padding: 0 14px !important;
  margin-top: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}
.accordion-toggle:hover { color: var(--ui-text) !important; background: var(--ui-accent-soft) !important; }
.accordion-toggle .arrow { color: #555 !important; transition: transform .18s ease !important; }
.accordion-content { transition: max-height .24s ease, opacity .18s ease, padding .24s ease !important; }
.accordion-content.open { padding: 8px 0 4px !important; }

/* Password page accordion */
.password-page .accordion-btn, .accordion-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 16px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  transform: none !important;
}
.password-page .accordion-btn:hover, .accordion-btn:hover { background: var(--ui-accent-soft) !important; border-color: var(--ui-border) !important; transform: none !important; }
.password-page .accordion-btn:active, .accordion-btn:active { transform: none !important; opacity: .82; }
.password-page .accordion-btn.telegram,
.password-page .accordion-btn.happ,
.password-page .accordion-btn.password,
.password-page .accordion-btn.select,
.accordion-btn.telegram, .accordion-btn.happ, .accordion-btn.password, .accordion-btn.select {
  border-left: 1px solid var(--ui-border) !important;
}
.password-page .accordion-btn .arrow, .accordion-btn .arrow { color: #555 !important; font-size: 12px !important; }
.password-page .accordion-content.open, .accordion-content.open { margin-top: 6px !important; }

.instruction {
  background: var(--ui-surface-soft) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: var(--ui-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.instruction strong { color: var(--ui-text) !important; }
.instruction-centered { border-top: 0 !important; }

.button-grid { gap: 6px !important; padding: 5px 0 !important; }
.button-grid .btn-download {
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.button-grid .btn-download:hover { background: var(--ui-accent-soft) !important; }

/* PIN: large, calm, touch-first */
.pin-container { margin-top: 8px; }
.pin-inputs {
  width: 100%;
  min-height: 58px;
  position: relative;
}
.pin-real-input {
  width: 100% !important;
  min-height: 58px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 24px !important;
  letter-spacing: .42em !important;
  text-align: center !important;
  outline: none !important;
}
.pin-real-input:focus { border-color: var(--ui-text) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.05) !important; }
.pin-submit-btn { width: 100%; min-height: 54px; margin-top: 10px; border: 0; border-radius: var(--ui-radius); background: var(--ui-text); color: #fff; font-weight: 700; font-size: 16px; }
.pin-status { min-height: 20px; margin-top: 8px; font-size: 13px; color: var(--ui-muted); }

/* Auth / small utility pages */
.auth-page, .utility-page, .redirect-page, .security-page, .whisper-page, .error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}
.auth-page .card, .utility-page .card, .redirect-page .card, .security-page .card, .error-page .container,
.auth-page > .card, .utility-page > .card, .redirect-page > .card, .security-page > .card {
  width: 100%; max-width: 560px;
}
.auth-page .card { max-width: 420px; padding: 26px 20px; }
.auth-page .card h2 { font-size: 24px; color: var(--ui-text) !important; }
.auth-page .form-label { font-size: 14px !important; color: var(--ui-text-2) !important; font-weight: 650 !important; }
.auth-page .input-field { min-height: 56px !important; }
.error-message { background: var(--ui-danger-bg) !important; border: 1px solid #f0c8c8 !important; color: var(--ui-danger) !important; border-radius: 12px !important; font-size: 14px !important; }
.success { background: var(--ui-success-bg) !important; color: var(--ui-success) !important; border-radius: 12px !important; }
.footer-link a { color: var(--ui-text) !important; }

.utility-card {
  width: 100%; max-width: 560px; padding: 26px 20px;
  background: var(--ui-surface); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow); text-align: center;
}
.utility-card h2 { font-size: 20px; color: var(--ui-text); margin: 0 0 8px; }
.utility-card p { font-size: 14px; color: var(--ui-muted); }
.loader { border-color: #e5e5e8 !important; border-top-color: var(--ui-text) !important; }

/* Whisper */
.whisper-page .whisper-card { width:100%; max-width: 900px; background:var(--ui-surface); border-radius:var(--ui-card-radius); box-shadow:var(--ui-shadow); overflow:hidden; }
.whisper-page .whisper-header { background:var(--ui-text) !important; padding:18px 20px !important; }
.whisper-page .whisper-header h1 { color:#fff !important; font-size:20px !important; margin:0; }
.whisper-page .whisper-body { padding:20px !important; }
.markdown-body { color:var(--ui-text-2) !important; font-size:16px !important; line-height:1.6 !important; }
.markdown-body a { color:var(--ui-text) !important; }
.markdown-body blockquote { border-left-color:var(--ui-text) !important; background:var(--ui-surface-soft) !important; }
.markdown-body th { background:var(--ui-surface-soft) !important; }

/* 404 */
.error-page .container { text-align:center; padding:32px 20px; }
.error-page .container h1 { font-size:clamp(4rem,16vw,6rem); color:var(--ui-text) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
.error-page .container h2 { color:var(--ui-text) !important; font-size:24px; }
.error-page .container p { color:var(--ui-muted) !important; }
.error-page .container a { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:var(--ui-radius); background:var(--ui-text) !important; color:#fff !important; transform:none !important; box-shadow:none !important; }

/* Modals: match card language and avoid scale jitter */
.modal-overlay, .confirm-overlay, .custom-alert-overlay { background:rgba(17,17,17,.34) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-box, .confirm-box, .custom-alert-box {
  border-radius:20px !important; box-shadow:var(--ui-shadow-lg) !important; border:1px solid rgba(17,17,17,.06) !important;
  transform:none !important;
}
.modal-overlay.active .modal-box, .confirm-overlay.active .confirm-box { transform:none !important; }
.modal-header { padding:18px 20px !important; border-bottom:1px solid var(--ui-border-soft) !important; }
.modal-header h3 { font-size:19px !important; color:var(--ui-text) !important; }
.modal-body, #manageModal .modal-body { padding:18px 20px !important; }
.modal-close { min-width:44px; min-height:44px; border-radius:12px; }
.search-row .btn-secondary, .btn-secondary { min-height:50px; border:1px solid var(--ui-border) !important; border-radius:var(--ui-radius) !important; background:var(--ui-surface) !important; color:var(--ui-text) !important; box-shadow:none !important; }
.link-item { border:1px solid var(--ui-border-soft) !important; border-radius:12px !important; padding:12px !important; }
.link-item:hover { background:var(--ui-surface-soft) !important; border-color:var(--ui-border) !important; }
.link-item.active { border-color:var(--ui-text) !important; background:var(--ui-accent-soft) !important; }
.link-item .link-short, #linksList .link-item .link-short { color:var(--ui-text) !important; font-size:15px !important; }
.link-item .link-target, #linksList .link-item .link-target { color:var(--ui-muted) !important; font-size:14px !important; }
.link-item .link-meta { color:var(--ui-subtle) !important; font-size:12px !important; }
.link-actions .btn-action { min-height:44px; border-radius:10px !important; transform:none !important; }
.link-actions .btn-action:hover, .link-actions .btn-action:active { transform:none !important; }
.pagination .page-btn { min-width:44px !important; min-height:44px !important; padding:0 10px !important; border:1px solid var(--ui-border) !important; border-radius:10px !important; font-size:14px !important; }
.pagination .page-btn.active { background:var(--ui-text) !important; border-color:var(--ui-text) !important; }

/* Remove animation/jitter from touch interactions. */
@media (hover: none) {
  * { scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Mobile first */
@media (max-width: 768px) {
  body { padding: 14px !important; align-items: flex-start !important; }
  .main-container { max-width: 560px; }
  .card-body { padding: 22px 16px 20px !important; }
  .header-title h1 { font-size: 26px !important; }
  .input-row { flex-direction: column !important; }
  .input-row .btn-primary { width:100% !important; }
  .desc-grid { grid-template-columns: 1fr !important; }
  .modal-box { width:100% !important; max-width:560px !important; max-height:calc(100dvh - 28px) !important; }
  .modal-body { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-actions { flex-direction:column; }
  .whisper-page { padding:14px !important; }
}
@media (max-width: 480px) {
  body { padding: 10px !important; }
  .card { border-radius:21px !important; }
  .card-body { padding: 20px 15px 18px !important; }
  .header-title { margin-bottom:15px !important; }
  .header-title h1 { font-size:24px !important; }
  .header-title p, .description, .subtitle { font-size:14px !important; }
  .input-field { min-height:56px !important; font-size:16px !important; }
  .btn-primary, .btn-submit, .button, .pin-submit-btn { min-height:54px !important; font-size:16px !important; }
  .feature-chip label { min-height:44px !important; font-size:14px !important; }
  .accordion-toggle, .accordion-btn { min-height:52px !important; font-size:15px !important; }
  .pin-real-input { min-height:58px !important; font-size:23px !important; letter-spacing:.34em !important; }
  .modal-overlay, .confirm-overlay, .custom-alert-overlay { padding:10px !important; }
  .modal-box, .confirm-box, .custom-alert-box { border-radius:20px !important; }
  .modal-header { padding:14px 16px !important; }
  .modal-body, #manageModal .modal-body { padding:14px 16px !important; }
  .pagination { gap:4px !important; }
  .pagination .page-btn { min-width:44px !important; min-height:44px !important; font-size:13px !important; }
  .whisper-page { padding:10px !important; }
  .whisper-page .whisper-body { padding:16px !important; }
  .markdown-body { font-size:16px !important; }
}
@supports (padding: max(0px)) {
  body {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
}

/* Semantic replacements for former PHP inline styles */
.is-hidden { display: none; }
.welcome-userbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.welcome-user { font-size:13px; color:var(--ui-muted); }
.logout-link { color:var(--ui-danger) !important; text-decoration:none; margin-left:12px; font-weight:600; }
.field-hint { display:block; color:var(--ui-muted); font-weight:400; margin-top:4px; font-size:12px; }
.field-preview { display:block; color:var(--ui-text); font-weight:600; margin-top:4px; font-size:12px; }
.field-warning { display:none; color:#9a6700; font-weight:600; margin-top:4px; font-size:12px; }
.subfield { margin-top:8px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.field-label { font-size:13px; font-weight:650; color:var(--ui-text-2); margin:0; }
.password-toggle { min-width:44px; min-height:44px; background:none; border:0; cursor:pointer; font-size:18px; padding:0 4px; line-height:1; color:var(--ui-muted); }
.footer-divider { padding-top:24px; border-top:1px solid var(--ui-border-soft); }
.loading-text { margin-top:8px; }
.modal-box-wide { max-width:48rem !important; width:100%; }
.modal-box-compact { max-width:28rem !important; }
.modal-body-scroll { max-height:70vh; overflow-y:auto; }
.edit-row-spaced { margin-bottom:16px; }
.muted { color:var(--ui-subtle); }
.short-url-display { background:var(--ui-surface-soft); border:1px solid var(--ui-border); border-radius:12px; padding:10px 14px; font-size:14px; color:var(--ui-text); word-break:break-all; font-family:"SF Mono","Menlo","Monaco",monospace; min-height:44px; display:flex; align-items:center; user-select:all; cursor:text; }
.modal-actions-row { display:flex; gap:16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--ui-border-soft); }
.flex-button { flex:1; justify-content:center; }
.result-modal-body { padding:18px 20px; }
.secondary-note { margin-top:8px; font-size:14px; color:var(--ui-muted); }
.password-section { margin-top:24px; }
.spaced-instruction { margin-top:10px; }
.whisper-fallback { white-space:pre-wrap; word-break:break-word; font-family:inherit; }

@media (max-width: 600px) {
  .welcome-userbar { align-items:flex-start; }
  .welcome-user { font-size:12px; }
  .modal-actions-row { flex-direction:column; gap:8px; }
}
.whisper-shell { width:100%; max-width:900px; margin:0 auto; }
.plain-link { color:var(--ui-text); text-decoration:underline; font-weight:600; }
.footer-note { text-align:center; color:var(--ui-subtle); font-size:12px; }
.utility-page { min-height:100dvh; }
.utility-icon { font-size:48px; margin-bottom:12px; }
.utility-title { font-size:20px; font-weight:700; color:var(--ui-text); margin:0 0 8px; }
.utility-description { font-size:14px; color:var(--ui-muted); margin:0 0 14px; }
.utility-url { background:var(--ui-surface-soft); border:1px solid var(--ui-border-soft); border-radius:12px; padding:12px; font-size:14px; color:var(--ui-text-2); font-family:"SF Mono","Menlo","Monaco",monospace; word-break:break-all; user-select:all; text-align:left; }
.utility-note { font-size:12px; color:var(--ui-subtle); margin:10px 0 0; }
.whisper-title { color:#fff !important; font-weight:700; font-size:20px; margin:0; }
.whisper-footer { margin-top:24px; padding-top:18px; border-top:1px solid var(--ui-border-soft); text-align:center; }
.whisper-link { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:var(--ui-radius); background:var(--ui-text); color:#fff !important; text-decoration:none; font-weight:700; }
.whisper-note { font-size:12px; color:var(--ui-subtle); margin:10px 0 0; }

/* Final PIN refinement: keep the real input invisible; the visual cells are the UI. */
.pin-inputs { width:100% !important; max-width:100% !important; overflow-x:auto !important; padding:4px 2px !important; }
.pin-track { display:flex !important; width:100% !important; min-width:0 !important; gap:8px !important; }
.pin-cell { flex:1 1 0 !important; width:auto !important; min-width:38px !important; height:56px !important; border:1px solid var(--ui-border) !important; border-radius:12px !important; background:var(--ui-surface) !important; color:var(--ui-text) !important; font-size:22px !important; transform:none !important; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease !important; }
.pin-cell.filled { border-color:var(--ui-text) !important; background:var(--ui-accent-soft) !important; }
.pin-cell.active { border-color:var(--ui-text) !important; box-shadow:0 0 0 3px rgba(0,0,0,.05) !important; transform:none !important; }
.pin-cell.error { border-color:var(--ui-danger) !important; background:var(--ui-danger-bg) !important; animation:none !important; }
.pin-cell.success { border-color:#3d7a45 !important; background:var(--ui-success-bg) !important; }
.pin-real-input { position:absolute !important; inset:4px !important; width:calc(100% - 8px) !important; height:calc(100% - 8px) !important; border:0 !important; background:transparent !important; color:transparent !important; caret-color:transparent !important; opacity:.01 !important; font-size:16px !important; box-shadow:none !important; }
.pin-real-input:focus { border:0 !important; box-shadow:none !important; }
@media (max-width:480px) {
  .pin-track { gap:6px !important; }
  .pin-cell { min-width:34px !important; height:54px !important; font-size:21px !important; }
}


/* ======================================================================
   INDEX5 VISUAL SYSTEM — final pass
   The component geometry intentionally follows index5.php:
   white card on #f5f5f7, 15px controls, black active outline,
   nested white accordion rows and soft #f7f7f8 action rows.
   ====================================================================== */
:root {
  --ui-bg: #f5f5f7 !important;
  --ui-surface: #ffffff !important;
  --ui-surface-soft: #f7f7f8 !important;
  --ui-border: #d7d7dc !important;
  --ui-border-strong: #111111 !important;
  --ui-border-soft: #e9e9ed !important;
  --ui-text: #111111 !important;
  --ui-text-2: #44444a !important;
  --ui-muted: #666666 !important;
  --ui-subtle: #999999 !important;
  --ui-accent: #111111 !important;
  --ui-accent-soft: #f1f1f3 !important;
  --ui-radius: 15px !important;
  --ui-card-radius: 24px !important;
  --ui-shadow: 0 8px 35px rgba(0,0,0,.07) !important;
}

html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Shared cards */
.card,
.utility-card,
.auth-page .card {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 35px rgba(0,0,0,.07) !important;
}

/* Password page is intentionally almost a direct component translation of index5. */
.password-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: var(--visual-viewport-height, 100dvh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 14px 40px !important;
  background: #f5f5f7 !important;
}

.password-page > .card {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 26px 20px 24px !important;
  overflow: visible !important;
  text-align: left !important;
}

.password-page .icon {
  text-align: center !important;
  font-size: 44px !important;
  line-height: 1.1 !important;
  margin: 0 0 8px !important;
}

.password-page h2 {
  margin: 0 0 6px !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-align: center !important;
}

.password-page .subtitle {
  margin: 0 0 18px !important;
  color: #666 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Instruction block: same restrained text panel as index5's description. */
.password-page .instruction {
  margin: 27px 0 13px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #666 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}
.password-page .instruction strong {
  display: block !important;
  margin-bottom: 2px !important;
  color: #111 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.password-page .spaced-instruction { margin-top: 27px !important; }

/* Main accordion: open state visually joins the button and its white menu. */
.password-page .accordion-btn {
  width: 100% !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 1px solid #d7d7dc !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-radius .18s ease, border-color .15s ease !important;
}
.password-page .accordion-btn:hover,
.password-page .accordion-btn:focus-visible {
  background: #fff !important;
  border-color: #111 !important;
  transform: none !important;
}
.password-page .accordion-btn:active {
  transform: none !important;
  opacity: .92 !important;
}
.password-page .accordion-btn .arrow {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 2px solid #555 !important;
  border-bottom: 2px solid #555 !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: rotate(45deg) translateY(-3px) !important;
  transition: transform .18s ease !important;
}
.password-page .accordion-btn .arrow.open {
  transform: rotate(225deg) translateY(-2px) !important;
}
.password-page .accordion-btn[aria-expanded="true"],
.password-page .accordion-btn.password.open,
.password-page .accordion-btn.select.open {
  border-color: #111 !important;
  border-radius: 15px 15px 0 0 !important;
}

.password-page .accordion-content {
  display: none !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid #111 !important;
  border-top: 0 !important;
  border-radius: 0 0 15px 15px !important;
  background: #fff !important;
  transition: none !important;
}
.password-page .accordion-content.open {
  display: block !important;
  margin: 0 !important;
}

/* Nested accordion rows: index5's flat white rows with a chevron. */
.password-page .button-grid {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.password-page .button-grid > .btn-download {
  width: 100% !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}
.password-page .button-grid > .btn-download:hover,
.password-page .button-grid > .btn-download:focus-visible {
  background: #f1f1f3 !important;
  border: 0 !important;
  transform: none !important;
}
.password-page .button-grid > .btn-download:active {
  transform: none !important;
  opacity: .88 !important;
}
.password-page .button-grid > .btn-download .arrow {
  margin-left: auto !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-right: 2px solid #555 !important;
  border-bottom: 2px solid #555 !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: rotate(-45deg) !important;
  transition: transform .18s ease !important;
}
.password-page .button-grid > .btn-download .arrow.open {
  transform: rotate(45deg) !important;
}

.password-page .nested-content {
  display: none !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 5px 5px 13px !important;
  transition: none !important;
}
.password-page .nested-content.open { display: block !important; }
.password-page .nested-content .button-grid { padding: 0 !important; }
.password-page .nested-content .btn-download,
.password-page .nested-content a.btn-download {
  min-height: 46px !important;
  margin-top: 3px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f7f7f8 !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.password-page .nested-content .btn-download:hover,
.password-page .nested-content .btn-download:focus-visible {
  background: #ededee !important;
}
.password-page .nested-content .btn-download .arrow {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  transform: none !important;
  font-size: 15px !important;
  color: #666 !important;
}

/* PIN accordion and input — same geometry as index5.php's .pin-input. */
.password-page .pin-container {
  width: 100% !important;
  padding: 8px !important;
  display: block !important;
}
.password-page .pin-inputs {
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.password-page .pin-track { display: none !important; }
.password-page .pin-real-input {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 0 0 12px !important;
  border: 1px solid #d7d7dc !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #111 !important;
  caret-color: #111 !important;
  opacity: 1 !important;
  outline: none !important;
  text-align: center !important;
  font-size: 27px !important;
  line-height: 58px !important;
  font-weight: 700 !important;
  letter-spacing: 12px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.password-page .pin-real-input:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05) !important;
}
.password-page .pin-real-input::placeholder {
  color: #b8b8bd !important;
  letter-spacing: 8px !important;
}
.password-page .pin-status {
  min-height: 20px !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #666 !important;
}
.password-page .pin-status.error {
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: #fff0f0 !important;
  color: #c62828 !important;
}
.password-page .pin-status.success {
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: #f0f9f1 !important;
  color: #23652a !important;
}

/* All pages: the same index5 interaction language. */
.btn-primary, .btn-submit, .button, .pin-submit-btn {
  min-height: 54px !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  transform: none !important;
}
.btn-primary:hover, .btn-submit:hover, .button:hover,
.btn-primary:active, .btn-submit:active, .button:active,
.pin-submit-btn:hover, .pin-submit-btn:active {
  transform: none !important;
}

/* Any accordion used elsewhere in the project gets the same geometry. */
.accordion-toggle,
body:not(.password-page) .accordion-btn {
  min-height: 52px !important;
  border: 1px solid #d7d7dc !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.accordion-toggle:hover,
body:not(.password-page) .accordion-btn:hover {
  background: #f1f1f3 !important;
  transform: none !important;
}

/* Mobile: preserve the index5 proportions instead of shrinking controls. */
@media (max-width: 600px) {
  .password-page { padding: 14px 10px 28px !important; align-items: flex-start !important; }
  .password-page > .card { margin-top: 6px !important; padding: 23px 17px 20px !important; border-radius: 21px !important; }
  .password-page h2 { font-size: 21px !important; }
  .password-page .instruction strong { font-size: 18px !important; }
  .password-page .accordion-btn { min-height: 56px !important; font-size: 16px !important; }
  .password-page .button-grid > .btn-download { min-height: 50px !important; font-size: 16px !important; }
  .password-page .nested-content .btn-download { min-height: 46px !important; font-size: 15px !important; }
  .password-page .pin-real-input { height: 58px !important; font-size: 27px !important; letter-spacing: 10px !important; }
}

@media (max-width: 380px) {
  .password-page > .card { padding-left: 15px !important; padding-right: 15px !important; }
  .password-page .pin-real-input { letter-spacing: 7px !important; }
}

@media (hover: none) {
  .password-page * { -webkit-tap-highlight-color: transparent; }
}

/* ===== Desktop responsive refinement =====
 * Keep the index5 visual language, but give desktop layouts enough horizontal room.
 * The explanatory accordion uses a fixed icon column + flexible text column so
 * emoji/icons can never collide with the description text.
 */
@media (min-width: 769px) {
  .shorturl-page {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .shorturl-page .main-container {
    width: min(1100px, calc(100vw - 48px)) !important;
    max-width: 1100px !important;
  }

  .shorturl-page .card-body {
    padding: 30px 32px 28px !important;
  }

  .shorturl-page .header-title h1 {
    font-size: 32px !important;
  }

  .shorturl-page .input-row {
    gap: 12px !important;
  }

  /* The accordion description is intentionally table-like on desktop. */
  .shorturl-page .desc-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 24px !important;
    row-gap: 6px !important;
    width: 100% !important;
  }

  .shorturl-page .desc-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 8px !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fafafa !important;
  }

  .shorturl-page .desc-item .icon {
    width: 30px !important;
    min-width: 30px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .shorturl-page .desc-item .desc-text {
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .shorturl-page .desc-item .desc-text .label {
    font-weight: 650 !important;
  }

  /* More breathing room for the settings chips on wide screens. */
  .shorturl-page .chips-wrapper {
    gap: 8px !important;
  }

  /* The manage/edit dialogs should also use the available desktop width. */
  #manageModal .modal-box {
    width: min(960px, calc(100vw - 64px)) !important;
    max-width: 960px !important;
  }

  #editModal .modal-box,
  #editModal .modal-box-wide {
    width: min(960px, calc(100vw - 64px)) !important;
    max-width: 960px !important;
  }
}

@media (min-width: 769px) and (max-width: 899px) {
  .shorturl-page .desc-grid {
    grid-template-columns: 1fr !important;
  }

  .shorturl-page .card-body {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}

@media (min-width: 1200px) {
  .shorturl-page .main-container {
    width: min(1120px, calc(100vw - 64px)) !important;
    max-width: 1120px !important;
  }

  .shorturl-page .card-body {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}

/* Do not let long localized labels force a desktop grid wider than its cell. */
.shorturl-page .group-title,
.shorturl-page .feature-chip,
.shorturl-page .feature-chip label,
.shorturl-page .desc-text {
  min-width: 0;
}


/* ===== V6 RESPONSIVE / LAYOUT CORRECTIONS =====
/* The generator card must actually occupy the desktop container width. */
.shorturl-page {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.shorturl-page .main-container {
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}
.shorturl-page .main-container > .card {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}
.shorturl-page .card-body {
  width: 100% !important;
  min-width: 0 !important;
}
.shorturl-page .input-row,
.shorturl-page .settings-group,
.shorturl-page .accordion-content,
.shorturl-page .desc-grid {
  width: 100% !important;
  min-width: 0 !important;
}

/* Desktop proportions: don't stretch text excessively just because the viewport is wide. */
@media (min-width: 769px) {
  .shorturl-page .card-body { padding: 34px clamp(28px, 3.2vw, 48px) 34px !important; }
  .shorturl-page .header-title { max-width: 820px; }
  .shorturl-page .input-row { align-items: stretch; }
  .shorturl-page .input-row .input-field { flex: 1 1 auto; min-width: 0; }
  .shorturl-page .input-row .btn-primary { flex: 0 0 clamp(150px, 16vw, 190px); }
  .shorturl-page .desc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1400px) {
  .shorturl-page .main-container { width: min(1220px, calc(100vw - 96px)) !important; max-width: 1220px !important; }
  .shorturl-page .card-body { padding-left: 52px !important; padding-right: 52px !important; }
}
@media (min-width: 1800px) {
  .shorturl-page .main-container { width: min(1280px, calc(100vw - 140px)) !important; max-width: 1280px !important; }
}

/* Intermediate widths: retain two columns only when each has enough room. */
@media (min-width: 769px) and (max-width: 1020px) {
  .shorturl-page .desc-grid { grid-template-columns: 1fr !important; }
  .shorturl-page .card-body { padding-left: 26px !important; padding-right: 26px !important; }
}

/* All standalone cards stay mathematically centered and don't inherit the narrow auth card width. */
.auth-page > .card,
.password-page > .card,
.redirect-page > .card,
.security-page > .card,
.utility-page > .card,
.whisper-page .whisper-card {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
}

/* iOS/Android dynamic viewport: leave room for bottom sheets, browser chrome and safe areas. */
@supports (height: 100dvh) {
  .password-page,
  .auth-page,
  .redirect-page,
  .security-page,
  .utility-page,
  .whisper-page,
  .error-page {
    min-height: 100dvh !important;
  }
}
@supports (padding: max(0px)) {
  .shorturl-page {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  .password-page,
  .auth-page,
  .redirect-page,
  .security-page,
  .utility-page,
  .whisper-page {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
}

/* V6 modal controls use the same index5 neutral palette everywhere. */
.modal-actions .btn-close-modal,
.btn-close-modal,
.modal-close,
.confirm-box button:not(.btn-primary):not(.btn-danger),
.custom-alert-box button:not(.btn-primary):not(.btn-danger) {
  background: var(--ui-text) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.modal-actions .btn-close-modal:hover,
.btn-close-modal:hover,
.modal-close:hover {
  background: #2b2b2b !important;
  color: #fff !important;
  transform: none !important;
}
.modal-actions .btn-close-modal:active,
.btn-close-modal:active,
.modal-close:active {
  transform: none !important;
  opacity: .82;
}
.modal-actions .btn-copy {
  background: var(--ui-text) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.modal-actions .btn-copy:hover,
.modal-actions .btn-copy:active { transform: none !important; box-shadow: none !important; }

/* Never let a localized label collide with an icon or action column. */
.modal-header h3,
.modal-header > *,
.link-item,
.link-main,
.link-actions,
.search-row,
.modal-actions { min-width: 0; }

/* Redirect intermediary: navigation is intentionally not delayed by an artificial timer. */

/* ===== password.php: exact index5 visual language for the multi-use error ===== */
.password-page .password-error-banner {
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: #fff0f0 !important;
  color: #c62828 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Keep the page proportions/spacing equal to index5 while retaining existing markup/JS. */
.password-page .instruction br { display: block !important; }
.password-page .password-error-banner { box-sizing: border-box !important; }
.password-page .pin-container { padding: 13px !important; }
.password-page .pin-status { margin-top: 10px !important; }

/* ===== password.php: index5.php layout — structure and typography ===== */
.password-page .step {
  margin-top: 27px !important;
}
.password-page .step:first-of-type {
  margin-top: 0 !important;
}
.password-page .step-title {
  margin: 0 0 8px !important;
  color: #111 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-align: left !important;
}
.password-page .description {
  margin: 0 0 13px !important;
  padding: 0 !important;
  color: #666 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}
.password-page .dropdown {
  width: 100% !important;
}
.password-page .dropdown-button {
  width: 100% !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 17px !important;
  margin: 0 !important;
  border: 1px solid #d7d7dc !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-radius .18s ease, border-color .15s ease !important;
}
.password-page .dropdown.open > .dropdown-button,
.password-page .dropdown-button.open {
  border-color: #111 !important;
  border-radius: 15px 15px 0 0 !important;
}
.password-page .dropdown-button:hover,
.password-page .dropdown-button:focus-visible {
  background: #fff !important;
  border-color: #111 !important;
}
.password-page .dropdown-button:active {
  transform: scale(.99) !important;
  opacity: .85 !important;
}
.password-page .dropdown-button .arrow {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 2px solid #555 !important;
  border-bottom: 2px solid #555 !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: rotate(45deg) translateY(-3px) !important;
  transition: transform .18s ease !important;
}
.password-page .dropdown.open > .dropdown-button .arrow,
.password-page .dropdown-button.open .arrow {
  transform: rotate(225deg) translateY(-2px) !important;
}
.password-page .dropdown-menu {
  display: none !important;
  width: 100% !important;
  padding: 5px !important;
  border: 1px solid #111 !important;
  border-top: 0 !important;
  border-radius: 0 0 15px 15px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.password-page .dropdown.open > .dropdown-menu,
.password-page .dropdown-menu.open {
  display: block !important;
}
.password-page .submenu {
  width: 100% !important;
}
.password-page .submenu-button {
  width: 100% !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.password-page .submenu-button:hover,
.password-page .submenu-button:focus-visible {
  background: #f1f1f3 !important;
}
.password-page .submenu-button:active {
  transform: scale(.99) !important;
  opacity: .85 !important;
}
.password-page .submenu-arrow {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 auto !important;
  margin-right: 3px !important;
  border-right: 2px solid #555 !important;
  border-bottom: 2px solid #555 !important;
  transform: rotate(-45deg) !important;
  transition: transform .18s ease !important;
}
.password-page .submenu.open > .submenu-button .submenu-arrow {
  transform: rotate(45deg) !important;
}
.password-page .submenu-content {
  display: none !important;
  padding: 0 5px 5px 13px !important;
  margin: 0 !important;
}
.password-page .submenu.open > .submenu-content {
  display: block !important;
}
.password-page .dropdown-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  margin-top: 3px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f7f7f8 !important;
  color: #111 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.password-page .dropdown-item:hover,
.password-page .dropdown-item:focus-visible {
  background: #ededee !important;
}

/* PIN block: exact index5 geometry, with the existing dynamic password length preserved. */
.password-page .pin-section {
  margin-top: 27px !important;
}
.password-page .pin-menu {
  padding: 13px !important;
}
.password-page .pin-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}
.password-page .pin-form .pin-submit-btn {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.password-page .pin-real-input,
.password-page .pin-input {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 0 0 12px !important;
  border: 1px solid #d7d7dc !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #111 !important;
  caret-color: #111 !important;
  opacity: 1 !important;
  outline: none !important;
  text-align: center !important;
  font-size: 27px !important;
  line-height: 58px !important;
  font-weight: 700 !important;
  letter-spacing: 12px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
.password-page .pin-real-input:focus,
.password-page .pin-input:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05) !important;
}
.password-page .pin-real-input::placeholder,
.password-page .pin-input::placeholder {
  color: #b8b8bd !important;
  letter-spacing: 8px !important;
}
.password-page .pin-submit-btn,
.password-page .button {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.password-page .pin-submit-btn:hover,
.password-page .button:hover {
  background: #111 !important;
  color: #fff !important;
}
.password-page .pin-submit-btn:active,
.password-page .button:active {
  transform: scale(.98) !important;
  opacity: .85 !important;
}
.password-page .password-error-banner,
.password-page .error {
  margin: 10px 0 0 !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: #fff0f0 !important;
  color: #c62828 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.password-page .pin-section > .password-error-banner {
  width: 100% !important;
  margin-top: 10px !important;
}
.password-page .pin-status {
  min-height: 0 !important;
  margin-top: 10px !important;
}
.password-page .footer {
  margin-top: 17px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
  color: #999 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

@media (max-width: 420px) {
  .password-page > .card {
    padding: 23px 17px 20px !important;
    border-radius: 21px !important;
  }
}


/* V10: password.php follows index5.php's actual outer structure:
 * one .container containing two siblings: .card and .footer.
 * The footer is deliberately outside the white card.
 */
.password-page .password-container {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
.password-page .password-container > .card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.password-page .password-container > .footer {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  color: #999 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
@media (max-width: 600px) {
  .password-page .password-container {
    max-width: 560px !important;
  }
  .password-page .password-container > .card {
    margin-top: 6px !important;
  }
}