/* ==========================================================================
           1. CSS VARIABLE SYSTEM (THEME ENGINE)
           ========================================================================== */
:root {
    /* --- ADMIN INTERFACE THEME --- */
    --adm-bg: #0f172a; /* Deep Slate */
    --adm-panel: #1e293b; /* Lighter Slate */
    --adm-border: #334155; /* Border Grey */
    --adm-text: #f8fafc; /* White Text */
    --adm-text-mute: #94a3b8; /* Muted Text */
    --adm-primary: #3285f1; /* Violet Accent */
    --adm-primary-hover: #7c3aed;
    --adm-danger: #ef4444; /* Red */
    --adm-success: #10b981; /* Green */
    --adm-warn: #f59e0b; /* Orange */
    --adm-font: "Inter", system-ui, sans-serif;

    /* --- RESUME VARIABLES (Controlled by JS) --- */

    /* Colors */
    --r-primary: #2c3e50;
    --r-secondary: #f1c40f;
    --r-bg-paper: #ffffff;
    --r-bg-sidebar: #f8f9fa;
    --r-text-main: #333333;
    --r-text-sidebar: #444444;

    /* Dimensions & Spacing */
    --sidebar-width: 35%;
    --page-padding: 40px;
    --col-gap: 30px;

    /* Advanced Spacing (Granular Control) */
    --sidebar-pt: 40px; /* Padding Top */
    --sidebar-pb: 40px; /* Padding Bottom */
    --sidebar-pl: 30px; /* Padding Left */
    --sidebar-pr: 30px; /* Padding Right */

    --main-pt: 40px;
    --main-pb: 40px;
    --main-pl: 30px;
    --main-pr: 40px;

    --header-mb: 30px; /* Header Margin Bottom */
    --section-gap: 25px; /* Gap between sections */
    --item-gap: 15px; /* Gap between list items */

    /* Typography */
    --font-head: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;

    --scale-name: 2.5rem;
    --scale-role: 1.1rem;
    --scale-head: 1.1rem;
    --scale-body: 0.9rem;
    --line-height: 1.5;
    --letter-spacing: 0px;

    /* Photo Styling */
    --photo-size: 160px;
    --photo-radius: 50%;
    --photo-border-w: 4px;
    --photo-border-c: #ffffff;
    --photo-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

    /* Filters */
    --filter-gray: 0%;
    --filter-sepia: 0%;
    --filter-contrast: 100%;
    --filter-bright: 100%;

    /* Decoration */
    --border-w: 0px;
    --border-c: #000000;
    --shadow-intensity: 20px;
    --decor-style: solid; /* solid, double, dashed */
    --decor-width: 2px;

    /* Print Scaling Factor (JS updates this) */
    --print-scale: 1;
}

/* ==========================================================================
           2. GLOBAL RESET & BASE STYLES
           ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-family: Montserrat;
}
@font-face {
    font-family: Montserrat;
    src: url(ShareTech-Regular.ttf);
}
body {
    background-color: var(--adm-bg);
    color: var(--adm-text);
    font-family: var(--adm-font);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--adm-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--adm-border);
    border-radius: 4px;
    border: 2px solid var(--adm-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--adm-primary);
}

/* Helpers */
.hidden {
    display: none !important;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
           3. ADMIN INTERFACE LAYOUT
           ========================================================================== */

/* Navbar */
.app-nav {
    height: 64px;
    background: var(--adm-panel);
    border-bottom: 1px solid var(--adm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.brand {
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}
.brand i {
    color: var(--adm-primary);
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.5));
}
.brand span {
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Button Framework */
.btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--adm-border);
    color: var(--adm-text-mute);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    user-select: none;
}
.btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: var(--adm-text-mute);
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--adm-primary);
    border-color: var(--adm-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.btn-primary:hover {
    background: var(--adm-primary-hover);
    border-color: var(--adm-primary-hover);
}

.btn-danger {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}
.btn-danger:hover {
    background: var(--adm-danger);
    color: white;
    border-color: var(--adm-danger);
}

.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 50%;
}

/* Workspace */
.workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Left Panel */
.config-panel {
    width: 450px;
    background: var(--adm-panel);
    border-right: 1px solid var(--adm-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    z-index: 20;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}

/* Sticky Editor Header with Undo/Redo */
.editor-header {
    position: sticky;
    top: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(12px);
    padding: 12px 20px;
    border-bottom: 1px solid var(--adm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
}
.history-controls {
    display: flex;
    gap: 4px;
}

/* Accordion System */
.accordion-item {
    border-bottom: 1px solid var(--adm-border);
}
.accordion-header {
    padding: 16px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--adm-text-mute);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.02),
        transparent
    );
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}
.accordion-header i {
    transition: transform 0.3s;
    font-size: 0.9rem;
}
.accordion-header.active {
    color: var(--adm-primary);
    border-left: 3px solid var(--adm-primary);
}
.accordion-header.active i {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease;
}
.accordion-content.show {
    display: block;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Controls */
.form-group {
    margin-bottom: 20px;
}
.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.label-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--adm-text-mute);
    text-transform: uppercase;
}
.label-value {
    font-family: "Roboto Mono", monospace;
    font-size: 0.7rem;
    color: var(--adm-primary);
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.inp-base {
    width: 100%;
    background: var(--adm-bg);
    border: 1px solid var(--adm-border);
    color: white;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: 0.2s;
}
.inp-base:focus {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Range Slider Styling */
.range-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--adm-bg);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--adm-border);
}
.inp-range {
    flex: 1;
    -webkit-appearance: none;
    background: transparent;
    height: 4px;
    border-radius: 2px;
}
.inp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--adm-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}
.inp-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.inp-range::-webkit-slider-runnable-track {
    background: var(--adm-border);
    height: 4px;
    border-radius: 2px;
}

