:root {
    /* Brand & State Colors */
    --primary: #0091ff;
    --primary-hover: #0077d6;
    --primary-light: rgba(0, 145, 255, 0.08);
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.08);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.08);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.08);
    
    /* Transitions & Borders */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Themes Mapping (Default: Light Theme) */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f1f5f9;
    --border: #e2e8f0;
    --text-white: #0f172a; /* text-white becomes dark slate in light theme! */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    
    /* Adapt legacy variables to preserve existing styles */
    --card-bg: #ffffff;
    --bg-workspace: #f8fafc;
    --bg-dark: #ffffff;
    --bg-light: #f1f5f9;
}

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

body {
    background-color: var(--bg-workspace);
    color: var(--text-white);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

body, 
.sidebar-column, 
.fields-sidebar-column, 
.card, 
.welcome-card,
.input-group input, 
.input-group textarea, 
.input-group select, 
.custom-select-trigger, 
.custom-select-menu, 
.custom-select-option, 
.menu-item, 
.tab-btn, 
.accordion-trigger, 
.accordion-content,
header,
main,
aside {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Background Blobs */
.background-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.blob {
    position: absolute;
    filter: blur(100px);
    opacity: 0.25;
    border-radius: 50%;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #4f46e5 0%, transparent 70%);
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, #ec4899 0%, transparent 70%);
}

/* Common Views Container */
.view-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* Print-only document container — never visible on screen */
#print-document-root {
    display: none;
}

/* 1. LOGIN PORTAL STYLE */
#login-view {
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: none;
    animation: fadeIn 0.4s ease-out;
}

.login-logo-icon {
    font-size: 3rem;
    color: #6366f1;
    margin-bottom: 0.75rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h2 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-white);
}

.login-header h2 span {
    color: #6366f1;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.login-btn {
    width: 100%;
    padding: 0.9rem !important;
    font-size: 0.95rem !important;
    margin-top: 1.5rem;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    padding: 0.75rem;
    margin-top: 1rem;
    text-align: center;
}

.demo-logins {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

.demo-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.75rem;
    text-align: center;
}

.demo-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-demo {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-white);
    border: 1px solid var(--border);
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-demo:hover {
    background: var(--primary-light);
    border-color: #6366f1;
    transform: translateX(3px);
}

/* 2. ADMIN DASHBOARD LAYOUT */
.admin-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-dark);
}

.admin-sidebar {
    background-color: #0b0f19;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 1.75rem;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
}

.admin-sidebar .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.admin-sidebar .logo i {
    font-size: 2rem;
    color: #6366f1;
}

.admin-sidebar h1 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
}

.admin-sidebar h1 span {
    color: #6366f1;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.9rem 1.25rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
    width: 100%;
}

.nav-item:hover {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
    color: #ffffff;
    background: var(--primary);
}

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-light);
    color: #818cf8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
}

.profile-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-logout {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    padding: 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* Admin Content Area */
.admin-content {
    background-color: var(--bg-workspace);
    padding: 3rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.tab-panel {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-header {
    margin-bottom: 2.5rem;
}

.panel-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 0.4rem;
}

.panel-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--shadow);
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
    min-width: 900px;
}

.data-table th {
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    padding: 1.2rem 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    border-bottom: 1px solid var(--border);
    padding: 1.2rem 1.5rem;
    color: var(--text-main);
    vertical-align: middle;
}

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

.data-table tbody tr {
    transition: background 0.2s;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.status-badge.signed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Link copy widget */
.link-share-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-input);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    max-width: 280px;
}

.link-share-box span {
    font-family: monospace;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #818cf8;
    flex: 1;
}

.btn-copy-link {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem;
    transition: color 0.2s;
}

.btn-copy-link:hover {
    color: var(--text-white);
}

.btn-delete-row {
    background: transparent;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-delete-row:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Create Contract Tab Style */
.create-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 650px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.form-row {
    margin-bottom: 1.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.submit-btn {
    width: 100%;
    padding: 0.95rem !important;
    font-size: 0.95rem !important;
    cursor: pointer;
}

/* Success notification block */
.success-alert {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    margin-top: 1.75rem;
    color: var(--success);
    animation: slideDown 0.3s ease-out;
}

.success-alert i {
    font-size: 1.5rem;
    margin-top: 0.15rem;
}

.alert-content h4 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    color: var(--success);
}

.alert-content p {
    font-size: 0.85rem;
    color: #a7f3d0;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.link-copy-box {
    display: flex;
    gap: 0.5rem;
}

.link-copy-box input {
    background: var(--bg-input);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: monospace;
    width: 100%;
}

.btn-copy {
    background: var(--success);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-copy:hover {
    background: #059669;
}

/* 3. SIGNER PORTAL / SPLIT SCREEN VIEW */
.app-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    height: 100vh;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    overflow: hidden;
}

.contract-column {
    background-color: var(--bg-light);
    overflow-y: auto;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: thin;
}

.contract-paper-wrapper {
    width: 100%;
    max-width: 800px;
}

.contract-paper {
    background: var(--bg-card);
    color: var(--text-main);
    width: 100%;
    min-height: 1120px;
    padding: 4.5rem 4.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 8px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    position: relative;
}

/* Signer Top Portal return link */
.signer-top-nav {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
}

.btn-back-to-portal {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-back-to-portal:hover {
    background: var(--bg-input);
    color: var(--text-main);
    border-color: var(--text-muted);
}

/* Document content styles */
.doc-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.doc-header h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    color: var(--text-main);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.doc-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.doc-body p {
    margin-bottom: 1.2rem;
    text-align: justify;
    color: var(--text-main);
}

.doc-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    color: var(--text-main);
}

/* Live fields sync */
.doc-field {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.doc-field.empty {
    background-color: var(--danger-light);
    color: #c2410c;
    border-bottom: 1px dashed var(--danger);
    font-weight: normal;
    font-style: italic;
}

.doc-field.filled {
    background-color: var(--success-light);
    color: #166534;
    border-bottom: 1.5px solid var(--success);
}

.doc-field.highlight-pulse {
    animation: fieldPulse 0.8s ease-out;
}

@keyframes fieldPulse {
    0% { background-color: #4ade80; color: white; transform: scale(1.05); }
    100% { background-color: var(--success-light); color: #166534; transform: scale(1); }
}

/* Signatures block inside paper */
.doc-signatures {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-top: 3.5rem;
    border-top: 2px solid #f1f5f9;
    padding-top: 2rem;
}

.signature-block {
    flex: 1;
    position: relative;
    min-height: 140px;
}

.sig-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.sig-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 1rem;
}

/* Digital stamp blocks */
.sign-stamp {
    position: absolute;
    top: 2.5rem;
    left: 1rem;
    border: 2px dashed #94a3b8;
    color: var(--text-muted);
    background-color: rgba(248, 250, 252, 0.98);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    width: 250px;
    font-size: 0.75rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0.12;
    transform: scale(0.95) rotate(-1deg);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sign-stamp.signed {
    border-color: #2563eb;
    color: #1e40af;
    opacity: 1;
    transform: scale(1) rotate(-3deg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.sign-stamp.signed-tenant {
    border-color: var(--success);
    color: #166534;
    opacity: 1;
    transform: scale(1) rotate(2deg);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.stamp-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2rem;
}

.stamp-body .stamp-info {
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.stamp-body .stamp-email, .stamp-body .stamp-phone {
    font-family: monospace;
}

/* Sidebar Panel for Signer */
.sidebar-column {
    background-color: var(--bg-app);
    color: var(--text-main);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 2.5rem 2rem;
    scrollbar-width: thin;
}

.sidebar-header {
    margin-bottom: 2rem;
}

.sidebar-header .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sidebar-header .logo i {
    font-size: 2rem;
    color: #6366f1;
}

.sidebar-header h1 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-white);
}

.sidebar-header h1 span {
    color: #6366f1;
}

.sidebar-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Cards style */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
}

.card-header i {
    font-size: 1.2rem;
    color: #818cf8;
}

.card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-white);
}

/* Upload zone */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--bg-input);
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.cloud-icon {
    font-size: 2.5rem;
    color: #818cf8;
    margin-bottom: 0.75rem;
    transition: transform 0.3s ease;
}

.upload-zone:hover .cloud-icon {
    transform: translateY(-4px);
}

.upload-content p {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.link-btn {
    color: #818cf8;
    font-weight: 600;
    text-decoration: underline;
}

/* OCR scanning indicators */
.scan-status {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.image-preview-box {
    position: relative;
    max-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.image-preview-box img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.scanning-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #6366f1;
    box-shadow: 0 0 12px 3px #6366f1;
    animation: scan 2s linear infinite;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #818cf8;
}

.loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    border-top-color: #6366f1;
    animation: spin 1s linear infinite;
}

/* Forms & inputs */
.details-form .input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.input-group.full-width {
    grid-column: span 2;
}

.input-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.input-group input, .input-group textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: var(--text-main);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 100%;
}

.input-group input:focus, .input-group textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    background-color: var(--bg-card);
}

