/* ================================================================
   style.css — Foodstagram v2 (Revisi Lengkap)
   Palet: Terracotta #C25E3C · Cream #FAF5EC · Ink #241914
   Font: Fraunces · Inter Tight · JetBrains Mono
   ================================================================ */

/* ── Variables ── */
:root {
  --cream:      #FAF5EC;
  --ivory:      #FFFCF6;
  --terra:      #C25E3C;
  --terra-dark: #8A3A21;
  --terra-deep: #5C2614;
  --terra-lt:   #E29C7A;
  --terra-pale: #FAEEE7;
  --terra-bd:   #F4D6C5;
  --mustard:    #D9A02B;
  --ink:        #241914;
  --sepia:      #6B5B4E;
  --muted:      #9C8C7C;
  --border:     #E8D8C8;
  --bg:         #F5EEE3;
  --green:      #166534;
  --green-bg:   #F0FDF4;
  --green-bd:   #BBF7D0;
  --red:        #B91C1C;
  --red-bg:     #FEF2F2;
  --red-bd:     #FCA5A5;
  --font-d: 'Fraunces',Georgia,serif;
  --font-b: 'Inter Tight',system-ui,sans-serif;
  --font-m: 'JetBrains Mono','Courier New',monospace;
  --r:  10px;
  --rs: 6px;
  --sh: 0 4px 16px rgba(194,94,60,.1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.6}
img{display:block;max-width:100%}
a{color:var(--terra);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hidden{display:none!important}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar{
  position:sticky;top:0;z-index:100;
  background:rgba(250,245,236,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:0 1.5rem;
  height:58px;display:flex;align-items:center;gap:1rem;
}
.nav-logo{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-d);font-size:1.15rem;font-weight:700;
  color:var(--ink);flex-shrink:0;letter-spacing:-.01em;
}
.nav-links{display:flex;gap:.15rem;flex:1}
.nav-link{
  padding:.38rem .8rem;border-radius:var(--rs);
  font-size:.82rem;font-weight:500;color:var(--sepia);
  transition:background .12s,color .12s;
}
.nav-link:hover,.nav-link.active{
  background:var(--terra-pale);color:var(--terra);text-decoration:none;
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.nav-user{font-family:var(--font-m);font-size:.75rem;color:var(--sepia)}
.nav-logout{
  font-size:.75rem;padding:.28rem .7rem;
  border:1px solid var(--border);border-radius:99px;
  color:var(--sepia);transition:all .12s;
}
.nav-logout:hover{border-color:var(--terra);color:var(--terra);background:var(--terra-pale);text-decoration:none}

/* ================================================================
   LAYOUT
   ================================================================ */
.main-content{min-height:calc(100vh - 58px)}
.page-wrap{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}
.page-head{margin-bottom:1.75rem}
.page-title{
  font-family:var(--font-d);font-size:2rem;font-weight:700;
  color:var(--ink);line-height:1.15;margin-bottom:.4rem;
}
.page-title em{font-style:italic;color:var(--terra)}
.page-sub{color:var(--sepia);font-size:.88rem;max-width:580px}

/* ── Typography helpers ── */
.eyebrow{
  font-family:var(--font-m);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.25em;
  color:var(--terra);margin-bottom:.3rem;
}
.sec-head{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:1rem;margin:1.75rem 0 1.25rem;
}
.sec-title{
  font-family:var(--font-d);font-size:1.4rem;font-weight:600;
  color:var(--ink);flex:1;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--terra);color:#fff;
  padding:.52rem 1.15rem;border-radius:99px;
  font-size:.85rem;font-weight:600;border:none;cursor:pointer;
  transition:background .12s,transform .1s;font-family:var(--font-b);
}
.btn-primary:hover{background:var(--terra-dark);transform:translateY(-1px);color:#fff;text-decoration:none}
.btn-full{width:100%;justify-content:center;border-radius:var(--rs);padding:.65rem;font-size:.92rem}

.btn-outline{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1.5px solid var(--border);background:transparent;
  color:var(--sepia);padding:.48rem 1rem;border-radius:99px;
  font-size:.82rem;font-weight:500;cursor:pointer;
  transition:all .12s;font-family:var(--font-b);
}
.btn-outline:hover{border-color:var(--terra);color:var(--terra);background:var(--terra-pale);text-decoration:none}
.btn-sm{padding:.3rem .7rem;font-size:.75rem}

.btn-like{
  background:var(--terra-pale);color:var(--terra);
  border:1px solid var(--terra-bd);padding:.38rem .9rem;
  border-radius:99px;cursor:pointer;font-size:.82rem;font-weight:500;
  transition:all .12s;font-family:var(--font-b);
}
.btn-like:hover{background:var(--terra);color:#fff}

/* ================================================================
   ALERTS
   ================================================================ */
.alert{
  padding:.72rem 1rem;border-radius:var(--rs);
  font-size:.86rem;margin-bottom:1.25rem;
}
.alert-error{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red)}
.alert-ok   {background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)}

/* ================================================================
   STAT CARDS
   ================================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:2rem}
@media(max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r);padding:1.1rem 1rem;text-align:center;
  box-shadow:var(--sh);
}
.sn{display:block;font-family:var(--font-d);font-size:2rem;font-weight:700;color:var(--terra);line-height:1.1}
.sl{font-size:.7rem;color:var(--sepia);margin-top:.25rem;font-family:var(--font-m);text-transform:uppercase;letter-spacing:.1em}

/* ================================================================
   POST GRID & CARDS
   ================================================================ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:1.1rem;
}
.post-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(194,94,60,.14)}
.card-img-box{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ivory)}
.card-img{width:100%;height:100%;object-fit:cover;transition:filter .5s}
.filter-badge{
  position:absolute;top:.55rem;left:.55rem;
  background:rgba(250,245,236,.93);color:var(--terra);
  font-family:var(--font-m);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.12em;
  padding:.18rem .5rem;border-radius:99px;
  backdrop-filter:blur(4px);
}
.card-body{padding:.8rem .95rem}
.card-nama{font-family:var(--font-d);font-size:.98rem;font-weight:600;color:var(--ink);margin-bottom:.18rem}
.card-service{font-size:.8rem;color:var(--sepia);margin-bottom:.4rem}
.card-caption{font-size:.78rem;color:var(--sepia);margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;justify-content:space-between;font-size:.73rem;color:var(--muted);margin-bottom:.4rem}
.card-foot{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.68rem;color:#BBA898}
.empty{text-align:center;padding:4rem 1rem;color:var(--sepia);display:flex;flex-direction:column;align-items:center;gap:.75rem}

/* ================================================================
   MODAL DETAIL
   ================================================================ */
.modal-bg{
  position:fixed;inset:0;z-index:1000;
  background:rgba(36,25,20,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.modal-box{
  background:var(--ivory);border-radius:var(--r);
  width:100%;max-width:860px;max-height:90vh;
  overflow-y:auto;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
}
.modal-x{
  position:absolute;top:.7rem;right:.7rem;z-index:10;
  background:var(--terra-pale);border:none;cursor:pointer;
  width:32px;height:32px;border-radius:50%;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  color:var(--terra);transition:background .12s;
}
.modal-x:hover{background:var(--terra-bd)}
.modal-load{text-align:center;padding:3rem;color:var(--sepia);font-style:italic}

.detail-wrap{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:580px){.detail-wrap{grid-template-columns:1fr}}
.detail-img-col{position:relative}
.detail-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r) 0 0 var(--r);display:block}
@media(max-width:580px){.detail-img{border-radius:var(--r) var(--r) 0 0}}
.detail-info{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.detail-title{font-family:var(--font-d);font-size:1.45rem;font-weight:700;color:var(--ink);line-height:1.2}
.detail-row{font-size:.87rem;color:var(--sepia)}
.detail-caption{font-size:.85rem;color:var(--sepia);line-height:1.65}
.detail-like-row{display:flex;align-items:center;gap:.85rem}
.detail-likes{font-size:.95rem;font-weight:600;color:var(--terra)}
.detail-meta{font-family:var(--font-m);font-size:.68rem;color:#BBA898;display:flex;flex-direction:column;gap:.2rem}
.detail-coords{font-family:var(--font-m);font-size:.68rem;color:#BBA898}
.detail-php{background:var(--terra-pale);border-radius:var(--rs);padding:.8rem}
.detail-php pre{font-family:var(--font-m);font-size:.76rem;color:var(--terra);white-space:pre-wrap}

/* ================================================================
   LOGIN / REGISTER
   ================================================================ */
.login-body{background:var(--cream)}
.login-wrap{display:grid;grid-template-columns:2fr 3fr;min-height:100vh}
@media(max-width:768px){.login-wrap{grid-template-columns:1fr}}

/* Panel kiri */
.login-left{
  background:linear-gradient(150deg,#5C2614 0%,#8A3A21 35%,#C25E3C 70%,#A84A2C 100%);
  padding:2.5rem;color:var(--cream);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
@media(max-width:768px){.login-left{display:none}}
.ll-dots{
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(circle,rgba(250,245,236,.22) 1px,transparent 1.5px);
  background-size:14px 14px;
}
.ll-top{position:relative;display:flex;align-items:center;gap:.75rem}
.ll-ring{background:rgba(250,245,236,.14);padding:.5rem;border-radius:50%;border:1px solid rgba(250,245,236,.2)}
.ll-edition{font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.28em;opacity:.65}
.ll-name{font-family:var(--font-d);font-size:1.4rem;font-weight:700}
.ll-mid{position:relative}
.ll-line{width:48px;height:2px;background:rgba(250,245,236,.28);margin-bottom:1.2rem}
.ll-tagline{font-family:var(--font-d);font-size:2.4rem;font-weight:700;line-height:1.08}
.ll-hl{color:var(--mustard);font-style:normal}
.ll-desc{margin-top:1rem;font-size:.88rem;line-height:1.7;opacity:.82}
.ll-div{height:1px;background:repeating-linear-gradient(90deg,rgba(250,245,236,.25) 0,rgba(250,245,236,.25) 4px,transparent 4px,transparent 8px);margin-bottom:.75rem}
.ll-course{font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;opacity:.55}
.ll-tech{font-family:var(--font-d);font-size:.9rem;opacity:.88;margin-top:.2rem}

/* Panel kanan */
.login-right{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:var(--ivory)}
.lr-inner{width:100%;max-width:400px}
.lr-title{font-family:var(--font-d);font-size:2rem;font-weight:700;color:var(--ink);margin:.5rem 0 .4rem}
.lr-sub{font-size:.85rem;color:var(--sepia);margin-bottom:1.6rem}
.lr-note{text-align:center;font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.18em;color:#BBA898;margin-top:1.5rem}

/* Form fields */
.auth-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:0}
.fg{display:flex;flex-direction:column;gap:.3rem}
.flabel{font-family:var(--font-m);font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:var(--sepia)}
.opt{font-family:var(--font-b);font-size:.78rem;text-transform:none;letter-spacing:0;color:var(--muted)}
.pw-wrap{position:relative}
.finput{
  width:100%;padding:.58rem .85rem;
  border:1.5px solid var(--border);border-radius:var(--rs);
  background:var(--cream);font-family:var(--font-b);font-size:.88rem;
  color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s;
}
.finput:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(194,94,60,.1)}
.ftxt{resize:vertical;min-height:76px}
.pw-toggle{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--muted);
  padding:.25rem;border-radius:4px;font-size:.9rem;
}

/* Demo accounts */
.demo-wrap{margin-top:1.6rem}
.demo-label{font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;color:var(--sepia);margin-bottom:.6rem}
.demo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.demo-btn{
  background:rgba(250,245,236,.6);border:1px solid var(--border);
  border-radius:var(--rs);padding:.55rem .5rem;
  text-align:left;cursor:pointer;transition:all .12s;width:100%;
}
.demo-btn:hover{border-color:var(--terra);background:var(--cream);transform:translateY(-2px)}
.demo-btn b{display:block;font-family:var(--font-d);font-size:.85rem;color:var(--ink)}
.demo-btn span{display:block;font-family:var(--font-m);font-size:.68rem;color:var(--sepia)}

/* ================================================================
   ADD PAGE
   ================================================================ */
.add-layout{display:grid;grid-template-columns:3fr 2fr;gap:1.5rem;align-items:start}
@media(max-width:860px){.add-layout{grid-template-columns:1fr}}

/* Polaroid preview */
.polaroid{
  border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;background:#fff;position:sticky;top:68px;
  box-shadow:var(--sh);
}
.preview-box{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ivory)}
.prev-img{width:100%;height:100%;object-fit:cover;transition:filter .5s;display:block}
.stamp{
  position:absolute;top:.6rem;left:.6rem;
  background:rgba(250,245,236,.93);color:var(--terra);
  font-family:var(--font-m);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.12em;
  padding:.22rem .55rem;border-radius:99px;
  backdrop-filter:blur(4px);
}
.btn-cam{
  position:absolute;bottom:.65rem;right:.65rem;
  background:rgba(36,25,20,.72);color:#fff;
  font-size:.75rem;font-weight:500;padding:.32rem .7rem;
  border-radius:99px;cursor:pointer;backdrop-filter:blur(4px);
  display:flex;align-items:center;gap:.35rem;transition:background .12s;
}
.btn-cam:hover{background:rgba(36,25,20,.9)}
.php-hint{padding:.85rem 1rem;border-top:1px solid var(--border);background:rgba(250,245,236,.65)}
.php-hint-label{font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.15em;color:var(--sepia);margin-bottom:.4rem}
.php-hint pre,
.php-hint-label+pre{font-family:var(--font-m);font-size:.76rem;color:var(--terra);white-space:pre-wrap}

/* Form sections */
.add-form-col{display:flex;flex-direction:column;gap:1.1rem}
.form-sec{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:1.2rem}
.step-hd{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}
.step-num{background:var(--terra);color:#fff;font-family:var(--font-m);font-size:.62rem;font-weight:700;padding:.18rem .45rem;border-radius:4px}
.step-lbl{font-family:var(--font-d);font-size:1rem;font-weight:600;color:var(--ink)}
.fields{display:flex;flex-direction:column;gap:.85rem}

/* Filter grid */
.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.fo{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  padding:.5rem .3rem;border-radius:var(--rs);
  border:1.5px solid var(--border);cursor:pointer;transition:all .12s;
}
.fo:hover,.fo-sel{border-color:var(--terra);background:var(--terra-pale)}
.fo-sw{width:30px;height:30px;border-radius:50%}
.fo-lbl{font-family:var(--font-m);font-size:.62rem;color:var(--sepia);text-align:center}
.fo-sel .fo-lbl{color:var(--terra);font-weight:600}

/* Upload zone */
.upload-zone{
  border:2px dashed var(--border);border-radius:var(--rs);
  padding:1.5rem;text-align:center;cursor:pointer;
  transition:border-color .12s,background .12s;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.upload-zone:hover{border-color:var(--terra);background:var(--terra-pale)}
.uz-icon{font-size:1.75rem}
.uz-txt{font-size:.85rem;color:var(--sepia);font-weight:500}
.uz-sub{font-size:.73rem;color:var(--muted)}

/* Lokasi box */
.loc-box{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .85rem;border-radius:var(--rs);
  font-size:.83rem;margin-bottom:.45rem;
}
.loc-loading{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.loc-ok     {background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.loc-warn   {background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.loc-coords {font-family:var(--font-m);font-size:.72rem;color:var(--sepia);margin-bottom:.5rem}
.form-actions{display:flex;gap:.75rem;justify-content:flex-end;padding-top:.25rem}

/* ================================================================
   SEARCH PAGE
   ================================================================ */
.search-form{display:flex;gap:.75rem;margin-bottom:1.1rem;align-items:center}
.search-box{position:relative;flex:1}
.search-ico{position:absolute;left:.8rem;top:50%;transform:translateY(-50%)}
.search-input{
  width:100%;padding:.62rem .85rem .62rem 2.3rem;
  border:1.5px solid var(--border);border-radius:99px;
  background:#fff;font-family:var(--font-b);font-size:.88rem;
  color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s;
}
.search-input:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(194,94,60,.1)}
.chips{display:flex;flex-wrap:wrap;gap:.38rem;margin-bottom:.85rem}
.chip{
  padding:.28rem .7rem;border-radius:99px;
  border:1px solid var(--border);font-size:.76rem;
  color:var(--sepia);cursor:pointer;transition:all .12s;
}
.chip:hover{background:var(--terra-pale);border-color:var(--terra);color:var(--terra)}
.chip-on{background:var(--terra)!important;color:#fff!important;border-color:var(--terra)!important}
.sort-row{display:flex;align-items:center;gap:.4rem;margin-bottom:1.1rem;flex-wrap:wrap}
.sort-lbl{font-size:.78rem;color:var(--sepia);font-weight:500}
.sort-item{font-size:.78rem;color:var(--sepia);padding:.2rem .55rem;border-radius:99px;transition:all .12s}
.sort-item:hover{background:var(--terra-pale);color:var(--terra)}
.sort-on{background:var(--terra-pale);color:var(--terra);font-weight:600}
.sql-panel{background:#1E1E2E;border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1rem}
.sql-label{font-family:var(--font-m);font-size:.62rem;text-transform:uppercase;letter-spacing:.15em;color:#888;margin-bottom:.4rem}
.sql-code{font-family:var(--font-m);font-size:.76rem;color:#89B4FA;white-space:pre-wrap;word-break:break-all;line-height:1.7}
.result-count{font-size:.85rem;color:var(--sepia);margin-bottom:1.1rem}

/* ================================================================
   MAPS PAGE
   ================================================================ */
.map-layout{display:grid;grid-template-columns:300px 1fr;gap:1rem;height:calc(100vh - 260px);min-height:520px}
@media(max-width:768px){.map-layout{grid-template-columns:1fr;height:auto}}
.map-sidebar{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;background:#fff}
.map-sidebar-lbl{font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.15em;color:var(--sepia);padding:.7rem 1rem;border-bottom:1px solid var(--border)}
.map-list{overflow-y:auto;flex:1}
.map-item{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.map-item:hover,.map-item-active{background:var(--terra-pale)}
.map-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex-shrink:0}
.map-item-info{flex:1;min-width:0}
.map-item-nama{font-size:.83rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-item-svc{font-size:.73rem;color:var(--sepia)}
.map-item-kota{font-size:.7rem;color:var(--muted)}
.map-chip{font-family:var(--font-m);font-size:.6rem;color:#fff;padding:.15rem .38rem;border-radius:4px;white-space:nowrap;flex-shrink:0}
.map-main{border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
#map{height:100%;min-height:400px}
@media(max-width:768px){#map{height:400px}}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{border-top:1px solid var(--border);background:rgba(250,245,236,.75);padding:2.5rem 1.5rem;text-align:center}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-title{font-family:var(--font-d);font-size:.95rem;font-style:italic;color:var(--ink);margin-bottom:.3rem}
.footer-sub{font-family:var(--font-m);font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--terra);margin-bottom:.4rem}
.footer-copy{font-family:var(--font-m);font-size:.62rem;color:#BBA898}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:640px){
  .page-title{font-size:1.55rem}
  .nav-links{display:none}
  .post-grid{grid-template-columns:1fr 1fr;gap:.65rem}
  .filter-grid{grid-template-columns:repeat(4,1fr)}
  .form-actions{flex-direction:column-reverse}
  .add-layout{grid-template-columns:1fr}
}