/* Dynamic List Items */
.list-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.list-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--adm-border);
    padding: 16px;
    border-radius: 8px;
    position: relative;
    border-left: 3px solid var(--adm-primary);
    transition: transform 0.2s;
}
.list-card:hover {
    transform: translateX(2px);
    border-color: var(--adm-text-mute);
}

.card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}
.icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--adm-text-mute);
    border: none;
    cursor: pointer;
    transition: 0.2s;
}
.icon-btn:hover {
    background: var(--adm-primary);
    color: white;
}
.icon-btn.del:hover {
    background: var(--adm-danger);
}

.btn-add-block {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: repeating-linear-gradient(
        45deg,
        rgba(139, 92, 246, 0.05),
        rgba(139, 92, 246, 0.05) 10px,
        rgba(139, 92, 246, 0.1) 10px,
        rgba(139, 92, 246, 0.1) 20px
    );
    border: 2px dashed var(--adm-primary);
    color: var(--adm-primary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.btn-add-block:hover {
    background-color: rgba(139, 92, 246, 0.15);
    transform: translateY(-1px);
}

/* Reorder Controls */
.reorder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reorder-item {
    background: var(--adm-bg);
    border: 1px solid var(--adm-border);
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
}
.reorder-controls {
    display: flex;
    gap: 4px;
}
.reorder-btn {
    padding: 4px 8px;
    background: #333;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

/* --- PREVIEW STAGE --- */
.preview-stage {
    flex: 1;
    background: #525659;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px;
    position: relative;
}

.zoom-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--adm-panel);
    border: 1px solid var(--adm-border);
    padding: 6px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.zoom-label {
    font-size: 0.8rem;
    font-weight: 700;
    width: 40px;
    text-align: center;
}

/* ==========================================================================
           4. RESUME PAPER STYLING (THE OUTPUT)
           ========================================================================== */

.resume-paper {
    width: 210mm;
    /* Height is handled by min-height and auto expansion */
    min-height: 297mm;
    background-color: var(--r-bg-paper);
    color: var(--r-text-main);
    /* Shadows for realism in preview */
    box-shadow: 0 0 calc(30px + var(--shadow-intensity)) rgba(0, 0, 0, 0.5);
    /* Borders */
    border: var(--border-w) solid var(--border-c);
    position: relative;
    overflow: hidden;
    transform-origin: top center;
    transition: transform 0.2s ease-out;
    margin-bottom: 100px;
}

.resume-container {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 297mm;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas: "sidebar main";
}

/* --- AREAS --- */
.area-sidebar {
    grid-area: sidebar;
    background-color: var(--r-bg-sidebar);
    color: var(--r-text-sidebar);
    padding: var(--sidebar-pt) var(--sidebar-pr) var(--sidebar-pb)
        var(--sidebar-pl);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--font-body);
}

.area-main {
    grid-area: main;
    padding: var(--main-pt) var(--main-pr) var(--main-pb) var(--main-pl);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
}

/* --- COMPONENTS --- */

/* 1. Header */
.resume-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--header-mb);
    position: relative;
    z-index: 10;
}

.photo-box {
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: var(--photo-radius);
    border: var(--photo-border-w) solid var(--photo-border-c);
    box-shadow: var(--photo-shadow);
    object-fit: cover;
    filter: grayscale(var(--filter-gray)) sepia(var(--filter-sepia))
        contrast(var(--filter-contrast)) brightness(var(--filter-bright));
    display: block;
}

h1.name {
    font-family: var(--font-head);
    font-size: var(--scale-name);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: inherit;
}

.role {
    font-family: var(--font-head);
    font-size: var(--scale-role);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--r-secondary);
    opacity: 0.9;
}

.bio {
    font-size: var(--scale-body);
    line-height: var(--line-height);
    margin-top: 16px;
    opacity: 0.85;
    max-width: 90%;
}

/* 2. Sections */
.section {
    margin-bottom: var(--section-gap);
    page-break-inside: avoid;
}

.section-title {
    font-family: var(--font-head);
    font-size: var(--scale-head);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--r-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom-width: var(--decor-width);
    border-bottom-style: var(--decor-style);
    border-bottom-color: var(--r-secondary);
}
/* Sidebar overrides */
.area-sidebar .section-title {
    color: inherit;
    border-color: rgba(0, 0, 0, 0.15);
}

.section-icon {
    width: 28px;
    height: 28px;
    background: var(--r-secondary);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 3. Timelines (Exp/Edu) */
.timeline-item {
    margin-bottom: var(--item-gap);
    position: relative;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--r-secondary);
    border-radius: 50%;
    border: 2px solid var(--r-bg-paper);
}

.t-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.t-title {
    font-weight: 700;
    font-size: calc(var(--scale-body) * 1.1);
    color: var(--r-text-main);
}
.t-date {
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.7;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}
.t-sub {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--r-primary);
    margin-bottom: 6px;
    display: block;
    opacity: 0.9;
}
.t-desc {
    font-size: var(--scale-body);
    line-height: var(--line-height);
    opacity: 0.85;
    white-space: pre-line;
}

/* 4. Lists (Contact/Skills) */
.info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--scale-body);
    line-height: 1.4;
}
.info-icon {
    width: 24px;
    color: var(--r-secondary);
    text-align: center;
    flex-shrink: 0;
}

.skill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.skill-tag {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--r-text-sidebar);
}

/* --- HELPER CLASSES --- */
.section-hidden {
    display: none !important;
}

/* ==========================================================================
           5. THEME ARCHITECTURES (10 VARIANTS)
           ========================================================================== */

/* ==========================================================================
   5. THEME ARCHITECTURES (40 VARIANTS)
   ========================================================================== */

