/* ===== PatoworldTV - Clean Modern White UI ===== */
:root{
  --bg1:#ffffff;
  --bg2:#ffffff;

  --text:#111111;
  --muted:#555555;

  --line:rgba(0,0,0,.12);

  --brand1:#ff4ecd;
  --brand2:#00a6d4;
  --brand3:#7c3aed;
  --brand4:#22c55e;
  --brand5:#f59e0b;

  --shadow: 0 8px 25px rgba(0,0,0,.08);
  --radius: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ===== GLOBAL LAYOUT ===== */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  background:#ffffff;
}

/* Push footer to bottom */
.page-content{ flex:1 0 auto; }

/* ===== LINKS ===== */
a{ color:var(--brand2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== CONTAINER ===== */
.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:22px 0 40px;
}

/* ===== HEADER ===== */
header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 18px;
}

.brand h1{ margin:0; font-size:30px; color:#000; }
.brand small{ color:var(--muted); }

/* ===== NAV PILLS ===== */
nav{ display:flex; gap:10px; flex-wrap:wrap; }

.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f5f5f5;
  font-weight:700;
  font-size:14px;
  transition:.2s;
  color:#000;
}
.pill:hover{
  transform:translateY(-1px);
  background:#eaeaea;
  text-decoration:none;
}
.pill.news{ box-shadow:0 0 0 1px rgba(0,166,212,.3) inset; }
.pill.sport{ box-shadow:0 0 0 1px rgba(34,197,94,.3) inset; }
.pill.ent{ box-shadow:0 0 0 1px rgba(255,78,205,.3) inset; }
.pill.general{ box-shadow:0 0 0 1px rgba(245,158,11,.3) inset; }

/* ===== TOP LINKS ===== */
.toplinks{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.toplinks a{
  font-weight:700;
  padding:8px 10px;
  border-radius:12px;
  color:#000;
}
.toplinks a:hover{
  background:#f0f0f0;
  text-decoration:none;
}

/* ===== HERO ===== */
.hero{
  margin-top:18px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
}
.hero h2{ margin:0; color:#000; }
.hero p{ color:var(--muted); }

/* ===== GRID ===== */
.grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* ===== CARD ===== */
.card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:0;
  transition:.2s;
}
.card:hover{ transform:translateY(-2px); }

.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:hover{ text-decoration:none; }

.card-media{
  width:100%;
  height:170px;
  background:#eaeaea;
  border-bottom:1px solid var(--line);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-media--video{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dfefff;
}
.video-badge{
  font-weight:900;
  letter-spacing:.6px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#ffffff;
}

.card-content{
  padding:16px;
}
.card-content small{ color:var(--muted); display:block; }
.card-content h2{ margin:8px 0 0; font-size:18px; color:#000; }

/* ===== POST HERO ===== */
.post-hero{
  margin-top:18px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
}
.post-title{ margin:0; font-size:34px; line-height:1.2; color:#000; }
.post-meta{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
}

/* ===== POST BODY ===== */
.post-body{
  margin-top:16px;
  line-height:1.7;
  color:#000;
}

.post-media{ margin:18px 0; }
.post-media img,
.post-media video{
  width:100%;
  max-width:100%;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:block;
}
.post-media video{ background:#000; }

/* ===== BUTTONS ===== */
button,.btn{
  border:none;
  border-radius:14px;
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(90deg,var(--brand2),var(--brand1));
  color:#ffffff;
}
button:hover{ filter:brightness(1.05); }
button:disabled{ opacity:.6; cursor:not-allowed; }

.btn-outline{
  background:#f5f5f5;
  border:1px solid var(--line);
  color:#000;
}
.btn-outline:hover{ background:#eaeaea; }

.btn-link{
  display:inline-flex;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  color:#000;
}
.btn-link:hover{
  border-color:var(--line);
  background:#f0f0f0;
  text-decoration:none;
}

/* Simple row layout */
.row{
  margin-top:18px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.inline{ display:inline-flex; }

/* ===== FORMS ===== */
form{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:#ffffff;
}

label{
  font-weight:700;
  margin-top:12px;
  display:block;
  color:#000;
}

input,textarea,select{
  width:100%;
  margin-top:6px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fafafa;
  color:#000;
}
textarea{ min-height:120px; }

/* ===== DASHBOARD ===== */
.dash-hero{
  margin-top:18px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
}
.dash-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
}
@media(max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }

/* ===== COMMENTS ===== */
.comment{
  margin-top:16px;
  padding-left:12px;
  border-left:3px solid var(--brand2);
  color:#000;
}
.reply{
  margin-left:18px;
  border-left:3px solid var(--brand1);
  padding-left:12px;
  color:#000;
}

/* ===== MESSAGES ===== */
.err{
  background:rgba(255,0,80,.15);
  border:1px solid rgba(255,0,80,.4);
  padding:10px;
  border-radius:12px;
  color:#000;
}
.ok{
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.4);
  padding:10px;
  border-radius:12px;
  color:#000;
}
.muted{ color:var(--muted); }

/* ===== FOOTER ===== */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  background:#fafafa;
}
.footer-inner{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:40px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media(max-width:900px){
  .footer-inner{ grid-template-columns:1fr; text-align:center; }
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:16px;
  text-align:center;
  color:var(--muted);
}

.social-icons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.social-icons a{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#ffffff;
  color:#000;
  font-weight:700;
  font-size:13px;
}
.social-icons a:hover{
  background:linear-gradient(90deg,var(--brand2),var(--brand1));
  color:#ffffff;
  border-color:transparent;
  text-decoration:none;
}

/* Make Patoworld TV clickable but keep original styling */
.home-link {
  text-decoration: none;
  color: inherit;
}

.home-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}