/* Hinatoro v0.7.30-dev — shared giveaway workspace design system. VISUAL ONLY: scoped to Pick Your Spots and Straight Fill Claims. No selectors alter hidden states, state ownership, form names, or sync logic. */ #appShell{ --gw-purple:#ad95f6;--gw-teal:#4bd5b6;--gw-blue:#7ab9fa; --gw-amber:#f0bd70;--gw-ink:#eef2fc;--gw-panel:#121a27; --gw-border:#2e3a50;--gw-subtle:#a5b2c6; } /* Shared headline and secondary description, matching the newest tools. */ #appShell > .sf-page-heading, #appShell #pickPreview .pick-heading{margin-bottom:4px} #appShell > .sf-page-heading h2, #appShell #pickPreview .pick-heading h2{font-weight:750!important;letter-spacing:-.025em!important;color:var(--text,#edf1fa);} #appShell #pickPreview .pick-heading p, #appShell > .sf-page-heading p{color:var(--gw-subtle);line-height:1.6} /* Giveaway setup: a legible control strip, not four orphaned inputs. */ #appShell #claims .sf-toolbar, #appShell #pickPreview .pick-toolbar{ position:relative;gap:12px;padding:16px 17px 18px!important; background:linear-gradient(125deg,rgba(169,143,246,.08),transparent 52%),var(--gw-panel)!important; border:1px solid var(--gw-border)!important;border-radius:15px!important; box-shadow:inset 0 2px 0 rgba(173,149,246,.65),0 6px 24px rgba(0,0,0,.09); } #appShell #claims .sf-toolbar::before, #appShell #pickPreview .pick-toolbar::before{ content:'GIVEAWAY SETTINGS';grid-column:1/-1;display:block;color:var(--gw-purple); font-size:10px;font-weight:800;line-height:1;letter-spacing:.115em; margin:1px 0 2px; } #appShell #claims .sf-toolbar>label, #appShell #pickPreview .pick-toolbar>label{color:#cbd6e8!important;font-size:11px!important;font-weight:700;letter-spacing:.01em} #appShell #claims .sf-toolbar input, #appShell #pickPreview .pick-toolbar input, #appShell #pickPreview .pick-filters select, #appShell #pickPreview .pick-filters input, #appShell #pickPreview .pick-panel input:not([type=checkbox]), #appShell #pickPreview .pick-panel textarea{ border-color:#35435a!important;background:#0c1420!important;color:#f2f5ff!important; border-radius:9px!important;transition:border-color .15s ease,box-shadow .15s ease; } #appShell #claims .sf-toolbar input:focus, #appShell #pickPreview .pick-toolbar input:focus, #appShell #pickPreview .pick-panel input:focus, #appShell #pickPreview .pick-panel select:focus, #appShell #pickPreview .pick-panel textarea:focus, #appShell #claims #raw:focus{ outline:none!important;border-color:#ab95ef!important; box-shadow:0 0 0 3px rgba(173,149,246,.17)!important; } #appShell #claims .sf-toolbar .pick-danger, #appShell #pickPreview .pick-toolbar .pick-danger{ background:rgba(236,113,143,.06)!important;border:1px solid rgba(241,131,158,.29)!important; color:#f6b1c2!important;border-radius:9px!important; transition:background .15s ease,border-color .15s ease; } #appShell #claims .sf-toolbar .pick-danger:hover, #appShell #pickPreview .pick-toolbar .pick-danger:hover{background:rgba(236,113,143,.13)!important;border-color:#e58da7!important} /* Five shared metric cards. Values remain bound to existing app IDs. */ #appShell #claims .sf-overview, #appShell #pickPreview .pick-overview{gap:12px!important} #appShell #claims .sf-overview>div, #appShell #pickPreview .pick-overview>div{ --gw-metric:var(--gw-purple); position:relative;overflow:hidden;justify-content:center; min-height:130px!important;padding:16px!important;gap:7px!important; 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); } #appShell #claims .sf-overview .pick-overview-progress, #appShell #pickPreview .pick-overview .pick-overview-progress{--gw-metric:var(--gw-purple);} #appShell #claims .sf-overview .pick-overview-available, #appShell #pickPreview .pick-overview .pick-overview-available{--gw-metric:var(--gw-blue)} #appShell #claims .sf-overview .pick-overview-claimed, #appShell #pickPreview .pick-overview .pick-overview-claimed{--gw-metric:var(--gw-purple)} #appShell #claims .sf-overview .pick-overview-paid, #appShell #pickPreview .pick-overview .pick-overview-paid{--gw-metric:var(--gw-teal)} #appShell #claims .sf-overview .pick-overview-unpaid, #appShell #pickPreview .pick-overview .pick-overview-unpaid{--gw-metric:var(--gw-amber)} #appShell #claims .sf-overview>div:not(.pick-overview-progress)::before, #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)::before{ content:'';display:block;width:34px;height:34px;flex:0 0 34px;margin-bottom:2px; background-color:color-mix(in srgb,var(--gw-metric) 12%,#111925); background-image:var(--gw-icon);background-position:center;background-size:19px;background-repeat:no-repeat; border:1px solid color-mix(in srgb,var(--gw-metric) 28%,transparent); border-radius:10px;box-sizing:border-box; } #appShell #claims .sf-overview .pick-overview-progress, #appShell #pickPreview .pick-overview .pick-overview-progress{gap:11px!important} #appShell #claims .sf-overview .pick-progress-head, #appShell #pickPreview .pick-overview .pick-progress-head{color:var(--gw-purple)!important;font-weight:800;letter-spacing:.085em!important} #appShell #claims .sf-overview .pick-overview-progress>strong, #appShell #pickPreview .pick-overview .pick-overview-progress>strong{ font-size:20px!important;line-height:1.25;letter-spacing:-.025em;color:#f4f3ff!important; } #appShell #claims .sf-overview>div:not(.pick-overview-progress)>strong, #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)>strong{ color:var(--gw-metric)!important;font-size:clamp(20px,1.8vw,26px)!important; line-height:1.16!important;font-weight:800!important;letter-spacing:-.025em; font-variant-numeric:tabular-nums;overflow-wrap:anywhere; } #appShell #claims .sf-overview>div>small, #appShell #pickPreview .pick-overview>div>small{ color:#bac7d9!important;font-size:11px!important;font-weight:650;line-height:1.45; } #appShell #claims .sf-overview .pick-progress, #appShell #pickPreview .pick-overview .pick-progress{ margin-top:3px;height:9px!important;border-radius:999px;background:#293449!important; } #appShell #claims .sf-overview .pick-progress span, #appShell #pickPreview .pick-overview .pick-progress span{ background:linear-gradient(90deg,#967ae9,#55cdb9)!important;border-radius:999px; } #appShell #claims .sf-overview .snapshot-icon-button, #appShell #pickPreview .pick-overview .snapshot-icon-button{border-radius:9px!important} /* Section panels feel cohesive with statistics workspace, but retain every control. */ #appShell #pickPreview .pick-panel, #appShell #claims .desktop-editor-card{ background:linear-gradient(150deg,rgba(160,144,236,.035),transparent 46%),#121a27!important; border:1px solid var(--gw-border)!important;border-radius:15px!important; box-shadow:0 5px 20px rgba(0,0,0,.07); } #appShell #pickPreview .pick-panel{padding:19px 20px!important} #appShell #pickPreview .pick-panel h3, #appShell #claims .desktop-card-heading h2{color:#f0f3fc!important;font-size:18px!important;font-weight:750;letter-spacing:-.015em;line-height:1.35} #appShell #pickPreview .pick-panel h3::before, #appShell #claims .desktop-card-heading h2::before{ content:'';display:inline-block;width:28px;height:28px;margin-right:9px;vertical-align:-8px; background-color:rgba(170,149,244,.11); background-image:var(--gw-section-icon);background-repeat:no-repeat;background-position:center;background-size:17px; border:1px solid rgba(170,149,244,.2);border-radius:9px;box-sizing:border-box; } #appShell #pickPreview .pick-panel p, #appShell #claims .desktop-card-heading p{color:#acb8ce!important;line-height:1.65} #appShell #pickPreview .pick-panel-title, #appShell #pickPreview .pick-panel-heading{margin-bottom:10px} #appShell #pickPreview .pick-layout{gap:16px} #appShell #pickPreview .pick-side{gap:16px} #appShell #pickPreview .pick-filters{gap:9px} #appShell #pickPreview .pick-legend{padding:8px 0 5px;margin-top:10px;margin-bottom:10px} #appShell #pickPreview .pick-container .pick-cell{ border-radius:7px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease; } #appShell #pickPreview .pick-container .pick-cell:hover{border-color:#9d8bda;box-shadow:0 0 0 1px rgba(166,142,238,.16)} #appShell #pickPreview .pick-container .pick-cell.selected{box-shadow:0 0 0 2px rgba(178,153,255,.24)} #appShell #pickPreview .pick-participant-card{ background:#151f2f!important;border:1px solid #35435b!important;border-radius:12px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } #appShell #pickPreview .pick-tags-output, #appShell #pickPreview .pick-facebook-panel textarea{ background:#0c1420!important;border:1px solid #36435a!important;border-radius:10px!important; } #appShell #pickPreview .pick-live-label{ background:rgba(161,136,235,.12);border:1px solid rgba(161,136,235,.26); color:#c7b6ff;border-radius:999px;padding:6px 10px; } #appShell #pickPreview .pick-container button.pick-primary, #appShell #claims #parse{ background:#a68bef!important;border-color:#a68bef!important;color:#171424!important; border-radius:9px!important;font-weight:800!important;box-shadow:0 4px 13px rgba(143,111,219,.12); } #appShell #pickPreview .pick-container button.pick-primary:hover, #appShell #claims #parse:hover{background:#baa3ff!important;border-color:#baa3ff!important} #appShell #claims .desktop-editor-card{padding:20px!important} #appShell #claims .desktop-card-heading h2{margin-bottom:3px} #appShell #claims #raw{border-radius:10px;background:#0c1420!important;border:1px solid #36435a!important} #appShell #claims .claims-help{color:#aebbd0} #appShell #claims .claims-actions{gap:10px} /* LIGHT THEME: override legacy !important selectors only within these two tools. */ body.light #appShell{ --gw-ink:#202b44;--gw-panel:#fff;--gw-border:#cdd8e9;--gw-subtle:#596a82; --gw-purple:#7554cc;--gw-teal:#168b70;--gw-blue:#286fab;--gw-amber:#a96813; } body.light #appShell #claims .sf-toolbar, body.light #appShell #pickPreview .pick-toolbar{ background:linear-gradient(126deg,rgba(129,101,216,.055),transparent 54%),#fff!important; border-color:#d7ddec!important;box-shadow:inset 0 2px 0 #9776de,0 6px 20px rgba(39,48,72,.045); } body.light #appShell #claims .sf-toolbar>label, body.light #appShell #pickPreview .pick-toolbar>label{color:#40516c!important} body.light #appShell #claims .sf-toolbar input, body.light #appShell #pickPreview .pick-toolbar input, body.light #appShell #pickPreview .pick-panel input:not([type=checkbox]), body.light #appShell #pickPreview .pick-panel textarea, body.light #appShell #pickPreview .pick-filters select{ background:#fff!important;color:#1d2b45!important;border-color:#c9d4e6!important; } body.light #appShell #claims .sf-overview>div, body.light #appShell #pickPreview .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); } body.light #appShell #claims .sf-overview>div:not(.pick-overview-progress)::before, body.light #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)::before{ background-color:color-mix(in srgb,var(--gw-metric) 10%,#fff); border-color:color-mix(in srgb,var(--gw-metric) 24%,#d9e2ed); } body.light #appShell #claims .sf-overview .pick-overview-progress>strong, body.light #appShell #pickPreview .pick-overview .pick-overview-progress>strong{color:#29344c!important} body.light #appShell #claims .sf-overview>div:not(.pick-overview-progress)>strong, body.light #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)>strong{color:var(--gw-metric)!important} body.light #appShell #claims .sf-overview>div>small, body.light #appShell #pickPreview .pick-overview>div>small{color:#52637a!important} body.light #appShell #claims .sf-overview .pick-progress, body.light #appShell #pickPreview .pick-overview .pick-progress{background:#e4e9f3!important} body.light #appShell #pickPreview .pick-panel, body.light #appShell #claims .desktop-editor-card{ background:linear-gradient(155deg,rgba(132,110,198,.025),transparent 46%),#fff!important; border-color:#d4dfed!important;box-shadow:0 6px 20px rgba(39,48,72,.045); } body.light #appShell #pickPreview .pick-panel h3, body.light #appShell #claims .desktop-card-heading h2{color:#1d2a44!important} body.light #appShell #pickPreview .pick-panel p, body.light #appShell #claims .desktop-card-heading p{color:#54657d!important} body.light #appShell #pickPreview .pick-participant-card{ background:#fbfcff!important;border-color:#d5dfef!important; } body.light #appShell #pickPreview .pick-tags-output, body.light #appShell #pickPreview .pick-facebook-panel textarea, body.light #appShell #claims #raw{ background:#f8faff!important;color:#26334d!important;border-color:#cbd6e5!important; } body.light #appShell #claims .sf-toolbar .pick-danger, body.light #appShell #pickPreview .pick-toolbar .pick-danger{background:#fff4f6!important;color:#a73b56!important;border-color:#eac1cc!important} body.light #appShell #pickPreview .pick-live-label{background:#efeaff;color:#6543ad;border-color:#d7c9f5} body.light #appShell #pickPreview .pick-container button.pick-primary, body.light #appShell #claims #parse{background:#7754d1!important;color:#fff!important;border-color:#7754d1!important} @media(max-width:1050px){ #appShell #claims .sf-overview>div,#appShell #pickPreview .pick-overview>div{min-height:112px!important} } @media(max-width:760px){ #appShell #claims .sf-toolbar,#appShell #pickPreview .pick-toolbar{padding:14px!important;gap:10px} #appShell #claims .sf-overview>div,#appShell #pickPreview .pick-overview>div{ min-height:105px!important;padding:13px!important;gap:5px!important } #appShell #claims .sf-overview>div:not(.pick-overview-progress)::before, #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)::before{width:29px;height:29px;flex-basis:29px;background-size:17px} #appShell #claims .sf-overview>div:not(.pick-overview-progress)>strong, #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)>strong{font-size:22px!important} #appShell #pickPreview .pick-panel{padding:15px!important} #appShell #claims .desktop-editor-card{padding:16px!important} } @media(max-width:380px){ #appShell #claims .sf-overview>div:not(.pick-overview-progress)>strong, #appShell #pickPreview .pick-overview>div:not(.pick-overview-progress)>strong{font-size:19px!important} #appShell #claims .sf-toolbar::before,#appShell #pickPreview .pick-toolbar::before{font-size:10px} } @media(prefers-reduced-motion:reduce){ #appShell #pickPreview .pick-cell,#appShell #claims .sf-toolbar input, #appShell #pickPreview .pick-toolbar input{transition:none!important} } /* Self-contained inline SVG icons; no font dependency or external requests. */ #appShell #claims .pick-overview-available,#appShell #pickPreview .pick-overview-available{--gw-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237ab9fa%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M17.5%2013v8m-4-4h8%22%2F%3E%3C%2Fsvg%3E");} #appShell #claims .pick-overview-claimed,#appShell #pickPreview .pick-overview-claimed{--gw-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M7%204h10%22%2F%3E%3Cpath%20d%3D%22M16%2015h2%22%2F%3E%3C%2Fsvg%3E");} #appShell #claims .pick-overview-paid,#appShell #pickPreview .pick-overview-paid{--gw-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234bd5b6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%202.5%202.5L16.5%209%22%2F%3E%3C%2Fsvg%3E");} #appShell #claims .pick-overview-unpaid,#appShell #pickPreview .pick-overview-unpaid{--gw-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f0bd70%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l4%202%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-layout>.pick-panel .pick-panel-title h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-side>.pick-panel:first-child h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13%202-9%2012h7l-1%208%2010-13h-7l1-7Z%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-facebook-panel h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2212%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203h10a2%202%200%200%201%202%202v13M7%2010h6m-6%204h6%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-participants-panel h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-2a6%206%200%200%201%2012%200v2M17%205a3%203%200%200%201%200%206m1%205a5%205%200%200%201%203%205%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-tags-panel h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M15%209v6a2.5%202.5%200%200%200%205%200v-3%22%2F%3E%3C%2Fsvg%3E");} #appShell #pickPreview .pick-backups h3{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h12l4%204v14H3V3h2Zm2%200v7h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E");} #appShell #claims .desktop-card-heading h2{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%208h6m-6%204h6m-6%204h4%22%2F%3E%3C%2Fsvg%3E");} /* Straight Fill's secondary tabs use the same refined panel surfaces. */ #appShell #participants>.card, #appShell #spots>.card, #appShell #settings>.card{ border:1px solid var(--gw-border)!important;border-radius:15px!important; background:linear-gradient(155deg,rgba(171,150,240,.045),transparent 45%),#121a27!important; box-shadow:0 6px 24px rgba(0,0,0,.08);padding:21px!important; } #appShell #participants>.card h2, #appShell #spots>.card h2, #appShell #settings>.card h2{ color:#f1f4fc!important;font-size:18px!important;font-weight:750!important; letter-spacing:-.012em;line-height:1.35; } #appShell #participants>.card h2::before, #appShell #spots>.card h2::before, #appShell #settings>.card h2::before{ content:'';display:inline-block;width:28px;height:28px;margin-right:9px;vertical-align:-8px; background-color:rgba(170,149,244,.11);background-image:var(--gw-section-icon); background-repeat:no-repeat;background-position:center;background-size:17px; border:1px solid rgba(170,149,244,.2);border-radius:9px;box-sizing:border-box; } #appShell #participants .participant-summary{gap:12px;margin:18px 0 17px} #appShell #participants .participant-stat{ --gw-metric:var(--gw-purple);border:1px solid color-mix(in srgb,var(--gw-metric) 27%,#35435b); border-top:2px solid var(--gw-metric);border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--gw-metric) 9%,#121a27),#121a27 70%); padding:16px 17px;gap:5px; } #appShell #participants .participant-stat-paid{--gw-metric:var(--gw-teal)} #appShell #participants .participant-stat-unpaid{--gw-metric:var(--gw-amber)} #appShell #participants .participant-stat strong{color:var(--gw-metric)!important;font-variant-numeric:tabular-nums;letter-spacing:-.025em} #appShell #participants .participant-stat>span{color:#c6d1e4;font-size:12px} #appShell #participants .participant-stat small{color:#9daec6} #appShell #participants .participant-filter{border-color:#39455b;background:#0d1420} #appShell #participants .participant-filter button.active{background:#8062de!important;color:#fff!important} #appShell #participants .wraptext, #appShell #spots .spotrows{ background:#0d1420;border:1px solid #334158;border-radius:11px; } #appShell #participants .wraptext{padding:14px;min-height:60px} #appShell #settings .backup-notice{border-radius:13px} #appShell #settings .backup-notice strong{font-size:14px} #appShell #settings .backup-notice p{line-height:1.6} body.light #appShell #participants>.card, body.light #appShell #spots>.card, body.light #appShell #settings>.card{ background:linear-gradient(155deg,rgba(132,110,198,.03),transparent 45%),#fff!important; border-color:#d4dfed!important;box-shadow:0 6px 20px rgba(39,48,72,.045); } body.light #appShell #participants>.card h2, body.light #appShell #spots>.card h2, body.light #appShell #settings>.card h2{color:#1d2a44!important} body.light #appShell #participants .participant-stat{ background:linear-gradient(145deg,color-mix(in srgb,var(--gw-metric) 7%,#fff),#fff 66%)!important; border-color:color-mix(in srgb,var(--gw-metric) 27%,#dce4ee)!important; border-top-color:var(--gw-metric)!important; } body.light #appShell #participants .participant-stat strong{color:var(--gw-metric)!important} body.light #appShell #participants .participant-stat>span, body.light #appShell #participants .participant-stat small{color:#52647e} body.light #appShell #participants .participant-filter{background:#edf1f8;border-color:#d0dbe9} body.light #appShell #participants .wraptext, body.light #appShell #spots .spotrows{background:#f8faff;border-color:#d4deed;color:#243450} body.light #appShell #claims .sf-overview .pick-progress-head strong, body.light #appShell #pickPreview .pick-overview .pick-progress-head strong{color:#6745bb!important} /* Mobile: give Deal fields a complete row and give the destructive action a full-width target. Also protects small-screen text from being truncated. */ @media(max-width:760px){ #appShell #pickPreview .pick-toolbar>label.pick-deal-group, #appShell #claims .sf-toolbar>label.pick-deal-group{grid-column:1/-1!important} #appShell #pickPreview .pick-toolbar>#pickNewGiveaway, #appShell #claims .sf-toolbar>#sfNewGiveaway{ grid-column:1/-1!important;width:100%;min-height:42px; } #appShell #pickPreview .pick-toolbar .pick-deal-pair, #appShell #claims .sf-toolbar .pick-deal-pair{width:100%;min-width:0} #appShell #pickPreview .pick-toolbar .pick-deal-pair>input, #appShell #claims .sf-toolbar .pick-deal-pair>input{min-width:0;flex:1 1 0} #appShell #participants>.card,#appShell #spots>.card,#appShell #settings>.card{padding:16px!important} #appShell #participants .participant-stat{padding:12px!important} } /* Secondary Straight Fill section icons */ #appShell #participants>.card:first-child h2{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-2a6%206%200%200%201%2012%200v2M17%205a3%203%200%200%201%200%206m1%205a5%205%200%200%201%203%205%22%2F%3E%3C%2Fsvg%3E");} #appShell #participants>.card:nth-child(2) h2{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M15%209v6a2.5%202.5%200%200%200%205%200v-3%22%2F%3E%3C%2Fsvg%3E");} #appShell #spots>.card h2{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%208h6m-6%204h6m-6%204h4%22%2F%3E%3C%2Fsvg%3E");} #appShell #settings>.card h2{--gw-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ad95f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h12l4%204v14H3V3h2Zm2%200v7h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E");}