:root{--bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--fg:#e6edf3;--fg2:#8b949e;--ac:#58a6ff;--ac2:#3fb950;--bd:#30363d;--r:12px;--sh:0 2px 12px rgba(0,0,0,0.3)}
[data-theme="light"]{--bg:#fff;--bg2:#f6f8fa;--bg3:#e1e4e8;--fg:#24292f;--fg2:#57606a;--ac:#0969da;--ac2:#1a7f37;--bd:#d0d7de;--sh:0 2px 12px rgba(0,0,0,0.1)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh}
a{color:var(--ac);text-decoration:none}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg2);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:1.2em;font-weight:700}
.logo{font-size:1.4em}
.nav-actions{display:flex;gap:8px}
.btn-icon{background:var(--bg3);border:1px solid var(--bd);color:var(--fg);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.9em;transition:.2s}
.btn-icon:hover{border-color:var(--ac);color:var(--ac)}
.donate-btn{background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(232,121,249,.15));border-color:rgba(249,115,22,.3);color:#f97316}
.hero{text-align:center;padding:48px 24px 32px}
.hero h1{font-size:2.4em;margin-bottom:12px;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--fg2);font-size:1.1em;margin-bottom:24px}
.mode-switch{display:flex;gap:8px;justify-content:center}
.mode-btn{padding:10px 24px;border-radius:8px;border:2px solid var(--bd);background:var(--bg2);color:var(--fg);cursor:pointer;font-size:1em;font-weight:600;transition:.2s}
.mode-btn.active{border-color:var(--ac);background:var(--ac);color:#fff}
.mode-btn:hover:not(.active){border-color:var(--ac)}
.ad-slot{max-width:1200px;margin:16px auto;padding:0 24px}
.ad-placeholder{background:var(--bg2);border:1px dashed var(--bd);border-radius:var(--r);padding:16px;text-align:center;color:var(--fg2);font-size:.9em}
.container{max-width:1400px;margin:0 auto;padding:0 24px 48px}
.editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-panel,.preview-panel{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--bd);background:var(--bg3);flex-wrap:wrap;gap:8px}
.panel-header h2{font-size:1.1em}
.theme-selector{display:flex;align-items:center;gap:8px;font-size:.85em}
.theme-selector select{background:var(--bg);color:var(--fg);border:1px solid var(--bd);padding:4px 8px;border-radius:6px}
.form-section{padding:20px;max-height:70vh;overflow-y:auto;scrollbar-width:thin}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.9em;font-weight:600;margin-bottom:6px;color:var(--fg2)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--fg);font-size:.95em;transition:.2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--ac)}
.btn-fetch{background:var(--ac);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:.2s}
.btn-fetch:hover{filter:brightness(1.1)}
.gh-status{font-size:.8em;margin-top:6px}
.gh-status.loading{color:var(--ac)}
.gh-status.success{color:var(--ac2)}
.gh-status.error{color:var(--ac)}
.skill-categories{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.skill-cat{padding:4px 12px;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--fg2);cursor:pointer;font-size:.8em}
.skill-cat.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.skill-grid{display:flex;flex-wrap:wrap;gap:6px}
.skill-chip{padding:4px 10px;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;font-size:.8em;transition:.2s}
.skill-chip:hover{border-color:var(--ac)}
.skill-chip.selected{background:var(--ac);color:#fff;border-color:var(--ac)}
.selected-skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.selected-tag{padding:3px 8px;background:var(--ac);color:#fff;border-radius:4px;font-size:.75em}
.social-inputs{display:flex;flex-direction:column;gap:8px}
.social-row{display:flex;align-items:center;gap:8px}
.social-row span{font-size:1.2em;width:28px;text-align:center}
.addon-checks{display:flex;flex-wrap:wrap;gap:12px}
.addon-checks label{display:flex;align-items:center;gap:4px;font-size:.85em;cursor:pointer;color:var(--fg)}
.addon-checks input[type="checkbox"]{accent-color:var(--ac)}
.section-list{display:flex;flex-direction:column;gap:6px}
.section-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;cursor:grab}
.section-item:active{cursor:grabbing}
.section-item .drag-handle{color:var(--fg2);cursor:grab}
.section-item .remove-btn{margin-left:auto;background:none;border:none;color:var(--fg2);cursor:pointer;font-size:1.1em}
.section-item .remove-btn:hover{color:var(--ac)}
.btn-add-section{background:transparent;border:1px dashed var(--bd);color:var(--fg2);padding:8px 12px;border-radius:6px;cursor:pointer;font-size:.85em;margin-top:8px;width:100%}
.btn-add-section:hover{border-color:var(--ac);color:var(--ac)}
.preview-tabs{display:flex;gap:4px}
.preview-tab{padding:6px 16px;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--fg2);cursor:pointer;font-size:.85em}
.preview-tab.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn-copy{padding:6px 16px;border-radius:6px;border:1px solid var(--ac2);background:transparent;color:var(--ac2);cursor:pointer;font-size:.85em;font-weight:600;transition:.2s}
.btn-copy:hover{background:var(--ac2);color:#fff}
.btn-download{padding:6px 16px;border-radius:6px;border:1px solid var(--ac);background:transparent;color:var(--ac);cursor:pointer;font-size:.85em;font-weight:600;transition:.2s}
.btn-download:hover{background:var(--ac);color:#fff}
.preview-body{padding:24px;min-height:400px;max-height:70vh;overflow-y:auto;scrollbar-width:thin}
.markdown-body{font-size:.95em;line-height:1.7}
.markdown-body h1,.markdown-body h2,.markdown-body h3{margin:16px 0 8px;border-bottom:1px solid var(--bd);padding-bottom:6px}
.markdown-body p{margin:8px 0}
.markdown-body img{max-width:100%;border-radius:4px}
.markdown-body code{background:var(--bg3);padding:2px 6px;border-radius:4px;font-size:.9em}
.markdown-body pre{background:var(--bg);padding:16px;border-radius:8px;overflow-x:auto;margin:12px 0}
.markdown-body pre code{background:none;padding:0;color:var(--fg)}
.markdown-body a{color:var(--ac)}
.markdown-body ul,.markdown-body ol{padding-left:24px;margin:8px 0}
.markdown-body blockquote{border-left:3px solid var(--ac);padding-left:12px;color:var(--fg2);margin:8px 0}
.markdown-body hr{border:none;border-top:1px solid var(--bd);margin:16px 0}
.markdown-body table{width:100%;border-collapse:collapse;margin:12px 0}
.markdown-body th,.markdown-body td{padding:8px 12px;border:1px solid var(--bd);text-align:left}
.markdown-body th{background:var(--bg3)}
.markdown-raw{background:var(--bg)}
.markdown-raw pre{margin:0;background:transparent}
.markdown-raw code{font-family:'SF Mono',Consolas,monospace;font-size:.85em;white-space:pre-wrap;word-break:break-all;color:var(--fg);background:none}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;justify-content:center;align-items:center}
.modal-overlay.active{display:flex}
.modal{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:32px;max-width:440px;width:90%}
.modal h2{margin-bottom:16px;font-size:1.4em}
.modal-close{float:right;background:none;border:none;color:var(--fg2);font-size:1.2em;cursor:pointer}
.footer{text-align:center;padding:32px 24px;border-top:1px solid var(--bd);color:var(--fg2);font-size:.9em}
.footer-sub{margin-top:4px;font-size:.8em}
.footer-link-btn{background:none;border:none;color:var(--ac);cursor:pointer;font-size:inherit;font-family:inherit;padding:0}
.footer-link-btn:hover{text-decoration:underline}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ac2);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;transition:transform .3s;z-index:300}
.toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:768px){.editor-layout{grid-template-columns:1fr}.hero h1{font-size:1.6em}.mode-switch{flex-direction:column;align-items:center}.panel-header{flex-direction:column;align-items:flex-start}.form-section{max-height:none}.preview-body{min-height:300px;max-height:none}}