:root {
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --primary-dark: #4338ca;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius: 8px;
    --radius-lg: 12px;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',Arial,"Microsoft YaHei",sans-serif}

body{
    padding:0;
    background:rgb(87, 185, 188);
    min-height:100vh;
    line-height:1.6
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:20px
}

.page-header{
    background:white;
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
    box-shadow:var(--shadow-md)
}

.page-header h2{
    color:var(--gray-800);
    font-size:24px;
    font-weight:700;
    margin:0;
    display:flex;
    align-items:center;
    gap:12px
}

.page-header h2::before{
    content:'';
    width:4px;
    height:24px;
    background:linear-gradient(180deg, var(--primary), var(--primary-light));
    border-radius:2px
}

.nav{
    background:white;
    border-radius:var(--radius-lg);
    padding:16px 24px;
    margin-bottom:20px;
    box-shadow:var(--shadow-md);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    position:relative
}

.nav .nav-welcome{
    color:var(--gray-600);
    font-size:14px;
    margin-right:auto
}

.nav-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    margin-left:auto
}

.nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:var(--gray-600);
    margin:5px 0;
    transition:all 0.3s;
    border-radius:2px
}

.nav-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px, 5px)
}

.nav-toggle.active span:nth-child(2){
    opacity:0
}

.nav-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px, -5px)
}

.nav-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px
}

.nav-links a{
    padding:8px 16px;
    color:var(--gray-600);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    border-radius:var(--radius);
    transition:all 0.2s;
    background:var(--gray-50)
}

.nav-links a:hover{
    background:var(--primary);
    color:white;
    transform:translateY(-1px)
}

.nav-links a.active{
    background:var(--primary);
    color:white
}

.card{
    background:white;
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
    box-shadow:var(--shadow-md)
}

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--gray-200)
}

.card-header h3{
    color:var(--gray-800);
    font-size:18px;
    font-weight:600;
    margin:0
}

.table{width:100%;border-collapse:collapse;margin:0}

.table th,.table td{
    padding:14px 16px;
    text-align:left;
    border-bottom:1px solid var(--gray-100)
}

.table th{
    background:var(--gray-50);
    color:var(--gray-600);
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px
}

.table tr:hover td{
    background:var(--gray-50)
}

.table td{
    color:var(--gray-700);
    font-size:14px
}

.btn{
    padding:8px 16px;
    background:var(--primary);
    color:white;
    border:none;
    border-radius:var(--radius);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
    margin:2px
}

.btn:hover{
    background:var(--primary-dark);
    transform:translateY(-1px);
    box-shadow:var(--shadow-md)
}

.btn-sm{padding:6px 12px;font-size:12px}

.btn-primary{background:var(--primary)}
.btn-primary:hover{background:var(--primary-dark)}

.btn-success{background:var(--success)}
.btn-success:hover{background:#059669}

.btn-warning{background:var(--warning)}
.btn-warning:hover{background:#d97706}

.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#dc2626}

.btn-default{background:var(--gray-100);color:var(--gray-600)}
.btn-default:hover{background:var(--gray-200);color:var(--gray-700)}

.btn-outline{
    background:transparent;
    border:1px solid var(--gray-300);
    color:var(--gray-600)
}
.btn-outline:hover{
    background:var(--gray-50);
    border-color:var(--gray-400)
}

.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--gray-100)
}

.pagination span{color:var(--gray-500);font-size:14px}

.pagination a{
    padding:8px 14px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    text-decoration:none;
    color:var(--gray-600);
    font-size:14px;
    font-weight:500;
    transition:all 0.2s
}

.pagination a:hover{
    background:var(--gray-50);
    border-color:var(--gray-300)
}

.pagination .active{
    background:var(--primary);
    color:white;
    border-color:var(--primary)
}

.pagination-ellipsis{
    padding:8px 4px;
    color:var(--gray-400);
    font-size:14px
}

.msg{
    padding:14px 18px;
    margin-bottom:20px;
    border-radius:var(--radius);
    font-size:14px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px
}

.success{
    background:#ecfdf5;
    color:#059669;
    border:1px solid #a7f3d0
}

.error{
    background:#fef2f2;
    color:#dc2626;
    border:1px solid #fecaca
}

