/* ===== 主题变量 ===== */
:root, body {
    /* 背景层 */
    --bg-primary: #070b14;
    --bg-secondary: #0d1526;
    --bg-tertiary: #0b1d35;
    --bg-card: #0f1828;
    --bg-input: #0a0e18;
    --bg-hover: rgba(255,255,255,0.05);
    --bg-active: rgba(0,180,255,0.15);
    --bg-table-odd: #0d1b2a;
    --bg-table-even: #0a1f36;

    /* 品牌/交互 */
    --accent-primary: #00b4ff;
    --accent-primary-hover: #33c5ff;
    --accent-secondary: #5bc0eb;
    --accent-magenta: #c77dff;

    /* 文本 */
    --text-primary: #e8edf3;
    --text-secondary: #8ea4c0;
    --text-muted: #5a6a85;
    --text-on-accent: #070b14;

    /* 边框 */
    --border-subtle: rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.12);
    --border-accent: rgba(0,180,255,0.4);

    /* 状态 */
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;

    /* 网格 */
    --grid-color: rgba(255,255,255,0.08);

    /* 阴影 */
    --shadow-card: 0 4px 20px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.5), 0 0 28px rgba(0,180,255,0.15);
    --shadow-glow: 0 0 24px rgba(0,180,255,0.25);
    --shadow-selected: 0 0 40px rgba(0,180,255,0.45);
}

/* ===== 浅色主题变量覆盖 ===== */
body.theme-light {
    --bg-primary: #f0f4f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8eef5;
    --bg-card: rgba(255,255,255,0.72);
    --bg-input: #ffffff;
    --bg-hover: rgba(6,182,212,0.06);
    --bg-active: rgba(6,182,212,0.1);
    --bg-table-odd: #f0f4f8;
    --bg-table-even: #e4eaf2;

    --accent-primary: #06b6d4;
    --accent-primary-hover: #0891b2;
    --accent-secondary: #22d3ee;
    --accent-magenta: #a855f7;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-accent: #ffffff;

    --border-subtle: rgba(6,182,212,0.08);
    --border-default: rgba(6,182,212,0.15);
    --border-accent: rgba(6,182,212,0.5);

    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;

    --grid-color: rgba(0,0,0,0.12);

    --shadow-card: 0 2px 12px rgba(6,182,212,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 8px 32px rgba(6,182,212,0.12), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 20px rgba(6,182,212,0.2);
    --shadow-selected: 0 0 32px rgba(6,182,212,0.35);
}

body.theme-light .dialog-header-close {
    filter: brightness(0) invert(0.4);
}

body.theme-light .toolbar-icon,
body.theme-light .toolbar-app-icon,
body.theme-light .toolbar-network-icon,
body.theme-light .toolbar-store-icon {
    filter: brightness(0.35);
}

body.theme-light .toolbar-icon:hover,
body.theme-light .toolbar-app-icon:hover,
body.theme-light .toolbar-network-icon:hover,
body.theme-light .toolbar-store-icon:hover {
    filter: none;
}

/* ── Dialog utility classes ── */
.licensed { color: var(--success); }
.expired { color: var(--danger); }
.trial { color: var(--warning); }
.dialog-muted { color: var(--text-muted); font-size: 12px; }
.dialog-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.msg-success { color: var(--success); }
.msg-error { color: var(--danger); }
.mono-field {
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--accent-secondary);
    font-family: monospace;
    font-size: 13px;
    padding: 6px 10px;
    box-sizing: border-box;
}
.mono-field-dark {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 13px;
    padding: 6px 10px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
}

body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(0,180,255,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(91,192,235,0.04) 0%, transparent 60%);
    margin: 0px;
    padding: 0px;
    font-family: 'Rubik';
    color: var(--text-primary);
    min-height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

form {
    margin: 0px;
}

input {
    font-family: inherit;
}

input[type="text"], input[type="password"] {
    box-sizing: border-box;
    height: 30px;
    font-size: inherit;
    padding: 5px;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    background: var(--bg-input);
    border-radius: 2px;
}

input[type="number"] {
    box-sizing: border-box;
    height: 25px;
    font-size: inherit;
    padding: 4px;
    margin: 0px 5px;
    color: var(--text-primary);
    background: var(--bg-input);
    vertical-align: middle;
    border: 1px solid var(--border-default);
    border-radius: 2px;
}

input[type="checkbox"] {
    vertical-align: middle;
    margin-bottom: 2px;
}

input[type="radio"] {
    vertical-align: middle;
    margin-bottom: 3px;
}

input.native-app-checker {
    margin: 5px 5px 0px 0px;
}

div.checker-label {
    display: inline-block;
    margin: 5px 0px 0px;
}

select {
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
    margin: 0px 10px;
    padding: 1px 10px;
}

select.target-platform {
    margin: 0px;
    padding: 4px 3px;
    width: 250px;
}

textarea {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    padding: 5px;
    vertical-align: top;
    resize: vertical;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    background: var(--bg-input);
    border-radius: 2px;
}

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

textarea::-webkit-scrollbar-track {
    background: #c8c8c8;
}

textarea::-webkit-scrollbar-thumb {
    background: grey;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: grey;
}

div.two-buttons {
    margin: auto;
}

div.two-buttons div {
    display: inline-block;
    width: 49%;
    text-align: center;
}

div.two-buttons input.button {
    display: block;
}

div.main-panel {
    width: 80%;
    max-width: 2000px;
    min-width: 320px;
    height: 100%;
    margin: 0px auto;
}

div.banner {
    user-select: none;
    -webkit-user-select: none;
    /* background: linear-gradient(300deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%); */
    background: linear-gradient(303deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, #bfd0dd 100%);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    box-shadow: var(--shadow-card), var(--shadow-glow);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

/* banner 中央标题：页面功能名（如 项目管理器 / App Manager） */
span.banner-center-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: 'Rubik', sans-serif;
    text-shadow:
        1px 1px 0 rgba(0,0,0,0.65),
        2px 2px 0 rgba(0,0,0,0.55),
        3px 3px 0 rgba(0,0,0,0.45),
        4px 4px 6px rgba(0,0,0,0.4);
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
}

img.banner-logo {
    width: 88px;
    height: 88px;
    filter: drop-shadow(0 0 6px rgba(0,180,255,0.4));
}

.banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

span.banner-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: 'Rubik', sans-serif;
    text-shadow:
        1px 1px 0 rgba(0,0,0,0.65),
        2px 2px 0 rgba(0,0,0,0.55),
        3px 3px 0 rgba(0,0,0,0.45),
        4px 4px 6px rgba(0,0,0,0.4);
    line-height: 1.2;
}

