@font-face{
      font-family:'Shabnam';
      src:url('/assets/Shabnam.woff') format('woff'),
          url('/assets/Shabnam.ttf') format('truetype');
      font-display:swap;
    }

    :root{
      --primary:#004c8c;
      --primary-dark:#00345f;
      --accent:#00c2a8;
      --bg:#f5f8fb;
      --card:#ffffff;
      --text:#142033;
      --muted:#667085;
      --soft:#eef5fa;
      --border:rgba(0,76,140,.14);
      --shadow:0 22px 55px rgba(0,76,140,.10);
      --shadow-hover:0 28px 70px rgba(0,76,140,.16);
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      min-height:100vh;
      font-family:'Shabnam',Tahoma,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 8%,rgba(0,194,168,.16),transparent 30%),
        radial-gradient(circle at 90% 2%,rgba(0,76,140,.12),transparent 34%),
        linear-gradient(180deg,#fff 0%,var(--bg) 100%);
    }

    a{text-decoration:none;color:inherit}
    button,input{font-family:inherit}

    .page{
      width:min(1180px,calc(100% - 32px));
      margin:0 auto;
      padding:26px 0 60px;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px 18px;
      border:1px solid var(--border);
      border-radius:26px;
      background:rgba(255,255,255,.82);
      backdrop-filter:blur(14px);
      box-shadow:var(--shadow);
      position:sticky;
      top:14px;
      z-index:20;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:13px;
    }

    .brand img{
      width:54px;
      height:54px;
      border-radius:18px;
      padding:7px;
      object-fit:contain;
      background:#fff;
      border:1px solid var(--border);
    }

    .brand-title{
      margin:0 0 4px;
      font-size:17px;
      font-weight:900;
      color:var(--primary);
    }

    .brand-sub{
      margin:0;
      color:var(--muted);
      font-size:12px;
    }

    .top-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 13px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(0,76,140,.055);
      color:var(--primary);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }

    .pill.accent{
      background:rgba(0,194,168,.12);
      border-color:rgba(0,194,168,.24);
    }

    .hero{
      margin-top:32px;
      display:grid;
      grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
      gap:22px;
    }

    .hero-card{
      position:relative;
      overflow:hidden;
      border-radius:36px;
      padding:46px;
      color:#fff;
      background:linear-gradient(135deg,rgba(0,52,95,.98),rgba(0,76,140,.94) 55%,rgba(0,194,168,.82));
      box-shadow:0 28px 80px rgba(0,76,140,.24);
      min-height:410px;
      display:flex;
      align-items:center;
    }

    .hero-card:before{
      content:"";
      position:absolute;
      inset:24px auto auto 26px;
      width:170px;
      height:170px;
      border-radius:50%;
      border:34px solid rgba(255,255,255,.08);
    }

    .hero-card:after{
      content:"";
      position:absolute;
      left:-80px;
      bottom:-95px;
      width:330px;
      height:330px;
      border-radius:50%;
      background:rgba(255,255,255,.08);
    }

    .hero-content{
      position:relative;
      z-index:1;
      max-width:760px;
    }

    .eyebrow{
      display:inline-flex;
      padding:8px 13px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.22);
      font-size:13px;
      font-weight:800;
      margin-bottom:18px;
    }

    h1{
      margin:0;
      font-size:clamp(32px,5vw,56px);
      line-height:1.34;
      letter-spacing:-1px;
    }

    .hero-desc{
      margin:18px 0 0;
      max-width:720px;
      color:rgba(255,255,255,.88);
      font-size:16px;
      line-height:2.05;
    }

    .hero-points{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:26px;
    }

    .hero-points span{
      padding:8px 12px;
      border-radius:999px;
      color:#fff;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      font-size:12px;
      font-weight:800;
    }

    .info-card,.panel{
      background:var(--card);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
    }

    .info-card{
      border-radius:36px;
      padding:30px;
      overflow:hidden;
    }

    .info-icon{
      width:88px;
      height:88px;
      padding:14px;
      border-radius:26px;
      background:linear-gradient(135deg,rgba(0,76,140,.08),rgba(0,194,168,.15));
      border:1px solid var(--border);
      object-fit:contain;
      margin-bottom:20px;
    }

    .info-card h2,.panel-title{
      color:var(--primary);
      line-height:1.55;
    }

    .info-card h2{
      margin:0 0 12px;
      font-size:23px;
    }

    .info-card p,.panel-desc{
      margin:0;
      color:var(--muted);
      line-height:1.95;
      font-size:14px;
    }

    .mini-stats{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-top:22px;
    }

    .mini-stat{
      padding:14px;
      border-radius:18px;
      background:var(--soft);
      border:1px solid rgba(0,76,140,.08);
    }

    .mini-stat strong{
      display:block;
      color:var(--primary);
      font-size:16px;
      margin-bottom:3px;
    }

    .mini-stat span{
      color:var(--muted);
      font-size:12px;
    }

    .main-grid{
      margin-top:22px;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);
      gap:22px;
      align-items:start;
    }

    .panel{
      border-radius:30px;
      padding:28px;
    }

    .panel-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin-bottom:20px;
    }

    .panel-title{
      margin:0 0 7px;
      font-size:22px;
    }

    .step-badge{
      min-width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:rgba(0,194,168,.12);
      color:var(--primary);
      border:1px solid rgba(0,194,168,.24);
      font-weight:900;
      font-size:13px;
    }

    .upload-zone{
      display:block;
      padding:34px 24px;
      border-radius:26px;
      border:2px dashed rgba(0,76,140,.26);
      background:linear-gradient(180deg,rgba(0,76,140,.025),rgba(0,194,168,.045));
      text-align:center;
      cursor:pointer;
      transition:.22s ease;
    }

    .upload-zone:hover,.upload-zone.is-ready{
      border-color:rgba(0,194,168,.70);
      background:rgba(0,194,168,.065);
      transform:translateY(-2px);
    }

    .upload-zone input{display:none}

    .upload-mark{
      width:72px;
      height:72px;
      margin:0 auto 16px;
      display:grid;
      place-items:center;
      border-radius:24px;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      color:#fff;
      font-size:34px;
      font-weight:900;
      box-shadow:0 16px 32px rgba(0,76,140,.18);
    }

    .upload-zone strong{
      display:block;
      color:var(--primary);
      font-size:18px;
      margin-bottom:8px;
    }

    .upload-zone small{
      display:block;
      color:var(--muted);
      line-height:1.9;
      font-size:13px;
    }

    .file-chip{
      display:none;
      margin-top:14px;
      padding:13px 14px;
      border-radius:18px;
      background:rgba(0,194,168,.09);
      border:1px solid rgba(0,194,168,.24);
      color:var(--primary);
      font-weight:800;
      font-size:13px;
      line-height:1.7;
    }

    .quality-grid{
      margin-top:22px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }

    .quality-card{
      position:relative;
      cursor:pointer;
    }

    .quality-card input{
      position:absolute;
      opacity:0;
    }

    .quality-inner{
      min-height:122px;
      padding:16px;
      border-radius:22px;
      border:1px solid var(--border);
      background:#fff;
      transition:.2s ease;
    }

    .quality-card input:checked + .quality-inner{
      border-color:rgba(0,194,168,.75);
      box-shadow:0 0 0 4px rgba(0,194,168,.10);
      background:linear-gradient(180deg,#fff,rgba(0,194,168,.045));
    }

    .quality-inner b{
      display:block;
      color:var(--primary);
      margin-bottom:7px;
      font-size:14px;
      line-height:1.6;
    }

    .quality-inner span{
      color:var(--muted);
      font-size:12px;
      line-height:1.8;
    }

    .actions{
      margin-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .btn{
      border:0;
      min-height:50px;
      padding:0 22px;
      border-radius:17px;
      cursor:pointer;
      font-size:14px;
      font-weight:900;
      transition:.2s ease;
    }

    .btn-primary{
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      color:#fff;
      box-shadow:0 16px 34px rgba(0,76,140,.18);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-hover);
    }

    .btn-soft{
      background:rgba(0,76,140,.06);
      color:var(--primary);
      border:1px solid var(--border);
    }

    .progress-wrap{
      margin-top:18px;
      padding:14px;
      border-radius:20px;
      background:var(--soft);
      border:1px solid rgba(0,76,140,.08);
    }

    .progress-label{
      display:flex;
      justify-content:space-between;
      color:var(--muted);
      font-size:12px;
      margin-bottom:10px;
    }

    .progress-track{
      height:10px;
      border-radius:999px;
      background:rgba(0,76,140,.10);
      overflow:hidden;
    }

    .progress-bar{
      width:0%;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      transition:width .3s ease;
    }

    .status-list{
      margin-top:16px;
      border:1px solid rgba(0,76,140,.10);
      border-radius:22px;
      overflow:hidden;
      background:#fff;
    }

    .status-row{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:14px 16px;
      border-bottom:1px solid rgba(0,76,140,.08);
      font-size:13px;
    }

    .status-row:last-child{border-bottom:0}
    .status-row span:first-child{color:var(--muted)}
    .status-row span:last-child{color:var(--primary);font-weight:900;text-align:left}

    .preview-box{
      min-height:260px;
      border-radius:26px;
      border:1px solid var(--border);
      background:linear-gradient(135deg,rgba(0,76,140,.075),rgba(0,194,168,.10));
      display:grid;
      place-items:center;
      text-align:center;
      padding:26px;
      color:var(--muted);
      line-height:2;
      overflow:hidden;
    }

    .preview-state img{
      width:76px;
      height:76px;
      object-fit:contain;
      opacity:.88;
      margin-bottom:10px;
    }

    .workflow{
      margin-top:18px;
      display:grid;
      gap:10px;
    }

    .workflow-item{
      display:flex;
      gap:11px;
      align-items:flex-start;
      padding:12px;
      border-radius:18px;
      background:rgba(0,76,140,.035);
      border:1px solid rgba(0,76,140,.07);
    }

    .workflow-num{
      flex:0 0 28px;
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:rgba(0,194,168,.12);
      color:var(--primary);
      font-size:12px;
      font-weight:900;
    }

    .workflow-item b{
      display:block;
      color:var(--primary);
      font-size:13px;
      margin-bottom:3px;
    }

    .workflow-item span{
      color:var(--muted);
      font-size:12px;
      line-height:1.7;
    }

    .note{
      margin-top:18px;
      padding:15px;
      border-radius:20px;
      background:rgba(0,194,168,.08);
      border:1px solid rgba(0,194,168,.20);
      color:var(--primary);
      line-height:1.85;
      font-size:13px;
    }

    .footer{
      margin-top:34px;
      color:var(--muted);
      text-align:center;
      font-size:13px;
      line-height:1.9;
    }

    @media(max-width:1020px){
      .hero,.main-grid{grid-template-columns:1fr}
    }

    @media(max-width:760px){
      .page{width:min(100% - 20px,1180px);padding-top:12px}
      .topbar{position:static;align-items:flex-start;flex-direction:column;border-radius:22px}
      .hero-card,.info-card,.panel{border-radius:24px;padding:22px}
      .hero-card{min-height:auto}
      .quality-grid,.mini-stats{grid-template-columns:1fr}
      .actions{display:grid}
      .btn{width:100%}
    }


.zip-mode-box{
  margin-top:22px;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,rgba(0,194,168,.035));
}
.zip-mode-box > label{
  display:block;
  color:var(--primary);
  font-weight:900;
  margin-bottom:12px;
}
.zip-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.zip-mode-card{
  position:relative;
  cursor:pointer;
}
.zip-mode-card input{
  position:absolute;
  opacity:0;
}
.zip-mode-card span{
  display:block;
  min-height:104px;
  padding:15px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  transition:.2s ease;
}
.zip-mode-card input:checked + span{
  border-color:rgba(0,194,168,.7);
  box-shadow:0 0 0 4px rgba(0,194,168,.10);
  background:linear-gradient(180deg,#fff,rgba(0,194,168,.055));
}
.zip-mode-card b{
  display:block;
  color:var(--primary);
  font-size:14px;
  margin-bottom:7px;
}
.zip-mode-card small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}
@media(max-width:760px){
  .zip-mode-grid{grid-template-columns:1fr}
}