/* ═══════════════════════════════════════════════════════════════════════════
   cobinar-ui.css — Shared Neobrutalist Design System
   Cobinar · one token set + component set, used by every page.

   Principles:
   - Flat solid color only. No gradients, no backdrop blur, no glow blur.
   - Bold ink borders + hard offset shadows (no blur on shadows).
   - Generous, consistent radius for a clean/polished (not razor-raw) feel.
   - Every component keys off the same CSS variables so theme-switching
     (data-theme="orange|white|dark|sky|sakura|mint") re-skins everything.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

:root{
  /* type */
  --fd:'Unbounded',sans-serif;
  --fu:'Plus Jakarta Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',monospace;

  /* motion */
  --es:cubic-bezier(.22,1,.36,1);
  --eo:cubic-bezier(.4,0,.2,1);
  --tr:.18s var(--eo);

  /* layout */
  --hh:60px;
  --av-size:100px;--av-border:4px;--av-offset:52px;

  /* structure — hard border, flat offset shadow, generous radius */
  --nb:3px solid var(--nbc,#181008);
  --nb-thin:2px solid var(--nbc,#181008);
  --ns:4px 4px 0 var(--nbc,#181008);
  --ns-md:6px 6px 0 var(--nbc,#181008);
  --ns-lg:9px 9px 0 var(--nbc,#181008);
  --nr:12px;
  --nr-sm:8px;
  --nr-pill:999px;
}
@media(min-width:600px){:root{--av-size:128px;--av-offset:64px;}}

/* ── THEMES — one flat paper tone + one flat ink + one accent. No gradients. ── */
[data-theme="orange"]{
  --paper:#fff7ee;--bgd:#fff7ee;--pa:#fff7ee;--hbg:#fffaf4;
  --tx:#19100a;--sb:#4a2c14;--mu:#93613a;
  --ac:#ff6a00;--ac-ink:#fff;--as:#ffe7d2;
  --sp:#ffd9b8;--sl:#ffe0c2;--dg:#e9d3bc;--nbc:#19100a;
  --cover:#ff6a00;--donate:#ff6a00;
}
[data-theme="white"]{
  --paper:#ffffff;--bgd:#ffffff;--pa:#ffffff;--hbg:#ffffff;
  --tx:#0a0a0a;--sb:#2c2c2c;--mu:#767676;
  --ac:#0a0a0a;--ac-ink:#fff;--as:#eeeeee;
  --sp:#dddddd;--sl:#e6e6e6;--dg:#e2e2e2;--nbc:#0a0a0a;
  --cover:#0a0a0a;--donate:#ff6a00;
}
[data-theme="dark"]{
  --paper:#131110;--bgd:#131110;--pa:#131110;--hbg:#1a1714;
  --tx:#fbf3ec;--sb:#d8c7b8;--mu:#8c7968;
  --ac:#ff8a3d;--ac-ink:#181008;--as:#3a2214;
  --sp:#4a2c14;--sl:#3a2214;--dg:#241c15;--nbc:#fbf3ec;
  --cover:#ff8a3d;--donate:#ff8a3d;
}
[data-theme="sky"]{
  --paper:#f2f9ff;--bgd:#f2f9ff;--pa:#f2f9ff;--hbg:#f8fcff;
  --tx:#08182b;--sb:#173652;--mu:#5c86a8;
  --ac:#1a85ff;--ac-ink:#fff;--as:#dcedff;
  --sp:#c6e2ff;--sl:#d7ecff;--dg:#cfe4f5;--nbc:#08182b;
  --cover:#1a85ff;--donate:#1a85ff;
}
[data-theme="sakura"]{
  --paper:#fff3f8;--bgd:#fff3f8;--pa:#fff3f8;--hbg:#fff8fb;
  --tx:#26040f;--sb:#6e1533;--mu:#b06080;
  --ac:#e03070;--ac-ink:#fff;--as:#ffdbe9;
  --sp:#ffc6dc;--sl:#ffd6e6;--dg:#f5d3e0;--nbc:#26040f;
  --cover:#e03070;--donate:#e03070;
}
[data-theme="mint"]{
  --paper:#f0fff8;--bgd:#f0fff8;--pa:#f0fff8;--hbg:#f6fffb;
  --tx:#02170d;--sb:#0e5030;--mu:#4a9068;
  --ac:#00b060;--ac-ink:#fff;--as:#d3f7e4;
  --sp:#b8f0d2;--sl:#c8f5df;--dg:#cdeddb;--nbc:#02170d;
  --cover:#00b060;--donate:#00b060;
}

body{
  font-family:var(--fu);color:var(--tx);background:var(--paper);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top);
}
::selection{background:var(--sl);}
img{max-width:100%;display:block;}
a{color:var(--ac);text-decoration:none;}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px;border-radius:4px;}

/* Flat dot-grid texture — the one ambient signature, no blur, no gradient wash */
.dg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--dg) 1.6px,transparent 1.6px);
  background-size:26px 26px;}
