:root { --ink:#16263c; --navy:#1c385e; --muted:#64748b; --line:#d7dee8; --paper:#fff; --bg:#eef2f7; --blue:#2463a6; --danger:#9b2c2c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-header { min-height:72px; display:flex; align-items:center; gap:20px; padding:12px clamp(16px,3vw,44px); background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap; font-weight:750; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:white; background:var(--navy); border-radius:8px; font-family:Georgia,serif; font-size:21px; }
.header-note { flex:1; color:var(--muted); font-size:.82rem; text-align:center; }
.download-button { border:0; border-radius:8px; background:var(--navy); color:#fff; padding:11px 16px; font-weight:700; font-size:.9rem; box-shadow:0 2px 5px rgba(22,38,60,.18); }
.download-button:hover { background:#122d50; }
.workspace { display:grid; grid-template-columns:minmax(350px, .88fr) minmax(530px,1.12fr); min-height:calc(100vh - 72px); }
.editor-panel { padding:30px clamp(18px,3vw,48px) 48px; background:#fbfcfe; border-right:1px solid var(--line); overflow:auto; }
.editor-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { margin:0 0 4px; color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.13em; }
h1 { font-family:Georgia,serif; margin:0; font-size:1.8rem; letter-spacing:-.035em; }
.status-copy { max-width:175px; color:var(--muted); font-size:.73rem; line-height:1.45; text-align:right; margin:2px 0 0; }
.form-section { padding:20px 0; border-top:1px solid var(--line); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
h2 { margin:0; font-size:.97rem; letter-spacing:.01em; }
.move-controls { display:flex; gap:4px; }
.move-controls button,.entry-actions button { border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--navy); min-width:28px; height:27px; font-size:.8rem; }
.form-grid { display:grid; gap:11px; }.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }.span-two { grid-column:1/-1; }
label { display:flex; flex-direction:column; gap:5px; color:#42526a; font-size:.76rem; font-weight:700; }
input,textarea { width:100%; border:1px solid #cbd5e1; border-radius:6px; background:white; color:var(--ink); padding:8px 9px; font-size:.88rem; font-weight:450; outline:none; }
textarea { resize:vertical; min-height:72px; line-height:1.38; } input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,99,166,.12); }
.entry-card { margin:0 0 13px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f6f8fb; }.entry-card > label { margin-top:10px; }
.entry-actions { display:flex; align-items:center; gap:5px; margin-bottom:10px; }.entry-label { flex:1; color:var(--navy); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.entry-actions .delete-button { color:var(--danger); width:auto; padding:0 7px; }
.label-hint { color:var(--muted); font-size:.68rem; font-weight:500; }.add-button { width:100%; padding:9px; border:1px dashed #94a3b8; border-radius:6px; color:var(--navy); background:#fff; font-weight:700; font-size:.82rem; }.add-button:hover { background:#eef4fa; }
.overflow-warning { margin:0 0 16px; padding:10px 12px; border-radius:7px; color:#7c2d12; background:#fff7ed; border:1px solid #fdba74; font-size:.82rem; line-height:1.4; }
.preview-panel { padding:28px clamp(20px,4vw,60px) 48px; overflow:auto; background:#e6ebf2; }.preview-toolbar { display:flex; justify-content:space-between; margin:0 auto 12px; width:min(100%, 680px); color:#4a5a70; font-size:.78rem; font-weight:750; }.preview-toolbar span:last-child { color:#4c6e51; }
.resume-sheet { width:min(100%,680px); aspect-ratio:8.5/11; min-height:600px; margin:0 auto; padding:clamp(28px,5.3vw,50px) clamp(26px,5.6vw,56px); background:var(--paper); color:#101010; box-shadow:0 13px 36px rgba(36,50,68,.18); font-family:"Times New Roman",Times,serif; font-size:clamp(.65rem,1.35vw,.92rem); line-height:1.13; overflow:visible; }
.resume-name { margin:0 0 .23em; font-size:2.25em; text-align:center; letter-spacing:.01em; }.resume-contact { margin:0 0 1.28em; text-align:center; font-size:.8em; }.resume-section { margin-top:1.2em; }.resume-section-title { margin:0 0 .54em; padding-bottom:.12em; border-bottom:1px solid #111; font-size:1.08em; letter-spacing:.035em; }.resume-entry { margin:.55em 0 0; }.resume-line { display:flex; justify-content:space-between; gap:12px; }.resume-line strong { font-size:1.01em; }.resume-subline { display:flex; justify-content:space-between; gap:12px; font-style:italic; }.resume-sheet ul { margin:.2em 0 .15em 1.1em; padding:0; }.resume-sheet li { margin:.12em 0; }.resume-skills p { margin:.22em 0; }.resume-sheet.is-overflow { outline:2px solid #f59e0b; }
.site-promises { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:22px 20px; background:#fff; border-top:1px solid var(--line); color:var(--navy); font-size:.9rem; font-weight:750; }.site-promises span::before { content:"✓"; margin-right:7px; color:#31704a; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(16px,3vw,44px); background:#f7f9fc; border-top:1px solid var(--line); color:#52647d; font-size:.86rem; }.site-footer nav { display:flex; flex-wrap:wrap; gap:16px; }.site-footer a,.back-link { color:var(--navy); text-decoration:none; font-weight:700; }.site-footer a:hover,.back-link:hover { text-decoration:underline; }.brand-link { text-decoration:none; }.back-link { margin-left:auto; font-size:.88rem; }
.info-page { min-height:100vh; display:flex; flex-direction:column; }.info-content { width:min(100% - 32px,720px); flex:1; margin:0 auto; padding:76px 0 88px; }.info-content h1 { margin-bottom:24px; font-size:clamp(2rem,5vw,3rem); }.info-content p:not(.eyebrow) { max-width:650px; margin:0 0 16px; color:#465a74; font-size:1.05rem; line-height:1.7; }.info-page .site-footer { margin-top:auto; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; }.editor-panel { border-right:0; border-bottom:1px solid var(--line); }.preview-panel { padding:22px 14px 40px; }.resume-sheet { width:min(100%,680px); } }
@media (max-width:540px) { .app-header { gap:10px; }.brand { font-size:.88rem; }.header-note { display:none; }.download-button { margin-left:auto; padding:10px 12px; font-size:.82rem; }.editor-panel { padding:22px 16px 32px; }.two-col { grid-template-columns:1fr; }.span-two { grid-column:auto; }.editor-heading { display:block; }.status-copy { text-align:left; max-width:none; margin-top:8px; }.resume-sheet { padding:28px 25px; font-size:.69rem; min-height:auto; }.preview-toolbar { padding:0 2px; }.site-footer { align-items:flex-start; flex-direction:column; }.info-content { padding:52px 0 64px; } }
@media print { body { background:white; }.app-header,.editor-panel,.preview-toolbar { display:none!important; }.workspace,.preview-panel { display:block; padding:0; min-height:0; background:white; }.resume-sheet { width:8.5in; height:11in; min-height:0; margin:0; box-shadow:none; overflow:hidden; } }