:root {
  --hologram-blue: #00d2ff;
  --hologram-dark: #0a0e17;
  --hologram-card: #161c2d;
  --text-light: #e0e6ed;
  --accent-green: #00f2c3;
  --accent-red: #ff3e3e;
  --glass-bg: rgba(22, 28, 45, 0.74);
  --border-soft: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--hologram-dark);
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
  background-image: radial-gradient(circle at 50% 0%, #1a2333 0%, #0a0e17 70%);
  min-height: 100vh;
}
a { color: inherit; }
.header-shell { border-bottom: 1px solid rgba(0,210,255,0.10); }
.brand-chip {
  position: absolute; left: 22px; top: 22px; display: inline-flex; gap: 8px; align-items: center;
  text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(22,28,45,0.86);
  border: 1px solid rgba(0,210,255,0.18); color: #dfe9f5; font-size: .82rem; z-index: 5;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.brand-chip strong { color: var(--hologram-blue); }
header { padding: 72px 20px 44px; text-align: center; position: relative; }
header h1 {
  font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 10px 0;
  background: linear-gradient(to right, #fff, var(--hologram-blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
header p { margin: 0 auto; max-width: 760px; color: #9fb0c8; }
.container, .detail-wrap, .legal-container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.search-wrapper { margin: -28px auto 32px; max-width: 760px; position: relative; z-index: 10; }
#companySearch {
  width: 100%; padding: 18px 22px; border-radius: 999px; border: 1px solid rgba(0, 210, 255, 0.25);
  background: var(--hologram-card); color: white; font-size: 1rem; outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: all .25s ease;
}
#companySearch:focus {
  border-color: var(--hologram-blue);
  box-shadow: 0 0 0 4px rgba(0, 210, 255, 0.12), 0 10px 30px rgba(0,0,0,.45);
}
.category-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px; }
.tab {
  padding: 10px 18px; background: var(--glass-bg); border: 1px solid rgba(255,255,255,.05); border-radius: 999px;
  cursor: pointer; transition: all .25s ease; font-size: .95rem; font-weight: 600; color: #dce7f3;
}
.tab.active, .tab:hover { background: var(--hologram-blue); color: var(--hologram-dark); transform: translateY(-1px); }
.results-count { color:#88a0c2; text-align:center; margin:-4px 0 22px 0; font-size:.95rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.card {
  background: var(--glass-bg); border-radius: 22px; padding: 22px; border: 1px solid var(--border-soft);
  transition: all .28s ease; position: relative; overflow: hidden; backdrop-filter: blur(10px);
}
.card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--hologram-blue); opacity:0; transition:.28s ease; }
.card:hover { transform: translateY(-5px); border-color: rgba(0, 210, 255, 0.32); }
.card:hover::before { opacity:1; }
.card-top, .detail-hero { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.card h2, .card h3, .detail-hero h1 { margin:0; color:#fff; font-size:1.28rem; line-height:1.25; }
.detail-hero h1 { font-size: clamp(1.9rem,3vw,2.6rem); }
.card-tag {
  flex-shrink:0; padding:8px 10px; border-radius:999px; background:rgba(0,210,255,.10); color:var(--hologram-blue);
  font-size:.78rem; font-weight:700; border:1px solid rgba(0,210,255,.18)
}
.phone-link, .phone-text {
  color: var(--hologram-blue); text-decoration:none; font-size:1.08rem; font-weight:800; display:block; margin-bottom:14px;
}
.shortcut-container, .data-box {
  background: rgba(0,0,0,.28); padding:14px; border-radius:14px; margin-bottom:14px; text-align:center;
}
.shortcut-label, .data-box small { display:block; font-size:.78rem; color:#91a6c7; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.shortcut-code {
  color: var(--accent-green); font-family:'Courier New', monospace; font-size:1.18rem; font-weight:bold; letter-spacing:1px; line-height:1.5;
}
.note { color:#c3cfdf; font-size:.95rem; min-height:48px; margin-bottom:10px; }
.update-info { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; color:#90a4c2; margin-top:10px; flex-wrap:wrap; }
.update-good { color: var(--accent-green); font-weight:700; }
.actions, .back-row { display:grid; grid-template-columns: 1.15fr 1fr 1fr; gap:10px; margin-top:18px; }
.btn {
  appearance:none; border:none; cursor:pointer; border-radius:12px; padding:11px 12px; font-size:.87rem; font-weight:700; text-align:center; text-decoration:none;
}
.btn-primary { background: linear-gradient(135deg, #00d2ff, #00f2c3); color:#081018; }
.btn-alert { background: rgba(255,62,62,.12); color: #ff9a9a; border:1px solid rgba(255,62,62,.18); }
.btn-update { background: rgba(0,210,255,.12); color:#9fe8ff; border:1px solid rgba(0,210,255,.18); }
.btn-ghost { background: rgba(255,255,255,.06); color:#e7eef8; border:1px solid rgba(255,255,255,.08); }
.empty-state { grid-column:1/-1; text-align:center; padding:50px 20px; color:#a1b4cf; background:rgba(0,0,0,.16); border-radius:22px; border:1px dashed rgba(255,255,255,.08); }
.detail-wrap { max-width: 980px; }
.detail-card {
  background: var(--glass-bg); border-radius: 24px; padding: 24px; border: 1px solid var(--border-soft); backdrop-filter: blur(10px);
}
.breadcrumb { display:flex; gap:10px; flex-wrap:wrap; font-size:.9rem; color:#9db1cf; margin-bottom: 18px; }
.breadcrumb a { text-decoration:none; color:#cfe7ff; }
.detail-sub { color:#9fb0c8; margin: 8px 0 0 0; }
.data-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px; }
.data-box strong { display:block; color:#fff; font-size:1rem; line-height:1.55; }
.section-title { font-size:1.06rem; font-weight:800; color:#fff; margin:22px 0 10px; }
.faq { display:grid; gap:12px; margin-top:12px; }
.faq-item { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05); border-radius:16px; padding:14px; }
.faq-item h3 { margin:0 0 6px 0; font-size:1rem; color:#fff; }
.faq-item p { margin:0; color:#c7d3e4; }
.legal-footer {
  background: rgba(5,7,12,.90); padding: 40px 20px; margin-top: 70px; border-top: 1px solid rgba(255,255,255,.05);
}
.legal-links { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:18px; }
.legal-link { color:#8892b0; text-decoration:none; font-size:.85rem; }
.legal-link:hover { color: var(--hologram-blue); text-decoration: underline; }
.disclaimer { max-width: 820px; margin: 0 auto 26px; text-align:center; font-size:.78rem; color:#6d809c; }
.footer-shell { min-height: 90px; }
.fallback-footer { padding: 16px 0 0; text-align:center; color:#7d91b0; font-size:.85rem; }
@media (max-width: 860px){
  .brand-chip { position: static; margin:18px auto 0; display:inline-flex; }
  header { padding-top: 28px; }
  .detail-hero, .card-top { flex-direction: column; }
  .data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .grid { grid-template-columns: 1fr; }
  .actions, .back-row { grid-template-columns: 1fr; }
  .category-tabs { justify-content:flex-start; overflow:auto; white-space:nowrap; padding-bottom:8px; }
}