/* 1. Riya (Overlap) */
.theme-riya .resume-container {
    grid-template-areas: "sidebar header" "sidebar main";
    grid-template-rows: auto 1fr;
}
.theme-riya .resume-header {
    background: var(--r-primary);
    color: white;
    padding: 40px;
    margin: -40px -40px 30px -30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.theme-riya .photo-box {
    position: absolute;
    left: -80px;
    top: 40px;
    z-index: 20;
}

/* 2. Austin (Full Sidebar) */
.theme-austin .resume-container {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
}
.theme-austin .area-sidebar {
    background: var(--r-primary);
    color: white;
    border: none;
}
.theme-austin .resume-header {
    margin-bottom: 40px;
    border-bottom: 4px solid var(--r-secondary);
    padding-bottom: 20px;
}
.theme-austin .photo-box {
    width: 100%;
    height: auto;
    border-radius: 0;
    aspect-ratio: 1/1;
    margin-bottom: 20px;
    border: none;
    box-shadow: none;
}
.theme-austin .role {
    color: rgba(255, 255, 255, 0.9);
}
.theme-austin .section-title {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* 3. Sally (Top Centered) */
.theme-sally .resume-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "body";
}
.theme-sally .resume-header {
    align-items: center;
    text-align: center;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 40px;
    margin-bottom: 30px;
}
.theme-sally .area-main {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: var(--col-gap);
    padding: 0 var(--page-padding);
}
.theme-sally .area-sidebar {
    display: none;
}
.theme-sally .resume-container {
    grid-template-areas: "header header" "sidebar main";
    grid-template-rows: auto 1fr;
}

/* 4. Modern (Right Sidebar) */
.theme-modern .resume-container {
    grid-template-columns: 1fr var(--sidebar-width);
    grid-template-areas: "main sidebar";
}
.theme-modern .area-sidebar {
    order: 2;
    border-left: 4px solid var(--r-secondary);
    border-right: none;
    background: white;
}
.theme-modern .resume-header {
    border-left: 8px solid var(--r-primary);
    padding-left: 25px;
}

/* 5. Minimal (Whitespace) */
.theme-minimal .resume-container {
    grid-template-columns: 25% 1fr;
}
.theme-minimal .area-sidebar {
    background: transparent;
    padding-right: 20px;
    text-align: right;
    border: none;
    border-right: 1px solid #eee;
}
.theme-minimal .photo-box {
    margin-left: auto;
    margin-right: 0;
}
.theme-minimal .section-title {
    justify-content: flex-end;
}
.theme-minimal .info-item {
    justify-content: flex-end;
}

/* 6. Executive (Standard) */
.theme-executive .resume-container {
    display: flex;
    flex-direction: column;
}
.theme-executive .area-sidebar {
    display: none;
}
.theme-executive .resume-header {
    text-align: left;
    border-bottom: 2px solid var(--r-primary);
}
.theme-executive .area-main {
    display: block;
}

/* 7. Corporate (Blue Steel) */
.theme-corporate .resume-container {
    grid-template-columns: var(--sidebar-width) 1fr;
}
.theme-corporate .area-sidebar {
    background: #2c3e50;
    color: #ecf0f1;
    border-right: 5px solid var(--r-secondary);
}
.theme-corporate .area-main {
    background: #fff;
}
.theme-corporate .section-title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-corporate .area-main .section-title {
    color: var(--r-primary);
    border-bottom: 2px solid var(--r-primary);
}

/* 8. Creative (Geometric) */
.theme-creative .resume-paper {
    background: linear-gradient(135deg, #fff 70%, var(--r-bg-sidebar) 70%);
}
.theme-creative .resume-container {
    grid-template-columns: 1fr;
}
.theme-creative .area-sidebar {
    background: transparent;
    border: none;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 200px;
    width: 30%;
    text-align: right;
}
.theme-creative .area-main {
    width: 65%;
}
.theme-creative .resume-header {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
    background: var(--r-primary);
    color: white;
    padding: 50px;
    width: 110%;
    margin-left: -5%;
}

/* 9. Glitch (Cyberpunk/Tech) */
.theme-glitch .resume-paper {
    background: #1a1a1a;
    color: #0f0;
    font-family: "Courier New", monospace;
}
.theme-glitch .resume-container {
    grid-template-columns: 30% 70%;
}
.theme-glitch .area-sidebar {
    background: #000;
    border-right: 1px solid #0f0;
}
.theme-glitch .area-main {
    color: #ccc;
}
.theme-glitch .section-title {
    color: #0f0;
    border-bottom: 1px dashed #0f0;
}
.theme-glitch h1.name {
    text-shadow: 2px 2px #f0f;
}

/* 10. Compact (Density) */
.theme-compact .resume-container {
    grid-template-columns: 20% 80%;
}
.theme-compact .area-sidebar {
    font-size: 0.8em;
    padding: 15px;
    background: #eee;
}
.theme-compact .area-main {
    padding: 15px;
}
.theme-compact .section {
    margin-bottom: 10px;
}
.theme-compact .section-title {
    font-size: 1em;
    margin-bottom: 5px;
    border: none;
    background: var(--r-primary);
    color: white;
    padding: 2px 5px;
}

/* 11. Bold Header */
.theme-bold-header .resume-header {
    background: linear-gradient(135deg, var(--r-primary), var(--r-secondary));
    color: white;
    padding: 60px 40px;
    margin: 0 0 30px 0;
    text-align: center;
}
.theme-bold-header .photo-box {
    margin: 0 auto 20px;
}

/* 12. Split Color */
.theme-split-color .resume-paper {
    background: linear-gradient(to right, #f8f9fa 40%, white 40%);
}
.theme-split-color .area-sidebar {
    background: transparent;
}

/* 13. Bordered Sections */
.theme-bordered .section {
    border: 2px solid var(--r-primary);
    padding: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}

/* 14. Timeline Left */
.theme-timeline-left .resume-container {
    grid-template-columns: 1fr;
}
.theme-timeline-left .area-sidebar {
    display: none;
}
.theme-timeline-left .timeline-item {
    border-left: 4px solid var(--r-secondary);
    padding-left: 30px;
    margin-left: 0;
}

/* 15. Boxed Elegant */
.theme-boxed .resume-paper {
    padding: 20px;
    background: #f5f5f5;
}
.theme-boxed .resume-container {
    background: white;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

/* 16. Two Column Equal */
.theme-two-col .resume-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.theme-two-col .resume-header {
    grid-column: 1 / -1;
    text-align: center;
    border-bottom: 3px solid var(--r-primary);
    padding-bottom: 30px;
}

/* 17. Accent Stripes */
.theme-stripes .section-title {
    border-left: 5px solid var(--r-secondary);
    padding-left: 15px;
    border-bottom: none;
}
.theme-stripes .resume-header {
    border-left: 8px solid var(--r-primary);
    padding-left: 20px;
}

/* 18. Circle Photo */
.theme-circle-photo .photo-box {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
    border: 6px solid var(--r-secondary);
}
.theme-circle-photo .resume-header {
    text-align: center;
}

/* 19. Dark Mode */
.theme-dark .resume-paper {
    background: #1a1a1a;
    color: #e0e0e0;
}
.theme-dark .area-sidebar {
    background: #0d0d0d;
    color: #fff;
    border-right: 1px solid #333;
}
.theme-dark .section-title {
    color: var(--r-secondary);
}

/* 20. Magazine Layout */
.theme-magazine .resume-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.theme-magazine .resume-header {
    grid-column: 1 / -1;
    background: var(--r-primary);
    color: white;
    padding: 40px;
}
.theme-magazine .section {
    grid-column: span 1;
}

/* 21. Sidebar Right Thin */
.theme-thin-right .resume-container {
    grid-template-columns: 1fr 25%;
    grid-template-areas: "main sidebar";
}
.theme-thin-right .area-sidebar {
    background: var(--r-primary);
    color: white;
    padding: 30px 15px;
}

/* 22. Top Banner */
.theme-top-banner .resume-header {
    background: var(--r-primary);
    color: white;
    padding: 30px 40px;
    margin: -40px -40px 40px -40px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.theme-top-banner .photo-box {
    flex-shrink: 0;
}

/* 23. Underlined */
.theme-underlined .section-title {
    border-bottom: 3px double var(--r-primary);
}
.theme-underlined h1.name {
    border-bottom: 5px solid var(--r-secondary);
    display: inline-block;
    padding-bottom: 10px;
}

/* 24. Card Style */
.theme-card .section {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.theme-card .resume-paper {
    background: #f0f0f0;
}

/* 25. Gradient Sidebar */
.theme-gradient-side .area-sidebar {
    background: linear-gradient(180deg, var(--r-primary), var(--r-secondary));
    color: white;
}

/* 26. Asymmetric */
.theme-asymmetric .resume-container {
    grid-template-columns: 38% 62%;
}
.theme-asymmetric .resume-header {
    grid-column: 1 / -1;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    background: var(--r-primary);
    color: white;
    padding: 40px;
}

/* 27. Icon Headers */
.theme-icon-headers .section-title::before {
    content: "●";
    color: var(--r-secondary);
    margin-right: 10px;
    font-size: 1.5em;
}

/* 28. Floating Sections */
.theme-floating .section {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--r-secondary);
}
.theme-floating .resume-paper {
    background: #fafafa;
}

/* 29. Professional Clean */
.theme-pro-clean .resume-container {
    grid-template-columns: 30% 70%;
}
.theme-pro-clean .area-sidebar {
    background: #f8f9fa;
    border-right: 2px solid var(--r-primary);
}
.theme-pro-clean .resume-header {
    border-bottom: 4px solid var(--r-primary);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* 30. Colorful Accents */
.theme-colorful .section:nth-child(1) .section-title {
    color: #e74c3c;
    border-color: #e74c3c;
}
.theme-colorful .section:nth-child(2) .section-title {
    color: #3498db;
    border-color: #3498db;
}
.theme-colorful .section:nth-child(3) .section-title {
    color: #2ecc71;
    border-color: #2ecc71;
}
.theme-colorful .section:nth-child(4) .section-title {
    color: #f39c12;
    border-color: #f39c12;
}

/* 31. Elegant Serif */
.theme-elegant-serif {
    font-family: "Georgia", serif;
}
.theme-elegant-serif h1.name {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
}
.theme-elegant-serif .section-title {
    font-family: "Playfair Display", serif;
    font-style: italic;
}

/* 32. Tech Modern */
.theme-tech-modern .resume-paper {
    background: #f8f9fa;
}
.theme-tech-modern .section {
    border: 1px solid #e0e0e0;
    padding: 20px;
    background: white;
}
.theme-tech-modern .section-title {
    background: var(--r-primary);
    color: white;
    padding: 8px 15px;
    margin: -20px -20px 15px -20px;
}

/* 33. Side Banner */
.theme-side-banner .area-sidebar {
    background: linear-gradient(
        180deg,
        var(--r-primary) 0%,
        var(--r-secondary) 100%
    );
    color: white;
    position: relative;
}
.theme-side-banner .area-sidebar::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: var(--r-secondary);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 34. Minimalist Lines */
.theme-minimal-lines .section {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.theme-minimal-lines .section:last-child {
    border-bottom: none;
}
.theme-minimal-lines .section-title {
    border: none;
}

/* 35. Photo Banner */
.theme-photo-banner .resume-header {
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%232c3e50" width="1200" height="400"/></svg>');
    background-size: cover;
    color: white;
    padding: 60px 40px;
    margin: -40px -40px 30px -40px;
}

/* 36. Gradient Header */
.theme-gradient-header .resume-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 50px 40px;
    margin: 0 0 30px 0;
}

/* 37. Split Screen */
.theme-split-screen .resume-container {
    grid-template-columns: 50% 50%;
}
.theme-split-screen .area-sidebar {
    background: var(--r-primary);
    color: white;
}
.theme-split-screen .resume-header {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--r-secondary);
    color: white;
}

/* 38. Timeline Center */
.theme-timeline-center .resume-container {
    grid-template-columns: 1fr;
}
.theme-timeline-center .timeline-item {
    padding-left: 50%;
    border-left: 3px solid var(--r-secondary);
    margin-left: 50%;
    position: relative;
}
.theme-timeline-center .timeline-item::before {
    left: -8px;
}

/* 39. Neumorphic */
.theme-neumorphic .resume-paper {
    background: #e0e5ec;
}
.theme-neumorphic .section {
    background: #e0e5ec;
    box-shadow:
        9px 9px 16px rgb(163, 177, 198, 0.6),
        -9px -9px 16px rgba(255, 255, 255, 0.5);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: none;
}

/* 40. Glassmorphism */
.theme-glass .resume-paper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.theme-glass .section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
}
.theme-glass .area-sidebar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-glass * {
    color: white;
}
/* ==========================================================================
           6. PRINT ENGINE (THE CRITICAL FIXES)
           ========================================================================== */
/* ==========================================================================
           6. PRINT ENGINE (FIXED BLANK PAGE)
           ========================================================================== */
@media print {
    @page {
        size: A4;
        margin: 0;
    }

    /* FORCE RESET LAYOUT */
    html,
    body {
        width: 210mm;
        height: 297mm;
        background: white;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important; /* Overrides flex */
    }

    /* HIDE UI */
    .app-nav,
    .config-panel,
    .zoom-widget,
    .editor-header,
    .mobile-dropdown {
        display: none !important;
    }

    /* POSITION PREVIEW STAGE */
    .preview-stage {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        z-index: 9999;
    }

    /* RESUME PAPER SCALING */
    .resume-paper {
        /* Reset positioning to absolute top-left */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;

        /* Remove UI styles */
        box-shadow: none !important;
        border: none !important;

        /* Apply Scaling Logic */
        width: 210mm;
        min-height: 297mm;
        transform: scale(var(--print-scale));
        transform-origin: top left;

        /* Ensure Backgrounds Print */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Ensure content inside doesn't break */
    .resume-container {
        height: auto !important;
        min-height: 100%;
    }
}

/* View Modes */
body.view-editor .config-panel {
    width: 100%;
}
body.view-editor .preview-stage {
    display: none;
}
body.view-preview .config-panel {
    display: none;
}

/* Mobile */
@media (max-width: 1024px) {
    .app-nav .brand span {
        display: none;
    }
    body:not(.view-preview) .preview-stage {
        display: none;
    }
    body:not(.view-preview) .config-panel {
        width: 100%;
    }
}
/* --- MOBILE MENU STYLES --- */
.mobile-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 64px; /* Height of nav */
    left: 0;
    width: 100%;
    background: var(--adm-panel);
    border-bottom: 1px solid var(--adm-border);
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.mobile-dropdown.active {
    display: flex;
    animation: slideDownMenu 0.2s ease-out;
}

@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Logic: Switch between Toolbar and Hamburger */
@media (max-width: 1024px) {
    .desktop-tools {
        display: none !important;
    }
    .mobile-menu-btn {
        display: flex !important;
    }
    /* Ensure Brand text hides on small screens to save space */
    .brand span {
        display: none;
    }
}
/* ==========================================================================
   FINAL MOBILE OPTIMIZATION (Paste at the end of <style>)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. LAYOUT FIXES (Use Dynamic Viewport Height) */
    body {
        height: 100dvh; /* Prevents address bar jumps */
        overflow: hidden; /* Lock body scroll */
    }

    .workspace {
        height: calc(100dvh - 64px); /* Full height minus Nav */
        overflow: hidden;
    }

    /* 2. APP NAV OPTIMIZATION */
    .app-nav {
        padding: 0 15px;
        position: relative;
        z-index: 1001; /* Highest priority */
    }

    /* Hide Desktop-only items on Mobile */
    .app-nav .brand span {
        display: none;
    } /* Hide "RESUME OS" text to save space */
    .toolbar .btn:not(.mobile-menu-btn):not(.view-toggle-btn) {
        display: none !important; /* Hide desktop toolbar buttons */
    }

    /* 3. EDITOR PANEL & STICKY HEADER FIX */
    .config-panel {
        width: 100% !important;
        height: 100%;
        overflow-y: auto; /* Enable internal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
        padding-bottom: 80px; /* Space for keyboard/scroll momentum */
        display: flex;
        flex-direction: column;
    }

    /* THE CRITICAL FIX: Make Editor Header Sticky */
    .editor-header {
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: 0;
        z-index: 900; /* Sit above form inputs */
        background: rgba(
            30,
            41,
            59,
            0.98
        ); /* Less transparent for readability */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow to define separation */
        padding: 10px 15px;
        flex-shrink: 0; /* Prevent shrinking */
    }

    /* 4. FORM CONTROL SIZING FOR TOUCH */
    .accordion-header {
        padding: 18px 20px; /* Larger tap target */
    }

    .inp-base,
    .inp-select {
        font-size: 16px; /* Prevents auto-zoom on iOS inputs */
        padding: 12px;
    }

    /* 5. HAMBURGER MENU STYLING */
    .mobile-dropdown {
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background: var(--adm-panel);
        border-bottom: 1px solid var(--adm-border);
        padding: 20px;
        display: none; /* Hidden state */
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 50px 100px rgba(0, 0, 0, 0.7);
        z-index: 1000;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
    }

    .mobile-dropdown.active {
        display: flex !important;
        animation: slideDownMobile 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Make buttons inside menu large and tappable */
    .mobile-dropdown .btn,
    .mobile-dropdown label.btn {
        width: 100%;
        justify-content: center;
        padding: 15px;
        font-size: 1rem;
        display: flex !important; /* Force show buttons inside menu */
    }

    /* 6. VIEW SWITCHING LOGIC */
    body.view-editor .preview-stage {
        display: none !important;
    }
    body.view-editor .config-panel {
        display: flex !important;
    }

    body.view-preview .config-panel {
        display: none !important;
    }
    body.view-preview .preview-stage {
        display: flex !important;
        padding: 10px; /* Reduced padding for mobile preview */
    }

    /* Scale down the resume paper in preview mode to fit width */
    body.view-preview .resume-paper {
        transform: scale(0.45); /* Force fit width roughly */
        transform-origin: top center;
        margin-bottom: -50%; /* Remove huge gap caused by scaling */
    }
}

@keyframes slideDownMobile {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   FINAL MOBILE PREVIEW FIX (Paste at the bottom of <style>)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. PREVIEW STAGE CONTAINER */
    /* 1. ENABLE SCROLLING FOR PREVIEW STAGE */
    body.view-preview .preview-stage {
        display: block !important; /* Changed from flex to block for scrolling */
        width: 100vw;
        height: calc(100dvh - 64px); /* Full height minus nav */
        overflow: auto !important; /* FORCE SCROLLING */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        background: #222;
        padding: 40px 15px; /* Add breathing room */
        position: relative;
    }

    /* 2. SCALE RESUME TO FIT WIDTH BUT ALLOW SCROLLING */
    body.view-preview .resume-paper {
        /* Force true A4 dimensions */
        width: 210mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;

        /* Scale it to fit the mobile screen width */
        /* calc(100vw - 30px) is the available width. 210mm is approx 794px. */
        /* We use a CSS var or a static scale that fits most phones */
        transform: scale(0.45);
        transform-origin: top left; /* Pivot from top-left to avoid centering issues */

        /* Center it horizontally using margin auto if needed, or simple left align */
        margin: 0 auto 50px auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

        /* The container needs to be tall enough to hold the scaled content */
        /* Since we scaled down, the element still takes up 297mm in the DOM flow */
        /* We use margin-bottom to pull the empty space up */
        margin-bottom: -140mm;

        /* Ensure it's centered visually */
        position: relative;
        left: 50%;
        margin-left: -47.25mm; /* Half of (210mm * 0.45) approx adjustment to center */
    }

    /* 3. ENSURE EDITOR IS HIDDEN */
    body.view-preview .config-panel {
        display: none !important;
    }
}
/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
    --ui-bg: #0f172a;
    --ui-panel: #1e293b;
    --ui-border: #334155;
    --ui-text: #f8fafc;
    --ui-mute: #94a3b8;
    --ui-accent: #8b5cf6;
    --ui-accent-hover: #7c3aed;
    --ui-danger: #ef4444;
    --ui-success: #10b981;
    --ui-font: "Inter", sans-serif;

    /* Resume Vars */
    --r-bg-paper: #ffffff;
    --r-text-main: #333333;
    --r-text-side: #444444;
    --r-primary: #2c3e50;
    --r-secondary: #f1c40f;
    --r-bg-side: #f8f9fa;
    --sidebar-w: 35%;
    --page-pad: 40px;
    --col-gap: 30px;
    --sidebar-pt: 40px;
    --sidebar-pb: 40px;
    --sidebar-pl: 30px;
    --sidebar-pr: 30px;
    --main-pt: 40px;
    --main-pb: 40px;
    --main-pl: 30px;
    --main-pr: 40px;
    --header-mb: 30px;
    --section-gap: 25px;
    --item-gap: 15px;
    --font-head: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    --s-name: 2.5rem;
    --s-role: 1.1rem;
    --s-head: 1.1rem;
    --s-body: 0.9rem;
    --photo-sz: 160px;
    --photo-rad: 50%;
    --dec-w: 2px;
    --dec-style: solid;
    --print-scale: 1;
}

/* ==========================================================================
   2. GLOBAL RESET
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    margin: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ui-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ui-accent);
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   3. NAVIGATION (FIXED)
   ========================================================================== */
.app-nav {
    height: 70px;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
}
.brand img {
    height: 70px;
    width: auto;
}
.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}
.desktop-nav {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

/* CRITICAL FIX: Force hide mobile toggle on Desktop */
.mobile-toggle,
.mobile-menu-btn {
    display: none !important;
}

/* Mobile Menu Dropdown */
.mobile-dropdown {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-border);
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.mobile-dropdown.active {
    display: flex;
    animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. UI COMPONENTS (Buttons, Inputs)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ui-mute);
    border: 1px solid var(--ui-border);
}
.btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: var(--ui-mute);
    transform: translateY(-1px);
}
.btn-primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: white;
}
.btn-primary:hover {
    background: var(--ui-accent-hover);
}
.btn-danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
    background: var(--ui-danger);
    color: white;
}
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-mute);
    cursor: pointer;
    transition: 0.2s;
}
.btn-icon:hover {
    background: var(--ui-accent);
    color: white;
    border-color: var(--ui-accent);
}
input {
    width: 100%;
    padding: 12px 15px;
    background: #0b1221;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: 0.2s;
}
input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* ==========================================================================
   5. LANDING PAGE STYLES (index.html)
   ========================================================================== */
