:root {
    --invoice-purple: #a125f3;
    --invoice-purple-dark: #5b1595;
    --invoice-ink: #17121d;
    --invoice-muted: #78717f;
    --invoice-line: #ece7f0;
    --invoice-soft: #f8f4fc;
}

.invoice-form-shell { max-width: 980px; margin: 0 auto; }
.invoice-form-hero { position:relative; overflow:hidden; padding:2rem; border-radius:28px; color:#fff; background:radial-gradient(circle at 86% 0%,rgba(218,151,255,.45),transparent 32%),linear-gradient(135deg,#180d21 0%,#4b176e 58%,#a125f3 120%); box-shadow:0 24px 60px rgba(73,23,103,.22); }
.invoice-form-hero::after { content:""; position:absolute; width:220px; height:220px; right:-75px; bottom:-110px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 75px rgba(255,255,255,.025); }
.invoice-form-hero__eyebrow { margin-bottom:.7rem; color:rgba(255,255,255,.64); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.invoice-form-hero h1 { max-width:650px; margin:0; font-size:clamp(1.9rem,4vw,3rem); font-weight:800; letter-spacing:-.045em; }
.invoice-form-hero p { max-width:650px; margin:1rem 0 0; color:rgba(255,255,255,.7); line-height:1.65; }
.invoice-editor-card { margin-top:1.25rem; padding:1.5rem; border:1px solid var(--invoice-line); border-radius:24px; background:#fff; box-shadow:0 15px 45px rgba(42,25,53,.07); }
.invoice-editor-card .form-control,.invoice-editor-card .form-select { min-height:48px; border-color:#e5dfea; border-radius:14px; }
.invoice-editor-card textarea.form-control { min-height:120px; }
.invoice-editor-card .form-control:focus,.invoice-editor-card .form-select:focus { border-color:#bd75ec; box-shadow:0 0 0 .23rem rgba(161,37,243,.1); }
.invoice-editor-card__section { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.invoice-editor-card__section::after { content:""; flex:1; height:1px; background:var(--invoice-line); }
.invoice-payment-note { padding:1rem; border:1px solid #eadff2; border-radius:16px; color:#62566b; background:#faf7fd; font-size:.82rem; line-height:1.6; }
.invoice-create-button { min-height:52px; padding:0 1.5rem; border:0; border-radius:15px; color:#fff; background:linear-gradient(135deg,#7e22ce,#a125f3); box-shadow:0 12px 25px rgba(126,34,206,.22); font-weight:800; }
.invoice-create-button:hover { color:#fff; transform:translateY(-1px); }

.invoice-kpi { height:100%; padding:1.15rem; border:1px solid var(--invoice-line); border-radius:19px; background:#fff; box-shadow:0 10px 25px rgba(34,24,41,.045); }
.invoice-kpi span { display:block; color:#8d8592; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }
.invoice-kpi strong { display:block; margin-top:.4rem; color:var(--invoice-ink); font-size:1.35rem; }
.invoice-list-card { overflow:hidden; border:1px solid var(--invoice-line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(31,20,39,.045); }
.invoice-list-card__main { display:grid; grid-template-columns:minmax(220px,1.45fr) minmax(150px,.8fr) minmax(135px,.7fr) minmax(160px,.8fr) auto; gap:1rem; align-items:center; padding:1.05rem 1.15rem; }
.invoice-list-card__title strong,.invoice-list-card__cell strong { display:block; color:#2b2430; }
.invoice-list-card__title span,.invoice-list-card__cell span { display:block; margin-top:.25rem; color:#8b8390; font-size:.72rem; }
.invoice-public-link { display:flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border:1px solid #e8dced; border-radius:12px; background:#faf7fc; }
.invoice-public-link input { min-width:0; flex:1; border:0; outline:0; color:#6b5c72; background:transparent; font-size:.75rem; }
.invoice-status-dot { width:9px; height:9px; border-radius:50%; background:#e9a23b; box-shadow:0 0 0 5px rgba(233,162,59,.12); }
.invoice-status-dot--paid { background:#23a26d; box-shadow:0 0 0 5px rgba(35,162,109,.12); }
.invoice-status-dot--cancelled { background:#94909a; box-shadow:0 0 0 5px rgba(148,144,154,.12); }
.invoice-manage-card { position:relative; overflow:hidden; padding:1.6rem; border:1px solid var(--invoice-line); border-radius:26px; background:#fff; box-shadow:0 20px 50px rgba(42,25,52,.08); }
.invoice-manage-card::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(#a125f3,#5b1595); }
.invoice-manage-total { padding:1.2rem; border-radius:18px; color:#fff; background:linear-gradient(135deg,#24102f,#7421a7 70%,#a125f3); }
.invoice-manage-total span { display:block; color:rgba(255,255,255,.65); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.invoice-manage-total strong { display:block; margin-top:.3rem; color:#fff; font-size:2rem; }

.payment-invoice-page { min-height:100vh; margin:0; color:var(--invoice-ink); background:radial-gradient(circle at 0 0,rgba(161,37,243,.13),transparent 28%),#f6f3f8; font-family:"Manrope",sans-serif; }
.payment-invoice-wrap { width:min(100% - 28px,850px); margin:0 auto; padding:36px 0 60px; }
.payment-invoice-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-bottom:1rem; }
.payment-invoice-action { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 1rem; border:1px solid #e1d9e6; border-radius:12px; color:#4d4353; background:#fff; cursor:pointer; font:700 .78rem "Manrope",sans-serif; text-decoration:none; }
.payment-invoice-action--primary { border-color:#8f25d1; color:#fff; background:#8f25d1; }
.payment-invoice-document { overflow:hidden; border:1px solid #e3dce8; border-radius:30px; background:#fff; box-shadow:0 25px 70px rgba(45,26,56,.12); }
.payment-invoice-head { position:relative; min-height:215px; padding:2rem; color:#fff; background:radial-gradient(circle at 85% 15%,rgba(207,115,255,.45),transparent 25%),linear-gradient(145deg,#100a14,#3e1457 60%,#7d1cad); }
.payment-invoice-head::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(to bottom,#000,transparent); }
.payment-invoice-brand { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.payment-invoice-brand img { width:150px; object-fit:cover; object-position:center; border-radius:13px; }
.payment-invoice-type { position:relative; z-index:1; margin-top:1.6rem; }
.payment-invoice-type span { display:block; color:rgba(255,255,255,.62); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.payment-invoice-type h1 { margin:.35rem 0 0; color:#fff; font-size:clamp(2rem,6vw,3.2rem); line-height:1; letter-spacing:-.055em; }
.payment-invoice-status { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#fff; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); font-size:.7rem; font-weight:800; }
.payment-invoice-status i { width:8px; height:8px; border-radius:50%; background:#f5b342; box-shadow:0 0 0 4px rgba(245,179,66,.16); }
.payment-invoice-status--paid i { background:#4ce39a; box-shadow:0 0 0 4px rgba(76,227,154,.16); }
.payment-invoice-status--cancelled i { background:#bdb9c2; box-shadow:0 0 0 4px rgba(189,185,194,.16); }
.payment-invoice-body { padding:2rem; }
.payment-invoice-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-bottom:1.5rem; border-bottom:1px dashed #ded6e3; }
.payment-invoice-meta div { min-width:0; }
.payment-invoice-meta span,.payment-invoice-field span { display:block; color:#908797; font-size:.67rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.payment-invoice-meta strong,.payment-invoice-field strong { display:block; margin-top:.35rem; overflow-wrap:anywhere; }
.payment-invoice-service { margin:1.5rem 0; padding:1.2rem; border:1px solid #eae3ee; border-radius:19px; background:#fbf9fc; }
.payment-invoice-service h2 { margin:.35rem 0 0; font-size:1.08rem; }
.payment-invoice-service p { margin:.7rem 0 0; color:#746b79; line-height:1.7; white-space:pre-line; }
.payment-invoice-total { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:1.2rem 0; padding:1.35rem; border-radius:21px; color:#fff; background:linear-gradient(135deg,#1e1026,#6d1a97 72%,#a125f3); }
.payment-invoice-total span { color:rgba(255,255,255,.62); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.payment-invoice-total strong { color:#fff; font-size:clamp(1.9rem,6vw,3rem); letter-spacing:-.05em; }
.payment-invoice-details { padding:1.25rem; border:1px solid #eadfee; border-radius:19px; background:#faf7fc; }
.payment-invoice-details p { margin:.65rem 0 0; color:#4f4654; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; }
.payment-invoice-foot { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid #eee8f1; color:#8b8390; font-size:.7rem; line-height:1.6; }
.payment-invoice-cancelled { margin:0 2rem 2rem; padding:1rem; border-radius:16px; color:#6b626f; background:#efedf0; text-align:center; font-weight:700; }

@media (max-width: 850px) {
    .invoice-list-card__main { grid-template-columns:1fr 1fr; }
    .invoice-list-card__actions { grid-column:1/-1; }
}
@media (max-width: 600px) {
    .payment-invoice-wrap { padding-top:14px; }
    .payment-invoice-actions { justify-content:stretch; }
    .payment-invoice-action { flex:1; }
    .payment-invoice-document { border-radius:22px; }
    .payment-invoice-head,.payment-invoice-body { padding:1.25rem; }
    .payment-invoice-brand { align-items:flex-start; flex-direction:column; }
    .payment-invoice-brand img { width:130px;  }
    .payment-invoice-meta { grid-template-columns:1fr; }
    .payment-invoice-total { align-items:flex-start; flex-direction:column; }
    .payment-invoice-foot { flex-direction:column; }
    .invoice-list-card__main { grid-template-columns:1fr; }
}
@media print {
    .payment-invoice-page { background:#fff; }
    .payment-invoice-wrap { width:100%; padding:0; }
    .payment-invoice-actions { display:none !important; }
    .payment-invoice-document { border:0; border-radius:0; box-shadow:none; }
}