/* Action panel buttons */
.sign-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sign-actions button, .otp-input-row button {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    outline: none;
    flex: 1.5;
    box-shadow: 0 4px 6px -1px rgba(0, 145, 255, 0.1), 0 2px 4px -1px rgba(0, 145, 255, 0.06);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 145, 255, 0.25), 0 4px 6px -2px rgba(0, 145, 255, 0.15);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px -1px rgba(0, 145, 255, 0.1);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    outline: none;
    flex: 1;
}

.btn-secondary:hover {
    background-color: var(--bg-input);
    border-color: var(--text-muted);
}

.btn-secondary:active {
    transform: translateY(1px);
}

.btn-secondary:focus-visible {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-muted);
}

/* OTP verification */
.otp-verification {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1rem;
    animation: slideDown 0.3s ease-out;
}

.otp-verification p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.otp-input-row {
    display: flex;
    gap: 0.75rem;
}

.otp-input-row input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    color: var(--text-main);
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-align: center;
    font-weight: bold;
    flex: 1;
}

.btn-success {
    background-color: var(--success);
    color: white;
    flex: 1.2;
}

.btn-success:hover {
    background-color: #059669;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Responsive grid stacking */
@media (max-width: 1200px) {
    .admin-layout {
        grid-template-columns: 240px 1fr;
    }
}

@media (max-width: 1024px) {
    .admin-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .admin-sidebar {
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 1.5rem;
    }
    
    .admin-sidebar .logo {
        margin-bottom: 1rem;
    }
    
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .nav-item {
        width: auto;
        padding: 0.6rem 1rem;
    }
    
    .sidebar-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: none;
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid var(--border);
    }
    
    .app-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
    }
    
    .contract-column {
        height: auto;
        overflow-y: visible;
        padding: 2rem 1rem;
    }
    
    .sidebar-column {
        height: auto;
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 2rem 1rem;
    }
    
    .contract-paper {
        padding: 2.5rem 2rem;
        min-height: auto;
    }

    .view-container {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .app-shell {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .dashboard-content {
        padding: 1.5rem 1rem;
        height: auto;
        overflow-y: visible;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .editor-workspace {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
    }

    .document-editor-column {
        border-right: none;
        height: auto;
        overflow-y: visible;
    }

    .editor-paper-container {
        padding: 1rem;
        height: auto;
        overflow-y: visible;
    }

    .editor-paper {
        padding: 2rem 1.5rem;
        min-height: auto;
    }

    .fields-sidebar-column {
        border-left: none;
        border-top: 1px solid var(--border);
        height: auto;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    .admin-content {
        padding: 1.5rem;
    }
    
    .sidebar-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .details-form .input-grid, .form-grid {
        grid-template-columns: 1fr;
    }
    
    .input-group.full-width {
        grid-column: span 1;
    }
    
    .doc-signatures {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ==========================================================================
   DOCS DESIGN SYSTEM & LIGHT THEME STYLES
   ========================================================================== */

/* Layout & Top Navbar */
.app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    flex-shrink: 0;
    flex-grow: 1;
    background-color: var(--bg-app);
    color: var(--text-main);
    overflow: hidden;
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border);
    height: 64px;
    z-index: 10;
}

.header-left {
    flex: 1 1 0%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-left .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(from 180deg at 50% 50%, #0091ff 0deg, #0055ff 360deg);
}

.header-left h2 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.top-menu {
    display: flex;
    gap: 1.5rem;
}

.menu-item {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    position: relative;
    transition: color 0.2s;
}

.menu-item:hover {
    color: var(--text-main);
}

.menu-item.active {
    color: #0091ff;
}

.menu-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0091ff;
    border-radius: 2px;
}

.header-right {
    flex: 1 1 0%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--bg-input);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.badge-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fed7aa;
    color: #ea580c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-info {
    display: flex;
    flex-direction: column;
}

.badge-company {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.badge-balance {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-logout-icon {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.btn-logout-icon:hover {
    transform: scale(1.15);
}

/* Dashboard Container Styles */
.dashboard-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 3rem;
    background-color: var(--bg-input);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

.templates-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    background-color: var(--border);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.search-box input:focus {
    background-color: var(--bg-card);
    border-color: #0091ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 145, 255, 0.15);
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-outline-blue {
    background: transparent;
    color: #0091ff;
    border: 1.5px solid #0091ff;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline-blue:hover {
    background-color: rgba(0, 145, 255, 0.05);
}

.btn-filled-blue {
    background-color: #0091ff;
    color: #ffffff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filled-blue:hover {
    background-color: #0077d6;
}

/* Template Card Items */
.templates-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tpl-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.tpl-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--border);
}

.tpl-card-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tpl-card-left h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.tpl-card-left p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tpl-card-left span {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.tpl-card-right {
    position: relative;
}

.btn-more-dots {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
}

.btn-more-dots:hover {
    background-color: var(--bg-input);
    color: var(--text-main);
}

/* Template dropdown menu */
.tpl-dropdown-menu {
    position: absolute;
    right: 0;
    top: 2rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border-radius: 12px;
    z-index: 100;
    width: 180px;
    padding: 0.5rem;
    animation: fadeIn 0.15s ease-out;
}

.dropdown-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover {
    background-color: var(--bg-input);
    color: #0091ff;
}

.dropdown-item.delete-item {
    color: #ef4444;
}

.dropdown-item.delete-item:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Dashboard Sidebar welcome cards */
.welcome-card {
    background-color: var(--bg-card);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.welcome-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.instruction-block h4, .download-block h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.instruction-block p, .download-block p, .telegram-block p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.template-help-accordion {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background-color: var(--bg-card);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.template-help-accordion .accordion-trigger {
    min-height: 52px;
    padding: 0.95rem 1rem;
}

.template-help-accordion .accordion-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

.template-help-accordion.expanded .accordion-content {
    padding-bottom: 1rem;
    background-color: var(--bg-card);
}

.template-help-primary,
.template-help-secondary {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
    justify-content: center;
}

.template-help-primary {
    margin-top: 0.75rem;
}

.template-help-secondary-block {
    margin-top: 0.9rem;
}

.template-help-secondary {
    margin-top: 0.75rem;
    background-color: #e9edf5;
    border-color: transparent;
    color: #344054;
}

.download-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.download-link {
    background-color: var(--bg-input);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.telegram-block {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.btn-telegram {
    background-color: #e0f2fe;
    color: #0369a1;
    width: 100%;
    padding: 0.6rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* Add template modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-card {
    background-color: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 2.25rem;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close-btn {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background-color: var(--bg-input);
    color: var(--text-main);
}

.modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    padding-right: 2rem;
}

.modal-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.upload-template-form input {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-main);
}

.modal-drop-zone {
    border: 2px dashed #0091ff;
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    background-color: rgba(0, 145, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-drop-zone:hover {
    background-color: rgba(0, 145, 255, 0.08);
}

.ready-templates-section {
    margin-top: 1.75rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

.ready-templates-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.ready-group-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.ready-group-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.ready-templates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ready-template-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--bg-app);
}

.card-info h5 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
}

.card-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-add-preset {
    background-color: #0091ff;
    color: white;
    border: none;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-preset:hover {
    background-color: #0077d6;
}

/* Input grid helper */
.input-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.input-grid-2 input {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    width: 100%;
}

.input-grid-2 input:focus {
    outline: none;
    border-color: #0091ff;
    box-shadow: 0 0 0 2px rgba(0, 145, 255, 0.1);
}

.input-grid-2 label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* Template Editor layout styles */
.editor-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    height: 72px;
}

.subheader-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.editable-title-group, .editable-desc-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editable-title-group h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    border: 1px solid transparent;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.editable-title-group h2:focus, .editable-desc-group p:focus {
    border-color: var(--border);
    background-color: var(--bg-app);
    outline: none;
}

.editable-desc-group p {
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid transparent;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.edit-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.5;
    cursor: pointer;
}

.editable-title-group:hover .edit-icon, .editable-desc-group:hover .edit-icon {
    opacity: 1;
}

.subheader-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.toolbar-icon-row, .editor-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-circle-tool {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-circle-tool:hover {
    background-color: var(--border);
    color: var(--text-main);
}

/* Editor main workspace panels */
.editor-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    overflow: hidden;
    background-color: var(--bg-input);
}

.document-editor-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
}

.editor-formatting-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 1rem;
    height: 46px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.editor-formatting-toolbar::-webkit-scrollbar {
    height: 5px;
}
.editor-formatting-toolbar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.editor-formatting-toolbar > * {
    flex-shrink: 0;
}

.format-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s;
}

.format-btn:hover {
    background-color: var(--bg-input);
    color: var(--text-main);
}

.format-btn.active {
    background-color: #e0f2fe;
    color: #0091ff;
}

.toolbar-separator {
    width: 1px;
    height: 18px;
    background-color: var(--border);
    margin: 0 0.25rem;
}

/* Toolbar select dropdowns (font family / size) */
.toolbar-select {
    height: 28px;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-main);
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 0 0.4rem;
    cursor: pointer;
    max-width: 130px;
    transition: all 0.15s;
}

.toolbar-select.toolbar-select-sm {
    max-width: 100px;
}

.toolbar-select:hover {
    border-color: #0091ff;
}

.toolbar-select:focus {
    outline: none;
    border-color: #0091ff;
    box-shadow: 0 0 0 2px rgba(0, 145, 255, 0.15);
}

/* Text color picker button */
.format-btn.color-btn {
    position: relative;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.format-btn.color-btn .color-bar {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background-color: #0091ff;
    margin-top: 1px;
}

.format-btn.color-btn input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Insert-variable button accent */
.format-btn.format-btn-var {
    color: #f59e0b;
}

.format-btn.format-btn-var:hover {
    background-color: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* Editor paper canvas */
.editor-paper-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scrollbar-width: thin;
}

.editor-paper {
    background-color: #ffffff !important;
    color: #0f172a !important;
    width: 100%;
    max-width: 800px;
    min-height: 1000px;
    flex-shrink: 0;
    padding: 4rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    border-radius: 8px;
    outline: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: justify;
}

.agreement-preview-box {
    flex-shrink: 0;
}

.editor-paper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.editor-paper table td, .editor-paper table th {
    border: 1px solid var(--border);
    padding: 8px;
}

/* Highlight Variable Pills inside editor */
.template-var {
    padding: 0px 6px;
    margin: 0 2px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: all;
    display: inline-block;
    transition: opacity 0.2s;
}

.template-var:hover {
    opacity: 0.8;
}

/* Pill specific colors matching screenshots */
.template-var.text-primary {
    background-color: rgba(0, 145, 255, 0.08);
    color: #0077d6;
    border: 1px dashed rgba(0, 145, 255, 0.4);
}

.template-var.text-danger {
    background-color: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px dashed rgba(239, 68, 68, 0.4);
}

.template-var.text-warning {
    background-color: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border: 1px dashed rgba(245, 158, 11, 0.4);
}

.template-var.text-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px dashed rgba(16, 185, 129, 0.45);
}

/* Right sidebar columns and tabs */
.fields-sidebar-column {
    background-color: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    height: 48px;
    flex-shrink: 0;
}

.tab-btn {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-btn.active {
    color: #0091ff;
    border-bottom-color: #0091ff;
}

.sidebar-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    scrollbar-width: thin;
}

.fields-header-desc {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fields-header-desc p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.danger-star {
    color: #ef4444;
    font-weight: bold;
}

.btn-add-field-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0091ff;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 145, 255, 0.15);
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-add-field-circle:hover {
    background-color: #0077d6;
}

/* Custom fields list card widgets */
.fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-setup-card {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.field-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field-card-header span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.field-card-actions {
    display: flex;
    gap: 0.4rem;
}

.field-card-actions button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem;
}

.field-card-actions button:hover {
    color: var(--text-main);
}

.field-setup-card input, .field-setup-card select {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-main);
    width: 100%;
}

.field-setup-card select:focus, .field-setup-card input:focus {
    outline: none;
    border-color: #0091ff;
}

.btn-copy-tag {
    background-color: var(--border);
    border: none;
    color: var(--text-main);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
}

.btn-copy-tag:hover {
    background-color: #cbd5e1;
}

/* Accordion sections in System Fields tab */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#panel-system-fields .accordion-group {
    gap: 0.85rem;
}

.accordion-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-app);
}

#panel-system-fields .accordion-item {
    border: none;
    border-radius: 18px;
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border);
}

.accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    user-select: none;
}

#panel-system-fields .accordion-trigger {
    min-height: 58px;
    padding: 1rem 1.1rem;
}

.trigger-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
}

.trigger-left i {
    color: var(--text-muted);
    font-size: 1rem;
}

#panel-system-fields .trigger-left i {
    width: 1.1rem;
    text-align: center;
}

.chevron {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.accordion-content {
    padding: 0 1.1rem;
    display: block;
    border-top: 1px solid transparent;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding-top 0.22s ease, padding-bottom 0.22s ease, border-top-color 0.22s ease;
}

.accordion-item.expanded .accordion-content {
    padding-top: 0.2rem;
    padding-bottom: 1.2rem;
    border-top-color: #cbd5e1;
    background-color: var(--bg-card);
    overflow: visible;
}

#panel-system-fields .accordion-item.expanded .accordion-content {
    background-color: transparent;
}

#panel-system-fields .accordion-item.expanded {
    overflow: visible;
}

.accordion-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.system-fields-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.system-field-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

.system-field-toggle-panel {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.system-field-toggle-panel.visible {
    display: flex;
}

/* Landlord Signature details widget */
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.section-title-row span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
}

.btn-add-card-small {
    background-color: #0091ff;
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 145, 255, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-add-card-small:hover {
    background-color: #0b84e8;
    box-shadow: 0 8px 18px rgba(0, 145, 255, 0.22);
}

.btn-add-card-small:active {
    transform: translateY(1px);
}

.description-small {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.landlord-card-selection {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.8rem 0.65rem 0.35rem;
    min-height: 0;
}

.landlord-card-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.landlord-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: #cbd5e1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
}

.landlord-card-dot:hover {
    background: #94a3b8;
}

.landlord-card-dot.active {
    background: #64748b;
    transform: scale(1.18);
}

.copy-icon {
    margin-left: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
}

.copy-icon:hover {
    color: #0091ff;
}

/* Landlord card selected outline styled like Photo 4 */
.landlord-signature-card {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1rem 1rem;
    min-height: 242px;
    position: relative;
    background-color: var(--bg-card);
    display: none;
    flex-direction: column;
    gap: 0.45rem;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin: 0;
}

.landlord-signature-card.is-visible {
    display: flex;
}

.landlord-signature-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.08);
}

.landlord-signature-card.selected {
    border-color: #0091ff;
    box-shadow: 0 8px 20px rgba(0, 145, 255, 0.12);
}

.card-edit-btn {
    position: absolute;
    right: 0.9rem;
    top: 0.9rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem;
}

.card-edit-btn:hover {
    color: #0091ff;
}

.landlord-card-logo-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.25rem;
}

.landlord-card-logo-row span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main);
}

.card-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-val {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.2rem;
}

.card-details-sub {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Checkboxes style for Signers list Photo 5 */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: #0091ff;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #0091ff;
    border-color: #0091ff;
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after {
    display: block;
}

.sub-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

.sub-accordion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
}

.sub-accordion-item:hover {
    background-color: var(--bg-input);
    color: #0091ff;
}

/* Alignment fixes for tables and views */
.logo.clickable {
    cursor: pointer;
}

/* Custom Radio Buttons Styles */
.custom-radio {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    user-select: none;
    min-height: 20px;
}

.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-mark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    transition: all 0.2s;
}

.custom-radio:hover input ~ .radio-mark {
    border-color: var(--primary);
}

.custom-radio input:checked ~ .radio-mark {
    background-color: var(--bg-card);
    border-color: var(--primary);
}

.radio-mark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
}

.custom-radio input:checked ~ .radio-mark::after {
    display: block;
}

/* Promo Card & Video Instruction Button in System Fields (Photo 1) */
.setup-promo-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.btn-promo-video {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

.btn-promo-video:hover {
    background-color: var(--border);
    color: var(--text-main);
}

.btn-promo-video:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-promo-video:active {
    transform: scale(0.98);
}

/* Custom JS Dropdown Styles (Photo 1) */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    text-align: left;
}

.custom-select-trigger:hover {
    border-color: var(--primary);
}

.custom-select-trigger:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.15);
}

.custom-select-trigger .trigger-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
}

.custom-select-trigger .fa-xmark {
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}

.custom-select-trigger .fa-xmark:hover {
    opacity: 1;
    color: var(--danger);
}