/* Legacy soft blob orbs from the old glassmorphism look — retired */
.pbg,.porb{display:none;}

#pb{position:fixed;top:0;left:0;height:3px;z-index:9999;background:var(--ac);width:0%;transition:width .1s;}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:300;height:var(--hh);
  background:var(--hbg);border-bottom:var(--nb);
  display:flex;align-items:center;gap:10px;padding:0 20px;}
.nav.sc{box-shadow:var(--ns);}
.nav-logo{font-family:var(--fd);font-weight:900;font-size:.9rem;letter-spacing:-.02em;color:var(--tx);
  display:flex;align-items:center;gap:8px;flex-shrink:0;}
.logo-pip{width:9px;height:9px;border-radius:50%;background:var(--ac);flex-shrink:0;}
.nav-links{display:flex;gap:6px;list-style:none;margin-left:14px;}
.nav-links a{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--sb);
  padding:7px 12px;border-radius:var(--nr-sm);border:var(--nb-thin);box-shadow:3px 3px 0 var(--nbc);
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr),color var(--tr);}
.nav-links a:hover{background:var(--as);color:var(--ac);transform:translate(-2px,-2px);box-shadow:var(--ns);}
.hs{flex:1;}
.nav-ctrls{display:flex;align-items:center;gap:7px;flex-shrink:0;min-width:0;}
.ts{display:flex;gap:5px;flex-shrink:0;}
.tp{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid var(--nbc);
  transition:transform var(--tr);flex-shrink:0;opacity:.45;}
.tp:hover{transform:scale(1.15);}
.tp.active{opacity:1;box-shadow:2px 2px 0 var(--nbc);}
.lang-btn{display:flex;align-items:center;gap:4px;font-family:var(--fm);font-size:.62rem;font-weight:700;
  color:var(--sb);background:var(--pa);border:var(--nb-thin);border-radius:var(--nr-sm);padding:7px 10px;
  cursor:pointer;box-shadow:3px 3px 0 var(--nbc);transition:all var(--tr);white-space:nowrap;flex-shrink:0;}
.lang-btn:hover{color:var(--ac);transform:translate(-2px,-2px);box-shadow:var(--ns);}
.lang-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--nbc);}
.lang-caret{font-size:.48rem;opacity:.55;transition:transform var(--tr);}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg);}
.lang-dd{position:fixed;top:calc(var(--hh) + 8px);right:16px;background:var(--hbg);
  border:var(--nb);border-radius:var(--nr);padding:8px;box-shadow:var(--ns-lg);display:none;z-index:400;min-width:190px;}
.lang-dd.open{display:block;animation:ddin .16s var(--es) forwards;}
@keyframes ddin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.lang-opt{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;color:var(--sb);
  padding:9px 12px;border-radius:var(--nr-sm);cursor:pointer;transition:background var(--tr),color var(--tr);}
.lang-opt:hover{background:var(--as);color:var(--ac);}
.lang-opt.active{color:var(--ac);font-weight:700;}
.lang-opt .lo-flag{font-size:.95rem;}.lang-opt .lo-name{flex:1;}
.lang-opt .lo-check{font-size:.65rem;color:var(--ac);opacity:0;}.lang-opt.active .lo-check{opacity:1;}

