/* ==========================================================================
   JudiQ AI — Notary Public Module Stylesheet (frontend/css/notary.css)
   Complies with Notaries Act 1952 & Notaries Rules 1956 Form XV Requirements
   Design System: JudiQ Navy/Gold/Indigo palette, Dark-theme ready
   ========================================================================== */

#notaryScreen {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-body, #f8fafc);
    color: var(--text-primary, #0f172a);
    display: flex;
    flex-direction: column;
}

#notaryScreen.hidden {
    display: none !important;
}

/* ── Top Bar & Navigation ────────────────────────────────────────────────── */
#notaryScreen .notary-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#notaryScreen .notary-brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

#notaryScreen .notary-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

#notaryScreen .notary-brand-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0f172a;
    letter-spacing: -0.02em;
}

#notaryScreen .notary-brand-title span {
    color: #4f46e5;
}

#notaryScreen .notary-statutory-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #c7d2fe;
}

#notaryScreen .notary-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Sub Navigation Tabs ──────────────────────────────────────────────────── */
#notaryScreen .notary-tab-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

#notaryScreen .notary-access-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 24px;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    color: #78350f;
}

#notaryScreen .notary-access-notice-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

#notaryScreen .notary-access-notice-copy strong {
    font-size: 14px;
}

#notaryScreen .notary-access-notice-copy strong i {
    margin-right: 5px;
}

#notaryScreen .notary-access-notice-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 0;
    border-radius: 8px;
    background: #4338ca;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

#notaryScreen .notary-access-notice-action:hover {
    background: #3730a3;
}

#notaryScreen .notary-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#notaryScreen .notary-tab-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

#notaryScreen .notary-tab-btn.active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

#notaryScreen .notary-tab-count {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
}

#notaryScreen .notary-tab-btn.active .notary-tab-count {
    background: #4338ca;
    color: #ffffff;
}

/* ── Container Layout ─────────────────────────────────────────────────────── */
#notaryScreen .notary-container {
    max-width: 1380px;
    width: calc(100% - 48px);
    margin: 20px auto 40px auto;
    flex: 1 1 auto;
}

#notaryScreen .notary-tab-content {
    display: none;
}

#notaryScreen .notary-tab-content.active {
    display: block;
}

/* ── Banner & Metrics Bar ─────────────────────────────────────────────────── */
#notaryScreen .notary-hero-banner {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #ffffff;
    border-radius: 14px;
    padding: 22px 28px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 18px rgba(30, 27, 75, 0.2);
}

#notaryScreen .notary-hero-info h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #ffffff;
}

#notaryScreen .notary-hero-info p {
    font-size: 13px;
    color: #c7d2fe;
    margin: 0;
    max-width: 650px;
}

#notaryScreen .notary-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

#notaryScreen .notary-stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 120px;
}

#notaryScreen .notary-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

#notaryScreen .notary-stat-lbl {
    font-size: 11px;
    color: #a5b4fc;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Category Filter Pills & Search ──────────────────────────────────────── */
#notaryScreen .notary-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    align-items: center;
}

#notaryScreen .notary-search-input {
    flex: 1 1 240px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s;
}

#notaryScreen .notary-search-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#notaryScreen .notary-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 6px;
}

#notaryScreen .notary-cat-pill {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

#notaryScreen .notary-cat-pill:hover {
    background: #e2e8f0;
    color: #0f172a;
}

#notaryScreen .notary-cat-pill.active {
    background: #4338ca;
    color: #ffffff;
    border-color: #4338ca;
}

/* ── Template Cards Grid ──────────────────────────────────────────────────── */
#notaryScreen .notary-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

#notaryScreen .notary-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

#notaryScreen .notary-card:hover {
    border-color: #818cf8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.08);
}

#notaryScreen .notary-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

#notaryScreen .notary-card-num {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}

#notaryScreen .notary-card-stamp {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
}

#notaryScreen .notary-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
}

#notaryScreen .notary-card-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1 1 auto;
}

#notaryScreen .notary-card-statutory {
    font-size: 10px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 14px;
}

#notaryScreen .notary-card-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

/* ── Drafting Wizard & Form View ─────────────────────────────────────────── */
#notaryScreen .notary-draft-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

@media (max-width: 1024px) {
    #notaryScreen .notary-draft-workspace {
        grid-template-columns: 1fr;
    }
}

#notaryScreen .notary-pane {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

#notaryScreen .notary-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

#notaryScreen .notary-pane-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

#notaryScreen .notary-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#notaryScreen .notary-field-full {
    grid-column: 1 / -1;
}

#notaryScreen .notary-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#notaryScreen .notary-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

#notaryScreen .notary-form-group label span.required {
    color: #ef4444;
}

#notaryScreen .notary-input,
#notaryScreen .notary-select,
#notaryScreen .notary-textarea {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    color: #0f172a;
    background: #f8fafc;
    transition: all 0.2s;
}

#notaryScreen .notary-input:focus,
#notaryScreen .notary-select:focus,
#notaryScreen .notary-textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#notaryScreen .notary-textarea {
    min-height: 80px;
    resize: vertical;
}

/* ── Validation Alerts Box ───────────────────────────────────────────────── */
#notaryScreen .notary-validation-box {
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
}

#notaryScreen .notary-validation-box.valid {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

#notaryScreen .notary-validation-box.invalid {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

#notaryScreen .notary-validation-box ul {
    margin: 6px 0 0 16px;
    padding: 0;
}

/* ── Draft Preview Toolbar & Paper ───────────────────────────────────────── */
#notaryScreen .notary-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

#notaryScreen .notary-draft-paper {
    width: 100%;
    min-height: 520px;
    padding: 18px;
    font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    resize: vertical;
    white-space: pre-wrap;
    box-sizing: border-box;
}

/* ── Form XV Register Table ──────────────────────────────────────────────── */
#notaryScreen .notary-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#notaryScreen .notary-table-header-bar {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 12px;
}

#notaryScreen .notary-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

#notaryScreen .notary-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

#notaryScreen .notary-data-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.03em;
}

#notaryScreen .notary-data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

#notaryScreen .notary-data-table tr:hover td {
    background: #f8faff;
}

#notaryScreen .serial-badge {
    font-weight: 700;
    color: #4338ca;
    background: #eef2ff;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #c7d2fe;
}

#notaryScreen .checklist-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

#notaryScreen .checklist-tag.verified {
    background: #dcfce7;
    color: #15803d;
}

#notaryScreen .checklist-tag.pending {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
#notaryScreen .notary-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#notaryScreen .notary-modal-card {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid #e2e8f0;
}

#notaryScreen .notary-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

#notaryScreen .notary-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

#notaryScreen .notary-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
}

/* ── Dark Theme Overrides ─────────────────────────────────────────────────── */
[data-theme="dark"] #notaryScreen {
    background: #090d16;
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-top-nav,
[data-theme="dark"] #notaryScreen .notary-tab-bar,
[data-theme="dark"] #notaryScreen .notary-filter-toolbar,
[data-theme="dark"] #notaryScreen .notary-card,
[data-theme="dark"] #notaryScreen .notary-pane,
[data-theme="dark"] #notaryScreen .notary-table-card,
[data-theme="dark"] #notaryScreen .notary-modal-card {
    background: #0f172a;
    border-color: #1e293b;
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-access-notice {
    background: #422006;
    border-color: #78350f;
    color: #fde68a;
}

[data-theme="dark"] #notaryScreen .notary-brand-title {
    color: #f8fafc;
}

