:root {
  --primary-font: 'Segoe UI', system-ui, sans-serif;
  --text-color: #333;
  --text-color-secondary: #666;
  --bg-color: #fafafa;
  --border-color: #ddd;
  --hover-bg: #e9e9e9;
  --card-bg: white;
  --code-bg: #f8f9fa;
  --code-text-color: #495057;
  --code-bg-hover: #ebebeb;
  --example-bg-hover: #e9f5ff;
  --accent-color: #0066cc;
  --shadow: 0 2px 20px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--primary-font); line-height: 1.6; color: var(--text-color); background: var(--bg-color); }
.container { max-width: 800px; margin: 0 auto; padding: 20px; min-height: 100vh; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.logo { display: flex; align-items: center; padding: 8px 8px 4px; border-radius: 6px;}
.logo:hover { background: var(--hover-bg); }
.logo-img { height: 40px; width: auto; }
nav { display: flex; gap: 20px; }
.nav-link { text-decoration: none; color: var(--text-color-secondary); font-weight: 500; padding: 8px 16px; border-radius: 6px; transition: all 0.2s; }
.nav-link:hover, .nav-link.active { color: var(--text-color); background: var(--hover-bg); }
main { text-align: center; }
.result-card { background: var(--card-bg); border-radius: 12px; padding: 40px; box-shadow: var(--shadow); margin-bottom: 40px; }
.time-display { font-size: 5rem; font-weight: 700; color: var(--text-color); margin-bottom: 10px; }
.date-display { font-size: 1.5rem; color: #666; margin-bottom: 5px; }
.timezone-display { font-size: 1.2rem; color: #888; margin-bottom: 20px; }
.countdown { font-size: 2rem; color: var(--text-color); margin: 20px 0; padding: 20px; background: var(--code-bg); border-radius: 8px; border: 1px solid #e9ecef; }
.download-btn { background: var(--text-color); color: var(--bg-color); border: none; padding: 12px 24px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; }
.download-btn:hover { background: var(--code-text-color); }
.welcome h1 { font-size: 3rem; font-weight: 300; margin-bottom: 20px; }
.welcome p { font-size: 1.3rem; color: #666; margin-bottom: 40px; }
.examples { text-align: left; max-width: 500px; margin: 0 auto; }
.examples h3 { margin-bottom: 15px; color: var(--text-color); }
.example-links { display: flex; flex-direction: column; gap: 10px; }
.example-links a { font-family: 'Monaco', 'Menlo', monospace; color: var(--accent-color); text-decoration: none; padding: 8px 12px; background: var(--accent-bg); border-radius: 6px; border-left: 4px solid var(--accent-color); }
.example-links a:hover { background: var(--example-bg-hover); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin: 8px 0; font-weight: 500; color: var(--text-color); }
.form-control { color: var(--text-color); width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1rem; background: var(--card-bg); }
.form-control:focus { color: var(--text-color); outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(0,102,204,0.1); }
.checkbox-group { display: flex; gap: 20px; margin-top: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; }
.generated-url { background: var(--bg-color); padding: 20px; border-radius: 8px; font-family: monospace; word-break: break-all; margin-top: 20px; color: var(--text-color); }
.generated-url a { color: var(--accent-color); }
@media (max-width: 600px) {
  .container { padding: 15px; }
  header { flex-direction: column; gap: 20px; text-align: center; }
  .time-display { font-size: 3rem; }
  .welcome h1 { font-size: 2.5rem; }
  nav { justify-content: center; }
  .checkbox-group { flex-direction: column; gap: 10px; }
}
@media (prefers-color-scheme: dark) {
  :root { 
    --text-color: #e4e4e4; 
    --bg-color: #121212;
    --border-color: #626262;
    --hover-bg: #3e3e3e; 
    --card-bg: #1a1a1a; 
    --code-bg: #212325; 
    --code-text-color: #a0a6ac;
    --code-bg-hover: #16181a; 
    --example-bg-hover: #0d2a42; 
    --accent-color: #4da3ff; 
    --shadow: 0 2px 20px rgba(0,0,0,0.6); 
  }

  .countdown {
    border: none;
  }
}