:root {
  --authz-ink: #142033;
  --authz-muted: #657181;
  --authz-paper: #fbf8f2;
  --authz-panel: rgba(255, 255, 255, .92);
  --authz-line: rgba(20, 32, 51, .12);
  --authz-teal: #1e9188;
  --authz-teal-dark: #116e68;
  --authz-blue: #3b78a5;
  --authz-clay: #d7784c;
  --authz-gold: #b9852d;
  --authz-danger: #a8463d;
  --authz-success: #237b68;
  --authz-shadow: 0 24px 70px rgba(20, 32, 51, .1);
}

body.authorization-v2-preview {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% -6%, rgba(30, 145, 136, .16), transparent 31rem),
    radial-gradient(circle at 92% 8%, rgba(215, 120, 76, .13), transparent 26rem),
    var(--authz-paper);
  color: var(--authz-ink);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  line-height: 1.6;
}

.authorization-v2-preview * { box-sizing: border-box; }
.authorization-v2-preview button,
.authorization-v2-preview input,
.authorization-v2-preview select { font: inherit; }
.authorization-v2-preview button { cursor: pointer; }
.authorization-v2-preview button:disabled { cursor: wait; opacity: .58; }

.authz-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.authz-skip {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  transform: translateY(-180%);
  border-radius: .7rem;
  background: var(--authz-ink);
  color: white;
  padding: .65rem .9rem;
}
.authz-skip:focus { transform: translateY(0); }

.authz-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--authz-line);
  background: rgba(251, 248, 242, .9);
  backdrop-filter: blur(16px);
}
.authz-topbar__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.authz-brand { display: flex; align-items: center; gap: .78rem; color: inherit; text-decoration: none; }
.authz-brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  background: var(--authz-ink);
  color: #fff;
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
}
.authz-brand__copy strong { display: block; font-size: .95rem; }
.authz-brand__copy span { display: block; color: var(--authz-muted); font-size: .72rem; }
.authz-topbar__actions { display: flex; align-items: center; gap: .55rem; }
.authz-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.authz-service-card__icon .authz-icon { width: 1.2rem; height: 1.2rem; }

