/* ============================================
   工时系统 · 深色科技风 (Dark Tech Style)
   Author: AI, 2026-07-20
   ============================================ */

:root {
    --tech-primary: #00d4ff;
    --tech-primary-dark: #0891b2;
    --tech-accent: #a855f7;
    --tech-bg: #020617;
    --tech-bg-2: #0f172a;
    --tech-text: #e2e8f0;
    --tech-text-light: #94a3b8;
    --tech-border: rgba(148, 163, 184, 0.15);
    --tech-border-strong: rgba(148, 163, 184, 0.3);
    --tech-card-bg: rgba(15, 23, 42, 0.6);
    --tech-card-bg-solid: #0f172a;
}

html, body {
    background-color: var(--tech-bg) !important;
    background-image:
        radial-gradient(circle at 20% 0%, rgba(0, 212, 255, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(168, 85, 247, 0.10) 0%, transparent 40%),
        linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
    background-attachment: fixed !important;
    color: var(--tech-text) !important;
}

#root > div { background: transparent !important; }

/* === HEADER (top bar) === */
header.bg-white, header.sticky {
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.95) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.95) 100%) !important;
    background-size: 200% 200% !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 212, 255, 0.15), 0 1px 0 rgba(168, 85, 247, 0.2) inset !important;
    height: 64px !important; min-height: 64px !important;
    position: sticky !important; top: 0 !important; z-index: 40 !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

header.bg-white::before, header.sticky::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #00d4ff 25%, #a855f7 50%, #00ff88 75%, transparent 100%);
    opacity: 0.9; animation: techGlowLine 4s ease-in-out infinite; pointer-events: none;
}
@keyframes techGlowLine { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

header h1, header p, header span { color: rgba(255, 255, 255, 0.95) !important; }
header h1 { font-size: 18px !important; font-weight: 700 !important; letter-spacing: 1px !important; }
header p { color: rgba(168, 216, 255, 0.85) !important; font-size: 12px !important; }

header button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}
header button:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.6) !important;
    color: #00d4ff !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important;
}

header .bg-purple-500 {
    background: linear-gradient(135deg, #00d4ff 0%, #a855f7 50%, #0891b2 100%) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
    border-radius: 10px !important;
}

/* === SIDEBAR === */
nav.hidden.md\:block, nav.bg-white {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(168, 85, 247, 0.1) inset !important;
    padding: 12px 8px !important; margin-right: 16px !important;
    width: 200px !important; min-width: 200px !important;
}

nav button {
    color: var(--tech-text-light) !important; border-radius: 8px !important;
    padding: 10px 14px !important; font-size: 14px !important;
    font-weight: 500 !important; margin-bottom: 4px !important;
    transition: all 0.2s ease !important; border-left: 3px solid transparent !important;
}
nav button:hover {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.12) 0%, rgba(168, 85, 247, 0.06) 100%) !important;
    color: #00d4ff !important; transform: translateX(2px) !important;
    border-left-color: rgba(0, 212, 255, 0.5) !important;
}

