.app{
      width:100%; max-width:var(--app-max-w); margin:0 auto; min-height:100dvh; position:relative;
      padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px)); box-sizing:border-box;
    }

/* Two-column feed */
.feed{ 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
padding: var(--gap);
}
.card{
  position:relative; /* for flag overlay */
  display:block; background:var(--card-bg); border-radius:var(--radius); overflow:hidden;
margin: 0;    
box-shadow:var(--shadow); border:1px solid var(--border);
text-decoration: none;
font-family: "Epunda Slab", serif;	  
}
.card img{ width:100%; height:auto; display:block; }
.card .meta{ padding:10px 12px 12px; color:var(--muted); font-size:12px; }
.card .ticks{ padding:2px 2px 2px; color:var(--muted); font-size:8px; }

/* Flag button overlay */
.flag-btn{
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-grid; place-items:center; gap:6px;
  height:34px; min-width:34px; padding:0 10px;
  border:none; border-radius:999px;
  background: color-mix(in srgb, var(--accent) 20%, #ffffff 80%);
color:#b71f5b; /* darker pink text */
box-shadow:0 4px 12px rgba(0,0,0,.12);
cursor:pointer; opacity:.9;
-webkit-tap-highlight-color:transparent;
}
.flag-btn:hover{ opacity:1; }
.flag-btn svg{ width:16px; height:16px; fill:currentColor; display:block; }
.flag-btn span{ font-size:12px; font-weight:600; }
.flag-btn.flagged{ opacity:.6; cursor:default; }
.flag-btn.flagged::after{
  content:"Flagged"; margin-left:6px; font-size:12px; color:#8b5170;
}

/* Loading chip */
.loading-chip{
  display:inline-block; margin:8px 12px; padding:8px 12px; font-size:12px; color:var(--muted);
background:#fff; border:1px dashed var(--border); border-radius:12px;
}

/* "Caught up" banner */
.end-banner{
  display:flex; align-items:center; justify-content:center;
  margin:16px auto 100px; padding:12px 16px; gap:8px;
  width:calc(100% - 20px); max-width:520px;
background:#ffffff; color:var(--muted);
border:1px solid var(--border); border-radius:999px;
box-shadow:var(--shadow); font-size:13px;
}

/* Bottom tab bar (light) */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0;
width:min(100%,var(--app-max-w));
height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
padding-bottom:env(safe-area-inset-bottom,0px);
background:rgba(255,255,255,.92); backdrop-filter: blur(10px);
border-top:1px solid var(--border);
display:grid; grid-template-columns:repeat(5,1fr); align-items:center; z-index:10;
box-shadow:0 -6px 20px rgba(0,0,0,.06);
}
.tab{
  height:var(--bar-h); display:grid; align-content:center; justify-items:center; gap:4px;
color:#7b8190; text-decoration:none; -webkit-tap-highlight-color:transparent; user-select:none;
}
.tab.active{ color:var(--accent); }
.tab svg{ width:22px; height:22px; fill:currentColor; display:block; }
.tab span{ font-size:11px; letter-spacing:.2px; }

/* Search modal (light) */
.modal{ position:fixed; inset:0; display:none; align-items:flex-start; justify-content:center; z-index:50;
       background:rgba(0,0,0,.25); backdrop-filter: blur(2px); padding-top:6vh;}
.modal.open{ display:flex; }
.panel{
  width:min(100%,var(--app-max-w)); margin:0 auto; background:#ffffff;
  border-radius:18px 18px 0 0; min-height:86dvh; box-shadow:var(--shadow-strong); position:relative; border:1px solid var(--border);
}
.panel-header{
  position:sticky; top:0; background:linear-gradient(180deg, #ffffff, rgba(255,255,255,.86));
padding:12px 14px; border-bottom:1px solid var(--border); display:flex; gap:8px; align-items:center; z-index:2;
}
.panel-header input[type="search"]{
  flex:1; border:1px solid var(--border); outline:none; background:#f9fafb;
color:var(--ink); padding:12px 14px; border-radius:12px; font-size:16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.panel-header input[type="search"]:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, #ffffff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
background:#fff;
}
.close-btn{
  border:none; background:transparent; color:#8a93a4; font-size:20px; line-height:1; cursor:pointer; padding:6px 8px;
}
.close-btn:hover{ color:var(--accent); }

.results-wrap{ position:relative; padding:8px 14px 16px; }
.ac-list{
  position:absolute; left:14px; right:14px; top:0; margin:0; padding:6px 0; list-style:none;
  background:#ffffff; border:1px solid var(--border); border-radius:12px; max-height:50vh; overflow:auto;
box-shadow:var(--shadow-strong); display:none;
}
.ac-list.show{ display:block; }
.ac-item{ padding:10px 12px; color:var(--ink); cursor:pointer; }
.ac-item:hover,.ac-item.active{ background: #f6fbff; }
.loading,.empty{ padding:14px; color:var(--muted); font-size:13px; }

/* Flag modal specifics */
.flag-body{ padding:14px; display:grid; gap:12px; }
.flag-reasons{ display:grid; gap:8px; }
.flag-reasons label{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.flag-reasons input{ accent-color: var(--accent); }
.flag-notes{ width:100%; min-height:110px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; resize:vertical; background:#f9fafb; }
.flag-actions{ display:flex; gap:10px; justify-content:flex-end; padding:10px 14px 16px; border-top:1px solid var(--border); background:#fff; }
.btn{ padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--ink); cursor:pointer; }
.btn.primary{ background: var(--accent); color:#fff; border-color: transparent; }
.btn:disabled{ opacity:.6; cursor:default; }
.flag-error{ color:#b3261e; font-size:13px; display:none; }

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bar-h) + 16px);
background:#111827; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.2);
z-index:60; opacity:0; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }

body.modal-open{ overflow:hidden; }

/* Sentinel (invisible spacer) */
#sentinel{ height: 1px; }

@media(max-width:360px){
  .feed{ column-count:2; column-gap:8px; }
.panel-header input[type="search"]{ font-size:15px; padding:10px 12px; }
}

#sentinel{
  height: 1px;
  grid-column: 1 / -1;
}