[data-theme="dark"] #notaryScreen .notary-tab-btn {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-tab-btn:hover {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] #notaryScreen .notary-tab-btn.active {
    background: #312e81;
    border-color: #4338ca;
    color: #ffffff;
}

[data-theme="dark"] #notaryScreen .notary-search-input,
[data-theme="dark"] #notaryScreen .notary-input,
[data-theme="dark"] #notaryScreen .notary-select,
[data-theme="dark"] #notaryScreen .notary-textarea {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-card-title,
[data-theme="dark"] #notaryScreen .notary-pane-header h3,
[data-theme="dark"] #notaryScreen .notary-modal-header h3 {
    color: #f8fafc;
}

[data-theme="dark"] #notaryScreen .notary-card-desc {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-card-statutory {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-cat-pill {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-cat-pill.active {
    background: #4f46e5;
    color: #ffffff;
}

[data-theme="dark"] #notaryScreen .notary-draft-paper {
    background: #020617;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] #notaryScreen .notary-data-table th {
    background: #1e293b;
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] #notaryScreen .notary-data-table td {
    border-bottom-color: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-data-table tr:hover td {
    background: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-form-group label {
    color: #cbd5e1;
}

/* ==========================================================================
   NOTARY DEDICATED VIEWS: LANDING, AUTH, & DASHBOARD
   ========================================================================== */

/* ── Corporate Head Bar ──────────────────────────────────────────────────── */
#notaryScreen .notary-head-ribbon {
    background: #0f172a;
    color: #94a3b8;
    font-size: 11px;
    padding: 6px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#notaryScreen .notary-head-ribbon a {
    color: #a5b4fc;
    text-decoration: none;
}

#notaryScreen .notary-head-ribbon a:hover {
    text-decoration: underline;
}

/* ── Notary Landing Navbar ───────────────────────────────────────────────── */
#notaryScreen .notary-landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

#notaryScreen .notary-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

#notaryScreen .notary-nav-link {
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

#notaryScreen .notary-nav-link:hover {
    color: #4f46e5;
}

/* ── Notary Landing Hero Section ─────────────────────────────────────────── */
#notaryScreen .notary-landing-hero {
    background: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25), transparent 50%),
                linear-gradient(135deg, #070b14 0%, #0e1424 50%, #172554 100%);
    color: #ffffff;
    padding: 72px 32px 64px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#notaryScreen .notary-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(165, 180, 252, 0.3);
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#notaryScreen .notary-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    max-width: 900px;
    margin: 0 auto 20px auto;
}

#notaryScreen .notary-hero-title span {
    background: linear-gradient(135deg, #a5b4fc, #818cf8, #38bdf8);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#notaryScreen .notary-hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 760px;
    margin: 0 auto 32px auto;
}

#notaryScreen .notary-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

#notaryScreen .notary-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

#notaryScreen .notary-btn-hero-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
}

#notaryScreen .notary-btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.55);
}

#notaryScreen .notary-btn-hero-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

#notaryScreen .notary-btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

#notaryScreen .notary-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

#notaryScreen .notary-hero-metric-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    backdrop-filter: blur(8px);
}

#notaryScreen .notary-hero-metric-val {
    font-size: 26px;
    font-weight: 700;
    color: #38bdf8;
    font-family: 'Outfit', sans-serif;
}

#notaryScreen .notary-hero-metric-lbl {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* ── Section Containers ──────────────────────────────────────────────────── */
#notaryScreen .notary-landing-section {
    padding: 72px 32px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

#notaryScreen .notary-section-head {
    text-align: center;
    margin-bottom: 48px;
}

#notaryScreen .notary-section-tag {
    font-size: 12px;
    font-weight: 700;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

#notaryScreen .notary-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

#notaryScreen .notary-section-sub {
    font-size: 15px;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Feature Cards Grid ──────────────────────────────────────────────────── */
#notaryScreen .notary-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

#notaryScreen .notary-feat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

#notaryScreen .notary-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.1);
    border-color: #c7d2fe;
}

#notaryScreen .notary-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

#notaryScreen .notary-feat-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

#notaryScreen .notary-feat-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.6;
}

/* ── Pricing Comparison Cards ────────────────────────────────────────────── */
#notaryScreen .notary-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    max-width: 850px;
    margin: 0 auto;
}

#notaryScreen .notary-plan-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

#notaryScreen .notary-plan-card.featured {
    border: 2px solid #6366f1;
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.18);
}

#notaryScreen .notary-plan-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#notaryScreen .notary-plan-price {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
    font-family: 'Outfit', sans-serif;
    margin: 16px 0 20px 0;
}

#notaryScreen .notary-plan-price span {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

#notaryScreen .notary-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex: 1;
}

#notaryScreen .notary-plan-features li {
    font-size: 13.5px;
    color: #334155;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px dashed #f1f5f9;
}

#notaryScreen .notary-plan-features li i {
    color: #10b981;
    font-size: 14px;
}

/* ── Notary Dedicated Auth Card ──────────────────────────────────────────── */
#notaryScreen .notary-auth-wrap {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient(circle at 50% 10%, rgba(99, 102, 241, 0.12), transparent 60%),
                #f8fafc;
}

#notaryScreen .notary-auth-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: 36px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

#notaryScreen .notary-auth-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
}

#notaryScreen .notary-auth-tab {
    flex: 1;
    padding: 9px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.15s ease;
}

#notaryScreen .notary-auth-tab.active {
    background: #ffffff;
    color: #4f46e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

#notaryScreen .notary-auth-demo-banner {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #166534;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

/* ── Dark Mode Overrides for Notary Landing & Auth ────────────────────────── */
[data-theme="dark"] #notaryScreen .notary-landing-nav {
    background: rgba(14, 20, 36, 0.95);
    border-bottom-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-nav-link {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-nav-link:hover {
    color: #818cf8;
}

[data-theme="dark"] #notaryScreen .notary-section-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-feat-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-feat-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-feat-desc {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-plan-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-plan-price {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-plan-features li {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-auth-wrap {
    background: #070b14;
}

[data-theme="dark"] #notaryScreen .notary-auth-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-auth-tabs {
    background: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-auth-tab.active {
    background: #141c30;
    color: #818cf8;
}

/* ── Notary Dashboard Homepage Styles ─────────────────────────────────────── */
#notaryScreen .notary-home-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

#notaryScreen .notary-home-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #4f46e5, #06b6d4, #f59e0b);
}

#notaryScreen .notary-home-user-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

#notaryScreen .notary-home-seal-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #312e81, #4f46e5);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    flex-shrink: 0;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

#notaryScreen .notary-home-user-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 6px;
}

#notaryScreen .notary-home-user-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: #64748b;
}

#notaryScreen .notary-home-user-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
}

#notaryScreen .notary-home-user-tag.active {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

#notaryScreen .notary-home-serial-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
}

#notaryScreen .notary-serial-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
}

/* ── KPI Grid ────────────────────────────────────────────────────────────── */
#notaryScreen .notary-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

#notaryScreen .notary-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

#notaryScreen .notary-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

#notaryScreen .notary-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

#notaryScreen .notary-kpi-icon.indigo {
    background: #eef2ff;
    color: #4f46e5;
}

#notaryScreen .notary-kpi-icon.emerald {
    background: #ecfdf5;
    color: #059669;
}

#notaryScreen .notary-kpi-icon.amber {
    background: #fffbeb;
    color: #d97706;
}

#notaryScreen .notary-kpi-icon.sky {
    background: #f0f9ff;
    color: #0284c7;
}

#notaryScreen .notary-kpi-body {
    flex: 1;
}

#notaryScreen .notary-kpi-val {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}

#notaryScreen .notary-kpi-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}

