:root {
    --ink: #1c2028;
    --muted: #8b929d;
    --line: #343a45;
    --paper: #fffdf8;
    --black: #090a0d;
    --panel: #12151b;
    --accent: #f08a68;
    --accent-dark: #c95c4c;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: #f5f1e9;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    background: var(--black);
    background-image: radial-gradient(circle at 88% 6%, rgba(200,185,255,.13), transparent 27%), radial-gradient(circle at 8% 92%, rgba(240,138,104,.12), transparent 30%);
}

.app-shell { width: min(1200px, 100%); margin: auto; padding: 44px 28px 72px; }
.app-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
h1, h2, h3 { font-family: "Bodoni 72", Didot, Georgia, serif; letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); font-weight: 400; line-height: .9; }
.subtitle { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
button { cursor: pointer; font: inherit; }
.print-button { padding: 13px 18px; color: #160f0d; background: var(--accent); border: 0; border-radius: 3px; box-shadow: 0 4px 0 var(--accent-dark); font-weight: 700; }
.print-button:hover { background: #ffad8b; }
.workspace { display: grid; grid-template-columns: minmax(310px, .85fr) minmax(420px, 1.15fr); gap: 36px; align-items: start; }
.editor { padding: 27px; background: rgba(18,21,27,.92); border: 1px solid var(--line); border-radius: 5px; }
.section-heading { display: flex; align-items: center; gap: 11px; margin: 25px 0 16px; border-bottom: 1px solid var(--line); }
.section-heading:first-child { margin-top: 0; }
.section-heading span { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.section-heading h2 { margin: 0 0 9px; color: #f5f1e9; font-size: 23px; font-weight: 400; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { display: block; color: #aeb4be; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
input, textarea { display: block; width: 100%; margin-top: 7px; padding: 12px; color: #f5f1e9; background: #0b0d11; border: 1px solid #3b424e; border-radius: 2px; font: 14px/1.5 "Avenir Next", "Segoe UI", sans-serif; resize: vertical; }
input::placeholder, textarea::placeholder { color: #626a75; }
input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.editor > label { margin-bottom: 15px; }
.preview-wrap { min-width: 0; }
.preview-toolbar { display: flex; justify-content: space-between; margin: 0 0 11px; color: #9ea5b0; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.autosave { color: #85c9ac; font-size: 10px; }
.resume { min-height: 780px; padding: 56px 58px; color: var(--ink); background: var(--paper); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.resume-header { padding-bottom: 27px; border-bottom: 3px solid var(--accent); }
.resume-header h2 { margin: 0; font-size: 42px; font-weight: 400; line-height: 1; }
.resume-header p { margin: 10px 0 14px; color: var(--accent-dark); font-size: 16px; font-weight: 700; }
.contact { color: #6e747a; font-size: 11px; line-height: 1.7; }
.resume-content section { margin-top: 26px; }
.resume-content h3 { margin: 0 0 9px; color: var(--accent-dark); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.resume-content p, .multiline { margin: 0; color: #414a53; font: 13px/1.7 "Avenir Next", "Segoe UI", sans-serif; white-space: pre-line; }

@media (max-width: 820px) { .app-shell { padding: 30px 18px 52px; } .workspace { grid-template-columns: 1fr; } .resume { min-height: auto; } }
@media (max-width: 500px) { .app-header { align-items: start; flex-direction: column; } .field-grid { grid-template-columns: 1fr; } .editor { padding: 21px 17px; } .resume { padding: 35px 25px; } .resume-header h2 { font-size: 33px; } }
@media print { body { background: white; } .app-header, .editor, .preview-toolbar { display: none; } .app-shell { width: 100%; padding: 0; } .workspace { display: block; } .resume { min-height: 0; padding: 38px; box-shadow: none; } }