/* ==========================================
   StudentMitraa Resume Builder Styles
   ATS-Friendly Professional Resume Builder
   ========================================== */

/* ── Theme Tokens ── */
:root {
    color-scheme: light;
    --rb-page: #f0f4fa;
    --rb-surface: #ffffff;
    --rb-surface-soft: #eef4ff;
    --rb-text: #0f172a;
    --rb-muted: #64748b;
    --rb-line: #e2e8f0;
    --rb-brand: #2563eb;
    --rb-brand-dark: #1d4ed8;
    --rb-green: #059669;
    --rb-orange: #d97706;
    --rb-purple: #7c3aed;
    --rb-red: #dc2626;
    --rb-shadow: 0 4px 24px rgba(15,23,42,0.10);
    --rb-shadow-strong: 0 8px 32px rgba(15,23,42,0.15);
    --rb-radius: 14px;
    --rb-radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --rb-page: #07111f;
        --rb-surface: #0e1c30;
        --rb-surface-soft: #142641;
        --rb-text: #f1f5fb;
        --rb-muted: #94a3b8;
        --rb-line: #1e3050;
        --rb-brand: #60a5fa;
        --rb-brand-dark: #93c5fd;
        --rb-green: #34d399;
        --rb-orange: #fb923c;
        --rb-purple: #a78bfa;
        --rb-red: #f87171;
        --rb-shadow: 0 4px 24px rgba(0,0,0,0.35);
        --rb-shadow-strong: 0 8px 32px rgba(0,0,0,0.5);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--rb-page);
    color: var(--rb-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */
.rb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 60px;
    background: var(--rb-surface);
    border-bottom: 1px solid var(--rb-line);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--rb-shadow);
}

.rb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--rb-text);
    font-weight: 700;
    font-size: 1rem;
}
.rb-brand img { height: 32px; width: 32px; object-fit: contain; }
.rb-brand strong { color: var(--rb-brand); }

.rb-page-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--rb-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rb-page-title i { color: var(--rb-brand); }

.rb-back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--rb-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}
.rb-back-link:hover { color: var(--rb-brand); }

/* ══════════════════════════════════════════
   ATS BANNER
══════════════════════════════════════════ */
.rb-ats-banner {
    background: linear-gradient(90deg, #1d4ed8, #2563eb, #7c3aed);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.rb-ats-banner i { font-size: 1rem; }

/* ══════════════════════════════════════════
   MAIN SHELL (2-column layout)
══════════════════════════════════════════ */
.rb-shell {
    display: grid;
    grid-template-columns: 520px 1fr;
    height: calc(100vh - 94px);
    overflow: hidden;
}

/* ══════════════════════════════════════════
   LEFT FORM PANEL
══════════════════════════════════════════ */
.rb-form-panel {
    background: var(--rb-surface);
    border-right: 1px solid var(--rb-line);
    overflow-y: auto;
    padding: 28px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Scrollbar */
.rb-form-panel::-webkit-scrollbar { width: 4px; }
.rb-form-panel::-webkit-scrollbar-track { background: transparent; }
.rb-form-panel::-webkit-scrollbar-thumb { background: var(--rb-line); border-radius: 99px; }

/* ── Steps Progress ── */
.rb-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    flex-wrap: nowrap;
}
.rb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s;
    min-width: 60px;
}
.rb-step.active, .rb-step.done { opacity: 1; }
.rb-step-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--rb-surface-soft);
    border: 2px solid var(--rb-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--rb-muted);
    transition: all 0.3s;
}
.rb-step.active .rb-step-dot {
    background: var(--rb-brand);
    border-color: var(--rb-brand);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}
.rb-step.done .rb-step-dot {
    background: var(--rb-green);
    border-color: var(--rb-green);
    color: #fff;
}
.rb-step span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rb-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.rb-step.active span { color: var(--rb-brand); }
.rb-step.done span { color: var(--rb-green); }
.rb-step-line {
    flex: 1;
    height: 2px;
    background: var(--rb-line);
    margin-bottom: 20px;
    min-width: 12px;
}

/* ── Section ── */
.rb-section { display: none; animation: rbFadeIn 0.35s ease; }
.rb-section.active { display: block; }

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

.rb-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}
.rb-section-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.rb-section-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rb-text);
    line-height: 1.3;
}
.rb-section-header p {
    font-size: 0.82rem;
    color: var(--rb-muted);
    margin-top: 2px;
}

/* ── Field Grid ── */
.rb-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}
.rb-field-full { grid-column: 1 / -1; }

.rb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rb-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rb-text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.req { color: var(--rb-red); }
.rb-tip {
    font-size: 0.7rem;
    color: var(--rb-brand);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}

.rb-field input,
.rb-field textarea,
.rb-field select {
    padding: 10px 14px;
    border: 1.5px solid var(--rb-line);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-surface);
    color: var(--rb-text);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none;
}
.rb-field input:focus,
.rb-field textarea:focus,
.rb-field select:focus {
    border-color: var(--rb-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.rb-char-count {
    font-size: 0.7rem;
    color: var(--rb-muted);
    text-align: right;
}

/* ATS Hint */
.rb-ats-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(124,58,237,0.07));
    border: 1px solid rgba(37,99,235,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--rb-text);
    margin-bottom: 18px;
}
.rb-ats-hint i { color: var(--rb-brand); margin-top: 2px; flex-shrink: 0; }

/* ── Repeatable Entry Cards ── */
.rb-entry-card {
    background: var(--rb-surface-soft);
    border: 1.5px solid var(--rb-line);
    border-radius: var(--rb-radius);
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
}
.rb-entry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.rb-entry-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rb-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rb-entry-remove {
    background: none;
    border: none;
    color: var(--rb-red);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rb-entry-remove:hover { background: rgba(220,38,38,0.08); }

/* ── Add Button ── */
.rb-btn-add {
    width: 100%;
    padding: 11px;
    border: 2px dashed var(--rb-line);
    border-radius: var(--rb-radius-sm);
    background: transparent;
    color: var(--rb-brand);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 20px;
}
.rb-btn-add:hover {
    background: rgba(37,99,235,0.06);
    border-color: var(--rb-brand);
}

/* ── Nav Buttons ── */
.rb-nav-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    gap: 12px;
}
.rb-btn-prev {
    padding: 10px 20px;
    border: 1.5px solid var(--rb-line);
    border-radius: 99px;
    background: var(--rb-surface);
    color: var(--rb-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.rb-btn-prev:hover { border-color: var(--rb-brand); color: var(--rb-brand); }

.rb-btn-next {
    padding: 10px 22px;
    border: none;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--rb-brand), #7c3aed);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.rb-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); }

.rb-btn-download {
    padding: 12px 26px;
    border: none;
    border-radius: 99px;
    background: linear-gradient(135deg, #059669, #0d9488);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(5,150,105,0.35);
}
.rb-btn-download:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,0.45); }

/* ── Skill Tags ── */
.rb-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 4px;
}
.rb-skill-tag {
    padding: 3px 10px;
    background: rgba(37,99,235,0.1);
    color: var(--rb-brand);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Extras Accordion ── */
.rb-extras-block {
    border: 1.5px solid var(--rb-line);
    border-radius: var(--rb-radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.rb-extras-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    background: var(--rb-surface);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rb-text);
    transition: background 0.2s;
}
.rb-extras-toggle:hover { background: var(--rb-surface-soft); }
.rb-extras-toggle span { display: flex; align-items: center; gap: 10px; }
.rb-extras-toggle i.fa-solid { color: var(--rb-brand); }
.rb-chevron { transition: transform 0.3s; font-size: 0.8rem; color: var(--rb-muted); }
.rb-chevron.open { transform: rotate(180deg); }
.rb-extras-content {
    display: none;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--rb-line);
    background: var(--rb-surface-soft);
}
.rb-extras-content.open { display: block; }
.rb-extras-content input,
.rb-extras-content textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--rb-line);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-surface);
    color: var(--rb-text);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rb-extras-content input:focus,
