/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:var(--fw-semibold);transition:all var(--t-base) var(--ease-out);cursor:pointer;white-space:nowrap;min-height:44px;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0.1),transparent);opacity:0;transition:opacity var(--t-fast)}
.btn:active::after{opacity:1}
.btn--primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow-red);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--gold{background:linear-gradient(135deg,var(--color-gold),var(--color-gold-light));color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}
.btn--gold:hover{box-shadow:var(--shadow-glow-gold);transform:translateY(-1px)}
.btn--outline{border:1px solid var(--color-border-hover);color:var(--color-text-primary);background:transparent}
.btn--outline:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-soft)}
.btn--ghost{color:var(--color-text-secondary);background:transparent;padding:var(--space-sm) var(--space-md)}
.btn--ghost:hover{color:var(--color-text-primary);background:rgba(255,255,255,0.05)}
.btn--sm{padding:8px 16px;font-size:var(--fs-sm);min-height:36px;border-radius:var(--radius-sm)}
.btn--lg{padding:16px 32px;font-size:var(--fs-md);border-radius:var(--radius-lg)}
.btn--full{width:100%}
.btn--icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.btn--icon svg{width:20px;height:20px}
.btn:disabled{opacity:.4;pointer-events:none}
.btn--loading{pointer-events:none;color:transparent!important}
.btn--loading::before{content:'';position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Cards ── */
.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--t-base) var(--ease-out)}
.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md)}
.card--elevated{box-shadow:var(--shadow-md)}
.card--gold{border-color:var(--color-gold-soft);box-shadow:0 0 0 1px var(--color-gold-soft)}
.card--gold:hover{box-shadow:var(--shadow-glow-gold)}
.card__body{padding:var(--space-md)}
.card__footer{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:3px 10px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase}
.badge--accent{background:var(--color-accent-soft);color:var(--color-accent)}
.badge--gold{background:var(--color-gold-soft);color:var(--color-gold)}
.badge--success{background:var(--color-success-soft);color:var(--color-success)}
.badge--danger{background:var(--color-danger-soft);color:var(--color-danger)}
.badge--premium{background:linear-gradient(135deg,var(--color-gold),var(--color-gold-light));color:var(--color-text-inverse);padding:4px 12px}
.badge--premium svg{width:12px;height:12px}

/* ── Inputs ── */
.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}
.input-group label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text-secondary)}
.input{width:100%;padding:12px var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-base);color:var(--color-text-primary);transition:border-color var(--t-base),box-shadow var(--t-base);min-height:44px}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.input--error{border-color:var(--color-danger)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea.input{min-height:100px;resize:vertical}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:var(--color-bg-overlay);z-index:var(--z-overlay);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-base)}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:var(--max-width);max-height:85vh;background:var(--color-bg-elevated);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;overflow-y:auto;transform:translateY(100%);transition:transform var(--t-slow) var(--ease-out)}
.modal-overlay.active .modal{transform:translateY(0)}
.modal__handle{width:36px;height:4px;border-radius:var(--radius-full);background:var(--color-text-muted);margin:var(--space-sm) auto var(--space-md)}
.modal__header{padding:0 var(--space-lg) var(--space-md);display:flex;align-items:center;justify-content:space-between}
.modal__header h3{font-size:var(--fs-lg)}
.modal__body{padding:0 var(--space-lg) var(--space-lg)}
.modal__footer{padding:var(--space-md) var(--space-lg);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom));border-top:1px solid var(--color-border);display:flex;gap:var(--space-sm)}

/* ── Toast ── */
.toast-container{position:fixed;top:var(--space-md);left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-sm);max-width:calc(var(--max-width) - 32px);width:100%;pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-sm);box-shadow:var(--shadow-lg);animation:toastIn var(--t-slow) var(--ease-out);pointer-events:auto}
.toast--success{border-left:3px solid var(--color-success)}
.toast--error{border-left:3px solid var(--color-danger)}
.toast--info{border-left:3px solid var(--color-info)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}

/* ── Skeleton Loader ── */
.skeleton{background:linear-gradient(90deg,var(--color-bg-card) 25%,var(--color-bg-elevated) 50%,var(--color-bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton--text{height:14px;width:80%}
.skeleton--title{height:20px;width:60%}
.skeleton--img{aspect-ratio:1;width:100%}
.skeleton--circle{width:40px;height:40px;border-radius:var(--radius-full)}

/* ── Switch Toggle ── */
.switch{position:relative;width:44px;height:24px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch__slider{position:absolute;inset:0;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);transition:all var(--t-base)}
.switch__slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform var(--t-base) var(--ease-bounce)}
.switch input:checked+.switch__slider{background:var(--color-accent);border-color:var(--color-accent)}
.switch input:checked+.switch__slider::before{transform:translateX(20px)}

/* ── Checkbox Add-on ── */
.checkbox-addon{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-base)}
.checkbox-addon:hover{border-color:var(--color-border-hover)}
.checkbox-addon.checked{border-color:var(--color-accent);background:var(--color-accent-soft)}
.checkbox-addon input{display:none}
.checkbox-addon__check{width:20px;height:20px;border:2px solid var(--color-text-muted);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);flex-shrink:0}
.checkbox-addon.checked .checkbox-addon__check{background:var(--color-accent);border-color:var(--color-accent)}
.checkbox-addon__label{flex:1;font-size:var(--fs-sm)}
.checkbox-addon__price{font-weight:var(--fw-semibold);color:var(--color-gold);font-size:var(--fs-sm)}

/* ── Range Slider ── */
.range-slider{width:100%;position:relative}
.range-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-bg-elevated);border-radius:var(--radius-full);outline:none;cursor:pointer}
.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--color-accent);border:3px solid var(--color-bg-primary);border-radius:50%;box-shadow:var(--shadow-glow-red);cursor:grab;transition:transform var(--t-fast) var(--ease-bounce)}
.range-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.range-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.range-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--color-accent);border:3px solid var(--color-bg-primary);border-radius:50%;box-shadow:var(--shadow-glow-red);cursor:grab}
.range-slider__labels{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}
.range-slider__value{text-align:center;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-text-primary);margin-bottom:var(--space-sm)}
.range-slider__value span{color:var(--color-text-muted);font-size:var(--fs-sm);font-weight:var(--fw-regular)}

/* ── Divider ── */
.divider{height:1px;background:var(--color-border);margin:var(--space-md) 0}
.divider--spaced{margin:var(--space-lg) 0}

/* ── Empty State ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl) var(--space-lg);text-align:center}
.empty-state svg{width:64px;height:64px;color:var(--color-text-muted);margin-bottom:var(--space-md)}
.empty-state h3{margin-bottom:var(--space-sm);color:var(--color-text-primary)}
.empty-state p{color:var(--color-text-muted);font-size:var(--fs-sm);max-width:240px}

/* ── Verified Frame ── */
.verified-frame{position:relative;border:2px solid var(--color-gold);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow-gold)}
.verified-frame::after{content:'✓';position:absolute;top:-8px;right:-8px;width:22px;height:22px;background:var(--color-gold);color:var(--color-text-inverse);border-radius:50%;font-size:12px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center}

/* ── Pulse Animation ── */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.animate-pulse{animation:pulse .4s var(--ease-bounce)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-up{animation:fadeUp var(--t-slow) var(--ease-out) both}