/* =========================================================================
 * AZUA Media System — Unified UI Kit
 * 画像・音源・ステッカー、フロント/管理共通のデザインシステム。
 * カード・ボタン・バッジ・フォーム・ドロップゾーン・テーブル・
 * ページネーション・トースト・空状態・統計タイルをここで一元管理する。
 *
 * 既存の class 名 / id / name 属性は一切変更していない（JS・PHPからの
 * 参照契約を壊さないため）。各ドメインのセレクタをそのまま対象にして
 * 統一トークンでスタイリングし直す方式を採用している。
 * ========================================================================= */

:root {
    /* ブランドカラー（サイト本体の #0039d0 / #22b3e6 を踏襲） */
    --azua-primary: #0039d0;
    --azua-primary-600: #0030b3;
    --azua-primary-700: #032a8f;
    --azua-accent: #22b3e6;
    --azua-accent-600: #1596c4;

    --azua-brand-grad: linear-gradient(135deg, var(--azua-accent) 0%, var(--azua-primary) 100%);

    /* ニュートラル */
    --azua-ink: #0f172a;
    --azua-ink-soft: #1a2440;
    --azua-body: #47506b;
    --azua-muted: #8992a9;
    --azua-line: #e4e8f2;
    --azua-line-soft: #edf0f8;
    --azua-surface: #ffffff;
    --azua-surface-soft: #f6f8fc;
    --azua-surface-tint: #eef2fb;

    /* ステータス（承認待ち / 承認済み / 却下 — 全ドメイン共通マッピング） */
    --azua-ok: #15803d;
    --azua-ok-bg: #e2f8ea;
    --azua-ok-line: #a7ecc0;
    --azua-wait: #b45309;
    --azua-wait-bg: #fef3e2;
    --azua-wait-line: #fbd9a5;
    --azua-ng: #b91c1c;
    --azua-ng-bg: #fdeaea;
    --azua-ng-line: #f6b8b8;
    --azua-info: #1d4ed8;
    --azua-info-bg: #e8eefd;

    /* 形状 / 影 */
    --azua-r-sm: 8px;
    --azua-r-md: 12px;
    --azua-r-lg: 18px;
    --azua-r-pill: 999px;
    --azua-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .04);
    --azua-shadow-md: 0 10px 28px -8px rgba(10, 40, 110, .16);
    --azua-shadow-lg: 0 20px 48px -12px rgba(10, 40, 110, .22);
    --azua-ring: 0 0 0 4px rgba(34, 179, 230, .16);

    --azua-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root { color-scheme: light; }
}

/* =========================================================================
 * 0. 共通プリミティブ（全ドメイン: フォームカード / タイトル / フィールド）
 * ========================================================================= */
.azua-image-form-wrap,
.azua-audio-form-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 1.6em 0;
    font-family: var(--azua-font);
}

.azua-image-form-card,
.azua-image-info-card,
.azua-audio-form-card,
.azua-audio-info-card {
    flex: 1 1 340px;
    background: var(--azua-surface);
    border: 1px solid var(--azua-line-soft);
    border-radius: var(--azua-r-lg);
    box-shadow: var(--azua-shadow-md);
    padding: 30px;
    box-sizing: border-box;
}

.azua-image-form-title,
.azua-audio-form-title {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: 800;
    margin: 0 0 22px;
    color: var(--azua-ink) !important;
    letter-spacing: -.01em;
}
.azua-image-form-title svg,
.azua-audio-form-title svg { flex: 0 0 auto; }

.azua-image-field,
.azua-audio-field { margin-bottom: 20px; }
.azua-image-field label,
.azua-audio-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--azua-ink-soft);
    font-size: .92em;
}

.azua-image-field input[type="text"],
.azua-audio-field input[type="text"] {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--azua-line);
    border-radius: var(--azua-r-md);
    font-size: 1em;
    font-family: inherit;
    background: var(--azua-surface-soft);
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-sizing: border-box;
    color: var(--azua-ink);
}
.azua-image-field input[type="text"]:focus,
.azua-audio-field input[type="text"]:focus {
    border-color: var(--azua-accent);
    outline: none;
    background: var(--azua-surface);
    box-shadow: var(--azua-ring);
}
.azua-image-field input[type="text"]::placeholder,
.azua-audio-field input[type="text"]::placeholder { color: var(--azua-muted); }

