/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0:      #080b12;
  --bg1:      #0d1120;
  --bg2:      #131829;
  --bg3:      #1a2035;
  --line:     rgba(255,255,255,0.06);
  --line2:    rgba(255,255,255,0.1);
  --t0:       #f0eff8;
  --t1:       #9897b8;
  --t2:       #5e5d7a;
  --cyan:     #4fd1c5;
  --cyan-dim: rgba(79,209,197,0.15);
  --amber:    #f6c44a;
  --amber-dim:rgba(246,196,74,0.12);
  --rose:     #f4728a;
  --rose-dim: rgba(244,114,138,0.12);
  --green:    #5af089;
  --green-dim:rgba(90,240,137,0.12);
  --blue:     #60a5fa;
  --blue-dim: rgba(96,165,250,0.12);
  --violet:   #a78bfa;
  --r:        8px;
  --r2:       12px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg0);
  color: var(--t0);
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .4;
}

/* ambient glow */
body::after {
  content: '';
  position: fixed;
  top: -30vh; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(79,209,197,0.05) 0%,
    rgba(96,165,250,0.04) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 100px;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}
.anim   { animation: fadeUp .5s ease both; }
.anim-1 { animation-delay: .05s; }
.anim-2 { animation-delay: .12s; }
.anim-3 { animation-delay: .20s; }
.anim-4 { animation-delay: .28s; }
.anim-5 { animation-delay: .36s; }

/* ── Header ── */
header {
  padding: 64px 0 48px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}
.eyebrow-dot {
  width: 5px; height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform: scale(1); }
  50%      { opacity:.4; transform: scale(.7); }
}
h1 {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--t0);
}
h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--amber) 0%, #fde68a 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--t2);
}

/* ── Section label ── */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line2), transparent);
}

/* ── Card (共通) ── */
.card {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: 20px 24px;
  margin-bottom: 12px;
}

/* ── Badges ── */
.b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.b-amber  { background: var(--amber-dim);  color: var(--amber);  border: 1px solid rgba(246,196,74,.3); }
.b-cyan   { background: var(--cyan-dim);   color: var(--cyan);   border: 1px solid rgba(79,209,197,.3); }
.b-green  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(90,240,137,.3); }
.b-rose   { background: var(--rose-dim);   color: var(--rose);   border: 1px solid rgba(244,114,138,.3); }
.b-violet { background: rgba(167,139,250,.12); color: var(--violet); border: 1px solid rgba(167,139,250,.3); }

/* ── Breadcrumb ── */
.bc { padding: 24px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; font-family: 'DM Mono', monospace; color: var(--t2); }
.bc a { color: var(--t2); text-decoration: none; }
.bc a:hover { color: var(--cyan); }
.bc-sep { opacity: .4; }

/* ── Page section ── */
.section { margin-bottom: 56px; }

/* ── Tabs ── */
.tab-nav-wrap {
  position: relative;
  margin-bottom: 28px;
}
.tab-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line2);
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-scroll-btn {
  position: absolute;
  top: 0;
  height: calc(100% - 1px);
  width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--t2);
  transition: color .15s, opacity .15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tab-scroll-btn:hover { color: var(--cyan); }
.tab-scroll-btn.hidden { opacity: 0; pointer-events: none; }
.tab-scroll-left {
  left: 0;
  background: linear-gradient(90deg, var(--bg0) 60%, transparent);
}
.tab-scroll-right {
  right: 0;
  background: linear-gradient(270deg, var(--bg0) 60%, transparent);
}
.tab-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--t2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--t1); }
.tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Period badge ── */
.period { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t2); background: var(--bg3); border: 1px solid var(--line2); border-radius: 20px; padding: 4px 12px; margin-bottom: 14px; }
.period-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.period-dot.cyan { background: var(--cyan); }
.period-dot.rose { background: var(--rose); }

/* ── Info list ── */
.ilist { list-style: none; }
.ilist li { position: relative; padding: 7px 0 7px 16px; color: var(--t1); border-bottom: 1px solid var(--line); font-size: 13px; }
.ilist li:last-child { border-bottom: none; }
.ilist li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }
.ilist li strong { color: var(--t0); font-weight: 500; }

/* ── Sub heading ── */
.sub { font-size: 12px; font-weight: 700; color: var(--t0); letter-spacing: .05em; text-transform: uppercase; margin: 20px 0 10px; padding-left: 10px; border-left: 2px solid var(--cyan); }
.sub.amber  { border-left-color: var(--amber); }
.sub.rose   { border-left-color: var(--rose); }
.sub.green  { border-left-color: var(--green); }
.sub.violet { border-left-color: var(--violet); }

