/* ============================================================
   lucide.gg — sketch / LucideOS skin for content pages
   (status, feedback, terms, privacy, refund, 404)
   Single stylesheet, replaces styles.css + legal.css +
   theme-colorful.css + site-refresh.css on those pages.
   Presentation only — class names are produced by the
   existing HTML/JS and must not be renamed.
   ============================================================ */
:root{
  --paper:#14171c; --grid:rgba(255,255,255,.045);
  --ink:#ece9e0; --ink-soft:#9b988e; --ink-dim:#5b5950;
  --marker:#ff6b57; --marker-wash:rgba(255,107,87,.20);
  --ok:#a4cc78; --patch:#e8c668; --soak:#8ec6c0; --down:#e07a6b;
  --disp:"Caveat",cursive; --hand:"Patrick Hand","Comic Sans MS",cursive;
  --type:"Special Elite","Courier New",monospace;
  --num:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(155,152,142,.45) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(155,152,142,.38);
  border:2px solid transparent;background-clip:content-box;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--marker);background-clip:content-box}

body{
  font-family:var(--hand);color:var(--ink);background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  z-index:0;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.03),transparent 60%)}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:0 44px;width:100%}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1002;
  background:var(--marker)}

/* ── Promo bar ── */
.promo-bar{position:relative;z-index:5;min-height:40px;display:flex;
  align-items:center;justify-content:center;gap:12px;padding:8px 20px;
  background:rgba(20,23,28,.92);border-bottom:2px dashed var(--ink-dim);
  font-family:var(--hand);font-size:15px;color:var(--ink-soft);text-align:center}
.promo-bar__label{font-family:var(--type);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--marker)}

/* ── Header ── */
.header{position:relative;z-index:5;background:rgba(20,23,28,.6);
  border-bottom:2px dashed var(--ink-dim)}
.header.scrolled{background:rgba(20,23,28,.85)}
.header-container,.header-inner{max-width:1280px;margin:0 auto;padding:18px 44px;
  display:flex;align-items:center;gap:28px}
.logo,.header-logo{position:relative;display:flex;align-items:center;gap:10px}
.logo-eye,.logo-icon{width:34px;height:34px;display:block;object-fit:contain}
.logo-text{font-family:var(--disp);font-size:32px;font-weight:700;color:var(--ink);
  line-height:1}
.logo-text .text-accent,.logo-text span{color:var(--marker)}
.header-nav{display:flex;align-items:center;gap:24px;font-family:var(--hand);
  font-size:18px;margin-left:6px}
.nav-link{position:relative;color:var(--ink-soft);transition:color .2s}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{content:"";position:absolute;left:-3px;right:-3px;
  bottom:-6px;height:7px;background:var(--marker);opacity:.85;
  border-radius:40% 60% 55% 45%/60% 50% 60% 40%}
.nav-link--status{display:inline-flex;align-items:center;gap:7px}
.status-ping{position:relative;width:9px;height:9px;display:inline-block}
.status-ping__dot{position:absolute;inset:0;border-radius:50%;background:var(--ok)}
.status-ping__ring{position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--ok);opacity:.5;animation:sp-ring 1.8s ease-out infinite}
@keyframes sp-ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.header-actions,.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn,.btn-discord{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:20px;cursor:pointer;
  color:var(--ink);background:rgba(20,23,28,.55);border:2.5px solid var(--ink-soft);
  border-radius:14px 11px 16px 9px;padding:7px 18px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.btn:hover,.btn-discord:hover{border-color:var(--marker);
  transform:translateY(-2px) rotate(-.3deg)}
.btn svg,.btn-discord svg{width:18px;height:18px}
.btn-primary{background:var(--marker);border-color:var(--marker);color:#231f17}
.btn-primary:hover{background:var(--marker);transform:translateY(-2px) rotate(-.4deg)}
.btn-sm{font-size:18px;padding:6px 15px}
.mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:6px;margin-left:auto}
.mobile-toggle span{width:24px;height:2.5px;background:var(--ink-soft);
  border-radius:2px;transition:.2s}
.mobile-toggle.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mobile-toggle.active span:nth-child(2){opacity:0}
.mobile-toggle.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:auto 0 0 0;top:0;z-index:50;
  background:var(--paper);padding:80px 32px 32px}
.mobile-menu.active{display:block}
.mobile-menu__nav{display:flex;flex-direction:column;gap:18px;
  font-family:var(--disp);font-size:30px}
.mobile-menu__link{color:var(--ink-soft)}
.mobile-menu__link:hover{color:var(--ink)}
.mobile-menu__divider{height:2px;border-bottom:2px dashed var(--ink-dim);margin:8px 0}