.landing-wrapper {
    max-width: 900px;
    margin: 80px auto;
    text-align: center;
    padding: 20px;
}
.landing-title {
    font-size: 3rem;
    margin-bottom: 10px;
}
.landing-subtitle {
    color: var(--ui-mute);
    font-size: 1.1rem;
}
.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 50px;
}
.landing-card {
    background: var(--ui-panel);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: white;
    transition: 0.3s;
}
.landing-card:hover {
    transform: translateY(-5px);
    border-color: var(--ui-accent);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}
.landing-card i {
    font-size: 2.5rem;
    color: var(--ui-accent);
}
.card-title {
    font-size: 1.2rem;
    font-weight: 700;
}
.card-desc {
    font-size: 0.9rem;
    color: var(--ui-mute);
}

/* ==========================================================================
   6. AUTH STYLES (account.html)
   ========================================================================== */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}
.auth-card {
    background: var(--ui-panel);
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
}
.auth-header {
    text-align: center;
    margin-bottom: 30px;
}
.auth-header h2 {
    margin-bottom: 5px;
}
.auth-header p {
    color: var(--ui-mute);
    font-size: 0.9rem;
}
.form-group {
    margin-bottom: 15px;
}
.captcha-row,
.otp-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}
.captcha-box {
    background: #0b1221;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    font-family: monospace;
    letter-spacing: 3px;
    color: var(--ui-accent);
    min-width: 80px;
    text-align: center;
}