.custom-select-trigger .chevron-icon {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.custom-select-wrapper.open .chevron-icon {
    transform: rotate(180deg);
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    padding: 4px;
    scrollbar-width: thin;
}

.custom-select-wrapper.open .custom-select-menu {
    display: block;
}

.custom-select-option {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

.custom-select-option:hover, .custom-select-option.focused {
    background-color: var(--bg-input);
}

.custom-select-option.selected {
    background-color: var(--primary);
    color: white;
}

/* Custom styling inside Dynamic Cards to ensure alignment */
.field-setup-card .custom-select-wrapper {
    margin-top: 0.25rem;
}

/* Templates Tab & Header Styles */
.templates-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.templates-tabs {
    display: flex;
    gap: 1.5rem;
}

.templates-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.2rem;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.templates-tab:hover {
    color: var(--text-main);
}

.templates-tab.active {
    color: var(--text-main);
}

.templates-tab.active::after {
    content: '';
    position: absolute;
    bottom: -0.85rem;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text-main);
    border-radius: 2px;
}

.btn-outline-gray {
    background-color: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline-gray:hover {
    background-color: var(--border);
}

.btn-outline-purple-gradient {
    background: transparent;
    color: #8b5cf6;
    border: 2px solid #8b5cf6;
    padding: 0.55rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-outline-purple-gradient:hover {
    background-color: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.download-format-option:hover {
    background-color: var(--border) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--primary) !important;
}

/* Toast Notifications */
.toast-notification {
    background-color: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    font-size: 0.9rem;
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    pointer-events: auto;
}
.toast-notification.toast-error {
    background-color: var(--danger, #dc2626);
}
@keyframes slideIn {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Schedule Card Layout */
.schedule-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: left;
}
.schedule-card:hover {
    box-shadow: var(--shadow-md);
}
.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.schedule-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}
.schedule-actions {
    display: flex;
    gap: 0.5rem;
}
.schedule-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.badge-active {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}
.badge-paused {
    background-color: rgba(100, 116, 139, 0.15);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}
.badge-date-field {
    background-color: var(--bg-input);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--border);
}
.schedule-details {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.schedule-details strong {
    color: var(--text-main);
    font-weight: 600;
}

/* PDF Package Styles */
.pdf-upload-zone {
    transition: border-color 0.2s, background-color 0.2s;
}
.pdf-upload-zone:hover {
    border-color: var(--primary) !important;
    background-color: rgba(0, 145, 255, 0.06) !important;
}
.pdf-file-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}
.pdf-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pdf-file-icon {
    font-size: 1.5rem;
    color: #ef4444;
}
.pdf-file-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}
#menu-editor-more-actions {
    min-width: 320px !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* ==========================================================================
   SIGNER (CLIENT) VIEW — full-width document + dropdown + signing modal
   ========================================================================== */
.signer-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-light);
    overflow: hidden;
}

.signer-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.5rem;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.signer-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.signer-topbar-left .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.signer-topbar-left .logo h2 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
}

.signer-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.signer-actions-dropdown {
    position: relative;
}

.btn-signer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-signer-actions:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.signer-actions-dropdown.open .chevron-icon {
    transform: rotate(180deg);
}

.btn-signer-actions .chevron-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.signer-actions-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 240px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    z-index: 50;
    animation: slideUp 0.2s ease-out;
}

.signer-action-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.15s;
}

.signer-action-item i {
    color: var(--primary);
    width: 18px;
    text-align: center;
}

.signer-action-item:hover {
    background-color: var(--primary-light);
}

.btn-open-sign {
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap;
    padding: 0.6rem 1.25rem !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
}

.btn-open-sign.is-signed {
    background-color: var(--success) !important;
    cursor: default;
    opacity: 0.95;
}

.signer-sticky-bar {
    display: none;
}

.signer-sticky-sign-btn {
    width: 100%;
    margin: 0 !important;
    min-height: 52px;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(0, 145, 255, 0.18);
}

.signer-sticky-sign-btn.is-signed {
    background-color: var(--success) !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.18);
}

#signer-view .contract-column {
    flex: 1;
    width: 100%;
    height: auto;
    overflow-y: auto;
    padding: 2.5rem 2rem;
}

/* Consolidated signing modal */
.sign-modal-card {
    max-width: 680px;
}

.sign-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sign-modal-body .card {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
}

.sign-modal-body .card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.sign-modal-body .card-header i {
    color: var(--primary);
}

.sign-modal-body .card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.sign-modal-body .sign-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sign-modal-body .sign-actions .btn-primary,
.sign-modal-body .sign-actions .btn-secondary {
    flex: 1;
    min-width: 160px;
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .signer-topbar {
        flex-wrap: wrap;
        padding: 0.6rem 1rem;
    }
    .signer-topbar-actions {
        gap: 0.5rem;
    }
    .hide-sm {
        display: none;
    }
    .btn-open-sign {
        padding: 0.6rem 0.9rem !important;
    }
    .signer-actions-menu {
        left: 0;
        right: auto;
        width: min(280px, calc(100vw - 2rem));
        min-width: 0;
    }
    #signer-view .contract-column {
        padding: 1.25rem 0.75rem;
    }
    .modal-overlay {
        align-items: flex-end;
    }
    .sign-modal-card {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 1.5rem 1.25rem;
    }
    .sign-modal-body .sign-actions .btn-primary,
    .sign-modal-body .sign-actions .btn-secondary {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   YANDEX ID OAUTH — login button + divider
   ========================================================================== */
.oauth-block {
    margin-top: 1.25rem;
}

.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.oauth-divider span {
    padding: 0 0.85rem;
}

.btn-yandex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background-color: #fff;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-yandex:hover {
    border-color: #fc3f1d;
    box-shadow: 0 2px 10px rgba(252, 63, 29, 0.15);
}

.btn-yandex .yandex-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fc3f1d;
    color: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}

/* ==========================================================================
   ADMIN / EDITOR — enhanced mobile management (full-width, touch-friendly)
   ========================================================================== */
