#tool-wrapper { max-width: 600px; margin: 80px auto 40px; padding: 30px; background: #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.dark-mode #tool-wrapper { background: #2c3e50; }
#tool-wrapper h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; }
.dark-mode #tool-wrapper h1 { color: #ecf0f1; }
.convert-section { margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px; }
.dark-mode .convert-section { background: #1a252f; }
.convert-section h3 { color: #2c3e50; margin-bottom: 15px; }
.dark-mode .convert-section h3 { color: #ecf0f1; }
.input-group { display: flex; gap: 10px; flex-wrap: wrap; }
.input-group input, .input-group select { flex: 1; min-width: 150px; padding: 10px; font-size: 14px; border: 2px solid #3498db; border-radius: 5px; background: #fff; }
.dark-mode .input-group input, .dark-mode .input-group select { background: #2c3e50; color: #ecf0f1; }
.input-group button { padding: 10px 20px; font-size: 14px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }
.input-group button:hover { background: #2980b9; }
.result { margin-top: 15px; padding: 15px; background: #fff; border-radius: 5px; font-family: monospace; color: #2c3e50; }
.dark-mode .result { background: #34495e; color: #ecf0f1; }
.current-time { display: flex; flex-direction: column; gap: 10px; }
.time-display { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #fff; border-radius: 5px; }
.dark-mode .time-display { background: #34495e; }
.time-display span { font-family: monospace; font-size: 14px; color: #2c3e50; }
.dark-mode .time-display span { color: #ecf0f1; }
.time-display button { padding: 5px 10px; font-size: 12px; background: #2ecc71; color: white; border: none; border-radius: 3px; cursor: pointer; }