/* ============================================================
   Student Auth — Login / Register / OTP / Profile
   ============================================================ */

/* ============================================================
   AUTH PAGE WRAPPER
   ============================================================ */
.pt-auth-page {
    min-height: 100vh;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: var(--pt-font);
}

.pt-auth-card {
    background: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg, 12px);
    box-shadow: var(--pt-shadow-sm, 0 2px 4px rgba(0,0,0,0.06));
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

/* Header */
.pt-auth-head {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding: 32px 32px 28px;
    text-align: center;
}

.pt-auth-head h1 {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.pt-auth-head p {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* Tab switcher */
.pt-auth-tabs {
    padding: 0 32px;
}

.pt-auth-tabs-track {
    display: flex;
    border-bottom: 2px solid var(--pt-border, #e2e8f0);
}

.pt-auth-tab {
    flex: 1;
    padding: 14px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-text-lt);
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 0;
    transition: all 0.2s ease;
    position: relative;
    font-family: var(--pt-font);
}

.pt-auth-tab:hover {
    color: var(--pt-text);
}

.pt-auth-tab.active {
    color: #047857;
    font-weight: 700;
}

.pt-auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #047857;
    border-radius: 3px 3px 0 0;
}

/* Form body */
.pt-auth-body { padding: 28px 32px 32px; background: #ffffff; }

/* Screen management */
.pt-auth-screen { display: none; }
.pt-auth-screen.active { display: block; }

/* Form fields */
.pt-field {
    margin-bottom: 18px;
}

.pt-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-text);
    margin-bottom: 6px;
}

