/* ============================================================
   模板管理系统 - 全局样式（美化版）
   ============================================================ */

/* ====== CSS Variables ====== */
:root {
    --color-primary: #4A6CF7;
    --color-primary-light: #EEF2FF;
    --color-primary-hover: #3b5de7;
    --color-success: #10b981;
    --color-success-light: #ECFDF5;
    --color-danger: #ef4444;
    --color-danger-light: #FEF2F2;
    --color-warning: #f59e0b;
    --color-warning-light: #FFFBEB;
    --color-info: #3b82f6;
    --color-bg: #f0f2f5;
    --color-card: #ffffff;
    --color-border: #e5e9f0;
    --color-border-light: #f1f3f7;
    --color-text: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 14px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.12);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --sidebar-width: 250px;
    --topbar-height: 64px;
    --transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ====== Reset ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
    height:100%;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    font-size:14px;
    color:var(--color-text);
    background:var(--color-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ====== Scrollbar ====== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9ca3af}

/* ====== Login Page ====== */
.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    padding:20px;
    position:relative;
    overflow:hidden;
}
.login-page::before{
    content:'';
    position:absolute;
    width:600px;height:600px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
    top:-200px;right:-100px;
    animation:loginFloat 8s ease-in-out infinite;
}
.login-page::after{
    content:'';
    position:absolute;
    width:400px;height:400px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
    bottom:-120px;left:-80px;
    animation:loginFloat 10s ease-in-out infinite reverse;
}
@keyframes loginFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-30px) scale(1.05)}
}
.login-card{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:var(--radius-xl);
    padding:48px 40px 40px;
    max-width:420px;
    width:100%;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
    position:relative;
    animation:loginSlideUp .6s cubic-bezier(.22,1,.36,1);
    border:1px solid rgba(255,255,255,.2);
}
@keyframes loginSlideUp{
    0%{opacity:0;transform:translateY(30px) scale(.96)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
.login-logo{text-align:center;margin-bottom:36px}
.login-logo .logo-icon{
    width:64px;height:64px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--color-primary),#7c3aed);
    display:flex;align-items:center;justify-content:center;
    font-size:30px;margin:0 auto 18px;
    box-shadow:0 8px 24px rgba(74,108,247,.3);
    animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
    0%,100%{box-shadow:0 8px 24px rgba(74,108,247,.3)}
    50%{box-shadow:0 8px 32px rgba(74,108,247,.5)}
}
.login-logo h1{font-size:24px;color:var(--color-text);font-weight:700;letter-spacing:-.5px}
.login-logo p{font-size:14px;color:var(--color-text-secondary);margin-top:8px}
.login-form .form-group{margin-bottom:22px;position:relative}
.login-form .form-label{
    display:block;font-size:13px;font-weight:600;color:var(--color-text);margin-bottom:8px;
    letter-spacing:.3px;
}
.login-form .form-input{
    width:100%;padding:13px 16px 13px 44px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-lg);
    font-size:14px;outline:none;
    transition:var(--transition);background:#f8fafc;
    color:var(--color-text);
}
.login-form .form-input:hover{border-color:#cbd5e1;background:#fff}
.login-form .form-input:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(74,108,247,.12);
    background:#fff;
}
.login-form .form-input::placeholder{color:var(--color-text-tertiary)}
.login-form .input-icon{
    position:absolute;left:14px;bottom:14px;
    font-size:18px;color:var(--color-text-tertiary);
    pointer-events:none;
    transition:var(--transition);
}
.login-form .form-group:focus-within .input-icon{color:var(--color-primary)}
textarea.form-input{resize:vertical;min-height:80px;font-family:inherit;line-height:1.6;padding-left:16px}
.login-btn{
    width:100%;padding:14px;
    border:none;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--color-primary),#7c3aed);
    color:#fff;font-size:15px;font-weight:600;
    cursor:pointer;transition:var(--transition);
    display:flex;align-items:center;justify-content:center;gap:8px;
    letter-spacing:1px;
    position:relative;overflow:hidden;
}
.login-btn::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(135deg,transparent,rgba(255,255,255,.1));
    opacity:0;transition:opacity .3s;
}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(74,108,247,.4)}
.login-btn:hover::before{opacity:1}
.login-btn:active{transform:translateY(0)}
.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.login-footer{text-align:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--color-border);font-size:13px;color:var(--color-text-secondary)}
.login-footer a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color .2s}
.login-footer a:hover{color:var(--color-primary-hover);text-decoration:underline}
.login-error{
    background:var(--color-danger-light);
    color:var(--color-danger);
    padding:12px 16px;
    border-radius:var(--radius);
    margin-bottom:20px;
    font-size:13px;text-align:center;display:none;
    border:1px solid #fecaca;
    animation:shake .4s ease;
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-6px)}
    50%{transform:translateX(6px)}
    75%{transform:translateX(-3px)}
}

