/* [c1] */

/* [c2] */
@keyframes ss-spin { to { transform: rotate(360deg); } }
@keyframes ss-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}
@keyframes ss-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ss-rise-in { from { opacity: 0; transform: translateY(var(--ss-rise)); } to { opacity: 1; transform: none; } }
@keyframes ss-up-in { from { opacity: 0; transform: translateY(var(--ss-step-shift)); } to { opacity: 1; transform: none; } }
@keyframes ss-scale-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ss-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ss-check-draw {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes ss-pulse-once {
    0% { box-shadow: 0 0 0 0 var(--ss-accent-glow-strong); }
    100% { box-shadow: 0 0 0 16px transparent; }
}
@keyframes ss-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
@keyframes ss-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}
@keyframes ss-sweep {
    from { transform: translateX(-120%) skewX(-18deg); }
    to { transform: translateX(220%) skewX(-18deg); }
}
@keyframes ss-indeterminate {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}
.ss-shake { animation: ss-shake 180ms var(--ss-ease) 1; }

/* [c3] */
.ss-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.85;
    animation: ss-spin 700ms linear infinite;
    flex: none;
}
.ss-spinner--lg { width: 28px; height: 28px; border-width: 3px; }

/* [c4] */
.ss-btn {
    --btn-bg: var(--ss-surface);
    --btn-fg: var(--ss-text);
    --btn-border: var(--ss-border-strong);
    --btn-shadow: none;
    --btn-h: var(--ss-tap);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--btn-h);
    min-width: var(--btn-h);
    padding: 0 18px;
    border: 1px solid var(--btn-border);
    border-radius: var(--ss-r-control);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    font-family: var(--ss-font);
    font-size: var(--ss-fs-md);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--ss-dur-micro) var(--ss-ease),
        box-shadow var(--ss-dur-micro) var(--ss-ease),
        background-color var(--ss-dur-micro) var(--ss-ease),
        border-color var(--ss-dur-micro) var(--ss-ease),
        color var(--ss-dur-micro) var(--ss-ease);
}
.ss-btn svg { width: 18px; height: 18px; flex: none; }
.ss-btn__label { display: inline-flex; align-items: center; gap: 8px; transition: opacity var(--ss-dur-micro) var(--ss-ease); }
.ss-btn--lg { --btn-h: var(--ss-tap-lg); padding: 0 24px; font-size: var(--ss-fs-lg); border-radius: 12px; }
.ss-btn--sm { --btn-h: 36px; padding: 0 12px; font-size: var(--ss-fs-sm); }
.ss-btn--block { display: flex; width: 100%; }
.ss-btn--icon { padding: 0; width: var(--btn-h); }

.ss-btn--primary {
    --btn-bg: var(--ss-accent);
    --btn-fg: var(--ss-accent-ink);
    --btn-border: transparent;
    --btn-shadow: var(--ss-btn-highlight), 0 2px 10px var(--ss-accent-glow);
}
.ss-btn--secondary { --btn-bg: transparent; --btn-border: var(--ss-border-strong); }
.ss-btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--ss-text-soft); }
.ss-btn--glass {
    --btn-bg: var(--ss-glass-bg);
    --btn-border: var(--ss-glass-border);
    --btn-shadow: var(--ss-glass-highlight), var(--ss-glass-shadow);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
}
.ss-btn--danger-soft { --btn-bg: var(--ss-danger-soft); --btn-fg: var(--ss-danger); --btn-border: transparent; }
.ss-btn--danger { --btn-bg: var(--ss-danger); --btn-fg: var(--ss-danger-ink); --btn-border: transparent; }

@media (hover: hover) {
    .ss-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
        transform: translateY(-2px);
        box-shadow: var(--btn-shadow), var(--ss-shadow-hover);
    }
    .ss-btn--primary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
        --btn-bg: var(--ss-accent-hover);
        box-shadow: var(--ss-btn-highlight), var(--ss-shadow-accent);
    }
    .ss-btn--secondary:hover:not(:disabled) { --btn-border: var(--ss-text-faint); --btn-bg: var(--ss-surface); }
    .ss-btn--ghost:hover:not(:disabled) { --btn-bg: var(--ss-surface-2); --btn-fg: var(--ss-text); box-shadow: none; transform: none; }
    .ss-btn--danger-soft:hover:not(:disabled) { --btn-bg: color-mix(in srgb, var(--ss-danger) 16%, transparent); }
}
.ss-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.97);
    transition-duration: var(--ss-dur-press);
}
.ss-btn--primary:active:not(:disabled) { --btn-bg: var(--ss-accent-press); }
.ss-btn:focus-visible { outline: none; box-shadow: var(--btn-shadow), var(--ss-ring); }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.ss-btn.is-loading { cursor: progress; }
.ss-btn.is-loading .ss-btn__label { opacity: 0; }
.ss-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ss-spin 700ms linear infinite;
}
.ss-btn.is-success { --btn-bg: var(--ss-success); --btn-fg: var(--ss-success-ink); --btn-border: transparent; }
.ss-btn.is-success .ss-btn__label { opacity: 0; }
.ss-btn.is-success::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 14px;
    margin: -9px 0 0 -4px;
    border: solid currentColor;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    animation: ss-check-draw var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-btn.is-error { animation: ss-shake 180ms var(--ss-ease) 1; }

/* [c5] */
.ss-iconbtn {
    display: inline-grid;
    place-items: center;
    width: var(--ss-tap);
    height: var(--ss-tap);
    flex: none;
    border-radius: var(--ss-r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ss-text-soft);
    cursor: pointer;
    transition: background-color var(--ss-dur-micro) var(--ss-ease), color var(--ss-dur-micro) var(--ss-ease),
        transform var(--ss-dur-micro) var(--ss-ease);
}
.ss-iconbtn svg { width: 20px; height: 20px; }
@media (hover: hover) { .ss-iconbtn:hover { background: var(--ss-surface-2); color: var(--ss-text); } }
.ss-iconbtn:active { transform: scale(0.94); }
.ss-iconbtn:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.ss-iconbtn--glass {
    background: var(--ss-glass-bg);
    border-color: var(--ss-glass-border);
    box-shadow: var(--ss-glass-highlight);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    color: var(--ss-text);
}
.ss-iconbtn--scrim { background: var(--ss-scrim); color: var(--ss-on-scrim); }

/* [c6] */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-surface-2);
    color: var(--ss-text-soft);
    font-size: var(--ss-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ss-badge--accent { background: var(--ss-accent); color: var(--ss-accent-ink); }
.ss-badge--success { background: var(--ss-success-soft); color: var(--ss-success); }
.ss-badge--danger { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-badge--scrim {
    background: var(--ss-scrim);
    color: var(--ss-on-scrim);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* [c7] */
.ss-seg {
    --seg-n: 2;
    --seg-i: 0;
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 4px;
    border-radius: 12px;
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    isolation: isolate;
    max-width: 100%;
}
.ss-seg--block { display: grid; width: 100%; }
.ss-seg__thumb {
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--seg-n));
    border-radius: 9px;
    background: var(--ss-seg-thumb);
    box-shadow: var(--ss-shadow-sm);
    transform: translateX(calc(var(--seg-i) * 100%));
    transition: transform var(--ss-dur-comp) var(--ss-ease-spring);
}
.ss-seg:not(.is-ready) .ss-seg__thumb { display: none; }
.ss-seg__opt {
    position: relative;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ss-text-soft);
    font-family: var(--ss-font);
    font-size: var(--ss-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ss-dur-micro) var(--ss-ease);
}
.ss-seg__opt small { font-weight: 500; color: var(--ss-success); margin-left: 4px; }
.ss-seg__opt[aria-checked="true"] { color: var(--ss-text); }
.ss-seg:not(.is-ready) .ss-seg__opt[aria-checked="true"] { background: var(--ss-seg-thumb); box-shadow: var(--ss-shadow-sm); }
@media (hover: hover) { .ss-seg__opt:hover:not([aria-checked="true"]):not(:disabled) { color: var(--ss-text); } }
.ss-seg__opt:active:not(:disabled) { transform: scale(0.97); }
.ss-seg__opt:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-seg__opt:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 640px) { .ss-seg__opt { min-height: 44px; } }