.authz-chip,
.authz-button,
.authz-icon-button {
  min-height: 42px;
  border: 1px solid var(--authz-line);
  border-radius: .85rem;
  background: white;
  color: var(--authz-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .66rem .9rem;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.authz-button:hover,
.authz-icon-button:hover { border-color: rgba(30, 145, 136, .45); transform: translateY(-1px); }
.authz-button--primary { border-color: var(--authz-ink); background: var(--authz-ink); color: white; }
.authz-button--soft { border-color: rgba(30, 145, 136, .2); background: rgba(30, 145, 136, .08); color: var(--authz-teal-dark); }
.authz-button--danger { color: var(--authz-danger); }
.authz-icon-button { width: 42px; padding: 0; }
.authz-chip { min-height: 32px; padding: .36rem .65rem; border-color: rgba(30,145,136,.2); background: rgba(30,145,136,.08); color: var(--authz-teal-dark); font-size: .72rem; }

.authz-main { padding-block: clamp(1.5rem, 4vw, 3.25rem) 5rem; }
.authz-hero {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.authz-hero__copy,
.authz-hero-overview,
.authz-user-purpose,
.authz-panel {
  border: 1px solid var(--authz-line);
  border-radius: 1.5rem;
  background: var(--authz-panel);
  box-shadow: var(--authz-shadow);
}
.authz-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 3vw, 2rem); }
.authz-eyebrow {
  margin: 0 0 .55rem;
  color: var(--authz-teal-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.authz-title {
  margin: 0;
  max-width: 18ch;
  font-family: "Noto Serif TC", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  line-height: 1.18;
}
.authz-lead { max-width: 46rem; margin: .65rem 0 0; color: var(--authz-muted); font-size: clamp(.88rem, 1.7vw, 1rem); }
.authz-hero-overview { padding: 1.15rem 1.25rem; }
.authz-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.authz-overview-head h2 { margin: 0; font-family: "Noto Serif TC", serif; font-size: 1.05rem; }
.authz-quick-guide { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; counter-reset: authz-step; }
.authz-quick-guide li { counter-increment: authz-step; border-radius: 999px; background: rgba(30,145,136,.08); color: var(--authz-teal-dark); padding: .35rem .55rem; font-size: .67rem; font-weight: 800; }
.authz-quick-guide li::before { content: counter(authz-step) ". "; }
.authz-user-purpose { display: flex; align-items: center; gap: .8rem; padding: 1.25rem; }
.authz-user-purpose__icon { flex: 0 0 auto; width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border-radius: .9rem; background: rgba(30,145,136,.1); color: var(--authz-teal-dark); }
.authz-user-purpose strong { display: block; font-size: .84rem; }
.authz-user-purpose p { margin: .25rem 0 0; color: var(--authz-muted); font-size: .74rem; }
.authz-dev-tools { margin: 0 0 1.2rem; border: 1px dashed var(--authz-line); border-radius: 1rem; background: rgba(255,255,255,.6); padding: .7rem 1rem; }
.authz-dev-tools summary { cursor: pointer; font-size: .74rem; font-weight: 800; }
.authz-dev-tools p { margin: .45rem 0; color: var(--authz-muted); font-size: .7rem; }
.authz-preview-tabs { display: grid; gap: .45rem; }
.authz-preview-tabs button {
  min-height: 40px;
  border: 1px solid var(--authz-line);
  border-radius: .75rem;
  background: white;
  color: var(--authz-muted);
  padding: .58rem .7rem;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
}
.authz-preview-tabs button[aria-pressed="true"] { border-color: var(--authz-teal); background: rgba(30,145,136,.09); color: var(--authz-teal-dark); }

.authz-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 1.2rem; }
.authz-panel { padding: clamp(1.15rem, 3vw, 1.6rem); box-shadow: 0 14px 44px rgba(20,32,51,.06); }
.authz-panel--wide { grid-column: 1 / -1; }
.authz-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.authz-panel__head h2 { margin: 0; font-family: "Noto Serif TC", serif; font-size: 1.25rem; }
.authz-panel__head p { margin: .3rem 0 0; color: var(--authz-muted); font-size: .78rem; }

.authz-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.authz-service-option { position: relative; }
.authz-service-option input { position: absolute; opacity: 0; pointer-events: none; }
.authz-service-card {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  border: 1px solid var(--authz-line);
  border-radius: 1rem;
  background: white;
  padding: .85rem;
  transition: .18s ease;
}
.authz-service-option input:focus-visible + .authz-service-card { outline: 3px solid rgba(30,145,136,.28); outline-offset: 2px; }
.authz-service-option input:checked + .authz-service-card { border-color: var(--authz-teal); background: rgba(30,145,136,.06); box-shadow: 0 0 0 2px rgba(30,145,136,.11); }
.authz-service-card__icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .65rem; background: rgba(30,145,136,.1); color: var(--authz-teal-dark); }
.authz-service-card strong { display: block; font-size: .82rem; }
.authz-service-card small { display: block; margin-top: .18rem; color: var(--authz-muted); font-size: .68rem; line-height: 1.45; }

.authz-access-mode { margin: 1rem 0 0; border: 0; padding: 0; }
.authz-access-mode legend { margin-bottom: .55rem; font-size: .75rem; font-weight: 800; }
.authz-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.authz-mode-option { position: relative; }
.authz-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.authz-mode-option span { display: block; height: 100%; border: 1px solid var(--authz-line); border-radius: 1rem; background: white; padding: .85rem; }
.authz-mode-option strong, .authz-mode-option small { display: block; }
.authz-mode-option strong { font-size: .8rem; }
.authz-mode-option small { margin-top: .2rem; color: var(--authz-muted); font-size: .68rem; }
.authz-mode-option input:checked + span { border-color: var(--authz-teal); background: rgba(30,145,136,.06); box-shadow: 0 0 0 2px rgba(30,145,136,.11); }
.authz-mode-option input:focus-visible + span { outline: 3px solid rgba(30,145,136,.28); outline-offset: 2px; }

.authz-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.authz-field { display: grid; gap: .34rem; }
.authz-field--wide { grid-column: 1 / -1; }
.authz-field label { color: var(--authz-ink); font-size: .74rem; font-weight: 800; }
.authz-field small { color: var(--authz-muted); font-size: .66rem; }
.authz-input,
.authz-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--authz-line);
  border-radius: .78rem;
  background: white;
  color: var(--authz-ink);
  padding: .7rem .8rem;
}
.authz-input:focus,
.authz-select:focus { outline: 3px solid rgba(30,145,136,.18); border-color: var(--authz-teal); }
.authz-form-actions { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.authz-message { min-height: 1.4em; margin: 0; color: var(--authz-muted); font-size: .76rem; }
.authz-message[data-tone="success"] { color: var(--authz-success); }
.authz-message[data-tone="error"] { color: var(--authz-danger); }

.authz-generated { margin-top: 1rem; border: 1px solid rgba(30,145,136,.22); border-radius: 1rem; background: rgba(30,145,136,.07); padding: .9rem; }
.authz-generated[hidden] { display: none; }
.authz-generated__head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .45rem; }
.authz-generated__head strong { font-size: .78rem; }
.authz-generated code { display: block; font-family: ui-monospace, monospace; font-size: .82rem; padding-block: .15rem; }

