/* Instagram-like UI (clone MVP) */
:root{
  --bg:#fafafa;
  --card:#ffffff;
  --text:#262626;
  --muted:#8e8e8e;
  --border:#dbdbdb;
  --blue:#0095f6;
  --blue2:#1877f2;
  --danger:#ed4956;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  --radius:14px;
  --radius2:18px;
  --max: 935px;
  --side: 320px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

.small{font-size:12px;color:var(--muted)}
.btnlink{background:none;border:0;color:var(--blue);font-weight:700;cursor:pointer;padding:0}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.pill.primary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.pill.ghost{background:transparent}
.pill.danger{background:var(--danger);border-color:var(--danger);color:#fff}

.alert{
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  margin:10px 0;
}
.alert.error{background:rgba(237,73,86,.10);border:1px solid rgba(237,73,86,.25);color:var(--danger)}
.alert.ok{background:rgba(0,149,246,.10);border:1px solid rgba(0,149,246,.22);color:var(--blue)}

.input input, .input textarea, .input select{
  width:100%;
  border:1px solid var(--border);
  background:#fafafa;
  border-radius:12px;
  padding:12px 12px;
  outline:none;
  font-size:14px;
}
.input textarea{min-height:90px;resize:vertical}
.input input:focus,.input textarea:focus{background:#fff;border-color:#c7c7c7}

.form{display:grid;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 14px;
  display:grid;
  grid-template-columns: 1fr minmax(0, 360px) 1fr;
  align-items:center;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.logo{
  width:28px;height:28px;border-radius:8px;
  background: radial-gradient(circle at 30% 30%, #ffd776 0 35%, transparent 36%),
              radial-gradient(circle at 70% 70%, #ff00aa 0 30%, transparent 31%),
              linear-gradient(135deg,#ffdc80,#f77737,#fd1d1d,#c13584,#833ab4);
}
.search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  background:#efefef;
  border-radius:999px;
  padding:10px 12px;
}
.search input{
  border:0;outline:none;background:transparent;
  width:100%;
  font-size:14px;
}
.search .icon{stroke:var(--muted);fill:none;stroke-width:2}

.topnav{display:flex;gap:10px;justify-content:flex-end}
.iconbtn{
  width:38px;height:38px;border-radius:12px;
  border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.iconbtn:hover{background:#f4f4f4}
.iconbtn.on{border-color:#c7c7c7;background:#fafafa}
.icon{
  width:22px;height:22px;
  stroke: #262626;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Layout */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 14px 90px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  gap:24px;
}
@media (max-width: 980px){
  .container{grid-template-columns: 1fr}
  .sidebar{display:none}
  .topbar .inner{grid-template-columns:1fr 1fr; }
  .search{display:none}
  .topnav{justify-content:flex-end}
}

/* Stories */
.stories{padding:14px}
.storyrow{display:flex;gap:14px;overflow:auto;scrollbar-width:none}
.storyrow::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:74px}
.ring{
  width:64px;height:64px;border-radius:50%;
  padding:3px;
  background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.avatar{
  width:100%;height:100%;border-radius:50%;
  background:#fff;
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#262626;
}
.story span{font-size:12px;color:var(--muted)}

/* Feed */
.feed{display:grid;gap:14px}
.posthead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px}
.user{display:flex;align-items:center;gap:10px}
.mini{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#ffdc80,#f77737,#fd1d1d,#c13584,#833ab4);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;
}
.meta .name{font-weight:900;font-size:13px}
.media{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
@media (max-width:980px){
  .media{aspect-ratio: 4/5;}
}

.actions{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.leftacts{display:flex;align-items:center;gap:10px}
.act{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.act:hover{background:#f4f4f4}
.act.active .icon{stroke:var(--danger);fill:rgba(237,73,86,.12)}
.postbody{padding:0 12px 12px}
.likes{font-weight:900;font-size:13px;margin-bottom:6px}
.caption{font-size:13px;line-height:1.35}
.commentbox{display:flex;gap:10px;align-items:center;margin-top:10px}
.commentbox input{
  flex:1;
  border:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  background:#fafafa;
}
.commentbox input:focus{background:#fff;border-color:#c7c7c7}
.commentbox button{padding:10px 12px;border-radius:999px}

/* Sidebar */
.sidebar{display:grid;gap:14px;align-content:start}
.panel{padding:14px}

/* Auth pages */
.authwrap{max-width:420px;margin:0 auto;padding:28px 14px}
.authcard{padding:22px}
.h1{font-size:22px;font-weight:900;margin:0 0 10px}
.sub{color:var(--muted);font-size:13px;margin:0 0 14px}
.link{color:var(--blue);font-weight:900}

/* Bottom nav (mobile) */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--border);
  padding:10px 0;
  display:none;
}
.bottombar .nav{
  max-width:var(--max);
  margin:0 auto;
  display:flex;justify-content:space-around;align-items:center;
}
.navbtn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;
}
.navbtn.on{border-color:#c7c7c7;background:#fafafa}
@media (max-width:980px){ .bottombar{display:block;} }

/* Modal stories */
.modal{
  position:fixed;inset:0;display:none;
  background:rgba(0,0,0,.72);
  align-items:center;justify-content:center;
  padding:18px;
}
.modal.on{display:flex}
.modal .box{
  width:min(420px, 94vw);
  aspect-ratio: 9/16;
  background:#000;
  border-radius:var(--radius2);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.16);
}
.modal .box img{width:100%;height:100%;object-fit:cover;opacity:.95}
.modal .top{position:absolute;left:0;right:0;top:0;padding:12px;color:#fff}
.modal .bars{display:flex;gap:6px;margin-bottom:10px}
.modal .bars span{
  height:3px;flex:1;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden
}
.modal .bars span i{display:block;height:100%;width:0;background:#fff}
.modal .who{font-weight:900;font-size:13px}
.modal .close{
  position:absolute;right:10px;top:10px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer;
}
.modal .navtap{position:absolute;top:0;bottom:0;width:40%}
.modal .navtap.left{left:0}
.modal .navtap.right{right:0}

/* Dark mode (toggle) */
body[data-theme="dark"]{
  --bg:#000000;
  --card:#121212;
  --text:#f5f5f5;
  --muted:#a8a8a8;
  --border:#2a2a2a;
  --shadow: 0 1px 0 rgba(255,255,255,.04);
}
body[data-theme="dark"] .topbar{background:rgba(18,18,18,.86)}
body[data-theme="dark"] .search{background:#262626;border-color:#2a2a2a}
body[data-theme="dark"] .search input{color:#f5f5f5}
body[data-theme="dark"] .icon{stroke:#f5f5f5}
body[data-theme="dark"] .act:hover, body[data-theme="dark"] .iconbtn:hover{background:#1a1a1a}

/* Upload Editor */
.editorwrap{margin-top:12px;display:grid;gap:12px}
.editorTop{display:flex;align-items:center;justify-content:space-between}
.editorStage{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#000;
  position:relative;
  aspect-ratio: 1 / 1;
  touch-action: none;
}
.editorStage canvas{width:100%;height:100%;display:block}
.stageHint{
  position:absolute;left:12px;right:12px;bottom:12px;
  color:#fff;font-size:12px;font-weight:800;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 10px;
  text-align:center;
  pointer-events:none;
}
.editorControls{display:grid;gap:14px}
.ctl{display:grid;gap:8px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.segbtn{
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.segbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.fbtn{
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.fbtn.on{background:#111;color:#fff;border-color:#111}
.sliders{display:grid;gap:8px}
.sliders label{display:grid;gap:6px}
.sliders input[type="range"]{width:100%}