.rb-extras-content textarea:focus {
    border-color: var(--rb-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* Skills section wrap */
.rb-skills-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   RIGHT PREVIEW PANEL
══════════════════════════════════════════ */
.rb-preview-panel {
    display: flex;
    flex-direction: column;
    background: #cbd5e1;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .rb-preview-panel { background: #020b18; }
}

.rb-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--rb-surface);
    border-bottom: 1px solid var(--rb-line);
    gap: 12px;
    flex-shrink: 0;
}
.rb-preview-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rb-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rb-preview-actions { display: flex; align-items: center; gap: 6px; }
.rb-tool-btn {
    background: var(--rb-surface-soft);
    border: 1px solid var(--rb-line);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--rb-text);
    font-family: inherit;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.rb-tool-btn:hover { background: var(--rb-line); }
.rb-zoom-val { font-size: 0.78rem; font-weight: 700; color: var(--rb-muted); min-width: 36px; text-align: center; }

.rb-preview-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.rb-preview-scroll::-webkit-scrollbar { width: 4px; }
.rb-preview-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.4); border-radius: 99px; }

.rb-preview-scale {
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* ══════════════════════════════════════════
   RESUME PAGE (A4 Preview)
══════════════════════════════════════════ */
.resume-page {
    width: 794px; /* A4 at 96dpi */
    min-height: 1122px;
    background: #ffffff;
    color: #1a1a2e;
    padding: 48px 52px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    position: relative;
}

/* Resume Header */
.res-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.res-name-block h1 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.res-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2563eb;
    margin-top: 4px;
}
.res-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    font-size: 0.75rem;
    color: #475569;
}
.res-contact span { display: flex; align-items: center; gap: 5px; }
.res-contact i { color: #2563eb; font-size: 0.7rem; }

.res-divider {
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: 99px;
    margin-bottom: 18px;
}

/* Section */
.res-section { margin-bottom: 18px; }
.res-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1.5px solid #e2e8f0;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.res-placeholder { font-size: 0.78rem; color: #94a3b8; font-style: italic; }
.res-summary-text { font-size: 0.82rem; color: #334155; line-height: 1.65; }

/* Education Entry */
.res-edu-entry {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.res-edu-entry:last-child { border-bottom: none; }
.res-edu-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.res-edu-degree { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.res-edu-school { font-size: 0.79rem; color: #2563eb; font-weight: 600; }
.res-edu-meta { font-size: 0.75rem; color: #64748b; white-space: nowrap; text-align: right; }
.res-edu-gpa { font-size: 0.75rem; color: #059669; font-weight: 600; }

/* Experience Entry */
.res-exp-entry {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.res-exp-entry:last-child { border-bottom: none; }
.res-exp-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.res-exp-title { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.res-exp-company { font-size: 0.79rem; color: #2563eb; font-weight: 600; }
.res-exp-meta { font-size: 0.75rem; color: #64748b; white-space: nowrap; text-align: right; }
.res-exp-bullets { margin-top: 7px; padding-left: 0; list-style: none; }
.res-exp-bullets li {
    font-size: 0.79rem;
    color: #334155;
    line-height: 1.55;
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.res-exp-bullets li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #2563eb;
    font-size: 0.65rem;
    top: 3px;
}

/* Skills */
.res-skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-skill-group { display: flex; flex-direction: column; gap: 4px; }
.res-skill-label { font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.res-skill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.res-skill-tag {
    padding: 2px 9px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Projects */
.res-proj-entry { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.res-proj-entry:last-child { border-bottom: none; }
.res-proj-title { font-size: 0.86rem; font-weight: 700; color: #0f172a; }
.res-proj-tech { font-size: 0.73rem; color: #7c3aed; font-weight: 600; margin-left: 6px; }
.res-proj-desc { font-size: 0.78rem; color: #334155; margin-top: 4px; line-height: 1.5; }

/* Certs */
.res-cert-entry { font-size: 0.82rem; color: #334155; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.res-cert-name { font-weight: 600; }
.res-cert-date { font-size: 0.72rem; color: #94a3b8; }

/* Achievements / Hobbies */
.res-plain-text { font-size: 0.8rem; color: #334155; line-height: 1.65; white-space: pre-line; }

/* ══════════════════════════════════════════
   ATS SCORE CARD
══════════════════════════════════════════ */
.rb-ats-score-card {
    background: var(--rb-surface);
    border-top: 1px solid var(--rb-line);
    padding: 14px 18px;
    flex-shrink: 0;
}
.rb-ats-score-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rb-text);
    margin-bottom: 8px;
}
.rb-ats-score-header i { color: var(--rb-brand); }
.rb-ats-score-val {
    margin-left: auto;
    font-size: 1rem;
    font-weight: 800;
    color: var(--rb-brand);
}
.rb-ats-bar-wrap {
    height: 6px;
    background: var(--rb-line);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}
.rb-ats-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.25,1,0.5,1);
}
.rb-ats-checks {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.72rem;
}
.rb-ats-checks li {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--rb-muted);
}
.rb-ats-checks li.done { color: var(--rb-green); }
.rb-ats-checks li.done i { color: var(--rb-green); }
.rb-ats-checks li i { color: var(--rb-line); }

/* ══════════════════════════════════════════
   DOWNLOAD OVERLAY
══════════════════════════════════════════ */
.rb-download-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7,17,31,0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.rb-download-overlay.visible { display: flex; }
.rb-download-spinner {
    background: var(--rb-surface);
    border-radius: 20px;
    padding: 40px 56px;
    text-align: center;
    box-shadow: var(--rb-shadow-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.rb-download-spinner i {
    font-size: 3rem;
    color: var(--rb-brand);
    animation: rb-pulse 1s infinite;
}
@keyframes rb-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.95); }
}
.rb-download-spinner p { font-weight: 600; color: var(--rb-muted); font-size: 0.9rem; }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.rb-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7,17,31,0.6);
    backdrop-filter: blur(4px);
    z-index: 500;
    align-items: center;
    justify-content: center;
}
.rb-modal-overlay.open { display: flex; }
.rb-modal {
    background: var(--rb-surface);
    border-radius: 20px;
    padding: 32px;
    width: 480px;
    max-width: 96vw;
    box-shadow: var(--rb-shadow-strong);
    position: relative;
}
.rb-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--rb-surface-soft);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
    color: var(--rb-muted);
    font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.rb-modal-close:hover { background: var(--rb-line); }
.rb-modal h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; color: var(--rb-text); }
.rb-template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rb-template-card { cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid var(--rb-line); transition: all 0.2s; }
.rb-template-card.active { border-color: var(--rb-brand); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.rb-tpl-preview {
    height: 100px;
    background: linear-gradient(135deg, #2563eb22, #7c3aed22);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--rb-brand); font-size: 0.9rem;
}
.rb-template-card span { display: block; text-align: center; padding: 8px; font-size: 0.8rem; font-weight: 600; color: var(--rb-text); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .rb-shell { grid-template-columns: 460px 1fr; }
}

@media (max-width: 900px) {
    .rb-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .rb-preview-panel {
        height: 600px;
    }
    .rb-topbar-center { display: none; }
}

@media (max-width: 600px) {
    .rb-form-panel { padding: 18px; }
    .rb-field-grid { grid-template-columns: 1fr; }
    .rb-steps { gap: 0; }
    .rb-step span { display: none; }
    .rb-topbar { padding: 0 16px; }
}

/* ══════════════════════════════════════════
   PRINT STYLES (for PDF)
══════════════════════════════════════════ */
@media print {
    body { background: #fff !important; }
    .rb-topbar, .rb-ats-banner, .rb-form-panel,
    .rb-preview-toolbar, .rb-ats-score-card,
    .rb-download-overlay { display: none !important; }
    .rb-shell { display: block !important; height: auto; }
    .rb-preview-panel { background: #fff !important; height: auto; overflow: visible; }
    .rb-preview-scroll { padding: 0 !important; overflow: visible; }
    .rb-preview-scale { transform: none !important; }
    .resume-page {
        box-shadow: none !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
    }
}

/* ══════════════════════════════════════════
   TEMPLATE PICKER BUTTON (rb-tpl-btn)
══════════════════════════════════════════ */
.rb-tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--rb-brand), #7c3aed);
    color: #fff;
    border: none;
    border-radius: 99px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(37,99,235,0.28);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.rb-tpl-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(37,99,235,0.38);
}
.rb-tpl-btn i { font-size: 0.85rem; }

/* ══════════════════════════════════════════
   SIDEBAR LAYOUT STRUCTURE
   (.res-sidebar, .res-main-wrap, etc.)
══════════════════════════════════════════ */

/* Base sidebar defaults — overridden by tpl-sidebar family */
.res-sidebar {
    display: none; /* hidden unless sidebar template active */
    flex-direction: column;
    gap: 0;
    background: #2563eb;
    padding: 32px 18px;
    min-height: 100%;
}

.res-main-wrap {
    flex: 1;
    min-width: 0;
    padding: 36px 38px;
}

/* Sidebar name block */
.res-sidebar-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
    word-break: break-word;
}

.res-sidebar-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
}

/* Sidebar section heading */
.res-sidebar-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 18px;
}

/* Contact item in sidebar */
.res-sidebar-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 7px;
    word-break: break-all;
}
.res-sidebar-contact-item i {
    width: 16px;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Sidebar skill/tag pill */
.res-sidebar-tag {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 99px;
    font-size: 0.67rem;
    font-weight: 600;
    margin: 2px 2px 2px 0;
    transition: background 0.2s;
}

/* Sidebar plain text (summary etc.) */
.res-sidebar-text {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.6;
}

/* Sidebar education / cert compact row */
.res-sidebar-item-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.res-sidebar-item-sub {
    font-size: 0.67rem;
    color: rgba(255,255,255,0.65);
    margin-top: 1px;
}

/* ══════════════════════════════════════════
   TEMPLATE GALLERY MODAL (50 Templates)
══════════════════════════════════════════ */

/* Full-screen overlay */
.tg-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7,17,31,0.75);
    backdrop-filter: blur(8px);
    z-index: 800;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tg-overlay.open { display: flex; }

/* Modal container */
.tg-modal {
    background: var(--rb-surface);
    border-radius: 22px;
    width: 100%;
    max-width: 1060px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    animation: tgSlideIn 0.3s cubic-bezier(0.22,1,0.36,1);
}

@keyframes tgSlideIn {
    from { opacity: 0; transform: scale(0.96) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal header */
.tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 0;
    flex-shrink: 0;
}
.tg-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tg-header-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rb-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tg-header-title i { color: var(--rb-brand); }
.tg-header-sub {
    font-size: 0.78rem;
    color: var(--rb-muted);
}

/* Close button */
.tg-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rb-surface-soft);
    border: 1px solid var(--rb-line);
    cursor: pointer;
    color: var(--rb-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tg-close:hover {
    background: var(--rb-line);
    color: var(--rb-text);
}

/* Toolbar (search + filters row) */
.tg-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Search input */
.tg-search {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
}
.tg-search i {
    position: absolute;
    left: 12px;
    color: var(--rb-muted);
    font-size: 0.8rem;
    pointer-events: none;
}
.tg-search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid var(--rb-line);
    border-radius: 99px;
    background: var(--rb-surface-soft);
    color: var(--rb-text);
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tg-search input:focus {
    border-color: var(--rb-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.tg-search input::placeholder { color: var(--rb-muted); }

/* Filter chips row */
.tg-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Individual filter chip */
.tg-filter {
    padding: 6px 14px;
    border: 1.5px solid var(--rb-line);
    border-radius: 99px;
    background: var(--rb-surface);
    color: var(--rb-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}
.tg-filter:hover {
    border-color: var(--rb-brand);
    color: var(--rb-brand);
    background: rgba(37,99,235,0.05);
}
.tg-filter.active {
    background: var(--rb-brand);
    border-color: var(--rb-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

/* Template grid */
.tg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 16px;
    padding: 4px 28px 28px;
    overflow-y: auto;
    flex: 1;
}
.tg-grid::-webkit-scrollbar { width: 5px; }
.tg-grid::-webkit-scrollbar-track { background: transparent; }
.tg-grid::-webkit-scrollbar-thumb { background: var(--rb-line); border-radius: 99px; }

/* Template card */
.tg-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--rb-line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--rb-surface);
}
.tg-card:hover {
    border-color: var(--rb-brand);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(37,99,235,0.15);
}
.tg-card.tg-active {
    border-color: var(--rb-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2), 0 6px 20px rgba(37,99,235,0.15);
}

/* Thumbnail wrapper */
.tg-thumb {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    background: #f8fafc;
    flex-shrink: 0;
}

/* Card label area */
.tg-card-info {
    padding: 9px 12px 10px;
    border-top: 1px solid var(--rb-line);
    background: var(--rb-surface);
}
.tg-card-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-card-family {
    font-size: 0.66rem;
    color: var(--rb-muted);
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 1px;
}

/* Active checkmark badge */
.tg-card.tg-active .tg-card-name::after {
    content: ' ✓';
    color: var(--rb-brand);
}

/* ══════════════════════════════════════════
   THUMBNAIL INNER ELEMENTS
   (miniature resume previews inside .tg-thumb)
══════════════════════════════════════════ */

/* Shared thumb structure helpers */
.tg-thumb-inner {
    position: absolute;
    inset: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0px; /* suppress text noise */
}

.tg-thumb-line {
    height: 3px;
    border-radius: 2px;
    background: #c7d2fe;
    width: 100%;
}
.tg-thumb-line.short { width: 55%; }
.tg-thumb-line.shorter { width: 35%; }
.tg-thumb-line.xs { width: 25%; height: 2px; }
.tg-thumb-line.thin { height: 2px; background: #e2e8f0; }
.tg-thumb-line.dark { background: #475569; }
.tg-thumb-line.accent { background: var(--tg-accent, #2563eb); }
.tg-thumb-line.white { background: rgba(255,255,255,0.7); }

.tg-thumb-block {
    background: #e2e8f0;
    border-radius: 2px;
    height: 6px;
    width: 100%;
}
.tg-thumb-block.accent-bg { background: var(--tg-accent, #2563eb); opacity: 0.18; }

.tg-thumb-divider {
    height: 1px;
    background: #e2e8f0;
    width: 100%;
    margin: 1px 0;
}
.tg-thumb-divider.accent { background: var(--tg-accent, #2563eb); height: 2px; }

.tg-thumb-row {
    display: flex;
    gap: 3px;
    align-items: center;
}

.tg-thumb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tg-accent, #2563eb);
    flex-shrink: 0;
}

/* ── Classic thumbnail ── */
.tg-thumb-classic { --tg-accent: #2563eb; }
.tg-thumb-classic .tg-thumb-inner { gap: 3px; }
.tg-thumb-classic .tg-th-header {
    padding-bottom: 5px;
    border-bottom: 2px solid var(--tg-accent);
    margin-bottom: 3px;
}
.tg-thumb-classic .tg-th-name {
    height: 5px;
    width: 60%;
    background: #1e293b;
    border-radius: 2px;
    margin-bottom: 2px;
}
.tg-thumb-classic .tg-th-sub {
    height: 3px;
    width: 40%;
    background: var(--tg-accent);
    border-radius: 1px;
}
.tg-thumb-classic .tg-th-section-label {
    height: 3px;
    width: 38%;
    background: var(--tg-accent);
    border-radius: 1px;
    margin-bottom: 1px;
}
.tg-thumb-classic .tg-th-section-underline {
    height: 1px;
    width: 100%;
    background: #e2e8f0;
    margin-bottom: 3px;
}
.tg-thumb-classic .tg-th-row {
    height: 2px;
    width: 90%;
    background: #cbd5e1;
    border-radius: 1px;
    margin-bottom: 1px;
}
.tg-thumb-classic .tg-th-row.w70 { width: 70%; }
.tg-thumb-classic .tg-th-row.w50 { width: 50%; }
.tg-thumb-classic .tg-th-tags {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}
.tg-thumb-classic .tg-th-tag {
    height: 4px;
    width: 20px;
    background: rgba(37,99,235,0.15);
    border-radius: 99px;
}

/* ── Modern thumbnail ── */
.tg-thumb-modern { --tg-accent: #2563eb; }
.tg-thumb-modern .tg-thumb-inner { gap: 3px; }
.tg-thumb-modern .tg-th-header {
    background: rgba(37,99,235,0.08);
    border-radius: 3px;
    padding: 5px 5px 4px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tg-thumb-modern .tg-th-name {
    height: 5px;
    width: 55%;
    background: #1e293b;
    border-radius: 2px;
}
.tg-thumb-modern .tg-th-sub {
    height: 3px;
    width: 35%;
    background: var(--tg-accent);
    border-radius: 1px;
}
.tg-thumb-modern .tg-th-section-block {
    display: flex;
    gap: 3px;
    align-items: stretch;
    margin-bottom: 3px;
}
.tg-thumb-modern .tg-th-section-bar {
    width: 3px;
    border-radius: 1px;
    background: var(--tg-accent);
    flex-shrink: 0;
}
.tg-thumb-modern .tg-th-section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tg-thumb-modern .tg-th-section-label {
    height: 3px;
    width: 38%;
    background: var(--tg-accent);
    border-radius: 1px;
}
.tg-thumb-modern .tg-th-row {
    height: 2px;
    background: #cbd5e1;
    border-radius: 1px;
}
.tg-thumb-modern .tg-th-row.w80 { width: 80%; }
.tg-thumb-modern .tg-th-row.w60 { width: 60%; }
.tg-thumb-modern .tg-th-tag {
    display: inline-block;
    height: 5px;
    width: 18px;
    background: var(--tg-accent);
    border-radius: 99px;
    opacity: 0.85;
}
.tg-thumb-modern .tg-th-tags { display: flex; gap: 2px; margin-top: 1px; }

/* ── Banner thumbnail ── */
.tg-thumb-banner { --tg-accent: #2563eb; }
.tg-thumb-banner .tg-thumb-inner { gap: 3px; padding: 0; }
.tg-thumb-banner .tg-th-strip {
    height: 28%;
    background: var(--tg-accent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5px 8px 5px;
    gap: 2px;
}
.tg-thumb-banner .tg-th-name {
    height: 5px;
    width: 55%;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
}
.tg-thumb-banner .tg-th-sub {
    height: 3px;
    width: 38%;
    background: rgba(255,255,255,0.55);
    border-radius: 1px;
}
.tg-thumb-banner .tg-th-contact-row {
    height: 2px;
    width: 80%;
    background: rgba(255,255,255,0.4);
    border-radius: 1px;
}
.tg-thumb-banner .tg-th-body {
    flex: 1;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tg-thumb-banner .tg-th-section-label {
    height: 3px;
    width: 35%;
    background: var(--tg-accent);
    border-radius: 1px;
}
.tg-thumb-banner .tg-th-row {
    height: 2px;
    background: #cbd5e1;
    border-radius: 1px;
}
.tg-thumb-banner .tg-th-row.w85 { width: 85%; }
.tg-thumb-banner .tg-th-row.w65 { width: 65%; }
.tg-thumb-banner .tg-th-divider { height: 1px; background: #e2e8f0; width: 100%; margin: 1px 0; }

/* ── Sidebar thumbnail ── */
.tg-thumb-sidebar { --tg-accent: #2563eb; }
.tg-thumb-sidebar .tg-thumb-inner {
    padding: 0;
    flex-direction: row;
    gap: 0;
}
.tg-thumb-sidebar .tg-th-left {
    width: 38%;
    background: var(--tg-accent);
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.tg-thumb-sidebar .tg-th-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    margin-bottom: 3px;
}
.tg-thumb-sidebar .tg-th-name {
    height: 3px;
    width: 80%;
    background: rgba(255,255,255,0.85);
    border-radius: 1px;
}
.tg-thumb-sidebar .tg-th-sub {
    height: 2px;
    width: 65%;
    background: rgba(255,255,255,0.45);
    border-radius: 1px;
}
.tg-thumb-sidebar .tg-th-sid-label {
    height: 2px;
    width: 70%;
    background: rgba(255,255,255,0.35);
    border-radius: 1px;
    margin-top: 4px;
}
.tg-thumb-sidebar .tg-th-sid-row {
    height: 2px;
    width: 85%;
    background: rgba(255,255,255,0.2);
    border-radius: 1px;
}
.tg-thumb-sidebar .tg-th-right {
    flex: 1;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tg-thumb-sidebar .tg-th-section-label {
    height: 3px;
    width: 40%;
    background: var(--tg-accent);
    border-radius: 1px;
    margin-bottom: 1px;
}
.tg-thumb-sidebar .tg-th-row {
    height: 2px;
    background: #cbd5e1;
    border-radius: 1px;
}
.tg-thumb-sidebar .tg-th-row.w80 { width: 80%; }
.tg-thumb-sidebar .tg-th-row.w60 { width: 60%; }
.tg-thumb-sidebar .tg-th-divider { height: 1px; background: #e2e8f0; width: 100%; margin: 2px 0; }

/* ── Minimal thumbnail ── */
.tg-thumb-minimal { --tg-accent: #475569; }
.tg-thumb-minimal .tg-thumb-inner { gap: 3px; }
.tg-thumb-minimal .tg-th-header {
    border-bottom: 1px solid #1e293b;
    padding-bottom: 5px;
    margin-bottom: 4px;
}
.tg-thumb-minimal .tg-th-name {
    height: 4px;
    width: 50%;
    background: #0f172a;
    border-radius: 1px;
    margin-bottom: 2px;
}
.tg-thumb-minimal .tg-th-sub {
    height: 2px;
    width: 35%;
    background: #64748b;
    border-radius: 1px;
}
.tg-thumb-minimal .tg-th-section-label {
    height: 2px;
    width: 30%;
    background: #334155;
    border-radius: 1px;
    margin-bottom: 2px;
    letter-spacing: 0.1em;
}
.tg-thumb-minimal .tg-th-row {
    height: 2px;
    background: #e2e8f0;
    border-radius: 1px;
}
.tg-thumb-minimal .tg-th-row.w75 { width: 75%; }
.tg-thumb-minimal .tg-th-row.w55 { width: 55%; }
.tg-thumb-minimal .tg-th-divider { height: 1px; background: #f1f5f9; margin: 2px 0; }
.tg-thumb-minimal .tg-th-dot-row {
    display: flex;
    gap: 5px;
    align-items: center;
}
.tg-thumb-minimal .tg-th-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #94a3b8;
}
.tg-thumb-minimal .tg-th-dot-line {
    height: 2px;
    width: 28px;
    background: #e2e8f0;
    border-radius: 1px;
}

/* ══════════════════════════════════════════
   50-TEMPLATE CSS SYSTEM
   Color Theme Tokens via attribute selectors
══════════════════════════════════════════ */

/* ── Base template token defaults ── */
.resume-page {
    --tp-p:  #2563eb;
    --tp-pd: #1d4ed8;
    --tp-pa: #eff6ff;
    --tp-pt: #0f172a;
    --tp-ps: #64748b;
}

/* ── Color Themes ── */
.resume-page[class*="-blue"] {
    --tp-p:  #2563eb;
    --tp-pd: #1d4ed8;
    --tp-pa: #eff6ff;
    --tp-pt: #0f172a;
    --tp-ps: #64748b;
}

.resume-page[class*="-navy"] {
    --tp-p:  #1e3a5f;
    --tp-pd: #162d49;
    --tp-pa: #e8eef8;
    --tp-pt: #0c1928;
    --tp-ps: #4a6380;
}

.resume-page[class*="-green"] {
    --tp-p:  #059669;
    --tp-pd: #047857;
    --tp-pa: #ecfdf5;
    --tp-pt: #064e3b;
    --tp-ps: #6b7280;
}

.resume-page[class*="-purple"] {
    --tp-p:  #7c3aed;
    --tp-pd: #6d28d9;
    --tp-pa: #f5f3ff;
    --tp-pt: #2e1065;
    --tp-ps: #6b7280;
}

.resume-page[class*="-teal"] {
    --tp-p:  #0d9488;
    --tp-pd: #0f766e;
    --tp-pa: #f0fdfa;
    --tp-pt: #134e4a;
    --tp-ps: #6b7280;
}

.resume-page[class*="-rose"] {
    --tp-p:  #e11d48;
    --tp-pd: #be123c;
    --tp-pa: #fff1f2;
    --tp-pt: #4c0519;
    --tp-ps: #6b7280;
}

.resume-page[class*="-orange"] {
    --tp-p:  #ea580c;
    --tp-pd: #c2410c;
    --tp-pa: #fff7ed;
    --tp-pt: #431407;
    --tp-ps: #6b7280;
}

.resume-page[class*="-slate"] {
    --tp-p:  #475569;
    --tp-pd: #334155;
    --tp-pa: #f8fafc;
    --tp-pt: #0f172a;
    --tp-ps: #64748b;
}

.resume-page[class*="-dark"] {
    --tp-p:  #334155;
    --tp-pd: #1e293b;
    --tp-pa: #f1f5f9;
    --tp-pt: #0f172a;
    --tp-ps: #475569;
}

.resume-page[class*="-indigo"] {
    --tp-p:  #4338ca;
    --tp-pd: #3730a3;
    --tp-pa: #eef2ff;
    --tp-pt: #1e1b4b;
    --tp-ps: #6b7280;
}

/* ══════════════════════════════════════════
   FAMILY: CLASSIC
   Underline section titles, gradient divider,
   colored school/company names, light skill tags
══════════════════════════════════════════ */
.resume-page[class*="tpl-classic"] .res-section-title {
    color: var(--tp-p);
    border-bottom: 2px solid var(--tp-p);
    padding-bottom: 4px;
    margin-bottom: 10px;
    text-decoration: none;
}
.resume-page[class*="tpl-classic"] .res-divider {
    background: linear-gradient(90deg, var(--tp-p), var(--tp-pd));
    height: 3px;
}
.resume-page[class*="tpl-classic"] .res-edu-school,
.resume-page[class*="tpl-classic"] .res-exp-company {
    color: var(--tp-p);
    font-weight: 600;
}
.resume-page[class*="tpl-classic"] .res-skill-tag {
    background: var(--tp-pa);
    color: var(--tp-pd);
    border: 1px solid rgba(0,0,0,0.06);
}
.resume-page[class*="tpl-classic"] .res-title {
    color: var(--tp-p);
}
.resume-page[class*="tpl-classic"] .res-contact i {
    color: var(--tp-p);
}
.resume-page[class*="tpl-classic"] .res-exp-bullets li::before {
    color: var(--tp-p);
}
.resume-page[class*="tpl-classic"] .res-proj-tech {
    color: var(--tp-p);
}

/* ══════════════════════════════════════════
   FAMILY: MODERN
   Left-border section titles, filled skill tags,
   contact block with accent background
══════════════════════════════════════════ */
.resume-page[class*="tpl-modern"] .res-section-title {
    border-bottom: none;
    border-left: 4px solid var(--tp-p);
    padding-left: 10px;
    padding-bottom: 0;
    background: var(--tp-pa);
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--tp-p);
    border-radius: 0 4px 4px 0;
}
.resume-page[class*="tpl-modern"] .res-skill-tag {
    background: var(--tp-p);
    color: #fff;
    border-radius: 4px;
}
.resume-page[class*="tpl-modern"] .res-contact {
    background: var(--tp-pa);
    border-radius: 8px;
    padding: 8px 14px;
    border-left: 3px solid var(--tp-p);
}
.resume-page[class*="tpl-modern"] .res-title {
    color: var(--tp-p);
}
.resume-page[class*="tpl-modern"] .res-contact i {
    color: var(--tp-p);
}
.resume-page[class*="tpl-modern"] .res-edu-school,
.resume-page[class*="tpl-modern"] .res-exp-company {
    color: var(--tp-p);
}
.resume-page[class*="tpl-modern"] .res-exp-bullets li::before {
    color: var(--tp-p);
}
.resume-page[class*="tpl-modern"] .res-divider {
    background: linear-gradient(90deg, var(--tp-p), var(--tp-pa));
}

/* ══════════════════════════════════════════
   FAMILY: BANNER
   Full-width colored header block,
   white name/contact text on colored bg
══════════════════════════════════════════ */
.resume-page[class*="tpl-banner"] {
    padding: 0;
    overflow: hidden;
}
.resume-page[class*="tpl-banner"] .res-main-wrap {
    padding: 36px 52px 48px;
}
.resume-page[class*="tpl-banner"] .res-header {
    background: var(--tp-p);
    padding: 36px 52px 28px;
    margin-bottom: 0;
    align-items: flex-end;
    gap: 16px;
}
.resume-page[class*="tpl-banner"] .res-name-block h1 {
    color: #ffffff;
}
.resume-page[class*="tpl-banner"] .res-title {
    color: rgba(255,255,255,0.8);
}
.resume-page[class*="tpl-banner"] .res-contact {
    color: rgba(255,255,255,0.85);
    align-items: flex-end;
}
.resume-page[class*="tpl-banner"] .res-contact i {
    color: rgba(255,255,255,0.6);
}
.resume-page[class*="tpl-banner"] .res-divider {
    height: 4px;
    background: var(--tp-pd);
    border-radius: 0;
    margin-bottom: 0;
}
.resume-page[class*="tpl-banner"] .res-section-title {
    color: var(--tp-p);
    border-bottom: 2px solid var(--tp-pa);
    padding-bottom: 4px;
}
.resume-page[class*="tpl-banner"] .res-edu-school,
.resume-page[class*="tpl-banner"] .res-exp-company {
    color: var(--tp-p);
}
.resume-page[class*="tpl-banner"] .res-skill-tag {
    background: var(--tp-pa);
    color: var(--tp-pd);
}
.resume-page[class*="tpl-banner"] .res-exp-bullets li::before {
    color: var(--tp-p);
}

/* ══════════════════════════════════════════
   FAMILY: SIDEBAR
   Two-column grid layout with colored left panel
══════════════════════════════════════════ */
.resume-page[class*="tpl-sidebar"] {
    display: grid;
    grid-template-columns: 215px 1fr;
    padding: 0;
    overflow: hidden;
}

/* Show sidebar panel */
.resume-page[class*="tpl-sidebar"] .res-sidebar {
    display: flex;
    background: var(--tp-p);
}

/* Hide the normal header (sidebar handles name/contact) */
.resume-page[class*="tpl-sidebar"] .res-header,
.resume-page[class*="tpl-sidebar"] .res-contact,
.resume-page[class*="tpl-sidebar"] .res-divider {
    display: none;
}

/* Main content area */
.resume-page[class*="tpl-sidebar"] .res-main-wrap {
    padding: 36px 38px;
    background: #ffffff;
}

/* Section titles in the main area */
.resume-page[class*="tpl-sidebar"] .res-section-title {
    color: var(--tp-p);
    border-bottom: 2px solid var(--tp-pa);
    padding-bottom: 4px;
}

/* Sidebar tag accent */
.resume-page[class*="tpl-sidebar"] .res-sidebar-tag {
    background: rgba(255,255,255,0.18);
}

/* School/company names accent */
.resume-page[class*="tpl-sidebar"] .res-edu-school,
.resume-page[class*="tpl-sidebar"] .res-exp-company {
    color: var(--tp-p);
}

/* Skill tags in main area */
.resume-page[class*="tpl-sidebar"] .res-skill-tag {
    background: var(--tp-pa);
    color: var(--tp-pd);
}

/* Bullet color */
.resume-page[class*="tpl-sidebar"] .res-exp-bullets li::before {
    color: var(--tp-p);
}

/* ══════════════════════════════════════════
   FAMILY: MINIMAL
   Serif fonts, ultra-spaced uppercase headings,
   italic exp/edu titles, dot-separated skills
══════════════════════════════════════════ */
.resume-page[class*="tpl-minimal"] {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1a1a1a;
}
.resume-page[class*="tpl-minimal"] .res-name-block h1 {
    font-family: 'Georgia', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111111;
}
.resume-page[class*="tpl-minimal"] .res-title {
    color: #555555;
    font-style: italic;
    font-weight: 400;
    font-family: 'Georgia', serif;
}
.resume-page[class*="tpl-minimal"] .res-section-title {
    font-family: 'Georgia', serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #333333;
    border-bottom: 1px solid #c0c0c0;
    padding-bottom: 4px;
}
.resume-page[class*="tpl-minimal"] .res-divider {
    background: #555555;
    height: 1px;
    border-radius: 0;
    opacity: 0.4;
}
.resume-page[class*="tpl-minimal"] .res-edu-degree,
.resume-page[class*="tpl-minimal"] .res-exp-title {
    font-style: italic;
    font-family: 'Georgia', serif;
    color: #111111;
}
.resume-page[class*="tpl-minimal"] .res-edu-school,
.resume-page[class*="tpl-minimal"] .res-exp-company {
    color: #333333;
    font-weight: 600;
    font-family: 'Georgia', serif;
    font-style: normal;
}
.resume-page[class*="tpl-minimal"] .res-exp-bullets li::before {
    content: '–';
    color: #999999;
}
.resume-page[class*="tpl-minimal"] .res-contact i {
    color: #777777;
}

/* Minimal skill tags: dot-separated appearance */
.resume-page[class*="tpl-minimal"] .res-skill-tag {
    background: transparent;
    color: #333333;
    border-radius: 0;
    padding: 0;
    font-size: 0.72rem;
    font-family: 'Georgia', serif;
    font-weight: 400;
}
.resume-page[class*="tpl-minimal"] .res-skill-tag + .res-skill-tag::before {
    content: ' · ';
    color: #999999;
}
.resume-page[class*="tpl-minimal"] .res-skill-tags {
    gap: 2px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   THUMBNAIL COLOR OVERRIDES
   Per-color accent for each thumbnail family
   Uses inline style or data attribute approach;
   here we set --tg-accent via class combos
══════════════════════════════════════════ */

/* Classic color variants */
.tg-thumb-classic[data-color="navy"]   { --tg-accent: #1e3a5f; }
.tg-thumb-classic[data-color="green"]  { --tg-accent: #059669; }
.tg-thumb-classic[data-color="purple"] { --tg-accent: #7c3aed; }
.tg-thumb-classic[data-color="teal"]   { --tg-accent: #0d9488; }
.tg-thumb-classic[data-color="rose"]   { --tg-accent: #e11d48; }
.tg-thumb-classic[data-color="orange"] { --tg-accent: #ea580c; }
.tg-thumb-classic[data-color="slate"]  { --tg-accent: #475569; }
.tg-thumb-classic[data-color="dark"]   { --tg-accent: #334155; }
.tg-thumb-classic[data-color="indigo"] { --tg-accent: #4338ca; }

/* Modern color variants */
.tg-thumb-modern[data-color="navy"]   { --tg-accent: #1e3a5f; }
.tg-thumb-modern[data-color="green"]  { --tg-accent: #059669; }
.tg-thumb-modern[data-color="purple"] { --tg-accent: #7c3aed; }
.tg-thumb-modern[data-color="teal"]   { --tg-accent: #0d9488; }
.tg-thumb-modern[data-color="rose"]   { --tg-accent: #e11d48; }
.tg-thumb-modern[data-color="orange"] { --tg-accent: #ea580c; }
.tg-thumb-modern[data-color="slate"]  { --tg-accent: #475569; }
.tg-thumb-modern[data-color="dark"]   { --tg-accent: #334155; }
.tg-thumb-modern[data-color="indigo"] { --tg-accent: #4338ca; }

/* Banner color variants */
.tg-thumb-banner[data-color="navy"]   { --tg-accent: #1e3a5f; }
.tg-thumb-banner[data-color="green"]  { --tg-accent: #059669; }
.tg-thumb-banner[data-color="purple"] { --tg-accent: #7c3aed; }
.tg-thumb-banner[data-color="teal"]   { --tg-accent: #0d9488; }
.tg-thumb-banner[data-color="rose"]   { --tg-accent: #e11d48; }
.tg-thumb-banner[data-color="orange"] { --tg-accent: #ea580c; }
.tg-thumb-banner[data-color="slate"]  { --tg-accent: #475569; }
.tg-thumb-banner[data-color="dark"]   { --tg-accent: #334155; }
.tg-thumb-banner[data-color="indigo"] { --tg-accent: #4338ca; }

/* Sidebar color variants */
.tg-thumb-sidebar[data-color="navy"]   { --tg-accent: #1e3a5f; }
.tg-thumb-sidebar[data-color="green"]  { --tg-accent: #059669; }
.tg-thumb-sidebar[data-color="purple"] { --tg-accent: #7c3aed; }
.tg-thumb-sidebar[data-color="teal"]   { --tg-accent: #0d9488; }
.tg-thumb-sidebar[data-color="rose"]   { --tg-accent: #e11d48; }
.tg-thumb-sidebar[data-color="orange"] { --tg-accent: #ea580c; }
.tg-thumb-sidebar[data-color="slate"]  { --tg-accent: #475569; }
.tg-thumb-sidebar[data-color="dark"]   { --tg-accent: #334155; }
.tg-thumb-sidebar[data-color="indigo"] { --tg-accent: #4338ca; }

/* Minimal color variants */
.tg-thumb-minimal[data-color="navy"]   { --tg-accent: #1e3a5f; }
.tg-thumb-minimal[data-color="green"]  { --tg-accent: #059669; }
.tg-thumb-minimal[data-color="purple"] { --tg-accent: #7c3aed; }
.tg-thumb-minimal[data-color="teal"]   { --tg-accent: #0d9488; }
.tg-thumb-minimal[data-color="rose"]   { --tg-accent: #e11d48; }
.tg-thumb-minimal[data-color="orange"] { --tg-accent: #ea580c; }
.tg-thumb-minimal[data-color="slate"]  { --tg-accent: #475569; }
.tg-thumb-minimal[data-color="dark"]   { --tg-accent: #334155; }
.tg-thumb-minimal[data-color="indigo"] { --tg-accent: #4338ca; }

/* ══════════════════════════════════════════
   50 EXPLICIT TEMPLATE IDs
   Each template: family + color combination
   Naming: tpl-{family}-{color}-{n}
   where {n} is a 1-based index within that family
   Families × colors:
     classic  × 10 colors = 10 templates (1-10)
     modern   × 10 colors = 10 templates (11-20)
     banner   × 10 colors = 10 templates (21-30)
     sidebar  × 10 colors = 10 templates (31-40)
     minimal  × 10 colors = 10 templates (41-50)
══════════════════════════════════════════ */

/* ── Classic 01-10 ── */
.tpl-classic-blue-1   { --tp-p:#2563eb; --tp-pd:#1d4ed8; --tp-pa:#eff6ff; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-classic-navy-2   { --tp-p:#1e3a5f; --tp-pd:#162d49; --tp-pa:#e8eef8; --tp-pt:#0c1928; --tp-ps:#4a6380; }
.tpl-classic-green-3  { --tp-p:#059669; --tp-pd:#047857; --tp-pa:#ecfdf5; --tp-pt:#064e3b; --tp-ps:#6b7280; }
.tpl-classic-purple-4 { --tp-p:#7c3aed; --tp-pd:#6d28d9; --tp-pa:#f5f3ff; --tp-pt:#2e1065; --tp-ps:#6b7280; }
.tpl-classic-teal-5   { --tp-p:#0d9488; --tp-pd:#0f766e; --tp-pa:#f0fdfa; --tp-pt:#134e4a; --tp-ps:#6b7280; }
.tpl-classic-rose-6   { --tp-p:#e11d48; --tp-pd:#be123c; --tp-pa:#fff1f2; --tp-pt:#4c0519; --tp-ps:#6b7280; }
.tpl-classic-orange-7 { --tp-p:#ea580c; --tp-pd:#c2410c; --tp-pa:#fff7ed; --tp-pt:#431407; --tp-ps:#6b7280; }
.tpl-classic-slate-8  { --tp-p:#475569; --tp-pd:#334155; --tp-pa:#f8fafc; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-classic-dark-9   { --tp-p:#334155; --tp-pd:#1e293b; --tp-pa:#f1f5f9; --tp-pt:#0f172a; --tp-ps:#475569; }
.tpl-classic-indigo-10 { --tp-p:#4338ca; --tp-pd:#3730a3; --tp-pa:#eef2ff; --tp-pt:#1e1b4b; --tp-ps:#6b7280; }

/* ── Modern 11-20 ── */
.tpl-modern-blue-11   { --tp-p:#2563eb; --tp-pd:#1d4ed8; --tp-pa:#eff6ff; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-modern-navy-12   { --tp-p:#1e3a5f; --tp-pd:#162d49; --tp-pa:#e8eef8; --tp-pt:#0c1928; --tp-ps:#4a6380; }
.tpl-modern-green-13  { --tp-p:#059669; --tp-pd:#047857; --tp-pa:#ecfdf5; --tp-pt:#064e3b; --tp-ps:#6b7280; }
.tpl-modern-purple-14 { --tp-p:#7c3aed; --tp-pd:#6d28d9; --tp-pa:#f5f3ff; --tp-pt:#2e1065; --tp-ps:#6b7280; }
.tpl-modern-teal-15   { --tp-p:#0d9488; --tp-pd:#0f766e; --tp-pa:#f0fdfa; --tp-pt:#134e4a; --tp-ps:#6b7280; }
.tpl-modern-rose-16   { --tp-p:#e11d48; --tp-pd:#be123c; --tp-pa:#fff1f2; --tp-pt:#4c0519; --tp-ps:#6b7280; }
.tpl-modern-orange-17 { --tp-p:#ea580c; --tp-pd:#c2410c; --tp-pa:#fff7ed; --tp-pt:#431407; --tp-ps:#6b7280; }
.tpl-modern-slate-18  { --tp-p:#475569; --tp-pd:#334155; --tp-pa:#f8fafc; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-modern-dark-19   { --tp-p:#334155; --tp-pd:#1e293b; --tp-pa:#f1f5f9; --tp-pt:#0f172a; --tp-ps:#475569; }
.tpl-modern-indigo-20 { --tp-p:#4338ca; --tp-pd:#3730a3; --tp-pa:#eef2ff; --tp-pt:#1e1b4b; --tp-ps:#6b7280; }

/* ── Banner 21-30 ── */
.tpl-banner-blue-21   { --tp-p:#2563eb; --tp-pd:#1d4ed8; --tp-pa:#eff6ff; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-banner-navy-22   { --tp-p:#1e3a5f; --tp-pd:#162d49; --tp-pa:#e8eef8; --tp-pt:#0c1928; --tp-ps:#4a6380; }
.tpl-banner-green-23  { --tp-p:#059669; --tp-pd:#047857; --tp-pa:#ecfdf5; --tp-pt:#064e3b; --tp-ps:#6b7280; }
.tpl-banner-purple-24 { --tp-p:#7c3aed; --tp-pd:#6d28d9; --tp-pa:#f5f3ff; --tp-pt:#2e1065; --tp-ps:#6b7280; }
.tpl-banner-teal-25   { --tp-p:#0d9488; --tp-pd:#0f766e; --tp-pa:#f0fdfa; --tp-pt:#134e4a; --tp-ps:#6b7280; }
.tpl-banner-rose-26   { --tp-p:#e11d48; --tp-pd:#be123c; --tp-pa:#fff1f2; --tp-pt:#4c0519; --tp-ps:#6b7280; }
.tpl-banner-orange-27 { --tp-p:#ea580c; --tp-pd:#c2410c; --tp-pa:#fff7ed; --tp-pt:#431407; --tp-ps:#6b7280; }
.tpl-banner-slate-28  { --tp-p:#475569; --tp-pd:#334155; --tp-pa:#f8fafc; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-banner-dark-29   { --tp-p:#334155; --tp-pd:#1e293b; --tp-pa:#f1f5f9; --tp-pt:#0f172a; --tp-ps:#475569; }
.tpl-banner-indigo-30 { --tp-p:#4338ca; --tp-pd:#3730a3; --tp-pa:#eef2ff; --tp-pt:#1e1b4b; --tp-ps:#6b7280; }

/* ── Sidebar 31-40 ── */
.tpl-sidebar-blue-31   { --tp-p:#2563eb; --tp-pd:#1d4ed8; --tp-pa:#eff6ff; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-sidebar-navy-32   { --tp-p:#1e3a5f; --tp-pd:#162d49; --tp-pa:#e8eef8; --tp-pt:#0c1928; --tp-ps:#4a6380; }
.tpl-sidebar-green-33  { --tp-p:#059669; --tp-pd:#047857; --tp-pa:#ecfdf5; --tp-pt:#064e3b; --tp-ps:#6b7280; }
.tpl-sidebar-purple-34 { --tp-p:#7c3aed; --tp-pd:#6d28d9; --tp-pa:#f5f3ff; --tp-pt:#2e1065; --tp-ps:#6b7280; }
.tpl-sidebar-teal-35   { --tp-p:#0d9488; --tp-pd:#0f766e; --tp-pa:#f0fdfa; --tp-pt:#134e4a; --tp-ps:#6b7280; }
.tpl-sidebar-rose-36   { --tp-p:#e11d48; --tp-pd:#be123c; --tp-pa:#fff1f2; --tp-pt:#4c0519; --tp-ps:#6b7280; }
.tpl-sidebar-orange-37 { --tp-p:#ea580c; --tp-pd:#c2410c; --tp-pa:#fff7ed; --tp-pt:#431407; --tp-ps:#6b7280; }
.tpl-sidebar-slate-38  { --tp-p:#475569; --tp-pd:#334155; --tp-pa:#f8fafc; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-sidebar-dark-39   { --tp-p:#334155; --tp-pd:#1e293b; --tp-pa:#f1f5f9; --tp-pt:#0f172a; --tp-ps:#475569; }
.tpl-sidebar-indigo-40 { --tp-p:#4338ca; --tp-pd:#3730a3; --tp-pa:#eef2ff; --tp-pt:#1e1b4b; --tp-ps:#6b7280; }

/* ── Minimal 41-50 ── */
.tpl-minimal-blue-41   { --tp-p:#2563eb; --tp-pd:#1d4ed8; --tp-pa:#eff6ff; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-minimal-navy-42   { --tp-p:#1e3a5f; --tp-pd:#162d49; --tp-pa:#e8eef8; --tp-pt:#0c1928; --tp-ps:#4a6380; }
.tpl-minimal-green-43  { --tp-p:#059669; --tp-pd:#047857; --tp-pa:#ecfdf5; --tp-pt:#064e3b; --tp-ps:#6b7280; }
.tpl-minimal-purple-44 { --tp-p:#7c3aed; --tp-pd:#6d28d9; --tp-pa:#f5f3ff; --tp-pt:#2e1065; --tp-ps:#6b7280; }
.tpl-minimal-teal-45   { --tp-p:#0d9488; --tp-pd:#0f766e; --tp-pa:#f0fdfa; --tp-pt:#134e4a; --tp-ps:#6b7280; }
.tpl-minimal-rose-46   { --tp-p:#e11d48; --tp-pd:#be123c; --tp-pa:#fff1f2; --tp-pt:#4c0519; --tp-ps:#6b7280; }
.tpl-minimal-orange-47 { --tp-p:#ea580c; --tp-pd:#c2410c; --tp-pa:#fff7ed; --tp-pt:#431407; --tp-ps:#6b7280; }
.tpl-minimal-slate-48  { --tp-p:#475569; --tp-pd:#334155; --tp-pa:#f8fafc; --tp-pt:#0f172a; --tp-ps:#64748b; }
.tpl-minimal-dark-49   { --tp-p:#334155; --tp-pd:#1e293b; --tp-pa:#f1f5f9; --tp-pt:#0f172a; --tp-ps:#475569; }
.tpl-minimal-indigo-50 { --tp-p:#4338ca; --tp-pd:#3730a3; --tp-pa:#eef2ff; --tp-pt:#1e1b4b; --tp-ps:#6b7280; }

/* ══════════════════════════════════════════
   TEMPLATE GALLERY RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 760px) {
    .tg-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .tg-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        padding: 4px 16px 20px;
    }
    .tg-header { padding: 16px 16px 0; }
    .tg-toolbar { padding: 12px 16px 8px; }
    .tg-search { max-width: 100%; }
}

@media (max-width: 480px) {
    .tg-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 4px 12px 16px;
    }
    .tg-filters { gap: 4px; }
    .tg-filter { padding: 5px 10px; font-size: 0.72rem; }
}