/* FIX: Verification Row Layout */
.verify-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}
.verify-row input {
    flex-grow: 1; /* Input takes all space */
    width: auto; /* Override fixed width */
    margin-bottom: 0; /* Remove bottom margin if set globally */
}
.btn-verify {
    padding: 12px 16px;
    background: var(--ui-accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap; /* Keep button on one line */
    flex-shrink: 0; /* Prevent button from crushing */
    height: 46px; /* Match input height roughly */
}
.btn-verify:hover {
    filter: brightness(1.1);
}

.otp-box {
    background: rgba(139, 92, 246, 0.1);
    border: 1px dashed var(--ui-accent);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.otp-box p {
    font-size: 0.8rem;
    color: var(--ui-mute);
    margin-bottom: 8px;
}
.google-btn {
    background: white;
    color: #333;
    margin-top: 10px;
}
.toggle-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--ui-mute);
    cursor: pointer;
}
.toggle-link span {
    color: var(--ui-accent);
    font-weight: bold;
}
.avatar {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--ui-accent), #6366f1);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}
.profile-stats {
    border-top: 1px solid var(--ui-border);
    padding: 20px 0;
    margin-bottom: 20px;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.success-text {
    color: var(--ui-success);
    font-weight: bold;
}
.white-text {
    color: white;
}
.mute {
    color: var(--ui-mute);
}
.full-width {
    width: 100%;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}

/* ==========================================================================
   7. HISTORY STYLES (history.html)
   ========================================================================== */
.archive-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    width: 100%;
}
.archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.archive-col {
    background: var(--ui-panel);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--ui-border);
    height: fit-content;
}
.col-title {
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-accent);
}
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: 0.2s;
}
.history-item:hover {
    border-color: var(--ui-accent);
    background: rgba(139, 92, 246, 0.1);
}
.item-name {
    font-weight: bold;
    color: white;
}
.item-date {
    font-size: 0.8rem;
    color: var(--ui-mute);
}
.item-actions {
    display: flex;
    gap: 10px;
}
.icon-danger {
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}
.empty-msg {
    text-align: center;
    color: var(--ui-mute);
    padding: 20px;
}