#notaryScreen .notary-kpi-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ── Quick Action Command Bar ────────────────────────────────────────────── */
#notaryScreen .notary-quick-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

#notaryScreen .notary-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

#notaryScreen .notary-action-btn:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

#notaryScreen .notary-action-btn.primary {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

#notaryScreen .notary-action-btn.primary:hover {
    background: #4338ca;
    border-color: #4338ca;
}

/* ── Section Headers ─────────────────────────────────────────────────────── */
#notaryScreen .notary-home-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: 8px;
}

#notaryScreen .notary-home-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

#notaryScreen .notary-home-section-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* ── Recent Drafts Grid ──────────────────────────────────────────────────── */
#notaryScreen .notary-drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

#notaryScreen .notary-draft-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

#notaryScreen .notary-draft-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: #c7d2fe;
}

#notaryScreen .notary-draft-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
}

#notaryScreen .notary-draft-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4f46e5;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 4px;
}

#notaryScreen .notary-draft-lang {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

#notaryScreen .notary-draft-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 6px;
}

#notaryScreen .notary-draft-party {
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#notaryScreen .notary-draft-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: #64748b;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-bottom: 14px;
}

#notaryScreen .notary-draft-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#notaryScreen .notary-draft-actions .btn-open-draft {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

#notaryScreen .notary-draft-actions .btn-open-draft:hover {
    background: #4338ca;
}

#notaryScreen .notary-draft-actions .btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

#notaryScreen .notary-draft-actions .btn-action-icon:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* ── Quick Template Launcher Grid ─────────────────────────────────────────── */
#notaryScreen .notary-launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

#notaryScreen .notary-launcher-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#notaryScreen .notary-launcher-card:hover {
    transform: translateY(-2px);
    border-color: #818cf8;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
    background: #faf5ff;
}

#notaryScreen .notary-launcher-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

#notaryScreen .notary-launcher-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

#notaryScreen .notary-launcher-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

#notaryScreen .notary-launcher-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

#notaryScreen .notary-launcher-arrow {
    color: #94a3b8;
    font-size: 13px;
    transition: transform 0.2s ease;
}

#notaryScreen .notary-launcher-card:hover .notary-launcher-arrow {
    color: #4f46e5;
    transform: translateX(3px);
}

/* ── Dark Mode Overrides for Home Page ────────────────────────────────────── */
[data-theme="dark"] #notaryScreen .notary-home-header {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-home-user-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-home-user-details {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-home-user-tag {
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-home-user-tag.active {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

[data-theme="dark"] #notaryScreen .notary-serial-pill {
    background: #1e1b4b;
    border-color: #3730a3;
    color: #a5b4fc;
}

[data-theme="dark"] #notaryScreen .notary-kpi-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-kpi-val {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-kpi-lbl {
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-quick-actions-bar {
    background: #0a0f1d;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-action-btn {
    background: #0e1424;
    border-color: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-home-section-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-draft-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-draft-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-draft-party {
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-draft-meta {
    border-top-color: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] #notaryScreen .notary-draft-actions .btn-action-icon {
    background: #141c30;
    border-color: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] #notaryScreen .notary-launcher-card {
    background: #0e1424;
    border-color: #1e293b;
}

[data-theme="dark"] #notaryScreen .notary-launcher-card:hover {
    background: #141c30;
    border-color: #6366f1;
}

[data-theme="dark"] #notaryScreen .notary-launcher-title {
    color: #f1f5f9;
}

[data-theme="dark"] #notaryScreen .notary-launcher-icon {
    background: #1e1b4b;
    color: #818cf8;
}

/* JudiQ shared design tokens and interaction states */
#notaryScreen {
    background: var(--bg-base, #f8fafc);
    color: var(--text-primary, #0f172a);
    font-family: var(--font-family, 'Outfit', sans-serif);
    color-scheme: light;
}

[data-theme="dark"] #notaryScreen {
    color-scheme: dark;
}

#notaryScreen .notary-top-nav,
#notaryScreen .notary-landing-nav {
    background: var(--glass-bg, rgba(255, 255, 255, .94));
    -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
    backdrop-filter: blur(var(--glass-blur, 16px));
    border-color: var(--glass-border, var(--border-color, rgba(15, 23, 42, .1)));
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08));
}

#notaryScreen .notary-brand-title,
#notaryScreen .notary-home-user-title,
#notaryScreen .notary-section-title,
#notaryScreen .notary-home-section-title,
#notaryScreen .notary-kpi-val,
#notaryScreen .notary-card-title,
#notaryScreen .notary-draft-title,
#notaryScreen .notary-launcher-title,
#notaryScreen .notary-pane-header h3,
#notaryScreen .notary-modal-header h3 {
    color: var(--text-primary, #0f172a);
}

#notaryScreen .notary-tab-bar,
#notaryScreen .notary-filter-toolbar,
#notaryScreen .notary-card,
#notaryScreen .notary-pane,
#notaryScreen .notary-table-card,
#notaryScreen .notary-modal-card,
#notaryScreen .notary-home-header,
#notaryScreen .notary-kpi-card,
#notaryScreen .notary-draft-card,
#notaryScreen .notary-launcher-card {
    background: var(--bg-surface, #ffffff);
    border-color: var(--border-color, rgba(15, 23, 42, .1));
    color: var(--text-primary, #0f172a);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .07));
}

#notaryScreen .notary-container {
    width: min(1440px, calc(100% - 40px));
    margin: 24px auto 48px;
}

#notaryScreen .notary-tab-btn {
    color: var(--text-secondary, #475569);
}

#notaryScreen .notary-tab-btn:hover,
#notaryScreen .notary-cat-pill:hover {
    color: var(--text-primary, #0f172a);
    border-color: var(--border-hover, rgba(99, 102, 241, .5));
}

#notaryScreen .notary-tab-btn.active,
#notaryScreen .notary-cat-pill.active {
    background: var(--primary-50, #eef2ff);
    border-color: var(--primary-200, #c7d2fe);
    color: var(--primary-700, #4338ca);
}

#notaryScreen .notary-search-input,
#notaryScreen .notary-input,
#notaryScreen .notary-select,
#notaryScreen .notary-textarea,
#notaryScreen .notary-draft-paper {
    background: var(--bg-elevated, #f1f5f9);
    border-color: var(--border-color, #cbd5e1);
    color: var(--text-primary, #0f172a);
    font: inherit;
}

#notaryScreen input::placeholder,
#notaryScreen textarea::placeholder {
    color: var(--text-muted, #64748b);
    opacity: .85;
}

#notaryScreen .notary-form-group label,
#notaryScreen .notary-card-desc,
#notaryScreen .notary-home-user-details,
#notaryScreen .notary-home-section-desc,
#notaryScreen .notary-draft-meta,
#notaryScreen .notary-launcher-sub {
    color: var(--text-secondary, #475569);
}

#notaryScreen .notary-card:hover,
#notaryScreen .notary-draft-card:hover,
#notaryScreen .notary-launcher-card:hover,
#notaryScreen .notary-kpi-card:hover {
    border-color: var(--border-hover, rgba(99, 102, 241, .5));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, .09));
}

#notaryScreen .notary-head-ribbon {
    background: var(--bg-base, #070b14);
}

#notaryScreen .notary-hero-banner {
    background: var(--grad-hero, linear-gradient(135deg, #070b14, #1e1b4b));
    box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, .18));
}

#notaryScreen .notary-stat-card {
    background: rgba(255, 255, 255, .1);
}

#notaryScreen .notary-status-positive {
    color: var(--success-600, #059669);
    font-weight: 600;
}