.authz-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.authz-metric { border: 1px solid var(--authz-line); border-radius: .95rem; background: rgba(255,255,255,.8); padding: .85rem; }
.authz-metric span { display: block; color: var(--authz-muted); font-size: .68rem; }
.authz-metric strong { display: block; margin-top: .2rem; font-size: 1.35rem; line-height: 1.1; }

.authz-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 160px auto; gap: .65rem; margin-bottom: 1rem; }
.authz-table-wrap { overflow-x: auto; }
.authz-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.authz-table th { padding: .7rem .65rem; border-bottom: 1px solid var(--authz-line); color: var(--authz-muted); font-size: .68rem; text-align: left; white-space: nowrap; }
.authz-table td { padding: .85rem .65rem; border-bottom: 1px solid rgba(20,32,51,.075); vertical-align: middle; }
.authz-code { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: .035em; }
.authz-code-card-list { display: none; }
.authz-code-card { border: 1px solid var(--authz-line); border-radius: 1rem; background: white; padding: .9rem; }
.authz-code-card + .authz-code-card { margin-top: .65rem; }
.authz-code-card__top { display: flex; justify-content: space-between; gap: .7rem; }
.authz-code-card dl { display: grid; grid-template-columns: 5rem 1fr; gap: .35rem .55rem; margin: .75rem 0; font-size: .72rem; }
.authz-code-card dt { color: var(--authz-muted); }
.authz-code-card dd { margin: 0; }

.authz-badge { display: inline-flex; align-items: center; min-height: 25px; border-radius: 999px; padding: .25rem .55rem; font-size: .64rem; font-weight: 900; white-space: nowrap; }
.authz-badge--created { background: rgba(20,32,51,.07); color: var(--authz-muted); }
.authz-badge--issued { background: rgba(59,120,165,.12); color: #2d678f; }
.authz-badge--redeemed { background: rgba(30,145,136,.12); color: var(--authz-teal-dark); }
.authz-badge--revoked { background: rgba(168,70,61,.12); color: var(--authz-danger); }
.authz-badge--archived { background: rgba(101,113,129,.12); color: var(--authz-muted); }

.authz-state-card { min-height: 220px; display: grid; place-items: center; border: 1px dashed rgba(20,32,51,.2); border-radius: 1.15rem; padding: 1.4rem; text-align: center; }
.authz-state-card i { width: 2.2rem; height: 2.2rem; color: var(--authz-muted); }
.authz-state-card h2 { margin: .8rem 0 .3rem; font-size: 1.05rem; }
.authz-state-card p { max-width: 34rem; margin: 0; color: var(--authz-muted); font-size: .78rem; }

.authz-user-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 1.2rem; }
.authz-redeem-card { align-self: start; }
.authz-user-id { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--authz-line); }
.authz-user-id__avatar { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--authz-ink); color: white; font-weight: 900; }
.authz-user-id strong,
.authz-user-id small { display: block; }
.authz-user-id small { color: var(--authz-muted); font-size: .68rem; }
.authz-demo-codes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.authz-demo-codes button { border: 1px solid var(--authz-line); border-radius: 999px; background: white; color: var(--authz-muted); padding: .35rem .55rem; font-size: .64rem; font-weight: 700; }
.authz-demo-codes button:hover { border-color: var(--authz-teal); color: var(--authz-teal-dark); }

