.demo-app{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 10% 55%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 55%),radial-gradient(ellipse at 90% 90%,#42aaa71a,transparent 50%),var(--bg);background-attachment:fixed}.demo-app *{box-sizing:border-box}.demo-app [hidden]{display:none!important}.demo-app button,.demo-app input,.demo-app select{font:inherit}.demo-app .button{background:var(--accent);color:#fff}.demo-app .button:hover{filter:brightness(.9)}.demo-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:16px 28px;max-width:none;min-height:80px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 64%,transparent);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}.demo-powered{font-size:14px;font-weight:700;text-decoration:none;margin-right:auto;white-space:nowrap}.demo-powered span{color:#ff5c28}.demo-top select{width:210px;margin:0}.demo-top>a:last-child{font-size:12px;white-space:nowrap}.demo-login{max-width:1140px;min-height:calc(100dvh - 100px);margin:auto;padding:60px 32px;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}.demo-monogram{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:var(--accent);color:white;font-size:30px;font-weight:700;margin:28px 0}.demo-login h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2px}.demo-login p{color:var(--muted)}.demo-features{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.demo-features span,.demo-badge{font-size:10px;letter-spacing:.5px;border:1px solid var(--line);border-radius:100px;padding:7px 11px;background:var(--surface-soft);display:inline-block}.demo-disclosure{font-size:12px}.demo-app #demo-login-form{padding:32px;border-radius:26px;margin:0}.demo-login form h2{font-size:27px;margin-top:24px}.demo-login form p{font-size:13px}.demo-app label{display:block;font-size:12px;color:var(--muted);margin-top:20px}.demo-app input,.demo-app select{width:100%;min-height:46px;margin:8px 0 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--ink)}.demo-top select{width:210px;margin:0}.demo-login form .button{width:100%;margin:24px 0 16px}.demo-login small{font-size:11px;color:var(--muted)}.demo-sidebar{position:fixed;top:105px;bottom:22px;left:22px;width:230px;padding:24px 16px;border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;background:color-mix(in srgb,var(--sidebar) 62%,transparent);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}.demo-sidebar>strong{font-size:20px;margin:0 8px 22px}.demo-sidebar>.overline{font-size:9px;padding:0 8px}.demo-sidebar nav{display:grid;gap:6px;margin-top:12px;overflow:auto}.demo-sidebar nav button{display:flex;gap:12px;align-items:center;text-align:left;border:0;border-radius:12px;padding:13px;background:transparent;color:var(--muted);cursor:pointer;min-height:46px}.demo-sidebar nav button.active{background:var(--accent);color:white}.demo-sidebar nav .ui-icon{width:19px;height:19px}.demo-sidebar>#demo-exit{margin-top:auto}.demo-content{margin-left:270px;padding:35px 32px;max-width:1600px}.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.demo-heading p{margin:0;color:var(--muted)}.demo-hero{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(115deg,#18292d,color-mix(in srgb,var(--accent) 55%,#18292d));color:white;padding:40px;min-height:260px}.demo-hero:after{content:'';position:absolute;pointer-events:none;width:240px;height:240px;border:40px solid #ffffff12;border-radius:50%;right:-90px;top:-50px}.demo-hero .overline{color:#ffffffb0}.demo-hero h2{font-size:clamp(28px,3.5vw,42px);max-width:580px}.demo-hero p{color:#e0e8e5;max-width:490px}.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:25px 0}.demo-metrics .dashboard-box{margin:0;padding:22px;border-radius:20px}.demo-metrics small{color:var(--muted);font-size:12px}.demo-metrics strong{display:block;font-size:28px;margin-top:12px;overflow-wrap:anywhere}.demo-overview-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.demo-overview-grid .dashboard-box{margin:0;padding:26px;border-radius:22px}.demo-overview-grid p{font-size:13px;color:var(--muted)}.demo-activity-row{padding:17px 0;border-bottom:1px solid var(--line);display:flex;gap:15px;justify-content:space-between;align-items:center}.demo-activity-row strong{display:block;font-size:13px}.demo-activity-row small{color:var(--muted);font-size:11px}.demo-activity-row>span{font-size:10px;color:var(--accent-ink)}.demo-tools{display:flex;gap:12px;align-items:center;margin-bottom:24px}.demo-tools input{margin:0;max-width:430px}.demo-tools button{margin-left:auto;white-space:nowrap}.demo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.demo-lane{min-width:0}.demo-lane>h2{display:flex;justify-content:space-between;margin-bottom:20px;font-size:14px}.demo-lane>h2 span{color:var(--muted)}.demo-app .demo-record{margin:0 0 15px;padding:22px;border-radius:20px;overflow-wrap:anywhere}.demo-record>small{font-size:10px;color:var(--muted)}.demo-record h3{margin:12px 0}.demo-record dl{margin:16px 0;display:grid;gap:8px}.demo-record dl div{display:flex;justify-content:space-between;gap:15px;font-size:12px}.demo-record dt{color:var(--muted)}.demo-record dd{margin:0;text-align:right}.demo-record-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.demo-record-actions button{font-size:11px;min-height:36px;padding:8px 12px}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:35px;border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:11px}.demo-footer button{font-size:11px}#demo-notice:not(:empty){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;z-index:100}.demo-app dialog{width:min(500px,calc(100vw - 30px));max-height:85dvh;overflow:auto;padding:28px}.demo-app dialog .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.demo-empty{padding:25px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);font-size:13px}
@media(max-width:1050px){.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-overview-grid,.demo-board{grid-template-columns:1fr}.demo-login{gap:40px}.demo-content{padding:30px 22px}.demo-hero{padding:28px}}
@media(max-width:760px){.demo-top{padding:12px 16px;gap:8px;flex-wrap:wrap}.demo-powered{font-size:11px}.demo-top select{width:135px;font-size:12px}.demo-top>a:last-child{display:none}.demo-top button{min-height:38px;padding:8px;font-size:11px}.demo-login{grid-template-columns:1fr;padding:30px 20px;gap:24px;min-height:0}.demo-login .overline{font-size:9px}.demo-monogram{width:56px;height:56px;font-size:22px;margin:20px 0}.demo-login h1{font-size:38px}.demo-features{margin:18px 0}.demo-app #demo-login-form{padding:24px}.demo-sidebar{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:12px;right:12px;width:auto;height:auto;padding:6px;border-radius:24px;z-index:45}.demo-sidebar>strong,.demo-sidebar>.overline,.demo-sidebar>#demo-exit{display:none}.demo-sidebar nav{display:flex;margin:0;gap:3px;overflow-x:auto;scrollbar-width:none}.demo-sidebar nav button{flex:1;flex-direction:column;justify-content:center;gap:5px;padding:9px 7px;font-size:10px;white-space:nowrap;min-width:68px;border-radius:18px}.demo-content{margin:0;padding:26px 18px calc(115px + env(safe-area-inset-bottom,0px))}.demo-heading{align-items:start;margin-bottom:24px}.demo-heading h1{font-size:28px}.demo-heading>.demo-badge{display:none}.demo-hero{padding:26px;min-height:285px}.demo-hero h2{font-size:30px}.demo-metrics{gap:12px;margin:20px 0}.demo-metrics .dashboard-box{padding:18px}.demo-metrics strong{font-size:24px}.demo-footer{align-items:start;flex-direction:column}#demo-notice:not(:empty){bottom:105px}.demo-tools input{min-width:0}.demo-tools .button{padding:12px}}