:root{
      --bg:#0b0d12;
      --card:rgba(255,255,255,.06);
      --card2:rgba(255,255,255,.09);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.62);
      --border:rgba(255,255,255,.12);
      --shadow:0 18px 60px rgba(0,0,0,.55);
      --accent:#4da3ff;
      --good:#34d399;
      --warn:#f59e0b;
      --bad:#ef4444;
      --radius:18px;
      --mono:"Vazir Variable" , euro;
      --sans: "Vazir Variable" , euro;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
    }
    a{color:inherit}
    .wrap{
      max-width:1100px;
      margin:0 auto;
      padding:22px 14px 40px;
    }
    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .brand{
      display:flex;align-items:center;gap:10px;
      user-select:none;
    }
    .mark{
      width:34px;height:34px;border-radius:12px;
      background-color: #262626;
      box-shadow: 0 10px 28px rgba(0,0,0,.28);
    }
    .brand h1{
      font-size:18px;margin:0;letter-spacing:.2px;
    }
    .brand p{
      margin:2px 0 0;font-size:12px;color:var(--muted)
    }
    .actions{display:flex;gap:8px;flex-wrap:wrap}
    .btn{
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      font-family: Vazir Variable , euro;
      padding:9px 12px;
      border-radius:14px;
      box-shadow: var(--shadow);
      cursor:pointer;
      font-size:13px;
      display:inline-flex;align-items:center;gap:8px;
      transition: transform .12s ease, background .12s ease;
    }
    .btn:hover{    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);}
    .btn:active{transform: translateY(0)}
    .btn.primary{
      border-color: rgba(77,163,255,.45);
      background: linear-gradient(135deg, rgba(77,163,255,.18), rgba(52,211,153,.10));
    }
    .grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:12px;
    }
    @media (max-width: 960px){
      .grid{grid-template-columns:1fr}
    }
    .card{
      border:1px solid var(--border);
      background:var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .hd{
      padding:14px 14px 12px;
      border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;gap:10px;
    }
    .card .hd .title{
      display:flex;flex-direction:column;gap:3px;
    }
    .card .hd .title b{font-size:14px}
    .card .hd .title span{font-size:12px;color:var(--muted)}
    .card .bd{padding:14px}
    .drop{
      border:1.5px dashed rgba(77,163,255,.55);
      background: linear-gradient(135deg, rgba(77,163,255,.10), rgba(255,255,255,.04));
      border-radius:16px;
      padding:18px;
      min-height:170px;
      display:flex;
      flex-direction:column;
      gap:10px;
      justify-content:center;
      align-items:center;
      text-align:center;
      transition: background .15s ease, transform .12s ease, border-color .15s ease;
    }
    .drop.dragover{
      transform: translateY(-1px);
      border-color: rgba(52,211,153,.65);
      background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(77,163,255,.06));
    }
    .drop .big{font-size:14px}
    .drop .small{font-size:12px;color:var(--muted);max-width:520px;line-height:1.5}
    .fileInput{
      display:none;
    }
    .pillRow{
      display:flex;flex-wrap:wrap;gap:6px;justify-content:center
    }
    .pill{
      font-family:var(--mono);
      font-size:11px;
      padding:6px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--muted);
    }

    .list{
      display:flex;flex-direction:column;gap:10px;
    }
    .item{
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      border-radius:16px;
      padding:10px;
      display:flex;gap:10px;align-items:center;
      cursor:pointer;
      transition: background .12s ease, transform .12s ease;
    }
    .item:hover{background:rgba(255,255,255,.06); transform: translateY(-1px)}
    .thumb{
      width:44px;height:44px;border-radius:12px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      display:grid;place-items:center;
      overflow:hidden; flex:0 0 auto;
    }
    .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .meta{
      flex:1 1 auto;
      min-width:0;
    }
    .meta .top{
      display:flex;justify-content:space-between;gap:8px;align-items:center;
    }
    .meta .name{
      font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
    }
    .meta .sub{
      font-size:12px;color:var(--muted);margin-top:3px;
      display:flex;gap:10px;flex-wrap:wrap
    }
    .badge{
      font-family:var(--mono);
      font-size:11px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      padding:4px 8px;border-radius:999px;color:var(--muted)
    }
    .badge.ok{color:rgba(52,211,153,.95); border-color:rgba(52,211,153,.35)}
    .badge.warn{color:rgba(245,158,11,.95); border-color:rgba(245,158,11,.35)}
    .badge.bad{color:rgba(239,68,68,.95); border-color:rgba(239,68,68,.35)}

    .preview{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    .previewBox{
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      border-radius:18px;
      overflow:hidden;
      min-height:220px;
      display:grid;
      place-items:center;
    }
    .previewBox img{
      max-width:100%;
      max-height:340px;
      display:block;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 8px;
    }
    td{
      vertical-align:top;
      padding:10px 10px;
      background:rgba(255,255,255,.03);
      border:1px solid var(--border);
    }
    td.k{
      width:42%;
      border-radius:14px 0 0 14px;
      color:var(--muted);
      font-size:12px;
    }
    [dir="rtl"] td.k{border-radius:0 14px 14px 0}
    td.v{
      border-radius:0 14px 14px 0;
      font-size:12px;
      font-family:var(--mono);
      word-break:break-word;
    }
    [dir="rtl"] td.v{border-radius:14px 0 0 14px}
    .rowBtns{display:flex;gap:8px;flex-wrap:wrap}
    .hint{font-size:12px;color:var(--muted);line-height:1.6;margin-top:8px}
    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background:rgba(0,0,0,.68);
      color:#fff;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 18px 60px rgba(0,0,0,.45);
      font-size:12px;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      z-index:999;
      max-width:min(92vw, 700px);
    }
    .toast{background:rgba(15,23,42,.86)}
    .toast.show{opacity:1; transform:translateX(-50%) translateY(-2px)}
    .sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}