/* Scoped native Studio styles; the existing app owns global selectors. */
.tz-studio {
  --tz-primary: #2196f3;
  --tz-highlight: #ffd869;
  --tz-text: #e4e8ff;
  --tz-muted: #b7c0db;
  --tz-surface: #0b1223;
  --tz-input: #070d1b;
  --tz-border: #3f4c6a;
  --tz-error: #ff9c9c;
  --tz-success: #8ce0bc;
  color: var(--tz-text);
  font: 400 15px/1.5 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: left;
}
.tz-studio[hidden] { display: none !important; }
.tz-studio *, .tz-studio *::before, .tz-studio *::after { box-sizing: border-box; }
.tz-studio .tz-backdrop { position: fixed; inset: 0; z-index: 6100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(2 4 10 / .8); }
.tz-studio .tz-dialog { width: min(900px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; min-width: 0; background: var(--tz-surface); border: 1px solid var(--tz-border); border-radius: 16px; box-shadow: 0 20px 80px rgb(0 4 16 / .55); overflow: hidden; }
.tz-studio .tz-dialog:focus { outline: none; }
.tz-studio .tz-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 24px; border-bottom: 1px solid var(--tz-border); }
.tz-studio h2, .tz-studio h3, .tz-studio p, .tz-studio ul, .tz-studio dl { margin: 0; }
.tz-studio h2 { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--tz-text); }
.tz-studio h3 { font-size: 18px; line-height: 1.35; color: var(--tz-text); font-weight: 650; }
.tz-studio .tz-header-context { color: var(--tz-highlight); margin-bottom: 3px; font-size: 13px; }
.tz-studio .tz-content { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px; min-height: 0; scrollbar-gutter: stable; }
.tz-studio .tz-chain-section { display: grid; gap: 8px; margin-bottom: 20px; }
.tz-studio .tz-label, .tz-studio label { display: block; color: var(--tz-text); font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; margin: 0; }
.tz-studio .tz-chain-options { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tz-studio button { font-family: inherit; line-height: 1.3; cursor: pointer; text-transform: none; letter-spacing: normal; margin: 0; transition: background-color 120ms ease, border-color 120ms ease; }
.tz-studio .tz-chain-button { border: 1px solid var(--tz-border); border-radius: 10px; padding: 14px; background: var(--tz-input); color: var(--tz-text); text-align: left; display: grid; gap: 4px; }
.tz-studio .tz-chain-button strong { font-size: 16px; }
.tz-studio .tz-chain-button span { color: var(--tz-muted); font-size: 13px; }
.tz-studio .tz-chain-button[aria-pressed='true'] { border-color: var(--tz-primary); box-shadow: inset 0 0 0 1px var(--tz-primary); background: #102c46; }
.tz-studio .tz-context { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; padding-bottom: 20px; }
.tz-studio .tz-chain-tag { color: var(--tz-highlight); font-weight: 600; }
.tz-studio .tz-wallet-state { flex: 1; color: var(--tz-muted); font-size: 13px; }
.tz-studio .tz-address { display: block; width: 100%; font-size: 13px; color: var(--tz-muted); overflow-wrap: anywhere; }
.tz-studio .tz-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.tz-studio .tz-tab { min-height: 44px; border-radius: 8px; border: 1px solid transparent; padding: 9px 12px; background: transparent; color: var(--tz-muted); font-size: 14px; }
.tz-studio .tz-tab[aria-current='page'] { color: var(--tz-text); background: #143651; border-color: #39658b; }
.tz-studio .tz-form { display: grid; gap: 24px; margin: 0; }
.tz-studio .tz-section { display: grid; gap: 15px; min-width: 0; }
.tz-studio .tz-section + .tz-section { padding-top: 24px; border-top: 1px solid var(--tz-border); }
.tz-studio .tz-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.tz-studio .tz-field { display: grid; gap: 8px; min-width: 0; }
.tz-studio .tz-wide { grid-column: 1 / -1; }
.tz-studio input, .tz-studio select, .tz-studio textarea { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--tz-border); border-radius: 10px; padding: 12px 14px; background: var(--tz-input); color: var(--tz-text); font: inherit; box-shadow: none; margin: 0; line-height: 1.45; }
.tz-studio textarea { resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.tz-studio input::placeholder, .tz-studio textarea::placeholder { color: #9aa8c8; opacity: 1; }
.tz-studio select { appearance: auto; color-scheme: dark; padding-right: 14px; }
.tz-studio input[type='datetime-local'] { color-scheme: dark; }
.tz-studio input[type='checkbox'] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--tz-primary); }
.tz-studio :is(input, select, textarea):disabled { color: var(--tz-muted); opacity: 1; background: #131c2d; cursor: default; }
.tz-studio [aria-invalid='true'] { border-color: var(--tz-error); }
.tz-studio .tz-hint { font-size: 13px; line-height: 1.5; color: var(--tz-muted); overflow-wrap: anywhere; }
.tz-studio .tz-aligned-hint { padding-top: 29px; }
.tz-studio .tz-field-error { font-size: 13px; color: var(--tz-error); }
.tz-studio .tz-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; border: 1px solid #576585; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tz-text); background: #19253c; white-space: nowrap; width: auto; }
.tz-studio .tz-button.tz-primary { background: var(--tz-primary); color: #061222; border-color: var(--tz-primary); }
.tz-studio .tz-button.tz-danger { background: #ff9c9c; border-color: #ff9c9c; color: #310c13; }
.tz-studio .tz-button.tz-quiet { background: transparent; }
.tz-studio .tz-button:disabled { opacity: .65; cursor: default; }
.tz-studio .tz-button:hover:not(:disabled), .tz-studio .tz-tab:hover, .tz-studio .tz-chain-button:hover { border-color: #8cb7e0; }
.tz-studio .tz-primary:hover:not(:disabled) { background: #56b0f7; }
.tz-studio .tz-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; width: 44px; border: 1px solid var(--tz-border); border-radius: 10px; background: transparent; color: var(--tz-text); font-size: 28px; padding: 0; }
.tz-studio :is(button, input, select, textarea, a, summary):focus-visible { outline: 3px solid var(--tz-highlight); outline-offset: 3px; }
.tz-studio .tz-repeating, .tz-studio .tz-assets { display: grid; gap: 15px; }
.tz-studio .tz-repeat-row { display: grid; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--tz-border); }
.tz-studio .tz-repeat-row > .tz-button { justify-self: end; }
.tz-studio .tz-layer { display: grid; gap: 15px; padding: 15px; border: 1px solid var(--tz-border); border-radius: 10px; }
.tz-studio .tz-file-label { margin-bottom: -7px; }
.tz-studio .tz-file-input { padding: 8px; height: auto; }
.tz-studio .tz-file-input::file-selector-button { border: 1px solid #576585; border-radius: 8px; padding: 9px 12px; margin-right: 10px; background: #19253c; color: var(--tz-text); font: inherit; cursor: pointer; }
.tz-studio .tz-asset { border: 1px solid var(--tz-border); border-radius: 10px; min-width: 0; overflow: clip; }
.tz-studio summary { min-height: 48px; cursor: pointer; font-weight: 600; color: var(--tz-text); padding: 14px; overflow-wrap: anywhere; }
.tz-studio .tz-asset summary span { display: inline; margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--tz-muted); }
.tz-studio .tz-asset-body { display: grid; gap: 15px; padding: 0 14px 14px; }
.tz-studio .tz-asset-body > .tz-button { justify-self: end; }
.tz-studio .tz-artwork-preview { display: block; max-width: 100%; width: 180px; height: 180px; object-fit: contain; background: var(--tz-input); border: 1px solid var(--tz-border); border-radius: 10px; }
.tz-studio .tz-empty { color: var(--tz-muted); font-size: 14px; padding: 16px 0; }
.tz-studio .tz-notice { padding: 12px 14px; border-left: 3px solid var(--tz-highlight); background: #242331; border-radius: 0 8px 8px 0; font-size: 14px; overflow-wrap: anywhere; }
.tz-studio .tz-danger-text { color: #ffb5b5; border-left-color: var(--tz-error); background: #291d2c; }
.tz-studio .tz-action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tz-studio .tz-details { display: grid; gap: 12px; }
.tz-studio .tz-details > :not(summary) { margin: 0 0 12px; }
.tz-studio .tz-details summary { padding-left: 0; }
.tz-studio .tz-fees { padding: 20px; background: #10263b; border: 1px solid #416d94; border-radius: 10px; display: grid; gap: 12px; }
.tz-studio .tz-fees dl, .tz-studio .tz-review dl { display: grid; gap: 10px; }
.tz-studio :is(.tz-fees, .tz-review) dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.tz-studio :is(.tz-fees, .tz-review) dd { text-align: right; margin: 0; overflow-wrap: anywhere; }
.tz-studio .tz-fee-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 1px solid #416d94; }
.tz-studio .tz-fee-total strong { color: var(--tz-highlight); }
.tz-studio .tz-review { border-left: 3px solid var(--tz-primary); padding: 0 0 0 16px; display: grid; gap: 12px; }
.tz-studio .tz-operation:empty { display: none; }
.tz-studio .tz-operation { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--tz-border); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; }
.tz-studio .tz-status-error { color: #ffc3c3; border-color: #a95e6a; background: #291d2c; }
.tz-studio .tz-status-confirmed { color: var(--tz-success); border-color: #4a8678; background: #102b2b; }
.tz-studio .tz-status-unknown { border-color: var(--tz-highlight); }
.tz-studio .tz-operation ul { padding-left: 20px; }
.tz-studio a { color: #83c6ff; }
.tz-studio .tz-role-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.tz-studio .tz-invitation { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--tz-border); border-radius: 10px; }
.tz-studio .tz-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--tz-border); background: var(--tz-surface); }
.tz-studio .tz-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 600px) {
  .tz-studio .tz-backdrop { padding: 8px; align-items: flex-end; }
  .tz-studio .tz-dialog { max-height: calc(100dvh - 16px); width: 100%; }
  .tz-studio .tz-header { padding: 15px; }
  .tz-studio h2 { font-size: 22px; }
  .tz-studio .tz-content { padding: 16px; scrollbar-gutter: auto; }
  .tz-studio .tz-form-grid { grid-template-columns: minmax(0, 1fr); }
  .tz-studio .tz-aligned-hint { padding-top: 0; }
  .tz-studio .tz-chain-options { gap: 10px; }
  .tz-studio .tz-chain-button { padding: 12px; }
  .tz-studio .tz-footer { padding: 12px 15px max(12px, env(safe-area-inset-bottom)); gap: 10px; align-items: stretch; }
  .tz-studio .tz-footer > .tz-button { align-self: end; }
  .tz-studio .tz-footer-actions { gap: 8px; }
  .tz-studio .tz-footer-actions .tz-button { flex: 1 1 auto; }
  .tz-studio .tz-button { padding-left: 12px; padding-right: 12px; }
  .tz-studio .tz-fees { padding: 15px; }
  .tz-studio .tz-wallet-state { flex-basis: 55%; }
  .tz-studio input, .tz-studio select, .tz-studio textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tz-studio button { transition: none; } }