@media (max-width: 768px) {
    .header-nav {
        padding: 0.65rem 1rem;
        gap: 0.5rem;
    }
    .header-right {
        gap: 0.75rem;
    }
    .top-menu {
        gap: 1rem;
    }
    .dashboard-content {
        padding: 1.25rem 1rem;
    }
    .templates-header-row .action-buttons {
        width: 100%;
        flex-wrap: wrap;
    }
    .templates-header-row .action-buttons button {
        flex: 1 1 auto;
        justify-content: center;
    }
    .search-sort-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .search-sort-row .search-box {
        max-width: 100% !important;
    }
    .search-sort-row .custom-select-wrapper,
    .search-sort-row .custom-select-trigger {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Touch-friendly tap targets */
    .btn-filled-blue,
    .btn-outline-gray,
    .btn-outline-purple-gradient,
    .menu-item,
    .nav-item,
    .templates-tab {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .header-left h2 {
        font-size: 1.15rem;
    }
    .badge-company {
        display: none;
    }
    .user-badge {
        padding: 0.3rem;
        border-radius: 50%;
    }
    .top-menu {
        gap: 0.75rem;
    }
    .menu-item {
        font-size: 0.9rem;
    }
    .templates-tabs {
        gap: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .contract-paper {
        padding: 1.5rem 1.1rem !important;
    }
}
/* Toggle Switch */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}
.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch-toggle input:checked + .switch-slider {
    background-color: var(--primary, #0091ff);
}
.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(22px);
}

/* Custom Select in Profile cards */
#profile-jurisdiction {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

/* ==========================================================================
   MOBILE-FIRST ADMIN, EDITOR AND PASSPORT VERIFICATION
   ========================================================================== */
.identity-obligations {
    background: var(--primary-light);
    border: 1px solid rgba(0, 145, 255, 0.16);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.identity-obligations strong {
    display: block;
    margin-bottom: 0.45rem;
}

.identity-obligations ul {
    margin: 0;
    padding-left: 1.15rem;
}

.passport-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.passport-photo-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    transition: var(--transition);
}

.passport-photo-card.dragover,
.passport-photo-card.is-ready {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.08);
}

.passport-photo-card.is-verified {
    border-color: var(--success);
    background: var(--success-light);
}

.passport-photo-card.is-error {
    border-color: var(--danger);
    background: var(--danger-light);
}

.photo-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.photo-step {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.photo-card-top h4 {
    font-size: 0.86rem;
    color: var(--text-main);
    margin: 0 0 0.2rem;
}

.photo-card-top p {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin: 0;
}

.photo-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-preview.empty img {
    display: none;
}

.photo-preview i {
    color: var(--text-muted);
    font-size: 1.35rem;
}

.photo-preview:not(.empty) i {
    display: none;
}

.photo-card-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-photo-action,
.btn-photo-remove {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-photo-action {
    flex: 1;
}

.btn-photo-remove {
    width: 42px;
    color: var(--danger);
}

.btn-photo-action:disabled,
.btn-photo-remove:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.photo-status {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.passport-photo-card.is-ready .photo-status {
    color: var(--primary);
    font-weight: 700;
}

.passport-photo-card.is-verified .photo-status {
    color: #047857;
    font-weight: 800;
}

.passport-photo-card.is-error .photo-status {
    color: var(--danger);
    font-weight: 800;
}

.passport-verify-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}

.passport-verify-actions .btn-primary {
    margin-top: 0 !important;
    width: auto;
    min-height: 44px;
}

.passport-verify-actions p {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.scan-status.is-idle .loader,
.scan-status.is-success .loader,
.scan-status.is-error .loader {
    display: none;
}

.scan-status.is-success .status-indicator {
    color: var(--success) !important;
}

.scan-status.is-error .status-indicator {
    color: var(--danger) !important;
}

@media (max-width: 768px) {
    body {
        background: var(--bg-input);
    }

    .view-container,
    .app-shell,
    .signer-shell {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .header-nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        height: auto;
        min-height: 64px;
        padding: 0.7rem 0.9rem;
        row-gap: 0.55rem;
        column-gap: 0.65rem;
    }

    .header-left,
    .header-right,
    .header-center {
        min-width: 0;
    }

    .header-center {
        grid-column: 1 / -1;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .top-menu {
        gap: 0.5rem;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.1rem;
    }

    .menu-item {
        min-height: 38px;
        padding: 0.5rem 0.65rem;
        flex: 0 0 auto;
    }

    .header-right {
        justify-self: end;
        gap: 0.5rem;
    }

    .badge-info {
        display: none;
    }

    .user-badge {
        padding: 0.25rem;
        border-radius: 999px;
    }

    .dashboard-content {
        padding: 1rem 0.85rem;
    }

    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .templates-section {
        gap: 1rem;
        min-width: 0;
    }

    .templates-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .templates-tabs {
        width: 100%;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
    }

    .templates-tab {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0.45rem 0.65rem;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 0.65rem;
    }

    .action-buttons button,
    .btn-filled-blue,
    .btn-outline-gray,
    .btn-outline-purple-gradient {
        width: 100%;
        min-height: 44px;
    }

    .tpl-item-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .tpl-card-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tpl-card-right .btn-outline-gray,
    .tpl-card-right .btn-filled-blue,
    .tpl-card-right .btn-danger,
    .tpl-card-right > a,
    .tpl-card-right > button:not(.btn-more-dots) {
        flex: 1 1 45%;
        justify-content: center;
        text-align: center;
        min-height: 42px;
    }

    .tpl-card-right .btn-more-dots {
        margin-left: auto;
    }

    .tpl-card-left,
    .tpl-card-info,
    .tpl-title,
    .tpl-description {
        min-width: 0;
    }

    .dashboard-sidebar {
        width: 100%;
    }

    .editor-subheader {
        height: auto !important;
        min-height: 64px;
        padding: 0.65rem 0.85rem !important;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .subheader-left,
    .subheader-right {
        min-width: 0;
        flex-wrap: wrap;
    }

    .subheader-right {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .subheader-right .btn-filled-blue {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
    }

    .editor-workspace {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .document-editor-column {
        min-width: 0;
        overflow: visible;
        border-right: 0;
    }

    .document-editor-column > div:first-child {
        padding: 1rem 0.9rem 0.65rem !important;
    }

    .editable-title-group,
    .editable-desc-group {
        min-width: 0;
        align-items: flex-start !important;
    }

    #editor-title {
        font-size: 1.35rem !important;
        line-height: 1.15;
        word-break: break-word;
    }

    #editor-desc {
        font-size: 0.82rem !important;
        line-height: 1.35;
    }

    .editor-formatting-toolbar {
        height: auto;
        min-height: 46px;
        padding: 0.45rem 0.65rem;
    }

    .editor-paper-container {
        padding: 0.85rem !important;
        gap: 1rem !important;
        overflow: visible !important;
        min-width: 0;
    }

    .editor-paper,
    .agreement-preview-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .editor-paper {
        min-height: 60vh;
        padding: 1.3rem !important;
        font-size: 0.86rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .fields-sidebar-column {
        width: 100%;
        overflow: visible;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    #editor-fields-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 100vw !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 2000 !important;
        background-color: var(--bg-card) !important;
        flex-direction: column !important;
        border: none !important;
        margin: 0 !important;
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), visibility 0.3s linear;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    }

    #editor-fields-sidebar.open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
    }

    #editor-fields-sidebar .mobile-sidebar-header {
        display: flex !important;
        flex-shrink: 0;
    }

    #editor-fields-sidebar .sidebar-tab-content {
        padding: 1.25rem 1.5rem !important;
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-tab-content {
        padding: 1rem 0.85rem;
        overflow: visible;
    }

    #editor-btn-fields-mobile {
        display: flex !important;
    }

    .signer-topbar {
        align-items: stretch;
    }

    .signer-topbar-left,
    .signer-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .signer-topbar-left {
        min-width: 0;
        gap: 0.6rem;
    }

    .signer-topbar-left .logo {
        min-width: 0;
    }

    .btn-back-to-portal {
        max-width: calc(100vw - 170px);
        padding: 0.55rem 0.8rem;
        overflow: hidden;
    }

    .btn-back-to-portal span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .signer-topbar-actions {
        gap: 0.5rem;
    }

    #signer-view .contract-column {
        padding: 1rem 0.65rem calc(6.5rem + env(safe-area-inset-bottom));
        overflow: visible;
    }

    .contract-paper-wrapper {
        max-width: 100%;
    }

    .contract-paper {
        min-height: auto;
        padding: 1.25rem 1rem !important;
        font-size: 0.84rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .doc-header h2 {
        font-size: 1.1rem;
        letter-spacing: 0;
    }

    .doc-meta {
        flex-direction: column;
        gap: 0.35rem;
    }

    .sign-stamp {
        position: static;
        width: 100%;
        max-width: 250px;
        margin-top: 0.5rem;
    }

    .sign-modal-card {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
    }

    .passport-photo-grid {
        grid-template-columns: 1fr;
    }

    .passport-verify-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .passport-verify-actions p {
        text-align: center;
    }

    .signing-methods-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .sign-method-btn {
        min-height: 58px;
    }

    #btn-open-sign-modal {
        display: none !important;
    }

    .signer-sticky-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(241, 245, 249, 0.98), rgba(241, 245, 249, 0.88), rgba(241, 245, 249, 0));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Bottom Nav, Sticky Bottom Bar, and Mobile Padding Overrides */
    .header-center {
        display: none !important;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background-color: var(--bg-card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.5rem;
    }
    
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        background: none;
        border: none;
        color: var(--text-muted);
        gap: 0.25rem;
        cursor: pointer;
        transition: var(--transition);
        font-family: 'Inter', sans-serif;
        padding: 0;
        min-height: 0 !important;
    }
    
    .bottom-nav-item i {
        font-size: 1.25rem;
        transition: transform 0.2s ease;
    }
    
    .bottom-nav-item span {
        font-size: 0.7rem;
        font-weight: 600;
    }
    
    .bottom-nav-item.active {
        color: var(--primary);
    }
    
    .bottom-nav-item.active i {
        transform: translateY(-2px);
    }

    .editor-mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background-color: var(--bg-card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
    }
    
    .editor-mobile-bottom-bar button {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 0;
        margin: 0;
        min-height: 0 !important;
    }

    .dashboard-content {
        padding-bottom: 80px !important;
    }

    .editor-paper-container {
        padding-bottom: 80px !important;
    }

    /* Table stacked cards styling for mobile view */
    .table-wrapper {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    .data-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .data-table thead {
        display: none !important;
    }
    
    .data-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }
    
    .data-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        box-shadow: var(--shadow) !important;
        gap: 0.85rem !important;
        width: 100% !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .data-table tr:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg) !important;
        background: var(--bg-card) !important;
    }
    
    .data-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
        font-size: 0.875rem !important;
        color: var(--text-main) !important;
        text-align: right !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    .data-table td:last-child {
        border-bottom: none !important;
        padding-top: 0.85rem !important;
        margin-top: 0.35rem !important;
        justify-content: flex-end !important;
    }
    
    .data-table td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        font-size: 0.725rem !important;
        letter-spacing: 0.5px !important;
        text-align: left !important;
        margin-right: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    /* Actions and Copy Link Layouts inside Stacked Cards */
    .data-table td .link-share-box {
        max-width: 190px !important;
        padding: 0.35rem 0.65rem !important;
        background-color: var(--bg-input) !important;
        border-radius: 6px !important;
    }

    .data-table td .btn-filled-blue,
    .data-table td .btn-delete-row,
    .data-table td .btn-view-contract,
    .data-table td .btn-sign-contract {
        width: auto !important;
        min-height: 36px !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 420px) {
    .logo-circle {
        width: 20px;
        height: 20px;
    }

    .header-left h2,
    .signer-topbar-left .logo h2 {
        font-size: 1.05rem;
    }

    .menu-item {
        font-size: 0.82rem;
    }

    .btn-open-sign span {
        display: none;
    }

    .photo-card-actions {
        flex-direction: column;
    }

    .btn-photo-remove {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #login-view {
        justify-content: flex-start;
        padding: 1rem 0.75rem 1.5rem;
    }

    .login-card {
        max-width: 100%;
        padding: 1.5rem 1rem;
        border-radius: 20px;
    }

    #login-view .auth-tabs {
        gap: 0.25rem;
        margin-bottom: 1rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    #login-view .auth-tabs::-webkit-scrollbar,
    #login-view .login-method-tabs::-webkit-scrollbar,
    #panel-about-me .templates-tabs::-webkit-scrollbar,
    .legal-modal-tabs::-webkit-scrollbar {
        display: none;
    }

    #login-view .auth-tab-btn {
        min-height: 44px;
        white-space: nowrap;
        font-size: 0.92rem !important;
    }

    #login-view .login-method-tabs {
        gap: 0.35rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.25rem !important;
        scrollbar-width: none;
    }

    #login-view .method-tab-btn {
        flex: 1 0 auto;
        min-width: 92px;
        min-height: 40px;
        padding: 0.55rem 0.7rem !important;
        white-space: nowrap;
    }

    #login-code-group > div:first-child,
    #profile-form > div:last-child,
    #virtual-tg-form {
        flex-direction: column !important;
    }

    #login-code-group > div:first-child button,
    #virtual-tg-form button {
        width: 100% !important;
    }

    .panel-header {
        margin-bottom: 1.25rem;
    }

    .panel-header h2 {
        font-size: 1.35rem;
    }

    .panel-header p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    #panel-about-me .templates-header-row {
        margin-bottom: 1.25rem !important;
        padding-bottom: 0.75rem !important;
    }

    #panel-about-me .templates-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
    }

    #panel-about-me .templates-tab {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0.65rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-card);
        white-space: nowrap;
    }

    #panel-about-me .templates-tab.active {
        color: var(--primary);
        border-color: rgba(0, 145, 255, 0.25);
        background: var(--primary-light);
    }

    #panel-about-me .templates-tab.active::after {
        display: none;
    }

    #sub-panel-profile-my-data,
    #sub-panel-profile-notifications,
    #sub-panel-profile-security,
    #sub-panel-profile-simulators,
    #profile-view-card,
    #profile-edit-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    #sub-panel-profile-my-data > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
        margin-bottom: 0.75rem !important;
    }

    #profile-display-name {
        font-size: 1.3rem !important;
        line-height: 1.2;
    }

    #profile-view-card .card,
    #profile-edit-card .card,
    #sub-panel-profile-notifications .card,
    #sub-panel-profile-security .card,
    #sub-panel-profile-simulators .card {
        padding: 1rem !important;
    }

    #sub-panel-profile-notifications .card:first-child,
    #sessions-list-container .session-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #sub-panel-profile-notifications .card:first-child .switch-toggle {
        align-self: flex-end;
    }

    #btn-connect-telegram-bot,
    #btn-register-passkey-trigger,
    #btn-manage-sessions-trigger,
    #profile-form > div:last-child button,
    #btn-clear-virtual-inbox {
        width: 100% !important;
        align-self: stretch !important;
        justify-content: center;
    }

    #sub-panel-profile-simulators {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #sub-panel-profile-simulators > .card {
        height: auto !important;
        min-height: 320px;
    }

    .bottom-nav {
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
    }

    .editor-mobile-bottom-bar {
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .dashboard-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    .modal-overlay {
        padding: 1rem;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92vh, 92dvh);
        padding: 1.25rem !important;
        border-radius: 18px;
    }

    .legal-modal-card {
        width: 100%;
        max-width: 100%;
        max-height: min(92vh, 92dvh);
    }

    .legal-modal-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0.75rem;
        -webkit-overflow-scrolling: touch;
    }

    .legal-tab-btn {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 44px;
        padding: 0.85rem 0.75rem;
    }

    .legal-modal-footer {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    #login-view {
        padding: 0.75rem 0.5rem 1rem;
    }

    .login-card {
        padding: 1.25rem 0.85rem;
        border-radius: 18px;
    }

    .login-header {
        margin-bottom: 1.5rem;
    }

    .login-header h2 {
        font-size: 1.7rem;
    }

    .login-header p,
    #login-view .method-tab-btn,
    #login-view .auth-tab-btn {
        font-size: 0.8rem !important;
    }

    #panel-about-me .templates-tab,
    .legal-tab-btn {
        font-size: 0.78rem !important;
        padding: 0.72rem 0.8rem !important;
    }

    .legal-modal-tabs {
        gap: 0.5rem;
        padding: 0 0.75rem 0.25rem;
    }

    .signer-actions-menu {
        width: min(260px, calc(100vw - 1rem));
    }

    .signer-sticky-bar {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .signer-sticky-sign-btn {
        min-height: 50px;
        font-size: 0.9rem !important;
    }

    .btn-back-to-portal span {
        display: none;
    }

    .data-table tr {
        padding: 1rem !important;
    }

    .data-table td {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem;
        text-align: left !important;
    }

    .data-table td::before {
        margin-right: 0 !important;
    }

    .data-table td:last-child {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .data-table td .link-share-box,
    .data-table td .btn-filled-blue,
    .data-table td .btn-delete-row,
    .data-table td .btn-view-contract,
    .data-table td .btn-sign-contract {
        width: 100% !important;
        max-width: 100% !important;
    }

    #sub-panel-profile-simulators > .card {
        min-height: 280px;
    }

    .bottom-nav-item span {
        font-size: 0.68rem;
    }
}