/* [c8] */
.ss-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow-sm);
}
.ss-stepper__btn {
    display: grid;
    place-items: center;
    width: var(--ss-tap);
    height: var(--ss-tap);
    border-radius: 50%;
    border: 0;
    background: var(--ss-surface-2);
    color: var(--ss-text);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-micro) var(--ss-ease), opacity var(--ss-dur-micro);
}
@media (hover: hover) { .ss-stepper__btn:hover:not(:disabled) { background: var(--ss-surface-3); } }
.ss-stepper__btn:active:not(:disabled) { transform: scale(0.92); }
.ss-stepper__btn:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ss-stepper__readout { min-width: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ss-stepper__value {
    display: inline-block;
    font-stretch: var(--ss-stretch-display);
    font-weight: 700;
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
}
.ss-stepper__unit { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); margin-top: 4px; font-weight: 500; }
.ss-stepper__value.is-up { animation: ss-step-up var(--ss-dur-comp) var(--ss-ease); }
.ss-stepper__value.is-down { animation: ss-step-down var(--ss-dur-comp) var(--ss-ease); }
@keyframes ss-step-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ss-step-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.ss-stepper.is-error { animation: ss-shake 180ms var(--ss-ease); }

/* [c9] */
.ss-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3);
    padding: var(--ss-space-6);
    border-radius: var(--ss-r-card);
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow-sm);
    min-width: 0;
}
.ss-card--flat { box-shadow: none; background: var(--ss-surface-2); border-color: transparent; }
.ss-card--tight { padding: var(--ss-space-4); }
.ss-card--media { padding: 0; overflow: hidden; }
.ss-card__media { aspect-ratio: var(--ar, 4 / 3); background: var(--ss-surface-2); overflow: hidden; }
.ss-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ss-card__body { padding: var(--ss-space-4) var(--ss-space-5) var(--ss-space-5); display: flex; flex-direction: column; gap: 6px; }
.ss-card__title { font-size: var(--ss-fs-lg); font-weight: 600; line-height: 1.3; }
.ss-card__meta { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-card--interactive {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease), border-color var(--ss-dur-micro);
}
@media (hover: hover) {
    .ss-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); }
}
.ss-card--interactive:active { transform: scale(0.985); }
.ss-card--interactive:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-card.is-selected { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent), var(--ss-shadow-sm); }

/* [c10] */
.ss-glass, .ss-glass--strong, .ss-glassbar, .ss-actionbar, .ss-toast, .ss-coach {
    background: var(--ss-glass-bg);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    border: 1px solid var(--ss-glass-border);
    box-shadow: var(--ss-glass-highlight), var(--ss-glass-shadow);
    border-radius: var(--ss-r-glass);
}
.ss-glass--strong { background: var(--ss-glass-bg-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ss-glass, .ss-glass--strong, .ss-glassbar, .ss-actionbar, .ss-toast, .ss-coach,
    .ss-btn--glass, .ss-iconbtn--glass, .ss-topbar.is-floating, .ss-menu, .ss-sheet__panel {
        background: var(--ss-glass-bg-solid);
    }
}
.ss-glass-enter { animation: ss-rise-in 220ms var(--ss-ease) both; }
.ss-glassbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
}
.ss-glassbar--vertical { flex-direction: column; }
.ss-glassbar__tool {
    display: grid;
    place-items: center;
    width: var(--ss-tap);
    height: var(--ss-tap);
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: var(--ss-text-soft);
    cursor: pointer;
    transition: background-color var(--ss-dur-micro) var(--ss-ease), color var(--ss-dur-micro), transform var(--ss-dur-micro);
}
.ss-glassbar__tool svg { width: 20px; height: 20px; }
@media (hover: hover) { .ss-glassbar__tool:hover { color: var(--ss-text); background: color-mix(in srgb, var(--ss-text) 7%, transparent); } }
.ss-glassbar__tool:active { transform: scale(0.94); }
.ss-glassbar__tool:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-glassbar__tool[aria-pressed="true"] { background: var(--ss-accent); color: var(--ss-accent-ink); }
.ss-glassbar__sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--ss-glass-border); }
.ss-glassbar--vertical .ss-glassbar__sep { width: auto; height: 1px; margin: 2px 6px; }

/* [c11] */
.ss-actionbar {
    position: fixed;
    z-index: var(--ss-z-actionbar);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
    animation: ss-rise-in 220ms var(--ss-ease) both;
}
.ss-actionbar > .ss-btn { flex: 1 1 0; }
.ss-actionbar > .ss-btn--primary { flex-grow: 1.6; }
.ss-actionbar--static { position: static; animation: none; }

/* [c12] */
.ss-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--ss-z-sheet);
    display: grid;
    place-items: center;
    padding: 24px;
}
.ss-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: var(--ss-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: ss-fade-in var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: min(86vh, 860px);
    border-radius: var(--ss-r-sheet);
    background: var(--ss-glass-bg-strong);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    border: 1px solid var(--ss-glass-border);
    box-shadow: var(--ss-glass-highlight), var(--ss-shadow-lg);
    overflow: hidden;
    outline: none;
    animation: ss-pop-in var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-sheet--sm .ss-sheet__panel { width: min(100%, 420px); }
.ss-sheet--lg .ss-sheet__panel { width: min(100%, 720px); }
.ss-sheet--solid .ss-sheet__panel { background: var(--ss-surface); }
.ss-sheet__grab { display: none; }
.ss-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px 6px 24px;
    min-height: 60px;
}
.ss-sheet__title { flex: 1; font-size: var(--ss-fs-xl); font-weight: 600; line-height: 1.25; margin: 0; }
.ss-sheet__body { padding: 8px 24px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.ss-sheet__foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ss-glass-border);
}
.ss-sheet.is-closing .ss-sheet__backdrop { animation: ss-fade-out var(--ss-dur-micro) var(--ss-ease-in) both; }
.ss-sheet.is-closing .ss-sheet__panel { animation: ss-sheet-out-desk var(--ss-dur-micro) var(--ss-ease-in) both; }
@keyframes ss-sheet-out-desk { to { opacity: 0; transform: scale(0.97); } }

