*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
      }

      :root {
        --bg: #080810;
        --bg2: #0d0d1a;
        --surface: #111122;
        --surface2: #171730;
        --border: #1f2040;
        --border2: #2a2d55;
        --text: #c2ccee;
        --text-dim: #5a607a;
        --text-muted: #3a3f5c;
        --accent: #4f7dff;
        --accent-hl: #7aa3ff;
        --accent-glow: rgba(79, 125, 255, .2);
        --green: #2dcc8a;
        --red: #e8415a;
        --yellow: #f5a623;
        --cyan: #29c4d0;
        --mono: 'IBM Plex Mono', monospace;
        --display: sans-serif;
        --radius: 3px;
        --sidebar-w: 220px;
        --tr: 150ms ease;
      }

      html {
        color-scheme: dark
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.65;
        min-height: 100vh
      }

      a {
        color: var(--accent);
        text-decoration: none
      }

      a:hover {
        color: var(--accent-hl)
      }

      input,
      select,
      textarea,
      button {
        font-family: var(--mono);
        font-size: 13px
      }

      ::-webkit-scrollbar {
        width: 5px;
        height: 5px
      }

      ::-webkit-scrollbar-track {
        background: var(--bg)
      }

      ::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 99px
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent)
      }

      .app-layout {
        display: flex;
        min-height: 100vh
      }

      .sidebar {
        width: var(--sidebar-w);
        flex-shrink: 0;
        background: var(--surface);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto
      }

      .main-content {
        flex: 1;
        min-width: 0;
        padding: 32px 36px;
        overflow-x: hidden
      }

      .sb-logo {
        padding: 20px 18px 16px;
        border-bottom: 1px solid var(--border);
        font-family: var(--display);
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: -.02em
      }

      .sb-logo span {
        color: var(--accent)
      }

      .sb-section {
        padding: 12px 0 4px;
        font-size: .62rem;
        color: var(--text-muted);
        letter-spacing: .12em;
        text-transform: uppercase;
        padding-left: 18px;
        margin-top: 4px
      }

      .sb-nav {
        flex: 1;
        padding: 8px 0
      }

      .sb-nav a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 18px;
        color: var(--text-dim);
        font-size: .8rem;
        transition: color var(--tr), background var(--tr);
        border-left: 2px solid transparent
      }

      .sb-nav a:hover {
        color: var(--text);
        background: var(--surface2)
      }

      .sb-nav a.active {
        color: var(--accent-hl);
        background: rgba(79, 125, 255, .08);
        border-left-color: var(--accent)
      }

      .sb-nav .nav-icon {
        width: 14px;
        text-align: center;
        flex-shrink: 0;
        font-size: .7rem
      }

      .sb-footer {
        padding: 14px 18px;
        border-top: 1px solid var(--border);
        font-size: .72rem
      }

      .sb-user {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px
      }

      .sb-avatar {
        width: 28px;
        height: 28px;
        border-radius: 2px;
        object-fit: cover;
        background: var(--border2);
        flex-shrink: 0
      }

      .sb-username {
        color: var(--text);
        font-weight: 600;
        font-size: .75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .sb-role {
        font-size: .6rem;
        margin-top: 1px
      }

      .sb-logout {
        display: block;
        color: var(--text-muted);
        font-size: .7rem;
        transition: color var(--tr)
      }

      .sb-logout:hover {
        color: var(--red)
      }

      .page-header {
        margin-bottom: 28px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 18px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap
      }

      .page-title {
        font-family: var(--display);
        font-size: 1.4rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: -.02em
      }

      .page-subtitle {
        font-size: .72rem;
        color: var(--text-dim);
        margin-top: 4px
      }

      .page-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 28px
      }

      .stat-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px 18px
      }

      .stat-label {
        font-size: .65rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 8px
      }

      .stat-value {
        font-family: var(--display);
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff
      }

      .stat-sub {
        font-size: .65rem;
        color: var(--text-dim);
        margin-top: 4px
      }

      .table-wrap {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden
      }

      .table-toolbar {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap
      }

      .tbl {
        width: 100%;
        border-collapse: collapse;
        font-size: .78rem
      }

      .tbl th {
        text-align: left;
        padding: 9px 14px;
        color: var(--text-muted);
        font-size: .62rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border);
        font-weight: 400;
        white-space: nowrap
      }

      .tbl td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle
      }

      .tbl tbody tr:last-child td {
        border-bottom: none
      }

      .tbl tbody tr {
        transition: background var(--tr)
      }

      .tbl tbody tr:hover {
        background: var(--surface2)
      }

      .tbl .empty-row td {
        text-align: center;
        color: var(--text-muted);
        padding: 40px;
        font-size: .8rem
      }

      .badge {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 2px;
        font-size: .62rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap
      }

      .badge-admin {
        background: rgba(79, 125, 255, .15);
        color: var(--accent-hl);
        border: 1px solid rgba(79, 125, 255, .3)
      }

      .badge-default {
        background: rgba(194, 204, 238, .08);
        color: var(--text-dim);
        border: 1px solid var(--border)
      }

      .badge-warn {
        background: rgba(245, 166, 35, .1);
        color: var(--yellow);
        border: 1px solid rgba(245, 166, 35, .25)
      }

      .badge-danger {
        background: rgba(232, 65, 90, .1);
        color: var(--red);
        border: 1px solid rgba(232, 65, 90, .25)
      }

      .badge-success {
        background: rgba(45, 204, 138, .1);
        color: var(--green);
        border: 1px solid rgba(45, 204, 138, .25)
      }

      .badge-cyan {
        background: rgba(41, 196, 208, .1);
        color: var(--cyan);
        border: 1px solid rgba(41, 196, 208, .25)
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: var(--radius);
        font-family: var(--mono);
        font-size: .75rem;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr);
        border: 1px solid transparent;
        white-space: nowrap;
        text-decoration: none
      }

      .btn-primary {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent)
      }

      .btn-primary:hover {
        background: var(--accent-hl);
        border-color: var(--accent-hl);
        box-shadow: 0 2px 12px var(--accent-glow);
        color: #fff
      }

      .btn-ghost {
        background: transparent;
        border-color: var(--border2);
        color: var(--text-dim)
      }

      .btn-ghost:hover {
        border-color: var(--accent);
        color: var(--accent-hl)
      }

      .btn-danger {
        background: transparent;
        border-color: rgba(232, 65, 90, .3);
        color: var(--red)
      }

      .btn-danger:hover {
        background: rgba(232, 65, 90, .1);
        border-color: var(--red)
      }

      .btn-sm {
        padding: 5px 10px;
        font-size: .68rem
      }

      .btn-ghost.active {
        border-color: var(--accent);
        color: var(--accent-hl);
        background: rgba(79, 125, 255, .1)
      }

      .form-group {
        margin-bottom: 16px
      }

      .form-label {
        display: block;
        font-size: .65rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 6px
      }

      .form-control {
        width: 100%;
        background: var(--bg2);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 9px 12px;
        border-radius: var(--radius);
        outline: none;
        transition: border-color var(--tr)
      }

      .form-control:focus {
        border-color: var(--accent)
      }

      .form-control::placeholder {
        color: var(--text-muted)
      }

      select.form-control option {
        background: var(--bg2)
      }

      .form-hint {
        font-size: .65rem;
        color: var(--text-muted);
        margin-top: 5px
      }

      .form-error {
        font-size: .7rem;
        color: var(--red);
        margin-top: 5px
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
      }

      @media(max-width:600px) {
        .form-row {
          grid-template-columns: 1fr
        }
      }

      .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px
      }

      .card-title {
        font-family: var(--display);
        font-size: .85rem;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 16px
      }

      .card+.card {
        margin-top: 16px
      }

      #drop-zone {
        border: 2px dashed var(--border2);
        border-radius: var(--radius);
        background: var(--surface);
        padding: 48px 32px;
        text-align: center;
        cursor: pointer;
        transition: border-color var(--tr), background var(--tr), box-shadow var(--tr)
      }

      #drop-zone:hover,
      #drop-zone.drag-over {
        border-color: var(--accent);
        background: var(--surface2);
        box-shadow: 0 0 32px var(--accent-glow) inset
      }

      #drop-zone.drag-over {
        border-style: solid
      }

      .dz-title {
        font-family: var(--display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px
      }

      .dz-sub {
        font-size: .72rem;
        color: var(--text-dim);
        margin-bottom: 18px
      }

      #file-input {
        display: none
      }

      .queue-item {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 11px 14px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        align-items: center;
        animation: fadeSlide .18s ease
      }

      @keyframes fadeSlide {
        from {
          opacity: 0;
          transform: translateY(-6px)
        }

        to {
          opacity: 1;
          transform: none
        }
      }

      .qi-meta {
        min-width: 0
      }

      .qi-name {
        font-size: .78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .qi-size {
        font-size: .62rem;
        color: var(--text-dim)
      }

      .qi-status {
        font-size: .7rem;
        white-space: nowrap;
        text-align: right
      }

      .qi-bar-wrap {
        grid-column: 1/-1;
        height: 2px;
        background: var(--border);
        border-radius: 99px;
        overflow: hidden
      }

      .qi-bar {
        height: 100%;
        background: var(--accent);
        border-radius: 99px;
        width: 0%;
        transition: width .12s linear;
        box-shadow: 0 0 4px var(--accent)
      }

      .qi-bar.done {
        background: var(--green);
        box-shadow: 0 0 4px var(--green);
        width: 100%
      }

      .qi-bar.err {
        background: var(--red);
        box-shadow: 0 0 4px var(--red);
        width: 100%
      }

      .qi-status.ok {
        color: var(--green)
      }

      .qi-status.err {
        color: var(--red)
      }

      #toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-left: 3px solid var(--accent);
        color: var(--text);
        padding: 11px 16px;
        border-radius: var(--radius);
        font-size: .75rem;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .18s, transform .18s;
        pointer-events: none;
        z-index: 9999;
        max-width: 300px
      }

      #toast.show {
        opacity: 1;
        transform: none
      }

      #toast.toast-err {
        border-left-color: var(--red)
      }

      #toast.toast-ok {
        border-left-color: var(--green)
      }

      .auth-wrap {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg);
        padding: 20px
      }

      .auth-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 36px;
        width: 100%;
        max-width: 400px
      }

      .auth-logo {
        font-family: var(--display);
        font-size: 1.4rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 24px;
        letter-spacing: -.02em
      }

      .auth-logo span {
        color: var(--accent)
      }

      .auth-footer {
        margin-top: 20px;
        font-size: .72rem;
        color: var(--text-muted);
        text-align: center
      }

      .text-dim {
        color: var(--text-dim)
      }

      .text-muted {
        color: var(--text-muted)
      }

      .text-sm {
        font-size: .72rem
      }

      .text-mono {
        font-family: var(--mono)
      }

      .break-all {
        word-break: break-all
      }

      .mt-0 {
        margin-top: 0
      }

      .mt-1 {
        margin-top: 8px
      }

      .mt-2 {
        margin-top: 16px
      }

      .mt-3 {
        margin-top: 24px
      }

      .mb-1 {
        margin-bottom: 8px
      }

      .mb-2 {
        margin-bottom: 16px
      }

      .mb-3 {
        margin-bottom: 24px
      }

      .d-flex {
        display: flex
      }

      .align-center {
        align-items: center
      }

      .gap-1 {
        gap: 8px
      }

      .gap-2 {
        gap: 16px
      }

      .flex-wrap {
        flex-wrap: wrap
      }

      .flex-1 {
        flex: 1
      }

      .alert {
        padding: 11px 14px;
        border-radius: var(--radius);
        font-size: .78rem;
        margin-bottom: 16px;
        border: 1px solid
      }

      .alert-err {
        background: rgba(232, 65, 90, .08);
        border-color: rgba(232, 65, 90, .25);
        color: var(--red)
      }

      .alert-ok {
        background: rgba(45, 204, 138, .08);
        border-color: rgba(45, 204, 138, .25);
        color: var(--green)
      }

      .alert-info {
        background: rgba(79, 125, 255, .08);
        border-color: rgba(79, 125, 255, .25);
        color: var(--accent-hl)
      }

      .section-head {
        font-size: .65rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px
      }

      .section-head::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border)
      }

      .md-table {
        border-collapse: collapse;
        margin: 8px 0;
        font-size: .9em;
      }

      .md-table th,
      .md-table td {
        border: 1px solid var(--border);
        padding: 4px 9px;
      }

      .md-table th {
        background: var(--bg);
      }

      .task-item {
        list-style: none;
      }

      .task-item input {
        margin-right: 6px;
      }

      .md-embed {
        position: relative;
        display: block;
        max-width: 480px;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: var(--radius);
        overflow: hidden;
        margin: 8px 0;
      }

      .md-embed-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .85;
      }

      .md-embed-play {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 66px;
        height: 46px;
        border: none;
        border-radius: 9px;
        background: rgba(0, 0, 0, .65);
        color: #fff;
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
      }

      .md-embed-play:hover {
        background: rgba(220, 40, 40, .92);
      }

      .md-embed-frame {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
      }

      .md-link-card {
        display: flex;
        align-items: center;
        gap: 12px;
        width: min(100%, 480px);
        margin: 8px 0;
        padding: 12px 14px;
        color: var(--text);
        text-decoration: none;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg2);
        transition: border-color .15s, background .15s, transform .15s;
      }

      .md-link-card:hover {
        border-color: var(--accent);
        background: var(--surface);
        transform: translateY(-1px);
      }

      .md-link-card-icon {
        display: grid;
        place-items: center;
        flex: 0 0 42px;
        height: 42px;
        color: var(--accent);
        font-weight: 700;
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        border-radius: 9px;
        background: color-mix(in srgb, var(--accent) 12%, transparent);
      }

      .md-link-card-body {
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
      }

      .md-link-card-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
      .md-link-card-body span { color: var(--text-muted); font-size: .78rem }
      .md-link-card-open { color: var(--text-muted); font-size: 1.1rem }

      .md-video {
        max-width: 100%;
        border-radius: var(--radius);
        margin: 8px 0;
        display: block;
        background: #000;
      }

      .md-audio {
        width: 100%;
        margin: 8px 0;
        display: block;
      }

      .mdc-wrap {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg2);
        overflow: visible
      }

      .mdc-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        padding: 5px 6px;
        border-bottom: 1px solid var(--border);
        align-items: center
      }

      .mdc-btn {
        background: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: var(--text-dim);
        cursor: pointer;
        font-size: .72rem;
        padding: 3px 8px;
        line-height: 1.2
      }

      .mdc-btn:hover {
        background: var(--bg);
        color: var(--text);
        border-color: var(--border)
      }

      .mdc-btn.active {
        background: var(--accent);
        color: #fff
      }

      .mdc-sp {
        flex: 1
      }

      .mdc-wrap textarea {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: block;
        width: 100%;
        resize: vertical
      }

      .mdc-prev {
        display: none;
        padding: 10px 12px;
        min-height: 80px;
        font-size: .82rem;
        line-height: 1.7;
        color: var(--text)
      }

      .mdc-prev p {
        margin: 0 0 8px
      }

      .mdc-prev ul,
      .mdc-prev ol {
        margin: 0 0 8px;
        padding-left: 22px
      }

      .mdc-prev code {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 2px;
        padding: 1px 4px;
        font-size: .78em
      }

      .mdc-prev pre.md-pre {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        overflow: auto
      }

      .mdc-prev blockquote {
        border-left: 3px solid var(--border2);
        margin: 0 0 8px;
        padding: 2px 0 2px 12px;
        color: var(--text-dim)
      }

      .mdc-prev a {
        color: var(--accent)
      }

      .mdc-prev img.md-img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        margin: 4px 0;
        display: block
      }

      .mdc-menu {
        position: absolute;
        z-index: 500;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
        min-width: 160px;
        max-height: 200px;
        overflow: auto;
        display: none
      }

      .mdc-item {
        padding: 6px 10px;
        font-size: .78rem;
        cursor: pointer;
        color: var(--text)
      }

      .mdc-item.sel,
      .mdc-item:hover {
        background: var(--accent);
        color: #fff
      }