:root
{
  --bg:#ffffff;
  --ink:#000000;
  --muted:#555555;
  --card:#ffffff;
  --panel:#ffffff;
  --line:#111111;
  --accent:#000000;
  --glass: rgba(0,0,0,0.04);
  --r:14px; --dur:.46s; --ease:cubic-bezier(.22,.61,.36,1);
}
*
{
  box-sizing:border-box
}
html,body
{
  height: 100%;
}
body
{
  padding: 0;
  margin:0;
  font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  background: black;
  display:grid;
  place-items: center;
}
.device
{
  width: 380px;
  max-width: 94vw;
  height: 720px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  position:relative;
  padding: 0;
}
.stage
{
  position:absolute; inset:0; padding:28px 26px;
}
.view
{
  position:absolute; inset:28px 26px; border-radius:14px; padding:22px;
  background: var(--card);
  display:flex; flex-direction:column; gap:12px; align-items:center;
  justify-content:flex-start;
  pointer-events:none; opacity:0;
}
.view.active
{
  pointer-events:auto; opacity:1
}

/* Logo image */
.logo-img
{
  object-fit:cover;
  width: 60%;
}

.wordmark
{
  margin-top:6px;
  font-size:25px;
  color:var(--ink);
}
.desc
{
  color: solid black;
  text-align: left;
  font-size:20px;
  max-width: 100%;
  margin-bottom:6px;
  margin-top: 220px;
}
.liliw
{
  font-size: 15px;
  margin-left:-60px;
  margin-top: 12px;
  color: gray;
}
i
{
  color: gray;
}
.fas
{
  font-size: 12px;
}


.inputs
{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px
}
.label-small
{
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  text-align:left;
  width:100%
}
.field
{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel);
  border-radius:5px;
  padding:12px;
  width:100%;
  border:1.5px solid var(--line);
}
.field input{ flex:1; background:transparent; border:0; outline: 0; color:var(--ink); font-size:15px }



.btn{ width:100%; padding:12px 14px; border-radius:5px; border:1.5px solid var(--line); font-weight:500; cursor:pointer; font-size:15px;}
.btn.primary{ background:var(--accent); color:#fff }
.btn.primary:hover{ filter:brightness(0.85) }
.btn.ghost{ background:#fff; color:var(--ink) }
.btn.ghost:hover{ background:#f2f2f2 }

.links{ width:100%; display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; font-size:14px }
.link { color:var(--ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.link:hover{ opacity:.7 }

.small{ font-size:12px; color:var(--muted); text-align:center; margin-top: 8px; }

/* Forgot password tweak */
.forgot-link {
  font-size:12px;
  color:#d00; /* red */
  text-decoration:underline;
  cursor:pointer;
  text-align:right;
  display:block;
  margin-top:10px;
  margin-bottom: 10px;
}

.avatar-uploader {
  margin: 0 auto; /* centers horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  overflow: hidden;
  position: relative; /* stay in normal flow */
}

/* Default emoji sa gitna */
.avatar-uploader .emoji {
  font-size: 36px;
  position: absolute;
  z-index: 5;
}

.avatar-camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #000;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}

/* Preview image */
.avatar-preview {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: none; /* hidden until upload */
}

/* Pag may image na, itago si 📷 camera at emoji */
.avatar-uploader.has-image .avatar-camera,
.avatar-uploader.has-image .emoji {
  display: none;
}

.setupBackBtn {
    position: absolute;  /* so nasa top-left ng view */
    top: 20px;           /* adjust depende sa spacing ng header/logo */
    left: 20px;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    margin-top: -20px;
}
.setupBackBtn a
{
  color: solid black;
}



@media (max-width: 520px) {

  /* Container */
  .device {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    min-height: 100vh;
    max-height: none;
    margin-top: 0;
    padding: 0;
  }
  .liliw
{
  margin-left: -24px;
  
}



.newsfeed-body{ display:flex; flex-direction:column; gap:12px; height:100% }

/* Animations */
.in-right{ animation: in-right var(--dur) var(--ease) both }
.out-left{ animation: out-left var(--dur) var(--ease) both }
.in-left{ animation: in-left var(--dur) var(--ease) both }
.out-right{ animation: out-right var(--dur) var(--ease) both }
.in-up{ animation: in-up var(--dur) var(--ease) both }
.out-up{ animation: out-up var(--dur) var(--ease) both }
.in-down{ animation: in-down var(--dur) var(--ease) both }
.out-down{ animation: out-down var(--dur) var(--ease) both }

@keyframes in-right{ from{ transform:translateX(120%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes out-left { from{ transform:translateX(0); opacity:1 } to{ transform:translateX(-120%); opacity:0 } }
@keyframes in-left{ from{ transform:translateX(-120%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes out-right{ from{ transform:translateX(0); opacity:1 } to{ transform:translateX(120%); opacity:0 } }
@keyframes in-up{ from{ transform:translateY(120%); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes out-up{ from{ transform:translateY(0); opacity:1 } to{ transform:translateY(-120%); opacity:0 } }
@keyframes in-down{ from{ transform:translateY(-120%); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes out-down{ from{ transform:translateY(0); opacity:1 } to{ transform:translateY(120%); opacity:0 } }

button:focus, input:focus, .link:focus{ outline:3px solid #000; outline-offset:3px; }