body{height:100dvh;display:flex;flex-direction:column;font-size:14px;line-height:1.6;--surface:#fffefa;--field:#fff}body[data-theme=gray]{--bg:#e6e8e6;--surface:#f2f3f1;--field:#fff;--line:#ccd3cd}body[data-theme=dark]{--bg:#1d2823;--surface:#25352c;--field:#1d2922;--ink:#edf1e9;--muted:#b3c0b2;--line:#43574b;--green:#b2d0a4;--soft:#334a3b;color-scheme:dark}.demo-header{padding:13px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;flex-wrap:wrap}.demo-header .brand{font-size:21px;margin-right:auto}.demo-header .logo{width:32px;height:32px;font-size:18px}.demo-label{color:var(--muted);font-size:12px}.notice{padding:7px 22px;color:var(--muted);font-size:12px;background:var(--soft)}.workspace{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}.left{padding:18px;overflow:auto;border-right:1px solid var(--line)}.detail{padding:25px;overflow:auto;background:var(--surface)}button,select,input,textarea{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:6px;padding:7px 9px;min-width:0}button{cursor:pointer}button:hover{border-color:var(--green)}button.primary{background:#295a47;color:white;border-color:#295a47}.toolbar{position:sticky;top:-18px;background:var(--bg);z-index:2;padding-bottom:14px}.search-row{display:flex;gap:7px}.search-row input{flex:1;width:100%}.filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;font-size:12px}.list-options{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-size:12px}.list-options label{margin-left:auto}.list-options select,.list-options button{padding:3px 6px}.cards{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:8px}.card{position:relative;min-width:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;display:flex;flex-direction:column;min-height:142px}.card[data-grade=S]{background:color-mix(in srgb,#8e73b0 14%,var(--surface));border-color:#a68cc6}.card[data-grade=A]{background:color-mix(in srgb,#c37575 12%,var(--surface));border-color:#d7a1a1}.card[data-grade=B]{background:color-mix(in srgb,#8c9451 13%,var(--surface));border-color:#acb47c}.card[data-grade=C]{background:color-mix(in srgb,#60988d 12%,var(--surface));border-color:#93bcb1}.card[aria-current=true]{outline:2px solid var(--green);outline-offset:-2px}.card.drag-over{outline:3px dashed var(--green)}.card small{color:var(--muted);font-size:11px;padding-right:30px}.card h2{font-size:16px;line-height:1.45;margin:7px 0;overflow-wrap:anywhere;letter-spacing:0}.grade{position:absolute;top:9px;right:9px;font-weight:700;border-radius:5px;background:#547047;color:white;padding:1px 7px;font-size:12px}.card p{font-size:12px;color:var(--muted);margin:0 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marks{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;font-size:10px}.marks span{padding:1px 5px;border-radius:4px;background:var(--field);border:1px solid var(--line)}.card-footer{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:10px}.detail-head{display:flex;gap:15px;justify-content:space-between;align-items:start}.detail h1{font-size:26px;margin:4px 0 14px;line-height:1.45;overflow-wrap:anywhere;letter-spacing:0}.detail .kicker{color:var(--muted);font-size:12px}.field-card{padding:15px;border:1px solid var(--line);border-radius:9px;margin:12px 0;background:var(--bg)}.field-card h2{font-size:17px;margin:0 0 9px;letter-spacing:0}.field-card label{display:block;font-weight:600;margin-bottom:5px}.field-card input,.field-card textarea{display:block;width:100%;font-size:14px}.field-card textarea{min-height:105px;resize:vertical;line-height:1.65}.detail-actions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.detail-actions select{max-width:130px}.info-hint{font-size:12px;color:var(--muted);margin:5px 0}.saved{font-size:12px;color:var(--muted)}.demo-folders{font-size:13px;display:grid;gap:6px}.demo-folders span{padding:7px;background:var(--field);border:1px solid var(--line);border-radius:5px;overflow-wrap:anywhere}dialog{width:min(450px,94vw);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:24px}dialog::backdrop{background:#182b2466}dialog h2{font-size:22px}dialog label{display:block}dialog input{width:100%;margin-top:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#233d34;color:white;padding:10px 18px;border-radius:8px;z-index:5}.empty{padding:30px 10px;color:var(--muted);text-align:center}a:hover{text-decoration:underline}#storage-state{font-weight:700;color:#a24e3e}@media(max-width:800px){body{height:auto;min-height:100dvh}.workspace{display:block}.left{border-right:0}.detail{border-top:1px solid var(--line)}.demo-header{gap:10px}.demo-label{display:none}.notice{font-size:11px}.cards{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}.toolbar{top:0}.detail{padding:20px}.card h2{font-size:15px}.demo-header>a:last-of-type{font-size:12px}}