/* ==========================================================================
   8. RESUME BUILDER (resume.html Layout)
   ========================================================================== */
.workspace {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: calc(100vh - 64px);
    overflow: hidden;
    position: relative;
}
.config-panel {
    width: 450px;
    background: var(--ui-panel);
    border-right: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 20;
}
.editor-header {
    position: sticky;
    top: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(8px);
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
}
.accordion-header {
    padding: 16px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ui-mute);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--ui-border);
}
.accordion-header.active {
    color: var(--ui-accent);
    border-left: 3px solid var(--ui-accent);
    background: rgba(255, 255, 255, 0.05);
}
.accordion-content {
    display: none;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
}
.accordion-content.show {
    display: block;
    animation: fadeIn 0.3s;
}
.preview-stage {
    flex: 1;
    background: #525659;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px;
    background-image: radial-gradient(var(--ui-border) 1px, transparent 1px);
    background-size: 20px 20px;
}
.zoom-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--ui-panel);
    border: 1px solid var(--ui-border);
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

/* Resume Paper */
.resume-paper {
    width: 210mm;
    min-height: 297mm;
    background-color: var(--r-bg-paper);
    color: var(--r-text-main);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transform-origin: top center;
    transition: transform 0.2s ease-out;
    margin-bottom: 100px;
    font-family: var(--font-body);
}
.resume-container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas: "sidebar main";
}
.area-sidebar {
    grid-area: sidebar;
    background: var(--r-bg-side);
    color: var(--r-text-side);
    padding: var(--sidebar-pt) var(--sidebar-pr) var(--sidebar-pb)
        var(--sidebar-pl);
}
.area-main {
    grid-area: main;
    padding: var(--main-pt) var(--main-pr) var(--main-pb) var(--main-pl);
}
.photo-box {
    width: var(--photo-sz);
    height: var(--photo-sz);
    border-radius: var(--photo-rad);
    border: var(--photo-border-w) solid var(--photo-border-c);
    object-fit: cover;
}
.section-title {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--r-primary);
    border-bottom: var(--dec-w) var(--dec-style) var(--r-secondary);
    margin-bottom: 15px;
    padding-bottom: 5px;
}

