/* Nukkad — shared theme + base components. Fun, simple, mobile-first. Themes are CSS-variable sets selected via . 6 free themes + 2 premium (neon, gold) so free users get plenty of flair. */ :root{ --bg:#f6f5fb; --surface:#ffffff; --surface-2:#f0eef7; --text:#1d1330; --muted:#6b6480; --accent:#7c5cff; --accent-2:#ff5ca8; --on-accent:#fff; --border:#e7e3f2; --good:#1faa6b; --bad:#e0436b; --warn:#e6a100; --radius:16px; --shadow:0 6px 24px rgba(40,20,80,.10); } [data-theme="dark"]{ --bg:#15111f; --surface:#1f1830; --surface-2:#271f3c; --text:#f1edff; --muted:#a79fc4; --accent:#9d7bff; --accent-2:#ff7ab8; --on-accent:#fff; --border:#332a4a; --good:#3ad29a; --bad:#ff6b8f; --warn:#ffc94d; --shadow:0 6px 24px rgba(0,0,0,.4); } [data-theme="mint"]{ --bg:#eefcf6; --surface:#ffffff; --surface-2:#dff7ec; --text:#0c2f24; --muted:#4d7a6b; --accent:#10b981; --accent-2:#0ea5b7; --on-accent:#fff; --border:#cdeede; --good:#0f9d63; --bad:#e0436b; --warn:#e6a100; --shadow:0 6px 24px rgba(16,120,90,.12); } [data-theme="sunset"]{ --bg:#fff5ec; --surface:#fffaf6; --surface-2:#ffe7d4; --text:#3a1d12; --muted:#9a6a52; --accent:#ff6b35; --accent-2:#ff2d75; --on-accent:#fff; --border:#ffd9c2; --good:#1faa6b; --bad:#e0436b; --warn:#e6a100; --shadow:0 6px 24px rgba(220,90,30,.14); } [data-theme="ocean"]{ --bg:#eef4ff; --surface:#ffffff; --surface-2:#dde9ff; --text:#0c2143; --muted:#5a6b8c; --accent:#2563eb; --accent-2:#06b6d4; --on-accent:#fff; --border:#cfdcf5; --good:#1faa6b; --bad:#e0436b; --warn:#e6a100; --shadow:0 6px 24px rgba(30,80,200,.12); } [data-theme="forest"]{ --bg:#10180f; --surface:#182415; --surface-2:#1f2f1b; --text:#eaf6e6; --muted:#9fbf93; --accent:#5fb84a; --accent-2:#caa84a; --on-accent:#0c130a; --border:#2b3d25; --good:#5fb84a; --bad:#ff6b8f; --warn:#ffc94d; --shadow:0 6px 24px rgba(0,0,0,.45); } /* premium flair */ [data-theme="neon"]{ --bg:#080816; --surface:#0f1030; --surface-2:#15163f; --text:#e6f7ff; --muted:#8aa0d6; --accent:#00e5ff; --accent-2:#ff2bd6; --on-accent:#04122a; --border:#222a66; --good:#26ffb0; --bad:#ff5d8f; --warn:#ffe14d; --shadow:0 8px 30px rgba(0,229,255,.18); } [data-theme="gold"]{ --bg:#14110a; --surface:#1e1a10; --surface-2:#2a2416; --text:#fbf3df; --muted:#c2b083; --accent:#e8b73a; --accent-2:#d98324; --on-accent:#1a1505; --border:#3a3220; --good:#3ad29a; --bad:#ff6b8f; --warn:#ffd24d; --shadow:0 8px 30px rgba(220,160,30,.2); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-size:16px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; -webkit-tap-highlight-color:transparent; } a{color:var(--accent)} .muted{color:var(--muted)} .center{text-align:center} .row{display:flex;gap:10px;align-items:center} .row.wrap{flex-wrap:wrap} .spread{justify-content:space-between} .grow{flex:1} .hidden{display:none!important} .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px; background:var(--surface-2);font-size:13px;font-weight:600} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:16px;box-shadow:var(--shadow);margin-bottom:14px} h1,h2,h3{margin:.2em 0} input,select,textarea{ width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px; background:var(--surface-2);color:var(--text);font-size:16px;font-family:inherit} input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px} label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 4px} button{font-family:inherit;font-size:16px;cursor:pointer;border:none} .btn{padding:13px 18px;border-radius:14px;background:var(--accent);color:var(--on-accent); font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%} .btn:active{transform:translateY(1px)} .btn.ghost{background:var(--surface-2);color:var(--text)} .btn.sm{padding:8px 14px;font-size:14px;border-radius:10px;width:auto} .btn.pink{background:linear-gradient(120deg,var(--accent),var(--accent-2))} .btn:disabled{opacity:.5} .toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:90; background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600; box-shadow:var(--shadow);max-width:90vw;opacity:0;transition:opacity .2s,transform .2s} .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)} .sheet-bg{position:fixed;inset:0;background:rgba(10,5,25,.55);z-index:80;display:flex; align-items:flex-end;justify-content:center} .sheet{background:var(--surface);width:100%;max-width:520px;border-radius:22px 22px 0 0; padding:20px;padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow)} @media(min-width:560px){.sheet-bg{align-items:center}.sheet{border-radius:22px}} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tag{font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--surface-2);color:var(--muted)} .tag.pri{background:var(--accent-2);color:#fff} .star{color:var(--warn)} .wrap-app{max-width:560px;margin:0 auto;padding:14px 14px 90px}