/* ── Legal / status / feedback page shell ── */
.legal-page,.status-page,.feedback-page{position:relative;z-index:1;
  padding:56px 0 90px;min-height:60vh}
.legal-container,.status-container{max-width:920px;margin:0 auto;padding:0 44px}
.status-container{max-width:1080px}
.legal-header,.status-header{margin-bottom:34px;
  border-bottom:2px dashed var(--ink-dim);padding-bottom:24px}
.section-label{font-family:var(--type);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--marker)}
.legal-title{font-family:var(--disp);font-size:clamp(48px,7vw,72px);font-weight:700;
  color:var(--ink);line-height:1;margin:6px 0 10px;position:relative;
  display:inline-block}
.legal-title::after{content:"";position:absolute;left:-4px;right:-4px;bottom:5px;
  height:14px;background:var(--marker-wash);z-index:-1;transform:rotate(-1deg);
  border-radius:50% 60% 55% 45%/60% 50% 60% 40%}
.legal-updated{font-family:var(--hand);font-size:16px;color:var(--ink-soft)}
.legal-content{display:flex;flex-direction:column;gap:26px}
.legal-section h2{font-family:var(--disp);font-size:30px;font-weight:700;
  color:var(--ink);margin:0 0 10px;line-height:1.1}
.legal-section p{font-family:var(--hand);font-size:16px;color:var(--ink-soft);
  line-height:1.7;margin:0 0 10px}
.legal-section ul{list-style:none;display:flex;flex-direction:column;gap:8px;
  margin:8px 0 4px}
.legal-section li{font-family:var(--hand);font-size:16px;color:var(--ink-soft);
  line-height:1.6;padding-left:24px;position:relative}
.legal-section li::before{content:"›";position:absolute;left:6px;top:-1px;
  color:var(--marker);font-size:18px;font-weight:700}
.legal-section a{color:var(--marker);border-bottom:2px solid var(--marker-wash)}
.legal-section a:hover{border-bottom-color:var(--marker)}

/* ── Status list (status.js output) ── */
.status-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.status-row{display:grid;grid-template-columns:1.4fr 1.3fr auto;gap:18px;
  align-items:center;padding:18px 22px;border:2.5px solid var(--ink-soft);
  border-radius:16px 12px 18px 10px;background:rgba(20,23,28,.55);
  transition:transform .2s ease,border-color .2s ease}
.status-row:hover{transform:translateY(-2px) rotate(-.15deg);
  border-color:var(--ink)}
.status-row__product{display:flex;align-items:center;gap:14px;min-width:0}
.status-row__thumb{width:52px;height:52px;flex-shrink:0;overflow:hidden;
  border:2px dashed var(--ink-dim);border-radius:10px 8px 11px 7px;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2)}
.status-row__thumb img{width:100%;height:100%;object-fit:cover}
.status-row__fallback{font-family:var(--disp);font-size:30px;font-weight:700;
  color:var(--marker)}
.status-row__name{font-family:var(--disp);font-size:26px;font-weight:700;
  color:var(--ink);line-height:1.05}
.status-row__details{display:flex;flex-direction:column;gap:5px}
.status-row__detail{display:flex;align-items:center;gap:8px;font-family:var(--hand);
  font-size:14px;color:var(--ink-soft)}
.status-row__caret{color:var(--marker);font-weight:700}
.status-row__states{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.status-chip{font-family:var(--hand);font-size:13px;padding:3px 13px;
  border:2px solid var(--ink-soft);color:var(--ink-soft);
  border-radius:13px 11px 14px 10px;letter-spacing:.02em;white-space:nowrap}
.status-chip::before{content:"● ";font-size:.85em}
.status-chip--safe{color:var(--ok);border-color:var(--ok);
  background:rgba(164,204,120,.08)}
.status-chip--updating{color:var(--patch);border-color:var(--patch);
  background:rgba(232,198,104,.08)}
.status-chip--soak{color:var(--soak);border-color:var(--soak);
  background:rgba(142,198,192,.08)}
.status-chip--danger,.status-chip--down{color:var(--down);border-color:var(--down);
  background:rgba(224,122,107,.08)}

/* ── Feedback page (feedback.js output) ── */
.feedback-hero{position:relative;z-index:1;padding:50px 0 10px}
.feedback-hero__inner h1{font-family:var(--disp);font-size:clamp(48px,7vw,74px);
  font-weight:700;color:var(--ink);line-height:1;position:relative;
  display:inline-block}
.feedback-hero__inner h1::after{content:"";position:absolute;left:-4px;right:-4px;
  bottom:6px;height:15px;background:var(--marker-wash);z-index:-1;
  transform:rotate(-1deg);border-radius:50% 60% 55% 45%/60% 50% 60% 40%}
.feedback-section{position:relative;z-index:1;padding:30px 0 90px}
.feedback-grid{columns:3 280px;column-gap:24px}
@media (max-width:900px){.feedback-grid{columns:2 260px}}
@media (max-width:620px){.feedback-grid{columns:1}}
.feedback-card{position:relative;break-inside:avoid;margin:0 0 24px;
  padding:22px 22px 20px;border:2.5px solid var(--ink-soft);
  border-radius:18px 13px 19px 12px;background:rgba(20,23,28,.55);
  transform:rotate(-.25deg);transition:transform .2s ease,border-color .2s ease}
.feedback-card:nth-child(even){transform:rotate(.3deg)}
.feedback-card:hover{transform:translateY(-3px) rotate(0);border-color:var(--ink)}
.feedback-card--loading{min-height:170px;opacity:.45;
  border-style:dashed;border-color:var(--ink-dim);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px)}