/* Dropzone (image / audio) */
.azua-image-dropzone,
.azua-audio-dropzone {
    position: relative;
    border: 1.75px dashed #c7d0e6;
    border-radius: var(--azua-r-md);
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--azua-surface-soft);
    transition: border-color .18s, background .18s;
}
.azua-image-dropzone.dragover, .azua-image-dropzone:hover,
.azua-audio-dropzone.dragover, .azua-audio-dropzone:hover {
    border-color: var(--azua-accent);
    border-style: solid;
    background: #eef9fd;
}
.azua-image-dropzone input[type="file"],
.azua-audio-dropzone input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.azua-image-dropzone__label,
.azua-audio-dropzone__label {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    color: var(--azua-body); pointer-events: none;
}
.azua-image-dropzone__label svg,
.azua-audio-dropzone__label svg { color: var(--azua-accent); }
.azua-image-dropzone__label span,
.azua-audio-dropzone__label span { font-weight: 700; color: var(--azua-ink-soft); }
.azua-image-dropzone__label small,
.azua-audio-dropzone__label small { color: var(--azua-muted); font-size: .85em; }
.azua-image-dropzone__preview { pointer-events: none; text-align: center; }
.azua-audio-dropzone__file { font-weight: 700; color: var(--azua-ink-soft); pointer-events: none; }

/* Multi-file preview grid (image) */
.azua-image-preview-count { font-weight: 800; color: var(--azua-primary); margin-bottom: 10px; font-size: .95em; }
.azua-image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.azua-image-preview-item { border-radius: var(--azua-r-sm); overflow: hidden; background: var(--azua-surface-tint); text-align: center; border: 1px solid var(--azua-line-soft); }
.azua-image-preview-item img { width: 100%; height: 62px; object-fit: cover; display: block; }
.azua-image-preview-item span { display: block; font-size: .7em; color: var(--azua-body); padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 送信ボタン（画像 / 音源共通） */
.azua-image-submit-btn,
.azua-audio-submit-btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    width: 100%; padding: 14px; border: none; border-radius: var(--azua-r-md);
    background: var(--azua-brand-grad); color: #fff;
    font-size: 1.02em; font-weight: 700; cursor: pointer;
    transition: filter .15s, transform .08s, box-shadow .15s;
    text-decoration: none; box-shadow: 0 8px 20px -6px rgba(0, 57, 208, .45);
}
.azua-image-submit-btn:hover, .azua-audio-submit-btn:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }
.azua-image-submit-btn:active, .azua-audio-submit-btn:active { transform: scale(.985); }
.azua-image-submit-btn:disabled, .azua-audio-submit-btn:disabled { opacity: .7; cursor: wait; }

/* 進捗バー */
.azua-image-progress, .azua-audio-progress { margin-top: 14px; height: 6px; background: var(--azua-line-soft); border-radius: 3px; overflow: hidden; }
.azua-image-progress__bar, .azua-audio-progress__bar { height: 100%; background: var(--azua-brand-grad); border-radius: 3px; transition: width .2s; width: 0%; }
.azua-image-spinner, .azua-audio-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: azuaUiSpin .6s linear infinite; vertical-align: middle; }
@keyframes azuaUiSpin { to { transform: rotate(360deg); } }
@keyframes azuaImgSpin { to { transform: rotate(360deg); } }
@keyframes azuaSpin { to { transform: rotate(360deg); } }

/* 案内カード */
.azua-image-info-card p, .azua-image-info-card li,
.azua-audio-info-card p, .azua-audio-info-card li { color: var(--azua-body); font-size: .93em; line-height: 1.75; }
.azua-image-info-card ul, .azua-audio-info-card ul { list-style: none; padding: 0; margin: 12px 0; }
.azua-image-info-card li, .azua-audio-info-card li { padding-left: 1.3em; position: relative; margin-bottom: 9px; }
.azua-image-info-card li::before, .azua-audio-info-card li::before { content: "•"; color: var(--azua-accent); position: absolute; left: 0; font-weight: 800; }
.azua-image-info-card li strong, .azua-audio-info-card li strong { color: var(--azua-ink); }
.azua-image-info-card a, .azua-audio-info-card a { color: var(--azua-primary); font-weight: 600; }
.azua-image-info-note, .azua-audio-info-note {
    margin-top: 18px; padding: 13px 16px; background: var(--azua-wait-bg);
    border: 1px solid var(--azua-wait-line); border-radius: var(--azua-r-sm); color: var(--azua-wait); font-size: .88em; line-height: 1.6;
}

