.demo-app{--ink:#17382e;--jade:#071d14;--gold:#c99d4c;--paper:#f4ead5;background:var(--paper);min-height:100vh;color:var(--ink);font-family:var(--font-be-vietnam),sans-serif}.demo-top{background:var(--jade);color:#f7edda;z-index:30;align-items:center;gap:30px;height:72px;padding:0 5vw;display:flex;position:sticky;top:0}.demo-brand{color:inherit;align-items:center;gap:10px;text-decoration:none;display:flex}.demo-brand>span{border:1px solid var(--gold);width:35px;height:35px;color:var(--gold);border-radius:50%;place-items:center;display:grid;transform:rotate(45deg)}.demo-brand b,.demo-brand small{display:block}.demo-brand b{font-family:var(--font-noto-serif);letter-spacing:.06em}.demo-brand small{letter-spacing:.18em;color:#aebdb4;font-size:7px}.demo-top nav{gap:20px;margin:auto;display:flex}.demo-top nav a{color:#cbd4cd;font-size:11px;text-decoration:none}.demo-top nav a:hover{color:var(--gold)}.demo-top>a:last-child{background:var(--gold);color:var(--jade);border-radius:999px;padding:10px 16px;font-size:10px;text-decoration:none}.demo-main{max-width:1500px;margin:auto;padding:60px 6vw 90px}.demo-head{justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px;display:flex}.demo-eyebrow{letter-spacing:.2em;color:#916a2e;font-size:8px;font-weight:700}.demo-head h1{font:500 clamp(38px,5vw,66px)/1.05 var(--font-noto-serif);margin:10px 0}.demo-head p{color:#68746c;max-width:680px}.demo-button{background:var(--gold);color:var(--jade);border:0;border-radius:999px;padding:13px 18px;font-weight:700}.demo-outline{color:inherit;background:0 0;border:1px solid #aa8b54;border-radius:999px;padding:12px 17px}.demo-kpis{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:25px;display:grid}.demo-kpis article,.demo-card{background:#fbf5e9;border:1px solid #d7c49d;padding:22px}.demo-kpis small,.demo-kpis b,.demo-kpis span{display:block}.demo-kpis small{color:#758078;font-size:8px}.demo-kpis b{font:32px var(--font-noto-serif);color:#9a702f;margin:9px 0}.demo-kpis span{color:#557b65;font-size:8px}.demo-grid{grid-template-columns:1.4fr .8fr;gap:15px;display:grid}.demo-card h2{font:26px var(--font-noto-serif);margin:0 0 18px}.demo-tabs{flex-wrap:wrap;gap:7px;margin-bottom:22px;display:flex}.demo-tabs button{color:var(--ink);background:#fbf5e9;border:1px solid #d3c19f;padding:9px 13px}.demo-tabs button.active{background:var(--jade);color:#fff}.demo-kanban{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.demo-column{background:#eadfc8;padding:12px}.demo-column>header{justify-content:space-between;margin-bottom:10px;font-size:9px;display:flex}.demo-ticket{background:#fffaf0;border:1px solid #d8c8a8;margin-top:8px;padding:14px}.demo-ticket code{color:#97682d;font-size:7px}.demo-ticket h3{font:17px var(--font-noto-serif);margin:8px 0}.demo-ticket p{color:#6f7b73;font-size:8px}.demo-ticket footer{color:#8b642f;justify-content:space-between;font-size:8px;display:flex}.demo-list article{border-top:1px solid #ded0b4;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px 0;display:grid}.demo-list article>span{background:var(--jade);width:38px;height:38px;color:var(--gold);border-radius:50%;place-items:center;display:grid}.demo-list b,.demo-list small{display:block}.demo-list small{color:#778078;font-size:8px}.demo-list article>i{color:#9a702f;font-size:9px;font-style:normal}.demo-form{gap:14px;display:grid}.demo-form label{font-size:9px;font-weight:700}.demo-form input,.demo-form select,.demo-form textarea{background:#fffaf0;border:1px solid #d1c09f;width:100%;margin-top:7px;padding:12px;display:block}.demo-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.demo-cards{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.demo-visual{height:190px;margin:-22px -22px 20px;position:relative;overflow:hidden}.demo-visual img{object-fit:cover}.demo-card p{color:#68746c;font-size:11px;line-height:1.65}.demo-card footer{justify-content:space-between;align-items:center;margin-top:18px;display:flex}.demo-status{color:#48715b;background:#e6efe8;padding:6px 8px;font-size:8px}.demo-progress{background:#e2d5bb;height:6px;margin:14px 0}.demo-progress i{background:var(--gold);height:100%;display:block}@media (max-width:900px){.demo-top nav{display:none}.demo-top>a:last-child{margin-left:auto}.demo-kpis{grid-template-columns:1fr 1fr}.demo-grid,.demo-kanban{grid-template-columns:1fr}.demo-cards{grid-template-columns:1fr 1fr}.demo-head{display:block}.demo-head>button,.demo-head>a{margin-top:15px;display:inline-block}}@media (max-width:580px){.demo-main{padding:40px 16px 70px}.demo-kpis,.demo-cards,.demo-row{grid-template-columns:1fr}.demo-head h1{font-size:40px}.demo-top{padding:0 14px}.demo-brand b{font-size:13px}}