.p-spacing-input{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px}.p-spacing-input__container{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:140px;padding:12px;border:1px solid #e5e7eb;border-radius:6px;position:relative;background-color:#f9fafb;background-image:linear-gradient(rgba(209,213,219,.15) 1px,transparent 0),linear-gradient(90deg,rgba(209,213,219,.15) 1px,transparent 0),linear-gradient(rgba(229,231,235,.08) 1px,transparent 0),linear-gradient(90deg,rgba(229,231,235,.08) 1px,transparent 0);background-size:20px 20px,20px 20px,10px 10px,10px 10px;background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;box-shadow:inset 0 0 30px rgba(0,0,0,.015),0 1px 3px rgba(0,0,0,.05)}.p-spacing-input__direction{position:relative;display:flex;align-items:center;justify-content:center;min-width:60px;min-height:32px;padding:4px 8px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.p-spacing-input__direction:hover{background:#e5e7eb;border-color:#9ca3af}.p-spacing-input__direction--active{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8;font-weight:500}.p-spacing-input__direction--top{align-self:center}.p-spacing-input__direction--top.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:13px}.p-spacing-input__direction--bottom{align-self:center}.p-spacing-input__direction--bottom.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:13px}.p-spacing-input__direction--left{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:80px}.p-spacing-input__direction--left .p-spacing-input__direction-label{writing-mode:vertical-rl;text-orientation:upright}.p-spacing-input__direction--left.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:13px}.p-spacing-input__direction--right{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:80px}.p-spacing-input__direction--right .p-spacing-input__direction-label{writing-mode:vertical-rl;text-orientation:upright}.p-spacing-input__direction--right.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:13px}.p-spacing-input__direction-label{font-size:11px;font-weight:500;text-align:center;white-space:nowrap}.p-spacing-input__clear-individual{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:#ef4444;color:#fff;border:none;border-radius:50%;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.p-spacing-input__clear-individual:hover{background:#dc2626;transform:scale(1.1)}.p-spacing-input__clear-individual:active{transform:scale(.95)}.p-spacing-input__middle-row{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}.p-spacing-input__center-block{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#374151;border-radius:4px;color:#fff;transition:all .3s ease;position:relative}.p-spacing-input__center-block:after{content:"Element";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:8px;color:#6b7280;white-space:nowrap}.p-spacing-input--has-active-spacing .p-spacing-input__center-block{box-shadow:0 0 0 2px #3b82f6,0 4px 6px -1px rgba(0,0,0,.1);background:#4f46e5;transform:scale(1.05)}.p-spacing-input__spacing-indicators{width:100%;height:100%}.p-spacing-input__center-element,.p-spacing-input__spacing-indicators{position:relative;display:flex;align-items:center;justify-content:center}.p-spacing-input__center-element{width:32px;height:32px;background:#374151;border-radius:4px;color:#fff;transition:all .3s ease;z-index:2}.p-spacing-input__spacing-bar{position:absolute;transition:all .3s ease;border-radius:2px;z-index:3;opacity:.9}.p-spacing-input__spacing-bar--bottom,.p-spacing-input__spacing-bar--top{width:28px;height:4px}.p-spacing-input__spacing-bar--left,.p-spacing-input__spacing-bar--right{width:4px;height:28px}.p-spacing-input__spacing-bar--padding{box-shadow:0 0 0 1px hsla(0,0%,100%,.3)}.p-spacing-input__spacing-bar--padding.p-spacing-input__spacing-bar--top{top:8px;left:50%;transform:translateX(-50%)}.p-spacing-input__spacing-bar--padding.p-spacing-input__spacing-bar--bottom{bottom:8px;left:50%;transform:translateX(-50%)}.p-spacing-input__spacing-bar--padding.p-spacing-input__spacing-bar--left{left:8px;top:50%;transform:translateY(-50%)}.p-spacing-input__spacing-bar--padding.p-spacing-input__spacing-bar--right{right:8px;top:50%;transform:translateY(-50%)}.p-spacing-input__spacing-bar--margin{border:1px solid hsla(0,0%,100%,.2)}.p-spacing-input__spacing-bar--margin.p-spacing-input__spacing-bar--top{top:-8px;left:50%;transform:translateX(-50%)}.p-spacing-input__spacing-bar--margin.p-spacing-input__spacing-bar--bottom{bottom:-8px;left:50%;transform:translateX(-50%)}.p-spacing-input__spacing-bar--margin.p-spacing-input__spacing-bar--left{left:-8px;top:50%;transform:translateY(-50%)}.p-spacing-input__spacing-bar--margin.p-spacing-input__spacing-bar--right{right:-8px;top:50%;transform:translateY(-50%)}.p-spacing-input__axis-controls{margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}.p-spacing-input__axis-row{display:flex;gap:8px;justify-content:center}.p-spacing-input__axis-button{position:relative;display:flex;align-items:center;justify-content:center;min-width:80px;padding:6px 12px;background:#f9fafb;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .2s ease}.p-spacing-input__axis-button:hover{background:#f3f4f6;border-color:#9ca3af}.p-spacing-input__axis-button--active{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8;font-weight:500}.p-spacing-input__axis-label{font-size:12px;font-weight:500}.p-spacing-input__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1000;min-width:120px;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);margin-top:4px}.p-spacing-input__option{display:block;width:100%;padding:8px 12px;text-align:left;font-size:12px;background:none;border:none;cursor:pointer;transition:background-color .2s ease}.p-spacing-input__option:first-child{border-top-left-radius:6px;border-top-right-radius:6px}.p-spacing-input__option:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.p-spacing-input__option:hover{background:#f3f4f6}.p-spacing-input__option--selected{background:#dbeafe;color:#1d4ed8;font-weight:500}.p-spacing-input__option--highlighted{background:#f3f4f6;border-left:3px solid #3b82f6}.p-spacing-input__option--selected.p-spacing-input__option--highlighted{background:#bfdbfe;border-left:3px solid #1d4ed8}.p-spacing-input__footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}.p-spacing-input__current-value{display:flex;align-items:center;gap:6px}.p-spacing-input__value-label{font-size:11px;font-weight:500;color:#6b7280}.p-spacing-input__value-text{font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace;font-size:11px;background:#f3f4f6;padding:2px 6px;border-radius:3px;color:#374151}.p-spacing-input__clear{display:flex}.p-spacing-input__help-section{margin-top:12px;border-top:1px solid #e5e7eb;padding-top:8px}.p-spacing-input__help-toggle{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem .875rem;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);border-radius:6px;color:#6366f1;font-size:.6875rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%}.p-spacing-input__help-toggle:hover{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:#4f46e5;transform:translateY(-1px);box-shadow:0 2px 4px rgba(99,102,241,.15)}.p-spacing-input__help-toggle:active{transform:translateY(0)}.p-spacing-input__help-toggle span{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;letter-spacing:.02em}.p-spacing-input__help-content{animation:slideDown .2s ease-out}.p-spacing-input__help-text{font-size:11px;color:#6b7280;margin-top:8px;margin-bottom:0;line-height:1.4}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.p-spacing-input__overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}@media(max-width:640px){.p-spacing-input__container{min-height:120px;padding:8px}.p-spacing-input__middle-row{gap:8px}.p-spacing-input__center-block{width:40px;height:40px}.p-spacing-input__direction{min-width:50px;min-height:28px;padding:3px 6px}.p-spacing-input__direction-label{font-size:10px}.p-spacing-input__axis-button{min-width:70px;padding:5px 10px}.p-spacing-input__axis-label{font-size:11px}}@media(prefers-color-scheme:dark){.p-spacing-input{background:#1f2937;border-color:#374151}.p-spacing-input__container{border-color:#374151;background-color:#111827;background-image:linear-gradient(rgba(75,85,99,.2) 1px,transparent 0),linear-gradient(90deg,rgba(75,85,99,.2) 1px,transparent 0),linear-gradient(rgba(55,65,81,.12) 1px,transparent 0),linear-gradient(90deg,rgba(55,65,81,.12) 1px,transparent 0);background-size:20px 20px,20px 20px,10px 10px,10px 10px;background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;box-shadow:inset 0 0 40px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.5)}.p-spacing-input__direction{background:#374151;border-color:#4b5563;color:#f9fafb}.p-spacing-input__direction:hover{background:#4b5563;border-color:#6b7280}.p-spacing-input__direction--active{background:#1e40af;border-color:#3b82f6;color:#dbeafe}.p-spacing-input__center-block{background:#6b7280}.p-spacing-input__axis-button{background:#374151;border-color:#4b5563;color:#f9fafb}.p-spacing-input__axis-button:hover{background:#4b5563;border-color:#6b7280}.p-spacing-input__axis-button--active{background:#1e40af;border-color:#3b82f6;color:#dbeafe}.p-spacing-input__dropdown{background:#1f2937;border-color:#4b5563}.p-spacing-input__option{color:#f9fafb}.p-spacing-input__option:hover{background:#374151}.p-spacing-input__option--selected{background:#1e40af;color:#dbeafe}.p-spacing-input__footer{border-color:#374151}.p-spacing-input__value-label{color:#9ca3af}.p-spacing-input__value-text{background:#374151;color:#f9fafb}.p-spacing-input__help-text{color:#9ca3af}.p-spacing-input__help-section{border-color:#374151}.p-spacing-input__help-toggle{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);color:#818cf8}.p-spacing-input__help-toggle:hover{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.45);color:#a5b4fc;box-shadow:0 2px 4px rgba(99,102,241,.25)}}.p-spacing-input__dropdown{writing-mode:initial;text-orientation:mixed}@media(max-width:640px){.p-spacing-input__direction--bottom.p-spacing-input__direction--active .p-spacing-input__direction-label,.p-spacing-input__direction--top.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:11px}.p-spacing-input__direction--left{min-width:28px;min-height:70px}.p-spacing-input__direction--left .p-spacing-input__direction-label{font-size:10px}.p-spacing-input__direction--left.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:11px}.p-spacing-input__direction--right{min-width:28px;min-height:70px}.p-spacing-input__direction--right .p-spacing-input__direction-label{font-size:10px}.p-spacing-input__direction--right.p-spacing-input__direction--active .p-spacing-input__direction-label{font-weight:600;font-size:11px}.p-spacing-input__direction-label{font-size:10px}}