:root {
  font-family: "DM Sans", system-ui, sans-serif;
  color: #18201c;
  background: #f4f1eb;
  font-synthesis: none;
  --ink: #18201c;
  --muted: #6b726d;
  --paper: #fffefa;
  --line: #dedbd3;
  --green: #2f5a47;
  --green-2: #e2ece6;
  --gold: #c59252;
  --coral: #d9745d;
  --shadow: 0 18px 55px rgba(40, 49, 44, .09);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { background: #17231d; color: #f6f3ec; padding: 30px 22px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: 12px; align-items: center; margin: 0 8px 36px; }
.brand-mark { width: 40px; height: 40px; border: 1px solid #839087; display: grid; place-items: center; font-family: "Playfair Display"; font-size: 19px; }
.brand strong { display: block; font-family: "Playfair Display"; font-size: 18px; }
.brand small { color: #9ba69f; letter-spacing: .08em; }
.nav { display: grid; gap: 7px; }
.nav button { border: 0; color: #bdc6c0; background: transparent; text-align: left; padding: 13px 14px; border-radius: 10px; display: flex; gap: 12px; align-items: center; }
.nav button.active, .nav button:hover { color: white; background: #28372f; }
.nav .ico { width: 20px; text-align: center; }
.privacy-card { margin-top: auto; border: 1px solid #31443a; border-radius: 14px; padding: 16px; color: #aeb8b1; font-size: 12px; line-height: 1.55; }
.privacy-card strong { color: white; display: block; margin-bottom: 4px; }
.main { padding: 34px 42px 64px; max-width: 1550px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 32px; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: "Playfair Display"; font-size: clamp(30px, 4vw, 44px); line-height: 1.06; margin-bottom: 7px; }
.subtle { color: var(--muted); }
.btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 11px 16px; border-radius: 10px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(36,45,40,.08); }
.btn.primary { background: var(--green); border-color: var(--green); color: white; }
.btn.danger { color: #a14336; }
.danger-card { border-color: #e4c8c2; background: #fffaf8; }
.danger-card h3 { color: #8d352b; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 24px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 19px; box-shadow: 0 7px 25px rgba(40,49,44,.04); }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-family: "Playfair Display"; font-size: 29px; margin-top: 5px; }
.stat-note { font-size: 12px; color: var(--green); margin-top: 3px; }
.storage-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:11px; }
.storage-line strong { font-family:"Playfair Display"; font-size:24px; }
.storage-line span { color:var(--muted); font-size:11px; }
.storage-meter { height:8px; border-radius:99px; background:#e6e2da; overflow:hidden; margin:10px 0 7px; }
.storage-meter span { display:block; height:100%; background:var(--green); border-radius:inherit; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.toolbar { display: flex; padding: 15px; gap: 10px; border-bottom: 1px solid var(--line); }
.search { flex: 1; position: relative; }
.search input { width: 100%; border: 1px solid var(--line); background: #f9f7f2; border-radius: 9px; padding: 11px 14px 11px 38px; outline: none; }
.search span { position: absolute; left: 14px; top: 10px; color: var(--muted); }
select, input, textarea { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 11px 12px; color: var(--ink); outline: none; }
input:focus, textarea:focus, select:focus { border-color: #718c7d; box-shadow: 0 0 0 3px rgba(47,90,71,.1); }
.project-table { width: 100%; border-collapse: collapse; }
.project-table th { text-align: left; padding: 13px 18px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: #faf8f3; }
.project-table td { padding: 16px 18px; border-top: 1px solid #ebe8e1; vertical-align: middle; }
.project-table tr { cursor: pointer; }
.project-table tbody tr:hover { background: #fbfaf6; }
.client { display: flex; align-items: center; gap: 11px; }
.avatar { width: 36px; height: 36px; background: var(--green-2); color: var(--green); display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.client small { display: block; color: var(--muted); margin-top: 2px; }
.pill { display: inline-flex; border-radius: 99px; padding: 6px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #ecebe6; color: #5c625e; }
.pill.waiting { background: #f3e9d8; color: #8c642e; }
.pill.received { background: #e2ece6; color: #2f5a47; }
.pill.progress { background: #e8e9f2; color: #4b507b; }
.pill.preview { background: #f0e5ee; color: #805174; }
.pill.approved { background: #dceee7; color: #22634b; }
.pill.shipped { background: #e2eaf4; color: #345a86; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(12,18,15,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; z-index: 20; }
.modal { background: var(--paper); width: min(690px, 100%); max-height: 92vh; overflow: auto; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.modal-head { padding: 24px 26px 16px; display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-family: "Playfair Display"; margin-bottom: 4px; }
.x { border: 0; background: transparent; font-size: 25px; color: var(--muted); }
.form { padding: 22px 26px 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }
.detail-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 20px; }
.detail-card { padding: 23px; }
.detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.detail-head h2 { font-family: "Playfair Display"; font-size: 28px; margin-bottom: 5px; }
.meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 22px 0; }
.meta { padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.meta small { display: block; color: var(--muted); margin-bottom: 5px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; margin: 25px 0 12px; }
.upload-summary { border: 1px dashed #afbbb3; background: #f4f8f5; border-radius: 13px; padding: 18px; display: flex; justify-content: space-between; align-items: center; }
.upload-summary strong { font-size: 21px; }
.timeline { display: grid; gap: 0; }
.timeline-row { display: grid; grid-template-columns: 24px 1fr; gap: 11px; min-height: 54px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: #cad0cc; margin-top: 4px; position: relative; }
.timeline-row:not(:last-child) .timeline-dot::after { content:""; position:absolute; width:1px; height:44px; background:#d8dbd8; left:4px; top:12px; }
.timeline-row.done .timeline-dot { background: var(--green); }
.timeline-row.current .timeline-dot { background: var(--gold); box-shadow: 0 0 0 4px #efe1cc; }
.timeline-row small { color: var(--muted); }
.side-stack { display: grid; gap: 16px; align-content: start; }
.linkbox { display: flex; gap: 8px; }
.linkbox input { min-width: 0; flex: 1; background: #f6f4ef; color: var(--muted); font-size: 12px; }
.notes { white-space: pre-wrap; color: #4e5751; line-height: 1.55; }
.portal { min-height: 100vh; background: #eeeae2; }
.portal-bar { height: 76px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 max(24px, calc((100vw - 980px)/2)); }
.portal-brand { font-family: "Playfair Display"; font-size: 20px; }
.portal-main { width: min(980px, calc(100% - 32px)); margin: 42px auto 70px; }
.welcome { background: #183126; color: white; border-radius: 20px; padding: 34px; overflow: hidden; position: relative; }
.welcome::after { content:"AM"; font-family:"Playfair Display"; position:absolute; right:32px; top:-12px; font-size:130px; color:rgba(255,255,255,.05); }
.welcome h1 { max-width: 630px; }
.welcome p { color: #c0ccc5; max-width: 660px; margin-bottom: 0; line-height: 1.6; }
.stepper { display: grid; grid-template-columns: repeat(3,1fr); margin: 22px 0; gap: 10px; }
.step { padding: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; font-size: 12px; color: #bec9c2; }
.step strong { color: white; display: block; margin-bottom: 3px; }
.portal-card { padding: 28px; margin-top: 18px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { border: 1px solid var(--line); border-radius: 14px; padding: 21px; text-align: left; background: white; }
.choice:hover, .choice.selected { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,90,71,.09); }
.choice-icon { font-size: 26px; margin-bottom: 14px; }
.choice h3 { margin-bottom: 5px; }
.choice p { color: var(--muted); font-size: 13px; margin-bottom: 0; line-height: 1.45; }
.dropzone { border: 2px dashed #9caaa1; background: #f5f8f6; border-radius: 15px; padding: 40px 20px; text-align: center; }
.dropzone.drag { border-color: var(--green); background: #eaf2ed; }
.hero-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.photo-slot { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fbfaf6; }
.photo-slot.required { border-color: #a8b7ae; }
.photo-slot-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 13px; }
.photo-slot h3 { margin-bottom: 3px; font-size: 15px; }
.photo-slot p { margin: 0; color: var(--muted); font-size: 12px; }
.required-tag { color: #8a5532; background: #f4e8db; padding: 4px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.optional-tag { color: var(--muted); background: #ecebe6; padding: 4px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.picked-file { margin-top: 12px; color: var(--green); background: var(--green-2); border-radius: 9px; padding: 11px 13px; font-size: 16px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
#selection .file-list { margin-top: 18px; border: 2px solid #b7c9bf; background: var(--green-2); border-radius: 12px; padding: 0 15px; }
#selection .file-row { padding: 15px 0; font-size: 16px; align-items: center; }
#selection .file-row strong { color: var(--green); font-size: 18px; }
.client-upload-status { display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:center; border:3px solid; border-radius:16px; padding:20px; margin-bottom:28px; }
.client-upload-status.is-draft { border-color:#d18b43; background:#fff7e9; }
.client-upload-status.is-submitted { border-color:#4f8067; background:#edf7f1; }
.uploaded-total { text-align:center; border-right:1px solid rgba(30,45,37,.16); padding-right:18px; }
.uploaded-total strong { display:block; color:var(--green); font-family:"Playfair Display"; font-size:52px; line-height:1; }
.uploaded-total span { display:block; margin-top:8px; font-size:14px; font-weight:700; line-height:1.3; }
.submission-state strong { display:block; color:#9a5429; font-size:21px; letter-spacing:.03em; }
.is-submitted .submission-state strong { color:var(--green); }
.submission-state p { margin:8px 0 0; font-size:15px; line-height:1.5; }
.main-preview { min-height:180px; border:2px dashed #b7c4bc; border-radius:12px; background:#f0f3ef; display:grid; place-items:center; overflow:hidden; margin-bottom:14px; position:relative; }
.main-preview img { width:100%; height:250px; object-fit:contain; background:#e7eae7; }
.main-preview > span:not(.main-preview-empty) { position:absolute; left:10px; bottom:10px; padding:6px 9px; border-radius:7px; background:rgba(20,38,29,.84); color:white; font-size:12px; font-weight:700; }
.main-preview-empty { color:var(--muted); font-size:14px; font-weight:700; }
.final-submit { margin-top:28px; border:3px solid #d18b43; background:#fff2df; border-radius:16px; padding:22px; text-align:center; }
.final-submit strong { display:block; color:#9a5429; font-size:23px; }
.final-submit p { max-width:650px; margin:8px auto 17px; font-size:15px; line-height:1.5; }
.final-submit .btn { width:100%; padding:16px 20px; font-size:18px; }
.final-submit.submitted { border-color:#79a08b; background:#edf7f1; }
.final-submit.submitted strong { color:var(--green); }
.download-actions { display:grid; gap:9px; margin-top:14px; }
.download-actions .btn { width:100%; }
.download-progress { min-height:18px; margin-top:10px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
@media (max-width: 650px) {
  .client-upload-status { grid-template-columns:1fr; text-align:center; }
  .uploaded-total { border-right:0; border-bottom:1px solid rgba(30,45,37,.16); padding:0 0 16px; }
  .uploaded-total strong { font-size:46px; }
}
.photo-flags { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.photo-flag { padding:7px 9px; border-radius:8px; background:#f0eee8; color:var(--muted); font-size:11px; }
.photo-flag.yes { background:var(--green-2); color:var(--green); font-weight:700; }
.file-list { margin-top: 15px; max-height: 230px; overflow: auto; }
.file-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.progressbar { height: 7px; border-radius: 99px; overflow: hidden; background: #dfe3df; margin-top: 15px; }
.progressbar span { height: 100%; display: block; background: var(--green); transition: width .25s; }
.success { text-align: center; padding: 28px; }
.success-mark { width: 62px; height: 62px; background: var(--green-2); color: var(--green); display:grid; place-items:center; border-radius:50%; font-size:30px; margin: 0 auto 17px; }
.draft-banner { border: 1px solid #cbd5cf; background: #f2f7f4; border-radius: 14px; padding: 17px; margin-bottom: 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.draft-banner strong { display:block; margin-bottom:3px; }
.draft-banner p { margin:0; color:var(--muted); font-size:12px; }
.submit-banner { border-color:#dcc39e; background:#faf3e8; }
.toast { position: fixed; right: 24px; bottom: 24px; background: #18201c; color:white; padding: 13px 17px; border-radius: 10px; box-shadow: var(--shadow); z-index: 50; }
@media (max-width: 950px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { height: auto; position: static; padding: 18px; flex-direction: row; align-items:center; }
  .brand { margin:0; }
  .nav { display:none; }
  .privacy-card { display:none; }
  .main { padding: 26px 18px 50px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .project-table th:nth-child(3), .project-table td:nth-child(3), .project-table th:nth-child(5), .project-table td:nth-child(5) { display:none; }
}
@media (max-width: 620px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .topbar .btn { width:100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .toolbar { flex-wrap:wrap; }
  .toolbar select { width:100%; }
  .form-grid, .choice-grid, .meta-grid { grid-template-columns: 1fr; }
  .hero-photo-grid { grid-template-columns: 1fr; }
  .field.full { grid-column:auto; }
  .project-table th:nth-child(4), .project-table td:nth-child(4) { display:none; }
  .project-table td, .project-table th { padding: 13px 10px; }
  .portal-main { margin-top: 18px; }
  .welcome { padding: 25px 21px; }
  .stepper { grid-template-columns: 1fr; }
  .portal-card { padding: 20px; }
  .draft-banner { align-items:stretch; flex-direction:column; }
}