/* ===================================================================
   Apple Liquid Glass Design System
   Inspired by iOS 26 / macOS Tahoe — WWDC 2025
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-bg-heavy: rgba(255, 255, 255, 0.2);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-border-subtle: rgba(255, 255, 255, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-blur: 10px;
  --glass-radius: 24px;
  --glass-radius-sm: 16px;
  --glass-radius-xs: 12px;
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
  --glass-shadow-elevated: 0 16px 64px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06);

  --text-primary: rgba(255, 255, 255, 0.96);
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-tertiary: rgba(255, 255, 255, 0.58);
  --text-on-accent: #ffffff;

  --accent: #007AFF;
  --accent-hover: #0066D6;
  --accent-gradient: linear-gradient(135deg, #007AFF, #5856D6);
  --success: #34C759;
  --error: #FF3B30;

  --wallpaper-a: #0a1020;
  --wallpaper-b: #10203a;
  --wallpaper-c: #1f0f35;
  --wallpaper-d: #102c4b;
  --wallpaper-e: #050913;
  --wallpaper-overlay: linear-gradient(180deg, rgba(4, 8, 18, 0.08), rgba(4, 8, 18, 0.24));
  --wallpaper-image: url('/1.jpg');

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-smooth);
}

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

html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: default;
}

/* ── Animated Wallpaper Background ─────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    var(--wallpaper-overlay),
    var(--wallpaper-image) center center / cover no-repeat;
  transform: none;
  animation: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 72, 183, 0.18) 0%, transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(43, 244, 255, 0.16) 0%, transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(125, 255, 180, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.04) 38%, rgba(0,0,0,0.12) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: none;
}

@keyframes cityDrift {
  0% {
    transform: scale(1.03) translate3d(0%, 0%, 0);
  }
  50% {
    transform: scale(1.06) translate3d(-1.2%, -0.8%, 0);
  }
  100% {
    transform: scale(1.05) translate3d(1%, 0.8%, 0);
  }
}

@keyframes neonPulse {
  0% {
    opacity: 0.72;
    filter: saturate(1) brightness(1);
  }
  35% {
    opacity: 0.92;
    filter: saturate(1.15) brightness(1.05);
  }
  70% {
    opacity: 0.8;
    filter: saturate(1.05) brightness(0.98);
  }
  100% {
    opacity: 0.94;
    filter: saturate(1.18) brightness(1.08);
  }
}

@keyframes fogDrift {
  0% {
    transform: translate3d(-2%, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, -1.5%, 0) scale(1.05);
  }
}

@keyframes lightSweep {
  0%,
  100% {
    transform: translate3d(-3%, 0, 0);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(3%, -1%, 0);
    opacity: 0.58;
  }
}

/* Hide cyberpunk scene elements — they are not part of Liquid Glass */
.scene,
.liquid-defs,
.glass-defs,
#cursorFxRoot,
.cursor-triangle,
.cursor-petal {
  display: none !important;
}

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1 {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ── Liquid Glass Panel (core component) ──────────────────────── */
.liquid-card,
.liquid-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  border: 1.2px solid rgba(255, 255, 255, 0.42);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%) brightness(1.06);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.liquid-card:hover,
.liquid-panel:hover {
  box-shadow: var(--glass-shadow-elevated);
}

/* Glass inner highlight — top edge refraction line */
.liquid-card::before,
.liquid-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0.7), transparent);
  z-index: 10;
  pointer-events: none;
  animation: top-glow 4s ease-in-out infinite;
}

/* Glass panel subtle overlay */
.liquid-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 35%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* Hide old liquid card decoration sub-elements */
.liquid-card__surface,
.liquid-card__refraction,
.liquid-card__caustic,
.liquid-card__gloss,
.liquid-card__outline,
.liquid-card__sheen,
.liquid-card__edge {
  display: none !important;
}

/* ── Compact Card (Login) — Full Liquid Glass ─────────────────── */
.liquid-card {
  width: min(100%, 760px);
}