.authz-entitlements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.authz-entitlement { border: 1px solid var(--authz-line); border-radius: 1.1rem; background: white; padding: 1rem; }
.authz-entitlement__top { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.authz-entitlement__title { display: flex; align-items: center; gap: .55rem; }
.authz-entitlement__title i { width: 1.15rem; height: 1.15rem; color: var(--authz-teal-dark); }
.authz-entitlement h3 { margin: 0; font-size: .82rem; }
.authz-entitlement p { margin: .6rem 0 0; color: var(--authz-muted); font-size: .69rem; }
.authz-entitlement__count { margin-top: 1rem; font-family: "Noto Serif TC", serif; font-size: 1.15rem; font-weight: 900; }
.authz-entitlement__count small { color: var(--authz-muted); font-family: "Noto Sans TC", sans-serif; font-size: .65rem; font-weight: 700; }
.authz-progress { height: .38rem; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: rgba(20,32,51,.08); }
.authz-progress span { display: block; height: 100%; border-radius: inherit; background: var(--authz-teal); }
.authz-entitlement .authz-button { width: 100%; margin-top: .85rem; }
.authz-blueprint-context { grid-template-columns: 1fr; }
.authz-user-access-head { align-items: center; }
.authz-redeem-details { margin-top: 1rem; border: 1px solid var(--authz-line); border-radius: 1rem; background: rgba(20,32,51,.025); }
.authz-redeem-details summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .9rem 1rem; font-size: .78rem; font-weight: 900; }
.authz-redeem-details__body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(260px,1.2fr); gap: 1rem; border-top: 1px solid var(--authz-line); padding: 1rem; }
.authz-redeem-details__body h3 { margin: 0; font-size: .9rem; }
.authz-redeem-details__body p { margin: .25rem 0 0; color: var(--authz-muted); font-size: .72rem; }

.authz-dialog { width: min(560px, calc(100% - 28px)); border: 0; border-radius: 1.25rem; padding: 0; box-shadow: 0 28px 90px rgba(20,32,51,.26); }
.authz-dialog::backdrop { background: rgba(20,32,51,.42); backdrop-filter: blur(3px); }
.authz-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--authz-line); padding: 1.15rem 1.25rem; }
.authz-dialog__head h2 { margin: 0; font-size: 1rem; }
.authz-dialog__body { padding: 1.25rem; }
.authz-detail-list { display: grid; grid-template-columns: 8rem 1fr; gap: .65rem; margin: 0; font-size: .78rem; }
.authz-detail-list dt { color: var(--authz-muted); }
.authz-detail-list dd { margin: 0; overflow-wrap: anywhere; }

.authz-toast { position: fixed; z-index: 70; right: 1rem; bottom: 1rem; width: min(390px, calc(100% - 2rem)); border: 1px solid var(--authz-line); border-left: 4px solid var(--authz-teal); border-radius: .9rem; background: white; box-shadow: var(--authz-shadow); padding: .85rem 1rem; }
.authz-toast[hidden] { display: none; }
.authz-toast[data-tone="error"] { border-left-color: var(--authz-danger); }
.authz-toast strong { display: block; font-size: .78rem; }
.authz-toast span { display: block; margin-top: .15rem; color: var(--authz-muted); font-size: .7rem; }

@media (max-width: 880px) {
  .authz-hero,
  .authz-grid,
  .authz-user-layout { grid-template-columns: 1fr; }
  .authz-preview-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .authz-toolbar { grid-template-columns: 1fr 1fr; }
  .authz-toolbar .authz-input { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .authz-shell { width: min(100% - 24px, 1180px); }
  .authz-topbar__inner { min-height: 64px; display: grid; grid-template-columns: 1fr; padding-block: .65rem; }
  .authz-topbar__actions { width: 100%; justify-content: stretch; }
  .authz-topbar__actions .authz-button { flex: 1 1 0; padding-inline: .65rem; }
  .authz-brand__copy span,
  .authz-topbar__actions .authz-chip { display: none; }
  .authz-main { padding-top: 1rem; }
  .authz-hero__copy,
  .authz-hero-overview,
  .authz-user-purpose,
  .authz-panel { border-radius: 1.15rem; }
  .authz-hero__copy { padding: 1.2rem; }
  .authz-title { font-size: 2rem; }
  .authz-service-grid,
  .authz-mode-grid,
  .authz-form-grid,
  .authz-metrics,
  .authz-entitlements,
  .authz-toolbar { grid-template-columns: 1fr; }
  .authz-field--wide,
  .authz-toolbar .authz-input { grid-column: auto; }
  .authz-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .authz-table-wrap { display: none; }
  .authz-code-card-list { display: block; }
  .authz-panel__head { display: block; }
  .authz-panel__head .authz-button { width: 100%; margin-top: .8rem; }
  .authz-form-actions { align-items: stretch; flex-direction: column; }
  .authz-form-actions .authz-button { width: 100%; }
  .authz-detail-list { grid-template-columns: 1fr; gap: .15rem; }
  .authz-detail-list dd { margin-bottom: .55rem; }
  .authz-overview-head { display: block; }
  .authz-quick-guide { margin-top: .7rem; }
  .authz-redeem-details__body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .authorization-v2-preview * { scroll-behavior: auto !important; transition: none !important; }
}