:root {
    --drb-bg: #0f172a;
    --drb-panel: #1e293b;
    --drb-card: #334155;
    --drb-text: #f1f5f9;
    --drb-text-muted: #94a3b8;
    --drb-primary: #3b82f6;
    --drb-primary-hover: #2563eb;
    --drb-danger: #ef4444;
    --drb-border: #475569;
}

.drb-app-container { background-color: var(--drb-bg); color: var(--drb-text); padding: 20px; border-radius: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.drb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--drb-border); }
.drb-header h3 { margin: 0; font-size: 22px; }
.drb-actions { display: flex; gap: 10px; }
.drb-panels { display: flex; flex-wrap: wrap; gap: 20px; }
.drb-form-panel, .drb-preview-panel { flex: 1 1 500px; min-width: 300px; }
.drb-form-panel { /*max-height: 80vh; */ overflow-y: auto; padding-right: 10px; }
.drb-form-panel::-webkit-scrollbar { width: 6px; }
.drb-form-panel::-webkit-scrollbar-thumb { background: var(--drb-border); border-radius: 3px; }
.drb-card { background: var(--drb-panel); padding: 20px; border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--drb-border); }
.drb-card h4 { margin: 0 0 15px 0; color: #fff; font-size: 16px; border-bottom: 1px solid var(--drb-border); padding-bottom: 8px;}
.drb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.drb-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.drb-form-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.drb-form-group label { font-size: 13px; margin-bottom: 5px; color: var(--drb-text-muted); }
.drb-form-group input, .drb-form-group textarea { background: var(--drb-bg); border: 1px solid var(--drb-border); color: var(--drb-text); padding: 8px; border-radius: 4px; font-size: 14px; outline: none; transition: border 0.2s; }
.drb-form-group input[type="color"] { padding: 2px; height: 38px; width: 100%; cursor: pointer; }
.drb-form-group input:focus, .drb-form-group textarea:focus { border-color: var(--drb-primary); }

.drb-dynamic-entry { border-left: 3px solid var(--drb-primary); padding: 15px; margin-bottom: 15px; position: relative; background: var(--drb-bg); border-radius: 4px; }
.drb-btn-remove { position: absolute; right: 10px; top: 10px; background: var(--drb-danger); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; display:flex; align-items:center; justify-content:center; }
.drb-btn-add { background: transparent; color: var(--drb-primary); border: 1px dashed var(--drb-primary); padding: 8px; width: 100%; border-radius: 4px; cursor: pointer; font-weight: 600; margin-top: 5px; }
.drb-btn-add:hover { background: rgba(59, 130, 246, 0.1); }
.drb-btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background 0.2s; }
.drb-btn-primary { background: var(--drb-primary); color: white; }
.drb-btn-primary:hover { background: var(--drb-primary-hover); }
.drb-btn-secondary { background: var(--drb-card); color: var(--drb-text); border: 1px solid var(--drb-border); }
.drb-btn-secondary:hover { background: var(--drb-border); }