#notaryScreen .notary-status-pending {
    color: var(--warning-600, #b45309);
    font-weight: 600;
}

#notaryScreen .notary-empty-row {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted, #64748b);
}

#notaryScreen :is(button, a, input, select, textarea):focus-visible,
#notaryScreen [role="button"]:focus-visible {
    outline: 3px solid var(--primary-400, #818cf8);
    outline-offset: 2px;
}

#notaryScreen .notary-tab-bar,
#notaryScreen .notary-category-pills,
#notaryScreen .notary-nav-links {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400, #94a3b8) transparent;
}

#notaryScreen [style*="color:#0f172a"],
#notaryScreen [style*="color:#1e293b"] {
    color: var(--text-primary, #0f172a) !important;
}

#notaryScreen [style*="color:#334155"],
#notaryScreen [style*="color:#475569"],
#notaryScreen [style*="color:#64748b"] {
    color: var(--text-secondary, #475569) !important;
}

#notaryScreen [style*="background:#ffffff"],
#notaryScreen [style*="background: #ffffff"] {
    background: var(--bg-surface, #ffffff) !important;
}

#notaryScreen [style*="background:#f8fafc"],
#notaryScreen [style*="background: #f8fafc"] {
    background: var(--bg-elevated, #f1f5f9) !important;
}

@media (max-width: 760px) {
    #notaryScreen .notary-container {
        width: calc(100% - 24px);
        margin: 16px auto 32px;
    }

    #notaryScreen .notary-top-nav,
    #notaryScreen .notary-landing-nav {
        padding-inline: 14px;
        gap: 10px;
    }

    #notaryScreen .notary-tab-bar {
        padding-inline: 12px;
        position: sticky;
        top: 62px;
        z-index: 80;
    }

    #notaryScreen .notary-form-grid,
    #notaryScreen .notary-draft-workspace {
        grid-template-columns: 1fr;
    }

    #notaryScreen .notary-preview-toolbar {
        align-items: stretch;
    }

    #notaryScreen .notary-preview-toolbar > * {
        width: 100%;
    }

    #notaryScreen .notary-preview-toolbar .btn {
        min-height: 40px;
    }
}

/* ── Notary product landing refresh ──────────────────────────────────────── */
#notaryScreen .notary-landing-page {
    --nl-bg: #f5f7fc;
    --nl-surface: #ffffff;
    --nl-ink: #142440;
    --nl-muted: #64748b;
    --nl-line: #e2e8f0;
    --nl-accent: #455ce2;
    --nl-accent-dark: #3248c6;
    --nl-soft: #eef2ff;
    min-height: 100vh;
    background: var(--nl-bg);
    color: var(--nl-ink);
    font-family: var(--font-family, 'Outfit', sans-serif);
}

#notaryScreen .notary-landing-page :is(h1, h2, h3, p) { margin-top: 0; }
#notaryScreen .notary-landing-page :is(a, button, input) { font-family: inherit; }
#notaryScreen .notary-landing-page a { color: inherit; }
#notaryScreen .notary-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#notaryScreen .notary-head-ribbon {
    min-height: 32px;
    padding: 6px clamp(18px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #111b32;
    color: #d5deef;
    font-size: 12px;
    letter-spacing: .01em;
}

#notaryScreen .notary-head-ribbon > span { display: inline-flex; align-items: center; gap: 8px; }
#notaryScreen .notary-head-ribbon > span i { color: #a5b4fc; }
#notaryScreen .notary-head-ribbon a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c7d2fe;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#notaryScreen .notary-head-ribbon a:hover { color: #ffffff; }

#notaryScreen .notary-landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    min-height: 76px;
    padding: 10px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--nl-line);
    box-shadow: 0 8px 28px rgba(26, 42, 76, .06);
}

#notaryScreen .notary-brand-group {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 168px;
    color: var(--nl-ink);
    text-decoration: none;
}
#notaryScreen .notary-brand-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe4ff;
    border-radius: 13px;
    background: linear-gradient(145deg, #eef2ff, #dce7ff);
    color: var(--nl-accent);
    font-size: 17px;
}
#notaryScreen .notary-brand-copy { display: grid; gap: 2px; }
#notaryScreen .notary-brand-title {
    color: var(--nl-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-transform: none;
}
#notaryScreen .notary-brand-title > span { color: var(--nl-accent); }
#notaryScreen .notary-brand-caption { color: #78869d; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
#notaryScreen .notary-nav-links { justify-content: center; gap: clamp(13px, 1.65vw, 24px); min-width: 0; }
#notaryScreen .notary-nav-link {
    color: #4e5d75;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
#notaryScreen .notary-nav-link:hover { color: var(--nl-accent); }
#notaryScreen .notary-nav-actions { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
#notaryScreen .notary-nav-login,
#notaryScreen .notary-nav-create {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
#notaryScreen .notary-nav-login { background: transparent; color: #43526a; }
#notaryScreen .notary-nav-login:hover { background: #f1f4fa; }
#notaryScreen .notary-nav-create {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--nl-accent);
    color: #fff;
    box-shadow: 0 5px 14px rgba(69, 92, 226, .2);
}
#notaryScreen .notary-nav-create:hover { background: var(--nl-accent-dark); transform: translateY(-1px); }

#notaryScreen .notary-landing-hero {
    position: relative;
    display: block;
    overflow: hidden;
    padding: clamp(54px, 7vw, 92px) clamp(20px, 4vw, 56px) clamp(54px, 6vw, 78px);
    color: var(--nl-ink);
    text-align: left;
    background:
        radial-gradient(ellipse at 83% 15%, rgba(174, 198, 255, .52), transparent 34%),
        radial-gradient(ellipse at 5% 90%, rgba(218, 231, 255, .72), transparent 32%),
        linear-gradient(135deg, #fbfcff 0%, #f1f5ff 58%, #f6f8fc 100%);
}
#notaryScreen .notary-hero-inner {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
    align-items: center;
    gap: clamp(38px, 6vw, 82px);
}
#notaryScreen .notary-hero-copy { min-width: 0; }
#notaryScreen .notary-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px 12px;
    border: 1px solid #d8e1f8;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #4e5f85;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: none;
}
#notaryScreen .notary-hero-badge i { color: var(--nl-accent); }
#notaryScreen .notary-hero-title {
    display: block;
    max-width: 670px;
    margin: 0 0 19px;
    color: #132440;
    font-size: clamp(44px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.035;
    letter-spacing: -.055em;
}
#notaryScreen .notary-hero-title span {
    color: #435ce3;
    background: linear-gradient(100deg, #4059dc 0%, #3c69dc 62%, #1689bd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#notaryScreen .notary-hero-subtitle {
    max-width: 590px;
    margin: 0 0 25px;
    color: #56657c;
    font-size: 18px;
    line-height: 1.75;
}
#notaryScreen .notary-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 0 0 10px; }
#notaryScreen .notary-btn-hero {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    cursor: pointer;
}
#notaryScreen .notary-btn-hero-primary {
    background: linear-gradient(135deg, #465ce4, #3f6fe0);
    color: #fff;
    box-shadow: 0 8px 20px rgba(63, 92, 220, .24);
}
#notaryScreen .notary-btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(63, 92, 220, .3); }
#notaryScreen .notary-btn-hero-secondary { border-color: #dce3f0; background: rgba(255, 255, 255, .72); color: #34445f; }
#notaryScreen .notary-btn-hero-secondary:hover { border-color: #aebcf2; background: #fff; color: var(--nl-accent); }
#notaryScreen .notary-hero-create-link {
    padding: 5px 0;
    border: 0;
    background: none;
    color: var(--nl-accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
#notaryScreen .notary-hero-create-link:hover { color: var(--nl-accent-dark); text-decoration: underline; }
#notaryScreen .notary-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    max-width: 560px;
    margin-top: 29px;
    padding-top: 21px;
    border-top: 1px solid #dbe3f1;
}
#notaryScreen .notary-hero-stats > div { display: grid; gap: 2px; }
#notaryScreen .notary-hero-stats strong { color: #20385f; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
#notaryScreen .notary-hero-stats span { color: #697992; font-size: 12px; font-weight: 600; }
#notaryScreen .notary-hero-footnote { max-width: 560px; margin: 12px 0 0; color: #77849a; font-size: 11px; line-height: 1.55; }