@media (max-width: 640px) {
    .ss-sheet { place-items: end stretch; padding: 0; }
    .ss-sheet__panel,
    .ss-sheet--sm .ss-sheet__panel,
    .ss-sheet--lg .ss-sheet__panel {
        width: 100%;
        max-height: 92dvh;
        border-radius: var(--ss-r-phone-sheet) var(--ss-r-phone-sheet) 0 0;
        border-bottom: 0;
        animation: ss-sheet-up var(--ss-dur-surface) var(--ss-ease) both;
        transform: translateY(var(--sheet-drag, 0px));
        touch-action: pan-y;
    }
    .ss-sheet--tall .ss-sheet__panel { height: 85dvh; }
    .ss-sheet__grab {
        display: block;
        width: 100%;
        height: 26px;
        flex: none;
        position: relative;
        cursor: grab;
        touch-action: none;
    }
    .ss-sheet__grab::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 10px;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 3px;
        background: var(--ss-stone-3);
    }
    .ss-sheet__head { padding: 0 10px 4px 20px; min-height: 48px; }
    .ss-sheet__body { padding: 6px 20px 20px; }
    .ss-sheet__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .ss-sheet__foot > .ss-btn { flex: 1 1 0; }
    .ss-sheet.is-dragging .ss-sheet__panel { transition: none; animation: none; }
    .ss-sheet.is-settling .ss-sheet__panel { transition: transform var(--ss-dur-comp) var(--ss-ease); animation: none; }
    .ss-sheet.is-closing .ss-sheet__panel { animation: ss-sheet-down var(--ss-dur-comp) var(--ss-ease-in) both; }
}
/* [c13] */
.ss-confirm__body { padding-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.ss-confirm__title { font-size: var(--ss-fs-xl); font-weight: 600; line-height: 1.25; margin: 0; }
.ss-confirm__text { margin: 0; color: var(--ss-text-soft); line-height: 1.5; }
.ss-confirm__mono {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--ss-surface-2);
    font: 500 var(--ss-fs-sm)/1.5 ui-monospace, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
}
.ss-confirm__fields { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ss-confirm .ss-sheet__foot { border-top: 0; padding-top: 4px; }
@media (max-width: 640px) { .ss-confirm__body { padding-top: 4px; } }
@keyframes ss-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ss-sheet-down { from { transform: translateY(var(--sheet-drag, 0px)); } to { transform: translateY(100%); } }

/* [c14] */
.ss-toasts {
    position: fixed;
    z-index: var(--ss-z-toast);
    left: 50%;
    top: calc(var(--ss-topbar-h) + 10px);
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.ss-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 10px 10px 16px;
    border-radius: 16px;
    background: var(--ss-glass-bg-strong);
    font-size: var(--ss-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    animation: ss-toast-drop var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-toast__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--ss-surface-3);
    color: var(--ss-text);
}
.ss-toast__icon svg { width: 14px; height: 14px; }
.ss-toast__msg { flex: 1; min-width: 0; }
.ss-toast__action {
    flex: none;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--ss-text);
    font-weight: 600;
    font-size: var(--ss-fs-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.ss-toast__close { width: 36px; height: 36px; }
.ss-toast--success .ss-toast__icon { background: var(--ss-success); color: var(--ss-success-ink); }
.ss-toast--error .ss-toast__icon { background: var(--ss-danger); color: var(--ss-danger-ink); }
.ss-toast--warn .ss-toast__icon { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-toast--info .ss-toast__icon { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
.ss-toast.is-leaving { animation: ss-toast-leave var(--ss-dur-micro) var(--ss-ease-in) both; }
@keyframes ss-toast-drop { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ss-toast-leave { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@media (max-width: 640px) {
    .ss-toasts {
        top: auto;
        bottom: calc(var(--ss-actionbar-h) + max(14px, env(safe-area-inset-bottom)));
        flex-direction: column-reverse;
    }
    .ss-toast { animation-name: ss-toast-rise; }
    .ss-toast.is-leaving { animation-name: ss-toast-sink; }
}
@keyframes ss-toast-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ss-toast-sink { to { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* [c15] */
.ss-coach {
    position: fixed;
    z-index: var(--ss-z-coach);
    max-width: min(300px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--ss-glass-bg-strong);
    font-size: var(--ss-fs-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ss-text);
    animation: ss-rise-in var(--ss-dur-comp) var(--ss-ease) both, ss-breathe 1.2s var(--ss-ease) 300ms 1;
}
.ss-coach__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--ss-accent);
    vertical-align: 1px;
    box-shadow: 0 0 0 4px var(--ss-accent-soft);
}
.ss-coach__arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    left: var(--arrow-x, 50%);
    margin-left: -7px;
    background: inherit;
    border: inherit;
    border-width: 0 1px 1px 0;
    -webkit-backdrop-filter: inherit;
    backdrop-filter: inherit;
    transform: rotate(45deg);
}
.ss-coach[data-side="bottom"] .ss-coach__arrow { top: -8px; transform: rotate(225deg); }
.ss-coach[data-side="top"] .ss-coach__arrow { bottom: -8px; }
.ss-coach.is-leaving { animation: ss-fade-out var(--ss-dur-micro) var(--ss-ease-in) both; }
.ss-coach--static { position: relative; display: inline-block; animation: none; }
.ss-coach-target { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--ss-accent-line); border-radius: inherit; }

/* [c16] */
.ss-tip { position: relative; }
.ss-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ss-ink);
    color: var(--ss-paper);
    font-size: var(--ss-fs-xs);
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-micro) var(--ss-ease);
}
.ss-tip--below::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
@media (hover: hover) {
    .ss-tip:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }
}
.ss-tip:focus-visible::after, .ss-tip.is-tip-open::after { opacity: 1; transform: translate(-50%, 0); }

/* [c17] */
.ss-progress {
    --p: 0;
    position: relative;
    height: 8px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-surface-3);
    overflow: hidden;
}
.ss-progress__bar {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ss-accent);
    transform-origin: left center;
    transform: scaleX(calc(var(--p) / 100));
    transition: transform var(--ss-dur-surface) var(--ss-ease), background-color var(--ss-dur-comp);
}
.ss-progress__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--ss-sheen), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: ss-shimmer 1.6s linear infinite;
}
.ss-progress--thin { height: 4px; }
.ss-progress--indeterminate .ss-progress__bar { width: 40%; transform: none; animation: ss-indeterminate 1.3s var(--ss-ease) infinite; }
.ss-progress.is-done .ss-progress__bar { background: var(--ss-success); }
.ss-progress.is-done .ss-progress__bar::after { animation: none; }
.ss-progress.is-error .ss-progress__bar { background: var(--ss-danger); }
.ss-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); font-variant-numeric: tabular-nums; }

/* [c18] */
.ss-ring {
    --ring-size: 168px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--ring-size);
    height: var(--ring-size);
    flex: none;
}
.ss-ring--sm { --ring-size: 72px; }
.ss-ring--lg { --ring-size: 220px; }
.ss-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-ring__tick { fill: var(--ss-surface-3); transition: fill var(--ss-dur-comp) var(--ss-ease); }
.ss-ring__tick.is-on { fill: var(--ss-accent); }
.ss-ring.is-filling .ss-ring__tick.is-on {
    animation: ss-tick-on 260ms var(--ss-ease) both;
    animation-delay: var(--d, 0ms);
}
@keyframes ss-tick-on { from { fill: var(--ss-surface-3); opacity: 0.5; } to { fill: var(--ss-accent); opacity: 1; } }
.ss-ring__center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.ss-ring__num {
    font-stretch: var(--ss-stretch-display);
    font-weight: 700;
    font-size: calc(var(--ring-size) * 0.26);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.ss-ring__label { margin-top: 6px; font-size: var(--ss-fs-xs); color: var(--ss-text-soft); font-weight: 500; }
.ss-ring--sm .ss-ring__label { display: none; }
.ss-ring--sm .ss-ring__num { font-size: 1.125rem; }
.ss-ring.is-empty .ss-ring__num { color: var(--ss-text-faint); }

/* [c19] */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ss-compare {
    --pos: 50%;
    position: relative;
    aspect-ratio: var(--ar, 4 / 3);
    width: 100%;
    overflow: hidden;
    border-radius: var(--ss-r-card);
    background: var(--ss-surface-2);
    user-select: none;
    touch-action: pan-y;
    isolation: isolate;
}
.ss-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ss-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ss-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: var(--ss-knob);
    box-shadow: var(--ss-shadow-knob);
    pointer-events: none;
    z-index: 2;
}
.ss-compare__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: var(--ss-scrim);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 2px solid var(--ss-knob);
    box-shadow: var(--ss-shadow-knob);
    display: grid;
    place-items: center;
    color: var(--ss-on-scrim);
    transition: transform var(--ss-dur-micro) var(--ss-ease);
}
.ss-compare__knob::before, .ss-compare__knob::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
}
.ss-compare__knob::before { left: 10px; transform: rotate(45deg); }
.ss-compare__knob::after { right: 10px; transform: rotate(-135deg); }
.ss-compare__badge {
    position: absolute;
    top: 12px;
    z-index: 3;
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--ss-r-pill);
    background: var(--ss-scrim);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ss-on-scrim);
    font-size: var(--ss-fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity var(--ss-dur-micro) var(--ss-ease);
}
.ss-compare__badge--before { left: 12px; }
.ss-compare__badge--after { right: 12px; }
.ss-compare.is-left .ss-compare__badge--before { opacity: 0; }
.ss-compare.is-right .ss-compare__badge--after { opacity: 0; }
.ss-compare__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-y;
}
.ss-compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; }
.ss-compare__range::-moz-range-thumb { width: 44px; height: 100vh; border: 0; }
.ss-compare:has(.ss-compare__range:focus-visible) { box-shadow: var(--ss-ring); }
.ss-compare:has(.ss-compare__range:active) .ss-compare__knob { transform: scale(1.08); }
.ss-compare.is-hinting { animation: ss-compare-hint 1.6s var(--ss-ease) 1 both; }
@keyframes ss-compare-hint {
    0% { --pos: 50%; }
    30% { --pos: 72%; }
    65% { --pos: 30%; }
    100% { --pos: 50%; }
}
.ss-compare.is-sweeping::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, transparent 30%, var(--ss-sheen) 50%, transparent 70%);
    mix-blend-mode: soft-light;
    animation: ss-sweep 900ms var(--ss-ease) 1 both;
    pointer-events: none;
}

