@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#edf1ff; --muted:#92a0bb; --line:rgba(255,255,255,.1); --lime:#c6ff65; --violet:#9a7cff; --night:#101827; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:#0a101d; font-family:"Noto Sans SC",system-ui,sans-serif; }
body:before { content:""; position:fixed; inset:0; opacity:.35; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:28px 28px; }
button,input { font:inherit; } button { border:0; cursor:pointer; } .shell { max-width:620px; min-height:100dvh; margin:auto; overflow:hidden; background:linear-gradient(145deg,#141f33,#0d1422 56%,#0b1120); position:relative; }
.hero { min-height:320px; padding:calc(24px + env(safe-area-inset-top)) 24px 36px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.orb { position:absolute; border-radius:999px; filter:blur(2px); opacity:.75; }.orb-one { width:280px;height:280px;right:-105px;top:-70px;background:radial-gradient(circle at 35% 35%,#d0ff73,transparent 57%); }.orb-two { width:300px;height:300px;left:-180px;bottom:-210px;background:radial-gradient(circle,#a47dff,transparent 64%); }
.topline,.section-heading,.modal-head { display:flex; align-items:center; gap:9px; position:relative; z-index:1; }.topline { font:500 11px "DM Mono",monospace; letter-spacing:1.5px; }.brand-mark { width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:var(--lime);color:#172019;font-weight:bold; }.live { margin-left:auto; color:var(--lime); font-size:9px; }.live i { display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:4px;box-shadow:0 0 9px var(--lime); }
.eyebrow,.section-heading p,.modal-head p { margin:48px 0 8px; color:var(--lime); font:500 10px "DM Mono",monospace;letter-spacing:1.4px; }.hero h1 { position:relative;z-index:1;margin:0;font-size:clamp(32px,9vw,46px);line-height:1.17;letter-spacing:-1.7px; }.hero h1 em { font-style:normal;color:#c0aaff; }.subtitle { position:relative;z-index:1;color:var(--muted);font-size:13px;margin:15px 0 0; }
.summary { margin:-19px 20px 0;position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr 50px;padding:14px 15px;border:1px solid var(--line);border-radius:17px;background:rgba(22,32,51,.88);box-shadow:0 16px 40px rgba(0,0,0,.22);backdrop-filter:blur(12px); }.summary div { padding-left:5px;border-right:1px solid var(--line); }.summary strong { display:block;font:700 22px "DM Mono",monospace;color:var(--lime); }.summary span { color:var(--muted);font-size:10px; }.icon-button { margin:auto;background:transparent;color:var(--ink);font-size:28px;line-height:1;transition:.2s; }.icon-button:active { transform:rotate(150deg); }
.content { padding:34px 20px 96px; }.section-heading { justify-content:space-between; }.section-heading p,.modal-head p { margin:0 0 3px; }.section-heading h2,.modal-head h2 { margin:0;font-size:22px;letter-spacing:-.7px; }.create-link { background:transparent;color:var(--lime);font-size:12px;font-weight:700; }.create-link span { display:inline-grid;place-items:center;margin-left:4px;width:18px;height:18px;border-radius:50%;background:var(--lime);color:#152016;font-size:18px;line-height:1; }
.cards { display:grid;gap:13px;margin-top:20px; }.lottery-card { padding:19px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(130deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.05);animation:rise .45s both; }.card-top,.card-foot { display:flex;justify-content:space-between;align-items:center;gap:10px; }.tag { padding:5px 8px;border-radius:7px;background:rgba(198,255,101,.12);color:var(--lime);font:500 9px "DM Mono",monospace;letter-spacing:.7px; }.status { color:var(--muted);font-size:11px; }.lottery-card h3 { margin:15px 0 13px;font-size:19px;letter-spacing:-.5px; }.meta { display:flex;gap:17px;color:var(--muted);font-size:11px;margin-bottom:17px; }.meta b { color:var(--ink);font-weight:600; }.join { width:100%;padding:12px 15px;border-radius:11px;background:var(--lime);color:#162015;font-weight:800;font-size:13px;transition:transform .15s,filter .15s; }.join:active { transform:scale(.98); }.join.joined { background:#303e58;color:#bac6dd; }.closed { opacity:.56; }.loading-card { min-height:120px;display:grid;place-items:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:18px; }.loading-card span { width:5px;height:5px;background:var(--lime);border-radius:99px;margin-left:4px;animation:pulse 1s infinite; }
dialog { color:var(--ink);width:min(94vw,520px);border:1px solid var(--line);border-radius:22px;padding:0;background:#172238;box-shadow:0 25px 80px #000a; } dialog::backdrop { background:#040812aa;backdrop-filter:blur(5px); } dialog form { padding:23px; }.modal-head { justify-content:space-between;margin-bottom:23px; }.close { font-size:26px;background:none;color:var(--muted); }.modal-head p { color:#c0aaff; } label { display:grid;gap:8px;color:#b9c5da;font-size:11px;margin:13px 0; } input { width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#0d1627;color:var(--ink);outline:none; } input:focus { border-color:#9a7cff; }.field-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.primary { width:100%;margin-top:10px;padding:14px;border-radius:11px;background:#a98dff;color:white;font-weight:800; }.primary span { margin-left:6px;font-size:18px; }.security-panel.hidden,.cards.hidden,.create-link.hidden { display:none; }.shield { display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#9a7cff1c;color:#c2adff;font-size:20px; }.safety-hero { display:flex;align-items:center;gap:11px;margin-top:20px;padding:16px;border:1px solid #b499ff33;border-radius:17px;background:linear-gradient(130deg,#9a7cff21,transparent); }.safety-dot { width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime); }.safety-hero b,.safety-hero small { display:block; }.safety-hero b { font-size:14px; }.safety-hero small,.panel-copy { color:var(--muted);font-size:11px; }.safety-hero > span:last-child { margin-left:auto;color:#c0aaff;font:700 20px "DM Mono",monospace; }.panel-copy { margin:15px 0 11px; }.event-list { display:grid;gap:8px; }.event { padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035); }.event-top { display:flex;justify-content:space-between;gap:10px;color:#c6adff;font-size:11px;font-weight:700; }.event time { color:var(--muted);font-weight:400; }.event p { overflow:hidden;margin:8px 0 0;color:#aeb9cb;font-size:11px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis; }.bottom-nav { position:fixed;bottom:13px;left:50%;z-index:8;display:flex;gap:4px;padding:5px;transform:translateX(-50%);border:1px solid var(--line);border-radius:17px;background:#172238e8;box-shadow:0 8px 30px #0008;backdrop-filter:blur(15px); }.nav-item { min-width:78px;padding:8px 13px;border-radius:12px;background:transparent;color:var(--muted);font-size:11px; }.nav-item span { margin-right:5px;font-size:13px; }.nav-item.active { background:#c6ff65;color:#172019;font-weight:800; }.toast { position:fixed;left:50%;bottom:82px;transform:translate(-50%,100px);padding:11px 15px;border:1px solid var(--line);border-radius:12px;background:#273450;color:white;font-size:12px;opacity:0;transition:.25s;z-index:9;white-space:nowrap; }.toast.show { transform:translate(-50%,0);opacity:1; }
@keyframes rise { from {opacity:0;transform:translateY(10px)} } @keyframes pulse { 50% {transform:scale(2);opacity:.3} }
.groups-panel.hidden { display:none; }.group-list { display:grid;gap:10px;margin-top:16px; }.group-card { width:100%;padding:15px;text-align:left;border:1px solid var(--line);border-radius:15px;background:linear-gradient(125deg,rgba(198,255,101,.09),rgba(255,255,255,.025));color:var(--ink); }.group-card span { display:block;color:var(--lime);font:500 9px "DM Mono",monospace;letter-spacing:1px; }.group-card b { display:block;margin-top:6px;font-size:15px; }.group-card small { display:block;margin-top:5px;color:var(--muted);font-size:10px; }.bind-tip { display:grid;gap:6px;margin-top:18px;padding:15px;border:1px dashed #9a7cff66;border-radius:14px;background:#9a7cff0d;color:#bac4d9;font-size:11px;line-height:1.6; }.bind-tip b { color:#c4aeff; }.bind-tip code { color:var(--lime);font-family:"DM Mono",monospace; }
.overview-panel.hidden { display:none; }.health-strip { display:flex;align-items:center;gap:9px;margin-top:18px;padding:12px 14px;border:1px solid #c6ff6540;border-radius:12px;background:#c6ff650c;font-size:12px; }.health-strip small { margin-left:auto;color:var(--muted);font-size:10px; }.metric-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px; }.metric-grid article { padding:13px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035); }.metric-grid span,.quick-title p { display:block;color:var(--muted);font:500 8px "DM Mono",monospace;letter-spacing:.7px; }.metric-grid b { display:block;margin:8px 0 3px;color:var(--lime);font:700 19px "DM Mono",monospace; }.metric-grid small { color:#abb7cb;font-size:9px; }.quick-title { margin:25px 0 10px; }.quick-title p { color:#c4aeff;margin:0 0 4px; }.quick-title h3 { margin:0;font-size:16px; }.quick-actions { display:grid;gap:8px; }.quick-actions button { display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);color:#c5b1ff;text-align:left;font-size:18px; }.quick-actions span { color:var(--ink);font-size:12px;font-weight:700; }.quick-actions small { color:var(--muted);font-size:10px; }