* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--luna-text, rgba(220,200,255,0.9));
}

canvas { position: fixed; inset: 0; z-index: 0; }

#time-top {
  position: fixed; top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--luna-text-muted); white-space: nowrap; transition: opacity 0.2s;
}
#time-top.hidden { opacity: 0; pointer-events: none; }
#tt { color: var(--luna-text); }
.tdiv { color: var(--luna-text-faint); }

#default-content {
  position: fixed; top: 0; left: 0; right: 0; bottom: 50px;
  z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; pointer-events: none; transition: opacity 0.2s;
}
#default-content.hidden { opacity: 0; pointer-events: none; display: none; }

#wordmark {
  display: flex;
  font-size: clamp(88px, 18vw, 172px);
  font-weight: 900; letter-spacing: -0.055em; line-height: 1;
  color: var(--luna-text, #fff);
}
#wordmark span { display: inline-block; animation: sway 3s ease-in-out infinite; }
#wordmark span:nth-child(1) { animation-delay: 0s; }
#wordmark span:nth-child(2) { animation-delay: 0.18s; }
#wordmark span:nth-child(3) { animation-delay: 0.36s; }
#wordmark span:nth-child(4) { animation-delay: 0.54s; }
@keyframes sway {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.08em); }
  100% { transform: translateY(0); }
}

#rm-msg {
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 400;
  color: var(--luna-text-faint); letter-spacing: 0.02em; text-align: center;
  animation: msgfade 1s ease 0.4s both;
}
@keyframes msgfade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

#search-wrap {
  pointer-events: all;
  display: flex; align-items: center;
  width: min(500px, 84vw);
  background: var(--luna-accent-faint);
  border: 1px solid var(--luna-border);
  border-radius: 100px; overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
  animation: msgfade 1s ease 0.6s both;
}
#search-wrap:focus-within {
  border-color: var(--luna-accent-dim);
  box-shadow: 0 0 0 3px var(--luna-accent-faint), 0 8px 32px rgba(0,0,0,0.3);
}
#search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; font-family: 'Inter', system-ui, sans-serif;
  color: var(--luna-text); padding: 13px 20px;
  user-select: text; -webkit-user-select: text;
}
#search-input::placeholder { color: var(--luna-text-faint); }
#search-btn {
  width: 46px; height: 46px; border: none; background: transparent;
  color: var(--luna-accent-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s; flex-shrink: 0;
}
#search-btn:hover { color: var(--luna-accent); }
#search-btn svg, #search-btn i svg { width: 16px; height: 16px; stroke: currentColor; }

#page-frame {
  position: fixed; top: 0; left: 0; right: 0; bottom: 50px;
  width: 100%; height: calc(100% - 50px);
  z-index: 5; border: none; display: none;
}
#page-frame.visible { display: block; }

#nav-wrap {
  position: fixed; bottom: 62px; left: 16px; z-index: 400;
}

#nav-toggle {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--luna-bg-2);
  border: 1px solid var(--luna-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.14s, border-color 0.14s, transform 0.1s;
  backdrop-filter: blur(20px); position: relative; z-index: 1;
}
#nav-toggle:hover { background: var(--luna-surface); border-color: var(--luna-border-2); transform: scale(1.05); }
#nav-toggle:active { transform: scale(0.97); }
#nav-toggle img { width: 26px; height: 26px; object-fit: contain; display: block; }
.logo-text { font-size: 18px; font-weight: 900; color: var(--luna-accent-glow); }

#nav-panel {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  background: var(--luna-bg-2);
  border: 1px solid var(--luna-border);
  border-radius: 14px; padding: 8px;
  backdrop-filter: blur(40px) saturate(1.3);
  box-shadow: 0 20px 55px rgba(0,0,0,0.85), 0 0 0 1px var(--luna-accent-faint);
  width: 310px; transform-origin: bottom left;
  transition: opacity 0.18s cubic-bezier(0.2,0,0.2,1), transform 0.18s cubic-bezier(0.2,0,0.2,1);
}
#nav-wrap.closed #nav-panel {
  opacity: 0; transform: scale(0.92) translateY(8px); pointer-events: none;
}

