:root{--color-bg-page: #f9f9f9;--color-bg-card: #ffffff;--color-bg-group: #eef3fb;--color-bg-group-deep: #fef0f0;--color-border-card: #e0e0e0;--color-border-group: #4a90d9;--color-border-group-deep: #e74c3c;--color-border-header: #e0e0e0;--color-text-hint: #888888;--color-text-group: #2c5f9e;--color-text-group-deep: #c0392b;--color-text-card-deep: #c0392b;--color-accent: #4a90d9;--color-btn-primary-bg: #4a90d9;--color-btn-primary-text: #ffffff;--font-size-root: 16px;--font-size-card: 1rem;--font-size-hint: .8125rem;--font-size-btn: .875rem;--padding-card-x: .875rem;--padding-card-y: .75rem;--padding-header-x: 1.5rem;--padding-header-y: .75rem;--radius-card: 6px;--radius-btn: 6px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .06);--depth-indent: 1.5rem;--gap-item: .5rem;--margin-item: .25rem}.canvas-page{width:100vw;background:var(--color-bg-page);display:flex;flex-direction:column}.canvas-header{display:flex;justify-content:space-between;align-items:center;padding:var(--padding-header-y) var(--padding-header-x);border-bottom:1px solid var(--color-border-header);background:var(--color-bg-card);position:sticky;top:0;z-index:10}.canvas-hint{font-size:var(--font-size-hint);color:var(--color-text-hint)}.canvas-btn-finish{padding:var(--padding-card-y) 1.25rem;background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);border:none;border-radius:var(--radius-btn);cursor:pointer;font-size:var(--font-size-btn)}.canvas-btn-finish:disabled{opacity:.6;cursor:not-allowed}.canvas-list{max-width:680px;margin:1.5rem auto;width:100%;padding:0 1rem}.canvas-item{display:flex;align-items:center;gap:var(--gap-item);padding:var(--padding-card-y) var(--padding-card-x);margin-bottom:var(--margin-item);border-radius:var(--radius-card);cursor:grab;-webkit-user-select:none;user-select:none;font-size:var(--font-size-card)}.canvas-item:active{cursor:grabbing}.canvas-item--dragging{opacity:.3}.canvas-card{background:var(--color-bg-card);border:1px solid var(--color-border-card);box-shadow:var(--shadow-card)}.canvas-card--deep{border-color:var(--color-border-group-deep);color:var(--color-text-card-deep)}.canvas-group{background:var(--color-bg-group);border:1.5px solid var(--color-border-group);font-weight:600}.canvas-group--deep{background:var(--color-bg-group-deep);border-color:var(--color-border-group-deep)}.canvas-item--drop-inside{outline:2px solid var(--color-accent);outline-offset:-2px}.canvas-group-toggle{background:none;border:none;cursor:pointer;font-size:.625rem;padding:0;color:inherit;flex-shrink:0}.canvas-group-input{flex:1;border:none;background:transparent;font-size:var(--font-size-card);font-weight:600;color:var(--color-text-group);outline:none}.canvas-group-input--deep{color:var(--color-text-group-deep)}.canvas-drop-line{height:2px;background:var(--color-accent);border-radius:2px;margin:2px 0}