.feedback-card__accent{position:absolute;top:-12px;left:20px;width:42px;height:8px;
  background:var(--marker);transform:rotate(-3deg);
  border-radius:40% 60% 55% 45%/60% 50% 60% 40%}
.feedback-card__top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.feedback-avatar{width:42px;height:42px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--disp);
  font-size:20px;font-weight:700;color:#231f17;background:var(--marker);
  border-radius:50% 47% 52% 49%/49% 52% 48% 51%}
.feedback-card__identity{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.feedback-card__identity strong{font-family:var(--disp);font-size:22px;
  font-weight:700;color:var(--ink)}
.feedback-card__identity span{font-family:var(--hand);font-size:13px;
  color:var(--ink-soft)}
.feedback-verified{margin-left:auto;font-family:var(--hand);font-size:12px;
  color:var(--ok);border:2px solid var(--ok);background:rgba(164,204,120,.08);
  padding:2px 10px;border-radius:12px 9px 13px 8px;white-space:nowrap}
.feedback-card__stars{color:var(--marker);font-size:20px;letter-spacing:2px;
  margin-bottom:8px}
.feedback-card__message{font-family:var(--hand);font-size:16px;color:var(--ink);
  line-height:1.6;margin:0 0 14px}
.feedback-product-chip{display:inline-block;font-family:var(--hand);font-size:13px;
  color:var(--ink-soft);border:2px dashed var(--ink-dim);
  border-radius:13px 10px 14px 9px;padding:3px 13px}
.feedback-empty{font-family:var(--hand);font-size:17px;color:var(--ink-soft);
  text-align:center;padding:40px 0}

/* ── Footer ── */
.site-footer,.footer{position:relative;z-index:1;border-top:2px dashed var(--ink-dim);
  padding:46px 0 36px;margin-top:30px}
.footer-container{max-width:1280px;margin:0 auto;padding:0 44px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;
  margin-bottom:30px}
.footer-brand .logo,.footer-brand .header-logo{margin-bottom:12px}
.footer-brand__desc,.footer-desc{font-family:var(--hand);font-size:14px;
  color:var(--ink-soft);line-height:1.6;max-width:320px}
.footer-col h4,.footer-col__title{font-family:var(--disp);font-size:22px;
  font-weight:700;color:var(--ink);margin-bottom:12px}
.footer-col a,.footer-link{display:block;font-family:var(--hand);font-size:15px;
  color:var(--ink-soft);margin-bottom:8px;transition:color .2s}
.footer-col a:hover,.footer-link:hover{color:var(--marker)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-top:24px;border-top:2px dashed var(--ink-dim);
  font-family:var(--hand);font-size:13px;color:var(--ink-dim)}
.footer-social{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;color:var(--ink-soft);border:2px solid var(--ink-soft);
  border-radius:12px 9px 13px 8px;transition:color .2s,border-color .2s}
.footer-social:hover{color:var(--marker);border-color:var(--marker)}
.footer-social svg{width:18px;height:18px}

/* ── Responsive ── */
@media (max-width:860px){
  .header-container,.header-inner,.footer-container,.container{padding-left:20px;
    padding-right:20px}
  .header-nav{display:none}
  .mobile-toggle{display:flex}
  .legal-container,.status-container{padding:0 20px}
  .status-row{grid-template-columns:1fr;gap:12px}
  .status-row__states{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .legal-title{font-size:42px}
}