/* [c38] */
.ss-carousel {
    --ss-carousel-per: 1;
    --ss-carousel-gap: 16px;
    --ss-carousel-peek: 0px;
    position: relative;
    min-width: 0;
    contain: inline-size;
}
.ss-carousel__track {
    display: flex;
    gap: var(--ss-carousel-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-padding-inline: var(--ss-carousel-pad, 0px);
    padding-inline: var(--ss-carousel-pad, 0px);
    margin-inline: calc(-1 * var(--ss-carousel-pad, 0px));
    -webkit-overflow-scrolling: touch;
}
.ss-carousel__track::-webkit-scrollbar { display: none; }
.ss-carousel__track:focus-visible { outline: none; box-shadow: var(--ss-ring); border-radius: 12px; }
.ss-carousel__slide {
    flex: 0 0 calc((100% - var(--ss-carousel-gap) * (var(--ss-carousel-per) - 1) - var(--ss-carousel-peek)) / var(--ss-carousel-per));
    min-width: 0;
    scroll-snap-align: start;
    transition: opacity var(--ss-dur-comp) var(--ss-ease), transform var(--ss-dur-comp) var(--ss-ease);
}
.ss-carousel__slide.is-leaving { opacity: 0; transform: scale(0.94); pointer-events: none; }
.ss-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.ss-carousel__nav[hidden] { display: none; }
.ss-carousel__nav .ss-iconbtn { border-color: var(--ss-border); background: var(--ss-surface); color: var(--ss-text); }
.ss-carousel__dots { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0; min-width: 0; }
.ss-carousel__dot {
    width: 24px;
    height: 24px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--ss-border-strong);
    background-clip: content-box;
    cursor: pointer;
    transition: width var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro);
}
.ss-carousel__dot[aria-current="true"] { width: 38px; border-radius: 12px; background-color: var(--ss-text); }
.ss-carousel__dot:focus-visible { outline: none; box-shadow: var(--ss-ring); }
@media (max-width: 640px) {
    .ss-carousel { --ss-carousel-pad: 16px; }
}

/* [c39] */
.ss-pro {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    border-radius: 16px;
    background: linear-gradient(var(--ss-accent-soft), var(--ss-accent-soft)), var(--ss-surface);
    border: 1px solid var(--ss-accent-line);
    box-shadow: 0 0 0 4px var(--ss-accent-glow);
    min-width: 0;
}
.ss-pro__badge { flex: none; }
.ss-pro__text { flex: 1; min-width: 0; margin: 0; font-size: var(--ss-fs-sm); line-height: 1.45; color: var(--ss-text); }
.ss-pro__btn { flex: none; min-height: 44px; }
@media (max-width: 640px) {
    .ss-pro { flex-wrap: wrap; align-items: flex-start; }
    .ss-pro__text { flex-basis: calc(100% - 64px); }
    .ss-pro__btn { flex: 1 1 100%; width: 100%; }
}

/* [c20] */
.ss-chip {
    --brush: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    max-width: 100%;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
    border: 1px solid var(--ss-border);
    background: var(--ss-surface);
    color: var(--ss-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease),
        transform var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro);
}
.ss-chip__thumb {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ss-surface-2);
}
.ss-chip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-chip__brush {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brush);
    border: 2.5px solid var(--ss-surface);
}
.ss-chip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss-chip__brand { font-size: var(--ss-fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-faint); }
.ss-chip__brand img { height: 12px; width: auto; }
.ss-chip__name { font-size: var(--ss-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-chip__colour { font-size: var(--ss-fs-xs); color: var(--ss-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-chip__remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: 2px;
    flex: none;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ss-text-faint);
    cursor: pointer;
}
.ss-chip__remove svg { width: 14px; height: 14px; }
@media (hover: hover) {
    .ss-chip:hover { border-color: var(--ss-border-strong); box-shadow: var(--ss-shadow-sm); transform: translateY(-1px); }
    .ss-chip__remove:hover { background: var(--ss-surface-2); color: var(--ss-text); }
}
.ss-chip:active { transform: scale(0.98); }
.ss-chip:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-chip[aria-pressed="true"], .ss-chip.is-selected {
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 1px var(--ss-accent), 0 4px 14px var(--ss-accent-glow);
    background: color-mix(in srgb, var(--ss-accent) 5%, var(--ss-surface));
}
.ss-chip:disabled, .ss-chip[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.ss-chip--brush-purple { --brush: var(--ss-brush-purple); }
.ss-chip--brush-orange { --brush: var(--ss-brush-orange); }
.ss-chip--brush-blue   { --brush: var(--ss-brush-blue); }
.ss-chip--brush-yellow { --brush: var(--ss-brush-yellow); }
.ss-chip--brush-green  { --brush: var(--ss-brush-green); }
.ss-chip--brush-red    { --brush: var(--ss-brush-red); }
.ss-chip--compact { min-height: 44px; padding: 4px 10px 4px 4px; }
.ss-chip--compact .ss-chip__thumb { width: 34px; height: 34px; border-radius: 8px; }
.ss-chip--compact .ss-chip__brand { display: none; }

/* [c21] */
.ss-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px 24px;
    border-radius: 20px;
    border: 1px solid var(--ss-border);
    background: var(--ss-surface);
    box-shadow: var(--ss-shadow-sm);
    min-width: 0;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-micro);
}
.ss-plan--featured { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent), 0 12px 36px var(--ss-accent-glow); }
/* [c61] */
.ss-plan--pro { border-color: var(--ss-pro-edge); background: var(--ss-pro-bg); box-shadow: var(--ss-pro-shadow); }
.ss-plan.ss-plan--pro.is-current { border-style: solid; }
.ss-plan__star { display: inline-block; flex: none; width: 0.8em; height: 0.8em; margin-right: 0.3em; vertical-align: -0.04em; color: var(--ss-pro-star); }
.ss-badge--pro { background: var(--ss-pro-badge-bg); color: var(--ss-pro-badge-ink); }
.ss-badge--pro .ss-plan__star { width: 12px; height: 12px; margin-right: 0; vertical-align: 0; color: var(--ss-pro-star); }
.ss-plan__badge { position: absolute; top: -12px; left: 24px; }
.ss-plan__name { font-size: var(--ss-fs-lg); font-weight: 600; }
.ss-plan__price { display: flex; align-items: baseline; gap: 6px; }
.ss-plan__amount {
    font-stretch: var(--ss-stretch-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ss-plan__period { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-plan__save { font-size: var(--ss-fs-sm); font-weight: 600; color: var(--ss-success); min-height: 1.2em; }
.ss-plan__quota { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ss-plan__quota svg { width: 22px; height: 22px; color: var(--ss-accent); flex: none; }
.ss-plan__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-plan__list li { display: flex; gap: 8px; }
.ss-plan__list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 10px;
    margin: 3px 4px 0 2px;
    border: solid var(--ss-success);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ss-plan .ss-btn { margin-top: auto; }
.ss-plan.is-current { border-style: dashed; }
.ss-plan.is-selected { border-color: var(--ss-accent); box-shadow: 0 0 0 2px var(--ss-accent); }
@media (hover: hover) { .ss-plan:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } .ss-plan--featured:hover { box-shadow: 0 0 0 1px var(--ss-accent), 0 16px 40px var(--ss-accent-glow); } .ss-plan--pro:hover { box-shadow: var(--ss-pro-shadow-hover); } }
.ss-plan__amount.is-changing { animation: ss-step-up var(--ss-dur-comp) var(--ss-ease); }

.ss-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 120px;
    padding: 18px;
    border-radius: var(--ss-r-card);
    border: 1px solid var(--ss-border);
    background: var(--ss-surface);
    color: var(--ss-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-micro);
}
.ss-pack__qty { font-stretch: var(--ss-stretch-display); font-weight: 700; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-pack__unit { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-pack__price { margin-top: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-pack__each { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); }
.ss-pack__check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ss-border-strong);
    transition: background-color var(--ss-dur-micro), border-color var(--ss-dur-micro);
}
@media (hover: hover) { .ss-pack:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } }
.ss-pack:active { transform: scale(0.98); }
.ss-pack:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-pack[aria-checked="true"], .ss-pack.is-selected { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent); }
.ss-pack[aria-checked="true"] .ss-pack__check, .ss-pack.is-selected .ss-pack__check { background: var(--ss-accent); border-color: var(--ss-accent); }
.ss-pack[aria-checked="true"] .ss-pack__check::after, .ss-pack.is-selected .ss-pack__check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--ss-accent-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ss-pack:disabled { opacity: 0.4; cursor: not-allowed; }

