/* Shared wallet design language. Loaded last; no task or billing behavior changes. */
:root { --radius: 18px; --shadow: 0 8px 28px rgba(0,0,0,.14); }
html[data-mode="light"] { --shadow: 0 8px 28px rgba(28,36,52,.045); }
body { line-height: 1.6; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, .field, textarea { transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s; }
:where(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.primary, .ghost, .chip, .auth-btn, .code-send { min-height: 44px; border-radius: 10px; }
.primary { border-color: transparent; }
.ghost, .chip { background: var(--field-bg); }
.field, textarea, .auth input { border-radius: 10px; min-height: 48px; }
.auth-turnstile { min-height: 65px; margin: 4px 0 14px; }
.auth .err.is-success { color: var(--ok); }
.field:focus, textarea:focus, .auth input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field { max-width: 100%; }
.stage-head { padding: 22px 24px 18px; }
.stage-head h1 { font-size: 22px; line-height: 1.4; letter-spacing: -.02em; }
.stage-body { padding: 24px; scroll-padding: 20px; }
.stage-frame, .bench, .feed-panel, .skill-card, .card, .clip, .admin-stat { border-radius: 18px; background: var(--panel); }
.skill-card, .card, .clip, .admin-stat { border: 1px solid var(--line); box-shadow: none; }
.skill-card { padding: 22px; }
.skill-card .row { flex-wrap: wrap; }
.modal-card, .user-drop, .notice-drop, .mention { border-radius: 16px; }
.user-drop, .notice-drop { max-height: calc(100dvh - 160px); overflow-y: auto; }
.user-drop button { min-height: 44px; }
.side .nav { gap: 6px; }
.side .nav button.on, html[data-mode="light"] .side .nav button.on { color: var(--accent); background: var(--accent-soft); }
.gen-split { gap: 18px; padding: 20px; }
.bench-scroll { min-height: 0; min-width: 0; padding: 24px 24px 20px; scroll-padding: 16px; }
.bench-go { flex: 0 0 auto; padding: 16px 24px; background: var(--panel); }
.bench-go .hint { margin-top: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.kind-switch { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--field-bg); }
.kind-switch button { flex: 1; min-width: 0; min-height: 44px; border-radius: 8px; }
.kind-switch button.on, html[data-mode="light"] .kind-switch button.on { background: var(--accent-soft); color: var(--accent); }
.spec-lock { border-radius: 10px; }
.model-block { gap: 8px; }
.model-summary, .budget { line-height: 1.7; }
#model.field { min-height: 48px; }
#durWrap { min-width: 0; width: 100%; }
#durWrap > .muted, #durVal { flex: 0 0 auto; white-space: nowrap; }
.dur-bar { flex: 1; width: auto; min-width: 0; }
#dur { width: 100%; min-width: 0; margin: 0; min-height: 44px; accent-color: var(--accent); }
.ref-card, .up-chip { border-radius: 12px; }
.clip-actions { gap: 8px; }
.clip-actions a, .clip-actions button { min-height: 44px; border-radius: 10px; }
.admin-tabs { gap: 4px; padding: 8px 16px; }
.admin-tabs button { min-height: 44px; border-radius: 8px; margin: 0; border-bottom: 0; }
.admin-tabs button.on { background: var(--accent-soft); color: var(--accent); }
.stats-cost-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.stats-cost-field { display: grid; grid-template-columns: minmax(0, 1fr) 82px auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field-bg); color: var(--text); font-size: 12px; }
.stats-cost-field span { min-width: 0; overflow-wrap: anywhere; }
.stats-cost-field input { width: 82px; min-height: 36px; padding: 6px 8px; }
.stats-cost-field small { color: var(--muted); white-space: nowrap; }
.price-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.price-console-head h2, .price-history h2 { margin: 0; font-size: 18px; }
.price-console-head p { margin: 4px 0 0; font-size: 13px; }
.price-console-status { min-height: 26px; margin: 8px 0; font-size: 13px; }
.price-console-status.error { color: var(--bad); }
.price-section { margin: 22px 0 0; }
.price-section h3 { margin: 0; padding: 0 0 9px; color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.price-row { display: grid; grid-template-columns: minmax(165px,1.2fr) minmax(230px,2fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.price-row.is-dirty { border-bottom-color: var(--accent); }
.price-model { display: grid; gap: 2px; min-width: 0; }
.price-model strong { font-size: 14px; overflow-wrap: anywhere; }
.price-model code, .price-model small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.price-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.price-field { display: grid; gap: 3px; min-width: 105px; color: var(--muted); font-size: 11px; }
.price-input { display: flex; align-items: center; min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg); color: var(--text); }
.price-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.price-input b { color: var(--muted); font-weight: 400; }
.price-input input { width: 80px; min-width: 0; height: 38px; padding: 0 4px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.price-actions { display: flex; gap: 8px; }
.price-actions button { white-space: nowrap; }
.price-history { margin: 30px 0 0; }
.price-history-list { margin-top: 10px; }
.price-history-list > div { display: grid; grid-template-columns: 140px minmax(120px,1fr) minmax(200px,2fr) 140px; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.price-history-list time, .price-history-list small { color: var(--muted); }
th { font-size: 12px; background: var(--field-bg); }
td { line-height: 1.6; }
#bill, #keyList { overflow-x: auto; }
.hist-kinds button { min-height: 44px; }
@media (hover:hover) {
  .primary:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 4px 16px var(--accent-soft); }
  .ghost:not(:disabled):hover, .chip:hover, .side .nav button:hover, .side .nav a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
  .skill-card:hover, .clip:hover { border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); }
}
button:not(:disabled):active { filter: brightness(.94); }
/* Tablet uses one scrolling column instead of two implicitly sized grid rows. */
@media (max-width: 1100px) and (min-width: 721px) {
  body.in-app .gen-split { display: block; overflow-y: auto; }
  .bench { height: auto; overflow: visible; }
  .bench-scroll { flex: none; overflow: visible; }
  .feed-panel { height: auto; min-height: 280px; margin-top: 18px; }
  #feed { flex: none; overflow: visible; }
}
@media (max-width:720px) {
  body.in-app .top { flex: 0 0 auto; overflow: visible; padding-left: max(10px,env(safe-area-inset-left)); padding-right: max(10px,env(safe-area-inset-right)); }
  body.in-app .workspace { padding-bottom: calc(52px + env(safe-area-inset-bottom,0px)); }
  body.in-app #app.wrap { min-height: 0; }
  body.in-app .gen-split { display: block; overflow-y: auto; overflow-x: hidden; padding: 12px; height: auto; scroll-padding: 16px; }
  body.in-app .bench { height: auto; overflow: visible; border-radius: 16px; }
  body.in-app .bench-scroll { flex: none; overflow: visible; padding: 16px; }
  body.in-app .bench-go { position: static; padding: 14px 16px 16px; border-radius: 0 0 16px 16px; }
  body.in-app .feed-panel { height: auto; min-height: 200px; margin-top: 12px; border-radius: 16px; }
  body.in-app #feed { flex: none; overflow: visible; padding: 8px 16px 16px; }
  .bench textarea { min-height: 144px; font-size: 16px; }
  body.in-app .bench .row { align-items: center; gap: 10px; }
  body.in-app .bench .row > select.field { flex: 1 1 0; width: auto !important; min-width: 0; }
  #durWrap .dur-bar { flex: 1; width: auto; min-width: 0; }
  #resWrap { width: 100%; }
  #resWrap .field { flex: 1; max-width: none; min-width: 0; }
  body.in-app .stage-head { padding: 18px 16px; }
  body.in-app .stage-body { padding: 16px 16px 24px; }
  .stage-head h1 { font-size: 20px; }
  .field, select.field, .auth input, textarea { font-size: 16px; }
  .dock button.on { color: var(--accent); background: var(--accent-soft); border-radius: 10px; }
  .dock { gap: 2px; }
  .admin-tabs { flex-wrap: nowrap; }
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .skill-card { padding: 18px; }
  .modal-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .notice-drop, .user-drop { max-width: calc(100vw - 24px); }
  .ref-card .ref-x, .clip-x { min-width: 36px; min-height: 36px; }
  .price-row { grid-template-columns: 1fr; gap: 10px; }
  .price-actions { justify-content: flex-start; }
  .price-history-list > div { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .price-history-list > div span { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}


.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}.route-card{border:1px solid var(--line,#2b3340);border-radius:14px;padding:14px;background:var(--panel,#111722)}.route-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}.route-card-head strong{font-size:15px}.route-card-head .muted{margin:4px 0 0;font-size:12px}.route-status{font-size:12px;color:var(--ok,#78d6a5);white-space:nowrap}.route-field{display:grid;gap:6px;margin-top:10px}.route-field>span{font-size:12px;color:var(--muted,#8d98a8)}.route-fallbacks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.route-policies{display:grid;grid-template-columns:1fr 1fr;gap:8px}.route-locked{font-size:12px;line-height:1.5;color:var(--muted,#8d98a8);border-top:1px solid var(--line,#2b3340);padding-top:10px;margin:12px 0 0}.route-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}@media(max-width:640px){.route-grid{grid-template-columns:1fr}.route-policies{grid-template-columns:1fr}.route-fallbacks{grid-template-columns:1fr}.route-actions{align-items:flex-start;flex-direction:column}}