.search-box{
    background:var(--gray-50);
    padding:20px;
    border-radius:var(--radius);
    margin-bottom:20px
}

.search-box form{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}

.search-box input[type="text"]{
    flex:1;
    min-width:200px;
    max-width:400px;
    padding:12px 16px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    transition:all 0.2s;
    background:white
}

.search-box input[type="text"]:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.1)
}

.search-box input[type="text"]::placeholder{
    color:var(--gray-400)
}

.status-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600
}

.status-pending{
    background:#fef3c7;
    color:#d97706
}

.status-approved{
    background:#d1fae5;
    color:#059669
}

.status-rejected{
    background:#fee2e2;
    color:#dc2626
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-bottom:20px
}

.stat-card{
    background:white;
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-md);
    display:flex;
    align-items:center;
    gap:16px
}

.stat-icon{
    width:48px;
    height:48px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px
}

.stat-icon.primary{background:rgba(79,70,229,0.1);color:var(--primary)}
.stat-icon.success{background:rgba(16,185,129,0.1);color:var(--success)}
.stat-icon.warning{background:rgba(245,158,11,0.1);color:var(--warning)}
.stat-icon.danger{background:rgba(239,68,68,0.1);color:var(--danger)}

.stat-content h4{
    color:var(--gray-500);
    font-size:13px;
    font-weight:500;
    margin-bottom:4px
}

.stat-content .stat-value{
    color:var(--gray-800);
    font-size:28px;
    font-weight:700
}

.empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--gray-400)
}

.empty-state-icon{
    font-size:48px;
    margin-bottom:16px
}

.empty-state-text{
    font-size:16px;
    font-weight:500
}

.form-group{margin-bottom:20px}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--gray-700);
    font-size:14px
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="search"],
.form-group input[type="datetime-local"],
.form-group input[type="date"],
.form-group input[type="time"]{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    transition:all 0.2s;
    background:white
}

.form-group select{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    background:white;
    cursor:pointer;
    transition:all 0.2s
}

.form-group textarea{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    min-height:100px;
    resize:vertical;
    transition:all 0.2s;
    font-family:inherit;
    line-height:1.5
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.1)
}

.form-hint{
    display:block;
    margin-top:6px;
    font-size:12px;
    color:var(--gray-400)
}

.form-group input[type="checkbox"]{
    width:20px;
    height:20px;
    cursor:pointer;
    accent-color:var(--primary);
    vertical-align:middle;
    margin-right:8px
}

.form-group .checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:500;
    user-select:none;
    padding:10px 0
}

.form-group input[type="number"]{
    width:120px;
    padding:10px 14px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    text-align:center;
    transition:all 0.2s
}

.form-group input[type="number"]:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.1)
}

.priority-input-wrapper{
    display:flex;
    align-items:center;
    gap:12px
}

.priority-input-wrapper input[type="number"]{
    width:100px
}

.priority-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:500
}

.priority-badge.high{
    background:rgba(239,68,68,0.1);
    color:var(--danger)
}

.priority-badge.medium{
    background:rgba(245,158,11,0.1);
    color:#f59e0b
}

.priority-badge.low{
    background:rgba(34,197,94,0.1);
    color:var(--success)
}

.url-input-wrapper{
    position:relative;
    display:flex;
    align-items:center
}

.url-input-wrapper .url-icon{
    position:absolute;
    left:14px;
    color:var(--gray-400);
    font-size:16px;
    pointer-events:none
}

.url-input-wrapper input{
    padding-left:42px
}

.form-url{
    width:100%;
    padding:12px 16px 12px 42px;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    font-size:14px;
    font-family:'Consolas','Monaco',monospace;
    transition:all 0.2s;
    background:var(--gray-50)
}

.form-url:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.1);
    background:white
}

.form-url::placeholder{
    color:var(--gray-400);
    font-family:inherit
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:24px
}

.form-actions .btn{
    flex:1;
    padding:14px 24px;
    font-size:15px
}

.admin-tabs{
    background:white;
    border-radius:var(--radius-lg);
    padding:12px 20px;
    margin-bottom:20px;
    box-shadow:var(--shadow-md);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px
}