/* Themes (Sample) */
.theme-riya .resume-container {
    grid-template-areas: "sidebar header" "sidebar main";
    grid-template-rows: auto 1fr;
}
.theme-riya .resume-header {
    background: var(--r-primary);
    color: white;
    padding: 40px;
    margin: -40px -40px 30px -30px;
}
.theme-riya .photo-box {
    position: absolute;
    left: -80px;
    top: 40px;
    z-index: 20;
}
.theme-austin .resume-container {
    grid-template-columns: var(--sidebar-w) 1fr;
}
.theme-austin .area-sidebar {
    background: var(--r-primary);
    color: white;
}
.theme-austin .resume-header {
    border-bottom: 4px solid var(--r-secondary);
    padding-bottom: 20px;
}
.theme-sally .resume-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "body";
}
.theme-sally .resume-header {
    text-align: center;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 40px;
}
.theme-sally .area-main {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: var(--col-gap);
}
.theme-sally .area-sidebar {
    display: none;
}
.theme-modern .resume-container {
    grid-template-columns: 1fr var(--sidebar-w);
    grid-template-areas: "main sidebar";
}
.theme-modern .area-sidebar {
    order: 2;
    border-left: 4px solid var(--r-secondary);
    background: white;
}
.theme-modern .resume-header {
    border-left: 8px solid var(--r-primary);
    padding-left: 25px;
}

