/* ════════════════════════════════════════════════════════════════ AMAADOR Workshop — reusable PREMIUM tool skin. Add + link this after main.css. Re-skins any tool in its own accent. ════════════════════════════════════════════════════════════════ */ body.aw-premium{ --ta:#22d3ee; --ta2:#67e8f9; --gold:var(--ta); --gold2:var(--ta2); --acc:var(--ta); --gold-dim:color-mix(in srgb,var(--ta) 16%,transparent); background-image:none; } /* futuristic backdrop: accent glow-orbs + fading grid */ body.aw-premium::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(820px 520px at 82% -8%,color-mix(in srgb,var(--ta) 18%,transparent),transparent 60%), radial-gradient(680px 560px at 2% 26%,color-mix(in srgb,var(--ta) 12%,transparent),transparent 60%), radial-gradient(560px 480px at 50% 116%,rgba(99,102,241,.10),transparent 60%)} body.aw-premium::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;animation:none; background-image:linear-gradient(color-mix(in srgb,var(--ta) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ta) 7%,transparent) 1px,transparent 1px); background-size:48px 48px;-webkit-mask:radial-gradient(130% 95% at 50% -12%,#000,transparent 78%);mask:radial-gradient(130% 95% at 50% -12%,#000,transparent 78%)} /* header (tool-head or hero): neon glow + scanning line + headline glow */ body.aw-premium .tool-head,body.aw-premium .hero{position:relative;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--ta) 16%,transparent)} body.aw-premium .tool-head::before,body.aw-premium .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(720px 340px at 50% -55%,color-mix(in srgb,var(--ta) 24%,transparent),transparent 62%),radial-gradient(520px 320px at 92% 0%,rgba(99,102,241,.14),transparent 60%)} body.aw-premium .tool-head::after,body.aw-premium .hero::after{content:"";position:absolute;left:-40%;bottom:0;height:2px;width:40%;z-index:1;filter:none; background:linear-gradient(90deg,transparent,var(--ta),#ffffff,var(--ta),transparent);opacity:.8;animation:awScan 5s linear infinite} @keyframes awScan{0%{transform:translateX(0)}100%{transform:translateX(350%)}} body.aw-premium .tool-head h1,body.aw-premium .hero h1{text-shadow:0 0 34px color-mix(in srgb,var(--ta) 22%,transparent)} body.aw-premium .tool-head .wrap,body.aw-premium .hero .wrap{position:relative;z-index:2} body.aw-premium .crumb a:hover{color:var(--ta2)} /* segmented neon tabs (only tools that have them) */ body.aw-premium .tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:16px;border:1px solid color-mix(in srgb,var(--ta) 16%,transparent);background:rgba(8,16,26,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} body.aw-premium .tabs button{border:0;background:none;color:var(--mut);font-family:inherit;font-weight:600;font-size:.88rem;padding:9px 16px;border-radius:11px;cursor:pointer;transition:.25s} body.aw-premium .tabs button:hover{color:var(--txt);background:color-mix(in srgb,var(--ta) 8%,transparent)} body.aw-premium .tabs button.on{color:#06121a;background:linear-gradient(135deg,var(--ta2),var(--ta));box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ta) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.35)} /* glass cards with accent rim + hover glow */ body.aw-premium .card{border:1px solid color-mix(in srgb,var(--ta) 12%,transparent);background:rgba(12,18,28,.5);box-shadow:0 16px 44px rgba(3,8,16,.5)} body.aw-premium .card:hover{border-color:color-mix(in srgb,var(--ta) 34%,transparent);box-shadow:0 22px 60px -14px color-mix(in srgb,var(--ta) 22%,transparent)} body.aw-premium .card.stat .n{text-shadow:0 0 22px color-mix(in srgb,var(--ta) 26%,transparent)} body.aw-premium .card>h3:first-child{position:relative;padding-left:14px} body.aw-premium .card>h3:first-child::before{content:"";position:absolute;left:0;top:2px;width:3px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--ta2),var(--ta));box-shadow:0 0 12px var(--ta)} /* neon buttons */ body.aw-premium .btn{border-radius:14px;font-weight:700;letter-spacing:.015em} body.aw-premium .btn:not(.ghost):not(.danger):not(.violet){background:linear-gradient(135deg,var(--ta2),var(--ta));color:#06121a;border-color:transparent;box-shadow:0 10px 28px -10px color-mix(in srgb,var(--ta) 70%,transparent)} body.aw-premium .btn:not(.ghost):not(.danger):not(.violet):hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px color-mix(in srgb,var(--ta) 92%,transparent);color:#06121a;filter:brightness(1.04)} body.aw-premium .btn.ghost{border-color:color-mix(in srgb,var(--ta) 30%,transparent);color:var(--ta2);background:color-mix(in srgb,var(--ta) 3%,transparent)} body.aw-premium .btn.ghost:hover{border-color:var(--ta);background:color-mix(in srgb,var(--ta) 10%,transparent);color:#fff} /* inputs / selects / textareas: accent focus glow */ body.aw-premium .f,body.aw-premium input.f,body.aw-premium select.f,body.aw-premium textarea.f,body.aw-premium .searchbar{transition:border-color .2s,box-shadow .2s,background .2s} body.aw-premium .f:focus,body.aw-premium input.f:focus,body.aw-premium select.f:focus,body.aw-premium textarea.f:focus,body.aw-premium .searchbar:focus-within{border-color:var(--ta);box-shadow:0 0 0 3px color-mix(in srgb,var(--ta) 17%,transparent);outline:none} /* tables */ body.aw-premium .tbl thead th{background:linear-gradient(180deg,color-mix(in srgb,var(--ta) 10%,transparent),transparent);color:var(--ta2);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--ta) 22%,transparent)} body.aw-premium .tbl tbody tr{transition:background .2s} body.aw-premium .tbl tbody tr:hover{background:color-mix(in srgb,var(--ta) 5%,transparent)} body.aw-premium .tbl-wrap{border:1px solid color-mix(in srgb,var(--ta) 10%,transparent);border-radius:16px;background:rgba(8,14,22,.3)} /* callouts + links */ body.aw-premium .callout{border-radius:16px} body.aw-premium .callout.blue{border-color:color-mix(in srgb,var(--ta) 30%,transparent);background:color-mix(in srgb,var(--ta) 6%,transparent)} body.aw-premium a{color:var(--ta2)} body.aw-premium a:hover{color:#ffffff} @media (prefers-reduced-motion:reduce){body.aw-premium .tool-head::after,body.aw-premium .hero::after{animation:none}} /* ════════════════════════════════════════════════════════════════ LIGHT THEME COUNTERPART (2026-07-12) — same fix as chempro.css: the glass surfaces above are dark-canvas-tuned and rendered as unreadable dark slabs in light mode. --ta/--ta2 must be re-pinned here because body.aw-premium's own token declaration beats the inherited html-level light override. */ html[data-theme="light"] body.aw-premium{ --ta:#26241C; --ta2:#26241C; --gold:#26241C; --gold2:#26241C; --acc:#26241C; --gold-dim:rgba(10,10,15,.08); } html[data-theme="light"] body.aw-premium::before{ background:radial-gradient(820px 520px at 82% -8%,rgba(10,10,15,.05),transparent 60%), radial-gradient(680px 560px at 2% 26%,rgba(10,10,15,.03),transparent 60%); } html[data-theme="light"] body.aw-premium::after{opacity:.22; background-image:linear-gradient(rgba(10,10,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,15,.05) 1px,transparent 1px); } html[data-theme="light"] body.aw-premium .tool-head::before,html[data-theme="light"] body.aw-premium .hero::before{background:none} html[data-theme="light"] body.aw-premium .tool-head::after,html[data-theme="light"] body.aw-premium .hero::after{background:linear-gradient(90deg,transparent,#26241C,#6B6E85,#26241C,transparent);opacity:.4} html[data-theme="light"] body.aw-premium .tool-head h1,html[data-theme="light"] body.aw-premium .hero h1{text-shadow:none} html[data-theme="light"] body.aw-premium .tabs{border-color:rgba(10,10,15,.14);background:rgba(10,10,15,.05)} html[data-theme="light"] body.aw-premium .tabs button{color:#5C5F75} html[data-theme="light"] body.aw-premium .tabs button:hover{color:#26241C;background:rgba(10,10,15,.06)} html[data-theme="light"] body.aw-premium .tabs button.on{color:#F5F4F0;background:#26241C;box-shadow:0 8px 20px -10px rgba(10,10,15,.5)} html[data-theme="light"] body.aw-premium .card{border-color:rgba(10,10,15,.12);background:rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(20,21,28,.08)} html[data-theme="light"] body.aw-premium .card:hover{border-color:rgba(10,10,15,.24);box-shadow:0 14px 36px rgba(20,21,28,.12)} html[data-theme="light"] body.aw-premium .card.stat .n{text-shadow:none} html[data-theme="light"] body.aw-premium .card>h3:first-child::before{background:linear-gradient(180deg,#26241C,#6B6E85);box-shadow:none} html[data-theme="light"] body.aw-premium .btn:not(.ghost):not(.danger):not(.violet){background:#26241C;color:#F5F4F0;box-shadow:0 8px 22px -10px rgba(10,10,15,.5)} html[data-theme="light"] body.aw-premium .btn:not(.ghost):not(.danger):not(.violet):hover{background:#14151C;color:#F5F4F0;box-shadow:0 12px 30px -10px rgba(10,10,15,.6);filter:none} html[data-theme="light"] body.aw-premium .btn.ghost{border-color:rgba(10,10,15,.22);color:#26241C;background:rgba(10,10,15,.03)} html[data-theme="light"] body.aw-premium .btn.ghost:hover{border-color:#26241C;background:rgba(10,10,15,.08);color:#14151C} html[data-theme="light"] body.aw-premium .f:focus,html[data-theme="light"] body.aw-premium input.f:focus,html[data-theme="light"] body.aw-premium select.f:focus,html[data-theme="light"] body.aw-premium textarea.f:focus,html[data-theme="light"] body.aw-premium .searchbar:focus-within{border-color:#26241C;box-shadow:0 0 0 3px rgba(10,10,15,.10)} html[data-theme="light"] body.aw-premium .tbl thead th{background:linear-gradient(180deg,rgba(10,10,15,.06),transparent);color:#26241C;border-bottom-color:rgba(10,10,15,.18)} html[data-theme="light"] body.aw-premium .tbl tbody tr:hover{background:rgba(10,10,15,.04)} html[data-theme="light"] body.aw-premium .tbl-wrap{border-color:rgba(10,10,15,.12);background:rgba(255,255,255,.45)} html[data-theme="light"] body.aw-premium .callout.blue{border-color:rgba(10,10,15,.2);background:rgba(10,10,15,.04)} html[data-theme="light"] body.aw-premium a{color:#26241C} html[data-theme="light"] body.aw-premium a:hover{color:#14151C}