#notaryScreen .notary-workspace-preview {
    width: 100%;
    padding: clamp(20px, 2.7vw, 31px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 23px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 24px 65px rgba(37, 58, 112, .14), 0 3px 12px rgba(37, 58, 112, .05);
    backdrop-filter: blur(16px);
}
#notaryScreen .notary-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
#notaryScreen .notary-preview-eyebrow,
#notaryScreen .notary-plan-eyebrow,
#notaryScreen .notary-register-kicker { color: #71809a; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
#notaryScreen .notary-preview-heading h2 { margin: 7px 0 0; color: #1a2c4b; font-size: 22px; line-height: 1.25; letter-spacing: -.035em; }
#notaryScreen .notary-preview-sample { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: #eff8f5; color: #32836a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
#notaryScreen .notary-preview-sample i { font-size: 6px; }
#notaryScreen .notary-preview-step { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid #edf0f6; }
#notaryScreen .notary-preview-step-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #4c61dc; font-size: 15px; }
#notaryScreen .notary-preview-step:nth-of-type(3) .notary-preview-step-icon { background: #ecf7fb; color: #2082a8; }
#notaryScreen .notary-preview-step:nth-of-type(4) .notary-preview-step-icon { background: #f2efff; color: #7959c8; }
#notaryScreen .notary-preview-step > span:nth-child(2) { display: grid; gap: 4px; }
#notaryScreen .notary-preview-step strong { color: #243754; font-size: 13px; }
#notaryScreen .notary-preview-step small { color: #738199; font-size: 12px; }
#notaryScreen .notary-preview-step-num { color: #95a1b3; font-size: 10px; font-weight: 800; }
#notaryScreen .notary-preview-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid #e4e9f3; border-radius: 12px; background: #f8faff; color: #68778f; font-size: 12px; line-height: 1.55; }
#notaryScreen .notary-preview-note i { margin-top: 2px; color: #4e67d9; }

#notaryScreen .notary-landing-main { display: block; background: var(--nl-bg); }
#notaryScreen .notary-landing-section {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(58px, 7vw, 88px) clamp(20px, 3vw, 30px);
    scroll-margin-top: 96px;
}
#notaryScreen .notary-section-tinted {
    width: 100%;
    max-width: none;
    padding-left: max(20px, calc((100% - 1120px) / 2));
    padding-right: max(20px, calc((100% - 1120px) / 2));
    background: #eef2f9;
    border-top: 1px solid #e5eaf3;
    border-bottom: 1px solid #e5eaf3;
}
#notaryScreen .notary-section-head { max-width: 740px; margin: 0 auto 36px; text-align: center; }
#notaryScreen .notary-section-tag { margin-bottom: 10px; color: var(--nl-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
#notaryScreen .notary-section-title { margin: 0 0 12px; color: #172946; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.13; letter-spacing: -.045em; }
#notaryScreen .notary-section-sub { max-width: 680px; margin: 0 auto; color: #65748b; font-size: 16px; line-height: 1.7; }
#notaryScreen .notary-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
#notaryScreen .notary-feat-card {
    min-height: 220px;
    padding: 22px 20px;
    border: 1px solid #e4e9f2;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(25, 43, 77, .035);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#notaryScreen .notary-feat-card:hover { transform: translateY(-3px); border-color: #c4d0f6; box-shadow: 0 13px 28px rgba(36, 58, 106, .09); }
#notaryScreen .notary-feat-icon { width: 42px; height: 42px; margin-bottom: 18px; border-radius: 13px; background: #eef2ff; color: #4d61dc; font-size: 16px; }
#notaryScreen .notary-feat-title { margin: 0 0 9px; color: #1b2e4b; font-size: 17px; font-weight: 750; line-height: 1.35; }
#notaryScreen .notary-feat-desc { margin: 0; color: #6b7890; font-size: 13px; line-height: 1.7; }
#notaryScreen .notary-workflow-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(13px, 3vw, 37px);
    margin: 24px 0 0;
    padding: 18px 22px;
    border: 1px solid #e0e6f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .7);
}
#notaryScreen .notary-workflow-strip > div { display: grid; grid-template-columns: 29px auto; align-items: center; gap: 0 10px; }
#notaryScreen .notary-workflow-strip > div > span { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #e8edff; color: #4960dc; font-size: 10px; font-weight: 800; }
#notaryScreen .notary-workflow-strip strong { color: #253855; font-size: 14px; }
#notaryScreen .notary-workflow-strip small { color: #75839a; font-size: 12px; }
#notaryScreen .notary-workflow-strip > i { color: #a5b0c1; font-size: 12px; }

#notaryScreen .notary-template-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 17px; }
#notaryScreen .notary-template-search { width: min(470px, 100%); min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid #dce3ee; border-radius: 12px; background: #fff; color: #77859a; box-shadow: 0 3px 10px rgba(25, 43, 77, .035); }
#notaryScreen .notary-template-search:focus-within { border-color: #8596ea; box-shadow: 0 0 0 3px rgba(69, 92, 226, .1); }
#notaryScreen .notary-template-search input { width: 100%; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: #243653; font-size: 14px; }
#notaryScreen .notary-template-search input::placeholder { color: #97a3b5; }
#notaryScreen .notary-template-count { color: #66758c; font-size: 13px; font-weight: 700; white-space: nowrap; }
#notaryScreen .notary-template-count span { padding: 0 4px; color: #abb5c3; }
#notaryScreen .notary-category-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
#notaryScreen .notary-category-filters .notary-cat-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dce3ee;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: #596981;
    font-size: 12px;
    font-weight: 700;
}
#notaryScreen .notary-category-filters .notary-cat-pill span { color: #8b98ab; font-size: 10px; }
#notaryScreen .notary-category-filters .notary-cat-pill.active { border-color: #9caaf0; background: #e8edff; color: #3e56cd; box-shadow: inset 0 0 0 1px rgba(69, 92, 226, .06); }
#notaryScreen .notary-category-filters .notary-cat-pill.active span { color: #4a60d1; }
#notaryScreen .notary-template-results-meta { margin: 0 0 13px; color: #748198; font-size: 12px; }
#notaryScreen .notary-template-results-meta strong { color: #34445f; }
#notaryScreen .notary-landing-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
#notaryScreen .notary-landing-template-card { min-width: 0; min-height: 210px; display: flex; flex-direction: column; padding: 20px; border: 1px solid #e1e7f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(25, 43, 77, .035); }
#notaryScreen .notary-template-card-meta { display: flex; justify-content: space-between; gap: 10px; color: #6d7d96; font-size: 10px; font-weight: 700; }
#notaryScreen .notary-template-card-meta span:first-child { color: #4b60d7; }
#notaryScreen .notary-landing-template-card h3 { margin: 14px 0 8px; color: #1d304d; font-size: 17px; line-height: 1.35; }
#notaryScreen .notary-landing-template-card p { margin: 0 0 15px; color: #718097; font-size: 12px; line-height: 1.65; }
#notaryScreen .notary-template-use { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 7px 0; border: 0; background: none; color: #465ed5; font-size: 13px; font-weight: 800; cursor: pointer; }
#notaryScreen .notary-template-use:hover { color: #2f46b9; }
#notaryScreen .notary-template-more { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; padding: 16px 18px; border: 1px solid #dfe5ef; border-radius: 14px; background: rgba(255, 255, 255, .72); }
#notaryScreen .notary-template-more > span { color: #66758b; font-size: 13px; line-height: 1.55; }
#notaryScreen .notary-template-more .notary-btn-hero { min-height: 40px; flex: 0 0 auto; font-size: 12px; }
#notaryScreen .notary-template-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px dashed #cdd7e6; border-radius: 16px; background: rgba(255,255,255,.65); color: #77859b; text-align: center; }
#notaryScreen .notary-template-empty i { color: #7083e3; font-size: 20px; }
#notaryScreen .notary-template-empty strong { color: #35445d; font-size: 14px; }
#notaryScreen .notary-template-empty span { font-size: 12px; }
#notaryScreen .notary-template-access-note { display: flex; align-items: flex-start; gap: 8px; max-width: 820px; margin: 17px auto 0; color: #758299; font-size: 12px; line-height: 1.6; text-align: center; }
#notaryScreen .notary-template-access-note i { flex: 0 0 auto; margin-top: 2px; color: #6075d8; }

