:root{
  --ig-bg:#FAFAFA;
  --ig-card:#FFFFFF;
  --ig-border:#DBDBDB;
  --ig-text:#262626;
  --ig-muted:#8E8E8E;
  --ig-blue:#0095F6;
  --ig-blue-hover:#1877F2;
  --ig-red:#ED4956;
  --ig-black:#000000;
  --radius:8px;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif:'Source Serif 4', Georgia, serif; /* used sparingly, e.g. onboarding logo */
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--sans); background:var(--ig-bg); color:var(--ig-text); -webkit-font-smoothing:antialiased; font-size:14px;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img{max-width:100%; display:block;}

/* ---------- Top nav (Instagram-style) ---------- */
.topnav{ position:sticky; top:0; z-index:50; background:var(--ig-card); border-bottom:1px solid var(--ig-border); }
.topnav-inner{ max-width:975px; margin:0 auto; display:flex; align-items:center; gap:20px; padding:0 20px; height:54px; }
.brand{ display:flex; align-items:center; gap:0; flex-shrink:0; }
.brand-word{ font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-size:22px; color:var(--ig-text); letter-spacing:-0.3px; }
.brand-mark{ display:none; }
.topnav-search{ flex:1; max-width:270px; background:var(--ig-bg); border:1px solid var(--ig-border); border-radius:8px; padding:7px 12px; font-size:13px; color:var(--ig-muted); }
.topnav-links{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.nav-item{ display:flex; align-items:center; justify-content:center; color:var(--ig-text); position:relative; }
.nav-item .label{ display:none; }
.nav-item svg{ width:24px; height:24px; }
.nav-item.active svg{ stroke-width:2.4; }
.nav-avatar{ width:24px; height:24px; border-radius:50%; background:var(--ig-border); color:var(--ig-text); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.lang-select{ display:none; }
.ticker{ display:none; }

/* ---------- Single-column feed layout ---------- */
.layout{ max-width:630px; margin:0 auto; display:block; padding:24px 12px 60px; }
.rail{ display:none; } /* no side dashboards — Instagram is a single feed column */
.card{ background:var(--ig-card); border:1px solid var(--ig-border); border-radius:var(--radius); overflow:hidden; }
.card + .card{ margin-top:24px; }

.hero-banner{ display:none; }
.shortcuts{ display:none; }
.rail-title, .program-item, .footnote{ display:none; }

/* ---------- Stories bar ---------- */
.stories{ display:flex; gap:16px; overflow-x:auto; padding:16px 4px; background:none; border:none; }
.story{ flex-shrink:0; text-align:center; width:64px; }
.story-ring{ width:56px; height:56px; border-radius:50%; padding:2.5px; background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5); margin:0 auto 5px; }
.story-avatar{ width:100%; height:100%; border-radius:50%; background:#fff; color:var(--ig-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; border:2px solid #fff; }
.story span{ font-size:11px; color:var(--ig-text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Composer (kept minimal, IG doesn't show inline composer on feed) ---------- */
.composer{ padding:12px 16px; }
.composer-row{ display:flex; align-items:center; gap:10px; }
.composer-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--ig-border); color:var(--ig-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.composer-form textarea{ width:100%; border:none; padding:8px 0; font-size:14px; font-family:var(--sans); resize:none; outline:none; }
.composer-form-row{ display:flex; gap:8px; margin-top:6px; }
.composer-form select, .composer-form input[type=text]{ border:1px solid var(--ig-border); border-radius:6px; padding:6px 10px; font-size:12px; flex:1; }
.composer-submit{ margin-top:8px; background:var(--ig-blue); color:#fff; border-radius:6px; padding:6px 16px; font-size:13px; font-weight:700; float:right; }
.composer-submit:hover{ background:var(--ig-blue-hover); }

/* ---------- Post card (Instagram structure) ---------- */
.post{ padding:0; margin-bottom:24px; }
.post-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; }
.post-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; }
.post-meta{ flex:1; min-width:0; }
.post-name-row{ display:flex; align-items:center; gap:5px; }
.post-name{ font-weight:600; font-size:13px; color:var(--ig-text); }
.post-badge{ font-size:9px; font-weight:700; text-transform:uppercase; padding:1px 6px; border-radius:8px; }
.post-role{ display:none; }
.post-time{ font-size:12px; color:var(--ig-muted); }
.post-status{ margin-left:0; flex-shrink:0; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.status-resolved{ background:#E4F1EB; color:#2E7D5B; }
.status-progress{ background:#FCEFD8; color:#C77D12; }
.status-open{ background:#E8F0F6; color:#0095F6; }

.post-body{ font-size:14px; line-height:1.4; padding:8px 14px 0; }
.post-body strong{ margin-right:6px; }
.post-media{ margin-top:10px; border-radius:0; border:none; border-top:1px solid var(--ig-border); border-bottom:1px solid var(--ig-border); max-height:600px; width:100%; object-fit:cover; }

.post-footer{ display:flex; align-items:center; gap:14px; padding:10px 14px 4px; border-top:none; margin-top:0; }
.post-action{ flex:0 0 auto; display:flex; align-items:center; gap:0; padding:4px; border-radius:0; font-size:0; color:var(--ig-text); }
.post-action svg{ width:24px; height:24px; stroke:var(--ig-text); fill:none; }
.post-action.supported svg{ stroke:var(--ig-red); fill:var(--ig-red); }
.post-action:hover svg{ opacity:0.6; }

.post-stats{ padding:2px 14px 0; font-size:13px; font-weight:600; color:var(--ig-text); display:block; }
.post-comments{ border-top:none; padding:6px 14px 12px; margin-top:0; }
.post-comment{ font-size:13px; padding:2px 0; color:var(--ig-text); }
.post-comment strong{ margin-right:6px; }
.post-comment-form{ display:flex; gap:8px; margin-top:8px; border-top:1px solid var(--ig-border); padding-top:10px; }
.post-comment-form input{ flex:1; border:none; font-size:13px; outline:none; }
.post-comment-form button{ color:var(--ig-blue); font-weight:700; font-size:13px; }
.post-comment-form button:hover{ color:var(--ig-blue-hover); }

/* ---------- Auth / onboarding (kept as a distinct, calmer style) ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ig-bg); padding:20px; }
.auth-card{ background:var(--ig-card); border:1px solid var(--ig-border); border-radius:var(--radius); padding:36px; width:400px; }
.auth-logo{ font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-size:28px; color:var(--ig-text); text-align:center; }
.auth-tagline{ text-align:center; color:var(--ig-muted); font-size:13px; margin:6px 0 22px; }
.auth-input{ width:100%; border:1px solid var(--ig-border); border-radius:6px; padding:9px 10px; font-size:13px; margin-bottom:8px; background:var(--ig-bg); }
.auth-btn{ width:100%; background:var(--ig-blue); color:#fff; border-radius:8px; padding:9px; font-size:14px; font-weight:600; }
.auth-btn:hover{ background:var(--ig-blue-hover); }
.auth-error{ color:var(--ig-red); font-size:13px; margin-bottom:10px; }
.auth-notice{ color:#2E7D5B; font-size:13px; margin-bottom:10px; }
.auth-footer{ text-align:center; font-size:13px; margin-top:16px; color:var(--ig-muted); }
.auth-footer a{ color:var(--ig-text); font-weight:600; }
.auth-demo{ text-align:center; font-size:11px; color:var(--ig-muted); margin-top:16px; }
.progress-dots{ display:flex; gap:6px; margin-bottom:22px; }
.progress-dots div{ height:4px; flex:1; border-radius:3px; background:var(--ig-border); }
.progress-dots div.done{ background:var(--ig-blue); }
.lang-grid{ display:flex; gap:8px; margin-bottom:20px; }
.lang-opt{ flex:1; border:1px solid var(--ig-border); border-radius:8px; padding:12px; text-align:center; font-size:13px; font-weight:600; }
.lang-opt.selected{ background:var(--ig-text); color:#fff; border-color:var(--ig-text); }
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cat-opt{ border:1px solid var(--ig-border); border-radius:8px; padding:12px; text-align:center; font-size:13px; font-weight:600; }
.cat-opt.selected{ background:var(--ig-text); color:#fff; border-color:var(--ig-text); }

/* ---------- Case desk / other pages (kept functional, IG-neutral) ---------- */
.case-row{ display:flex; align-items:center; gap:14px; background:var(--ig-card); border:1px solid var(--ig-border); border-radius:var(--radius); padding:12px; margin-bottom:8px; }
.case-select{ border:1px solid var(--ig-border); border-radius:6px; padding:6px 9px; font-size:12.5px; }
.page-title{ font-family:'Source Serif 4', Georgia, serif; font-size:22px; margin-bottom:16px; }
.page-wrap{ max-width:630px; margin:24px auto; padding:0 16px; }
.muted{ color:var(--ig-muted); font-size:13px; }
.profile-cover{ display:none; }
.profile-body{ padding:0; text-align:center; margin-top:0; }
.profile-avatar{ width:60px; height:60px; border-radius:50%; background:var(--ig-border); border:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:var(--ig-text); margin:0 auto 8px; }
.profile-name{ font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-size:16.5px; }
.profile-role{ font-size:12.5px; color:var(--ig-muted); margin-top:2px; }
.profile-ward{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--ig-blue); background:#E8F0F6; padding:3px 10px; border-radius:20px; }
.quicklinks{ padding:6px 0; }
.quicklinks li a{ display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13px; font-weight:500; color:var(--ig-text); }
.quicklinks li a:hover{ background:var(--ig-bg); }
.quicklinks li a .ic{ width:18px; text-align:center; }

@media (max-width:640px){ .topnav-search{ display:none; } .layout{ padding:12px 0 60px; } .card{ border-left:none; border-right:none; border-radius:0; } }

/* ================= Visual polish pass ================= */

/* Smooth interactions everywhere */
a, button, .card, .post-action, .nav-item, .auth-btn, .composer-submit, .hero-btn, .lang-opt, .cat-opt, .follow-btn, .shortcut {
  transition: all 0.15s ease;
}

/* Card elevation on hover */
.card{ box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.post:hover{ box-shadow:0 2px 10px rgba(0,0,0,0.06); }

/* Refined post action buttons — subtle scale + color pop */
.post-action{ border-radius:50%; padding:6px; }
.post-action:hover{ background:#F5F5F5; transform:scale(1.05); }
.post-action:active svg{ transform:scale(0.85); }
.post-action.supported svg{ animation: heartPop 0.3s ease; }
@keyframes heartPop{ 0%{transform:scale(1);} 35%{transform:scale(1.3);} 100%{transform:scale(1);} }

/* Buttons: subtle lift + shadow on hover */
.auth-btn, .composer-submit{ box-shadow:0 1px 2px rgba(0,149,246,0.25); }
.auth-btn:hover, .composer-submit:hover{ box-shadow:0 3px 10px rgba(0,149,246,0.35); transform:translateY(-1px); }
.auth-btn:active, .composer-submit:active{ transform:translateY(0); }

/* Focus states for accessibility + polish */
.auth-input:focus, .composer-form textarea:focus, .composer-form select:focus, .composer-form input:focus, .post-comment-form input:focus{
  outline:none; border-color:var(--ig-blue); box-shadow:0 0 0 3px rgba(0,149,246,0.12);
}

/* Nav icon hover */
.nav-item{ border-radius:50%; padding:8px; }
.nav-item:hover{ background:#F5F5F5; transform:translateY(-1px); }
.nav-item.active{ transform:none; }

/* Story ring: gentle pulse to invite interaction */
.story-ring{ transition:transform 0.2s ease; }
.story:hover .story-ring{ transform:scale(1.06); }

/* Stories bar: hide scrollbar but keep scrollable */
.stories{ scrollbar-width:none; -ms-overflow-style:none; }
.stories::-webkit-scrollbar{ display:none; }

/* Composer: soft focus ring on the whole card */
.composer{ transition:box-shadow 0.2s ease; }
.composer:focus-within{ box-shadow:0 0 0 2px rgba(0,149,246,0.15); }

/* Role badges: slightly bolder, pill with subtle shadow */
.post-badge{ box-shadow:0 1px 2px rgba(0,0,0,0.06); }

/* Empty states */
.empty-state{ text-align:center; padding:60px 20px; color:var(--ig-muted); }
.empty-state .ic{ font-size:40px; margin-bottom:12px; opacity:0.5; }
.empty-state b{ display:block; font-size:15px; color:var(--ig-text); margin-bottom:4px; }
.empty-state span{ font-size:13px; }

/* Buttons in lang/category pickers: lift on hover before selection */
.lang-opt:hover, .cat-opt:hover{ border-color:var(--ig-text); transform:translateY(-1px); }
.lang-opt.selected, .cat-opt.selected{ box-shadow:0 2px 8px rgba(0,0,0,0.15); }

/* Auth card: slightly stronger shadow for depth against the flat bg */
.auth-card{ box-shadow:0 4px 24px rgba(0,0,0,0.08); }

/* ================= Landing page hero polish ================= */
.hero{ position:relative; overflow:hidden; }
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter:blur(40px); opacity:0.35;
}
.hero::before{ width:280px; height:280px; background:#FEDA75; top:-100px; left:-60px; }
.hero::after{ width:320px; height:320px; background:#962FBF; bottom:-140px; right:-80px; }
.hero h1, .hero p, .hero-actions{ position:relative; z-index:1; }
.hero-btn{ box-shadow:0 2px 10px rgba(0,0,0,0.15); }
.hero-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.feature{ padding:16px; border-radius:12px; transition:background 0.2s ease, transform 0.2s ease; }
.feature:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.landing-nav .hero-btn:hover{ transform:translateY(-1px); }

/* ================= Mobile bottom tab bar (Instagram-style) ================= */
.mobile-tabbar{ display:none; }
@media (max-width:640px){
  .topnav-links{ display:none; }
  .mobile-tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
    background:#fff; border-top:1px solid var(--ig-border); padding:8px 0 10px;
    justify-content:space-around; align-items:center;
  }
  .mobile-tabbar a{ display:flex; align-items:center; justify-content:center; padding:6px; }
  .mobile-tabbar svg{ width:24px; height:24px; }
  .mobile-tabbar .nav-avatar{ width:24px; height:24px; }
  .layout{ padding-bottom:80px; }
}

/* ================= Flash toast ================= */
.flash-toast{
  position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:100;
  padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.15); transition:opacity 0.3s ease;
}
.flash-success{ background:#2E7D5B; }
.flash-error{ background:var(--ig-red); }
@media (max-width:640px){ .flash-toast{ top:60px; } }

/* ================= Back link ================= */
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ig-muted); margin-bottom:16px; }
.back-link:hover{ color:var(--ig-text); }

/* ================= Password toggle ================= */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:40px; }
.pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--ig-muted); font-weight:600; }
.pw-toggle:hover{ color:var(--ig-text); }