.nav-cta{font-family:var(--fd);font-size:.65rem;font-weight:900;letter-spacing:.02em;color:var(--ac-ink);
  background:var(--ac);padding:9px 14px;border-radius:var(--nr-sm);border:var(--nb);box-shadow:var(--ns);
  transition:transform .12s,box-shadow .12s;white-space:nowrap;flex-shrink:0;}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:var(--ns-md);}
.nav-cta:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--nbc);}
.nav-login{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--sb);
  background:var(--pa);border:var(--nb-thin);padding:8px 12px;border-radius:var(--nr-sm);
  box-shadow:3px 3px 0 var(--nbc);transition:all var(--tr);white-space:nowrap;flex-shrink:0;}
.nav-login:hover{color:var(--ac);transform:translate(-2px,-2px);box-shadow:var(--ns);}
.nav-login svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.nav-login-text{display:inline;}
.nav-user{display:none;align-items:center;gap:6px;cursor:pointer;padding:5px 10px 5px 5px;
  border-radius:var(--nr-sm);border:var(--nb-thin);background:var(--pa);box-shadow:3px 3px 0 var(--nbc);
  transition:all var(--tr);flex-shrink:0;}
.nav-user:hover{transform:translate(-2px,-2px);box-shadow:var(--ns);}
.nav-user-av{width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--as);flex-shrink:0;}
.nav-user-av img{width:100%;height:100%;object-fit:cover;}
.nav-user-name{font-size:.68rem;font-weight:700;color:var(--sb);max-width:70px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}

/* ── Hamburger — a real boxed button, not bare lines ── */
.nav-ham{display:none;position:relative;flex-shrink:0;width:38px;height:38px;align-items:center;justify-content:center;
  cursor:pointer;background:var(--pa);border:var(--nb-thin);border-radius:var(--nr-sm);
  box-shadow:3px 3px 0 var(--nbc);transition:transform var(--tr),box-shadow var(--tr);}
.nav-ham:hover{transform:translate(-2px,-2px);box-shadow:var(--ns);}
.nav-ham:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--nbc);}
.nav-ham-box{position:relative;width:16px;height:11px;flex-shrink:0;}
.nav-ham-box span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--tx);
  transition:transform .22s var(--es),opacity .16s var(--eo),top .22s var(--es);}
.nav-ham-box span:nth-child(1){top:0;}
.nav-ham-box span:nth-child(2){top:4.5px;}
.nav-ham-box span:nth-child(3){top:9px;}
.nav-ham[aria-expanded="true"] .nav-ham-box span:nth-child(1){top:4.5px;transform:rotate(45deg);}
.nav-ham[aria-expanded="true"] .nav-ham-box span:nth-child(2){opacity:0;}
.nav-ham[aria-expanded="true"] .nav-ham-box span:nth-child(3){top:4.5px;transform:rotate(-45deg);}

.nav-drawer{display:none;position:fixed;top:var(--hh);left:0;right:0;z-index:290;background:var(--hbg);
  border-bottom:var(--nb);box-shadow:var(--ns);flex-direction:column;gap:7px;padding:14px 20px 22px;
  max-height:calc(100vh - var(--hh));overflow-y:auto;}