.compact-card {
  width: min(92%, 440px);
  position: relative;
  overflow: visible;
  border-radius: 32px;
  isolation: isolate;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.compact-card:hover {
  transform: none;
  box-shadow: none;
}

.compact-card::before,
.compact-card::after {
  display: none;
}

.login-shell {
  width: min(92%, 440px);
  min-height: 0;
}

.liquid-glass-mounted .login-shell {
  opacity: 0;
  pointer-events: none;
}

.login-glass-shell {
  background: rgba(255, 255, 255, 0.04);
}

.login-fx-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.login-splash-ring,
.login-splash-drop,
.login-splash-crown,
.login-splash-foam,
.login-splash-spark {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.login-splash-crown {
  width: 156px;
  height: 82px;
  background:
    radial-gradient(closest-side at 12% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.18) 42%, transparent 68%),
    radial-gradient(closest-side at 30% 100%, rgba(193, 246, 255, 0.92) 0%, rgba(150, 228, 255, 0.18) 48%, transparent 72%),
    radial-gradient(closest-side at 50% 100%, rgba(255, 255, 255, 0.98) 0%, rgba(165, 231, 255, 0.22) 46%, transparent 72%),
    radial-gradient(closest-side at 70% 100%, rgba(196, 241, 255, 0.92) 0%, rgba(150, 228, 255, 0.18) 48%, transparent 72%),
    radial-gradient(closest-side at 88% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.18) 42%, transparent 68%),
    repeating-conic-gradient(from 198deg at 50% 100%, rgba(170, 238, 255, 0.0) 0deg 10deg, rgba(205, 249, 255, 0.86) 11deg 14deg, rgba(170, 238, 255, 0) 16deg 24deg);
  clip-path: ellipse(48% 52% at 50% 100%);
  filter: drop-shadow(0 0 12px rgba(102, 223, 255, 0.4));
  animation: splash-crown 0.82s cubic-bezier(0.22, 0.7, 0.18, 1) forwards;
}

.login-splash-foam {
  width: 132px;
  height: 18px;
  background:
    radial-gradient(circle at 10% 55%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 24% 42%, rgba(205, 246, 255, 0.82) 0%, rgba(205, 246, 255, 0) 24%),
    radial-gradient(circle at 38% 58%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 52% 40%, rgba(190, 236, 255, 0.82) 0%, rgba(190, 236, 255, 0) 25%),
    radial-gradient(circle at 66% 58%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 80% 45%, rgba(199, 242, 255, 0.82) 0%, rgba(199, 242, 255, 0) 24%),
    radial-gradient(circle at 92% 58%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 24%);
  filter: blur(0.4px) drop-shadow(0 0 10px rgba(111, 222, 255, 0.28));
  animation: splash-foam 0.72s ease-out forwards;
}

.login-splash-ring {
  width: 18px;
  height: 10px;
  border-radius: 999px;
  border: 1.6px solid rgba(157, 239, 255, 0.82);
  border-top-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 18px rgba(90, 219, 255, 0.28);
  animation: splash-ring 0.72s ease-out forwards;
}

.login-splash-ring--large {
  width: 22px;
  height: 12px;
  border-width: 1.2px;
  border-color: rgba(123, 222, 255, 0.52);
  box-shadow: 0 0 28px rgba(103, 228, 255, 0.24);
  animation-duration: 0.9s;
}

.login-splash-drop {
  width: 10px;
  height: 14px;
  border-radius: 60% 60% 52% 52%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.62) 26%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), hsla(var(--drop-hue, 196), 100%, 76%, 0.76));
  box-shadow: 0 0 14px rgba(78, 202, 255, 0.26), 0 0 24px rgba(149, 233, 255, 0.16);
  transform: translate(-50%, -50%) rotate(var(--drop-rot, 0deg)) scale(var(--drop-scale, 1));
  animation: splash-drop 1.02s cubic-bezier(0.18, 0.7, 0.22, 1) forwards;
  animation-delay: var(--drop-delay, 0s);
}

.login-splash-spark {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(191, 241, 255, 0.8) 45%, rgba(191, 241, 255, 0) 78%);
  box-shadow: 0 0 12px rgba(157, 239, 255, 0.42);
  animation: splash-spark 0.74s ease-out forwards;
  animation-delay: var(--spark-delay, 0s);
}

.login-splash-mist {
  position: fixed;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(208, 248, 255, 0.7) 0%, rgba(122, 219, 255, 0.34) 46%, rgba(122, 219, 255, 0) 78%);
  filter: blur(3px);
  animation: splash-mist 0.96s ease-out forwards;
}

.login-content {
  display: flex;
  flex-direction: column;
}

/* ── Liquid Glass Animations ──────────────────────────────────── */
@keyframes lg-refract {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(5%, -3%) scale(1.04);
    opacity: 0.85;
  }
  50% {
    transform: translate(-3%, 4%) scale(0.98);
    opacity: 1.1;
  }
  75% {
    transform: translate(4%, 2%) scale(1.02);
    opacity: 0.9;
  }
}

@keyframes lg-caustic {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate(4%, -5%) scale(1.1);
    opacity: 0.8;
  }
  40% {
    transform: translate(-3%, 3%) scale(0.95);
    opacity: 1.1;
  }
  60% {
    transform: translate(5%, 2%) scale(1.05);
    opacity: 0.9;
  }
  80% {
    transform: translate(-2%, -2%) scale(0.98);
    opacity: 1.05;
  }
}

