/* ===== Rimuru Design System — Unified CDN CSS ===== */
/* Hosted at https://this-is-my-cdn.example.com/rimuru/cdn.css */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Noto+Serif+JP:wght@400;700&family=Sour+Gummy:wght@900&display=swap');

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

/* === Variables === */
:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #21262d;
  --slime-body: #5ac8d8;
  --slime-shade: #3aa8bb;
  --slime-shine: #8de8f4;
  --slime-eye: #f5c842;
  --slime-pupil: #1a1a2e;
  --accent: #5ac8d8;
  --accent2: #f5c842;
  --text-main: #e8edf3;
  --text-muted: #7a8898;
  --text-jp: #5ac8d8;
  --red: #e05c6a;
}

/* === Body Base === */
body {
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* === Particles === */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.p {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slime-body);
  opacity: 0;
  animation: float-up linear infinite;
}
.p:nth-child(1)  { left: 10%;  animation-duration: 18s; animation-delay: 0s;   width:4px;  height:4px; }
.p:nth-child(2)  { left: 25%;  animation-duration: 22s; animation-delay: 3s;   width:6px;  height:6px; background: var(--accent2); }
.p:nth-child(3)  { left: 40%;  animation-duration: 20s; animation-delay: 6s;   }
.p:nth-child(4)  { left: 55%;  animation-duration: 16s; animation-delay: 1.5s; width:3px;  height:3px; }
.p:nth-child(5)  { left: 70%;  animation-duration: 24s; animation-delay: 5s;   width:7px;  height:7px; background: var(--slime-shine); }
.p:nth-child(6)  { left: 85%;  animation-duration: 19s; animation-delay: 8s;   width:4px;  height:4px; background: var(--accent2); }
.p:nth-child(7)  { left: 18%;  animation-duration: 26s; animation-delay: 2s;   }
.p:nth-child(8)  { left: 65%;  animation-duration: 21s; animation-delay: 7s;   width:5px;  height:5px; }

@keyframes float-up {
  0%   { transform: translateY(110vh) scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}

/* === Corner Decorations === */
.corner {
  position: fixed;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  color: var(--border);
  letter-spacing: 0.15em;
  z-index: 1;
  pointer-events: none;
}
.corner-tl { top: 20px; left: 24px; }
.corner-br { bottom: 20px; right: 24px; }

/* === Shared Animations === */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slime-bounce {
  0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
  30%      { transform: translateY(-6px) scaleX(0.96) scaleY(1.04); }
  60%      { transform: translateY(0) scaleX(1.03) scaleY(0.97); }
  80%      { transform: translateY(-2px) scaleX(0.98) scaleY(1.02); }
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}

.fade-in {
  animation: fade-in 0.5s ease both;
}

/* === JP Label === */
.jp-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  color: var(--slime-body);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border: 1px solid var(--slime-body);
  padding: 6px 18px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: transparent;
}
.jp-label:hover {
  background: var(--slime-body);
  color: var(--bg);
}

/* === Buttons === */
.btn {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  border: 2px solid var(--slime-body);
  background: transparent;
  color: var(--slime-body);
}
.btn:active { transform: scale(0.97); }
.btn:hover {
  background: var(--slime-body);
  color: var(--bg);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--slime-body);
}

.btn-primary {
  background: var(--slime-body);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--slime-shine);
  border-color: var(--slime-shine);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--slime-body);
  color: var(--slime-body);
}

/* === Form Inputs === */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  border-radius: 6px;
  transition: border-color 0.2s;
}
input:focus {
  border-color: var(--slime-body);
}

/* === Status Messages === */
.status {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 12px;
  display: none;
  border: 1px solid;
  border-radius: 6px;
  line-height: 1.6;
}
.status.success { display: block; border-color: rgba(90,200,216,.3); background: rgba(90,200,216,.06); }
.status.loading { display: block; border-color: rgba(245,200,66,.3); background: rgba(245,200,66,.06); }
.status.error   { display: block; border-color: rgba(224,92,106,.3); background: rgba(224,92,106,.06); }
.status strong { font-size: 13px; display: block; margin-bottom: 2px; }

/* === Dropzone === */
.dropzone {
  border: 1px dashed var(--border);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}
.dropzone:hover,
.dropzone.dragover {
  border-color: var(--slime-body);
  background: rgba(90,200,216,.04);
}

.btn-block {
  width: 100%;
  padding: 10px;
}

/* === Small/Utility === */
.sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}