.pt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid var(--pt-border);
    border-radius: 8px;
    font-size: 15px;
    color: var(--pt-text);
    font-family: var(--pt-font);
    background: var(--pt-white);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.pt-input:focus {
    border-color: var(--pt-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}

select.pt-input {
    appearance: none;
    -webkit-appearance: none;
    height: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.pt-input.error { border-color: var(--pt-red, #ef4444); }
.pt-input::placeholder { color: #cbd5e1; }

/* Mobile field with +91 prefix */
.pt-mobile-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--pt-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.pt-mobile-wrap:focus-within {
    border-color: var(--pt-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.pt-mobile-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--pt-bg, #f8fafc);
    color: var(--pt-text-lt, #64748b);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--pt-font);
    border-right: 1.5px solid var(--pt-border);
    user-select: none;
    white-space: nowrap;
}
.pt-input--mobile {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 0;
}
.pt-input--mobile:focus {
    border: none !important;
    box-shadow: none !important;
}

/* Password field with toggle */
.pt-input-wrap { position: relative; }
.pt-input-wrap .pt-input { padding-right: 44px; }
.pt-pass-eye {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--pt-text-lt); padding: 4px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.pt-pass-eye:hover { color: var(--pt-text-md); }
.pt-pass-eye svg { width: 18px; height: 18px; }

/* Buttons */
.pt-btn {
    width: 100%; padding: 12px 16px;
    border-radius: 8px; border: none;
    font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all .15s ease;
    font-family: var(--pt-font);
    display: flex; align-items: center;
    justify-content: center; gap: 8px;
}

.pt-btn-primary {
    background: var(--pt-green);
    color: var(--pt-white);
    border: 1.5px solid #059669;
}
.pt-btn-primary:hover {
    background: #059669;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.pt-btn-primary:active { transform: scale(.98); }
.pt-btn-primary:disabled {
    background: #cbd5e1; cursor: not-allowed;
    transform: none; box-shadow: none;
}

.pt-btn-outline {
    background: #eff6ff;
    color: #1e40af;
    border: 1.5px solid #93c5fd;
}
.pt-btn-outline:hover {
    border-color: #3b82f6;
    background: #dbeafe;
}

.pt-btn-ghost {
    background: transparent;
    color: var(--pt-text-lt);
    border: 1.5px solid var(--pt-border);
    font-size: 13px; padding: 10px;
}
.pt-btn-ghost:hover { border-color: var(--pt-green); color: var(--pt-green); }

.pt-btn-sm {
    width: auto;
    padding: 7px 16px;
    font-size: 13px;
    display: inline-flex;
}

/* OTP input boxes */
.pt-otp-wrap {
    display: flex; gap: 10px;
    justify-content: center; margin: 20px 0;
}

.pt-otp-box {
    width: 46px; height: 52px;
    text-align: center; font-size: 20px;
    font-weight: 700; border: 1.5px solid var(--pt-border);
    border-radius: 8px; color: var(--pt-text);
    font-family: var(--pt-font);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.pt-otp-box:focus {
    border-color: var(--pt-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.pt-otp-box.filled { border-color: var(--pt-green); background: #f0fdf4; }

/* OTP info */
.pt-otp-info {
    text-align: center; margin-bottom: 16px;
}
.pt-otp-info p { font-size: 14px; color: var(--pt-text-md); margin: 0 0 6px; }
.pt-otp-info .pt-masked { font-weight: 700; color: var(--pt-text); }

/* Hint text — replaces inline styles */
.pt-auth-hint {
    font-size: 14px;
    color: var(--pt-text-md);
    margin: 0 0 20px;
    line-height: 1.6;
}

.pt-auth-hint-sm {
    font-size: 12px;
    color: var(--pt-text-muted, #94a3b8);
    margin: 4px 0 0;
}

/* Resend timer */
.pt-resend {
    text-align: center; margin-top: 14px;
    font-size: 13px; color: var(--pt-text-lt);
}
.pt-resend button {
    background: none; border: none; color: var(--pt-green);
    font-weight: 600; cursor: pointer; font-size: 13px;
    font-family: var(--pt-font);
}
.pt-resend button:disabled { color: var(--pt-text-lt); cursor: not-allowed; }
.pt-timer { font-weight: 700; color: var(--pt-green); }

/* Divider */
.pt-divider {
    display: flex; align-items: center;
    gap: 12px; margin: 18px 0;
    font-size: 12px; color: var(--pt-text-lt); font-weight: 500;
}
.pt-divider::before, .pt-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--pt-border);
}

/* Alert / Message */
.pt-alert {
    padding: 12px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    display: none; margin-bottom: 16px;
    align-items: flex-start; gap: 8px;
}
.pt-alert.show { display: flex; }
.pt-alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.pt-alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.pt-alert-info    { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }

/* Spinner */
.pt-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer links */
.pt-auth-foot {
    text-align: center; margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pt-border-light, #f1f5f9);
    font-size: 13px; color: var(--pt-text-lt);
}
.pt-auth-foot a {
    color: var(--pt-green); font-weight: 700;
    text-decoration: none; cursor: pointer;
}
.pt-auth-foot a:hover { text-decoration: underline; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.pt-profile-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 16px 60px;
    font-family: var(--pt-font);
}

/* Profile header card */
.pt-profile-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
}

.pt-profile-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.2);
}
.pt-profile-avatar .pt-header-avatar {
    width: 64px; height: 64px; font-size: 26px;
}
.pt-profile-avatar img.pt-header-avatar {
    width: 64px; height: 64px; object-fit: cover;
    background: none; border: 1px solid var(--pt-green, #10b981);
}

.pt-profile-name { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.pt-profile-email { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
.pt-profile-meta { font-size: 12px; color: rgba(255,255,255,.5); margin: 6px 0 0; }

/* Profile tabs */
.pt-profile-tabs { margin-bottom: 24px; }

.pt-profile-tabs-track {
    display: flex;
    border-bottom: 2px solid var(--pt-border, #e2e8f0);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pt-profile-tabs-track::-webkit-scrollbar { display: none; }

.pt-profile-tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-lt, #64748b);
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    font-family: var(--pt-font);
    transition: color .15s;
}
.pt-profile-tab:hover { color: var(--pt-text, #1e293b); }

.pt-profile-tab.active {
    color: #047857;
    font-weight: 700;
}

.pt-profile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #047857;
    border-radius: 3px 3px 0 0;
}

/* Tab panels */
.pt-profile-panel { display: none; }
.pt-profile-panel.active { display: block; }

/* Stats row */
.pt-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.pt-profile-stat {
    background: var(--pt-white, #ffffff);
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.pt-profile-stat-val { font-size: 24px; font-weight: 800; color: var(--pt-blue); display: block; }
.pt-profile-stat-lbl { font-size: 11px; color: var(--pt-text-lt); font-weight: 600; margin-top: 4px; display: block; text-transform: uppercase; }

/* Section card */
.pt-profile-section {
    background: var(--pt-white, #ffffff);
    border: 1px solid var(--pt-border);
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.pt-profile-section-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pt-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
}

.pt-profile-section-head h3 {
    font-size: 15px; font-weight: 700;
    color: var(--pt-text); margin: 0;
}

.pt-profile-section-body { padding: 20px; }

/* Edit form grid */
.pt-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* History table */
.pt-history-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.pt-history-table th {
    background: var(--pt-bg); color: var(--pt-text-lt);
    font-weight: 700; padding: 10px 12px;
    text-align: left; border-bottom: 2px solid var(--pt-border);
    font-size: 11px; text-transform: uppercase;
}
.pt-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f8fafc;
    color: var(--pt-text-md);
}
.pt-history-table tr:last-child td { border-bottom: none; }
.pt-history-table tr:hover td { background: var(--pt-bg); }

/* Profile info wrapper */
.pt-profile-info { flex: 1; min-width: 0; }

/* Logout button */
.pt-btn-logout {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: background .15s;
}
.pt-btn-logout:hover { background: rgba(255,255,255,.25); }

/* Stat color modifiers */
.pt-profile-stat-val--blue   { color: #3b82f6; }
.pt-profile-stat-val--green  { color: #10b981; }
.pt-profile-stat-val--amber  { color: #f59e0b; }
.pt-profile-stat-val--purple { color: #8b5cf6; }

/* Save button (compact) */
.pt-btn-save { width: auto !important; padding: 9px 24px !important; font-size: 13px !important; }

/* Form actions wrapper */
.pt-profile-form-actions { margin-top: 8px; }

/* Profile link (section header right side) */
.pt-profile-link {
    font-size: 13px;
    color: var(--pt-green);
    font-weight: 700;
    text-decoration: none;
}
.pt-profile-link:hover { text-decoration: underline; }

/* Empty state */
.pt-profile-empty {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
}
.pt-profile-empty a { color: var(--pt-green); font-weight: 700; text-decoration: none; }
.pt-profile-empty a:hover { text-decoration: underline; }

/* Table scroll wrapper */
.pt-table-scroll { overflow-x: auto; }

/* Flush section body (no padding) */
.pt-profile-section-body--flush { padding: 0; }

/* Table cell helpers */
.pt-td-correct { color: #10b981; font-weight: 700; }
.pt-td-wrong   { color: #ef4444; font-weight: 700; }
.pt-td-date    { font-size: 12px; color: #94a3b8; }

/* Narrow form (password change) */
.pt-profile-form--narrow { max-width: 400px; }

/* Danger zone */
.pt-profile-section--danger { border-color: #fee2e2; }
.pt-profile-section--danger .pt-profile-section-head {
    background: #fff5f5;
    border-color: #fee2e2;
}
.pt-profile-section--danger .pt-profile-section-head h3 { color: #991b1b; }

.pt-profile-danger-text {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}

.pt-btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.pt-btn-danger:hover { background: #dc2626; }

/* Recent test item (overview compact list) */
.pt-recent-test-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--pt-border-light, #f1f5f9);
}
.pt-recent-test-item:last-child { border-bottom: none; }

.pt-recent-test-info { display: flex; flex-direction: column; gap: 2px; }
.pt-recent-test-exam { font-size: 13px; font-weight: 700; color: var(--pt-text, #1e293b); }
.pt-recent-test-date { font-size: 12px; color: #94a3b8; }

.pt-recent-test-stats { display: flex; align-items: center; gap: 12px; text-align: right; }
.pt-recent-test-score { font-size: 15px; font-weight: 800; }
.pt-recent-test-accuracy { font-size: 12px; color: var(--pt-text-lt); font-weight: 600; }

/* Quick actions */
.pt-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pt-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: var(--pt-white, #ffffff);
    border: 1px solid var(--pt-border, #e2e8f0);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.pt-quick-action-btn:hover {
    border-color: #047857;
    color: #047857;
    box-shadow: 0 2px 8px rgba(4,120,87,.1);
}
.pt-quick-action-btn svg { color: #047857; }

/* Library grid */
.pt-profile-library-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.pt-profile-library-card {
    background: var(--pt-white, #ffffff);
    border: 1px solid var(--pt-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-profile-library-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.pt-profile-library-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pt-profile-library-mode {
    font-size: 12px;
    color: var(--pt-text-lt, #64748b);
    font-weight: 500;
}

.pt-profile-library-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--pt-text-lt, #64748b);
}
.pt-profile-library-meta span { display: flex; align-items: center; gap: 4px; }

.pt-profile-library-count {
    font-size: 13px;
    color: var(--pt-text-lt);
    font-weight: 600;
}

/* Badges (self-contained for profile page) */
.pt-profile-library-card .pt-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50px;
}
.pt-profile-library-card .pt-badge--primary {
    background: #eff6ff;
    color: #1e40af;
}
.pt-profile-library-card .pt-badge--muted {
    background: #f8fafc;
    color: #94a3b8;
}

.pt-library-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pt-library-pdf-icon {
    flex-shrink: 0;
    width: 24px;
}
.pt-library-pdf-icon svg {
    width: 24px;
    height: auto;
    display: block;
}
.pt-library-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pt-profile-library-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Empty state */
.pt-profile-empty-state {
    text-align: center;
    padding: 32px 20px;
    color: var(--pt-text-lt, #64748b);
}
.pt-profile-empty-state .pt-btn {
    width: auto;
    display: inline-flex;
}
.pt-profile-empty-state p {
    font-size: 14px;
    margin: 0 0 16px;
}

/* Auth button shortcode */
.pt-auth-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 50px;
    font-size: 13px; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.pt-auth-btn-login {
    background: var(--pt-green); color: #fff;
}
.pt-auth-btn-login:hover { background: var(--pt-success-hover, #059669); }
.pt-auth-btn-profile {
    background: #f1f5f9; color: var(--pt-text);
    border: 1px solid var(--pt-border);
}
.pt-auth-btn-profile:hover { border-color: var(--pt-green); color: var(--pt-green); }
.pt-auth-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--pt-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}

/* Stats shortcode */
.pt-stats-row {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 12px; margin-bottom: 16px;
}
.pt-stat-box {
    background: var(--pt-white); border: 1px solid var(--pt-border);
    border-radius: 10px; padding: 14px; text-align: center;
}
.pt-stat-val { display: block; font-size: 22px; font-weight: 800; color: var(--pt-blue); }
.pt-stat-lbl { display: block; font-size: 11px; color: var(--pt-text-lt); font-weight: 600; margin-top: 4px; }

/* ============================================================
   MOBILE VERIFICATION MODAL
   ============================================================ */
.pt-mv-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: ptMvFadeIn .2s ease;
}

@keyframes ptMvFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pt-mv-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    overflow: hidden;
    animation: ptMvSlideIn .25s ease;
}

@keyframes ptMvSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pt-mv-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding: 24px 28px 20px;
    text-align: center;
    position: relative;
}

.pt-mv-header h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
}

.pt-mv-header p {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    margin: 0;
}

.pt-mv-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.pt-mv-close:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.pt-mv-body {
    padding: 24px 28px 28px;
}

.pt-mv-screen {
    display: none;
}
.pt-mv-screen.active {
    display: block;
}

.pt-mv-success-icon {
    text-align: center;
    margin: 16px 0 0;
}

/* ============================================================
   GOOGLE SIGN-IN BUTTON WRAPPER
   ============================================================ */
.pt-google-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 8px;
    min-height: 44px;
}

/* Connected Account row on profile page */
.pt-connected-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
.pt-connected-account-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pt-connected-account-action .pt-google-btn-wrap {
    margin: 0;
    min-height: 36px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Focus visible states (accessibility) */
.pt-btn:focus-visible,
.pt-profile-tab:focus-visible,
.pt-auth-tab:focus-visible,
.pt-quick-action-btn:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
}
.pt-btn-danger:focus-visible { outline-color: #ef4444; }
.pt-btn-logout:focus-visible { outline-color: rgba(255,255,255,.7); }

/* Library card hover */
.pt-profile-library-card {
    transition: border-color .15s, box-shadow .15s;
}
.pt-profile-library-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Tablet breakpoint */
@media (max-width: 768px) {
    .pt-profile-stats { grid-template-columns: repeat(2,1fr); }
    .pt-profile-library-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .pt-auth-body { padding: 20px 20px 24px; }
    .pt-auth-head { padding: 24px 20px 20px; }
    .pt-auth-tabs { padding: 12px 20px 0; }
    .pt-otp-box { width: 40px; height: 46px; font-size: 18px; }
    .pt-profile-stats { grid-template-columns: repeat(2,1fr); }
    .pt-edit-grid { grid-template-columns: 1fr; }
    .pt-stats-row { grid-template-columns: repeat(2,1fr); }
    .pt-profile-hero { flex-direction: column; text-align: center; padding: 20px; }
    .pt-profile-name { font-size: 18px; }
    .pt-quick-actions { grid-template-columns: 1fr; }
    .pt-profile-library-grid { grid-template-columns: 1fr; }
    .pt-profile-tab { padding: 10px 14px; font-size: 13px; }
    .pt-history-table { font-size: 11px; }
    .pt-history-table th { padding: 8px 6px; font-size: 10px; }
    .pt-history-table td { padding: 8px 6px; }
    .pt-profile-section-body { padding: 14px; }
}

@media (max-width: 380px) {
    .pt-otp-wrap { gap: 6px; }
    .pt-otp-box { width: 36px; height: 42px; font-size: 16px; }
}

/* ============================================================
   PHASE 2 — MEDIUM-priority mobile refinements (audit follow-up)
   Appended; no existing rules modified. Tightens spacing/typography
   for tablet→small-phone breakpoints and adds <380px specific tweaks.
   ============================================================ */

@media (max-width: 600px) {
    /* Auth tabs — smaller font/padding so they fit narrower viewports */
    .pt-auth-tab { font-size: 13px; padding: 12px 12px; }
}

@media (max-width: 480px) {
    /* Profile stats grid — tighter spacing + smaller numbers */
    .pt-profile-stats { gap: 10px; margin-bottom: 18px; }
    .pt-profile-stat { padding: 14px 10px; }
    .pt-profile-stat-val { font-size: 20px; }
    .pt-profile-stat-lbl { font-size: 10px; }

    /* Section card — tighter inner padding on small phones */
    .pt-profile-section-body { padding: 14px; }
    .pt-profile-section-head { padding: 12px 14px; }

    /* Profile hero — tighter on small phones */
    .pt-profile-hero { padding: 18px 16px; gap: 12px; }

    /* Library grid — tighter spacing */
    .pt-profile-library-grid { gap: 10px; }
    .pt-profile-library-card { padding: 14px; }

    /* Quick actions — tighter spacing */
    .pt-quick-actions { gap: 10px; }
    .pt-quick-action-btn { padding: 16px 10px; font-size: 12px; }

    /* Stats row shortcode — match new sizing */
    .pt-stats-row { gap: 10px; }
    .pt-stat-box { padding: 12px 10px; }
    .pt-stat-val { font-size: 18px; }
    .pt-stat-lbl { font-size: 10px; }

    /* Auth card body fits narrow viewport better */
    .pt-auth-body { padding: 18px 18px 22px; }
    .pt-auth-head { padding: 22px 18px 18px; }
    .pt-auth-head h1 { font-size: 20px; }
    .pt-auth-tabs { padding: 8px 18px 0; }

    /* Buttons meet 44px touch target on mobile */
    .pt-btn { min-height: 44px; }
    .pt-btn-sm { min-height: 36px; }

    /* Recent test items — wrap better on narrow screens */
    .pt-recent-test-item { gap: 8px; padding: 10px 0; }
    .pt-recent-test-stats { gap: 8px; }
    .pt-recent-test-score { font-size: 14px; }
    .pt-recent-test-accuracy { font-size: 11px; }
}

@media (max-width: 380px) {
    /* Extra-small phones — iPhone SE, Galaxy S10 class */
    .pt-auth-page { padding: 16px 10px; }
    .pt-auth-card { border-radius: 10px; }
    .pt-auth-body { padding: 16px 14px 20px; }
    .pt-auth-head { padding: 20px 14px 16px; }
    .pt-auth-head h1 { font-size: 18px; }
    .pt-auth-head p { font-size: 13px; }
    .pt-auth-tabs { padding: 6px 14px 0; }
    .pt-auth-tab { font-size: 12px; padding: 11px 8px; }

    /* Inputs — keep ≥16px font to avoid iOS auto-zoom while scaling padding */
    .pt-input { padding: 10px 12px; font-size: 16px; }
    .pt-mobile-prefix { padding: 0 10px; font-size: 14px; }

    /* Profile page — tighten page chrome on tiny screens */
    .pt-profile-wrap { padding: 16px 10px 40px; }
    .pt-profile-hero { padding: 16px 12px; gap: 10px; }
    .pt-profile-name { font-size: 17px; }
    .pt-profile-email { font-size: 12px; }

    .pt-profile-stats { gap: 8px; }
    .pt-profile-stat { padding: 12px 8px; }
    .pt-profile-stat-val { font-size: 18px; }
    .pt-profile-stat-lbl { font-size: 9px; }

    .pt-profile-tab { padding: 10px 10px; font-size: 12px; }
    .pt-profile-section-body { padding: 12px; }
    .pt-profile-section-head { padding: 10px 12px; }
    .pt-profile-section-head h3 { font-size: 14px; }

    .pt-profile-library-card { padding: 12px; }
    .pt-profile-library-title { font-size: 13px; }
    .pt-profile-library-meta { font-size: 11px; }

    .pt-quick-action-btn { padding: 14px 8px; font-size: 11px; }

    /* History table — even smaller fonts/padding */
    .pt-history-table { font-size: 10px; }
    .pt-history-table th { padding: 6px 4px; font-size: 9px; }
    .pt-history-table td { padding: 6px 4px; }
}