/* Colours are stored as "variables" so you can change the whole look here */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f4f1ff;--card:#fff;--tx:#1d1b3a;--mu:#625f85;--pr:#6c3cff;--pk:#ff4d8d;--cy:#00c2b8;--yl:#ffd23f;--bd:#e2dcff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14122a;--card:#1f1c3d;--tx:#f0eeff;--mu:#a9a5d1;--bd:#35306a}}
:root[data-theme="dark"]{--bg:#14122a;--card:#1f1c3d;--tx:#f0eeff;--mu:#a9a5d1;--bd:#35306a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 Poppins,system-ui,sans-serif}
header{background:var(--card);border-bottom:3px solid var(--pr);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar{max-width:1050px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.3rem;margin-right:auto}.logo span{color:var(--pk)}
nav{display:flex;gap:4px;overflow-x:auto;max-width:100%}
nav button{background:none;border:0;color:var(--tx);padding:8px 12px;border-radius:99px;font:600 .82rem Poppins,sans-serif;cursor:pointer;white-space:nowrap}
nav button.on,nav button:hover{background:var(--pr);color:#fff}
main{max-width:1050px;margin:auto;padding:20px 16px 50px}
section{display:none}section.on{display:block}
.hero{background:linear-gradient(135deg,#6c3cff,#ff4d8d);color:#fff;border-radius:24px;padding:44px 24px;text-align:center}
.hero h1{margin:0 0 10px;font-size:clamp(2rem,7vw,3.2rem);line-height:1.1;font-weight:800}
.stk{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stk span{background:#fff;color:#1d1b3a;padding:6px 14px;border-radius:12px;font-weight:700;transform:rotate(-3deg)}
.stk span:nth-child(even){transform:rotate(3deg);background:var(--yl)}
.btn{background:var(--pr);color:#fff;border:0;padding:10px 20px;border-radius:12px;font:700 .9rem Poppins,sans-serif;cursor:pointer}
.btn.y{background:var(--yl);color:#1d1b3a}.btn.alt{background:var(--bd);color:var(--tx)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--bd);border-top:6px solid var(--c,var(--pr));border-radius:16px;padding:16px}
.card:nth-child(4n+2){--c:var(--pk)}.card:nth-child(4n+3){--c:var(--cy)}.card:nth-child(4n){--c:var(--yl)}
.card h3{margin:4px 0;font-size:1.05rem}.card p{margin:0 0 10px;color:var(--mu);font-size:.85rem}.ic{font-size:1.8rem}
.row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{border:2px solid var(--bd);background:var(--bg);color:var(--tx);border-radius:99px;padding:4px 10px;font:600 .75rem Poppins,sans-serif;cursor:pointer}
.chip:hover,.chip.on{background:var(--pr);color:#fff;border-color:var(--pr)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tabs button{border:2px solid var(--bd);background:var(--card);color:var(--tx);padding:7px 15px;border-radius:99px;cursor:pointer;font:600 .85rem Poppins,sans-serif}
.tabs button.on{background:var(--pk);color:#fff;border-color:var(--pk)}
input,select,textarea{width:100%;padding:10px;margin:4px 0 12px;border:2px solid var(--bd);border-radius:10px;background:var(--card);color:var(--tx);font:inherit}
label{font-weight:600;font-size:.85rem}
.box{max-width:440px;margin:auto;background:var(--card);padding:20px;border-radius:20px;border:1px solid var(--bd)}.box.wide{max-width:640px}
.msg{padding:10px;border-radius:10px;margin-bottom:12px;font-size:.88rem;background:#d9fbf6;color:#047a72}
.msg.err{background:#ffe3ea;color:#b4143f}
.inbox{border:2px dashed var(--pr);border-radius:12px;padding:12px;margin-bottom:12px;font-size:.88rem}.inbox b{font-size:1.3rem;letter-spacing:4px}
.demo{background:var(--yl);color:#1d1b3a;border-radius:10px;padding:8px 12px;font-size:.82rem;margin-bottom:12px}
.lnk{background:none;border:0;color:var(--pr);cursor:pointer;font:600 .9rem Poppins,sans-serif;padding:0}
.modal{display:none;position:fixed;inset:0;background:rgba(20,18,42,.6);z-index:10;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}.pan{background:var(--card);border-radius:20px;padding:20px;width:100%;max-width:480px;max-height:85vh;overflow:auto}
.it{display:block;padding:10px;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;color:var(--tx);text-decoration:none}
.it small{color:var(--mu)}.tag{background:var(--yl);color:#1d1b3a;border-radius:6px;padding:0 6px;font-size:.7rem;margin-left:6px}
footer{text-align:center;color:var(--mu);font-size:.8rem;padding:20px}