/* Mystery Box Settings — page-specific styles */

/* Page header */
.page-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.page-hd-left { display: flex; align-items: center; gap: 14px; }
.page-hd-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,146,60,.06)); border: 1px solid rgba(251,191,36,.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.page-hd-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-1); }
.page-hd-sub { font-size: .76rem; color: var(--text-3); margin-top: 3px; max-width: 380px; line-height: 1.5; }

/* Tier grid */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Tier card */
.tier-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.tier-card:hover { border-color: rgba(255,255,255,.12); transform: translateY(-2px); }
.tier-card.inactive { opacity: .65; }

.tier-card::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,.07) 0%, transparent 70%);
    pointer-events: none;
}

.tc-topbar {
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    flex-shrink: 0;
}
.tier-card.inactive .tc-topbar { background: rgba(255,255,255,.1); }

.tc-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 14px; }

.tc-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tc-name { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1rem; color: var(--text-1); }
.tc-badge { padding: 3px 9px; border-radius: 100px; font-size: .63rem; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.tc-badge.active { background: rgba(0,230,118,.1); color: var(--g); border: 1px solid rgba(0,230,118,.2); }
.tc-badge.inactive { background: rgba(255,255,255,.04); color: var(--text-3); border: 1px solid rgba(255,255,255,.08); }

.tc-thresh-wrap { display: flex; align-items: baseline; gap: 5px; }
.tc-thresh-num { font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; font-weight: 800; color: #fbbf24; line-height: 1; }
.tc-thresh-unit { font-size: .74rem; color: var(--text-3); }

.tc-rewards-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tc-rw-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 100px; font-size: .67rem; font-weight: 600;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    color: var(--text-2);
}
.tc-rw-pill .pill-pct { color: var(--text-3); font-weight: 400; }

.tc-meta-row { display: flex; gap: 14px; }
.tc-meta-item { font-size: .72rem; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.tc-meta-item i { font-size: .64rem; opacity: .7; }

.tc-actions { display: flex; gap: 8px; padding: 0 18px 16px; }
.tc-btn {
    flex: 1; padding: 8px 0;
    border-radius: 9px; font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tc-btn-edit { background: rgba(0,230,118,.08); border: 1px solid rgba(0,230,118,.2); color: var(--g); }
.tc-btn-edit:hover { background: rgba(0,230,118,.15); border-color: rgba(0,230,118,.35); }
.tc-btn-del  { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.18); color: #f87171; }
.tc-btn-del:hover  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }

/* Empty state */
.empty-state { text-align: center; padding: 70px 20px; color: var(--text-3); }
.empty-state .es-icon { font-size: 2.4rem; display: block; margin-bottom: 16px; opacity: .3; }
.empty-state p { font-size: .85rem; line-height: 1.65; }
.empty-state .es-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 10px 22px; background: var(--g); color: #000; border-radius: 10px; font-size: .84rem; font-weight: 700; cursor: pointer; border: none; box-shadow: 0 2px 12px rgba(0,230,118,.2); }
.empty-state .es-cta:hover { background: #00ff88; }

/* Shared overlay chrome (page-scoped dialogs) */
.dlg-overlay {
    position: fixed; inset: 0; z-index: 3200;
    background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.dlg-overlay.open { display: flex; animation: dlg-in .2s ease; }
@keyframes dlg-in { from{opacity:0} to{opacity:1} }

.dlg-panel {
    background: #14141e;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    width: 100%; max-width: 560px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    animation: dlg-rise .25s cubic-bezier(.34,1.3,.64,1);
}
@keyframes dlg-rise { from{transform:translateY(20px) scale(.96)} to{transform:none} }

.dlg-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.dlg-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.97rem; color:var(--text-1); }
.dlg-close {
    width:28px; height:28px; border-radius:7px;
    border:1px solid rgba(255,255,255,.07); background:transparent;
    color:var(--text-3); font-size:.75rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.dlg-close:hover { background:rgba(255,255,255,.06); color:var(--text-1); }

/* Create/Edit tier dialog (mbts-) */
.mbts-dialog.dlg-panel { max-width: 600px; overflow-y: auto; max-height: 90vh; }
.dlg-body  { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.dlg-ft    { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.ft-active-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; padding: 7px 14px 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; }
.ft-active-toggle:hover { background: rgba(255,255,255,.06); }
.ft-active-toggle:has(input:checked) { border-color: rgba(0,230,118,.3); background: rgba(0,230,118,.05); }
.ft-active-text { font-size: .82rem; font-weight: 600; color: var(--text-3); transition: color .2s; }
.ft-active-toggle:has(input:checked) .ft-active-text { color: var(--g); }

/* Form fields */
.f-group { display: flex; flex-direction: column; gap: 6px; }
.f-label { font-size: .74rem; font-weight: 600; color: var(--text-3); letter-spacing: .2px; text-transform: uppercase; }
.f-input {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px; color: var(--text-1); font-size: .85rem;
    padding: 9px 12px; outline: none; transition: border-color .15s; width: 100%;
}
.f-input:focus { border-color: rgba(0,230,118,.3); background: rgba(0,230,118,.02); }
.f-input::placeholder { color: rgba(255,255,255,.2); }
select.f-input, select.rw-type {
    background-color: #1c1c2b;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888899' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 32px !important;
}
select.f-input option, select.rw-type option {
    background-color: #1c1c2b;
    color: #e4e4f0;
}
select.f-input option:checked, select.rw-type option:checked { background-color: #252538; color: #00e676; }
select.f-input:focus { border-color: rgba(0,230,118,.3); background-color: #1e1e2e; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.f-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
}
.f-toggle-label { font-size: .84rem; color: var(--text-1); font-weight: 500; }
.f-toggle-sub   { font-size: .71rem; color: var(--text-3); margin-top: 2px; }
.toggle-sw { position:relative; width:36px; height:20px; flex-shrink:0; }
.toggle-sw input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .2s; }
.toggle-sw input:checked + .toggle-track { background:rgba(0,230,118,.22); border-color:rgba(0,230,118,.35); }
.toggle-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.35); transition:transform .2s, background .2s; pointer-events:none; }
.toggle-sw input:checked ~ .toggle-thumb { transform:translateX(16px); background:var(--g); }

/* Rewards config rows */
.rw-section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rw-section-label { font-size:.74rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; }
.rw-prob-total { font-size:.77rem; font-weight:700; }
.rw-prob-total.ok { color:var(--g); }
.rw-prob-total.err { color:#f87171; }

.rw-rows { display:flex; flex-direction:column; gap:8px; }
.rw-row-inner {
    display:flex; flex-direction:column; gap:6px;
    background: rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:10px;
}
.rw-row-line1 { display:grid; grid-template-columns:140px 90px 1fr; gap:6px; align-items:center; }
.rw-value-wrap { min-width:0; }
.rw-row-line2 { display:grid; grid-template-columns:1fr 68px 28px; gap:6px; align-items:center; }
.rw-del { width:28px; height:28px; border-radius:7px; border:1px solid rgba(239,68,68,.2); background:transparent; color:#f87171; font-size:.72rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.rw-del:hover { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.4); }
.btn-add-rw { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px dashed rgba(0,230,118,.25); border-radius:8px; background:transparent; color:var(--g); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s; margin-top:8px; }
.btn-add-rw:hover { border-color:rgba(0,230,118,.5); background:rgba(0,230,118,.04); }

/* Dialog action buttons */
.btn-cancel { padding:8px 18px; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:transparent; color:var(--text-2); font-size:.83rem; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-cancel:hover { border-color:rgba(255,255,255,.15); color:var(--text-1); }
.btn-save { padding:8px 24px; border-radius:9px; background:var(--g); border:none; color:#000; font-size:.83rem; font-weight:700; cursor:pointer; transition:all .15s; }
.btn-save:hover:not(:disabled) { background:#00ff88; }
.btn-save:disabled { opacity:.35; cursor:not-allowed; }

/* Delete confirmation dialog */
.del-dlg { max-width: 400px; }
.del-body {
    padding: 24px 24px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.del-icon-wrap {
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #f87171;
    animation: del-icon-pop .25s cubic-bezier(.34,1.56,.64,1) .05s both;
}
@keyframes del-icon-pop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.del-heading { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:800; color:var(--text-1); }
.del-sub { font-size:.83rem; color:var(--text-3); line-height:1.55; }
.del-name-chip {
    display:inline-block; padding:3px 10px; border-radius:6px;
    background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.15);
    color:#f87171; font-weight:700; font-size:.83rem; word-break:break-word;
}
.del-ft { padding:0 24px 20px; display:flex; gap:10px; }
.btn-del-confirm {
    flex:1; padding:10px; border-radius:10px;
    background:linear-gradient(135deg,#ef4444,#dc2626); border:none;
    color:#fff; font-size:.87rem; font-weight:700; cursor:pointer;
    transition:all .15s; box-shadow:0 4px 16px rgba(239,68,68,.25);
}
.btn-del-confirm:hover { box-shadow:0 6px 22px rgba(239,68,68,.45); transform:translateY(-1px); }
.btn-del-confirm:active { transform:translateY(0); }
.btn-del-cancel { flex:1; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:transparent; color:var(--text-2); font-size:.87rem; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-del-cancel:hover { border-color:rgba(255,255,255,.15); color:var(--text-1); }