.app-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; gap: 30px; padding: 28px 20px; box-shadow: 8px 0 16px rgba(184, 188, 194, .66), -8px 0 16px var(--shadow-light); }
.console-brand { display: flex; align-items: center; gap: 13px; padding: 0 5px; }
.console-brand strong, .console-brand div > span { display: block; }
.console-brand div > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.sidebar nav { display: grid; gap: 12px; }
.nav-button { padding: 12px 15px; text-align: left; color: var(--muted); font-weight: 700; }
.nav-button.active { color: var(--violet); }
.sidebar-action { margin-top: auto; width: 100%; color: var(--muted); }

.workspace { min-width: 0; padding: 34px clamp(22px, 4vw, 56px) 58px; }
.workspace-header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.workspace-header h1 { margin: 0; font-size: 28px; }
.identity { min-width: 154px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px; border-radius: var(--radius-small); box-shadow: var(--convex-small); }
.identity span small, .identity span strong { display: block; text-align: right; }
.identity span small { margin-bottom: 3px; color: var(--muted); font-size: 9px; }
.identity span strong { font-size: 12px; }
.identity i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(56, 169, 159, .12); }
.toolbar, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.section-heading h2 { margin-bottom: 4px; }
.search-field { width: min(430px, 100%); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 20px; margin-bottom: 28px; }
.summary-item { min-height: 108px; padding: 21px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.summary-item span { display: block; color: var(--muted); font-size: 12px; }
.summary-item strong { display: block; margin-top: 11px; font: 700 27px/1.2 Consolas, monospace; }

.table-wrap { overflow-x: auto; padding: 6px 6px 20px; }
table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0 13px; }
th { padding: 0 13px 5px; color: var(--muted); font-size: 11px; text-align: left; }
td { padding: 14px 13px; background: var(--surface); box-shadow: 0 4px 8px rgba(184, 188, 194, .62), 0 -3px 7px rgba(255, 255, 255, .82); font-size: 13px; }
td:first-child { border-radius: var(--radius-small) 0 0 var(--radius-small); }
td:last-child { border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.table-actions { display: flex; flex-wrap: wrap; gap: 9px; min-width: 190px; }
.table-actions .button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.SUSPENDED { color: var(--amber); }
.status.REVOKED { color: var(--danger); }
.plugin-badge { display: inline-block; padding: 7px 9px; border-radius: 9px; color: var(--violet); box-shadow: var(--concave); font: 700 10px/1.2 Consolas, monospace; }
.plugin-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.account-table { min-width: 1040px; }
.account-name-button { display: grid; gap: 4px; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.account-name-button strong { color: var(--violet); }
.account-name-button span { color: var(--muted); font-size: 10px; }
.empty-state { padding: 56px 20px; text-align: center; color: var(--muted); border-radius: var(--radius); box-shadow: var(--concave); }

.build-plugin-grid { display: grid; gap: 18px; }
.build-plugin-card { --build-accent: var(--violet); width: 100%; display: grid; grid-template-columns: 48px minmax(190px, 1fr) auto 22px; align-items: center; gap: 18px; padding: 20px 22px; border: 0; border-radius: var(--radius); color: var(--text); background: var(--surface); box-shadow: var(--convex-small); cursor: pointer; text-align: left; transition: box-shadow 250ms ease, transform 250ms ease; }
.build-plugin-card:hover { box-shadow: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light); transform: translateY(-1px); }
.build-plugin-card:focus-visible { outline: 2px solid var(--build-accent); outline-offset: 3px; }
.build-plugin-card.tone-2 { --build-accent: var(--teal); }
.build-plugin-card.tone-3 { --build-accent: var(--amber); }
.build-plugin-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--build-accent); box-shadow: var(--concave); font: 700 20px/1 Consolas, monospace; }
.build-plugin-copy strong, .build-plugin-copy small { display: block; }
.build-plugin-copy strong { margin-bottom: 6px; font-size: 16px; }
.build-plugin-copy small { color: var(--muted); overflow-wrap: anywhere; }
.build-plugin-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.build-plugin-counts i { padding: 6px 9px; border-radius: 8px; color: var(--muted); box-shadow: var(--concave); font-size: 10px; font-style: normal; }
.build-plugin-arrow { color: var(--build-accent); font-size: 28px; line-height: 1; }
.build-detail-heading { align-items: flex-end; }
.text-button { margin: 0 0 14px; padding: 0; border: 0; color: var(--violet); background: transparent; cursor: pointer; font-weight: 700; }
.text-button::before { content: "‹ "; }
.build-id-explanation, .dialog-help { margin-bottom: 22px; padding: 16px 18px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.build-id-explanation p, .dialog-help { color: var(--muted); line-height: 1.7; }
.build-id-explanation p { margin: 6px 0 0; }
.build-table { min-width: 780px; }
.build-table code { white-space: nowrap; }

.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.info-block { padding: 24px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.info-block::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 17px; border-radius: 3px; background: var(--block-accent, var(--violet)); }
.info-block.tone-violet { --block-accent: #6d5dfc; }
.info-block.tone-teal { --block-accent: #38a99f; }
.info-block.tone-amber { --block-accent: #c69518; }
.info-block.tone-coral { --block-accent: #ff6b6b; }
.info-block h2 { margin-bottom: 10px; font-size: 18px; }
.info-block p { margin: 0; color: var(--muted); line-height: 1.75; }
.key-panel, .profile-panel { margin-top: 27px; padding: 24px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.key-panel { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); align-items: center; gap: 24px; }
.details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0; }
.details-list div { display: grid; gap: 5px; }
.details-list dt { color: var(--muted); font-size: 12px; }
.details-list dd { margin: 0; font-weight: 700; }
.license-list, .binding-groups { display: grid; gap: 22px; margin-top: 27px; }
.license-panel, .binding-panel { padding: 23px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.license-panel header, .binding-panel header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.license-panel header h3, .binding-panel header h3 { margin: 0; }
.license-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.license-meta div { padding: 13px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.license-meta span, .license-meta strong { display: block; }
.license-meta span { color: var(--muted); font-size: 10px; }
.license-meta strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.binding-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.binding-list { display: grid; gap: 14px; }
.binding-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px; border-radius: var(--radius-small); box-shadow: var(--convex-small); }
.binding-row strong, .binding-row span { display: block; overflow-wrap: anywhere; }
.binding-row span { margin-top: 5px; color: var(--muted); font-size: 11px; }

.account-detail-dialog { width: min(980px, calc(100% - 32px)); }
.account-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.account-detail-summary > div, .license-detail-grid > div { padding: 14px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.account-detail-summary span, .account-detail-summary strong, .license-detail-grid span, .license-detail-grid strong { display: block; }
.account-detail-summary span, .license-detail-grid span { color: var(--muted); font-size: 10px; }
.account-detail-summary strong, .license-detail-grid strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.account-license-list { display: grid; gap: 24px; }
.admin-license-card { padding: 22px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.admin-license-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-license-card h3 { margin: 0 0 4px; }
.license-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin-bottom: 18px; padding: 16px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.license-secret > div { min-width: 0; }
.license-secret span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.license-secret code { width: 100%; overflow-x: auto; padding: 10px 12px; white-space: nowrap; user-select: all; }
.license-secret.unavailable strong { color: var(--danger); font-size: 12px; }
.license-secret-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.license-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-binding-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.admin-binding-columns > section { padding: 16px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.admin-binding-columns h4 { margin: 0 0 12px; font-size: 13px; }
.admin-binding-row { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid rgba(112, 121, 138, .18); }
.admin-binding-row:first-of-type { border-top: 0; }
.admin-binding-row strong { overflow-wrap: anywhere; font-size: 12px; }
.admin-binding-row span, .compact-empty { margin: 0; color: var(--muted); font-size: 10px; }
.license-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.user-license-secret { margin-top: 2px; }

dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 0; border: 0; border-radius: var(--radius); color: var(--text); background: var(--surface); box-shadow: 12px 12px 24px #91969e, -12px -12px 24px var(--shadow-light); }
dialog::backdrop { background: rgba(77, 84, 96, .34); }
.dialog-form { padding: 26px; }
.dialog-form header, .dialog-form footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-form header { margin-bottom: 24px; }
.dialog-form header h2 { margin-bottom: 0; }
.dialog-form footer { justify-content: flex-end; margin-top: 24px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.icon-button { width: 40px; min-height: 40px; font-size: 24px; line-height: 1; }
.key-result { display: grid; gap: 18px; }
.key-result p { margin: 0; color: var(--muted); }
.key-result code { user-select: all; }