*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#1e293b;background:#f8fafc;flex-direction:column;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;overflow:hidden}#app{display:contents}.layout{flex:1;height:100vh;display:flex;position:relative;overflow:hidden}.board{cursor:default;-webkit-user-select:none;user-select:none;background:#fff;flex:1;overflow:auto}.board-content{flex-direction:column;min-height:100%;display:flex;position:relative}.board-content:after{content:"";pointer-events:none;flex-shrink:0;height:60px;margin-top:auto;display:block}.board-svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.board-empty{color:#94a3b8;text-align:center;pointer-events:none;font-size:.95rem;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.node{color:#fff;cursor:grab;touch-action:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,box-shadow .15s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0003}.node:active{cursor:grabbing}.node.active{background:#2563eb;box-shadow:0 0 0 3px #2563eb59}.node-label{white-space:nowrap;color:#334155;pointer-events:none;background:#ffffffe6;border-radius:3px;padding:1px 4px;font-size:.7rem;font-weight:600;position:absolute;top:calc(100% + 5px);left:50%;transform:translate(-50%)}.panel{z-index:10;background:#f8fafc;border-right:1px solid #e2e8f0;flex-direction:column;flex-shrink:0;width:280px;padding:20px 16px 80px;transition:margin-left .3s ease-in-out;display:flex;overflow-y:auto}.panel.is-collapsed{margin-left:-280px}.sidebar-toggle{z-index:50;cursor:pointer;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-left:none;border-radius:0 8px 8px 0;justify-content:center;align-items:center;padding:12px 6px;font-size:.8rem;transition:left .3s ease-in-out,background .2s,color .2s;display:flex;position:absolute;top:20px;left:280px;box-shadow:4px 2px 8px #0000000a}.sidebar-toggle:hover{color:#2563eb;background:#f8fafc}.sidebar-toggle.is-collapsed{border-left:1px solid #e2e8f0;left:0;box-shadow:2px 2px 8px #0000001a}.brand-header{align-items:center;gap:12px;margin-bottom:6px;display:flex}.brand-logo{object-fit:cover;border-radius:6px;width:32px;height:32px}.brand-header h1{color:#0f172a;font-size:1.25rem;font-weight:700}.brand-subtitle{color:#64748b;margin-bottom:24px;font-size:.8rem;line-height:1.4}.card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;margin-top:24px;padding:14px}.char-section{flex-shrink:0}.char-list{max-height:1000px;margin-bottom:8px;overflow-y:auto}.card h4{color:#1e293b;margin-bottom:12px;font-size:.85rem;font-weight:700}.card h5{color:#475569;margin:12px 0 6px;font-size:.8rem;font-weight:600}.field-label{color:#475569;margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.muted{color:#94a3b8;font-size:.8rem;font-style:italic}input[type=text],input[type=number],input[type=text]::placeholder,textarea,select{font-family:inherit}input[type=text],input[type=number],textarea,select{color:#1e293b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;outline:none;width:100%;margin-bottom:8px;padding:8px 10px;font-size:.85rem;transition:border-color .15s}input[type=number]{padding-right:4px}input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{background:#fff;border-color:#2563eb}textarea{resize:vertical;min-height:70px}input[type=range]{width:100%;margin:4px 0 2px}.range-labels{color:#94a3b8;justify-content:space-between;font-size:.68rem;font-weight:500;display:flex}.btn-action{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:6px;width:100%;padding:10px;font-size:.85rem;font-weight:600;transition:background .15s}.btn-action:hover{background:#1d4ed8}.btn-green{background:#10b981;margin-bottom:12px}.btn-green:hover{background:#059669}.btn-slate{background:#475569}.btn-slate:hover{background:#334155}.btn-io{cursor:pointer;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:8px 14px;font-size:.82rem;font-weight:600;transition:background .15s}.btn-io:hover{background:#e2e8f0}.text-danger{color:#ef4444}.btn-icon{cursor:pointer;opacity:.7;background:0 0;border:none;padding:2px;font-size:1rem;line-height:1;transition:opacity .15s}.btn-icon:hover{opacity:1}.btn-restore{cursor:pointer;color:#475569;white-space:nowrap;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;padding:4px 8px;font-size:.75rem;font-weight:600;transition:background .15s}.btn-restore:hover{background:#e2e8f0}.char-row{color:#334155;justify-content:space-between;align-items:center;padding:4px 0;font-size:.85rem;display:flex}.char-entry{cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin-bottom:8px;padding:4px 6px;font-size:.85rem;transition:background .15s;display:flex}.char-entry:hover{background:#f1f5f9}.char-color-preview{border-radius:50%;flex-shrink:0;width:22px;height:22px;box-shadow:inset 0 0 0 1px #0000001a}.trash-row{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.trash-row:last-child{border-bottom:none}.trash-title{color:#334155;text-overflow:ellipsis;white-space:nowrap;max-width:280px;font-size:.85rem;font-weight:500;overflow:hidden}.divider{border-top:1px solid #e2e8f0;margin:14px 0}.modal-overlay{z-index:100;background:#0f172a80;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;flex-direction:column;width:440px;max-width:100%;max-height:90vh;display:flex;box-shadow:0 10px 30px #0003}.modal-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h3{color:#0f172a;font-size:1.05rem;font-weight:700}.modal-body{padding:20px;overflow-y:auto}.modal-footer{background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 12px 12px;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.active-chars{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:12px;padding:8px 12px}.add-char-tools{flex-direction:column;gap:8px;display:flex}.new-char-inline{gap:8px;display:flex}.new-char-inline input{margin-bottom:0}