@keyframes lg-sheen {
  0% {
    transform: translateX(-25%) rotate(-2deg);
    opacity: 0.6;
  }
  40% {
    transform: translateX(18%) rotate(4deg);
    opacity: 1;
  }
  80% {
    transform: translateX(5%) rotate(1deg);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-25%) rotate(-2deg);
    opacity: 0.6;
  }
}

@keyframes top-glow {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  }
  20% {
    opacity: 0.9;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
  40% {
    opacity: 1;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
  }
  60% {
    opacity: 0.9;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
  80% {
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}

@keyframes specular-flicker {
  0%, 100% {
    opacity: 0.6;
    border-image-slice: 1;
  }
  25% {
    opacity: 0.75;
    border-image-slice: 1.2;
  }
  50% {
    opacity: 0.5;
    border-image-slice: 0.9;
  }
  75% {
    opacity: 0.8;
    border-image-slice: 1.1;
  }
}

@keyframes splash-ring {
  0% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.55);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(10.6);
  }
}

@keyframes splash-crown {
  0% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(0.72);
  }
  58% {
    opacity: 0.88;
    transform: translate(-50%, calc(-50% - 18px)) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 32px)) scale(1.28);
  }
}

@keyframes splash-foam {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 4px)) scale(1.22);
  }
}

@keyframes splash-drop {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--drop-rot, 0deg)) scale(var(--drop-scale, 1));
  }
  55% {
    opacity: 1;
    transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y)))
      rotate(calc(var(--drop-rot, 0deg) * 1.2)) scale(var(--drop-scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drop-x) * 1.24), calc(-50% + 10px))
      rotate(calc(var(--drop-rot, 0deg) * 1.4)) scale(calc(var(--drop-scale, 1) * 0.72));
  }
}

@keyframes splash-spark {
  0% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.3);
  }
}

@keyframes splash-mist {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.8);
  }
  45% {
    opacity: 0.54;
    transform: translate(-50%, calc(-50% - 20px)) scale(2.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 42px)) scale(3.3);
  }
}

/* ── Card Content ──────────────────────────────────────────────── */
.liquid-card__content {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  padding: 48px;
}

.compact-card__content {
  padding: 30px 38px 38px;
}

.compact-card h1,
.login-content h1 {
  font-size: clamp(28px, 5vw, 36px);
  text-align: center;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

/* ── Page Layouts ──────────────────────────────────────────────── */
.login-body,
.memo-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 100vh;
}

.login-stage {
  width: 100%;
  min-height: calc(100vh - 48px);
  display: grid;
  place-items: center;
}

.memo-stage {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 20px 0;
}

.login-stage::before,
.memo-stage::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 30%, rgba(255,255,255,0.14) 0%, transparent 18%),
    radial-gradient(ellipse at 68% 18%, rgba(103, 215, 255, 0.12) 0%, transparent 22%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 72, 183, 0.08) 0%, transparent 28%),
    radial-gradient(ellipse at 76% 68%, rgba(255,255,255,0.08) 0%, transparent 20%);
  filter: blur(22px);
  opacity: 0.7;
  animation: none;
}

.login-stage::after,
.memo-stage::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, transparent 42%, rgba(43, 244, 255, 0.1) 49%, transparent 56%, transparent 100%),
    linear-gradient(295deg, transparent 0%, transparent 46%, rgba(255, 72, 183, 0.08) 50%, transparent 56%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: none;
}

/* ── Login Form ────────────────────────────────────────────────── */
.login-form {
  display: grid;
  gap: 20px;
  width: 100%;
}

.field span,
.memo-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

input[type='text'],
input[type='password'],
.memo-textarea {
  width: 100%;
  border: 1.5px solid rgba(255, 255, 255, 0.52);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.34) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
}

input[type='text']::placeholder,
input[type='password']::placeholder,
.memo-textarea::placeholder {
  color: var(--text-tertiary);
}

