* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

/* XP 桌面 */
#desktop {
    position: fixed;
    inset: 0;
    background-image: url("assets/xp-wallpaper.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 桌面图标 */
#desktop-icons {
    position: absolute;
    left: 40px;
    top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.desktop-icon {
    width: 70px;
    margin-bottom: 30px;
    text-align: center;
    color: white;
    cursor: default;
    user-select: none;
}

.icon-image {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .8));
}

.icon-label {
    font-size: 10px;
    line-height: 13px;
    color: white;
    text-shadow:
        1px 1px 1px #000,
        -1px 0 1px #000,
        0 1px 1px #000;
    word-break: break-all;
}

.desktop-icon.selected .icon-label {
    background: #316ac5;
    border: 1px dotted white;
    text-shadow: none;
}

/* Windows XP 经典任务栏 */
/* =========================================================
   Windows XP Luna：采用已经验证过的基础版配色
   ========================================================= */

#taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 30px;

    display: flex;
    align-items: stretch;

    /* 与刚才正常显示的 XP 基础版完全一致 */
    background:
        linear-gradient(
            to bottom,
            #245edb 0%,
            #3f8cf3 9%,
            #245edb 18%,
            #245edb 92%,
            #333 100%
        );

    border-top: none;
    box-shadow: none;

    z-index: 1000;
}


/* XP Start 按钮：使用基础版实际采用的绿色 */
#start-button {
    position: relative;

    width: 92px;
    height: 30px;
    flex: 0 0 92px;

    margin: 0;
    padding: 0;
    border: none;

    display: block;
    overflow: hidden;

    background:
        radial-gradient(
            circle,
            #5eac56 0%,
            #3c873c 100%
        );

    border-radius: 0 10px 15px 0;

    box-shadow:
        0 5px 10px #79ce71 inset;

    cursor: pointer;
    z-index: 1001;
}

#start-button img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: fill;

    pointer-events: none;
}

#start-button:hover {
    filter: brightness(1.05);
}

#start-button:active {
    filter: brightness(.94);
}

#start-button:focus {
    outline: none;
}


/* XP 基础版右侧区域 */
/* XP Luna 右侧通知区域
   颜色过渡方式与中间任务栏保持一致，
   但整体亮度略高，形成原版 XP 的浅蓝通知区效果 */
#system-tray {
    position: relative;

    height: 30px;

    margin-left: auto;
    padding: 0 9px 0 8px;

    display: flex;
    align-items: center;
    gap: 5px;

    background:
        linear-gradient(
            to bottom,
            #4a99e8 0%,
            #3e8fe2 9%,
            #347fda 18%,
            #347fda 92%,
            #2b70c8 100%
        );

    border-left: 1px solid #1758aa;

    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.22);

    color: white;

    z-index: 1001;
}

#clock {
    min-width: 47px;
    height: 30px;

    margin-left: 1px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;

    white-space: nowrap;

    text-shadow:
        1px 1px 1px rgba(0,0,0,.35);
}

#start-menu {
    position: fixed;
    left: 0;
    bottom: 30px;
    width: 390px;
    background: #fff;
    border: 1px solid #164b8e;
    box-shadow: 3px 3px 8px rgba(0,0,0,.45);
    z-index: 2000;
    display: none;
}

.start-header {
    height: 54px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    background: linear-gradient(to bottom, #3b8edb, #175db0);
}

.start-user-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #24558a;
    background: white;
    border: 2px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
}

.start-content {
    min-height: 260px;
    display: flex;
}

.start-left {
    width: 50%;
    padding: 8px;
    background: white;
}

.start-right {
    width: 50%;
    padding: 8px;
    background: #dce8f7;
}

.menu-item {
    min-height: 43px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.menu-item:hover {
    color: white;
    background: #316ac5;
}

.menu-icon {
    width: 30px;
    text-align: center;
    font-size: 20px;
}

.menu-item strong {
    font-size: 11px;
}

.menu-item small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    color: #777;
}

.menu-item:hover small {
    color: white;
}

.start-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 5px 0;
}

.start-footer {
    height: 36px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: white;
    background: linear-gradient(to bottom, #3c8fda, #195cae);
    font-size: 11px;
}


/* =========================================================
   XP 桌面编辑权限 / 登录窗口
   ========================================================= */

.desktop-icon {
    position: relative;
}

.desktop-icon.xp-locked {
    cursor: default;
}

.xp-login-item,
.xp-password-item {
    cursor: pointer;
}

#xp-auth-dialog {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .18);
    z-index: 5000;
}

#xp-auth-dialog.show {
    display: flex;
}

