:root{--dian-bg: #f5f7fb;--dian-sidebar-bg: #0d1b2a;--dian-sidebar-text: #dbe6f2;--dian-sidebar-muted: #a8bed4;--dian-header-bg: #ffffff;--dian-border: #dbe2ea}html,body{height:100%}body{margin:0;background:var(--dian-bg);color:#1d2733}.dian-shell{display:flex;height:100vh;width:100%;overflow:hidden}.dian-sidebar{width:280px;min-width:280px;background:var(--dian-sidebar-bg);color:var(--dian-sidebar-text);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)}.dian-brand{padding:1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}.dian-brand h1{margin:0;font-size:1rem;font-weight:700;letter-spacing:.03em}.dian-brand p{margin:.25rem 0 0;color:var(--dian-sidebar-muted);font-size:.82rem}.dian-nav{padding:1rem .75rem;overflow-y:auto}.dian-nav a{display:block;color:var(--dian-sidebar-text);text-decoration:none;border-radius:10px;padding:.7rem .8rem;margin-bottom:.35rem;font-size:.95rem}.dian-nav a:hover{background:#ffffff14}.dian-content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.dian-header{position:sticky;top:0;z-index:10;background:var(--dian-header-bg);border-bottom:1px solid var(--dian-border);padding:.9rem 1.25rem}.dian-main{flex:1;overflow-y:auto;padding:1.25rem}.dian-main pre{max-height:340px}.dian-hero-card{background:linear-gradient(140deg,#0f2a43,#244d77);border-radius:18px;padding:1.5rem;color:#f2f7ff;box-shadow:0 18px 40px #0c233d2e}.dian-hero-card .text-secondary{color:#d0dfef!important}.dian-step-card{border:1px solid var(--dian-border);border-radius:12px;padding:.9rem;background:#f9fbff}.section-title{padding-bottom:.35rem;border-bottom:1px solid var(--dian-border);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-weight:700;color:#51657a}.invoice-chip-group{display:flex;gap:.5rem;flex-wrap:wrap}.invoice-chip{background:#eef4ff;border:1px solid #d7e4ff;color:#2a4973;border-radius:999px;padding:.35rem .65rem;font-size:.78rem;font-weight:600}.invoice-item-card{border-color:#d9e6f5!important;background:#f8fbff!important}.invoice-action-bar{border:1px solid #dce8f7;border-radius:14px;background:#f2f7ff;padding:.85rem 1rem}@media (max-width: 992px){.dian-shell{flex-direction:column}.dian-sidebar{width:100%;min-width:100%;max-height:200px}.dian-main{padding:1rem}.dian-hero-card{padding:1.2rem}}