.nav-drawer.open{display:flex;animation:drin .18s var(--es) forwards;}
@keyframes drin{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.nav-drawer a{font-size:.86rem;font-weight:700;color:var(--sb);padding:12px 14px;border-radius:var(--nr-sm);
  border:var(--nb-thin);box-shadow:3px 3px 0 var(--nbc);transition:all var(--tr);background:var(--pa);}
.nav-drawer a:hover{background:var(--as);color:var(--ac);transform:translate(-2px,-2px);box-shadow:var(--ns);}
.nav-drawer-section-label{font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.13em;
  color:var(--mu);margin:6px 0 2px;}
.nav-drawer-divider{border-top:var(--nb-thin);margin-top:6px;padding-top:14px;}

@media(max-width:900px){.nav-links{display:none;}.nav-ham{display:flex;}}
@media(max-width:680px){.nav-cta{display:none;}}
@media(max-width:520px){.nav-login-text{display:none;}.nav-login{padding:8px 10px;}.ts{display:none;}}
@media(max-width:400px){.lang-btn span:not(.lang-caret){display:none;}.lang-btn{padding:7px 8px;}}

/* ═══════════════ PAGE COLUMN ═══════════════ */
.page-wrap{position:relative;z-index:1;max-width:620px;margin:0 auto;padding-top:var(--hh);
  min-height:100vh;background:var(--pa);border-left:var(--nb-thin);border-right:var(--nb-thin);}
@media(max-width:640px){.page-wrap{border:none;}}
@media(min-width:900px){
  .page-wrap{max-width:100%;border-left:none;border-right:none;}
  .profile-cover{height:340px;}
  .profile-info{padding-left:48px;padding-right:48px;}
  .panel-scroll{max-height:none;overflow:visible;}
  .panel-fade::after{display:none;}
  #projectsContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));}
  .footer-inner{max-width:1100px;}
  .footer-bottom{max-width:1100px;}
}

/* ═══════════════ PROFILE COVER — flat brand color, no gradient ═══════════════ */
.profile-cover{position:relative;width:100%;height:200px;background:var(--cover);overflow:visible;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 1.6px);background-size:22px 22px;}
@media(min-width:600px){.profile-cover{height:240px;}}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.profile-avatar-wrap{position:absolute;bottom:calc(-1 * var(--av-offset));left:16px;z-index:10;
  width:calc(var(--av-size) + var(--av-border) * 2);height:calc(var(--av-size) + var(--av-border) * 2);
  border-radius:50%;background:var(--pa);padding:var(--av-border);box-shadow:var(--ns-md);border:var(--nb);}
.profile-avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--as);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.cover-actions{position:absolute;bottom:12px;right:16px;display:flex;gap:8px;z-index:5;}
.cover-btn{display:flex;align-items:center;gap:6px;font-family:var(--fu);font-size:.74rem;font-weight:700;
  padding:9px 16px;border-radius:var(--nr-sm);cursor:pointer;border:var(--nb);box-shadow:var(--ns);
  transition:transform .12s var(--es),box-shadow .12s;text-decoration:none;background:var(--paper);color:var(--tx);}
.cover-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--ns-md);}
.cover-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--nbc);}

/* ═══════════════ PROFILE INFO ═══════════════ */
.profile-info{padding:calc(var(--av-offset) + 16px) 16px 0;background:var(--pa);}
.name-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px;}
.profile-name{font-family:var(--fd);font-weight:900;font-size:clamp(.95rem,3vw,1.25rem);letter-spacing:-.02em;
  color:var(--tx);line-height:1.1;}
.verified-wrap{display:inline-flex;align-items:center;flex-shrink:0;position:relative;}
.verified-badge{width:20px;height:20px;}
.verified-wrap::after{content:'Verified';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font-family:var(--fm);font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:#fff;
  background:#1D9BF0;padding:3px 9px;border-radius:var(--nr-pill);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s;}
.verified-wrap:hover::after{opacity:1;}
.profile-handle{font-family:var(--fm);font-size:.8rem;color:var(--mu);margin-bottom:14px;}
.profile-bio{font-size:.88rem;line-height:1.68;color:var(--sb);margin-bottom:14px;max-width:540px;white-space:pre-line;}
.profile-meta{display:flex;flex-wrap:wrap;gap:9px 16px;margin-bottom:18px;}
.meta-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mu);}
.meta-item svg{flex-shrink:0;opacity:.75;}
.meta-item a{color:var(--ac);font-weight:600;}

/* ═══════════════ DONATE CARD — flat accent color, breathing room below ═══════════════ */
.donate-card{position:relative;overflow:hidden;border-radius:var(--nr);background:var(--donate);
  padding:18px 20px;cursor:pointer;display:flex;align-items:center;gap:14px;border:var(--nb);width:100%;
  text-align:left;box-shadow:var(--ns-md);transition:transform .16s var(--es),box-shadow .16s;
  -webkit-tap-highlight-color:transparent;margin:18px 0 28px;}
