:root{
  --bg:#0a0a0a;
  --border:rgba(255,255,255,0.08);
  --text:#f0f0f0;
  --muted:rgba(255,255,255,0.58);
  --accent:#00ff88;
  --accent2:#00e676;
  --radius:16px;
  --radius-lg:24px;

  --topbar-safe: 104px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.container{max-width:1240px;margin:0 auto;padding:0 24px}

.glass-card{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.glass-card:hover{
  border-color:rgba(0,255,136,0.20);
  box-shadow:0 10px 44px rgba(0,255,136,0.06);
  transform:translateY(-2px);
}

.page-scroll{
  position:fixed;
  inset:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  z-index:1;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.page-scroll::-webkit-scrollbar{width:0;height:0}

.bg-effects{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.starfield{position:absolute;inset:0;opacity:.42}
.glow{position:absolute;width:640px;height:640px;border-radius:999px;filter:blur(130px);opacity:.28}
.g1{left:-240px;top:-260px;background:radial-gradient(circle,var(--accent),transparent 70%)}
.g2{right:-260px;top:25%;background:radial-gradient(circle,rgba(0,230,118,0.42),transparent 70%);opacity:.20}
.g3{left:25%;bottom:-360px;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.14}

.particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;animation:particleFloat linear infinite}
.particle:nth-child(1){left:10%;animation-duration:18s;animation-delay:0s}
.particle:nth-child(2){left:25%;animation-duration:22s;animation-delay:2s}
.particle:nth-child(3){left:40%;animation-duration:16s;animation-delay:4s}
.particle:nth-child(4){left:55%;animation-duration:20s;animation-delay:1s}
.particle:nth-child(5){left:70%;animation-duration:24s;animation-delay:3s}
.particle:nth-child(6){left:85%;animation-duration:17s;animation-delay:5s}
.particle:nth-child(7){left:15%;animation-duration:21s;animation-delay:6s}
.particle:nth-child(8){left:60%;animation-duration:19s;animation-delay:7s}
@keyframes particleFloat{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:.40}
  50%{opacity:.15;transform:translateY(50vh) scale(1)}
  90%{opacity:.28}
  100%{transform:translateY(-10vh) scale(.5);opacity:0}
}

.brand-float{
  position:fixed;
  top:16px;
  left:16px;
  right:16px;
  z-index:130;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  max-width:1240px;
  margin:0 auto;
}
.brand-float-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.logo-px{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:"Press Start 2P",system-ui;
  font-size:12px;
  color:#0a0a0a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 28px rgba(0,255,136,0.16);
}
.brand-name{font-family:"Press Start 2P",system-ui;font-size:12px;line-height:1.2}
.brand-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:48vw;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:var(--radius);
  font-weight:800;font-size:13px;
  border:1px solid var(--border);
  cursor:pointer;transition:all .2s ease;
  background:transparent;color:var(--text);
  text-decoration:none;
}
.btn:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.04)}
.btn-x{
  border-color:rgba(0,255,136,0.18);
}
.btn-x:hover{
  border-color:rgba(0,255,136,0.32);
  box-shadow:0 10px 44px rgba(0,255,136,0.06);
}