#editor-btn-fields-mobile,
.bottom-nav,
.editor-mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav,
    .editor-mobile-bottom-bar {
        display: flex !important;
    }
}

/* ==========================================================================
   ADDED FOR: PASSKEYS, LEGAL MODAL, SCROLL-TO-TOP & RESPONSIVE TABLES
   ========================================================================== */

/* 1. Scroll To Top Button */
#btn-scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 145, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
}

#btn-scroll-to-top:hover {
    background-color: #0077d6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 145, 255, 0.45);
}

#btn-scroll-to-top:active {
    transform: translateY(0);
}

#btn-scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. Legal Documents Modal */
.legal-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.legal-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: legalModalFade 0.3s ease;
}

@keyframes legalModalFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.legal-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.legal-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
}

.legal-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
    padding: 0 1rem;
}

.legal-tab-btn {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: all 0.2s ease;
}

.legal-tab-btn.active {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 700;
}

.legal-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
}

.legal-tab-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    color: var(--primary);
}

.legal-tab-content p {
    margin-bottom: 0.75rem;
}

.legal-tab-content ul {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.legal-tab-content li {
    margin-bottom: 0.4rem;
}

.legal-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    background: var(--bg-card);
}

/* 3. Responsive Tables for Issued Contracts & Clients */
@media (max-width: 768px) {
    #contracts-table thead, 
    #clients-table thead {
        display: none;
    }
    
    #contracts-table, 
    #clients-table, 
    #contracts-table tbody, 
    #clients-table tbody, 
    #contracts-table tr, 
    #clients-table tr, 
    #contracts-table td, 
    #clients-table td {
        display: block;
        width: 100%;
    }
    
    #contracts-table tr, 
    #clients-table tr {
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: 16px;
        margin-bottom: 1.25rem;
        padding: 1rem;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    #contracts-table tr:hover, 
    #clients-table tr:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    #contracts-table td, 
    #clients-table td {
        border: none;
        padding: 0.6rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        font-size: 0.88rem;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    }
    
    #contracts-table td:last-child, 
    #clients-table td:last-child {
        border-bottom: none;
        padding-top: 0.85rem;
        margin-top: 0.5rem;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    
    #contracts-table td::before, 
    #clients-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        text-align: left;
        margin-right: 1.5rem;
    }
    
    #contracts-table td strong, 
    #clients-table td strong {
        font-size: 0.92rem;
    }
    
    .link-share-box {
        max-width: 65%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   4. PRINT MEDIA STYLES (Fixes line splitting, page breaking, and UI hiding)
   ========================================================================== */
@page {
    margin: 1.5cm;
}

@media print {
    /* Prepared-document print mode: show ONLY the generated document */
    #print-document-root {
        display: none;
    }

    body.printing-document > *:not(#print-document-root) {
        display: none !important;
    }

    body.printing-document #print-document-root {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    body.printing-document .print-prepared-doc {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    body.printing-document .print-prepared-doc * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Hide all UI navigation, sidebars, buttons, simulated tools, and modals */
    header, 
    nav, 
    footer, 
    aside,
    button,
    .header-nav,
    .editor-subheader,
    .editor-toolbar,
    .sidebar-column,
    .fields-sidebar-column,
    #panel-system-fields,
    #panel-my-fields,
    .bottom-nav,
    .action-buttons,
    .templates-header-row,
    .search-sort-row,
    .templates-tabs,
    .demo-logins,
    .login-card,
    .legal-modal-backdrop,
    .legal-modal,
    .modal-backdrop,
    .modal-overlay,
    .modal-card,
    #virtual-tg-chat,
    #virtual-email-inbox,
    .btn-circle-tool,
    .btn-filled-blue,
    .btn-outline-gray,
    #back-to-portal-btn,
    .signer-sticky-bar,
    .signer-right-column,
    .doc-signer-header,
    .app-shell > header,
    .app-shell > nav,
    .signer-topbar,
    .background-blobs,
    .demo-logins,
    .custom-select-wrapper,
    #sort-select-wrapper,
    .templates-section .templates-header-row,
    .templates-section .search-sort-row,
    .signer-topbar-actions,
    .signer-topbar-left .logo,
    #btn-open-sign-modal {
        display: none !important;
    }

    /* Flatten flex boxes and viewport height overrides to prevent page truncation */
    html, body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .view-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Keep non-active (hidden) views hidden so we print ONLY the open document */
    .view-container.hidden,
    .hidden {
        display: none !important;
    }

    .app-shell,
    .signer-shell,
    .editor-workspace,
    .document-editor-column,
    .editor-paper-container,
    .contract-column,
    .contract-paper-wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Styles for the printed contract page */
    .editor-paper, 
    .contract-paper,
    .doc-body, 
    #preview-canvas, 
    #editor-canvas,
    #contract-document {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
        text-align: left !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    /* Nothing inside the document may exceed the printable width */
    .editor-paper *,
    .contract-paper *,
    #contract-document *,
    #preview-canvas *,
    #editor-canvas * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* CRITICAL FIX: Prevent page breaks inside text blocks, tables rows, list items, or headers */
    tr, 
    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6, 
    p,
    li,
    .doc-signatures,
    .signature-block,
    .sign-stamp {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    blockquote, 
    pre {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Allow lists and tables to split between items/rows, but keep individual rows intact */
    ul, ol {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    table {
        page-break-inside: auto !important;
        break-inside: auto !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    /* Print tables with proper header repetition on each page */
    thead {
        display: table-header-group !important;
    }

    /* Render styled variables clearly in print mode */
    .template-var {
        background: transparent !important;
        color: #000000 !important;
        border-bottom: 1px dashed #000000 !important;
        font-weight: bold !important;
    }
}

/* --- Login/Registration Form Toggle Transitions --- */
#login-form, #register-form {
    animation: fadeSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Dynamic Background Glow on Registration Active --- */
body.registration-active .blob {
    opacity: 0.35;
    transition: opacity 1.5s ease, transform 1.5s ease;
}

body.registration-active .blob-1 {
    animation: registrationBlobGlow1 12s infinite alternate ease-in-out;
}

body.registration-active .blob-2 {
    animation: registrationBlobGlow2 12s infinite alternate ease-in-out;
}

@keyframes registrationBlobGlow1 {
    0% {
        transform: translate(0, 0) scale(1);
        background: radial-gradient(circle, #818cf8 0%, transparent 70%);
    }
    50% {
        transform: translate(12%, 8%) scale(1.3) rotate(30deg);
        background: radial-gradient(circle, #c084fc 0%, transparent 70%);
    }
    100% {
        transform: translate(-8%, 12%) scale(0.95) rotate(-30deg);
        background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    }
}

@keyframes registrationBlobGlow2 {
    0% {
        transform: translate(0, 0) scale(1);
        background: radial-gradient(circle, #f472b6 0%, transparent 70%);
    }
    50% {
        transform: translate(-12%, -8%) scale(1.4) rotate(-30deg);
        background: radial-gradient(circle, #f472b6 0%, transparent 70%);
    }
    100% {
        transform: translate(8%, -12%) scale(0.85) rotate(30deg);
        background: radial-gradient(circle, #ec4899 0%, transparent 70%);
    }
}


/* ==========================================================================
   LOGIN — refined input framing & polish (added)
   ========================================================================== */
.login-card {
    box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.18),
                0 8px 24px -8px rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.12);
}

#login-view .input-group {
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

#login-view .input-group label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-main);
    letter-spacing: 0.01em;
}

/* Framed inputs: clear border, soft inner fill, animated focus ring */
#login-view .input-group input,
#login-view .input-group select,
#login-view #login-otp-code {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    color: var(--text-main);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#login-view .input-group input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

#login-view .input-group input:hover,
#login-view .input-group select:hover {
    border-color: #c7cdfb;
}

#login-view .input-group input:focus,
#login-view .input-group select:focus,
#login-view #login-otp-code:focus {
    outline: none;
    border-color: #6366f1;
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16),
                inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* OTP code field: centered, spaced characters */
#login-view #login-otp-code {
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: 700;
    font-size: 1.25rem;
    padding-left: 0.5em;
}

/* Slightly larger, softer logo badge */
.login-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(0, 145, 255, 0.12));
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
    margin-bottom: 1rem;
}


