:root{
  --bg:#0b0d1a; --bg2:#12162a; --card:#171c33; --card2:#1e2440;
  --line:#2a3157; --txt:#eef1ff; --dim:#8b93bd; --dim2:#5f6790;
  --accent:#ffc978; --accent2:#ff9d5c;
  --violet:#8b7bff; --cyan:#5fd3f3; --green:#4ade80; --pink:#ff7ba8; --red:#ff6b6b;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#1b1f3d 0%,var(--bg) 60%) fixed;
  color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  font-size:15px;line-height:1.45;overscroll-behavior-y:none}
#app{max-width:520px;margin:0 auto;min-height:100%;padding-bottom:88px;position:relative}
button,input,select,textarea{font-family:inherit;font-size:15px;color:inherit}
button{cursor:pointer;border:none;background:none}

.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(11,13,26,.94),rgba(11,13,26,.72));
  padding:14px 18px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.top h1{margin:0;font-size:19px;letter-spacing:-.3px;font-weight:650;display:flex;align-items:center;gap:8px}
.top .sub{color:var(--dim);font-size:12.5px;margin-top:2px}
.pill{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;white-space:nowrap}
.pill.local{background:rgba(139,147,189,.15);color:var(--dim)}
.pill.cloud{background:rgba(74,222,128,.13);color:var(--green)}

.wrap{padding:16px 16px 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card.tight{padding:13px 14px}
.h{font-size:11.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--dim2);font-weight:700;margin:20px 4px 9px}
.h:first-child{margin-top:4px}
.h.row{display:flex;justify-content:space-between;align-items:center}

/* moon level */
.moonbig{display:flex;align-items:center;gap:16px}
.moonbig .g{font-size:52px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,201,120,.35))}
.moonbig .i{flex:1;min-width:0}
.moonbig .i b{font-size:19px;font-weight:650;display:block;letter-spacing:-.2px}
.moonbig .i span{font-size:12.5px;color:var(--dim)}
.moonbig .tr{height:6px;background:var(--card2);border-radius:4px;margin-top:9px;overflow:hidden}
.moonbig .tr div{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s}

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 10px;text-align:center}
.stat b{display:block;font-size:21px;font-weight:700;letter-spacing:-.5px}
.stat span{font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.6px}

.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 12px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 14px;border-radius:100px;background:var(--card);
  border:1px solid var(--line);font-size:13px;color:var(--dim);white-space:nowrap}
.chip.on{background:var(--txt);color:#0b0d1a;border-color:var(--txt);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ty{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 8px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.15s}
.ty:active{transform:scale(.95)}
.ty.on{border-color:var(--accent);background:#241f2e}
.ty i{font-size:23px;font-style:normal;line-height:1}
.ty span{font-size:11.5px;color:var(--dim);line-height:1.25}
.ty.on span{color:var(--txt);font-weight:600}

label.f{display:block;margin-bottom:13px}
label.f>span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--dim2);font-weight:700;margin-bottom:6px}
.inp{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;color:var(--txt);outline:none}
.inp:focus{border-color:var(--accent)}
textarea.inp{min-height:84px;resize:vertical;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#241703;
  font-weight:700;padding:15px;border-radius:13px;font-size:15.5px}
.btn:active{opacity:.85}
.btn.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line);font-weight:600}
.btn.sm{padding:11px;font-size:14px}
.btn.danger{background:var(--card);color:var(--red);border:1px solid var(--line);font-weight:600}

.rate{display:flex;gap:7px}
.rate button{flex:1;padding:11px 0;border-radius:10px;background:var(--bg2);
  border:1px solid var(--line);color:var(--dim);font-size:17px}
.rate button.on{background:#2e2517;border-color:var(--accent);color:var(--accent)}

/* visibility selector */
.vis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vis button{padding:11px 6px;border-radius:11px;background:var(--bg2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--dim)}
.vis button i{font-size:17px;font-style:normal;line-height:1}
.vis button span{font-size:11px;font-weight:600}
.vis button.on{border-color:var(--accent);background:#241f2e;color:var(--txt)}

.entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px;display:flex;gap:13px}
.entry .ic{flex:0 0 42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:20px;background:var(--card2)}
.entry .bd{flex:1;min-width:0}
.entry .t1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.entry .t1 b{font-size:15px;font-weight:640}
.entry .t1 em{font-style:normal;font-size:11px;color:var(--dim2);white-space:nowrap}
.entry .meta{font-size:12.5px;color:var(--dim);margin-top:3px}
.entry .note{font-size:13.5px;color:#c3c9ea;margin-top:7px;line-height:1.5;
  border-left:2px solid var(--line);padding-left:10px;white-space:pre-wrap}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:center}
.tag{font-size:10.5px;padding:3px 8px;border-radius:100px;background:var(--card2);color:var(--dim)}
.tag.v{font-weight:700;letter-spacing:.3px}

