:root {
  --bg: #1C1C1F;
  --side: #18181A;
  --card: #212124;
  --card-2: #252529;
  --raise: #2D2D32;
  --line: #2E2E33;
  --line-2: #3B3B41;
  --text: #EDEDEF;
  --text-2: #A3A3AB;
  --text-3: #8B8B93;
  --green: #5BD08A;
  --green-text: #5BD08A;
  --red: #FF7C7C;
  --yellow: #F2C94C;
  --peri: #8E9BFF;
  --mint: #6EDDA6;
  --btn-bg: #EDEDEF;
  --btn-fg: #161618;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.light,
.cust-light {
  --bg: #F6F6F7;
  --side: #EEEEF0;
  --card: #FFFFFF;
  --card-2: #FAFAFB;
  --raise: #E4E4E8;
  --line: #E2E2E6;
  --line-2: #D2D2D8;
  --text: #1B1B1E;
  --text-2: #55555D;
  --text-3: #66666E;
  --green: #22A35A;
  --green-text: #177A43;
  --red: #C93636;
  --yellow: #B7860B;
  --btn-bg: #1B1B1E;
  --btn-fg: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--text-3); opacity: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grow { flex: 1 1 auto; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


.app { min-height: 100vh; display: flex; }
.side { flex: 0 0 248px; background: var(--side); border-right: 1px solid var(--line); padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand svg { width: 20px; height: 20px; }
.brand .tag { font-size: 12px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; letter-spacing: 0; }
.grp { font-size: 12.5px; color: var(--text-3); padding: 0 10px; margin: 12px 0 2px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: 14.5px; color: var(--text); }
.item svg { color: var(--text-2); }
.item:hover { background: var(--card); }
.item.on { background: var(--raise); }
.item .n { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.sub { margin: 2px 0 6px 17px; padding-left: 10px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sub a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub a.on { background: var(--raise); color: var(--text); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 0 4px; }
.me { display: flex; align-items: center; gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 8px; background: var(--raise); color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.me .who { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.me .who small { color: var(--text-3); font-size: 12.5px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); background: var(--card); }
.newc { margin: 0 2px 6px; justify-content: center; }

.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--text-3); }
.content { padding: 6px 26px 32px; display: flex; flex-direction: column; gap: 16px; }
.mbar { display: none; }
@media (max-width: 760px) {
  .side { display: none; }
  .mbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--side); }
  .top { padding: 0 16px; min-height: 46px; }
  .content { padding: 4px 16px 24px; }
}


.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); min-height: 34px; }
.eyebrow .live { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--yellow); }
.dot.bad { background: var(--red); }
.dot.on { background: var(--text); }
.dot.idle { border: 1.5px solid var(--text-2); width: 9px; height: 9px; }
.dot.off { border: 1.5px dashed var(--text-3); width: 9px; height: 9px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pad { padding: 16px 18px; }
.ttl { font-size: 15px; font-weight: 600; }
.lead { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 112ch; text-wrap: pretty; }
.btn { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); border: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--text); padding: 0 8px; font-weight: 500; }
.btn.ghost svg { color: var(--text-2); }
.btn.line { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line-2); }
.link { color: var(--text-2); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 34px; }
.link:hover { color: var(--text); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg > * { font: inherit; font-size: 14px; color: var(--text-2); background: transparent; border: 0; border-radius: 7px; min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.seg > .on { background: var(--raise); color: var(--text); }
.seg > .dis { color: var(--text-3); text-decoration: line-through; cursor: not-allowed; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field { font: inherit; font-size: 14px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; min-height: 36px; padding: 0 12px; color: var(--text); }
.light .field, .cust-light .field { background: var(--card); }
.field:focus { outline: 2px solid var(--line-2); outline-offset: 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--raise); color: var(--text-2); white-space: nowrap; }
.pill.ok { background: rgba(91, 208, 138, 0.14); color: var(--green-text); font-weight: 700; letter-spacing: 0.07em; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.stat { display: flex; flex-direction: column; gap: 0; }
.stat .n { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.stat .l { font-size: 13px; color: var(--text-2); }
.bar { height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.under-red { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.55; }
.trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.trace li .dot { margin-top: 7px; }
.trace li.dim { color: var(--text-2); }


.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.msg .who { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.msg .who time { color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.msg .body { font-size: 15px; line-height: 1.62; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg .body p { margin: 0; }
.msg .av.bot { background: transparent; border: 1px solid var(--line-2); }
.msg .av.bot svg { width: 16px; height: 16px; }
.meta { color: var(--text-3); font-size: 12.5px; }
.code { background: var(--side); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.light .code, .cust-light .code { background: var(--card-2); }
.code .h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 12px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.code pre { margin: 0; padding: 10px 12px; font: 13px/1.55 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd { font: 13px var(--mono); background: var(--raise); border-radius: 6px; padding: 2px 7px; }
.rcard .h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rcard .row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); text-decoration: none; }
.rcard .row:first-of-type { border-top: 0; }
.composer { border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.composer textarea { display: block; width: 100%; font: inherit; font-size: 15px; background: transparent; color: var(--text); border: 0; resize: none; padding: 14px 16px 6px; }
.composer textarea:focus { outline: none; }
.composer .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px 8px 12px; }
.chip { font: 12.5px var(--mono); color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 7px; min-height: 28px; padding: 0 8px; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.frame canvas { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; border-radius: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }

.split.solo { grid-template-columns: minmax(0, 860px); justify-content: center; }


.graph-wrap { overflow-x: auto; }
.graph { min-width: 900px; display: grid; grid-template-columns: 170px 56px 176px minmax(70px, 1fr) minmax(330px, 1.5fr); align-items: center; padding: 8px 0; }
.node { border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.node.hub { border: 1.5px solid var(--text); }
.node svg { width: 24px; height: 24px; }
.node b { font-size: 15px; }
.hline { height: 1px; background: var(--line-2); }
.tools-list { display: flex; flex-direction: column; gap: 10px; }
.tool { height: 60px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 0 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.tool.on { border: 1.5px solid var(--text); }
.tool .r1 { display: flex; align-items: center; gap: 10px; }
.tool .r1 b { font-size: 15px; font-weight: 600; }
.tool .r2 { color: var(--text-2); font-size: 13.5px; padding-left: 19px; }
.curves { width: 100%; height: 410px; display: block; }
.curves path { fill: none; stroke: var(--line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.curves path.hot { stroke: var(--green); stroke-width: 1.6; }


.list-row { display: grid; grid-template-columns: 34px minmax(160px, 1.1fr) minmax(0, 1.4fr) minmax(150px, auto) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.card > .list-row:first-child, .card > div:first-child > .list-row { border-top: 0; }
.list-row .nm { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.list-row .nm b { font-size: 15px; font-weight: 600; }
.list-row .acts { display: flex; gap: 4px; justify-content: flex-end; }
.av.inv { background: transparent; border: 1.5px dashed var(--line-2); color: var(--text-2); }
@media (max-width: 1000px) { .list-row { grid-template-columns: 34px minmax(0, 1fr); } .list-row > :nth-child(n+3) { grid-column: 2; } .list-row .acts { justify-content: flex-start; } }
.confirm { border: 1px solid rgba(255, 124, 124, 0.45); background: rgba(255, 124, 124, 0.07); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 16px 14px 64px; }


.stats4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats4 > div { padding: 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.stats4 > div:nth-child(-n+2) { border-top: 0; }
.stats4 > div:nth-child(odd) { border-right: 1px solid var(--line); }
.chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; height: 260px; }
.yax { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-3); font-size: 12px; text-align: right; padding-bottom: 22px; }
.plot { position: relative; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 22px; background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 22px); background-repeat: no-repeat; }
.col { flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 2px; position: relative; height: 100%; justify-content: flex-start; }
.col i { display: block; border-radius: 3px; }
.col span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.legend { display: flex; flex-direction: column; gap: 14px; }
.legend .row { display: flex; flex-direction: column; gap: 6px; }
.legend .row .t { display: flex; align-items: center; gap: 8px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.side { min-width: 0; width: 248px; overflow: hidden; }
@media (max-width: 760px) { .crumbs > span, .crumbs .sep { display: none; } }


html, body { min-height: 100%; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.btn.sm { min-height: 30px; font-size: 13px; padding: 0 10px; }
.err { color: var(--red); }
.ok-text { color: var(--green-text); }
.center-msg { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); text-align: center; padding: 24px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 26px; font-size: 13.5px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--text-2); }
.banner.bad { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.sub a { cursor: pointer; }
.thread-wrap { min-height: 40vh; }
.empty-chat { padding: 40px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.empty-chat h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.caret { display: inline-block; width: 7px; height: 15px; background: var(--text-2); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
.msg .body ul, .msg .body ol { margin: 0; padding-left: 1.3em; }
.msg .body code.inl { font: 13px var(--mono); background: var(--raise); border-radius: 5px; padding: 1px 5px; }
.drawer-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 41; display: flex !important; overflow-y: auto; }


.signin-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 70%), var(--bg); }
.sheet { width: 100%; max-width: 980px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.cust-light .sheet { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.12); }
.sheet-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sheet-h h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 13.5px; color: var(--text-2); min-width: 0; max-width: 100%; }
.hpill b { color: var(--text); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-b { display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); gap: 34px; padding: 24px 24px 28px; align-items: stretch; }
@media (max-width: 860px) { .sheet-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 20px 18px 24px; } .stage { padding: 22px 16px 18px; } .pname { font-size: 28px; } }
.sheet-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }


.stage { --glow: rgba(255, 255, 255, 0.06); --dots: rgba(255, 255, 255, 0.055); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 30px 26px 26px; border-radius: 14px; border: 1px solid var(--line); background: var(--side); }
.stage.emp { --glow: rgba(214, 151, 72, 0.24); }
.stage.cus { --glow: rgba(84, 190, 170, 0.2); }
.cust-light .stage { --dots: rgba(20, 20, 30, 0.08); --glow: rgba(84, 190, 170, 0.22); background: #F1F2F3; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); }
.stage-card { position: relative; }
.stage-card::before { content: ""; position: absolute; inset: -44px -40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }
.stage-more { display: flex; flex-direction: column; gap: 16px; }
.stage .health { background: var(--card); }
.cust-light .stage .health { background: #FFFFFF; }

.pcard { position: relative; width: 100%; min-height: 272px; border-radius: 16px; border: 1px solid var(--line-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text); font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 50px rgba(0, 0, 0, 0.5); }
.pcard.emp { background: radial-gradient(140% 120% at 100% 0%, rgba(214, 151, 72, 0.22), transparent 55%), #222124; }
.pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.2), transparent 55%), #212325; }
.cust-light .pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.22), transparent 55%), #FFFFFF; box-shadow: 0 22px 50px rgba(20, 20, 30, 0.14); }


.side-h h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.side-h p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.invite-inline { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.invite-toggle { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 11px; background: transparent; color: var(--text); text-align: left; }
.invite-toggle:hover { background: var(--card-2); }
.invite-toggle > svg { color: #5CC9B3; }
.cust-light .invite-toggle > svg { color: #1F8A75; }
.invite-toggle .t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.invite-toggle .chev { display: inline-flex; color: var(--text-3); transition: transform 0.15s; }
.invite-inline.open .invite-toggle .chev { transform: rotate(90deg); }
.invite-box { display: flex; flex-direction: column; gap: 10px; }
.invite-box p { margin: 0; font-size: 14px; }
.invite-box .field { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.invite-box .btn { min-height: 40px; }
.invite-box .err { margin: 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .invite-toggle .chev { transition: none; } }
.pcard-top { display: flex; align-items: center; gap: 12px; }
.picon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.picon svg { width: 20px; height: 20px; }
.emp .picon { border: 1.5px solid rgba(214, 151, 72, 0.7); color: #E2A660; background: rgba(214, 151, 72, 0.1); }
.cus .picon { border: 1.5px solid rgba(84, 190, 170, 0.7); color: #5CC9B3; background: rgba(84, 190, 170, 0.1); }
.cust-light .cus .picon { color: #1F8A75; }
.cust-light .emp .picon { color: #A86A1E; }
.pcard-top .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pcard-top .who b { font-size: 17px; font-weight: 600; }
.pcard-top .who small { color: var(--text-2); font-size: 13px; }
.ppill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.ppill.ok { border-color: rgba(91, 208, 138, 0.55); color: var(--green-text); background: rgba(91, 208, 138, 0.1); }
.ppill.bad { border-color: rgba(255, 124, 124, 0.55); color: var(--red); background: rgba(255, 124, 124, 0.08); }
.plabel { margin-top: 26px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-3); }
.pname { font: 700 36px/1.15 var(--mono); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 42px; }
.pname.empty { color: var(--text-3); }
.ptag { align-self: flex-start; font: 700 11px/1 var(--mono); letter-spacing: 0.12em; padding: 5px 8px; border-radius: 5px; }
.emp .ptag { color: #E2A660; border: 1px solid rgba(214, 151, 72, 0.55); background: rgba(214, 151, 72, 0.08); }
.cus .ptag { color: #5CC9B3; border: 1px solid rgba(84, 190, 170, 0.55); background: rgba(84, 190, 170, 0.08); }
.cust-light .cus .ptag { color: #1F7A68; }
.cust-light .emp .ptag { color: #8E5916; }
.pfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 18px; }
.pmeta { font: 600 11.5px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring svg { width: 62px; height: 62px; }
.ring .lbl { font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }

.side-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 14px; color: var(--text-2); }
.sess b { color: var(--text); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.sess .bar { height: 6px; }
.health { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card-2); }
.health .h { display: flex; align-items: center; gap: 10px; }
.health .h .lbl { font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }
.sig { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { width: 3px; border-radius: 1px; background: var(--line-2); display: block; }
.sig i.on { background: var(--green); }
.sig-t { font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.sig-t.bad { color: var(--red); }
.strip { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.strip i { flex: 1 1 0; border-radius: 1.5px; background: var(--green); display: block; min-height: 3px; }
.strip i.bad { background: var(--red); }
.strip i.none { background: var(--line); }
.axis { display: flex; justify-content: space-between; font: 11px/1 var(--mono); color: var(--text-3); }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hstats div { display: flex; flex-direction: column; gap: 2px; }
.hstats span { font-size: 12.5px; color: var(--text-3); }
.hstats b { font: 600 14px/1.3 var(--mono); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label > span, .form .lab { font-size: 13px; color: var(--text-2); }
.form .field { min-height: 40px; width: 100%; }
.pw { display: flex; gap: 6px; }
.pw .icon-btn { width: 40px; height: 40px; flex: none; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }
.note { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.note svg { margin-top: 2px; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.actions .btn { min-height: 40px; padding: 0 18px; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rules li { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.rules li.met { color: var(--text); }



.pcard-top .who { flex: 1 1 auto; min-width: 0; }
.pcard-top .who b, .pcard-top .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppill { flex: none; }
.top { flex-wrap: wrap; }
.usage-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.cust-conv-grid { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) {
  .usage-chart-grid, .cust-conv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .signin-page { align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .sheet { border-radius: 14px; }
  .sheet-h, .sheet-f { padding: 14px 16px; }
  .sheet-b { display: flex; flex-direction: column; padding: 16px 14px 22px; gap: 20px; }
  
  .stage { display: contents; }
  .stage::before, .stage-card::before { display: none; }
  .stage-card { order: 1; }
  .side-col { order: 2; }
  .stage-more { order: 3; margin-top: 0; }
  .stage .health { background: var(--card-2); }
  .pcard { min-height: 0; padding: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
  .cust-light .pcard.cus { box-shadow: 0 10px 26px rgba(20, 20, 30, 0.1); }
  .pname { font-size: 26px; min-height: 32px; }
  .pcard-top { align-items: flex-start; }
  .pcard-top .who small { white-space: normal; overflow-wrap: anywhere; }
  .plabel { margin-top: 16px; }
  .pfoot { padding-top: 12px; }
  .ring svg { width: 52px; height: 52px; }
  .hpill { font-size: 12.5px; }
  .side-h h2 { font-size: 20px; }
  .sheet-f { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sheet-f .grow { display: none; }
  .actions .btn { width: 100%; justify-content: center; }
  .stats4 { grid-template-columns: minmax(0, 1fr); }
  .stats4 > div { border-right: 0 !important; border-top: 1px solid var(--line) !important; }
  .stats4 > div:first-child { border-top: 0 !important; }
  .eyebrow label .field { width: 100% !important; }
  .eyebrow label { flex: 1 1 100%; }
  .chart { height: 220px; grid-template-columns: 34px minmax(0, 1fr); }
  .plot { gap: 4px; }
  .msg { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .msg .av { width: 26px; height: 26px; }
}
.pcard-top { width: 100%; }
.composer .foot > button[type="submit"] { margin-left: auto; }
.composer .chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.link.crumb { font-size: 15px; min-height: 0; }


.u-wrap { padding: 22px 26px 40px; }
.u-panel { background: #19191C; border: 1px solid #2B2B30; border-radius: 22px; padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.u-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.u-head h1 { margin: 0 0 6px; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.u-head p { margin: 0; font-size: 16px; color: var(--text-2); max-width: 78ch; text-wrap: pretty; }
.u-seg { margin-left: auto; display: inline-flex; padding: 4px; gap: 4px; border-radius: 13px; background: #202024; border: 1px solid #2B2B30; }
.u-seg button { font: inherit; font-size: 15px; min-height: 38px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.u-seg button.on { background: #2E2E33; color: var(--text); }
.u-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px 40px; align-items: start; }
@media (max-width: 1100px) { .u-grid { grid-template-columns: minmax(0, 1fr); } }
.u-sec h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 500; }
.u-sec .u-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); }
.u-box { background: #1D1D21; border: 1px solid #2B2B30; border-radius: 14px; }
.u-chart { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.u-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.u-chart .say { font-size: 15px; color: var(--text); }
.u-chart svg text { fill: var(--text-3); font: 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wk { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.wk.on { background: #202024; border-color: #2E2E33; }
.wk .pct { font-size: 12.5px; color: var(--text-2); }
.wk .track { width: 100%; max-width: 64px; height: 92px; background: #232327; border-radius: 6px; position: relative; overflow: hidden; }
.wk .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #6E6E75; border-radius: 6px 6px 0 0; }
.wk.on .fill { background: #D9D9DE; }
.wk .over { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #FFFFFF; }
.wk .lbl { font-size: 12.5px; color: var(--text-2); }
.wk.on .lbl { color: var(--text); }
.ubar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 3px; background: transparent; }
.ubar i { display: block; height: 100%; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; color: var(--text-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; }
.legend-row b { color: var(--text); font-weight: 500; }
.legend-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.big { padding: 6px 18px 12px; }
.big .row { padding: 12px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.big .head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.big .head .pct { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.big .tag { white-space: nowrap; flex: none; font-size: 11.5px; color: var(--text-3); background: #26262A; border-radius: 6px; padding: 1px 7px; }
.big .bar { height: 5px; background: #26262A; }
.big .bar i { background: #4C8DF6; }
.big .head > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk .lbl { white-space: nowrap; }

@media (max-width: 640px) { .u-wrap { padding: 12px 12px 28px; } .u-panel { padding: 20px 16px 22px; border-radius: 16px; gap: 20px; } .u-head h1 { font-size: 26px; } .u-head p { font-size: 14.5px; } .u-seg { margin-left: 0; } .weeks { gap: 4px; } .wk { padding: 8px 2px 6px; } .wk .pct, .wk .lbl { font-size: 11px; } }
.u-chart svg text.pt { fill: #EDEDEF; font-size: 13.5px; }
@media (max-width: 640px) {
  .u-chart { padding: 12px 10px 10px; }
  .u-chart svg text { font-size: 16.5px; }
  .u-chart svg text.pt { font-size: 18.5px; }
}



html { text-size-adjust: 100%; color-scheme: dark; }

html.cust-light { color-scheme: light; }
.app { min-height: 100vh; min-height: 100dvh; }
.center-msg { min-height: 60vh; min-height: 60dvh; }
.side { padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.main { padding-right: env(safe-area-inset-right); }
.drawer { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); overscroll-behavior: contain; }
.toast { bottom: calc(22px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }

.side:not(.drawer) { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .mbar { position: sticky; top: 0; z-index: 30; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .main { padding-right: 0; }
  .top, .content, .banner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .u-wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * { flex: none; }
  .composer .chips { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .composer .chips::-webkit-scrollbar { display: none; }
  .composer .chip { flex: none; }
  .list-row .acts-none { display: none; }
  .confirm { margin: 0 12px 12px; }
  
  .invite-form > label, .invite-form > fieldset { flex: 1 1 100%; }
  .invite-form > label > span:first-child, .invite-form > fieldset > span.muted { width: 52px; flex: none; }
  .invite-form > label .field { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .invite-form > .grow { display: none; }
  .invite-form > button { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .field, .composer textarea { font-size: 16px; }
  .field, .form .field, .invite-box .field { min-height: 44px; }
  .icon-btn, .pw .icon-btn { width: 44px; height: 44px; }
  .btn, .btn.sm, .invite-box .btn, .actions .btn { min-height: 44px; }
  .chip { min-height: 44px; padding: 0 12px; }
  .seg > * { min-height: 44px; }
  .u-seg button { min-height: 44px; }
  .item { min-height: 44px; }
  .sub a { padding-top: 12px; padding-bottom: 12px; }
  .link, .link.crumb, .crumbs a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .link-pill { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .composer .foot > button[type="submit"] { min-width: 44px; justify-content: center; }
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; }
}


.composer-dock { position: sticky; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 8px; margin-top: -6px; padding: 22px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 22px); }
.composer-dock .err { margin: 0; }

@media (max-width: 760px) {
  .content.chat-page { flex: 1 1 auto; padding-bottom: 0; }
  .chat-page > .split { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; }
  .chat-page section[aria-label="Conversation"] { flex: 1 1 auto; }
  .chat-page .composer-dock { margin-top: auto; }
  
  .chat-page .visual-empty { display: none !important; }
}


:root { --acc: #B9CCE3; --acc-rgb: 185, 204, 227; --acc-text: #C6D6EA; }
.light, .cust-light { --acc: #3A5573; --acc-rgb: 58, 85, 115; --acc-text: #2F475F; }


.split.solo.chat-col { grid-template-columns: minmax(0, 780px); }
.chat-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chat-sec > .thread { gap: 24px; padding: 10px 0 26px; }


.msg.you, .msg.ans { display: flex; flex-direction: column; min-width: 0; }
.msg.you { align-items: flex-end; gap: 4px; }
.you-b { max-width: min(80%, 580px); padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--raise); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.light .you-b, .cust-light .you-b { background: #E6E8EE; }
.you-b.is-cmd { padding: 8px 12px; background: transparent; border: 1px solid var(--line-2); }
.you-b.is-cmd .cmd { background: transparent; padding: 0; }
.you-t { font-size: 12px; color: var(--text-3); padding-right: 6px; opacity: 0; transition: opacity 0.15s; }
.msg.you:hover .you-t, .msg.you:focus-within .you-t { opacity: 1; }
.you-who { font-size: 12.5px; color: var(--text-2); font-weight: 600; padding-right: 6px; }
.you-who time { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.msg.you .att-list { justify-content: flex-end; margin-top: 2px; }


.msg.ans { gap: 8px; }
.ans-h { display: flex; align-items: center; gap: 9px; min-height: 26px; font-size: 13px; color: var(--text-3); }
.ans-h b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.ans-mk { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--raise); color: var(--text); }
.ans-mk svg { width: 15px; height: 15px; }
.ans-wr { color: var(--green-text); font-size: 12.5px; }
.ans-act { display: flex; align-items: center; gap: 2px; min-width: 0; margin: -4px 0 0 -9px; }
.ans-act button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; }
.ans-act button:hover { background: var(--card); color: var(--text); }
.ans-act .meta { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-act button:first-child + .meta, .ans-act .meta:first-child { margin-left: 9px; }

@media (hover: hover) {
  .msg.ans .ans-act { opacity: 0; transition: opacity 0.15s; }
  .msg.ans:hover .ans-act, .msg.ans:last-child .ans-act, .ans-act:focus-within { opacity: 1; }
}
.msg.ans > .card, .msg.ans > .err { margin: 0; }
.think { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14.5px; }
.think-t { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
@keyframes cx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.think-d { display: inline-flex; gap: 3px; }
.think-d i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); animation: cx-bob 1s ease-in-out infinite; }
.think-d i:nth-child(2) { animation-delay: 0.15s; }
.think-d i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cx-bob { 50% { transform: translateY(-3px); background: var(--text-2); } }


.md { font-size: 15.5px; line-height: 1.68; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.md > * { margin: 0; }
.md > * + * { margin-top: 14px; }
.md > .md-tw, .md > .md-quote, .md > .code, .md > .md-tw + *, .md > .md-quote + *, .md > .code + * { margin-top: 18px; }
.md p { margin: 0; }
.md b { font-weight: 650; }
.md > .md-h { margin: 26px 0 4px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.md > .md-h:first-child { margin-top: 0; }
.md-h1 { font-size: 21px; }
.md-h2 { font-size: 18.5px; }
.md-h3 { font-size: 16.5px; }
.md-h4, .md-h5, .md-h6 { font-size: 15.5px; }
.md-list { margin: 0; padding-left: 24px; }
.md-list > li { margin: 5px 0; padding-left: 2px; }
.md-list > li::marker { color: var(--text-3); }
ol.md-list > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.md-list .md-list { margin: 4px 0 8px; }
ul.md-list { list-style: none; padding-left: 20px; }
ul.md-list > li { position: relative; }
ul.md-list.d0 > li::before, ul.md-list.d1 > li::before { content: ""; position: absolute; left: -14px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
ul.md-list.d2 { border-left: 1px solid var(--line-2); margin-left: -8px; padding-left: 22px; }
ul.md-list.d2 > li::before { content: ""; position: absolute; left: -16px; top: 0.8em; width: 7px; height: 1px; background: var(--line-2); }

.md > ol.md-list { padding-left: 28px; }
.md > ol.md-list > li.md-titled { margin-top: 22px; }
.md > ol.md-list > li.md-titled:first-child { margin-top: 6px; }
.md > ol.md-list > li.md-titled::marker { color: var(--acc-text); font-size: 16px; }
.md > ol.md-list > li.md-titled > .md-t { display: block; font-size: 16.5px; margin-bottom: 2px; }
.md > ol.md-list > li.md-titled > .md-t code.inl { font-size: 14px; }
.md code.inl { font: 0.85em/1 var(--mono); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.md b code.inl, .md .md-h code.inl { color: var(--acc-text); background: rgba(var(--acc-rgb), 0.1); border-color: rgba(var(--acc-rgb), 0.28); }
.md-a { color: var(--acc-text); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), 0.45); text-underline-offset: 3px; }
.md-a:hover { text-decoration-color: currentColor; }
.md > .md-hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.md-quote { margin: 0; padding: 10px 14px; border-left: 3px solid rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.06); border-radius: 0 10px 10px 0; color: var(--text-2); }
.md-quote > * + * { margin-top: 8px; }
.md-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
.md-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; }
.md-table th { font: 600 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 10px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.md-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.md-table code.inl { white-space: nowrap; overflow-wrap: normal; }
.md-table tr:first-child td { border-top: 0; }
.md-table tbody tr:hover td { background: var(--card-2); }
.md .code .h { min-height: 30px; padding-top: 0; padding-bottom: 0; }
.md .code.open pre { min-height: 42px; }
.md-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; border-radius: 1px; background: var(--acc); animation: cx-blink 1s steps(2, jump-none) infinite; }
@keyframes cx-blink { 50% { opacity: 0; } }
.md-pending { height: 40px; border: 1px dashed var(--line-2); border-radius: 12px; }


.composer-dock > .cx-jump { position: absolute; left: 50%; top: -30px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.15s, transform 0.15s; }
.composer-dock > .cx-jump.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.composer-dock:has(> .cx-status) > .cx-jump { top: -66px; }
.cx-status { align-self: center; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }
.light .cx-status, .cust-light .cx-status { box-shadow: 0 6px 22px rgba(20, 24, 40, 0.1); }
.cx-status .faint { margin-left: -4px; }
.cx-status kbd, .cx-cmd kbd { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }
.cx-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(91, 208, 138, 0.5); animation: cx-pulse 1.4s ease-out infinite; }
@keyframes cx-pulse { 70% { box-shadow: 0 0 0 7px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }
.cx-conn { margin: 0; align-self: center; font-size: 12.5px; color: var(--yellow); }
.composer.cx { position: relative; border-radius: 26px; border-color: var(--line-2); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16); transition: border-color 0.15s, box-shadow 0.15s; }
.light .composer.cx, .cust-light .composer.cx { box-shadow: 0 6px 22px rgba(20, 24, 40, 0.07); }
.composer.cx:focus-within { border-color: rgba(var(--acc-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.12), 0 6px 22px rgba(0, 0, 0, 0.16); }
.composer.cx textarea { min-height: 54px; max-height: 40vh; font-size: 15.5px; line-height: 1.5; padding: 15px 18px 4px; overflow-y: auto; }
.composer.cx .foot { gap: 4px; padding: 4px 8px 8px; flex-wrap: nowrap; }
.cx-cmd { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 32px; padding: 0 11px 0 7px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; }
.cx-cmd:hover, .cx-cmd[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card-2); }
.cx-send { width: 38px; height: 38px; flex: none; display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); transition: background 0.15s, transform 0.1s; }
.cx-send:active { transform: scale(0.94); }
.cx-send:disabled { background: var(--raise); color: var(--text-3); cursor: default; }
.cx-send:focus-visible, .cx-cmd:focus-visible, .ans-act button:focus-visible, .hp:focus-visible, .cx-jump:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.7); outline-offset: 2px; }
.cx-pal { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38); }
.light .cx-pal, .cust-light .cx-pal { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.cx-pal-h { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.cx-pal-h .faint { font-weight: 400; }
.cx-pi { display: grid; grid-template-columns: 18px 82px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.cx-pi svg { color: var(--text-2); }
.cx-pi.on, .cx-pi:hover { background: var(--raise); }
.cx-pc { font: 13px var(--mono); }
.cx-pd { color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-none { margin: 4px 10px 8px; font-size: 13px; }

.composer-dock > .em-plain { justify-content: center; font: 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
.em-plain .em-pct { color: var(--text-2); }


.hp-row { display: inline-flex; align-items: center; gap: 6px; }
.pop-w { position: relative; display: inline-flex; }
.hp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; white-space: nowrap; }
.hp:hover, .hp[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card); }
.hp-more { width: 30px; padding: 0; }
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42); }
.light .pop, .cust-light .pop { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.pop-about { width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 640px); overflow: auto; padding: 8px; }
.pop-stack { display: flex; flex-direction: column; gap: 8px; }
.pop-menu { width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pop-menu button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.pop-menu button svg { color: var(--text-2); }
.pop-menu button:hover { background: var(--raise); }
.pop-menu .danger, .pop-menu .danger svg { color: var(--red); }
.hp-rename { display: flex; gap: 6px; }
.hp-rename .field { width: 280px; max-width: 50vw; }

@media (prefers-reduced-motion: reduce) {
  .md-caret, .cx-pulse, .think-t, .think-d i { animation: none; }
  .think-t { color: var(--text-2); }
  .composer-dock > .cx-jump { transition: none; }
}
@media (pointer: coarse) { .cx-esc { display: none; } }
@media (max-width: 760px) {
  .chat-sec > .thread { gap: 20px; padding-top: 6px; }
  .you-b { max-width: 88%; font-size: 16px; }
  .you-t { display: none; }
  .md { font-size: 16px; }
  .md-table { font-size: 13.5px; }
  .md-table th, .md-table td { padding: 8px 12px; }
  .composer.cx textarea { min-height: 52px; padding: 14px 16px 2px; }
  .cx-send { width: 44px; height: 44px; }
  .cx-cmd { height: 44px; }
  .cx-pi { grid-template-columns: 18px minmax(0, 1fr); min-height: 52px; padding: 6px 10px; row-gap: 0; }
  .cx-pi svg { grid-row: 1 / span 2; }
  .cx-pi .cx-pc { grid-column: 2; grid-row: 1; }
  .cx-pi .cx-pd { grid-column: 2; font-size: 12.5px; }
  .cx-pal-h .faint { display: none; }
  .cx-status { min-height: 30px; font-size: 12.5px; }
  .pop.pop-about { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
  .hp-t { display: none; }
  .chat-top { flex-wrap: nowrap; }
  .chat-top .crumbs { min-width: 0; flex-wrap: nowrap; }
  .chat-top .crumbs b { display: none; }
  .hp-rename .field { width: auto; flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .composer.cx textarea { font-size: 16px; }
  .ans-act button { min-height: 44px; }
  .hp { min-height: 40px; min-width: 40px; }
  .hp-more { width: 40px; }
}


.ans-work { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 -2px; min-width: 0; }
.ans-work-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; text-align: left; }
.ans-work-h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-work-h:hover { background: var(--card); color: var(--text-2); }
.ans-work-h svg { width: 14px; height: 14px; flex: none; transition: transform 0.15s; }
.ans-work.open .ans-work-h svg { transform: rotate(90deg); }
.ans-work.live .ans-work-h span { color: var(--text-2); }
.ans-work-b { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 14px; margin-left: 1px; border-left: 2px solid var(--line-2); }
.ans-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ans-steps li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ans-steps li span { min-width: 0; overflow-wrap: anywhere; }
.ans-steps svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ans-steps li.ok svg { color: var(--green-text); }
.ans-steps li.bad svg { color: var(--text-3); }
.ans-steps li.run { color: var(--text); }
.ans-steps li.run span { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
.ans-thought { margin: 0; max-height: 280px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text-3); overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .ans-steps li.run span { animation: none; color: var(--text); background: none; } }

@media (pointer: coarse) {
  .think-t, .ans-steps li.run span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); animation: cx-breathe 1.6s ease-in-out infinite; }
  .cx-pulse { box-shadow: none; animation: cx-breathe 1.4s ease-in-out infinite; }
}
@keyframes cx-breathe { 50% { opacity: 0.5; } }
@media (pointer: coarse) { .ans-work-h { min-height: 44px; } }


.mem-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mem-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.mem-list li span { min-width: 0; overflow-wrap: anywhere; }
.mem-list time { display: block; font-size: 12px; margin-top: 2px; }
.mem-list button { flex: none; }
@media (pointer: coarse) { .mem-list button { min-width: 44px; min-height: 44px; } }
.mem-empty { margin: 6px 0 0; font-size: 13.5px; }


.item.more .t { color: var(--text-2); }
.item.more.on .t { color: var(--text); }
.item .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 8px; min-width: 24px; text-align: center; flex: none; }
.item.on .count { background: var(--card-2); }
.item .reply-dot + .count { margin-left: 0; }
button.item { font: inherit; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
.newc.off { opacity: 0.5; cursor: not-allowed; }
.full-note { margin: -2px 4px 6px; padding: 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

html.modal-open { overflow: hidden; }
.cl-dlg { padding: 0; margin: auto; width: min(580px, calc(100vw - 32px)); max-width: none; max-height: min(680px, calc(100vh - 64px)); max-height: min(680px, calc(100dvh - 64px));
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.cl-dlg[open] { display: flex; flex-direction: column; }
.cl-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .cl-dlg::backdrop, .cust-light .cl-dlg::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .cl-dlg, .cust-light .cl-dlg { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.cl-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px 20px; }
.cl-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cl-s { padding: 0 18px 10px 20px; }
.cl-search { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text-2); }
.light .cl-search, .cust-light .cl-search { background: var(--card); }
.cl-search:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.cl-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; outline: 0; padding: 8px 0; -webkit-appearance: none; appearance: none; }
.cl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 10px; }
.cl-b ul { list-style: none; margin: 0; padding: 0; }
.cl-note { margin: 0; padding: 0 12px 4px; font-size: 13px; color: var(--text-3); }
.cl-grp { margin: 14px 0 4px; padding: 0 12px; font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.cl-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.cl-row:hover { background: var(--card-2); }
.cl-row.on { background: var(--raise); }
.cl-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .n { flex: none; font-size: 12.5px; color: var(--text-2); }
.cl-row .reply-dot { margin-left: 0; }
.cl-f { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px 20px; border-top: 1px solid var(--line); }
.cl-f .btn:disabled { opacity: 0.5; }
.cl-meter { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); }
.cl-meter > span:last-child { flex: 1 1 auto; min-width: 0; }
.cl-meter b { color: var(--text); font-weight: 600; }
.cl-bar { flex: 0 0 120px; height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.cl-meter.full .cl-bar i { background: var(--yellow); }
.cl-limit { margin-top: 32px; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cl-limit h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.cl-limit p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.cl-limit .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }


.cl-kbd { font: 600 11.5px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; height: 20px; display: inline-flex; align-items: center; flex: none; }
.cl-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { font: inherit; font-size: 13px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cl-chip.on { background: var(--raise); border-color: transparent; color: var(--text); }
.cl-chip .reply-dot { margin: 0; width: 7px; height: 7px; box-shadow: none; }

.cl-tools select.field.cl-sort { min-height: 30px; font-size: 13px; padding-left: 10px; flex: none; }
.cl-all { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 12px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.cl-all input, .cl-row.pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--btn-bg); flex: none; }
.cl-row.pick { cursor: pointer; }
.cl-row.pick.on { background: var(--card-2); }
.cl-li { position: relative; }
.cl-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding-left: 8px; background: var(--card-2); border-radius: 8px; }
.cl-acts .icon-btn { width: 30px; height: 30px; border-color: transparent; }
.cl-acts .icon-btn:hover { background: var(--raise); }
@media (hover: hover) and (pointer: fine) {
  .cl-li.edit:hover .cl-acts, .cl-li.edit:focus-within .cl-acts { display: flex; }
  .cl-li.edit:hover .cl-row, .cl-li.edit:focus-within .cl-row:not(.on) { background: var(--card-2); }
}
@media (hover: none), (pointer: coarse) { .cl-kbd { display: none; } }
.cl-rename { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.cl-rename .field { flex: 1 1 auto; min-width: 0; min-height: 34px; }
.cl-ask { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.cl-confirm .cl-ask { color: var(--text); }
.btn.danger-fill { background: var(--red); color: #1F0909; }
.light .btn.danger-fill, .cust-light .btn.danger-fill { background: #C93636; color: #fff; }
.btn.danger:disabled, .btn.danger-fill:disabled { opacity: 0.5; cursor: not-allowed; }


@media (max-height: 500px) {
  .cl-dlg { width: 100%; max-height: none; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 760px), (max-height: 500px), (pointer: coarse) {
  .cl-f .btn { justify-content: center; }
  .cl-chip { min-height: 44px; padding: 0 13px; }
  .cl-tools select.field.cl-sort { min-height: 44px; font-size: 16px; }
  .cl-search { min-height: 44px; }
  .cl-search input { font-size: 16px; min-height: 42px; }
  .cl-row { min-height: 46px; }
  .cl-all { min-height: 44px; }
  .cl-all input, .cl-row.pick input { width: 20px; height: 20px; }
  .cl-rename { flex-wrap: wrap; }
  .cl-rename .field { flex-basis: 100%; min-height: 44px; }
  .cl-f:has(.cl-ask) { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cl-confirm .cl-ask { flex-basis: 100%; }
  .cl-f:has(.cl-ask) .btn { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .cl-dlg { width: 100%; max-height: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .cl-h { padding: 14px 14px 10px 18px; }
  .cl-s { padding: 0 14px 8px 18px; }
  .cl-b { padding: 2px 6px 10px; }
  .cl-f { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); }
  .cl-bar { flex-basis: 72px; }
  .cl-limit { margin-top: 16px; padding: 18px; }
  .cl-limit .acts .btn { flex: 1 1 auto; justify-content: center; }
}


.grp-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; font: inherit; font-size: 12.5px; color: var(--text-3); text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.grp-fold:hover, .grp-fold:active { color: var(--text-2); }
.grp-fold .t { flex: 1 1 auto; min-width: 0; }
.grp-fold .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.grp-fold svg { flex: none; transition: transform 0.15s ease; }
.grp-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .grp-fold svg { transition: none; } }
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) { .grp-fold { min-height: 44px; margin-top: 2px; margin-bottom: 0; } }


.door {
  --ice: #B9CCE3; --ice-rgb: 185, 204, 227; --ice-text: #C6D6EA; --ice-hover: #CBDAEC; --on-ice: #0D1420;
  --d-glow: 0.3; --d-spot: rgba(185, 204, 227, 0.11); --d-dots: rgba(255, 255, 255, 0.045); --d-field: var(--side);
  --d-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(185, 204, 227, 0.19), transparent 55%), #222225;
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
.cust-light .door {
  --ice: #3A5573; --ice-rgb: 58, 85, 115; --ice-text: #2F475F; --ice-hover: #2F475F; --on-ice: #FFFFFF;
  --d-glow: 0.22; --d-spot: rgba(58, 85, 115, 0.1); --d-dots: rgba(0, 0, 0, 0.05); --d-field: #FFFFFF;
  --d-shadow: 0 20px 50px rgba(20, 20, 30, 0.08);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(58, 85, 115, 0.13), transparent 55%), #FFFFFF;
}

.door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; background: radial-gradient(640px 360px at 50% -60px, var(--d-spot), transparent 70%); }
.door::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; pointer-events: none; background-image: radial-gradient(var(--d-dots) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); }
.door > * { position: relative; z-index: 1; }

.d-reload { min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.1); color: var(--ice-text); font: inherit; font-size: 12.5px; font-weight: 600; }
.door h1 { margin: 24px 0 6px; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.d-sub { margin: 0 0 26px; max-width: 34ch; font-size: 15px; color: var(--text-2); }


.d-panel { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; text-align: left; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--d-shadow); }
.d-label { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.d-big { position: relative; width: 100%; min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500; transition: background 0.12s, border-color 0.12s, transform 0.06s; }
.d-big:hover { border-color: var(--text-3); }
.d-big:active { transform: translateY(1px); }
.d-big.primary { background: var(--ice); border-color: transparent; color: var(--on-ice); box-shadow: 0 4px 14px rgba(var(--ice-rgb), var(--d-glow)), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.d-big.primary:hover { background: var(--ice-hover); }
.d-big:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.d-big:focus-visible, .d-back:focus-visible, .d-tlink:focus-visible, .d-eye:focus-visible, .d-reload:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-k { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-3); font: 500 11px/1 var(--mono); }
.d-big.primary .d-k { border-color: color-mix(in srgb, var(--on-ice) 30%, transparent); background: transparent; color: var(--on-ice); opacity: 0.7; }
.d-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--raise); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; font-weight: 600; }
.d-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-who small { display: block; font-size: 12px; line-height: 1.2; color: var(--text-3); }


.d-fld { display: flex; flex-direction: column; gap: 6px; }
.d-fld label { font-size: 13px; color: var(--text-2); }
.d-labrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-field { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); color: var(--text); font: inherit; font-size: 15px; transition: border-color 0.12s, box-shadow 0.12s; }
.d-field::placeholder { color: var(--text-3); }
.d-field:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(var(--ice-rgb), 0.25); }
.d-field:-webkit-autofill, .d-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--d-field) inset; transition: background-color 9999s; }
.d-fld.bad .d-field { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.d-pw { position: relative; }
.d-pw .d-field { padding-right: 46px; }
.d-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); }
.d-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.d-cb { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.d-cb input { width: 16px; height: 16px; margin: 0; accent-color: var(--ice); }
.d-tlink { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink:hover { color: var(--text); }
.d-back { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-back:hover { color: var(--text); }
.d-back svg.i { width: 14px; height: 14px; }
.d-err { margin: 0; text-align: left; font-size: 13.5px; color: var(--red); }
.d-tip { margin: 0; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; color: var(--text-2); }


.d-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.d-meter i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background 0.2s; }
.d-meter[data-s="1"] i:nth-child(-n + 1) { background: var(--red); }
.d-meter[data-s="2"] i:nth-child(-n + 2) { background: var(--yellow); }
.d-meter[data-s="3"] i:nth-child(-n + 3) { background: var(--green); }
.d-meter[data-s="4"] i { background: var(--green); }
.d-mrow { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12.5px; color: var(--text-3); }
.d-mrow b { font-weight: 500; color: var(--text-2); }
.d-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.d-checks li { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.d-checks li.met { color: var(--text); }
.d-c { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); }
.d-c svg.i { width: 10px; height: 10px; stroke-width: 2.4; opacity: 0; }
.d-checks li.met .d-c { background: var(--green); border-color: var(--green); color: #fff; }
.d-checks li.met .d-c svg.i { opacity: 1; }


.door.compact::after { display: none; }
.door.compact::before { height: 520px; background: radial-gradient(560px 300px at 50% -80px, var(--d-spot), transparent 70%); }
.d-chip { padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.08); color: var(--ice-text); font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.door h1.d-h-sm { margin: 18px 0 4px; font-size: 22px; }
.d-mono { max-width: none; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.02em; margin-bottom: 22px; }
.d-links { margin-top: 8px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 22px; }
.d-tlink2 { min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink2:hover, .d-tlink2[aria-expanded="true"] { color: var(--text); }
.d-tlink2:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-disc { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.d-disc-row { display: flex; gap: 8px; }
.d-disc-row .d-field { flex: 1; min-width: 0; }
.d-disc-row .d-big { width: auto; flex: none; }


.d-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.d-fld label em { font-style: normal; color: var(--text-3); }
.d-field.mono { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.01em; }
textarea.d-field { display: block; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.d-hint { margin: 0; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.d-hint-row { margin-top: -4px; }
.d-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }


.d-acct { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-field); }
.d-acct .d-who { font-size: 14.5px; font-weight: 500; }


.d-welcome { width: 100%; margin: 0 0 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.d-welcome .d-label { margin-bottom: 7px; }
.d-welcome p:last-child { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-p { margin: 0; text-align: left; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.d-p b { color: var(--text); font-weight: 500; }
.d-code { display: block; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); font: 12.5px/1.45 var(--mono); overflow-wrap: anywhere; color: var(--text); user-select: all; }
.d-btnrow { display: flex; gap: 8px; }
.d-btnrow .d-big { flex: 1; min-width: 0; padding: 0 12px; }
a.d-big { text-decoration: none; }
.d-big.ghost { min-height: 38px; background: transparent; border-color: transparent; color: var(--text-2); }
.d-big.ghost:hover { color: var(--text); border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.d-small { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.d-facts { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.d-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; min-width: 0; }
.d-facts > div + div { border-top: 1px solid var(--line); }
.d-facts dt { color: var(--text-3); }
.d-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.d-quote { width: 100%; margin: 0; padding: 12px 14px; text-align: left; border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0; background: var(--card-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-err-top { width: 100%; margin-bottom: 12px; }
.d-big:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }


@media (max-width: 420px) { .d-mono { white-space: nowrap; font-size: min(13.5px, 3.6vw); letter-spacing: 0; } }
@media (max-width: 360px) { .d-big { font-size: 13.5px; padding: 0 10px; gap: 6px; } .d-panel { padding: 12px; } }
@media (max-width: 640px) {
  .d-row { grid-template-columns: minmax(0, 1fr); }
  .door h1 { margin-top: 18px; font-size: 22px; }
  .d-sub { margin-bottom: 20px; }
  .d-panel { padding: 14px; }
  .d-k { display: none; }
  
  .d-field, .d-field.mono { font-size: 16px; min-height: 46px; }
  .d-tlink { min-height: 32px; }
  .d-tlink, .d-tlink2 { position: relative; }
  .d-tlink::after, .d-tlink2::after { content: ""; position: absolute; inset: -8px -6px; }
  .d-eye { width: 44px; height: 44px; right: 1px; }
  .d-cb { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .d-big, .d-field, .d-meter i { transition: none; } }


.att-pending, .att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.att-pending { padding: 10px 10px 0; }
.att-list { margin-top: 8px; }
.att-chip { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; width: 260px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 6px 4px 6px 8px; }
.att-chip.gone { opacity: 0.6; }
.att-chip.gone .att-name { text-decoration: line-through; }
.att-chip.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.att-ext { flex: none; width: 38px; height: 38px; border-radius: 7px; background: var(--raise); color: var(--text-2); font: 600 10.5px var(--mono); display: grid; place-items: center; letter-spacing: 0.02em; overflow: hidden; }
.att-mini { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--raise); }
.att-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip.bad .att-sub { color: var(--red); white-space: normal; }
.att-prog { height: 3px; border-radius: 99px; background: var(--raise); overflow: hidden; margin-top: 3px; }
.att-prog i { display: block; height: 100%; background: var(--peri); transition: width 0.2s; }
.att-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; }
.att-x:hover { background: var(--raise); color: var(--text); }
.att-pic button { display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card-2); cursor: zoom-in; }
.att-pic img { display: block; max-width: min(260px, 70vw); max-height: 200px; object-fit: cover; }
.att-wait { font-size: 12.5px; }
.att-btn { flex: none; }
.composer .foot .att-btn { margin-left: 0; border: 0; border-radius: 50%; }
.composer .foot .att-btn:hover { background: var(--card-2); }
.att-drop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 2px dashed var(--peri); pointer-events: none; }
.att-drop span { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 18px; }
.att-dialog { padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--text); max-width: min(96vw, 1100px); max-height: 92vh; width: max-content; overflow: hidden; }
.att-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.att-dialog-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.att-dialog-bar .att-name { font-weight: 600; }
.att-dialog img { display: block; max-width: min(96vw, 1100px); max-height: calc(92vh - 60px); margin: 0 auto; object-fit: contain; }
.m-files { margin: 8px 0 0; font-size: 13px; }
.m-reply .att-pending { padding: 0 0 8px; }

@media (max-width: 760px) {
  .att-chip { width: 100%; }
  .att-pic img { max-width: 70vw; max-height: 180px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .att-x { width: 44px; height: 44px; }
  .att-pic button { min-height: 44px; min-width: 44px; }
}


.top.fl-top { width: 100%; max-width: 1040px; margin-inline: auto; }
.content.fl-page { width: 100%; max-width: 1040px; margin-inline: auto; gap: 16px; }
.fl-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.fl-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.fl-hero p { margin: 6px 0 0; max-width: 64ch; line-height: 1.55; }
.fl-meter { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: 12.5px; color: var(--text-2); }
.fl-meter b { color: var(--text); font-weight: 600; }
.fl-meter .pj-bar i { background: var(--peri); }
.fl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-search { position: relative; flex: 1 1 240px; min-width: 0; }
.fl-search .field { width: 100%; padding-left: 34px; }
.fl-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.fl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--card-2); }
.fl-seg button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.fl-seg button:hover { color: var(--text); }
.fl-seg button.on { background: var(--raise); color: var(--text); }
.fl-seg button i { font-style: normal; color: var(--text-3); margin-left: 5px; font-size: 12px; }
.fl-empty { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.fl-empty p { margin: 0; }

.fl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.fl-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; min-width: 0; }
.fl-card:hover { border-color: var(--line-2); }
.fl-open { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fl-open:focus-visible { outline: 2px solid var(--peri); outline-offset: -2px; border-radius: inherit; }
.fl-prev { height: 128px; background: var(--card-2); border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.fl-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-big { font: 600 15px var(--mono); padding: 10px 12px; border-radius: 10px; background: var(--raise); color: var(--text-2); letter-spacing: 0.04em; position: relative; }
.fl-big.t-pdf { color: #FF8B6B; }
.fl-big.t-sheet { color: var(--green); }
.fl-big.t-text, .fl-big.t-doc { color: var(--peri); }
.fl-lines { position: absolute; inset: 14px 16px auto; display: flex; flex-direction: column; gap: 6px; opacity: 0.55; }
.fl-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); }
.fl-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 3px 7px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--peri); border: 1px solid var(--line); }
.fl-cb { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 2px; min-width: 0; }
.fl-cb b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cb .att-sub { font-size: 12px; }
.fl-foot { display: flex; align-items: center; gap: 4px; padding: 2px 6px 6px 12px; min-width: 0; }
.fl-conv { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); text-decoration: none; min-height: 32px; }
.fl-conv:hover { color: var(--text); }
.fl-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-conv .i { flex: none; color: var(--text-3); }
.fl-ib { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.fl-ib:hover { background: var(--raise); color: var(--red); }

@media (max-width: 760px) {
  .fl-hero { align-items: stretch; }
  .fl-meter { min-width: 0; width: 100%; }
  .fl-seg { width: 100%; }
  .fl-seg button { flex: 1; }
  .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fl-prev { height: 96px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .fl-seg button { min-height: 44px; }
  .fl-conv { min-height: 44px; }
  .fl-ib { width: 44px; height: 44px; }
  .fl-search .field { font-size: 16px; }
}



.plan { margin: 2px 0 12px; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 560px; }
.plan-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.plan-h .faint { font-weight: 400; font-variant-numeric: tabular-nums; }
.plan ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.plan-i { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; padding: 4px 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.plan-b { width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--line-2); border-radius: 3px; display: grid; place-items: center; }
.plan-b svg { width: 11px; height: 11px; stroke-width: 2; }
.plan-i.done .plan-b { border-color: rgba(var(--acc-rgb), 0.7); background: rgba(var(--acc-rgb), 0.16); color: var(--acc); }
.plan-i.done .plan-t { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.plan-i.doing .plan-b { border-color: rgba(var(--acc-rgb), 0.7); }
.plan-i.doing .plan-b::after { content: ""; width: 6px; height: 6px; background: var(--acc); }
.plan.live .plan-i.doing .plan-b::after { animation: plan-on 0.86s steps(2, jump-none) infinite; }
@keyframes plan-on { from { opacity: 1; } to { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .plan.live .plan-i.doing .plan-b::after { animation: none; } }


.ans-act .ans-forge { color: var(--text-2); }
.ans-act .ans-forge canvas.pg { margin: 0 1px; }
@media (max-width: 400px) {
  .ans-act { flex-wrap: wrap; }
}


.rpt-bar { display: flex; flex-direction: column; gap: 6px; }
.rpt { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; }
.rpt > svg { color: var(--acc); }
.rpt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-t b { font-weight: 600; }
.rpt-q { color: var(--text-2); }
.rpt-n { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-stop { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; }
.rpt-stop:hover { background: var(--card-2); }
.you-rep { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-bottom: 4px; font-size: 12px; color: var(--text-3); }
.you-rep svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .rpt { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .rpt-n { display: none; }
}
@media (pointer: coarse) { .rpt-stop { min-height: 44px; } }


.think-live { margin: 2px 0 10px; max-width: 640px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 12.5px; line-height: 1.45; color: var(--text-3); overflow-wrap: anywhere; }


html.landing .door.px > .px-field, html.landing .door.px > .px-c, html.landing .door.px > .d-fine { opacity: 0; transition: opacity 0.18s ease-in; }
html.landing .door.px > .px-main { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.18s ease-in, transform 0.18s ease-in; }
html.landing .app { animation: hm-land 0.32s ease-out both; }
@keyframes hm-land {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.landing .door.px > * { transition: none; }
  html.landing .app { animation: none; }
}


.content.hm { flex: 1 1 auto; padding-top: 0; padding-bottom: 16px; }
.hm-wrap { flex: 1 1 auto; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding: 44px 0 0; }
.hm-end { display: contents; }
.hm-hi h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hm-hi p { margin: 6px 0 0; color: var(--text-2); }
.hm .composer-dock { margin-top: -14px; }
.hm-end > :first-child { margin-top: auto; }

@media (max-height: 500px) {
  .hm .composer-dock { position: static; }
}
.hm-lab { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hm-lab svg { color: var(--text-3); }
.hm-more { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.hm-more:hover { color: var(--text); }
.hm-list { padding: 4px; display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.hm-row:hover { background: var(--card-2); }
.hm-row > svg { color: var(--text-3); flex: none; }
.hm-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row .n { flex: none; font-size: 12.5px; color: var(--text-3); }
.hm-row .n.on { font-size: 13px; font-weight: 600; color: var(--text-2); }
.hm-row .reply-dot { margin-left: 0; }
.hm-new { flex: none; font-size: 12px; font-weight: 600; color: var(--green-text); }
.hm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; color: var(--text); text-decoration: none; }
.hm-card:hover { background: var(--card-2); }
.hm-card .hm-lab { margin: 0 0 4px; }
.hm-card b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-card span { font-size: 13px; color: var(--text-3); }
.hm-row:focus-visible, .hm-card:focus-visible, .hm-more:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }

@media (max-width: 760px) {
  
  .top:has(+ .content.hm) { display: none; }
  
  .content.hm { padding-bottom: 0; }
  .hm-wrap { gap: 22px; padding: 22px 0 0; }
  .hm-hi h1 { font-size: 25px; }
  .hm-cards { grid-template-columns: minmax(0, 1fr); }
}


.top.lo-top { width: 100%; max-width: 1180px; margin-inline: auto; }
.content.lo-page { width: 100%; max-width: 1180px; margin-inline: auto; gap: 14px; flex: 1 1 auto; min-height: 0; padding-bottom: 20px; }
.lo-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.lo-hero p { margin: 4px 0 0; max-width: 80ch; line-height: 1.55; }
.lo-state { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.lo-state p { margin: 0; }
.lo-grid2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; flex: 1 1 auto; min-height: 0; height: min(760px, calc(100dvh - 170px)); }


.lo-room { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.lo-roomhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; min-height: 44px; padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.lo-live { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; }
.lo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.lo-live i.on { background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.18); }
.lo-erase { display: inline-flex; align-items: center; gap: 6px; }
.lo-herebtn { display: none; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.lo-herebtn:hover, .lo-herebtn[aria-expanded="true"] { background: var(--card-2); }
.lo-herebtn .lo-chev { width: 14px; height: 14px; transition: transform 0.15s; }
.lo-herebtn[aria-expanded="true"] .lo-chev { transform: rotate(180deg); }
.lo-stack { display: inline-flex; }
.lo-stack:empty { display: none; }
.lo-stack .lo-av { border: 2px solid var(--card); margin-left: -7px; }
.lo-stack .lo-av:first-child { margin-left: 0; }
.lo-feedwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lo-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 10px; display: flex; flex-direction: column; scrollbar-width: thin; }
.lo-room.has-bot .lo-feed { padding-bottom: 40px; } 
.lo-feed:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.lo-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-3); text-align: center; max-width: 44ch; }
.lo-empty p { margin: 0; line-height: 1.5; }
.lo-day { margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-3); }
.lo-day::before, .lo-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }

.lo-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; }
.lo-msg.same { margin-top: 3px; }
.lo-msg.mine { grid-template-columns: minmax(0, 1fr); }
.lo-b { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lo-msg.mine .lo-b { align-items: flex-end; }
.lo-who { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin: 0 4px 3px; }
.lo-who b { font-weight: 600; color: var(--text); }
.lo-who time { font-size: 11.5px; color: var(--text-3); }
.lo-line { display: flex; align-items: center; gap: 4px; max-width: min(78%, 620px); min-width: 0; }
.lo-msg.mine .lo-line { flex-direction: row-reverse; }
.lo-bub { margin: 0; padding: 8px 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.lo-msg:not(.mine).same .lo-bub { border-top-left-radius: 6px; }
.lo-msg:not(.mine):not(.last) .lo-bub { border-bottom-left-radius: 6px; }
.lo-msg.mine .lo-bub { background: color-mix(in srgb, var(--green) 16%, var(--card-2)); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.lo-msg.mine.same .lo-bub { border-top-right-radius: 6px; }
.lo-msg.mine:not(.last) .lo-bub { border-bottom-right-radius: 6px; }
.light .lo-bub, .cust-light .lo-bub { background: var(--card-2); }
.light .lo-msg.mine .lo-bub, .cust-light .lo-msg.mine .lo-bub { background: color-mix(in srgb, var(--green) 14%, #fff); }
.lo-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; letter-spacing: 0.02em; color: #fff; background: hsl(var(--h) 42% 38%); }
.lo-av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.light .lo-av, .cust-light .lo-av { background: hsl(var(--h) 48% 46%); }
.lo-av-gap { width: 32px; }
.lo-acts { flex: none; display: inline-flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.lo-msg:hover .lo-acts, .lo-acts:focus-within { opacity: 1; }
.lo-act { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; font: inherit; }
.lo-act:hover { background: var(--raise); color: var(--text); }
.lo-act.txt { padding: 0 9px; font-size: 12.5px; gap: 6px; display: inline-flex; align-items: center; }
.lo-act:disabled { opacity: 0.5; cursor: default; }
.lo-gone { margin: 6px 0 0 42px; font-size: 13px; font-style: italic; color: var(--text-3); }
.lo-gone.mine { margin-left: 0; text-align: right; }
.lo-jump { z-index: 3; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); cursor: pointer; }
.lo-jump:hover { background: var(--raise); }

.lo-typing { flex: none; margin: 0; min-height: 20px; padding: 0 18px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.lo-dots { display: inline-flex; gap: 3px; }
.lo-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: lo-dot 1.2s infinite ease-in-out; }
.lo-dots i:nth-child(2) { animation-delay: 0.15s; }
.lo-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lo-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lo-dots i { animation: none; opacity: 0.6; } }

.lo-dock { flex: none; position: relative; margin: 4px 12px 0; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card-2); }
.lo-dock:focus-within { border-color: color-mix(in srgb, var(--text) 35%, var(--line-2)); }
.light .lo-dock, .cust-light .lo-dock { background: #fff; }
.lo-box { display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 14px; }
.lo-box.off { opacity: 0.7; }
.lo-box textarea { flex: 1 1 auto; min-width: 0; min-height: 34px; max-height: 140px; resize: none; field-sizing: content; padding: 7px 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.45; }
.lo-box textarea::placeholder { color: var(--text-3); }
.lo-left { flex: none; align-self: center; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lo-left.low { color: var(--red); }
.lo-send { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.lo-send:disabled { opacity: 0.35; cursor: default; }
.lo-replying { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px 0 14px; font-size: 12.5px; color: var(--text-2); }
.lo-replying > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-replying b { font-weight: 600; color: var(--text); }
.lo-note { flex: none; margin: 0; padding: 6px 18px 12px; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.lo-note.err { color: var(--red); }


.lo-rail { min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 10px; }
.lo-rail::-webkit-scrollbar { display: none; }
.lo-railtop { display: none; }
.lo-railbox { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.lo-railh { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.lo-me { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.lo-me div { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.lo-me b { font-size: 14px; font-weight: 600; }
.lo-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-people li { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 2px 4px; border-radius: 8px; font-size: 13.5px; min-width: 0; }
.lo-people li:hover { background: var(--card-2); }
.lo-people .lo-pn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-pres { position: relative; display: inline-flex; flex: none; }
.lo-pres i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--card); }
.lo-people .lo-unnamed { font-size: 12.5px; }
.lo-people .lo-unnamed svg { margin: 0 4px; flex: none; }
.lo-alone { margin: 2px 4px 0; font-size: 12.5px; }
.lo-muted { margin: 10px 4px 0; font-size: 12.5px; }
.lo-muted a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.lo-rules ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.65; color: var(--text-2); }
.lo-removed { margin: 10px 4px 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.lo-aiswitch { margin-top: 10px; width: 100%; justify-content: center; }

.lo-bot { position: absolute; inset: 0; pointer-events: none; z-index: 2; image-rendering: pixelated; }
.light .lo-bot, .cust-light .lo-bot { filter: drop-shadow(0 0 0.5px rgba(20, 24, 40, 0.55)) drop-shadow(0 1px 1px rgba(20, 24, 40, 0.18)); }

.lo-av.bot { background: #11141a; border: 1px solid var(--line-2); overflow: hidden; }
.lo-av.bot img { width: 76%; height: auto; image-rendering: pixelated; margin-top: 6%; }
.light .lo-av.bot, .cust-light .lo-av.bot { background: #1b2230; }
.lo-ai { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 5px; font: 650 10px var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; color: var(--acc-text); background: rgba(var(--acc-rgb), 0.14); border: 1px solid rgba(var(--acc-rgb), 0.3); }
.lo-msg.bot .lo-bub { background: rgba(var(--acc-rgb), 0.07); border-color: rgba(var(--acc-rgb), 0.24); }
.lo-at { background: none; color: var(--text); font-weight: 600; }
.lo-at.ai { color: var(--acc-text); }

.lo-quote { display: flex; align-items: center; gap: 6px; max-width: min(78%, 560px); min-width: 0; margin: 0 4px 4px; padding: 3px 9px 3px 7px; border: 0; border-left: 2px solid var(--line-2); border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--card-2) 70%, transparent); color: var(--text-3); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.lo-quote:hover { color: var(--text-2); border-left-color: var(--text-3); }
.lo-quote svg { flex: none; }
.lo-quote b { flex: none; font-weight: 600; color: var(--text-2); }
.lo-quote span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-quote.gone { cursor: default; font-style: italic; }
.lo-msg.mine .lo-quote { border-left: 0; border-right: 2px solid var(--line-2); border-radius: 8px 4px 4px 8px; }
.lo-msg.lit .lo-bub { animation: lo-lit 1.4s ease-out; }
@keyframes lo-lit { 0%, 30% { box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.45); } 100% { box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0); } }

.lo-empty-h { font-size: 16px; font-weight: 600; color: var(--text); }
.lo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.lo-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.lo-chip:hover { background: var(--card-2); color: var(--text); }
.lo-aicard { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.lo-aicard b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.lo-aicard p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; }


.lo-mutes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lo-mutes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lo-mutes li > span:not(.lo-av) { flex: 1 1 auto; min-width: 0; }


@media (max-width: 1000px) {
  .lo-grid2 { grid-template-columns: minmax(0, 1fr); }
  .lo-herebtn { display: inline-flex; }
  .lo-roomhead > .lo-live { display: none; }
  .lo-rail { display: none; }
  .lo-rail-back { position: fixed; inset: 0; z-index: 4; }
  .lo-rail.open { display: flex; position: absolute; z-index: 5; top: 52px; right: 8px; width: min(320px, calc(100% - 16px)); max-height: calc(100% - 64px); padding: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); animation: lo-pop 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .light .lo-rail.open, .cust-light .lo-rail.open { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.18); }
  .lo-rail.open .lo-railtop { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 4px; font-size: 14px; }
}
@keyframes lo-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .content.lo-page { padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .lo-hero { display: none; }
  .top.lo-top { min-height: 48px; }
  .lo-top .crumbs { display: none; }
  .lo-grid2 { height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 300px; }
  .lo-roomhead { padding: 6px 10px 6px 12px; }
  .lo-feed { padding: 6px 10px 40px; }
  .lo-msg { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .lo-av { width: 28px; height: 28px; }
  .lo-av-gap { width: 28px; }
  
  .lo-line { max-width: 100%; flex-wrap: wrap; }
  .lo-bub { max-width: 88%; }
  .lo-quote { max-width: 88%; }
  .lo-gone { margin-left: 36px; }
  .lo-dock { margin: 4px 8px 0; }
  .lo-box textarea { font-size: 16px; }
  .lo-note { padding: 6px 12px 10px; }
  .lo-rail-back { z-index: 59; background: rgba(0, 0, 0, 0.4); }
  .lo-rail.open { position: fixed; z-index: 60; top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 75dvh; border-radius: 18px 18px 0 0; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
}

@media (max-height: 560px) {
  .lo-hero { display: none; }
  .lo-grid2 { height: calc(100dvh - 90px - env(safe-area-inset-bottom)); min-height: 220px; }
  .lo-note { display: none; }
  .lo-dock { margin-bottom: 8px; }
}

@media (pointer: coarse) {
  .lo-acts { opacity: 1; }
  .lo-act { min-width: 44px; height: 44px; }
  .lo-box textarea { font-size: 16px; min-height: 36px; }
  .lo-send { width: 44px; height: 44px; }
  .lo-people li { min-height: 44px; }
  .lo-jump, .lo-herebtn, .lo-chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lo-rail.open { animation: none; } .lo-msg.lit .lo-bub { animation: none; box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.45); } }


.em { display: flex; align-items: center; gap: 7px; min-height: 18px; padding: 0 6px; font: 12px/1.2 var(--mono); color: var(--text-3); white-space: nowrap; }
.em-bar { color: var(--text-3); letter-spacing: 0.02em; }
.em-bar i { font-style: normal; display: inline-block; width: 0.62em; text-align: center; opacity: 0.55; }
.em-bar i.f, .em-bar i.p, .em-bar i.e { opacity: 1; }
.em-bar i.f { color: #B9CCE3; }
.em-bar i.p, .em-bar i.e { color: #E2A660; }
.em-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.em-pct { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.em-sep { color: var(--line-2); margin: 0 6px; }
.em-r b, .em-live b { color: var(--text-2); font-weight: 600; }
.em-live { color: #E2A660; font-variant-numeric: tabular-nums; }
.em.warn .em-bar i.f, .em.warn .em-pct, .em.stop .em-bar i.f, .em.stop .em-pct, .em.warn .em-r { color: var(--yellow); }

a.em-go { color: var(--text-3); text-decoration: none; border-radius: 8px; }
a.em-go:hover .em-r, a.em-go:focus-visible .em-r { text-decoration: underline; text-underline-offset: 3px; }
a.em-go:focus-visible { outline: 2px solid var(--peri); outline-offset: 1px; }
.em.extra .em-bar i.f { color: var(--peri); }
.light .em-bar i.f, .cust-light .em-bar i.f { color: #4E6A8C; }
.light .em-bar i.p, .light .em-bar i.e, .light .em-live, .cust-light .em-bar i.p, .cust-light .em-bar i.e, .cust-light .em-live { color: #A86A1E; }
.em-short { display: none; }
.cl-limit.tm-limit { margin-top: 0; max-width: none; border-color: rgba(242, 201, 76, 0.4); }
.light .cl-limit.tm-limit, .cust-light .cl-limit.tm-limit { border-color: rgba(183, 134, 11, 0.45); }
@media (max-width: 760px) {
  .em-of, .em-long { display: none; }
  .em-short { display: inline; }
}
@media (max-width: 360px) { .em-sep, .em-r { display: none; } }

.composer .foot > .em { flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 0 2px 0 6px; overflow: hidden; }
.composer .foot > .em .grow { display: none; }
.composer .foot > .em .em-live { margin-left: 8px; }
@media (max-width: 400px) {
  .composer .foot > .em.writing .em-pct, .composer .foot > .em.writing .em-sep, .composer .foot > .em.writing .em-r { display: none; }
  .composer .foot > .em.stop .em-sep, .composer .foot > .em.stop .em-r { display: none; }
  .composer .foot > .em.extra .em-pct, .composer .foot > .em.extra .em-sep, .composer .foot > .em.extra .em-bar { display: none; }
}

@media (max-width: 640px) {
  .composer .foot > .em { gap: 6px; padding: 0 4px; }
  .composer .foot > .em .em-bar, .composer .foot > .em .em-sep { display: none; }
  .composer .foot > .em:not(.warn):not(.stop) .em-r { display: none; }
  .composer .foot > .em .em-r { margin-left: 6px; }
  .composer .foot > .em::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--p, 0) * 360deg), var(--line-2) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
  .composer .foot > .em.warn::before, .composer .foot > .em.stop::before { background: conic-gradient(var(--yellow) calc(var(--p, 0) * 360deg), var(--line-2) 0); }
  .composer .foot > .em.extra::before { background: conic-gradient(var(--peri) 360deg, var(--line-2) 0); }
}

@media (max-width: 400px) {
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep { display: none; }
}
@media (max-width: 360px) {
  .composer .foot > .em.warn:not(.writing) .em-bar { display: none; }
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep, .composer .foot > .em.warn:not(.writing) .em-r { display: inline; }
}
@media (max-width: 340px) {
  .composer .foot > .em.writing .em-bar { display: none; }
  .composer .foot > .em.writing .em-pct { display: inline; }
  .composer .foot > .em.extra .em-r { display: inline; }
}

@media (max-width: 400px) {
  .composer .foot .btn.stop-sq { width: 44px; padding: 0; justify-content: center; }
  .composer .foot .btn.stop-sq .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


.bl-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.bl-h { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bl-plan { display: flex; flex-direction: column; gap: 14px; }
.bl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bl-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-facts span { font-size: 12.5px; color: var(--text-3); }
.bl-facts b { font-size: 14px; font-weight: 600; }
.bl-empty { margin: 8px 0 0; font-size: 13.5px; }

.bl-switch { position: relative; flex: none; width: 44px; height: 26px; padding: 0; border-radius: 999px; background: var(--raise); border: 1px solid var(--line-2); cursor: pointer; }
.bl-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: left 0.15s; }
.bl-switch.on { background: var(--green); border-color: transparent; }
.bl-switch.on i { left: 21px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .bl-switch i { transition: none; } }
@media (max-width: 760px) {
  .bl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (pointer: coarse) {
  .bl-switch { width: 52px; height: 32px; }
  .bl-switch i { width: 24px; height: 24px; }
  .bl-switch.on i { left: 23px; }
}


html.modal-open { overflow: hidden; }
.td { padding: 0; margin: auto; width: min(1150px, calc(100vw - 48px)); height: min(825px, calc(100vh - 48px)); height: min(825px, calc(100dvh - 48px)); max-width: none; max-height: none;
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.td.td-sm { width: min(800px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.td[open] { display: grid; grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.td:focus, .td:focus-visible { outline: none; }
.td::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .td::backdrop, .cust-light .td::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .td, .cust-light .td { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.td-x { position: absolute; top: 12px; right: 12px; z-index: 2; border-color: transparent; }
.td-x:hover { background: var(--raise); color: var(--text); }
.td-nav { display: flex; flex-direction: column; padding: 22px 12px 16px; min-height: 0; overflow-y: auto; }
.td-nav h2 { margin: 0 10px 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.td-tabs { display: flex; flex-direction: column; gap: 2px; }
.td-tab { font: inherit; font-size: 14.5px; color: var(--text-2); background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 0 10px; text-align: left;
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.td-tab:hover { color: var(--text); background: var(--card-2); }
.td-tab[aria-selected="true"] { background: var(--raise); color: var(--text); font-weight: 500; }
.td-tab:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.td-tab .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }
.td-tab[aria-selected="true"] .count { background: var(--card-2); }
.td-tab .reply-dot { margin-left: 0; }
.td-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.td-head { display: flex; align-items: center; min-height: 60px; padding: 14px 60px 6px 28px; flex: none; }
.td-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.td-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 28px; }
.td-pane[hidden] { display: none; }
.td-intro { margin: 2px 0 16px; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.td-preview { margin: 0 0 14px; font-size: 13.5px; }


.td .set-sec { background: none; border: 0; border-radius: 0; padding: 20px 0; border-top: 1px solid var(--line); gap: 14px; }
.td .td-pane > .set-sec:first-child { border-top: 0; padding-top: 6px; }
.td .set-ic { display: none; }
.td .set-h h2 { font-size: 15px; }
.td .set-h p { font-size: 13.5px; }
.td .theme-opt { background: var(--side); }
.light .td .theme-opt, .cust-light .td .theme-opt { background: var(--card-2); }

.td-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.td-row:first-child { border-top: 0; padding-top: 4px; }
.td-row > div { flex: 1 1 auto; min-width: 0; }
.td-row b { font-weight: 600; font-size: 14.5px; }
.td-row p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.td-row .btn { flex: none; }
.td-bar { height: 6px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.td-bar i { display: block; height: 100%; min-width: 4px; max-width: 100%; background: var(--green); border-radius: 99px; }
.td-bar.full i { background: var(--yellow); }

.td-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.td-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }


@media (max-width: 760px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .td[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .td-x { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; }
  .td-nav { padding: max(14px, env(safe-area-inset-top)) 0 0; overflow: visible; border-bottom: 1px solid var(--line); }
  .td-nav h2 { margin: 0 64px 10px 18px; font-size: 19px; line-height: 32px; }
  .td-tabs { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 12px; scroll-padding: 0 14px; }
  .td-tabs::-webkit-scrollbar { display: none; }
  .td-tab { flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; }
  .td-tab[aria-selected="true"] { border-color: transparent; }
  .td-tab .count { margin-left: 2px; }
  .td-main { border-left: 0; }
  .td-head { display: none; }
  .td-body { padding: 16px 16px max(28px, env(safe-area-inset-bottom)); }
  .td-row { flex-wrap: wrap; }
  .td-row .btn { width: 100%; justify-content: center; min-height: 44px; }
  .td-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .td-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .td-ask > span { flex-basis: 100%; }
}

@media (max-height: 500px) and (min-width: 761px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .td[open] { grid-template-columns: 190px minmax(0, 1fr); }
  .td-nav { padding-top: 14px; }
  .td-head { min-height: 52px; padding-top: 8px; }
}
@media (pointer: coarse) { .td-tab { min-height: 44px; } .td-x { width: 44px; height: 44px; } }



@keyframes mk-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
canvas.pg { display: block; flex: none; image-rendering: pixelated; }
canvas.pfx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }
.mk-btn > svg:last-child { width: 12px; height: 12px; transform: rotate(90deg); opacity: 0.65; transition: transform 0.15s ease-out; }
.mk-btn[aria-expanded="true"] > svg:last-child { transform: rotate(-90deg); }
.mk-name { display: inline-block; }
.mk-name.swap { animation: mk-swap 0.18s ease-out both; }
.mk-btn:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.7); outline-offset: 2px; }
.mk-row:focus-visible { outline: none; }
.mk-foot kbd { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }



.mk { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; }

.mk-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 10px; border: 0; border-radius: 999px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; }
.mk-btn:hover, .mk-btn[aria-expanded="true"] { background: var(--raise); }
.mk-btn { min-width: 0; max-width: 100%; white-space: nowrap; }
.mk-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.mk-pop { position: absolute; right: -40px; bottom: calc(100% + 10px); z-index: 30; width: 300px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; pointer-events: none; }
.light .mk-pop, .cust-light .mk-pop { box-shadow: 0 16px 44px rgba(20, 24, 40, 0.14); }
.mk-pop.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.12s ease-out, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mk-row:hover, .mk-row:focus-visible { background: var(--card-2); }
.mk-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-t b { font-size: 14px; font-weight: 600; }
.mk-t span { font-size: 12.5px; color: var(--text-3); }
.mk-t .mk-mm { font: 11px var(--mono); margin-top: 2px; }
.mk-row canvas.pg { justify-self: center; }
.mk-ck { color: var(--acc); display: grid; place-items: center; } .mk-ck svg { width: 16px; height: 16px; }
.mk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }


@media (max-width: 640px) {
  .mk-m { display: none; }
}
@media (pointer: coarse) {
  .mk-btn { min-height: 44px; }
  .mk-row { min-height: 52px; }
}

@media (max-width: 640px) {
  .mk { position: static; }
  .mk-pop { left: 0; right: 0; width: auto; max-width: none; bottom: calc(100% + 8px); }
}

@media (max-width: 640px), (max-height: 520px) {
  .composer.cx .cx-cmd > span { display: none; }
  .composer.cx .cx-cmd { padding: 0 9px; }
}

@media (max-height: 520px) {
  .mk-pop { position: fixed; right: 12px; bottom: 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; z-index: 60; }
}

@media (pointer: coarse) { .mk-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-pop, .mk-pop.on, .mk-name.swap, .mk-btn > svg:last-child { transition: none; animation: none; transform: none; } }



.composer-dock > .cx-status { position: absolute; left: 50%; top: -30px; z-index: 3; transform: translateX(-50%); white-space: nowrap; }
.composer-dock:has(> .cx-status) > .cx-jump { top: -72px; }
.chat-sec > .thread { padding-bottom: 44px; }

.ans-act-hold { min-height: 32px; }
@media (max-width: 640px) { .ans-act-hold { min-height: 44px; } }
.chat-sec { overflow-anchor: none; }



.pm-btn > svg:first-child { width: 15px; height: 15px; opacity: 0.85; }
.pm-btn.pm-plan > svg:first-child { color: var(--acc); }
.pm-btn.pm-bypass, .pm-btn.pm-bypass:hover { color: var(--yellow); background: rgba(242, 201, 76, 0.12); }
.pm-pop { right: auto; left: -8px; transform-origin: 0 100%; }
.pm-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); }
.pm-ic svg { width: 17px; height: 17px; }
.pm-row[aria-checked="true"] .pm-ic { color: var(--acc); }
.pm-row.pm-bypass .pm-ic { color: var(--yellow); }


.chg { margin: 8px 0 4px; max-width: 560px; font-size: 13px; color: var(--text-2); }
.chg-h { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.chg-h svg { width: 14px; height: 14px; color: var(--green); }
.chg ul { margin: 4px 0 0; padding: 0 0 0 21px; display: flex; flex-direction: column; gap: 2px; }
.chg li { overflow-wrap: anywhere; }
.chg li b { font-weight: 600; color: var(--text); }


.ap { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 560px; }
.ap.open { border-color: rgba(242, 201, 76, 0.45); }
.ap-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ap-h svg { width: 15px; height: 15px; color: var(--yellow); flex: none; }
.ap:not(.open) .ap-h svg { color: var(--text-3); }
.ap ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ap-i { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ap-i:first-child { border-top: 0; }
.ap-pick { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 32px; cursor: pointer; }
.ap-pick input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--acc); }
.ap-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-t b { font-weight: 600; color: var(--text); }
.ap-d { color: var(--text-2); overflow-wrap: anywhere; }
.ap-why { color: var(--text-3); font-size: 12.5px; }
.ap-s { flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ap-s.ran { color: var(--green); }
.ap-s.failed { color: var(--red); }
.ap-s.waiting { color: var(--yellow); }
.ap-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ap-go .btn svg { width: 14px; height: 14px; }
.ap-n { font-size: 12px; }


.pg-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid rgba(var(--acc-rgb), 0.35); border-radius: 12px; background: var(--card); max-width: 560px; }
.pg-go-t { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.pg-go-t .faint { font-size: 12.5px; }
.pg-go-b { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-go .btn svg { width: 14px; height: 14px; }
.pg-go .btn.line svg { color: var(--yellow); }


.msg.you-ok { align-items: flex-end; }

@media (pointer: coarse) {
  .ap-pick { min-height: 44px; align-items: center; }
  .ap-pick input { width: 20px; height: 20px; margin: 0; }
  .ap-go .btn, .pg-go .btn { min-height: 44px; }
}
@media (max-height: 520px) {
  .pm-pop { left: auto; right: 12px; }
}

@media (max-width: 640px) {
  .pm-pop { left: 0; right: 0; }
}
@media (max-width: 400px) {
  .pm-name { display: none; }
  .pm-btn { padding: 0 6px; gap: 4px; }
  .pg-go-b { width: 100%; }
  .pg-go-b .btn { flex: 1 1 auto; justify-content: center; }
}
.ap-s.expired { color: var(--text-3); }


.door.px::before, .door.px::after { display: none; }
.door.px > .px-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.door.px > .px-c { position: absolute; z-index: 1; transition: opacity 0.35s; }
.door.px > .px-main { position: relative; z-index: 2; }
.door.px > a.px-name { z-index: 3; }
.px-tl { top: 24px; left: 28px; top: max(24px, env(safe-area-inset-top)); }

.px-tr { top: 36px; right: 28px; top: max(36px, env(safe-area-inset-top)); }
.px-name { display: inline-flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.px-name .d-chip { font-size: 10px; letter-spacing: 0.1em; }
a.px-name { margin: -6px -8px; padding: 6px 8px; color: inherit; text-decoration: none; border-radius: 8px; transition: opacity 0.15s; }
a.px-name:hover { opacity: 0.75; }
a.px-name:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 4px; }
.px-no { font: 500 15px var(--mono); color: var(--text-2); }

.door.px[data-state="show"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.px-tap { margin: 0; color: var(--text-3); }
.px-stat { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.px-stat > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.px-stat b { font-weight: 600; color: var(--text-2); }
.px-stat b.err { color: var(--red); }
.px[data-state="in"] .px-under, .px[data-state="in"] .px-foot { opacity: 0; }

.door.px { --px-room: 110px; --px-gap: 24px; }
.door.px > .px-under { top: calc(var(--px-mark-b, 60%) + var(--px-gap)); left: 24px; right: 24px; text-align: center; }
.door.px > .px-foot { left: 24px; right: 24px; bottom: max(26px, env(safe-area-inset-bottom)); }
.px-tap { font-size: 11px; }

@media (min-width: 641px) and (max-height: 520px) { .door.px { --px-room: 90px; } }

.px-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 100px 20px; }
.px-stage { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }

.px[data-state="show"] .px-stage { opacity: 0; transform: translateY(24px) scale(0.97); pointer-events: none; visibility: hidden; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s; }
.px[data-state="show"] { cursor: pointer; }
.px-card { width: 400px; max-width: 100%; display: flex; flex-direction: column; padding: 30px 28px 22px; text-align: left; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--d-shadow); }
.px-card h1.d-h-sm { margin: 0 0 4px; }
.px-card .d-mono { margin-bottom: 22px; }
.px-fields { display: flex; flex-direction: column; gap: 12px; }
.px-card .d-disc .d-hint { text-align: left; }

.px-card.si { align-items: center; text-align: center; padding: 34px 28px 20px; }
.si-top { width: 100%; text-align: left; }
.si-av { width: 52px; height: 52px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: rgba(var(--ice-rgb), 0.14); border: 1px solid rgba(var(--ice-rgb), 0.38); color: var(--ice-text); font-size: 21px; font-weight: 600; }
.px-card.si h1.d-h-sm { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-sub { margin: 6px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-2); }
.si-sub .d-tlink { font-size: 14px; color: var(--ice-text); }
.si-sub .d-tlink:hover { color: var(--text); }
.si .px-fields { width: 100%; margin-top: 22px; gap: 10px; text-align: left; }

.si .d-labrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.si .d-field { min-height: 48px; border-radius: 12px; }
.si-go { position: relative; }
.si-go .d-pw .d-field { padding-right: 92px; }
.si-go .d-eye { right: 48px; }
.si-arrow { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ice); color: var(--on-ice); box-shadow: 0 3px 10px rgba(var(--ice-rgb), var(--d-glow)); transition: background 0.12s; }
.si-arrow:hover { background: var(--ice-hover); }
.si-arrow:disabled { background: var(--card-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: not-allowed; }
.si-arrow:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.si-arrow svg.i { width: 16px; height: 16px; stroke-width: 2; }
.si-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.si-row .d-tlink { font-size: 13.5px; }
.si-rule { width: 100%; height: 1px; margin: 18px 0 2px; background: var(--line); }
.px-fine { margin: 18px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.px-fine svg.i { width: 13px; height: 13px; }


.px-step { margin: 0 0 10px; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.px-card .d-mono .dot { margin-right: 8px; vertical-align: 1px; }

.px-card .d-mono { white-space: normal; }
.px-card .d-mono > span { white-space: nowrap; }
@media (max-width: 420px) { .px-card .d-mono { font-size: min(13px, 3.4vw); } }
.px-text { margin: -8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.px-text b { color: var(--text); font-weight: 500; }
.px-card .d-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.px-card .d-acct + .d-panel { margin-top: 14px; }
.px-card .d-quote { margin-bottom: 4px; }
.px-card .d-tip { font-size: 13px; }
.px-card .d-row { grid-template-columns: minmax(0, 1fr); }


.door.px > .px-newer { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--d-shadow); font-size: 13px; color: var(--text-2); white-space: nowrap; }

@media (max-width: 640px) {
  .px-tl { top: max(16px, env(safe-area-inset-top)); left: 18px; }
  .px-tr { top: max(22px, env(safe-area-inset-top)); right: 18px; }
  .px-name { font-size: 28px; }
  .px-no { font-size: 12px; }
  .door.px { --px-gap: 22px; }
  .door.px > .px-under { left: 16px; right: 16px; }
  .door.px > .px-foot { left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .px-tap { font-size: 10.5px; }
  .px-stat { gap: 4px 14px; font-size: 10.5px; }
  
  .px-main { align-items: flex-start; padding: 66px 16px; }
  .px-stage { width: 100%; margin: auto 0; }
  .px-card { width: 100%; padding: 22px 16px 16px; }
  .px-card.si { padding: 26px 16px 14px; }
  .si .d-field { min-height: 52px; }
  .si-go .d-pw .d-field { padding-right: 100px; }
  .si-go .d-eye { right: 52px; }
  .si-arrow { width: 40px; height: 40px; }
  .si-arrow::after { content: ""; position: absolute; inset: -4px; }
  .door.px > .px-newer { font-size: 12.5px; }
}

@media (pointer: coarse) {
  .si .d-tlink2, .si .d-cb { min-height: 44px; }
  .si-row .d-tlink, .si-sub .d-tlink { position: relative; }
  .si-row .d-tlink::after, .si-sub .d-tlink::after { content: ""; position: absolute; inset: -12px -6px; }
}
@media (prefers-reduced-motion: reduce) { .px-stage { transition: none; } }


.av.tint { color: hsl(var(--hue) 70% 84%); background: hsl(var(--hue) 30% 26%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 30% 34%); }
.light .av.tint, .cust-light .av.tint { color: hsl(var(--hue) 55% 28%); background: hsl(var(--hue) 62% 90%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 40% 80%); }

.me .who > span, .me .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.av.pf-big { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }


.pf-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-sec .pf-form { max-width: 560px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pf-field .field { width: 100%; }
.pf-field .field[aria-invalid="true"] { border-color: var(--red); }
.pf-h { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.pf-colors { display: grid; grid-template-columns: repeat(9, 32px); gap: 6px; }
.pf-sw { padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; line-height: 0; }
.pf-sw .av { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.pf-sw:hover .av { filter: brightness(1.12); }
.pf-sw.on { outline: 2px solid var(--text); outline-offset: 2px; }
.pf-sw:focus-visible { outline: 2px solid var(--line-2); outline-offset: 2px; }
.pf-sw.on:focus-visible { outline-color: var(--text); }
.pf-sign { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pf-sign svg { flex: none; color: var(--text-3); }
.pf-sign b { color: var(--text); font-weight: 600; }
.pf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-acts .btn:disabled { opacity: 0.5; cursor: default; }
.pf-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--green-text); }
.pf-form .err { margin: 0; }


:root { --yg0: #2A2A2F; --yg1: #1E4630; --yg2: #2A7347; --yg3: #3FA466; --yg4: #5BD08A; }
.light, .cust-light { --yg0: #E7E7EB; --yg1: #C2EACF; --yg2: #8BD6A6; --yg3: #47B873; --yg4: #24914F; }
.yg-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.yg-head b { font-size: 15px; font-weight: 600; }
.yg-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-3); }
.yg-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2.5px; }
.yg-legend i:first-child { margin-left: 4px; }
.yg-legend i:last-child { margin-right: 4px; }
.yg-body { display: flex; align-items: flex-start; min-width: 0; }
.yg-days { flex: none; display: block; }
.yg-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; }
.yg { display: block; max-width: none; cursor: pointer; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
.yg-lbl { fill: var(--text-3); font-size: 10px; font-family: inherit; }
.yg rect.yg-c, .yg-legend i.l0 { fill: var(--yg0); background: var(--yg0); }
.yg rect.l1, .yg-legend i.l1 { fill: var(--yg1); background: var(--yg1); }
.yg rect.l2, .yg-legend i.l2 { fill: var(--yg2); background: var(--yg2); }
.yg rect.l3, .yg-legend i.l3 { fill: var(--yg3); background: var(--yg3); }
.yg rect.l4, .yg-legend i.l4 { fill: var(--yg4); background: var(--yg4); }
.yg rect.on { stroke: var(--text); stroke-width: 1.5; }
.yg-wrap .yg-pick { margin: 0; min-height: 20px; font-size: 13.5px; color: var(--text-2); }
.yg-pick b { color: var(--text); font-weight: 600; }
.yg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.yg-stats > div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.light .yg-stats > div, .cust-light .yg-stats > div { background: var(--bg); }
.yg-stats dt { font-size: 12px; color: var(--text-3); }
.yg-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yg-stats dd small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); }
.yg-wrap .yg-empty { margin: 0; font-size: 13.5px; }


.ug-page { max-width: 920px; gap: 18px; }
.ug-intro h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.ug-intro p { margin: 6px 0 0; max-width: 66ch; line-height: 1.55; }
.ug-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.set-sec .ug-open { align-self: flex-start; }

@media (max-width: 760px) {
  .pf-field .field { font-size: 16px; min-height: 44px; }
  .pf-colors { grid-template-columns: repeat(5, 48px); gap: 10px; }
  .pf-sw .av { width: 48px; height: 44px; border-radius: 11px; font-size: 15px; }
  .pf-acts .btn { min-height: 44px; padding: 0 18px; }
  .yg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ug-card { padding: 16px 14px; }
  .ug-intro h1 { font-size: 22px; }
}
@media (pointer: coarse) {
  button.me-id { min-height: 44px; }
}


.pj-page { max-width: 1280px; gap: 16px; }
.pj-intro h1, .pj-head h1, .pj-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pj-intro p, .pj-head p, .pj-hero p { margin: 6px 0 0; max-width: 72ch; line-height: 1.55; }
.pj-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pj-row > label { font-size: 14px; color: var(--text-2); }
.pj-new { display: flex; flex-direction: column; gap: 8px; }
.pj-new label { font-weight: 600; }
.pj-new .field { flex: 1 1 260px; min-width: 0; }

.pj-starters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pj-starter { font: inherit; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-height: 118px; cursor: pointer; }
.pj-starter:hover { border-color: var(--line-2); }
.pj-starter:disabled { opacity: 0.6; cursor: default; }
.pj-starter-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--raise); display: grid; place-items: center; color: var(--text-2); }
.pj-starter b { font-size: 14px; font-weight: 600; }
.pj-starter span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; align-items: stretch; }
.pj-mcp { display: flex; flex-direction: column; gap: 12px; }
.pj-mcp h2 { margin: 0; font-size: 16px; font-weight: 600; }
.pj-mcp.compact { gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pj-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-tool { font: 12px var(--mono); padding: 4px 8px; border-radius: 7px; background: var(--side); border: 1px solid var(--line); color: var(--text); }
.pj-tool.chg { color: var(--yellow); border-color: rgba(242, 201, 76, 0.28); }
.pj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.pj-num { width: 22px; height: 22px; border-radius: 50%; background: var(--raise); color: var(--text); display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.pj-conn { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pj-dotok { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); flex: none; }
.pj-snip { margin: 0; padding: 10px 12px; font: 11.5px/1.5 var(--mono); color: var(--text-2); background: var(--side); border: 1px solid var(--line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pj-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--text-2); border: 1px solid transparent; }
.pj-tabs button.on { background: var(--raise); color: var(--text); }
.pj-tabs button.narrow { display: none; }
.pj-cols { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pj-cols.with-tools { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px); }
.pj-toolshed { display: flex; flex-direction: column; gap: 10px; }
.pj-trow { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.pj-trow > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-trow code { font: 12.5px var(--mono); color: var(--text); }
.pj-trow p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-ask { display: flex; flex-direction: column; gap: 8px; }
.pj-ask-box { min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

.pj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pj-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; color: inherit; text-decoration: none; min-height: 44px; }
.pj-item:hover { border-color: var(--line-2); }
.pj-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-item-h b { font-size: 15.5px; overflow-wrap: anywhere; }
.pj-item-f { font-size: 13px; }
.pj-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--raise); }
.pj-bar i { display: block; min-width: 4px; }


.pj-st.done, .k.done, .pj-bar .done { --c: var(--green); }
.pj-st.active, .k.active, .pj-bar .active { --c: var(--peri); }
.pj-st.blocked, .k.blocked, .pj-bar .blocked { --c: var(--red); }
.pj-st.todo, .k.todo, .pj-bar .todo { --c: var(--text-3); }
.pj-st.cancelled, .k.cancelled, .pj-bar .cancelled { --c: var(--line-2); }
.k.chain { --c: var(--yellow); }
.pj-bar i.pj-st { background: var(--c); }
.pill.pj-st { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); }
.pill.pj-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); vertical-align: -1px; }
.k.chain { border-radius: 2px; height: 3px; width: 14px; vertical-align: 2px; }

.pj-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pj-hold { display: flex; flex-direction: column; gap: 12px; }
.pj-hold-g h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; }
.pj-hold-g ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pj-hold-g li, .pj-hold-g p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.pj-counts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--text-2); }
.pj-counts span { display: inline-flex; align-items: center; gap: 6px; }
.pj-link { font: inherit; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pj-link:hover { text-decoration-color: var(--text-2); }
.pj-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 2px 4px 2px 8px; font-size: 13.5px; }
.pj-chip button { font: inherit; color: var(--text-2); background: none; border: 0; cursor: pointer; min-width: 24px; min-height: 24px; }
.pj-chain { margin: 0; line-height: 1.7; }

.pj-mapcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pm-bar { display: flex; align-items: center; gap: 6px; }
.pm-stage { position: relative; width: 100%; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.pm-stage canvas { position: absolute; inset: 0; display: block; }
.pm-text { cursor: pointer; }
.pm-key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.pm-key span { display: inline-flex; align-items: center; gap: 5px; }
.pj-sel { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pj-sel p { margin: 0; line-height: 1.5; }

.pj-outline, .pj-people { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pj-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-add .field.grow { flex: 1 1 240px; min-width: 0; }
.pj-hours { width: 84px; }
.pj-tree, .pj-tree ul { list-style: none; margin: 0; padding: 0; }
.pj-tree { border-top: 1px solid var(--line); overflow-x: auto; }
.pj-tree li.on > .pj-tr { background: var(--raise); }
.pj-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); min-height: 44px; }
.pj-title { min-width: 120px; }
.pj-kind { font: 11.5px var(--mono); color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.pj-kind.goal { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.pj-kind.objective { color: var(--peri); border-color: color-mix(in srgb, var(--peri) 40%, transparent); }
.pj-wait { font-size: 13px; }
.pj-wait.held { color: var(--yellow); }
.pj-status { min-height: 30px; padding: 0 8px; }
.pj-acts { display: inline-flex; gap: 2px; }
.pj-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pj-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pj-roles { margin: 0; font-size: 13px; line-height: 1.5; }

.pj-calc { display: flex; flex-direction: column; gap: 4px; }
.pj-calc-v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pj-calc-c { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

@media (max-width: 1100px) {
  .pj-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-split { grid-template-columns: minmax(0, 1fr); }
  .pj-cols, .pj-cols.with-tools { grid-template-columns: minmax(0, 1fr); }
  .pj-cols > :not(.on) { display: none; }
  .pj-tabs button.narrow { display: inline-block; }
  .pj-tabs button.wide { display: none; }
}
@media (max-width: 900px) {
  .pj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pj-starters { grid-template-columns: minmax(0, 1fr); }
  .pj-head > .pj-conn { display: none; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .pj-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pj-chip button { min-width: 44px; min-height: 44px; }
  .pj-status { min-height: 44px; }
  .pj-hours { width: 96px; }
  .pj-acts .btn { min-width: 44px; }
}


.rp { padding: 0; margin: auto; max-width: none; max-height: none; background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.rp::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .rp::backdrop, .cust-light .rp::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .rp, .cust-light .rp { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.rp:focus, .rp:focus-visible { outline: none; }
.rp .icon-btn.rp-x { border-color: transparent; flex: none; }
.rp .icon-btn.rp-x:hover { background: var(--raise); color: var(--text); }
.rp2 { width: min(980px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.rp2[open] { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }


.rp-side { display: flex; flex-direction: column; min-height: 0; background: var(--side); border-right: 1px solid var(--line); }
.light .rp-side, .cust-light .rp-side { background: var(--card-2); }
.rp-side-h { padding: 20px 16px 12px 18px; flex: none; }
.rp-side-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.rp-side-h p { margin: 4px 0 14px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-side .rp-x-list { display: none; }
.rp-new { width: 100%; justify-content: center; min-height: 38px; }
.rp-new.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent); }
.rp-lbl { font: 600 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 6px 18px; flex: none; display: flex; justify-content: space-between; }
.rp-side .rp-scroll { padding: 0 8px 12px; }
.rp-empty { margin: 6px 10px; font-size: 13.5px; line-height: 1.5; }
.rp-none { margin: 4px 10px; padding: 16px 14px; border: 1px dashed var(--line-2); border-radius: 12px; display: grid; justify-items: start; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.rp-none svg { width: 18px; height: 18px; margin-bottom: 4px; color: var(--text-3); }
.rp-none b { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.rp-row { font: inherit; color: var(--text); width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 10px; cursor: pointer; }
.rp-row:hover { background: var(--card-2); }
.light .rp-row:hover, .cust-light .rp-row:hover { background: var(--card); }
.rp-row.on { background: var(--raise); }
.rp-row:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.rp-row > svg { margin-top: 3px; color: var(--red); }
.rp-row > svg:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-row b { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rp-meta { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.rp-meta .reply-dot { margin-left: auto; width: 8px; height: 8px; }


.rp-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rp-mode, .rp-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.rp-mode[hidden] { display: none; }
.rp-pane-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 0 28px; flex: none; }
.rp-pane-h > div { flex: 1 1 auto; min-width: 0; }
.rp-pane-h h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; }
.rp-pane-h > div > h3:first-child { margin-top: 6px; }
.rp-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rp-pane .rp-scroll { padding: 18px 28px 24px; }
.rp-back { display: none; }
.rp-pick-one { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-3); }
.rp-pick-one p { margin: 0; max-width: 36ch; }


.rp-compose { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.rp-preview { margin: 0 0 12px; font-size: 13.5px; }
.rp-big { font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; }
.rp-big::placeholder, .rp-plain::placeholder { color: var(--text-3); font-weight: 400; }
.rp-plain { font: inherit; font-size: 15px; line-height: 1.6; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; resize: none; field-sizing: content; min-height: 4.8em; margin-top: 12px; overflow: hidden; display: block; }
.rp-plain.rp-line { min-height: 0; }
.rp-big:focus-visible, .rp-plain:focus-visible { outline: none; }
.rp-opt { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.rp-q { font-size: 13px; color: var(--text-2); }
.rp-q em { font-style: normal; color: var(--text-3); }
.rp-opt .rp-plain { min-height: 3.2em; margin-top: 6px; font-size: 14.5px; }
.rp-opt .rp-plain.rp-line { min-height: 0; }
.rp-compose .att-pending { margin-top: 12px; }
.rp-ctx { margin: 18px 0 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-ctx svg { margin-top: 1.5px; }
.rp-ctx > span { min-width: 0; overflow-wrap: anywhere; }
.rp-link { font: inherit; font-size: 13px; color: var(--text-2); background: none; border: 0; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; vertical-align: middle; min-height: 28px; }
.rp-link:hover { color: var(--text); }
.rp-compose .err { margin: 12px 0 0; }
.rp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 12px 28px; border-top: 1px solid var(--line); }
.rp-pick { position: relative; font: inherit; font-size: 13.5px; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; min-height: 32px; padding: 0 10px 0 11px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.light .rp-pick, .cust-light .rp-pick { background: var(--card); }
.rp-pick:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; border: 0; }
.rp-pick select:disabled { cursor: default; }
.rp-pick .rp-k { color: var(--text-3); }
.rp-pick svg.i { width: 14px; height: 14px; }
.rp-pick > svg:first-child { color: var(--red); }
.rp-pick > svg:first-child:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-pick .rp-chev { color: var(--text-3); width: 12px; height: 12px; }
.rp-pick.add { background: transparent; border-style: dashed; color: var(--text-2); }
.rp-pick.add:hover { color: var(--text); }
.rp-foot .att-btn { border-color: transparent; margin-left: -8px; }
.rp-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-foot .rp-hint { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-3); }
.rp-foot .btn { flex: none; }


.rc-box { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 10px 12px; min-width: 0; }
.light .rc-box, .cust-light .rc-box { background: var(--card); }
.rc-box.off { background: none; border-style: dashed; }
.rc-tick { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.rc-tick input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); cursor: pointer; }
.rc-tick b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.rc-tick small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; overflow-wrap: anywhere; }
.rc-box.off .rc-tick b { color: var(--text-2); }
.rc-peek { list-style: none; margin: 10px 0 0 28px; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-peek li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; min-width: 0; }
.rc-peek b { flex: none; font-weight: 600; color: var(--text-2); }
.rc-peek span { min-width: 0; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rc-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rc-peek.staff { margin-left: 0; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-sub { margin: 0; font-size: 12.5px; color: var(--text-3); }
.fb-chat { display: inline-flex; align-items: center; gap: 4px; }


.rp-steps { display: flex; margin: 2px 0 22px; list-style: none; padding: 0; }
.rp-steps li { flex: 1 1 0; min-width: 0; position: relative; padding-top: 16px; font-size: 12.5px; color: var(--text-3); }
.rp-steps li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.rp-steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); box-sizing: border-box; }
.rp-steps li.done { color: var(--text-2); }
.rp-steps li.done::before, .rp-steps li.done::after { background: var(--text-2); border-color: var(--text-2); }
.rp-steps li.now { color: var(--text); font-weight: 600; }
.rp-steps li.now::after { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.18); }
.rp-steps li.now:last-child:not(:first-child)::after { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 208, 138, 0.18); }
.rp-steps.no li.now:last-child::after { background: var(--text-3); border-color: var(--text-3); box-shadow: none; }
.rp-steps li:last-child { flex: 0 0 auto; }
.rp-steps li:last-child::before { display: none; }
.rp-thread { display: flex; flex-direction: column; gap: 12px; }
.rp-msg { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 14px 16px; min-width: 0; }
.rp-msg.fresh { border-color: var(--line-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.rp-more-msg { margin-right: 28px; }
.rp-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.rp-who b { color: var(--text); font-weight: 600; }
.rp-msg .rbody dd { font-size: 14px; }
.rp-msg .att-list, .rp-reply .att-list { margin-top: 10px; }
.rp-msg .rp-ctx { margin-top: 12px; }
.rp-reply { margin-left: 28px; border-radius: 12px; padding: 12px 16px; background: rgba(91, 208, 138, 0.08); border: 1px solid rgba(91, 208, 138, 0.25); min-width: 0; }
.rp-reply .rp-who b { color: var(--green-text); }
.rp-text { margin: 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-event { margin: 0 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--text-2); }
.rp-event b { font-weight: 600; color: var(--text); }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); padding: 0; }
.rp-dot.st-new { background: var(--peri); }
.rp-dot.st-plan { background: var(--yellow); }
.rp-dot.st-done { background: var(--green); }
.rp-later { margin: 18px 0 0; font-size: 13px; color: var(--text-3); display: flex; gap: 8px; align-items: center; }

.rp-reply-box { flex: none; border-top: 1px solid var(--line); padding: 10px 16px 12px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.rp-reply-box .err { margin: 0; }
.rp-reply-row { display: flex; align-items: flex-end; gap: 8px; }
.rp-reply-row .att-btn { border-color: transparent; flex: none; }
.rp-reply-row .rp-plain { margin: 0; min-height: 36px; max-height: 160px; overflow-y: auto; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--side); font-size: 14.5px; line-height: 1.5; }
.light .rp-reply-row .rp-plain, .cust-light .rp-reply-row .rp-plain { background: var(--card-2); }
.rp-reply-row .rp-plain:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-reply-row .btn { flex: none; min-height: 36px; }

.rp-ask { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }


@media (max-width: 760px) {
  .rp2, .rp2[open] { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  .rp-side, .rp-pane { flex: 1 1 auto; border-right: 0; }
  .rp2.at-list .rp-pane, .rp2:not(.at-list) .rp-side { display: none; }
  .rp-side, .light .rp-side, .cust-light .rp-side { background: var(--card); }
  .rp-side-h { padding: max(10px, env(safe-area-inset-top)) 6px 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rp-side-h h2 { font-size: 20px; }
  .rp-side .rp-x-list { display: inline-flex; }
  .rp-side-h p, .rp-side-h .rp-new { grid-column: 1 / -1; }
  .rp-side-h .rp-new { min-height: 46px; width: calc(100% - 12px); }
  .rp-row { padding: 12px 10px; }
  .rp-pane-h { padding: max(8px, env(safe-area-inset-top)) 6px 0 6px; flex-wrap: wrap; }
  .rp-back { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 15px; color: var(--text-2); background: none; border: 0; min-height: 44px; padding: 0 10px; cursor: pointer; }
  .rp-back svg { transform: rotate(180deg); }
  .rp-pane-h > div { flex-basis: 100%; order: 3; padding: 0 12px; }
  .rp-pane-h > div:empty { display: none; }
  .rp-pane-h .rp-x { margin-left: auto; }
  .rp-pane .rp-scroll { padding: 14px 18px 20px; }
  .rp-reply, .rp-more-msg { margin-left: 14px; margin-right: 0; }
  .rp-more-msg { margin-left: 0; margin-right: 14px; }
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
  .rp-bar { padding: 10px 16px; gap: 6px; }
  .rp-foot { padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
  .rp-foot .rp-hint { display: none; }
  .rp-foot .att-btn { margin-left: -6px; }
  .rp-foot .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .rp-foot .btn.ghost { flex: 0 0 auto; padding: 0 14px; }
  .rp-reply-box { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  .rp-reply-row .rp-plain { min-height: 44px; padding: 10px 12px; }
  .rp-reply-row .btn { min-height: 44px; }
  .rp-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .rp-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .rp-ask > span { flex-basis: 100%; }
}
@media (max-width: 400px) { .rp-pick .rp-k { display: none; } }

@media (max-height: 500px) and (min-width: 761px) {
  .rp2 { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .rp2[open] { grid-template-columns: 250px minmax(0, 1fr); }
  .rp-side-h { padding-top: 12px; }
  .rp-side-h p { display: none; }
  .rp-pane-h { padding-top: 10px; }
}

@media (pointer: coarse) {
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link, .rp-new, .rp-reply-row .btn, .rp-reply-row .rp-plain, .rp-foot .btn, .rp-ask .btn, .rp-pick-one .btn { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
}
@media (pointer: coarse) { .rc-tick { min-height: 44px; align-items: center; } }


@property --edge-up { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --edge-down { syntax: "<length>"; inherits: false; initial-value: 0px; }
.td-nav, .td-body, .td-tabs, .cl-b, .pf-body, .sh-b, .rp-scroll, .rp-reply-box textarea, .rp textarea { scrollbar-width: none; }
.td-nav::-webkit-scrollbar, .td-body::-webkit-scrollbar, .td-tabs::-webkit-scrollbar, .cl-b::-webkit-scrollbar, .pf-body::-webkit-scrollbar,
.sh-b::-webkit-scrollbar, .rp-scroll::-webkit-scrollbar, .rp textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  transition: --edge-up 0.15s, --edge-down 0.15s;
}
@media (prefers-reduced-motion: reduce) { .td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll { transition: none; } }


.sh-dlg { width: min(560px, calc(100vw - 32px)); }
.sh-sub { margin: -6px 0 6px; padding: 0 20px; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.sh-opts { display: flex; flex-direction: column; gap: 8px; }
.sh-opt { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.sh-opt.on { border-color: var(--line-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sh-opt.off { opacity: 0.6; }
.sh-opt > input { margin: 9px 0 0; width: 16px; height: 16px; accent-color: var(--btn-bg); cursor: pointer; }
.sh-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.sh-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-t label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.sh-opt.off .sh-t label { cursor: default; }
.sh-t b { font-size: 14.5px; font-weight: 600; }
.sh-t small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sh-people { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-matches { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.sh-match { font: inherit; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.sh-match:hover, .sh-match:focus-visible { background: var(--raise); }
.sh-match .nm, .sh-person .nm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sh-match .nm b { font-size: 14px; }
.sh-match .nm small { font-size: 12.5px; color: var(--text-3); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 2px 0 4px; border-radius: 999px; background: var(--raise); font-size: 13px; }
.av.sm { width: 22px; height: 22px; border-radius: 999px; font-size: 11px; }
.sh-chip button { width: 24px; height: 24px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.sh-chip button:hover { color: var(--text); background: var(--card-2); }
.sh-what { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.sh-what p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sh-what p b { color: var(--text); }
.sh-what .d-label { color: var(--text-3); }
.sh-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--side); border: 1px solid var(--line); }
.light .sh-link, .cust-light .sh-link { background: var(--card-2); }
.sh-link code { flex: 1 1 auto; min-width: 0; font: 12.5px var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b .err { margin: 0; }
.btn.sh-open { margin-right: 2px; }
.sh-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); flex-wrap: wrap; }
.sh-banner > div { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; flex: 1 1 240px; }
.sh-banner .faint { font-size: 13px; }
.sh-ro { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.item .n.sh-from { font-size: 12px; }
@media (max-width: 760px) {
  .cl-dlg.sh-dlg { width: 100%; height: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  .sh-opt { grid-template-columns: 20px minmax(0, 1fr); }
  .sh-opt .sh-ic { display: none; }
  .sh-b { padding: 4px 14px 12px; }
  .sh-sub { padding: 0 18px; }
  .sh-chip { min-height: 36px; }
  .sh-chip button { width: 32px; height: 32px; }
  .sh-banner .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px), (pointer: coarse) {
  .sh-opt > input { width: 20px; height: 20px; margin-top: 7px; }
  .sh-match { min-height: 46px; }
}


.pub { min-height: 100vh; min-height: 100dvh; }
.pub-top { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--side); }
.pub-main { max-width: 820px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 20px; }
.pub-h h1 { margin: 8px 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.pub-h .faint { margin: 0; font-size: 13.5px; }
.pub-f { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.grp-fold .count { flex: none; font-size: 11.5px; line-height: 18px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; }


.me .icon-btn { width: 32px; height: 32px; }
.me { gap: 6px; }
.me .who { margin-right: 2px; }
.icon-btn.on { color: var(--text); background: var(--raise); }
.item .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .item .badge { color: #fff; }
.reply-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.18); flex: none; }


select.field, .light select.field, .cust-light select.field { appearance: none; -webkit-appearance: none; min-height: 36px; padding: 0 32px 0 12px; line-height: 1.2;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select.field:disabled { opacity: 0.6; }


.set-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-h { display: flex; gap: 14px; align-items: flex-start; }
.set-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.set-h p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; max-width: 70ch; }
.set-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--raise); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.set-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-opt { font: inherit; text-align: left; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.theme-opt:hover { border-color: var(--text-3); }
.theme-opt.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); }
.theme-opt .swatch { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.theme-opt .theme-l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14.5px; }
.theme-opt .theme-l svg { color: var(--green); }
.theme-opt .faint { font-size: 12.5px; line-height: 1.4; }
.made { border: 1px solid rgba(91, 208, 138, 0.5); background: rgba(91, 208, 138, 0.08); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tokline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tokline code { flex: 1 1 260px; overflow-wrap: anywhere; background: var(--side); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.tok-list { display: flex; flex-direction: column; }
.tok { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; }
.tok:first-child { border-top: 0; }
.tok > svg { color: var(--text-2); }
.tok b { font-weight: 600; }
.snips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.snip { border: 1px solid var(--line); border-radius: 10px; background: var(--side); min-width: 0; overflow: hidden; }
.snip-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.snip pre { margin: 0; padding: 10px 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 760px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-opt { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .theme-opt .swatch { grid-row: span 2; }
  .snips { grid-template-columns: minmax(0, 1fr); }
  .set-sec { padding: 16px; }
}


.tok { flex-wrap: wrap; }
.tok-t { min-width: 0; flex: 1 1 220px; }
.tok-m { display: block; font-size: 13px; margin-top: 1px; }
.mcp-access > button { white-space: nowrap; }
.pill.mcp-chg { color: var(--yellow); background: rgba(242, 201, 76, 0.13); font-weight: 600; }
.pill.mcp-op { color: var(--peri); background: rgba(142, 155, 255, 0.14); font-weight: 600; }
.pill.mcp-dev { color: var(--text); font-weight: 600; }
.pill.mcp-new { color: #B9CCE3; background: transparent; box-shadow: inset 0 0 0 1px rgba(185, 204, 227, 0.45); font-weight: 600; }
.pill.mcp-out { color: #B9CCE3; background: rgba(185, 204, 227, 0.14); font-weight: 600; }
.light .pill.mcp-new, .cust-light .pill.mcp-new { color: #3A5573; box-shadow: inset 0 0 0 1px rgba(58, 85, 115, 0.45); }
.light .pill.mcp-out, .cust-light .pill.mcp-out { color: #3A5573; background: rgba(58, 85, 115, 0.1); }
.light .pill.mcp-op, .cust-light .pill.mcp-op { color: #4B57D6; }
.mcp-find { position: relative; display: flex; align-items: center; min-width: 180px; }
.mcp-find svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.mcp-find .field { width: 100%; padding-left: 34px; }
.mcp-cat { columns: 2 320px; column-gap: 24px; }
.mcp-g { break-inside: avoid; margin: 0 0 18px; }
.mcp-gh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
.mcp-gh span { margin-left: auto; letter-spacing: 0; font-weight: 500; color: var(--text-3); text-transform: none; }
.mcp-t { padding: 8px 2px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcp-t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcp-t1 code { font: 13px var(--mono); color: var(--text); margin-right: auto; overflow-wrap: anywhere; }
.mcp-d { font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
.mcp-kept { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
.mcp-kept b { color: var(--text-2); font-weight: 600; }
@media (max-width: 760px) {
  .mcp-make > .grow { flex-basis: 100%; }
  .mcp-make .seg, .mcp-filters .seg, .tok .seg { width: 100%; }
  .mcp-make .seg > *, .mcp-filters .seg > *, .tok .seg > * { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .mcp-make .btn { width: 100%; justify-content: center; }
  .mcp-find { flex-basis: 100%; }
  .mcp-cat { columns: 1; }
  .tok-t { flex-basis: 100%; }
  .tok > svg { display: none; }
}


.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--raise); color: var(--text-2); }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { color: var(--peri); background: rgba(142, 155, 255, 0.14); }
.st-seen { color: var(--text-2); }
.st-plan { color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.st-done { color: var(--green-text); background: rgba(91, 208, 138, 0.14); }
.st-no { color: var(--text-3); }
.light .st-new { color: #4B57D6; }
.kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.kind svg { width: 14px; height: 14px; }
.kind-bug svg { color: var(--red); }
.kind-feature svg { color: var(--yellow); }
.rform { display: flex; flex-direction: column; gap: 14px; }
.rform label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rform label > span { font-size: 13px; color: var(--text-2); }
.rform em { font-style: normal; color: var(--text-3); }
.rform .field { width: 100%; }
.rform textarea.field { padding: 9px 12px; resize: vertical; line-height: 1.5; }
.rrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rkind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rkind button { font: inherit; color: var(--text); text-align: left; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-height: 64px; }
.rkind button svg { width: 22px; height: 22px; color: var(--text-2); }
.rkind button span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rkind button small { color: var(--text-3); font-size: 12.5px; }
.rkind button.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.15); }
.rkind button.on:first-child svg { color: var(--red); }
.rkind button.on:last-child svg { color: var(--yellow); }
.ract { display: flex; justify-content: flex-end; gap: 8px; }
.rbody { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rbody dt { font-size: 12.5px; color: var(--text-3); margin-bottom: 2px; }
.rbody dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
@media (max-width: 560px) { .rrow, .rkind { grid-template-columns: minmax(0, 1fr); } }


.gd-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(242, 201, 76, 0.38); background: rgba(242, 201, 76, 0.07); max-width: 620px; }
.gd-card.declined { border-color: rgba(255, 124, 124, 0.38); background: rgba(255, 124, 124, 0.06); }
.gd-card.granted { border-color: rgba(91, 208, 138, 0.38); background: rgba(91, 208, 138, 0.06); }
.gd-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242, 201, 76, 0.16); color: var(--yellow); }
.gd-card.declined .gd-ic { background: rgba(255, 124, 124, 0.14); color: var(--red); }
.gd-card.granted .gd-ic { background: rgba(91, 208, 138, 0.14); color: var(--green-text); }
.gd-card b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.gd-card p { margin: 0; color: var(--text-2); font-size: 14px; }
.gd-chip { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.light .gd-chip, .light .gd-ic { color: #8A6508; }
.gd-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 14px; }
.gd-lock .grow { flex: 1; }
@media (max-width: 760px), (pointer: coarse) { .gd-lock .btn { min-height: 44px; } }


@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .me .icon-btn { width: 44px; height: 44px; flex: none; }
  .me { gap: 4px; }
  .me .who { min-width: 0; }
}



.side.sb-side { flex: 0 0 313px; width: 313px; padding: 10px 10px 8px; gap: 1px; overflow: hidden; }
.side.drawer.sb-side { width: min(320px, 88vw); padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.sb-head { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; padding-left: 8px; margin-bottom: 6px; }
.sb-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; }
.sb-brand svg.i { width: 19px; height: 19px; }
.sb-brand .tag { font-size: 11.5px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 18px; letter-spacing: 0; }
.sb-ib { position: relative; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-ib:focus-visible, .sb-acct:focus-visible, .sb-r:focus-visible, .sb-dots:focus-visible, .sb-lbl:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.sb-nav { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sb-side .item { min-height: 36px; position: relative; width: 100%; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; }
.sb-side .item .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side .item .n, .sb-side .item .badge { flex: none; margin-left: auto; }
.sb-side .item .badge + .n { margin-left: 6px; }
.sb-side .item > .sb-dot { flex: none; margin-left: auto; width: 7px; height: 7px; }
.sb-side .item:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }

.sb-side .item.on:not(.sb-new) { background: var(--raise); }
.sb-kbd { margin-left: auto; font: 11px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; line-height: 18px; }

.sb-new { font-weight: 600; margin-bottom: 2px; }
.sb-plus { width: 22px; height: 22px; margin-left: -3px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--text); color: var(--bg); }
.sb-plus svg.i { color: var(--bg) !important; stroke-width: 2.2; }
.sb-new.off { opacity: 0.5; cursor: not-allowed; }
.sb-new.off:hover { background: transparent; }
.sb-note { list-style: none; margin: 0 0 6px; padding: 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.sb-fold > svg.i:last-child { margin-left: 4px; color: var(--text-3); transition: transform 0.15s; }
.sb-fold[aria-expanded="true"] > svg.i:last-child { transform: rotate(90deg); }
.sb-fold .reply-dot { margin-left: auto; width: 7px; height: 7px; }

[hidden] { display: none !important; }
.sb-sub { display: flex; flex-direction: column; gap: 1px; }
.sb-sub .item { padding-left: 36px; color: var(--text-2); }
.sb-sub .item.on { color: var(--text); }
.sb-sub.flush .item { padding-left: 10px; color: var(--text); }
.sb-sub.flush .item svg.i { color: var(--text-2); }

.sb-nav:has(> .sb-panes) { overflow: hidden; padding-bottom: 0; }
.sb-panes { --ease: cubic-bezier(0.32, 0.72, 0, 1); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sb-pane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; transition: transform 0.5s var(--ease), opacity 0.42s ease, filter 0.42s ease; will-change: transform, opacity; }
.on-recents .sb-pane:first-child { transform: translateX(-14px); opacity: 0; filter: blur(4px); }
.on-menu .sb-pane-r { transform: translateX(14px); opacity: 0; filter: blur(4px); }

@media (pointer: coarse) { .on-recents .sb-pane:first-child, .on-menu .sb-pane-r { filter: none; } .sb-pane { transition: transform 0.32s var(--ease), opacity 0.26s ease; } }
.sb-recents { display: flex; flex-direction: column; min-width: 0; margin-top: auto; }
@keyframes sb-rec-in { from { opacity: 0; transform: translateY(8px); } }
.on-recents .sb-pane-r .sb-li { animation: sb-rec-in 0.55s var(--ease) both; animation-delay: calc(var(--i) * 10ms + 60ms); }
.sb-tabs { position: relative; flex: none; display: flex; align-items: center; gap: 18px; height: 32px; padding: 4px 10px 0; margin-bottom: 6px; border-top: 1px solid var(--line); }
.sb-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color 0.35s ease; }
.sb-tabs button::before { content: ""; position: absolute; inset: -9px -6px; }
.sb-tabs button:hover, .sb-tabs button.on { color: var(--text); }
.sb-tabs button:focus-visible { outline: 2px solid var(--text-2); outline-offset: 3px; border-radius: 4px; }
.sb-tabs .reply-dot { width: 7px; height: 7px; margin-left: 0; }
.sb-tab-n { font-size: 10.5px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sb-ul { position: absolute; bottom: 1px; left: 0; height: 2px; width: var(--w, 34px); transform: translateX(var(--x, 10px)); border-radius: 2px; background: var(--text); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }

.sb-lbl { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 14px 0 2px; padding: 0 8px 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.sb-lbl:hover { color: var(--text-2); }
.sb-lbl > svg.i { opacity: 0; transition: transform 0.15s, opacity 0.15s; }
.sb-lbl:hover > svg.i, .sb-lbl:focus-visible > svg.i, .sb-lbl[aria-expanded="false"] > svg.i { opacity: 1; }
.sb-lbl[aria-expanded="true"] > svg.i { transform: rotate(90deg); }
.sb-lbl .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.sb-lbl .badge { margin-left: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .sb-lbl .badge, .cust-light .sb-lbl .badge { color: #fff; }
.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-li { position: relative; }
.sb-c { color: var(--text-2) !important; padding-right: 36px; }
.sb-c.on { color: var(--text) !important; }
.sb-c .reply-dot { margin-left: 4px; }
.sb-dots { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; opacity: 0; }
.sb-li:hover .sb-dots, .sb-li.open .sb-dots, .sb-li.on .sb-dots, .sb-dots:focus-visible { opacity: 1; }
.sb-li:hover .sb-c, .sb-li.open .sb-c { background: var(--card); }
.sb-li.on .sb-c { background: var(--raise); }
.sb-dots:hover, .sb-li.open .sb-dots { color: var(--text); background: var(--raise); }
.sb-li.on .sb-dots:hover, .sb-li.on.open .sb-dots { background: var(--line-2); }
.sb-all .t { color: var(--text-3); }
.sb-rename { padding: 1px 0; }
.sb-rename .field { width: 100%; min-height: 36px; font-size: 14.5px; }

.sb-foot { flex: none; display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.sb-acct { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sb-acct.open { background: var(--card); }
.sb-acct .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-acct .who b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct .who small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct > svg.i { flex: none; color: var(--text-3); }
.sb-avw { position: relative; flex: none; display: inline-flex; }
.av.sb-av { width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; }
.sb-st { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--side); background: var(--text-3); }
.sb-st.ok { background: var(--green); }
.sb-st.warn { background: var(--yellow, #E6B450); }
.sb-st.bad { background: var(--red); }
.sb-bug, .sb-search { width: 36px; height: 36px; color: var(--text-3); }

.sb-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.light .sb-menu, .cust-light .sb-menu { box-shadow: 0 18px 50px rgba(20, 20, 30, 0.16); }
.sb-mh { padding: 6px 10px 4px; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-mstat { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: 12.5px; color: var(--text-3); }
.sb-mi { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.sb-mi:focus-visible { background: var(--raise); outline: none; }
.sb-mi > svg.i { color: var(--text-2); }
.sb-mi .t { white-space: nowrap; }
.sb-mi .r { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.sb-mi .badge { margin-left: auto; }
.sb-mi.danger, .sb-mi.danger > svg.i { color: var(--red); }
.sb-sep { height: 1px; margin: 5px 10px; background: var(--line); }
.sb-theme { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; font-size: 14.5px; }
.sb-theme > svg.i { color: var(--text-2); }
.sb-seg { margin-left: auto; display: inline-flex; padding: 2px; background: var(--side); border: 1px solid var(--line-2); border-radius: 8px; }
.sb-seg button { font: inherit; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; color: var(--text-2); background: transparent; border: 0; cursor: pointer; }
.sb-seg button.on { background: var(--raise); color: var(--text); }
.sb-seg button:focus-visible { outline: 2px solid var(--text-2); outline-offset: 1px; }

.sb-tip { position: fixed; z-index: 90; pointer-events: none; max-width: 280px; padding: 5px 10px; font-size: 13px; line-height: 1.35; white-space: pre-line; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.light .sb-tip, .cust-light .sb-tip { box-shadow: 0 10px 30px rgba(20, 20, 30, 0.14); }

.side.sb-rail { flex: 0 0 60px; width: 60px; padding: 10px 0; align-items: center; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sb-r { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-r.on { background: var(--raise); color: var(--text); }
.sb-r.off { opacity: 0.5; cursor: not-allowed; }
.sb-r:first-child { margin-bottom: 6px; }
.sb-rb { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--green); color: #0B2615; font: 600 10px/16px -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; text-align: center; }
.sb-rdot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.sb-rail .sb-bug, .sb-rail .sb-search { width: 40px; height: 40px; }
.sb-rme { margin-top: 2px; }
@media (hover: hover) {
  .sb-ib:hover, .sb-r:hover { background: var(--card); color: var(--text); }
  .sb-side .item:not(.on):not(.off):hover { background: var(--card); }
  .sb-acct:hover { background: var(--card); }
  .sb-mi:hover { background: var(--raise); }
}

@media (max-width: 760px) {
  .mbar.sb-bar { gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); background: var(--bg); }
  .sb-mb { width: 44px; height: 44px; color: var(--text); }
  .sb-mb.off { opacity: 0.4; }
  .sb-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 15.5px; white-space: nowrap; }
  .sb-title > span { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .sb-side .item, .sb-mi { min-height: 44px; font-size: 15.5px; }
  .sb-ib { width: 44px; height: 44px; }
  .sb-lbl { min-height: 40px; font-size: 13px; }
  .sb-lbl > svg.i { opacity: 1; }
  .sb-dots { width: 40px; height: 40px; right: 2px; opacity: 1; }
  .sb-c { padding-right: 46px; }
  .sb-acct { height: 54px; }
  .sb-theme { min-height: 52px; font-size: 15.5px; }
  .sb-theme { gap: 10px; }
  .sb-seg button { min-height: 36px; padding: 0 8px; font-size: 13px; }
  .sb-rename .field { min-height: 44px; font-size: 16px; }
  .sb-menu { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-fold > svg.i:last-child, .sb-lbl > svg.i, .sb-pane, .sb-ul { transition: none; }
  .on-recents .sb-pane-r .sb-li { animation: none; }
}


.d-welcome.d-signup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.d-welcome.d-signup .d-label { margin: 0; }
.d-welcome.d-signup .d-signup-t { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: normal; }
.d-signup-t b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.d-ask { font-size: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.d-signup .d-big { justify-content: space-between; }
.d-signup.again { margin-bottom: 16px; }


.sx { --sx-c: var(--acc); --sx-stripe: rgba(28, 28, 31, 0.42); container-type: inline-size; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: -2px 0 -2px; }
.light .sx, .cust-light .sx { --sx-stripe: rgba(255, 255, 255, 0.5); }


.sx button { cursor: pointer; -webkit-tap-highlight-color: transparent; }


.sx-k { position: absolute; display: block; border-radius: 4px; background: var(--sx-c); left: calc(var(--t0, 0) / var(--win, 1) * 100%); width: max(3px, calc(var(--d, 0) / var(--win, 1) * 100%)); }
.sx-k.k-think { background: color-mix(in srgb, var(--sx-c) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--sx-c); }
.sx-k.k-write { background-image: repeating-linear-gradient(-45deg, var(--sx-stripe) 0 2px, transparent 2px 6px); }
.sx-k.bad { background: color-mix(in srgb, var(--red) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--red); background-image: none; }


.sx-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; text-align: left; }
.sx-h:hover { background: var(--card); color: var(--text-2); }
.sx.live .sx-h { color: var(--text-2); }
.sx-hi { display: grid; place-items: center; width: 14px; height: 14px; flex: none; }
.sx-hi svg { width: 14px; height: 14px; transition: transform 0.18s; }
.sx.open .sx-hi svg { transform: rotate(90deg); }
.sx-ht { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-mini { position: relative; flex: none; width: 96px; height: 6px; border-radius: 3px; background: var(--raise); overflow: hidden; }
.sx-mini .sx-k { top: 0; bottom: 0; border-radius: 1px; box-shadow: none; }
.sx-mini .sx-k.k-think { background: color-mix(in srgb, var(--sx-c) 45%, transparent); }
.sx-mini .sx-k.bad { background: var(--red); }


.sx-b { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px 6px; margin-left: 1px; border-left: 2px solid var(--line-2); }
.sx-wrap { position: relative; }
.sx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sx-scale, .sx-btn, .sx-x { display: grid; grid-template-columns: 16px minmax(0, 1fr) 48px minmax(120px, 34%); column-gap: 10px; align-items: center; }
.sx-scale { padding: 0 8px; min-height: 22px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sx-scale > .sx-gap { grid-column: 2 / 4; }
.sx-scale .sx-tr { position: relative; align-self: stretch; min-height: 22px; overflow: hidden; border-bottom: 1px solid var(--line); }
.sx-scale .sx-tr span { position: absolute; bottom: 4px; left: calc(var(--x) / var(--win, 1) * 100%); transform: translateX(-50%); white-space: nowrap; }
.sx-scale .sx-tr span:first-child { transform: none; }
.sx-scale .sx-tr span::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 4px; background: var(--line-2); }
.sx-scale .sx-tr span:first-child::before { left: 0; }
.sx-btn { width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; }
.sx-btn:hover, .sx-row.sel > .sx-btn { background: var(--card); }
.sx-btn:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.sx-ico { display: grid; place-items: center; color: var(--text-3); }
.sx-ico svg { width: 14px; height: 14px; }
.sx-row.bad .sx-ico, .sx-row.bad .sx-s { color: var(--red); }
.sx-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-l b { font-weight: 500; color: var(--text); }
.sx-s { color: var(--text-3); }
.sx-d { text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-row.run .sx-d { color: var(--text); }
.sx-btn .sx-tr { position: relative; align-self: stretch; min-height: 34px; }
.sx-btn .sx-k { top: 50%; height: 8px; transform: translateY(-50%); }
.sx-row.run .sx-l b { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
@media (pointer: coarse) { .sx-row.run .sx-l b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); animation: cx-breathe 1.6s ease-in-out infinite; } }

.sx-row.run .sx-btn .sx-k::after { content: ""; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--text); }
.sx-row.in { animation: sx-in 0.26s ease-out both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(3px); } }
.sx-now { position: absolute; top: 21px; bottom: 0; width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: var(--text); opacity: 0.7; pointer-events: none; }


.sx-x { padding: 0 8px; }
.sx-xb { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.sx-found { color: var(--text); overflow-wrap: anywhere; }
.sx-row.bad .sx-found { color: var(--red); }
.sx-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-meta.mono { font-family: var(--mono); font-size: 11.5px; }
.sx-thought { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-3); overscroll-behavior: contain; }
.sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 8px 0; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sx-foot button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; }
.sx-foot button:hover { background: var(--card); color: var(--text); }
.sx-foot button svg { width: 13px; height: 13px; }


@container (max-width: 560px) {
  .sx-btn, .sx-x { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .sx-scale { grid-template-columns: 16px minmax(0, 1fr); }
  .sx-scale > .sx-gap { display: none; }
  .sx-scale .sx-tr { grid-column: 2; }
  .sx-btn { padding: 8px 8px 7px; align-items: start; }
  .sx-btn > .sx-ico { margin-top: 2px; }
  .sx-l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sx-btn > .sx-tr { grid-column: 2 / 4; min-height: 12px; margin-top: 5px; }
  .sx-btn .sx-k { height: 5px; }
  .sx-xb { grid-column: 2 / 4; }
  .sx-now { display: none; }
}
@container (max-width: 420px) { .sx-mini { display: none; } }
@media (pointer: coarse) { .sx-h, .sx-foot button { min-height: 44px; } .sx-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-row.run .sx-l b { animation: none; color: var(--text); background: none; }
  .sx-row.in { animation: none; }
  .sx-hi svg { transition: none; }
}


@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  select.field, .light select.field, .cust-light select.field { min-height: 44px; }
  
  .d-tlink { padding: 12px 8px; margin: -12px -8px; }
  
  textarea.d-field { font-size: 16px; }
  
  .pj-tabs button { min-height: 44px; }
  
  .pj-mcp p a, .pj-steps a { padding-block: 14px; }
}


.door.px > button.px-no { z-index: 5; display: inline-flex; align-items: center; gap: 7px; margin: -7px -10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font: 500 13px var(--mono); cursor: pointer; transition: opacity 0.35s, color 0.15s; }
.door.px > button.px-no:hover, .door.px > button.px-no[aria-expanded="true"] { color: var(--text); }
.door.px > button.px-no:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.wn-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--ice); }

.door.px > .wn-pop { position: absolute; z-index: 6; top: max(68px, calc(env(safe-area-inset-top) + 40px)); right: 22px; width: 312px; max-width: calc(100% - 24px); padding: 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32); text-align: left; cursor: auto; animation: wn-in 0.18s ease-out; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; scrollbar-width: none; }
.cust-light .door.px > .wn-pop { box-shadow: var(--d-shadow); }
.door.px > .wn-pop::-webkit-scrollbar { display: none; }
@keyframes wn-in { from { opacity: 0; transform: translateY(-6px); } }
.wn-h { margin: 0 12px 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-3); }
.wn-i { padding: 8px 12px 10px; }
.wn-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.wn-v { font: 500 12px var(--mono); color: var(--text-2); }
.wn-row time { margin-left: auto; white-space: nowrap; }

.wn-now { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ice); }
.wn-t { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.wn-i:first-of-type .wn-t { color: var(--text); }


@media (hover: none) { .door.px > button.px-no { padding: 15px 14px; margin: -15px -14px; } }
@media (max-width: 640px) {
  .door.px > button.px-no { font-size: 12px; }
  .door.px > .wn-pop { left: auto; right: 12px; width: min(312px, calc(100% - 24px)); top: max(54px, calc(env(safe-area-inset-top) + 32px)); }
}
@media (prefers-reduced-motion: reduce) { .door.px > .wn-pop { animation: none; } }


.content.ug-page, .content.pj-page { width: 100%; margin-inline: auto; }
.top:has(+ .content.ug-page) { width: 100%; max-width: 920px; margin-inline: auto; }
.top:has(+ .content.pj-page) { width: 100%; max-width: 1180px; margin-inline: auto; }


.lr { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); overflow: hidden; }
.light .lr, .cust-light .lr { box-shadow: 0 24px 64px rgba(20, 24, 40, 0.18); }
.lr::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .lr::backdrop, .cust-light .lr::backdrop { background: rgba(20, 20, 30, 0.28); }
.lr[open] { animation: lr-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lr-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.lr-body { display: flex; flex-direction: column; gap: 14px; max-height: inherit; padding: 20px 20px 14px; overflow-y: auto; scrollbar-width: none; }
.lr-body::-webkit-scrollbar { display: none; }
.lr-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 12px; align-items: start; }
.lr-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--acc-rgb), 0.14); color: var(--acc); }
.lr-ic svg { width: 18px; height: 18px; }
.lr-head h2 { margin: 2px 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.lr-head p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.lr-x { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); }
.lr-x:hover { background: var(--card-2); color: var(--text); }
.lr-x::after { content: ""; position: absolute; inset: -6px; }
.lr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lr-rule, .lr-agree { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.12s ease-out, background 0.12s ease-out; }
.lr-rule:hover { background: var(--card-2); }
.lr-rule.on { border-color: rgba(var(--acc-rgb), 0.5); background: rgba(var(--acc-rgb), 0.06); }
.lr-rule input, .lr-agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); }
.lr-rule > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; }
.lr-rule b { font-weight: 600; }
.lr-rule > span > span { color: var(--text-2); }
.lr-agree { font-size: 14px; font-weight: 550; }
.lr-agree.on { border-color: rgba(var(--acc-rgb), 0.6); }
.lr-agree.off { opacity: 0.55; cursor: default; }
.lr-err { margin: 0; }
.lr-foot { display: flex; justify-content: flex-end; gap: 8px; }
.lr-note { margin: -4px 0 0; font-size: 12px; text-align: right; }


@media (max-width: 560px) {
  .lr { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .lr-body { height: 100%; padding: 16px 16px max(14px, env(safe-area-inset-bottom)); }
  .lr-list { flex: 1 0 auto; }
  .lr-foot { position: sticky; bottom: 0; padding-top: 8px; background: var(--card); }
  .lr-foot .btn { flex: 1; justify-content: center; min-height: 44px; }
  .lr-rule, .lr-agree { min-height: 44px; }
}
@media (pointer: coarse) {
  .lr-rule, .lr-agree { min-height: 44px; }
  .lr-rule input, .lr-agree input { width: 20px; height: 20px; }
  .lr-foot .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lr[open] { animation: none; } }


.content.ug-page.pb { max-width: 900px; }
.top.pb-topbar:has(+ .content.pb) { max-width: 900px; }
.pb-col { display: flex; flex-direction: column; gap: 16px; }
.pb-p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pb-p b { color: var(--text); }
.pb-act { align-self: flex-start; justify-content: center; }


.pb-notice { display: flex; flex-direction: column; gap: 8px; }
.pb-notice.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--card)); }
.pb-notice.warn { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }
.pb-notice-by { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.pb-notice.ok .bl-h { color: var(--green-text); }
.pb-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--card-2); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }


.pb-hero { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.pb-hero .d-label { margin: 0; }
.pb-big-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.pb-big { margin: 0; font-size: 40px; font-weight: 650; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-big span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.pb-reset { margin: 0; font-size: 14px; color: var(--text-2); }
.pb-reset b { color: var(--text); font-weight: 600; }
.pb-meter { --fill: var(--text); --proj: var(--text-3); position: relative; height: 14px; border-radius: 99px; background: var(--raise); margin-top: 6px; }
.pb-meter.near, .pb-meter.out { --proj: var(--yellow); }
.pb-meter.extra { --fill: var(--peri); }
.pb-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.pb-meter i.used { background: var(--fill); }
.pb-meter i.proj { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--proj) 70%, transparent) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proj) 60%, transparent); }
.pb-meter .even { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text-2); box-shadow: 0 0 0 2px var(--card); }
.pb-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-scale b { color: var(--text); font-weight: 600; }
.pb-say { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.pb-say .dot { margin-top: 6px; flex: none; }
.pb-say.near, .pb-say.out { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }


.pb-extra { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pb-extra-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pb-extra-h { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pb-extra .pb-act { flex: none; }
.pl-state { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--raise); color: var(--text-2); letter-spacing: 0.01em; white-space: nowrap; }
.pl-state.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
.pl-state.warn { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }


.pb-card { display: flex; flex-direction: column; gap: 14px; }
.pb-burn { display: flex; flex-direction: column; gap: 6px; }
.pb-burn-plot { position: relative; height: 190px; margin-right: 6px; }
.pb-burn-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-burn-plot .plan { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.pb-burn-plot .even { stroke: var(--line-2); stroke-width: 1; }
.pb-burn-plot .area { fill: color-mix(in srgb, var(--text) 8%, transparent); }
.pb-burn-plot .used { fill: none; stroke: var(--text); stroke-width: 2.25; stroke-linejoin: round; }
.pb-burn-plot .proj { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 5 5; }
.pb-burn-plot .proj.near, .pb-burn-plot .proj.out { stroke: var(--yellow); }
.pb-burn-plot .proj.extra { stroke: var(--peri); }
.pb-burn-lab { position: absolute; left: 0; transform: translateY(calc(-100% - 4px)); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.pb-burn-lab.under { transform: translateY(4px); left: 16px; }
.pb-burn-now { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--card); }
.pb-burn-x { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -5px); }
.pb-burn-x i { width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--yellow); }
.pb-burn-x b { position: absolute; top: 14px; right: 4px; font-size: 12px; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.pb-burn-axis { position: relative; height: 16px; font-size: 11.5px; color: var(--text-3); }
.pb-burn-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pb-burn-axis span:first-child { transform: none; }
.pb-burn-axis span:last-child { transform: translateX(-100%); }
.pb-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-3); }
.pb-key span { display: inline-flex; align-items: center; gap: 6px; }
.pb-key i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--text); }
.pb-key i.k-proj { border-top: 2px dashed var(--text-3); }
.pb-key i.k-proj.near, .pb-key i.k-proj.out { border-top-color: var(--yellow); }
.pb-key i.k-proj.extra { border-top-color: var(--peri); }
.pb-key i.k-even { border-top: 1px solid var(--line-2); }
.pb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pb-nums div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-nums span { font-size: 12.5px; color: var(--text-3); }
.pb-nums b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }


.pb-stack { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; }
.pb-stack i { flex-basis: 0; min-width: 3px; }
.pb-stack .s0, .pb-where .s0 { --o: 100%; }
.pb-stack .s1, .pb-where .s1 { --o: 72%; }
.pb-stack .s2, .pb-where .s2 { --o: 52%; }
.pb-stack .s3, .pb-where .s3 { --o: 38%; }
.pb-stack .s4, .pb-where .s4 { --o: 28%; }
.pb-stack .s5, .pb-where .s5 { --o: 20%; }
.pb-stack i, .pb-where .sw { background: color-mix(in srgb, var(--text) var(--o), var(--raise)); }
.pb-stack i.f, .pb-where .sw.f { background: repeating-linear-gradient(135deg, var(--text-3) 0 2px, transparent 2px 4px); }
.pb-where { display: flex; flex-direction: column; margin-top: 4px; }
.pb-tr { display: grid; grid-template-columns: 10px minmax(0, 1fr) 64px 48px; gap: 12px; align-items: center; min-height: 42px; border-top: 1px solid var(--line); font-size: 14px; color: inherit; text-decoration: none; }
.pb-where .pb-tr:first-child { border-top: 0; }
.pb-tr .sw { width: 10px; height: 10px; border-radius: 3px; }
.pb-tr .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-tr .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tr .t svg { flex: none; color: var(--text-3); }
.pb-tr b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
a.pb-tr:hover .t span { text-decoration: underline; text-underline-offset: 3px; }
.pl-pct { font-size: 12.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }


.pb-how { padding: 4px 4px 12px; font-size: 13.5px; }
.pb-how summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-2); list-style: none; }
.pb-how summary::-webkit-details-marker { display: none; }
.pb-how summary svg:last-child { transition: transform 0.15s; }
.pb-how[open] summary svg:last-child { transform: rotate(90deg); }
.pb-how p { margin: 8px 0 0; line-height: 1.55; font-size: 13px; }


.pl-ask { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pl-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-amt { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.pl-amt b { font-size: 15px; font-weight: 600; }
.pl-amt span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pl-amt:hover { border-color: var(--text-3); }
.pl-amt.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--card-2); }
.pl-amt:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }
.pl-other { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pl-other .field { width: 110px; }
.pl-buys { margin: 0; font-size: 14px; color: var(--text-2); }
.pl-buys b { color: var(--text); font-weight: 600; }
.pl-note { width: 100%; }
.pl-fine { margin: 0; font-size: 12.5px; }
.pb-dlg { padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; scrollbar-width: none; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.pb-dlg::-webkit-scrollbar { display: none; }
.pb-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.pb-dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }

@media (max-width: 760px) {
  .pb-hero { padding: 18px 16px; }
  .pb-big { font-size: 34px; }
  .pb-big-row { flex-direction: column; align-items: flex-start; }
  .pb-extra { flex-wrap: wrap; }
  .pb-extra .pb-act { width: 100%; }
  .pb-burn-plot { height: 150px; }
  .pb-nums b { font-size: 17px; }
  .pb-tr { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .pb-tr .pl-pct { display: none; }
  .pl-amt { min-height: 54px; }
  .pl-note, .pl-other .field { font-size: 16px; min-height: 44px; }
  .pb-dlg { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .pb-dlg-in { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
  .pb-dlg .icon-btn { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
}
@media (max-width: 760px), (pointer: coarse) {
  .pb-act, .pb-dlg .pf-acts .btn { min-height: 44px; }
  .pb-how summary { min-height: 40px; }
}
@media (max-width: 360px) {
  .pl-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-big { font-size: 30px; }
  .pb-nums { gap: 8px; }
  .pb-nums b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .pb-how summary svg { transition: none; } }


.wl { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: 20px; background: var(--card); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; overscroll-behavior: contain; }
.light .wl, .cust-light .wl { box-shadow: 0 24px 64px rgba(20, 24, 40, 0.18); }
.wl[open] { display: flex; flex-direction: column; animation: wl-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wl:focus, .wl:focus-visible { outline: none; }
.wl::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.light .wl::backdrop, .cust-light .wl::backdrop { background: rgba(20, 20, 30, 0.3); }
@keyframes wl-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.wl-grab { display: none; }
.wl-x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); }
.wl-x:hover { background: var(--raise); color: var(--text); }
.wl-x::after { content: ""; position: absolute; inset: -6px; }


.wl-art { position: relative; flex: none; height: 228px; background: var(--side); border-bottom: 1px solid var(--line); overflow: hidden; }
.light .wl-art, .cust-light .wl-art { background: var(--card-2); }
.wl-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(var(--acc-rgb), 0.1), transparent 60%); pointer-events: none; }
.wl-track { display: flex; height: 100%; transition: transform 0.42s cubic-bezier(0.3, 0.9, 0.2, 1); }
.wl-slide { flex: 0 0 100%; min-width: 0; display: grid; place-items: center; padding: 28px; overflow: hidden; }


.wl-copy { display: grid; padding: 22px 28px 0; flex: none; }
.wl-words { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; visibility: hidden; }
.wl-words.on { visibility: visible; }
.wl-words.on > * { animation: wl-words 0.32s ease-out both; }
.wl-words.on > :nth-child(2) { animation-delay: 0.04s; }
.wl-words.on > :nth-child(3) { animation-delay: 0.08s; }
@keyframes wl-words { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wl-eye { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); line-height: 16px; }
.wl-words h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.wl-words p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }


.wl-foot { display: flex; align-items: center; gap: 8px; padding: 20px 28px 24px; flex: none; }
.wl-dots { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.wl-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line-2); transition: width 0.3s, background 0.3s; }
.wl-dots i.on { width: 22px; background: var(--text); }
.wl-foot .btn { box-sizing: border-box; min-height: 40px; padding: 0 18px; font-size: 14px; justify-content: center; }
.wl-foot .btn.line { min-width: 84px; }
.wl-foot .wl-next { min-width: 96px; }


.wl-box { width: 100%; max-width: 440px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); padding: 14px 14px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.wl-type { font-size: 15px; line-height: 22px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-type i { display: inline-block; width: 2px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--text); animation: wl-caret 1s steps(1) infinite; }
@keyframes wl-caret { 50% { opacity: 0; } }
.wl-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.wl-chip, .wl-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; white-space: nowrap; font-size: 13px; }
.wl-chip { border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); }
.wl-pill { border-radius: 999px; background: var(--card-2); font-weight: 550; color: var(--text); }
.wl-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 99px; background: var(--btn-bg); color: var(--btn-fg); }
.wl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; }
.wl-modes.one { grid-template-columns: minmax(0, 260px); justify-content: center; }
.wl-mode { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.wl-mode.on { border-color: rgba(var(--acc-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.12); }
.wl-mode b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.wl-mode span { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.wl-mode em { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.wl-side { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--side); }
.wl-item { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.wl-item .i { flex: none; color: var(--text-2); }
.wl-item .t { overflow: hidden; text-overflow: ellipsis; }
.wl-item.on { background: var(--raise); }
.wl-key { margin-left: auto; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; }
.wl-lab { margin: 8px 10px 2px; font-size: 11.5px; color: var(--text-3); }
.wl-plan { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.wl-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.wl-meter > span:last-child { white-space: nowrap; }
.wl-short { display: none; }
.wl-meter b { color: var(--text); }
.wl-bar { display: inline-flex; gap: 2px; flex: none; }
.wl-bar i { width: 7px; height: 12px; border-radius: 2px; background: var(--line-2); }
.wl-bar i.on { background: var(--green); animation: wl-fill 0.5s ease-out both; }
@keyframes wl-fill { from { transform: scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.wl-help { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 14px; font-size: 13px; color: var(--text-2); }
.wl-help > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wl-help b { color: var(--text); font-weight: 600; }
.wl-help-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--raise); color: var(--text); }


@media (max-width: 560px) {
  .wl { width: 100%; max-width: 100%; margin: auto 0 0; border-width: 1px 0 0; border-radius: 22px 22px 0 0; max-height: calc(100dvh - 16px); }
  .wl[open] { animation: wl-up 0.32s cubic-bezier(0.2, 0.9, 0.2, 1); overflow-y: auto; scrollbar-width: none; }
  .wl[open]::-webkit-scrollbar { display: none; }
  @keyframes wl-up { from { transform: translateY(100%); } to { transform: none; } }
  .wl-grab { display: block; position: absolute; top: 8px; left: 50%; z-index: 2; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--line-2); }
  .wl-x { top: 7px; right: 8px; width: 44px; height: 44px; } 
  .wl-x::after { display: none; }
  
  .wl-art { height: 226px; }
  .wl-slide { padding: 52px 20px 14px; }
  .wl-item { height: 28px; }
  .wl-long { display: none; }
  .wl-short { display: inline; }
  .wl-copy { padding: 18px 20px 0; }
  
  .wl-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 14px 20px max(20px, env(safe-area-inset-bottom)); }
  .wl-dots { grid-column: 1 / -1; justify-content: center; margin: 0 0 6px; height: 12px; }
  .wl-foot .btn, .wl-foot .btn.line, .wl-foot .wl-next { min-width: 0; min-height: 46px; }
  .wl-modes { gap: 8px; }
  .wl-mode { padding: 12px; }
  .wl-mode span { font-size: 12px; }
}
@media (max-width: 360px) {
  .wl-art { height: 220px; }
  .wl-slide { padding: 52px 16px 10px; }
  .wl-item { height: 27px; }
  .wl-mode em { display: none; }
  .wl-words h2 { font-size: 18.5px; }
  .wl-words p { font-size: 13.5px; }
  .wl-meter { gap: 8px; padding: 10px 12px; font-size: 11.5px; }
  .wl-bar i { width: 5px; }
}

@media (max-height: 500px) and (min-width: 561px) {
  .wl { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); }
  .wl[open] { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow-y: auto; }
  .wl-art { grid-row: 1 / 3; height: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .wl-slide { padding: 18px; }
  .wl-box, .wl-modes, .wl-side, .wl-plan { max-width: 100%; }
  .wl-long { display: none; }
  .wl-short { display: inline; }
  .wl-modes { grid-template-columns: 1fr; gap: 8px; }
  .wl-mode { padding: 10px 12px; }
  .wl-meter { gap: 8px 10px; padding: 10px 12px; font-size: 11.5px; }
  .wl-bar i { width: 6px; }
  .wl-copy { padding: 22px 24px 0; align-content: start; }
  .wl-foot { padding: 14px 24px 18px; }
}
@media (pointer: coarse) {
  .wl-x { width: 44px; height: 44px; }
  .wl-foot .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl[open], .wl-words.on > *, .wl-bar i.on, .wl-type i { animation: none; }
  .wl-track, .wl-dots i { transition: none; }
}


.wl-again { align-self: flex-start; }
@media (max-width: 760px) { .wl-again { align-self: stretch; justify-content: center; min-height: 44px; } }