input[type='text']:focus,
input[type='password']:focus,
.memo-textarea:focus {
  border-color: rgba(0, 122, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  box-shadow:
    0 0 0 4px rgba(0, 122, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 14px rgba(0, 0, 0, 0.06);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.primary-button,
.ghost-button,
.upload-button,
.text-button {
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), opacity var(--transition-fast);
}

.primary-button,
.upload-button {
  padding: 13px 24px;
  font-size: 15px;
}

.primary-button {
  position: relative;
  overflow: hidden;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
  box-shadow:
    0 6px 20px rgba(0, 122, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Inner glass light streak on the button */
.primary-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
  pointer-events: none;
}

.primary-button:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 8px 28px rgba(0, 122, 255, 0.38),
    0 3px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.primary-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 10px rgba(0, 122, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.primary-button--hero {
  margin-top: 10px;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  letter-spacing: 0.01em;
}

.ghost-button,
.upload-button {
  color: var(--text-primary);
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.2);
}

.ghost-button:hover,
.upload-button:hover {
  background: rgba(0, 122, 255, 0.14);
  transform: translateY(-1px);
}

.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.text-button {
  padding: 4px 8px;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  border-radius: 8px;
}

.text-button:hover {
  background: rgba(0, 122, 255, 0.08);
}

.text-button.delete {
  color: var(--text-primary);
}

.text-button.delete:hover {
  background: rgba(255, 59, 48, 0.08);
}

/* ── Messages ──────────────────────────────────────────────────── */
.form-message,
.status-message {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 22px;
  transition: color var(--transition-fast);
}

.form-message[data-type='error'],
.status-message[data-type='error'] {
  color: var(--text-primary);
}

.form-message[data-type='success'],
.status-message[data-type='success'] {
  color: var(--text-primary);
}

.compact-card .form-message,
.login-content .form-message {
  margin-top: 16px;
  text-align: center;
}

/* ── Memo Hero ─────────────────────────────────────────────────── */
.memo-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.memo-hero h1 {
  font-size: clamp(28px, 4vw, 38px);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Account Badge ─────────────────────────────────────────────── */
.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Kicker / Eyebrow ──────────────────────────────────────────── */
.hero-kicker,
.panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.15);
}

/* ── Memo Grid ─────────────────────────────────────────────────── */
.memo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr);
  gap: 20px;
}

/* ── Panels ────────────────────────────────────────────────────── */
.editor-panel,
.overview-panel {
  padding: 28px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.scope-hint {
  max-width: 280px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
  line-height: 1.5;
}

.hero-copy,
.overview-copy,
.upload-tip,
.status-message,
.form-message,
.scope-hint {
  color: var(--text-secondary);
  line-height: 1.6;
}

.hero-copy {
  max-width: 600px;
  margin-bottom: 20px;
  font-size: 16px;
}

/* ── Memo Textarea ─────────────────────────────────────────────── */
.memo-textarea {
  min-height: 240px;
  resize: vertical;
  margin: 8px 0 20px;
  line-height: 1.8;
  border-radius: var(--glass-radius-sm);
}

/* ── Upload Section ────────────────────────────────────────────── */
.upload-panel {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: 24px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.upload-row,
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.upload-tip {
  font-size: 13px;
}

.stack-section + .stack-section {
  margin-top: 20px;
}

#fileInput {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ── Attachment Grid ───────────────────────────────────────────── */
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.attachment-grid.empty-state,
.overview-list.empty-state {
  min-height: 60px;
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

.attachment-card,
.overview-card {
  border-radius: var(--glass-radius-sm);
  border: 1.5px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.attachment-card:hover,
.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.attachment-preview {
  width: 100%;
  height: 120px;
  display: block;
  object-fit: cover;
  border-radius: var(--glass-radius-xs);
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), rgba(88, 86, 214, 0.06));
  margin-bottom: 10px;
}

.attachment-preview--file {
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.attachment-name {
  font-weight: 600;
  font-size: 14px;
  word-break: break-word;
  color: var(--text-primary);
}

.attachment-meta,
.overview-card__stamp,
.overview-card__empty {
  margin: 4px 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.attachment-actions,
.overview-card__files {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Overview ──────────────────────────────────────────────────── */
.overview-list {
  display: grid;
  gap: 14px;
}

.overview-card__heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.overview-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.overview-card__text {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
}

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(0, 122, 255, 0.06);
  border: 1px solid rgba(0, 122, 255, 0.15);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.file-pill:hover {
  background: rgba(0, 122, 255, 0.12);
  transform: translateY(-1px);
}

/* ── Action Row ────────────────────────────────────────────────── */
.action-row {
  margin-top: 20px;
}

/* ── Animated Light Orbs (background ambiance) ─────────────────── */
@keyframes float-orb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
  }
  50% {
    transform: translate(-10px, 15px) scale(0.98);
  }
  75% {
    transform: translate(20px, 10px) scale(1.03);
  }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .memo-grid {
    grid-template-columns: 1fr;
  }

  .scope-hint {
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .login-stage,
  .memo-stage {
    width: 100%;
  }

  .compact-card {
    width: 100%;
  }

  .liquid-card__content,
  .compact-card__content {
    padding: 28px 22px 24px;
  }

  .memo-hero,
  .editor-panel,
  .overview-panel {
    padding: 20px 18px;
  }

  h1 {
    font-size: clamp(28px, 10vw, 40px);
  }

  .memo-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-heading {
    flex-direction: column;
  }

  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .attachment-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Smooth entrance animation ─────────────────────────────────── */
.login-stage,
.memo-stage {
  animation: fadeInUp 0.6s var(--ease-smooth) both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Selection styling ─────────────────────────────────────────── */
::selection {
  background: rgba(0, 122, 255, 0.2);
  color: var(--text-primary);
}

/* ── Scrollbar styling ─────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}