/* live map */
.map{position:relative;height:250px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,#141833,#0e1226);border:1px solid var(--line);margin-bottom:12px}
.map .grid-bg{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px}
.blip{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  color:#0b0d1a;transition:.4s;cursor:pointer}
.blip::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid currentColor;opacity:.28;animation:pulse 2.6s infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.4}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.maplbl{position:absolute;bottom:9px;left:11px;font-size:10.5px;color:var(--dim2);letter-spacing:.4px}

.venue{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:9px}
.venue .r1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.venue b{font-size:14.5px;font-weight:640}
.venue .heat{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;white-space:nowrap}
.venue .r2{font-size:12px;color:var(--dim);margin-top:5px}
.hbar{height:4px;border-radius:3px;background:var(--card2);margin-top:9px;overflow:hidden}
.hbar div{height:100%;border-radius:3px}
.vibe{display:inline-block;font-size:11px;padding:2px 8px;border-radius:100px;
  background:rgba(139,123,255,.14);color:#b9b2ff;margin-top:7px;font-weight:600}

.trend{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.trend:last-child{border-bottom:none}
.trend i{font-size:20px;font-style:normal;width:26px;text-align:center}
.trend .n{flex:1;font-size:14px;font-weight:600}
.trend .c{font-size:12px;color:var(--dim)}
.trend .d{font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px}
.up{color:var(--green);background:rgba(74,222,128,.11)}
.dn{color:var(--dim);background:var(--card2)}

.lvl{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.lvl:last-child{border-bottom:none}
.lvl .dot{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px}
.lvl .nm{flex:1;min-width:0}
.lvl .nm b{display:block;font-size:14px;font-weight:620}
.lvl .nm .s{font-size:11.5px;color:var(--dim2)}
.lvl .nm .tr{height:4px;background:var(--card2);border-radius:3px;margin-top:5px;overflow:hidden}
.lvl .nm .tr div{height:100%;border-radius:3px}
.lvl .lv{text-align:right;font-size:24px}

.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tgl:last-child{border-bottom:none}
.tgl .l{flex:1;min-width:0}
.tgl .l b{display:block;font-size:14px;font-weight:600}
.tgl .l span{font-size:12px;color:var(--dim2);line-height:1.5;display:block;margin-top:2px}
.sw{flex:0 0 46px;height:27px;border-radius:100px;background:var(--card2);position:relative;transition:.2s;border:1px solid var(--line)}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--dim);transition:.2s}
.sw.on{background:rgba(255,201,120,.2);border-color:var(--accent)}
.sw.on::after{left:21px;background:var(--accent)}

.nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(13,16,32,.93);
  backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:9px 0 max(9px,env(safe-area-inset-bottom))}
.navin{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--dim2)}
.nb i{font-size:19px;font-style:normal;line-height:1;filter:grayscale(1) opacity(.55);transition:.15s}
.nb span{font-size:9.5px}
.nb.on{color:var(--accent)}
.nb.on i{filter:none}

.empty{text-align:center;padding:44px 24px;color:var(--dim2)}
.empty .e{font-size:38px;margin-bottom:12px;opacity:.5}
.empty p{margin:6px 0 0;font-size:13.5px;line-height:1.6}
.note-sm{font-size:11.5px;color:var(--dim2);line-height:1.55;padding:0 4px;margin-top:10px}
.banner{border-radius:12px;padding:11px 13px;font-size:12px;line-height:1.55;margin-bottom:12px}
.banner.v{background:rgba(139,123,255,.1);border:1px solid rgba(139,123,255,.3);color:#b9b2ff}
.banner.g{background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.28);color:#9ae6b4}
.banner.a{background:rgba(255,201,120,.09);border:1px solid rgba(255,201,120,.28);color:#ffd9a0}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:96px;z-index:99;
  background:var(--txt);color:#0b0d1a;padding:12px 20px;border-radius:100px;font-weight:650;
  font-size:14px;opacity:0;transition:.28s;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px;margin-bottom:14px}
.seg button{flex:1;padding:9px;border-radius:8px;font-size:12.5px;color:var(--dim);font-weight:600}
.seg button.on{background:var(--card2);color:var(--txt)}
.dz{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;font-size:13px}
.lock{text-align:center;padding:30px 20px}
.lock .e{font-size:34px;opacity:.45;margin-bottom:10px}
.lock .prog{height:6px;background:var(--card2);border-radius:4px;margin:14px 0 8px;overflow:hidden}
.lock .prog div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px}
.rank{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:none}
.rank .p{width:26px;font-weight:800;font-size:14px;color:var(--dim2);text-align:center}
.rank .p.top{color:var(--accent)}
.rank .nm{flex:1;font-size:14px;font-weight:600}
.rank .nm span{display:block;font-size:11.5px;color:var(--dim2);font-weight:400}

/* ============================================================
   PREMIUM PASS — day/night theming, eclipse mark, motion
   Night is the default and the brand. Day exists because a
   lifestyle app gets opened at 8am, and a black screen in
   sunlight reads as "unfinished" rather than "moody".
   ============================================================ */

