#hs{
    --ink:#1f2a24; --ink-soft:#5a6b62; --ink-faint:#93a29a;
    --paper:#f2f1ec; --card:#ffffff; --line:#e3e2db; --line-strong:#c9c8bf;
    --pine:#1d5c46; --pine-deep:#123f30; --pine-tint:#e7f1ec;
    --gold:#c98d2c; --gold-tint:#faf3e4; --gold-deep:#8a5c12;
  }
#hs *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#hs{margin:0; font-family:'Avenir Next','Segoe UI',system-ui,sans-serif; background:var(--paper); color:var(--ink); font-size:15px; line-height:1.5;}
#hs .wrap{max-width:600px; margin:0 auto; padding:14px 10px 30px;}
#hs .app{background:var(--card); border:1px solid var(--line); border-top:4px solid var(--pine); border-radius:16px; padding:16px 14px;}
#hs .icn{width:16px; height:16px; vertical-align:-3px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#hs .icn.big{width:19px; height:19px; vertical-align:-4px;}
#hs .logo-badge{width:34px; height:34px; border-radius:9px; background:var(--pine); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
#hs .logo-badge .icn{width:19px; height:19px;}
#hs .brandbar{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
#hs .logo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#hs .logo h1{font-size:24px; margin:0; font-weight:700; letter-spacing:-0.5px;}
#hs .logo h1 .hs{color:var(--pine);}
#hs .pill{font-size:11px; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:999px; padding:2px 10px; white-space:nowrap;}
#hs .tagline{font-size:13.5px; color:var(--ink-soft); margin:5px 0 13px;}
#hs .btn{font-family:inherit; font-size:13px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); border-radius:8px; padding:8px 12px; cursor:pointer;}
#hs .btn:active{transform:scale(0.97);}
#hs .btn.primary{background:var(--pine); border-color:var(--pine); color:#fff;}
#hs .howto{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); background:var(--paper); border-radius:999px; padding:6px 12px; margin:0 0 13px; width:fit-content; max-width:100%;}
#hs .howto b{display:inline-flex; width:16px; height:16px; border-radius:50%; background:var(--pine); color:#fff; font-size:10px; align-items:center; justify-content:center; margin-right:4px;}
#hs .howto .sep{color:var(--ink-faint);}
#hs .progress-note{font-size:12px; font-weight:600; color:var(--pine-deep); background:var(--pine-tint); border-radius:999px; padding:4px 12px; display:inline-block; margin-top:8px;}
#hs .progress-note.tie-progress{color:var(--gold-deep); background:#fff; border:1px solid #ecd9ae;}
#hs .chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px;}
#hs .chip{font-family:inherit; font-size:12.5px; padding:5px 12px; border-radius:999px; border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft); cursor:pointer;}
#hs .chip.on{background:var(--pine-tint); border-color:var(--pine); color:var(--pine-deep); font-weight:600;}
#hs .chip.on::before{content:"✓ "; font-weight:700;}
#hs .chip.custom{border-style:dashed;}
#hs .matrix-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
#hs table.matrix{border-collapse:collapse; width:100%;}
#hs table.matrix th, #hs table.matrix td{padding:7px 4px; font-size:13px; text-align:center; border-top:1px solid var(--line);}
#hs table.matrix thead th{border-top:none; vertical-align:bottom; padding-bottom:8px;}
#hs th.req-col, #hs td.req-col{text-align:left; position:sticky; left:0; background:var(--card); min-width:112px; max-width:140px; z-index:2;}
#hs th.req-col{font-size:12px; color:var(--ink-faint); font-weight:600;}
#hs .head-opt{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:78px;}
#hs .head-opt input{width:86px; font-family:inherit; font-size:12.5px; font-weight:700; text-align:center; border:none; border-bottom:1.5px dashed var(--line-strong); background:transparent; padding:3px 2px; color:var(--ink);}
#hs .head-opt input:focus{outline:none; border-bottom-color:var(--pine);}
#hs .head-opt input::placeholder{font-weight:400; color:var(--ink-faint);}
#hs .head-tools{display:flex; gap:6px;}
#hs .head-tools button{border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:12px; padding:0 2px;}
#hs .addcol{border:1px dashed var(--line-strong); background:none; border-radius:8px; color:var(--ink-faint); font-size:12px; padding:6px 8px; cursor:pointer; white-space:nowrap;}
#hs .req-cell{display:flex; align-items:center; gap:5px; text-align:left;}
#hs .req-txt{min-width:0; flex:1;}
#hs td.req-col .req-name-input{font-family:inherit; font-weight:600; font-size:12.5px; width:100%; border:none; border-bottom:1px dashed transparent; background:transparent; padding:1px 0; color:var(--ink); text-align:left;}
#hs td.req-col .req-name-input:hover{border-bottom-color:var(--line-strong);}
#hs td.req-col .req-name-input:focus{outline:none; border-bottom-color:var(--pine);}
#hs td.req-col .req-pts{font-size:10.5px; display:inline-block; text-align:left; background:var(--pine-tint); color:var(--pine-deep); font-weight:600; border-radius:999px; padding:1px 8px; margin-top:2px;}
#hs .drag-handle{cursor:grab; color:var(--ink-faint); font-size:15px; touch-action:none; user-select:none; -webkit-user-select:none; flex:0 0 auto; padding:4px 3px; line-height:1;}
#hs tr.dragging{position:relative; z-index:5;}
#hs tr.dragging td{background:var(--pine-tint) !important; box-shadow:0 2px 8px rgba(0,0,0,.12);}
#hs .cell-btn{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-strong); background:#fff; color:transparent; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .15s;}
#hs .cell-btn.sel{background:var(--pine); border-color:var(--pine); color:#fff;}
#hs .cell-btn.pop{animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(.4);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
#hs tr.addreq-row td{border-top:1px solid var(--line); padding:8px 4px;}
#hs .addreq-btn{font-family:inherit; font-size:12px; color:var(--ink-faint); background:none; border:1px dashed var(--line-strong); border-radius:8px; padding:6px 10px; cursor:pointer; width:auto; white-space:nowrap;}
#hs .addreq-btn:hover{border-color:var(--pine); color:var(--pine); background:var(--pine-tint);}
#hs tr.score-row td{border-top:2px solid var(--line-strong); font-weight:700; font-size:14.5px; padding-top:9px;}
#hs tr.score-row td.leader{color:var(--pine);}
#hs tr.score-row td.leader::after{content:" 🏆"; font-size:12px;}
#hs .resultcard .crown-circle{width:56px; height:56px; margin:0 auto; border-radius:50%; background:#e9c46a; display:flex; align-items:center; justify-content:center; font-size:28px;}
#hs .del-req{color:var(--ink-faint); font-size:13px; background:none; border:none; cursor:pointer; padding:2px 4px;}
#hs .empty-note{font-size:13px; color:var(--ink-faint); text-align:center; padding:16px 8px; border:1px dashed var(--line); border-radius:10px;}
#hs .hint{font-size:11.5px; color:var(--ink-faint); margin:7px 0 0;}
#hs .tiebox{background:var(--gold-tint); border:1px solid #ecd9ae; border-radius:12px; padding:12px; margin-top:12px;}
#hs .tiebox h3{margin:0 0 3px; font-size:14px; color:var(--gold-deep);}
#hs .tiebox p.sub{margin:0 0 9px; font-size:12px; color:var(--gold-deep); opacity:.85;}
#hs .tie-grid{display:flex; flex-direction:column; gap:7px;}
#hs .tie-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
#hs .tie-req{font-size:12px; font-weight:600; color:var(--gold-deep); min-width:82px;}
#hs .tie-opt{display:flex; align-items:center; gap:3px; background:#fff; border:1px solid #ecd9ae; border-radius:8px; padding:3px 7px;}
#hs .tie-opt .nm{font-size:11px; color:var(--ink-soft); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#hs .star{background:none; border:none; cursor:pointer; font-size:16px; color:#d8c79a; padding:1px;}
#hs .star.on{color:var(--gold);}
#hs .resultcard{background:var(--pine-deep); color:#fff; border-radius:14px; padding:16px 14px; text-align:center; margin-top:13px;}
#hs .resultcard .crown{font-size:28px; line-height:1;}
#hs .resultcard h2{margin:5px 0 2px; font-size:21px; font-weight:700;}
#hs .resultcard .why{font-size:13px; opacity:.85; margin:0 0 12px;}
#hs .bars{display:flex; flex-direction:column; gap:6px; max-width:340px; margin:0 auto 13px; text-align:left;}
#hs .bar-line{display:flex; align-items:center; gap:8px;}
#hs .bar-line .bn{font-size:12px; width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9;}
#hs .bar-track{flex:1; height:8px; background:rgba(255,255,255,.18); border-radius:999px;}
#hs .bar-fill{height:8px; border-radius:999px; background:#e9c46a; display:block;}
#hs .bar-line .bv{font-size:12px; font-weight:700; width:24px; text-align:right;}
#hs .share-row{display:flex; gap:7px; justify-content:center; flex-wrap:wrap;}
#hs .share-row .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; font-size:12.5px;}
#hs .cta{background:var(--pine-tint); border:1px solid #cfe2d8; border-radius:12px; padding:12px 13px; margin-top:13px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
#hs .cta p{margin:0; font-size:13.5px; font-weight:600; color:var(--pine-deep);}
#hs .cta a{font-size:13.5px; font-weight:700; color:var(--pine); text-decoration:none; white-space:nowrap;}
#hs footer{margin-top:15px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:12px;}
#hs footer img{width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--pine-tint);}
#hs footer .fname{font-size:14.5px; font-weight:700; margin:0;}
#hs footer .frole{font-size:11.5px; color:var(--ink-soft); margin:0; line-height:1.45;}
#hs .toast{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:13px; padding:9px 16px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .25s; z-index:70;}
#hs .toast.show{opacity:1;}
#hs .overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-start; justify-content:center; z-index:60; padding:16px; overflow-y:auto;}
#hs .overlay.open{display:flex;}
#hs .modal{background:#fff; border-radius:14px; padding:15px; width:100%; max-width:380px; margin:auto 0;}
#hs .modal h3{margin:0 0 8px; font-size:15px;}
#hs .modal textarea{width:100%; font-family:inherit; font-size:12.5px; border:1px solid var(--line-strong); border-radius:8px; padding:8px; min-height:110px; resize:vertical; color:var(--ink-soft);}
#hs .modal img.preview{width:100%; border-radius:10px; border:1px solid var(--line);}
#hs .modal .m-note{font-size:12px; color:var(--ink-faint); margin:8px 0;}
#hs .m-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap;}
#hs .confetti-c{position:fixed; inset:0; pointer-events:none; z-index:80;}
@media print{#hs .btn, #hs .chips, #hs .hint, #hs .tiebox, #hs .share-row, #hs .drag-handle, #hs .del-req, #hs .head-tools, #hs .addcol, #hs .cta, #hs .pill{display:none !important;}
#hs{background:#fff;}
#hs .app{border:none;}
#hs .resultcard{background:#fff; color:#000; border:2px solid #000;}
#hs .bar-track{background:#eee;}
#hs .bar-fill{background:#888;}

  }

/* site integration */
#hs{background:transparent;font-family:var(--sans,'Plus Jakarta Sans',system-ui,sans-serif)}
#hs .wrap{max-width:820px;padding:0}
#hs .logo .h1{font-size:24px;margin:0;font-weight:700;letter-spacing:-.5px}
#hs .logo .h1 .hs{color:var(--pine)}
#hs .cta-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--pine);cursor:pointer;white-space:nowrap}
#hs footer img{width:44px;height:44px;border-radius:50%;object-fit:cover}
@media (max-width:760px){
  #hs .chip{font-size:14px;padding:9px 14px;min-height:40px}
  #hs .cta-btn{min-height:44px;font-size:15px}
  #hs input{font-size:16px}
}
@media (max-width:760px){
  #hs > .wrap,#hs .wrap{padding-left:0;padding-right:0}
  #hs th.req-col,#hs td.req-col{min-width:96px}
  #hs .head-opt{min-width:66px}
  #hs .head-opt input{width:70px}
  #hs .empty-note{position:sticky;left:0;max-width:calc(100vw - 80px)}
}