#notaryScreen .notary-register-card { padding: clamp(18px, 3vw, 30px); border: 1px solid #e0e6f0; border-radius: 20px; background: #fff; box-shadow: 0 12px 34px rgba(25, 43, 77, .06); }
#notaryScreen .notary-register-card-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 21px; }
#notaryScreen .notary-register-card-head h3 { margin: 7px 0 5px; color: #1c2f4d; font-size: 21px; letter-spacing: -.025em; }
#notaryScreen .notary-register-card-head p { max-width: 620px; margin: 0; color: #718097; font-size: 13px; line-height: 1.6; }
#notaryScreen .notary-register-card-head .notary-btn-hero { min-height: 42px; flex: 0 0 auto; font-size: 13px; }
#notaryScreen .notary-register-table-wrap { max-width: 100%; overflow: auto; border: 1px solid #e0e6ef; border-radius: 12px; scrollbar-color: #c4cee0 transparent; }
#notaryScreen .notary-register-table { width: 1560px; border-collapse: separate; border-spacing: 0; color: #465671; font-size: 12px; }
#notaryScreen .notary-register-table th { min-width: 118px; padding: 12px 11px; border-right: 1px solid #e1e7f0; border-bottom: 1px solid #dce3ee; background: #f2f5fb; color: #33445f; font-size: 11px; line-height: 1.45; text-align: left; vertical-align: bottom; }
#notaryScreen .notary-register-table th:first-child { min-width: 75px; }
#notaryScreen .notary-register-table td { padding: 13px 11px; border-right: 1px solid #edf0f5; color: #69778d; line-height: 1.45; white-space: nowrap; }
#notaryScreen .notary-register-table th:last-child,
#notaryScreen .notary-register-table td:last-child { border-right: 0; }
#notaryScreen .notary-register-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #8290a5; font-size: 11px; }
#notaryScreen .notary-register-source a { display: inline-flex; align-items: center; gap: 7px; color: #4c60d2; font-weight: 700; text-decoration: none; }
#notaryScreen .notary-register-source a:hover { text-decoration: underline; }

#notaryScreen .notary-section-pricing { padding-bottom: 66px; }
#notaryScreen .notary-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 940px; }
#notaryScreen .notary-plan-card { min-width: 0; padding: 27px; border: 1px solid #dfe5ef; border-radius: 19px; background: #fff; box-shadow: 0 7px 24px rgba(25, 43, 77, .05); }
#notaryScreen .notary-plan-card.featured { border: 1.5px solid #8292e8; background: linear-gradient(180deg, #fff, #fbfcff); box-shadow: 0 13px 34px rgba(63, 82, 181, .12); }
#notaryScreen .notary-plan-badge { top: -12px; right: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #435bd8; font-size: 10px; letter-spacing: .035em; }
#notaryScreen .notary-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#notaryScreen .notary-plan-heading h3 { margin: 6px 0 0; color: #1c2f4d; font-size: 22px; letter-spacing: -.03em; }
#notaryScreen .notary-plan-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #4b61dc; font-size: 14px; }
#notaryScreen .notary-plan-description { min-height: 42px; margin: 14px 0 2px; color: #6e7c92; font-size: 13px; line-height: 1.6; }
#notaryScreen .notary-plan-price { margin: 12px 0 17px; color: #182b49; font-size: 42px; line-height: 1; letter-spacing: -.055em; }
#notaryScreen .notary-plan-price span { color: #7b879a; font-size: 12px; font-weight: 600; letter-spacing: 0; }
#notaryScreen .notary-plan-features { margin: 0 0 21px; }
#notaryScreen .notary-plan-features li { align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid #eff2f7; color: #53627a; font-size: 12px; line-height: 1.5; }
#notaryScreen .notary-plan-features li i { flex: 0 0 auto; margin-top: 2px; color: #398d71; font-size: 10px; }
#notaryScreen .notary-plan-cta { min-height: 46px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #d5ddea; border-radius: 11px; font-size: 14px; font-weight: 800; cursor: pointer; transition: .18s ease; }
#notaryScreen .notary-plan-cta-secondary { background: #fff; color: #354862; }
#notaryScreen .notary-plan-cta-secondary:hover { border-color: #9cabea; color: #425bd1; }
#notaryScreen .notary-plan-cta-primary { border-color: transparent; background: #465ddd; color: #fff; box-shadow: 0 6px 15px rgba(69, 92, 226, .2); }
#notaryScreen .notary-plan-cta-primary:hover { background: #344bc9; transform: translateY(-1px); }
#notaryScreen .notary-pricing-note { max-width: 780px; display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 21px auto 0; color: #77849a; font-size: 12px; line-height: 1.65; text-align: center; }
#notaryScreen .notary-pricing-note i { flex: 0 0 auto; margin-top: 2px; color: #6578d9; }

#notaryScreen .notary-faq-list { max-width: 830px; display: grid; gap: 10px; margin: 0 auto; }
#notaryScreen .notary-faq-item { overflow: hidden; border: 1px solid #dfe5ef; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(25, 43, 77, .025); }
#notaryScreen .notary-faq-item summary { position: relative; padding: 17px 46px 17px 18px; color: #263955; font-size: 14px; font-weight: 750; cursor: pointer; list-style: none; }
#notaryScreen .notary-faq-item summary::-webkit-details-marker { display: none; }
#notaryScreen .notary-faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #eef2ff; color: #4b60d5; font-size: 16px; line-height: 1; transform: translateY(-50%); }
#notaryScreen .notary-faq-item[open] summary::after { content: '−'; }
#notaryScreen .notary-faq-item p { margin: 0; padding: 0 18px 17px; color: #6b7890; font-size: 13px; line-height: 1.75; }

