@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#062d59; --muted:#667085; --line:#dce4ec; --surface:#fff; --canvas:#f4f8fb; --blue:#0b3b73; --blue-dark:#062d59; --gold:#f4c20d; --red:#d51f3d; --green:#138a61; --shadow:0 12px 35px rgba(6,45,89,.1); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:'DM Sans',Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { min-height:76px; height:auto; padding:14px clamp(20px,4vw,60px); background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand,.topbar-actions,.brand>div,.card-heading,.receipt-top,.receipt-brand,.receipt-meta,.payment-line { display:flex; align-items:center; }
.brand { gap:12px; font-size:17px; }.brand strong,.brand span { display:block; }.brand span { color:var(--muted); font-size:11px; margin-top:2px; }.brand-mark,.receipt-logo { display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#4467ff,#6e46df); font-weight:700; border-radius:12px; }.brand-mark { width:38px; height:38px; font-size:13px; }.topbar-actions { gap:16px; }.save-state { color:var(--muted); font-size:12px; }
.brand-mark,.receipt-logo { background-color:#fff; background-image:url("assets/cet-logo.jpg"); background-repeat:no-repeat; background-size:100% 100%; background-position:center; border:1px solid #dce4ec; }
.button { border:0; border-radius:8px; padding:10px 15px; font-weight:600; transition:.2s; }.button-primary { background:var(--blue); color:white; box-shadow:0 5px 12px #062d592b; }.button-primary:hover { background:var(--blue-dark); }.button-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }.button-ghost:hover { background:#f7f8fb; }.button-small { padding:7px 11px; font-size:12px; }.button-add { margin-top:14px; padding:8px 0; color:var(--blue); background:transparent; font-size:13px; }.button-add span { color:var(--gold); font-size:20px; vertical-align:-2px; margin-right:5px; }
.workspace { width:100%; max-width:1420px; margin:auto; padding:42px clamp(20px,4vw,60px) 70px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; }.eyebrow,.section-kicker { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }.live-dot,.preview-dot { display:inline-block; width:7px; height:7px; margin:0 4px; background:#20be85; border-radius:50%; }.page-heading h1 { font-family:'Space Grotesk'; font-size:32px; margin:0 0 8px; letter-spacing:-.04em; }.muted { color:var(--muted); margin:0; font-size:14px; }.order-number { padding:11px 16px; border:1px solid var(--line); border-radius:9px; background:#fff; }.order-number span,.order-number strong { display:block; }.order-number span { color:var(--muted); font-size:11px; }.order-number strong { margin-top:4px; font-size:14px; letter-spacing:.05em; }
.dashboard-grid { display:grid; grid-template-columns:minmax(430px, .9fr) minmax(430px, 1.1fr); gap:28px; align-items:start; }.editor-column { display:grid; gap:18px; }.card { background:var(--surface); padding:25px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.card-heading { justify-content:space-between; margin-bottom:22px; }.card-heading h2 { font-family:'Space Grotesk'; font-size:17px; margin:0; }.section-kicker { margin:0 0 5px; color:#9aa3b5; font-size:10px; }.status-pill,.items-count { font-size:11px; padding:5px 9px; border-radius:20px; }.status-blue { color:var(--blue); background:#eef1ff; }.items-count { color:var(--muted); background:#f3f5f8; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }.field { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:#465164; }.field-wide { grid-column:1/-1; }.field input,.field select,.field textarea { width:100%; padding:11px 12px; border:1px solid #dfe4ec; border-radius:8px; color:var(--ink); background:#fff; outline:none; transition:.2s; font-size:13px; font-weight:400; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #335cff14; }.notes-field { margin-top:18px; }.field textarea { resize:vertical; }
.service-table { overflow-x:auto; }.service-head,.service-row { display:grid; grid-template-columns:minmax(150px,1.5fr) 64px 96px 100px 25px; gap:9px; align-items:center; min-width:470px; }.service-head { padding:0 8px 9px; color:#98a1b1; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.service-row { margin-bottom:9px; }.service-row input,.service-row select { width:100%; min-width:0; border:1px solid #dfe4ec; border-radius:7px; padding:9px 8px; color:var(--ink); background:#fff; font-size:12px; }.service-row input:focus,.service-row select:focus { outline:2px solid #335cff33; border-color:var(--blue); }.price-input { display:flex; min-width:0; align-items:center; border:1px solid #dfe4ec; border-radius:7px; padding-left:7px; color:#8d97a7; font-size:10px; }.price-input input { width:100%; min-width:0; border:0; padding-left:4px; }.price-input input:focus { outline:0; }.service-row .item-total { font-size:12px; text-align:right; }.remove-item { color:#a0a8b5; background:transparent; border:0; font-size:20px; }.remove-item:hover { color:#d9485f; }
.preview-column { position:sticky; top:24px; }.preview-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; color:var(--muted); font-size:12px; font-weight:600; }.receipt { position:relative; isolation:isolate; overflow:hidden; max-width:570px; min-height:700px; margin:auto; padding:34px 38px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }.receipt::before { content:""; position:absolute; z-index:-1; inset:50% auto auto 50%; width:205px; height:105px; transform:translate(-50%,-50%); background:url("assets/cet-logo.jpg") center / contain no-repeat; opacity:.07; pointer-events:none; }.receipt-top { justify-content:space-between; }.receipt-brand { gap:10px; }.receipt-logo { width:39px; height:39px; border-radius:10px; }.receipt-brand h2 { font-family:'Space Grotesk'; font-size:19px; margin:0; }.receipt-brand p { color:var(--muted); font-size:10px; margin:2px 0 0; }.receipt-status { color:var(--green); background:#e9fbf4; border-radius:20px; padding:6px 9px; font-size:9px; font-weight:700; letter-spacing:.08em; }.business-details { display:flex; gap:12px; color:#8b95a5; border-bottom:1px solid var(--line); padding:17px 0; font-size:10px; }.receipt-meta { gap:34px; padding:18px 0 21px; border-bottom:1px solid var(--line); }.receipt-meta span,.receipt-meta strong { display:block; }.receipt-meta span,.receipt-label { color:#9ca5b3; font-size:9px; letter-spacing:.1em; font-weight:700; }.receipt-meta strong { font-size:11px; margin-top:5px; }.customer-block { padding:19px 0 21px; }.customer-block strong,.customer-block span { display:block; }.customer-block strong { font-size:13px; margin:7px 0 4px; }.customer-block span { color:var(--muted); font-size:11px; }.receipt-items { border-top:1px solid var(--ink); }.receipt-items-head,.receipt-item { display:grid; grid-template-columns:1fr 45px 100px; gap:8px; align-items:center; }.receipt-items-head { padding:10px 0 8px; color:#9ca5b3; font-size:9px; font-weight:700; }.receipt-item { padding:8px 0; color:#4e596b; font-size:11px; border-top:1px solid #f0f2f5; }.receipt-item span:nth-child(2),.receipt-items-head span:nth-child(2) { text-align:center; }.receipt-item strong,.receipt-items-head span:last-child { text-align:right; }.empty-receipt { padding:14px 0; color:#98a1b1; font-size:11px; }.receipt-summary { margin-top:19px; margin-left:auto; width:235px; }.receipt-summary>div { display:flex; justify-content:space-between; padding:5px 0; color:#748094; font-size:11px; }.receipt-summary strong { color:var(--ink); }.receipt-summary .grand-total { margin-top:9px; padding:12px 0; border-top:1px solid var(--ink); color:var(--ink); font-size:13px; font-weight:700; }.receipt-summary .grand-total strong { color:var(--blue); font-size:16px; }.payment-line { justify-content:space-between; border:1px solid #e8ebf0; border-radius:7px; padding:10px 12px; margin-top:23px; color:#758095; font-size:10px; }.payment-line strong { color:var(--ink); }.payment-line span:last-child { color:var(--green); font-size:9px; font-weight:700; }.receipt-notes { margin-top:20px; padding-top:14px; border-top:1px dashed #dfe4ec; }.receipt-notes p { color:#59667a; font-size:11px; line-height:1.5; margin:7px 0 0; }.receipt-footer { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:33px; color:#8d97a7; font-size:10px; }.receipt-footer strong { color:var(--ink); font-size:11px; }.preview-help { color:#9aa3b2; text-align:center; font-size:11px; margin:14px 0; }.toast { position:fixed; z-index:5; right:22px; bottom:22px; padding:12px 16px; background:#14213d; color:#fff; border-radius:8px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; font-size:12px; }.toast.visible { opacity:1; transform:none; }.toast-error { background:#c73d50; }
.receipt.pdf-capture { position:absolute; left:-10000px; top:0; width:570px; max-width:none; margin:0; }
@media (max-width:900px) { .dashboard-grid { grid-template-columns:1fr; }.preview-column { position:static; }.preview-column .receipt { max-width:640px; }.page-heading { align-items:flex-start; gap:20px; flex-direction:column; } }
@media (max-width:600px) {
  .topbar { padding:12px 14px; gap:12px; align-items:flex-start; flex-direction:column; }
  .brand { gap:9px; font-size:15px; }.brand-mark { width:34px; height:34px; font-size:11px; }.brand span { font-size:10px; }
  .topbar-actions { width:100%; justify-content:stretch; gap:6px; }.topbar-actions .button { flex:1; padding:9px 7px; font-size:11px; white-space:nowrap; }.save-state { display:none; }
  .workspace { padding:24px 12px 42px; }.page-heading { margin-bottom:20px; }.page-heading h1 { font-size:26px; }.muted { font-size:12px; }.order-number { align-self:stretch; }
  .card { padding:16px 13px; border-radius:11px; }.card-heading { margin-bottom:17px; }.card-heading h2 { font-size:16px; }
  .form-grid { grid-template-columns:1fr; gap:13px; }.field-wide { grid-column:auto; }
  .service-table { overflow:visible; }.service-head { display:none; }.service-row { min-width:0; grid-template-columns:38px 92px minmax(0,1fr) 24px; gap:5px; padding:9px 0; margin-bottom:8px; border-bottom:1px solid #eef0f4; }.service-row .item-name { grid-column:1 / -1; }.service-row .item-qty { grid-column:1; }.service-row .price-input { grid-column:2; }.service-row .item-total { grid-column:3; grid-row:2; text-align:right; color:var(--blue); white-space:nowrap; }.service-row .remove-item { grid-column:4; grid-row:2; align-self:center; }.service-row input,.service-row select { padding:10px 6px; }
  .receipt { width:100%; min-width:0; padding:22px 15px; }.receipt-brand { min-width:0; }.receipt-brand h2 { font-size:16px; }.receipt-brand p { font-size:9px; white-space:nowrap; }.receipt-logo { width:34px; height:34px; font-size:10px; }.receipt-status { padding:5px 6px; font-size:8px; }.business-details { flex-wrap:wrap; gap:5px 9px; padding:13px 0; font-size:9px; }.receipt-meta { gap:9px; justify-content:space-between; padding:14px 0 17px; }.receipt-meta span { font-size:8px; }.receipt-meta strong { font-size:9px; }.customer-block { padding:16px 0 18px; }.receipt-items-head,.receipt-item { grid-template-columns:minmax(0,1fr) 32px 88px; gap:5px; }.receipt-item { font-size:10px; }.receipt-summary { width:100%; }.payment-line { margin-top:18px; }
}
@media (max-width:360px) {
  .topbar-actions .button { font-size:10px; padding-left:4px; padding-right:4px; }.workspace { padding-left:8px; padding-right:8px; }.card { padding-left:10px; padding-right:10px; }.receipt { padding-left:12px; padding-right:12px; }.receipt-brand p { display:none; }
}
@media print { body { background:#fff; }.receipt { box-shadow:none; border:0; max-width:none; }.preview-column { position:static; }.preview-toolbar,.preview-help,.no-print { display:none!important; }.workspace { padding:0; }.dashboard-grid { display:block; }.receipt { margin:0; } }