/* PropAI — the light tool workspace.
   A deliberate inversion of the dark app: white paper, quiet grey type,
   and gold held back for the active tool and the money buttons. The shared
   gold is the only thing tying the two worlds together, which is exactly
   how it should be — one brand, two rooms. */

.pai {
  --ink: #17181a;
  --ink-2: #5f6368;
  /* R3: #8b8f96 在白底上只有 3.25:1，达不到 4.5:1（AA 正文）。这个 token
     用在 hint / placeholder / 次级标签，影响 10 个页面。#6b7076 是 4.99:1。
     ⚠️ 不要再调深了 —— 再深就跟 --ink-2 #5f6368（6.05:1）分不出层次，
        「最弱」和「次级」两级会塌成一级。 */
  --ink-3: #6b7076;
  --line: #ebeced;
  --line-2: #f2f3f4;
  --paper: #ffffff;
  --paper-2: #fafbfb;
  --gold: #d9a441;
  --gold-2: #f0cd82;
  --gold-wash: #fdf7ec;

  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
}

.pai .icon {
  width: 17px;
  height: auto;
  flex-shrink: 0;
}

/* 🔴 浅色工作区里【没有】任何 a 的 text-decoration 重置 —— 每个链接都靠
   自己的类兜着，漏一个就露出浏览器默认的下划线。实测 .dwelcome__cta 和
   .dempty__cta（两个金色 CTA）都是 underline。
   ⚠️ 只在 .pai 作用域内，【不写成全局 a{}】—— 深色壳、落地页、#/legacy
      各有各的一套，全局改会波及它们。
   ⚠️ 正文里真需要下划线的链接目前一个都没有（.plink / .dsec__link /
      .acct__item 等全部自带样式）；以后如果出现，给它单独一个类，
      不要把这条删掉。 */
.pai a { text-decoration: none; }

/* ---- Sidebar ----------------------------------------------------------- */

.pside {
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.pside__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 22px;
}

.pside__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
}
.pside__badge .icon { width: 30px; height: 30px; color: var(--gold); }

.pside__word {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pside__word b { color: var(--gold); font-weight: 700; }

/* Four groups now instead of two, so each heading needs a clear rest above it
   to read as a divider rather than another nav row. */
.pside__group {
  margin: 18px 0 7px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pside__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pnav {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.pnav .icon { color: var(--ink-3); }
.pnav:hover { background: var(--paper-2); color: var(--ink); }

.pnav.is-active {
  background: var(--gold-wash);
  color: var(--gold);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.16);
}

.pnav.is-active .icon { color: var(--gold); }

.pnav__new {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--gold-wash);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
}

.pnav.is-active .pnav__new { background: rgba(217, 164, 65, 0.16); }

/* Tools without a screen yet — visibly not-yet rather than silently dead. */
.pnav.is-soon { color: var(--ink-3); }
.pnav.is-soon .icon { opacity: 0.55; }
.pnav__new--soon { background: var(--line-2); color: var(--ink-3); }

.pside__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line);
}

.pside__av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-wash);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.pside__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pside__who b { font-size: 13.5px; font-weight: 500; }
.pside__who i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.pside__user .icon { color: var(--ink-3); width: 12px; }

/* ---- Top bar and page head ---------------------------------------------- */

.pmain { padding: 0 0 60px; min-width: 0; }

.ptop {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ptop__crumb { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ptop__crumb em { font-style: normal; margin: 0 4px; }
.ptop__crumb b { font-weight: 600; color: var(--gold); }

.ptop__right { display: flex; align-items: center; gap: 12px; }

.plang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
}

.plang b {
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.plang .is-on { background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color: var(--ink); }

.pcredits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.pcredits i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }

.pav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
}

.phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px 18px;
}

