/* Hinatoro v0.7.43-dev — Mini/Main visual component parity.
   Reuse the actual Pick Your Spots design tokens and metric-card components.
   Mini draft, data schema, payment calculation and action handlers are unchanged. */

/* The main Settings band has a lavender top highlight, subtle gradient,
   prominent section label and matching field geometry. */
#appShell #pickPreview .mini-workspace .mini-settings-block>.mini-settings-toolbar.pick-toolbar {
  background:linear-gradient(125deg,rgba(169,143,246,.08),transparent 52%),var(--gw-panel,#121a27)!important;
  border:1px solid var(--gw-border,#2e3a50)!important;
  border-radius:15px!important;
  box-shadow:inset 0 2px 0 rgba(173,149,246,.65),0 6px 24px rgba(0,0,0,.09)!important;
  gap:12px!important;
  padding:16px 17px 18px!important;
}
#appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar::before {
  content:'GIVEAWAY SETTINGS'!important;
  grid-column:1/-1;
  display:block!important;
  color:var(--gw-purple,#ad95f6)!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.115em!important;
  margin:1px 0 2px!important;
}
#appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar>label {
  color:#cbd6e8!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}
#appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar input {
  border:1px solid #35435a!important;
  border-radius:9px!important;
  background:#0c1420!important;
  color:#f2f5ff!important;
  height:43px;
}
#appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar input[readonly] {
  color:#f2f5ff!important;
  -webkit-text-fill-color:#f2f5ff!important;
  opacity:1!important;
  cursor:default;
}
#appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar input:focus-visible {
  outline:none!important;
  border-color:#ab95ef!important;
  box-shadow:0 0 0 3px rgba(173,149,246,.17)!important;
}
/* Preserve mockup's compact second row and make it visually cohesive. */
#appShell #pickPreview .mini-workspace .mini-prizes-compact {
  background:linear-gradient(120deg,rgba(169,143,246,.045),transparent 68%),var(--gw-panel,#121a27)!important;
  border:1px solid var(--gw-border,#2e3a50)!important;
  border-radius:13px!important;
  box-shadow:0 4px 16px rgba(0,0,0,.045)!important;
}
/* Five metric cards adopt the *same DOM classes* and CSS variables as Main. */
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview {
  display:grid!important;
  grid-template-columns:minmax(230px,1.65fr) repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%;
  min-width:0;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div {
  min-width:0;
  min-height:130px!important;
  padding:16px!important;
  gap:7px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--gw-metric) 26%,var(--gw-border))!important;
  border-top:2px solid var(--gw-metric)!important;
  border-radius:14px!important;
  background:linear-gradient(142deg,color-mix(in srgb,var(--gw-metric) 8%,#111925),#111925 67%)!important;
  box-shadow:0 4px 20px rgba(2,8,17,.09)!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-progress {--gw-metric:var(--gw-purple);}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-available {--gw-metric:var(--gw-blue);}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-claimed {--gw-metric:var(--gw-purple);}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-paid {--gw-metric:var(--gw-teal);}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-unpaid {--gw-metric:var(--gw-amber);}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div:not(.pick-overview-progress)::before {
  content:'';
  display:block;
  width:34px;
  height:34px;
  flex:0 0 34px;
  margin-bottom:2px;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--gw-metric) 28%,transparent);
  background-color:color-mix(in srgb,var(--gw-metric) 12%,#111925);
  background-image:var(--gw-icon);
  background-repeat:no-repeat;
  background-position:center;
  background-size:19px;
  border-radius:10px;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-progress-head {
  color:var(--gw-purple)!important;
  font-weight:800!important;
  letter-spacing:.085em!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-progress>strong {
  color:#f4f3ff!important;
  font-size:20px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div:not(.pick-overview-progress)>strong {
  color:var(--gw-metric)!important;
  font-size:clamp(20px,1.8vw,26px)!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  line-height:1.16!important;
  font-variant-numeric:tabular-nums;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div>small {
  color:#bac7d9!important;
  font-size:11px!important;
  font-weight:650!important;
  letter-spacing:0!important;
  line-height:1.45!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .mini-progress.pick-progress {
  margin-top:3px!important;
  height:9px!important;
  background:#293449!important;
  border-radius:999px!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .mini-progress.pick-progress span {
  height:100%;
  border-radius:999px!important;
  background:linear-gradient(90deg,#967ae9,#55cdb9)!important;
}
#appShell #pickPreview .mini-workspace .mini-stats.pick-overview .mini-progress-percent {
  font-size:16px!important;
  color:var(--gw-purple)!important;
}
/* Explicit light-theme parity, including read-only fields. */
body.light #appShell #pickPreview .mini-workspace .mini-settings-block>.mini-settings-toolbar.pick-toolbar,
body.light #appShell #pickPreview .mini-workspace .mini-prizes-compact {
  background:linear-gradient(125deg,rgba(144,115,217,.07),transparent 52%),#fff!important;
  border-color:#cdd8e9!important;
}
body.light #appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar>label {color:#40516c!important;}
body.light #appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar input,
body.light #appShell #pickPreview .mini-workspace .mini-settings-toolbar.pick-toolbar input[readonly] {
  color:#1d2b45!important;
  -webkit-text-fill-color:#1d2b45!important;
  background:#fff!important;
  border-color:#c9d4e6!important;
}
body.light #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div {
  background:linear-gradient(145deg,color-mix(in srgb,var(--gw-metric) 8%,#fff),#fff 66%)!important;
  border-color:color-mix(in srgb,var(--gw-metric) 27%,#dce3ee)!important;
  border-top-color:var(--gw-metric)!important;
  box-shadow:0 5px 20px rgba(39,48,72,.045)!important;
}
body.light #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div:not(.pick-overview-progress)::before {
  background-color:color-mix(in srgb,var(--gw-metric) 10%,#fff)!important;
  border-color:color-mix(in srgb,var(--gw-metric) 24%,#d9e2ed)!important;
}
body.light #appShell #pickPreview .mini-workspace .mini-stats.pick-overview .pick-overview-progress>strong {color:#29344c!important;}
body.light #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div>small {color:#52637a!important;}
body.light #appShell #pickPreview .mini-workspace .mini-stats.pick-overview .mini-progress.pick-progress {background:#e4e9f3!important;}
/* Layout scales exactly like Main, while retaining the Mini's five fields. */
@media(max-width:1100px){
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview {grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>.pick-overview-progress {grid-column:1/-1;}
}
@media(max-width:760px){
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div {min-height:105px!important;padding:13px!important;gap:5px!important;}
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div:not(.pick-overview-progress)::before {width:29px;height:29px;flex-basis:29px;background-size:17px;}
}
@media(max-width:390px){
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview>div:not(.pick-overview-progress)>strong {font-size:19px!important;}
}
@media(prefers-reduced-motion:reduce){
  #appShell #pickPreview .mini-workspace .mini-stats.pick-overview .mini-progress.pick-progress span {transition:none!important;}
}