/* Template Selector Bar */
.drb-template-bar { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.drb-template-bar::-webkit-scrollbar { height: 6px; }
.drb-template-bar::-webkit-scrollbar-thumb { background: var(--drb-border); border-radius: 3px; }
.drb-tpl-thumb { min-width: 90px; height: 110px; background: #fff; border: 2px solid var(--drb-border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #333; font-weight: bold; transition: all 0.2s; }
.drb-tpl-thumb:hover { border-color: var(--drb-primary); }
.drb-tpl-thumb.active { border-color: var(--drb-primary); box-shadow: 0 0 0 2px var(--drb-primary); }

/* --- BASE DYNAMIC AUTO-FIT PREVIEW --- */
.drb-preview-panel { display: flex; justify-content: center; align-items: flex-start; overflow: auto; }
.drb-resume-preview {
    background: #ffffff; width: 794px; height: 1122px; flex-shrink: 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); border-radius: 4px;
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex; flex-direction: row; overflow: hidden;
}

/* Left Sidebar Layout */
.drb-prev-sidebar { width: 33%; background-color: #f9f9f9; padding: calc(var(--drb-pb) * 0.8); border-right: 1px solid #eaeaea; display: flex; flex-direction: column; }
.drb-prev-img-wrapper { text-align: center; margin-bottom: calc(var(--drb-pb) * 0.8); }
.drb-prev-img-wrapper img { width: calc(var(--drb-fs) * 8.5); height: calc(var(--drb-fs) * 8.5); object-fit: cover; border-radius: 12px; background: #e0e0e0; }

.drb-contact-item { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: calc(var(--drb-pb) * 0.3); font-size: calc(var(--drb-fs) * 0.85); color: #222; word-break: break-all; }
.drb-contact-item i { color: var(--theme-color); font-size: calc(var(--drb-fs) * 1.0); margin-bottom: 4px; }
.drb-prev-contact-list { margin-bottom: calc(var(--drb-pb) * 0.8); }

.drb-prev-section-title { font-size: calc(var(--drb-fs) * 1.1); font-weight: 700; color: var(--theme-color); text-transform: uppercase; border-bottom: 2px solid var(--theme-color); padding-bottom: calc(var(--drb-pb) * 0.1); margin-bottom: calc(var(--drb-pb) * 0.3); margin-top: calc(var(--drb-pb) * 0.6); letter-spacing: 1px; }

.drb-prev-skill { margin-bottom: calc(var(--drb-pb) * 0.3); }
.drb-skill-name { font-size: calc(var(--drb-fs) * 0.85); color: #333; margin-bottom: 5px; font-weight: 600; }
.drb-skill-bar { width: 100%; background-color: #e0e0e0; height: 5px; border-radius: 3px; overflow: hidden; }
.drb-skill-fill { background-color: var(--theme-color); height: 100%; }

.drb-prev-interest { display: flex; align-items: center; gap: 10px; margin-bottom: calc(var(--drb-pb) * 0.3); font-size: calc(var(--drb-fs) * 0.85); color: #333; }
.drb-prev-interest i { color: var(--theme-color); font-size: calc(var(--drb-fs) * 1.0); width: 20px; text-align: center; }

/* Right Main Layout */
.drb-prev-main { width: 67%; display: flex; flex-direction: column; }
.drb-prev-header-block { background-color: var(--theme-color); color: white; padding: calc(var(--drb-pb) * 1.2); }
.drb-prev-h1 { font-size: calc(var(--drb-fs) * 2.4); font-weight: 600; margin: 0; line-height: 1.1; }
.drb-prev-job-title { font-size: calc(var(--drb-fs) * 1.2); font-weight: 400; margin-top: 5px; margin-bottom: calc(var(--drb-pb) * 0.4); border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: calc(var(--drb-pb) * 0.3); }
.drb-prev-summary { font-size: calc(var(--drb-fs) * 0.9); line-height: var(--drb-lh); margin: 0; opacity: 0.95; }

.drb-prev-main-content { padding: calc(var(--drb-pb) * 1.0); flex-grow: 1; }

.drb-prev-item { margin-bottom: calc(var(--drb-pb) * 0.6); }
.drb-item-title { font-size: calc(var(--drb-fs) * 1.1); font-weight: 700; color: var(--theme-color); }
.drb-item-subtitle { font-size: calc(var(--drb-fs) * 1.0); color: #222; font-weight: 600; margin-top: 3px;}
.drb-item-subtitle-black { font-size: calc(var(--drb-fs) * 1.0); color: #222; margin-top: 3px; font-style: italic; }
.drb-item-date { font-size: calc(var(--drb-fs) * 0.85); color: var(--theme-color); font-style: italic; margin-top: 2px; margin-bottom: calc(var(--drb-pb) * 0.2);}
.drb-item-course { font-size: calc(var(--drb-fs) * 1.0); color: #222; font-weight: 600; }
.drb-item-inst { font-size: calc(var(--drb-fs) * 0.85); color: #666; font-style: italic; }

.drb-item-desc { margin: 0; padding-left: 20px; font-size: calc(var(--drb-fs) * 0.85); color: #444; line-height: var(--drb-lh); }
.drb-item-desc li { margin-bottom: 4px; list-style-type: none; position: relative; }
.drb-item-desc li::before { content: "■"; color: var(--theme-color); position: absolute; left: -15px; font-size: 10px; top: 2px; background: transparent; border: 1px solid var(--theme-color); border-radius: 2px; color: transparent; width: 6px; height: 6px; }

/* ==========================================
   TEMPLATE VARIATIONS (10 Templates)
   ========================================== */

/* 1. tpl-leafish (Default - already styled above) */

/* 2. tpl-meowth - Single Column, Minimalist */
.tpl-meowth { flex-direction: column; }
.tpl-meowth .drb-prev-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; background: #fff; border-right: none; border-bottom: 1px solid #eaeaea; padding: 20px 40px; }
.tpl-meowth .drb-prev-img-wrapper { margin-bottom: 0; margin-right: 30px; }
.tpl-meowth #prevSkillsSection, .tpl-meowth #prevLangsSection, .tpl-meowth #prevInterestsSection { flex: 1; min-width: 200px; margin-top: 0; }
.tpl-meowth .drb-prev-main { width: 100%; }
.tpl-meowth .drb-prev-header-block { background: #fff; color: #333; border-bottom: 4px solid var(--theme-color); padding: 40px; }
.tpl-meowth .drb-prev-h1, .tpl-meowth .drb-prev-job-title, .tpl-meowth .drb-prev-summary { color: #333; }
.tpl-meowth .drb-prev-job-title { color: var(--theme-color); border-bottom: none; }

/* 3. tpl-lapras - Right Sidebar */
.tpl-lapras { flex-direction: row-reverse; }
.tpl-lapras .drb-prev-sidebar { border-right: none; border-left: 1px solid #eaeaea; }

/* 4. tpl-rhyhorn - Dark Left Sidebar */
.tpl-rhyhorn .drb-prev-sidebar { background: #1e293b; border-right: none; }
.tpl-rhyhorn .drb-contact-item, .tpl-rhyhorn .drb-skill-name, .tpl-rhyhorn .drb-prev-interest { color: #f1f5f9; }
.tpl-rhyhorn .drb-skill-bar { background-color: #475569; }
.tpl-rhyhorn .drb-prev-section-title { border-bottom-color: rgba(255,255,255,0.2); }

/* 5. tpl-gengar - Boxed Layout with Borders */
.tpl-gengar .drb-prev-main-content { background: #f8f9fa; }
.tpl-gengar .drb-prev-section-title { border: 1px solid var(--theme-color); border-radius: 4px; padding: 5px 10px; display: inline-block; margin-bottom: 15px; }
.tpl-gengar .drb-prev-item { border: 1px solid #e9ecef; padding: 15px; border-radius: 4px; background: #fff; margin-bottom: 15px; }

/* 6. tpl-glalie - Minimal Borders, Clean */
.tpl-glalie .drb-prev-sidebar { border-right: 2px solid var(--theme-color); }
.tpl-glalie .drb-prev-section-title { border-bottom: none; border-left: 4px solid var(--theme-color); padding-left: 10px; padding-bottom: 0; }

/* 7. tpl-kakuna - Top Header, Two Columns Below */
.tpl-kakuna { flex-direction: column; }
.tpl-kakuna .drb-prev-main { width: 100%; }
.tpl-kakuna .drb-prev-header-block { padding: 40px; text-align: center; }
.tpl-kakuna .drb-prev-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; background: #fff; border-right: none; border-top: 1px solid #eaeaea; padding: 30px 40px; }
.tpl-kakuna #prevSkillsSection, .tpl-kakuna #prevLangsSection, .tpl-kakuna #prevInterestsSection { flex: 1; min-width: 200px; margin-top: 0; }

/* 8. tpl-ditto - Two Equal Columns */
.tpl-ditto .drb-prev-sidebar { width: 50%; }
.tpl-ditto .drb-prev-main { width: 50%; }

/* 9. tpl-ditgar - Left Sidebar w/ Header Inside */
.tpl-ditgar .drb-prev-header-block { background: transparent; color: #333; padding: 30px 0 20px 0; border-bottom: 2px solid var(--theme-color); margin-bottom: 20px; }
.tpl-ditgar .drb-prev-h1, .tpl-ditgar .drb-prev-job-title, .tpl-ditgar .drb-prev-summary { color: #333; }
.tpl-ditgar .drb-prev-job-title { color: var(--theme-color); border-bottom: none; padding-bottom: 0; }
.tpl-ditgar .drb-prev-main-content { padding: 0 30px 30px 30px; }

/* 10. tpl-chikorita - Right Sidebar, Light Theme */
.tpl-chikorita { flex-direction: row-reverse; }
.tpl-chikorita .drb-prev-sidebar { background: #fff; border-left: 2px solid var(--theme-color); border-right: none; }
.tpl-chikorita .drb-prev-header-block { border-bottom: 4px solid var(--theme-color); }