/* ========== Timestamp Converter ========== */
.tool-container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.tool-header { text-align: center; margin-bottom: 20px; }
.tool-header h1 { font-size: 28px; font-weight: 800; color: var(--color-heading); margin-bottom: 6px; }
.tool-header .tool-desc { font-size: 14px; color: var(--color-muted); max-width: 600px; margin: 0 auto; line-height: 1.5; }

/* Live Timestamp Bar */
.live-ts-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; margin-bottom: 16px; color: #fff; flex-wrap: wrap; }
.live-ts-item { display: flex; align-items: center; gap: 8px; }
.live-ts-label { font-size: 12px; opacity: 0.85; white-space: nowrap; }
.live-ts-value { font-size: 18px; font-weight: 700; font-family: 'Consolas', monospace; cursor: pointer; transition: transform 0.15s; }
.live-ts-value:hover { transform: scale(1.05); }
.live-ts-copy-hint { font-size: 10px; opacity: 0.6; }
.live-ts-current { font-size: 13px; opacity: 0.85; margin-left: auto; white-space: nowrap; }

/* Main Input Area */
.main-input-area { background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%); border: 2px solid #bfdbfe; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.main-input-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.main-input-wrap { flex: 1; min-width: 120px; }
.main-input { width: 100%; padding: 10px 14px; border: 2px solid #bfdbfe; border-radius: 8px; font-size: 16px; font-weight: 700; font-family: 'Consolas', monospace; outline: none; background: #fff; color: var(--color-text); box-sizing: border-box; }
.main-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.main-unit-wrap { flex: 0 0 130px; }
.main-unit-select { width: 100%; height: 100%; padding: 10px 12px; border: 2px solid #bfdbfe; border-radius: 8px; font-size: 14px; font-weight: 600; background: #fff; color: var(--color-text); cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.main-zone-wrap { flex: 0 0 150px; }
.main-zone-select { width: 100%; height: 100%; padding: 10px 12px; border: 2px solid #bfdbfe; border-radius: 8px; font-size: 14px; font-weight: 600; background: #fff; color: var(--color-text); cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.main-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; background: var(--color-primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.main-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.main-hint { margin-top: 8px; font-size: 12px; color: #64748b; }

/* Quick Buttons */
.quick-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.quick-btn { padding: 6px 14px; font-size: 12px; font-weight: 600; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.quick-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Conversion Tabs */
.conv-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--color-border); }
.conv-tab { padding: 10px 24px; font-size: 14px; font-weight: 600; background: none; color: var(--color-muted); border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all 0.15s; }
.conv-tab:hover { color: var(--color-text); }
.conv-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.conv-panel { display: none; padding: 16px 0; }
.conv-panel.active { display: block; }

/* Conversion Forms */
.conv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.conv-form .input-group { margin-bottom: 0; }
.conv-form .input-group-full { grid-column: 1 / -1; }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 4px; }
.input-group input, .input-group select { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; background: #fff; outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.input-group input:focus, .input-group select:focus { border-color: var(--color-primary); }

/* Output Formats */
.output-formats { margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2f0f0; }
.output-format-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.output-format-label { color: var(--color-muted); }
.output-format-value { font-weight: 600; color: var(--color-heading); font-family: 'Consolas', monospace; }
.output-format-copy { padding: 2px 8px; font-size: 11px; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.output-format-copy:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Calculator Section */
.calc-section { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.calc-panel { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; }
.calc-panel h3 { font-size: 14px; font-weight: 600; color: var(--color-heading); margin-bottom: 10px; }
.calc-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.calc-row input, .calc-row select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; background: #fff; }
.calc-row input { flex: 1; min-width: 60px; }
.calc-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; background: #10b981; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.calc-btn:hover { background: #059669; }
.calc-result { padding: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; margin-top: 8px; font-size: 13px; color: #16a34a; font-weight: 600; }

/* Collapsible Sections */
.collapsible-section { margin-bottom: 12px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.collapsible-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--color-bg-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-heading); user-select: none; transition: background 0.15s; }
.collapsible-header:hover { background: #f8fafc; }
.collapsible-arrow { font-size: 12px; transition: transform 0.2s; }
.collapsible-arrow.open { transform: rotate(180deg); }
.collapsible-body { display: none; padding: 16px; }
.collapsible-body.open { display: block; }

/* Batch */
.batch-input { width: 100%; height: 100px; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; font-family: 'Consolas', monospace; resize: vertical; background: #1e1e2e; color: #cdd6f4; box-sizing: border-box; margin-bottom: 8px; }
.batch-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; background: #8b5cf6; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.batch-btn:hover { background: #7c3aed; }
.batch-results { margin-top: 12px; max-height: 200px; overflow-y: auto; }
.batch-result-item { padding: 6px 10px; margin-bottom: 3px; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 12px; display: flex; justify-content: space-between; }
.batch-result-ts { font-family: 'Consolas', monospace; color: #6b7280; }
.batch-result-date { font-weight: 600; color: var(--color-heading); }

/* World Time */
.world-time-table { width: 100%; border-collapse: collapse; }
.world-time-table th, .world-time-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 12px; }
.world-time-table th { background: var(--color-bg-card); font-weight: 600; }
.world-time-table .time-value { font-family: 'Consolas', monospace; font-weight: 600; }
.world-time-table .offset-value { color: var(--color-muted); }

/* Code Examples */
.code-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.code-tab { padding: 6px 12px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: #6b7280; border: none; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.code-tab:hover { background: #e5e7eb; }
.code-tab.active { background: var(--color-primary); color: #fff; }
.code-block { padding: 12px; background: #1e1e2e; border-radius: 6px; font-family: 'Consolas', monospace; font-size: 12px; color: #cdd6f4; overflow-x: auto; white-space: pre; }

/* Info */
.tool-info { font-size: 14px; color: var(--color-text); line-height: 1.7; }
.tool-info h3 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }
.tool-info ul { margin: 0 0 12px 20px; }
.tool-info li { margin-bottom: 4px; }

/* Status */
.error-box { padding: 12px 16px; margin: 12px 0; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #dc2626; font-size: 13px; }
.success-box { padding: 10px 14px; margin: 12px 0; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; color: #16a34a; font-weight: 600; font-size: 13px; }

/* Buttons */
.tool-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.tool-btn-primary { background: var(--color-primary); color: #fff; }
.tool-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.tool-btn-outline { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.tool-btn-outline:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }
.tool-btn-secondary { background: #10b981; color: #fff; }
.tool-btn-secondary:hover { background: #059669; }

/* Responsive */
@media (max-width: 900px) {
  .calc-section { grid-template-columns: 1fr; }
  .conv-form { grid-template-columns: 1fr; }
  .live-ts-bar { flex-direction: column; align-items: flex-start; }
  .live-ts-current { margin-left: 0; }
  .main-input-row { flex-direction: column; }
  .main-unit-wrap, .main-zone-wrap { flex: none; }
}
@media (max-width: 600px) {
  .tool-container { padding: 12px; }
  .tool-header h1 { font-size: 22px; }
  .live-ts-value { font-size: 16px; }
}