:root{
    --navy-900:#0b2a52;
    --navy-800:#0f3a6e;
    --navy-700:#144e8f;
    --blue-accent:#1f6fd6;
    --ink:#10213b;
    --muted:#5c6b84;
    --line:#e4e9f1;
    --bg:#f4f7fb;
    --card:#ffffff;
    --wa:#1fae5e;
    --wa-dark:#158a49;
    --radius:16px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
    background:var(--bg);
    color:var(--ink);
  }
  .wrap{max-width:1180px;margin:0 auto;padding:20px 20px 60px;}

  /* HEADER */
  .hero{
    background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
    border-radius:var(--radius);
    padding:28px 32px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    right:-60px; top:-60px;
    width:260px;height:260px;
    background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  }
  .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;position:relative;z-index:1;flex-wrap:wrap;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.25);
    padding:5px 12px;border-radius:999px;
    font-size:11px;letter-spacing:.08em;font-weight:700;
    text-transform:uppercase;
  }
  .hero h1{margin:14px 0 6px;font-size:30px;font-weight:800;letter-spacing:-0.01em;}
  .hero p{margin:0;color:rgba(255,255,255,0.78);font-size:14.5px;max-width:540px;line-height:1.5;}
  .hero-actions{display:flex;align-items:center;gap:10px;}
  .badge-live{
    display:flex;align-items:center;gap:6px;
    background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);
    padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  }
  .badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,0.25);}
  .icon-btn{
    width:44px;height:44px;border-radius:12px;
    background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);
    display:flex;align-items:center;justify-content:center;
  }
  .icon-btn svg{width:20px;height:20px;stroke:#fff;}

  /* STAT CARDS */
  .stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    margin-top:18px;
  }
  .stat-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 18px;
    display:flex;gap:12px;align-items:flex-start;
    box-shadow:0 1px 2px rgba(16,33,59,0.03);
  }
  .stat-icon{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:#eaf1fc;color:var(--blue-accent);
  }
  .stat-icon svg{width:19px;height:19px;}
  .stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:3px;}
  .stat-value{font-size:19px;font-weight:800;color:var(--ink);line-height:1.2;}
  .stat-sub{font-size:12px;color:var(--muted);margin-top:2px;}

  /* SEARCH */
  .search-row{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
  .search-box{
    flex:1;min-width:240px;position:relative;
  }
  .search-box input{
    width:100%;padding:12px 16px 12px 42px;
    border:1px solid var(--line);border-radius:12px;
    font-size:14px;background:var(--card);
    outline:none;transition:border-color .15s, box-shadow .15s;
  }
  .search-box input:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px rgba(31,111,214,0.12);}
  .search-box svg{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:17px;height:17px;stroke:var(--muted);
  }
  .result-count{font-size:13px;color:var(--muted);white-space:nowrap;}

  .filter-box select{
    padding:12px 36px 12px 16px;
    border:1px solid var(--line);border-radius:12px;
    font-size:14px;background:var(--card);
    outline:none;cursor:pointer;color:var(--ink);
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b84' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
    transition:border-color .15s, box-shadow .15s;
    min-width:190px;
  }
  .filter-box select:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px rgba(31,111,214,0.12);}

  mark{
    background:#fde68a;
    color:inherit;
    font-weight:800;
    padding:0 1px;
    border-radius:2px;
  }

  /* TABLE CARD */
  .table-card{
    margin-top:18px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;
  }
  .table-head-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 22px 14px;flex-wrap:wrap;gap:10px;
  }
  .table-title{font-size:16px;font-weight:800;margin:0;}
  .table-sub{font-size:12.5px;color:var(--muted);margin:3px 0 0;}
  .pill-note{
    display:inline-flex;align-items:center;gap:6px;
    background:#eaf1fc;color:var(--blue-accent);
    font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;
  }

  table{width:100%;border-collapse:collapse;}
  thead th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:700;
    padding:10px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:#fafbfd;
  }
  th.col-no{width:52px;}
  th.col-wa{width:190px;}
  tbody td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px;}
  tbody tr:hover{background:#f7faff;}
  .no-cell{color:var(--muted);font-weight:700;}
  .po-name{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .po-icon{
    width:26px;height:26px;border-radius:7px;background:#eaf1fc;color:var(--blue-accent);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .po-icon svg{width:14px;height:14px;}
  .loket-tag{
    font-size:10.5px;color:var(--blue-accent);background:#eaf1fc;
    border-radius:6px;padding:1px 6px;font-weight:700;margin-left:2px;white-space:nowrap;
  }
  .addr-cell{color:var(--muted);line-height:1.45;max-width:340px;}
  .pic-cell{display:flex;align-items:center;gap:7px;font-weight:600;}
  .pic-avatar{
    width:24px;height:24px;border-radius:50%;background:#eef2f8;color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;
  }
  .wa-btn{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--wa);color:#fff;text-decoration:none;
    padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
    white-space:nowrap;transition:background .15s, transform .1s;
  }
  .wa-btn:hover{background:var(--wa-dark);transform:translateY(-1px);}
  .wa-btn svg{width:14px;height:14px;fill:#fff;}
  .no-phone{color:var(--muted);font-size:12.5px;font-style:italic;}

  .empty-state{padding:60px 20px;text-align:center;color:var(--muted);}
  .empty-state svg{width:40px;height:40px;stroke:var(--line);margin-bottom:10px;}

  footer{margin-top:22px;text-align:center;font-size:12px;color:var(--muted);}

  @media (max-width:760px){
    .stats{grid-template-columns:1fr;}
    thead{display:none;}
    table, tbody, tr, td{display:block;width:100%;}
    tbody tr{padding:14px 16px;border-bottom:8px solid var(--bg);}
    tbody td{border:none;padding:4px 0;}
    .addr-cell{max-width:100%;}
    .no-cell{display:none;}
    .wa-btn{width:100%;justify-content:center;margin-top:6px;}
  }