.page{position:relative;z-index:1}
.section{
  padding:calc(var(--topbar-safe) + 18px) 0 60px;
}
.grid-2{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.panel{padding:18px}

.cal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.cal-title{font-family:"Press Start 2P",system-ui;font-size:11px;color:rgba(255,255,255,0.86)}
.cal-unit{margin-left:8px;font-size:12px;font-weight:800;color:rgba(255,255,255,0.55)}
.cal-total{margin-top:10px;font-size:22px;font-weight:900;color:rgba(0,255,136,0.9)}
.cal-sides{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800}
.cal-side.green{color:rgba(0,255,136,0.85)}
.cal-side.red{color:rgba(255,100,120,0.9);text-align:right;width:100%}
.cal-bar{margin-top:10px;height:4px;border-radius:999px;overflow:hidden;display:flex;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)}
.cal-bar-green{background:rgba(0,255,136,0.85);width:50%}
.cal-bar-red{background:rgba(255,90,120,0.85);width:50%}
.cal-right{display:flex;align-items:center;gap:10px;user-select:none}
.cal-month{font-weight:900;color:rgba(255,255,255,0.85);font-size:13px}
.cal-nav{
  width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.85);cursor:pointer;transition:all .15s ease;
}
.cal-nav:hover{border-color:rgba(0,255,136,0.25);box-shadow:0 10px 26px rgba(0,255,136,0.06);transform:translateY(-1px)}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:6px 0 10px;color:rgba(255,255,255,0.45);font-size:12px;font-weight:900}
.cal-weekdays>div{padding:0 4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-tile{
  border-radius:14px;border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  min-height:72px;padding:10px 10px 8px;position:relative;
}
.day-tile .num{position:absolute;top:8px;left:10px;font-size:11px;font-weight:900;color:rgba(255,255,255,0.35)}
.day-tile .val{margin-top:20px;font-size:13px;font-weight:900;color:rgba(255,255,255,0.78)}
.day-tile.pos{background:rgba(0,255,136,0.07);border-color:rgba(0,255,136,0.18)}
.day-tile.neg{background:rgba(255,90,120,0.06);border-color:rgba(255,90,120,0.18)}
.day-tile.zero{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.07)}
.day-tile.blank{background:transparent;border-color:transparent;box-shadow:none}
.cal-footer{margin-top:12px;color:rgba(255,255,255,0.55);font-size:12px;font-weight:800}


.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-title{font-family:"Press Start 2P",system-ui;font-size:11px}
.panel-sub{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}
.thought-box{
  border-radius:16px;border:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.28);
  padding:12px;height:520px;overflow:auto
}
.thought-line{font-size:12px;line-height:1.55;color:rgba(255,255,255,0.78);padding:8px 6px;border-bottom:1px dashed rgba(255,255,255,0.06)}
.thought-line.sentinel{color:rgba(255,255,255,0.50);font-style:italic}
.hint{margin-top:12px;font-size:12px;color:rgba(255,255,255,0.52);line-height:1.55}


.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal--delay-1{transition-delay:.15s}


.left-stack{display:flex;flex-direction:column;gap:18px}


.tx-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.tx-header-right{display:flex;align-items:flex-start;gap:12px}
.tx-title{font-family:"Press Start 2P",system-ui;font-size:11px}
.tx-sub{margin-top:8px;color:rgba(255,255,255,0.55);font-size:12px;font-weight:700}
.tx-meta{color:rgba(255,255,255,0.55);font-size:12px;font-weight:800;padding-top:2px}

.collapsible{
  overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, transform .2s ease;
  max-height:1200px;
  opacity:1;
  transform:translateY(0);
}
.collapsible.is-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
}

.tx-shell{position:relative}

.tx-table-wrap{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.22);
  overflow:auto;
  max-height:340px;
  padding-right:54px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tx-table-wrap::-webkit-scrollbar{width:0;height:0}

.tx-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
.tx-table thead th{
  text-align:left;
  font-size:12px;
  color:rgba(255,255,255,0.55);
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky;
  top:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
}
.tx-table tbody td{
  padding:12px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
  font-size:12px;
  color:rgba(255,255,255,0.78);
  vertical-align:top;
}
.tx-empty{text-align:center;color:rgba(255,255,255,0.55)}

.tx-pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  font-weight:900;font-size:11px;
}
.tx-pill.in{ border-color: rgba(0,255,136,0.22); color: rgba(0,255,136,0.9); }
.tx-pill.out{ border-color: rgba(255,90,120,0.22); color: rgba(255,90,120,0.95); }
.tx-pill.self{ border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.75); }
.tx-pill.other{ border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }

.tx-hash{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:11px;
  color:rgba(255,255,255,0.65);
}

.scrollnav{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:120;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  user-select:none;
  pointer-events:auto;
}
.scrollbtn{
  width:38px;height:38px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  transition:all .15s ease;
  font-weight:900;
  backdrop-filter:blur(12px);
}
.scrollbtn:hover{
  border-color:rgba(0,255,136,0.25);
  box-shadow:0 10px 26px rgba(0,255,136,0.06);
  transform:translateY(-1px);
}
.scrolltrack{
  width:12px;height:210px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.25);
  position:relative;overflow:hidden;
}
.scrollthumb{
  width:100%;height:34px;border-radius:999px;
  background:linear-gradient(180deg, rgba(0,255,136,0.85), rgba(0,230,118,0.65));
  box-shadow:0 0 18px rgba(0,255,136,0.14);
  position:absolute;top:0;left:0;
}

