.demo{--d-primary-50:#ecfeff;--d-primary-300:#67e8f9;--d-primary-400:#22d3ee;--d-primary-500:#06b6d4;--d-primary-600:#0891b2;--d-accent-500:#6366f1;--d-gray-50:#f8fafc;--d-gray-100:#f1f5f9;--d-gray-200:#e2e8f0;--d-gray-300:#cbd5e1;--d-gray-400:#94a3b8;--d-gray-500:#64748b;--d-gray-600:#475569;--d-gray-900:#0f172a;--d-success-50:#f0fdf4;--d-success-600:#16a34a;--d-warning-50:#fffbeb;--d-warning-600:#d97706;--d-error-50:#fef2f2;--d-error-600:#dc2626;--d-text:var(--d-gray-900);--d-text-2:var(--d-gray-600);--d-text-3:var(--d-gray-400);--d-border:var(--d-gray-200);color:var(--d-text);border:1px solid var(--d-border);border-radius:var(--radius);background:#fff;margin:2.5rem 0;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;overflow:hidden;box-shadow:0 12px 32px -18px #10231c59}.demo__chrome{background:var(--d-gray-100);border-bottom:1px solid var(--d-border);align-items:center;gap:.6rem;padding:.5rem .75rem;display:flex}.demo__dots{flex-shrink:0;gap:.3rem;display:flex}.demo__dots i{background:var(--d-gray-300);border-radius:50%;width:9px;height:9px}.demo__url{border:1px solid var(--d-border);min-width:0;color:var(--d-text-3);white-space:nowrap;text-overflow:ellipsis;background:#fff;border-radius:999px;flex:1;padding:.2rem .7rem;font-size:12px;overflow:hidden}.demo__note{background:var(--d-gray-50);border-top:1px solid var(--d-border);color:var(--d-text-3);padding:.55rem .9rem;font-size:12px}.demo__body{background:var(--d-gray-50);padding:1.25rem}.demo__shell{min-height:300px;display:flex}.demo__sidebar{background:var(--d-gray-900);color:#fff;flex-direction:column;flex-shrink:0;width:190px;display:flex}.demo__brand{color:var(--d-primary-400);letter-spacing:.02em;border-bottom:1px solid #ffffff14;align-items:center;gap:.5rem;padding:.85rem;font-weight:700;display:flex}.demo__nav{flex-direction:column;flex:1;gap:2px;padding:.6rem .4rem;display:flex}.demo__nav span{color:var(--d-gray-300);border-radius:8px;align-items:center;gap:.55rem;padding:.45rem .6rem;font-size:13px;font-weight:500;display:flex}.demo__nav span.is-active{color:var(--d-primary-300);background:linear-gradient(135deg,#06b6d433,#06b6d414)}.demo__nav svg{opacity:.9;flex-shrink:0}.demo__user{border-top:1px solid #ffffff14;align-items:center;gap:.55rem;padding:.75rem;display:flex}.demo__avatar{background:linear-gradient(135deg, var(--d-primary-500), var(--d-accent-500));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:11px;font-weight:600;display:flex}.demo__user b{font-size:12px;font-weight:500;display:block}.demo__user em{color:var(--d-gray-400);font-size:11px;font-style:normal}.demo__main{flex-direction:column;flex:1;min-width:0;display:flex}.demo__header{border-bottom:1px solid var(--d-border);background:#fff;align-items:center;gap:.6rem;padding:.7rem 1rem;font-weight:600;display:flex}.demo__content{background:var(--d-gray-50);flex:1;padding:1.1rem}.demo h4{letter-spacing:normal;color:var(--d-text);margin:0 0 .15rem;font-family:inherit;font-size:19px;font-weight:600}.demo p.demo__lead{color:var(--d-text-2);margin:0 0 .9rem;font-size:13px}.demo__row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.demo__card{border:1px solid var(--d-border);background:#fff;border-radius:10px;padding:1rem}.demo__card+.demo__card{margin-top:.75rem}.demo__label{text-transform:uppercase;letter-spacing:.04em;color:var(--d-text-3);margin-bottom:.2rem;font-size:11px}.demo__btn{background:var(--d-primary-600);color:#fff;font:inherit;border:0;border-radius:8px;align-items:center;gap:.4rem;padding:.45rem .85rem;font-size:13px;font-weight:500;display:inline-flex}.demo__btn--ghost{color:var(--d-text-2);border:1px solid var(--d-border);background:#fff}.demo__btn--block{justify-content:center;width:100%}.demo__input{border:1px solid var(--d-gray-300);color:var(--d-text-3);background:#fff;border-radius:8px;align-items:center;gap:.5rem;padding:.45rem .7rem;display:flex}.demo__input input{min-width:0;font:inherit;color:var(--d-text);background:0 0;border:0;outline:0;flex:1}.demo__input:focus-within{border-color:var(--d-primary-500);box-shadow:0 0 0 3px var(--d-primary-50)}.demo__field{margin-bottom:.7rem}.demo__field>label{color:var(--d-text-2);margin-bottom:.25rem;font-size:12px;font-weight:500;display:block}.demo__fake-field{border:1px solid var(--d-gray-300);color:var(--d-text-3);background:#fff;border-radius:8px;min-height:2rem;padding:.45rem .7rem}.demo__fake-field--text{color:var(--d-text)}.demo__table{border-collapse:collapse;background:#fff;border-radius:10px;width:100%;overflow:hidden}.demo__table th{text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--d-text-3);border-bottom:1px solid var(--d-border);padding:.5rem .75rem;font-size:11px;font-weight:500}.demo__table td{border-bottom:1px solid var(--d-border);padding:.55rem .75rem;font-size:13px}.demo__table tr:last-child td{border-bottom:0}.demo__table td small{color:var(--d-text-3);font-size:11px;display:block}.demo__scroll{border:1px solid var(--d-border);border-radius:10px;overflow-x:auto}.demo__scroll .demo__table{border-radius:0;min-width:460px}.demo__empty{text-align:center;color:var(--d-text-3);background:#fff;padding:1.6rem;font-size:13px}.demo__chip{border:1px solid #0000;border-radius:999px;align-items:center;gap:.3rem;padding:.12rem .55rem;font-size:11px;font-weight:500;display:inline-flex}.demo__chip--ok{background:var(--d-success-50);color:var(--d-success-600);border-color:currentColor}.demo__chip--warn{background:var(--d-warning-50);color:var(--d-warning-600);border-color:currentColor}.demo__chip--err{background:var(--d-error-50);color:var(--d-error-600);border-color:currentColor}.demo__chip--neutral{background:var(--d-gray-100);color:var(--d-text-2);border-color:var(--d-border)}.demo__tabs{border-bottom:1px solid var(--d-border);gap:.15rem;margin-bottom:.9rem;display:flex;overflow-x:auto}.demo__tabs button{font:inherit;color:var(--d-text-2);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex-shrink:0;padding:.5rem .75rem;font-size:13px;font-weight:500}.demo__tabs button[aria-selected=true]{color:var(--d-primary-600);border-bottom-color:var(--d-primary-500)}.demo__tabs button:hover{color:var(--d-text)}[data-panel][hidden]{display:none}.demo__vitals{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.5rem;display:grid}.demo__vitals div{border:1px solid var(--d-border);background:#fff;border-radius:8px;padding:.4rem .55rem}.demo__vitals b{font-size:14px;font-weight:600;display:block}.demo__checks{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.35rem .9rem;display:grid}.demo__checks label{color:var(--d-text-2);align-items:center;gap:.45rem;font-size:13px;display:flex}.demo__checks input{accent-color:var(--d-primary-600);width:15px;height:15px}.demo__hint{background:var(--d-primary-50);color:var(--d-primary-600);border-radius:8px;margin-top:.75rem;padding:.5rem .7rem;font-size:12px}.demo__login{text-align:center;background:#fff;border-radius:14px;max-width:320px;margin:0 auto;padding:1.4rem;box-shadow:0 10px 25px -12px #0f172a59}.demo__login form{text-align:left;margin-top:1rem}.demo__login .demo__brandmark{background:var(--d-primary-50);color:var(--d-primary-600);border-radius:50%;padding:.6rem;display:inline-flex}.demo__link{font:inherit;color:var(--d-primary-600);cursor:pointer;background:0 0;border:0;margin-top:.6rem;padding:0;font-size:12px;text-decoration:underline;display:inline-block}@media (width<=640px){.demo__sidebar{width:56px}.demo__nav span span,.demo__brand span,.demo__user div{display:none}.demo__nav span{justify-content:center}}