:root{
  --carbon:#0D1014; --panel:#151A20; --panel-2:#1B222B; --line:#28313C;
  --brass:#D9A441; --brass-dim:#8A6A2C; --signal:#E5483F;
  --steel:#8B98A8; --bone:#EDEFF2; --verify:#5DBB7A;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--carbon); color:var(--bone);
  font-family:'IBM Plex Sans',sans-serif; font-size:15px; line-height:1.45;
  max-width:520px; margin:0 auto; padding-bottom:84px;
  background-image:linear-gradient(rgba(13,16,20,.97),rgba(13,16,20,.97)),
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(217,164,65,.04) 14px 15px);
  min-height:100vh;
}
.disp{font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:.04em;}
.mono{font-family:'IBM Plex Mono',monospace;}

header{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(13,16,20,.94);backdrop-filter:blur(6px);z-index:40;
}
.brand{font-family:'Big Shoulders Display';font-weight:800;font-size:26px;letter-spacing:.12em;}
.brand span{color:var(--brass);}
.tagline{font-family:'IBM Plex Mono';font-size:10px;color:var(--steel);letter-spacing:.08em;text-transform:uppercase;}

main{padding:16px;animation:viewin .25s ease;}
@keyframes viewin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:520px;display:flex;border-top:1px solid var(--line);
  background:rgba(13,16,20,.97);backdrop-filter:blur(8px);z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
}
nav button{
  flex:1;background:none;border:none;color:var(--steel);
  font-family:'Big Shoulders Display';font-size:16px;font-weight:700;letter-spacing:.1em;
  padding:14px 0 16px;cursor:pointer;position:relative;text-transform:uppercase;
}
nav button.on{color:var(--brass);}
nav button.on::before{content:"";position:absolute;top:-1px;left:25%;width:50%;height:2px;background:var(--brass);}

h2.sec{
  font-family:'IBM Plex Mono';font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin:18px 0 8px;
  display:flex;align-items:center;gap:8px;
}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line);}

.note{font-family:'IBM Plex Mono';font-size:10px;color:#5C6975;letter-spacing:.05em;text-align:center;margin-top:18px;text-transform:uppercase;}
.err{font-family:'IBM Plex Mono';font-size:12px;color:var(--signal);margin-top:10px;min-height:16px;}

/* forms */
.field{margin-bottom:12px;}
.field label{display:block;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:5px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);font-family:'IBM Plex Mono';font-size:14px;padding:11px 12px;outline:none;
}
input:focus,textarea:focus{border-color:var(--brass-dim);}
textarea{resize:vertical;min-height:64px;font-family:'IBM Plex Sans';}
.btn{
  width:100%;padding:13px;border-radius:2px;cursor:pointer;border:none;
  font-family:'Big Shoulders Display';font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;
}
.btn.gold{background:var(--brass);color:var(--carbon);}
.btn.red{background:var(--signal);color:#fff;}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--steel);}
.btn.sm{width:auto;padding:7px 11px;font-size:13px;}
.btn:disabled{opacity:.45;cursor:default;}
.linkish{background:none;border:none;color:var(--brass);font-family:'IBM Plex Mono';font-size:12px;cursor:pointer;text-decoration:underline;margin-top:14px;}

/* auth */
.auth-wrap{padding-top:34px;}
.auth-title{font-family:'Big Shoulders Display';font-weight:800;font-size:34px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px;}
.auth-sub{color:var(--steel);font-size:13px;margin-bottom:22px;}

/* crest + crew header */
.crest-block{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.crest{
  width:78px;height:88px;flex:none;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
  border:1px solid var(--brass-dim);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Big Shoulders Display';font-weight:800;font-size:30px;color:var(--brass);
}
.crest img{width:100%;height:100%;object-fit:cover;}
.crest.photo{clip-path:none;border-radius:6px;background:transparent;border:none;}
.crest.photo img{object-fit:contain;}
.crew-name{font-size:30px;font-weight:800;line-height:1;}
.crew-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.tag{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);color:var(--steel);border-radius:2px;}
.tag.v{border-color:var(--verify);color:var(--verify);}
.tag.l{border-color:var(--brass-dim);color:var(--brass);}

/* rivalry banner */
.rivalry{
  position:relative;overflow:hidden;border:1px solid var(--signal);
  background:linear-gradient(105deg,rgba(229,72,63,.16) 0 49.6%,transparent 49.6% 50.4%,rgba(217,164,65,.10) 50.4% 100%),var(--panel);
  padding:12px 14px;margin:12px 0;border-radius:2px;
}
.rivalry.pending{border-color:var(--brass-dim);}
.rivalry::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(229,72,63,.18) 50%,transparent 70%);
  transform:translateX(-100%);animation:sweep 3.2s ease-in-out infinite;pointer-events:none;
}
@keyframes sweep{55%,100%{transform:translateX(100%);}}
.riv-label{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.18em;color:var(--signal);text-transform:uppercase;}
.rivalry.pending .riv-label{color:var(--brass);}
.riv-vs{display:flex;align-items:center;gap:10px;margin:6px 0 4px;flex-wrap:wrap;}
.riv-vs .n{font-family:'Big Shoulders Display';font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;}
.riv-vs .vs{font-family:'Big Shoulders Display';font-weight:800;color:var(--signal);font-size:15px;}
.riv-timer{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);}
.riv-timer b{color:var(--bone);font-weight:600;}
.riv-actions{display:flex;gap:8px;margin-top:10px;}