.xp-auth-box {
    width: 350px;
    background: #ece9d8;
    border: 1px solid #164b8e;
    box-shadow: 3px 3px 8px rgba(0,0,0,.5);
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

.xp-auth-title {
    height: 30px;
    padding: 0 5px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-weight: bold;
    background: linear-gradient(to bottom, #3b8edb, #175db0);
}

#xp-auth-close {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 2px;
    color: white;
    background: #d94a3a;
    font-size: 16px;
    line-height: 17px;
    cursor: pointer;
}

.xp-auth-body {
    padding: 16px;
    background: white;
}

.xp-auth-message {
    margin-bottom: 13px;
    color: #333;
    line-height: 16px;
}

.xp-auth-label {
    display: block;
    margin-bottom: 10px;
    color: #222;
}

.xp-auth-label input {
    display: block;
    width: 100%;
    height: 26px;
    margin-top: 4px;
    padding: 3px 6px;
    border: 1px solid #7f9db9;
    background: #fff;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    outline: none;
}

.xp-auth-label input:focus {
    border-color: #316ac5;
    box-shadow: 0 0 0 1px #9dbce3;
}

.xp-auth-error {
    min-height: 15px;
    color: #b00000;
}

.xp-auth-footer {
    height: 46px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    background: #ece9d8;
    border-top: 1px solid #d5d2c5;
}

.xp-auth-footer button {
    min-width: 70px;
    height: 25px;
    padding: 2px 12px;
    border: 1px solid #7f7f7f;
    border-radius: 2px;
    background: linear-gradient(#fff, #e8e8e8);
    color: #111;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.xp-auth-footer button:hover {
    border-color: #316ac5;
}


/* XP 桌面右键菜单 */
#xp-context-menu {
    position: fixed;
    min-width: 132px;
    padding: 2px;
    background: #ece9d8;
    border: 1px solid #666;
    box-shadow: 2px 2px 5px rgba(0,0,0,.45);
    z-index: 6000;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

.xp-context-item {
    height: 27px;
    padding: 6px 12px;
    color: #111;
    white-space: nowrap;
    cursor: default;
}

.xp-context-item:hover {
    color: white;
    background: #316ac5;
}

/* =========================================================
   XP 桌面导航 V2：统一网站图标尺寸 + 服务器保存
   ========================================================= */
#desktop-icons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% - 30px);
    display: block;
    z-index: 10;
}

.desktop-icon {
    position: absolute !important;
    width: 76px;
    min-height: 76px;
    margin: 0 !important;
    padding: 3px 2px;
    text-align: center;
    color: #fff;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.desktop-icon .icon-image {
    width: 32px;
    height: 32px;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 27px;
    line-height: 32px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.8));
}

.desktop-icon .icon-image img {
    display: block;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

.desktop-icon .icon-label {
    width: 72px;
    min-height: 13px;
    margin: 0 auto;
    font-size: 10px;
    line-height: 13px;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px #000, -1px 0 1px #000, 0 1px 1px #000;
    word-break: break-all;
}

.desktop-icon.selected .icon-label {
    background: #316ac5;
    border: 1px dotted #fff;
    text-shadow: none;
}

/* 右键菜单：锁定状态下只允许查看/打开，不允许编辑 */
#xp-context-menu {
    position: fixed;
    display: none;
    min-width: 132px;
    padding: 2px;
    background: #ece9d8;
    border: 1px solid #666;
    box-shadow: 2px 2px 5px rgba(0,0,0,.45);
    z-index: 6000;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

.xp-context-item {
    height: 27px;
    padding: 6px 12px;
    color: #111;
    white-space: nowrap;
}

.xp-context-item:hover {
    color: #fff;
    background: #316ac5;
}

/* 网站新增/修改窗口：XP 风格，逻辑参照手机导航版 */
#xp-site-dialog {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.18);
    z-index: 6500;
}

#xp-site-dialog.show { display: flex; }

.xp-site-box {
    width: 500px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    background: #ece9d8;
    border: 1px solid #164b8e;
    box-shadow: 3px 3px 8px rgba(0,0,0,.5);
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

.xp-site-title {
    height: 30px;
    padding: 0 5px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(to bottom, #3b8edb, #175db0);
}

#xp-site-close {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    background: #d94a3a;
    font-size: 16px;
    line-height: 17px;
    cursor: pointer;
}

.xp-site-body {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 14px 16px 8px;
    background: #fff;
}

.xp-site-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
}

.xp-site-body label {
    display: block;
    margin-bottom: 10px;
    color: #222;
}

.xp-site-body input[type="text"] {
    display: block;
    width: 100%;
    height: 27px;
    margin-top: 5px;
    padding: 4px 6px;
    border: 1px solid #7f9db9;
    background: #fff;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    outline: none;
}

.xp-site-body input[type="text"]:focus {
    border-color: #316ac5;
    box-shadow: 0 0 0 1px #9dbce3;
}