.donate-card:hover{transform:translate(-3px,-3px);box-shadow:var(--ns-lg);}
.donate-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--nbc);}
.d-heart{width:38px;height:38px;border-radius:var(--nr-sm);background:rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.d-heart svg{width:18px;height:18px;fill:#fff;}
.d-copy{flex:1;min-width:0;}
.d-ttl{font-family:var(--fd);font-weight:900;font-size:.82rem;letter-spacing:-.01em;color:#fff;}
.d-sub{font-size:.65rem;color:rgba(255,255,255,.82);margin-top:2px;line-height:1.4;}
.d-arr{color:rgba(255,255,255,.75);font-size:1rem;flex-shrink:0;}

/* ═══════════════ TABS — clear top margin so nothing collides with the donate card ═══════════════ */
.tabs{display:flex;border-bottom:var(--nb-thin);border-top:var(--nb);position:sticky;top:var(--hh);
  background:var(--hbg);z-index:100;}
.tab{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 8px;font-size:.82rem;
  font-weight:800;color:var(--mu);position:relative;cursor:pointer;transition:color .15s,background .15s;}
.tab:hover{color:var(--tx);background:var(--as);}
.tab.active{color:var(--ac);}
.tab.active::after{content:'';position:absolute;bottom:-2px;left:18%;right:18%;height:3px;background:var(--ac);}
.tab-count{font-family:var(--fm);font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:var(--nr-pill);
  background:var(--as);margin-left:5px;border:1.5px solid var(--nbc);}

/* ═══════════════ PANELS ═══════════════ */
.feed-panel{display:none;}
.feed-panel.active{display:block;}
.panel-scroll{max-height:70vh;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;}
.panel-scroll::-webkit-scrollbar{width:4px;}
.panel-scroll::-webkit-scrollbar-track{background:transparent;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--sp);border-radius:var(--nr-pill);}
.panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--ac);}
.panel-fade{position:relative;}
.panel-fade::after{content:'';position:sticky;bottom:0;left:0;right:0;height:36px;background:var(--pa);
  display:block;pointer-events:none;z-index:1;opacity:.001;}

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:64px 28px;text-align:center;gap:14px;}
.empty-icon{color:var(--sp);}
.empty-title{font-family:var(--fd);font-size:1.1rem;font-weight:900;color:var(--tx);letter-spacing:-.02em;}
.empty-sub{font-size:.84rem;color:var(--mu);max-width:260px;line-height:1.6;}

/* ═══════════════ POST / PROJECT CARDS ═══════════════ */
.post-card{border-bottom:var(--nb-thin);padding:14px 16px;transition:background .1s;position:relative;background:transparent;}
.post-card:hover{background:var(--as);}
.post-card.private-post{background:var(--as);}

.project-card{border:var(--nb);border-radius:var(--nr);padding:16px;background:var(--paper);box-shadow:var(--ns);
  transition:transform .14s var(--es),box-shadow .14s;}
.project-card:hover{transform:translate(-2px,-2px);box-shadow:var(--ns-md);}

/* ═══════════════ GENERIC BUTTONS (used across pages) ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fu);
  font-weight:700;font-size:.85rem;padding:12px 20px;border-radius:var(--nr);border:var(--nb);
  cursor:pointer;transition:transform .12s var(--es),box-shadow .12s;text-decoration:none;
  box-shadow:var(--ns);background:var(--paper);color:var(--tx);}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--ns-md);}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--nbc);}
.btn-primary{background:var(--ac);color:var(--ac-ink);}
.btn-block{width:100%;}

/* ═══════════════ FOOTER ═══════════════ */
.site-footer{border-top:var(--nb);background:var(--hbg);padding:32px 20px;}
.footer-inner{max-width:620px;margin:0 auto;}
.footer-bottom{max-width:620px;margin:0 auto;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}