.sj{font-family:var(--font-sans);color:var(--text-body)}
.sj-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-button);font:var(--fw-semibold) var(--fs-base)/1 var(--font-sans);height:var(--control-h);padding:0 16px;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);}
.sj-btn:active:not(:disabled){transform:scale(.97)}
.sj-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sj-btn:disabled{opacity:.45;cursor:not-allowed}
.sj-btn--sm{height:var(--control-h-sm);padding:0 12px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.sj-btn--lg{height:var(--control-h-lg);padding:0 20px;font-size:var(--fs-md);border-radius:var(--r-lg)}
.sj-btn--block{width:100%}
.sj-btn--primary{background:var(--brand);color:var(--text-on-brand)}
.sj-btn--primary:hover:not(:disabled){background:var(--brand-hover)}
.sj-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-strong)}
.sj-btn--secondary:hover:not(:disabled){background:var(--surface-hover)}
.sj-btn--soft{background:var(--brand-soft);color:var(--brand-ink)}
.sj-btn--soft:hover:not(:disabled){background:var(--brand-soft-strong)}
.sj-btn--ghost{background:transparent;color:var(--text-body)}
.sj-btn--ghost:hover:not(:disabled){background:var(--surface-hover)}
.sj-btn--love{background:var(--love);color:#fff}
.sj-btn--love:hover:not(:disabled){background:var(--love-hover)}
.sj-btn--danger{background:var(--danger-soft);color:var(--danger)}
.sj-btn--danger:hover:not(:disabled){background:var(--rose-100)}
.sj-btn--danger-solid{background:var(--danger);color:#fff}
.sj-btn--danger-solid:hover:not(:disabled){background:var(--rose-700)}
.sj-emoji{font-family:var(--font-emoji);line-height:1}
.sj-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);border:0;background:transparent;cursor:pointer;font-size:16px;transition:background var(--dur-fast),transform var(--dur-fast)}
.sj-iconbtn:hover{background:var(--surface-hover)}
.sj-iconbtn:active{transform:scale(.92)}
.sj-iconbtn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sj-iconbtn--sm{width:30px;height:30px;font-size:14px}
.sj-iconbtn--soft{background:var(--surface-sunken)}
.sj-iconbtn--danger:hover{background:var(--danger-soft)}
.sj-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.sj-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-item);transition:background var(--dur-fast)}
.sj-item--click{cursor:pointer}
.sj-item--click:hover{background:var(--surface-sunken)}
.sj-item--boxed{background:var(--surface-card);border:1px solid var(--border-subtle)}
.sj-input{width:100%;box-sizing:border-box;height:var(--control-h);border:1px solid var(--border-strong);border-radius:var(--radius-input);background:var(--surface-card);padding:0 12px;font:var(--fw-medium) var(--fs-base)/1 var(--font-sans);color:var(--text-strong);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.sj-input::placeholder{color:var(--text-faint)}
.sj-input:focus{border-color:var(--brand);box-shadow:var(--ring-focus)}
.sj-input--error{border-color:var(--danger)}
.sj-input--error:focus{box-shadow:var(--ring-danger);border-color:var(--danger)}
.sj-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-500) 50%),linear-gradient(135deg,var(--ink-500) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px;cursor:pointer}
.sj-tab{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--text-muted);font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast),color var(--dur-fast)}
.sj-tab:hover{color:var(--text-strong);background:var(--surface-hover)}
.sj-tab[aria-selected="true"]{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-card)}
.sj-nav{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:var(--r-md);border:0;background:transparent;width:100%;color:var(--text-body);font:var(--fw-semibold) var(--fs-base)/1 var(--font-sans);cursor:pointer;text-align:left;transition:background var(--dur-fast)}
.sj-nav:hover{background:var(--surface-hover)}
.sj-nav[aria-current="page"]{background:var(--brand-soft);color:var(--brand-ink)}
.sj-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid var(--ink-300);background:var(--surface-card);transition:all var(--dur-fast) var(--ease-out);color:#fff;font-size:13px;font-weight:800}
.sj-check--on{background:var(--brand);border-color:var(--brand)}
.sj-switch{position:relative;width:40px;height:24px;flex:none;border-radius:var(--r-pill);background:var(--ink-200);border:0;cursor:pointer;transition:background var(--dur) var(--ease-out);padding:0}
.sj-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform var(--dur) var(--ease-spring)}
.sj-switch[aria-checked="true"]{background:var(--brand)}
.sj-switch[aria-checked="true"]::after{transform:translateX(16px)}
.sj-switch:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sj-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.sj-table th{font-weight:var(--fw-semibold);color:var(--text-muted);font-size:var(--fs-xs);text-align:left;padding:10px 12px;background:var(--surface-sunken)}
.sj-table th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.sj-table th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.sj-table td{padding:12px;border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
.sj-table tr:last-child td{border-bottom:0}
.sj-table tbody tr:hover td{background:var(--surface-sunken)}
@keyframes sj-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sj-fade{from{opacity:0}to{opacity:1}}

@keyframes sj-sheet-up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@keyframes sj-sheet-down{to{transform:translate(-50%,100%)}}
@keyframes sj-fade-out{to{opacity:0}}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}@view-transition{navigation:none}}