:root {
  --navy: #222831;
  --deep: #303741;
  --blue: #ed001b;
  --cyan: #ff4657;
  --pale: #fff0f2;
  --text: #172b43;
  --muted: #738397;
  --border: #dce5ee;
  --bg: #f4f7fb;
  --success: #0a8a63;
  --danger: #d83b4b;
  --warning: #b76a0e;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar {
  position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; overflow: hidden;
  padding: 25px 18px 20px; color: #fff;
  background: radial-gradient(circle at -10% 105%, rgba(14,209,230,.2), transparent 31%), linear-gradient(172deg,#071d37,#0b284b 58%,#0a2342);
}
.app-sidebar:after { position: absolute; right: -90px; bottom: 80px; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 0 60px rgba(255,255,255,.018); }
.sidebar-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 0 6px 26px; }
.brand-logo-wrap { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.17); }
.brand-logo-wrap img { width: 46px; height: auto; }
.sidebar-brand strong { display: block; font-size: 15px; letter-spacing: .11em; }
.sidebar-brand small { display: block; margin-top: 4px; color: #92a9c2; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-nav { position: relative; z-index: 1; display: grid; gap: 7px; }
.sidebar-nav a { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid transparent; border-radius: 11px; color: #aec0d3; font-size: 13px; font-weight: 700; }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-nav a.active { border-color: rgba(14,209,230,.18); color: #fff; background: linear-gradient(90deg,rgba(8,102,232,.62),rgba(9,87,184,.34)); box-shadow: inset 3px 0 0 var(--cyan), 0 8px 22px rgba(0,0,0,.13); }
.nav-icon { font-size: 17px; text-align: center; }
.sidebar-card { position: relative; z-index: 1; margin-top: auto; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.05); }
.sidebar-card strong { color: #d9faff; font-size: 9px; letter-spacing: .08em; }
.sidebar-card p { margin: 8px 0 0; color: #93a9bf; font-size: 10px; line-height: 1.55; }
.logout-link { position: relative; z-index: 1; margin: 14px 4px 0; color: #7f96ae; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.logout-link:hover { color: #fff; }
.app-main { min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(20px,3vw,42px); border-bottom: 1px solid rgba(219,228,238,.88); background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
.topbar small { color: #74859a; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.topbar h1 { margin: 4px 0 0; color: var(--navy); font-size: 23px; letter-spacing: -.025em; }
.mobile-nav { display: none; }
.content-area { width: 100%; max-width: 1600px; margin: 0 auto; padding: 28px clamp(18px,3vw,42px) 52px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 800; transition: .15s ease; }
.button-primary { color: #fff; background: linear-gradient(115deg,#075bd4,#0878ee); box-shadow: 0 8px 20px rgba(8,102,232,.22); }
.button-primary:hover { filter: brightness(1.06); }
.button-dark { color: #fff; background: linear-gradient(115deg,#242a31,#3b444f); box-shadow: 0 8px 20px rgba(25,31,38,.18); }
.button-dark:hover { filter: brightness(1.1); }
.button-success { color: #fff; background: linear-gradient(115deg,#087150,#0a9a6d); box-shadow: 0 8px 20px rgba(8,113,80,.2); }
.button-success:hover { filter: brightness(1.06); }
.button:disabled, button:disabled { cursor: wait; opacity: .7; }
.button-outline { border-color: #d2dde8; color: #36506d; background: #fff; }
.button-outline:hover { border-color: #91b8e4; color: var(--blue); background: #f5faff; }
.button-block { width: 100%; margin-top: 9px; }
.flash { margin-bottom: 17px; padding: 13px 16px; border: 1px solid; border-radius: 11px; font-size: 12px; font-weight: 700; transition: .35s ease; }
.flash-success { border-color: #a8dfce; color: #087150; background: #eaf9f4; }
.flash-error { border-color: #f0b9c0; color: #a82735; background: #fff0f2; }
.flash-hide { transform: translateY(-5px); opacity: 0; }

.invoice-workspace { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 22px; }
.invoice-form-column { display: grid; min-width: 0; gap: 18px; }
.form-card, .summary-card, .history-card, .stat-card, .settings-intro { border: 1px solid #dfe7f0; border-radius: 17px; background: #fff; box-shadow: 0 8px 30px rgba(22,53,86,.055); }
.form-card { padding: 23px; }
.document-card { border-top: 3px solid var(--blue); }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; color: #112b4a; font-size: 16px; }
.section-heading p { margin: 5px 0 0; color: #7b899b; font-size: 11px; line-height: 1.5; }
.section-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid #cfe2f8; border-radius: 11px; color: var(--blue); background: var(--pale); font-size: 11px; font-weight: 900; }
.field-grid { display: grid; gap: 15px; }
.grid-4 { grid-template-columns: .82fr 1.45fr 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.field-full { grid-column: 1 / -1; }
.field { display: grid; min-width: 0; gap: 7px; }
.field > span { color: #52637a; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d5e0ea; border-radius: 9px; color: #19304b; background: #fbfdff; outline: none; transition: .15s ease; }
.field input, .field select { height: 40px; padding: 0 11px; font-size: 12px; }
.field textarea { min-height: 96px; resize: vertical; padding: 11px; font-size: 12px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #73aff5; background: #fff; box-shadow: 0 0 0 3px rgba(8,102,232,.1); }
.field-help { margin-top: -2px; color: #8492a3; font-size: 9px; line-height: 1.45; }
.items-card { padding: 0; overflow: hidden; }
.items-heading { justify-content: space-between; margin: 0; padding: 21px 23px 18px; border-bottom: 1px solid #e3eaf2; }
.items-scroll, .table-scroll { overflow-x: auto; }
.items-editor { width: 100%; min-width: 960px; border-collapse: collapse; }
.items-editor th { height: 38px; padding: 0 8px; color: #64758a; background: #f5f8fb; font-size: 9px; font-weight: 800; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.items-editor th:first-child { width: 42px; text-align: center; }
.items-editor th:nth-child(2) { min-width: 280px; }
.items-editor th:nth-child(3) { width: 70px; }
.items-editor th:nth-child(4) { width: 82px; }
.items-editor th:nth-child(5) { width: 112px; }
.items-editor th:nth-child(6) { width: 110px; text-align: right; }
.items-editor th:last-child { width: 48px; }
.items-editor th:nth-child(2) { width: 105px; min-width: 105px; text-align: center; }
.items-editor th:nth-child(3) { width: auto; min-width: 280px; }
.items-editor th:nth-child(4) { width: 70px; }
.items-editor th:nth-child(5) { width: 82px; }
.items-editor th:nth-child(6) { width: 112px; text-align: left; }
.items-editor th:nth-child(7) { width: 110px; text-align: right; }
.items-editor td { padding: 9px 8px; border-top: 1px solid #e4eaf1; color: #344a63; font-size: 11px; vertical-align: middle; }
.items-editor input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #d9e2ec; border-radius: 7px; color: #21364f; background: #fff; font-size: 11px; outline: none; }
.items-editor input:focus { border-color: #76aef0; box-shadow: 0 0 0 2px rgba(8,102,232,.09); }
.items-editor .detail-input { height: 27px; margin-top: 5px; border-color: transparent; color: #718096; background: #f5f8fb; font-size: 10px; }
.is-hidden { display: none!important; }
.image-upload-cell { width: 105px; text-align: center; }
.image-upload-box { display: grid; width: 82px; min-height: 64px; place-items: center; gap: 3px; margin: 0 auto; padding: 5px; overflow: hidden; border: 1px dashed #b9c9d9; border-radius: 9px; color: #536b86; background: #f8fbfe; cursor: pointer; }
.image-upload-box:hover { border-color: var(--blue); color: var(--blue); background: var(--pale); }
.image-upload-box input[type="file"] { display: none; }
.image-preview { display: block; width: 70px; height: 42px; border-radius: 5px; object-fit: contain; background: #fff; }
.image-upload-label { font-size: 8px; font-weight: 800; }
.remove-image-button { margin-top: 4px; padding: 0; border: 0; color: var(--danger); background: transparent; font-size: 8px; font-weight: 800; }
.numeric { text-align: right; }
.item-index { color: #8b9aab!important; font-size: 10px!important; font-weight: 800; text-align: center; }
.item-line-total { color: #15365e!important; font-weight: 800; text-align: right; }
.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; color: #60738a; background: transparent; font-size: 16px; }
.icon-button:hover { color: var(--blue); background: #edf5ff; }
.icon-button.danger:hover { color: var(--danger); background: #fff0f2; }
.mobile-add { display: none; }
.summary-column { position: sticky; top: 104px; }
.summary-card { position: relative; overflow: hidden; padding: 22px; }
.summary-accent { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.summary-label { margin: 7px 0; color: #7a8a9d; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.summary-card > h2 { margin: 0 0 19px; padding-bottom: 19px; border-bottom: 1px solid #e3eaf2; color: var(--navy); font-size: 26px; letter-spacing: -.04em; }
.summary-fields { display: grid; gap: 13px; }
.discount-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; }
.summary-breakdown { display: grid; gap: 10px; margin-top: 19px; padding: 17px 0; border-top: 1px solid #e3eaf2; border-bottom: 1px solid #e3eaf2; }
.summary-breakdown > div { display: flex; justify-content: space-between; color: #65758a; font-size: 11px; }
.summary-breakdown strong { color: #263a53; }
.summary-breakdown .grand-total { margin-top: 3px; padding-top: 13px; border-top: 1px dashed #cdd9e5; color: var(--navy); font-size: 14px; font-weight: 800; }
.grand-total strong { color: var(--blue); font-size: 17px; }
.summary-note { margin: 14px 2px 0; color: #8593a4; font-size: 9px; line-height: 1.5; }

.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 19px; }
.stat-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; font-weight: 900; }
.stat-icon.blue { color: #1168da; background: #eaf4ff; }.stat-icon.amber { color: #b8690b; background: #fff4df; }.stat-icon.green { color: #07835d; background: #e7f8f1; }
.stat-card p { margin: 0 0 5px; color: #76869a; font-size: 10px; font-weight: 700; }.stat-card strong { color: #153252; font-size: 18px; }
.history-card { overflow: hidden; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 23px; border-bottom: 1px solid #e1e9f1; }
.history-toolbar h2 { margin: 0; color: #122d4c; font-size: 17px; }.history-toolbar p { margin: 5px 0 0; color: #7a899b; font-size: 11px; }
.search-box { display: flex; width: min(330px,100%); height: 39px; align-items: center; gap: 7px; padding-left: 11px; border: 1px solid #d5e0eb; border-radius: 10px; color: #8593a3; background: #f9fbfd; overflow: hidden; }
.search-box input { min-width: 0; flex: 1; border: 0; color: #203650; background: transparent; font-size: 11px; outline: none; }.search-box button { align-self: stretch; padding: 0 12px; border: 0; color: #fff; background: var(--blue); font-size: 10px; font-weight: 800; }
.history-table { width: 100%; min-width: 850px; border-collapse: collapse; }.history-table th { height: 42px; padding: 0 16px; color: #67778a; background: #f6f9fc; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }.history-table td { padding: 13px 16px; border-top: 1px solid #e4eaf1; color: #344a63; font-size: 11px; }.align-right { text-align: right!important; }.align-center { text-align: center!important; }
.document-cell { display: flex; align-items: center; gap: 10px; }.document-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d7e7f9; border-radius: 9px; color: #1266d4; background: #edf6ff; }.document-cell strong,.document-cell small,.cell-secondary { display: block; }.document-cell small,.cell-secondary { margin-top: 3px; color: #8391a0; font-size: 9px; }.history-total { color: #173452!important; font-weight: 800; }
.status-select { width: 88px; height: 30px; padding: 0 9px; border: 0; border-radius: 99px; font-size: 10px; font-weight: 800; outline: none; }.status-draft { color: #536579; background: #edf1f5; }.status-unpaid { color: #a15e0b; background: #fff1d9; }.status-paid { color: #087655; background: #e1f7ef; }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }.row-actions form { margin: 0; }
.empty-state { display: grid; min-height: 340px; place-items: center; align-content: center; padding: 40px; text-align: center; }.empty-icon { display: grid; width: 62px; height: 62px; place-items: center; border: 1px dashed #aed0f3; border-radius: 18px; color: var(--blue); background: #edf6ff; font-size: 24px; }.empty-state h3 { margin: 17px 0 0; color: #173351; font-size: 16px; }.empty-state p { margin: 7px 0 17px; color: #7b8999; font-size: 11px; }

.settings-intro { display: flex; max-width: 940px; align-items: center; gap: 25px; margin-bottom: 18px; padding: 22px; background: radial-gradient(circle at 95% 0%,rgba(14,209,230,.12),transparent 33%),#fff; }.settings-logo { display: grid; width: 150px; height: 92px; place-items: center; border: 1px solid #d8e4ef; border-radius: 14px; background: #f8fbfe; }.settings-logo img { width: 125px; height: auto; }.mini-badge { display: inline-block; padding: 5px 8px; border-radius: 6px; color: #2863a5; background: #edf5fe; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.settings-intro h2 { margin: 10px 0 4px; color: #112e4e; font-size: 20px; }.settings-intro p { margin: 0; color: #748398; font-size: 11px; }.settings-card { max-width: 940px; padding: 26px; }.password-card { margin-top: 18px; }.form-actions { display: flex; justify-content: flex-end; margin-top: 21px; padding-top: 19px; border-top: 1px solid #e3eaf1; }

.invoice-actions { display: flex; justify-content: flex-end; gap: 9px; max-width: 900px; margin: 0 auto 18px; }
.pdf-download-menu { position: relative; }
.pdf-download-menu summary { list-style: none; user-select: none; }
.pdf-download-menu summary::-webkit-details-marker { display: none; }
.pdf-download-options { position: absolute; z-index: 50; top: calc(100% + 7px); right: 0; display: grid; width: 185px; overflow: hidden; border: 1px solid #d7e1ea; border-radius: 10px; background: #fff; box-shadow: 0 14px 35px rgba(20,44,68,.18); }
.pdf-download-options button { padding: 11px 13px; border: 0; border-bottom: 1px solid #e5ebf1; color: #28415c; background: #fff; font-size: 10px; font-weight: 800; text-align: left; }
.pdf-download-options button:last-child { border-bottom: 0; }
.pdf-download-options button:hover { color: var(--blue); background: #f7faff; }
.invoice-paper { position: relative; display: flex; width: 794px; min-height: 1123px; flex-direction: column; margin: 0 auto; padding: 52px 48px 40px; overflow: hidden; color: #17293f; background: #fff; box-shadow: 0 16px 50px rgba(20,44,68,.16); }
.invoice-paper:before { position: absolute; top: 0; right: 0; width: 310px; height: 180px; background-image: radial-gradient(circle,rgba(8,102,232,.085) 1.5px,transparent 1.7px); background-size: 12px 12px; content: ""; mask-image: linear-gradient(140deg,#000,transparent 70%); }.invoice-paper:after { position: absolute; right: 0; bottom: 0; width: 155px; height: 5px; background: linear-gradient(90deg,var(--blue),var(--cyan)); content: ""; }
.invoice-doc-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 29px; border-bottom: 1px solid #d9e2eb; }.invoice-brand { display: flex; align-items: center; gap: 12px; }.invoice-brand img { width: 85px; height: auto; }.invoice-brand h2 { margin: 0; color: #0d2f56; font-size: 17px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.invoice-brand p { margin: 5px 0 0; color: #718096; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.invoice-title { text-align: right; }.invoice-title p { margin: 0 0 7px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .17em; }.invoice-title h1 { margin: 0; color: #102b4a; font-size: 17px; }.invoice-title span { display: block; margin-top: 7px; color: #6c7b8f; font-size: 10px; }
.invoice-meta { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 50px; padding: 28px 0; }.invoice-label { margin: 0 0 8px!important; color: #728196!important; font-size: 8px!important; font-weight: 900; letter-spacing: .13em; }.invoice-meta h3 { margin: 0 0 7px; color: #152f4d; font-size: 17px; }.invoice-meta p { margin: 4px 0 0; color: #596a7e; font-size: 9px; line-height: 1.5; }.invoice-meta dl { display: grid; gap: 7px; margin: 0; padding: 14px 16px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: #f4f8fc; }.invoice-meta dl div { display: flex; justify-content: space-between; gap: 15px; }.invoice-meta dt,.invoice-meta dd { margin: 0; font-size: 8px; }.invoice-meta dt { color: #718096; }.invoice-meta dd { color: #213b58; font-weight: 800; text-align: right; }
.invoice-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }.invoice-section-title span { width: 4px; height: 17px; border-radius: 2px; background: linear-gradient(var(--blue),var(--cyan)); }.invoice-section-title h3 { margin: 0; color: #17324f; font-size: 11px; }.invoice-items-table { width: 100%; border-collapse: collapse; table-layout: fixed; }.invoice-items-table thead { background: #edf3f8; }.invoice-items-table th { height: 34px; padding: 0 8px; color: #2f4660; font-size: 8px; font-weight: 900; letter-spacing: .035em; text-align: left; text-transform: uppercase; }.invoice-items-table td { padding: 11px 8px; border-bottom: 1px solid #e0e7ee; color: #34495f; font-size: 8.5px; vertical-align: top; }.invoice-items-table td:first-child { width: 42px; }.invoice-items-table td strong { display: block; color: #172f4a; font-size: 9px; }.invoice-items-table td small { display: block; margin-top: 4px; color: #748398; font-size: 7.5px; line-height: 1.35; }.invoice-items-table th:nth-child(1) { width: 42px; }.invoice-items-table th:nth-child(3) { width: 55px; }.invoice-items-table th:nth-child(4),.invoice-items-table th:nth-child(6) { width: 98px; }.invoice-items-table th:nth-child(5) { width: 50px; }
.invoice-bottom { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 38px; padding-top: 22px; }.invoice-notes { display: grid; gap: 15px; }.invoice-notes p:not(.invoice-label) { margin: 0; color: #5d6e82; font-size: 8px; line-height: 1.55; }.invoice-totals { display: grid; gap: 9px; padding: 15px; border: 1px solid #dbe5ee; border-radius: 9px; background: #f8fafc; }.invoice-totals>div { display: flex; justify-content: space-between; color: #68788b; font-size: 8.5px; }.invoice-totals strong { color: #29415b; }.invoice-totals .invoice-grand-total { margin: 4px -15px -15px; padding: 13px 15px; border-radius: 0 0 8px 8px; color: #fff; background: linear-gradient(110deg,#0b315c,#0a579c); font-size: 11px; font-weight: 900; }.invoice-grand-total strong { color: #fff; font-size: 12px; }
.invoice-footer { display: grid; grid-template-columns: 1fr 1.35fr auto; align-items: end; gap: 25px; margin-top: auto; padding-top: 16px; border-top: 2px solid #173959; }.invoice-footer div { display: grid; gap: 3px; }.invoice-footer strong { color: #213a56; font-size: 8px; }.invoice-footer span { color: #6a7a8d; font-size: 7.5px; }.footer-mark { color: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: .09em; }

.login-page { min-height: 100vh; background: #fff; }.login-shell { display: grid; grid-template-columns: minmax(380px,46%) 1fr; min-height: 100vh; }.login-brand-panel { position: relative; display: grid; place-items: center; overflow: hidden; padding: 60px; color: #fff; background: radial-gradient(circle at 5% 100%,rgba(14,209,230,.25),transparent 35%), linear-gradient(145deg,#071d37,#0b315c); }.login-brand-panel:after { position: absolute; right: -100px; bottom: -80px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); }.login-brand-content { position: relative; z-index: 1; max-width: 450px; }.login-brand-content img { width: 170px; height: auto; padding: 14px; border-radius: 18px; background: #fff; }.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .18em; }.login-brand-content .eyebrow { margin-top: 34px; }.login-brand-content h1 { margin: 12px 0; font-size: clamp(32px,4vw,50px); line-height: 1.08; letter-spacing: -.04em; }.login-brand-content>p:last-of-type { color: #a9bed2; font-size: 14px; line-height: 1.7; }.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }.service-tags span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; color: #d9faff; background: rgba(255,255,255,.05); font-size: 9px; font-weight: 800; text-transform: uppercase; }.login-form-panel { display: grid; place-items: center; padding: 35px; background: #f7fafd; }.login-card { width: min(420px,100%); padding: 38px; border: 1px solid #dfe7f0; border-radius: 20px; background: #fff; box-shadow: 0 22px 70px rgba(17,50,82,.1); }.login-card .eyebrow { color: var(--blue); }.login-card h2 { margin: 7px 0; color: var(--navy); font-size: 28px; }.login-help { margin: 0 0 24px; color: var(--muted); font-size: 12px; }.login-card .field { margin-top: 14px; }.login-button { width: 100%; margin-top: 22px; }.default-login { margin: 18px 0 0; padding: 10px; border-radius: 8px; color: #6d7d90; background: #f4f7fa; font-size: 10px; text-align: center; }.mobile-login-logo { display: none; }

.app-sidebar { background: radial-gradient(circle at -10% 105%,rgba(237,0,27,.24),transparent 31%),linear-gradient(172deg,#15191e,#252c34 58%,#1c2229); }
.brand-logo-wrap { width: 58px; height: 58px; }
.brand-logo-wrap img { width: 56px; height: 56px; object-fit: contain; }
.sidebar-nav a.active { border-color: rgba(255,70,87,.22); background: linear-gradient(90deg,rgba(237,0,27,.65),rgba(131,12,26,.32)); }
.settings-logo img { width: 82px; height: 82px; object-fit: contain; }
.invoice-brand img { width: 88px; height: 88px; object-fit: contain; }
.login-brand-panel { background: radial-gradient(circle at 5% 100%,rgba(237,0,27,.28),transparent 35%),linear-gradient(145deg,#15191e,#303741); }

.invoice-items-table th:nth-child(2) { width: 62px; }
.invoice-items-table th:nth-child(3) { width: auto; }
.invoice-items-table th:nth-child(4) { width: 55px; }
.invoice-items-table th:nth-child(5), .invoice-items-table th:nth-child(7) { width: 98px; }
.invoice-items-table th:nth-child(6) { width: 50px; }
.invoice-product-image { display: block; width: 48px; height: 42px; margin: 0 auto; border-radius: 4px; object-fit: contain; background: #fff; }
.no-product-image { color: #a6b1bd; }
.print-without-images .product-image-column { display: none!important; }
.invoice-paper + .invoice-paper { margin-top: 24px; }
.invoice-page-number { margin-left: auto; color: #7b8999; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.invoice-paper-paginated .invoice-meta { padding-top: 22px; padding-bottom: 22px; }
.invoice-paper-paginated .invoice-items-table td { padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
.pdf-exporting .invoice-paper { box-shadow: none!important; }

@media(max-width:1180px){.invoice-workspace{grid-template-columns:1fr}.summary-column{position:static}.summary-card{max-width:620px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.app-shell{display:block}.app-sidebar{display:none}.topbar{min-height:72px;padding:12px 18px}.topbar small{display:none}.topbar h1{font-size:19px}.mobile-nav{position:sticky;z-index:19;top:72px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #dfe7f0;background:#fff}.mobile-nav a{display:grid;height:46px;place-items:center;border-bottom:2px solid transparent;color:#708198;font-size:11px;font-weight:800}.mobile-nav a.active{border-color:var(--blue);color:var(--blue);background:#f5faff}.content-area{padding-top:20px}.stat-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.mobile-login-logo{display:block;margin-bottom:24px}.mobile-login-logo img{width:120px;height:auto}.invoice-paper{margin-left:auto;margin-right:auto}.invoice-actions{justify-content:center}}
@media(max-width:680px){.topbar .button{min-height:36px;padding:0 11px;font-size:10px}.content-area{padding-right:12px;padding-left:12px}.form-card{padding:18px 15px;border-radius:14px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.items-card{padding:0}.items-heading{padding:18px 15px}.items-heading .button{display:none}.mobile-add{display:flex;width:calc(100% - 30px);margin:12px 15px;border:1px dashed #a7c9ee;color:var(--blue);background:#f3f9ff}.history-toolbar{align-items:stretch;flex-direction:column;padding:18px}.search-box{width:100%}.settings-intro{align-items:flex-start;flex-direction:column;padding:18px}.settings-logo{width:100%}.login-form-panel{padding:18px}.login-card{padding:28px 22px}.invoice-actions{flex-wrap:wrap}.pdf-download-options{right:auto;left:0}.invoice-paper{margin-left:0}.field-full{grid-column:auto}}

@media print {
  @page { size: A4; margin: 0; }
  html,body { width: 210mm; min-height: 297mm; background: #fff!important; }
  .app-shell { display: block; min-height: auto; }.app-sidebar,.topbar,.mobile-nav,.no-print,.flash { display: none!important; }
  .content-area { max-width: none; padding: 0; }.invoice-paper { width: 210mm; min-height: 297mm; margin: 0; padding: 14mm 13mm 11mm; overflow: visible; break-after: page; page-break-after: always; break-inside: avoid-page; page-break-inside: avoid; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .invoice-paper:last-of-type { break-after: auto; page-break-after: auto; }
  .invoice-paper:before,.invoice-paper:after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }.invoice-items-table thead{display:table-header-group}.invoice-items-table tr,.invoice-bottom{break-inside:avoid}
}