/* ==========================================================================
   MOBILE — full tab/modal/form adaptation (added)
   ========================================================================== */
@media (max-width: 768px) {
    /* Generic modals become comfortable bottom sheets */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        padding: 1.5rem 1.15rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        animation: sheetUp 0.28s ease-out;
    }

    @keyframes sheetUp {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    .modal-close-btn {
        right: 1rem;
        top: 1rem;
    }

    /* Stack every two-column form grid */
    .form-grid,
    .details-form .input-grid,
    .input-grid-2,
    .signing-methods-grid {
        grid-template-columns: 1fr !important;
    }

    /* Editor sidebar tab buttons stay tappable */
    .sidebar-tabs {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    .sidebar-tabs .tab-btn {
        min-height: 44px;
    }

    /* Selects and textareas match framed inputs on touch */
    .input-group select,
    .input-group textarea,
    select,
    input,
    textarea {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }

    /* Landlord card carousel fits viewport */
    .landlord-card-selection {
        width: 100%;
    }

    /* Reduce big desktop paddings inside cards/sections */
    .modal-header h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .modal-card {
        padding: 1.25rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        border-radius: 18px 18px 0 0;
    }

    /* Login frame tightens but stays comfortable */
    .login-card {
        padding: 1.5rem 1.1rem;
        border-radius: 20px;
    }

    #login-view .input-group input,
    #login-view .input-group select {
        padding: 0.8rem 0.9rem;
    }

    .login-logo-icon {
        width: 60px;
        height: 60px;
        font-size: 2.4rem;
    }

    /* Passport photo cells: single column on phones for readability */
    .passport-photo-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   REQUESTED CLIENT DATA — nested sub-accordions (added)
   ========================================================================== */
.sub-accordion {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-input);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sub-accordion + .sub-accordion {
    margin-top: 0.75rem;
}

.sub-accordion.open {
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.06);
}

.sub-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 54px;
    padding: 1rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: left;
    transition: color 0.2s ease;
}

.sub-accordion-trigger:hover {
    color: var(--primary);
}

.sub-accordion-trigger i {
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sub-accordion.open .sub-accordion-trigger i {
    transform: rotate(180deg);
    color: var(--primary);
}

/* Animated expand/collapse via max-height */
.sub-accordion-content {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 1.1rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--bg-card);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
}

.sub-accordion.open .sub-accordion-content {
    max-height: 2000px;
    opacity: 1;
    padding-top: 0.5rem;
    padding-bottom: 1.1rem;
    border-top: 1px solid var(--border);
}

.filler-question {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 0.5rem;
}

.req-field-row small,
.sub-accordion-content .label-text small {
    font-weight: 400;
    margin-top: 0.15rem;
    line-height: 1.35;
}

/* Disabled (locked-on) required fields look muted */
.custom-checkbox input:disabled ~ .checkmark {
    opacity: 0.55;
}

/* Conditional body hidden when its toggle is off */
.req-collapsed {
    display: none !important;
}

/* Requested-data field rows: label + copy button side by side */
.req-field-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.req-field-line .custom-checkbox {
    flex: 1;
    min-width: 0;
}

.req-copy-tag {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.35rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    margin-top: 0.1rem;
}

.req-copy-tag:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Comfortable spacing for checkboxes & radios inside requested-data sub-accordions */
.sub-accordion-content .custom-checkbox,
.sub-accordion-content .custom-radio {
    align-items: flex-start;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    line-height: 1.35;
}

/* Keep the checkmark a fixed square, aligned to first line (no stretching) */
.sub-accordion-content .checkmark {
    top: 0.15rem;
    transform: none;
    flex: 0 0 20px;
}

.sub-accordion-content .custom-radio .radio-mark {
    top: 0.15rem;
    transform: none;
}

.sub-accordion-content .custom-radio {
    min-height: 24px;
}

/* org requisites body keeps consistent vertical rhythm */
#org-req-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

/* Consent modal custom dropdown / select fallback */
#consent-template-select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

