/* subscribe.ltd */

:root{
  --bg:#000000;
  --panel:#0B0B0B;
  --line:#242424;
  --line-2:#1A1A1A;
  --text:#FFFFFF;
  --dim:#8A8A8A;
  --dimmer:#5A5A5A;
  --red:#FF3B30;

  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hidden{display:none !important}

#app{max-width:660px;margin:0 auto;padding:0 20px}

/* ---------- top ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 0 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:40;
}
.brand{font-size:19px;font-weight:700;letter-spacing:-.03em}
.brand span{color:var(--dim);font-weight:500}
.top-meta{
  font-family:var(--mono);font-size:13px;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ---------- stats ---------- */
.strip{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  border:1px solid var(--line);
  margin-top:22px;
}
.stat{background:var(--panel);padding:20px 16px;text-align:center}
.stat-val{
  font-family:var(--mono);font-size:26px;font-weight:600;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;
}
.stat-label{
  margin-top:9px;font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.stat.warn .stat-val{color:var(--red)}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:12px;padding:22px 0 4px}
#btn-add{
  position:fixed;left:20px;right:20px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:60;max-width:620px;margin:0 auto;
  padding:16px;background:var(--text);color:var(--bg);
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em;
}
#btn-add:active{opacity:.75}

.filters{
  display:flex;gap:8px;width:100%;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:1;white-space:nowrap;text-align:center;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  padding:11px 12px;border:1px solid var(--line);color:var(--dim);
}
.chip.active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}

/* ---------- list ---------- */
.list{margin-top:20px}
.item{
  display:grid;grid-template-columns:1fr auto;gap:14px;
  padding:18px 0;border-bottom:1px solid var(--line-2);
  align-items:start;
}
.item:first-child{border-top:1px solid var(--line-2)}

.i-main{min-width:0}
.i-name{
  font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.i-cat{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);
  border:1px solid var(--line);padding:2px 6px;
}
.i-badge{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);
  border:1px solid var(--red);padding:2px 6px;
}
.i-meta{
  margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--dimmer);
  display:flex;gap:14px;flex-wrap:wrap;
}
.i-meta .due{color:var(--red)}

.i-cost{text-align:right;flex:none}
.i-year{
  font-family:var(--mono);font-size:20px;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
}
.item.unused .i-year{color:var(--red)}
.i-cycle{
  margin-top:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

.i-act{
  grid-column:1 / -1;display:flex;gap:8px;margin-top:14px;
}
.icon-btn{
  flex:1;padding:11px;border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--dim);
}
.icon-btn:active{background:var(--panel)}
.icon-btn.kill{color:var(--red);border-color:#3A1310}
.icon-btn.kill:active{background:#1A0906}

.empty{
  border:1px dashed var(--line);
  padding:60px 24px;text-align:center;margin-top:20px;
}
.empty-big{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.empty p{color:var(--dim);font-size:14px;max-width:34ch;margin:0 auto}

/* ---------- footer ---------- */
.footer-note{
  margin-top:34px;padding:26px 0 30px;
  border-top:1px solid var(--line);text-align:center;
}
.footer-note p{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.footer-note .dim{margin-top:9px;color:var(--dimmer)}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.72);
  display:flex;align-items:flex-end;justify-content:center;
}
.modal-panel{
  background:var(--panel);width:100%;max-width:660px;
  border-top:1px solid var(--line);
  max-height:92vh;overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;
  position:sticky;top:0;background:var(--panel);
}
.modal-head .icon-btn{
  flex:none;border:none;padding:0;width:34px;height:34px;
  font-size:16px;color:var(--dim);
}

#sub-form{padding:20px}
#sub-form label{
  display:block;margin-bottom:16px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.18em;color:var(--dim);
}
#sub-form input[type=number],
#sub-form input[type=date],
#sub-form input:not([type]),
#sub-form select{
  display:block;width:100%;margin-top:8px;
  padding:14px;background:var(--bg);
  border:1px solid var(--line);border-radius:0;
  font-family:var(--sans);font-size:16px;font-weight:500;
  letter-spacing:normal;text-transform:none;color:var(--text);
}
#sub-form input:focus,#sub-form select:focus{border-color:var(--dim);outline:none}
#sub-form input::placeholder{color:#4A4A4A}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#sub-form label.check{
  display:flex;align-items:center;gap:12px;
  padding:15px 14px;background:var(--bg);border:1px solid var(--line);
  font-size:10.5px;
}
#sub-form label.check input{width:20px;height:20px;accent-color:var(--red);margin:0;flex:none}
.modal-actions{display:grid;gap:10px;margin-top:6px}
.btn{
  padding:16px;border:1px solid var(--line);background:none;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;
}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.danger{color:var(--red);border-color:#3A1310}
.btn.full{width:100%}
.btn:active{opacity:.75}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);
  background:var(--text);color:var(--bg);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  padding:13px 18px;z-index:140;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:calc(100vw - 40px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}