span.banner-subtitle {
    color: #7bd8fa;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: 'Rubik', sans-serif;
    text-shadow:
        1px 1px 0 rgba(0,0,0,0.6),
        2px 2px 3px rgba(0,0,0,0.45);
}

div.banner-store,
div.banner-network {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

/* ===== App Cards ===== */

.app-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    padding: 20px 0;
}

/* 超宽屏 5 列布局 */
@media (min-width: 2049px) {
    .app-cards {
        grid-template-columns: repeat(5, 1fr);
    }
}

.app-card {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-default);
    min-width: 0;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}

.app-card a {
    -webkit-user-drag: none;
    user-drag: none;
    draggable: false;
}

.app-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-accent);
}

.app-card:hover .app-card-icons .app-icon {
    filter: none;
}

.app-card-cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.app-card-cover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,180,255,0.3), transparent);
    z-index: 2;
}

.app-card-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    position: relative;
}

.app-card-bg::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,180,255,0.15), transparent);
    z-index: 1;
    pointer-events: none;
}

.app-card-bg.has-cover {
    background-size: cover;
    background-position: center;
}

.app-card-bg.has-cover::before {
    display: none;
}

.app-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.app-card:hover .app-card-video.is-playing,
.app-card.app-selected .app-card-video.is-playing {
    opacity: 1;
}

.app-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.app-card:hover .app-card-progress,
.app-card.app-selected .app-card-progress,
.app-card-progress.is-dragging {
    opacity: 1;
}

.app-card-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-primary, #64b5f6);
    transition: width 0.1s linear;
}

.app-card-progress.is-dragging .app-card-progress-fill {
    transition: none;
}

.app-card-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--accent-primary, #64b5f6);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
    left: 0%;
}

.app-card-progress:hover .app-card-progress-thumb,
.app-card-progress.is-dragging .app-card-progress-thumb {
    opacity: 1;
}

.app-card-bar {
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    gap: 10px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    min-height: 48px;
}

a.app-card-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    letter-spacing: 0.3px;
}

a.app-card-title:hover {
    color: var(--accent-primary);
}

.app-card.has-video a.app-card-title {
    color: var(--accent-primary);
}

.app-card-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-card-icons .app-icon {
    width: 28px;
    height: 28px;
    background-size: 100%;
    opacity: 0.45;
    transition: opacity 0.15s, transform 0.15s, filter 0.2s;
    filter: grayscale(1) brightness(0.3);
    position: relative;
}

body.theme-light .app-card-icons .app-icon {
    filter: grayscale(1) brightness(0.9);
}

.app-card-icons .app-icon:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: none;
}

.app-icon.has-badge {
    position: relative;
}

/* 图标加载状态 */
.app-card.icons-loading .app-icon {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.app-card.icons-loaded .app-icon {
    opacity: 1;
}

.app-card.icons-error .app-icon {
    opacity: 0.4;
}

/* 图标数量 badge 动画 */
.icon-badge {
    animation: badgeFadeIn 0.3s ease;
}

@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.icon-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    min-width: 8px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
    font-family: 'Rubik', sans-serif;
}

/* File picker dialog */
.file-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}


.file-picker-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 16px 0;
    min-width: 280px;
    max-width: 400px;
    max-height: 50vh;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}

.file-picker-dialog .file-picker-title {
    font-size: 14px;
    font-weight: 600;
    padding: 0 16px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    border-radius: 10px 10px 0 0;
    z-index: 1;
}

.file-picker-dialog::-webkit-scrollbar {
    width: 6px;
}

.file-picker-dialog::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.file-picker-dialog::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.file-picker-dialog a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.1s;
}

.file-picker-dialog a:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.app-card.app-selected {
    border-color: var(--accent-primary);
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    box-shadow: var(--shadow-selected);
}

.app-card.app-selected .app-card-icons .app-icon {
    filter: none;
}

/* Responsive */
/* Phone: 1 column guaranteed, enlarged touch targets */
@media (max-width: 699px) {
    .app-cards {
        grid-template-columns: minmax(240px, 1fr);
        gap: 16px;
    }
    div.main-panel {
        width: 94%;
    }
    .app-card {
        min-width: 0;
    }
    .app-card-cover {
        /* aspect-ratio 自适应，不再设固定高度 */
    }
    .app-card-bar {
        padding: 14px 16px;
    }
    a.app-card-title {
        font-size: 16px;
        font-weight: 600;
    }
    .app-card-icons .app-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    div.banner {
        height: 72px;
        padding: 0 14px;
        gap: 10px;
        min-height: 72px;
    }
    span.banner-title {
        font-size: 16px;
        letter-spacing: 1px;
    }
    span.banner-subtitle {
        font-size: 10px;
        letter-spacing: 2px;
    }
    img.banner-logo {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    #filterInput {
        width: 100%;
        min-width: 0;
        height: 36px;
        font-size: 16px;
        padding: 6px 30px 6px 10px;
    }
    div.search {
        float: none;
        margin: 0 0 12px 0;
        width: 100%;
        flex-wrap: wrap;
    }
    .sort-btns {
        width: 100%;
    }
    button.sort-btn {
        flex: 1;
        text-align: center;
        font-size: 14px;
        padding: 10px 8px;
        border-radius: 6px;
    }
    button.sort-btn.icon-btn {
        min-width: 48px;
        min-height: 44px;
        padding: 8px 0;
        flex: none;
    }
    .paginator {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .paginator-right {
        justify-content: center;
        flex-wrap: wrap;
    }
    button.paginator-btn {
        width: 34px;
        height: 34px;
    }
}

/* Tablet: 2 columns max */
@media (min-width: 700px) and (max-width: 1099px) {
    .app-cards {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 18px;
    }
    div.main-panel {
        width: 90%;
    }
}

/* Small desktop: 3 columns */
@media (min-width: 1100px) and (max-width: 1499px) {
    .app-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    div.main-panel {
        width: 85%;
    }
}

/* ===== Paginator ===== */

.paginator {
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 20px;
    gap: 16px;
    flex-wrap: wrap;
}


.paginator-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paginator-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.paginator-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

select.paginator-size {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    margin-right: 8px;
}

button.paginator-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-default);
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

