/* TimeNowWorld — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Orbitron:wght@700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg1: #07091f;
  --bg2: #0d1235;
  --glass: rgba(255,255,255,0.06);
  --glass2: rgba(255,255,255,0.11);
  --border: rgba(255,255,255,0.12);
  --border2: rgba(255,255,255,0.2);
  --accent1: #00d4ff;
  --accent2: #7c3aed;
  --accent3: #f59e0b;
  --pink: #ec4899;
  --success: #10b981;
  --text: #ffffff;
  --text2: rgba(255,255,255,0.7);
  --text3: rgba(255,255,255,0.42);
  --grad1: linear-gradient(135deg,#00d4ff,#7c3aed);
  --grad2: linear-gradient(135deg,#f59e0b,#ec4899);
  --grad3: linear-gradient(135deg,#10b981,#00d4ff);
  --font: 'Nunito',sans-serif;
  --mono: 'Orbitron',monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg1);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(0,212,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(245,158,11,.06) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* NAV */
nav {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,9,31,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
}
.nav-logo {
  font-family:var(--mono);
  font-size:18px;
  font-weight:900;
  background:var(--grad1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-decoration:none;
  letter-spacing:1px;
}
.nav-links { display:flex; gap:4px; flex-wrap:wrap; }
.nav-links a {
  color:var(--text3);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:50px;
  transition:all .2s;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--text);
  background:var(--glass2);
}
.nav-links a.active { color:var(--accent1); }

/* LAYOUT */
.page-wrap {
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 60px;
}

/* HERO */
.hero {
  text-align:center;
  padding:48px 0 32px;
}
.hero h1 {
  font-family:var(--mono);
  font-size:clamp(28px,5vw,52px);
  font-weight:900;
  background:var(--grad1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:12px;
  letter-spacing:2px;
}
.hero p {
  font-size:clamp(14px,2vw,18px);
  color:var(--text2);
  max-width:600px;
  margin:0 auto;
  line-height:1.6;
}

/* GLASS CARD */
.card {
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  margin-bottom:20px;
}
.card-title {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--text3);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.card-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* AD SLOT */
.ad-slot {
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.1);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text3);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:20px;
}
.ad-slot-banner { height:90px; }
.ad-slot-rect { height:250px; }

/* FORMS */
select, input[type=text], input[type=datetime-local], input[type=number] {
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  padding:10px 14px;
  width:100%;
  outline:none;
  transition:border-color .2s;
  color-scheme:dark;
}
select:focus, input:focus { border-color:var(--accent1); }
select option { background:#12163a; }
label { font-size:12px; color:var(--text3); font-weight:800; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:6px; }
.form-group { display:flex; flex-direction:column; margin-bottom:16px; }

.btn {
  padding:13px 24px;
  border:none;
  border-radius:14px;
  font-family:var(--font);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:all .25s;
  letter-spacing:.3px;
}
.btn-primary { background:var(--grad1); color:#fff; }
.btn-primary:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,212,255,.28); }
.btn-secondary {
  background:var(--glass2);
  border:1px solid var(--border2);
  color:var(--text2);
}
.btn-secondary:hover { color:var(--text); background:rgba(255,255,255,.18); }
.btn-full { width:100%; }

/* FOOTER */
footer {
  position:relative;
  z-index:1;
  border-top:1px solid var(--border);
  padding:32px 24px;
  text-align:center;
}
.footer-links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.footer-links a { color:var(--text3); text-decoration:none; font-size:13px; font-weight:700; transition:color .2s; }
.footer-links a:hover { color:var(--accent1); }
.footer-copy { font-size:12px; color:var(--text3); }

/* BADGE */
.badge { display:inline-block; padding:3px 10px; border-radius:50px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.badge-live { background:rgba(16,185,129,.18); color:var(--success); border:1px solid rgba(16,185,129,.35); }
.pulse { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* RESULT BOX */
.result-box {
  background:rgba(0,212,255,.07);
  border:1px solid rgba(0,212,255,.25);
  border-radius:18px;
  padding:24px;
  text-align:center;
  margin-top:20px;
  display:none;
}
.result-box.show { display:block; }
.result-time { font-family:var(--mono); font-size:clamp(24px,4vw,40px); font-weight:700; color:var(--accent1); margin:8px 0; }
.result-label { font-size:12px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.result-date { font-size:15px; color:var(--text2); margin-bottom:14px; }

/* COPY BTN */
.copy-btn {
  background:var(--glass2);
  border:1px solid var(--border2);
  border-radius:50px;
  color:var(--text2);
  padding:8px 18px;
  font-family:var(--font);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:all .2s;
  margin:4px;
}
.copy-btn:hover { color:#fff; background:rgba(255,255,255,.18); }
.copy-btn.copied { background:rgba(16,185,129,.2); border-color:var(--success); color:var(--success); }

/* TOAST */
.toast {
  position:fixed;
  bottom:24px;
  right:24px;
  background:rgba(16,185,129,.92);
  color:#fff;
  padding:12px 22px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  transform:translateY(80px);
  transition:transform .3s;
  z-index:999;
  pointer-events:none;
}
.toast.show { transform:translateY(0); }

/* GRID HELPERS */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
@media(max-width:700px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
@media(max-width:500px) { nav { padding:0 12px; } .nav-links a { padding:5px 10px; font-size:12px; } }