/* =============================================================================
   Waidrn v2 — PAGE KIT (ported from the design pack, PR #354: mockups/v2/pages/_pages.css)

   Shared components for every v2 page beyond /works, built on the shipped v2.css
   tokens. Unlike the mockup copy, each rule is scoped under `.pg-body` — the page
   body wrapper rendered by `templates::v2_shell` — so the kit can never restyle
   the /works shell or the v1 site. Page-specific rules live in v2-pages-<group>.css.
   ============================================================================= */
html[data-design="v2"]{
  --dur: 140ms;
  --ease: cubic-bezier(.2,.7,.3,1);
  --ink-inverse: #1A1409;
}

/* ---------------------------------------------------------------------------
   SHELL CHROME — flash banner (rendered by templates::v2_shell under the top
   bar; outside .pg-body, and the only kit rule that is shell chrome).
   --------------------------------------------------------------------------- */
html[data-design="v2"] .flash {
  flex: 0 0 auto; padding: 9px 20px; font-size: 12.5px; line-height: 1.5;
  border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
}
html[data-design="v2"] .flash .flash-inner { max-width: 1360px; margin: 0 auto; display: flex; gap: 8px; }
html[data-design="v2"] .flash-success { border-bottom-color: #2E4A33; background: #0B1410; color: var(--green); }
html[data-design="v2"] .flash-error { border-bottom-color: #4A3038; background: #150B0F; color: var(--rose); }
html[data-design="v2"] .flash-info { border-bottom-color: var(--gold-dim); background: #17130A; color: var(--gold); }


html[data-design="v2"] .pg-body .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   PAGE SCAFFOLD
   --------------------------------------------------------------------------- */
html[data-design="v2"] .body.pg-body {
  display: block; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #2A313C transparent;
}
html[data-design="v2"] .pg-body .pg {
  width: 100%; max-width: 1360px; margin: 0 auto; padding: 20px 22px 40px;
}
html[data-design="v2"] .pg.narrow { max-width: 1080px; }
html[data-design="v2"] .pg.reading { max-width: 920px; }

html[data-design="v2"] .pg-body .pg-crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3); margin-bottom: 8px;
}
html[data-design="v2"] .pg-crumbs a { color: var(--ink-3); }
html[data-design="v2"] .pg-crumbs a:hover { color: var(--accent); }
html[data-design="v2"] .pg-crumbs .sep { color: var(--faint); }
html[data-design="v2"] .pg-crumbs .cur { color: var(--ink-2); }

html[data-design="v2"] .pg-body .pg-head {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
html[data-design="v2"] .pg-head-main { min-width: 0; flex: 1 1 420px; }
html[data-design="v2"] .pg-body .pg-title {
  font-family: var(--font-display); font-size: 26px; line-height: 1.1;
  letter-spacing: .2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
html[data-design="v2"] .pg-title .glyph { color: var(--gold); font-size: 22px; }
html[data-design="v2"] .pg-desc { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin-top: 7px; max-width: 720px; }
html[data-design="v2"] .pg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html[data-design="v2"] .pg-meta { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 8px; }

html[data-design="v2"] .pg-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
html[data-design="v2"] .pg-cols.wide { grid-template-columns: minmax(0,1fr) 360px; }
html[data-design="v2"] .pg-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
html[data-design="v2"] .pg-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 66px; }

html[data-design="v2"] .sec-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
html[data-design="v2"] .sec-head h2 { font-family: var(--font-display); font-size: 16px; }
html[data-design="v2"] .sec-head .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
html[data-design="v2"] .sec-head .spacer { flex: 1; }
html[data-design="v2"] .sec-head a { font-size: 11.5px; color: var(--accent); }

html[data-design="v2"] .pg-body .panel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px;
}
html[data-design="v2"] .pg-body .panel-card .pc-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
html[data-design="v2"] .panel-card .pc-head h3 { font-family: var(--font-display); font-size: 13px; }
html[data-design="v2"] .panel-card .pc-head .tag { margin-left: auto; }

/* ---------------------------------------------------------------------------
   TABS (underline) and segmented control
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .tabs {
  display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
html[data-design="v2"] .tabs::-webkit-scrollbar { display: none; }
html[data-design="v2"] .pg-body .tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px;
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
html[data-design="v2"] .tab:hover { color: var(--ink-2); }
html[data-design="v2"] .tab.on { color: var(--ink); border-bottom-color: var(--gold); }
html[data-design="v2"] .pg-body .tab .count {
  font-family: var(--font-mono); font-size: 10px; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0 5px;
}
html[data-design="v2"] .pg-body .seg {
  display: inline-flex; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
html[data-design="v2"] .pg-body .seg button, html[data-design="v2"] .pg-body .seg a {
  padding: 6px 12px; font-size: 11.5px; color: var(--ink-3);
}
html[data-design="v2"] .seg .on { background: var(--panel-3); color: var(--ink); }
html[data-design="v2"] .seg .on:hover { color: var(--ink); }

/* pills / badges / chips used across pages */
html[data-design="v2"] .pg-body .pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 10.5px; color: var(--ink-2); white-space: nowrap;
}
html[data-design="v2"] .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
html[data-design="v2"] .pill.gold { color: var(--gold); border-color: var(--gold-dim); background: #151003; }
html[data-design="v2"] .pill.green { color: var(--green); border-color: #2E4A33; background: #0B1410; }
html[data-design="v2"] .pill.violet { color: var(--violet); border-color: #3A3348; background: #120E1C; }
html[data-design="v2"] .pill.rose { color: var(--rose); border-color: #4A3038; background: #150B0F; }
html[data-design="v2"] .pill.mono { font-family: var(--font-mono); }
html[data-design="v2"] .pill .x { color: var(--faint); margin-left: 2px; }

html[data-design="v2"] .pg-body .mark {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
}
html[data-design="v2"] .mark.proj { color: var(--gold); border: 1px solid var(--gold-dim); background: #1A160C; }
html[data-design="v2"] .mark.fork { color: var(--violet); border: 1px solid #3A3348; background: #161222; }
html[data-design="v2"] .mark.wish { color: var(--accent); border: 1px solid #2E3A48; background: #0F1720; }
html[data-design="v2"] .mark.stall { color: var(--rose); border: 1px solid #4A3038; background: #180F13; }

/* ---------------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------------- */
html[data-design="v2"] .form { display: flex; flex-direction: column; gap: 14px; }
html[data-design="v2"] .field { display: flex; flex-direction: column; gap: 6px; }
html[data-design="v2"] .pg-body .field > label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
html[data-design="v2"] .field .hint { font-size: 11px; color: var(--faint); line-height: 1.5; }
html[data-design="v2"] .pg-body .input, html[data-design="v2"] .pg-body .select, html[data-design="v2"] .pg-body .textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--ink); border-radius: var(--radius-sm); font: inherit; font-size: 13px;
  padding: 9px 11px; outline: none;
}
html[data-design="v2"] .input::placeholder, html[data-design="v2"] .textarea::placeholder { color: var(--faint); }
html[data-design="v2"] .pg-body .input:focus, html[data-design="v2"] .pg-body .select:focus, html[data-design="v2"] .pg-body .textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,177,76,.12);
}
html[data-design="v2"] .textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
html[data-design="v2"] .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html[data-design="v2"] .form-actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
html[data-design="v2"] .checkline { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
html[data-design="v2"] .checkline input { margin-top: 2px; accent-color: var(--gold); }
html[data-design="v2"] .field-error { font-size: 11px; color: var(--rose); }
html[data-design="v2"] .input.error { border-color: var(--rose); }

/* toggle switch */
html[data-design="v2"] .pg-body .switch {
  width: 38px; height: 22px; border-radius: 999px; background: var(--panel-3);
  border: 1px solid var(--line-2); position: relative; flex: 0 0 auto; cursor: pointer;
}
html[data-design="v2"] .pg-body .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ink-3); transition: transform var(--dur) var(--ease);
}
html[data-design="v2"] .switch.on { background: #2A2410; border-color: var(--gold-dim); }
html[data-design="v2"] .switch.on::after { transform: translateX(16px); background: var(--gold); }

/* ---------------------------------------------------------------------------
   THREADS & POSTS
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .thr-kind {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
}
html[data-design="v2"] .pg-body .contract-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #14110A, var(--panel) 70%); font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
html[data-design="v2"] .contract-banner b { color: var(--ink-2); }
html[data-design="v2"] .contract-banner .lg { color: var(--faint); font-family: var(--font-mono); font-size: 10px; }

html[data-design="v2"] .posts { display: flex; flex-direction: column; }
html[data-design="v2"] .pg-body .post {
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
html[data-design="v2"] .post:last-child { border-bottom: 0; }
html[data-design="v2"] .post.op { background: linear-gradient(180deg, rgba(232,177,76,.045), transparent 60%); }
html[data-design="v2"] .pg-body .avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13px; color: var(--ink-inverse,#1A1409);
  background: linear-gradient(135deg, var(--gold), #B98A3E); border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
html[data-design="v2"] .avatar.alt1 { background: linear-gradient(135deg, #8EC5E8, #4D7FA6); }
html[data-design="v2"] .avatar.alt2 { background: linear-gradient(135deg, #C7A8E8, #7C5FA6); }
html[data-design="v2"] .avatar.alt3 { background: linear-gradient(135deg, #9AD8B4, #4E8F68); }
html[data-design="v2"] .avatar.sm { width: 26px; height: 26px; font-size: 10px; }
html[data-design="v2"] .post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html[data-design="v2"] .post-author { font-weight: 600; font-size: 12.5px; color: var(--ink); }
html[data-design="v2"] .post-author .role { font-family: var(--font-mono); font-size: 9px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
html[data-design="v2"] .post-when { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
html[data-design="v2"] .post-n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-left: auto; }
html[data-design="v2"] .post-body { font-size: 13px; line-height: 1.72; color: var(--ink-2); margin-top: 7px; }
html[data-design="v2"] .post-body p + p { margin-top: 9px; }
html[data-design="v2"] .pg-body .post-body .quote {
  border-left: 3px solid var(--line-2); background: var(--bg-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px; margin: 9px 0; color: var(--ink-3); font-size: 12.5px;
}
html[data-design="v2"] .post-body .quote b { color: var(--ink-2); }
html[data-design="v2"] .post-foot { display: flex; align-items: center; gap: 12px; margin-top: 9px; font-size: 10.5px; color: var(--faint); }
html[data-design="v2"] .post-foot a { color: var(--ink-3); }
html[data-design="v2"] .post-foot a:hover { color: var(--accent); }
html[data-design="v2"] .post-foot .r { margin-left: auto; display: flex; gap: 10px; }
html[data-design="v2"] .pg-body .composer {
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel);
  padding: 12px; margin-top: 12px;
}
html[data-design="v2"] .composer .row { display: flex; gap: 9px; align-items: flex-start; }
html[data-design="v2"] .composer .textarea { min-height: 84px; background: var(--bg-2); }
html[data-design="v2"] .composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
html[data-design="v2"] .composer-bar .hint { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-left: auto; }

/* threadmarks rail */
html[data-design="v2"] .tmark-list { display: flex; flex-direction: column; gap: 1px; }
html[data-design="v2"] .pg-body .tmark {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--ink-3);
}
html[data-design="v2"] .tmark:hover { background: var(--panel-2); color: var(--ink-2); }
html[data-design="v2"] .tmark .n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); width: 16px; }
html[data-design="v2"] .tmark .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="v2"] .tmark .st { font-family: var(--font-mono); font-size: 9px; color: var(--green); }
html[data-design="v2"] .tmark.on { background: #151003; color: var(--gold); }
html[data-design="v2"] .tmark.on .st { color: var(--gold); }

/* ---------------------------------------------------------------------------
   PROFILE
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .prof-banner {
  height: 148px; border-radius: var(--radius); overflow: hidden; position: relative;
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 220px at 25% -20%, rgba(232,177,76,.28), transparent 65%),
    radial-gradient(600px 260px at 85% 0%, rgba(184,164,255,.18), transparent 60%),
    linear-gradient(180deg, #151209, #0B0D10);
}
html[data-design="v2"] .prof-banner .grain { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 3px 3px; }
html[data-design="v2"] .pg-body .prof-head {
  display: flex; gap: 14px; align-items: flex-end; margin-top: -34px; padding: 0 18px 4px; position: relative;
}
html[data-design="v2"] .pg-body .prof-avatar {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 26px; color: var(--ink-inverse,#1A1409);
  background: linear-gradient(135deg, var(--gold), #B98A3E); border: 3px solid var(--bg);
  box-shadow: var(--shadow-sm); flex: 0 0 auto;
}
html[data-design="v2"] .prof-id { min-width: 0; flex: 1; padding-bottom: 4px; }
html[data-design="v2"] .prof-name { font-family: var(--font-display); font-size: 23px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-design="v2"] .prof-handle { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
html[data-design="v2"] .prof-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
html[data-design="v2"] .prof-actions { display: flex; gap: 8px; padding-bottom: 6px; }
html[data-design="v2"] .prof-stats { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 14px 0 0; background: var(--panel); }
html[data-design="v2"] .prof-stats .st { flex: 1; padding: 9px 12px; border-right: 1px solid var(--line); }
html[data-design="v2"] .prof-stats .st:last-child { border-right: 0; }
html[data-design="v2"] .prof-stats .v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
html[data-design="v2"] .prof-stats .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
html[data-design="v2"] .prof-about { font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
html[data-design="v2"] .prof-about b { color: var(--ink-2); }
html[data-design="v2"] .prof-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 18px; margin-top: 16px; }
html[data-design="v2"] .prof-list { display: flex; flex-direction: column; gap: 8px; }
html[data-design="v2"] .pg-body .prof-work {
  display: flex; gap: 11px; align-items: center; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel);
}
html[data-design="v2"] .prof-work:hover { border-color: var(--line-2); }
html[data-design="v2"] .prof-work img { width: 34px; height: 50px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
html[data-design="v2"] .prof-work .t { font-size: 12.5px; font-weight: 600; }
html[data-design="v2"] .prof-work .m { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
html[data-design="v2"] .prof-work .r { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

/* account/profile switcher cards (#292 accounts vision) */
html[data-design="v2"] .acct-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-design="v2"] .pg-body .acct-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 12px; display: flex; gap: 10px; align-items: center; cursor: pointer;
}
html[data-design="v2"] .acct-card:hover { border-color: var(--line-2); }
html[data-design="v2"] .acct-card.on { border-color: var(--gold-dim); background: linear-gradient(180deg, #17130A, var(--panel)); box-shadow: inset 0 0 0 1px rgba(232,177,76,.08); }
html[data-design="v2"] .acct-card .nm { font-size: 12.5px; font-weight: 600; }
html[data-design="v2"] .acct-card .ds { font-size: 10.5px; color: var(--faint); margin-top: 2px; line-height: 1.4; }
html[data-design="v2"] .acct-card .badge-scope { margin-left: auto; }

/* ---------------------------------------------------------------------------
   AUTH (v2 look; replaces the v1 serif card)
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .auth2 {
  min-height: calc(100vh - 100px); display: grid; grid-template-columns: 1.05fr .95fr;
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 60px; gap: 40px; align-items: center;
}
html[data-design="v2"] .pg-body .auth-pitch .eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
html[data-design="v2"] .pg-body .auth-pitch h1 {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; margin: 10px 0 14px;
}
html[data-design="v2"] .auth-pitch h1 em { color: var(--gold); font-style: normal; }
html[data-design="v2"] .auth-pitch p { font-size: 14px; line-height: 1.7; color: var(--ink-3); max-width: 46ch; }
html[data-design="v2"] .auth-points { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
html[data-design="v2"] .auth-point { display: flex; gap: 11px; align-items: flex-start; }
html[data-design="v2"] .pg-body .auth-point .ico {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: #17130A; border: 1px solid var(--gold-dim); color: var(--gold); font-size: 12px;
}
html[data-design="v2"] .auth-point .t { font-size: 12.5px; font-weight: 600; }
html[data-design="v2"] .auth-point .d { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin-top: 2px; }
html[data-design="v2"] .pg-body .auth-card {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-lg);
}
html[data-design="v2"] .auth-card .brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 16px; color: var(--gold); margin-bottom: 16px; }
html[data-design="v2"] .auth-card h2 { font-family: var(--font-display); font-size: 22px; }
html[data-design="v2"] .auth-card .sub { font-size: 12px; color: var(--ink-3); margin: 5px 0 16px; }
html[data-design="v2"] .auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
html[data-design="v2"] .pg-body .auth-tier {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2);
  padding: 9px 8px; text-align: center; cursor: pointer;
}
html[data-design="v2"] .auth-tier .tier-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
html[data-design="v2"] .auth-tier .tier-sub { font-family: var(--font-mono); font-size: 8.5px; color: var(--faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
html[data-design="v2"] .auth-tier.on { border-color: var(--gold); background: #17130A; }
html[data-design="v2"] .auth-tier.on .tier-name { color: var(--gold); }
html[data-design="v2"] .auth-alt { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--faint); margin: 14px 0; }
html[data-design="v2"] .auth-alt::before, html[data-design="v2"] .auth-alt::after { content: ""; flex: 1; height: 1px; background: var(--line); }
html[data-design="v2"] .auth-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html[data-design="v2"] .auth-foot a { color: var(--accent); }
html[data-design="v2"] .pg-body .auth-note {
  margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  font-size: 10.5px; line-height: 1.55; color: var(--faint); background: var(--bg-2);
}
html[data-design="v2"] .auth-note b { color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   SETTINGS
   --------------------------------------------------------------------------- */
html[data-design="v2"] .set-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 24px; align-items: start; }
html[data-design="v2"] .set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 66px; }
html[data-design="v2"] .set-nav .grp { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 12px 9px 5px; }
html[data-design="v2"] .pg-body .set-nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--ink-3);
}
html[data-design="v2"] .set-nav a:hover { background: var(--panel); color: var(--ink-2); }
html[data-design="v2"] .set-nav a.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--gold); }
html[data-design="v2"] .set-sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
html[data-design="v2"] .set-sec h2 { font-family: var(--font-display); font-size: 15px; }
html[data-design="v2"] .set-sec .lead { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 5px; max-width: 70ch; }
html[data-design="v2"] .pg-body .set-row {
  display: flex; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
}
html[data-design="v2"] .set-row:last-child { border-bottom: 0; }
html[data-design="v2"] .set-row .lbl { min-width: 0; flex: 1; }
html[data-design="v2"] .set-row .lbl .t { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
html[data-design="v2"] .set-row .lbl .d { font-size: 11px; color: var(--faint); line-height: 1.55; margin-top: 3px; max-width: 62ch; }
html[data-design="v2"] .set-row .ctl { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
html[data-design="v2"] .set-row .input, html[data-design="v2"] .set-row .select { width: 220px; }
html[data-design="v2"] .danger-zone { border-color: #4A3038; }
html[data-design="v2"] .danger-zone h2 { color: var(--rose); }

/* ---------------------------------------------------------------------------
   MESSAGES / CHATS
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .msg-layout {
  display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  min-height: 620px; background: var(--panel);
}
html[data-design="v2"] .msg-list { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; }
html[data-design="v2"] .msg-list-head { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
html[data-design="v2"] .msg-list-head .input { padding: 7px 10px; font-size: 12px; }
html[data-design="v2"] .msg-items { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2A313C transparent; }
html[data-design="v2"] .msg-item { display: flex; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
html[data-design="v2"] .msg-item:hover { background: var(--panel); }
html[data-design="v2"] .msg-item.on { background: #121820; box-shadow: inset 2px 0 0 var(--gold); }
html[data-design="v2"] .msg-item .who { min-width: 0; flex: 1; }
html[data-design="v2"] .msg-item .nm { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
html[data-design="v2"] .msg-item .nm .t { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--faint); font-weight: 400; }
html[data-design="v2"] .msg-item .pv { font-size: 11px; color: var(--faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="v2"] .msg-item .unread { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; margin-top: 5px; }
html[data-design="v2"] .presence { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
html[data-design="v2"] .chat { display: flex; flex-direction: column; min-width: 0; }
html[data-design="v2"] .chat-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
html[data-design="v2"] .chat-head .nm { font-size: 13px; font-weight: 600; }
html[data-design="v2"] .chat-head .st { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
html[data-design="v2"] .chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background:
  radial-gradient(700px 300px at 50% -10%, rgba(232,177,76,.03), transparent 70%), var(--bg-2); }
html[data-design="v2"] .msg-day { align-self: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
html[data-design="v2"] .bubble { max-width: 74%; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: var(--panel-3); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
html[data-design="v2"] .bubble .t { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--faint); margin-top: 4px; }
html[data-design="v2"] .bubble.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: linear-gradient(180deg, #2A220F, #201A0C); color: var(--ink); }
html[data-design="v2"] .composer-chat { border-top: 1px solid var(--line); padding: 11px 12px; display: flex; gap: 8px; align-items: flex-end; background: var(--panel); }
html[data-design="v2"] .composer-chat .textarea { min-height: 44px; max-height: 120px; }
html[data-design="v2"] .chat-note { padding: 6px 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); }

/* ---------------------------------------------------------------------------
   NOTIFICATIONS
   --------------------------------------------------------------------------- */
html[data-design="v2"] .notif-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
html[data-design="v2"] .notif-row { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: flex-start; }
html[data-design="v2"] .notif-row:last-child { border-bottom: 0; }
html[data-design="v2"] .notif-row.unread { background: linear-gradient(90deg, rgba(232,177,76,.06), transparent 55%); }
html[data-design="v2"] .notif-row .ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-2); color: var(--ink-3); font-size: 11px; background: var(--bg-2); }
html[data-design="v2"] .notif-row .body { min-width: 0; flex: 1; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
html[data-design="v2"] .notif-row .body b { color: var(--ink); font-weight: 600; }
html[data-design="v2"] .notif-row .t { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   LIBRARY
   --------------------------------------------------------------------------- */
html[data-design="v2"] .lib-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
html[data-design="v2"] .lib-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
html[data-design="v2"] .lib-stat .v { font-family: var(--font-mono); font-size: 17px; }
html[data-design="v2"] .lib-stat .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
html[data-design="v2"] .lib-book { display: grid; grid-template-columns: 36px minmax(0,1fr) 130px auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
html[data-design="v2"] .lib-book + .lib-book { margin-top: 8px; }
html[data-design="v2"] .lib-book img { width: 36px; height: 53px; border-radius: 3px; object-fit: cover; }
html[data-design="v2"] .lib-book .t { font-size: 12.5px; font-weight: 600; }
html[data-design="v2"] .lib-book .m { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
html[data-design="v2"] .progressbar { height: 4px; background: #1B2028; border-radius: 2px; overflow: hidden; }
html[data-design="v2"] .progressbar i { display: block; height: 100%; background: var(--gold); }
html[data-design="v2"] .lib-progress .n { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-top: 4px; }

/* ---------------------------------------------------------------------------
   STUDIO (creator)
   --------------------------------------------------------------------------- */
html[data-design="v2"] .studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html[data-design="v2"] .studio-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; }
html[data-design="v2"] .studio-card .k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
html[data-design="v2"] .studio-card .v { font-family: var(--font-mono); font-size: 20px; margin-top: 4px; }
html[data-design="v2"] .wizard-steps { display: flex; gap: 4px; margin: 6px 0 16px; }
html[data-design="v2"] .wstep { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); font-size: 11px; color: var(--faint); display: flex; gap: 7px; align-items: center; }
html[data-design="v2"] .wstep .n { font-family: var(--font-mono); font-size: 9px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); }
html[data-design="v2"] .wstep.done { color: var(--green); border-color: #2E4A33; }
html[data-design="v2"] .wstep.on { color: var(--gold); border-color: var(--gold-dim); background: #151003; }
html[data-design="v2"] .ms-row { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); padding: 11px 12px; display: grid; grid-template-columns: 34px minmax(0,1fr) 130px 130px 34px; gap: 10px; align-items: center; }
html[data-design="v2"] .ms-row + .ms-row { margin-top: 7px; }
html[data-design="v2"] .ms-row .n { font-family: var(--font-mono); font-size: 11px; color: var(--gold); }
html[data-design="v2"] .ms-row .nm { font-size: 12px; font-weight: 600; }
html[data-design="v2"] .ms-row .h { font-size: 10px; color: var(--faint); margin-top: 2px; }
html[data-design="v2"] .ms-row .input { padding: 6px 8px; font-size: 11.5px; }
html[data-design="v2"] .sharebar { display: flex; align-items: center; gap: 8px; }
html[data-design="v2"] .sharebar .bar { flex: 1; height: 5px; background: #1B2028; border-radius: 3px; overflow: hidden; }
html[data-design="v2"] .sharebar .bar i { display: block; height: 100%; background: var(--gold); }

/* ---------------------------------------------------------------------------
   ECONOMY / WAID
   --------------------------------------------------------------------------- */
html[data-design="v2"] .econ-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
html[data-design="v2"] .pg-body .econ-balance {
  background: linear-gradient(180deg, #17130A, var(--panel)); border: 1px solid var(--gold-dim);
  border-radius: var(--radius); padding: 18px;
}
html[data-design="v2"] .econ-balance .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
html[data-design="v2"] .econ-balance .v { font-family: var(--font-display); font-size: 34px; margin: 6px 0 2px; color: var(--gold); }
html[data-design="v2"] .econ-balance .v small { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); margin-left: 7px; }
html[data-design="v2"] .econ-balance .sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
html[data-design="v2"] .decaybar { height: 6px; border-radius: 3px; overflow: hidden; background: #2A2213; margin: 10px 0 6px; display: flex; }
html[data-design="v2"] .decaybar i { display: block; height: 100%; }
html[data-design="v2"] .decaybar .kept { background: var(--gold); }
html[data-design="v2"] .decaybar .lost { background: var(--rose); }
html[data-design="v2"] .econ-tiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
html[data-design="v2"] .econ-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
html[data-design="v2"] .econ-tile .k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
html[data-design="v2"] .econ-tile .v { font-family: var(--font-mono); font-size: 16px; margin-top: 3px; }
html[data-design="v2"] .mine-console { background: #08070A; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
html[data-design="v2"] .mine-console .line { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
html[data-design="v2"] .mine-console .ok { color: var(--green); }
html[data-design="v2"] .mine-console .g { color: var(--gold); }
html[data-design="v2"] .ledger { width: 100%; border-collapse: collapse; font-size: 11.5px; }
html[data-design="v2"] .ledger th { text-align: left; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 7px 8px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
html[data-design="v2"] .ledger td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
html[data-design="v2"] .ledger td.num { font-family: var(--font-mono); text-align: right; color: var(--ink-2); }
html[data-design="v2"] .ledger tr:last-child td { border-bottom: 0; }
html[data-design="v2"] .ledger .pos { color: var(--green); }
html[data-design="v2"] .ledger .neg { color: var(--rose); }

/* ---------------------------------------------------------------------------
   SUGGESTIONS (realm view)
   --------------------------------------------------------------------------- */
html[data-design="v2"] .sug-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
html[data-design="v2"] .sug-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
html[data-design="v2"] .sug-card:hover { border-color: var(--line-2); }
html[data-design="v2"] .sug-card h3 { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
html[data-design="v2"] .sug-card .desc { font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
html[data-design="v2"] .stake-meter { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
html[data-design="v2"] .stake-meter .bar { flex: 1; height: 5px; border-radius: 3px; background: #231E12; overflow: hidden; }
html[data-design="v2"] .stake-meter .bar i { display: block; height: 100%; background: var(--gold); }
html[data-design="v2"] .sug-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
html[data-design="v2"] .sug-foot .claim { margin-left: auto; }

/* ---------------------------------------------------------------------------
   READER
   --------------------------------------------------------------------------- */
html[data-design="v2"] .reader-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
html[data-design="v2"] .reader-top .chap { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
:where(html[data-design="v2"]) .reader-body { max-width: 68ch; margin: 26px auto; font-family: Georgia, "Iowan Old Style", serif; font-size: 16.5px; line-height: 1.85; color: #E4DAC8; }
:where(html[data-design="v2"]) .reader-body p + p { margin-top: 1.05em; }
:where(html[data-design="v2"]) .reader-body h2 { font-family: var(--font-display); font-size: 20px; margin: 26px 0 12px; }
:where(html[data-design="v2"]) .reader-body .drop::first-letter { font-size: 3.1em; float: left; line-height: .9; padding-right: .09em; color: var(--gold); font-family: var(--font-display); }
html[data-design="v2"] .reader-foot { max-width: 68ch; margin: 26px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
html[data-design="v2"] .toc { display: flex; flex-direction: column; gap: 2px; }
html[data-design="v2"] .toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12px; color: var(--ink-3); }
html[data-design="v2"] .toc a:hover { background: var(--panel-2); color: var(--ink-2); }
html[data-design="v2"] .toc a.on { background: #151003; color: var(--gold); }
html[data-design="v2"] .toc .n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

/* ---------------------------------------------------------------------------
   ADMIN / MODERATION
   --------------------------------------------------------------------------- */
html[data-design="v2"] .adm-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
html[data-design="v2"] .adm-tab { padding: 6px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); font-size: 11.5px; color: var(--ink-3); }
html[data-design="v2"] .adm-tab.on { border-color: var(--gold-dim); background: #151003; color: var(--gold); }
html[data-design="v2"] .adm-queue { display: flex; flex-direction: column; gap: 9px; }
html[data-design="v2"] .pg-body .report {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 150px 190px; gap: 11px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 11px 12px;
}
html[data-design="v2"] .report .ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--rose); font-size: 11px; background: #150B0F; }
html[data-design="v2"] .report .t { font-size: 12.5px; font-weight: 600; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
html[data-design="v2"] .report .d { font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 3px; }
html[data-design="v2"] .report .meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); line-height: 1.7; }
html[data-design="v2"] .report .dec { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
html[data-design="v2"] .risk-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-3); }
html[data-design="v2"] .risk-badge.lo { color: var(--green); border-color: #2E4A33; }
html[data-design="v2"] .risk-badge.mid { color: var(--gold); border-color: var(--gold-dim); }
html[data-design="v2"] .risk-badge.hi { color: var(--rose); border-color: #4A3038; }

/* ---------------------------------------------------------------------------
   LANDING / DISCOVER HOME
   --------------------------------------------------------------------------- */
html[data-design="v2"] .pg-body .land-hero {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; padding: 46px 40px 40px; margin-bottom: 18px;
  background:
    radial-gradient(900px 420px at 18% -15%, rgba(232,177,76,.22), transparent 60%),
    radial-gradient(700px 380px at 88% 0%, rgba(184,164,255,.14), transparent 60%),
    radial-gradient(600px 300px at 60% 120%, rgba(124,196,255,.10), transparent 60%),
    linear-gradient(180deg, #12100c, #0B0D10);
}
html[data-design="v2"] .land-hero .grain { position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 3px 3px; }
html[data-design="v2"] .land-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
html[data-design="v2"] .land-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; margin: 12px 0 14px; max-width: 20ch; }
html[data-design="v2"] .land-hero h1 em { color: var(--gold); font-style: normal; }
html[data-design="v2"] .land-hero p { font-size: 14px; line-height: 1.7; color: var(--ink-3); max-width: 58ch; }
html[data-design="v2"] .land-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
html[data-design="v2"] .land-stats { display: flex; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
html[data-design="v2"] .land-stats .s .v { font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
html[data-design="v2"] .land-stats .s .k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
html[data-design="v2"] .land-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html[data-design="v2"] .pg-body .land-realm {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 14px;
  display: flex; flex-direction: column; gap: 7px;
}
html[data-design="v2"] .land-realm:hover { border-color: var(--gold-dim); }
html[data-design="v2"] .land-realm .g { color: var(--gold); font-size: 17px; }
html[data-design="v2"] .land-realm .t { font-size: 13px; font-weight: 600; }
html[data-design="v2"] .land-realm .d { font-size: 11px; color: var(--ink-3); line-height: 1.55; }
html[data-design="v2"] .land-realm .m { margin-top: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); }
html[data-design="v2"] .land-feature { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
html[data-design="v2"] .land-feature + .land-feature { margin-top: 9px; }
html[data-design="v2"] .land-feature img { width: 160px; height: 220px; object-fit: cover; border-radius: var(--radius-sm); }
html[data-design="v2"] .land-feature .t { font-family: var(--font-display); font-size: 17px; margin: 2px 0 6px; }
html[data-design="v2"] .land-feature .d { font-size: 12px; line-height: 1.6; color: var(--ink-3); }
html[data-design="v2"] .land-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html[data-design="v2"] .land-step { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--bg-2); }
html[data-design="v2"] .land-step .n { font-family: var(--font-mono); font-size: 10px; color: var(--gold); }
html[data-design="v2"] .land-step .t { font-size: 12.5px; font-weight: 600; margin: 7px 0 4px; }
html[data-design="v2"] .land-step .d { font-size: 11px; color: var(--ink-3); line-height: 1.6; }
html[data-design="v2"] .land-band { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
html[data-design="v2"] .land-band .t { font-family: var(--font-display); font-size: 17px; }
html[data-design="v2"] .land-band .d { font-size: 12px; color: var(--ink-3); }
html[data-design="v2"] .land-band .a { margin-left: auto; display: flex; gap: 8px; }

/* ---------------------------------------------------------------------------
   SYSTEM STATES (404 / empty / maintenance)
   --------------------------------------------------------------------------- */
html[data-design="v2"] .sys-wrap { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 40px 16px; }
html[data-design="v2"] .sys-card { max-width: 520px; }
html[data-design="v2"] .sys-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; color: var(--gold); text-transform: uppercase; }
html[data-design="v2"] .sys-card h1 { font-family: var(--font-display); font-size: 34px; margin: 10px 0 10px; }
html[data-design="v2"] .sys-card p { font-size: 13px; color: var(--ink-3); line-height: 1.7; }
html[data-design="v2"] .sys-actions { display: flex; gap: 9px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
html[data-design="v2"] .empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 26px 18px; text-align: center; background: var(--bg-2); }
html[data-design="v2"] .empty .ico { font-size: 22px; color: var(--gold); }
html[data-design="v2"] .empty .t { font-family: var(--font-display); font-size: 15px; margin: 8px 0 4px; }
html[data-design="v2"] .empty .d { font-size: 12px; color: var(--ink-3); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
html[data-design="v2"] .empty .a { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   RESPONSIVE (phone 390 / tablet 768)
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
html[data-design="v2"] .body.pg-body {
  display: block; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #2A313C transparent;
}
html[data-design="v2"] .pg { padding: 14px 14px 30px; }
  html[data-design="v2"] .pg-cols, html[data-design="v2"] .pg-cols.wide { grid-template-columns: 1fr; }
  html[data-design="v2"] .pg-aside { position: static; }
  html[data-design="v2"] .prof-grid { grid-template-columns: 1fr; }
  html[data-design="v2"] .auth2 { grid-template-columns: 1fr; padding: 24px 16px; gap: 22px; }
  html[data-design="v2"] .auth-pitch h1 { font-size: 30px; }
  html[data-design="v2"] .set-layout { grid-template-columns: 1fr; }
  html[data-design="v2"] .set-nav { position: static; flex-direction: row; overflow-x: auto; }
  html[data-design="v2"] .set-nav .grp { display: none; }
  html[data-design="v2"] .msg-layout { grid-template-columns: 1fr; min-height: 520px; }
  html[data-design="v2"] .msg-list { display: none; }
  html[data-design="v2"] .lib-stats { grid-template-columns: repeat(2,1fr); }
  html[data-design="v2"] .studio-grid, html[data-design="v2"] .land-grid, html[data-design="v2"] .land-steps { grid-template-columns: 1fr; }
  html[data-design="v2"] .land-hero { padding: 28px 20px 26px; }
  html[data-design="v2"] .land-feature { grid-template-columns: 96px minmax(0,1fr); }
  html[data-design="v2"] .land-feature img { width: 96px; height: 132px; }
  html[data-design="v2"] .econ-hero { grid-template-columns: 1fr; }
  html[data-design="v2"] .sug-grid { grid-template-columns: 1fr; }
  html[data-design="v2"] .acct-switch { grid-template-columns: 1fr; }
  html[data-design="v2"] .report { grid-template-columns: 26px minmax(0,1fr); }
  html[data-design="v2"] .report .meta, html[data-design="v2"] .report .dec { grid-column: 2; }
  :where(html[data-design="v2"]) .reader-body { font-size: 15.5px; }
  html[data-design="v2"] .prof-actions { width: 100%; }
  html[data-design="v2"] .pg-actions { width: 100%; }
  html[data-design="v2"] .ms-row { grid-template-columns: 26px minmax(0,1fr) 34px; }
  html[data-design="v2"] .ms-row .h, html[data-design="v2"] .ms-row .input { display: none; }
}
@media (max-width: 560px) {
  html[data-design="v2"] .field-row { grid-template-columns: 1fr; }
  html[data-design="v2"] .prof-stats { display: grid; grid-template-columns: repeat(2,1fr); }
  html[data-design="v2"] .prof-stats .st { border-right: 1px solid var(--line); }
  html[data-design="v2"] .pg-title { font-size: 21px; }
  html[data-design="v2"] .lib-book { grid-template-columns: 32px minmax(0,1fr) auto; }
  html[data-design="v2"] .lib-book .lib-progress { grid-column: 2; }
  html[data-design="v2"] .auth-card { padding: 16px; }
  html[data-design="v2"] .set-row { flex-wrap: wrap; }
  html[data-design="v2"] .set-row .ctl { width: 100%; }
  html[data-design="v2"] .set-row .input, html[data-design="v2"] .set-row .select { width: 100%; }
}

/* =============================================================================
   #485 — v2 polish: shared primitives for ported v1 components.
   Some v2 pages still reuse a handful of v1 helper components (section header,
   author identity, Waid badges, notices, stacked forms, contract fact lists).
   Those components kept v1 class names whose rules lived in app.css, which v2
   pages do not load. These rules give the same markup the page-kit material;
   they are scoped under .pg-body so the v1 site is untouched.
   ============================================================================= */

html[data-design="v2"] .pg-body .section-header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px;
}
html[data-design="v2"] .pg-body .section-header h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--ink); margin: 0;
}
html[data-design="v2"] .pg-body .section-action {
  margin-left: auto; font-size: 12px; color: var(--accent);
}
html[data-design="v2"] .pg-body .section-action:hover { color: var(--ink); }

/* author identity (components::author_identity) */
html[data-design="v2"] .pg-body .byline-avatar {
  display: inline-flex; vertical-align: -4px; margin-right: 5px;
}
html[data-design="v2"] .pg-body .byline-avatar svg { border-radius: 50%; }
html[data-design="v2"] .pg-body .user-link,
html[data-design="v2"] .pg-body .profile-link { color: var(--ink-2); }
html[data-design="v2"] .pg-body .user-link:hover,
html[data-design="v2"] .pg-body .profile-link:hover { color: var(--gold); }

/* money token used by old helpers */
html[data-design="v2"] .pg-body .waid-amount {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--gold);
}

/* Waid status badge (components::badge) — kit has no global badge rules */
html[data-design="v2"] .pg-body .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.7; white-space: nowrap;
}
html[data-design="v2"] .pg-body .badge-warn { border-color: var(--rose); color: var(--rose); background: transparent; }
html[data-design="v2"] .pg-body .badge-ok { border-color: var(--green); color: var(--green); background: transparent; }
html[data-design="v2"] .pg-body .badge-pinned { border-color: var(--violet); color: var(--violet); background: transparent; }
html[data-design="v2"] .pg-body .badge-muted { border-color: var(--line); color: var(--faint); background: transparent; }
html[data-design="v2"] .pg-body .badge.vote { border-color: var(--violet); color: var(--violet); }
html[data-design="v2"] .pg-body .badge.paid { border-color: var(--green); color: var(--green); }
html[data-design="v2"] .pg-body .badge.refunded { border-color: var(--line-2); color: var(--ink-3); }

/* notice / status callouts (rights-waiting card and friends) */
html[data-design="v2"] .pg-body .notice {
  margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink-2); font-size: 12.5px; line-height: 1.55;
}
html[data-design="v2"] .pg-body .notice-warn {
  border-color: var(--gold-dim); background: rgba(232, 177, 76, .08);
  color: var(--ink); border-left-width: 3px;
}
html[data-design="v2"] .pg-body .button-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}

/* stacked v1 forms reused inside v2 cards */
html[data-design="v2"] .pg-body .stack-form { display: grid; gap: 10px; margin-top: 10px; }
html[data-design="v2"] .pg-body .stack-form label { color: var(--ink-2); font-size: 12px; }
html[data-design="v2"] .pg-body .stack-form input,
html[data-design="v2"] .pg-body .stack-form textarea,
html[data-design="v2"] .pg-body .stack-form select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink);
  font: inherit; font-size: 12.5px;
}
html[data-design="v2"] .pg-body .stack-form .inline-form { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* definition-list "contract facts" used inside ported project cards */
html[data-design="v2"] .pg-body .contract-facts {
  display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 4px 14px; margin: 10px 0; font-size: 12px;
}
html[data-design="v2"] .pg-body .contract-facts dt { color: var(--faint); }
html[data-design="v2"] .pg-body .contract-facts dd { color: var(--ink-2); margin: 0; }

/* simple lists used by ported analytics/bonus bodies */
html[data-design="v2"] .pg-body .plain-list { list-style: none; margin: 0; padding: 0; }

@media (max-width: 640px) {
  html[data-design="v2"] .pg-body .contract-facts { grid-template-columns: 1fr; gap: 2px; }
  html[data-design="v2"] .pg-body .contract-facts dd { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="v2"] .pg-body .section-action,
  html[data-design="v2"] .pg-body .user-link,
  html[data-design="v2"] .pg-body .profile-link { transition: none; }
}

@media (forced-colors: active) {
  html[data-design="v2"] .pg-body .badge,
  html[data-design="v2"] .pg-body .notice { border: 1px solid CanvasText; }
}

/* #485 — v1 helper card/stats/empty/table primitives reused by ported sections.
   v2 templates prefer kit classes, but the ported project/studio bodies still
   emit these v1 helpers; give them the page-kit material under .pg-body. */
html[data-design="v2"] .pg-body .card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 16px 18px; margin: 0;
}
html[data-design="v2"] .pg-body .card-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--ink); margin: 0 0 8px;
}
html[data-design="v2"] .pg-body .card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
html[data-design="v2"] .pg-body .card-head .card-title { margin: 0; }

html[data-design="v2"] .pg-body .stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; margin: 12px 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--line);
}
html[data-design="v2"] .pg-body .stats-row .stat { background: var(--panel-2); padding: 9px 11px; }
html[data-design="v2"] .pg-body .stats-row dt {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
html[data-design="v2"] .pg-body .stats-row dd {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--ink); margin: 2px 0 0;
}

html[data-design="v2"] .pg-body .empty-state {
  padding: 18px 16px; border: 1px dashed var(--line-2);
  border-radius: var(--radius); background: var(--bg-2);
}
html[data-design="v2"] .pg-body .empty-title {
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink);
}
html[data-design="v2"] .pg-body .empty-hint {
  color: var(--ink-3); font-size: 12.5px; margin: 5px 0 12px; max-width: 62ch;
}

/* generic scrollable table wrapper for ported analytics tables */
html[data-design="v2"] .pg-body .table-wrap { overflow-x: auto; margin: 12px 0; }
html[data-design="v2"] .pg-body .table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 520px;
}
html[data-design="v2"] .pg-body .table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2);
  color: var(--faint); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
html[data-design="v2"] .pg-body .table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2);
  vertical-align: top;
}
html[data-design="v2"] .pg-body .table tbody tr:hover { background: var(--panel-2); }
html[data-design="v2"] .pg-body .table td:not(:first-child),
html[data-design="v2"] .pg-body .table th:not(:first-child) {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
html[data-design="v2"] .pg-body .table td:first-child a { color: var(--ink); }
html[data-design="v2"] .pg-body .table td:first-child a:hover { color: var(--gold); }

@media (max-width: 640px) {
  html[data-design="v2"] .pg-body .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="v2"] .pg-body .card { padding: 13px 14px; }
}
@media (forced-colors: active) {
  html[data-design="v2"] .pg-body .card,
  html[data-design="v2"] .pg-body .stats-row,
  html[data-design="v2"] .pg-body .empty-state,
  html[data-design="v2"] .pg-body .table th,
  html[data-design="v2"] .pg-body .table td { border-color: CanvasText; }
}