/* ================================================================
   MACROSCS — styles.css
   Shared stylesheet for article / guide pages
   ================================================================ */
@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#060608;
  --bg2:#0a0a0f;
  --bg3:#0f0f18;
  --blue:#0055FF;
  --blue-bright:#1a6eff;
  --blue-glow:rgba(0,85,255,0.45);
  --blue-dim:rgba(0,85,255,0.12);
  --gold:#C9A227;
  --gold-dim:rgba(201,162,39,0.12);
  --green:#00FF88;
  --white:#fff;
  --w70:rgba(255,255,255,0.7);
  --w40:rgba(255,255,255,0.4);
  --w15:rgba(255,255,255,0.15);
  --glass:rgba(255,255,255,0.04);
  --glass-border:rgba(255,255,255,0.08);
}

html{scroll-behavior:smooth;font-size:16px;scrollbar-gutter:stable}
body{
  background:
    linear-gradient(rgba(6,6,8,.60),rgba(6,6,8,.60)),
    url('img/bg-main.png') center top / cover no-repeat fixed;
  background-color:var(--bg);
  color:var(--white);
  font-family:'DM Sans','Barlow Condensed',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{border:none;cursor:pointer;font-family:inherit}

/* ── GLOW ORBS ── */
.glow-blue,.glow-gold{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(120px);opacity:.18}
.glow-blue{width:600px;height:600px;background:var(--blue);top:-200px;left:-150px}
.glow-gold{width:400px;height:400px;background:var(--gold);bottom:-100px;right:-100px}

/* ── SCROLL PROGRESS ── */
#progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--blue),var(--gold));z-index:9999;transition:width .1s linear}

/* ── HEADER ── */
header{position:sticky;top:0;z-index:100;background:rgba(6,6,8,.92);border-bottom:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner{max-width:1080px;margin:0 auto;padding:.9rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.02em;font-size:1.1rem;color:#fff}
.logo-icon{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;font-weight:900;color:#fff;box-shadow:0 0 16px var(--blue-glow)}
.logo-text{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em}
header nav{display:flex;gap:1.8rem;align-items:center}
header nav a{font-size:.85rem;font-weight:600;color:var(--w70);transition:color .2s;letter-spacing:.02em}
header nav a:hover,header nav a.active{color:#fff}

/* ── BREADCRUMB ── */
.breadcrumb{max-width:780px;margin:1.5rem auto .5rem;padding:0 1.5rem;font-size:.78rem;color:var(--w40);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--w40);transition:color .2s}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.4}

/* ── MAIN ARTICLE LAYOUT ── */
.page{max-width:780px;margin:0 auto;padding:2rem 1.5rem 5rem;position:relative;z-index:1}

/* ── ARTICLE META ── */
.art-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.art-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .75rem;border-radius:100px;background:var(--blue-dim);border:1px solid rgba(0,85,255,.25);color:var(--blue)}
.art-date{font-size:.8rem;color:var(--w40);display:flex;align-items:center;gap:.4rem}
.art-read{font-size:.8rem;color:var(--w40);display:flex;align-items:center;gap:.4rem}

/* ── ARTICLE TITLE ── */
.art-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.05;letter-spacing:.02em;margin-bottom:2rem;background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── ARTICLE TAGS ── */
.art-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}

/* ── BACK LINK ── */
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--w40);margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--blue)}

/* ── ARTICLE BODY ── */
.art-body{font-size:1rem;line-height:1.8;color:var(--w70)}
.art-body h2{font-family:'Bebas Neue',sans-serif;font-size:1.9rem;letter-spacing:.04em;color:#fff;margin:2.5rem 0 1rem;-webkit-text-fill-color:#fff}
.art-body h3{font-size:1.15rem;font-weight:700;color:#fff;margin:2rem 0 .75rem;-webkit-text-fill-color:#fff}
.art-body p{margin-bottom:1.2rem}
.art-body ul,.art-body ol{margin:1rem 0 1.2rem 1.5rem}
.art-body li{margin-bottom:.5rem}
.art-body strong{color:#fff;font-weight:700}
.art-body a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(0,85,255,.3)}
.art-body a:hover{text-decoration-color:var(--blue)}
.art-body code{background:rgba(0,85,255,.1);border:1px solid rgba(0,85,255,.2);border-radius:5px;padding:.15rem .45rem;font-size:.88em;font-family:monospace;color:#7eb3ff}
.art-body pre{background:rgba(0,0,0,.5);border:1px solid var(--glass-border);border-radius:12px;padding:1.5rem;overflow-x:auto;margin:1.5rem 0}
.art-body pre code{background:none;border:none;padding:0;color:#cde}
.art-body img{border-radius:12px;margin:1.5rem 0;border:1px solid var(--glass-border)}
.art-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem}
.art-body th{background:var(--blue-dim);color:#fff;font-weight:700;padding:.65rem 1rem;text-align:left;border:1px solid rgba(0,85,255,.2)}
.art-body td{padding:.55rem 1rem;border:1px solid var(--glass-border);color:var(--w70)}
.art-body tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* ── CALLOUT ── */
.callout{border-radius:12px;padding:1.2rem 1.4rem;margin:1.5rem 0;display:flex;gap:1rem;align-items:flex-start}
.callout-tip{background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.2)}
.callout-body{font-size:.88rem;line-height:1.6;color:var(--w70)}
.callout-body strong{color:#fff}

/* ── ARTICLE FOOTER ── */
.art-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--glass-border)}
.art-footer-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.art-footer-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ── AUTHOR ── */
.art-author{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:16px;margin-top:2rem}
.art-author-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#4d8fff);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.4rem;font-weight:900;color:#fff;flex-shrink:0}
.art-author-name{font-weight:700;color:#fff;font-size:.95rem;margin-bottom:.2rem}
.art-author-role{font-size:.75rem;color:var(--blue);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.art-author-bio{font-size:.8rem;color:var(--w40);line-height:1.5}

/* ── RELATED ARTICLES ── */
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--glass-border)}
.related-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.06em;margin-bottom:1.5rem;-webkit-text-fill-color:#fff}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.related-card{background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:12px;padding:1.2rem;transition:border-color .2s,background .2s;display:block}
.related-card:hover{border-color:rgba(0,85,255,.3);background:rgba(0,85,255,.05)}
.related-card-tag{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:.5rem}
.related-card-title{font-size:.9rem;font-weight:600;color:var(--w70);line-height:1.4}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.6rem;border-radius:8px;font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:all .22s;cursor:pointer;border:none}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 24px var(--blue-glow)}
.btn-blue:hover{background:var(--blue-bright);box-shadow:0 8px 32px var(--blue-glow)}
.btn-ghost{background:transparent;border:1px solid var(--glass-border);color:var(--w70)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);color:#fff}
.btn-sm{padding:.5rem 1.1rem;font-size:.78rem}

/* ── FOOTER ── */
footer,.footer-inner{text-align:center;padding:2rem 1.5rem;color:var(--w40);font-size:.8rem;border-top:1px solid var(--glass-border)}
.footer-text a{color:var(--blue)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .header-inner{padding:.8rem 1rem}
  header nav{gap:1rem}
  header nav a{font-size:.78rem}
  .page{padding:1.5rem 1rem 4rem}
  .art-title{font-size:clamp(1.8rem,8vw,2.5rem)}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  header nav{display:none}
  .related-grid{grid-template-columns:1fr}
  .art-footer-actions{flex-direction:column}
}