/* ==========================================================================
   9. MOBILE OPTIMIZATION (BREAKPOINTS)
   ========================================================================== */
@media (max-width: 1024px) {
    /* SHOW Hamburger Menu */
    .mobile-toggle,
    .mobile-menu-btn {
        display: flex !important;
    }
    /* HIDE Desktop Navigation */
    .desktop-nav,
    .desktop-group {
        display: none !important;
    }
    .view-toggle-btn {
        display: flex !important;
    }

    /* Resume Builder Mobile */
    .workspace {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .config-panel {
        width: 100%;
    }
    .preview-stage {
        display: none;
    }
    body.view-preview .config-panel {
        display: none;
    }
    body.view-preview .preview-stage {
        display: block !important;
        width: 100vw;
        height: calc(100vh - 64px);
        background: #222;
        overflow: auto;
        padding: 40px 10px;
    }
    body.view-preview .resume-paper {
        width: 210mm !important;
        transform: scale(0.45);
        transform-origin: top center;
        margin: 0 auto;
        margin-bottom: -140mm;
    }

    /* Content Pages Mobile */
    .archive-grid {
        grid-template-columns: 1fr;
    }
    .landing-grid {
        grid-template-columns: 1fr;
    }
    .auth-box {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }
    body,
    html {
        width: 210mm;
        height: 297mm;
        overflow: visible !important;
        background: white;
        display: block !important;
        margin: 0 !important;
    }
    .app-nav,
    .config-panel,
    .zoom-widget,
    .toast-container,
    .mobile-dropdown,
    .editor-header {
        display: none !important;
    }
    .workspace {
        height: auto;
        display: block;
    }
    .preview-stage {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: white !important;
        z-index: 9999;
    }
    .resume-paper {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        box-shadow: none;
        border: none;
        width: 210mm;
        height: 297mm;
        transform: scale(var(--print-scale));
        transform-origin: top left;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* ==========================================================================
   10. CUSTOM MODAL (Replaces Default Alert/Confirm)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-box {
    background: var(--ui-panel);
    border: 1px solid var(--ui-border);
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.open .modal-box {
    transform: scale(1);
}

.modal-header {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-header i {
    color: var(--ui-accent);
}
.modal-header.danger i {
    color: var(--ui-danger);
}

.modal-body {
    font-size: 0.95rem;
    color: var(--ui-mute);
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal-actions button {
    min-width: 80px;
}
/* ==========================================================================
   VISUAL EDITOR - COMPLETE FIX FOR PRINT PREVIEW MISMATCH
   ========================================================================== */

/* Resume paper must be relative positioned to contain absolute children */
.resume-paper {
    position: relative !important;
}

.resume-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Areas need to allow absolute positioning inside them */
.area-sidebar,
.area-main {
    position: relative;
}

/* Visual Mode Active State */
.resume-paper.visual-active {
    min-height: 297mm;
}

/* Draggable Elements (Visual Mode) */
.draggable-element {
    cursor: grab;
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
    border: 2px dashed transparent;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    min-width: 100px;
    min-height: 50px;
    box-sizing: border-box;
}

.draggable-element:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
}

.draggable-element:active {
    cursor: grabbing;
}

/* Visual Positioned Elements (Saved Positions - Normal View) */
.visual-positioned {
    position: absolute !important;
    z-index: 10;
}

/* Resize Handle */
.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #8b5cf6;
    border-radius: 4px 0 0 0;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.resize-handle::before {
    content: "⇲";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 12px;
    color: white;
}

.draggable-element:hover .resize-handle {
    opacity: 1;
}

/* Prevent text selection while in visual mode */
body.visual-mode {
    user-select: none;
}

body.visual-mode [contenteditable="true"] {
    user-select: text;
    cursor: text;
    min-height: 20px;
}

body.visual-mode [contenteditable="true"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   PRINT STYLES - EXACT PREVIEW MATCH
   ========================================================================== */
@media print {
    @page {
        size: A4;
        margin: 0 !important;
    }

    html,
    body {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
    }

    /* Hide UI */
    .app-nav,
    .config-panel,
    .zoom-widget,
    .editor-header,
    .mobile-dropdown,
    .toolbar,
    .history-controls {
        display: none !important;
    }

    .preview-stage {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        z-index: 9999;
    }

    /* Resume paper - maintain relative positioning */
    .resume-paper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: scale(var(--print-scale)) !important;
        transform-origin: top left !important;
    }

    .resume-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    /* CRITICAL: Preserve absolute positioning in print */
    .visual-positioned,
    .draggable-element {
        position: absolute !important;
        z-index: 10 !important;
    }

    /* Clean up visual mode styles for print */
    .draggable-element {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        cursor: default !important;
    }

    .resize-handle {
        display: none !important;
    }

    /* Ensure all colors and backgrounds print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Force area backgrounds to print */
    .area-sidebar {
        background-color: var(--r-bg-sidebar) !important;
    }

    .area-main {
        background-color: white !important;
    }
}
.brand-img-lt {
    border-radius: 10px;
    background-color: white !important;
}