.phead__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.phead__title .spark { color: var(--gold); display: inline-flex; }
.phead__sub { margin: 9px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.pbeta {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- Layout ------------------------------------------------------------- */

.pgrid, .pgrid2, .ptabs, .pcard, .plats, .pmain > .pfield { margin: 0 30px 18px; }

.pgrid--rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pgrid--rail > div, .prail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pstack { display: flex; flex-direction: column; gap: 18px; margin: 0 30px 18px; min-width: 0; }
.pstack .pcard { margin: 0; }
.pcol2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pcol2 > .pcard { margin: 0; }

.exlist { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.exrow__t { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.exframe { border-radius: 10px; }
.exframe--blank {
  /* Matches the 3:2 image frames it sits beside (.frames2__c .pshot). */
  display: grid; place-items: center; aspect-ratio: 3 / 2;
  background: var(--paper-2); border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 11px;
}
.exframe--blank::after { content: 'Add image'; }

/* Example frames are buttons now — they open a full-size reference. */
.exhint {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3);
}
.exhint .icon { width: 12px; }

.frames2__c[data-exview] {
  border: none; background: none; padding: 0; cursor: zoom-in; font: inherit;
}
.frames2__c[data-exview] .exframe {
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.frames2__c[data-exview]:hover .exframe {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(24, 20, 14, 0.35);
}
.frames2__c[data-exview]:focus-visible .exframe {
  outline: 2px solid var(--gold, #c9a063); outline-offset: 2px;
}

/* Per-frame caption: what this frame actually shows. */
.excap {
  display: block; margin-top: -3px;
  font-size: 10.5px; line-height: 1.4; font-style: normal; text-decoration: none;
  color: var(--ink-3);
}

/* Row note — what the pair replaced. Tinted panel so it reads as the payoff
   line for the row rather than a third caption. */
.exrow__note {
  display: flex; gap: 8px; margin: 10px 0 0;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(201, 160, 99, 0.08);
  border: 1px solid rgba(201, 160, 99, 0.18);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}
.exrow__note .icon { width: 12px; flex-shrink: 0; margin-top: 3px; color: var(--gold, #c9a063); }
.exrow__note span { color: var(--ink-2); }

/* Lead-in: the one thing Open Canvas does that nothing else does. */
.prail .pcard__s b { color: var(--ink); font-weight: 600; }

/* ---- Full-size example viewer ---- */
.exlight {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.exlight[hidden] { display: none; }
.exlight__scrim { position: absolute; inset: 0; background: rgba(18, 15, 11, 0.62); backdrop-filter: blur(4px); }
.exlight__box {
  position: relative; z-index: 1; margin: 0;
  max-width: min(900px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  animation: exlightIn 180ms var(--ease) both;
}
@keyframes exlightIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
.exlight__img {
  display: block; max-width: 100%; max-height: calc(100vh - 140px);
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.exlight__cap { text-align: center; font-size: 12.5px; color: #f3ece1; }
.exlight__x {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; border-radius: 50%; cursor: pointer;
  background: #fff; color: #1b1712;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
}
.exlight__x .icon { width: 15px; }
.pgrid--rail .pcard, .prail .pcard { margin: 0; }

.pgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pgrid2 .pcard { margin: 0; }

.pcard {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 16px -8px rgba(16, 24, 40, 0.05);
}

.pcard--tint { background: var(--paper-2); box-shadow: none; }
.pcard__t { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.011em; }
.pcard__hint { font-size: 13px; font-weight: 400; font-style: normal; color: var(--ink-3); }
.pcard__s { margin: 7px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.prow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.plink { font-size: 13.5px; color: var(--gold); cursor: pointer; }

/* ---- Tabs, steps, chips --------------------------------------------------- */

.ptabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.ptab {
  padding: 12px 22px;
  border-bottom: 2px solid transparent;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: -1px;
}
.ptab.is-on { border-bottom-color: var(--gold); color: var(--ink); font-weight: 500; }

/* Tab panels — only the active one shows; when shown it stacks its cards with
   the same rhythm as the rail column. */
.ptabpanel { display: none; }
.ptabpanel.is-shown { display: flex; flex-direction: column; gap: 18px; }

/* Inline "Sample" badge on the demo heading, and the help note on the create
   tab that points people to the sample. */
.psample-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--gold-wash); color: var(--gold);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.pnote {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 12px 15px; border-radius: 11px;
  background: var(--gold-wash); color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
.pnote b { color: var(--ink); font-weight: 600; }
.pnote .icon { width: 15px; color: var(--gold); flex-shrink: 0; }

/* Empty-state line for the Room Order card before any rooms are uploaded. */
.porder-empty {
  margin: 4px 0 0; padding: 20px; border: 1px dashed var(--line);
  border-radius: 11px; text-align: center;
  font-size: 13px; color: var(--ink-3);
}

/* Sample rooms grid sits above the demo flow with a little breathing room. */
.rooms4--sample { margin: 16px 0 4px; }

/* Create-tab room uploader: a stack of room cards, each a labelled bucket that
   holds any number of photos, plus an "Add Room" button (capped in JS). */
.rooms { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }

.room2 {
  position: relative;
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.room2:hover { border-color: #dcdee0; box-shadow: 0 5px 18px rgba(16, 24, 40, 0.07); }
.room2.is-drag { border-color: var(--gold); background: var(--gold-wash); }

.room2__head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.room2__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--line-2); color: var(--ink-3);
}
.room2__ico .icon { width: 17px; }
.room2:hover .room2__ico { background: #eef4fb; color: #6a7a8c; }
.room2__type {
  appearance: none; -webkit-appearance: none;
  padding: 6px 28px 6px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.room2__count {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 3px 10px; border-radius: 20px; background: var(--line-2);
}
.room2__rm {
  margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.room2__rm:hover { background: #fbeaea; color: #c2413a; }
.room2__rm:disabled { opacity: 0.3; cursor: not-allowed; }
.room2__rm .icon { width: 15px; }

.room2__photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px; padding: 0 12px 12px;
}
/* 16:9 like the room stills (owner sweep 2026-07-25 — frames fit the
   image; squares cropped nearly half of each photo). */
.room2__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; }
.room2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room2__thumbrm {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(20, 20, 20, 0.62); color: #fff; cursor: pointer;
}
.room2__thumbrm .icon { width: 12px; }

.room2__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; aspect-ratio: 16 / 9; border: 1.5px dashed #d7dade; border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; text-align: center;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.room2__add:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.room2__add .icon { width: 18px; }
.room2__add[hidden] { display: none; }

.phototally {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  padding: 3px 10px; border-radius: 20px; background: var(--line-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.phototally.is-full { background: var(--gold-wash); color: var(--gold); }

.room2__addroom {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: flex-start; padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.room2__addroom:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); }
.room2__addroom .icon { width: 16px; }
.room2__addroom[hidden] { display: none; }

/* Sample tab — pre-filled demo columns (non-interactive teaching example) */
.rooms--demo { margin-top: 14px; }
/* Nothing in the worked example answers the pointer — no hover lift, no
   drop highlight. It is a picture of a finished step. */
.room2--demo { cursor: default; }
.room2--demo:hover { border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.room2--demo:hover .room2__ico { background: #eef4fb; color: #6a7a8c; }
.room2__name {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.room2__name .icon { width: 11px; color: var(--ink-3); }
.room2__ico--on { background: #eef4fb; color: #6a7a8c; }
.room2__count--on {
  display: inline-flex; align-items: center; gap: 4px;
  color: #2f9e6f; background: #eaf7f0;
}
.room2__count--on .icon { width: 11px; }
/* The demo column is a picture of a finished step, so nothing in it should
   read as operable: no add tile, and the room name is a plain label. */
.room2__name--demo { background: var(--paper-2); color: var(--ink-2); }

.order__n {
  margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--gold-wash); color: var(--gold); font-size: 11px; font-style: normal;
}

.pstep { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 14px; }
.pstep b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--line-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.pstep.is-on b, .psteps4 .pstep:first-child b, .pstep--rail b {
  background: linear-gradient(150deg, var(--gold-2), var(--gold));
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(217, 164, 65, 0.5);
}
.pstep span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pstep i { font-size: 14px; font-style: normal; font-weight: 500; color: var(--ink); }
.pstep em { font-size: 12.5px; font-style: normal; line-height: 1.55; color: var(--ink-2); }
.plight { color: var(--ink-3) !important; font-weight: 400 !important; }

.psteps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.psteps4 .pstep { margin: 0; }
.psteps4 .pstep:first-child { border-bottom: 2px solid var(--gold); padding-bottom: 14px; margin-bottom: -14px; }

.pchip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pchip .icon { color: var(--ink-3); }
.pchip:hover { border-color: #dcdddf; }
.pchip.is-on { border-color: var(--gold); background: var(--gold-wash); }
.pchip.is-on .icon { color: var(--gold); }
.pchip b { font-weight: 500; }
.pchip i { width: 100%; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.pchoice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pchoice2--wide .pchip { flex-direction: column; align-items: flex-start; gap: 5px; }
.pchoice4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pchoice5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

/* ---- Fields --------------------------------------------------------------- */

.pfields2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.pfield { display: flex; flex-direction: column; min-width: 0; }
.pfield label {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pfield label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pfield__hint { margin: 8px 0 10px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
/* Spans the taller left column on Interior Vision so its dropzone lines up
   with the stacked selects beside it. */
.pfield--tall { grid-row: span 2; }

.pselect {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.pselect .icon:last-child { margin-left: auto; color: var(--ink-3); width: 12px; }

.pselect2 {
  appearance: none; -webkit-appearance: none;
  height: 46px; padding: 0 38px 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  font-size: 14px; color: var(--ink); cursor: pointer;
}
.pselect2:focus { outline: none; border-color: var(--gold); }

.ptextarea {
  display: block;
  position: relative;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--ink-3);
}
.ptextarea b { position: absolute; right: 12px; bottom: 10px; font-size: 11.5px; font-weight: 400; }

/* Label, then its "(max N characters)" qualifier glued right after it, with
   the live counter pushed to the far edge. `space-between` alone stranded
   the qualifier in the middle of the row, reading as a layout fault. */
.pfield__lblrow { display: flex; align-items: center; gap: 7px; }
.pfield__lblrow .pcharcount { margin-left: auto; }
.pcharcount { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.ptextarea2 {
  display: block; width: 100%; min-height: 110px; resize: vertical;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-2); font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.ptextarea2::placeholder { color: var(--ink-3); }
.ptextarea2:focus { outline: none; border-color: var(--gold, #c9a063); box-shadow: 0 0 0 3px rgba(201, 160, 99, 0.14); }
/* Counter sitting under a textarea that has no label row of its own. */
.pfield__count { margin: 6px 0 0; text-align: right; font-size: 11.5px; color: var(--ink-3); }
.pfield__count b { font-weight: 400; }
.ptextarea2:focus { outline: none; border-color: var(--gold); background: #fff; }
.ptextarea2--demo { color: var(--ink); }
.ptextarea2--big { min-height: 140px; }
.pchip--center { justify-content: center; text-align: center; font-weight: 500; padding: 15px; }

.voicedemo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.voicedemo__opt {
  display: flex; align-items: center; gap: 9px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--paper);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.voicedemo__opt:hover { border-color: var(--gold); background: var(--gold-wash); }
.voicedemo__opt .icon { width: 16px; color: var(--ink-3); }
.voicedemo__opt.is-on { border-color: var(--gold); background: var(--gold-wash); }

.pinput {
  display: flex;
  align-items: center;
  flex: 1;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plinkrow { display: flex; gap: 10px; }
.pprivacy { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pprivacy .icon { width: 13px; }

/* ---- Dropzones ------------------------------------------------------------- */

.pdrop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pdrop:hover { border-color: #dcdee0; background: #fff; }
/* Every dropzone is a <label> wrapping a hidden file input, so the whole tile
   is clickable — these states are the feedback for that. */
.pdrop[data-upload] { cursor: pointer; }
.pdrop.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.pdrop.is-filled { border-color: #2f9e6f; background: #f2faf6; }
.pdrop.is-filled .pdrop__i { background: #dff3e8; color: #2f9e6f; }
.pdrop--lg { padding: 52px 20px; }
.pdrop__i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: #ede9fd;
  color: #7c6bd4;
}
.pdrop__i--outfit { background: #e7edfd; color: #5b7fd4; }
.pdrop__i--music { background: #f1ecfd; color: #7c6bd4; font-size: 22px; }
.pdrop__i .icon { width: 22px; }
.pdrop b { font-size: 14.5px; font-weight: 500; }
.pdrop i { margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.pdrop em { margin-top: 9px; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.phostlabel {
  display: block; margin-bottom: 11px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2);
}
.phostlabel b { color: var(--gold); }
.phostlabel i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.pdrop--host { border: 1.5px dashed var(--gold-2); transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease); }
.pdrop--host:hover, .pdrop--host.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.pdrop--host.is-filled { border-style: solid; border-color: var(--line); }

/* Host references are people, so the tiles are portrait. As wide landscape
   bands the figure was cropped to a strip and the reference told you nothing
   about the shot you are meant to supply. Capped so two portraits do not
   dominate the card. */
.hostdemo { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin: 14px 0 4px; }
.hostdemo__ph { margin: 0; }
/* Each reference frame takes its own image's ratio (owner sweep 2026-07-25):
   the full-body plate is a 2:3 portrait, the face close-up a 1:1 square.
   The shared 3:4 either letterboxed the figure or cropped the face. Uneven
   heights are fine — they read as two photo prints. */
.hostdemo__ph .pshot { display: block; height: auto; border-radius: 12px; }
.hostdemo__ph .pshot--hostfull { aspect-ratio: 2 / 3; background-size: cover; }
.hostdemo__ph .pshot--hostface { aspect-ratio: 1 / 1; }

.hostdemo__ph figcaption {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.hostdemo__ph figcaption em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.hostdemo__ok {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: #eaf7f0; color: #2f9e6f;
}
.hostdemo__ok .icon { width: 10px; }

.ptip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--gold-wash);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ptip .icon { width: 14px; color: var(--gold); margin-top: 1px; }
.ptip b { color: var(--ink); font-weight: 600; }
.ptip--purple { background: #f4f2fd; }
.ptip--purple .icon { color: #7c6bd4; }

/* ---- Buttons ---------------------------------------------------------------- */

.pgen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  margin-top: 20px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--gold-2), var(--gold));
  /* 🔴 原来是 #fff，压在金色渐变上实测【2.25:1】—— 达不到 4.5:1，而 .pgen 是
     全站主 CTA（9 个工具页的 Generate 按钮 + dashboard 的 CTA，共 48 处）。
     换成 --ink #17181a → 7.9:1。跟 skills 工作台的主按钮（R2 已验 7.9:1）
     以及 dashboard 分类胶囊选中态用的是同一组合。
     ⚠️ .pgen 的变体（--sm / --inline / --hero / --deep）【没有一个】覆写
        color，所以改这一处就覆盖全部；--deep 只换了 background 的深浅，
        #17181a 压在它上面是 6.05:1，同样达标。 */
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(217, 164, 65, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: filter 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.pgen:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(217, 164, 65, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pgen--sm { height: 46px; font-size: 14.5px; }
.pgen--inline { display: inline-flex; height: 48px; margin: 0; padding: 0 26px; font-size: 14.5px; }
.pgen__cap { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 11px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pgen__cap .icon { width: 13px; }

.pbtn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pbtn-ghost:hover { border-color: #dcdddf; background: var(--paper-2); }
.pbtn-ghost--center { display: flex; width: 220px; margin: 20px auto 0; }
.pbtn-ghost .icon { color: var(--ink-3); }

/* ---- Media placeholders ------------------------------------------------------ */
/* Stand-ins with a horizon and glow so empty tiles read as photography
   rather than as missing assets. */

.pshot {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #dfe5e8, #c3ccd2);
}
.pshot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent 55%);
}
/* Real stills, each with its original gradient kept as a second layer so a
   tile degrades to its own tone rather than to bare white. */
.pshot--land,
.pshot--villa,
.pshot--presenter,
.pshot--before,
.pshot--after,
.pshot--op1,
.pshot--op2,
.pshot--car1,
.pshot--car2,
.pshot--r0,
.pshot--r1,
.pshot--r2,
.pshot--r3,
.pshot--h0,
.pshot--h1,
.pshot--h2,
.pshot--h3,
.pshot--h4,
.pshot--showroom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The actual before/after aerial pair — same lot, same angle, empty plot vs.
   the finished development — rather than two unrelated stock stills. */
/* The two reference shots. `contain` on the full-body plate because cutting
   the feet off the picture that demonstrates "full body" defeats the point;
   `cover` on the headshot, which is already framed tight. */
.pshot--hostfull {
  background-image: url('/prop%20ai/as1.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #efe6da;
}
.pshot--hostface {
  background-image: url('/pv-h0.jpg');
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
}

.pshot--land { height: 152px; background-image: url('/prop%20ai/land%20vision%20before.png'), linear-gradient(170deg, #a8cfe8, #7fa86a); }
.pshot--villa { height: 152px; background-image: url('/prop%20ai/land%20vision%20after.png'), linear-gradient(165deg, #6b7f96, #4a3c30); }
.pshot--presenter { height: 158px; background-image: url('/pv-presenter.jpg'), linear-gradient(160deg, #cbb9a4, #8d7660); }
.pshot--before { background-image: url('/pv-before.jpg'), linear-gradient(160deg, #cfc7bd, #8f867c); }
.pshot--after { background-image: url('/pv-after.jpg'), linear-gradient(160deg, #b99b74, #6d5540); }
/* Open Canvas example rail — Restaurant and Car Dealer first/last pairs. */
.pshot--op1 { background-image: url('/prop%20ai/op1.png'), linear-gradient(160deg, #4a4438, #201d18); }
.pshot--op2 { background-image: url('/prop%20ai/op2.png'), linear-gradient(160deg, #4a4438, #201d18); }
.pshot--car1 { background-image: url('/prop%20ai/car1.png'), linear-gradient(160deg, #5b86c4, #24406e); }
.pshot--car2 { background-image: url('/prop%20ai/car2.jpg'), linear-gradient(160deg, #5b86c4, #24406e); }
.pshot--showroom { background-image: url('/ds-showroom.jpg'), linear-gradient(160deg, #6b7a8c, #2c3a4a); }
.pshot--r0 { background-image: url('/pv-r0.jpg'), linear-gradient(160deg, #d8cec2, #a4968a); }
.pshot--r1 { background-image: url('/pv-r1.jpg'), linear-gradient(160deg, #ddd6cb, #b0a293); }
.pshot--r2 { background-image: url('/pv-r2.jpg'), linear-gradient(160deg, #cfc4b6, #948575); }
.pshot--r3 { background-image: url('/pv-r3.jpg'), linear-gradient(160deg, #e0dbd2, #b5aca0); }

/* Headshots crop from the upper third — a centre crop in a short tile
   slices the face. */
/* These are full-body portraits, not headshot crops — `cover` was cutting
   off the legs to fill a squarish tile. `contain` shows the whole figure;
   the gradient fallback on `.pshot` reads as a soft frame around it instead
   of a hard crop. */
.pshot--h0, .pshot--h1, .pshot--h2, .pshot--h3, .pshot--h4 {
  background-size: contain;
  background-position: center;
}
.pshot--h0 { background-image: url('/prop%20ai/as1.png'), linear-gradient(160deg, #c3ced9, #7d8b99); }
.pshot--h1 { background-image: url('/prop%20ai/as2.png'), linear-gradient(160deg, #d9c9b8, #a08d79); }
.pshot--h2 { background-image: url('/prop%20ai/as3.png'), linear-gradient(160deg, #cfd3d6, #83898f); }
.pshot--h3 { background-image: url('/prop%20ai/as4.png'), linear-gradient(160deg, #dcd6cd, #a49c92); }
.pshot--h4 { background-image: url('/prop%20ai/as5.png'), linear-gradient(160deg, #c9ac8c, #7a5f45); }

/* The presenter and the before/after frames are people too — keep heads
   in frame rather than centring on the body. */
.pshot--presenter,
.pshot--before,
.pshot--after { background-position: center 20%; }

.pplay {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pplay .icon { width: 16px; }

/* ---- Land Vision demo strip ---------------------------------------------------- */

.demo3 { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 14px; align-items: start; }
/* Frames match the artwork (owner sweep, 2026-07-25: every frame fits its
   image). Both aerials are 3:2 — the fixed 152px well was a 2.5:1 letterbox
   that cover-cropped a third of each picture. */
.demo3 .pshot { height: auto; aspect-ratio: 3 / 2; }
.demo3__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.demo3__col .pbtn-ghost { align-self: center; }
.demo3__arrow { display: grid; place-items: center; padding-top: 92px; color: var(--gold); }
.demo3__cap { text-align: center; font-size: 12px; color: var(--ink-3); }

.pgenbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  height: 152px;
  justify-content: center;
  padding: 16px;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 13px;
  color: var(--ink-2);
}
.pgenbox__i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--gold);
}
.pgenbox b { font-size: 12.5px; color: var(--gold); }
.pbar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

.prail__t { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -0.008em; }
.pstep--rail { margin-bottom: 16px; }
.pcheck { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-size: 13px; color: var(--ink-2); }
.pcheck .icon { width: 15px; color: #34a853; }

/* ---- Interior Vision ------------------------------------------------------------ */

.rooms4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.room { display: flex; flex-direction: column; }
.room .pshot { height: 122px; align-items: end; }
.room__ok {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #34a853; color: #fff;
}
.room__ok .icon { width: 12px; }
.room__cap { position: relative; z-index: 1; width: 100%; padding: 0 0 9px; text-align: center; font-size: 12.5px; font-style: normal; color: #fff; }
.room__re {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; margin-top: 8px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 9px 9px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.room__re .icon { width: 13px; }

.addroom {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 196px; padding: 20px; margin-top: 13px;
  border: 1px dashed #dcdddf; border-radius: 12px;
}
.addroom__i {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px;
  border-radius: 50%; border: 1px solid var(--gold); color: var(--gold);
}
.addroom__i .icon { width: 15px; }
.addroom b { font-size: 13px; font-weight: 500; }
.addroom i { margin-top: 5px; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.order4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.order {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px;
}
.order b {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px; background: var(--gold-wash); font-size: 12px; color: var(--gold);
}
.order .icon { margin-left: auto; color: #cfd1d4; width: 14px; }

.pflow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pflow > span { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pflow > span > span:first-child, .pflow > span .icon:first-child { color: var(--gold); }
.pflow i { font-size: 11px; font-style: normal; color: var(--ink-2); white-space: nowrap; }
.pflow > .icon { color: var(--gold); }

.pcard--cost { display: flex; flex-direction: column; gap: 14px; }
.pcost { display: flex; align-items: center; gap: 12px; margin: 0; }
.pcost > span:first-child {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--gold-wash); color: var(--gold);
}
.pcost > span:last-child { display: flex; flex-direction: column; }
.pcost i { font-size: 12px; font-style: normal; color: var(--ink-2); }
.pcost b { font-size: 18px; font-weight: 600; }
.pcost em { font-size: 11.5px; font-style: normal; color: var(--ink-3); }

/* ---- Agent Studio ----------------------------------------------------------------- */

.heads { display: flex; align-items: center; gap: 12px; }
/* 2:3 portrait, matching as1–as5 (1024x1536). The fixed 208px landscape
   strip either cropped the figures or floated them mid-pill over the
   gradient; ratio-locked, each card IS the portrait. (Phone keeps its own
   carousel sizing — mobile.css sets both dimensions, so this ratio is
   inert there.) */
.heads__shot { flex: 1; aspect-ratio: 2 / 3; }
.heads__nav {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
  color: var(--ink-2); cursor: pointer;
}
.heads__nav .icon { width: 12px; }

/* ---- Smart Edit --------------------------------------------------------------------- */

.pfeats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pfeat { display: flex; align-items: center; gap: 13px; }
.pfeat__i {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--gold-wash); color: var(--gold);
}
.pfeat b { display: block; font-size: 14.5px; font-weight: 600; }
.pfeat i { display: block; margin-top: 4px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }

.ba { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 12px; align-items: center; padding: 16px; border-radius: 11px; background: var(--paper-2); }
/* The before/after stills are 9:16 vertical reels — a 176px landscape well
   cover-cropped ~70% of each frame. Ratio-locked and width-capped so the
   pair reads as two phone screens side by side rather than filling the
   column at full height. */
.ba .pshot { height: auto; aspect-ratio: 9 / 16; width: min(100%, 250px); justify-self: center; }
.ba__tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 3px 9px; border-radius: 6px; background: rgba(20,20,20,0.6);
  font-size: 11px; font-style: normal; color: #fff;
}
.ba__tag--dark { left: auto; right: 8px; top: 8px; bottom: auto; background: rgba(20,20,20,0.8); }
.ba__caption {
  position: absolute; z-index: 1; bottom: 34px; left: 0; right: 0;
  text-align: center; font-size: 13px; font-weight: 800; line-height: 1.3;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.ba__mid { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, var(--gold-2), var(--gold)); color: #fff; }
.ba__player { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.ba__player .icon { width: 14px; }
.ba__player i { font-style: normal; }

.penh { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.penh__right { display: flex; flex-direction: column; align-items: flex-end; }
.penh .pgen { margin: 0; padding: 0 40px; }

/* ---- Video Insights ------------------------------------------------------------------- */

.plats { display: flex; gap: 11px; }
.plat {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.plat:hover { border-color: #b5a9ea; background: #faf9ff; }
.plat.is-on { border-color: #7c6bd4; background: #f6f4fe; }
.plat__i { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.plat__i svg { display: block; width: 18px; height: 18px; }

.pget5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.pget { display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: 11px; }
.pget__i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 9px; background: #f1eefe; color: #7c6bd4; }
.pget b { font-size: 14px; font-weight: 600; }
.pget i { margin-top: 7px; font-size: 12.5px; font-style: normal; line-height: 1.5; color: var(--ink-2); }

.prows { display: flex; flex-direction: column; }
.panal { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.panal:first-child { border-top: none; }
/* overflow visible so the platform badge, which sits deliberately outside
   the frame at bottom-right, is not sliced off by .pshot's clipping. */
.panal__thumb { width: 88px; height: 52px; flex-shrink: 0; place-items: start; overflow: visible; }
.panal__thumb::after { border-radius: 10px; }
.panal__plat { position: absolute; right: -7px; bottom: -7px; z-index: 1; width: 20px; height: 20px; border: 2px solid #fff; }
.panal__x { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.panal__x b { font-size: 14.5px; font-weight: 500; }
.panal__x i { font-size: 12.5px; font-style: normal; color: var(--ink-3); }
.panal__m { display: flex; flex-direction: column; gap: 4px; width: 78px; flex-shrink: 0; }
.panal__m b { font-size: 14px; font-weight: 600; }
.panal__m i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.panal__w { width: 92px; flex-shrink: 0; text-align: right; font-size: 12.5px; color: var(--ink-3); }
.panal .icon { color: var(--ink-3); width: 13px; }

/* ---- Open Canvas ----------------------------------------------------------- */

.pgrid--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pgrid--wide > div, .pgrid--wide .prail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pgrid--wide .pcard { margin: 0; }

.pcard--violet { background: #f8f7fe; border-color: #e9e5fb; }
.pcheck--violet .icon { color: var(--violet, #7c6bd4); }
.pai { --violet: #7c6bd4; }

.pflow--lg { flex-direction: column; gap: 0; align-items: stretch; }
.pflow--lg > span { flex-direction: column; text-align: center; gap: 9px; padding: 4px 0; }
.pflow--lg > .icon { margin: 6px auto; transform: rotate(90deg); }
.pflow__i {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto;
  border-radius: 50%; background: var(--gold-wash); color: var(--gold);
}
.pflow--lg b { font-size: 14px; font-weight: 600; }
.pflow--lg i { font-size: 12px; font-style: normal; line-height: 1.5; color: var(--ink-2); white-space: normal; }

.frames2 { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 12px; align-items: center; }
.frames2__c { display: flex; flex-direction: column; gap: 9px; text-align: center; }
/* 3:2 like all six example stills — 118px fixed was a 2.9:1 slit. */
.frames2__c .pshot { height: auto; aspect-ratio: 3 / 2; }
.frames2__c i { font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.frames2__c i em { font-style: normal; color: var(--ink-3); }
.frames2 > .icon { color: var(--ink-3); margin: 0 auto; }

/* ---- Meta Ads AI ------------------------------------------------------------ */

.pgrid2--stack { align-items: start; }
.pstack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pstack .pcard { margin: 0; }

.paccess { display: flex; align-items: flex-start; gap: 13px; margin: 0; }
.paccess__i { font-size: 26px; line-height: 1; }
.paccess b { display: block; font-size: 16px; font-weight: 600; }
.paccess i { display: block; margin-top: 5px; font-size: 13px; font-style: normal; color: var(--ink-2); }

.pchip--green {
  border-color: #34a853; background: #34a853; color: #fff; justify-content: center;
}
.pchip--green .icon { color: #fff; }

.pcard--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pcard__t--center, .pcard__s--center { text-align: center; }

.fbmark {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px;
  border-radius: 14px; background: #1877f2; color: #fff;
  font-family: Georgia, serif; font-size: 32px; font-weight: 700; line-height: 1;
}
.fbbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 26px; margin-top: 18px;
  border-radius: 9px; background: #1877f2; color: #fff;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.fbbtn b { font-family: Georgia, serif; font-size: 18px; }
.psafe { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: 12.5px; color: var(--gold); }
.psafe .icon { width: 13px; }
.pperms { margin: 8px 0 0; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3); }

.pcando { display: flex; flex-direction: column; }
.pcan { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.pcan:first-child { border-top: none; padding-top: 4px; }
.pcan__i {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px; background: #f1eefe; color: var(--violet);
}
.pcan b { display: block; font-size: 15px; font-weight: 600; }
.pcan i { display: block; margin-top: 6px; font-size: 13px; font-style: normal; line-height: 1.55; color: var(--ink-2); }

.phow { margin: 0 30px 18px; }
.phow4 { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; }
.phow__step { display: flex; align-items: flex-start; gap: 13px; flex: 1; min-width: 0; }
.phow__i {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; background: #fff; color: var(--violet);
  box-shadow: 0 1px 3px rgba(23, 24, 26, 0.08);
}
.fbdot { color: #1877f2; font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.phow__step b { display: block; font-size: 14.5px; font-weight: 600; }
.phow__step i { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; line-height: 1.5; color: var(--ink-2); }
.phow__arrow { display: grid; place-items: center; padding-top: 14px; color: var(--ink-3); flex-shrink: 0; }

/* ---- Market Insights ---------------------------------------------------------- */

.pexample { text-align: center; }
.pexample__t { margin: 0 0 18px; font-size: 14px; font-weight: 500; color: var(--gold); }
.pexample__cap { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); }

.report {
  max-width: 420px; margin: 0 auto; padding: 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); text-align: left;
  box-shadow: 0 10px 30px -16px rgba(23, 24, 26, 0.22);
}
.report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.report__head b { display: block; font-size: 13px; font-weight: 600; }
.report__head i { display: block; margin-top: 3px; font-size: 10.5px; font-style: normal; color: var(--ink-3); }
.report__date { font-size: 9.5px; text-align: right; color: var(--ink-3); }
.report__h { margin: 16px 0 6px; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.report__p { margin: 0; font-size: 10px; line-height: 1.6; color: var(--ink-2); }
.report__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.report__kpis span { text-align: center; }
.report__kpis b { display: block; font-size: 13px; font-weight: 600; }
.report__kpis .up { color: #1a9c4b; }
.report__kpis i { display: block; margin-top: 3px; font-size: 8.5px; font-style: normal; color: var(--ink-3); }
.report__kpis span + span { border-left: 1px solid var(--line-2); }
.report__list { margin: 6px 0 0; padding-left: 15px; }
.report__list li { font-size: 10px; line-height: 1.8; color: var(--ink-2); }

.pbytopic {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px; border-color: var(--gold); background: var(--gold-wash);
  font-size: 14.5px; font-weight: 500; color: var(--gold);
}
.pbytopic .icon { color: var(--gold); }

.pinput--mono { font-family: ui-monospace, monospace; height: 54px; }
input.pinput { display: block; width: 100%; color: var(--ink); background: #fff; }
input.pinput::placeholder { color: var(--ink-3); }
input.pinput:focus { outline: none; border-color: var(--gold); }

.vsample {
  aspect-ratio: 16 / 9; border-radius: 12px; display: grid; place-items: center;
  background: var(--line-2); border: 1px dashed var(--line);
}

/* Scoped to .pai — these class names also exist in the dark app's credit
   history; unscoped they overwrote it (dark ink titles on a dark bg, wrong
   grid) and broke that screen. */
.pai .histlist { display: flex; flex-direction: column; }
/* Each row is its own grid, so `auto` columns sized per-row left the badge,
   date and buttons at a different x on every line (owner flagged the ragged
   column, 2026-07-25). Fixed tracks for everything right of the title keep
   all rows on the same vertical lines; the action buttons stretch to their
   track so Play/View and Download read as two tidy columns. */
.pai .histrow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 108px 148px 96px 136px;
  align-items: center; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line-2);
}
.pai .histrow:last-child { border-bottom: none; }
.pai .histrow__thumb {
  width: 72px; height: 48px; border-radius: 8px; position: relative;
  display: grid; place-items: center;
}
.pai .histrow__play {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 20, 20, 0.55); color: #fff;
}
.pai .histrow__play .icon { width: 12px; }
.pai .histrow__x { min-width: 0; }
.pai .histrow__x b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai .histrow__x i { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-style: normal; color: var(--ink-3); }
.pai .histrow__tool { display: inline-flex; align-items: center; gap: 5px; }
.pai .histrow__tool .icon { width: 13px; }
.pai .histrow__badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px;
  background: #eaf7f0; color: #2f9e6f; font-size: 11.5px; font-weight: 600;
  justify-self: start;
}
.pai .histrow__badge .icon { width: 11px; }
.pai .histrow__date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
/* Grid-stretched to their fixed tracks (no width of their own) so both
   button columns are flush across every row; content stays centred. */
.pai .histrow__act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.pai .histrow__act .icon { width: 14px; }
.pmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.pmeta b { font-weight: 400; color: var(--ink-3); }

.ptopics { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 30px 20px; }
.ptopics__lab { font-size: 13.5px; color: var(--ink-2); margin-right: 4px; }
.ptopic {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); font-size: 13px; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.ptopic:hover { border-color: var(--gold); background: var(--gold-wash); }

.pgen--deep { background: linear-gradient(100deg, #e8bd63, #c08a2c); }

/* ---- Smart Edit 2 ---------------------------------------------------------------- */

.pgrid--se2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin: 0 30px 18px; }
.pgrid--se2 .pcard { margin: 0; }

.paudio {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-2);
}
.paudio.is-on { border-color: var(--gold); background: var(--gold-wash); }
.paudio[data-upload] { cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.paudio[data-upload]:hover { border-color: var(--gold); }
.paudio.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.paudio.is-filled { border-color: #2f9e6f; background: #f2faf6; }
.paudio.is-filled .paudio__i { background: #dff3e8; color: #2f9e6f; }
.paudio__i {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; background: rgba(217, 164, 65, 0.16); color: var(--gold);
}
.paudio__i--grey { background: #eceded; color: var(--ink-2); }
.paudio b { display: block; font-size: 14.5px; font-weight: 500; }
.paudio i { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--ink-2); }

.pdrop__i--grey { background: #eceded; color: var(--ink-2); }
.prec {
  padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line);
  font-size: 10.5px; font-style: normal; color: var(--ink-2);
}

.pcard--empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pfield__label {
  align-self: flex-start; margin: 0 0 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
}
.pempty__i {
  display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 16px;
  border-radius: 14px; background: #f1eefe; color: var(--violet);
}
.pempty__i .icon { width: 26px; }
.pcard--empty b { font-size: 15.5px; font-weight: 600; }
.pcard--empty i { margin-top: 7px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.pcard--empty .pbtn-ghost { margin-top: 18px; }


/* ════════════════════════════════════════════════════════════════════════
   R3.5 —— 浅色顶栏的账号下拉

   结构照 13-AppShell.js 的 AccountMenu，但类名换成 .pacct__* ——
   深色那份的样式（.app .acct*，app-popovers.css）全是
   rgba(255,255,255,…) 和 var(--white)，放白底上一个字都看不见。
   ⚠️ 全部长在 .pai 里，用的是 .pai 自己那套变量，一个新色值都没发明。
   ════════════════════════════════════════════════════════════════════════ */

.pacctwrap { position: relative; display: inline-flex; }

.pacctbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; color: var(--ink-2);
  transition: background-color 160ms var(--ease);
}
.pacctbtn:hover, .pacctbtn.is-open { background: var(--paper-2); }
.pacctbtn .icon { width: 13px; }
/* 键盘焦点环。⚠️ 别用 outline:none —— 键盘用户会完全看不出焦点在哪。 */
.pacctbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pacct {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 254px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 18px 44px -16px rgba(23, 24, 26, 0.28), 0 2px 6px rgba(23, 24, 26, 0.05);
}

.pacct__id {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 11px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.pacct__av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-2), var(--gold));
  /* 金底深字，跟 .pgen 同一组合（7.9:1）。 */
  color: var(--ink); font-size: 14px; font-weight: 600;
}
.pacct__x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pacct__x b { font-size: 13px; font-weight: 600; color: var(--ink); }
.pacct__x i {
  font-style: normal; font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pacct__list { padding: 3px 0; border-bottom: 1px solid var(--line); }
.pacct__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin: 1px 5px; border-radius: 9px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.pacct__item .icon { width: 15px; color: var(--ink-3); flex-shrink: 0; }
.pacct__item span { flex: 1; min-width: 0; }
.pacct__item:hover { background: var(--paper-2); color: var(--ink); }
.pacct__item:hover .icon { color: var(--gold); }
.pacct__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pacct__go { flex: none; }
.pacct__item--bal { font-weight: 600; color: var(--ink); }
.pacct__item--bal .icon { color: var(--gold); }
.pacct__item--out { margin-top: 4px; border-bottom: 0; }
.pacct__item--out:hover { color: #c2413a; }
.pacct__item--out:hover .icon { color: #c2413a; }
/* 最后一组没有下边框 —— 它下面就是菜单底了。 */
.pacct__list:last-of-type { border-bottom: 0; }

/* 积分 chip 现在是 <a>，给它一个可点的样子。 */
.pai a.pcredits { cursor: pointer; transition: border-color 160ms var(--ease); }
.pai a.pcredits:hover { border-color: rgba(217, 164, 65, 0.55); }

@media (max-width: 640px) {
  /* 手机上顶栏很窄，菜单右对齐会溢出屏幕 —— 钉在视口内。 */
  .pacct { width: min(254px, calc(100vw - 24px)); }
}


/* ════════════════════════════════════════════════════════════════════════
   R3.5 —— #/app/buy 和 #/app/credits 收编到浅色

   这两页的版式类（.card / .pack* / .balcard* / .histrow* / .invcard* /
   .btn-gold / .buytitle …）定义在 app-pages.css，是给深色 .app 写的。
   🔴 【不能】直接改那边 —— #/app/pricing 和其余 9 个深色页面还在用同一批类，
      而 pricing 本轮明确不碰。所以这里只在 .pai 作用域内覆盖【颜色】，
      尺寸、间距、圆角一个都不动（跟 R2 收编 skills 是同一套做法）。
   ⚠️ 一个新色值都没发明，全部取 .pai 自己那套。
   ════════════════════════════════════════════════════════════════════════ */

.pai .card {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 16px -8px rgba(16, 24, 40, 0.05);
  color: var(--ink);
}

/* ── Buy Credits ── */
.pai .buywrap { color: var(--ink); }
.pai .buytitle { color: var(--ink); }
.pai .buytitle em { color: var(--gold); }
.pai .buysub { color: var(--ink-2); }
.pai .buysub b { color: var(--ink); }
.pai .eyebrow, .pai .buyeyebrow { color: var(--gold); }

.pai .pack { background: var(--paper); border-color: var(--line); }
/* 选中那张（Full Access）用金边 + 淡金底，跟工具页 .pcard 的强调方式一致。 */
.pai .pack.is-on { border-color: var(--gold); background: var(--gold-wash); }
.pai .pack__n { color: var(--ink); }
.pai .pack__l { color: var(--ink-2); }
.pai .pack__p { color: var(--ink); }
.pai .pack__p.is-on { color: var(--gold); }
.pai .pack__save { color: var(--gold); }
.pai .pack__v { color: var(--ink-2); }
.pai .pack__flag { background: var(--gold); color: var(--ink); }

.pai .perkbar { background: var(--paper); border-color: var(--line); }
.pai .perkcol b { color: var(--ink); }
.pai .perkcol i { color: var(--ink-2); }
.pai .perkcol__i { background: var(--gold-wash); color: var(--gold); }

/* ── My Credits ── */
.pai .balcard__lab { color: var(--ink-2); }
.pai .balcard__n { color: var(--ink); }
.pai .balcard__n i { color: var(--ink-2); }
/* 余额卡里那个「Buy more credits」—— 原来在深色 Shell 的 head.actions 槽位，
   PToolShell 没有这个槽，所以挪进卡里。 */
.pai .balcard__cta { margin-top: 16px; }

.pai .sechead h2 { color: var(--ink); }
.pai .histrow { border-color: var(--line); }
.pai .histrow__x b { color: var(--ink); }
.pai .histrow__x i { color: var(--ink-2); }
.pai .histrow__v { color: var(--ink); }
.pai .histrow__v.pos { color: #2e7d51; }
.pai .histrow__i { background: var(--paper-2); color: var(--ink-2); }
.pai .histrow__i.down { background: var(--gold-wash); color: var(--gold); }

.pai .invcard { background: var(--paper); border-color: var(--line); }
.pai .invcard__i { background: var(--gold-wash); color: var(--gold); }
.pai .invcard h3 { color: var(--ink); }
.pai .invcard p { color: var(--ink-2); }
.pai .invcard__meta { color: var(--ink-3); }

/* 金色实心按钮。白字压金底是 2.25:1，跟 .pgen 一个毛病 —— 同样换成 --ink。 */
.pai .btn-gold {
  background: linear-gradient(100deg, var(--gold-2), var(--gold));
  color: var(--ink);
  border: 0;
  text-decoration: none;
}
.pai .btn-gold:hover { filter: brightness(1.04); }

.pai .pmuted { margin: 0; padding: 18px 20px; font-size: 13.5px; color: var(--ink-2); }