.demo-page{background:var(--soft)}.demo-main{padding:36px 0 70px}.demo-banner{background:#eee6f8;border:1px solid #e1d2ef;padding:13px 17px;border-radius:9px;display:flex;gap:14px;align-items:center;font-size:11px;color:#8a71a2;margin-bottom:40px}.demo-banner strong{color:var(--purple);white-space:nowrap}.demo-main h1{font-size:38px;margin:12px 0}.demo-main .section-top p{color:var(--muted);font-size:13px}.demo-actions{display:flex;gap:10px}.demo-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0}.demo-summary article{padding:23px;background:white;border:1px solid var(--line);border-radius:12px}.demo-summary small{font-size:11px;color:#8f819d;display:block}.demo-summary strong{font-size:25px;letter-spacing:-.04em;display:block;margin-top:8px}.demo-summary article:nth-child(2) strong{color:#078a74}.demo-summary article:nth-child(4) strong{color:#b45e42}.invoice-table-section{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px}.table-toolbar h2{font-size:20px}.table-toolbar>div{display:flex;gap:8px}.table-toolbar input,.table-toolbar select{border-radius:7px;padding:10px;font-size:11px;background:#fff}.table-overflow{overflow:auto}table{border-collapse:collapse;width:100%;min-width:740px;font-size:12px}th,td{padding:16px 22px;text-align:left;border-top:1px solid #f0eaf6}th{font-size:10px;color:#9a8aa7;background:#fbf9fd;font-weight:600}td:first-child{font-size:10px;color:#a18dab}td:nth-child(4),td:nth-child(5){font-weight:600;white-space:nowrap}td .tag{font-size:9px;border-radius:5px;background:#f8eddb;color:#977439;padding:5px 8px;white-space:nowrap}.tag.paid{background:#e3f7ee;color:#25815c}.tag.overdue{background:#fbe9e1;color:#a85e3a}.tag.partial{background:#ece4f8;color:#7952a5}.pay-button{font-size:10px;background:#f3eefb;color:var(--purple);border-radius:5px;padding:7px 10px;white-space:nowrap}.demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;font-size:10px;color:#9e8baa}.text-button{border:0;background:none;color:var(--purple);font-size:11px;text-decoration:underline}.feedback{min-height:25px;margin-top:14px;color:#168b70;font-size:12px}#noRows{padding:25px;text-align:center;font-size:13px;color:var(--muted)}.demo-page dialog{width:440px}.demo-page dialog h2{font-size:24px}.demo-page form label{display:block;font-size:12px;color:#8e7c9f;margin-bottom:16px}.demo-page form label>span{display:block;margin-bottom:6px}.demo-page form input{display:block;width:100%;border-radius:7px;padding:11px;font-size:14px;color:var(--ink);background:#fff}.demo-page form button[type=submit]{width:100%;margin-top:8px}.form-error{color:#b54444;font-size:12px}.demo-page dialog>p{color:var(--muted);font-size:13px;line-height:1.8;margin-bottom:20px}#resetDialog>.button{margin-top:10px}@media(max-width:850px){.demo-summary{grid-template-columns:repeat(2,1fr)}.table-toolbar{flex-direction:column;align-items:start}.table-toolbar>div{width:100%}.table-toolbar input{min-width:0;flex:1}.demo-banner{flex-direction:column;align-items:start;gap:5px}.demo-bottom{flex-direction:column;align-items:start}.demo-main h1{font-size:33px}}@media(max-width:480px){.demo-summary{gap:10px}.demo-summary article{padding:16px}.demo-summary strong{font-size:20px}.demo-summary small{font-size:10px}.table-toolbar{padding:17px}.demo-actions .button{font-size:11px;padding:12px 17px}}
.table-overflow{position:relative}