/* [c22] */
.ss-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-input, .ss-select, .ss-textarea {
    width: 100%;
    min-height: 56px;
    padding: 24px 14px 8px;
    border: 1px solid var(--ss-border-strong);
    border-radius: 12px;
    background: var(--ss-surface);
    color: var(--ss-text);
    font-family: var(--ss-font);
    font-size: var(--ss-fs-md);
    line-height: 1.35;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro);
}
.ss-textarea { min-height: 120px; resize: vertical; padding-top: 28px; }
.ss-select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 27px, calc(100% - 15px) 27px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.ss-field__label {
    position: absolute;
    left: 15px;
    top: 18px;
    max-width: calc(100% - 30px);
    color: var(--ss-text-faint);
    font-size: var(--ss-fs-md);
    line-height: 1.25;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left top;
    transition: transform var(--ss-dur-micro) var(--ss-ease), color var(--ss-dur-micro);
}
.ss-input:focus ~ .ss-field__label,
.ss-input:not(:placeholder-shown) ~ .ss-field__label,
.ss-textarea:focus ~ .ss-field__label,
.ss-textarea:not(:placeholder-shown) ~ .ss-field__label,
.ss-select ~ .ss-field__label {
    transform: translateY(-10px) scale(0.75);
    color: var(--ss-text-soft);
}
.ss-input::placeholder, .ss-textarea::placeholder { color: transparent; }
.ss-input:focus::placeholder, .ss-textarea:focus::placeholder { color: var(--ss-text-faint); }
@media (hover: hover) {
    .ss-input:hover:not(:disabled):not(:focus), .ss-select:hover:not(:disabled):not(:focus), .ss-textarea:hover:not(:disabled):not(:focus) {
        border-color: var(--ss-text-faint);
    }
}
.ss-input:focus, .ss-select:focus, .ss-textarea:focus { border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-accent-soft); }
.ss-input:focus ~ .ss-field__label, .ss-textarea:focus ~ .ss-field__label, .ss-select:focus ~ .ss-field__label { color: var(--ss-accent-text); }
.ss-input:disabled, .ss-select:disabled, .ss-textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--ss-surface-2); }
.ss-input[readonly] { background: var(--ss-surface-2); }
.ss-field.is-invalid .ss-input, .ss-field.is-invalid .ss-select, .ss-field.is-invalid .ss-textarea,
.ss-input[aria-invalid="true"], .ss-select[aria-invalid="true"], .ss-textarea[aria-invalid="true"] {
    border-color: var(--ss-danger);
    box-shadow: 0 0 0 3px var(--ss-danger-soft);
}
.ss-field.is-invalid .ss-field__label { color: var(--ss-danger); }
.ss-field.is-valid .ss-input { border-color: var(--ss-success); }
.ss-field.is-valid::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 21px;
    width: 6px;
    height: 12px;
    border: solid var(--ss-success);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: ss-check-draw var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-field.is-loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 19px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ss-text-faint);
    border-right-color: transparent;
    animation: ss-spin 700ms linear infinite;
}
.ss-field__hint { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); padding: 0 4px; }
.ss-field__error { font-size: var(--ss-fs-sm); color: var(--ss-danger); padding: 0 4px; font-weight: 500; }
.ss-field.is-error-shake { animation: ss-shake 180ms var(--ss-ease); }

/* [c23] */
.ss-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: var(--ss-fs-sm); }
.ss-check input { width: 20px; height: 20px; accent-color: var(--ss-accent); margin: 0; }

/* [c24] */
.ss-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
}
.ss-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ss-switch__track {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-stone-3);
    transition: background-color var(--ss-dur-comp) var(--ss-ease);
}
.ss-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ss-knob);
    box-shadow: var(--ss-shadow-thumb);
    transition: transform var(--ss-dur-comp) var(--ss-ease-spring), width var(--ss-dur-micro) var(--ss-ease);
}
.ss-switch input:checked + .ss-switch__track { background: var(--ss-success); }
.ss-switch input:checked + .ss-switch__track .ss-switch__thumb { transform: translateX(20px); }
.ss-switch:active input:not(:disabled) + .ss-switch__track .ss-switch__thumb { width: 26px; }
.ss-switch:active input:checked:not(:disabled) + .ss-switch__track .ss-switch__thumb { transform: translateX(16px); }
.ss-switch input:focus-visible + .ss-switch__track { box-shadow: var(--ss-ring); }
.ss-switch input:disabled + .ss-switch__track { opacity: 0.4; }
.ss-switch:has(input:disabled) { cursor: not-allowed; }
@media (hover: hover) { .ss-switch:hover input:not(:checked):not(:disabled) + .ss-switch__track { background: var(--ss-stone-4); } }
.ss-switch__text { display: flex; flex-direction: column; gap: 2px; }
.ss-switch__label { font-weight: 500; }
.ss-switch__hint { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); }
.ss-switch--row { display: flex; justify-content: space-between; width: 100%; flex-direction: row-reverse; }
.ss-switch.is-saving .ss-switch__thumb::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 2px solid var(--ss-accent);
    border-right-color: transparent;
    animation: ss-spin 700ms linear infinite;
}

