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

/* Variables */
:root {
  --bg:          #07070f;
  --bg-2:        #0d0d18;
  --surface:     rgba(255,255,255,0.04);
  --surface-2:   rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.09);
  --border-warm: rgba(255,179,0,0.3);

  /* WCAG AA — min 4.5:1 on #07070f */
  --text-1:      #f0ede8;                      /* ~18:1 */
  --text-2:      rgba(240,237,232,0.72);        /* ~10:1 */
  --text-3:      rgba(240,237,232,0.48);        /* ~6.5:1 large text AA */

  --amber:       #FFB300;
  --orange:      #FF5722;
  --grad:        linear-gradient(135deg, #FFB300, #FF5722);

  --radius-sm:   4px;
  --radius:      7px;
  --radius-lg:   12px;

  --font:        'Manrope', system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
  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.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Typography */
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
p { line-height: 1.7; }
a { color: inherit; text-decoration: none; }

/* Gradient Text */
.grad-text {
  background: linear-gradient(135deg, #FFB300 0%, #FF5722 50%, #FFB300 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 5s ease infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Navigation */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s;
}
.nav-link:hover { color: var(--text-1); }

.lang-toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-btn {
  padding: 5px 11px;
  cursor: pointer;
  color: var(--text-3);
  transition: color 0.2s, background 0.2s;
  font-family: var(--font);
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.lang-btn.active { background: var(--surface-2); color: var(--text-1); }

/* Background Orbs — richer & animated */
.bg-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orb { position: absolute; border-radius: 50%; }

.orb-1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle at center,
    rgba(255,160,0,0.22) 0%, rgba(255,130,0,0.09) 40%, transparent 70%);
  top: -200px; right: -200px;
  filter: blur(35px);
  animation: d1 22s ease-in-out infinite;
}
.orb-2 {
  width: 640px; height: 640px;
  background: radial-gradient(circle at center,
    rgba(255,80,40,0.19) 0%, rgba(255,100,40,0.07) 45%, transparent 70%);
  bottom: -120px; left: -160px;
  filter: blur(40px);
  animation: d2 27s ease-in-out infinite;
}
.orb-3 {
  width: 440px; height: 440px;
  background: radial-gradient(circle at center,
    rgba(255,179,0,0.15) 0%, transparent 70%);
  top: 40%; left: 30%;
  filter: blur(50px);
  animation: d3 18s ease-in-out infinite;
}
.orb-4 {
  width: 270px; height: 270px;
  background: radial-gradient(circle at center,
    rgba(255,100,40,0.24) 0%, transparent 70%);
  top: 16%; right: 16%;
  filter: blur(44px);
  animation: d4 13s ease-in-out infinite;
}
.orb-5 {
  width: 1000px; height: 380px;
  background: radial-gradient(ellipse at center,
    rgba(200,80,0,0.08) 0%, transparent 70%);
  top: 32%; left: -8%;
  filter: blur(60px);
  animation: d5 36s ease-in-out infinite;
}

@keyframes d1 {
  0%,100% { transform: translate(0,0) scale(1);       opacity:.88; }
  25%      { transform: translate(-40px,55px) scale(1.08); opacity:1; }
  50%      { transform: translate(30px,-40px) scale(.94); opacity:.72; }
  75%      { transform: translate(50px,25px) scale(1.05);  opacity:.9; }
}
@keyframes d2 {
  0%,100% { transform: translate(0,0) scale(1);        opacity:.78; }
  33%      { transform: translate(65px,-30px) scale(1.12); opacity:.96; }
  66%      { transform: translate(-35px,60px) scale(.88);  opacity:.6; }
}
@keyframes d3 {
  0%,100% { transform: translate(0,0) scale(1);        opacity:.65; }
  50%      { transform: translate(-35px,-55px) scale(1.22); opacity:.88; }
}
@keyframes d4 {
  0%,100% { transform: translate(0,0) scale(1);        opacity:.72; }
  40%      { transform: translate(25px,40px) scale(1.3);    opacity:1; }
  80%      { transform: translate(-20px,-25px) scale(.8);   opacity:.44; }
}
@keyframes d5 {
  0%,100% { transform: translate(0,0) scaleX(1);  opacity:.5; }
  50%      { transform: translate(80px,-20px) scaleX(1.15); opacity:.72; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity .2s, transform .15s var(--ease-spring), box-shadow .2s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  padding: 13px 24px;
}
.btn-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 28px rgba(255,120,40,.32); }
.btn-primary:active { transform:translateY(0); opacity:1; }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 10px 18px;
  font-size: 13px;
}
.btn-ghost:hover { background:var(--surface-2); color:var(--text-1); }
.btn-link {
  background: none; border: none;
  color: var(--amber);
  font-family: var(--font);
  font-size: 14px; font-weight: 500;
  cursor: pointer; padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255,179,0,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.btn-link:hover { text-decoration-color: rgba(255,179,0,.7); }

/* Inputs */
.input {
  font-family: var(--font);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  padding: 13px 16px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
  width: 100%;
}
.input::placeholder { color: var(--text-3); }
.input:focus {
  border-color: var(--border-warm);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px rgba(255,179,0,.09);
}
.input.error-field { border-color: rgba(255,80,80,.5); }
.input.error-field:focus { box-shadow: 0 0 0 3px rgba(255,80,80,.1); }

@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.shake { animation: shake .35s var(--ease-out); }

/* Field group */
.field-group { display:flex; flex-direction:column; gap:5px; }
.field-label {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  letter-spacing: .4px; display: flex; align-items: center; gap: 6px;
}
.field-error { font-size:12px; color:rgba(255,110,90,1); font-weight:500; min-height:16px; }

/* Input with suffix */
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap .input { padding-right:44px; }
.input-suffix {
  position:absolute; right:12px;
  color:var(--text-3); cursor:pointer;
  transition:color .2s; background:none; border:none;
  padding:4px; font-size:14px; line-height:1;
  display:flex; align-items:center;
}
.input-suffix:hover { color:var(--text-2); }

textarea.input { resize:vertical; min-height:90px; line-height:1.6; }

/* Tooltip */
.tooltip-wrap { position:relative; display:inline-flex; align-items:center; }
.tooltip-icon {
  width:15px; height:15px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-3); font-size:9px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .2s, color .2s; user-select:none; flex-shrink:0;
}
.tooltip-icon:hover { border-color:var(--border-warm); color:var(--amber); }
.tooltip-box {
  position:absolute; bottom:calc(100% + 8px); left:50%;
  background:#1a1a28; border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 13px; font-size:12px; color:var(--text-2); line-height:1.55;
  width:200px; pointer-events:none;
  opacity:0; transform:translateX(-50%) translateY(4px);
  transition:opacity .2s, transform .2s var(--ease-out);
  z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.tooltip-box::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1a1a28;
}
.tooltip-wrap:hover .tooltip-box,
.tooltip-wrap.open .tooltip-box { opacity:1; transform:translateX(-50%) translateY(0); }