.xp-site-section-title {
    margin: 3px 0 7px;
    padding-bottom: 4px;
    color: #174f93;
    font-weight: bold;
    border-bottom: 1px solid #d5d2c5;
}

.xp-site-icon-preview-row {
    display: flex;
    align-items: center;
    min-height: 55px;
    margin-bottom: 8px;
}

.xp-site-icon-preview {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border: 1px solid #9aa9b8;
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
    font-size: 31px;
    line-height: 1;
}

.xp-site-icon-preview img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
}

.xp-site-icon-preview-info {
    color: #666;
    line-height: 16px;
}

.xp-site-icon-source {
    display: flex;
    gap: 18px;
    padding: 7px 8px;
    margin-bottom: 9px;
    background: #eef4fb;
    border: 1px solid #c4d5e8;
}

.xp-site-radio {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    white-space: nowrap;
    cursor: pointer;
}

.xp-site-radio input {
    width: auto !important;
    height: auto !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.xp-site-emoji-row label {
    margin-bottom: 8px;
}

.xp-site-favicon-row {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin-bottom: 8px;
}

.xp-site-favicon-row label {
    flex: 1;
    margin-bottom: 0;
}

.xp-site-favicon-row button,
.xp-site-bg-row button {
    height: 27px;
    padding: 2px 10px;
    border: 1px solid #7f7f7f;
    border-radius: 2px;
    background: linear-gradient(#fff, #e8e8e8);
    color: #111;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.xp-site-favicon-row button:hover,
.xp-site-bg-row button:hover { border-color: #316ac5; }

.xp-site-bg-row {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin-top: 4px;
}

.xp-site-bg-row label {
    flex: 1;
    margin-bottom: 0;
}

.xp-site-color-control {
    display: flex;
    gap: 6px;
    align-items: center;
}

.xp-site-color-control input[type="color"] {
    width: 40px !important;
    height: 27px !important;
    margin: 5px 0 0 !important;
    padding: 2px !important;
    cursor: pointer;
}

.xp-site-color-control input[type="text"] {
    flex: 1;
    margin-top: 5px !important;
}

#xp-site-error {
    min-height: 16px;
    margin-top: 8px;
    color: #b00000;
}

.xp-site-footer {
    min-height: 48px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    background: #ece9d8;
    border-top: 1px solid #d5d2c5;
}

.xp-site-footer-left,
.xp-site-footer-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.xp-site-footer button {
    min-width: 70px;
    height: 26px;
    padding: 2px 10px;
    border: 1px solid #7f7f7f;
    border-radius: 2px;
    background: linear-gradient(#fff, #e8e8e8);
    color: #111;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.xp-site-footer button:hover { border-color: #316ac5; }

.xp-site-footer .xp-site-danger {
    color: #8d0000;
}

@media (max-width: 560px) {
    .xp-site-box { width: calc(100vw - 16px); }
    .xp-site-row { grid-template-columns: 1fr; gap: 0; }
    .xp-site-icon-source { flex-direction: column; gap: 6px; }
    .xp-site-footer { flex-wrap: wrap; }
    .xp-site-footer-left { order: 2; }
    .xp-site-footer-right { order: 1; flex-wrap: wrap; justify-content: flex-end; }
}

#xp-toast {
    position: fixed;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    display: none;
    max-width: 420px;
    padding: 7px 12px;
    color: #fff;
    background: rgba(30,80,150,.94);
    border: 1px solid #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    z-index: 9000;
    font: 11px Tahoma, "Microsoft YaHei", sans-serif;
}

#xp-toast.show { display: block; }
#xp-toast.error { background: rgba(150,40,30,.94); }

/* =========================================================
   XP 桌面右键菜单增强：刷新 / 全屏 / 自动排列 / 网格 / 图标大小
   ========================================================= */
#xp-context-menu {
    min-width: 190px;
}

.xp-context-item {
    position: relative;
    min-width: 190px;
    box-sizing: border-box;
    padding: 6px 24px 6px 28px;
}

.xp-context-item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    width: 14px;
    height: 100%;
}

.xp-context-item.checked::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-weight: bold;
}

.xp-context-item:hover.checked::before {
    color: #fff;
}

.xp-context-item.disabled {
    color: #888;
}

.xp-context-item.disabled:hover {
    color: #888;
    background: transparent;
}

.xp-context-text {
    display: inline-block;
}

.xp-context-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #333;
}

.xp-context-item:hover .xp-context-arrow {
    color: #fff;
}

.xp-context-submenu {
    position: absolute;
    left: calc(100% - 2px);
    top: -3px;
    min-width: 130px;
    padding: 2px;
    background: #ece9d8;
    border: 1px solid #666;
    box-shadow: 2px 2px 5px rgba(0,0,0,.45);
    display: none;
}