#notaryScreen .notary-landing-footer { padding: 32px clamp(20px, 4vw, 56px) 20px; background: #111b32; color: #c3cee0; }
body:has(#notaryScreen:not(.hidden)) #coCounselToggleBtn { display: none !important; }
#notaryScreen .notary-footer-main { width: min(1120px, 100%); display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 24px; margin: 0 auto; padding-bottom: 21px; border-bottom: 1px solid rgba(255,255,255,.1); }
#notaryScreen .notary-footer-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
#notaryScreen .notary-footer-brand .notary-brand-icon { width: 36px; height: 36px; flex-basis: 36px; border: 0; background: #29375a; color: #c7d2fe; }
#notaryScreen .notary-footer-brand strong { color: #fff; font-size: 14px; }
#notaryScreen .notary-footer-brand strong span { color: #aab9ff; }
#notaryScreen .notary-footer-main > p { max-width: 360px; margin: 0; color: #a9b6cb; font-size: 12px; line-height: 1.6; }
#notaryScreen .notary-footer-main nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
#notaryScreen .notary-footer-main nav a,
#notaryScreen .notary-footer-main nav button { padding: 0; border: 0; background: none; color: #d3dced; font-size: 12px; font-weight: 650; text-decoration: none; cursor: pointer; }
#notaryScreen .notary-footer-main nav a:hover,
#notaryScreen .notary-footer-main nav button:hover { color: #fff; text-decoration: underline; }
#notaryScreen .notary-footer-legal { width: min(1120px, 100%); margin: 15px auto 0; color: #8795ad; font-size: 11px; line-height: 1.6; }

[data-theme="dark"] #notaryScreen .notary-landing-page {
    --nl-bg: #0c1425;
    --nl-surface: #141e33;
    --nl-ink: #e7edfa;
    --nl-muted: #aab8d0;
    --nl-line: #293750;
    --nl-soft: #1a2740;
    background: var(--nl-bg);
    color: var(--nl-ink);
}
[data-theme="dark"] #notaryScreen .notary-landing-nav { background: rgba(15, 24, 42, .96); border-bottom-color: #293750; }
[data-theme="dark"] #notaryScreen .notary-brand-title,
[data-theme="dark"] #notaryScreen .notary-hero-title,
[data-theme="dark"] #notaryScreen .notary-section-title,
[data-theme="dark"] #notaryScreen .notary-preview-heading h2,
[data-theme="dark"] #notaryScreen .notary-preview-step strong,
[data-theme="dark"] #notaryScreen .notary-feat-title,
[data-theme="dark"] #notaryScreen .notary-landing-template-card h3,
[data-theme="dark"] #notaryScreen .notary-register-card-head h3,
[data-theme="dark"] #notaryScreen .notary-plan-heading h3,
[data-theme="dark"] #notaryScreen .notary-plan-price,
[data-theme="dark"] #notaryScreen .notary-faq-item summary { color: #e7edfa; }
[data-theme="dark"] #notaryScreen .notary-brand-caption,
[data-theme="dark"] #notaryScreen .notary-nav-link,
[data-theme="dark"] #notaryScreen .notary-nav-login,
[data-theme="dark"] #notaryScreen .notary-hero-subtitle,
[data-theme="dark"] #notaryScreen .notary-hero-stats span,
[data-theme="dark"] #notaryScreen .notary-hero-footnote,
[data-theme="dark"] #notaryScreen .notary-preview-step small,
[data-theme="dark"] #notaryScreen .notary-section-sub,
[data-theme="dark"] #notaryScreen .notary-feat-desc,
[data-theme="dark"] #notaryScreen .notary-template-more > span,
[data-theme="dark"] #notaryScreen .notary-register-card-head p,
[data-theme="dark"] #notaryScreen .notary-faq-item p { color: #aab8d0; }
[data-theme="dark"] #notaryScreen .notary-landing-hero { background: radial-gradient(ellipse at 83% 15%, rgba(55, 76, 142, .45), transparent 34%), linear-gradient(135deg, #111b30, #16233c 65%, #101a2e); }
[data-theme="dark"] #notaryScreen .notary-hero-badge,
[data-theme="dark"] #notaryScreen .notary-workspace-preview,
[data-theme="dark"] #notaryScreen .notary-register-card,
[data-theme="dark"] #notaryScreen .notary-feat-card,
[data-theme="dark"] #notaryScreen .notary-landing-template-card,
[data-theme="dark"] #notaryScreen .notary-plan-card,
[data-theme="dark"] #notaryScreen .notary-plan-card.featured,
[data-theme="dark"] #notaryScreen .notary-faq-item { background: #141e33; border-color: #293750; }
[data-theme="dark"] #notaryScreen .notary-section-tinted { background: #101a2e; border-color: #293750; }
[data-theme="dark"] #notaryScreen .notary-template-search,
[data-theme="dark"] #notaryScreen .notary-category-filters .notary-cat-pill,
[data-theme="dark"] #notaryScreen .notary-template-more,
[data-theme="dark"] #notaryScreen .notary-workflow-strip { background: #141e33; border-color: #293750; }
[data-theme="dark"] #notaryScreen .notary-template-search input { color: #e7edfa; }
[data-theme="dark"] #notaryScreen .notary-category-filters .notary-cat-pill { color: #bec9db; }
[data-theme="dark"] #notaryScreen .notary-category-filters .notary-cat-pill.active { background: #202e4d; border-color: #5167c8; color: #dce3ff; }
[data-theme="dark"] #notaryScreen .notary-register-table th { background: #202c42; border-color: #34435e; color: #dce5f4; }
[data-theme="dark"] #notaryScreen .notary-register-table td { border-color: #27354d; color: #b5c2d6; }
[data-theme="dark"] #notaryScreen .notary-template-use,
[data-theme="dark"] #notaryScreen .notary-register-source a { color: #aab8ff; }
[data-theme="dark"] #notaryScreen .notary-plan-cta-secondary { background: #1a2740; border-color: #3a4963; color: #dce5f4; }