/* ── Tables ── */
.tbl-wrap { width: 100%; border-radius: var(--r2); overflow-x: auto; border: 1px solid var(--line2); margin-top: 4px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: linear-gradient(90deg, var(--bg3) 0%, rgba(79,209,197,.05) 100%); }
thead th { padding: 11px 14px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--cyan); border-bottom: 1px solid rgba(79,209,197,.2); }
th.c { text-align: center; }
th.lv { width: 70px; }
thead th span, thead th small { white-space: nowrap; }
thead.green th { color: var(--green); border-bottom-color: rgba(90,240,137,.2); }
tbody tr { border-bottom: 1px solid var(--line); transition: background .12s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(odd)  { background: rgba(255,255,255,.012); }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: rgba(79,209,197,.04); }
td { padding: 10px 14px; color: var(--t1); vertical-align: middle; font-size: 13px; }
td.hl { color: var(--t0); font-weight: 600; }
td.c  { text-align: center; }

.tbl-center th,
.tbl-center td { text-align: center; }
.td-border-r { border-right: 1px solid var(--line); }

/* ── Reward grid ── */
.reward-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .reward-grid { grid-template-columns: repeat(4, 1fr); } }
.rcard { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 12px; text-align: center; }
.rcard-val { font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 500; color: var(--amber); line-height: 1.2; margin-bottom: 4px; }
.rcard-label { font-size: 11px; color: var(--t2); line-height: 1.4; }
.rcard-sub { font-size: 10px; color: var(--t2); }

/* ── Callout block ── */
.callout { background: var(--rose-dim); border: 1px solid rgba(244,114,138,.2); border-radius: var(--r2); padding: 14px 18px; display: flex; gap: 12px; font-size: 13px; color: var(--t1); margin-top: 12px; line-height: 1.65; }
.callout-icon { font-size: 16px; flex-shrink: 0; line-height: 1.65; }
.callout strong { color: var(--t0); }

/* ── Notice blocks ── */
.notice { background: var(--amber-dim); border: 1px solid rgba(246,196,74,.3); border-radius: var(--r); padding: 12px 16px; margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.notice.warn { background: var(--rose-dim); border-color: rgba(244,114,138,.3); }
.notice.info { background: var(--cyan-dim); border-color: rgba(79,209,197,.25); }
.notice-icon { flex-shrink: 0; font-size: 14px; }
.notice-text { color: var(--t1); line-height: 1.6; }
.notice-text strong { color: var(--amber); }
.notice.warn .notice-text strong { color: var(--rose); }
.notice.info .notice-text strong { color: var(--cyan); }

/* ── Text utilities ── */
.text-rose  { color: var(--rose); }
.text-amber { color: var(--amber); }
.text-cyan  { color: var(--cyan); }
.mono-cyan  { font-family: 'DM Mono', monospace; color: var(--cyan); }

/* ── Menu grid & cards ── */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 48px;
}
@media (min-width: 560px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
.mcard {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  border-color: rgba(79,209,197,0.3);
}
.mcard-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.mcard-icon.cyan   { background: var(--cyan-dim); }
.mcard-icon.amber  { background: var(--amber-dim); }
.mcard-icon.violet { background: rgba(167,139,250,.12); }
.mcard-icon-img {
  width: 40px; height: 40px;
  border-radius: var(--r);
  object-fit: cover;
  flex-shrink: 0;
}
.mcard-body { flex: 1; min-width: 0; }
.mcard-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t0);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard-desc { font-size: 12px; color: var(--t2); }
.mcard-arrow {
  color: var(--t2);
  font-size: 16px;
  flex-shrink: 0;
  transition: color .18s, transform .18s;
}
.mcard:hover .mcard-arrow { color: var(--cyan); transform: translateX(3px); }

/* ── Pet visual card ── */
.pet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
@media (min-width: 480px) {
  .pet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .pet-grid { grid-template-columns: repeat(4, 1fr); }
}
.pet-grid .pcard {
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pet-grid .pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  border-color: rgba(79,209,197,0.35);
}
.pet-grid .pcard-thumb {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg2);
}
.pet-grid .pcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
  display: block;
}
.pet-grid .pcard:hover .pcard-thumb img {
  transform: scale(1.04);
}
.pet-grid .pcard-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 8px;
}
.pet-grid .pcard-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--t0);
}
.pet-grid .pcard-arrow {
  color: var(--t2);
  font-size: 16px;
  flex-shrink: 0;
  transition: color .18s, transform .18s;
}
.pet-grid .pcard:hover .pcard-arrow { color: var(--cyan); transform: translateX(3px); }

.sec-sublabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: .7;
  margin-bottom: 10px;
  padding-left: 2px;
}
.subsec-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}
@media (min-width: 560px) {
  .subsec-row { flex-direction: row; }
}
.subsec-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.subsec-col .menu-grid {
  margin-bottom: 0;
  grid-template-columns: 1fr;
  flex: 1;
}
.subsec-col .mcard {
  height: 100%;
}

/* ── Card date ── */
.card-dated {
  position: relative;
  padding-bottom: 40px;
}
.card-date {
  position: absolute;
  bottom: 14px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--t2);
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 20px;
  padding: 4px 12px;
}

/* ── Spacing & misc utilities ── */
.note     { font-size: 11px; color: var(--t2); margin-top: 6px; }
.note-xs  { font-size: 9px; font-weight: 400; }
.lead     { font-size: 13px; color: var(--t1); margin-bottom: 10px; }
.mt-sm    { margin-top: 12px; }
.mt-md    { margin-top: 20px; }
.no-border { border-bottom: none; }