button.paginator-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

button.paginator-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

button.paginator-btn.active {
    background: var(--bg-active);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

span.paginator-pages {
    display: flex;
    gap: 3px;
}

.red {
    color: var(--danger);
}

.green {
    color: var(--success);
}

.hidden {
    display: none !important;
}

.folder-item-hidden {
    display: none !important;
}

.button {
    border: none;
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    height: 32px;
    font-size: inherit;
    display: block;
    min-width: 100px;
    padding: 0px 15px;
    margin: 20px auto 10px auto;
    font-family: inherit;
    cursor: pointer;
}

.button-like {
    border: none;
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    height: 32px;
    font-size: inherit;
    display: inline-block;
    min-width: 100px;
    padding: 0px 15px;
    margin: 20px auto 10px auto;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
}

a.colored-link {
    color: var(--accent-primary);
}

.always-scroll {
    overflow-y: scroll;
}

div.package-indicator-cont {
    margin: -105px 5px;
    float: right;
    -webkit-user-select: none;
    user-select: none;
}

div.package-indicator-menu {
    margin: 0px 5px 0px 0px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    float: right;
    border-radius: 0px 10px 10px 0px;
    border-left: 1px solid white;
    color: white;
    font-family: DaysOne;
    line-height: 0.8em;
}

div.package-indicator {
    width: 100px;
    height: 20px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    color: white;
    font-family: DaysOne;
}

div.package-indicator a {
    display: block;
}

div.package-indicator.simple {
    border-radius: 10px;
}

div.package-indicator:nth-child(2) {
    margin-right: 26px;
    border-radius: 10px 0px 0px 10px;
}
div.package-indicator:nth-child(3) {
    border-radius: 0px;
    display: none;
}
div.package-indicator:nth-child(4) {
    border-radius: 0px 0px 10px 10px;
    display: none;
}

div.package-indicator.blender {
    background: linear-gradient(45deg, rgb(255, 96, 8) 0%, rgb(233, 158, 83) 100%);
}
div.package-indicator.max {
    background: linear-gradient(45deg, rgb(0, 165, 178) 0%, rgb(81, 220, 232) 100%);
}
div.package-indicator.maya {
    background: linear-gradient(45deg, rgb(217, 20, 20) 0%, rgb(242, 123, 123) 100%);
}

div.package-indicator-menu.blender {
    background: #e99e53;
}
div.package-indicator-menu.max {
    background: #51dce8;
}
div.package-indicator-menu.maya {
    background: #f27b7b;
}

div.package-indicator-cont.menu-opened div.package-indicator:nth-child(2) {
    border-radius: 10px 0px 0px 0px;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(3) {
    display: block;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(4) {
    display: block;
}

div.package-indicator:nth-child(2) a {
    pointer-events: none;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(2) a {
    pointer-events: auto;
}


/* Search input */

div.search {
    float: right;
    margin: -38px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

div.search .search-input {
    background-color: var(--bg-input, #dee1e5);
    border-style: solid;
    border-color: var(--border-default, #b1b1b1);
    color: var(--text-primary, #333);
    border-width: 1px;
    width: 194px;
    padding: 4px 22px 4px 8px;
    height: 28px;
    background-image: url(../img/search.svg);
    background-position: center right 4px;
    background-repeat: no-repeat;
    background-size: auto 16px;
}

.sort-btns {
    display: flex;
    gap: 4px;
}

button.sort-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

button.sort-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
}

button.sort-btn.active {
    color: var(--accent-primary);
    background: var(--bg-active);
    border-color: var(--border-accent);
}

button.sort-btn.icon-btn {
    min-width: 36px;
    min-height: 32px;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

button.sort-btn .sort-arrow {
    font-size: 9px;
    margin-left: 2px;
}

.app-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

span.app-card-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

span.engine-tag {
    font-size: 10px;
    color: var(--accent-secondary);
    background: var(--bg-hover);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 500;
}

span.lang-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: #2a5588;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    font-family: 'Rubik', sans-serif;
    padding: 0 3px;
}

/* Generic central table */

.main-panel table {
    vertical-align: top;
    width: 100%;
    border-collapse: collapse;
    background-color: #eaeaea;
}

.main-panel table tr {
}

/* NOTE: requires Chrome 111+ */
.main-panel table tr:nth-child(odd of :not(.hidden)) {
    background: #fbfbfb;
}

/* NOTE: requires Chrome 111+ */
.main-panel table tr:nth-child(even of :not(.hidden)) {
    background: #f2f2f2;
}

tr.filterable.app-selected {
    background-color: rgba(22, 90, 176, 0.12) !important;
}

.main-panel table th {
    color: #fff;
    background-color: #444444;
    height: 18px;
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
    font-size: 13px;
    font-weight: normal;
}

.main-panel table td {
    vertical-align: top;
    padding: 0px;
}

/* Main template */

table.app-list {
}

table.app-list span.app-number {
    padding-left: 0px;
    padding-right: 10px;
}

table.app-list th:nth-of-type(1) {
    width: calc(32px + 239px);
    background-image: none;
}

table.app-list td:nth-of-type(1) {
    width: 32px;
}

table.app-list td:nth-of-type(2) {
    width: 250px;
    padding: 7px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(3) {
    width: 134px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(4) {
    width: 134px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(5) {
    width: 142px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

/*
table.app-list th:nth-of-type(4),td:nth-of-type(5) {
    width: calc(800px - 32px - 250px - 2 * 160px);
}
*/

table.app-list a.app-non-collapsible {
    background-image: url("../img/app_collapsed.svg");
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    cursor: default;
    vertical-align: middle;
}

table.app-list a.app-collapsed {
    background-image: url("../img/app_expanded.svg");
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

table.app-list a.app-expanded {
    background-image: url("../img/app_expanded.svg");
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
}


/* Manage template */

table.app-assets-list {
    padding: 0px;
    display: inline-block;
    border-collapse: collapse;
}

table.app-assets-list a {
    -webkit-user-drag: none;
    user-drag: none;
    draggable: false;
}

table.app-assets-list th {
    border-left: 0px;
    border-right: 0px;
    color: #fff;
    background-color: #444444;
    height: 18px;
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
    font-size: 13px;
    font-weight: normal;
}

table.app-assets-list th:nth-of-type(1) {
    background-image: none;
    width: 400px;
}

table.app-assets-list th:nth-of-type(2) {
    width: 400px;
}

table.app-assets-list td {
    padding: 0px;
    margin: 0px;
}

table.app-assets-list td:nth-of-type(1) {
    width: 29px;
    padding: 2px 1px 0px 4px;
    border-left: none;
}

table.app-assets-list td:nth-of-type(2) {
    width: calc(400px - 34px);
    word-break: break-all;
}

table.app-assets-list td:nth-of-type(3) {
    width: 29px;
    padding: 2px 0px 0px 3px;
    border-left: solid #dee1e5 1px;
}

table.app-assets-list td:nth-of-type(4) {
    width: calc(400px - 33px);
    word-break: break-all;
}

table.app-assets-list td .asset-title {
    vertical-align: top;
    display: inline-block;
    margin: 5px;
    color: inherit;
}

table.app-assets-list td .asset-title-placeholder {
    color: #dcdcdc;
}


table.app-assets-list tr.folder {
    background-color: #dee1e5;
}

table.app-assets-list tr.folder td:nth-of-type(1) {
    vertical-align: bottom;
}

table.app-assets-list tr.folder td:nth-of-type(2) {
    text-align: center;
    padding-top: 2px;
}

table.app-assets-list td.cell-cut {
    border-bottom: 1px solid #b1b1b1;
}

table.app-assets-list tr:nth-last-of-type(1) td.cell-cut {
    border-bottom: none;
}

table.network-directory {
}

table.network-directory th {
}

table.network-directory th {
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
}

table.network-directory th:nth-of-type(1) {
    background-image: none;
}

table.network-directory td:nth-of-type(3) {
    text-align: right;
    width: 70px;
    min-width: 70px;
    padding: 2px 5px 0px 0px;
    border-left: solid #c2c2c2ff 1px;
}

table.network-directory td:nth-of-type(4) {
    text-align: left;
    width: 140px;
    min-width: 140px;
    padding: 2px 0px 0px 5px;
    border-left: solid #c2c2c2ff 1px;
}


div.apps-empty {
    margin: 20px;
    text-align: center;
}

div.network-empty {
    margin: 20px;
    text-align: center;
}

div.error-message {
    margin: 20px;
    text-align: center;
    color: red;
}

/* Table footer */

.main-panel table tfoot td {
    color: #fff;
    background-color: #444444;
    height: 18px;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}


/* Dialogs */

/* ── Dialog base — 匹配 float-window 风格 ── */
.dialog-bg {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.6);
}

.dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: 0;
    min-width: 300px;
    max-width: 750px;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dialog-header {
    width: 100%;
    height: 32px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active));
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    padding: 0;
}

.dialog-header-text {
    flex: 1;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding-left: 14px;
}

.dialog-header-close {
    width: 20px; height: 20px;
    flex-shrink: 0;
    padding-right: 15px;
    background-image: url("../img/dialog_close.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    opacity: 0.7;
}
.dialog-header-close:hover { opacity: 1; }

.dialog-content {
    padding: 16px;
    background: var(--bg-secondary);
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 540px;
    color: var(--text-primary);
    font-size: 13px;
}

.dialog-icon {
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    width: 90px;
    height: 90px;
}

.dialog-icon-delete {
    background-image: url("../img/dialog_icon_delete.svg");
    height: 100px;
    margin: 0px -10px 0px 20px;
}

.delete-button {
    background: #c50000;
}

.dialog-radio {
    margin: 0px 10px;
}

.dialog-text-delete {
    padding: 0px 30px;
    text-align: center;
}

.dialog-text-creating-native-app {
    margin-top: 20px;
    text-align: center;
}

.dialog-text-creating-scorm {
    margin-top: 20px;
    text-align: center;
}

/* ── Help 对话框 ── */
.help-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.help-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
}
.help-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── About 对话框 ── */
.about-info {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.about-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.about-version {
    color: var(--text-secondary);
    font-size: 13px;
}
.about-server {
    color: var(--text-secondary);
    font-size: 13px;
}
.about-social {
    display: flex;
    gap: 10px;
    padding: 6px 0;
}
.about-copyright {
    color: var(--text-muted);
    font-size: 12px;
}
.about-eula {
    color: var(--text-muted);
    font-size: 12px;
}

.dialog-text {
    margin: 5px 0px;
    vertical-align: middle;
}

.dialog-text-center {
    margin: 10px 0px;
    text-align: center;
    vertical-align: middle;
}

.dialog-num-input {
    width: 65px;
}

input.dialog-num-port-input {
    width: 80px;
    height: 30px;
    margin: 0px 5px;
}

input.dialog-user-host-input {
    margin: 0px 5px;
}

.dialog-semi-wide-input {
    width: 250px;
}

.dialog-wide-input {
    width: 390px;
    margin: 0px 5px;
}

.dialog-wider-input {
    width: 430px;
    margin: 0px 5px;
}

/* Publishing / published dialogs */

.spinner-preloader-cont {
    width: 160px;
    margin: 15px auto 20px;
    overflow: hidden;
}

.spinner-preloader {
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/spinner_preloader.svg");
    width: 150px;
    height: 150px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.spinner-preloader-percentage {
    position: relative;
    float: left;
    top: 57px;
    left: 53px;
    text-align: center;
    display: inline;
    font-size: 25px;
    min-width: 65px;
}

.published-cont {
    max-width: 620px;
    margin: 0px;
    padding: 0px;
}

.published-item-frame {
    border-style: solid;
    border-color: #b1b1b1;
    border-width: 1px;
    padding-bottom: 10px;
}

.published-item-header {
    background-color: #fff;
    padding: 5px 8px;
}

.published-item-snippets {
    margin: 0px 8px;
}

.published-app-icon {
    margin-right: 5px;
}

.published-socials {
    float: right;
}

.network-directory-icon {
    background-image: url("../img/network_directory.svg");
    width: 180px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px;
}

.published-trialwarning {
    font-size: 13px;
    color: red;
    margin: auto;
}


textarea.published-snippet {
    font-size: inherit;
    font-family: inherit;
    padding: 5px;
    vertical-align: top;
    width: 100%;
}

.clipboard-copy {
    background-image: url("../img/clipboard_copy.svg");
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 5px;
}

/* New app dialog */

.new-app-cont {
    min-width: 500px;
}

input.new-app-disp-name {
    width: 100%;
    background-color: #dee1e5;
    user-select: none;
    border-width: 0px;
    cursor: default;
}

.new-app-name {
    width: 100%
}

.new-app-frame {
    border-style: solid;
    border-color: #b1b1b1;
    border-width: 1px;
    margin: 20px 0px 0px 0px;
    padding: 5px;
}

.new-app-checker {
    margin: 0px 8px;
}

.new-app-types {
    display: inline-block;
    vertical-align: top;
    width: 47%;
}

.new-app-modules {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    border-left: 1px solid #b1b1b1;
    padding-left: 2%;
}

/* App templates dialog */

.app-template-item {
    padding: 5px 0px 5px 10px;
}

.app-template-item-last {
    height: 23px;
    padding-top: 10px;
    font-weight: bold;
}

div div.app-template-item:nth-of-type(odd) {
    background-color: white;
}

.app-template-new {
    background-image: url("../img/app_template_new.svg");
    width: 28px;
    height: 28px;
    display: inline-block;
    float: right;
    margin-right: 3px;
    margin-top:-4px;
    cursor: pointer;
}

.app-template-description-area {
    max-width: 340px;
    min-width: 340px;
    max-height: 150px;
    min-height: 50px;
}

.app-template-delete {
    background-image: url("../img/app_icon_delete.svg");
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
    margin: 12px 3px 0px;
    cursor: pointer;
}

/* Global Settings dialog */

#diaSettingsContent {
    padding: 0px;
    overflow: hidden;
}

form.settings-form {
    min-width: 600px;
    max-height: 292px;
    min-height: 292px;
    margin: 0px;
    overflow-y: auto;
}

form.settings-form::-webkit-scrollbar {
    width: 5px;
}

form.settings-form::-webkit-scrollbar-track {
    background: #c8c8c8;
}

form.settings-form::-webkit-scrollbar-thumb {
    background: grey;
}

form.settings-form::-webkit-scrollbar-thumb:hover {
    background: grey;
}

input.settings-checker {
    margin-right: 10px;
    margin-bottom: 5px;
}

input.external-address {
    width: 100%;
}

.settings-text {
    line-height: 25px;
}

.settings-button {
    margin: 10px auto;
}

.settings-theme {
    background-color: #dee1e5ff;
    border-radius: 0px;
    border-width: 1px;
    margin: 10px 5px;
}

div.settings-left-panel {
    float: left;
    width: 100px;
    height: 347px;
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-default);
    text-align: center;
}

.settings-left-item {
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
}

.settings-left-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}


.settings-left-item-active {
    background: linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
    color: var(--text-on-accent);
}

div.settings-general {
    margin: 0px 10px;
}

div.settings-ui {
    margin: 0px 10px;
}

div.settings-puzzles {
    margin: 0px 10px;
}

div.settings-network {
    margin: 0px 10px;
}

div.settings-select-folder-cont {
    position: relative;
    left: -36px;
    top: -15px;
    width: 0px;
    height: 0px;
    display: inline-block;
}

div.settings-select-folder {
    background-image: url("../img/settings_select_folder.svg");
    width: 20px;
    height: 20px;
    cursor: pointer;
}

hr.settings {
    margin: 0px;
}

/* App Settings dialog */

#diaAppSettingsContent {
    padding: 0px;
    overflow: hidden;
}

div.settings-left-panel.app-settings {
    height: 500px;
}

form.app-settings {
    min-height: 445px;
    max-height: 445px;
    overflow-x: hidden;
    overflow-y: scroll;
}

form.app-settings::-webkit-scrollbar {
    width: 5px;
}

form.app-settings::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

form.app-settings::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}

form.app-settings::-webkit-scrollbar-thumb:hover {
    background: var(--border-default);
}

hr.app-settings {
    margin: 0px;
}

table.app-settings {
    min-width: 600px;
    border-collapse: collapse;
}

table.app-settings tr td:nth-child(1) {
    min-width: 210px;
    max-width: 210px;
    text-align: center;
}

table.app-settings tr:nth-child(odd) {
    background: #fbfbfb;
}

table.app-settings tr:nth-child(even) {
    background: #f2f2f2;
}

table.app-settings tr.more-height {
    height: 46px;
}

input.app-settings-text, textarea.app-settings-textarea {
    width: 380px;
    margin: 7px 0px;
    font-size: 15px;
}

input.app-settings-inline-text {
    width: 322px;
    margin: 7px 0px;
    font-size: 15px;
}

button.app-settings-button {
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
    color: white;
    border: none;
    height: 30px;
    font-size: 15px;
    padding: 0px 10px;
    margin: 0px 25px;
    cursor: pointer;
}

button.app-settings-button.inactive {
    cursor: default;
    background: lightgray;
}

input.app-settings-color-input {
    margin: 3px 0px;
    font-size: 15px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    vertical-align: middle;
}

label.app-settings-input-label {
    vertical-align: middle;
}

label.app-settings-img-label {
    border: solid #767676 1px;
    display: inline-block;
    background-color: white;
    padding: 3px 5px;
    margin-top: 13px;
    vertical-align: top;
    width: 310px;
    border-radius: 2px;
    cursor: pointer;
}

label.app-settings-img-label.large {
    width: 368px;
    margin-top: 10px;
}

div.app-settings-img-name {
    display: inline-block;
    padding: 2px 0px;
    font-size: 15px;
}

div.app-settings-img-browse {
    background-image: url("../img/settings_select_folder.svg");
    float: right;
    width: 20px;
    height: 20px;
}

div.app-settings-img-cont {
    background: url("../img/checker.png") repeat;
    background-size: 15px;
    position: relative;
    vertical-align: top;
}

div.app-settings-img-cont.small {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px 0px;
    border: solid #767676 0.5px;
}

div.app-settings-img-cont.wide {
    display: block;
    width: 380px;
    height: 200px;
    margin: 10px 0px;
    border: solid #767676 1px;
}

div.app-settings-img-cont.large {
    display: block;
    width: 380px;
    height: 250px;
    margin: 10px 0px;
    border: solid #767676 1px;
    border-radius: 2px;
}

img.app-settings-img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

img.app-settings-img.small {
    max-width: 50px;
    max-height: 50px;
}

img.app-settings-img.wide {
    max-width: 380px;
    max-height: 200px;
}

img.app-settings-img.large {
    max-width: 380px;
    max-height: 250px;
}

select.app-settings-select {
    margin: 7px 0px;
    font-size: 15px;
    background-color: #dee1e5ff;
    border-radius: 0px;
    border-width: 1px;
}

div.pixel-units::after {
    content: " px";
    vertical-align: middle;
}

div.pixel-units input[type="number"] {
    margin: 7px 0px 7px 2px;
    width: 50px;
}

div.pixel-units.sameline {
    display: inline-block;
    margin-right: 10px;
}

div.pixel-units.sameline input[type="number"] {
    width: 65px;
}


/* License dialogs */

.license-info-cont {
    width: 700px;
}

.license-two-buttons {
    width: 50%;
}

.dialog-key-input {
    width: 590px;
    display: block;
    margin: 10px;
}

/* Help dialog */

.help-link-text {
    padding: 4px;
    display: inline-block;
}

.help-link-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: bottom;
}

.help-link-icon-manual {
    background-image: url("../img/help_link_manual.svg");
}

.help-link-icon-forums {
    background-image: url("../img/help_link_forums.svg");
}

.help-link-icon-code-examples {
    background-image: url("../img/help_link_manual.svg");
}

.help-link-icon-webgl-report {
    background-image: url("../img/help_link_webgl_report.svg");
}

/* About dialog */

.dialog-about-line {
    margin: 10px 0px;
}

.dialog-about-indent {
    margin-left: 5px;
}

.share-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.share-icon-facebook {
    background-image: url("../img/share_icon_facebook.svg");
}

.share-icon-linkedin {
    background-image: url("../img/share_icon_linkedin.svg");
}

.share-icon-qrcode {
    background-image: url("../img/share_icon_qrcode.svg");
    margin-left: 10px;
}

.share-icon-reddit {
    background-image: url("../img/share_icon_reddit.svg");
}

.share-icon-twitter {
    background-image: url("../img/share_icon_twitter.svg");
}

.share-icon-vk {
    background-image: url("../img/share_icon_vk.svg");
}

.share-icon-weibo {
    background-image: url("../img/share_icon_weibo.svg");
}

.share-icon-youtube {
    background-image: url("../img/share_icon_youtube.svg");
}

.share-icon-telegram {
    background-image: url("../img/share_icon_telegram.svg");
}


/* App list icons (buttons) */

.app-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 26px;
    height: 28px;
    vertical-align: middle;
    padding-bottom: 2px;
}

.app-title {
}

.app-title:hover, a.asset-title:hover  {
    font-weight: 600;
    color: black;
}

.app-icon:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.app-icon.app-icon-html {
    background-image: url("../img/app_icon_html.svg");
}

.app-icon.app-icon-html-main {
    background-image: url("../img/app_icon_html.svg");
}

.app-icon.app-icon-gltf {
    background-image: url("../img/app_icon_gltf.svg");
}

.app-icon.app-icon-3dgs {
    background-image: url("../img/app_icon_3dgs.svg");
}

.app-icon.app-icon-blend {
    background-image: url("../img/app_icon_blend.svg");
}

.app-icon.app-icon-blend-main {
    background-image: url("../img/app_icon_blend_main.svg");
}

.app-icon.app-icon-download {
    background-image: url("../img/demo_store_icon_download.svg");
}

.app-icon.app-icon-max {
    background-image: url("../img/app_icon_max.svg");
}

.app-icon.app-icon-max-main {
    background-image: url("../img/app_icon_max_main.svg");
}

.app-icon.app-icon-maya {
    background-image: url("../img/app_icon_maya.svg");
}

.app-icon.app-icon-maya-main {
    background-image: url("../img/app_icon_maya_main.svg");
}

.app-icon.app-icon-puzzles-inactive {
    background-image: url("../img/app_icon_puzzles_new.svg");
    width: 28px;
    opacity: 0.3;
}

.app-icon.app-icon-puzzles-inactive:hover {
    cursor: default;
    filter: none;
    transform: none;
}

.app-icon.app-icon-puzzles-edit {
    background-image: url("../img/app_icon_puzzles_edit.svg");
    width: 34px;
    height: 34px;
    background-size: contain;
}

.app-icon.app-icon-open-folder {
    background-image: url("../img/app_icon_open_folder.svg");
    width: 28px;
}

.app-icon.app-icon-publish-dir {
    background-image: url("../img/app_icon_publish_dir.svg");
    width: 28px;
}

.app-icon.app-icon-publish-zip {
    background-image: url("../img/app_icon_publish_zip.svg");
    width: 28px;
}

.app-icon.app-icon-update {
    background-image: url("../img/app_icon_update.svg");
    width: 28px;
}

.app-icon.app-icon-update-inactive {
    background-image: url("../img/app_icon_update_inactive.svg");
    width: 28px;
}

.app-icon.app-icon-update-inactive:hover {
    cursor: default;
    filter: none;
    transform: none;
}

.app-icon.app-icon-delete {
    background-image: url("../img/app_icon_delete.svg");
    width: 28px;
}

.app-icon.app-icon-folder-opened {
    background-image: url("../img/app_icon_folder_opened.svg");
}

.app-icon.app-icon-folder-closed {
    background-image: url("../img/app_icon_folder_closed.svg");
}

.app-icon.app-icon-placeholder-run {
    background-image: url("../img/app_icon_placeholder_run.svg");
}

.app-icon.app-icon-placeholder-run:hover {
    filter: none;
    transform: none;
}

.app-icon.app-icon-placeholder-scene {
    background-image: url("../img/app_icon_placeholder_scene.svg");
}

.app-icon.app-icon-placeholder-scene:hover {
    filter: none;
    transform: none;
}

.open-close-folder {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 14px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    padding: 0px 5px 7px 5px;
}

.open-close-folder.opened {
    background-image: url("../img/open_close_folder_opened.svg");
}

.open-close-folder.closed {
    background-image: url("../img/open_close_folder_closed.svg");
}


/* Network file icons */

.net-file-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 14px;
    height: 16px;
    vertical-align: bottom;
    margin-bottom: 1px;
}

.net-file-icon.net-file-icon-archive {
    background-image: url("../img/net_file_icon_archive.svg");
}

.net-file-icon.net-file-icon-blender {
    background-image: url("../img/net_file_icon_blender.svg");
}

.net-file-icon.net-file-icon-code {
    background-image: url("../img/net_file_icon_code.svg");
}

.net-file-icon.net-file-icon-folder {
    background-image: url("../img/net_file_icon_folder.svg");
    width: 16px;
}

.net-file-icon.net-file-icon-font {
    background-image: url("../img/net_file_icon_font.svg");
}

.net-file-icon.net-file-icon-gltf {
    background-image: url("../img/net_file_icon_gltf.svg");
}

.net-file-icon.net-file-icon-image {
    background-image: url("../img/net_file_icon_image.svg");
}

.net-file-icon.net-file-icon-max {
    background-image: url("../img/net_file_icon_max.svg");
}

.net-file-icon.net-file-icon-maya {
    background-image: url("../img/net_file_icon_maya.svg");
}

.net-file-icon.net-file-icon-other {
    background-image: url("../img/net_file_icon_other.svg");
}

.net-file-icon.net-file-icon-sound {
    background-image: url("../img/net_file_icon_sound.svg");
}

.net-file-icon.net-file-icon-vector {
    background-image: url("../img/net_file_icon_vector.svg");
}

/* Main (left) toolbar */

div.toolbar {
    position: fixed;
    width: 60px;
    background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 0 10px 10px 0;
    box-shadow: var(--shadow-card);
}

a.toolbar-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-icon:hover, a.toolbar-app-icon:hover, a.toolbar-network-icon:hover, a.toolbar-store-icon:hover {
    filter: drop-shadow(0px 0px 4px var(--accent-primary));
}

a.toolbar-icon.toolbar-icon-home {
    background-image: url("../img/toolbar_icon_home.svg");
}

a.toolbar-icon.toolbar-icon-home.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_home.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-home.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-icon.toolbar-icon-store {
    background-image: url("../img/toolbar_icon_store.svg");
}
a.toolbar-icon.toolbar-icon-store.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_store.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-icon.toolbar-icon-store.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-icon.toolbar-icon-new-app {
    background-image: url("../img/toolbar_icon_new_app.svg");
}

a.toolbar-icon.toolbar-icon-new-app.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_new_app.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-templates {
    background-image: url("../img/toolbar_icon_templates.svg");
}
a.toolbar-icon.toolbar-icon-templates.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_templates.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-settings {
    background-image: url("../img/toolbar_icon_settings.svg");
}
a.toolbar-icon.toolbar-icon-settings.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_settings.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-network {
    background-image: url("../img/toolbar_icon_network.svg");
}
a.toolbar-icon.toolbar-icon-network.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_network.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-network.toolbar-icon-active:hover {
  filter: none;
}

a.toolbar-icon.toolbar-icon-license {
    background-image: url("../img/toolbar_icon_license.svg");
}
a.toolbar-icon.toolbar-icon-license.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_license.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-help {
    background-image: url("../img/toolbar_icon_help.svg");
}
a.toolbar-icon.toolbar-icon-help.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_help.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-icon.toolbar-icon-about {
    background-image: url("../img/toolbar_icon_about.svg");
}
a.toolbar-icon.toolbar-icon-about.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_about.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

div.toolbar-separator {
    border-top: solid #c2c2c2ff 1px;
}

.toolbar-icon-dot-red {
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    float: right;
    margin: 5px;
}

.toolbar-icon-dot-orange {
    height: 15px;
    width: 15px;
    background-color: orange;
    border-radius: 50%;
    display: inline-block;
    float: right;
    margin: 5px;
}

/* App (right) toolbar */

div.toolbar-app {
    position: fixed;
    right: 0px;
    width: 60px;
    background: linear-gradient(180deg, #1a1f35 0%, #16203a 50%, #0f1a30 100%);
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 10px 0 0 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

a.toolbar-app-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-app-icon.toolbar-app-icon-puzzles-edit {
    background-image: url("../img/toolbar_app_icon_puzzles_edit.svg");
}

a.toolbar-app-icon.toolbar-app-icon-open-folder {
    background-image: url("../img/toolbar_app_icon_open_folder.svg");
}

a.toolbar-app-icon.toolbar-app-icon-settings {
    background-image: url("../img/toolbar_app_icon_settings.svg");
}

a.toolbar-app-icon.toolbar-app-icon-settings.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_settings.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-publish-dir {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg");
}

a.toolbar-app-icon.toolbar-app-icon-publish-dir.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-publish-zip {
    background-image: url("../img/toolbar_app_icon_publish_zip.svg");
}

a.toolbar-app-icon.toolbar-app-icon-publish-zip.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_publish_zip.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-create-native-app {
    background-image: url("../img/toolbar_app_icon_desktop_mobile.svg");
}

a.toolbar-app-icon.toolbar-app-icon-create-native-app.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_desktop_mobile.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-create-scorm {
    background-image: url("../img/toolbar_app_icon_scorm.svg");
}

a.toolbar-app-icon.toolbar-app-icon-create-scorm.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_scorm.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-delete {
    background-image: url("../img/toolbar_app_icon_delete.svg");
}

a.toolbar-app-icon.toolbar-app-icon-delete.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_delete.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

a.toolbar-app-icon.toolbar-app-icon-update {
    background-image: url("../img/toolbar_app_icon_update.svg");
}

a.toolbar-app-icon.toolbar-app-icon-update.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_update.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}

/* Network (right) toolbar */

div.toolbar-network {
    position: fixed;
    right: 0px;
    width: 60px;
    background: linear-gradient(180deg, #1a1f35 0%, #16203a 50%, #0f1a30 100%);
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 10px 0 0 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

a.toolbar-network-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-network-icon.toolbar-network-icon-download {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg");
    transform: scaleY(-1);
}

a.toolbar-network-icon.toolbar-network-icon-delete {
    background-image: url("../img/toolbar_app_icon_delete.svg");
}

/* Store (right) toolbar */

div.toolbar-store {
    position: fixed;
    right: 0px;
    width: 40px;
    background: linear-gradient(180deg, #1a1f35 0%, #16203a 50%, #0f1a30 100%);
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 8px 0 0 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

a.toolbar-store-icon {
    vertical-align: top;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 40px;
    height: 40px;
}

a.toolbar-store-icon.toolbar-store-icon-all {
    background-image: url("../img/toolbar_store_icon_all.svg");
}
a.toolbar-store-icon.toolbar-store-icon-all.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_all.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-store-icon.toolbar-store-icon-all.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-demos {
    background-image: url("../img/toolbar_store_icon_demos.svg");
}
a.toolbar-store-icon.toolbar-store-icon-demos.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_demos.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-store-icon.toolbar-store-icon-demos.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-tutorials {
    background-image: url("../img/toolbar_store_icon_tutorials.svg");
}
a.toolbar-store-icon.toolbar-store-icon-tutorials.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_tutorials.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-store-icon.toolbar-store-icon-tutorials.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-examples {
    background-image: url("../img/toolbar_store_icon_examples.svg");
}
a.toolbar-store-icon.toolbar-store-icon-examples.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_examples.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-store-icon.toolbar-store-icon-examples.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-libraries {
    background-image: url("../img/toolbar_store_icon_libraries.svg");
}
a.toolbar-store-icon.toolbar-store-icon-libraries.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_libraries.svg"), linear-gradient(135deg, var(--bg-active) 0%, var(--accent-primary) 100%);
}
a.toolbar-store-icon.toolbar-store-icon-libraries.toolbar-icon-active:hover {
    filter: none;
}

/* Splash screen dialog */

#diaSplashScreenContent {
    padding: 0px;
}

div.splash-title {
    position: relative;
}

div.splash-title-image {
    background-image: url("../img/splash_title_image.png");
    width: 236px;
    height: 150px;
    display: inline-block;
}

div.splash-title-text {
    float: right;
    text-align: center;
    margin: 0px 30px;
}

div.splash-title-text-top {
    font-size: 45px;
    line-height: 74px;
    color: var(--accent-primary);
}

div.splash-title-text-bottom {
    font-size: 34px;
    line-height: 56px;
    color: #fff;
}

div.splash-title-bar {
    position: absolute;
    height: 48px;
    width: 574px;
    top: 80px;
    z-index: -1;
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    border-radius: 2px;
}

div.splash-incompatible {
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(90deg, var(--danger) 0%, #ff5555 100%);
    text-align: center;
    max-width: 534px;
    border-radius: 4px;
}

div.splash-settings-container {
    padding: 0px 10px;
}

/* Demo Store */

table.asset-store th:nth-of-type(1) {
    background-image: none;
}

table.asset-store tbody td:nth-of-type(1) {
    padding: 10px;
}

table.asset-store tbody td:nth-of-type(2) {
    padding: 20px;
}

td.asset-store-item {
    position: relative;
}

td.asset-store-item p {
    margin: 0px;
}

div.asset-store-item-bar {
    position: absolute;
    height: 30px;
    width: 400px;
    top: 190px;
    z-index: 1;
    background: #292929a0;
    line-height: 30px;
    font-size: 18px;
}

span.asset-store-item-title {
    color: white;
}

span.asset-store-item-type {
    color: #6494d3;
    padding: 0px 10px;
}

span.asset-store-item-price {
    margin-left: 15px;
    color: #00b540;
}

div.asset-store-icons-invisible-bar {
    position: absolute;
    align-self: flex-end;
    height: 30px;
    bottom: 10px;
    z-index: 1;
    line-height: 30px;
    width: 340px;
    text-align: right;
}

img.asset-store-image {
    width: 400px;
    height: auto;
    filter: drop-shadow(0px 0px 4px #C7C7C7);
}

img.asset-store-image:hover {
    cursor: pointer;
    filter: brightness(1.1) contrast(95%) drop-shadow(0px 0px 4px #737373);
}

div.asset-store-icon-blender {
    background-image: url("../img/demo_store_icon_blender.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-max {
    background-image: url("../img/demo_store_icon_max.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-maya {
    background-image: url("../img/demo_store_icon_maya.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-price {
    background-image: url("../img/demo_store_icon_price.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
    padding-right: 20px;
    float: right;
}

a.asset-store-icon-run {
    background-image: url("../img/app_icon_html_main.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

a.asset-store-icon-download {
    background-image: url("../img/demo_store_icon_download.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

a.asset-store-icon-buy {
    background-image: url("../img/demo_store_icon_buy.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

div.asset-store-item-spacing {
    height: 30px;
}

#puzzles-launchers-menu {
    display: none;
    position: fixed; /* Use fixed positioning for reliable placement */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    padding: 5px 0;
    list-style: none;
    z-index: 1000;
}

#puzzles-launchers-menu.show {
    display: block;
}

#puzzles-launchers-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#puzzles-launchers-menu li a {
    display: inline-block;
    padding: 5px 15px;
}

#puzzles-launchers-menu li:hover {
    background-color: #f0f0f0;
}
/* 新项目卡片高亮动画 */
@keyframes cardNewHighlight {
    0% {
        box-shadow: 0 0 0 3px rgba(79, 177, 182, 0.8);
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(79, 177, 182, 0.5);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
        opacity: 1;
    }
}

.app-new-card {
    transition: all 0.3s ease;
}
/* ======== 管理器 Loading Overlay ======== */
.am-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 50, 0.92);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.am-loading-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.am-loading-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 24px;
}
.am-loading-ring .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: am-spin-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.am-loading-ring .ring:nth-child(1) {
    border-top-color: #4fc3f7;
    animation-delay: -0.45s;
}
.am-loading-ring .ring:nth-child(2) {
    border-right-color: #81d4fa;
    animation-delay: -0.3s;
    inset: 6px;
}
.am-loading-ring .ring:nth-child(3) {
    border-bottom-color: #b3e5fc;
    animation-delay: -0.15s;
    inset: 12px;
}
@keyframes am-spin-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.am-loading-text {
    color: #e0e8f0;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    letter-spacing: 2px;
}
/* 浅色主题适配 */
html[data-theme="light"] .am-loading-overlay {
    background: rgba(240, 244, 250, 0.95);
}
html[data-theme="light"] .am-loading-text {
    color: #333;
}
html[data-theme="light"] .am-loading-ring .ring:nth-child(1) { border-top-color: #1976d2; }
html[data-theme="light"] .am-loading-ring .ring:nth-child(2) { border-right-color: #42a5f5; }
html[data-theme="light"] .am-loading-ring .ring:nth-child(3) { border-bottom-color: #90caf9; }