.sn-tool .sn-layout{align-items: flex-start;row-gap: 16px}.sn-board-panel,.sn-side-panel{min-width: 0}.sn-panel-header{gap: 12px}.sn-panel-header>span:first-child{flex: 1;min-width: 0}.sn-panel-header i{margin-right: 6px}.sn-panel-header .sn-hint{flex: 0 1 auto;min-width: 0;text-align: right}.sn-board-body,.sn-side-body{display: flex;flex-direction: column;gap: 14px}.sn-board-body{--sn-board-max: 440px}.sn-scores{display: flex;flex-wrap: wrap;gap: 10px}.sn-score-card{position: relative;flex: 1 1 120px;min-width: 0;padding: 9px 12px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);text-align: center}.sn-score-card.is-best{background: #ecfdf3;border-color: #bbe7c9}:root[data-theme="dark"] .sn-score-card.is-best{background: #13261b;border-color: #2c4a37}.sn-score-label{display: block;color: var(--text-3);font-size: 12px;font-weight: 600}.sn-score-value{display: block;color: var(--text);font-size: 23px;font-weight: 700;line-height: 1.25;font-variant-numeric: tabular-nums}.sn-gain{position: absolute;top: 4px;right: 8px;color: var(--success);font-size: 13px;font-weight: 700;opacity: 0}.sn-gain.is-on{animation: sn-rise 0.76s ease-out}@keyframes sn-rise{0%{opacity: 1;transform: translateY(0)}100%{opacity: 0;transform: translateY(-16px)}}.sn-stage{position: relative;width: 100%;max-width: var(--sn-board-max);margin: 0 auto;aspect-ratio: 1 / 1}.sn-canvas{display: block;width: 100%;height: 100%;background: #eef7ef;border: 1px solid var(--border);border-radius: 12px;box-shadow: var(--shadow-sm);touch-action: none}:root[data-theme="dark"] .sn-canvas{background: #101915}.sn-overlay{position: absolute;inset: 0;z-index: 6;display: none;flex-direction: column;align-items: center;justify-content: center;gap: 10px;padding: 16px;background: rgba(240,248,241,0.9);border-radius: 12px;text-align: center}.sn-overlay.is-on{display: flex}.sn-overlay[data-mode="over"]{background: rgba(254,242,242,0.92)}.sn-overlay[data-mode="won"]{background: rgba(236,253,245,0.94)}:root[data-theme="dark"] .sn-overlay{background: rgba(13,22,17,0.9)}:root[data-theme="dark"] .sn-overlay[data-mode="over"]{background: rgba(35,16,16,0.92)}.sn-overlay-title{color: var(--text);font-size: 24px;font-weight: 800}.sn-overlay-text{max-width: 320px;color: var(--text-2);font-size: 13.5px;line-height: 1.6}.sn-overlay .btn{margin-top: 2px}.sn-pad{display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(2,auto);gap: 8px;width: 100%;max-width: 250px;margin: 0 auto}.sn-pad-btn{min-height: 44px;padding: 8px 0;background: #15803d;border: none;border-radius: var(--radius);color: #fff;font-size: 18px;font-weight: 700;line-height: 1;cursor: pointer;transition: background .15s,transform .1s}.sn-pad-btn:hover{background: #166534}.sn-pad-btn:active{transform: scale(0.96)}.sn-pad-btn.is-up{grid-column: 2;grid-row: 1}.sn-pad-btn.is-left{grid-column: 1;grid-row: 2}.sn-pad-btn.is-down{grid-column: 2;grid-row: 2}.sn-pad-btn.is-right{grid-column: 3;grid-row: 2}.sn-hint{color: var(--text-3);font-size: 12.5px}.sn-hint code{padding: 1px 5px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: 4px;font-family: var(--mono);font-size: 11.5px}.sn-field{display: flex;flex-direction: column;gap: 6px;min-width: 0;margin: 0;color: var(--text-2);font-size: 13.5px;font-weight: 600}.sn-field .form-control{width: 100%;min-width: 0;padding-top: 8px;padding-bottom: 8px;font-size: 14px}.sn-field-row{display: flex;flex-wrap: wrap;gap: 12px}.sn-field-half{flex: 1 1 140px;min-width: 0}.sn-check{display: flex;align-items: center;gap: 7px;min-width: 0;color: var(--text-2);font-size: 13.5px;font-weight: 600}.sn-check input{flex: 0 0 auto;margin: 0}.sn-action-row{display: flex;flex-wrap: wrap;gap: 8px}.sn-action-row .btn{flex: 0 1 auto;min-width: 0}.sn-message{display: none;width: 100%;max-width: var(--sn-board-max);margin: 0 auto;padding: 8px 10px;background: var(--info-soft);border: 1px solid var(--info);border-radius: var(--radius);color: #0f5f6d;font-size: 13px;text-align: center}.sn-message.is-on{display: block}.sn-message.is-error{background: var(--danger-soft);border-color: var(--danger);color: #991b1b}.sn-message.is-good{background: var(--success-soft);border-color: var(--success);color: #15803d}:root[data-theme="dark"] .sn-message{color: var(--info)}:root[data-theme="dark"] .sn-message.is-error{color: var(--danger)}:root[data-theme="dark"] .sn-message.is-good{color: var(--success)}.sn-stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(92px,1fr));gap: 10px}.sn-stat{padding: 8px 10px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);text-align: center}.sn-stat-label{display: block;color: var(--text-3);font-size: 11.5px;font-weight: 600}.sn-stat-value{display: block;color: var(--text);font-size: 16px;font-weight: 700;font-variant-numeric: tabular-nums}.sn-note{padding: 9px 11px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);color: var(--text-2);font-size: 12.5px;line-height: 1.6}.sn-note i{margin-right: 5px;color: var(--info)}.sn-samples{display: flex;flex-direction: column;gap: 12px;margin-top: 12px}.sn-sample{display: flex;flex-direction: column;gap: 6px;padding: 12px 14px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius)}.sn-sample-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 12px}.sn-sample-head strong{flex: 1 1 auto;min-width: 0;color: var(--text);font-size: 14px}.sn-sample p{margin: 0;color: var(--text-2);font-size: 13.5px}.sn-sample code{padding: 1px 5px;background: #fff;border: 1px solid var(--border);border-radius: 4px;font-family: var(--mono);font-size: 12.5px}:root[data-theme="dark"] .sn-sample code{background: var(--bg);color: var(--text-2)}.sn-chip{flex: 0 0 auto}@media (max-width: 767px){.sn-stage{max-width: 100%}.sn-score-value{font-size: 20px}.sn-pad{max-width: 100%}.sn-overlay-title{font-size: 20px}}@media (max-width: 359px){.sn-stats{grid-template-columns: repeat(auto-fit,minmax(72px,1fr))}.sn-action-row .btn{flex: 1 1 auto}}