/* [c25] */
.ss-skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ss-surface-2) 0%, var(--ss-surface-3) 50%, var(--ss-surface-2) 100%);
    background-size: 200% 100%;
    animation: ss-shimmer 1.4s linear infinite;
}
.ss-skel--text { height: 0.9em; margin: 0.3em 0; }
.ss-skel--title { height: 1.4em; width: 60%; }
.ss-skel--circle { border-radius: 50%; aspect-ratio: 1; width: 44px; }
.ss-skel--media { aspect-ratio: var(--ar, 4 / 3); width: 100%; border-radius: var(--ss-r-card); }
.ss-skel--w40 { width: 40%; }
.ss-skel--w70 { width: 70%; }

/* [c26] */
.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    border-radius: var(--ss-r-card);
    border: 1px dashed var(--ss-border-strong);
}
.ss-empty__mark { width: 40px; height: 40px; color: var(--ss-stone-4); }
.ss-empty__text { max-width: 34ch; color: var(--ss-text-soft); font-size: var(--ss-fs-md); }

/* [c27] */
.ss-avatar {
    --av: 40px;
    display: inline-grid;
    place-items: center;
    width: var(--av);
    height: var(--av);
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ss-surface-3);
    color: var(--ss-text);
    font-weight: 600;
    font-size: calc(var(--av) * 0.4);
    font-stretch: var(--ss-stretch-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ss-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ss-avatar--sm { --av: 32px; }
.ss-avatar--lg { --av: 56px; }
.ss-avatar--accent { background: var(--ss-accent); color: var(--ss-accent-ink); }

/* [c28] */
.ss-review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--ss-r-card);
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    min-width: 0;
}
.ss-review__stars { display: flex; gap: 3px; color: var(--ss-accent); }
.ss-review__stars svg { width: 16px; height: 16px; }
.ss-review__quote { font-size: var(--ss-fs-md); line-height: 1.55; margin: 0; }
.ss-review__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ss-review__id { display: flex; flex-direction: column; min-width: 0; }
.ss-review__name { font-weight: 600; font-size: var(--ss-fs-sm); line-height: 1.3; }
.ss-review__role { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); }

/* [c29] */
.ss-partners { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ss-partners__label {
    font-size: var(--ss-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ss-text-faint);
}
.ss-partners__marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 36px; color: var(--ss-text-faint); }
.ss-partners__mark { display: inline-flex; align-items: center; gap: 8px; height: 22px; color: inherit; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.ss-partners__mark svg { height: 22px; width: auto; fill: currentColor; }
@media (max-width: 640px) {
    .ss-partners__marks { gap: 12px 24px; }
    .ss-partners__mark, .ss-partners__mark svg { height: 18px; }
    .ss-partners__mark { font-size: 0.9rem; }
}

/* [c30] */
.ss-lockup { display: inline-flex; align-items: center; gap: calc(var(--lk-icon) * 0.45); color: var(--ss-text); text-decoration: none; --lk-icon: 26px; --lk-cap: 19px; }
.ss-lockup__icon { height: var(--lk-icon); width: calc(var(--lk-icon) * 512 / 448); flex: none; }
.ss-lockup__word { height: calc(var(--lk-cap) * 1.0349); width: calc(var(--lk-cap) * 12.5779); flex: none; fill: currentColor; }
.ss-lockup--phone { --lk-icon: 24px; --lk-cap: 16px; }
.ss-loader { display: inline-grid; place-items: center; }
.ss-loader svg { width: 64px; height: auto; }
.ss-loader .ss-slab { fill: var(--ss-accent); animation: ss-slab 1.2s var(--ss-ease) infinite; }
.ss-loader .ss-slab:nth-child(2) { animation-delay: 150ms; }
.ss-loader .ss-slab:nth-child(3) { animation-delay: 300ms; }
.ss-loader .ss-slab:nth-child(4) { animation-delay: 450ms; }
@keyframes ss-slab { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } 60% { opacity: 0.25; } }
.ss-lockup-reveal .ss-lockup__icon { animation: ss-lockup-draw 450ms var(--ss-ease) both; }
.ss-lockup-reveal .ss-lockup__word { animation: ss-rise-in 300ms var(--ss-ease) 570ms both; }
@keyframes ss-lockup-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* [c31] */
.ss-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ss-z-topbar);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: var(--ss-topbar-h);
    padding: 0 max(var(--ss-gutter), env(safe-area-inset-right)) 0 max(var(--ss-gutter), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--ss-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ss-dur-comp) var(--ss-ease), background-color var(--ss-dur-comp);
}
.ss-topbar.is-scrolled { border-bottom-color: var(--ss-border); }
.ss-topbar.is-floating { position: absolute; left: 0; right: 0; background: var(--ss-glass-bg); }
.ss-topbar__slot { display: flex; align-items: center; min-width: 0; }
.ss-topbar__slot:empty { display: none; }
.ss-topbar__brand { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ss-tap, 44px); border-radius: 8px; padding: 6px 4px; margin-left: -4px; }
.ss-topbar__brand .ss-lockup--phone { display: none; }
.ss-topbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ss-topbar__login { min-width: 88px; }
/* [c40] */
.ss-topbar--center { grid-template-columns: 1fr auto 1fr; }
.ss-topbar--center .ss-topbar__slot, .ss-topbar--center .ss-topbar__slot:empty { display: flex; grid-column: 1; }
.ss-topbar--center .ss-topbar__brand { grid-column: 2; justify-self: center; margin: 0; }
.ss-topbar--center .ss-topbar__actions { grid-column: 3; }
.ss-theme-toggle .ss-icon-sun { display: none; }
:root[data-theme="dark"] .ss-theme-toggle .ss-icon-sun { display: block; }
:root[data-theme="dark"] .ss-theme-toggle .ss-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ss-theme-toggle .ss-icon-sun { display: block; }
    :root:not([data-theme="light"]) .ss-theme-toggle .ss-icon-moon { display: none; }
}
@media (max-width: 640px) {
    .ss-topbar { grid-template-columns: var(--ss-tap) 1fr var(--ss-tap); padding-inline: 8px; }
    .ss-topbar--guest { grid-template-columns: 0 auto 1fr; padding-inline: 12px 16px; gap: 0; }
    .ss-topbar--guest .ss-topbar__slot { visibility: hidden; }
    .ss-topbar__slot { grid-column: 1; }
    .ss-topbar__slot:empty { display: flex; }
    .ss-topbar__brand { grid-column: 2; justify-self: center; margin: 0; }
    .ss-topbar__brand .ss-lockup--desk { display: none; }
    .ss-topbar__brand .ss-lockup--phone { display: inline-flex; }
    .ss-topbar__actions { grid-column: 3; gap: 2px; }
    .ss-topbar__login { min-width: 0; padding: 0 14px; }
    .ss-topbar--guest .ss-topbar__brand { justify-self: start; }
    /* [c52] */
    .ss-topbar:not(.ss-topbar--guest) { grid-template-columns: calc(var(--ss-tap) * 2 + 2px) 1fr calc(var(--ss-tap) * 2 + 2px); gap: 2px; padding-inline: 6px; }
}
@media (max-width: 380px) {
    .ss-topbar:not(.ss-topbar--guest) .ss-lockup--phone { --lk-icon: 22.5px !important; --lk-cap: 17px !important; }
}
@media (max-width: 365px) {
    .ss-topbar:not(.ss-topbar--guest) .ss-lockup--phone { --lk-icon: 21px !important; --lk-cap: 15.5px !important; }
}
@media (max-width: 400px) {
    .ss-topbar--guest .ss-lockup--phone { --lk-icon: 22px; --lk-cap: 14px; }
}
@media (max-width: 339px) {
    .ss-topbar__brand .ss-lockup__word { display: none; }
}