.nav-btn {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 5px;
  border-radius: 10px; border: 1px solid var(--luna-border);
  background: var(--luna-surface);
  cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.1s;
  user-select: none; padding: 10px 12px; min-height: 70px;
  flex: 1; min-width: 70px; position: relative; overflow: hidden;
}
.nav-btn:hover { background: var(--luna-surface-2); border-color: var(--luna-border-2); transform: scale(1.03); }
.nav-btn:active { transform: scale(0.97); }
.nav-btn.active {
  background: var(--luna-btn-active);
  border-color: var(--luna-btn-border);
  box-shadow: 0 0 0 1px var(--luna-accent-faint), 0 3px 16px rgba(0,0,0,0.4);
}

.nav-btn-ico { position: absolute; top: 9px; right: 10px; display: flex; align-items: center; }
.nav-btn-ico svg, .nav-btn-ico i svg {
  width: 22px; height: 22px; stroke: var(--luna-accent-dim); stroke-width: 1.6; transition: stroke 0.12s;
}
.nav-btn:hover .nav-btn-ico svg,
.nav-btn:hover .nav-btn-ico i svg { stroke: var(--luna-accent); }
.nav-btn.active .nav-btn-ico svg,
.nav-btn.active .nav-btn-ico i svg { stroke: var(--luna-accent-glow); }

.nav-btn-name { font-size: 12px; font-weight: 600; color: var(--luna-text-muted); letter-spacing: 0.01em; transition: color 0.12s; }
.nav-btn:hover .nav-btn-name { color: var(--luna-text); }
.nav-btn.active .nav-btn-name { color: var(--luna-accent-glow); }

.nav-btn.has-sub { padding: 0; height: auto; flex-direction: column; align-items: stretch; }
.nav-btn-main { display: flex; align-items: center; gap: 7px; padding: 0 13px; height: 36px; cursor: pointer; }
.sub-arrow { width: 9px; height: 9px; stroke: var(--luna-text-faint); stroke-width: 2; flex-shrink: 0; margin-left: 2px; transition: transform 0.18s, stroke 0.12s; }
.nav-btn.has-sub.sub-open .sub-arrow { transform: rotate(90deg); }
.nav-btn:hover .sub-arrow { stroke: var(--luna-accent); }
.nav-sub { display: none; flex-direction: row; gap: 3px; border-top: 1px solid var(--luna-border); padding: 5px 6px 6px; }
.nav-btn.has-sub.sub-open .nav-sub { display: flex; }
.nav-sub-item { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--luna-text-muted); cursor: pointer; transition: background 0.11s, color 0.11s; white-space: nowrap; }
.nav-sub-item:hover { background: var(--luna-surface-2); color: var(--luna-accent-glow); }
.nav-sub-item svg { width: 12px; height: 12px; stroke: var(--luna-text-faint); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke 0.11s; }
.nav-sub-item:hover svg { stroke: var(--luna-accent); }

.bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: var(--luna-bg-2); backdrop-filter: blur(20px);
  border-top: 1px solid var(--luna-border); z-index: 300;
}
.bar a { font-size: 12px; font-weight: 600; color: var(--luna-text-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.15s; cursor: pointer; }
.bar a:hover { color: var(--luna-text); }
.bar-div { color: var(--luna-text-faint); }

#nav-blur { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(12px) saturate(1.2); z-index: 390; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
#nav-blur.show { opacity: 1; pointer-events: all; }

#media-sub-panel { display: none; flex-direction: column; gap: 5px; width: 100%; }
#media-sub-panel.show { display: flex; animation: subSlideIn 0.2s cubic-bezier(0.2,0,0.2,1); }
@keyframes subSlideIn { from { opacity:0; transform: translateX(10px); } to { opacity:1; transform: none; } }
#nav-panel .main-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; animation: panelFadeIn 0.18s ease; }
#nav-panel .main-buttons.hide { display: none; }
@keyframes panelFadeIn { from { opacity:0; transform: translateX(-8px); } to { opacity:1; transform: none; } }

.nav-back-btn {
  display: flex; align-items: center; gap: 7px; padding: 0 12px; height: 32px; border-radius: 8px;
  border: 1px solid var(--luna-border); background: var(--luna-surface);
  cursor: pointer; font-size: 11px; font-weight: 700; color: var(--luna-text-muted);
  transition: background 0.12s, color 0.12s; user-select: none; width: fit-content;
}
.nav-back-btn:hover { background: var(--luna-surface-2); color: var(--luna-text); }
.nav-back-btn svg, .nav-back-btn i svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; }
.nav-back-btn i { display: flex; align-items: center; }

.nav-sub-full { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.nav-sub-full .nav-sub-item {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--luna-border); background: var(--luna-surface);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 5px; font-size: 11px; font-weight: 700; color: var(--luna-text-muted);
  cursor: pointer; position: relative; overflow: hidden; min-height: 70px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-sub-full .nav-sub-item:hover { background: var(--luna-surface-2); border-color: var(--luna-border-2); color: var(--luna-accent-glow); }
.nav-sub-full .nav-sub-item svg,
.nav-sub-full .nav-sub-item i svg { position: absolute; top: 9px; right: 10px; width: 22px; height: 22px; stroke: var(--luna-accent-dim); stroke-width: 1.6; transition: stroke 0.12s; }
.nav-sub-full .nav-sub-item i { position: absolute; top: 9px; right: 10px; display: flex; }
.nav-sub-full .nav-sub-item:hover svg,
.nav-sub-full .nav-sub-item:hover i svg { stroke: var(--luna-accent); }

#nav-toggle .x-icon { display: none; pointer-events: none; }
#nav-toggle .logo-img { display: block; }
#nav-wrap:not(.closed) #nav-toggle .x-icon { display: flex; }
#nav-wrap:not(.closed) #nav-toggle .logo-img { display: none; }
#nav-wrap:not(.closed) #nav-toggle .logo-text { display: none !important; }
#nav-toggle .x-icon svg { width: 18px; height: 18px; stroke: var(--luna-accent-glow); stroke-width: 2.5; }

#cl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); z-index: 1000; display: flex; align-items: center; justify-content: center; }
#cl-box { background: var(--luna-bg-2); border: 1px solid var(--luna-border-2); border-radius: 16px; padding: 28px 32px 24px; max-width: 420px; width: 90%; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
#cl-header { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
#cl-title { font-size:18px; font-weight:900; letter-spacing:-0.03em; color: var(--luna-text); }
#cl-version { font-size:12px; font-weight:600; color: var(--luna-accent-glow); background: var(--luna-accent-faint); border:1px solid var(--luna-border); border-radius:100px; padding:2px 10px; }
#cl-date { font-size:12px; color: var(--luna-text-muted); margin-bottom:18px; }
#cl-body { font-size:13.5px; line-height:1.75; color: var(--luna-text-muted); white-space:pre-wrap; max-height:280px; overflow-y:auto; margin-bottom:20px; }
#cl-body::-webkit-scrollbar { width:4px; }
#cl-body::-webkit-scrollbar-thumb { background: var(--luna-accent-dim); border-radius:2px; }
#cl-close { width:100%; padding:10px; background: var(--luna-btn-bg); border:1px solid var(--luna-btn-border); border-radius:8px; color: var(--luna-accent-glow); font-size:13px; font-weight:600; font-family:'Inter',system-ui,sans-serif; cursor:pointer; transition:background 0.14s; }
#cl-close:hover { background: var(--luna-btn-hover); }