/* ====== App Layout ====== */
.app-layout{display:flex;height:100vh;overflow:hidden;background:var(--color-bg)}

/* ====== Sidebar ====== */
.sidebar{
    width:var(--sidebar-width);min-width:var(--sidebar-width);
    background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
    color:#cbd5e1;
    display:flex;flex-direction:column;
    overflow-y:auto;
    position:relative;
    z-index:10;
}
.sidebar-brand{
    padding:22px 24px;
    font-size:17px;font-weight:700;
    color:#f8fafc;
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;align-items:center;gap:12px;
    letter-spacing:.5px;
}
.sidebar-brand .brand-icon{
    width:36px;height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--color-primary),#7c3aed);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;flex-shrink:0;
}
.sidebar-nav{flex:1;padding:16px 0}
.sidebar-nav .nav-item{
    display:flex;align-items:center;gap:12px;
    padding:14px 24px;cursor:pointer;
    color:#94a3b8;font-size:14px;
    transition:var(--transition);
    border-left:3px solid transparent;
    text-decoration:none;
    position:relative;
}
.sidebar-nav .nav-item .nav-icon{
    font-size:18px;width:22px;text-align:center;flex-shrink:0;
}
.sidebar-nav .nav-item:hover{
    color:#e2e8f0;
    background:rgba(255,255,255,.04);
}
.sidebar-nav .nav-item.active{
    color:#f8fafc;
    background:rgba(74,108,247,.15);
    border-left-color:var(--color-primary);
}
.sidebar-nav .nav-item.active::after{
    content:'';
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:3px;height:20px;
    background:var(--color-primary);
    border-radius:3px 0 0 3px;
}
.sidebar-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.06);font-size:13px}
.sidebar-footer .user-info{display:flex;align-items:center;gap:10px}
.sidebar-footer .avatar{
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,var(--color-primary),#7c3aed);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:14px;font-weight:600;flex-shrink:0;
}
.sidebar-footer .user-detail{flex:1;overflow:hidden}
.sidebar-footer .user-detail .name{color:#e2e8f0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer .user-detail .role{color:#64748b;font-size:12px;margin-top:2px}

/* ====== Main Area ====== */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ====== Topbar ====== */
.topbar{
    height:var(--topbar-height);min-height:var(--topbar-height);
    background:#fff;
    border-bottom:1px solid var(--color-border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 32px;
    position:sticky;top:0;z-index:5;
}
.topbar .page-title{
    font-size:18px;font-weight:600;color:var(--color-text);
    display:flex;align-items:center;gap:10px;
}
.topbar .page-title .title-icon{font-size:20px}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-right .username{
    font-size:14px;color:var(--color-text-secondary);
    font-weight:500;
}
.topbar-right .btn-logout{
    padding:7px 18px;
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    background:#fff;
    color:var(--color-text-secondary);
    cursor:pointer;font-size:13px;
    transition:var(--transition);
}
.topbar-right .btn-logout:hover{
    background:var(--color-danger-light);
    color:var(--color-danger);
    border-color:#fecaca;
}

/* ====== Content ====== */
.content{flex:1;overflow-y:auto;padding:28px 32px}

/* ====== Tab Content ====== */
.tab-content{display:none;animation:tabFadeIn .3s ease}
.tab-content.active{display:block}
@keyframes tabFadeIn{
    0%{opacity:0;transform:translateY(8px)}
    100%{opacity:1;transform:translateY(0)}
}

/* ====== Page Section ====== */
.page-section{display:none}
.page-section.active{display:block}

/* ====== Stat Cards ====== */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
.stat-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    border:1px solid var(--color-border-light);
    position:relative;overflow:hidden;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .stat-icon{
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;margin-bottom:14px;
}
.stat-card .stat-icon.blue{background:var(--color-primary-light);color:var(--color-primary)}
.stat-card .stat-icon.green{background:var(--color-success-light);color:var(--color-success)}
.stat-card .stat-icon.orange{background:var(--color-warning-light);color:var(--color-warning)}
.stat-card .stat-icon.red{background:var(--color-danger-light);color:var(--color-danger)}
.stat-card .label{font-size:13px;color:var(--color-text-secondary);margin-bottom:4px}
.stat-card .value{font-size:28px;font-weight:700;color:var(--color-text);letter-spacing:-1px}
.stat-card .value.green{color:var(--color-success)}
.stat-card .value.red{color:var(--color-danger)}
.stat-card .value.blue{color:var(--color-primary)}
.stat-card .value.orange{color:var(--color-warning)}

/* ====== Buttons ====== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 22px;border-radius:var(--radius);
    border:none;cursor:pointer;
    font-size:14px;font-weight:500;
    transition:var(--transition);
    text-decoration:none;
    line-height:1.4;
    position:relative;overflow:hidden;
}
.btn:active{transform:scale(.97)}
.btn-primary{
    background:linear-gradient(135deg,var(--color-primary),#6366f1);
    color:#fff;
    box-shadow:0 2px 8px rgba(74,108,247,.25);
}
.btn-primary:hover{
    background:linear-gradient(135deg,var(--color-primary-hover),#4f46e5);
    box-shadow:0 4px 16px rgba(74,108,247,.35);
    transform:translateY(-1px);
}
.btn-sm{padding:5px 14px;font-size:12px;border-radius:6px}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:var(--radius-lg)}
.btn-outline{
    background:transparent;
    border:1.5px solid var(--color-border);
    color:var(--color-text-secondary);
}
.btn-outline:hover{background:var(--color-bg);border-color:#cbd5e1;color:var(--color-text)}
.btn-danger{
    background:linear-gradient(135deg,var(--color-danger),#dc2626);
    color:#fff;
    box-shadow:0 2px 8px rgba(239,68,68,.25);
}
.btn-danger:hover{
    box-shadow:0 4px 16px rgba(239,68,68,.35);
    transform:translateY(-1px);
}
.btn-success{
    background:linear-gradient(135deg,var(--color-success),#059669);
    color:#fff;
    box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.btn-success:hover{
    box-shadow:0 4px 16px rgba(16,185,129,.35);
    transform:translateY(-1px);
}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.toolbar-left{display:flex;align-items:center;gap:12px}

/* ====== Table ====== */
.table-wrapper{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow-x:auto;
    border:1px solid var(--color-border-light);
}
table{width:100%;border-collapse:separate;border-spacing:0}
thead{background:#f8fafc}
th{
    padding:14px 18px;text-align:left;
    font-weight:600;font-size:12px;
    color:var(--color-text-secondary);
    text-transform:uppercase;letter-spacing:.5px;
    border-bottom:1px solid var(--color-border);
    white-space:nowrap;
    position:sticky;top:0;background:#f8fafc;
}
td{padding:14px 18px;border-bottom:1px solid var(--color-border-light);font-size:14px;color:var(--color-text)}
tbody tr{transition:background .15s}
tbody tr:hover td{background:var(--color-primary-light)}
tbody tr:last-child td{border-bottom:none}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ====== Badge ====== */
.badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 12px;border-radius:20px;font-size:12px;font-weight:500;
    letter-spacing:.2px;
}
.badge-active,.badge-published{
    background:var(--color-success-light);
    color:#166534;
    border:1px solid rgba(16,185,129,.2);
}
.badge-disabled{
    background:var(--color-danger-light);
    color:#991b1b;
    border:1px solid rgba(239,68,68,.2);
}
.badge-draft{
    background:var(--color-warning-light);
    color:#854d0e;
    border:1px solid rgba(245,158,11,.2);
}

/* ====== Toggle Switch ====== */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
    position:absolute;inset:0;
    background:#cbd5e1;border-radius:24px;
    transition:var(--transition);
}
.toggle-slider::before{
    content:'';
    position:absolute;left:3px;bottom:3px;
    width:18px;height:18px;
    background:#fff;border-radius:50%;
    transition:var(--transition);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.toggle-switch input:checked+.toggle-slider{background:var(--color-success)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}

/* ====== Modal ====== */
.modal-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:1000;
    justify-content:center;
    align-items:center;
    animation:modalFadeIn .2s ease;
}
.modal-overlay.show{display:flex}
@keyframes modalFadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
.modal{
    background:#fff;
    border-radius:var(--radius-xl);
    width:500px;
    max-width:92vw;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:0 25px 60px rgba(0,0,0,.2);
    animation:modalSlideIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes modalSlideIn{
    0%{opacity:0;transform:translateY(20px) scale(.95)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
.modal-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:24px 28px 0;
}
.modal-header h3{font-size:18px;font-weight:600;color:var(--color-text)}
.modal-close{
    background:none;border:none;
    font-size:24px;color:var(--color-text-tertiary);
    cursor:pointer;padding:0 4px;
    transition:color .2s;
    width:32px;height:32px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{color:var(--color-text);background:var(--color-bg)}
.modal-body{padding:20px 28px}
.modal-footer{
    display:flex;justify-content:flex-end;gap:10px;
    padding:0 28px 24px;
}

/* ====== Form ====== */
.form-group{margin-bottom:18px}
.form-group label{
    display:block;font-size:13px;font-weight:500;
    color:var(--color-text);margin-bottom:8px;
}
.form-group input,.form-group select{
    width:100%;
    padding:10px 14px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius);
    font-size:14px;outline:none;
    transition:var(--transition);
    background:#fafbfc;
    color:var(--color-text);
}
.form-group input:hover,.form-group select:hover{
    border-color:#cbd5e1;background:#fff;
}
.form-group input:focus,.form-group select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(74,108,247,.1);
    background:#fff;
}
.form-group input::placeholder{color:var(--color-text-tertiary)}
.form-group select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
    cursor:pointer;
}

/* ====== Toast ====== */
.toast-container{
    position:fixed;top:24px;right:24px;
    z-index:2000;
    display:flex;flex-direction:column;gap:8px;
    pointer-events:none;
}
.toast{
    display:flex;align-items:center;gap:10px;
    padding:14px 22px;
    border-radius:var(--radius-lg);
    color:#fff;font-size:14px;font-weight:500;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    animation:toastSlideIn .4s cubic-bezier(.22,1,.36,1);
    min-width:280px;
    pointer-events:auto;
    position:relative;
    overflow:hidden;
}
.toast::before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;
    width:4px;
}
.toast-success{
    background:linear-gradient(135deg,var(--color-success),#059669);
}
.toast-success::before{background:#047857}
.toast-error{
    background:linear-gradient(135deg,var(--color-danger),#dc2626);
}
.toast-error::before{background:#b91c1c}
.toast-info{
    background:linear-gradient(135deg,var(--color-primary),#6366f1);
}
.toast-info::before{background:#4338ca}
.toast .toast-icon{font-size:18px;flex-shrink:0}
@keyframes toastSlideIn{
    0%{transform:translateX(100%);opacity:0}
    100%{transform:translateX(0);opacity:1}
}
@keyframes toastSlideOut{
    0%{transform:translateX(0);opacity:1}
    100%{transform:translateX(100%);opacity:0}
}

/* ====== Filter ====== */
.filter-group{display:flex;align-items:center;gap:10px}
.filter-group label{font-size:13px;color:var(--color-text-secondary);font-weight:500}
.filter-group select{
    padding:7px 32px 7px 12px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius);
    font-size:13px;outline:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    cursor:pointer;
    background-color:#fff;
    transition:border .2s;
}
.filter-group select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(74,108,247,.1)}

/* ====== Copy Link ====== */
.copy-link{color:var(--color-primary);text-decoration:none;cursor:pointer;font-size:13px;font-weight:500}
.copy-link:hover{text-decoration:underline}
.preview-link{display:flex;align-items:center;gap:8px}
.preview-link a{color:var(--color-primary);text-decoration:none;font-size:13px;font-weight:500}
.preview-link a:hover{text-decoration:underline;color:var(--color-primary-hover)}
.copy-link-btn{
    background:none;border:none;cursor:pointer;
    color:var(--color-text-tertiary);font-size:13px;
    padding:4px 10px;border-radius:6px;
    transition:var(--transition);
    border:1px solid var(--color-border);
}
.copy-link-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* ====== Empty State ====== */
.empty-state{
    text-align:center;padding:60px 20px;
    color:var(--color-text-tertiary);
}
.empty-state .icon{
    font-size:56px;margin-bottom:16px;
    opacity:.6;
}
.empty-state p{font-size:15px;margin-bottom:8px}
.empty-state .sub-text{font-size:13px;color:var(--color-text-tertiary)}

/* ====== Upload Area ====== */
.upload-area{
    border:2px dashed var(--color-border);
    border-radius:var(--radius-lg);
    padding:32px;text-align:center;
    cursor:pointer;color:var(--color-text-secondary);
    margin-bottom:8px;transition:var(--transition);
    background:#fafbfc;
}
.upload-area:hover{
    border-color:var(--color-primary);
    background:var(--color-primary-light);
}
.upload-area .upload-icon{font-size:40px;margin-bottom:10px;opacity:.4}
.upload-area:hover .upload-icon{opacity:.7}
.upload-area .upload-text{font-size:15px;margin-bottom:6px;font-weight:500}
.upload-area .upload-hint{font-size:12px;color:var(--color-text-tertiary)}
.upload-preview{
    margin-top:12px;position:relative;display:inline-block;
    border-radius:var(--radius-lg);overflow:hidden;
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-sm);
}
.upload-preview img{max-width:240px;max-height:180px;display:block}
.upload-preview .remove-btn{
    position:absolute;top:6px;right:6px;
    width:28px;height:28px;border:none;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;
    font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}
.upload-preview .remove-btn:hover{background:var(--color-danger)}

/* ====== Message List Editor ====== */
.msg-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.msg-item{
    display:flex;align-items:center;gap:8px;
    background:#fafbfc;padding:8px 12px;
    border-radius:var(--radius);
    border:1px solid var(--color-border-light);
    transition:border .2s;
}
.msg-item:focus-within{border-color:var(--color-primary)}
.msg-item .form-input{flex:1;border:none;background:transparent;padding:8px 4px}
.msg-item .form-input:focus{box-shadow:none;background:transparent}
.msg-item .remove-msg{
    width:28px;height:28px;border:none;border-radius:8px;
    background:var(--color-danger-light);color:var(--color-danger);
    font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:var(--transition);
}
.msg-item .remove-msg:hover{background:var(--color-danger);color:#fff}

/* ====== Editor Section ====== */
.editor-section{
    margin-bottom:28px;
    background:#fff;padding:24px;
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border-light);
    box-shadow:var(--shadow-sm);
}
.editor-section .section-title{
    font-size:15px;font-weight:600;color:var(--color-text);
    margin-bottom:16px;padding-bottom:12px;
    border-bottom:1px solid var(--color-border);
    display:flex;align-items:center;gap:8px;
}
.editor-section .section-title .title-badge{
    font-size:11px;font-weight:500;
    padding:2px 10px;border-radius:12px;
    background:var(--color-primary-light);
    color:var(--color-primary);
}
.editor-actions{
    display:flex;align-items:center;gap:12px;
    padding-top:20px;border-top:1px solid var(--color-border);
    margin-top:28px;
}
.editor-title{font-size:18px;font-weight:600;color:var(--color-text);margin-bottom:20px}
.back-btn{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--color-text-secondary);cursor:pointer;
    font-size:14px;margin-bottom:16px;transition:color .2s;
    background:none;border:none;padding:4px 0;
}
.back-btn:hover{color:var(--color-primary)}

/* ====== Loading ====== */
.spinner{
    width:28px;height:28px;
    border:3px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin .6s linear infinite;
    margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-table{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:60px 20px;color:var(--color-text-secondary);gap:12px;
}

/* ====== Action Buttons ====== */
.action-btn{
    background:none;border:none;cursor:pointer;
    font-size:16px;padding:6px 10px;border-radius:8px;
    transition:var(--transition);
}
.action-btn:hover{background:var(--color-bg)}
.action-edit{color:var(--color-primary)!important}
.action-edit:hover{background:var(--color-primary-light)!important}
.action-delete{color:var(--color-danger)!important}
.action-delete:hover{background:var(--color-danger-light)!important}

/* ====== Form Card (for admin dashboard) ====== */
.form-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:28px;
    border:1px solid var(--color-border-light);
    box-shadow:var(--shadow-sm);
    max-width:600px;
}
.form-card .form-group{margin-bottom:20px}
.form-card .form-group label{
    font-size:13px;font-weight:600;color:var(--color-text);margin-bottom:6px;
}
.form-card .form-group input,.form-card .form-group select{
    width:100%;padding:10px 14px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius);
    font-size:14px;outline:none;
    transition:var(--transition);
    background:#fafbfc;
}
.form-card .form-group input:focus,.form-card .form-group select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(74,108,247,.1);
    background:#fff;
}