/* トースト */
.azua-image-toast, .azua-audio-toast, .azst-toast {
    padding: 14px 20px; border-radius: var(--azua-r-sm); font-weight: 600; margin-bottom: 20px;
    text-align: center; animation: azuaUiToastIn .3s ease; border: 1px solid transparent; line-height: 1.6;
}
.azua-image-toast--success, .azua-audio-toast--success, .azst-toast--ok { background: var(--azua-ok-bg); color: var(--azua-ok); border-color: var(--azua-ok-line); }
.azua-image-toast--error, .azua-audio-toast--error, .azst-toast--err { background: var(--azua-ng-bg); color: var(--azua-ng); border-color: var(--azua-ng-line); }
@keyframes azuaUiToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes azuaImgToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes azuaToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* 一覧見出し・コントロール（画像 / 音源） */
.azua-image-controls, .azua-audio-list-header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 1.1em; min-height: 40px; flex-wrap: wrap;
}
.azua-image-title, .azua-audio-list-header h3 { font-size: 1.15em; font-weight: 800; color: var(--azua-ink) !important; margin: 0; }
.azua-select-wrapper, .azua-audio-list-controls { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.azua-select-wrapper label, .azua-audio-list-controls label { font-weight: 700; white-space: nowrap; font-size: .9em; color: var(--azua-body); }
.azua-select-wrapper select, .azua-audio-list-controls select, .azua-audio-per-page {
    padding: 7px 12px; border: 1.5px solid var(--azua-line); border-radius: var(--azua-r-sm);
    font-size: .9em; background: var(--azua-surface); color: var(--azua-ink); font-family: inherit;
}
.azua-select-wrapper select:focus, .azua-audio-list-controls select:focus { border-color: var(--azua-accent); outline: none; }

/* =========================================================================
 * 1. 一覧カード（画像 / 音源 フロント）
 * ========================================================================= */
#azua-image-list-wrapper, #azua-image-list-content,
#azua-audio-list-app, #azua-audio-list-content { width: 100%; }

.azua-image-list, .azua-audio-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.azua-media-card, .azua-audio-card {
    display: flex; align-items: center; gap: 18px; padding: 15px 20px; width: 100%; box-sizing: border-box;
    background: var(--azua-surface); border: 1px solid var(--azua-line-soft); border-radius: var(--azua-r-md);
    box-shadow: var(--azua-shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.azua-media-card:hover, .azua-audio-card:hover { transform: translateY(-2px); box-shadow: var(--azua-shadow-md); border-color: var(--azua-line); }

.azua-card-img { flex: 0 0 84px; height: 66px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--azua-r-sm); background: var(--azua-surface-tint); cursor: pointer; transition: opacity .15s; }
.azua-card-img:hover { opacity: .85; }
.azua-card-img img { width: 84px; height: 66px; object-fit: cover; display: block; border-radius: 8px; }

.azua-card-body, .azua-audio-card__body { flex: 1; min-width: 0; }
.azua-card-top, .azua-audio-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.azua-card-top h4, .azua-audio-card__title { margin: 0; font-size: .96em; font-weight: 700; color: var(--azua-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azua-audio-card__title { display: inline-block; }

.azua-card-link, .azua-audio-card__link { display: flex; gap: 7px; align-items: center; margin-top: 7px; }
.azua-card-link input, .azua-audio-card__link input {
    flex: 1; min-width: 0; padding: 6px 11px; border: 1px solid var(--azua-line); border-radius: var(--azua-r-sm);
    font-size: .85em; background: var(--azua-surface-soft); color: var(--azua-body); font-family: inherit;
}
.azua-card-link-placeholder { color: var(--azua-muted); font-size: .85em; font-style: italic; }
.azua-card-side, .azua-audio-card__side { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }

.azua-audio-card__player { flex: 0 0 auto; }
.azua-audio-card__player audio { max-width: 200px; height: 36px; }

/* バッジ（承認待ち / 承認済み / 却下 — 全ドメイン共通配色） */
.azua-media-badge, .azua-audio-badge, .uia-badge, .uaa-admin-badge, .azst-badge {
    display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--azua-r-pill);
    font-size: .78em; font-weight: 700; white-space: nowrap; line-height: 1.7; border: 1px solid transparent;
}
.azua-media-badge--ok, .azua-audio-badge--ok, .uia-badge--ok, .uaa-admin-badge--ok, .azst-badge--ok { color: var(--azua-ok); background: var(--azua-ok-bg); border-color: var(--azua-ok-line); }
.azua-media-badge--ng, .azua-audio-badge--ng, .uia-badge--ng, .uaa-admin-badge--ng, .azst-badge--ng { color: var(--azua-ng); background: var(--azua-ng-bg); border-color: var(--azua-ng-line); }
.azua-media-badge--wait, .azua-audio-badge--wait, .uia-badge--wait, .uaa-admin-badge--wait, .azst-badge--pending { color: var(--azua-wait); background: var(--azua-wait-bg); border-color: var(--azua-wait-line); }
.azua-media-badge--locked { color: var(--azua-wait); background: #ffe9d2; border-color: #f7c98f; }
.azst-badge--cat { background: var(--azua-info-bg); color: var(--azua-info); }

.azua-cat-badge {
    display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--azua-r-pill);
    font-size: .78em; font-weight: 700; background: var(--azua-info-bg); color: var(--azua-info);
    white-space: nowrap; cursor: pointer; transition: background .15s; line-height: 1.7; border: 1px solid transparent;
}
.azua-cat-badge:hover { background: #dde8fb; }
.azua-cat-select { padding: 3px 8px; border: 1.5px solid var(--azua-accent); border-radius: var(--azua-r-sm); font-size: .85em; outline: none; background: var(--azua-surface); cursor: pointer; font-family: inherit; }

/* コピー / 削除ボタン */
.azua-copy-btn, .azua-audio-copy-btn {
    padding: 6px 15px; border: 1.5px solid var(--azua-accent); border-radius: var(--azua-r-sm);
    background: var(--azua-surface); color: var(--azua-accent-600); font-weight: 700; font-size: .85em;
    cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; font-family: inherit;
}
.azua-copy-btn:hover, .azua-audio-copy-btn:hover { background: var(--azua-accent); color: #fff; text-decoration: none; }

.azua-del-btn, .azua-audio-del-btn {
    padding: 7px 18px; border-radius: var(--azua-r-pill); border: 1px solid var(--azua-ng-line);
    background: var(--azua-ng-bg); color: var(--azua-ng); font-weight: 700; font-size: .85em;
    cursor: pointer; transition: background .15s, transform .1s; text-decoration: none; white-space: nowrap; font-family: inherit;
}
.azua-del-btn:hover, .azua-audio-del-btn:hover { background: #fbd7d7; }
.azua-del-btn[disabled] { background: var(--azua-surface-tint); color: var(--azua-muted); border-color: var(--azua-line); cursor: not-allowed; }

/* カテゴリー選択 (アップロードフォーム) */
.azua-image-category-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.azua-image-category-wrap select {
    flex: 1; padding: 11px 14px; border: 1.5px solid var(--azua-line); border-radius: var(--azua-r-md);
    font-size: .95em; background: var(--azua-surface-soft); font-family: inherit; color: var(--azua-ink);
}
.azua-image-category-wrap select:focus { border-color: var(--azua-accent); outline: none; }
.azua-image-new-cat {
    flex: 1; padding: 11px 14px; border: 1.5px solid var(--azua-line); border-radius: var(--azua-r-md);
    font-size: .95em; background: var(--azua-surface-soft); margin-top: 6px; font-family: inherit;
}
.azua-image-new-cat:focus { border-color: var(--azua-accent); outline: none; }

/* 編集ボタン & インライン編集（画像・音源共通） */
.azua-edit-btn { flex: 0 0 auto; padding: 2px 6px; border: none; background: transparent; color: var(--azua-muted); font-size: .95em; cursor: pointer; transition: color .15s; text-decoration: none; line-height: 1; }
.azua-edit-btn:hover { color: var(--azua-accent); }
.azua-editable-title { cursor: default; }
.azua-edit-input { padding: 4px 8px; border: 1.5px solid var(--azua-accent); border-radius: 6px; font-size: .9em; font-weight: 700; width: auto; min-width: 110px; max-width: 100%; background: var(--azua-surface); font-family: inherit; }
.azua-save-btn { padding: 3px 12px; border: none; border-radius: 6px; background: var(--azua-primary); color: #fff; font-size: .8em; font-weight: 700; cursor: pointer; margin-left: 5px; text-decoration: none; font-family: inherit; }
.azua-save-btn:hover { background: var(--azua-primary-600); }
.azua-cancel-btn { padding: 3px 6px; border: none; background: transparent; color: var(--azua-muted); font-size: .9em; cursor: pointer; text-decoration: none; }
.azua-cancel-btn:hover { color: var(--azua-ng); }

/* ライトボックス（画像プレビュー） */
.azua-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.azua-lightbox--open { opacity: 1; }
.azua-lightbox__backdrop { position: absolute; inset: 0; background: rgba(9, 14, 32, .78); backdrop-filter: blur(2px); }
.azua-lightbox__wrap { position: relative; max-width: 90vw; max-height: 90vh; }
.azua-lightbox__wrap img { max-width: 90vw; max-height: 85vh; border-radius: var(--azua-r-md); box-shadow: 0 20px 60px rgba(0,0,0,.45); display: block; }
.azua-lightbox__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: var(--azua-ink); font-size: 1.4em; font-weight: 700; cursor: pointer; box-shadow: var(--azua-shadow-md); display: flex; align-items: center; justify-content: center; line-height: 1; }
.azua-lightbox__close:hover { background: var(--azua-surface-tint); }

/* ページネーション（画像 / 音源 共通見た目） */
.azua-pagination, .azua-audio-pagination { margin-bottom: 12px; }
.azua-pagination-inner, .azua-audio-pages {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center;
}
.azua-page-btn, .azua-audio-page {
    padding: 7px 14px; border: 1.5px solid var(--azua-line); border-radius: var(--azua-r-sm);
    background: var(--azua-surface); cursor: pointer; font-size: .9em; font-weight: 600; color: var(--azua-body);
    transition: all .15s; text-decoration: none; font-family: inherit;
}
.azua-page-btn:hover, .azua-audio-page:hover { border-color: var(--azua-accent); color: var(--azua-accent-600); }
.azua-page-btn.active, .azua-audio-page--active { background: var(--azua-primary); color: #fff; border-color: var(--azua-primary); }
.azua-page-ellipsis { padding: 0 4px; color: var(--azua-muted); user-select: none; }

/* ローダー / 空状態 */
.azua-image-loader, .azua-audio-loader { text-align: center; font-weight: 700; padding: 22px; color: var(--azua-muted); }
.azua-image-empty, .azua-audio-msg, .azst-empty { text-align: center; color: var(--azua-muted); padding: 42px 20px; font-size: .95em; }

@media (max-width: 768px) {
    .azua-image-form-wrap, .azua-audio-form-wrap { flex-direction: column; }
    .azua-image-controls, .azua-audio-list-header { flex-direction: column; align-items: flex-start; }
    .azua-media-card, .azua-audio-card { flex-direction: column; align-items: stretch; gap: 10px; }
    .azua-card-img { height: auto; max-height: 180px; width: 100%; flex: none; }
    .azua-card-img img { width: 100%; height: auto; max-height: 180px; }
    .azua-card-top, .azua-audio-card__top { gap: 6px; align-items: center; min-height: 0; }
    .azua-card-top h4 { font-size: .9em; }
    .azua-card-link, .azua-audio-card__link { flex-direction: column; }
    .azua-card-link input, .azua-audio-card__link input { width: 100%; }
    .azua-card-side { flex-direction: row; justify-content: flex-end; gap: 8px; align-self: stretch; }
    .azua-audio-card__side { align-self: flex-end; }
    .azua-audio-card__player audio { max-width: 100%; width: 100%; }
    .azua-image-category-wrap { flex-direction: column; }
    .azua-select-wrapper { width: 100%; }
}

/* =========================================================================
 * 2. 管理ダッシュボード共通（統計タイル / テーブル / アクションボタン）
 *    画像: .uia-*  /  音源: .uaa-admin-*
 * ========================================================================= */
.uia-stats, .uaa-admin-stats {
    display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.uia-stat, .uaa-admin-stat {
    flex: 1; min-width: 130px; padding: 18px 16px; border-radius: var(--azua-r-md);
    text-align: center; font-weight: 700; background: var(--azua-surface);
    border: 1px solid var(--azua-line-soft); box-shadow: var(--azua-shadow-sm);
    position: relative; overflow: hidden;
}
.uia-stat::before, .uaa-admin-stat::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--azua-muted);
}
.uia-stat--total::before, .uaa-admin-stat--total::before { background: var(--azua-primary); }
.uia-stat--ok::before, .uaa-admin-stat--ok::before { background: var(--azua-ok); }
.uia-stat--wait::before, .uaa-admin-stat--wait::before { background: var(--azua-wait); }
.uia-stat--ng::before, .uaa-admin-stat--ng::before { background: var(--azua-ng); }

.uia-stat--total, .uaa-admin-stat--total { color: var(--azua-primary); }
.uia-stat--ok, .uaa-admin-stat--ok { color: var(--azua-ok); }
.uia-stat--wait, .uaa-admin-stat--wait { color: var(--azua-wait); }
.uia-stat--ng, .uaa-admin-stat--ng { color: var(--azua-ng); }

.uia-stat__num, .uaa-admin-stat__num { font-size: 1.9em; display: block; font-weight: 800; color: var(--azua-ink); letter-spacing: -.02em; }
.uia-stat--total .uia-stat__num, .uia-stat--ok .uia-stat__num, .uia-stat--wait .uia-stat__num, .uia-stat--ng .uia-stat__num,
.uaa-admin-stat--total .uaa-admin-stat__num, .uaa-admin-stat--ok .uaa-admin-stat__num, .uaa-admin-stat--wait .uaa-admin-stat__num, .uaa-admin-stat--ng .uaa-admin-stat__num { color: inherit; }
.uia-stat__label, .uaa-admin-stat__label { font-size: .85em; opacity: .85; color: var(--azua-body); font-weight: 600; }

.uia-table, .uaa-admin-table, .azst-table {
    width: 100%; border-collapse: collapse; margin-top: 6px;
    background: var(--azua-surface); border: 1px solid var(--azua-line-soft); border-radius: var(--azua-r-md); overflow: hidden;
}
.uia-table th, .uia-table td,
.uaa-admin-table th, .uaa-admin-table td,
.azst-table th, .azst-table td { padding: 12px 14px; border-bottom: 1px solid var(--azua-line-soft); vertical-align: middle; text-align: left; }
.uia-table th, .uaa-admin-table th, .azst-table th {
    background: var(--azua-surface-soft); font-size: .78em; color: var(--azua-body);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.uia-table tr:hover td, .uaa-admin-table tr:hover td, .azst-table tr:hover td { background: var(--azua-surface-soft); }
.uia-table tr:last-child td, .uaa-admin-table tr:last-child td, .azst-table tr:last-child td { border-bottom: none; }
.azst-table code, .uia-table code { background: var(--azua-surface-tint); padding: 2px 6px; border-radius: 4px; font-size: .85em; }

.uia-btn, .uaa-admin-btn {
    display: inline-block; padding: 7px 17px; border: none; border-radius: var(--azua-r-pill);
    font-weight: 700; font-size: .85em; color: #fff; text-decoration: none; text-align: center;
    transition: filter .15s, opacity .15s; margin: 2px 4px 2px 0; cursor: pointer; line-height: 1.4; font-family: inherit;
}
.uia-btn--approve, .uaa-admin-btn--approve { background: var(--azua-ok); }
.uia-btn--reject, .uaa-admin-btn--reject { background: var(--azua-ng); }
.uia-btn--gray, .uaa-admin-btn--gray { background: #94a3b8; }
.uia-btn:hover, .uaa-admin-btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.uia-btn:visited, .uaa-admin-btn:visited { color: #fff; text-decoration: none; }
.uia-btn[disabled], .uaa-admin-btn[disabled] { opacity: .5; cursor: wait; }

.uia-link, .uaa-admin-link { max-width: 280px; width: 100%; padding: 5px 9px; border: 1px solid var(--azua-line); border-radius: var(--azua-r-sm); font-size: .85em; background: var(--azua-surface-soft); font-family: inherit; color: var(--azua-body); }

.uia-img-cell { position: relative; display: inline-block; }
.uia-img-cell img { max-width: 120px; max-height: 80px; border-radius: var(--azua-r-sm); object-fit: cover; display: block; }
.uia-bg-toggle { position: absolute; top: 3px; right: 3px; border: none; background: rgba(15, 23, 42, .5); color: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 12px; line-height: 24px; text-align: center; }
.uia-img-cell.dark-bg { background: #1a2033; padding: 4px; border-radius: 10px; }

.uia-action-cell, .uaa-admin-actions { white-space: nowrap; }
.uia-link-cell em, .uaa-link-cell em { color: var(--azua-muted); font-style: italic; }

/* 管理ページのフォーム型ページネーション（image / audio 管理ダッシュボード） */
.azua-admin-pagination { margin-top: 18px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; align-items: center; }
.azua-admin-pagination .azua-page-btn { background: var(--azua-surface); }
.azua-admin-pagination .azua-page-btn.active { background: var(--azua-primary); color: #fff; border-color: var(--azua-primary); }

@media (max-width: 768px) {
    .uaa-admin-table, .uia-table { font-size: .85em; }
    .uaa-admin-table audio { max-width: 120px; }
}

/* =========================================================================
 * 3. ステッカー（フロント / 管理）
 * ========================================================================= */
.azst-card {
    background: var(--azua-surface); border: 1px solid var(--azua-line-soft); border-radius: var(--azua-r-lg);
    box-shadow: var(--azua-shadow-md); padding: 30px; margin: 1.6em 0; max-width: 900px; font-family: var(--azua-font);
}
.azst-card h3 { display: flex; align-items: center; margin: 0 0 18px; font-size: 1.2em; font-weight: 800; color: var(--azua-ink) !important; letter-spacing: -.01em; }
.azst-page-title { font-size: 2rem; font-weight: 800; color: var(--azua-primary); letter-spacing: -.01em; margin: 0 0 18px; }
/* 画像・音源のフォームレイアウト（.azua-image-form-wrap 等）と幅・余白・並び方を完全に揃える */
.azst-layout { display: flex; flex-wrap: wrap; gap: 22px; margin: 1.6em 0; font-family: var(--azua-font); }
.azst-card--form, .azst-card--guide { flex: 1 1 340px; max-width: none; margin: 0; }
.azst-card--guide p { margin: 0 0 12px; color: var(--azua-body); font-size: .93em; line-height: 1.75; }
.azst-guide-list { margin: 0; padding-left: 20px; color: var(--azua-body); font-size: .93em; line-height: 1.75; }
.azst-guide-list li { margin-bottom: 9px; }
.azst-guide-list li strong { color: var(--azua-ink); }
.azst-guide-note { margin-top: 14px; padding: 13px 15px; border-radius: var(--azua-r-sm); background: var(--azua-wait-bg); border: 1px solid var(--azua-wait-line); color: var(--azua-wait); font-size: .9em; line-height: 1.6; }

.azst-form .azst-label { display: block; font-weight: 700; margin: 20px 0 7px; font-size: .92em; color: var(--azua-ink-soft) !important; }
.azst-input, .azst-select {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--azua-line); border-radius: var(--azua-r-md);
    font-size: 1em; background: var(--azua-surface-soft); transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box; font-family: inherit; color: var(--azua-ink);
}
.azst-input:focus, .azst-select:focus { border-color: var(--azua-accent); outline: none; background: var(--azua-surface); box-shadow: var(--azua-ring); }

.azst-dropzone {
    position: relative; border: 1.75px dashed #c7d0e6; border-radius: var(--azua-r-md); padding: 34px 20px; text-align: center;
    cursor: pointer; transition: border-color .18s, background .18s; margin: 8px 0; background: var(--azua-surface-soft);
}
.azst-dropzone:hover, .azst-dragover { border-color: var(--azua-accent); border-style: solid; background: #eef9fd; }
.azst-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.azst-dropzone-inner svg { color: var(--azua-accent); }
.azst-dropzone-inner p { color: var(--azua-ink-soft); margin: 0; font-size: .93em; font-weight: 700; }
.azst-dropzone-inner small { color: var(--azua-muted); font-size: .85em; }

.azst-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 14px; border: none;
    border-radius: var(--azua-r-md); background: var(--azua-brand-grad); color: #fff; font-size: 1.02em; font-weight: 700;
    cursor: pointer; transition: filter .15s, transform .08s; box-shadow: 0 8px 20px -6px rgba(0, 57, 208, .45); font-family: inherit;
}
.azst-btn:hover { filter: brightness(1.06); }
.azst-btn:active { transform: scale(.985); }

.azst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 14px; }
.azst-item { border: 1px solid var(--azua-line-soft); border-radius: var(--azua-r-md); overflow: hidden; background: var(--azua-surface-soft); text-align: center; transition: box-shadow .2s; }
.azst-item:hover { box-shadow: var(--azua-shadow-md); }
.azst-item-img { width: 100%; height: auto; max-height: 140px; object-fit: cover; }
.azst-item-info { padding: 11px; }
.azst-item-info strong { display: block; font-size: .92em; color: var(--azua-ink); }
.azst-item-info small { display: block; color: var(--azua-muted); font-size: .8em; margin-bottom: 4px; }

.azst-quota { background: var(--azua-info-bg); border: 1px solid #c7d9fb; border-radius: var(--azua-r-md); padding: 11px 15px; margin-bottom: 10px; font-size: .92em; color: var(--azua-primary-700); font-weight: 600; }
.azst-quota-note { display: block; margin-top: 5px; color: var(--azua-wait); font-size: .9em; font-weight: 500; }

/* 画像・音源の一覧見出し（.azua-image-controls）と幅・サイズ・余白を揃える */
.azst-list-wrap { margin-top: 0; font-family: var(--azua-font); }
.azst-list-title { font-size: 1.15em; font-weight: 800; color: var(--azua-ink) !important; margin: 0 0 1.1em; }
.azst-list-warning { margin: -0.6em 0 1.1em; color: var(--azua-muted); line-height: 1.6; font-size: .82em; }
.azst-list { display: flex; flex-direction: column; gap: 10px; }
.azst-list-item { display: flex; gap: 15px; align-items: center; background: var(--azua-surface); border: 1px solid var(--azua-line-soft); border-radius: var(--azua-r-md); padding: 13px 15px; box-shadow: var(--azua-shadow-sm); transition: box-shadow .15s, transform .15s; }
.azst-list-item:hover { box-shadow: var(--azua-shadow-md); transform: translateY(-1px); }
.azst-list-thumb { width: 74px; height: 54px; border-radius: var(--azua-r-sm); object-fit: cover; background: var(--azua-surface-tint); flex: 0 0 auto; }
.azst-list-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--azua-muted); font-size: .75em; }
.azst-list-main { flex: 1; min-width: 0; }
.azst-list-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.azst-list-head strong { font-size: 1.02em; color: var(--azua-ink); }
.azst-list-sub { font-size: .9em; color: var(--azua-body); }
.azst-list-actions { display: flex; align-items: center; justify-content: flex-end; }
.azst-list-btn { appearance: none; border: 1px solid transparent; background: var(--azua-surface); padding: 8px 15px; border-radius: var(--azua-r-sm); font-size: .86em; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; }
.azst-list-btn--delete { border-color: var(--azua-ng-line); color: var(--azua-ng); background: var(--azua-ng-bg); }
.azst-list-btn--delete:hover { background: #fbd7d7; }

.azst-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.azst-stat { flex: 1; min-width: 130px; background: var(--azua-surface); border: 1px solid var(--azua-line-soft); box-shadow: var(--azua-shadow-sm); border-radius: var(--azua-r-md); padding: 18px 16px; text-align: center; position: relative; overflow: hidden; }
.azst-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--azua-primary); }
.azst-stat--ok::before { background: var(--azua-ok); }
.azst-stat--warn::before { background: var(--azua-wait); }
.azst-stat--ng::before { background: var(--azua-ng); }
.azst-stat-num { display: block; font-size: 1.9em; font-weight: 800; color: var(--azua-ink); letter-spacing: -.02em; }
.azst-stat small { color: var(--azua-body); font-size: .85em; font-weight: 600; opacity: .85; }

.azst-table-btn { padding: 5px 13px; border: none; border-radius: var(--azua-r-sm); font-size: .82em; font-weight: 700; cursor: pointer; margin-right: 4px; font-family: inherit; transition: filter .15s; }
.azst-table-btn--ok { background: var(--azua-ok-bg); color: var(--azua-ok); }
.azst-table-btn--ok:hover { filter: brightness(.96); }
.azst-table-btn--ng { background: var(--azua-ng-bg); color: var(--azua-ng); }
.azst-table-btn--ng:hover { filter: brightness(.96); }
.azst-table-btn--warn { background: var(--azua-wait-bg); color: var(--azua-wait); }
.azst-table-btn--warn:hover { filter: brightness(.96); }

@media (max-width: 640px) {
    .azst-page-title { font-size: 1.6rem; }
    .azst-layout { flex-direction: column; }
    .azst-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .azst-list-item { padding: 10px; gap: 10px; flex-wrap: wrap; }
    .azst-list-actions { width: 100%; justify-content: flex-start; }
    .azst-list-thumb { width: 62px; height: 46px; }
    .azst-table { font-size: .8em; }
    .azst-table th, .azst-table td { padding: 8px 6px; }
    .azst-stats { gap: 8px; }
    .azst-stat { padding: 10px 14px; }
}

/* =========================================================================
 * 3.5 タブ切り替え（画像・音源・ステッカーを1ページ内で切り替え）
 * ========================================================================= */
.azua-media-tabs { font-family: var(--azua-font); }
.azua-media-tabs__nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--azua-line);
    margin-bottom: 24px;
}
.azua-media-tab {
    appearance: none; border: none; background: transparent;
    padding: 12px 20px; margin-bottom: -1px;
    font-family: inherit; font-size: .98em; font-weight: 700;
    color: var(--azua-body); cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.azua-media-tab:hover { color: var(--azua-ink); }
.azua-media-tab.is-active { color: var(--azua-primary); border-bottom-color: var(--azua-primary); }
.azua-media-tab-panel { display: none; }
.azua-media-tab-panel.is-active { display: block; animation: azuaMediaTabIn .2s ease; }
.azua-media-tab-stack > *:first-child { margin-top: 0; }
.azua-media-tab-stack > * + * { margin-top: 36px; }
@keyframes azuaMediaTabIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .azua-media-tab { padding: 10px 14px; font-size: .92em; flex: 1 1 auto; text-align: center; }
}

/* =========================================================================
 * 4. wp-admin コンテキストでの微調整
 *    <div class="wrap"> の中にダッシュボード/フォームが直接埋め込まれる
 *    ケースでも余白・タイポグラフィが浮かないようにする。
 * ========================================================================= */
.wrap > .uia-stats,
.wrap > .uaa-admin-stats,
.wrap > .azst-card,
.wrap > .azst-list-wrap { margin-top: 16px; }

.wrap .uia-table, .wrap .uaa-admin-table, .wrap .azst-table { font-size: .92em; }