/* Button */
.sl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:600;letter-spacing:-.01em;border:var(--border);border-radius:var(--radius-pill);background:var(--salt-orange);color:var(--salt-ink);box-shadow:var(--shadow-pop);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--dur-base) var(--ease-bounce),box-shadow var(--dur-base) var(--ease-bounce),background var(--dur-fast)}
.sl-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--salt-ink);color:var(--salt-ink)}
.sl-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--salt-ink);transition-duration:var(--dur-fast)}
.sl-btn:disabled,.sl-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-pop-sm)}
.sl-btn--sm{height:36px;padding:0 16px;font-size:14px}
.sl-btn--md{height:48px;padding:0 22px;font-size:16px}
.sl-btn--lg{height:60px;padding:0 30px;font-size:18px}
.sl-btn--ink{background:var(--salt-ink);color:var(--salt-cream);box-shadow:var(--shadow-pop-orange)}
.sl-btn--ink:hover{box-shadow:8px 8px 0 var(--salt-orange);color:var(--salt-cream)}
.sl-btn--ink:active{box-shadow:1px 1px 0 var(--salt-orange)}
.sl-btn--yellow{background:var(--salt-yellow)}
.sl-btn--outline{background:transparent;box-shadow:none}
.sl-btn--outline:hover{background:var(--salt-ink);color:var(--salt-cream);transform:none;box-shadow:none}
.sl-btn--outline:active{transform:scale(.97);box-shadow:none}
.sl-btn--ghost{background:transparent;border-color:transparent;box-shadow:none}
.sl-btn--ghost:hover{background:var(--cream-200);transform:none;box-shadow:none}
.sl-btn--ghost:active{transform:scale(.97);box-shadow:none}
.sl-btn__arrow{display:inline-block;transition:transform var(--dur-base) var(--ease-bounce)}
.sl-btn:hover .sl-btn__arrow{transform:translate(2px,-2px) rotate(45deg)}
.sl-btn--block{width:100%}
/* IconButton */
.sl-iconbtn{display:inline-grid;place-items:center;border:var(--border);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--salt-ink);cursor:pointer;font-size:18px;line-height:1;transition:transform var(--dur-base) var(--ease-bounce),background var(--dur-fast)}
.sl-iconbtn:hover{background:var(--salt-yellow);transform:rotate(-8deg) scale(1.06)}
.sl-iconbtn:active{transform:scale(.92)}
.sl-iconbtn--sm{width:32px;height:32px;font-size:15px}.sl-iconbtn--md{width:44px;height:44px}.sl-iconbtn--lg{width:56px;height:56px;font-size:22px}
.sl-iconbtn--ink{background:var(--salt-ink);color:var(--salt-cream)}.sl-iconbtn--ink:hover{background:var(--salt-orange);color:var(--salt-ink)}
.sl-iconbtn--orange{background:var(--salt-orange)}
.sl-iconbtn--ghost{border-color:transparent;background:transparent}
/* Field shell */
.sl-field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body)}
.sl-field__label{font-size:14px;font-weight:600}
.sl-field__hint{font-size:13px;color:var(--text-2)}
.sl-field__hint--error{color:var(--status-error);font-weight:600}
.sl-input{width:100%;height:52px;padding:0 18px;font:inherit;font-size:16px;color:var(--text-1);background:var(--surface-card);border:var(--border);border-radius:var(--radius-md);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);appearance:none}
.sl-input::placeholder{color:var(--text-3)}
.sl-input:hover{background:#fff}
.sl-input:focus{outline:none;box-shadow:var(--shadow-pop);transform:translate(-2px,-2px)}
.sl-input[aria-invalid="true"]{border-color:var(--status-error);background:var(--status-error-bg)}
.sl-input:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-sunken)}
textarea.sl-input{height:auto;min-height:132px;padding:14px 18px;resize:vertical;line-height:1.5}
.sl-select{position:relative}
.sl-select .sl-input{padding-right:48px;cursor:pointer}
.sl-select__chev{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px}
/* Checkbox / Radio */
.sl-check{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:16px;cursor:pointer;user-select:none}
.sl-check input{position:absolute;opacity:0;pointer-events:none}
.sl-check__box{width:24px;height:24px;flex:none;border:var(--border);border-radius:7px;background:var(--surface-card);display:grid;place-items:center;font-size:14px;font-weight:800;color:transparent;transition:background var(--dur-fast),transform var(--dur-base) var(--ease-bounce)}
.sl-check--radio .sl-check__box{border-radius:50%}
.sl-check input:checked+.sl-check__box{background:var(--salt-orange);color:var(--salt-ink);transform:rotate(-6deg)}
.sl-check--radio input:checked+.sl-check__box{background:var(--surface-card);transform:none}
.sl-check__dot{width:10px;height:10px;border-radius:50%;background:var(--salt-ink);transform:scale(0);transition:transform var(--dur-base) var(--ease-bounce)}
.sl-check--radio input:checked+.sl-check__box .sl-check__dot{transform:scale(1)}
.sl-check input:focus-visible+.sl-check__box{outline:3px solid var(--focus-ring);outline-offset:2px}
.sl-check:hover .sl-check__box{background:var(--yellow-100)}
.sl-check--disabled{opacity:.45;cursor:not-allowed}
/* Switch */
.sl-switch{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:16px;cursor:pointer}
.sl-switch input{position:absolute;opacity:0;pointer-events:none}
.sl-switch__track{width:52px;height:30px;flex:none;border:var(--border);border-radius:var(--radius-pill);background:var(--cream-200);position:relative;transition:background var(--dur-base)}
.sl-switch__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--salt-ink);transition:transform var(--dur-base) var(--ease-bounce)}
.sl-switch input:checked+.sl-switch__track{background:var(--salt-orange)}
.sl-switch input:checked+.sl-switch__track .sl-switch__thumb{transform:translateX(22px)}
.sl-switch input:focus-visible+.sl-switch__track{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Card */
.sl-card{position:relative;background:var(--surface-card);border:var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:12px;color:var(--text-1);text-decoration:none}
.sl-card--pop{box-shadow:var(--shadow-pop)}
.sl-card--interactive{cursor:pointer;transition:transform var(--dur-base) var(--ease-bounce),box-shadow var(--dur-base) var(--ease-bounce),background var(--dur-fast)}
.sl-card--interactive:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:var(--shadow-pop-lg);color:var(--text-1)}
.sl-card--orange{background:var(--salt-orange)}.sl-card--yellow{background:var(--salt-yellow)}.sl-card--pink{background:var(--salt-pink)}
.sl-card--ink{background:var(--salt-ink);color:var(--salt-cream);border-color:var(--salt-ink)}
.sl-card--ink.sl-card--pop{box-shadow:var(--shadow-pop-orange)}
.sl-card__title{font:var(--fw-bold) 26px/1.1 var(--font-display);letter-spacing:-.03em}
.sl-card__body{font-size:16px;line-height:1.5;opacity:.85}
/* Badge */
.sl-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font:600 12px/1 var(--font-body);background:var(--cream-200);color:var(--salt-ink);white-space:nowrap}
.sl-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.sl-badge--orange{background:var(--salt-orange)}.sl-badge--yellow{background:var(--salt-yellow)}.sl-badge--ink{background:var(--salt-ink);color:var(--salt-cream)}
.sl-badge--success{background:var(--status-success-bg);color:var(--status-success)}.sl-badge--warning{background:var(--status-warning-bg);color:var(--status-warning)}.sl-badge--error{background:var(--status-error-bg);color:var(--status-error)}.sl-badge--info{background:var(--status-info-bg);color:var(--status-info)}
/* Tag */
.sl-tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:var(--border);border-radius:var(--radius-pill);background:transparent;font:500 14px/1 var(--font-body);color:var(--salt-ink);cursor:pointer;transition:background var(--dur-fast),transform var(--dur-base) var(--ease-bounce)}
.sl-tag:hover{background:var(--cream-200)}
.sl-tag--selected{background:var(--salt-ink);color:var(--salt-cream)}
.sl-tag--selected:hover{background:var(--ink-80)}
.sl-tag__x{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;padding:0;line-height:1}
.sl-tag--static{cursor:default}
/* Sticker */
.sl-sticker{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:var(--border);border-radius:var(--radius-pill);font:800 15px/1 var(--font-display);letter-spacing:-.01em;background:var(--salt-yellow);color:var(--salt-ink);box-shadow:var(--shadow-pop-sm);transform:rotate(var(--_rot,-4deg));white-space:nowrap}
.sl-sticker--orange{background:var(--salt-orange)}.sl-sticker--pink{background:var(--salt-pink)}.sl-sticker--ink{background:var(--salt-ink);color:var(--salt-cream)}.sl-sticker--cream{background:var(--salt-cream)}
/* Marquee */
.sl-marquee{overflow:hidden;border-block:var(--border);background:var(--salt-ink);color:var(--salt-cream);padding:18px 0}
.sl-marquee__track{display:flex;width:max-content;animation:sl-marquee var(--dur-marquee) linear infinite}
.sl-marquee:hover .sl-marquee__track{animation-play-state:paused}
.sl-marquee__item{display:flex;align-items:center;gap:28px;padding-right:28px;font:800 36px/1 var(--font-display);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.sl-marquee__sep{color:var(--salt-orange)}
.sl-marquee--yellow{background:var(--salt-yellow);color:var(--salt-ink)}.sl-marquee--orange{background:var(--salt-orange);color:var(--salt-ink)}
.sl-marquee--yellow .sl-marquee__sep,.sl-marquee--orange .sl-marquee__sep{color:var(--salt-ink)}
/* Accordion */
.sl-acc{display:flex;flex-direction:column;border-top:var(--border)}
.sl-acc__item{border-bottom:var(--border)}
.sl-acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;background:none;border:0;cursor:pointer;text-align:left;font:700 22px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--salt-ink)}
.sl-acc__q:hover{color:var(--orange-700)}
.sl-acc__icon{flex:none;width:36px;height:36px;border:var(--border);border-radius:50%;display:grid;place-items:center;font:600 20px/1 var(--font-body);transition:transform var(--dur-base) var(--ease-bounce),background var(--dur-fast);color:var(--salt-ink)}
.sl-acc__item--open .sl-acc__icon{transform:rotate(45deg);background:var(--salt-orange)}
.sl-acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.sl-acc__item--open .sl-acc__a{grid-template-rows:1fr}
.sl-acc__a>div{overflow:hidden}
.sl-acc__a p{padding:0 64px 26px 4px;font-size:17px;line-height:1.6;color:var(--text-2)}
/* Tabs */
.sl-tabs{display:inline-flex;gap:4px;padding:4px;border:var(--border);border-radius:var(--radius-pill);background:var(--surface-card)}
.sl-tabs__tab{height:40px;padding:0 18px;border:0;border-radius:var(--radius-pill);background:transparent;font:600 15px/1 var(--font-body);color:var(--text-2);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-fast)}
.sl-tabs__tab:hover{color:var(--salt-ink)}
.sl-tabs__tab[aria-selected="true"]{background:var(--salt-ink);color:var(--salt-cream)}
.sl-tabs--underline{border:0;background:none;padding:0;gap:28px;border-bottom:var(--border);border-radius:0}
.sl-tabs--underline .sl-tabs__tab{padding:0 0 4px;height:44px;border-radius:0;position:relative}
.sl-tabs--underline .sl-tabs__tab[aria-selected="true"]{background:none;color:var(--salt-ink)}
.sl-tabs--underline .sl-tabs__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;background:var(--salt-orange);border-radius:3px 3px 0 0}
/* Dialog */
.sl-dialog__scrim{position:fixed;inset:0;background:var(--overlay-scrim);display:grid;place-items:center;padding:24px;z-index:100;animation:sl-pop-in var(--dur-base) var(--ease-out)}
.sl-dialog__scrim--inline{position:absolute}
.sl-dialog{width:min(520px,100%);background:var(--salt-cream);border:var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop-lg);padding:32px;display:flex;flex-direction:column;gap:16px;animation:sl-pop-in var(--dur-slow) var(--ease-bounce);position:relative}
.sl-dialog__title{font:800 32px/1.05 var(--font-display);letter-spacing:-.035em;padding-right:44px}
.sl-dialog__body{font-size:16px;line-height:1.55;color:var(--text-2)}
.sl-dialog__actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.sl-dialog__close{position:absolute;top:20px;right:20px}
/* Toast */
.sl-toast{display:flex;align-items:center;gap:14px;min-width:300px;max-width:440px;padding:14px 14px 14px 18px;background:var(--salt-ink);color:var(--salt-cream);border-radius:var(--radius-md);box-shadow:var(--shadow-float);font:500 15px/1.4 var(--font-body);animation:sl-pop-in var(--dur-slow) var(--ease-bounce)}
.sl-toast__icon{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--salt-orange);color:var(--salt-ink);font-weight:800;font-size:14px}
.sl-toast--success .sl-toast__icon{background:var(--salt-mint)}.sl-toast--error .sl-toast__icon{background:var(--status-error);color:var(--salt-cream)}.sl-toast--info .sl-toast__icon{background:var(--salt-yellow)}
.sl-toast__msg{flex:1}
.sl-toast__close{border:0;background:none;color:var(--ink-20);cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px}
.sl-toast__close:hover{color:var(--salt-cream);background:var(--ink-80)}
/* Tooltip */
.sl-tip{position:relative;display:inline-flex}
.sl-tip__bubble{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);background:var(--salt-ink);color:var(--salt-cream);font:500 13px/1.3 var(--font-body);padding:8px 12px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease-bounce);z-index:50}
.sl-tip__bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--salt-ink)}
.sl-tip--bottom .sl-tip__bubble{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px)}
.sl-tip--bottom .sl-tip__bubble::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--salt-ink)}
.sl-tip:hover .sl-tip__bubble,.sl-tip:focus-within .sl-tip__bubble,.sl-tip--open .sl-tip__bubble{opacity:1;transform:translateX(-50%) translateY(0)}