/* Alpha Badge */
.badge-alpha {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,179,0,.32); border-radius:var(--radius-sm);
  padding:4px 10px; font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--amber); background:rgba(255,179,0,.07);
}
.badge-alpha::before {
  content:''; display:block; width:5px; height:5px;
  background:var(--amber); border-radius:50%;
  animation:pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)}
}

/* Form status */
.form-status {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 20px; border-radius:var(--radius);
  font-size:14px; font-weight:500; text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s var(--ease-out);
  pointer-events:none;
}
.form-status.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.form-status.success { background:rgba(255,179,0,.08); border:1px solid rgba(255,179,0,.22); color:var(--amber); }
.form-status.duplicate,
.form-status.info    { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-2); }
.form-status.error   { background:rgba(255,80,80,.07); border:1px solid rgba(255,80,80,.22); color:rgba(255,120,100,1); }
.form-status.closed  { background:rgba(255,130,50,.06); border:1px solid rgba(255,130,50,.2); color:var(--text-2); }
.form-status .status-sub { font-size:12px; opacity:.75; font-weight:400; line-height:1.5; }

/* Spinner */
.spinner {
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
  display:none; flex-shrink:0;
}
.is-loading .spinner { display:block; }
.is-loading .btn-label { display:none; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Footer */
.footer {
  padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--border);
  background:var(--bg-1);
}
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-link  { font-size:12px; color:var(--text-3); transition:color .2s; }
.footer-link:hover { color:var(--text-2); }
.footer-copy  { font-size:12px; color:var(--text-3); }

/* Index flex layout */
body.page-index { display:flex; flex-direction:column; min-height:100vh; }
body.page-index main { flex:1; }

/* App mode — clean WebView, no chrome */
.app-mode .nav { display:none !important; }
.app-mode .footer { display:none !important; }
.app-mode .page-container { padding-top:24px; }
.app-mode { padding-bottom:0 !important; }

/* Legal page layout */
.page-container {
  position:relative; z-index:10;
  max-width:720px; margin:0 auto;
  padding:120px 32px 80px;
}
.page-header { margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid var(--border); }
.page-header .back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-3); margin-bottom:24px; transition:color .2s;
}
.page-header .back-link:hover { color:var(--text-2); }
.page-header h1 { font-size:clamp(22px,4vw,30px); margin-bottom:8px; }
.page-header .updated { font-size:13px; color:var(--text-3); }

.page-content { color:var(--text-2); font-size:15px; line-height:1.75; }
.page-content h2 {
  font-size:17px; color:var(--text-1); margin:36px 0 12px; font-weight:600;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.page-content h3 {
  font-size:13px; color:var(--text-1); font-weight:700;
  margin:24px 0 8px; text-transform:uppercase; letter-spacing:.6px;
}
.page-content p { margin-bottom:14px; }
.page-content ul { list-style:none; padding:0; margin:8px 0 14px; }
.page-content ul li { padding:4px 0 4px 18px; position:relative; }
.page-content ul li::before {
  content:'—'; position:absolute; left:0; color:var(--text-3); font-size:12px;
}
.page-content a { color:var(--amber); border-bottom:1px solid rgba(255,179,0,.25); transition:border-color .2s; }
.page-content a:hover { border-color:rgba(255,179,0,.6); }
.page-content strong { color:var(--text-1); font-weight:600; }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.visible { animation:fadeUp .75s var(--ease-out) forwards; }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }

/* Responsive */
@media(max-width:600px){
  .nav { padding:16px 20px; }
  .footer { padding:16px 20px; }
  .page-container { padding:100px 20px 60px; }
}