:root {
    --green:#21634d;
    --green-dark:#173e32;
    --green-soft:#edf5f0;
    --ink:#233a32;
    --muted:#77857e;
    --line:#e5eae6;
    --bg:#f4f6f3;
    --danger:#b84848;
    --sidebar:232px;
    --radius:14px;
    font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
    color:var(--ink);
    font-size:14px;
    background:var(--bg)
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    line-height:1.6
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
a {
    color:inherit;
    text-decoration:none
}
button:disabled {
    cursor:not-allowed;
    opacity:.48
}
input,select {
    width:100%;
    border:1px solid #dbe3dd;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    padding:11px 13px;
    min-height:44px;
    outline:none;
    transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus {
    border-color:#4b9274;
    box-shadow:0 0 0 3px #21634d14
}
input[readonly] {
    background:#f6f8f5;
    color:#69796e
}
input:disabled {
    background:#f4f6f3
}
input[type=checkbox] {
    width:17px;
    min-height:17px;
    height:17px;
    accent-color:var(--green)
}
label {
    display:block;
    font-weight:600;
    font-size:13px;
    margin:21px 0 8px
}
h1,h2,h3,p {
    margin:0
}
h1 {
    font-size:28px;
    font-weight:650;
    letter-spacing:-.8px;
    line-height:1.4
}
h2 {
    font-size:17px;
    font-weight:650;
    line-height:1.5
}
h3 {
    font-size:15px
}
small {
    font-size:12px
}
img {
    max-width:100%;
    object-fit:cover
}
svg {
    flex-shrink:0
}
.icon {
    width:20px;
    height:20px;
    vertical-align:middle
}
a:focus-visible,button:focus-visible {
    outline:3px solid #84bba4;
    outline-offset:3px
}
button,svg {
    touch-action:manipulation
}
[hidden] {
    display:none!important
}
.muted {
    color:var(--muted);
    font-size:13px;
    line-height:1.8
}
.eyebrow {
    font-size:11px;
    letter-spacing:1.7px;
    color:var(--green);
    font-weight:650;
    margin-bottom:8px
}
.eyebrow.light {
    color:#b6daca
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:8px;
    min-height:42px;
    padding:10px 17px;
    font-size:13px;
    font-weight:600;
    transition:background .15s,transform .15s;
    white-space:nowrap
}
.button.primary {
    color:white;
    background:var(--green);
    box-shadow:0 3px 7px #173e3210
}
.button.primary:hover:not(:disabled) {
    background:#174b39
}
.button.secondary {
    background:white;
    color:#536a5d;
    border-color:#dce4dd
}
.button.secondary:hover:not(:disabled) {
    background:#f2f6f2;
    border-color:#b7cbbc
}
.button.danger {
    background:var(--danger);
    color:white
}
.button.compact {
    min-height:36px;
    padding:7px 12px;
    font-size:12px
}
.button .icon {
    width:17px;
    height:17px
}
.full-width {
    width:100%
}
.icon-button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:8px;
    background:transparent;
    color:inherit;
    border:0;
    border-radius:7px;
    min-width:36px;
    min-height:36px
}
.icon-button:hover:not(:disabled) {
    background:#21634d0b
}
.icon-button.bordered {
    border:1px solid var(--line);
    background:white
}
.text-button {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:none;
    border:0;
    padding:5px 0;
    color:var(--green);
    font-size:12px;
    cursor:pointer
}
.text-button:hover {
    text-decoration:underline
}
.danger-text {
    color:var(--danger)!important
}
.required {
    color:var(--danger)
}
.optional {
    font-size:12px;
    font-weight:400;
    color:var(--muted)
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    z-index:50;
    background:var(--green-dark);
    color:#dbe7df;
    display:flex;
    flex-direction:column;
    padding:30px 20px 0
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:#f6fff9;
    margin:0 10px 43px
}
.brand span {
    font-size:23px;
    font-weight:600;
    letter-spacing:3px;
    line-height:1.2
}
.brand small {
    display:block;
    font-size:9px;
    letter-spacing:2px;
    font-weight:400;
    margin-top:6px;
    color:#b7cebf
}
.nav-label {
    font-size:10px;
    letter-spacing:1.6px;
    color:#91ad9d;
    margin:0 16px 14px
}
.nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:47px;
    padding:12px 16px;
    border-radius:9px;
    margin-bottom:8px;
    color:#b7cdbe;
    font-size:13px
}
.nav-link:hover {
    background:#ffffff08;
    color:white
}
.nav-link.active {
    background:#b9dbc9;
    color:#173e32;
    font-weight:600
}
.nav-link .icon {
    width:19px;
    height:19px
}
.sidebar-note {
    margin:auto 12px 27px;
    padding-top:38px;
    color:#b4cdbd
}
.sidebar-note>.icon {
    display:block;
    width:35px;
    height:35px;
    color:#83ab94;
    margin-bottom:14px
}
.sidebar-note strong {
    font-size:12px;
    font-weight:500
}
.sidebar-note p {
    margin-top:7px;
    font-size:11px;
    color:#8fab98;
    line-height:2
}
.sidebar-bottom {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 -6px;
    border-top:1px solid #ffffff12;
    padding:20px 4px
}
.avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#c5decf;
    color:#204d3b;
    width:35px;
    height:35px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    flex-shrink:0
}
.avatar.small {
    width:30px;
    height:30px;
    font-size:12px;
    border-radius:9px
}
.sidebar-user {
    flex:1;
    min-width:0
}
.sidebar-user strong {
    display:block;
    font-size:12px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.sidebar-user small {
    display:block;
    color:#8daa96;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.logout-button {
    color:#a7c3af;
    padding:5px
}
.workspace {
    margin-left:var(--sidebar)
}
.topbar {
    height:73px;
    background:#ffffffce;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px
}
.topbar-left {
    display:flex;
    gap:12px;
    align-items:center
}
.breadcrumb {
    font-size:12px;
    color:#99a69d;
    display:flex;
    align-items:center;
    gap:13px
}
.breadcrumb strong {
    color:#506659;
    font-weight:500
}
.topbar-user {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:#637367
}
.mobile-nav-toggle {
    display:none
}
.content {
    max-width:1530px;
    margin:auto;
    padding:36px 40px 48px
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:29px
}
.page-heading .muted {
    margin-top:8px
}
.heading-actions {
    display:flex;
    gap:9px
}
.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 3px 16px #263d3203
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:27px
}
.stat-card {
    display:flex;
    gap:18px;
    padding:23px;
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius)
}
.stat-icon {
    width:43px;
    height:43px;
    border-radius:12px;
    background:#e6f2eb;
    color:#38765b;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:3px;
    flex-shrink:0
}
.stat-icon.pale {
    color:#738271;
    background:#eef1e9
}
.stat-icon.warm {
    color:#ae9761;
    background:#f7f2e7
}
.stat-label {
    display:block;
    font-size:12px;
    color:#738477
}
.stat-card strong {
    font-size:31px;
    font-weight:600;
    line-height:1.5;
    display:block;
    margin:3px 0
}
.stat-card small {
    font-size:11px;
    color:#97a296
}
.panel-heading {
    padding:23px 25px 21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid var(--line)
}
.panel-heading h2 {
    display:flex;
    align-items:center;
    gap:9px
}
.panel-heading p {
    color:#8b988e;
    font-size:12px;
    margin-top:5px
}
.count-chip {
    font-size:11px;
    min-width:24px;
    background:#eef3ed;
    border-radius:5px;
    padding:1px 7px;
    color:#72806c
}
.table-wrap {
    overflow-x:auto
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left
}
th {
    font-size:11px;
    font-weight:500;
    color:#85958a;
    background:#fafbf9;
    padding:14px 24px;
    white-space:nowrap
}
td {
    padding:20px 24px;
    border-bottom:1px solid #edf0eb;
    font-size:12px;
    color:#758377;
    white-space:nowrap
}
tbody tr:hover {
    background:#fcfdfb
}
.actions-heading {
    text-align:right
}
.audio-name-cell {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:170px
}
.audio-thumbnail {
    width:40px;
    height:40px;
    border:1px solid #e4ece5;
    background:#f1f5ef;
    color:#7e9a80;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden
}
.audio-thumbnail img {
    width:100%;
    height:100%
}
.audio-name {
    display:block;
    color:#354b3d;
    font-size:13px;
    font-weight:500;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis
}
.audio-name:hover {
    color:var(--green);
    text-decoration:underline
}
.audio-size {
    display:block;
    font-size:10px;
    color:#9aa799;
    margin-top:3px
}
.badge {
    font-size:11px;
    font-weight:500;
    padding:4px 9px;
    border-radius:5px;
    background:#edf4ed;
    color:#417859;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap
}
.badge:before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor
}
.badge.inactive {
    background:#f0f2ef;
    color:#849085
}
.badge.expired {
    background:#f8f0e7;
    color:#af8655
}
.badge.disabled {
    background:#f9eceb;
    color:#b26c64
}
.row-actions {
    text-align:right
}
.row-actions .text-button {
    margin-left:15px
}
.pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 24px;
    font-size:11px;
    color:#8c9a8c
}
.pagination-controls {
    display:flex;
    align-items:center;
    gap:9px
}
.pagination-controls select {
    width:auto;
    min-height:33px;
    padding:5px 25px 5px 8px;
    font-size:11px;
    color:#748573
}
.pagination-controls .icon-button {
    min-height:32px;
    min-width:32px;
    padding:5px
}
.pagination-controls .icon {
    width:16px;
    height:16px
}
.page-footnote {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    color:#94a18f;
    margin:21px 0
}
.page-footnote .icon {
    width:15px;
    height:15px
}
.loading-state {
    padding:70px 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    color:#8b9c8e;
    font-size:13px
}
.spinner {
    display:inline-block;
    border:2px solid #e2ece4;
    border-top-color:#468365;
    border-radius:50%;
    width:19px;
    height:19px;
    animation:spin .8s linear infinite;
    flex-shrink:0
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
.empty-state {
    padding:65px 25px;
    text-align:center
}
.empty-icon {
    margin:0 auto 19px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    background:#eef5ee;
    border-radius:22px;
    color:#7eaa89
}
.empty-icon .icon {
    width:34px;
    height:34px
}
.empty-state h3 {
    font-size:16px;
    font-weight:500
}
.empty-state p {
    color:#9aa595;
    font-size:12px;
    margin:10px 0 22px
}
.notice {
    padding:12px 15px;
    border-radius:8px;
    background:#edf5ee;
    color:#54765e;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:23px;
    line-height:1.8
}
.notice.warning {
    background:#fbf3e8;
    color:#a37e43
}
.notice.subtle {
    background:#f4f6f2;
    margin:12px 0
}
.form-alert {
    padding:12px 15px;
    border:1px solid #f0d9d5;
    border-radius:8px;
    background:#fff4f1;
    color:#af5149;
    font-size:12px;
    margin:0 0 21px;
    line-height:1.8
}
.panel-alert {
    margin:20px 24px
}
.form-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 305px;
    gap:24px;
    align-items:start
}
.form-panel {
    padding:28px 30px
}
.form-panel>p.muted {
    margin-top:6px
}
.form-section-title {
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:22px
}
.form-section-title.separated {
    margin-top:32px;
    border-top:1px solid var(--line);
    padding-top:26px
}
.form-section-title h2 small {
    font-size:12px;
    color:#95a08e;
    font-weight:400;
    margin-left:7px
}
.step-number {
    font-size:10px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border-radius:6px;
    background:#edf4ed;
    color:#5e8767
}
.file-drop {
    position:relative;
    border:1px dashed #bccfbf;
    background:#f9fbf8;
    border-radius:10px;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:9px;
    transition:background .15s
}
.file-drop:hover,.file-drop.dragover {
    background:#edf5ed;
    border-color:#569872
}
.file-drop:focus-within {
    outline:3px solid #84bba4;
    outline-offset:2px
}
.file-drop input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
    width:100%;
    height:100%
}
.upload-icon {
    width:42px;
    height:42px;
    background:white;
    box-shadow:0 3px 8px #39694307;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#61906b;
    margin:6px
}
.file-drop strong {
    font-weight:500;
    font-size:13px
}
.file-drop>span:not(.upload-icon) {
    color:#8c9e89;
    font-size:11px
}
.file-drop b {
    font-weight:400
}
.selected-file {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid #e0eae0;
    background:#f7faf5;
    padding:12px 14px;
    border-radius:8px;
    margin-top:12px;
    color:#4e7656
}
.selected-file>div {
    flex:1;
    min-width:0
}
.selected-file strong {
    display:block;
    font-size:12px;
    word-break:break-all;
    font-weight:500
}
.selected-file small {
    font-size:10px;
    color:#8b9d84
}
.cover-upload-row {
    display:flex;
    align-items:center;
    gap:19px
}
.cover-preview {
    position:relative;
    width:98px;
    height:98px;
    border:1px dashed #d3dfd0;
    background:#f8faf5;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#afbc9f;
    flex-shrink:0;
    overflow:hidden
}
.cover-preview>.icon {
    width:30px;
    height:30px
}
.cover-preview img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.cover-upload-controls {
    min-width:0
}
.cover-upload-controls p {
    font-size:11px;
    color:#91a087;
    margin-top:10px;
    line-height:1.8
}
.file-picker {
    position:relative;
    margin:0;
    cursor:pointer;
    overflow:hidden
}
.file-picker input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
    height:100%;
    width:100%;
    padding:0
}
.file-picker:focus-within {
    outline:3px solid #84bba4;
    outline-offset:2px
}
.form-footer {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:22px;
    margin-top:28px
}
.help-panel {
    padding:27px 25px
}
.help-icon {
    width:42px;
    height:42px;
    border-radius:11px;
    background:#edf4ec;
    color:#508558;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:19px
}
.help-panel>p {
    font-size:12px;
    line-height:2;
    color:#8a9981;
    margin:11px 0 24px
}
.help-steps {
    list-style:none;
    padding:0;
    margin:0
}
.help-steps li {
    display:flex;
    gap:13px;
    padding:13px 0
}
.help-steps li>span {
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#f2f5ee;
    color:#869a7a;
    font-size:10px;
    flex-shrink:0
}
.help-steps strong {
    font-size:12px;
    font-weight:500
}
.help-steps p {
    font-size:11px;
    color:#9aa78f;
    margin-top:3px
}
.notice-card {
    background:#edf2e8;
    padding:21px 24px;
    border:1px solid #e3ebdc;
    border-radius:12px;
    margin-top:19px
}
.notice-card h3 {
    font-size:12px;
    display:flex;
    gap:8px;
    align-items:center;
    color:#617956
}
.notice-card .icon {
    width:16px;
    height:16px
}
.notice-card p {
    font-size:11px;
    color:#879578;
    line-height:1.9;
    margin-top:10px
}
.notice-card small {
    display:block;
    font-size:10px;
    color:#99a38e;
    margin-top:11px
}
.upload-progress {
    margin-top:24px
}
.upload-progress>div {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#6e8b62;
    margin-bottom:8px
}
progress {
    width:100%;
    height:7px;
    border:0;
    border-radius:9px;
    overflow:hidden;
    background:#ecf2e8
}
progress::-webkit-progress-bar {
    background:#ecf2e8
}
progress::-webkit-progress-value {
    background:#4b8c61
}
progress::-moz-progress-bar {
    background:#4b8c61
}
.back-link {
    display:inline-flex;
    gap:4px;
    align-items:center;
    color:#859b79;
    font-size:11px;
    margin-bottom:12px
}
.back-link .icon {
    width:14px;
    height:14px
}
.detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 315px;
    gap:24px;
    align-items:start
}
.detail-preview-panel {
    display:flex;
    padding:26px;
    gap:23px;
    align-items:center
}
.detail-cover {
    width:155px;
    height:174px;
    flex-shrink:0;
    border-radius:12px;
    background:#eff4ec;
    overflow:hidden;
    position:relative
}
.detail-cover>img {
    width:100%;
    height:100%
}
.default-cover {
    height:100%;
    width:100%;
    background:radial-gradient(ellipse at 15% 10%,#d8e9d4 0%,transparent 65%),linear-gradient(145deg,#e9f0df,#c9d9bc);
    color:#65905d;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:19px
}
.default-cover svg {
    width:67px;
    height:67px
}
.default-cover span {
    font-size:9px;
    letter-spacing:2px;
    color:#799a68
}
.detail-preview-info {
    flex:1;
    min-width:0
}
.detail-preview-info h2 {
    font-size:20px;
    margin-top:10px;
    overflow-wrap:anywhere
}
.detail-preview-info>.muted {
    font-size:11px;
    margin:5px 0 14px
}
audio {
    width:100%;
    height:40px;
    border-radius:8px;
    color-scheme:light
}
.metadata {
    margin:15px 0 0;
    display:grid;
    gap:5px
}
.metadata>div {
    display:flex;
    gap:15px;
    font-size:11px
}
.metadata dt {
    color:#91a183;
    white-space:nowrap
}
.metadata dd {
    margin:0;
    color:#7f9470
}
.edit-panel {
    margin-top:23px
}
.edit-panel>p {
    font-size:12px;
    margin:6px 0
}
.cover-edit-controls {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}
.cover-edit-controls>.muted {
    font-size:11px;
    word-break:break-all
}
.edit-image-preview {
    width:110px;
    height:110px;
    border-radius:8px;
    margin-top:14px
}
.checkbox-label {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:400;
    color:#7d9270;
    margin-top:17px
}
.field-hint {
    font-size:11px;
    color:#9aa68b;
    line-height:1.8;
    margin-top:9px
}
.qr-panel {
    padding:27px;
    text-align:center
}
.qr-panel h2 {
    font-size:20px
}
.qr-panel>.muted {
    font-size:12px;
    margin-top:8px
}
.qr-frame {
    margin:25px auto 20px;
    width:100%;
    aspect-ratio:1;
    background:white;
    border:1px solid #e3e9df;
    border-radius:11px;
    padding:15px;
    display:flex;
    align-items:center;
    justify-content:center
}
.qr-frame img {
    width:100%;
    height:100%;
    object-fit:contain
}
.qr-panel>label {
    text-align:left;
    font-size:11px;
    color:#7b8d70;
    margin-top:25px;
    font-weight:500
}
.copy-field {
    display:flex;
    border:1px solid #e0e7db;
    border-radius:7px;
    padding-right:4px;
    align-items:center;
    background:#f8faf4
}
.copy-field input {
    border:0;
    background:none;
    min-width:0;
    min-height:36px;
    font-size:10px;
    padding:8px;
    box-shadow:none
}
.copy-field button {
    color:#789064
}
.public-link {
    justify-content:center;
    gap:5px;
    font-size:11px;
    margin-top:11px
}
.public-link .icon {
    width:13px;
    height:13px
}
.qr-notice {
    border-top:1px solid #e7ecdf;
    padding-top:18px;
    font-size:10px;
    line-height:2;
    color:#9aa58a;
    text-align:left;
    margin-top:20px
}
.profile-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    align-items:start
}
.profile-grid h2 {
    display:flex;
    align-items:center;
    gap:8px
}
.profile-grid h2 .icon {
    width:17px;
    height:17px;
    color:#7e9571
}
.profile-quota {
    display:flex;
    gap:12px;
    padding:16px;
    background:#f5f8ef;
    border-radius:8px;
    margin-top:25px;
    color:#849872
}
.profile-quota>div {
    min-width:0
}
.profile-quota strong {
    font-size:12px;
    font-weight:500
}
.profile-quota p {
    font-size:11px;
    line-height:1.9;
    margin-top:4px;
    color:#99a38b
}
.password-field {
    position:relative
}
.password-field input {
    padding-right:60px
}
.password-toggle {
    position:absolute;
    top:0;
    right:5px;
    height:100%;
    background:transparent;
    border:0;
    padding:0 10px;
    font-size:11px;
    color:#889e77
}
.toast {
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    background:#1d4936;
    color:white;
    padding:12px 22px;
    border-radius:9px;
    box-shadow:0 10px 30px #163e3425;
    font-size:13px;
    max-width:calc(100% - 32px);
    overflow-wrap:anywhere
}
.toast.error {
    background:#a84743
}
.confirm-dialog {
    border:1px solid #e5ebe0;
    border-radius:16px;
    padding:28px;
    max-width:430px;
    width:calc(100% - 36px);
    color:var(--ink);
    box-shadow:0 20px 70px #112f2325
}
.confirm-dialog::backdrop {
    background:#163d3455;
    backdrop-filter:blur(2px)
}
.dialog-icon {
    background:#fcf0e6;
    color:#b28458;
    border-radius:10px;
    width:41px;
    height:41px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px
}
.confirm-dialog h2 {
    font-size:18px
}
.confirm-dialog p {
    font-size:13px;
    color:#8a9b7c;
    line-height:1.9;
    margin-top:12px
}
.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:25px
}
.login-page {
    background:white
}
.login-layout {
    min-height:100vh;
    display:grid;
    grid-template-columns:48% 52%
}
.login-story {
    background:radial-gradient(ellipse at 10% 0%,#315e47 0%,transparent 60%),linear-gradient(150deg,#204632,#173d31);
    padding:45px 60px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#e8f2e3
}
.login-story .brand {
    margin:0
}
.login-story .brand span {
    font-size:27px
}
.story-content {
    margin:auto 0;
    padding:60px 0
}
.story-content h1 {
    font-size:43px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:1px;
    margin:15px 0 20px
}
.story-content p {
    font-size:14px;
    color:#a9c8ac;
    line-height:2.1
}
.story-wave {
    display:flex;
    align-items:center;
    gap:8px;
    height:110px;
    margin:32px 0;
    color:#acd0a4;
    opacity:.55
}
.story-wave i {
    display:block;
    background:currentColor;
    width:4px;
    border-radius:5px;
    height:25px
}
.story-wave i:nth-child(3n) {
    height:65px
}
.story-wave i:nth-child(4n) {
    height:90px
}
.story-wave i:nth-child(5n) {
    height:42px
}
.story-wave i:nth-child(7n) {
    height:105px
}
.story-steps {
    display:flex;
    gap:20px;
    font-size:10px;
    color:#85ab83;
    letter-spacing:.5px
}
.story-footer {
    font-size:10px;
    color:#80a781;
    letter-spacing:1.8px
}
.login-form-section {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:50px 55px;
    position:relative
}
.login-form-wrap {
    width:100%;
    max-width:355px;
    margin:auto 0
}
.login-form-wrap h2 {
    font-size:25px;
    margin-bottom:10px;
    letter-spacing:-.6px
}
.login-form-wrap>.muted {
    margin-bottom:32px
}
.login-form-wrap label {
    font-size:12px;
    margin-top:23px
}
.login-form-wrap input {
    min-height:46px
}
.login-form-wrap .button {
    margin-top:28px;
    min-height:46px;
    justify-content:space-between
}
.login-help {
    font-size:10px;
    color:#a5ad99;
    line-height:1.9;
    margin:24px 0;
    display:flex;
    gap:7px;
    align-items:flex-start
}
.login-help .icon {
    width:13px;
    height:13px;
    margin-top:3px
}
.login-copyright {
    font-size:10px;
    color:#b2b9a7;
    margin-top:35px
}
.public-page {
    min-height:100vh;
    background:radial-gradient(ellipse at top,#e7eee0,transparent 65%),#f5f7f1
}
.public-shell {
    max-width:450px;
    padding:38px 24px;
    margin:0 auto
}
.public-brand {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-bottom:27px
}
.public-brand>span {
    font-size:19px;
    letter-spacing:2px;
    font-weight:600
}
.public-brand small {
    display:block;
    font-size:8px;
    letter-spacing:1.6px;
    color:#9eac8c;
    font-weight:400;
    margin-top:2px
}
.playback-card {
    border:1px solid #e6ebdf;
    background:#fff;
    border-radius:19px;
    overflow:hidden;
    box-shadow:0 16px 50px #30432507
}
.public-cover {
    aspect-ratio:1.08;
    width:100%;
    background:#eaf0df
}
.public-cover>img {
    width:100%;
    height:100%;
    object-fit:cover
}
.public-cover .default-cover svg {
    width:100px;
    height:100px
}
.public-cover .default-cover span {
    font-size:12px;
    letter-spacing:3px
}
.public-card-content {
    padding:29px
}
.public-card-content h1 {
    font-size:23px;
    line-height:1.55;
    word-break:break-word;
    letter-spacing:0;
    margin-bottom:9px
}
.public-card-content>.muted {
    font-size:12px;
    margin-bottom:22px
}
.public-card-content audio {
    height:47px
}
.public-expiry {
    font-size:10px;
    color:#a1ad92;
    margin-top:22px;
    text-align:center
}
.public-footer {
    text-align:center;
    font-size:11px;
    color:#a2af94;
    line-height:2;
    margin-top:28px
}
.public-footer>span {
    font-size:9px;
    letter-spacing:.6px
}
.loading-inline {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#8b9d7b;
    padding:7px 0
}
.unavailable-card {
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:45px 25px;
    text-align:center;
    margin-top:45px
}
.unavailable-art {
    width:92px;
    height:92px;
    background:#eef3e7;
    color:#a4b68c;
    border-radius:25px;
    margin:0 auto 27px;
    display:flex;
    align-items:center;
    justify-content:center
}
.unavailable-art svg {
    width:42px;
    height:42px
}
.unavailable-card h1 {
    font-size:22px;
    margin:13px 0
}
.unavailable-card p {
    font-size:13px;
    color:#99a68a;
    line-height:2;
    margin-bottom:18px
}
.unavailable-card .eyebrow {
    font-size:10px
}
@media(min-width:1600px) {
    .content {
        padding-top:44px
    }
    .stats-grid {
        gap:24px
    }
    .stat-card {
        padding:27px
    }
    .form-grid {
        grid-template-columns:minmax(0,1fr) 340px
    }
    .detail-grid {
        grid-template-columns:minmax(0,1fr) 345px
    }
}
@media(max-width:1200px) {
    :root {
        --sidebar:205px
    }
    .content {
        padding:28px 25px
    }
    .topbar {
        padding:0 25px
    }
    .stat-card {
        padding:20px 16px;
        gap:12px
    }
    .stat-card small {
        font-size:10px
    }
    .form-grid {
        grid-template-columns:minmax(0,1fr) 270px;
        gap:18px
    }
    .detail-grid {
        grid-template-columns:minmax(0,1fr) 280px;
        gap:18px
    }
    .form-panel {
        padding:24px
    }
    .detail-preview-panel {
        padding:21px;
        gap:15px;
        align-items:flex-start
    }
    .detail-cover {
        width:110px;
        height:137px
    }
    .detail-preview-info h2 {
        font-size:17px
    }
    th,td {
        padding-left:17px;
        padding-right:17px
    }
    .login-story {
        padding:40px
    }
    .story-content h1 {
        font-size:35px
    }
    .story-steps {
        gap:13px
    }
}
@media(max-width:1000px) {
    .form-grid,.detail-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .help-column {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    .notice-card {
        margin-top:0
    }
    .help-steps {
        display:none
    }
    .detail-grid>aside {
        max-width:420px;
        width:100%;
        justify-self:center
    }
    .profile-grid {
        grid-template-columns:1fr
    }
    .stats-grid {
        gap:12px
    }
    .stat-card {
        flex-direction:column;
        gap:8px
    }
    .stat-icon {
        width:34px;
        height:34px;
        border-radius:9px
    }
    .stat-card strong {
        font-size:27px
    }
    .topbar-user span:not(.avatar) {
        max-width:160px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
}
@media(max-width:760px) {
    :root {
        --sidebar:232px
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s
    }
    .sidebar.open {
        transform:translateX(0)
    }
    .sidebar-scrim {
        position:fixed;
        inset:0;
        background:#142f2655;
        z-index:40
    }
    .workspace {
        margin-left:0
    }
    .topbar {
        height:64px;
        padding:0 18px
    }
    .mobile-nav-toggle {
        display:inline-flex
    }
    .topbar-user span:not(.avatar) {
        max-width:110px
    }
    .content {
        padding:25px 18px 32px
    }
    .page-heading {
        margin-bottom:22px;
        gap:12px;
        flex-wrap:wrap
    }
    .page-heading h1 {
        font-size:25px
    }
    .page-heading .muted {
        font-size:12px
    }
    .page-heading>.button {
        font-size:12px;
        padding:9px 13px
    }
    .heading-actions {
        width:100%;
        justify-content:flex-end
    }
    .stats-grid {
        gap:10px;
        margin-bottom:21px
    }
    .stat-card {
        padding:15px 12px
    }
    .stat-card small {
        display:none
    }
    .stat-label {
        font-size:10px
    }
    .stat-card strong {
        font-size:25px
    }
    .panel-heading {
        padding:19px 18px
    }
    .panel-heading p {
        font-size:11px;
        max-width:240px
    }
    .panel-heading h2 {
        font-size:16px
    }
    .table-wrap {
        overflow:visible
    }
    table,tbody {
        display:block
    }
    thead {
        display:none
    }
    tbody tr {
        display:grid;
        grid-template-columns:1fr 1fr;
        padding:16px 18px;
        border-bottom:1px solid var(--line);
        gap:14px 12px
    }
    td {
        display:block;
        white-space:normal;
        padding:0;
        border:0;
        font-size:11px
    }
    td:first-child {
        grid-column:1/-1
    }
    .audio-name-cell {
        min-width:0
    }
    .audio-name {
        max-width:calc(100vw - 130px);
        font-size:13px
    }
    .audio-thumbnail {
        width:38px;
        height:38px
    }
    .uploaded-cell:before,.expiry-cell:before {
        content:attr(data-label);
        display:block;
        font-size:10px;
        color:#a0ad91;
        margin-bottom:3px
    }
    .row-actions {
        display:flex;
        justify-content:flex-end;
        gap:15px;
        grid-column:1/-1
    }
    .row-actions .text-button {
        margin:0
    }
    .pagination {
        padding:15px 18px;
        flex-wrap:wrap
    }
    .pagination-controls {
        gap:6px
    }
    .page-footnote {
        align-items:flex-start;
        line-height:1.9;
        font-size:10px
    }
    .page-footnote .icon {
        margin-top:2px
    }
    .form-panel {
        padding:23px 20px
    }
    .help-column {
        grid-template-columns:1fr
    }
    .help-panel {
        display:none
    }
    .notice-card {
        padding:19px 20px
    }
    .cover-upload-row {
        gap:14px
    }
    .cover-preview {
        width:80px;
        height:80px
    }
    .cover-upload-controls p {
        font-size:10px
    }
    .form-footer .button {
        font-size:12px;
        padding:10px 13px
    }
    .detail-preview-panel {
        flex-direction:column;
        padding:20px;
        gap:18px
    }
    .detail-cover {
        width:100%;
        height:200px
    }
    .detail-preview-info {
        width:100%
    }
    .detail-preview-info h2 {
        font-size:20px
    }
    .metadata>div {
        font-size:11px
    }
    .qr-panel {
        padding:25px
    }
    .qr-frame {
        max-width:240px
    }
    .login-layout {
        grid-template-columns:1fr
    }
    .login-story {
        padding:28px 24px
    }
    .login-story .brand {
        margin:0
    }
    .login-story .brand span {
        font-size:23px
    }
    .story-content {
        padding:30px 0 0
    }
    .story-content .eyebrow,.story-content p,.story-wave,.story-steps,.story-footer {
        display:none
    }
    .story-content h1 {
        font-size:26px;
        line-height:1.6;
        margin:0
    }
    .login-form-section {
        padding:34px 25px 25px
    }
    .login-form-wrap {
        max-width:400px
    }
    .login-form-wrap h2 {
        font-size:22px
    }
    .login-form-wrap>.muted {
        margin-bottom:23px
    }
    .login-form-wrap .eyebrow {
        display:none
    }
    .login-copyright {
        margin-top:15px
    }
    .public-shell {
        padding:25px 20px
    }
    .public-card-content {
        padding:24px
    }
    .public-card-content h1 {
        font-size:22px
    }
    .public-cover {
        aspect-ratio:1.13
    }
    .toast {
        bottom:20px
    }
    .notice {
        font-size:11px
    }
    .confirm-dialog {
        padding:23px
    }
}
.page-heading>div:first-child {
    min-width:0
}
.page-heading h1 {
    overflow-wrap:anywhere
}
.nav-open {
    overflow:hidden
}
.cover-upload-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 20px
}
.cover-upload-actions .file-picker {
    margin:0
}
.cover-upload-actions .text-button {
    padding:8px 4px
}
.batch-toolbar {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding:15px 25px;
    border-bottom:1px solid var(--line);
    background:#fafcf9
}
.batch-toolbar>span {
    font-size:12px;
    color:var(--muted)
}
.batch-toolbar>small {
    color:var(--muted);
    font-size:11px
}
.selection-cell {
    width:48px;
    padding-left:24px;
    padding-right:0
}
.selection-cell input {
    display:block;
    margin:0;
    cursor:pointer
}
.audio-cover {
    display:block;
    object-fit:cover
}
@media(max-width:760px) {
    #audio-rows td:nth-child(2) {
        grid-column:1/-1
    }
    .batch-toolbar {
        padding:14px 20px;
        gap:12px
    }
    .batch-toolbar>small {
        flex-basis:100%
    }
    .selection-cell {
        width:auto;
        padding:10px 0!important
    }
    .selection-cell input {
        margin:0
    }
    .cover-upload-actions {
        gap:12px 18px
    }
}
.batch-rules {
    margin-top:14px
}
.batch-summary {
    display:flex;
    gap:18px;
    align-items:center;
    flex-wrap:wrap;
    padding:20px 0;
    color:var(--muted);
    font-size:12px
}
.batch-summary .text-button {
    margin-left:auto
}
.batch-row {
    display:flex;
    align-items:center;
    gap:18px;
    border-top:1px solid var(--line);
    padding:20px 0
}
.batch-cover {
    width:64px;
    height:64px;
    flex-shrink:0;
    background:#eef4ee;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:#78957e
}
.batch-cover img {
    width:100%;
    height:100%;
    object-fit:cover
}
.batch-item-info {
    flex:1;
    min-width:0
}
.batch-filename {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere
}
.batch-name {
    margin:8px 0;
    max-width:500px
}
.batch-item-info small {
    display:block;
    color:var(--muted);
    font-size:11px;
    overflow-wrap:anywhere
}
.batch-images {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:12px 0
}
.batch-image-chip {
    display:inline-flex;
    gap:14px;
    align-items:center;
    padding:5px 10px;
    background:#f3f6f1;
    border-radius:7px;
    font-size:11px;
    max-width:100%;
    overflow-wrap:anywhere
}
.batch-image-chip .text-button {
    white-space:nowrap
}
@media(max-width:760px) {
    .batch-row {
        gap:12px;
        align-items:flex-start
    }
    .batch-cover {
        width:42px;
        height:42px
    }
    .batch-row>.batch-remove {
        margin-top:5px
    }
    .batch-image-chip {
        flex-wrap:wrap
    }
    .batch-summary {
        gap:10px
    }
    .batch-row .batch-name {
        font-size:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}
.upload-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    flex-shrink:0
}
.upload-actions .button {
    min-height:42px
}
.empty-actions {
    justify-content:center
}
.batch-upload-footer {
    align-items:center;
    justify-content:space-between;
    gap:16px
}
.batch-upload-footer #batch-progress {
    flex:1;
    min-width:0;
    line-height:1.7
}
.batch-upload-footer .button {
    flex-shrink:0
}
@media(max-width:760px) {
    .heading-actions.upload-actions {
        justify-content:flex-start
    }
    .upload-actions {
        gap:10px
    }
    .upload-actions .button {
        font-size:12px;
        padding:10px 13px
    }
    .batch-upload-footer {
        flex-wrap:wrap
    }
    .batch-upload-footer #batch-progress {
        flex-basis:100%
    }
    .batch-upload-footer .button {
        margin-left:auto
    }
}
.expiry-fields {
    border:0;
    border-top:1px solid var(--line);
    padding:22px 0 0;
    margin:24px 0 0;
    min-width:0
}
.expiry-fields legend {
    font-size:15px;
    font-weight:600;
    padding:0 8px 0 0;
    color:var(--ink)
}
.expiry-fields select {
    width:100%;
    min-height:44px;
    padding:10px 12px;
    background:white;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink);
    font:inherit
}
.expiry-settings-panel {
    grid-column:1/-1
}
.expiry-settings-panel form {
    max-width:620px
}
.expiry-fields .field-hint {
    line-height:1.8
}
.expiry-fields input {
    max-width:100%
}
.account-overview {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.account-fact {
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px
}
.account-fact strong {
    display:block;
    font-size:23px;
    font-weight:600;
    margin:4px 0
}
.account-fact strong small {
    font-size:12px;
    font-weight:400
}
.account-fact p {
    color:var(--muted);
    font-size:12px
}
.account-facts-note {
    font-size:11px;
    color:var(--muted);
    margin:12px 0 24px
}
.settings-panel {
    overflow:hidden
}
.settings-tabs {
    display:flex;
    gap:8px;
    padding:0 26px;
    border-bottom:1px solid var(--line);
    overflow-x:auto
}
.settings-tabs [role=tab] {
    border:0;
    border-bottom:3px solid transparent;
    background:transparent;
    padding:19px 16px 16px;
    color:var(--muted);
    white-space:nowrap;
    font-size:13px
}
.settings-tabs [aria-selected=true] {
    color:var(--green);
    border-bottom-color:var(--green);
    font-weight:600
}
.settings-body {
    padding:28px 30px;
    min-height:420px
}
.settings-body form {
    max-width:620px
}
.settings-body>h2 {
    margin-bottom:8px
}
.settings-body .expiry-fields {
    margin-top:22px
}
.settings-body .form-footer {
    justify-content:flex-start
}
.settings-body .form-footer .button {
    min-width:124px
}
@media(max-width:760px) {
    .account-overview {
        grid-template-columns:1fr;
        gap:12px
    }
    .account-fact {
        padding:18px 20px
    }
    .account-fact strong {
        font-size:21px
    }
    .settings-tabs {
        padding:0 12px;
        gap:0
    }
    .settings-tabs [role=tab] {
        padding:16px 13px 13px
    }
    .settings-body {
        padding:22px 20px;
        min-height:0
    }
}
.admin-nav-label {
    margin-top:22px
}
.admin-toolbar {
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px 24px;
    border-bottom:1px solid var(--line)
}
.admin-toolbar input {
    max-width:380px
}
.admin-toolbar select {
    max-width:180px
}
.admin-toolbar .text-button {
    white-space:nowrap
}
.admin-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 24px
}
.admin-muted-block {
    display:block;
    color:var(--muted);
    margin-top:5px
}
.admin-table td:last-child .text-button {
    margin-right:14px
}
.admin-table-wrap {
    overflow-x:auto
}
.admin-table {
    min-width:850px
}
.admin-config-fields {
    border:0;
    padding:0;
    margin:0
}
.admin-audio-card {
    display:flex;
    gap:22px;
    padding:24px;
    border-bottom:1px solid var(--line)
}
.admin-review-cover {
    width:112px;
    height:112px;
    border-radius:10px;
    overflow:hidden;
    background:var(--green-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:12px;
    flex-shrink:0
}
.admin-review-cover img {
    width:100%;
    height:100%;
    object-fit:cover
}
.admin-review-content {
    flex:1;
    min-width:0
}
.admin-review-content audio {
    display:block;
    width:100%;
    max-width:480px;
    height:40px;
    margin-top:15px
}
.admin-review-content .notice {
    margin-top:12px;
    overflow-wrap:anywhere
}
.admin-review-content h3 {
    overflow-wrap:anywhere
}
.admin-review-actions {
    align-self:center
}
.audio-block-reason {
    max-width:260px;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.6
}
.admin-form-grid+label {
    margin-top:22px
}
#admin-user-editor {
    margin-bottom:24px
}
#admin-account-date {
    max-width:400px
}
textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px;
    resize:vertical
}
@media(max-width:760px) {
    .sidebar {
        overflow-y:auto
    }
    .admin-toolbar {
        flex-wrap:wrap;
        padding:18px
    }
    .admin-toolbar input {
        max-width:none;
        flex-basis:100%
    }
    .admin-form-grid {
        grid-template-columns:1fr
    }
    .admin-audio-card {
        flex-wrap:wrap;
        padding:18px;
        gap:15px
    }
    .admin-review-cover {
        width:66px;
        height:66px
    }
    .admin-review-content {
        flex-basis:calc(100% - 81px)
    }
    .admin-review-actions {
        margin-left:81px
    }
    .admin-table {
        display:table
    }
    .admin-table thead {
        display:table-header-group
    }
    .admin-table tbody {
        display:table-row-group
    }
    .admin-table tr {
        display:table-row;
        padding:0
    }
    .admin-table td,.admin-table th {
        display:table-cell;
        padding:16px 20px;
        white-space:nowrap
    }
}
.sidebar {
    overflow-y:auto
}
.sidebar-note {
    flex-shrink:0
}
.sidebar-bottom {
    flex-shrink:0
}
.admin-review-cover .default-cover {
    gap:10px
}
.admin-review-cover .default-cover svg {
    width:38px;
    height:38px
}
.admin-review-cover .default-cover span {
    font-size:8px;
    letter-spacing:0
}
@media(max-width:760px) {
    .admin-review-cover .default-cover {
        gap:5px
    }
    .admin-review-cover .default-cover svg {
        width:24px;
        height:24px
    }
    .admin-review-cover .default-cover span {
        font-size:6px
    }
}
.sidebar.admin-sidebar .sidebar-bottom {
    margin-top:auto
}
.admin-user-filter-row {
    display:grid;
    grid-template-columns:minmax(200px,1fr) minmax(200px,1fr);
    gap:12px 24px;
    padding:20px 24px;
    border-bottom:1px solid var(--line)
}
.admin-user-filter-row label {
    margin:0 0 7px
}
.admin-user-filter-row .field-hint {
    grid-column:1/-1;
    margin:0
}
.admin-review-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-shrink:0
}
.review-status {
    margin-left:8px
}
@media(max-width:760px) {
    .admin-user-filter-row {
        grid-template-columns:1fr;
        padding:18px
    }
    .admin-user-filter-row .field-hint {
        grid-column:1
    }
    .admin-review-actions {
        flex-direction:row;
        flex-wrap:wrap
    }
}
.moderation-notice {
    display:block;
    padding:16px 20px;
    line-height:1.8
}
.moderation-notice p {
    margin:0
}
.moderation-notice .moderation-reason {
    display:block;
    overflow-wrap:anywhere
}
.moderation-notice .moderation-hint {
    margin-top:6px;
    color:var(--muted);
    font-size:12px
}
#admin-user-editor.admin-user-dialog {
    width:min(680px,calc(100% - 32px));
    max-height:calc(100dvh - 48px);
    margin:auto;
    padding:0;
    border:1px solid var(--line);
    border-radius:16px;
    color:var(--ink);
    background:white;
    box-shadow:0 24px 80px #112f2330;
    overflow:hidden
}
#admin-user-editor[open] {
    display:flex;
    flex-direction:column
}
.admin-user-dialog::backdrop {
    background:#163d3466;
    backdrop-filter:blur(2px)
}
.admin-editor-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:24px 28px;
    border-bottom:1px solid var(--line);
    flex-shrink:0
}
.admin-editor-header h2 {
    font-size:20px;
    margin:0
}
.admin-editor-header p {
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px
}
.admin-editor-header .icon-button {
    font-size:26px;
    line-height:1;
    flex-shrink:0
}
.admin-user-dialog form {
    display:flex;
    flex-direction:column;
    min-height:0
}
.admin-editor-body {
    padding:24px 28px;
    overflow-y:auto;
    min-height:0
}
.admin-editor-body input[readonly] {
    background:var(--bg);
    color:var(--muted);
    cursor:default
}
.admin-editor-body .admin-form-grid {
    gap:0 24px
}
.admin-editor-footer.form-footer {
    padding:18px 28px;
    margin:0;
    background:white;
    flex-shrink:0
}
.admin-editor-footer .button {
    min-width:100px
}
@media(max-width:760px) {
    #admin-user-editor.admin-user-dialog {
        max-height:calc(100dvh - 24px);
        width:calc(100% - 24px)
    }
    .admin-editor-header {
        padding:18px 20px
    }
    .admin-editor-body {
        padding:18px 20px
    }
    .admin-editor-footer.form-footer {
        padding:16px 20px
    }
    .admin-editor-body .admin-form-grid {
        grid-template-columns:1fr
    }
}
.admin-audio-toolbar {
    display:grid;
    grid-template-columns:minmax(160px,1fr) minmax(230px,1.25fr) minmax(150px,.8fr) auto;
    align-items:end;
    gap:16px
}
.admin-audio-toolbar label {
    margin:0 0 7px
}
.admin-audio-toolbar input,.admin-audio-toolbar select {
    max-width:none
}
.admin-filter-field {
    min-width:0
}
.admin-filter-actions {
    display:flex;
    align-items:center;
    gap:14px;
    padding-bottom:2px
}
.user-picker {
    position:relative
}
.user-picker-input {
    position:relative;
    display:flex;
    align-items:center
}
.user-picker-input input {
    padding-right:62px
}
.user-picker-clear,.user-picker-toggle {
    position:absolute;
    background:transparent;
    border:0;
    color:var(--muted);
    height:38px;
    cursor:pointer;
    font-size:20px;
    line-height:1
}
.user-picker-clear {
    right:30px;
    width:28px
}
.user-picker-toggle {
    right:4px;
    width:28px
}
.user-picker-options {
    position:absolute;
    z-index:30;
    top:calc(100% + 6px);
    left:0;
    right:0;
    min-width:100%;
    max-height:320px;
    overflow-y:auto;
    background:white;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 10px 30px #163e3420;
    padding:5px
}
.user-picker-option {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    width:100%;
    text-align:left;
    padding:10px 12px;
    background:white;
    border:0;
    border-radius:6px;
    color:var(--ink);
    cursor:pointer;
    font-size:12px
}
.user-picker-option span {
    overflow-wrap:anywhere
}
.user-picker-option small {
    white-space:nowrap;
    color:var(--muted);
    font-size:10px
}
.user-picker-option:hover,.user-picker-option.highlighted {
    background:var(--green-soft)
}
.user-picker-option[aria-selected=true] {
    color:var(--green);
    font-weight:600
}
.user-picker-message {
    padding:12px;
    color:var(--muted);
    font-size:12px
}
@media(max-width:1100px) {
    .admin-audio-toolbar {
        grid-template-columns:1fr 1fr
    }
    .admin-filter-actions {
        align-self:end;
        min-height:46px
    }
}
@media(max-width:760px) {
    .admin-audio-toolbar {
        grid-template-columns:1fr;
        gap:14px
    }
    .admin-audio-toolbar input {
        flex-basis:auto
    }
    .admin-filter-actions {
        justify-content:flex-end;
        min-height:0
    }
    .user-picker-options {
        max-height:240px
    }
}
.admin-audio-card {
    gap:18px;
    align-items:center
}
.admin-review-content {
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(220px,300px);
    gap:20px;
    align-items:center
}
.admin-review-info {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
    max-height:112px
}
.admin-review-info h3 {
    margin:0;
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.admin-review-owner {
    margin:0;
    font-size:11px;
    line-height:16px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.admin-review-meta {
    font-size:10px;
    line-height:14px;
    color:var(--muted)
}
.admin-review-meta p {
    margin:0;
    white-space:nowrap
}
.admin-review-badges {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap
}
.admin-review-badges .badge {
    font-size:10px;
    line-height:16px;
    padding:2px 7px;
    white-space:nowrap
}
.admin-review-reason {
    margin:0;
    font-size:10px;
    line-height:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.admin-review-player {
    min-width:0
}
.admin-review-player audio {
    width:100%;
    max-width:none;
    margin:0;
    height:40px
}
.admin-review-actions .button {
    font-size:11px;
    padding:9px 12px;
    white-space:nowrap
}
@media(max-width:1100px) {
    .admin-audio-card {
        gap:14px;
        padding:20px
    }
    .admin-review-cover {
        width:104px;
        height:112px
    }
    .admin-review-content {
        grid-template-columns:minmax(155px,1fr) minmax(200px,230px);
        gap:14px
    }
    .admin-review-actions .button {
        padding:8px 10px;
        font-size:10px
    }
}
@media(max-width:900px) {
    .admin-review-content {
        grid-template-columns:1fr;
        gap:12px
    }
    .admin-review-info {
        max-height:none
    }
    .admin-review-cover {
        width:112px;
        height:112px
    }
    .admin-review-actions {
        align-self:center
    }
}
@media(max-width:760px) {
    .admin-audio-card {
        align-items:flex-start;
        gap:14px
    }
    .admin-review-cover {
        width:82px;
        height:82px
    }
    .admin-review-content {
        flex-basis:calc(100% - 96px)
    }
    .admin-review-info h3 {
        white-space:normal;
        line-height:20px
    }
    .admin-review-meta p {
        white-space:normal
    }
    .admin-review-badges {
        flex-wrap:wrap
    }
    .admin-review-reason {
        white-space:normal;
        overflow-wrap:anywhere
    }
    .admin-review-actions {
        margin-left:96px
    }
    .admin-review-player audio {
        min-width:0
    }
}
#list-table {
    overflow-x:auto
}
#list-table table {
    table-layout:fixed;
    min-width:980px;
    width:100%
}
#list-table th:nth-child(1) {
    width:4%
}
#list-table th:nth-child(2) {
    width:42%
}
#list-table th:nth-child(3) {
    width:9%
}
#list-table th:nth-child(4),#list-table th:nth-child(5) {
    width:14%
}
#list-table th:nth-child(6) {
    width:17%
}
#list-table td {
    padding:20px 14px
}
#list-table .audio-name-cell {
    gap:16px;
    min-width:0
}
#list-table .audio-thumbnail {
    width:112px;
    height:112px;
    border:0;
    border-radius:10px
}
#list-table .audio-thumbnail img {
    object-fit:cover
}
#list-table .audio-default-cover {
    width:100%;
    height:100%
}
#list-table .audio-default-cover svg {
    width:38px;
    height:38px
}
#list-table .audio-default-cover .default-cover {
    gap:10px
}
#list-table .audio-default-cover span {
    font-size:8px;
    letter-spacing:0
}
.list-audio-info {
    flex:1;
    min-width:0
}
.list-audio-info .audio-name {
    display:block;
    max-width:none;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.list-audio-info .audio-size {
    font-size:10px;
    margin-top:4px
}
.list-audio-player {
    display:block;
    width:100%;
    max-width:260px;
    height:36px;
    margin-top:10px
}
#list-table .row-actions .text-button {
    display:block;
    margin:0 0 7px;
    font-size:11px
}
#list-table .uploaded-cell,#list-table .expiry-cell {
    font-size:11px;
    white-space:normal
}
.sort-button {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:0;
    background:transparent;
    padding:0;
    color:inherit;
    font:inherit;
    cursor:pointer
}
.sort-button span {
    color:var(--green)
}
.sort-button:disabled {
    cursor:wait;
    opacity:.6
}
@media(max-width:760px) {
    #list-table table {
        min-width:0;
        table-layout:auto
    }
    #list-table td {
        padding:0
    }
    #list-table .audio-thumbnail {
        width:82px;
        height:82px
    }
    #list-table .audio-name-cell {
        gap:12px
    }
    #list-table .audio-name {
        max-width:none
    }
    #list-table .row-actions {
        flex-direction:row
    }
    #list-table .row-actions .text-button {
        margin:0
    }
    #list-table thead {
        display:table-header-group
    }
    #list-table thead tr {
        display:flex;
        gap:20px;
        padding:14px 18px;
        border-bottom:1px solid var(--line)
    }
    #list-table thead th {
        display:none;
        width:auto
    }
    #list-table thead th:nth-child(4),#list-table thead th:nth-child(5) {
        display:block;
        width:auto
    }
    #list-table .selection-cell {
        width:auto
    }
    .list-audio-player {
        height:36px;
        max-width:none
    }
}
.admin-review-actions {
    width:112px
}
@media(max-width:760px) {
    .admin-review-actions {
        width:auto
    }
}
#list-table .badge {
    font-size:10px;
    padding:3px 7px
}
.list-audio-info .audio-block-reason {
    font-size:10px;
    line-height:14px;
    max-width:none;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden
}
@media(min-width:761px) {
    #list-table table {
        min-width:900px
    }
}
.sidebar.admin-sidebar .sidebar-bottom {
    margin-top:0
}
@media(min-width:761px) {
    #list-table th:nth-child(2) {
        width:51%
    }
    #list-table th:nth-child(3) {
        width:9%
    }
    #list-table th:nth-child(4),#list-table th:nth-child(5) {
        width:10.5%
    }
    #list-table th:nth-child(6) {
        width:15%
    }
    #list-table th,#list-table td {
        padding-left:10px;
        padding-right:10px
    }
    #list-table .row-actions {
        display:table-cell;
        text-align:left
    }
    #list-table .row-actions .text-button {
        display:block;
        width:100%;
        padding:0;
        margin:0 0 6px;
        text-align:left;
        white-space:nowrap;
        line-height:22px;
        font-size:12px
    }
    .list-audio-player {
        max-width:360px;
        height:40px
    }
    .list-audio-info .audio-name {
        font-size:14px
    }
    .admin-audio-card {
        padding:24px;
        gap:20px
    }
    .admin-review-cover {
        width:140px;
        height:140px
    }
    .admin-review-content {
        grid-template-columns:minmax(220px,1fr) minmax(280px,360px);
        gap:24px
    }
    .admin-review-info {
        gap:7px;
        max-height:none
    }
    .admin-review-info h3 {
        font-size:15px;
        line-height:22px
    }
    .admin-review-owner {
        font-size:12px;
        line-height:18px;
        display:flex;
        align-items:center;
        gap:14px
    }
    .admin-review-size {
        font-size:11px;
        padding-left:14px;
        border-left:1px solid var(--line);
        color:var(--muted);
        flex-shrink:0
    }
    .admin-review-meta {
        font-size:11px;
        line-height:18px
    }
    .admin-review-badges {
        gap:8px
    }
    .admin-review-badges .badge {
        font-size:11px;
        line-height:18px;
        padding:3px 8px
    }
    .admin-review-reason {
        font-size:11px;
        line-height:16px
    }
    .admin-review-player audio {
        height:44px
    }
    .admin-review-actions {
        width:112px
    }
}
@media(min-width:761px) and (max-width:1200px) {
    .admin-review-cover {
        width:128px;
        height:140px
    }
    .admin-review-content {
        grid-template-columns:minmax(210px,1fr) minmax(240px,300px);
        gap:18px
    }
    .admin-audio-card {
        gap:16px;
        padding:22px 20px
    }
}
@media(min-width:761px) and (max-width:1050px) {
    .admin-review-content {
        grid-template-columns:1fr;
        gap:14px
    }
    .admin-review-player {
        max-width:360px
    }
    .admin-review-info {
        gap:6px
    }
}
@media(max-width:760px) {
    .admin-review-size {
        margin-left:10px;
        font-size:10px
    }
    .admin-review-info {
        gap:6px
    }
    .admin-review-meta {
        line-height:18px
    }
    .admin-review-player audio {
        height:40px
    }
    #list-table .row-actions {
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:12px
    }
    .list-audio-player {
        max-width:none
    }
}
#list-table .actions-heading {
    text-align:left
}
@media(min-width:761px) {
    .admin-review-info {
        gap:6px
    }
}
select:not([multiple]) {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:40px;
    background-image:url("/assets/chevron-down.svg");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
    cursor:pointer
}
select:disabled {
    cursor:not-allowed;
    opacity:.6
}
select[multiple],select[size]:not([size="1"]) {
    background-image:none;
    padding-right:13px;
    appearance:auto
}
.user-picker-toggle {
    width:32px;
    height:36px;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    padding:0;
    background-image:url("/assets/chevron-down.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 16px;
    border-radius:5px
}
.pagination-controls select {
    min-width:116px
}
#page-size {
    width:96px;
    min-width:0;
    padding-left:10px;
    padding-right:28px;
    background-position:right 8px center
}
.sort-indicator {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:12px;
    height:16px;
    flex-shrink:0
}
.sort-indicator svg {
    width:12px;
    height:16px;
    stroke:#a9b5ad;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round
}
.sort-indicator[data-direction=ASC] .sort-up,.sort-indicator[data-direction=DESC] .sort-down {
    stroke:var(--green)
}
.audio-filter-toolbar {
    display:grid;
    grid-template-columns:minmax(170px,1.2fr) minmax(140px,.8fr) minmax(280px,1.7fr) auto;
    align-items:end;
    gap:16px;
    padding:20px 24px;
    border-top:1px solid var(--line)
}
.audio-filter-toolbar label {
    margin:0 0 7px
}
.audio-filter-toolbar>div {
    min-width:0
}
.audio-filter-toolbar input,.audio-filter-toolbar select {
    font-size:12px
}
.audio-date-range {
    display:flex;
    align-items:center;
    gap:8px
}
.audio-date-range input {
    min-width:0;
    flex:1;
    padding:11px 8px
}
.audio-date-range span {
    font-size:12px;
    color:var(--muted)
}
.audio-filter-actions {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:44px
}
.audio-filter-actions .button {
    padding:10px 14px
}
#list-no-results .button {
    margin-top:16px
}
@media(max-width:1100px) {
    .audio-filter-toolbar {
        grid-template-columns:1fr 1fr
    }
    .audio-filter-toolbar>div:nth-child(3) {
        grid-column:1
    }
    .audio-filter-actions {
        justify-content:flex-end
    }
}
@media(max-width:760px) {
    .audio-filter-toolbar {
        grid-template-columns:1fr;
        padding:18px;
        gap:14px
    }
    .audio-filter-toolbar>div:nth-child(3) {
        grid-column:auto
    }
}
.audio-filter-toolbar {
    grid-template-columns:minmax(180px,1fr) 88px 284px auto
}
#filter-audio-status {
    width:88px
}
.audio-date-range input {
    flex:0 0 128px;
    width:128px;
    min-width:0
}
@media(max-width:1100px) {
    .audio-filter-toolbar {
        grid-template-columns:minmax(180px,1fr) auto
    }
    .audio-filter-toolbar>div:nth-child(3) {
        width:284px
    }
    .audio-filter-toolbar>div:nth-child(2) {
        justify-self:end
    }
    .audio-filter-actions {
        min-width:112px
    }
}
@media(max-width:760px) {
    .audio-filter-toolbar {
        grid-template-columns:1fr
    }
    .audio-filter-toolbar>div:nth-child(2) {
        justify-self:start
    }
    .audio-filter-toolbar>div:nth-child(3) {
        width:min(100%,284px)
    }
    .audio-date-range input {
        flex:1 1 0;
        width:auto;
        padding-left:6px;
        padding-right:6px
    }
    .audio-filter-actions {
        justify-self:end
    }
}