/* ==========================================================================
   Web-Slinger theme for the main app: looks only, no logic.
   One shared file for every page (app, login, signup, admin, activity, profile).
   Remove the <link> to this file to get the original look back.
   ========================================================================== */
:root{
  --bg:#070A22; --surface:#0E1548; --surface2:#080C33; --border:#1B2A80;
  --text:#F4F6FF; --muted:#B7C4F5; --accent:#D0202A; --accent-h:#E23A3A;
  --green:#37D39A; --amber:#FFD23F; --radius:14px;
  --glass:rgba(14,21,72,.92); --glass-bd:rgba(157,180,255,.3);
  --ink:#04061A; --blue:#2E6BFF; --yellow:#FFD23F;
}
html{background:#070A22}
body{font-family:'Nunito',system-ui,sans-serif!important;color:var(--text);background:linear-gradient(180deg,#060821 0%,#0B1140 55%,#151B57 100%)!important;min-height:100vh}
/* atmosphere: halftone dots + a big web (top-right) + the city skyline (bottom) */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cpath d=%22M100 100L200 100M100 100L186.6 150M100 100L150 186.6M100 100L100 200M100 100L50 186.6M100 100L13.4 150M100 100L0 100M100 100L13.4 50M100 100L50 13.4M100 100L100 0M100 100L150 13.4M100 100L186.6 50M116 100Q113.4 103.6 113.9 108Q109.8 109.8 108 113.9Q103.6 113.4 100 116Q96.4 113.4 92 113.9Q90.2 109.8 86.1 108Q86.6 103.6 84 100Q86.6 96.4 86.1 92Q90.2 90.2 92 86.1Q96.4 86.6 100 84Q103.6 86.6 108 86.1Q109.8 90.2 113.9 92Q113.4 96.4 116 100M134 100Q128.6 107.7 129.4 117Q120.9 120.9 117 129.4Q107.7 128.6 100 134Q92.3 128.6 83 129.4Q79.1 120.9 70.6 117Q71.4 107.7 66 100Q71.4 92.3 70.6 83Q79.1 79.1 83 70.6Q92.3 71.4 100 66Q107.7 71.4 117 70.6Q120.9 79.1 129.4 83Q128.6 92.3 134 100M152 100Q143.7 111.7 145 126Q132 132 126 145Q111.7 143.7 100 152Q88.3 143.7 74 145Q68 132 55 126Q56.3 111.7 48 100Q56.3 88.3 55 74Q68 68 74 55Q88.3 56.3 100 48Q111.7 56.3 126 55Q132 68 145 74Q143.7 88.3 152 100M170 100Q158.8 115.8 160.6 135Q143 143 135 160.6Q115.8 158.8 100 170Q84.2 158.8 65 160.6Q57 143 39.4 135Q41.2 115.8 30 100Q41.2 84.2 39.4 65Q57 57 65 39.4Q84.2 41.2 100 30Q115.8 41.2 135 39.4Q143 57 160.6 65Q158.8 84.2 170 100M190 100Q175.6 120.2 177.9 145Q155.3 155.3 145 177.9Q120.2 175.6 100 190Q79.8 175.6 55 177.9Q44.7 155.3 22.1 145Q24.4 120.2 10 100Q24.4 79.8 22.1 55Q44.7 44.7 55 22.1Q79.7 24.4 100 10Q120.2 24.4 145 22.1Q155.3 44.7 177.9 55Q175.6 79.7 190 100%22 fill=%22none%22 stroke=%22%238FA8FF%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") right -70px top -50px/320px 320px no-repeat,
             radial-gradient(rgba(140,170,255,.15) 1.2px,transparent 1.7px) 0 0/11px 11px!important;
  opacity:1!important;filter:none!important;animation:none!important}
body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:110px;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 110%22 preserveAspectRatio=%22none%22 aria-hidden=%22true%22%3E%3Crect x=%220%22 y=%2252%22 width=%2234%22 height=%2258%22 fill=%22%23101A5C%22/%3E%3Crect x=%2230%22 y=%2236%22 width=%2226%22 height=%2274%22 fill=%22%23101A5C%22/%3E%3Crect x=%2262%22 y=%2260%22 width=%2230%22 height=%2250%22 fill=%22%23101A5C%22/%3E%3Crect x=%2296%22 y=%2228%22 width=%2222%22 height=%2282%22 fill=%22%23101A5C%22/%3E%3Crect x=%22122%22 y=%2248%22 width=%2234%22 height=%2262%22 fill=%22%23101A5C%22/%3E%3Crect x=%22160%22 y=%2220%22 width=%2226%22 height=%2290%22 fill=%22%23101A5C%22/%3E%3Crect x=%22190%22 y=%2254%22 width=%2230%22 height=%2256%22 fill=%22%23101A5C%22/%3E%3Crect x=%22224%22 y=%2232%22 width=%2224%22 height=%2278%22 fill=%22%23101A5C%22/%3E%3Crect x=%22252%22 y=%2246%22 width=%2234%22 height=%2264%22 fill=%22%23101A5C%22/%3E%3Crect x=%22290%22 y=%2222%22 width=%2226%22 height=%2288%22 fill=%22%23101A5C%22/%3E%3Crect x=%22320%22 y=%2250%22 width=%2232%22 height=%2260%22 fill=%22%23101A5C%22/%3E%3Crect x=%22356%22 y=%2238%22 width=%2234%22 height=%2272%22 fill=%22%23101A5C%22/%3E%3Crect x=%228%22 y=%2270%22 width=%2240%22 height=%2240%22 fill=%22%23070B2E%22/%3E%3Crect x=%2252%22 y=%2254%22 width=%2230%22 height=%2256%22 fill=%22%23070B2E%22/%3E%3Crect x=%2288%22 y=%2276%22 width=%2246%22 height=%2234%22 fill=%22%23070B2E%22/%3E%3Crect x=%22140%22 y=%2250%22 width=%2234%22 height=%2260%22 fill=%22%23070B2E%22/%3E%3Crect x=%22182%22 y=%2268%22 width=%2244%22 height=%2242%22 fill=%22%23070B2E%22/%3E%3Crect x=%22234%22 y=%2246%22 width=%2230%22 height=%2264%22 fill=%22%23070B2E%22/%3E%3Crect x=%22270%22 y=%2272%22 width=%2246%22 height=%2238%22 fill=%22%23070B2E%22/%3E%3Crect x=%22322%22 y=%2256%22 width=%2234%22 height=%2254%22 fill=%22%23070B2E%22/%3E%3Crect x=%22362%22 y=%2266%22 width=%2230%22 height=%2244%22 fill=%22%23070B2E%22/%3E%3Crect x=%22120%22 y=%226%22 width=%222%22 height=%2216%22 fill=%22%23101A5C%22/%3E%3Crect x=%22292%22 y=%2210%22 width=%222%22 height=%2214%22 fill=%22%23101A5C%22/%3E%3Crect x=%2212%22 y=%2284%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2222%22 y=%2276%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2258%22 y=%2284%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2266%22 y=%2266%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2294%22 y=%2282%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22108%22 y=%2276%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22146%22 y=%2280%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22156%22 y=%2264%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22188%22 y=%2284%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22206%22 y=%2272%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22240%22 y=%2280%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22250%22 y=%2266%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22276%22 y=%2282%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22298%22 y=%2274%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22326%22 y=%2278%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22340%22 y=%2262%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22368%22 y=%2276%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2210%22 y=%2262%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%2296%22 y=%2294%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3Crect x=%22136%22 y=%2292%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22 opacity=%22.85%22/%3E%3C/svg%3E") center bottom/100% 110px no-repeat}
.wrap,.navbar,.nav,main,footer{position:relative;z-index:1}

/* ---- header ---- */
.nav,.navbar{background:rgba(6,8,33,.86)!important;border-bottom:3px solid var(--ink)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
nav.navbar{position:sticky!important;top:0;z-index:100!important;transform:translateZ(0);isolation:isolate}
.lang-menu,.prof-menu{z-index:200}
.nav b,.navbar-brand{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.3rem!important;letter-spacing:.06em;color:#fff!important;text-shadow:2px 2px 0 var(--accent)}
.dot,.brand-dot{width:22px!important;height:22px!important;border-radius:0!important;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cpath d=%22M100 100L200 100M100 100L186.6 150M100 100L150 186.6M100 100L100 200M100 100L50 186.6M100 100L13.4 150M100 100L0 100M100 100L13.4 50M100 100L50 13.4M100 100L100 0M100 100L150 13.4M100 100L186.6 50M116 100Q113.4 103.6 113.9 108Q109.8 109.8 108 113.9Q103.6 113.4 100 116Q96.4 113.4 92 113.9Q90.2 109.8 86.1 108Q86.6 103.6 84 100Q86.6 96.4 86.1 92Q90.2 90.2 92 86.1Q96.4 86.6 100 84Q103.6 86.6 108 86.1Q109.8 90.2 113.9 92Q113.4 96.4 116 100M134 100Q128.6 107.7 129.4 117Q120.9 120.9 117 129.4Q107.7 128.6 100 134Q92.3 128.6 83 129.4Q79.1 120.9 70.6 117Q71.4 107.7 66 100Q71.4 92.3 70.6 83Q79.1 79.1 83 70.6Q92.3 71.4 100 66Q107.7 71.4 117 70.6Q120.9 79.1 129.4 83Q128.6 92.3 134 100M152 100Q143.7 111.7 145 126Q132 132 126 145Q111.7 143.7 100 152Q88.3 143.7 74 145Q68 132 55 126Q56.3 111.7 48 100Q56.3 88.3 55 74Q68 68 74 55Q88.3 56.3 100 48Q111.7 56.3 126 55Q132 68 145 74Q143.7 88.3 152 100M170 100Q158.8 115.8 160.6 135Q143 143 135 160.6Q115.8 158.8 100 170Q84.2 158.8 65 160.6Q57 143 39.4 135Q41.2 115.8 30 100Q41.2 84.2 39.4 65Q57 57 65 39.4Q84.2 41.2 100 30Q115.8 41.2 135 39.4Q143 57 160.6 65Q158.8 84.2 170 100M190 100Q175.6 120.2 177.9 145Q155.3 155.3 145 177.9Q120.2 175.6 100 190Q79.8 175.6 55 177.9Q44.7 155.3 22.1 145Q24.4 120.2 10 100Q24.4 79.8 22.1 55Q44.7 44.7 55 22.1Q79.7 24.4 100 10Q120.2 24.4 145 22.1Q155.3 44.7 177.9 55Q175.6 79.7 190 100%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center/contain no-repeat!important;box-shadow:none!important;animation:none!important}
.nav a{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:999px!important;color:#fff!important;font-weight:800!important}
.nav a:hover{border-color:var(--yellow)!important;color:#fff!important}

/* ---- panels ---- */
.card,.stat{background:var(--surface)!important;border:3px solid var(--ink)!important;border-radius:16px!important;box-shadow:6px 6px 0 var(--accent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--text)}
.card:nth-of-type(even){box-shadow:6px 6px 0 var(--blue)!important}
.card{position:relative}
.card::before{content:'';position:absolute;left:0;top:0;width:60px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M0 0L100 0M0 0L92.4 38.3M0 0L70.7 70.7M0 0L38.3 92.4M0 0L0 100M24 0Q19.9 3.9 22.2 9.2Q16.8 11.2 17 17Q11.2 16.8 9.2 22.2Q3.9 19.9 0 24M48 0Q39.7 7.9 44.3 18.4Q33.7 22.5 33.9 33.9Q22.5 33.7 18.4 44.3Q7.9 39.7 0 48M72 0Q59.6 11.8 66.5 27.6Q50.5 33.7 50.9 50.9Q33.7 50.5 27.6 66.5Q11.8 59.6 0 72M96 0Q79.4 15.8 88.7 36.7Q67.3 45 67.9 67.9Q45 67.3 36.7 88.7Q15.8 79.4 0 96%22 fill=%22none%22 stroke=%22%239DB4FF%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") 0 0/contain no-repeat;opacity:.4;pointer-events:none}
.stat{box-shadow:4px 4px 0 var(--blue)!important}
h2{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.15rem!important;letter-spacing:.08em!important;color:#B7C8FF!important}
.stat .n,.sv{font-family:'Bangers',Impact,sans-serif;font-weight:400!important;font-size:2rem!important;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);line-height:1.1}
.stat .l,.sl{color:var(--muted)!important;font-weight:800!important}
label{color:var(--muted)!important;font-weight:800!important;letter-spacing:.1em!important}
label:has(input[type=checkbox]),label:has(input[type=radio]){letter-spacing:normal!important;text-transform:none!important;font-weight:700!important;color:var(--text)!important}
.note,.muted,.sub{color:var(--muted)!important}

/* ---- inputs + buttons ---- */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],select,textarea{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:10px!important;color:#fff!important;font-family:'Nunito',sans-serif!important;font-weight:700!important}
input:focus,select:focus,textarea:focus{border-color:var(--yellow)!important;box-shadow:0 0 0 3px rgba(255,210,63,.25)!important;outline:none}
input::placeholder{color:#8FA2E8!important;opacity:1}
.btn,.wrap form button[type=submit]:not(.btn-sm),body:has(.hero-avatar) button,main.card button,.filters .btn{background:var(--accent)!important;color:#fff!important;border:3px solid var(--ink)!important;border-radius:12px!important;font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.1rem!important;letter-spacing:.08em;box-shadow:4px 4px 0 var(--ink)!important;cursor:pointer}
.btn:hover,body:has(.hero-avatar) button:hover,main.card button:hover{background:var(--accent-h)!important}
.btn:active,main.card button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)!important}
.btn-sm,details.inline>summary,.btn-ghost,.file-btn{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:8px!important;color:#fff!important;font-weight:800!important;box-shadow:none!important;font-family:'Nunito',sans-serif!important;font-size:.78rem!important}
.btn-sm:hover,details.inline>summary:hover,.btn-ghost:hover,.file-btn:hover{border-color:var(--yellow)!important;color:#fff!important;background:var(--surface2)!important}
.btn-danger:hover{border-color:var(--accent)!important;background:var(--accent)!important;color:#fff!important}
.file-btn{border-style:dashed!important}

/* ---- tables + badges ---- */
th{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:.95rem!important;letter-spacing:.1em!important;color:var(--yellow)!important;border-bottom:2px solid var(--blue)}
td{border-bottom:1px solid rgba(157,180,255,.18)!important}
tbody tr:hover td{background:rgba(46,107,255,.08)}
.mono{color:#C7D3FF!important}
code,.mono{background:rgba(4,6,26,.55)}
.badge,.hero-badge,.chip{border:2px solid var(--ink)!important;font-weight:800!important;border-radius:999px!important;padding:.15rem .6rem!important}
.b-ok{background:var(--green)!important;color:var(--ink)!important}
.b-soon,.b-mid,.hero-badge.admin{background:var(--yellow)!important;color:var(--ink)!important}
.b-expired,.b-high{background:var(--accent)!important;color:#fff!important}
.b-never,.b-low,.hero-badge{background:#C9D6FF!important;color:var(--ink)!important}
.b-off{background:#5B6699!important;color:#fff!important}
.msg{border-radius:12px!important;border-width:2.5px!important;font-weight:700}
.msg.ok,.ok{background:#0A3A31!important;border-color:var(--green)!important;color:#7FF0C8!important}
.msg.bad,.bad,.msg.err,.err{background:#4A0F16!important;border-color:var(--accent)!important;color:#FFB4B8!important}

/* ---- tabs, pager, popovers ---- */
.tabs a,.pager a,.pager span{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:999px!important;color:#fff!important;font-weight:800!important}
.tabs a.on,.pager .on{background:var(--accent)!important;border-color:#fff!important;box-shadow:3px 3px 0 var(--yellow)}
details.inline .pop{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:12px!important}
.hero-avatar,.pic-prev{border:3px solid #fff!important;background:var(--accent)!important}
.info{border-bottom-color:rgba(157,180,255,.2)!important}

/* keep the two-column language checklist on phones */
div:has(>label>input[type=checkbox]){grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important}

/* ---- phone card-tables ---- */
@media(max-width:640px){
  tr{background:#0A1040!important;border:3px solid var(--ink)!important;box-shadow:4px 4px 0 var(--blue)}
  td::before{color:var(--yellow)!important;font-weight:800!important}
}

/* ---- login + signup ---- */
main.card{box-shadow:6px 6px 0 var(--accent)!important}
main.card h1{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:2.4rem!important;letter-spacing:.05em;color:var(--yellow)!important;text-shadow:3px 3px 0 var(--ink)}
main.card .brand{font-family:'Bangers',Impact,sans-serif!important}
.hang{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:hh-swing 3.6s ease-in-out infinite;pointer-events:none}
.hang i{display:block;width:2px;background:#DCE6FF}

/* ---- the app page (index) ---- */
.fetch-card,.result-card{background:var(--surface)!important;border:3px solid var(--ink)!important;border-radius:16px!important;box-shadow:6px 6px 0 var(--accent)!important;backdrop-filter:none!important;position:relative}
.result-card{box-shadow:6px 6px 0 var(--blue)!important;transform-origin:50% 0;animation:hh-swingin .9s cubic-bezier(.2,.8,.2,1) both}
.search-label{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.1rem!important;letter-spacing:.08em;color:#B7C8FF!important}
.type-label{color:var(--muted)!important;font-weight:800!important}
.type-btn{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;border-radius:10px!important;color:#fff!important;font-weight:800!important;white-space:normal!important;height:auto;min-height:50px;line-height:1.15;padding:.55rem .6rem!important}
.type-btn.is-active{background:var(--accent)!important;border-color:#fff!important;box-shadow:3px 3px 0 var(--yellow)!important}
.type-btn [data-i18n]{flex:1;min-width:0;overflow-wrap:anywhere}
.btn-continue{background:var(--accent)!important;border:3px solid var(--ink)!important;border-radius:12px!important;font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.4rem!important;letter-spacing:.1em;box-shadow:4px 4px 0 var(--ink)!important}
.res-title,.res-label{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;font-size:1.5rem!important;letter-spacing:.06em;color:var(--yellow)!important;text-shadow:2px 2px 0 var(--ink)}
.res-label{font-size:1rem!important;color:#B7C8FF!important;text-shadow:none}
.res-sub,.res-hint,.res-again{color:var(--muted)!important}
.res-digit,.mc-digit{background:var(--ink)!important;border:2.5px solid var(--accent)!important;border-radius:8px!important;color:#fff!important;/* Nunito, not Bangers: in Bangers the '7' and '1' glyphs are nearly identical (a short top-right diagonal on a long stroke), 
     which is fine for headings but risks a mistyped Netflix code. Nunito's 7 has a full top bar and 1 a flat base -- unambiguous. */
  font-family:'Nunito',system-ui,sans-serif!important;font-weight:800!important;font-variant-numeric:tabular-nums!important;background-image:linear-gradient(135deg,transparent 47%,rgba(157,180,255,.16) 49%,rgba(157,180,255,.16) 51%,transparent 53%)!important}
.res-code.copied .res-digit,.mc-item.copied .mc-digit{border-color:var(--green)!important;background-color:#0A3A31!important}
.mc-newest{background:var(--yellow)!important;color:var(--ink)!important;border:0!important;font-weight:800!important}
.res-open,.btn-view{background:var(--blue)!important;border:3px solid var(--ink)!important;border-radius:12px!important;color:#fff!important;font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;letter-spacing:.1em;box-shadow:4px 4px 0 var(--ink)!important}
.res-refresh,.lang-toggle{background:var(--surface2)!important;border:2.5px solid var(--blue)!important;color:#fff!important}
.lang-menu,.prof-menu{background:var(--surface)!important;border:3px solid var(--ink)!important;box-shadow:5px 5px 0 var(--blue)!important;color:#fff!important}
.lang-menu li,.prof-menu a{color:#fff!important}
.lang-menu li:hover,.prof-menu a:hover{background:rgba(46,107,255,.2)!important}
.lang-menu li.is-active{background:var(--accent)!important;color:#fff!important}
.prof-avatar{background:var(--accent)!important;border:3px solid #fff}
.info-eyebrow{color:var(--yellow)!important;font-family:'Bangers',Impact,sans-serif;letter-spacing:.1em}
.info-h{font-family:'Bangers',Impact,sans-serif!important;font-weight:400!important;letter-spacing:.06em;color:#fff!important}
.steps li,.core-card,.flow-card{background:var(--surface)!important;border:3px solid var(--ink)!important;border-radius:16px!important;box-shadow:5px 5px 0 var(--blue)!important}
.step-n{background:var(--accent)!important;border:2px solid var(--ink);font-family:'Bangers',Impact,sans-serif}
.core-ico{background:var(--surface2)!important;color:var(--yellow)!important;border:2px solid var(--blue)}
footer{border-top:3px solid var(--ink)!important;background:rgba(6,8,33,.7)!important}


/* ---- language menu: two columns, big tap targets, no scrolling; full-width under the header on phones ---- */
.lang-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 72px);overflow-y:auto;padding:.4rem}
.lang-menu[hidden]{display:none}
.lang-menu li{min-height:44px;padding:.5rem .7rem;font-weight:700}
@media (max-width:520px){
  .lang-dd{position:static}
  .lang-menu,[dir="rtl"] .lang-menu{left:12px;right:12px;width:auto;top:calc(100% + 4px)}
}

/* ---- footer: a comic caption box, "Made with love by Dudio" ---- */
.ws-foot{position:relative;text-align:center;padding:2.7rem 1rem 2.1rem;overflow:hidden;border-top:3px solid var(--ink)!important;
  background:radial-gradient(rgba(140,170,255,.10) 1.2px,transparent 1.7px) 0 0/11px 11px,rgba(6,8,33,.86)!important}
.ws-foot::before,.ws-foot::after{content:'';position:absolute;top:0;width:92px;height:92px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M0 0L100 0M0 0L92.4 38.3M0 0L70.7 70.7M0 0L38.3 92.4M0 0L0 100M24 0Q19.9 3.9 22.2 9.2Q16.8 11.2 17 17Q11.2 16.8 9.2 22.2Q3.9 19.9 0 24M48 0Q39.7 7.9 44.3 18.4Q33.7 22.5 33.9 33.9Q22.5 33.7 18.4 44.3Q7.9 39.7 0 48M72 0Q59.6 11.8 66.5 27.6Q50.5 33.7 50.9 50.9Q33.7 50.5 27.6 66.5Q11.8 59.6 0 72M96 0Q79.4 15.8 88.7 36.7Q67.3 45 67.9 67.9Q45 67.3 36.7 88.7Q15.8 79.4 0 96%22 fill=%22none%22 stroke=%22%239DB4FF%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") 0 0/contain no-repeat;opacity:.5;pointer-events:none}
.ws-foot::before{left:0}
.ws-foot::after{right:0;transform:scaleX(-1)}
.ws-cap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem .55rem;max-width:100%;padding:.6rem 1.2rem .72rem;
  background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--accent);
  font-family:'Bangers',Impact,sans-serif;font-size:1.4rem;letter-spacing:.07em;line-height:1.15;transform:rotate(-1.2deg)}
.ws-by{display:inline-block;padding:.05rem .7rem .14rem;background:var(--accent);color:#fff;border:2.5px solid var(--ink);border-radius:3px;box-shadow:2px 2px 0 var(--ink);transform:rotate(1.6deg)}
.ws-heart{display:inline-block;animation:ws-beat 1.5s ease-in-out infinite}
.ws-thread{position:absolute;left:15%;top:-34px;width:2px;height:34px;background:#DCE6FF;transform-origin:50% 0;animation:hh-swing 3.4s ease-in-out infinite;pointer-events:none}
.ws-thread b{position:absolute;left:50%;bottom:-12px;margin-left:-9px;font-size:18px;line-height:1;font-weight:400}
/* login + signup: a small caption at the very bottom of the page. It reserves its own space, so it can never overlap the card. */
body.ws-has-foot{position:relative;padding-bottom:7rem!important}
.ws-foot-fixed{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:visible;padding:0 0 .95rem;background:none!important;border-top:0!important;pointer-events:none}
.ws-foot-fixed::before,.ws-foot-fixed::after{display:none}
.ws-foot-fixed .ws-cap{font-size:1.05rem;padding:.4rem .95rem .5rem;border-width:2.5px;box-shadow:4px 4px 0 var(--accent);pointer-events:auto}
.ws-foot-fixed .ws-thread{top:-26px;height:26px}
@media (max-width:420px){.ws-cap{font-size:1.2rem;padding:.55rem .9rem .65rem}.ws-foot-fixed .ws-cap{font-size:.98rem}}
@media (max-width:640px){.ws-foot:not(.ws-foot-fixed){padding-bottom:5.2rem}}   /* keeps the caption clear of the round back-to-top button */
@keyframes ws-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.18)}70%{transform:scale(1)}}

/* ---- the web that Webby hangs from: it follows the spider (placed by web.js), instead of sitting in the screen corner ---- */
.anchorweb-wrap{position:absolute;left:0;top:0;width:100%;height:720px;overflow:hidden;pointer-events:none;z-index:0}
.anchorweb{position:absolute;color:#8FA8FF;opacity:.55}
.anchorweb path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
html.ws-anchored body::before{background:radial-gradient(rgba(140,170,255,.15) 1.2px,transparent 1.7px) 0 0/11px 11px!important}   /* the old corner web steps aside */
html.ws-anchored .bigweb{display:none!important}

/* ---- Webby + comic effects (added by web.js) ---- */
/* one Webby at a time: the headline Webby fades out while a result (with its own Webby) is showing */
.hero-web .hang{transition:opacity .45s ease}
body.has-result .hero-web .hang,body.has-scan .hero-web .hang{opacity:0}
.hero-web{display:flex;justify-content:space-between;align-items:flex-start;margin:.2rem 0 1rem;padding:0 .25rem}
.hero-web h1{margin:0;font-family:'Bangers',Impact,sans-serif;font-weight:400;font-size:2.1rem;line-height:1.02;letter-spacing:.03em;color:var(--yellow);text-shadow:3px 3px 0 var(--ink)}
.hero-web p{margin:.5rem 0 0;font-size:.85rem;font-weight:700;color:var(--muted)}
.sfx{position:absolute;left:-18px;top:-34px;animation:hh-pop .6s .25s both;pointer-events:none}
.res-icon{display:none!important}
.webby-perch{position:absolute;right:60px;top:-40px;animation:hh-bob 2.6s ease-in-out infinite;pointer-events:none}
@keyframes hh-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes hh-swingin{0%{transform:rotate(-9deg) translateY(-16px);opacity:0}55%{transform:rotate(4deg);opacity:1}80%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@keyframes hh-pop{0%{transform:scale(.2) rotate(-24deg);opacity:0}60%{transform:scale(1.18) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-8deg)}}
@keyframes hh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* one-time "copy the login details" card in the admin */
.share-card{box-shadow:6px 6px 0 var(--green)!important}
.share-card textarea{margin-bottom:.9rem}
.gen-row{display:flex;gap:.5rem;align-items:center}
.gen-row input{flex:1;min-width:0}