/* ---------- pro ---------- */
.top-right{display:flex;align-items:center;gap:12px}
.pro-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  padding:7px 12px;border:1px solid var(--line);color:var(--dim);
}
.pro-btn:active{background:var(--panel)}
.pro-btn.on{color:var(--text);border-color:var(--text)}

.pro-body{padding:20px}
.pro-lede{font-size:14.5px;color:var(--dim);line-height:1.5;margin-bottom:20px}

.pro-list{border-top:1px solid var(--line)}
.pro-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line-2);
}
.pro-row b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pro-row span{
  font-family:var(--mono);font-size:11px;color:var(--dimmer);text-align:right;
}

.pro-soon{
  margin-top:16px;padding:12px 14px;border:1px solid #3A1310;
  font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--red);
}

.pro-buys{display:grid;gap:10px;margin-top:20px}
.pro-buy{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;
  padding:15px 16px;border:1px solid var(--line);text-align:left;
}
.pro-buy:active{background:var(--panel)}
.pro-buy.lifetime{border-color:var(--text)}
.pb-name{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--text);
}
.pb-price{
  grid-row:1 / span 2;align-self:center;
  font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.pb-note{font-family:var(--mono);font-size:10.5px;color:var(--dimmer)}

.pro-restore{width:100%;margin-top:18px}

/* ---------- install banner ---------- */
.install{
  display:flex;align-items:center;gap:12px;
  margin-top:26px;padding:15px 16px;
  border:1px solid var(--line);background:var(--panel);
}
.install-txt{flex:1;min-width:0}
.install-txt b{
  display:block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--text);
}
.install-txt span{
  display:block;margin-top:4px;font-family:var(--mono);
  font-size:11px;color:var(--dim);line-height:1.4;
}
.install-go{flex:none;padding:11px 16px}
.install-x{
  flex:none;width:32px;height:32px;color:var(--dimmer);font-size:14px;
}
.install-x:active{color:var(--text)}

/* ---------- backup row ---------- */
.backup{
  display:flex;gap:10px;margin-top:26px;
}
.linkbtn{
  flex:1;padding:13px;border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--dim);
}
.linkbtn:active{background:var(--panel);color:var(--text)}
.footer-note .warnline{
  margin-top:14px;color:var(--red);opacity:.8;
}
@media (min-width:620px){
  .backup{justify-content:flex-start}
  .linkbtn{flex:none;padding:11px 20px}
}

/* ---------- desktop ---------- */
@media (min-width:620px){
  body{padding-bottom:40px}
  .strip{grid-template-columns:repeat(4,1fr)}
  .toolbar{padding:24px 0 0}
  #btn-add{
    position:static;max-width:none;margin:0;
    padding:12px 24px;flex:none;
  }
  .filters{width:auto;margin-left:auto;flex:none}
  .chip{flex:none;padding:11px 16px}
  .item{grid-template-columns:1fr auto auto;align-items:center;padding:16px 0}
  .i-act{grid-column:auto;margin-top:0;gap:6px}
  .icon-btn{flex:none;padding:9px 12px}
  .modal{align-items:center;padding:24px}
  .modal-panel{max-width:440px;border:1px solid var(--line)}
  .toast{bottom:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}