
:root {
  --ios-bg:#f5f5f7;
  --ios-card:rgba(255,255,255,.92);
  --ios-text:#1d1d1f;
  --ios-muted:#6e6e73;
  --ios-border:rgba(60,60,67,.14);
  --ios-border-strong:rgba(60,60,67,.22);
  --ios-blue:#007aff;
  --ios-green:#34c759;
  --ios-red:#ff3b30;
  --ios-orange:#ff9500;
  --ios-shadow:0 18px 50px rgba(0,0,0,.08);
  --ios-shadow-soft:0 8px 28px rgba(0,0,0,.06);
  --ios-radius:24px;
  --ios-radius-sm:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--ios-bg)}
body{
  background:radial-gradient(circle at top left,rgba(0,122,255,.10),transparent 34rem),
             radial-gradient(circle at top right,rgba(255,149,0,.08),transparent 30rem),
             var(--ios-bg)!important;
  color:var(--ios-text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif!important;
  letter-spacing:-.01em;
}
.page,body>.card{animation:iosFadeIn .22s ease-out}
@keyframes iosFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card{
  background:var(--ios-card)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:var(--ios-radius)!important;
  box-shadow:var(--ios-shadow)!important;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
h1,h2,h3{color:var(--ios-text)!important;letter-spacing:-.04em;font-weight:750!important}
h1{line-height:1.04}
p,.subtitle,.subtext,.hint{color:var(--ios-muted)!important}
.userbox,.notice,.template-card,.target-box,.preview-box,.field,.meta,.schedule-box,.filter-box,.empty,.table-wrap{
  background:rgba(255,255,255,.72)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:var(--ios-radius-sm)!important;
  box-shadow:none!important;
}
input,textarea,select{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.9)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:14px!important;
  color:var(--ios-text)!important;
  outline:none!important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ios-muted) 50%),linear-gradient(135deg,var(--ios-muted) 50%,transparent 50%)!important;
  background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px)!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
  padding-right:40px!important;
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(0,122,255,.65)!important;
  box-shadow:0 0 0 4px rgba(0,122,255,.12)!important;
  background:#fff!important;
}
input[readonly]{background:rgba(242,242,247,.95)!important;color:#3a3a3c!important}
label{color:var(--ios-text)!important;font-weight:650!important;letter-spacing:-.015em}
button,a{
  border-radius:999px!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  box-shadow:none!important;
  transform:translateZ(0);
  transition:transform .12s ease,background .12s ease,opacity .12s ease;
}
button:hover,a:hover{transform:translateY(-1px);opacity:.94}
button:active,a:active{transform:translateY(0) scale(.99);opacity:.88}
a,button,.secondary-btn{background:var(--ios-blue)!important;color:#fff!important}
a.gray,.gray,button.gray{background:rgba(118,118,128,.16)!important;color:var(--ios-text)!important}
.danger,button.danger{background:var(--ios-red)!important;color:#fff!important}
.save-btn{background:var(--ios-green)!important;color:#fff!important}
.target-item{
  border-radius:16px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid var(--ios-border)!important;
  transition:background .14s ease,border-color .14s ease;
}
.target-item:has(input:checked){background:rgba(0,122,255,.10)!important;border-color:rgba(0,122,255,.35)!important}
input[type=checkbox]{
  appearance:none!important;-webkit-appearance:none!important;
  width:22px!important;height:22px!important;border-radius:7px!important;
  border:1.5px solid var(--ios-border-strong)!important;
  background:#fff!important;position:relative;display:inline-block;flex:0 0 auto;
}
input[type=checkbox]:checked{background:var(--ios-blue)!important;border-color:var(--ios-blue)!important}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.success,.alert.success{background:rgba(52,199,89,.12)!important;color:#0b6b2b!important;border:1px solid rgba(52,199,89,.22)!important;border-radius:var(--ios-radius-sm)!important}
.warning,.alert.warning{background:rgba(255,149,0,.12)!important;color:#8a4b00!important;border:1px solid rgba(255,149,0,.25)!important;border-radius:var(--ios-radius-sm)!important}
.error,.alert.error{background:rgba(255,59,48,.11)!important;color:#9f1f18!important;border:1px solid rgba(255,59,48,.22)!important;border-radius:var(--ios-radius-sm)!important}
.info{background:rgba(0,122,255,.10)!important;color:#004b93!important;border:1px solid rgba(0,122,255,.22)!important;border-radius:var(--ios-radius-sm)!important}
.badge,.draft-badge{border-radius:999px!important;border:0!important;background:rgba(0,122,255,.12)!important;color:var(--ios-blue)!important;font-weight:750!important}
.badge-posted,.posted{background:rgba(52,199,89,.14)!important;color:#0b6b2b!important}
.failed{background:rgba(255,59,48,.12)!important;color:#9f1f18!important}
.cancelled{background:rgba(118,118,128,.14)!important;color:#3a3a3c!important}
table{background:rgba(255,255,255,.72)!important}
th{background:rgba(242,242,247,.88)!important;color:#3a3a3c!important;font-weight:750!important}
td,th{border-bottom:1px solid var(--ios-border)!important}
code{background:rgba(118,118,128,.12)!important;color:#3a3a3c!important;border-radius:8px!important}
img{box-shadow:var(--ios-shadow-soft)}
.logo-preview,.signature-preview{box-shadow:none!important}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:rgba(118,118,128,.10);border-radius:999px}
::-webkit-scrollbar-thumb{background:rgba(118,118,128,.30);border-radius:999px}
@media(max-width:760px){
  body{padding:12px!important}
  .card{border-radius:22px!important}
  button,a{min-height:50px!important}
  .actions{gap:9px!important}
}
