:root { --ink:#292329; --muted:#746b72; --berry:#92064c; --border:#e3dce0; --paper:#fff; --wash:#f5f3f4; --green:#23674e; --red:#a22338; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--wash); font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; min-height:40px; padding:9px 15px; border:1px solid var(--border); border-radius:4px; background:var(--paper); color:var(--ink); }
button:hover { border-color:var(--berry); }
button:disabled { cursor:wait; opacity:.55; }
:focus-visible { outline:3px solid #267b96; outline-offset:3px; }
a { color:var(--berry); overflow-wrap:anywhere; }
.topbar { min-height:82px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 32px; background:var(--paper); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); font-weight:600; }
.brand img { width:56px; height:56px; object-fit:contain; }
.session { display:flex; align-items:center; gap:16px; font-size:12px; overflow-wrap:anywhere; }
main { max-width:1440px; margin:auto; padding:32px; }
.login-section { max-width:420px; margin:64px auto; }
h1 { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:500; line-height:1.1; margin:8px 0 24px; }
.login-section h1 { font-size:48px; }
h2 { font-size:20px; margin:0 0 8px; overflow-wrap:anywhere; }
h3 { font-size:15px; margin:24px 0 12px; }
.eyebrow { font-size:11px; font-weight:700; color:var(--berry); margin:0; }
label { display:block; margin:16px 0 7px; font-size:12px; font-weight:600; }
input,textarea,select { width:100%; min-height:43px; border:1px solid #cfc4cb; border-radius:4px; padding:10px 12px; background:var(--paper); color:var(--ink); }
textarea { min-height:126px; resize:vertical; }
.primary { background:var(--berry); color:#fff; border-color:var(--berry); }
form button { margin-top:14px; }
.login-section button { width:100%; }
.workspace-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.workspace-heading h1 { margin-bottom:20px; }
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:18px 0 24px; border-bottom:1px solid var(--border); }
.summary div { border-left:3px solid var(--border); padding-left:16px; }
.summary strong { display:block; font-size:27px; color:var(--green); }
.summary span { font-size:12px; color:var(--muted); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0; }
.tabs button { background:transparent; border-color:transparent; }
.tabs [aria-current] { color:var(--berry); border-color:var(--border); background:var(--paper); }
.inbox-layout { display:grid; grid-template-columns:minmax(240px,330px) minmax(0,1fr); border-top:1px solid var(--border); min-height:420px; }
#records { border-right:1px solid var(--border); }
.record { width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:18px; background:transparent; text-align:left; min-height:96px; }
.record[aria-current] { background:#fff; box-shadow:inset 3px 0 var(--berry); }
.record strong,.record small { display:block; overflow-wrap:anywhere; }
.record small { color:var(--muted); margin-top:7px; line-height:1.5; }
#detail { padding:24px; min-width:0; background:var(--paper); }
.meta { font-size:12px; color:var(--muted); overflow-wrap:anywhere; line-height:1.6; }
.details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.details dt { color:var(--muted); font-size:11px; }
.details dd { margin:5px 0 0; overflow-wrap:anywhere; }
.cake-record { border-top:1px solid var(--border); margin-top:20px; }
.cake-record .details { margin:16px 0 24px; }
.cake-record dd { white-space:pre-wrap; }
.body-copy { white-space:pre-wrap; line-height:1.7; overflow-wrap:anywhere; }
.section-divider { border-top:1px solid var(--border); margin-top:24px; padding-top:4px; }
.notice { background:#fff1d8; color:#654b15; padding:12px; border-left:3px solid #ad7e23; line-height:1.6; }
.empty { padding:32px 16px; color:var(--muted); line-height:1.7; }
.mail-row,.payment-row { border-bottom:1px solid var(--border); padding:16px 0; overflow-wrap:anywhere; }
.mail-row p,.payment-row p { margin:8px 0; }
.badge { display:inline-block; color:var(--green); background:#e8f3ec; padding:4px 8px; font-size:11px; border-radius:3px; }
#status { min-height:24px; color:var(--green); line-height:1.6; overflow-wrap:anywhere; }
#status.error { color:var(--red); }
#customer-status { min-height:24px; color:var(--green); line-height:1.6; overflow-wrap:anywhere; }
#customer-status.error { color:var(--red); }
#customer-heading { overflow-wrap:anywhere; }
.inspiration-attachments { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.inspiration-attachments a { width:120px; font-size:12px; }
.inspiration-attachments img { width:120px; height:120px; object-fit:contain; display:block; margin-bottom:8px; }
@media(max-width:720px) { .topbar { padding:12px 16px; gap:12px; align-items:flex-start; } .session { flex-direction:column; align-items:flex-end; gap:8px; max-width:48%; } .brand { gap:8px; font-size:12px; } .brand img { width:42px; height:42px; } main { padding:24px 16px; } h1 { font-size:29px; } .workspace-heading { align-items:flex-start; } .workspace-heading button { font-size:12px; flex-shrink:0; } .summary { gap:8px; } .summary div { padding-left:8px; } .summary strong { font-size:23px; } .inbox-layout { grid-template-columns:1fr; } #records { border-right:0; max-height:310px; overflow-y:auto; } #detail { padding:24px 16px; border-top:1px solid var(--border); } .details { gap:12px; } .login-section { margin-top:40px; } }