.demo-workspace{display:flex;gap:10px;align-items:center;padding:12px 10px;margin-bottom:22px;border:1px solid var(--border);border-radius:10px}.demo-workspace small{display:block;color:var(--gray);font-size:11px}.demo-breadcrumb{font-size:13px}.demo-breadcrumb span{margin:0 12px;color:#bbb}.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px max(30px,4vw);background:#edf1e8;border-bottom:1px solid #dae1d3}.demo-banner strong{color:var(--forest);font-size:12px}.demo-banner p{font-size:11px;margin:4px 0 0;color:#495544}.demo-hero{background:radial-gradient(ellipse at 100% 0,#f3d5be,transparent 60%),#f2ede5;border:1px solid var(--border);border-radius:18px;padding:34px;margin-bottom:24px}.demo-hero h1{max-width:650px;font-size:43px}.demo-hero p{max-width:630px}.demo-hero .head-actions{justify-content:flex-start}.demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}.demo-steps h3{font:21px Georgia,serif}.demo-steps .step-number{display:block;font:29px Georgia,serif;color:var(--terra);margin-bottom:12px}.demo-steps p{margin:0;color:var(--gray);font-size:12px}.demo-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:18px}.demo-filters .field:first-child{flex:1;min-width:180px}.demo-filters input,.demo-filters select{width:100%}.demo-task-list{display:grid;gap:8px}.demo-task-row{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:15px 18px;background:var(--white);border:1px solid var(--border);border-radius:11px}.demo-task-row:hover{border-color:var(--terra)}.demo-task-row .row-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-task-row .row-main strong{font-size:13px}.demo-list-footer{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.demo-task-header{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.demo-task-header h1{font-size:30px;flex:1;margin:0;min-width:180px}.demo-task-header .status{font-size:11px}.demo-task-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}.demo-task-meta .small-muted{margin-right:auto}.demo-shell .label-controls{position:static}.demo-shell .label-controls h2{font-size:23px}.demo-shell .label-controls .likert-card{background:var(--white);margin:0 0 15px}.demo-shell .label-controls .form-actions{flex-wrap:wrap}.demo-shell .label-controls textarea{width:100%}.demo-instructions{padding:15px 18px;margin-bottom:20px;background:var(--white);border:1px solid var(--border);border-radius:10px}.demo-instructions summary{cursor:pointer;font-weight:700;font-size:12px}.demo-instructions p{margin:12px 0 0;white-space:pre-wrap;font-size:12px}.demo-history{margin-top:20px}.demo-history summary{cursor:pointer;font-weight:700}.demo-history pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;font-size:11px}.demo-history article{padding:14px 0;border-top:1px solid var(--border)}.demo-error{color:#984231;font-size:12px;min-height:18px}.demo-shell .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-shell .field small{font-weight:400}.demo-shell .panel{min-width:0}.demo-shell #content:focus{outline:none}.demo-shell .toast{max-width:calc(100vw - 32px);right:16px}
@media(max-width:1100px){.demo-steps{grid-template-columns:1fr}.demo-hero h1{font-size:35px}.demo-shell .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.demo-workspace{display:none}.demo-banner{padding:14px 16px}.demo-shell .topbar{height:54px}.demo-hero{padding:23px}.demo-banner .outline-button{padding:8px 10px}.demo-shell .nav-button{font-size:12px}.demo-task-row{padding:14px 10px;gap:9px}.demo-task-row .row-icon{display:none}.demo-shell .stats-grid{gap:10px}.demo-shell .stat-card{padding:15px}.demo-task-header h1{font-size:26px}.demo-shell .label-controls{padding:16px}.demo-list-footer{flex-wrap:wrap}.demo-shell .form-grid{grid-template-columns:1fr}}
@media(max-width:400px){.demo-banner{align-items:start;flex-direction:column}.demo-shell .topbar{gap:8px}.demo-breadcrumb{font-size:12px}.demo-hero h1{font-size:30px}}