/* XP 风格：普通子菜单（如“图标大小”）鼠标移入即展开 */
.xp-context-item:hover > .xp-context-submenu:not(.click-only) {
    display: block;
}

/* “换壁纸”按要求改为点击父菜单项后展开 */
.xp-context-item > .xp-context-submenu.click-only {
    display: none;
}

.xp-context-item > .xp-context-submenu.click-only.open {
    display: block;
}

.xp-context-submenu .xp-context-item {
    min-width: 130px;
}

.xp-context-submenu.disabled {
    display: none !important;
}

.xp-context-separator {
    height: 1px;
    margin: 3px 2px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #c8c5b8;
}

/* XP 桌面三档图标大小 */
.desktop-icon.icon-size-small {
    width: 72px;
    min-height: 76px;
}

.desktop-icon.icon-size-small .icon-image,
.desktop-icon.icon-size-small .icon-image img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
}

.desktop-icon.icon-size-small .icon-image {
    margin-bottom: 3px;
    font-size: 22px;
    line-height: 24px;
}

.desktop-icon.icon-size-small .icon-label {
    width: 68px;
    font-size: 9px;
    line-height: 12px;
}

.desktop-icon.icon-size-medium {
    width: 84px;
    min-height: 88px;
}

.desktop-icon.icon-size-medium .icon-image,
.desktop-icon.icon-size-medium .icon-image img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

.desktop-icon.icon-size-large {
    width: 108px;
    min-height: 112px;
}

.desktop-icon.icon-size-large .icon-image,
.desktop-icon.icon-size-large .icon-image img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
}

.desktop-icon.icon-size-large .icon-image {
    margin-bottom: 5px;
    font-size: 42px;
    line-height: 48px;
}

.desktop-icon.icon-size-large .icon-label {
    width: 98px;
    font-size: 11px;
    line-height: 14px;
}


/* =========================================================
   XP 壁纸选择对话框
   右键“换壁纸”后打开独立窗口，不使用右键子菜单
   ========================================================= */
#xp-wallpaper-dialog {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.18);
    z-index: 6800;
}

#xp-wallpaper-dialog.show {
    display: flex;
}

.xp-wallpaper-box {
    width: 650px;
    max-width: calc(100vw - 30px);
    height: 470px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #ece9d8;
    border: 1px solid #164b8e;
    box-shadow: 3px 3px 8px rgba(0,0,0,.5);
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
}

.xp-wallpaper-title {
    height: 30px;
    flex: 0 0 30px;
    padding: 0 5px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(to bottom, #3b8edb, #175db0);
}

#xp-wallpaper-close {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    background: #d94a3a;
    font-size: 16px;
    line-height: 17px;
    cursor: pointer;
}

.xp-wallpaper-body {
    flex: 1;
    min-height: 0;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.xp-wallpaper-toolbar {
    display: flex;
    gap: 7px;
    margin-bottom: 7px;
}

.xp-wallpaper-toolbar button,
.xp-wallpaper-footer button {
    min-width: 90px;
    height: 26px;
    padding: 2px 10px;
    border: 1px solid #7f7f7f;
    border-radius: 2px;
    background: linear-gradient(#fff, #e8e8e8);
    color: #111;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.xp-wallpaper-toolbar button:hover,
.xp-wallpaper-footer button:hover {
    border-color: #316ac5;
}

.xp-wallpaper-note {
    min-height: 17px;
    margin-bottom: 6px;
    color: #555;
    font-size: 10px;
}

.xp-wallpaper-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    grid-auto-rows: 108px;
    gap: 8px;
    background: #d9d9d9;
    border: 1px solid #808080;
}

.xp-wallpaper-card {
    min-width: 0;
    padding: 4px;
    border: 1px solid #9a9a9a;
    background: #f4f4f4;
    cursor: pointer;
}

.xp-wallpaper-card:hover {
    border-color: #316ac5;
    background: #e8f1fc;
}

.xp-wallpaper-card.selected {
    border: 2px solid #316ac5;
    padding: 3px;
    background: #dce8f7;
}

.xp-wallpaper-card.disabled {
    cursor: default;
    opacity: .62;
}

.xp-wallpaper-thumb {
    width: 100%;
    height: 78px;
    overflow: hidden;
    background: #c8c8c8;
    border: 1px solid #777;
}

.xp-wallpaper-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xp-wallpaper-default-thumb {
    background-image: url("assets/xp-wallpaper.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.xp-wallpaper-name {
    height: 18px;
    padding: 3px 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
    font-size: 10px;
}

.xp-wallpaper-footer {
    height: 46px;
    flex: 0 0 46px;
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
    background: #ece9d8;
    border-top: 1px solid #d5d2c5;
}