/* Shared styles for feedback.html and changelog.html */

.narrow { max-width: 720px; }

/* ---------- homepage nav (copied from index.html; .nav -> .hnav to avoid
   colliding with site.css's inner-link .nav) ---------- */
.hnav{position:fixed;inset:0 0 auto 0;z-index:80;height:64px;display:flex;align-items:center;transition:background .3s,box-shadow .3s,color .3s;color:#f4f1ea}
.hnav .wrap{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:28px;width:100%}
.hnav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 17px/1 var(--display);letter-spacing:-.01em;color:inherit}
.hnav .brand .owl{width:34px;height:auto}
.hnav .links{display:flex;gap:24px;margin-left:auto;font-size:14.5px}
.hnav .links a{text-decoration:none;opacity:.78;color:inherit}
.hnav .links a:hover{opacity:1}
.hnav .btn{height:38px;padding:0 16px;border-radius:10px;font-size:14px}
.hnav .btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hnav .btn-amber{background:linear-gradient(180deg,#ffc764,#ff9f3d);color:#2a1700;box-shadow:0 10px 30px -8px rgba(255,159,61,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.hnav .btn-amber:hover{box-shadow:0 16px 40px -8px rgba(255,159,61,.75),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px)}
.hnav.solid{background:rgba(5,7,15,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(255,248,231,.12)}
@media (max-width:820px){.hnav .links{display:none}.hnav .lang{margin-left:auto}}
@media (max-width:520px){.hnav .nav-dl span{display:none}.hnav .nav-dl{padding:0 12px}}
.hnav .lang{position:relative}
.hnav .lang-btn{height:38px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;font:600 13.5px var(--sans);cursor:pointer}
.hnav .lang-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hnav .lang-btn .chev{width:13px;height:13px;opacity:.7}
.hnav .lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:6px;border-radius:12px;background:#fff;color:#141413;box-shadow:0 18px 50px -12px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);display:none}
.hnav .lang.open .lang-menu{display:block}
.hnav .lang-menu button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;font:14px var(--sans);color:#141413;cursor:pointer;text-align:left}
.hnav .lang-menu button:hover{background:#f2efe6}
.hnav .lang-menu button.on{background:#f2efe6;font-weight:700}
.hnav .lang-menu small{color:#8a867b;font:600 11px var(--mono)}

/* owl brand fills — copied from index.html */
svg.owl{overflow:visible}
svg.owl .body,svg.owl .lid{fill:var(--owl-body,#141413);transition:fill .6s}
svg.owl .wing path{fill:var(--owl-wing,#141413);transition:fill .6s}
svg.owl .eye{fill:var(--owl-eye,#faf9f5);transition:fill .6s}
svg.owl .pupils{fill:var(--owl-pupil,#141413);transition:transform .14s ease-out,fill .6s}
svg.owl .beak{fill:var(--owl-beak,#f2a33a)}
svg.owl .wing{transform-origin:92px 300px;transform:scale(.25) rotate(-20deg);opacity:0;transition:transform .35s ease,opacity .3s}
svg.owl .tiltg{transform-origin:256px 330px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
svg.owl .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .07s}
svg.owl.blink .lid{transform:scaleY(1)}

/* ---------- starry section (same sky as the homepage hero) ---------- */
.star-sect {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 75% -10%, #2a2366 0%, transparent 60%),
              linear-gradient(180deg, #05070f 0%, #0b1128 45%, #181340 100%);
  color: #f4f1ea; padding: 136px 0 84px; min-height: 62vh;
}
.star-sect canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.star-sect .container { position: relative; z-index: 2; }
.star-sect .section-head h2 { color: #f4f1ea; }
.star-sect .section-label { color: #e4a11b; }
.star-sect .star-intro { margin: -8px 0 24px; color: #b9b4a8; }

/* ---------- changelog timeline ---------- */
.cl-wrap { max-width: 780px; }
.tl { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, rgba(228,161,27,.75), rgba(228,161,27,.15));
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 22px; width: 12px; height: 12px;
  margin-left: 2px; border-radius: 50%;
  background: #e4a11b; box-shadow: 0 0 0 4px rgba(228,161,27,.22);
}
.tl-card {
  background: rgba(10, 13, 30, .9); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 248, 231, .2); border-radius: var(--radius-lg);
  padding: 20px 24px 16px;
}
.tl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tl-ver { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.tl-tag {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #0b1128; background: #e4a11b; border-radius: 999px; padding: 2px 10px;
}
.tl-date { margin-left: auto; color: #b8b4c8; font-size: .85rem; }
.tl-list { margin: 12px 0 4px; padding-left: 18px; color: #e2ded4; font-size: .96rem; line-height: 1.7; }
.tl-list li { margin-bottom: 5px; }
.tl-list li::marker { color: #e4a11b; }
.tl-list code {
  color: #ffd27a; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; padding: 1px 6px;
}
.tl-list b { color: #ece8df; }

/* ---------- feedback form ---------- */
.fb-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.fb-row { margin-bottom: 18px; }
.fb-row label { display: block; font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.fb-row input, .fb-row textarea {
  width: 100%; box-sizing: border-box; font: 14px/1.5 var(--sans); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; outline: none; transition: border-color .15s;
}
.fb-row input:focus, .fb-row textarea:focus { border-color: var(--accent); }
.fb-row textarea { min-height: 150px; resize: vertical; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-actions { display: flex; align-items: center; gap: 16px; }
.fb-note { font-size: 12.5px; color: var(--faint); }
.fb-ok { color: var(--ok); font-size: 14px; }
.fb-err { color: var(--danger); font-size: 14px; }

/* ---------- donate ---------- */
.don-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.don-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.don-card h3 { font: 600 17px/1.3 var(--display); margin: 0; display: flex; align-items: center; gap: 10px; }
.don-card h3 svg { width: 20px; height: 20px; flex: 0 0 20px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.don-card p { margin: 0; font-size: 13.5px; color: var(--muted); flex: 1; }
.don-qr { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--surface-2); overflow: hidden; margin: 4px auto 0; }
.don-qr img { width: 100%; height: 100%; object-fit: contain; }
.don-qr .qr-miss { font: 11px/1.6 var(--mono); color: var(--faint); text-align: center; padding: 12px; word-break: break-all; }
.don-sect { margin-top: 44px; }
.don-sect > h3 { font: 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.don-sect > h3::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.don-link { font: 600 13.5px/1 var(--sans); color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.don-link:hover { text-decoration: underline; }