:root{color-scheme:light}
body{margin:0;background:#fafafa;color:#111;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:16px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{font-weight:900}
.nav-right{display:flex;gap:10px;align-items:center}
.card{background:#fff;border:1px solid #e6e6e6;border-radius:16px;padding:16px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{border:1px solid #ddd;border-radius:999px;padding:6px 10px;font-size:13px;background:#fff}
.btn{border:1px solid #ddd;background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
.btn-primary{background:#111;color:#fff;border-color:#111}
.input,textarea,select{border:1px solid #ddd;border-radius:12px;padding:10px 12px;width:100%}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.small{font-size:12px;color:#666}
.tag{border:1px solid #ddd;border-radius:999px;padding:4px 10px;font-size:12px;background:#fff}
.flash{background:#111;color:#fff;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.footer{margin-top:22px;padding:18px 0;color:#666;font-size:12px}
/* Code blocks: horizontal scroll, no wrap */
pre{white-space:pre; overflow-x:auto; overflow-y:hidden; max-width:100%; -webkit-overflow-scrolling:touch}
.codebox{background:#0b1020;color:#fff}
.prose{line-height:1.55}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:800px){.twocol{grid-template-columns:1fr}}

/* Mobile tweaks */
.header{position:sticky;top:0;background:#fafafa;z-index:10;padding-top:8px;padding-bottom:8px}
.nav a{padding:6px 8px;border-radius:10px}
.nav a:hover{background:#fff}
.nav-right .pill{padding:6px 10px}
img{max-width:100%;height:auto}



/* ===== Prostir Responsive Upgrade ===== */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:16px;
}
body{background:var(--bg); color:var(--text);}
.container{max-width:1100px; margin:0 auto; padding:0 14px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 0 rgba(0,0,0,.03);}

.header{
  position:sticky; top:0; z-index:30;
  background:rgba(246,247,251,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.nav a{color:var(--text); text-decoration:none; font-weight:700; padding:8px 10px; border-radius:12px;}
.nav a:hover{background:#fff;}
.brand{font-weight:900; letter-spacing:.2px; margin-right:6px;}

.nav-right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.pill{border:1px solid var(--border); background:#fff; padding:8px 12px; border-radius:999px; font-weight:700; text-decoration:none; color:var(--text);}
.pill:hover{filter:brightness(.98);}

.row{display:flex; gap:10px; align-items:center;}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

.input, textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  background:#fff;
}
.input:focus, textarea:focus{border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(99,102,241,.15);}

.btn{border:1px solid var(--border); background:#fff; border-radius:12px; padding:9px 12px; font-weight:800; cursor:pointer;}
.btn-primary{background:#111827; color:#fff; border-color:#111827;}
.btn-primary:hover{filter:brightness(.95);}

.small{color:var(--muted);}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#f3f4f6; border-radius:999px; border:1px solid var(--border); font-weight:700;}

img{max-width:100%; height:auto;}
footer{color:var(--muted); padding:18px 0 28px;}

@media (max-width: 900px){
  .twocol{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .nav{gap:6px;}
  .nav a{padding:8px 8px;}
  .pill{padding:8px 10px;}
  .row{align-items:flex-start;}
  .container{padding:0 10px;}
}


/* Responsive */
@media (max-width: 720px){
  .container{padding:12px}
  .header{flex-direction:column;align-items:stretch;gap:10px}
  .nav{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;gap:10px;padding-bottom:4px}
  .nav::-webkit-scrollbar{height:6px}
  .nav-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
  .card{padding:14px}
  .twocol{grid-template-columns:1fr}
  .row{flex-wrap:wrap}
  .pill{padding:6px 10px}
  .btn{padding:10px 12px}
}
@media (max-width: 420px){
  h1{font-size:22px}
  h2{font-size:18px}
  .brand{font-size:18px}
  .input{font-size:16px}
}


/* PRO UI/UX */
:root{
  --shadow: 0 10px 30px rgba(17,24,39,.06);
  --ring: 0 0 0 4px rgba(99,102,241,.14);
}
body{font-size:16px}
.container{padding-bottom:86px;} /* room for bottom nav on mobile */
.header{border-radius:18px; padding:10px 12px; box-shadow: var(--shadow);}
.card{box-shadow: var(--shadow);}
.avatar{border-radius:999px; vertical-align:middle; border:1px solid var(--border); background:#fff}
.prose h1,.prose h2,.prose h3{letter-spacing:-.02em; margin:14px 0 8px}
.prose p{margin:10px 0}
.prose a{text-decoration:underline; text-underline-offset:2px}
.prose pre, pre{border-radius:14px; overflow:auto; padding:14px; background:#0b1020; color:#e5e7eb}
.prose pre, pre{white-space:pre;} /* horizontal scroll, no wrap */
.prose code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.code-copy{
  position:absolute; top:10px; right:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.code-copy:hover{background: rgba(255,255,255,.14);}
.toast{
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(20px);
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: all .18s ease;
  z-index: 60;
  font-weight:800;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

.bottom-nav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: min(640px, calc(100% - 20px));
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display:none;
  z-index: 50;
  padding: 8px;
  gap: 8px;
  backdrop-filter: blur(10px);
}
.bottom-nav .bn-item{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 8px;
  border-radius: 16px;
  font-weight:900;
  color: var(--text);
  border:1px solid transparent;
}
.bottom-nav .bn-item:hover{background:#fff;}
.bottom-nav .bn-item.active{
  background:#111827;
  color:#fff;
}
.bottom-nav .bn-primary{
  border:1px solid var(--border);
  background:#fff;
}
.bottom-nav .bn-ico{font-size:18px; line-height:1;}
.bottom-nav .bn-txt{font-size:12px; font-weight:900;}

.bn-dot{
  width:8px; height:8px; border-radius:999px;
  background:#ef4444;
  display:none;
  margin-left:6px;
}
.bn-dot.show{display:inline-block;}

.prose-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
}

.lang-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

/* Profile tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:900; font-size:13px}
.tab:hover{filter:brightness(.99)}
.tab-active{background:#111827; color:#fff; border-color:#111827}
.tab-count{display:inline-flex; min-width:22px; justify-content:center; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(0,0,0,.12); background:rgba(0,0,0,.04)}
.tab-active .tab-count{border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.18)}

/* DevCard */
.devcard{padding:18px;}
.devcard-head{display:flex; gap:14px; align-items:center;}
.devcard-avatar{border-radius:999px; border:1px solid var(--border); background:#fff; object-fit:cover}
.devcard-meta{display:flex; flex-direction:column; gap:4px;}
.devcard-name{font-size:26px; font-weight:900; letter-spacing:-.02em}
.devcard-links{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:2px}
.devcard-bio{margin-top:14px; line-height:1.55; color:var(--text)}
.devcard-stack{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.devcard-pinned{margin-top:18px;}
.pinned-grid{margin-top:12px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.pinned-card{display:block; padding:14px; border-radius:16px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow)}
.pinned-card:hover{filter:brightness(.99)}
@media (max-width: 760px){
  .pinned-grid{grid-template-columns:1fr}
  .devcard-head{align-items:flex-start}
}
@media (max-width: 760px){
  .bottom-nav{display:flex;}
  .footer{padding-bottom:96px;}
  .nav{display:none;} /* top nav hidden on mobile */
  .header{justify-content:flex-end}
}
@media (max-width: 420px){
  .bottom-nav .bn-txt{display:none;}
  .bottom-nav .bn-item{padding:12px 8px;}
}


/* Feed PRO */
.post-card{overflow:hidden}
.post-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.who{display:flex;gap:10px;align-items:flex-start}
.avatar-sm{width:36px;height:36px;border-radius:12px;object-fit:cover;background:#eee;flex:0 0 auto}
.who-meta{display:flex;flex-direction:column;gap:2px}
.who-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08)}
.post-title{margin:10px 0 8px 0}
.post-foot{display:flex;gap:10px;align-items:center;margin-top:10px}
.post-foot .tags{display:flex;gap:8px;flex-wrap:wrap}
.center{text-align:center}
@media (max-width: 520px){
  .post-head{flex-direction:column;align-items:stretch}
  .chips{justify-content:flex-start}
}

/* Share modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:18px;z-index:9999}
.modal.show{display:flex}
.modal-card{width:min(720px,100%);background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06)}
.modal-title{font-weight:700}
.modal-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:12px}
.modal-close:hover{background:rgba(0,0,0,.05)}
.modal-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.modal-row{display:flex;gap:10px;align-items:center}
.modal-row .input{flex:1}
.modal-hint{font-size:12px;color:#6b7280}
.modal-preview{border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden}
.modal-preview iframe{width:100%;height:340px;border:0;display:block}
@media (max-width:520px){
  .modal-preview iframe{height:360px}
}