nav button.bg-purple-50, nav button[class*="purple"] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%) !important;
    color: #00d4ff !important;
    border-left-color: #00d4ff !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25), 0 0 0 1px rgba(0, 212, 255, 0.4) inset !important;
}
nav button.bg-purple-50 svg, nav button[class*="purple"] svg { color: #00e5ff !important; }

/* === MAIN === */
main { padding: 24px 32px !important; max-width: 100% !important; }

main .bg-white {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

main h1, main h2, main h3 {
    background: linear-gradient(90deg, #00d4ff 0%, #a855f7 100%) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important; font-weight: 700 !important;
}

button[class*="bg-purple-500"]:not(nav button),
button[class*="bg-purple-600"]:not(nav button) {
    background: linear-gradient(135deg, #00d4ff 0%, #a855f7 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}
button[class*="bg-purple-500"]:not(nav button):hover,
button[class*="bg-purple-600"]:not(nav button):hover {
    background: linear-gradient(135deg, #a855f7 0%, #00d4ff 100%) !important;
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* === 表格 === */
table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
table thead th {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
    color: #00d4ff !important;
    font-weight: 600 !important; font-size: 13px !important;
    padding: 12px 10px !important; text-align: left !important;
    border: none !important; white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
}
table thead th:first-child { border-top-left-radius: 10px !important; }
table thead th:last-child { border-top-right-radius: 10px !important; }

table tbody td {
    padding: 10px 10px !important; font-size: 13px !important;
    color: var(--tech-text) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    background: transparent !important;
}
table tbody tr { transition: all 0.15s ease !important; }
table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.06) 0%, rgba(168, 85, 247, 0.06) 100%) !important;
    transform: scale(1.001) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.15) !important;
}
table tbody tr:nth-child(even) td { background: rgba(15, 23, 42, 0.3) !important; }
table tbody tr:nth-child(even):hover td {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.06) 0%, rgba(168, 85, 247, 0.06) 100%) !important;
}

/* === 输入框 === */
input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input[type="email"], input[type="password"],
select, textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    color: #e2e8f0 !important;
    transition: all 0.15s ease !important;
}
input::placeholder, textarea::placeholder { color: rgba(148, 163, 184, 0.6) !important; }
input:focus, select:focus, textarea:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}

/* === Modal === */
[class*="fixed"][class*="inset-0"] {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    background: rgba(2, 6, 23, 0.75) !important;
}