/* [c32] */
.ss-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ss-z-menu) - 1);
    background: var(--ss-backdrop-soft);
    animation: ss-fade-in var(--ss-dur-comp) var(--ss-ease) both;
}
.ss-menu {
    position: fixed;
    z-index: var(--ss-z-menu);
    top: 10px;
    right: 10px;
    width: min(340px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    border-radius: var(--ss-r-sheet);
    background: var(--ss-glass-bg-strong);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    border: 1px solid var(--ss-glass-border);
    box-shadow: var(--ss-glass-highlight), var(--ss-shadow-lg);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--ss-dur-comp) var(--ss-ease), transform var(--ss-dur-comp) var(--ss-ease);
}
.ss-menu.open { opacity: 1; transform: none; }
.ss-menu:focus { outline: none; }
.ss-menu__head { display: flex; align-items: center; gap: 12px; padding: 6px 4px 12px 8px; }
.ss-menu__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ss-menu__email { font-size: var(--ss-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-menu__nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--ss-glass-border); }
.ss-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ss-text);
    font-family: var(--ss-font);
    font-size: var(--ss-fs-md);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ss-dur-micro) var(--ss-ease);
}
.ss-menu__item svg { width: 20px; height: 20px; color: var(--ss-text-soft); flex: none; }
@media (hover: hover) { .ss-menu__item:hover { background: color-mix(in srgb, var(--ss-text) 7%, transparent); } }
.ss-menu__item:active { transform: scale(0.99); }
.ss-menu__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ss-accent); }
.ss-menu__item[aria-current="page"] { background: var(--ss-accent-soft); }
.ss-menu__item[aria-current="page"] svg { color: var(--ss-accent-text); }
.ss-menu__item--quiet { color: var(--ss-text-soft); }
.ss-menu__section { padding: 12px 8px 8px; border-top: 1px solid var(--ss-glass-border); display: flex; flex-direction: column; gap: 8px; }
.ss-menu__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    padding: 6px 2px 4px;
    border-top: 1px solid var(--ss-glass-border);
    font-size: var(--ss-fs-xs);
    color: var(--ss-text-faint);
}
.ss-menu__foot a { color: inherit; text-decoration: none; min-height: 44px; min-width: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.ss-menu__foot a:hover { color: var(--ss-text); text-decoration: underline; }
.ss-menu__end { display: flex; flex-direction: column; padding-top: 4px; border-top: 1px solid var(--ss-glass-border); }
@media (max-width: 640px) {
    .ss-menu {
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 88vw);
        max-height: none;
        border-radius: var(--ss-r-phone-sheet) 0 0 var(--ss-r-phone-sheet);
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        transform: translateX(100%);
        opacity: 1;
        transition: transform var(--ss-dur-surface) var(--ss-ease);
    }
    .ss-menu.open { transform: none; }
    .ss-menu__item { min-height: 50px; }
    .ss-menu__end { margin-top: auto; }
}

/* [c51] */
.ss-bell { position: relative; }
.ss-bell svg { width: 22px; height: 22px; }
.ss-bell__badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ss-r-pill);
    background: var(--ss-accent);
    color: var(--ss-accent-ink);
    font: 700 var(--ss-fs-2xs)/1 var(--ss-font);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--ss-bg);
    pointer-events: none;
}
.ss-bell__badge[hidden] { display: none; }
.ss-bell__badge.is-pop { animation: ss-bell-pop var(--ss-dur-surface) var(--ss-ease-spring) both; }
.ss-bell.is-ringing svg { transform-origin: 50% 12%; animation: ss-bell-ring var(--ss-dur-surface) var(--ss-ease) both; }
@keyframes ss-bell-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ss-bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
.ss-notify__body { padding: 0 8px 10px; }
.ss-notify__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-notify__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px;
    border-radius: 14px;
    color: var(--ss-text);
    text-decoration: none;
    transition: background-color var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-press) var(--ss-ease);
}
@media (hover: hover) { .ss-notify__row:hover { background: color-mix(in srgb, var(--ss-text) 7%, transparent); } }
.ss-notify__row:active { transform: scale(0.99); }
.ss-notify__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ss-accent); }
.ss-notify__media {
    width: 44px;
    height: 44px;
    border-radius: var(--ss-r-control);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--ss-surface-2);
    color: var(--ss-text-soft);
}
.ss-notify__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-notify__media svg { width: 20px; height: 20px; }
.ss-notify__media--accent { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
.ss-notify__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-notify__line { font-size: var(--ss-fs-sm); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ss-notify__row.is-unread .ss-notify__line { font-weight: 650; }
.ss-notify__sub { font-size: var(--ss-fs-sm); line-height: 1.35; color: var(--ss-text-soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-notify__time { font-size: var(--ss-fs-xs); color: var(--ss-text-faint); }
.ss-notify__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-accent); visibility: hidden; }
.ss-notify__row.is-unread .ss-notify__dot { visibility: visible; }
.ss-notify__empty { padding: 24px 16px 32px; gap: 12px; border: 0; }
.ss-notify__empty .ss-empty__text { font-size: var(--ss-fs-sm); }
@media (min-width: 641px) {
    .ss-sheet--notify { place-items: start end; padding: calc(var(--ss-topbar-h) - 6px) var(--ss-notify-right, 16px) 24px 24px; }
    .ss-sheet--notify .ss-sheet__backdrop { background: var(--ss-backdrop-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ss-sheet--notify .ss-sheet__panel {
        width: min(360px, calc(100vw - 20px));
        max-height: min(560px, calc(100dvh - var(--ss-topbar-h) - 24px));
        transform-origin: top right;
        animation: ss-notify-drop var(--ss-dur-comp) var(--ss-ease) both;
    }
    .ss-sheet--notify.is-closing .ss-sheet__panel { animation: ss-notify-lift var(--ss-dur-micro) var(--ss-ease-in) both; }
    .ss-sheet--notify .ss-sheet__head { padding: 10px 6px 2px 18px; min-height: 52px; }
    .ss-sheet--notify .ss-sheet__title { font-size: var(--ss-fs-lg); }
}
@keyframes ss-notify-drop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ss-notify-lift { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.ss-confetti { position: fixed; z-index: var(--ss-z-toast); width: 0; height: 0; pointer-events: none; }
.ss-confetti__bit {
    position: absolute;
    left: -3px;
    top: -5px;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: var(--ss-accent);
    opacity: 0;
    animation: ss-confetti var(--ss-dur-reveal) var(--ss-ease) var(--delay, 0ms) forwards;
}
.ss-confetti__bit--b { background: var(--ss-success); }
.ss-confetti__bit--c { background: var(--ss-stone-3); }
.ss-confetti__bit--d { background: var(--ss-accent-hover); width: 8px; height: 8px; border-radius: 50%; }
@keyframes ss-confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 180deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-confetti { display: none; }
    .ss-bell__badge.is-pop, .ss-bell.is-ringing svg { animation: none; }
}

/* [c33] */
.ss-footer {
    margin-top: auto;
    padding: 28px max(var(--ss-gutter), env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--ss-text-faint);
    font-size: var(--ss-fs-xs);
}
.ss-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; }
.ss-footer__links a, .ss-footer__links button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ss-text-soft);
    font: inherit;
    font-size: var(--ss-fs-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro);
}
.ss-footer__links a:hover, .ss-footer__links button:hover { color: var(--ss-text); background: var(--ss-surface-2); }
@media (pointer: coarse), (max-width: 640px) { .ss-footer__links a, .ss-footer__links button { min-height: var(--ss-tap, 44px); } }
.ss-footer__company { max-width: 72ch; line-height: 1.5; margin: 0; font-size: 0.8125rem; }
.ss-footer--inline { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-block: 14px; }

/* [c34] */
.ss-reveal-up { animation: ss-up-in var(--ss-dur-surface) var(--ss-ease) both; }
.ss-reveal-rise { animation: ss-rise-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-reveal-fade { animation: ss-fade-in var(--ss-dur-surface) var(--ss-ease) both; }
.ss-reveal-scale { animation: ss-scale-in var(--ss-dur-reveal) var(--ss-ease) both; }
.ss-reveal-pop { animation: ss-pop-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-reveal-sweep { position: relative; overflow: hidden; }
.ss-reveal-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, var(--ss-sheen), transparent);
    opacity: 0.55;
    animation: ss-sweep var(--ss-dur-reveal) var(--ss-ease) 200ms 1 both;
    pointer-events: none;
}
.ss-reveal-pulse { animation: ss-pulse-once 900ms var(--ss-ease) 1; }
.ss-reveal-breathe { animation: ss-breathe 1.2s var(--ss-ease) 1; }
[data-reveal]:not(.is-revealed) { opacity: 0; }
.ss-reveal-delay-1 { animation-delay: 120ms; }
.ss-reveal-delay-2 { animation-delay: 300ms; }
.ss-reveal-delay-3 { animation-delay: 500ms; }

.ss-step-enter { animation: ss-step-in var(--ss-dur-surface) var(--ss-ease) both; }
.ss-step-leave { animation: ss-step-out var(--ss-dur-comp) var(--ss-ease-in) both; pointer-events: none; }
.ss-step-enter.ss-step--back { animation-name: ss-step-in-back; }
.ss-step-leave.ss-step--back { animation-name: ss-step-out-back; }
@keyframes ss-step-in { from { opacity: 0; transform: translateX(var(--ss-step-shift)); } to { opacity: 1; transform: none; } }
@keyframes ss-step-out { to { opacity: 0; transform: translateX(calc(var(--ss-step-shift) * -1)); } }
@keyframes ss-step-in-back { from { opacity: 0; transform: translateX(calc(var(--ss-step-shift) * -1)); } to { opacity: 1; transform: none; } }
@keyframes ss-step-out-back { to { opacity: 0; transform: translateX(var(--ss-step-shift)); } }

.ss-stagger > * { animation: ss-rise-in var(--ss-dur-comp) var(--ss-ease) both; animation-delay: calc(var(--i, 0) * var(--ss-stagger)); }
.ss-stagger > :nth-child(1) { --i: 0; }
.ss-stagger > :nth-child(2) { --i: 1; }
.ss-stagger > :nth-child(3) { --i: 2; }
.ss-stagger > :nth-child(4) { --i: 3; }
.ss-stagger > :nth-child(5) { --i: 4; }
.ss-stagger > :nth-child(6) { --i: 5; }
.ss-stagger > :nth-child(7) { --i: 6; }
.ss-stagger > :nth-child(n+8) { --i: 7; }

/* [c35] */
.ss-section { padding-block: clamp(40px, 7vw, 88px); }
.ss-section__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.ss-divider { height: 1px; background: var(--ss-border); border: 0; margin: 0; }
.ss-kbd {
    display: inline-flex;
    align-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--ss-border-strong);
    border-bottom-width: 2px;
    font-size: var(--ss-fs-2xs);
    font-weight: 600;
    color: var(--ss-text-soft);
}

