/* ── VARIABLES ── */
    :root {
      --bg:         #F0F2F8;
      --surface:    rgba(255,255,255,0.75);
      --surface-2:  rgba(242,242,247,0.80);
      --surface-3:  rgba(229,229,234,0.90);
      --text-1:     #1C1C1E;
      --text-2:     #3A3A3C;
      --text-3:     #8E8E93;
      --accent:     #007AFF;
      --accent-h:   #0062CC;
      --accent-s:   rgba(0,122,255,0.12);
      --danger:     #FF3B30;
      --success:    #34C759;
      --border:     rgba(0,0,0,0.07);
      --border-s:   rgba(0,0,0,0.12);
      --glow:       0 0 0 3px rgba(0,122,255,0.18);
      --sh-sm:      0 2px 8px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
      --sh-md:      0 6px 24px rgba(0,0,0,0.08),0 2px 6px rgba(0,0,0,0.04);
      --sh-lg:      0 16px 48px rgba(0,0,0,0.10),0 4px 12px rgba(0,0,0,0.05);
      --sh-xl:      0 28px 70px rgba(0,0,0,0.12),0 6px 18px rgba(0,0,0,0.06);
      --radius:     22px;
      --chip-a-bg:  rgba(0,122,255,0.12);   --chip-a-fg:#007AFF;
      --chip-b-bg:  rgba(255,149,0,0.12);   --chip-b-fg:#FF9500;
      --chip-c-bg:  rgba(255,45,135,0.12);  --chip-c-fg:#FF2D87;
      --chip-d-bg:  rgba(10,102,194,0.12);    --chip-d-fg:#0A66C2;
    }
    [data-theme="dark"] {
      --bg:         #050508;
      --surface:    rgba(28,28,30,0.80);
      --surface-2:  rgba(44,44,46,0.85);
      --surface-3:  rgba(58,58,60,0.90);
      --text-1:     #FFFFFF;
      --text-2:     rgba(235,235,245,0.85);
      --text-3:     rgba(235,235,245,0.40);
      --border:     rgba(255,255,255,0.07);
      --border-s:   rgba(255,255,255,0.12);
      --accent-s:   rgba(0,122,255,0.20);
      --sh-sm:      0 2px 8px rgba(0,0,0,0.50);
      --sh-md:      0 6px 24px rgba(0,0,0,0.55);
      --sh-lg:      0 16px 48px rgba(0,0,0,0.65);
      --sh-xl:      0 28px 70px rgba(0,0,0,0.75);
      --chip-a-bg:  rgba(0,122,255,0.18);
      --chip-b-bg:  rgba(255,149,0,0.18);
      --chip-c-bg:  rgba(255,45,135,0.18);
      --chip-d-bg:  rgba(10,102,194,0.20);
    }

    /* ── RESET ── */
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{height:100%;scroll-behavior:smooth}
    body{
      font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
      background:var(--bg);
      color:var(--text-1);
      min-height:100%;
      -webkit-font-smoothing:antialiased;
      transition:background .4s ease,color .4s ease;
      overflow-x:hidden;
    }
    a{text-decoration:none}
    button{cursor:pointer;font-family:inherit}
    img{display:block}

    /* ── ANIMATED BG CANVAS ── */
    #bgCanvas{
      position:fixed;
      inset:0;
      width:100%;height:100%;
      z-index:0;
      pointer-events:none;
    }

    /* ── LAYOUT ── */
    .page{
      position:relative;
      z-index:1;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:20px 16px 24px;
    }
    .container{
      width:100%;max-width:660px;
      display:flex;flex-direction:column;
      gap:10px;
    }

    /* ── HEADER ── */
    .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:10px}
    .brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
    .brand-icon{
      width:38px;height:38px;
      background:linear-gradient(135deg,#007AFF 0%,#5AC8FA 100%);
      border-radius:11px;
      display:grid;place-items:center;
      box-shadow:0 4px 16px rgba(0,122,255,0.40);
      flex-shrink:0;
    }
    .brand-icon svg{width:21px;height:21px;fill:#fff}
    .brand-name{
      font-size:22px;font-weight:700;
      letter-spacing:-0.6px;color:var(--text-1);
    }
    .header-actions{display:flex;align-items:center;gap:8px}

    /* home button */
    .home-btn{
      display:flex;align-items:center;gap:7px;
      background:var(--surface);
      border:1px solid var(--border-s);
      border-radius:100px;
      padding:7px 14px 7px 10px;
      font-size:13px;font-weight:600;
      color:var(--text-2);
      box-shadow:var(--sh-sm);
      transition:all .2s ease;
      white-space:nowrap;
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    }
    .home-btn svg{width:15px;height:15px;fill:var(--accent)}
    .home-btn:hover{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
      box-shadow:0 4px 16px rgba(0,122,255,0.35);
      transform:translateY(-1px);
    }
    .home-btn:hover svg{fill:#fff}
    .home-btn:active{transform:scale(0.95)}

    /* theme toggle */
    .theme-btn{
      display:flex;align-items:center;gap:7px;
      background:var(--surface);
      border:1px solid var(--border-s);
      border-radius:100px;
      padding:7px 14px 7px 10px;
      font-size:13px;font-weight:600;
      color:var(--text-2);
      box-shadow:var(--sh-sm);
      transition:all .2s ease;
      white-space:nowrap;
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    }
    .theme-btn svg{width:15px;height:15px;color:var(--accent);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
    .theme-btn:hover{background:var(--surface-2);transform:translateY(-1px);box-shadow:var(--sh-md)}
    .theme-btn:hover svg{transform:rotate(22deg)}
    .theme-btn:active{transform:scale(0.95)}

    /* ── SEARCH BAR ── */
    .search-wrap{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:18px;
      padding:7px 7px 7px 14px;
      display:flex;align-items:center;gap:8px;
      box-shadow:var(--sh-md);
      transition:box-shadow .25s ease,border-color .25s ease;
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    }
    .search-wrap:focus-within{
      box-shadow:var(--sh-lg),var(--glow);
      border-color:var(--accent);
    }
    .search-wrap .s-icon{
      width:18px;height:18px;
      fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;
      flex-shrink:0;transition:stroke .2s;
    }
    .search-wrap:focus-within .s-icon{stroke:var(--accent)}
    #input{
      flex:1;border:none;outline:none;background:transparent;
      font-family:inherit;font-size:16px;font-weight:400;
      color:var(--text-1);min-width:0;
    }
    #input::placeholder{color:var(--text-3)}
    .error-tag{
      font-size:12px;font-weight:600;color:var(--danger);
      background:rgba(255,59,48,.10);border-radius:6px;
      padding:3px 9px;white-space:nowrap;
      opacity:0;transform:scale(.85);
      transition:opacity .2s,transform .2s;
      pointer-events:none;flex-shrink:0;
    }
    .error-tag.show{opacity:1;transform:scale(1)}
    .btn-search{
      background:linear-gradient(135deg,#007AFF,#0055D4);
      color:#fff;border:none;border-radius:12px;
      padding:11px 22px;font-size:15px;font-weight:600;
      transition:all .2s ease;white-space:nowrap;flex-shrink:0;
      box-shadow:0 3px 12px rgba(0,122,255,.35);
    }
    .btn-search:hover:not(:disabled){
      transform:translateY(-1px);
      box-shadow:0 8px 24px rgba(0,122,255,.45);
    }
    .btn-search:active:not(:disabled){transform:scale(.96);box-shadow:none}
    .btn-search:disabled{opacity:.5;cursor:not-allowed}

    /* ── LOADING ── */
    .loading{
      display:none;align-items:center;justify-content:center;
      gap:10px;padding:28px;
      color:var(--text-3);font-size:14px;font-weight:500;
    }
    .loading.show{display:flex}
    .spinner{
      width:18px;height:18px;
      border:2px solid var(--border-s);
      border-top-color:var(--accent);
      border-radius:50%;
      animation:spin .7s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    /* ── PROFILE CARD ── */
    .profile-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--sh-xl);
      overflow:hidden;
      display:none;
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      animation:rise .45s cubic-bezier(.22,1,.36,1) both;
    }
    .profile-card.show{display:block}
    @keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

    /* banner */
    .banner{
      height:68px;
      background:linear-gradient(120deg,#007AFF,#5AC8FA,#34C759,#AF52DE,#FF9500,#007AFF);
      background-size:400% 400%;
      animation:bannerShift 10s ease infinite;
      position:relative;
    }
    [data-theme="dark"] .banner{
      background:linear-gradient(120deg,#12002B,#001A3F,#003344,#2D1060,#001A3F,#12002B);
      background-size:400% 400%;
    }
    @keyframes bannerShift{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    .banner::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(to bottom,transparent 55%,var(--surface) 100%);
    }

    /* profile head */
    .profile-head{padding:0 22px 14px}
    .avatar-wrap{
      position:relative;display:inline-block;
      margin-top:-38px;margin-bottom:10px;
    }
    #avatar{
      width:76px;height:76px;border-radius:50%;
      border:4px solid var(--surface);
      box-shadow:var(--sh-md);object-fit:cover;
      background:var(--surface-2);
      transition:transform .3s ease;
    }
    #avatar:hover{transform:scale(1.04)}
    .online-dot{
      position:absolute;bottom:4px;right:4px;
      width:14px;height:14px;
      background:var(--success);border-radius:50%;
      border:3px solid var(--surface);
    }

    .identity-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .identity-left{flex:1;min-width:0}

    #name{
      font-size:20px;font-weight:700;letter-spacing:-.6px;
      background:linear-gradient(135deg,var(--text-1) 0%,var(--text-2) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    [data-theme="dark"] #name{
      background:linear-gradient(135deg,#FFFFFF 0%,#5AC8FA 100%);
      -webkit-background-clip:text;background-clip:text;
    }

    #user{
      display:inline-block;margin-top:2px;
      font-size:14px;font-weight:500;color:var(--accent);
    }
    #user:hover{text-decoration:underline}

    #date{
      display:inline-flex;align-items:center;gap:5px;
      margin-top:6px;font-size:11px;font-weight:500;
      color:var(--text-3);
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:100px;padding:3px 9px;
    }
    #date svg{width:11px;height:11px;fill:var(--text-3);flex-shrink:0}

    .gh-btn{
      display:inline-flex;align-items:center;gap:6px;
      background:var(--surface-2);
      border:1px solid var(--border-s);
      border-radius:11px;padding:8px 14px;
      font-size:13px;font-weight:600;
      color:var(--text-2);
      transition:all .18s ease;flex-shrink:0;
      align-self:flex-start;
    }
    .gh-btn svg{width:14px;height:14px;fill:var(--text-2)}
    .gh-btn:hover{background:var(--surface-3);transform:translateY(-1px);box-shadow:var(--sh-sm)}
    .gh-btn:active{transform:scale(.96)}

    /* bio */
    .bio-row{padding:0 22px 12px;border-top:1px solid var(--border)}
    .bio-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-3);margin-bottom:5px;margin-top:12px}
    #bio{font-size:14px;font-weight:400;color:var(--text-2);line-height:1.55}

    /* stats */
    .stats-row{
      display:grid;grid-template-columns:repeat(3,1fr);
      padding:10px 14px;gap:8px;
      border-top:1px solid var(--border);
    }
    .stat-block{
      background:var(--surface-2);
      border:1px solid var(--border);
      border-radius:14px;padding:10px 12px;
      text-align:center;
      display:flex;flex-direction:column;align-items:center;gap:2px;
      transition:all .2s ease;position:relative;overflow:hidden;
    }
    .stat-block::before{
      content:"";position:absolute;
      top:0;left:0;right:0;height:2px;
      background:linear-gradient(90deg,var(--accent),#5AC8FA);
      transform:scaleX(0);transform-origin:left;
      transition:transform .3s ease;
    }
    .stat-block:hover{background:var(--surface-3);transform:translateY(-2px);box-shadow:var(--sh-sm)}
    .stat-block:hover::before{transform:scaleX(1)}
    .stat-num{
      font-size:19px;font-weight:700;letter-spacing:-.8px;
      color:var(--text-1);font-family:"DM Mono",monospace;
    }
    .stat-lbl{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}

    /* ── INFO GRID ── */
    .info-grid{
      display:grid;grid-template-columns:1fr 1fr;
      gap:8px;padding:10px 14px 16px;
      border-top:1px solid var(--border);
    }
    .info-chip{
      display:flex;align-items:center;gap:10px;
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:14px;padding:11px 12px;
      min-width:0;
      transition:all .2s ease;
    }
    a.info-chip:hover{
      background:var(--surface-3);
      transform:translateY(-2px);
      box-shadow:var(--sh-md);
      border-color:var(--border-s);
    }
    a.info-chip:active{transform:scale(.97)}

    .chip-icon{
      width:34px;height:34px;border-radius:10px;
      display:grid;place-items:center;flex-shrink:0;
    }
    .chip-icon svg{width:17px;height:17px}
    .ci-a{background:var(--chip-a-bg)} .ci-a svg{fill:var(--chip-a-fg)}
    .ci-b{background:var(--chip-b-bg)} .ci-b svg{fill:var(--chip-b-fg)}
    .ci-c{background:var(--chip-c-bg)} .ci-c svg{fill:var(--chip-c-fg)}
    .ci-d{background:var(--chip-d-bg)} .ci-d svg{fill:var(--chip-d-fg)}

    .chip-text{display:flex;flex-direction:column;gap:2px;min-width:0}
    .chip-label{font-size:10.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.7px}
    .chip-value{font-size:13px;font-weight:500;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .chip-value.na{color:var(--text-3);font-style:italic}
    .info-chip.na-chip{opacity:.45}

    /* ── EMPTY STATE ── */
    .empty-state{
      display:none;flex-direction:column;align-items:center;
      gap:14px;padding:48px 24px;
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--sh-md);
      text-align:center;
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      animation:rise .35s cubic-bezier(.22,1,.36,1) both;
    }
    .empty-state.show{display:flex}
    .empty-icon{width:64px;height:64px;background:rgba(255,59,48,.10);border-radius:20px;display:grid;place-items:center}
    .empty-icon svg{width:28px;height:28px;fill:var(--danger)}
    .empty-title{font-size:18px;font-weight:700;color:var(--text-1)}
    .empty-sub{font-size:14px;color:var(--text-3);line-height:1.55}

    /* ── RESPONSIVE ── */
    @media(max-width:520px){
      .page{padding:24px 14px 60px}
      .brand-name{font-size:18px}
      .home-btn span,.theme-btn span{display:none}
      .home-btn,.theme-btn{padding:7px 10px}
      .btn-search{padding:10px 16px;font-size:14px}
      #name{font-size:18px}
      .stat-num{font-size:18px}
      .profile-head,.bio-row{padding-left:16px;padding-right:16px}
      .stats-row,.info-grid{padding-left:12px;padding-right:12px}
      #avatar{width:74px;height:74px}
      .info-grid{grid-template-columns:1fr}
      .gh-btn span{display:none}
    }