:root{
  --bg:#0b0d12;
  --card:#131826;
  --card2:#101521;
  --text:#e9eefc;
  --muted:#aab6d6;
  --border:rgba(255,255,255,.08);
  --accent:#7aa2ff;
  --danger:#ff5c7a;
  --ok:#5ee39b;
  --input-bg:rgba(10,12,18,.6);
  --gradient-1:rgba(122,162,255,.18);
  --gradient-2:rgba(94,227,155,.12);
}

[data-theme="light"]{
  --bg:#f5f7fa;
  --card:#ffffff;
  --card2:#f0f2f5;
  --text:#1a1d24;
  --muted:#5a6680;
  --border:rgba(0,0,0,.10);
  --accent:#4a7cff;
  --danger:#e03e5c;
  --ok:#2aa66d;
  --input-bg:rgba(255,255,255,.9);
  --gradient-1:rgba(74,124,255,.12);
  --gradient-2:rgba(42,166,109,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 20% 0%, var(--gradient-1), transparent 55%),
              radial-gradient(900px 600px at 90% 10%, var(--gradient-2), transparent 50%),
              var(--bg);
  background-attachment: fixed;
  color:var(--text);
  transition: background-color 0.3s, color 0.3s;
}

.container{
  width:min(1100px, 92vw);
  margin: 0 auto;
}

header{
  padding: 26px 0 12px 0;
}

h1{ margin:0 0 6px 0; font-size: 26px; }
h2{ margin:0 0 12px 0; font-size: 18px; }

.subtle{ color:var(--muted); }
.small{ font-size: 12px; }

.header-row{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
}

.header-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.month-tabs{
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}