/* roster */
.member{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:9px 10px;margin-bottom:6px;}
.rank-pips{width:30px;flex:none;display:flex;flex-direction:column;gap:2px;align-items:center;}
.pip{width:20px;height:5px;background:var(--brass);clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%);}
.member .who{flex:1;min-width:0;}
.member .hndl{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;}
.member .rk{font-family:'IBM Plex Mono';font-size:10px;color:var(--brass);letter-spacing:.08em;text-transform:uppercase;}
.avatar{width:34px;height:34px;border-radius:2px;flex:none;background:var(--panel-2);border:1px solid var(--line);object-fit:cover;}

/* feed + posts */
.feed-item{border-left:2px solid var(--line);padding:6px 0 6px 12px;margin-bottom:4px;font-size:13px;color:var(--steel);}
.feed-item b{color:var(--bone);font-weight:600;}
.feed-item.gold{border-left-color:var(--brass);}
.feed-item.red{border-left-color:var(--signal);}
.feed-item .t{font-family:'IBM Plex Mono';font-size:10px;display:block;color:#5C6975;margin-top:1px;}
.post{background:var(--panel);border:1px solid var(--line);border-radius:2px;margin-bottom:12px;overflow:hidden;}
.post .ph{display:flex;align-items:center;gap:9px;padding:9px 11px;}
.post .ph .hndl{font-weight:600;font-size:13px;}
.post .ph .sub{font-family:'IBM Plex Mono';font-size:10px;color:var(--steel);}
.post img.media{width:100%;display:block;background:#000;}
.post .embed{position:relative;width:100%;padding-top:56.25%;background:#000;}
.post .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.post .cap{padding:9px 11px;font-size:13px;color:var(--bone);}

/* record */
.id-card{
  border:1px solid var(--line);background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border-radius:2px;padding:14px;margin-bottom:4px;position:relative;overflow:hidden;
}
.id-card::before{
  content:"MUSTER";position:absolute;right:-10px;bottom:-22px;
  font-family:'Big Shoulders Display';font-weight:800;font-size:72px;letter-spacing:.1em;
  color:rgba(217,164,65,.05);
}
.id-top{display:flex;gap:12px;align-items:center;}
.id-avatar{width:56px;height:56px;border-radius:2px;border:1px solid var(--brass-dim);object-fit:cover;background:var(--panel);}
.id-num{font-family:'IBM Plex Mono';font-size:10px;color:var(--brass);letter-spacing:.15em;}
.id-handle{font-family:'Big Shoulders Display';font-weight:800;font-size:28px;letter-spacing:.04em;text-transform:uppercase;}
.id-sub{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);}

.ledger{border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.entry{padding:11px 12px;background:var(--panel);}
.entry+.entry{border-top:1px dashed var(--line);}
.entry .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.entry .crew{font-weight:600;font-size:14px;}
.entry .yrs{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);flex:none;}
.entry .pos{font-family:'IBM Plex Mono';font-size:11px;color:var(--brass);margin-top:2px;}
.vtag{display:inline-block;margin-top:6px;font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.vtag.v{background:rgba(93,187,122,.12);color:var(--verify);border:1px solid rgba(93,187,122,.4);}
.vtag.l{background:rgba(217,164,65,.08);color:var(--brass);border:1px solid rgba(217,164,65,.35);}
.entry.legacy{background:repeating-linear-gradient(45deg,var(--panel) 0 10px,rgba(217,164,65,.02) 10px 20px);}

.code-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px dashed var(--brass-dim);
  border-radius:2px;padding:7px 10px;margin:0 6px 6px 0;
  font-family:'IBM Plex Mono';font-size:13px;color:var(--brass);letter-spacing:.1em;cursor:pointer;
}
.code-chip.used{border-color:var(--line);color:#5C6975;text-decoration:line-through;cursor:default;}

/* browse */
.crew-card{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:12px;margin-bottom:10px;display:flex;gap:12px;align-items:center;}
.mini-crest{
  width:44px;height:50px;flex:none;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Big Shoulders Display';font-weight:800;font-size:18px;color:var(--carbon);background:var(--brass);
}
.mini-crest img{width:100%;height:100%;object-fit:cover;}
.mini-crest.photo{clip-path:none;border-radius:4px;background:transparent;border:none;}
.mini-crest.photo img{object-fit:contain;}
.crew-card .info{flex:1;min-width:0;}
.crew-card .nm{font-family:'Big Shoulders Display';font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;}
.crew-card .ms{font-family:'IBM Plex Mono';font-size:10px;color:var(--steel);letter-spacing:.05em;}
.declare{
  background:none;border:1px solid var(--signal);color:var(--signal);
  font-family:'Big Shoulders Display';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 10px;border-radius:2px;cursor:pointer;flex:none;
}
.declare:disabled{border-color:var(--line);color:#5C6975;cursor:default;}
.join{
  background:none;border:1px solid var(--brass-dim);color:var(--brass);
  font-family:'Big Shoulders Display';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 10px;border-radius:2px;cursor:pointer;flex:none;
}

/* HUD toasts */
#hud{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:496px;z-index:90;pointer-events:none;display:flex;flex-direction:column;gap:8px;}
.toast{
  border-left:3px solid var(--brass);
  background:linear-gradient(95deg,rgba(21,26,32,.97),rgba(27,34,43,.97));
  box-shadow:0 6px 24px rgba(0,0,0,.5);padding:10px 14px;border-radius:2px;
  animation:hudin .3s cubic-bezier(.2,1.4,.4,1) both;
}
.toast.out{animation:hudout .3s ease both;}
.toast.red{border-left-color:var(--signal);}
.toast .k{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);}
.toast.red .k{color:var(--signal);}
.toast .m{font-family:'Big Shoulders Display';font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase;margin-top:1px;}
@keyframes hudin{from{opacity:0;transform:translateY(-14px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes hudout{to{opacity:0;transform:translateY(-10px);}}

.composer{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:11px;margin-bottom:14px;}
.composer .row{display:flex;gap:8px;margin-top:8px;align-items:center;}
.filebtn{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);}

/* filters + checks */
.filterbar{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:10px 11px;margin-bottom:4px;}
.fgroup{display:flex;flex-wrap:wrap;gap:4px 12px;}
.fgroup+.fgroup{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
.checks{display:flex;flex-wrap:wrap;gap:4px 12px;}
.check{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);letter-spacing:.04em;text-transform:uppercase;
}
.check input{accent-color:var(--brass);width:14px;height:14px;}
.active-badge{
  border-color:var(--verify) !important;color:var(--verify) !important;
  margin-left:6px;vertical-align:middle;font-size:9px;
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;}}

/* discord auth */
.btn.discord{background:#5865F2;color:#fff;margin-top:10px;}
.ordiv{font-family:'IBM Plex Mono';font-size:10px;color:#5C6975;text-align:center;margin-top:12px;letter-spacing:.15em;text-transform:uppercase;}

/* v0.4: reactions, link cards, disbanded */
.reacts{display:flex;gap:8px;padding:8px 11px;border-top:1px solid var(--line);}
.react{
  background:none;border:1px solid var(--line);color:var(--steel);border-radius:2px;
  font-family:'IBM Plex Mono';font-size:12px;padding:5px 10px;cursor:pointer;letter-spacing:.05em;
}
.react.on{border-color:var(--brass);color:var(--brass);background:rgba(217,164,65,.08);}
.react.down.on{border-color:var(--signal);color:var(--signal);background:rgba(229,72,63,.08);}
.react.del{margin-left:auto;border-color:transparent;color:#5C6975;}
.linkcard{
  display:flex;justify-content:space-between;align-items:center;
  margin:0 11px 4px;padding:11px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--panel-2);text-decoration:none;
}
.lk-label{font-family:'Big Shoulders Display';font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--bone);text-transform:uppercase;}
.lk-open{font-family:'IBM Plex Mono';font-size:11px;color:var(--brass);}
.tag.dead{border-color:var(--signal);color:var(--signal);}
.btn.ghost.sm.kick{color:var(--signal);border-color:rgba(229,72,63,.4);}

/* v0.5: comments */
.cmtbox{border-top:1px dashed var(--line);padding:8px 11px 10px;}
.cmt{font-size:13px;color:var(--bone);padding:5px 0;border-bottom:1px solid rgba(40,49,60,.4);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.cmt .ch{color:var(--brass);font-weight:600;cursor:pointer;flex:none;}
.cmt.dead{color:#5C6975;font-family:'IBM Plex Mono';font-size:11px;font-style:italic;}
.cmt .cdel{margin-left:auto;background:none;border:none;color:#5C6975;cursor:pointer;font-size:12px;flex:none;}
.crow{display:flex;gap:8px;margin-top:9px;}
.crow .cin{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;color:var(--bone);font-family:'IBM Plex Sans';font-size:13px;padding:9px 10px;outline:none;}
.crow .cin:focus{border-color:var(--brass-dim);}