﻿:root {
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#EEF2F8; --border:#D9E1F0;
  --text:#111827; --muted:#64748B; --ink:#0B1020;
  --blue:#2F6BFF; --blue-deep:#1746D1; --blue-soft:#E8EFFF;
  --success:#0F8F62; --danger:#D14343; --radius:10px;
  --shadow:0 1px 2px rgba(11,16,32,.04),0 8px 24px rgba(11,16,32,.06);
}
*{box-sizing:border-box}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a{color:var(--blue);text-decoration:none}
header{height:68px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 20px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.5px;white-space:nowrap}
.brand span{color:var(--blue)}
.logo{width:30px;height:30px;flex:none}
.searchbar{display:flex;gap:8px;flex:1;max-width:780px}
.searchbar input,.searchbar select{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:14px;background:var(--surface);color:var(--text);outline:none}
.searchbar input:focus,.searchbar select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.searchbar #name{flex:1.2;min-width:140px}
.searchbar select{min-width:150px}
.searchbar #city{flex:1;min-width:110px}
.searchbar button{height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.searchbar button:hover{background:var(--blue-deep)}
nav{display:flex;align-items:center;gap:14px;margin-left:auto;white-space:nowrap}
nav a{font-size:13px;font-weight:600;color:var(--muted)}
nav a.btn{background:var(--blue);color:#fff;padding:9px 14px;border-radius:8px}
main{flex:1;display:grid;grid-template-columns:380px 1fr;overflow:hidden}
aside{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}
.list-head{padding:14px 18px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.result{padding:14px 18px;border-bottom:1px solid var(--surface-2);cursor:pointer}
.result:hover{background:#F7FAFF}
.result.active{background:var(--blue-soft);border-left:3px solid var(--blue);padding-left:15px}
.result h3{font-size:14px;margin:0 0 4px;color:var(--ink)}
.result .meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.result .sector{font-size:12px;color:var(--muted);margin-top:4px}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--muted)}
.tag.active{background:#E6F6EF;color:var(--success)}
.detail{overflow-y:auto;padding:32px 36px}
.placeholder{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:14px;padding:40px}
.company-name{font-size:28px;letter-spacing:-.6px;margin:0 0 8px;color:var(--ink)}
.company-sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:26px}
.fact{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:11px 13px}
.fact label{display:block;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fact .val{font-size:14px;font-weight:600;word-break:break-word}
.copy{background:none;border:0;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer;padding:0;margin-left:6px}
.premium{position:relative;border-top:1px solid var(--border);padding-top:22px}
.premium h4{margin:0 0 10px;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.lock{background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.blur{filter:blur(5px);opacity:.55;user-select:none;pointer-events:none;font-size:14px;line-height:1.9}
.paywall{position:absolute;inset:36px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.94) 32%);padding:18px}
.paywall p{font-size:13px;color:var(--muted);max-width:320px;margin:0 0 12px}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;font-size:13px}
.btn:hover{background:var(--blue-deep)}
.source{margin-top:24px;font-size:11px;color:var(--muted);line-height:1.7}
.empty{padding:34px 18px;color:var(--muted);font-size:13px;text-align:center}
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;overflow:auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:30px;width:100%;max-width:480px}
.card h1{margin:0 0 6px;font-size:26px;letter-spacing:-.5px;color:var(--ink)}
.card p.sub{margin:0 0 22px;color:var(--muted);font-size:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input{width:100%;height:42px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:14px;outline:none}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.countries{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.country{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;background:var(--surface);display:block}
.country input{display:none}
.country:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 2px var(--blue-soft)}
.country .flag{font-size:20px}
.country .nm{font-weight:700;font-size:14px;margin-top:4px}
.country .reg{font-size:11px;color:var(--muted)}
.country .cnt{font-size:11px;color:var(--blue);font-weight:700;margin-top:4px}
.submit{width:100%;height:44px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;font-size:14px;cursor:pointer}
.submit:hover{background:var(--blue-deep)}
.msg{font-size:13px;margin-top:12px;padding:10px;border-radius:8px;display:none}
.msg.err{display:block;background:#FDECEC;color:var(--danger)}
.msg.ok{display:block;background:#E6F6EF;color:var(--success)}
.auth-links{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}
.country-pill{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--blue-deep);font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;white-space:nowrap}
.vault{margin-top:22px;border:1px dashed var(--border);border-radius:10px;padding:18px;background:var(--surface-2)}
.vault h4{margin:0 0 6px;font-size:14px}
.vault p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:900px){
  header{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .searchbar{order:3;width:100%;max-width:none;flex-wrap:wrap}
  .searchbar #name{flex:1 1 100%}
  .searchbar select,.searchbar #city{flex:1 1 45%}
  nav{margin-left:0}
  main{grid-template-columns:1fr}
  aside{max-height:42vh;border-right:0;border-bottom:1px solid var(--border)}
  .detail{padding:20px}
  .countries{grid-template-columns:1fr}
}

  :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  
  /* Toast System */
  .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
  .toast { background: var(--ink); color: white; padding: 14px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease; }
  .toast.success { border-left: 4px solid var(--success); }
  .toast.error { border-left: 4px solid var(--danger); }
  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  
  /* Skeleton Loading */
  .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  
  /* Empty State */
  .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
  .empty-state h3 { color: var(--ink); font-size: 18px; margin-bottom: 8px; }
  .empty-state p { font-size: 14px; max-width: 300px; margin: 0 auto; }
