/* WhiteGlow System CSS — Portal + Blog + Admin
   - Dim white glow on dark
   - Animated grid + scanlines CRT vibe
   - Aligned layout primitives (container, row, stack)
   - Components: panel, card, input, textarea, btn, toast, msg, modal, loader, skeleton
   - Blog: post grid, like buttons, comments
   - Admin: toolbar, stats, editable lists
*/

:root{
  --bg:#0a0a0a;
  --panel:#0e0f10f2;
  --card:#0c0d0eee;
  --ink:#f2f3f5;
  --ink-dim:#d7dbe2;
  --muted:#bfc6cf;

  --white:#ffffff;
  --warn:#ffbd2e;
  --danger:#ff6e82;
  --ok:#27c93f;

  --border:rgba(255,255,255,.28);
  --border-weak:rgba(255,255,255,.16);
  --glow:0 0 10px rgba(255,255,255,.18), 0 0 22px rgba(255,255,255,.12);
  --glow-strong:0 0 22px rgba(255,255,255,.35), 0 0 44px rgba(255,255,255,.2);

  --radius:12px;
  --speed:260ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  --grid-gap:16px;
  --post-col: min(360px, 100%);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-dim);
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Animated background grid + scanlines */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.07;
  animation:gridDrift 18s linear infinite;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.08));
}
@keyframes gridDrift{
  0%{background-position:0 0, 0 0}
  100%{background-position:120px 60px, 120px 60px}
}
.scanlines{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(255,255,255,.05) 3px 4px);
  animation:scanShift 120ms linear infinite;
  opacity:.75;
}
@keyframes scanShift{ to{ transform:translateY(4px) } }

/* Layout primitives */
.container{ width:min(1100px, 92vw); margin-inline:auto }
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.mb8{margin-bottom:8px} .mb12{margin-bottom:12px} .mb16{margin-bottom:16px} .mb24{margin-bottom:24px} .mb60{margin-bottom:60px}
.pad8{padding:8px} .pad12{padding:12px} .pad16{padding:16px} .pad18{padding:18px}
.m0{margin:0}
.row{display:flex; align-items:center; gap:12px}
.wrap{flex-wrap:wrap}
.stack{display:grid; gap:14px}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.hidden{display:none !important}

/* Terminal bar */
.term-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:10px;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(20,20,24,.6));
  border:1px solid var(--border);
  box-shadow:var(--glow);
  backdrop-filter:blur(8px);
}
.term-title{
  color:var(--ink); letter-spacing:.08em; font-weight:800;
  text-shadow:0 0 10px rgba(255,255,255,.5);
  animation:titlePulse 3s ease-in-out infinite alternate;
}
@keyframes titlePulse{
  0%{ text-shadow:0 0 6px rgba(255,255,255,.35) }
  100%{ text-shadow:0 0 14px rgba(255,255,255,.6) }
}
.win-dots{display:flex; gap:8px}
.win-dot{width:12px; height:12px; border-radius:999px; box-shadow:0 0 8px rgba(255,255,255,.1)}
.win-dot.red{background:#ff5f56; box-shadow:0 0 10px rgba(255,95,86,.5)}
.win-dot.yellow{background:var(--warn); box-shadow:0 0 10px rgba(255,189,46,.45)}
.win-dot.green{background:var(--ok); box-shadow:0 0 10px rgba(39,201,63,.45)}

/* Surfaces */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--border-weak), var(--glow);
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--glow);
  padding:16px; position:relative; overflow:hidden;
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%);
  transform:translateX(-110%); transition:transform 720ms ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--glow-strong) }
.card:hover::before{ transform:translateX(110%) }

/* Type */
.h1,.h2,.h3{ color:var(--ink); text-shadow:0 0 10px rgba(255,255,255,.4) }
.muted{ color:var(--muted) }

/* Inputs */
.input{
  width:100%; background:transparent; color:var(--ink-dim);
  border:none; outline:none; padding:12px 4px;
  border-bottom:2px solid var(--border);
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), text-shadow var(--speed) var(--ease);
}
.input:focus{
  border-bottom-color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.4);
  box-shadow:0 8px 22px -12px rgba(255,255,255,.55);
}
.textarea{
  width:100%; min-height:120px; resize:vertical; color:var(--ink-dim);
  background:rgba(255,255,255,.02);
  border:1px solid var(--border); border-radius:10px; padding:12px 10px;
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.textarea:focus{
  border-color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 26px rgba(255,255,255,.22);
}

/* Buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 18px; border-radius:12px;
  color:#fff; background:rgba(255,255,255,.06);
  border:2px solid var(--border); text-transform:uppercase; font-weight:900; letter-spacing:.08em;
  box-shadow:var(--glow); overflow:hidden; cursor:pointer;
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.btn.ghost{ background:transparent }
.btn.warn{ border-color:rgba(255,189,46,.6) }
.btn.danger{ border-color:rgba(255,110,130,.6) }
.btn.ok{ border-color:rgba(39,201,63,.6) }
.btn:disabled, .btn.disabled{ opacity:.55; cursor:not-allowed }
.btn:hover{ transform:translateY(-2px); border-color:#fff; box-shadow:var(--glow-strong) }
.btn:active{ transform:translateY(0) }
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
  transform:translateX(-110%); transition:transform 640ms ease;
}
.btn:hover::after{ transform:translateX(110%) }

/* Sent success micro-interaction */
.btn.sent{
  animation:sentPulse 900ms var(--ease) 1;
  border-color:#fff; box-shadow:var(--glow-strong);
}
@keyframes sentPulse{
  0%{ box-shadow:var(--glow); transform:scale(1) }
  35%{ box-shadow:0 0 28px rgba(255,255,255,.45), 0 0 54px rgba(255,255,255,.22); transform:scale(1.02) }
  100%{ box-shadow:var(--glow); transform:scale(1) }
}
.btn.sent::before{
  content:""; position:absolute; left:-10%; top:50%; width:18px; height:18px; border-radius:999px;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.2) 60%, transparent 70%);
  filter:blur(1px); transform:translateY(-50%);
  animation:trail 700ms ease-out 1;
}
@keyframes trail{
  0%{ left:-10%; opacity:.0 }
  25%{ opacity:.6 }
  100%{ left:110%; opacity:0 }
}

