/* EtnoSample — shared styles for legal pages (Terms / Privacy / Refund) */
:root{
  --gold:#ffcc00;
  --bg:#0b0f15;
  --text:#eef2f8;
  --muted:#a7b0c3;
  --line:#27324a;
  --card:#121824;
  --accent:#62cfff;
  --rad:16px;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Montserrat',var(--font-body);
}
.skip-link{
  position:absolute;left:12px;top:12px;z-index:100000;
  padding:10px 14px;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  transform:translateY(-160%);
}
.skip-link:focus{transform:none;outline:2px solid var(--gold)}
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(98,207,255,.08), transparent 60%),
    var(--bg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.legal-top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(16px,4vw,40px);
  background:#0c111ae6;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.legal-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;color:var(--text)}
.legal-brand img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.legal-brand span{font-size:1.05rem;letter-spacing:.02em}
.legal-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.legal-nav a{
  color:var(--muted);font-size:.9rem;padding:6px 10px;border-radius:10px;
  border:1px solid transparent;transition:all .15s ease;
}
.legal-nav a:hover{color:var(--text);border-color:var(--line);text-decoration:none}
.legal-nav a.active{color:var(--gold);border-color:var(--line)}
.legal-top-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.legal-lang{
  appearance:none;-webkit-appearance:none;
  background:#121824;color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:6px 28px 6px 10px;font:inherit;font-size:.85rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% - 2px),calc(100% - 9px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

.legal-wrap{
  width:min(920px, calc(100% - 2.5rem));
  margin:34px auto 80px;
}
.legal-card{
  background:linear-gradient(180deg, rgba(18,24,36,.92), rgba(11,15,21,.92));
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:clamp(20px,4vw,44px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.legal-card h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3.5vw,2.1rem);
  margin:0 0 6px;color:#fff;
}
.legal-h1-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 6px;
}
.legal-h1-row h1{flex:1;margin:0}
.legal-edit-btn{
  flex:0 0 auto;
  width:40px;height:40px;
  margin-top:2px;
  border:1px solid var(--line);
  background:#121824;
  color:var(--gold);
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.legal-edit-btn:hover{border-color:var(--gold);background:#1a2233}
.legal-edit-btn[hidden]{display:none!important}
.legal-edit-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  margin:0 0 16px;
  padding:10px 12px;
  border:1px dashed rgba(255,204,0,.4);
  border-radius:12px;
  background:rgba(255,204,0,.06);
}
.legal-edit-bar[hidden]{display:none!important}
.legal-edit-hint{margin:0;color:var(--muted);font-size:.88rem;flex:1;min-width:220px}
.legal-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.legal-edit-save,.legal-edit-cancel{
  font:inherit;font-size:.9rem;font-weight:600;
  border-radius:10px;padding:8px 14px;cursor:pointer;
}
.legal-edit-save{border:0;background:var(--gold);color:#111}
.legal-edit-save:disabled{opacity:.55;cursor:wait}
.legal-edit-cancel{border:1px solid var(--line);background:#121824;color:var(--text)}
.legal-card.legal-editing #legalH1,
.legal-card.legal-editing #legalMeta,
.legal-card.legal-editing #legalBody{
  outline:2px dashed rgba(255,204,0,.45);
  outline-offset:6px;
  border-radius:8px;
}
.legal-meta{color:var(--muted);font-size:.88rem;margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal-card h2{
  font-family:var(--font-display);font-weight:600;
  font-size:1.15rem;color:var(--gold);
  margin:30px 0 10px;
}
.legal-card h3{font-size:1rem;color:#fff;margin:20px 0 8px}
.legal-card p{margin:10px 0;color:#dbe2ee}
.legal-card ul{margin:10px 0;padding-left:22px}
.legal-card li{margin:6px 0;color:#dbe2ee}
.legal-card strong{color:#fff}

.callout{
  border:1px solid rgba(255,204,0,.35);
  background:rgba(255,204,0,.06);
  border-radius:12px;padding:14px 16px;margin:18px 0;
}
.callout p{margin:6px 0}
.note{color:var(--muted);font-size:.9rem}

.about-hero{margin:0 0 22px}
.about-hero img{
  display:block;width:min(320px,100%);height:auto;
  border-radius:14px;border:1px solid var(--line);
  object-fit:cover;box-shadow:0 16px 40px rgba(0,0,0,.35);
}

.legal-footer{
  text-align:center;color:var(--muted);font-size:.85rem;
  padding:26px 16px 40px;
}
.legal-footer a{margin:0 8px}

@media (max-width:640px){
  .legal-nav a{padding:5px 8px;font-size:.82rem}
  .legal-brand span{display:none}
}