:root { --red:#ba001b; --red-dark:#8f0015; --charcoal:#1b1918; --ink:#211e1c; --stone:#6d655e; --line:#dfd5ca; --cream:#f4efe8; --warm-white:#faf8f5; --green:#176b3a; --shadow:0 22px 55px rgba(48,35,24,.12); }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--warm-white); font-family:Arial,Helvetica,sans-serif; }
body { margin:0; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
button,input,textarea { font:inherit; }
input,textarea { width:100%; border:1px solid #cfc3b7; border-radius:9px; padding:12px 13px; background:#fff; color:var(--ink); }
input:focus,textarea:focus,button:focus-visible,a:focus-visible { outline:3px solid rgba(186,0,27,.2); outline-offset:2px; border-color:var(--red); }
.hidden { display:none !important; }
.eyebrow,.step-kicker { margin-bottom:8px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:9px 15px; background:#fff; color:var(--ink); text-decoration:none; font-size:13px; font-weight:750; cursor:pointer; }
.button:disabled { cursor:not-allowed; opacity:.55; }
.button.primary { border-color:var(--red); background:var(--red); color:#fff; }
.button.primary:hover { background:var(--red-dark); }
.button.secondary { border-color:#cabeb2; }
.button.danger { color:var(--red); }
.button.wide { width:100%; }
.button.large { min-height:47px; padding-inline:22px; }
.button.small { min-height:36px; }
.ghost-on-dark { border-color:rgba(255,255,255,.28); background:transparent; color:#fff; }
.icon-button { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:22px; cursor:pointer; }
.auth-shell,.home-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#f7f2ec,#eae0d5); }
.auth-card,.home-card { width:min(440px,100%); border:1px solid var(--line); border-radius:22px; padding:38px; background:#fff; box-shadow:var(--shadow); }
.auth-logo,.home-logo { width:190px; max-height:115px; object-fit:contain; object-position:left center; margin-bottom:20px; }
.auth-card h1,.home-card h1 { margin-bottom:20px; font-size:40px; }
.auth-card .button { margin-top:14px; }
.home-card > p:not(.eyebrow) { color:var(--stone); line-height:1.65; }
.admin-header { display:flex; min-height:116px; align-items:center; justify-content:space-between; padding:8px max(24px,calc((100vw - 1180px)/2)); background:var(--charcoal); }
.admin-logo { width:185px; max-height:104px; object-fit:contain; object-position:left center; }
.admin-header-actions { display:flex; align-items:center; gap:9px; }
.service-label { margin-right:5px; color:rgba(255,255,255,.65); font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.dashboard-shell { width:min(1180px,calc(100% - 42px)); margin:0 auto; padding:50px 0 82px; }
.dashboard-intro { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:30px; }
.dashboard-intro h1 { margin-bottom:10px; font-size:clamp(38px,5vw,60px); line-height:1; }
.dashboard-intro p:last-child { max-width:760px; color:var(--stone); line-height:1.65; }
.panel { border:1px solid var(--line); border-radius:19px; padding:27px; background:#fff; box-shadow:0 12px 34px rgba(48,35,24,.07); }
.integration-panel { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:24px; }
.integration-title-row { display:flex; align-items:center; gap:12px; }
.integration-title-row h2 { margin:0; font-size:28px; }
.integration-panel p { margin:8px 0 0; color:var(--stone); line-height:1.55; }
.integration-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.integration-note { font-size:13px; }
.status-pill { display:inline-flex; border-radius:999px; padding:5px 9px; background:#ede7e0; color:#625a53; font-size:11px; font-weight:800; text-transform:uppercase; }
.status-pill.ready,.status-pill.paid { background:#e2f3e8; color:var(--green); }
.status-pill.error { background:#fee7e9; color:var(--red); }
.create-panel { margin-bottom:34px; }
.panel-heading,.section-heading,.items-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.panel-heading { margin-bottom:23px; }
.panel-heading h2,.section-heading h2 { margin:0; font-size:34px; }
.field-label { display:block; margin:17px 0 7px; font-size:12px; font-weight:800; }
.field-label span { color:var(--stone); font-weight:500; }
.two-column-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.input-with-button { display:grid; grid-template-columns:1fr auto; gap:9px; }
.selection-note { margin:7px 0 0; color:var(--stone); font-size:12px; }
.selection-note.selected { color:var(--green); font-weight:750; }
.items-heading { align-items:end; margin-top:27px; }
.items-heading .field-label { margin:0; }
.items-heading p { margin:5px 0 0; color:var(--stone); font-size:13px; }
.item-list { display:grid; gap:13px; margin-top:12px; }
.item-row { display:grid; grid-template-columns:minmax(220px,1.5fr) 110px 130px 38px; gap:10px; border:1px solid var(--line); border-radius:14px; padding:15px; background:#fbf9f6; }
.item-row .field-label { margin:0 0 6px; }
.item-description-wrap { grid-column:1 / -1; }
.review-note { margin:18px 0 0; border-left:3px solid var(--red); padding:11px 14px; background:#f8f1ec; color:#544c46; font-size:13px; line-height:1.6; }
.form-actions { display:flex; justify-content:flex-end; margin-top:23px; }
.jobs-section { margin-top:35px; }
.section-heading { align-items:end; margin-bottom:17px; }
.section-tools { display:flex; gap:8px; }
.section-tools input { min-width:285px; }
.job-list { display:grid; gap:12px; }
.job-card { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(170px,.8fr) minmax(180px,.8fr) auto; align-items:center; gap:18px; border:1px solid var(--line); border-radius:15px; padding:18px; background:#fff; }
.job-title h3 { margin:7px 0 4px; font-family:Arial,Helvetica,sans-serif; font-size:17px; font-weight:800; }
.job-title p,.job-meta span,.invoice-meta span { margin:0; color:var(--stone); font-size:12px; line-height:1.5; }
.job-meta,.invoice-meta { display:grid; gap:3px; }
.invoice-meta strong { font-size:16px; }
.job-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.empty { border:1px dashed #cfc3b7; border-radius:15px; padding:32px; color:var(--stone); text-align:center; }
.notice { border:1px solid #cfe4d6; border-radius:10px; padding:12px 14px; background:#eef8f1; color:var(--green); }
.notice.warning { border-color:#ead8b2; background:#fff8e9; color:#755211; }
.notice.error { border-color:#f0c6cb; background:#fff0f2; color:var(--red); }
.form-error { min-height:18px; margin:9px 0 0; color:var(--red); font-size:13px; }
.dialog { width:min(520px,calc(100% - 30px)); border:0; border-radius:20px; padding:0; box-shadow:0 30px 90px rgba(0,0,0,.3); }
.dialog::backdrop { background:rgba(25,22,20,.7); backdrop-filter:blur(5px); }
.dialog-card { padding:28px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
@media (max-width:900px) { .job-card { grid-template-columns:1fr 1fr; } .job-actions { grid-column:1/-1; justify-content:flex-start; } .service-label { display:none; } }
@media (max-width:700px) { .admin-header { align-items:flex-start; padding:10px 15px; } .admin-logo { width:135px; } .admin-header-actions { flex-wrap:wrap; justify-content:flex-end; } .admin-header-actions .button { min-height:34px; padding:6px 9px; } .dashboard-shell { width:min(100% - 26px,1180px); padding-top:32px; } .dashboard-intro,.integration-panel,.section-heading { align-items:stretch; flex-direction:column; } .integration-actions { justify-content:flex-start; } .two-column-fields { grid-template-columns:1fr; gap:0; } .item-row { grid-template-columns:1fr 1fr 38px; } .item-search-wrap { grid-column:1/-1; } .item-description-wrap { grid-column:1/-1; } .section-tools { flex-direction:column; } .section-tools input { min-width:0; } .job-card { grid-template-columns:1fr; } .job-actions { grid-column:auto; } }