*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --m:#E03E8C;--m-d:#BE2A72;--m-dd:#9B1B5C;
  --m-bg:rgba(224,62,140,.09);--m-bg2:rgba(224,62,140,.16);
  --grad:linear-gradient(135deg,#E85A9A 0%,#BE2A72 70%,#1A9B6E 100%);--grad-glow:rgba(190,42,114,.28);
  --white:#FFFFFF;--surface:#FFFFFF;--surface2:#F8FAFC;--bg:#F6F5F7;
  --text:#0F172A;--text2:#64748B;--text3:#94A3B8;--text4:#CBD5E1;
  --border:rgba(15,23,42,.07);--border2:rgba(15,23,42,.13);
  --red:#DC2626;--red-bg:rgba(220,38,38,.08);
  --orange:#D97706;--orange-bg:rgba(217,119,6,.09);
  --green:#16A34A;--green-bg:rgba(22,163,74,.09);
  --radius:16px;--radius-sm:12px;--radius-xs:9px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 4px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.05);
  --shadow:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.07);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 16px 48px rgba(0,0,0,.10);
}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;max-width:480px;margin:0 auto;background:var(--bg)}

svg{max-width:100%;max-height:100%}
.card-title>svg{width:18px;height:18px;stroke:var(--m-d);fill:none;stroke-width:2;flex-shrink:0}

#header{background:var(--grad);padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 2px 16px rgba(190,42,114,.28)}
#hdr-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#hdr-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#hdr-text{line-height:1.25;flex:1;min-width:0}
#hdr-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr-sub{font-size:10.5px;color:rgba(255,255,255,.78);font-weight:600;letter-spacing:.2px;margin-top:2px;white-space:nowrap}
#hdr-chip{background:rgba(255,255,255,.92);border-radius:100px;padding:6px 13px;font-size:12.5px;font-weight:800;color:var(--m-d);display:flex;align-items:center;gap:5px;flex-shrink:0;letter-spacing:-.3px}
#hdr-chip svg{width:13px;height:13px;stroke:var(--m-d);fill:none;stroke-width:2.4}

#pages{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}
.page{display:none;padding:14px 0 40px;animation:fade .28s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin:0 16px 10px}
.card-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:-.2px;margin-bottom:14px}
.card-title .ct-ic{width:32px;height:32px;border-radius:9px;background:var(--m-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-title .ct-ic svg{width:16px;height:16px;stroke:var(--m-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-title .ct-sub{font-size:11px;font-weight:600;color:var(--text3);margin-left:auto;letter-spacing:0}

.sec-title{padding:2px 16px 12px;font-size:20px;font-weight:800;letter-spacing:-.4px}
.acc-sec-hd{display:flex;align-items:baseline;justify-content:space-between;padding:18px 16px 10px}
.acc-sec-t{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--text1)}
.acc-sec-c{font-size:12px;font-weight:600;color:var(--text3)}

.acc-tools{padding:0 16px 8px}
.acc-srch{position:relative;margin-bottom:9px}
.acc-srch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--text3);fill:none;stroke-width:2.2}
.acc-srch input{width:100%;padding:10px 34px 10px 33px;border:1.5px solid var(--border);border-radius:var(--radius-xs);font-size:13.5px;background:#fff;color:var(--text1);box-sizing:border-box}
.acc-srch .acc-srch-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:17px;line-height:1}
.acc-filters{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.acc-filters::-webkit-scrollbar{display:none}
.acc-chip{flex:0 0 auto;padding:6px 12px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.acc-chip.sel{background:var(--m);border-color:var(--m);color:#fff}

.od-hd{display:flex;align-items:center;gap:12px;padding:16px 16px 6px}
.od-back{width:38px;height:38px;border-radius:11px;background:var(--surface2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
.od-back:active{background:var(--m-bg)}
.od-back svg{width:20px;height:20px;stroke:var(--text1)}
.od-title{font-size:13px;font-weight:700;color:var(--text3);letter-spacing:.2px}
.od-body{padding:8px 16px 28px}
.od-body .card{margin:0 0 12px;border-radius:16px}

.od-hero{display:flex;gap:13px;align-items:center;padding:14px;background:linear-gradient(135deg,var(--m-bg) 0%,#fff 90%);border:1.5px solid var(--m-bg2)}
.od-hero-img{width:64px;height:64px;border-radius:13px;object-fit:cover;flex-shrink:0;background:#F1F5F9}
.od-hero-nm{font-weight:800;font-size:14.5px;line-height:1.3;color:var(--text1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.od-hero-sub{font-size:12px;color:var(--text2);font-weight:600;margin-top:4px}

.od-status{display:flex;align-items:center;gap:10px;padding:13px 15px}
.od-status-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.od-status-ic svg{width:19px;height:19px}
.od-status-tx{flex:1;min-width:0}
.od-status-t{font-size:14px;font-weight:800;color:var(--text1)}
.od-status-s{font-size:12px;color:var(--text2);font-weight:500;margin-top:2px}

.od-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.sec-title span{display:block;font-size:11.5px;font-weight:600;color:var(--text3);letter-spacing:.2px;margin-top:2px}