@media (max-width:900px){
  .site-scrollnav{ display:none; }
}

.tx-scrollnav{
  position:absolute;
  right:10px;
  top:10px;
  transform:none;
  z-index:5;
  display:none;
}
.tx-scrollnav .scrolltrack{ height:170px; }

@media (max-width:720px){
  :root{ --topbar-safe: 132px; } 

  .container{ padding:0 16px; }

  .brand-float{
    top:12px; left:12px; right:12px;
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .brand-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .brand-sub{ max-width:100%; }

  .grid-2{ grid-template-columns:1fr; }
  .panel{ padding:14px; }

  .cal-grid{ gap:8px; }
  .day-tile{ min-height:64px; }

  .thought-box{ height:340px; }

  .tx-table{ min-width:640px; }
  .tx-table-wrap{ padding-right:12px; }
  .tx-scrollnav{ display:none !important; }
}

@media (max-width:420px){
  :root{ --topbar-safe: 142px; }
  .brand-actions{ grid-template-columns:1fr; }
}

html, body{
  width:100%;
  overflow-x:hidden;
}

.grid-2 > *{
  min-width:0;
}

.panel, .glass-card, .left-stack, .page, .section{
  min-width:0;
}

.brand, .brand-sub, .tx-meta, .panel-title, .panel-sub{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cal-grid{
  width:100%;
  min-width:0;
}
.day-tile{
  min-width:0;
}
.day-tile .val{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:720px){

  .cal-grid{ gap:6px; }
  .cal-weekdays{ gap:6px; }

  .day-tile{
    padding:8px 8px 7px;
    min-height:58px;
  }
  .day-tile .num{ font-size:10px; }
  .day-tile .val{ font-size:12px; }


  .tx-table-wrap{ padding-right:12px !important; }
}

.tx-table-wrap{
  max-width:100%;
  overflow-x:auto;
}

.logo-px{
  width:42px;
  height:42px;
  border-radius:12px;
  overflow:hidden;    
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.02);
}

.logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;  
  display:block;
}

/* ===== CALENDAR LOADING OVERLAY + SKELETON ===== */
.cal-panel{
  position:relative;
}

.cal-loading{
  position:absolute;
  inset:0;
  border-radius:var(--radius-lg);
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.cal-panel.is-loading .cal-loading{
  opacity:1;
  pointer-events:auto; /* blocks clicks while loading */
}

.cal-loading-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(10,10,10,0.55);
  box-shadow:0 16px 60px rgba(0,0,0,0.35);
}

.cal-loading-text{
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,0.78);
  letter-spacing:.2px;
}

/* spinner */
.spinner{
  width:26px;
  height:26px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.18);
  border-top-color:rgba(0,255,136,0.9);
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* Optional: make calendar content "skeleton-y" while loading */
.cal-panel.is-loading #calTotal,
.cal-panel.is-loading #posLine,
.cal-panel.is-loading #negLine,
.cal-panel.is-loading #monthLabel,
.cal-panel.is-loading #streakLine{
  color:transparent !important;
  position:relative;
}

.cal-panel.is-loading #calTotal::after,
.cal-panel.is-loading #posLine::after,
.cal-panel.is-loading #negLine::after,
.cal-panel.is-loading #monthLabel::after,
.cal-panel.is-loading #streakLine::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  height:12px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.06)
  );
  background-size:200% 100%;
  animation:shimmer 1.1s ease-in-out infinite;
}

.cal-panel.is-loading #calTotal::after{ height:20px; max-width:130px; }
.cal-panel.is-loading #monthLabel::after{ max-width:160px; }
.cal-panel.is-loading #posLine::after,
.cal-panel.is-loading #negLine::after{ max-width:160px; }
.cal-panel.is-loading #streakLine::after{ max-width:260px; }

@keyframes shimmer{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

.cal-panel{ position:relative; }
.cal-loading{
  position:absolute;
  inset:0;
  display:none;              /* JS toggles to flex */
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  z-index:5;
}
.cal-loading-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.spinner{
  width:22px;height:22px;border-radius:999px;
  border:2px solid rgba(255,255,255,0.18);
  border-top-color: rgba(0,255,136,0.85);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.cal-loading-text{ font-size:12px; color:rgba(255,255,255,0.72); font-weight:800; }