/* === 实时时钟 === */
.tech-clock {
    display: flex !important;
    align-items: center !important; gap: 8px !important;
    margin-right: 12px !important; padding: 6px 14px !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
    color: #00e5ff !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.tech-clock::before {
    content: "" !important; width: 8px !important; height: 8px !important;
    background: #00ff88 !important; border-radius: 50% !important;
    box-shadow: 0 0 8px #00ff88 !important;
    animation: livePulse 2s infinite !important;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* === 移动端底部 nav === */
nav.fixed.bottom-0 {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   Xp dashboard injected utility classes
   ============================================ */

/* Gradient stops */
.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-950{--tw-gradient-from:#020617 var(--tw-gradient-from-position);--tw-gradient-to:rgb(2 6 23 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-800{--tw-gradient-from:#1e293b var(--tw-gradient-from-position);--tw-gradient-to:rgb(30 41 59 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-slate-950{--tw-gradient-to:#020617 var(--tw-gradient-to-position)}
.to-slate-900{--tw-gradient-to:#0f172a var(--tw-gradient-to-position)}
.to-slate-800{--tw-gradient-to:#1e293b var(--tw-gradient-to-position)}
.from-cyan-400{--tw-gradient-from:#22d3ee var(--tw-gradient-from-position);--tw-gradient-to:rgb(34 211 238 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-cyan-600{--tw-gradient-to:#0891b2 var(--tw-gradient-to-position)}
.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}
.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}
.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}
.from-yellow-400{--tw-gradient-from:#facc15 var(--tw-gradient-from-position);--tw-gradient-to:rgb(250 204 21 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-yellow-600{--tw-gradient-to:#ca8a04 var(--tw-gradient-to-position)}
.from-pink-400{--tw-gradient-from:#f472b6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(244 114 182 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}
.from-emerald-400{--tw-gradient-from:#34d399 var(--tw-gradient-from-position);--tw-gradient-to:rgb(52 211 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-emerald-600{--tw-gradient-to:#059669 var(--tw-gradient-to-position)}
.from-orange-400{--tw-gradient-from:#fb923c var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 146 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-orange-600{--tw-gradient-to:#ea580c var(--tw-gradient-to-position)}
.from-red-400{--tw-gradient-from:#f87171 var(--tw-gradient-from-position);--tw-gradient-to:rgb(248 113 113 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}
.from-amber-400{--tw-gradient-from:#fbbf24 var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 191 36 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-amber-600{--tw-gradient-to:#d97706 var(--tw-gradient-to-position)}
.from-cyan-500\/20{--tw-gradient-from:rgb(6 182 212 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-purple-500\/15{--tw-gradient-from:rgb(168 85 247 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-yellow-500\/15{--tw-gradient-from:rgb(250 204 21 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(250 204 21 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-pink-500\/15{--tw-gradient-from:rgb(244 114 182 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(244 114 182 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-500\/15{--tw-gradient-from:rgb(16 185 129 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orange-500\/15{--tw-gradient-from:rgb(251 146 60 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 146 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-500\/15{--tw-gradient-from:rgb(100 116 139 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(100 116 139 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

/* Solid background colors */
.bg-slate-800{background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}
.bg-slate-900{background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}
.bg-slate-700{background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}
.bg-slate-300{background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}
.bg-cyan-300{background-color:rgb(103 232 249 / var(--tw-bg-opacity, 1))}
.bg-cyan-400{background-color:rgb(34 211 249 / var(--tw-bg-opacity, 1))}
.bg-cyan-500{background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1))}
.bg-emerald-400{background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}
.bg-emerald-500{background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}
.bg-red-400{background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1))}
.bg-red-500{background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}
.bg-amber-400{background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}
.bg-amber-500{background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}
.bg-blue-500{background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}

/* Translucent background colors */
.bg-slate-800\/30{background-color:rgb(30 41 59 / 0.3)}
.bg-slate-800\/50{background-color:rgb(30 41 59 / 0.5)}
.bg-slate-800\/60{background-color:rgb(30 41 59 / 0.6)}
.bg-slate-800\/80{background-color:rgb(30 41 59 / 0.8)}
.bg-slate-900\/50{background-color:rgb(15 23 42 / 0.5)}
.bg-slate-900\/60{background-color:rgb(15 23 42 / 0.6)}
.bg-slate-900\/80{background-color:rgb(15 23 42 / 0.8)}
.bg-slate-900\/95{background-color:rgb(15 23 42 / 0.95)}
.bg-cyan-500\/20{background-color:rgb(6 182 212 / 0.2)}
.bg-cyan-500\/30{background-color:rgb(6 182 212 / 0.3)}
.bg-cyan-500\/10{background-color:rgb(6 182 212 / 0.1)}
.bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2)}
.bg-emerald-500\/20{background-color:rgb(16 185 129 / 0.2)}
.bg-red-500\/20{background-color:rgb(239 68 68 / 0.2)}
.bg-amber-500\/20{background-color:rgb(245 158 11 / 0.2)}
.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}
.bg-slate-500\/20{background-color:rgb(100 116 139 / 0.2)}

/* Border colors */
.border-slate-700{border-color:rgb(51 65 85)}
.border-slate-500{border-color:rgb(100 116 139)}
.border-slate-400{border-color:rgb(148 163 184)}
.border-cyan-400{border-color:rgb(34 211 238)}
.border-purple-400{border-color:rgb(192 132 252)}
.border-yellow-400{border-color:rgb(250 204 21)}
.border-pink-400{border-color:rgb(244 114 182)}
.border-emerald-400{border-color:rgb(52 211 153)}
.border-orange-400{border-color:rgb(251 146 60)}
.border-cyan-500\/30{border-color:rgb(6 182 212 / 0.3)}
.border-slate-700\/50{border-color:rgb(51 65 85 / 0.5)}
.border-emerald-500\/20{border-color:rgb(16 185 129 / 0.2)}
.border-red-500\/20{border-color:rgb(239 68 68 / 0.2)}
.border-slate-500\/20{border-color:rgb(100 116 139 / 0.2)}
.border-emerald-500\/40{border-color:rgb(16 185 129 / 0.4)}
.border-blue-500\/40{border-color:rgb(59 130 246 / 0.4)}
.border-amber-500\/40{border-color:rgb(245 158 11 / 0.4)}
.border-red-500\/40{border-color:rgb(239 68 68 / 0.4)}
.border-slate-500\/40{border-color:rgb(100 116 139 / 0.4)}

/* Text colors */
.text-cyan-300{color:rgb(103 232 249)}
.text-cyan-400{color:rgb(34 211 249)}
.text-purple-300{color:rgb(192 132 252)}
.text-yellow-300{color:rgb(250 204 21)}
.text-pink-300{color:rgb(244 114 182)}
.text-emerald-300{color:rgb(52 211 153)}
.text-emerald-400{color:rgb(52 211 153)}
.text-orange-300{color:rgb(251 146 60)}
.text-slate-300{color:rgb(203 213 225)}
.text-slate-400{color:rgb(148 163 184)}
.text-slate-100{color:rgb(241 245 249)}
.text-slate-200{color:rgb(226 232 240)}
.text-red-400{color:rgb(248 113 113)}
.text-amber-400{color:rgb(251 191 36)}

/* Glow shadows */
.shadow-cyan-500\/10{box-shadow:0 0 25px rgb(6 182 212 / 0.1)}
.shadow-cyan-500\/30{box-shadow:0 0 25px rgb(6 182 212 / 0.3)}
.shadow-cyan-500\/40{box-shadow:0 0 20px rgb(6 182 212 / 0.4)}
.shadow-purple-500\/30{box-shadow:0 0 25px rgb(168 85 247 / 0.3)}
.shadow-yellow-500\/30{box-shadow:0 0 25px rgb(250 204 21 / 0.3)}
.shadow-pink-500\/30{box-shadow:0 0 25px rgb(244 114 182 / 0.3)}
.shadow-emerald-500\/30{box-shadow:0 0 25px rgb(16 185 129 / 0.3)}
.shadow-orange-500\/30{box-shadow:0 0 25px rgb(251 146 60 / 0.3)}
.shadow-slate-500\/20{box-shadow:0 0 20px rgb(100 116 139 / 0.2)}
.shadow-lg{box-shadow:0 10px 25px -5px rgb(0 0 0 / 0.4),0 8px 10px -6px rgb(0 0 0 / 0.3)}

/* Backdrop blur */
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Animations */
.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}
.animate-spin{animation:spin 1s linear infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Gradient bg utilities */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}

/* Opacity */
.opacity-10{opacity:0.1}
.opacity-30{opacity:0.3}

/* Hover variants for Xp */
.hover\:bg-cyan-500\/10:hover{background-color:rgb(6 182 212 / 0.1)}
.hover\:bg-slate-700:hover{background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}
.hover\:scale-\[1\.02\]:hover{transform:scale(1.02)}

/* Transitions */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.6,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(0.4,0,0.6,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}


/* ============================================
   datetime-local / date input 修复 (深色背景下文字可见)
   Author: AI, 2026-07-21
   ============================================ */

input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  border-radius: 6px !important;
  padding: 7px 36px 7px 10px !important;  /* 右侧留出空间给图标 */
  font-size: 14px !important;
  color-scheme: dark;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2) contrast(1.2)
          drop-shadow(0 0 3px rgba(0, 212, 255, 0.8))
          drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));
  cursor: pointer;
  opacity: 1;
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: transparent;
}

input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}

input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-text {
  color: rgba(0, 229, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 229, 255, 0.5) !important;
  padding: 0 2px;
}

input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
  outline: none !important;
}

.dt-input {
  background-color: rgba(15, 23, 42, 0.95) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  border-radius: 6px !important;
  padding: 7px 36px 7px 10px !important;  /* 右侧留出空间给图标 */
  font-size: 14px !important;
  color-scheme: dark;
}
.dt-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2) contrast(1.2)
          drop-shadow(0 0 3px rgba(0, 212, 255, 0.8))
          drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));
  cursor: pointer;
  opacity: 1;
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: transparent;
}
.dt-input::-webkit-datetime-edit,
.dt-input::-webkit-datetime-edit-fields-wrapper,
.dt-input::-webkit-datetime-edit-month-field,
.dt-input::-webkit-datetime-edit-day-field,
.dt-input::-webkit-datetime-edit-year-field,
.dt-input::-webkit-datetime-edit-hour-field,
.dt-input::-webkit-datetime-edit-minute-field {
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}
.dt-input::-webkit-datetime-edit-text {
  color: rgba(0, 229, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 229, 255, 0.5) !important;
  padding: 0 2px;
}
.dt-input:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
  outline: none !important;
}


/* ============================================
   label.text-gray-700 / text-gray-600 强制亮色 (2026-07-21)
   ============================================ */

label.text-gray-700,
label.text-gray-600,
.text-gray-700,
.text-gray-600 {
  color: #cbd5e1 !important;  /* slate-300, 浅亮灰 */
}