@media (max-width: 1060px) {
    #notaryScreen .notary-landing-nav { grid-template-columns: auto auto; }
    #notaryScreen .notary-nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding: 3px 0 2px; }
    #notaryScreen .notary-nav-actions { grid-column: 2; grid-row: 1; justify-self: end; }
    #notaryScreen .notary-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 30px; }
    #notaryScreen .notary-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    #notaryScreen .notary-head-ribbon { align-items: flex-start; padding: 7px 16px; font-size: 10px; }
    #notaryScreen .notary-head-ribbon > span { max-width: 70%; line-height: 1.4; }
    #notaryScreen .notary-landing-nav { gap: 7px 10px; min-height: 0; padding: 10px 15px 8px; }
    #notaryScreen .notary-brand-group { min-width: 0; gap: 8px; }
    #notaryScreen .notary-brand-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; font-size: 14px; }
    #notaryScreen .notary-brand-title { font-size: 16px; }
    #notaryScreen .notary-brand-caption { font-size: 10px; }
    #notaryScreen .notary-nav-actions { gap: 4px; }
    #notaryScreen .notary-nav-login,
    #notaryScreen .notary-nav-create { min-height: 38px; padding-inline: 9px; border-radius: 9px; font-size: 11px; }
    #notaryScreen .notary-nav-links { justify-content: flex-start; gap: 18px; overflow-x: auto; padding: 4px 2px 7px; scrollbar-width: none; }
    #notaryScreen .notary-nav-links::-webkit-scrollbar { display: none; }
    #notaryScreen .notary-nav-link { font-size: 12px; }
    #notaryScreen .notary-landing-hero { padding: 45px 18px 38px; }
    #notaryScreen .notary-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    #notaryScreen .notary-hero-copy { text-align: left; }
    #notaryScreen .notary-hero-badge { margin-bottom: 17px; font-size: 10px; }
    #notaryScreen .notary-hero-title { max-width: 560px; font-size: clamp(40px, 10.5vw, 56px); }
    #notaryScreen .notary-hero-subtitle { font-size: 16px; line-height: 1.7; }
    #notaryScreen .notary-hero-actions { align-items: stretch; }
    #notaryScreen .notary-btn-hero { min-height: 45px; padding-inline: 14px; font-size: 13px; }
    #notaryScreen .notary-hero-stats { gap: 8px; margin-top: 23px; padding-top: 16px; }
    #notaryScreen .notary-hero-stats strong { font-size: 17px; }
    #notaryScreen .notary-hero-stats span { font-size: 10px; line-height: 1.4; }
    #notaryScreen .notary-workspace-preview { padding: 19px; border-radius: 18px; }
    #notaryScreen .notary-preview-heading h2 { font-size: 20px; }
    #notaryScreen .notary-landing-section { padding: 54px 18px; scroll-margin-top: 112px; }
    #notaryScreen .notary-section-tinted { padding-left: 18px; padding-right: 18px; }
    #notaryScreen .notary-section-head { margin-bottom: 25px; }
    #notaryScreen .notary-section-title { font-size: 31px; }
    #notaryScreen .notary-section-sub { font-size: 14px; }
    #notaryScreen .notary-features-grid,
    #notaryScreen .notary-landing-template-grid,
    #notaryScreen .notary-pricing-grid { grid-template-columns: minmax(0, 1fr); }
    #notaryScreen .notary-feat-card { min-height: 0; padding: 19px; }
    #notaryScreen .notary-feat-icon { margin-bottom: 13px; }
    #notaryScreen .notary-feat-desc { font-size: 13px; }
    #notaryScreen .notary-workflow-strip { align-items: stretch; flex-direction: column; gap: 11px; padding: 16px; }
    #notaryScreen .notary-workflow-strip > i { display: none; }
    #notaryScreen .notary-template-tools { align-items: stretch; flex-direction: column; gap: 9px; }
    #notaryScreen .notary-template-count { align-self: flex-end; }
    #notaryScreen .notary-category-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding: 0 18px 6px 0; scrollbar-width: thin; }
    #notaryScreen .notary-category-filters .notary-cat-pill { flex: 0 0 auto; }
    #notaryScreen .notary-template-more { align-items: flex-start; flex-direction: column; }
    #notaryScreen .notary-template-more .notary-btn-hero { width: 100%; }
    #notaryScreen .notary-register-card-head { align-items: flex-start; flex-direction: column; }
    #notaryScreen .notary-register-card-head .notary-btn-hero { width: 100%; }
    #notaryScreen .notary-register-source { align-items: flex-start; flex-direction: column; }
    #notaryScreen .notary-plan-card { padding: 23px 19px; }
    #notaryScreen .notary-plan-description { min-height: 0; }
    #notaryScreen .notary-faq-item summary { padding: 16px 43px 16px 15px; font-size: 13px; }
    #notaryScreen .notary-faq-item p { padding: 0 15px 15px; }
    #notaryScreen .notary-footer-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #notaryScreen .notary-footer-main nav { justify-content: flex-start; gap: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #notaryScreen .notary-landing-page *,
    #notaryScreen .notary-landing-page *::before,
    #notaryScreen .notary-landing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

#notaryScreen .notary-billing-page { max-width: 1120px; margin: 0 auto; }
#notaryScreen .notary-billing-header { display: grid; gap: 18px; margin: 4px 0 24px; }
#notaryScreen .notary-billing-heading { text-align: center; }
#notaryScreen .notary-billing-heading .notary-section-tag { display: inline-flex; }
#notaryScreen .notary-billing-heading h2 { margin: 9px 0 6px; color: #172849; font: 700 clamp(24px, 3vw, 32px)/1.2 'Outfit', sans-serif; letter-spacing: -.03em; }
#notaryScreen .notary-billing-heading p { margin: 0 auto; max-width: 620px; color: #718096; font-size: 13px; line-height: 1.65; }
#notaryScreen .notary-billing-current { display: flex; align-items: center; gap: 12px; width: min(100%, 760px); margin: 0 auto; padding: 13px 16px; border: 1px solid #dfe7f3; border-radius: 15px; background: linear-gradient(110deg, #fff, #f7f9ff); box-shadow: 0 8px 24px rgba(31, 52, 91, .06); }
#notaryScreen .notary-billing-current-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #edf2ff; color: #4f6fe1; }
#notaryScreen .notary-billing-current > span:nth-child(2) { display: grid; flex: 1; gap: 2px; min-width: 0; }
#notaryScreen .notary-billing-current small { color: #8290a6; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
#notaryScreen .notary-billing-current strong { overflow: hidden; color: #273955; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#notaryScreen .notary-billing-current > b { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #fff5e8; color: #a45b0b; font-size: 9px; letter-spacing: .06em; }
#notaryScreen .notary-billing-current > b.active { background: #eaf8f0; color: #168255; }
#notaryScreen .notary-billing-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; align-items: stretch; }
#notaryScreen .notary-billing-plan-grid .notary-plan-card { min-width: 0; padding: 26px; }
#notaryScreen .notary-billing-plan-grid .notary-plan-card h3 { font-size: 20px; }
#notaryScreen .notary-billing-plan-grid .notary-plan-price { margin: 16px 0; }
#notaryScreen .notary-billing-plan-grid .notary-plan-features { min-height: 170px; }
#notaryScreen .notary-billing-note { display: flex; gap: 9px; max-width: 980px; margin: 18px auto 0; padding: 13px 15px; border: 1px solid #dfe8f4; border-radius: 12px; background: #f8faff; color: #687991; font-size: 11px; line-height: 1.6; }
#notaryScreen .notary-billing-note > i { flex: 0 0 auto; margin-top: 2px; color: #5574df; }
#notaryScreen .notary-admin-plan-included { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 12px; border: 1px solid #bfe8d7; border-radius: 11px; background: #effbf5; color: #168255; font-size: 11px; font-weight: 800; }
#notaryScreen .notary-home-plans-action { border-color: rgba(83, 110, 219, .34); color: #3e5ec7; }
#notaryScreen .notary-home-plans-action:hover { background: #eef2ff; }
[data-theme="dark"] #notaryScreen .notary-billing-heading h2 { color: #ecf2ff; }
[data-theme="dark"] #notaryScreen .notary-billing-heading p { color: #a4b2c9; }
[data-theme="dark"] #notaryScreen .notary-billing-current { border-color: #354461; background: linear-gradient(110deg, #1b273d, #202e49); }
[data-theme="dark"] #notaryScreen .notary-billing-current strong { color: #e0e9fa; }
[data-theme="dark"] #notaryScreen .notary-billing-current-icon { background: #2b3a5a; color: #a9b8ff; }
[data-theme="dark"] #notaryScreen .notary-billing-note { border-color: #354461; background: #1b273d; color: #a4b2c9; }
[data-theme="dark"] #notaryScreen .notary-admin-plan-included { border-color: #2d6754; background: #18362e; color: #7de0b3; }
[data-theme="dark"] #notaryScreen .notary-home-plans-action { color: #c6d1ff; border-color: #475a89; }
[data-theme="dark"] #notaryScreen .notary-home-plans-action:hover { background: #263550; }
@media (max-width: 680px) {
    #notaryScreen .notary-billing-plan-grid { grid-template-columns: minmax(0, 1fr); }
    #notaryScreen .notary-billing-plan-grid .notary-plan-card { padding: 22px; }
    #notaryScreen .notary-billing-plan-grid .notary-plan-features { min-height: 0; }
    #notaryScreen .notary-billing-current { align-items: flex-start; flex-wrap: wrap; }
    #notaryScreen .notary-billing-current > b { margin-left: 52px; }
}