/* ====== Status Dot ====== */
.status-dot{
    width:8px;height:8px;border-radius:50%;display:inline-block;
    margin-right:6px;
}
.status-dot.active{background:var(--color-success)}
.status-dot.disabled{background:var(--color-danger)}

/* ====== Responsive ====== */
@media(max-width:768px){
    .sidebar{width:64px;min-width:64px}
    .sidebar-brand span,.sidebar-footer .user-detail,.sidebar-nav .nav-item span{display:none}
    .sidebar-brand{justify-content:center;padding:18px 12px}
    .sidebar-nav .nav-item{justify-content:center;padding:14px;font-size:20px;border-left-width:0}
    .sidebar-nav .nav-item.active::after{display:none}
    .sidebar-footer{padding:12px;display:flex;justify-content:center}
    .stat-cards{grid-template-columns:repeat(2,1fr);gap:12px}
    .stat-card{padding:18px}
    .stat-card .value{font-size:22px}
    .content{padding:16px}
    .topbar{padding:0 16px}
    .topbar .page-title{font-size:16px}
    .editor-section{padding:16px}
    .login-card{padding:32px 24px}
    .modal{width:95vw}
    .modal-body,.modal-header{padding:16px 20px}
    .modal-footer{padding:0 20px 16px}
}

@media(max-width:480px){
    .stat-cards{grid-template-columns:1fr 1fr;gap:10px}
    .stat-card{padding:14px}
    .stat-card .value{font-size:20px}
    .login-card{padding:28px 20px}
    .topbar .page-title{font-size:15px}
    .topbar-right .username{display:none}
}