:root{
  --ease:cubic-bezier(.22,.8,.26,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow-md:0 6px 22px -8px rgba(0,0,0,.55);
  --shadow-lg:0 18px 48px -16px rgba(0,0,0,.65);
  --ring:rgba(255,201,120,.30);
}

/* ---------- DAY ---------- */
html[data-theme="day"]{
  --bg:#f7f5f2; --bg2:#ffffff; --card:#ffffff; --card2:#f0ece6;
  --line:#e3ddd4; --txt:#191713; --dim:#6b6459; --dim2:#98907f;
  --accent:#c8791f; --accent2:#e0913a;
  --violet:#6d5ae0; --cyan:#1f93bd; --green:#1f9254; --pink:#d4467e; --red:#d13b3b;
  --shadow-sm:0 1px 2px rgba(60,50,35,.06);
  --shadow-md:0 6px 22px -10px rgba(60,50,35,.20);
  --shadow-lg:0 18px 46px -18px rgba(60,50,35,.26);
  --ring:rgba(200,121,31,.22);
}
html[data-theme="day"] body{
  background:radial-gradient(1200px 620px at 50% -12%, #fffaf0 0%, var(--bg) 62%) fixed;
}
html[data-theme="day"] .top{
  background:linear-gradient(180deg,rgba(247,245,242,.96),rgba(247,245,242,.78));
}
html[data-theme="day"] .nav{ background:rgba(255,255,255,.93); }
html[data-theme="day"] .card,
html[data-theme="day"] .entry,
html[data-theme="day"] .venue,
html[data-theme="day"] .stat{ box-shadow:var(--shadow-sm); }
html[data-theme="day"] .btn.ghost{ background:#fff; }
html[data-theme="day"] .chip.on{ background:var(--txt); color:#fff; }
html[data-theme="day"] .toast{ background:#191713; color:#fff; }
html[data-theme="day"] .map{ background:linear-gradient(160deg,#fffdf8,#f2ede4); }
html[data-theme="day"] .nb i{ filter:grayscale(1) opacity(.45); }

body{ transition:background-color .45s var(--ease), color .3s var(--ease); }

/* ---------- ECLIPSE MARK ---------- */
.brand{ display:flex; align-items:center; gap:10px; }
.eclipse{ width:26px; height:26px; flex:0 0 26px; display:block; }
.eclipse .corona{ transform-origin:center; animation:corona 6s ease-in-out infinite; }
@keyframes corona{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.95;transform:scale(1.06)} }
/* day = partial eclipse, night = total */
html[data-theme="day"] .eclipse .moon{ transform:translateX(-5px); }
.eclipse .moon{ transition:transform .6s var(--ease); }
.wordmark{ font-size:19px; font-weight:650; letter-spacing:-.35px; }

/* ---------- THEME TOGGLE ---------- */
.themebtn{
  width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:15px; background:var(--card);
  border:1px solid var(--line); transition:.18s var(--ease);
}
.themebtn:active{ transform:scale(.92); }

/* ---------- MOTION + DEPTH ---------- */
.card,.entry,.venue,.stat{ box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.venue:active{ transform:scale(.995); }
.btn{ transition:transform .12s var(--ease), opacity .15s var(--ease), box-shadow .2s var(--ease); }
.btn:active{ transform:scale(.985); }
.btn:not(.ghost):not(.danger){ box-shadow:0 6px 18px -8px var(--ring); }
.chip,.ty,.tag,.nb{ transition:.16s var(--ease); }
.ty:focus-visible,.btn:focus-visible,.chip:focus-visible,.inp:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
#view{ animation:rise .28s var(--ease); }
@keyframes rise{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.nb.on i{ transform:translateY(-1px) scale(1.06); }

/* ---------- DESKTOP: stop the lonely column ---------- */
@media (min-width:860px){
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(680px 380px at 12% 12%, rgba(139,123,255,.10), transparent 60%),
      radial-gradient(620px 420px at 88% 78%, rgba(255,201,120,.09), transparent 62%);
  }
  #app{
    position:relative; z-index:1; margin:22px auto 30px; max-width:460px;
    border:1px solid var(--line); border-radius:26px; overflow:hidden;
    box-shadow:var(--shadow-lg); min-height:calc(100vh - 52px);
    background:var(--bg);
  }
  .top{ border-radius:26px 26px 0 0; }
  .nav{
    position:sticky; left:auto; right:auto; bottom:0;
    max-width:460px; margin:0 auto; border-radius:0 0 26px 26px;
  }
}

/* ---------- notch / home indicator ---------- */
@supports(padding:max(0px)){
  .top{ padding-top:max(14px, env(safe-area-inset-top)); }
}

/* ---------- loading skeleton ---------- */
.skel{ border-radius:12px; background:linear-gradient(90deg,var(--card) 25%,var(--card2) 37%,var(--card) 63%);
  background-size:400% 100%; animation:shimmer 1.3s infinite linear; }
@keyframes shimmer{ from{background-position:100% 0} to{background-position:-100% 0} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}