/* ===========================================================
   WebPortal — "vivid" theme (light)
   Bright, high-contrast and comfortable: blue-white surfaces,
   a sky→indigo signature gradient, and a rose accent for pop.
   Palette
     --bg      #f0f4ff  warm blue-white
     --panel   #ffffff  cards
     --line    #c8d3f0  soft borders
     --text    #111827  near-black (maximum readability)
     --muted   #4b5875  blue-gray secondary text
     --accent  #0ea5e9  sky blue  (links/focus)
     --blue    #4f46e5  indigo    (gradient partner)
     --coral   #f43f5e  rose pop
   =========================================================== */
:root{
  --bg:#f0f4ff; --bg-2:#e4eafb; --panel:#ffffff; --panel-2:#f5f7ff;
  --line:#c8d3f0; --text:#111827; --muted:#4b5875;
  --accent:#0ea5e9; --blue:#4f46e5; --coral:#f43f5e;
  --danger:#ef4444; --ok:#10b981;
  --grad:linear-gradient(135deg,#0ea5e9 0%,#4f46e5 100%);
  --glow:0 0 0 3px rgba(79,70,229,.25);
  --shadow:0 12px 30px -16px rgba(79,70,229,.4);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(900px 480px at 10% -8%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(820px 460px at 95% 0%, rgba(244,63,94,.14), transparent 60%),
    var(--bg);
  color:var(--text); font-family:var(--sans); line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem 1.4rem; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; letter-spacing:.01em; color:var(--text); text-decoration:none; font-size:1.05rem}
.brand-mark{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-size:1.15rem;
}
.topnav{margin-left:auto; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
.topnav a{
  color:var(--muted); text-decoration:none; font-size:.92rem;
  padding:.25rem 0; border-bottom:2px solid transparent; transition:.15s;
}
.topnav a:hover{color:var(--text); border-color:var(--blue)}
.topnav .who{
  color:var(--coral); font-family:var(--mono); font-size:.8rem; font-weight:600;
  padding-left:1rem; border-left:1px solid var(--line);
}
.topnav .logout{color:var(--muted)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:2rem 1.4rem; flex:1}
.footsmall{
  text-align:center; color:var(--muted); font-family:var(--mono);
  font-size:.72rem; letter-spacing:.08em; padding:1.5rem; border-top:1px solid var(--line);
}

/* ---------- hero / headings ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 .5rem;
}
.hero h1{font-size:2.5rem; margin:.1rem 0 .4rem; letter-spacing:-.015em; line-height:1.1}
.hero-tight h1{font-size:1.95rem}
.lede{color:var(--muted); margin:0 0 1.6rem; max-width:46ch}
.page-head{margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--line)}
.page-head h1{margin:0 0 .25rem; font-size:1.6rem}
h2{font-size:1.15rem; margin:0 0 1rem}
.muted{color:var(--muted)}
.empty{padding:2rem 0}

/* ---------- cards / forms ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; margin-bottom:1.4rem; box-shadow:var(--shadow);
}
.auth-card{max-width:420px; margin:1.5rem auto}
.form{display:flex; flex-direction:column; gap:1rem}
.form-inline{flex-direction:row; flex-wrap:wrap; align-items:flex-end}
.form label{display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--muted)}
.form small{color:var(--muted); font-weight:400}
.form input{
  background:#fbfdff; border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:.7rem .8rem; font-size:.95rem; font-family:var(--sans);
  transition:border-color .15s, box-shadow .15s;
}
.form input::placeholder{color:#9aa7b4}
.form input:focus{outline:none; border-color:var(--blue); box-shadow:var(--glow)}
.form-inline label{flex:1; min-width:180px}

.btn{
  background:var(--grad); color:#fff; border:0; border-radius:9px;
  padding:.72rem 1.3rem; font-size:.95rem; font-weight:600; cursor:pointer;
  transition:transform .15s, box-shadow .15s, filter .15s; align-self:flex-start;
  box-shadow:0 10px 22px -10px rgba(47,107,237,.6);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 28px -10px rgba(47,107,237,.7)}
.link{background:none; border:0; color:var(--muted); cursor:pointer; font-size:.85rem; padding:0}
.link:hover{color:var(--text)}
.link.danger:hover{color:var(--danger)}
.question{font-size:1.1rem; color:var(--text); margin:.2rem 0 1rem}

.auth-links{display:flex; justify-content:space-between; margin-top:1.1rem; font-size:.88rem}
.auth-links a{color:var(--blue); text-decoration:none; font-weight:500}
.auth-links a:hover{color:var(--accent)}

/* ---------- flash ---------- */
.flash{padding:.7rem 1rem; border-radius:9px; margin-bottom:1rem; font-size:.9rem; border:1px solid}
.flash-error{background:#fdeef0; border-color:#f6c9cf; color:#b4232f}
.flash-success{background:#e9f8f1; border-color:#bfe8d6; color:#0f7a52}
.flash-info{background:#eaf1fe; border-color:#cadcfb; color:#1d54c0}

/* ---------- dashboard tiles ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.tile{
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; text-decoration:none; color:var(--text); overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.tile::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
}
.tile:hover{transform:translateY(-4px); border-color:var(--blue);
  box-shadow:0 20px 40px -18px rgba(47,107,237,.5)}
.tile-icon{font-size:1.8rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; width:max-content;
}
.tile-label{font-weight:600; font-size:1.12rem}
.tile-desc{color:var(--muted); font-size:.85rem}

/* ---------- browse ---------- */
.crumbs{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.crumbs a{color:var(--blue); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.folders{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem}
.folder{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:.55rem .9rem; color:var(--text); text-decoration:none; font-size:.9rem;
  box-shadow:0 4px 12px -8px rgba(31,73,140,.3);
  transition:border-color .15s, background .15s, transform .15s;
}
.folder:hover{border-color:var(--blue); background:var(--panel-2); transform:translateY(-1px)}
.folder-icon{color:var(--coral)}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem}
.item{
  margin:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .15s, border-color .15s;
}
.item:hover{transform:translateY(-2px); border-color:var(--blue)}
.item img,.item video{display:block; width:100%; height:170px; object-fit:cover; background:#e7eef5}
.item video{object-fit:contain; background:#0d1622}
.item figcaption{
  padding:.5rem .7rem; font-size:.78rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- credit vault ---------- */
.vault-list{display:flex; flex-direction:column; gap:.6rem}
.vault-row{
  display:flex; align-items:center; gap:1rem;
  background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:.8rem 1rem; box-shadow:0 6px 16px -12px rgba(31,73,140,.35);
}
.vault-title{font-weight:600; min-width:160px}
.vault-secret{flex:1; display:flex; align-items:center; gap:.7rem}
.vault-secret code{font-family:var(--mono); color:var(--accent)}
.vault-del{margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .topbar{flex-wrap:wrap; gap:.6rem 1rem}
  .topnav{margin-left:0; width:100%}
  .hero h1{font-size:2rem}
  .vault-row{flex-wrap:wrap}
  .vault-title{min-width:0}
}

/* accessibility: visible focus + reduced motion */
a:focus-visible,.btn:focus-visible,.tile:focus-visible,input:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Media list view (Videos / Training) ===== */
.media-list{ display:flex; flex-direction:column; gap:.4rem; margin-top:1rem; }
.media-row{
  display:flex; align-items:center; gap:.85rem;
  padding:.75rem 1rem; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--text); transition:background .12s, transform .12s, border-color .12s;
}
.media-row:hover{ background:var(--panel-2); border-color:var(--accent); transform:translateX(2px); }
.row-icon{ font-size:1.3rem; flex-shrink:0; width:1.6rem; text-align:center; }
.folder-row .row-icon{ color:var(--blue); }
.file-row .row-icon{ color:var(--accent); }
.row-name{ font-size:.95rem; word-break:break-word; }