#consent-preview .consent-var {
    background: #fdecea;
    border: 1px solid #f5b5ac;
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 600;
    color: #b91c1c;
}


/* ==========================================================================
   DESKTOP / PC — large-screen layout polish (added)
   ========================================================================== */
@media (min-width: 1280px) {
    /* Constrain content width on wide screens so it doesn't sprawl */
    .dashboard-content > .dashboard-grid,
    .dashboard-content > .panel-header,
    .dashboard-content > .table-wrapper,
    .dashboard-content > .templates-header-row,
    .dashboard-content > .issued-tabs-bar,
    #panel-about-me > .templates-header-row {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Header content aligns with the constrained body */
    .header-nav {
        padding-left: max(3rem, calc((100vw - 1320px) / 2));
        padding-right: max(3rem, calc((100vw - 1320px) / 2));
    }

    /* Tables get a touch more breathing room */
    .dashboard-content {
        padding: 2.5rem 3rem;
    }
}

@media (min-width: 1600px) {
    .dashboard-content > .dashboard-grid,
    .dashboard-content > .panel-header,
    .dashboard-content > .table-wrapper,
    .dashboard-content > .templates-header-row,
    .dashboard-content > .issued-tabs-bar {
        max-width: 1320px;
    }
}

/* Settings page (merged profile) reads as one clean column on all sizes */
#panel-about-me #sub-panel-profile-my-data,
#panel-about-me #sub-panel-profile-notifications,
#panel-about-me #sub-panel-profile-security {
    width: 100%;
}

/* "Настройки" header centered over the same 640px column */
#panel-about-me > .templates-header-row {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   SEARCHABLE DROPDOWN (JS, with live filtering) — added
   ========================================================================== */
.searchable-dropdown {
    position: relative;
    width: 100%;
}

.searchable-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.searchable-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.12);
    background: var(--bg-card);
}

.searchable-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.2);
    padding: 0.35rem;
}

.searchable-option {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.searchable-option:hover,
.searchable-option.active {
    background: var(--primary-light);
}

.searchable-option .opt-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.searchable-option mark {
    background: rgba(0, 145, 255, 0.22);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.searchable-empty {
    padding: 0.7rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}


/* ==========================================================================
   SETTINGS PAGE — unified, consistent sections (added)
   ========================================================================== */
#panel-about-me .settings-section {
    width: 100%;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0 !important;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

/* First section needs no top divider */
#panel-about-me #sub-panel-profile-my-data.settings-section {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
}
/* Section headings align with the cards (no left drift) */
#panel-about-me .settings-section > h3 {
    margin: 0 0 0.25rem 0;
}

/* Keep inner blocks full-width within the constrained section */
#panel-about-me .settings-section .card,
#panel-about-me #profile-view-card,
#panel-about-me #profile-edit-card {
    max-width: 100% !important;
    width: 100%;
}

/* The "ФИО + edit" header row aligns to the same left edge / width */
#panel-about-me #sub-panel-profile-my-data > div:first-child {
    max-width: 100% !important;
}


/* ==========================================================================
   TEMPLATE UPLOAD — loading state (added)
   ========================================================================== */
.upload-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--primary);
    border-radius: 12px;
    background: rgba(0, 145, 255, 0.04);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.upload-loading i {
    font-size: 1.4rem;
}


/* ==========================================================================
   TOOLTIPS — lightweight hover hints (added)
   ========================================================================== */
#app-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    background: #0f172a;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#app-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Make info icons look interactive */
[data-tooltip] {
    cursor: help;
}

/* [tz] / ??????? ??? ? (signer-view) ? ??? ??????/????????.
   ?????/??????? ???? ???????? ?????? ? ???? ?????????????? ?????????. */
#signer-view .template-var,
#signer-view .consent-var,
#signer-view .doc-field,
#signer-view .template-var.text-primary,
#signer-view .template-var.text-danger,
#signer-view .template-var.text-warning,
#signer-view .template-var.text-success {
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#signer-view .doc-field.empty {
    color: #000 !important;
    font-style: normal !important;
}

@media print {
    .template-var, .consent-var, .doc-field,
    .template-var.text-primary, .template-var.text-danger,
    .template-var.text-warning, .template-var.text-success {
        background-color: transparent !important;
        color: #000 !important;
        border: none !important;
    }
}

/* [tz3.1] ?????? ? ??????? ?????? / ?? ?? ??????????? ?????????/??????????:
   ??????? ????????, ???? ????????, ??????, ??????. !important ??????????
   ?????????? ????? ?? ????????????????? HTML ???????. */
#contract-modal-doc .template-var,
#contract-modal-doc .doc-field,
#contract-modal-doc .consent-var,
#contract-modal-doc [class*="text-"],
#contract-modal-doc [style*="color"],
#doc-body-content .template-var,
#doc-body-content .doc-field,
#doc-body-content .consent-var,
#doc-body-content [class*="text-"],
#doc-body-content [style*="color"],
#preview-contract-modal .template-var,
#preview-contract-modal .doc-field,
#preview-contract-modal .consent-var,
#preview-contract-modal [style*="color"],
#signer-view .doc-body .template-var,
#signer-view .doc-body .doc-field,
#signer-view .doc-body [style*="color"] {
    background: none !important;
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ????? ???????????? ????? ? ???? ?/?, ??? ??????? ?????????? ?????. */
#contract-modal-doc .doc-field.empty,
#doc-body-content .doc-field.empty,
#signer-view .doc-field.empty {
    color: #000 !important;
    font-style: normal !important;
    border: none !important;
    background: none !important;
}

/* [tz] ????????? ???????? ?????: ??????? ????????? ???? ?????? ???? ????
   ?????-?????? ????? (#editor-fields-sidebar.open ????? z-index 2000),
   ????? ?????????? "?? ????????" ? ??????? ??????????? ??? ???????. */
#edit-field-modal {
    z-index: 3000 !important;
}

/* [tz] Модалки из панели полей (карточка исполнителя, форма согласия) — выше #editor-fields-sidebar (z-index 2000). */
#add-landlord-card-modal,
#consent-form-modal {
    z-index: 3000 !important;
}
@media (max-width: 768px) {
    #edit-field-modal {
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #edit-field-modal .modal-card {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        padding: 1.25rem 1rem 2rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* ?????? ?????????? ???? ???? ????????? ??? ?? ??????? ? ??? ?????? ?????? ??????. */
}

/* [tz] ??? z-index: ????????? ??????? (??????????? ???????/??????), ???????????
    edit-field-modal (??? ??? ???????), ?????? ???? ???? ????. */
#object-config-modal, #object-instance-modal {
    z-index: 3100 !important;
}

/* [tz] ? ?????? ????????? ?????? "? ??????? ?????" ???? ?????? ???????
   (.bottom-nav / .editor-mobile-bottom-bar / .signer-sticky-bar ?????
   height:64px ? position:fixed;bottom:0 ? ????? ?????? ?? ???????????). */
@media (max-width: 768px) {
    #pwa-install-btn {
        bottom: calc(64px + 12px) !important;
        right: 12px !important;
        padding: 0.55rem 0.9rem !important;
        font-size: 0.82rem !important;
    }
}

/* [tz] ?????? ?????????? ?? ??????: ? ??????????? ??????? PDF/Word ????? ?????
   ????? (account-badge + PDF + Word + "???????" + "????????"). ???????? ??????? ??????. */
@media (max-width: 480px) {
    .signer-topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end !important;
        row-gap: 0.4rem;
    }
    #signer-download-group button {
        padding: 0 0.6rem !important;
        min-height: 36px !important;
    }
}

/* Pagination premium & mobile-friendly styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.pagination-container button {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.pagination-container button:hover:not(:disabled):not(.active) {
    background: var(--bg-input);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.pagination-container button.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 145, 255, 0.25);
}

.pagination-container button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-container span.dots {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0 0.25rem;
    user-select: none;
}

@media (max-width: 480px) {
    .pagination-container {
        gap: 0.25rem;
    }
    .pagination-container button {
        min-width: 32px;
        min-height: 32px;
        padding: 0.35rem 0.55rem;
        font-size: 0.78rem;
        border-radius: 8px;
    }
}

/* ============================================================
   PDF / PRINT — Убираем все рамки вокруг блоков ЭДО и Согласия,
   чтобы border не разрывался на границе страниц.
   ============================================================ */
@media print {
    .agreement-preview-box,
    .doc-pd-consent,
    .doc-edo-agreement {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .page-break-before-helper {
        page-break-before: always !important;
        break-before: page !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: hidden !important;
    }
}

/* [otp-ux] На мобильных кнопка «Подтвердить» встаёт под полем кода, чтобы не скроллить вбок. */
@media (max-width: 768px) {
    .otp-input-row {
        flex-direction: column;
    }
    .otp-input-row button {
        width: 100%;
    }
}