@font-face{font-family:'Urbanist';font-weight:500;font-style:normal;font-display:swap;src:url(assets/urbanist-500.woff2) format('woff2');}
@font-face{font-family:'Urbanist';font-weight:600;font-style:normal;font-display:swap;src:url(assets/urbanist-600.woff2) format('woff2');}
@font-face{font-family:'Urbanist';font-weight:700;font-style:normal;font-display:swap;src:url(assets/urbanist-700.woff2) format('woff2');}
@font-face{font-family:'Urbanist';font-weight:800;font-style:normal;font-display:swap;src:url(assets/urbanist-800.woff2) format('woff2');}
  :root {
    --p:#1784D8; --p-d:#0F67B3; --p-soft:#EAF4FD; --p-line:#CFE5F8;
    --red:#E23744; --red-soft:#FDECEE; --amber:#C77700; --amber-soft:#FFF4E0;
    --ink:#17202B; --ink-2:#3B4757; --muted:#8A94A3; --line:#EEF1F5; --field:#F5F7FA; --bg:#F7F9FC;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { margin:0; overflow-x:hidden; }
  body { font-family:'Urbanist', system-ui, sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100vh; font-weight:500; }
  button, input { font-family:inherit; }
  button { cursor:pointer; }
  .hide { display:none !important; }
  svg { display:block; }

  /* ---- login ---- */
  .login { min-height:100vh; background:#fff; display:flex; flex-direction:column; }
  .hero { position:relative; background:linear-gradient(180deg, rgba(8,40,78,.30) 0%, rgba(14,90,160,.55) 55%, rgba(23,132,216,.92) 100%), url(assets/apec.jpg) center 40%/cover no-repeat, var(--p); color:#fff; padding:56px 24px 92px; overflow:hidden; border-radius:0 0 40px 40px; }
  .hero-cap { position:relative; z-index:1; text-align:center; font-size:12.5px; font-weight:600; opacity:.85; margin-top:6px; }
  .hero::before, .hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.06); }
  .hero::before { width:260px; height:260px; right:-80px; top:-90px; }
  .hero::after { width:180px; height:180px; left:-70px; bottom:-60px; }
  .hero-logo { position:relative; z-index:1; width:84px; height:96px; background:#fff; border-radius:22px; display:grid; place-items:center; box-shadow:0 12px 30px rgba(8,52,92,.25); margin:0 auto 18px; }
  .hero-logo img { width:54px; }
  .hero h2 { position:relative; z-index:1; margin:0; text-align:center; font-size:15px; font-weight:600; letter-spacing:.02em; opacity:.92; }
  .login-card { position:relative; z-index:2; margin:-56px 16px 0; background:#fff; border-radius:28px; padding:28px 22px 24px; box-shadow:0 18px 50px rgba(23,32,43,.08); }
  .login-card h1 { margin:0 0 8px; font-size:34px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
  .login-card .sub { margin:0 0 26px; color:var(--muted); font-size:17px; font-weight:600; }
  .inp { display:flex; align-items:center; gap:12px; height:62px; background:var(--field); border:1.5px solid transparent; border-radius:16px; padding:0 16px; margin-bottom:14px; transition:border-color .15s, background .15s; }
  .inp:focus-within { border-color:var(--p); background:var(--p-soft); }
  .inp svg { width:22px; height:22px; color:var(--muted); flex:none; }
  .inp:focus-within svg { color:var(--p); }
  .inp input { flex:1; min-width:0; height:100%; border:0; background:transparent; font-size:19px; font-weight:700; color:var(--ink); }
  .inp input[type=password] { font-size:24px; letter-spacing:.12em; }
  .inp input[type=password]::placeholder { font-size:19px; letter-spacing:0; }
  .inp input:focus { outline:none; }
  .inp input::placeholder { color:#A8B0BC; font-weight:600; font-size:18px; }
  .eye { border:0; background:transparent; padding:0; color:var(--muted); }
  .btn { height:60px; border:0; border-radius:999px; font-size:18px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 22px; transition:transform .1s, box-shadow .15s; }
  .btn:active { transform:scale(.98); }
  .btn-p { background:var(--p); color:#fff; width:100%; box-shadow:0 10px 24px rgba(23,132,216,.32); }
  .btn-soft { background:var(--p-soft); color:var(--p); }
  .btn-red { background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(226,55,68,.25); }
  .login-foot { text-align:center; color:var(--muted); font-size:13.5px; margin:18px 4px 0; line-height:1.5; }
  .login-foot b { color:var(--ink-2); }

  /* ---- app header ---- */
  .head { background:var(--p); color:#fff; border-radius:0 0 32px 32px; position:relative; overflow:hidden; }
  .head::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.07); right:-110px; top:-150px; }
  .head-in { position:relative; max-width:1180px; margin:0 auto; padding:18px 18px 74px; }
  .bar { display:flex; align-items:center; gap:12px; }
  .bar-logo { width:44px; height:50px; border-radius:14px; background:#fff; display:grid; place-items:center; flex:none; }
  .bar-logo img { width:28px; }
  .hello small { display:block; font-size:13px; opacity:.85; font-weight:600; }
  .hello b { font-size:18px; font-weight:800; }
  .sp { flex:1; }
  .round { width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; }
  .round svg { width:20px; height:20px; }
  .tabs { display:none; background:rgba(255,255,255,.14); border-radius:999px; padding:4px; gap:4px; }
  .tab { height:38px; padding:0 18px; border:0; border-radius:999px; background:transparent; color:#fff; font-size:14.5px; font-weight:700; opacity:.85; }
  .tab.on { background:#fff; color:var(--p); opacity:1; }

  .summary { margin-top:20px; display:flex; align-items:flex-end; gap:16px; }
  .summary-n { font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em; }
  .summary-n .of { font-size:20px; opacity:.75; font-weight:700; }
  .summary-l { font-size:14px; opacity:.9; font-weight:600; margin-top:6px; }
  .chip { margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border-radius:999px; padding:8px 12px 8px 10px; font-size:12.5px; font-weight:700; white-space:nowrap; }
  .chip i { width:8px; height:8px; border-radius:50%; background:#7CF0A9; box-shadow:0 0 0 3px rgba(124,240,169,.25); }
  .chip.off { background:#fff; color:var(--red); }
  .chip.off i { background:var(--red); box-shadow:0 0 0 3px rgba(226,55,68,.2); }
  .progress { margin-top:14px; height:8px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
  .progress div { height:100%; background:#fff; border-radius:99px; transition:width .5s; }

  /* ---- body ---- */
  .main { max-width:1180px; margin:-48px auto 0; padding:0 16px 120px; position:relative; }
  .cols { display:block; }
  .search { position:sticky; top:10px; z-index:15; }
  .sbox { display:flex; align-items:center; height:64px; background:#fff; border-radius:20px; box-shadow:0 14px 34px rgba(23,32,43,.10); padding:0 8px 0 10px; border:1.5px solid transparent; transition:border-color .15s; }
  .sbox:focus-within { border-color:var(--p); }
  .pre { height:44px; display:flex; align-items:center; padding:0 12px; border-radius:12px; background:var(--p-soft); color:var(--p); font-weight:800; font-size:18px; letter-spacing:.02em; transition:opacity .15s; }
  .sbox input { flex:1; min-width:0; height:100%; border:0; padding:0 12px; background:transparent; font-size:20px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
  .sbox input:focus { outline:none; }
  .sbox input::placeholder { color:#A8B0BC; font-weight:600; font-size:16px; letter-spacing:0; }
  .x { width:40px; height:40px; border-radius:50%; border:0; background:var(--field); color:var(--muted); display:grid; place-items:center; }
  .x svg { width:16px; height:16px; }
  .hint { color:var(--muted); font-size:13.5px; font-weight:600; margin:12px 6px 14px; }
  .sec { display:flex; align-items:center; justify-content:space-between; margin:6px 4px 10px; }
  .sec b { font-size:17px; font-weight:800; }
  .sec span { color:var(--muted); font-size:13px; font-weight:600; }

  .list { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
  .item { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:#fff; border:1.5px solid transparent; border-radius:18px; padding:12px 14px; color:inherit; box-shadow:0 2px 8px rgba(23,32,43,.04); transition:border-color .15s, transform .1s; }
  .item:active { transform:scale(.99); }
  .item.sel { border-color:var(--p); }
  .av { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:16px; flex:none; background:var(--p-soft); color:var(--p); }
  .av.done { background:var(--p); color:#fff; }
  .it-main { flex:1; min-width:0; }
  .it-name { display:block; font-size:16.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .it-sub { display:block; margin-top:3px; color:var(--muted); font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .it-sub em { font-style:normal; color:var(--ink-2); font-weight:800; margin-right:8px; }
  mark { background:#FFE58A; color:inherit; border-radius:4px; padding:0 1px; }
  .badge { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:var(--p); background:var(--p-soft); padding:6px 10px; border-radius:999px; }
  .badge svg { width:14px; height:14px; }
  .go { color:#C3CAD4; flex:none; }
  .empty { background:#fff; border-radius:22px; padding:30px 22px; text-align:center; }
  .empty-ic { width:64px; height:64px; border-radius:50%; background:var(--p-soft); color:var(--p); display:grid; place-items:center; margin:0 auto 14px; }
  .empty-ic svg { width:28px; height:28px; }
  .empty b { display:block; font-size:17px; font-weight:800; margin-bottom:6px; }
  .empty p { margin:0; color:var(--muted); font-size:14.5px; font-weight:600; line-height:1.5; }
  .notin { margin-top:14px; width:100%; height:54px; border-radius:16px; border:1.5px dashed var(--p-line); background:#fff; color:var(--p); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; }
  .notin svg { width:18px; height:18px; }

  /* ---- sheet ---- */
  .scrim { position:fixed; inset:0; z-index:40; background:rgba(16,24,40,.45); opacity:0; pointer-events:none; transition:opacity .2s; }
  .scrim.on { opacity:1; pointer-events:auto; }
  .sheet { position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-radius:30px 30px 0 0; padding:12px 22px calc(22px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); max-height:90vh; overflow:auto; }
  .sheet.on { transform:none; }
  .grab { width:46px; height:5px; border-radius:3px; background:#E1E6ED; margin:0 auto 18px; }
  .who { text-align:center; margin-bottom:18px; }
  .who .av { width:76px; height:76px; font-size:26px; margin:0 auto 12px; }
  .who h3 { margin:0; font-size:23px; font-weight:800; line-height:1.2; }
  .reg { display:inline-block; margin-top:8px; background:var(--p-soft); color:var(--p); font-weight:800; font-size:15px; letter-spacing:.04em; padding:6px 12px; border-radius:999px; }
  .info { background:var(--field); border-radius:18px; padding:4px 16px; margin-bottom:18px; }
  .info-row { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #E7EBF0; }
  .info-row:last-child { border-bottom:0; }
  .info-row .ic { width:38px; height:38px; border-radius:12px; background:#fff; color:var(--p); display:grid; place-items:center; flex:none; }
  .info-row .ic svg { width:18px; height:18px; }
  .info-row small { display:block; color:var(--muted); font-size:12.5px; font-weight:700; }
  .info-row b { display:block; font-size:15.5px; font-weight:700; word-break:break-all; }
  .acts { display:flex; gap:10px; }
  .acts .btn { flex:1; }

  .ok { text-align:center; padding:0 0 14px; }
  .ok-ring { width:78px; height:78px; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; margin:0 auto 14px; box-shadow:0 0 0 12px var(--p-soft); animation:ok .45s cubic-bezier(.2,1.4,.4,1); }
  .ok-ring svg { width:38px; height:38px; }
  @keyframes ok { 0% { transform:scale(.4); opacity:0 } 100% { transform:none; opacity:1 } }
  .ok h3 { margin:6px 0 4px; font-size:24px; font-weight:800; color:var(--p); }
  .ok p { margin:0; color:var(--ink-2); font-size:15px; font-weight:600; }
  .ok p span { color:var(--muted); }
  .was { display:flex; align-items:center; gap:12px; background:var(--amber-soft); color:#8A5200; border-radius:16px; padding:14px; margin-bottom:16px; }
  .was svg { width:24px; height:24px; flex:none; }
  .was b { display:block; font-size:15.5px; font-weight:800; }
  .was small { font-size:13.5px; font-weight:600; }

  /* ---- stats ---- */
  .stats { display:grid; gap:14px; }
  .card { background:#fff; border-radius:24px; padding:22px; box-shadow:0 2px 10px rgba(23,32,43,.04); }
  .card h4 { margin:0 0 18px; font-size:17px; font-weight:800; }
  .att { display:flex; align-items:center; gap:22px; }
  .ring { width:128px; height:128px; position:relative; flex:none; }
  .ring svg { width:128px; height:128px; transform:rotate(-90deg); }
  .ring circle { fill:none; stroke-width:14; stroke-linecap:round; }
  .ring .bg { stroke:var(--p-soft); }
  .ring .fg { stroke:var(--p); transition:stroke-dashoffset .6s; }
  .ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:28px; font-weight:800; }
  .att-n { font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em; }
  .att-l { color:var(--muted); font-size:14.5px; font-weight:600; margin-top:6px; line-height:1.5; }
  .att-l b { color:var(--ink); }
  .bar2 { margin-bottom:18px; }
  .bar2:last-child { margin-bottom:0; }
  .bar2-top { display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:8px; }
  .bar2-top span { color:var(--muted); font-weight:600; }
  .bar2-top span b { color:var(--ink); }
  .track { height:10px; border-radius:99px; background:var(--p-soft); overflow:hidden; }
  .track div { height:100%; border-radius:99px; background:var(--p); transition:width .6s; }

  /* ---- bottom nav ---- */
  .nav { position:fixed; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:30; background:#fff; border-radius:24px; display:flex; padding:8px; box-shadow:0 14px 40px rgba(23,32,43,.14); }
  .nav button { flex:1; height:54px; border:0; border-radius:18px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; }
  .nav button svg { width:22px; height:22px; }
  .nav button.on { background:var(--p-soft); color:var(--p); }

  /* ---- dialog ---- */
  .dlg { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(16,24,40,.5); }
  .dlg-box { width:100%; max-width:380px; background:#fff; border-radius:28px; padding:28px 22px 22px; text-align:center; animation:ok .3s ease; }
  .dlg-ic { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px; }
  .dlg-ic svg { width:32px; height:32px; }
  .dlg-ic.blue { background:var(--p-soft); color:var(--p); }
  .dlg-ic.red { background:var(--red-soft); color:var(--red); }
  .dlg-ic.amber { background:var(--amber-soft); color:var(--amber); }
  .dlg-box h3 { margin:0 0 8px; font-size:22px; font-weight:800; }
  .dlg-box p { margin:0 0 22px; color:var(--muted); font-size:15px; font-weight:600; line-height:1.5; }
  .dlg-box .inp { text-align:left; }
  .dlg-acts { display:flex; gap:10px; }
  .dlg-acts .btn { flex:1; height:54px; }

  .toast { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); z-index:70; background:var(--ink); color:#fff; border-radius:16px; padding:14px 18px; font-size:14.5px; font-weight:600; max-width:calc(100% - 32px); box-shadow:0 14px 34px rgba(0,0,0,.2); animation:ok .25s ease; }


  /* ---- laptop ---- */
  @media (min-width: 980px) {
    .login { flex-direction:row; background:var(--bg); }
    .hero { flex:1; border-radius:0 48px 48px 0; display:flex; flex-direction:column; justify-content:center; padding:60px; }
    .hero::before { width:520px; height:520px; right:-160px; top:-160px; }
    .hero::after { width:360px; height:360px; left:-120px; bottom:-120px; }
    .hero-logo { width:120px; height:136px; border-radius:30px; }
    .hero-logo img { width:78px; }
    .hero h2 { font-size:22px; font-weight:700; }
    .hero-big { position:relative; z-index:1; text-align:center; font-size:48px; font-weight:800; margin:10px 0 0; letter-spacing:-.02em; line-height:1.05; }
    .login-side { width:520px; display:flex; flex-direction:column; justify-content:center; padding:40px; }
    .login-card { margin:0; box-shadow:none; background:transparent; padding:0; }
    .tabs { display:flex; margin-left:22px; }
    .nav { display:none; }
    .main { padding-bottom:40px; }
    .cols { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:24px; align-items:start; }
    .side { position:sticky; top:20px; padding-top:0; }
    .sheet { position:static; transform:none; border-radius:28px; max-height:none; box-shadow:0 14px 34px rgba(23,32,43,.08); padding:26px; }
    .grab, .scrim { display:none; }
    .side-empty { background:#fff; border-radius:28px; padding:44px 26px; text-align:center; box-shadow:0 14px 34px rgba(23,32,43,.06); }
    .stats { grid-template-columns:1fr 1fr; }
    .toast { bottom:28px; }
  }
  @media (max-width: 979px) { .side-empty, .hero-big { display:none; } .login-side { display:contents; } }

  .err { background:var(--red-soft); color:#A11C27; border-radius:14px; padding:13px 15px; font-size:16px; font-weight:700; margin:0 0 14px; }
  .btn[disabled] { opacity:.6; pointer-events:none; }
  .spin { width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,255,255,.45); border-top-color:#fff; animation:sp .8s linear infinite; }
  @keyframes sp { to { transform:rotate(360deg) } }
  .chip.wait { background:#fff; color:var(--amber); }
  .chip.wait i { background:var(--amber); box-shadow:0 0 0 3px rgba(199,119,0,.2); }
  .round.busy svg { animation:sp .8s linear infinite; }
  .boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:100; }
  .boot .spin { border-color:var(--p-soft); border-top-color:var(--p); width:36px; height:36px; }