/* [c36] */
.ss-btn.is-hover { transform: translateY(-2px); box-shadow: var(--btn-shadow), var(--ss-shadow-hover); }
.ss-btn--primary.is-hover { --btn-bg: var(--ss-accent-hover); box-shadow: var(--ss-btn-highlight), var(--ss-shadow-accent); }
.ss-btn--secondary.is-hover { --btn-border: var(--ss-text-faint); --btn-bg: var(--ss-surface); }
.ss-btn--ghost.is-hover { --btn-bg: var(--ss-surface-2); --btn-fg: var(--ss-text); box-shadow: none; transform: none; }
.ss-btn--danger-soft.is-hover { --btn-bg: color-mix(in srgb, var(--ss-danger) 16%, transparent); }
.ss-btn.is-press { transform: scale(0.97); }
.ss-btn--primary.is-press { --btn-bg: var(--ss-accent-press); }
.ss-btn.is-focus { box-shadow: var(--btn-shadow), var(--ss-ring); }
.ss-iconbtn.is-hover { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-iconbtn.is-focus { box-shadow: var(--ss-ring); }
.ss-chip.is-hover { border-color: var(--ss-border-strong); box-shadow: var(--ss-shadow-sm); transform: translateY(-1px); }
.ss-chip.is-focus { box-shadow: var(--ss-ring); }
.ss-card--interactive.is-hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); }
.ss-input.is-hover { border-color: var(--ss-text-faint); }
.ss-input.is-focus { border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-accent-soft); }
.ss-input.is-focus ~ .ss-field__label { color: var(--ss-accent-text); transform: translateY(-10px) scale(0.75); }
.ss-input.is-focus::placeholder { color: var(--ss-text-faint); }
.ss-menu__item.is-hover { background: color-mix(in srgb, var(--ss-text) 7%, transparent); }

/* [c37] */
.st-devbar {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 99;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--ss-scrim-strong);
    color: var(--ss-on-scrim);
    font: 500 11px/1.6 ui-monospace, Consolas, monospace;
    pointer-events: none;
}
@media (max-width: 640px), (pointer: coarse) { .ss-btn--sm { --btn-h: var(--ss-tap); min-height: var(--ss-tap); } }
.ss-menu__item svg.ss-menu__brand { width: 20px; height: 18px; }

/* [c60] */
.ss-tour {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ss-z-menu) + 5);
    touch-action: none;
    opacity: 0;
    transition: opacity var(--ss-dur-comp) var(--ss-ease);
}
.ss-tour.is-open { opacity: 1; }
.ss-tour.is-leaving { opacity: 0; transition-timing-function: var(--ss-ease-in); }
.ss-tour__hole {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: var(--ss-r-card);
    box-shadow: 0 0 0 3px var(--ss-accent), 0 0 0 200vmax var(--ss-backdrop);
    pointer-events: none;
    transition: transform var(--ss-dur-surface) var(--ss-ease), width var(--ss-dur-surface) var(--ss-ease),
        height var(--ss-dur-surface) var(--ss-ease);
}
.ss-tour__hole.is-none { left: 50%; top: 50%; box-shadow: 0 0 0 200vmax var(--ss-backdrop); }
.ss-tour__tip {
    position: fixed;
    left: 0;
    top: 0;
    width: min(340px, calc(100vw - 32px));
    padding: 16px 16px 10px;
    border-radius: var(--ss-r-glass);
    background: var(--ss-glass-bg-strong);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    border: 1px solid var(--ss-glass-border);
    box-shadow: var(--ss-glass-highlight), var(--ss-glass-shadow);
    color: var(--ss-text);
    outline: none;
}
.ss-tour.is-moving .ss-tour__tip { opacity: 0; }
.ss-tour__tip.is-entering { animation: ss-rise-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-tour__text { font-size: var(--ss-fs-md); font-weight: 500; line-height: var(--ss-lh-snug); text-wrap: pretty; }
.ss-tour__text::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--ss-accent);
    vertical-align: 2px;
    box-shadow: 0 0 0 4px var(--ss-accent-soft);
}
.ss-tour__foot { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.ss-tour__count {
    margin-right: auto;
    font-size: var(--ss-fs-xs);
    font-weight: 600;
    color: var(--ss-text-faint);
    font-variant-numeric: tabular-nums;
}
.ss-tour__skip, .ss-tour__back { padding-inline: 12px; }
.ss-tour__back[hidden] { display: none; }
.ss-tour__next { min-width: 84px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ss-tour__tip { background: var(--ss-glass-bg-solid); }
}