.admin-tabs a{
    padding:8px 16px;
    color:var(--gray-600);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    border-radius:var(--radius);
    transition:all 0.2s;
    background:var(--gray-50);
    border:1px solid transparent
}

.admin-tabs a:hover{
    background:var(--gray-100);
    border-color:var(--gray-200);
    color:var(--primary)
}

.admin-tabs a.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary)
}

.toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:10000;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none
}

.toast{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    background:white;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);
    min-width:320px;
    max-width:420px;
    pointer-events:auto;
    animation:toastIn 0.4s cubic-bezier(0.16,1,0.3,1);
    transform-origin:right center
}

.toast.toast-out{
    animation:toastOut 0.3s cubic-bezier(0.16,1,0.3,1) forwards
}

@keyframes toastIn{
    0%{
        opacity:0;
        transform:translateX(100%) scale(0.9)
    }
    100%{
        opacity:1;
        transform:translateX(0) scale(1)
    }
}

@keyframes toastOut{
    0%{
        opacity:1;
        transform:translateX(0) scale(1)
    }
    100%{
        opacity:0;
        transform:translateX(100%) scale(0.9)
    }
}

.toast-icon{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0
}

.toast.success .toast-icon{
    background:linear-gradient(135deg,#10b981,#059669);
    box-shadow:0 4px 12px rgba(16,185,129,0.3)
}

.toast.error .toast-icon{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    box-shadow:0 4px 12px rgba(239,68,68,0.3)
}

.toast.warning .toast-icon{
    background:linear-gradient(135deg,#f59e0b,#d97706);
    box-shadow:0 4px 12px rgba(245,158,11,0.3)
}

.toast.info .toast-icon{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    box-shadow:0 4px 12px rgba(59,130,246,0.3)
}

.toast-content{
    flex:1;
    min-width:0
}

.toast-title{
    font-weight:600;
    font-size:14px;
    color:var(--gray-800);
    margin-bottom:2px
}

.toast-message{
    font-size:13px;
    color:var(--gray-500);
    line-height:1.4
}

.toast-close{
    width:28px;
    height:28px;
    border-radius:8px;
    border:none;
    background:var(--gray-100);
    color:var(--gray-400);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:all 0.2s;
    flex-shrink:0
}

.toast-close:hover{
    background:var(--gray-200);
    color:var(--gray-600)
}

.toast-progress{
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.4));
    border-radius:0 0 12px 12px;
    animation:toastProgress 4s linear forwards
}

.toast.error .toast-progress{
    background:linear-gradient(90deg,rgba(239,68,68,0.6),rgba(239,68,68,0.3))
}

.toast.warning .toast-progress{
    background:linear-gradient(90deg,rgba(245,158,11,0.6),rgba(245,158,11,0.3))
}

.toast.info .toast-progress{
    background:linear-gradient(90deg,rgba(59,130,246,0.6),rgba(59,130,246,0.3))
}

@keyframes toastProgress{
    0%{width:100%}
    100%{width:0%}
}

@media(max-width:480px){
    .toast-container{
        left:12px;
        right:12px;
        top:12px
    }
    .toast{
        min-width:auto;
        max-width:none
    }
}

@media(max-width:768px){
    .container{padding:12px}
    .page-header,.card{padding:16px}
    .nav{padding:12px 16px;flex-wrap:nowrap}
    .nav-toggle{display:block}
    .nav-links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:white;
        border-radius:0 0 var(--radius-lg) var(--radius-lg);
        padding:16px;
        box-shadow:var(--shadow-lg);
        flex-direction:column;
        align-items:stretch;
        z-index:100;
        margin-top:8px
    }
    .nav-links.show{display:flex}
    .nav-links a{width:100%;text-align:center}
    .stats-grid{grid-template-columns:1fr}
    .table th,.table td{padding:10px 12px;font-size:13px}
    .table{display:block;overflow-x:auto;white-space:nowrap}
    .card-header{flex-direction:column;align-items:stretch;gap:12px}
    .card-header h3{margin-bottom:0}
    .card-header .search-box{width:100%}
    .card-header .search-box form{flex-wrap:wrap}
    .card-header .search-box input[type="text"]{min-width:0;flex:1}
    .admin-tabs{padding:10px 12px;gap:6px}
    .admin-tabs a{padding:6px 12px;font-size:13px}
}