.month-tab{
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.month-tab:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.month-tab.active{
  background: rgba(122,162,255,.18);
  color: var(--text);
  font-weight: 600;
}

[data-theme="light"] .month-tab.active{
  background: rgba(74,124,255,.15);
}

/* ---------- System Toggle (Chests/SITS) ---------- */

.system-toggle-bar{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.system-toggle{
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.system-toggle-btn{
  cursor: pointer;
  padding: 12px 32px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}

.system-toggle-btn:hover{
  color: var(--text);
  background: rgba(255,255,255,.05);
}

.system-toggle-btn.active{
  background: rgba(122,162,255,.2);
  border-color: rgba(122,162,255,.5);
  color: var(--text);
}

[data-theme="light"] .system-toggle-btn.active{
  background: rgba(74,124,255,.15);
  border-color: rgba(74,124,255,.4);
}

.bar{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:12px;
  padding: 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.03);
}

.bar.bar-3col{
  grid-template-columns: 1fr 1fr 1fr;
}

.bar.bar-2col{
  grid-template-columns: 1fr 1fr;
}

.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

select, input[type="date"], input[type="number"], input[type="text"]{
  width:100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
}

input[type="date"]{
  color-scheme: dark;
}

[data-theme="light"] input[type="date"]{
  color-scheme: light;
}

select:focus, input:focus{
  border-color: rgba(122,162,255,.55);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  padding: 14px 0 24px 0;
}

.card{
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.span-2{ grid-column: span 2; }

.btn{
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(122,162,255,.55);
  background: rgba(122,162,255,.14);
  color: var(--text);
  font-weight: 600;
}

.btn:hover{ background: rgba(122,162,255,.22); }
.btn:active{ transform: translateY(1px); }

.btn-secondary{
  border-color: var(--border);
  background: rgba(255,255,255,.06);
}
.btn-secondary:hover{ background: rgba(255,255,255,.10); }

.btn-danger{
  border-color: rgba(255,92,122,.6);
  background: rgba(255,92,122,.14);
}
.btn-danger:hover{ background: rgba(255,92,122,.22); }

.btn-small{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.divider{
  height:1px;
  background: var(--border);
  margin: 14px 0;
}

.button-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.sits-theme-header{
  grid-column: span 2;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding: 8px 0 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.prize-btn{
  text-align:left;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
  color: var(--text);
}
.prize-btn:hover{ background: rgba(255,255,255,.08); }

.prize-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border: 1px solid var(--border);
}

.prize-count.has-count{
  background: rgba(94,227,155,.2);
  color: var(--ok);
  border-color: rgba(94,227,155,.4);
}

.prize-count.clickable{
  cursor: pointer;
  transition: all 0.15s;
}

.prize-count.clickable:hover{
  background: rgba(255,92,122,.25);
  color: var(--danger);
  border-color: rgba(255,92,122,.5);
  transform: scale(1.1);
}

.badge{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border:1px solid var(--border);
  color: var(--muted);
}

.badge.ok{ border-color: rgba(94,227,155,.45); color: rgba(94,227,155,.95); }
.badge.rare{ border-color: rgba(122,162,255,.55); color: rgba(122,162,255,.95); }
.badge.ultra{ border-color: rgba(255,200,102,.55); color: rgba(255,200,102,.95); }
.badge.ash{ border-color: rgba(255,255,255,.20); color: rgba(255,255,255,.75); }

.credits-quick-row{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.credits-manual-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.credits-manual-row .field{ flex: 1; }

.field-label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.key-color-buttons{
  display: flex;
  gap: 8px;
}

.key-color-btn{
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.key-color-btn:hover{
  background: rgba(255,255,255,.08);
}

.key-color-btn.bronze{
  border-color: rgba(205,127,50,.3);
}
.key-color-btn.bronze.active{
  border-color: rgba(205,127,50,.9);
  background: rgba(205,127,50,.25);
  color: #e8a850;
}

.key-color-btn.silver{
  border-color: rgba(192,192,192,.3);
}
.key-color-btn.silver.active{
  border-color: rgba(192,192,192,.9);
  background: rgba(192,192,192,.2);
  color: #e0e0e0;
}

.key-color-btn.gold{
  border-color: rgba(255,215,0,.3);
}
.key-color-btn.gold.active{
  border-color: rgba(255,215,0,.9);
  background: rgba(255,215,0,.2);
  color: #ffd700;
}

.quantity-controls{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.qty-quick-btn{
  padding: 8px 16px;
  min-width: 50px;
}

.qty-quick-btn.active{
  border-color: rgba(122,162,255,.7);
  background: rgba(122,162,255,.2);
  color: var(--text);
}

.quantity-controls input[type="number"]{
  width: 80px;
  text-align: center;
}

.ash-row{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ash-count-indicator{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ash-count-value{
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

.ash-count-label{
  font-size: 12px;
  color: var(--muted);
}

.credits-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.credits-total-indicator{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(122,162,255,.1);
  border: 1px solid rgba(122,162,255,.3);
  border-radius: 10px;
}

.credits-total-value{
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.credits-total-label{
  font-size: 11px;
  color: var(--muted);
}

.note-row{ margin-top: 12px; }

.summary{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.kpi{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.kpi .label{ color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.kpi .value{ font-size: 18px; font-weight: 700; }

/* Event Log Filters */
.event-log-filters{
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label{
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select{
  padding: 8px 12px;
  min-width: 120px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.filter-select:focus{
  border-color: rgba(122,162,255,.55);
  outline: none;
}

.table-wrap{ overflow:auto; }
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
}
.table th, .table td{
  border-bottom: 1px solid var(--border);
  padding: 10px;
  text-align:left;
  vertical-align: top;
  font-size: 13px;
}
.table th{ color: var(--muted); font-weight: 600; }

.row-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.inline{ display:flex; gap:10px; align-items:center; }

.footer{
  padding: 10px 0 28px 0;
}

.theme-toggle{
  cursor:pointer;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle:hover{ background: rgba(255,255,255,.10); }
[data-theme="light"] .theme-toggle{ background: rgba(0,0,0,.05); }
[data-theme="light"] .theme-toggle:hover{ background: rgba(0,0,0,.08); }

/* ---------- Collapsible Sections ---------- */

.collapsible-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 12px;
}

.collapsible-title{
  display: flex;
  align-items: center;
  gap: 8px;
}

.collapsible-title h2{
  margin: 0;
}

.collapse-icon{
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s;
}

.collapsible.collapsed .collapse-icon{
  transform: rotate(-90deg);
}

.collapsible-content{
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.collapsible.collapsed .collapsible-content{
  max-height: 0 !important;
  margin-top: 0;
}

/* ---------- Prize Gallery ---------- */

.prize-gallery-toggle{
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.05);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.gallery-toggle-btn{
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.gallery-toggle-btn:hover{
  color: var(--text);
}

.gallery-toggle-btn.active{
  background: rgba(122,162,255,.2);
  color: var(--text);
}

.prize-gallery{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.prize-gallery-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  width: 100px;
  flex-shrink: 0;
}

.prize-gallery-item img{
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(0,0,0,.2);
}

.prize-gallery-item .no-image{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
}

.prize-gallery-item .prize-label{
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prize-gallery-item .prize-tier{
  margin-top: 4px;
  font-size: 10px;
  padding: 2px 6px;
}

.prize-gallery-empty{
  width: 100%;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}

.prize-gallery-official{
  width: 100%;
}

.prize-gallery-official img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---------- Bulk Session Mode ---------- */

.bulk-session-toggle-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.toggle-switch{
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.toggle-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--border);
  border-radius: 26px;
  transition: all 0.3s;
}

.toggle-slider:before{
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--muted);
  border-radius: 50%;
  transition: all 0.3s;
}

.toggle-switch input:checked + .toggle-slider{
  background: rgba(122,162,255,.3);
  border-color: rgba(122,162,255,.6);
}

.toggle-switch input:checked + .toggle-slider:before{
  transform: translateX(22px);
  background: var(--accent);
}

.toggle-label{
  font-weight: 600;
  color: var(--text);
}

.bulk-session-ui{
  margin-top: 16px;
}

.bulk-session-header{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bulk-session-header .field{
  flex: 0 0 180px;
}

.bulk-input-field{
  flex: 0 0 auto !important;
}

.bulk-stepper{
  width: 140px;
}

.bulk-stepper input{
  width: 60px;
  text-align: center;
  padding: 8px 4px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.bulk-stepper input:focus{
  outline: none;
  border: none;
}

.bulk-session-stats{
  display: flex;
  gap: 16px;
  flex: 1;
}

.bulk-stat{
  padding: 12px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  min-width: 100px;
}

.bulk-stat-label{
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bulk-stat-value{
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.bulk-warning{
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255,92,122,.15);
  border: 1px solid rgba(255,92,122,.4);
  border-radius: 10px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}

.bulk-prize-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bulk-prize-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.bulk-prize-item .badge{
  flex-shrink: 0;
}

.bulk-prize-item .prize-name{
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}

.qty-stepper{
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.qty-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.qty-arrow:hover{
  background: rgba(122,162,255,.2);
}

.qty-arrow:active{
  background: rgba(122,162,255,.35);
}

.qty-down{
  border-right: 1px solid var(--border);
}

.qty-up{
  border-left: 1px solid var(--border);
}

.bulk-prize-item .prize-qty-input{
  width: 42px;
  text-align: center;
  padding: 6px 4px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.bulk-prize-item .prize-qty-input:focus{
  outline: none;
  border: none;
}

/* Hide native number input spinners in qty-stepper */
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper input[type="number"]{
  -moz-appearance: textfield;
}

.bulk-credits-section{
  margin-top: 16px;
}

.bulk-credits-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.bulk-credit-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.bulk-credit-item .credit-label{
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}

.bulk-credit-item .credit-qty-input{
  width: 42px;
  text-align: center;
  padding: 6px 4px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.bulk-credit-item .credit-qty-input:focus{
  outline: none;
  border: none;
}

.bulk-credits-custom{
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.bulk-credits-custom .field{
  flex: 0 0 auto;
}

.bulk-session-actions{
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Modal overlay */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.modal-content h3{
  margin: 0 0 16px 0;
  font-size: 18px;
}

.bulk-confirm-summary{
  margin-bottom: 20px;
}

.bulk-confirm-summary .confirm-row{
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.bulk-confirm-summary .confirm-row:last-child{
  border-bottom: none;
}

.bulk-confirm-summary .confirm-label{
  color: var(--muted);
}

.bulk-confirm-summary .confirm-value{
  font-weight: 600;
}

.bulk-confirm-summary .confirm-section{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.bulk-confirm-summary .confirm-section-title{
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.bulk-confirm-summary .confirm-item{
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}

.modal-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 900px){
  .bar{ grid-template-columns: 1fr 1fr; }
  .bar.bar-3col{ grid-template-columns: 1fr 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: span 1; }
  .button-grid{ grid-template-columns: 1fr; }
  .header-row{ flex-direction: column; }
  .header-actions{ justify-content:flex-start; }
  .credits-row{ flex-direction: column; align-items: stretch; }
  .month-tabs{ flex-wrap: wrap; }
  .bulk-session-header{ flex-direction: column; }
  .bulk-session-stats{ width: 100%; }
  .bulk-credits-custom{ flex-wrap: wrap; }
  .bulk-prize-list{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .bulk-prize-list{ grid-template-columns: 1fr; }
}

/* Cloud Sync Styles */
.cloud-sync-content{
  margin-bottom: 16px;
}

.cloud-sync-content h4{
  margin: 16px 0 8px 0;
  font-size: 14px;
}

.cloud-sync-content ol{
  margin: 0;
  padding-left: 20px;
}

.cloud-sync-content ol li{
  margin: 4px 0;
}

.cloud-sync-content a{
  color: var(--accent);
  text-decoration: none;
}

.cloud-sync-content a:hover{
  text-decoration: underline;
}

.cloud-sync-status{
  margin-bottom: 16px;
  padding: 12px;
  background: var(--card2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.cloud-sync-status.success{
  border-color: var(--ok);
  background: rgba(94,227,155,.1);
}

.cloud-sync-status.error{
  border-color: var(--danger);
  background: rgba(255,92,122,.1);
}

.cloud-sync-actions{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.cloud-sync-help{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cloud-sync-help ul{
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.cloud-sync-help li{
  margin: 4px 0;
}

/* Hamburger Menu & Dropdown */
.dropdown-menu-wrapper{
  position: relative;
}

.menu-toggle{
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}

.menu-toggle:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--accent);
}

.hamburger-icon{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}

.hamburger-icon span{
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

.menu-toggle:hover .hamburger-icon span{
  background: var(--accent);
}

.dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  z-index: 100;
  overflow: hidden;
}

.dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

.dropdown-item:hover{
  background: rgba(255,255,255,.06);
}

.dropdown-item-danger{
  color: var(--danger);
}

.dropdown-item-danger:hover{
  background: rgba(255,92,122,.1);
}

.dropdown-icon{
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.dropdown-divider{
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ---------- Embed Mode (for browser extension iframe) ---------- */

.embed-mode {
  background: var(--bg);
  min-height: auto;
  font-size: 13px;
}

.embed-mode .container {
  width: 100%;
  max-width: 100%;
  padding: 0 10px;
}

.embed-mode header {
  padding: 6px 0 4px 0;
}

.embed-mode .system-toggle-bar {
  margin-bottom: 6px;
}

.embed-mode .system-toggle {
  gap: 0;
}

.embed-mode .system-toggle-btn {
  padding: 6px 16px;
  font-size: 12px;
}

.embed-mode .grid {
  display: block;
}

.embed-mode .card {
  margin-bottom: 0;
  padding: 12px;
  border-radius: 6px;
}

.embed-mode .card h2 {
  font-size: 13px;
  margin-bottom: 6px;
}

.embed-mode .subtle {
  font-size: 10px;
  margin-bottom: 6px;
}

.embed-mode .bulk-session-toggle-row {
  padding: 6px 0;
  font-size: 12px;
}

.embed-mode .toggle-label {
  font-size: 12px;
}

.embed-mode .toggle-switch {
  transform: scale(0.85);
}

.embed-mode .quick-buttons {
  gap: 6px;
}

.embed-mode .quick-btn {
  padding: 6px 10px;
  font-size: 11px;
  min-width: auto;
}

.embed-mode .field {
  margin-bottom: 8px;
}

.embed-mode .field label {
  font-size: 10px;
  margin-bottom: 3px;
}

.embed-mode input,
.embed-mode select {
  padding: 6px 8px;
  font-size: 12px;
}

.embed-mode .btn {
  padding: 6px 12px;
  font-size: 11px;
}

.embed-mode .key-color-btn {
  padding: 4px 10px;
  font-size: 11px;
}

.embed-mode .qty-quick-btn {
  padding: 4px 8px;
  font-size: 11px;
}

.embed-mode .credit-quick-btn {
  padding: 4px 8px;
  font-size: 10px;
}

.embed-mode .qty-stepper {
  transform: scale(0.9);
}

.embed-mode .bulk-session-ui {
  font-size: 12px;
}

.embed-mode .bulk-session-header {
  gap: 8px;
}

.embed-mode .bulk-stats {
  font-size: 11px;
  padding: 6px;
}

.embed-mode .bulk-prize-list {
  max-height: 180px;
  overflow-y: auto;
}

.embed-mode .bulk-prize-item {
  padding: 4px 6px;
  font-size: 11px;
}

.embed-mode .bulk-credits-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.embed-mode .bulk-credits-section h4 {
  font-size: 11px;
  margin-bottom: 6px;
}

.embed-mode .bulk-credits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.embed-mode .bulk-credits-grid .bulk-prize-item {
  flex: 0 0 auto;
  min-width: 90px;
}

.embed-mode .bulk-custom-credits {
  margin-top: 8px;
  gap: 6px;
}

.embed-mode .bulk-custom-credits input {
  width: 70px;
  padding: 4px 6px;
  font-size: 11px;
}

.embed-sync-info {
  margin-bottom: 12px;
}

.sync-info-banner {
  background: linear-gradient(135deg, rgba(122, 162, 255, 0.15) 0%, rgba(94, 227, 155, 0.1) 100%);
  border: 1px solid rgba(122, 162, 255, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}

.sync-info-banner strong {
  color: var(--accent);
}

.embed-full-site-link {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.embed-full-site-link a {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.embed-full-site-link a:hover {
  opacity: 0.8;
  text-decoration: underline;
}