/* ── Event index cards ── */
.ev-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  margin-bottom: 10px;
}
.ev-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  border-color: rgba(79,209,197,.3);
}
.ev-card-icon { font-size: 22px; flex-shrink: 0; width: 44px; text-align: center; }
.ev-card-body { flex: 1; min-width: 0; }
.ev-card-period { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--t2); margin-bottom: 3px; }
.ev-card-title { font-size: 14px; font-weight: 700; color: var(--t0); margin-bottom: 3px; }
.ev-card-desc { font-size: 12px; color: var(--t2); }
.ev-card-arrow { color: var(--t2); font-size: 18px; flex-shrink: 0; transition: color .18s, transform .18s; }
.ev-card:hover .ev-card-arrow { color: var(--cyan); transform: translateX(3px); }
.ev-card-ended { opacity: .55; }
.ev-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  border-radius: 20px;
  padding: 3px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ev-status-chip.live {
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(246,196,74,.3);
}
.ev-status-chip.over {
  color: var(--t2);
  background: var(--bg3);
  border: 1px solid var(--line2);
}
.ev-status-chip .ev-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ev-status-chip.live .ev-status-dot { animation: pulse 2s ease infinite; }

/* ── Probability badges ── */
.prob-badge { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--t2); }
.prob-sure  { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; }
.prob-sure.amber { color: var(--amber); }
.prob-sure.cyan  { color: var(--cyan); }

/* ── Info grid (dungeon / event detail) ── */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
.icard { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 16px; }
.icard-label { font-size: 10px; color: var(--t2); margin-bottom: 5px; }
.icard-val { font-size: 13px; font-weight: 700; color: var(--t0); line-height: 1.4; }

/* ── Table head gradient variants ── */
thead.amber th,
thead.login-amber th,
thead.login th { color: var(--amber); border-bottom-color: rgba(246,196,74,.2); }
thead.amber tr,
thead.login-amber tr,
thead.login tr { background: linear-gradient(90deg, var(--bg3) 0%, rgba(246,196,74,.05) 100%); }
thead.rose th  { color: var(--rose);  border-bottom-color: rgba(244,114,138,.2); }
thead.rose tr  { background: linear-gradient(90deg, var(--bg3) 0%, rgba(244,114,138,.05) 100%); }
thead.survival th,
thead.login-rose th { color: var(--rose); border-bottom-color: rgba(248,113,113,.2); }
thead.survival tr,
thead.login-rose tr { background: linear-gradient(90deg, var(--bg3) 0%, rgba(248,113,113,.05) 100%); }
thead.green tr { background: linear-gradient(90deg, var(--bg3) 0%, rgba(90,240,137,.05) 100%); }

/* ── Login / date table ── */
td.day  { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t2); text-align: center; width: 14%; }
td.date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t2); white-space: nowrap; }

/* ── Collection effects ── */
.effect-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.effect-row:last-child { border-bottom: none; }
.effect-num { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t2); min-width: 28px; }
.effect-label { color: var(--t1); flex: 1; }
.collection-group { font-size: 12px; color: var(--t2); margin: 20px 0 8px; }
.collection-group:first-child { margin-top: 0; }

/* ── 0513 event detail custom blocks ── */
.spawn-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.spawn-chip { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(246,196,74,.3); border-radius: 6px; padding: 5px 14px; }

.card-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.ctype { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r2); padding: 14px 16px; }
.ctype-name { font-size: 13px; font-weight: 700; color: var(--t0); margin-bottom: 6px; }
.ctype-desc { font-size: 12px; color: var(--t1); line-height: 1.6; }
.ctype-cost { display: inline-block; margin-top: 6px; font-family: 'DM Mono', monospace; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(244,114,138,.1); color: var(--rose); border: 1px solid rgba(244,114,138,.25); }

.pass-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.ptier { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); padding: 10px 12px; text-align: center; }
.ptier-name { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.ptier-name.free  { color: var(--cyan); }
.ptier-name.royal { color: var(--amber); }
.ptier-name.plus  { color: var(--violet); }
.ptier-desc { font-size: 11px; color: var(--t2); }

.info-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.info-grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .info-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.text-gray { color: var(--t2); }

/* ── Update history ── */
.ulist { list-style: none; padding: 0; margin: 0; }
.uitem a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line2); text-decoration: none; color: inherit; transition: color .16s; }
.uitem a:hover { color: var(--cyan); }
.uitem-title { flex: 1; font-size: 13px; }
.uitem-arr { color: var(--t2); font-size: 16px; flex-shrink: 0; transition: color .16s, transform .16s; }
.uitem a:hover .uitem-arr { color: var(--cyan); transform: translateX(2px); }
.umore { display: block; text-align: right; font-size: 12px; color: var(--t2); text-decoration: none; margin-top: 10px; transition: color .16s; }
.umore:hover { color: var(--cyan); }
.ulabel-date, .ugroup-date { display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--cyan); background: rgba(79,209,197,.1); border: 1px solid rgba(79,209,197,.3); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
.ugroup { margin-bottom: 24px; }