/* Toasts */
.toast-holder{ position:fixed; right:16px; top:96px; z-index:2000; display:grid; gap:10px }
.toast{
  position:relative;
  background:rgba(0,0,0,.9); color:#fff; border:1px solid var(--border);
  box-shadow:var(--glow); padding:12px 16px; border-radius:12px;
  transform:translateX(30px); opacity:0; animation:toastIn .42s var(--ease) forwards, toastOut .42s var(--ease) 3.6s forwards;
}
.toast::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.2));
  animation:toastBar 3.6s linear forwards;
  box-shadow:0 0 8px rgba(255,255,255,.25);
}
.toast.error{ border-color:rgba(255,110,130,.6); box-shadow:0 0 16px rgba(255,110,130,.3) }
@keyframes toastIn{ to{ transform:none; opacity:1 } }
@keyframes toastOut{ to{ transform:translateX(30px); opacity:0 } }
@keyframes toastBar{ to{ width:0% } }

/* Messages */
.msg{
  border-left:3px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.04);
  border-radius:10px; padding:12px 14px;
  transition:transform var(--speed) var(--ease), background var(--speed) var(--ease);
}
.msg:hover{ transform:translateX(4px); background:rgba(255,255,255,.07) }

/* Modal + loader */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:1500; background:rgba(0,0,0,.7); backdrop-filter:blur(8px) }
.modal.open{ display:grid; animation:fadeIn .25s var(--ease) }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal .sheet{
  width:min(760px, 94vw);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--glow-strong); padding:18px;
  transform:translateY(12px); animation:rise .28s var(--ease) forwards;
}
@keyframes rise{ to{ transform:none } }
.loader{
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:#fff;
  animation:spin 900ms linear infinite, glowSpin 1400ms ease-in-out infinite alternate;
  box-shadow:var(--glow);
  margin:auto;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes glowSpin{
  0%{ box-shadow:0 0 10px rgba(255,255,255,.18) }
  100%{ box-shadow:0 0 24px rgba(255,255,255,.34) }
}

/* Skeleton shimmer */
.skeleton{
  position:relative; overflow:hidden; border-radius:8px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.10), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:200% 0 }
  100%{ background-position:-200% 0 }
}

/* Section reveal */
.reveal{ opacity:0; transform:translateY(12px); animation:revealIn .5s var(--ease) forwards }
@keyframes revealIn{ to{ opacity:1; transform:none } }

/* BLOG — posts grid, like, comments */
.post{
  display:grid; gap:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:12px; padding:14px;
  box-shadow:var(--glow);
}
.post .title{ color:#fff; text-shadow:0 0 10px rgba(255,255,255,.6); font-weight:800; margin:0 }
.post .meta{ color:var(--muted); font-size:.9rem }
.post .media{ border-radius:10px; overflow:hidden }
.post .media img, .post .media video{ display:block; width:100%; height:auto }
.post .content{ color:var(--ink-dim); line-height:1.6 }

.post-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--post-col), 1fr));
  gap:var(--grid-gap);
  transition: grid-template-columns 300ms var(--ease);
}
@media (min-width:1200px){
  .post-grid{ --post-col: 400px; }
}

.post .actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.like{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--border);
  background:rgba(255,255,255,.06);
  color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer;
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
  box-shadow:var(--glow);
}
.like:hover{ transform:translateY(-2px); border-color:#fff; box-shadow:var(--glow-strong) }
.like.liked, .like:disabled{ opacity:.65; cursor:not-allowed; border-color:rgba(255,255,255,.45) }
.count{ color:#fff; font-weight:800 }

.comment{
  background:rgba(255,255,255,.03);
  border-left:3px solid rgba(255,255,255,.5);
  border-radius:8px; padding:10px 12px;
}
.comment .by{ color:#fff; font-weight:700 }
.comment .text{ color:var(--ink-dim) }

.comment-form{ display:grid; grid-template-columns:1fr 2fr auto; gap:10px; }
@media (max-width:700px){
  .comment-form{ grid-template-columns:1fr; }
}

/* ADMIN — toolbar, stats, editable lists */
.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(20,20,24,.6));
  border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--glow);
}
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px;
}
.stat-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:12px; padding:14px;
  box-shadow:var(--glow);
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--glow-strong) }
.stat-number{ color:#fff; font-weight:900; font-size:1.8rem; text-shadow:0 0 10px rgba(255,255,255,.5) }
.stat-label{ color:var(--muted) }

.admin-list .row-item{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px; padding:12px 14px;
}
.admin-list .row-actions{ display:flex; gap:8px; flex-wrap:wrap }

.editor .input, .editor .textarea{ width:100% }

/* Focus rings */
:focus-visible{
  outline:2px dashed rgba(255,255,255,.6);
  outline-offset:2px;
}