:root {
      --bg:#f3f6fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --border:#e5e7eb;
      --dark:#0f172a;
      --blue:#2563eb;
      --orange:#ea7a1f;
      --green:#22c55e;
      --shadow:0 10px 28px rgba(15,23,42,.10);
    }

    html[data-theme="dark"] {
      --bg:#0f172a;
      --card:#1e293b;
      --text:#f8fafc;
      --muted:#cbd5e1;
      --border:#334155;
      --dark:#020617;
      --shadow:0 10px 28px rgba(0,0,0,.35);
    }

    * { box-sizing:border-box; }

    body {
      margin:0;
      padding:0;
      font-family:Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
    }

    .container {
      width:100%;
      max-width:900px;
      margin:auto;
      padding:8px;
    }

    .header {
      position:sticky;
      top:0;
      z-index:50;
      background:var(--card);
      padding:14px 48px 14px 12px;
      border-radius:0 0 22px 22px;
      box-shadow:var(--shadow);
      text-align:center;
      margin-bottom:12px;
    }

    h1 {
      margin:0;
      font-size:clamp(1.05rem,4.4vw,2rem);
      line-height:1.05;
      white-space:nowrap;
    }

    .brand-gradient {
      background:linear-gradient(90deg,#2563eb,#22c55e,#ea7a1f);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      font-weight:900;
    }

    .subtitle {
      margin-top:8px;
      color:var(--orange);
      font-size:clamp(1rem,4vw,1.35rem);
      font-weight:900;
    }
    .person {
      margin-top:8px;
      color:#f97316;
      font-size:clamp(1rem,4vw,1.45rem);
      font-weight:900;
      text-shadow:0 1px 2px rgba(0,0,0,.25);
      }

      html[data-theme="light"] .person {
        color:#1e3a8a;
        text-shadow:none;
      }

    .theme-btn {
      position:absolute;
      right:12px;
      top:12px;
      width:36px;
      height:36px;
      border:1px solid var(--border);
      border-radius:50%;
      background:var(--card);
      color:var(--text);
      cursor:pointer;
    }

    .actions {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:8px;
      margin-bottom:12px;
    }

    .btn {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:40px;
      padding:8px;
      border-radius:13px;
      text-decoration:none;
      font-weight:900;
      color:#fff;
      background:var(--blue);
      font-size:.85rem;
      box-shadow:0 8px 18px rgba(37,99,235,.25);
    }

    .btn-secondary {
      background:#64748b;
    }

    .search-card {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      box-shadow:var(--shadow);
      padding:12px;
      margin-bottom:12px;
    }

    .field {
      position:relative;
      margin-bottom:8px;
    }

    .field:last-child {
      margin-bottom:0;
    }

    .field i {
      position:absolute;
      left:13px;
      top:50%;
      transform:translateY(-50%);
      color:var(--muted);
    }

    input,
    select {
      width:100%;
      padding:12px 12px 12px 40px;
      border:1px solid var(--border);
      border-radius:14px;
      background:var(--card);
      color:var(--text);
      font-size:.95rem;
      font-weight:800;
    }

    input:focus,
    select:focus {
      outline:none;
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(37,99,235,.18);
    }

    .section-title {
      display:flex;
      align-items:center;
      gap:8px;
      margin:14px 4px 10px;
      font-size:1.05rem;
      font-weight:900;
    }

    .section-title i {
      color:var(--orange);
    }

    .grid {
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
    }

    .person-card {
      display:flex;
      align-items:center;
      gap:12px;
      min-height:62px;
      padding:10px;
      border-radius:18px;
      background:var(--card);
      border:1px solid var(--border);
      color:var(--text);
      text-decoration:none;
      box-shadow:var(--shadow);
      transition:.18s;
    }

    .person-card:hover {
      transform:translateY(-2px);
      border-color:var(--blue);
    }

    .avatar {
      width:42px;
      height:42px;
      min-width:42px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--dark);
      color:#fff;
      font-weight:900;
      font-size:1rem;
    }

    .person-name {
      flex:1;
      font-weight:900;
      overflow-wrap:anywhere;
    }

    .arrow {
      color:var(--orange);
    }

    .empty {
      display:none;
      padding:16px;
      text-align:center;
      color:var(--muted);
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow);
      font-weight:900;
    }

    .brand-gradient {
      background:linear-gradient(90deg,#93328e,#e8e83f,#ea7a1f);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      font-weight:900;
    }

    @media (min-width:650px) {
      body { padding:10px; }

      .header {
        border-radius:22px;
      }

      .btn {
        min-height:44px;
        font-size:.95rem;
      }

      .grid {
        grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:12px;
      }

      .person-card {
        min-height:70px;
        padding:14px;
      }


    }