.sonora-studio { --sonora-accent: #8b78ff; --sonora-mint: #39d4c5; --sonora-bg: #0e1020; container-type: inline-size; min-height: 100%; display: grid; grid-template-columns: 196px minmax(0, 1fr); overflow: hidden; color: #f4f4fb; background: var(--sonora-bg); }
.sonora-sidebar { min-height: 0; display: flex; flex-direction: column; padding: 22px 14px 16px; border-right: 1px solid rgba(255,255,255,.07); background: #0a0c18; }
.sonora-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 25px; }
.sonora-brand img { width: 39px; height: 39px; }
.sonora-brand span { display: grid; line-height: 1; }.sonora-brand strong { font-size: 17px; letter-spacing: -.04em; }.sonora-brand small { margin-top: 4px; color: #898da6; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.sonora-sidebar nav { display: grid; gap: 5px; }.sonora-sidebar nav button { min-height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 0; border-radius: 10px; color: #9296ac; background: transparent; font: inherit; font-size: 11px; text-align: left; }.sonora-sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.05); }.sonora-sidebar nav button.is-current { color: #fff; background: linear-gradient(90deg, rgba(139,120,255,.23), rgba(139,120,255,.06)); box-shadow: inset 2px 0 var(--sonora-accent); }.sonora-sidebar nav .icon { width: 17px; height: 17px; }
.sonora-connection { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 9px; border-top: 1px solid rgba(255,255,255,.06); }.sonora-connection > i { width: 7px; height: 7px; border-radius: 50%; background: #e2a94f; box-shadow: 0 0 10px currentColor; }.is-connected .sonora-connection > i { color: var(--sonora-mint); background: var(--sonora-mint); }.sonora-connection span { display: grid; gap: 2px; }.sonora-connection strong { font-size: 9px; }.sonora-connection small { color: #686c83; font-size: 8px; }
.sonora-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; background: radial-gradient(circle at 75% -20%, rgba(139,120,255,.13), transparent 40%), #101221; }
.sonora-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 27px; border-bottom: 1px solid rgba(255,255,255,.07); }.sonora-header p,.sonora-kicker { margin: 0 0 3px; color: var(--sonora-mint); font-size: 8px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }.sonora-header h1 { margin: 0; font-size: 24px; letter-spacing: -.045em; }.sonora-header__actions { display: flex; gap: 9px; }.sonora-search { width: min(250px, 28vw); min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }.sonora-search .icon { width: 15px; color: #75798f; }.sonora-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; font-size: 10px; }.sonora-search input::placeholder { color: #686c82; }
.sonora-primary { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #8f7aff, #6858d8); box-shadow: 0 8px 22px rgba(90,75,205,.25); font: inherit; font-size: 10px; font-weight: 650; }.sonora-primary:hover { filter: brightness(1.1); }.sonora-primary:disabled { opacity: .55; }.sonora-primary .icon { width: 14px; }
.sonora-content { min-height: 0; overflow: auto; padding: 22px 27px 30px; }.sonora-overview { display: grid; grid-template-columns: repeat(3,minmax(105px, 145px)) minmax(150px,1fr); gap: 10px; margin-bottom: 16px; }.sonora-overview article { min-height: 71px; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.035); }.sonora-overview article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--sonora-accent); background: rgba(139,120,255,.11); }.sonora-overview article .icon { width: 16px; }.sonora-overview article div { display: grid; }.sonora-overview article strong { font-size: 20px; letter-spacing: -.04em; }.sonora-overview article small { color: #74788e; font-size: 8px; text-transform: uppercase; }.sonora-wave { min-height: 71px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 15px; overflow: hidden; border: 1px solid rgba(57,212,197,.12); border-radius: 13px; background: linear-gradient(100deg,rgba(57,212,197,.04),rgba(139,120,255,.08)); }.sonora-wave i { width: 3px; height: var(--h); border-radius: 3px; background: linear-gradient(var(--sonora-mint),var(--sonora-accent)); opacity: .68; animation: sonora-pulse 2.8s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -12ms); }
.sonora-panel { border: 1px solid rgba(255,255,255,.075); border-radius: 14px; overflow: hidden; background: rgba(8,10,20,.54); }.sonora-panel > header { min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.07); }.sonora-panel h2 { margin: 0 0 3px; font-size: 13px; }.sonora-panel p { margin: 0; color: #74788e; font-size: 9px; }.sonora-panel header button,.sonora-track > button { border: 0; color: #85899e; background: transparent; }.sonora-panel header .icon { width: 15px; }
.sonora-table-head,.sonora-track { min-width: 670px; display: grid; grid-template-columns: minmax(210px,1.6fr) minmax(110px,1fr) minmax(100px,.8fr) 55px 55px 28px; align-items: center; gap: 9px; padding: 0 16px; }.sonora-table-head { min-height: 32px; color: #65697f; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 8px; text-transform: uppercase; }.sonora-track { min-height: 55px; color: #8b8fa4; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 9px; }.sonora-track:last-child { border-bottom: 0; }.sonora-track:hover { background: rgba(255,255,255,.025); }.sonora-track__identity { min-width: 0; display: flex; align-items: center; gap: 10px; }.sonora-track__identity > span:last-child { min-width: 0; display: grid; gap: 3px; }.sonora-track__identity strong,.sonora-track__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sonora-track__identity strong { color: #f0f0f7; font-size: 10px; }.sonora-track__identity small { color: #72768c; font-size: 8px; }.sonora-track__number { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #a99bff; background: rgba(139,120,255,.1); font-size: 8px; }
.sonora-empty,.sonora-offline { min-height: 270px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 30px; text-align: center; }.sonora-empty > .icon { width: 28px; color: var(--sonora-accent); }.sonora-empty h2,.sonora-offline h2 { margin: 0; font-size: 18px; }.sonora-empty p,.sonora-offline p { max-width: 52ch; margin: 0; color: #777b91; font-size: 10px; line-height: 1.55; }.sonora-empty button { margin-top: 8px; }.sonora-offline > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; color: #9d8dff; background: rgba(139,120,255,.1); }.sonora-offline .icon { width: 29px; }.sonora-offline code { color: #c0b7ff; }
.sonora-collection-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: linear-gradient(120deg,rgba(139,120,255,.11),rgba(57,212,197,.04)); }.sonora-collection-intro > div > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 11px; color: var(--sonora-mint); background: rgba(57,212,197,.1); }.sonora-collection-intro .icon { width: 18px; }.sonora-collection-intro h2 { margin: 0 0 5px; font-size: 19px; }.sonora-collection-intro p { max-width: 52ch; margin: 0; color: #85899e; font-size: 10px; line-height: 1.5; }.sonora-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; }.sonora-card { min-height: 218px; position: relative; display: flex; flex-direction: column; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.035); }.sonora-card__art { min-height: 112px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 10px; color: rgba(255,255,255,.78); background: radial-gradient(circle at 70% 28%,rgba(57,212,197,.45),transparent 30%),linear-gradient(145deg,#5949bd,#292447); }.sonora-card__art .icon { width: 32px; }.sonora-card small { color: var(--sonora-mint); font-size: 7px; letter-spacing: .15em; }.sonora-card h3 { margin: 4px 0; font-size: 12px; }.sonora-card p { margin: 0; color: #777b90; font-size: 9px; }.sonora-visibility { position: absolute; top: 19px; right: 19px; padding: 4px 6px; border-radius: 7px; color: #fff; background: rgba(10,12,24,.58); font-size: 7px; text-transform: uppercase; }.sonora-empty--wide { grid-column: 1/-1; border: 1px dashed rgba(255,255,255,.1); border-radius: 14px; }
.sonora-import-card { max-width: 920px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 22px; margin: 0 auto; padding: clamp(22px,4vw,42px); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(145deg,rgba(139,120,255,.09),rgba(255,255,255,.025)); }.sonora-drop-mark { grid-column: 1; grid-row: 1/3; min-height: 360px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: radial-gradient(circle,rgba(57,212,197,.22),transparent 32%),#0b0d19; }.sonora-drop-mark .icon { width: 58px; height: 58px; color: #b3a9ff; z-index: 1; }.sonora-drop-mark i { position: absolute; width: 220px; height: 220px; border: 1px solid rgba(139,120,255,.2); border-radius: 50%; box-shadow: 0 0 0 42px rgba(139,120,255,.035),0 0 0 84px rgba(57,212,197,.025); }.sonora-import-card h2 { margin: 6px 0 10px; font-size: clamp(21px,3vw,32px); line-height: 1.08; letter-spacing: -.05em; }.sonora-import-card > div:nth-child(2) > p:last-child { margin: 0; color: #85899e; font-size: 10px; line-height: 1.6; }.sonora-import-form { display: grid; gap: 13px; }.sonora-file input { position: absolute; opacity: 0; pointer-events: none; }.sonora-file span { min-height: 72px; display: grid; grid-template-columns: 25px 1fr; align-items: center; column-gap: 8px; padding: 13px; border: 1px dashed rgba(139,120,255,.45); border-radius: 11px; color: #a99cff; background: rgba(139,120,255,.055); cursor: pointer; }.sonora-file .icon { grid-row: 1/3; width: 20px; }.sonora-file strong { overflow: hidden; color: #eae9f5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.sonora-file small { color: #767a91; font-size: 8px; }.sonora-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.sonora-form-grid label,.sonora-dialog label { display: grid; gap: 5px; color: #8d91a5; font-size: 8px; }.sonora-form-grid input,.sonora-form-grid select,.sonora-dialog input,.sonora-dialog textarea { min-width: 0; min-height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; outline: 0; color: #f1f0f8; background: rgba(255,255,255,.04); font: inherit; font-size: 9px; }.sonora-check { display: flex !important; align-items: center; grid-column: 1/-1; }.sonora-check input { min-height: 0; accent-color: var(--sonora-accent); }.sonora-submit { width: 100%; }
.sonora-dialog { width: min(410px,calc(100vw - 28px)); padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; color: #f4f4fb; background: #151729; box-shadow: 0 25px 70px rgba(0,0,0,.5); }.sonora-dialog::backdrop { background: rgba(3,4,10,.72); backdrop-filter: blur(4px); }.sonora-dialog form { padding: 23px; }.sonora-dialog h2 { margin: 0 0 18px; font-size: 19px; }.sonora-dialog label { margin-top: 12px; }.sonora-dialog textarea { min-height: 80px; padding: 8px; resize: vertical; }.sonora-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.sonora-dialog__actions > button:not(.sonora-primary) { border: 0; color: #aaaec0; background: transparent; }
@keyframes sonora-pulse { to { transform: scaleY(.55); opacity: .35; } }
@container (max-width: 760px) { .sonora-studio { grid-template-columns: 62px minmax(0,1fr); }.sonora-brand span,.sonora-sidebar nav span,.sonora-connection span { display:none; }.sonora-sidebar { padding-inline: 8px; }.sonora-brand { padding-inline: 3px; }.sonora-sidebar nav button { justify-content:center; }.sonora-overview { grid-template-columns: repeat(3,1fr); }.sonora-wave { display:none; }.sonora-import-card { grid-template-columns:1fr; }.sonora-drop-mark { grid-column:1;grid-row:auto;min-height:150px; }.sonora-header__actions .sonora-primary span { display:none; } }
@container (max-width: 540px) { .sonora-header { align-items:flex-start;flex-direction:column;padding:14px 18px; }.sonora-header__actions,.sonora-search { width:100%; }.sonora-content { padding:15px 18px 24px; }.sonora-overview article > span { display:none; }.sonora-overview article { justify-content:center;text-align:center; }.sonora-collection-intro { align-items:flex-start;flex-direction:column; }.sonora-form-grid { grid-template-columns:1fr; }.sonora-check { grid-column:auto; } }
@media (prefers-reduced-motion: reduce) { .sonora-wave i { animation: none; } }

/* Administration du catalogue : filtres, propriétaires et publication en lot. */
.sonora-panel > header { gap: 16px; padding-block: 9px; }
.sonora-panel__tools { display: flex; align-items: center; gap: 8px; }
.sonora-filter { display: flex; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.045); }
.sonora-filter button { min-height: 27px; padding: 0 9px; border-radius: 7px; font-size: 8px; }
.sonora-filter button.is-current { color: #fff; background: rgba(139,120,255,.22); }
.sonora-bulk { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(139,120,255,.18); background: rgba(139,120,255,.08); }
.sonora-bulk[hidden] { display: none; }
.sonora-bulk strong { color: #d8d2ff; font-size: 10px; }
.sonora-bulk > span { color: #777b91; font-size: 8px; }
.sonora-bulk > div { display: flex; gap: 7px; margin-left: auto; }
.sonora-bulk button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; color: #b1b4c5; background: rgba(255,255,255,.06); font-size: 8px; }
.sonora-table-head,.sonora-track { min-width: 770px; grid-template-columns: 22px minmax(180px,1.5fr) minmax(115px,1fr) 72px minmax(100px,.8fr) 55px 28px; }
.sonora-table-head label,.sonora-track > label { display: grid; place-items: center; }
.sonora-table-head input,.sonora-track input { width: 14px; height: 14px; accent-color: var(--sonora-accent); }
.sonora-owner { overflow: hidden; color: #a9a2d7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.sonora-owner.is-anonymous { color: #e0a052; }
.sonora-status { width: fit-content; padding: 4px 7px; border-radius: 999px; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.sonora-status--public { color: #72e1d4; background: rgba(57,212,197,.11); }
.sonora-status--private { color: #c5bbff; background: rgba(139,120,255,.12); }
.sonora-import-card > div:nth-child(2) > p:not(.sonora-kicker) { margin: 0; color: #85899e; font-size: 10px; line-height: 1.6; }
.sonora-actor { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 10px; border: 1px solid rgba(224,160,82,.2); border-radius: 10px; background: rgba(224,160,82,.07); }
.sonora-actor.is-authorized { border-color: rgba(57,212,197,.18); background: rgba(57,212,197,.06); }
.sonora-actor > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #e0a052; background: rgba(224,160,82,.1); }
.sonora-actor.is-authorized > span { color: var(--sonora-mint); background: rgba(57,212,197,.1); }
.sonora-actor .icon { width: 14px; }
.sonora-actor div { min-width: 0; display: grid; gap: 2px; }
.sonora-actor strong { font-size: 9px; }
.sonora-actor small { overflow: hidden; color: #777b91; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.sonora-file input:disabled + span { cursor: not-allowed; opacity: .45; }

@container (max-width: 760px) {
    .sonora-panel > header { align-items: flex-start; flex-direction: column; }
    .sonora-panel__tools { width: 100%; justify-content: space-between; }
    .sonora-bulk > span { display: none; }
}

/* Édition des collections et des droits Sonora. */
.sonora-studio button,.sonora-studio input,.sonora-studio select { font-family: inherit; }
.sonora-studio button { cursor: pointer; }
.sonora-studio button:disabled { cursor: not-allowed; opacity: .45; }
.sonora-studio :is(button,input,select,textarea):focus-visible { outline: 3px solid color-mix(in srgb,var(--sonora-accent),white 22%); outline-offset: 2px; }
.sonora-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out; }
.sonora-card:hover { border-color: rgba(139,120,255,.32); background: rgba(139,120,255,.07); transform: translateY(-2px); }
.sonora-card__copy { min-width: 0; display: grid; gap: 4px; }
.sonora-card__copy strong { overflow: hidden; color: #f3f2fa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sonora-card__copy > span { min-height: 28px; overflow: hidden; color: #9296aa; font-size: 9px; line-height: 1.45; }
.sonora-card__copy em { margin-top: 4px; color: #b7b1d8; font-size: 8px; font-style: normal; }

.sonora-editor { max-width: 1050px; display: grid; gap: 16px; margin: 0 auto; }
.sonora-editor__top { min-height: 34px; display: flex; align-items: center; justify-content: space-between; }
.sonora-editor__top > button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; color: #b7b9c9; background: transparent; font-size: 10px; }
.sonora-editor__top > button:hover { color: #fff; }
.sonora-editor__top .icon { width: 14px; }
.sonora-editor__meta { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 20px; padding: 20px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: linear-gradient(125deg,rgba(139,120,255,.09),rgba(8,10,20,.55)); }
.sonora-editor__art { min-height: 148px; display: grid; place-items: center; border-radius: 12px; color: #e7e3ff; background: radial-gradient(circle at 70% 25%,rgba(57,212,197,.38),transparent 28%),linear-gradient(145deg,#5949bd,#26213f); }
.sonora-editor__art .icon { width: 42px; }
.sonora-editor__meta form { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; }
.sonora-editor__meta form > div { grid-column: 1/-1; }
.sonora-editor__meta h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.03em; }
.sonora-editor__meta p { margin: 0; color: #9296aa; font-size: 10px; }
.sonora-editor__meta label,.sonora-add-track > label,.sonora-access form > label { display: grid; gap: 6px; color: #a4a7b9; font-size: 9px; }
.sonora-editor__meta input,.sonora-editor__meta select,.sonora-add-track select,.sonora-access input { min-width: 0; min-height: 39px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: 0; color: #f5f4fb; background: rgba(255,255,255,.045); font-size: 10px; }
.sonora-editor__meta select,.sonora-add-track select { color-scheme: dark; }

.sonora-sequencer { overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(8,10,20,.52); }
.sonora-sequencer > header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sonora-sequencer h2 { margin: 0 0 4px; font-size: 14px; }
.sonora-sequencer header p { margin: 0; color: #85899d; font-size: 9px; line-height: 1.45; }
.sonora-add-track { display: grid; grid-template-columns: 155px minmax(0,1fr); align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(139,120,255,.045); }
.sonora-add-track > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.sonora-add-track button { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 9px; color: #d9d5f7; background: rgba(139,120,255,.14); font-size: 9px; }
.sonora-add-track .icon { width: 13px; }
.sonora-sequence { margin: 0; padding: 0; list-style: none; }
.sonora-sequence li { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.05); }
.sonora-sequence li:last-child { border-bottom: 0; }
.sonora-sequence li > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.sonora-sequence li strong,.sonora-sequence li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sonora-sequence li strong { font-size: 10px; }
.sonora-sequence li small { color: #85899e; font-size: 8px; }
.sonora-sequence li > div { display: flex; align-items: center; gap: 5px; }
.sonora-sequence li button { min-width: 31px; min-height: 31px; display: grid; place-items: center; padding: 0 9px; border: 0; border-radius: 8px; color: #aeb1c3; background: rgba(255,255,255,.055); font-size: 8px; }
.sonora-sequence li button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.1); }
.sonora-sequence li button .icon { width: 12px; }
.sonora-sequence [data-action="move-track-up"] .icon { transform: rotate(-90deg); }
.sonora-sequence [data-action="move-track-down"] .icon { transform: rotate(90deg); }
.sonora-sequence .sonora-remove { display: inline-flex; color: #e6a0a8; background: rgba(216,75,91,.08); }
.sonora-sequence .sonora-sequence__empty { min-height: 110px; display: grid; place-items: center; color: #85899e; font-size: 10px; }

.sonora-access { max-width: 940px; display: grid; gap: 16px; margin: 0 auto; }
.sonora-access__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); align-items: center; gap: 24px; padding: 21px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: linear-gradient(120deg,rgba(139,120,255,.1),rgba(57,212,197,.035)); }
.sonora-access__intro > div { display: flex; align-items: center; gap: 14px; }
.sonora-access__intro > div > span { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--sonora-mint); background: rgba(57,212,197,.1); }
.sonora-access__intro .icon { width: 20px; }
.sonora-access h2 { margin: 0 0 5px; font-size: 17px; }
.sonora-access p { max-width: 66ch; margin: 0; color: #9699ab; font-size: 10px; line-height: 1.55; }
.sonora-access form { display: grid; gap: 7px; }
.sonora-access form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.sonora-role-panel { overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(8,10,20,.52); }
.sonora-role-panel > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sonora-role-panel header h2 { font-size: 14px; }
.sonora-role-list { display: grid; grid-template-columns: 1fr 1fr; }
.sonora-role { min-height: 92px; position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 11px; padding: 17px; border-bottom: 1px solid rgba(255,255,255,.055); cursor: pointer; }
.sonora-role:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.055); }
.sonora-role:hover { background: rgba(255,255,255,.025); }
.sonora-role input { width: 16px; height: 16px; accent-color: var(--sonora-accent); }
.sonora-role > span { min-width: 0; display: grid; gap: 4px; }
.sonora-role strong { font-size: 11px; }
.sonora-role small { color: #9a9daf; font-size: 9px; }
.sonora-role em { overflow: hidden; color: #777b90; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.sonora-role b { position: absolute; top: 14px; right: 14px; color: #8e91a5; font-size: 7px; font-weight: 600; text-transform: uppercase; }
.sonora-access__notice { padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(224,160,82,.06); }
.sonora-access__notice code,.sonora-offline code { color: #d1caff; }
.sonora-access__empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.1); border-radius: 15px; text-align: center; }
.sonora-access__empty > .icon { width: 28px; color: var(--sonora-accent); }

@container (max-width: 760px) {
    .sonora-editor__meta { grid-template-columns: 110px minmax(0,1fr); }
    .sonora-editor__art { min-height: 110px; }
    .sonora-editor__meta form { grid-template-columns: 1fr; }
    .sonora-editor__meta form > div { grid-column: auto; }
    .sonora-access__intro { grid-template-columns: 1fr; }
}

@container (max-width: 540px) {
    .sonora-editor__meta { grid-template-columns: 1fr; }
    .sonora-editor__art { min-height: 120px; }
    .sonora-sequencer > header { align-items: flex-start; flex-direction: column; }
    .sonora-sequencer > header .sonora-primary { width: 100%; }
    .sonora-add-track { grid-template-columns: 1fr; }
    .sonora-sequence li { grid-template-columns: 30px minmax(0,1fr); }
    .sonora-sequence li > div { grid-column: 2; }
    .sonora-role-list { grid-template-columns: 1fr; }
    .sonora-role:nth-child(odd) { border-right: 0; }
    .sonora-access form > div { grid-template-columns: 1fr; }
}