/* ==========================================================
 * 文本倒计时管理系统 - 浅色简约主题
 * 设计原则：低饱和商务蓝、弱阴影、大留白、统一圆角与层级
 * ========================================================== */

:root {
    --brand: #409eff;
    --brand-hover: #66b1ff;
    --brand-active: #3a8ee6;
    --brand-bg: #ecf5ff;
    --brand-bg-hover: #d9ecff;
    --brand-border: #a0cfff;

    --text-1: #1f2937;
    --text-2: #4b5563;
    --text-3: #8a93a3;

    --line: #edf0f5;
    --line-strong: #dfe4ec;
    --bg-page: #f5f7fb;
    --bg-soft: #f8fafc;

    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);
    --shadow-md: 0 3px 14px rgba(17, 24, 39, .06);
    --shadow-lg: 0 20px 56px rgba(31, 54, 92, .10);

    --ease: .18s ease;
}

/* ========== 全局 ========== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text-1);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#app { height: 100%; }
a { text-decoration: none; }

/* ========== Element 全局精修 ========== */

/* 按钮 */
.el-button {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--ease);
}
.el-button--mini { border-radius: 6px; }
.el-button:focus { outline: none; }
.el-button--default {
    background: #fff;
    border-color: var(--line-strong);
    color: var(--text-2);
}
.el-button--default:hover,
.el-button--default:focus {
    background: var(--brand-bg);
    border-color: var(--brand);
    color: var(--brand);
}
.el-button--primary {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 2px 6px rgba(64, 158, 255, .22);
}
.el-button--primary:hover,
.el-button--primary:focus {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    box-shadow: 0 4px 12px rgba(64, 158, 255, .28);
}
.el-button--primary:active {
    background: var(--brand-active);
    border-color: var(--brand-active);
}
.el-button--primary.is-plain {
    background: var(--brand-bg);
    border-color: var(--brand-border);
    color: var(--brand);
    box-shadow: none;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.el-button--text { color: var(--brand); font-weight: 500; }
.el-button--text:hover,
.el-button--text:focus { color: var(--brand-hover); }
.el-button.del-btn { color: #e05555; }
.el-button.del-btn:hover,
.el-button.del-btn:focus { color: #ec7a7a; }
.el-button.del-btn.is-disabled,
.el-button.del-btn.is-disabled:hover { color: #c4cbd6; }

/* 输入框 / 文本域 */
.el-input__inner {
    border-radius: var(--radius-sm);
    border-color: var(--line-strong);
    color: var(--text-1);
    height: 34px;
    line-height: 34px;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.el-input__inner::placeholder { color: #b3bcc9; }
.el-input__inner:focus,
.el-input.is-active .el-input__inner,
.el-input__inner:focus { border-color: var(--brand); }
.el-input.is-active .el-input__inner,
.el-input__inner:focus { box-shadow: 0 0 0 3px rgba(64, 158, 255, .12); }
.el-textarea__inner {
    border-radius: var(--radius-sm);
    border-color: var(--line-strong);
    color: var(--text-1);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.el-textarea__inner:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(64, 158, 255, .12);
}
.el-input-number .el-input__inner { text-align: center; }
.el-select .el-input .el-input__suffix .el-select__caret { color: var(--text-3); }

/* 下拉面板 */
.el-select-dropdown {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.el-select-dropdown__item { color: var(--text-2); border-radius: 6px; margin: 2px 6px; }
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover { background: var(--brand-bg); }
.el-select-dropdown__item.selected { color: var(--brand); font-weight: 600; }

/* 卡片 */
.el-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), var(--shadow-md);
}
.el-card__body { padding: 18px 20px; }

/* 表格 */
.el-table {
    font-size: 13px;
    color: var(--text-2);
    border-radius: var(--radius);
    overflow: hidden;
}
.el-table::before,
.el-table--border::after { background-color: var(--line); }
.el-table th.el-table__cell {
    background: var(--bg-soft);
    color: var(--text-2);
    font-weight: 600;
    font-size: 12.5px;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf { border-bottom: 1px solid var(--line); }
.el-table--border,
.el-table--group { border: 1px solid var(--line); }
.el-table--border th.el-table__cell,
.el-table--border td.el-table__cell { border-right: 1px solid var(--line); }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #fbfcfe; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: #f5f9ff; }
.el-table__body tr.current-row > td.el-table__cell { background: var(--brand-bg) !important; }
.el-table .el-table__expand-icon { color: #b3bcc9; transition: color var(--ease); }
.el-table .el-table__expand-icon:hover { color: var(--brand); }
.el-table .el-table__expand-icon.el-table__expand-icon--expanded { color: var(--brand); }
.el-table__empty-text { color: var(--text-3); padding: 26px 0; }

/* 标签 */
.el-tag {
    border-radius: 5px;
    font-weight: 500;
    border: none;
}
.el-tag--success { background: #e8f7ef; color: #16a36a; }
.el-tag--danger { background: #fdeeee; color: #df5656; }
.el-tag--warning { background: #fdf4e3; color: #c07a10; }
.el-tag--info { background: #f1f4f8; color: #7c8799; }
.el-tag--primary { background: var(--brand-bg); color: var(--brand); }

/* 分页 */
.el-pagination { font-weight: 500; color: var(--text-3); }
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li,
.el-pagination.is-background .el-pagination__jump,
.el-pagination.is-background .el-pagination__total {
    background: #fff;
    color: var(--text-2);
    border-radius: 7px;
    font-weight: 500;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    border: 1px solid var(--line);
    margin: 0 3px;
    min-width: 30px;
}
.el-pagination.is-background .el-pager li:hover { color: var(--brand); border-color: var(--brand-border); }
.el-pagination.is-background .el-pager li.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* 弹窗 */
.el-dialog {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(17, 24, 39, .18);
}
.el-dialog__header {
    padding: 17px 22px;
    margin: 0;
    background: #fcfdff;
    border-bottom: 1px solid var(--line);
}
.el-dialog__title { font-size: 15px; font-weight: 600; color: var(--text-1); }
.el-dialog__headerbtn { top: 18px; right: 20px; font-size: 16px; }
.el-dialog__body { padding: 24px 22px 10px; color: var(--text-2); }
.el-dialog__footer { padding: 12px 22px 18px; }
.el-form-item__label { color: var(--text-2); font-weight: 500; }

/* 确认框 / 消息 */
.el-message-box {
    border-radius: var(--radius-lg);
    box-shadow: 0 28px 80px rgba(17, 24, 39, .16);
    border: none;
}
.el-message-box__header { padding: 20px 22px 0; }
.el-message-box__title { font-weight: 600; color: var(--text-1); }
.el-message-box__content { padding: 12px 22px; color: var(--text-2); }
.el-message-box__btns { padding: 6px 22px 20px; }
.el-message {
    top: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 18px;
    box-shadow: var(--shadow-md);
}
.el-message--success { background: #fff; }
.el-message--error { background: #fff; }
.el-message--warning { background: #fff; }
.el-message--info { background: #fff; }

/* 下拉菜单 */
.el-dropdown-menu {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 5px;
}
.el-dropdown-menu__item {
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-2);
}
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus { background: var(--brand-bg); color: var(--brand); }
.el-dropdown-menu__item--divided { border-top-color: var(--line); }

/* ========== 登录页 ========== */
.login-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-page);
}
.login-wrapper::before,
.login-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    z-index: 0;
}
.login-wrapper::before {
    width: 520px;
    height: 520px;
    top: -200px;
    right: -140px;
    background: radial-gradient(circle, rgba(64, 158, 255, .14) 0%, rgba(64, 158, 255, 0) 70%);
}
.login-wrapper::after {
    width: 460px;
    height: 460px;
    bottom: -190px;
    left: -120px;
    background: radial-gradient(circle, rgba(99, 102, 241, .12) 0%, rgba(99, 102, 241, 0) 70%);
}
.login-box {
    position: relative;
    z-index: 1;
    width: 420px;
    padding: 40px 40px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}
.login-brand {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--brand);
    box-shadow: 0 8px 20px rgba(64, 158, 255, .3);
}
.login-brand i { color: #fff; font-size: 28px; }
.login-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text-1);
}
.login-subtitle {
    margin: 0 0 28px;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: var(--text-3);
}
.login-box .el-input__inner {
    height: 44px;
    line-height: 44px;
    border-radius: 9px;
}
.login-box .el-input__icon { line-height: 44px; }
.login-box .el-form-item { margin-bottom: 20px; }
.login-box .el-button {
    height: 44px;
    padding: 12px 0;
    font-size: 15px;
    letter-spacing: 4px;
    border-radius: 9px;
}
.login-tip {
    margin: 6px 0 0;
    font-size: 12px;
    color: #b3bcc9;
    text-align: center;
}

/* ========== 后台布局 ========== */
.layout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}
.layout-logo {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text-1);
}
.logo-mark {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--brand);
    box-shadow: 0 3px 8px rgba(64, 158, 255, .28);
}
.logo-mark i { color: #fff; font-size: 18px; }
.layout-user {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.user-avatar {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand);
    font-size: 15px;
}
.layout-user .el-dropdown-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--text-2);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: background var(--ease);
}
.layout-user .el-dropdown-link:hover { background: var(--bg-soft); }
.layout-user .el-tag { margin-left: 8px; }

.layout-aside {
    background: #fff;
    border-right: 1px solid var(--line);
}
.layout-aside .el-menu {
    border-right: none;
    padding: 12px;
}
.layout-aside .el-menu-item {
    position: relative;
    height: 46px;
    line-height: 46px;
    margin-bottom: 4px;
    border-radius: 9px;
    color: #52607a;
    font-weight: 500;
    transition: background var(--ease), color var(--ease);
}
.layout-aside .el-menu-item i {
    margin-right: 10px;
    font-size: 16px;
    color: inherit;
}
.layout-aside .el-menu-item:hover,
.layout-aside .el-menu-item:focus {
    background: #f3f6fb !important;
    color: var(--text-1);
}
.layout-aside .el-menu-item.is-active {
    background: var(--brand-bg) !important;
    color: var(--brand-active);
    font-weight: 600;
}
.layout-aside .el-menu-item.is-active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
}

.layout-main {
    padding: 20px;
    background: var(--bg-page);
    overflow-y: auto;
}
.layout-main::-webkit-scrollbar { width: 8px; }
.layout-main::-webkit-scrollbar-thumb {
    background: #d5dbe6;
    border-radius: 8px;
}
.layout-main::-webkit-scrollbar-thumb:hover { background: #c2cad8; }

.page-card { margin-bottom: 0; }
.toolbar {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.toolbar .spacer { flex: 1; }
.pagination-bar {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ========== 倒计时（柔和胶囊） ========== */
.countdown {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 11px;
    font-family: "SFMono-Regular", Consolas, Menlo, "Courier New", monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #b3680a;
    background: #fdf3e1;
}
.countdown.urgent { color: #d14343; background: #fdeaea; }
.countdown.expired { color: #8a93a3; background: #f1f4f8; }
.status-normal { color: #16a36a; font-weight: 600; }
.status-expired { color: #df5656; font-weight: 600; }

/* ========== 标题列 + 行内复制按钮 ========== */
.title-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 0;
}
.title-text {
    max-width: 100%;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-1);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy-inline-btn { margin-top: 7px; }

.duration-inputs {
    display: flex;
    align-items: center;
    color: var(--text-2);
}
.duration-inputs .el-input-number { margin-right: 8px; }
.duration-inputs .unit-minute { margin-left: 12px; margin-right: 8px; }

.table-text-muted { color: var(--text-3); font-size: 12px; }

/* 筛选控件宽度（桌面） */
.filter-cate { width: 150px; }
.filter-kw { width: 200px; }
.filter-status { width: 130px; }

/* ========== 手机端导航 ========== */
.nav-toggle {
    display: none;
    width: 34px;
    height: 34px;
    margin-right: 6px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-soft); }
.header-left { display: flex; align-items: center; }
.mobile-nav, .mobile-mask { display: none; }

/* ==========================================================
 * 响应式：手机端 H5（≤768px）
 * ========================================================== */
@media (max-width: 768px) {
    /* 顶栏 */
    .layout-header {
        height: 52px;
        padding: 0 12px;
    }
    .nav-toggle { display: inline-flex; }
    .layout-logo { font-size: 14px; letter-spacing: 0; }
    .logo-mark {
        width: 28px;
        height: 28px;
        margin-right: 8px;
        border-radius: 8px;
    }
    .logo-mark i { font-size: 16px; }
    .header-user-name,
    .layout-user .el-tag { display: none; }
    .user-avatar { margin-right: 0; }

    /* 手机导航面板 */
    .layout-aside { display: none; }
    .mobile-mask {
        display: block;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(17, 24, 39, .35);
        z-index: 1999;
    }
    .mobile-nav {
        display: block;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 2000;
        padding: 10px 12px 14px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 14px 34px rgba(17, 24, 39, .12);
    }
    .m-nav-item {
        display: flex;
        align-items: center;
        height: 46px;
        line-height: 46px;
        padding: 0 14px;
        margin-bottom: 4px;
        border-radius: 9px;
        color: #52607a;
        font-weight: 500;
        cursor: pointer;
    }
    .m-nav-item:last-child { margin-bottom: 0; }
    .m-nav-item i { margin-right: 10px; font-size: 17px; }
    .m-nav-item:active { background: #f3f6fb; }
    .m-nav-item.active {
        background: var(--brand-bg);
        color: var(--brand-active);
        font-weight: 600;
    }
    .nav-fade-enter-active, .nav-fade-leave-active { transition: opacity .2s ease; }
    .nav-fade-enter, .nav-fade-leave-to { opacity: 0; }
    .nav-slide-enter-active, .nav-slide-leave-active {
        transition: transform .22s ease, opacity .22s ease;
    }
    .nav-slide-enter, .nav-slide-leave-to {
        transform: translateY(-12px);
        opacity: 0;
    }

    /* 内容区 */
    .layout-main { padding: 10px; }
    .el-card__body { padding: 12px; }

    /* 工具栏：全部整行，查询/重置平分一行 */
    .toolbar { gap: 8px; }
    .toolbar .spacer { display: none; }
    .filter-cate,
    .filter-kw,
    .filter-status { width: 100% !important; flex: 0 0 100%; }
    .toolbar .el-button { flex: 1 1 auto; margin-left: 0; }

    /* 表格紧凑 + 横向滚动 */
    .el-table { font-size: 12.5px; }
    .el-table th.el-table__cell { font-size: 12px; }
    .el-table .cell { padding-left: 6px; padding-right: 6px; }

    /* 行内复制按钮整行可点 */
    .title-cell { padding: 4px 0; }
    .copy-inline-btn {
        width: 100%;
        margin-top: 8px;
        height: 32px;
        padding: 8px 0;
    }

    /* 弹窗 */
    .el-dialog {
        width: 94% !important;
        margin: 36px auto !important;
    }
    .el-dialog__header { padding: 15px 16px; }
    .el-dialog__body { padding: 18px 16px 6px; }
    .el-dialog__footer { padding: 10px 16px 16px; }

    /* 表单 label 置顶，输入框整行 */
    .el-form-item__label {
        float: none !important;
        display: block;
        text-align: left !important;
        padding: 0 0 5px !important;
    }
    .el-form-item__content { margin-left: 0 !important; }
    .duration-inputs { flex-wrap: wrap; gap: 6px 0; }

    /* 分页精简：仅 总数/翻页（覆盖 Element 高特异性内置选择器） */
    .el-pagination .el-pagination__sizes,
    .el-pagination span.el-pagination__jump { display: none !important; }
    .pagination-bar { justify-content: center; }
    .el-pagination.is-background .el-pager li {
        min-width: 27px;
        height: 28px;
        line-height: 28px;
    }

    /* 消息提示不遮操作 */
    .el-message { min-width: auto; max-width: 88vw; }
}

@media (max-width: 380px) {
    .layout-logo { font-size: 13px; }
    .countdown { font-size: 12px; padding: 3px 8px; }
}

/* 登录页移动端 */
@media (max-width: 768px) {
    .login-box {
        width: auto;
        max-width: calc(100vw - 32px);
        padding: 34px 24px 22px;
        border-radius: 16px;
    }
    .login-title { font-size: 20px; }
}