  .popup {
    position:fixed; inset:0; display:none; justify-content:center; align-items:center;
    background:rgba(2,6,23,0.45); z-index:9999;
  }
  .popup-content {
    width:420px; max-width:94%; background:#fff; padding:20px 18px; border-radius:10px;
    box-shadow:0 10px 30px rgba(2,6,23,0.18); position:relative;
  }
  .popup-content h2 { margin:0 0 12px; font-size:20px; color:#0b1220; }
  .popup-content input[type="text"], .popup-content textarea {
    width:100%; padding:10px; margin:8px 0; border:1px solid #ddd; border-radius:6px;
    font-size:14px; box-sizing:border-box;
  }
  .file-row { display:flex; gap:10px; align-items:center; margin:6px 0 0; }
  .file-label {
    display:inline-block; padding:8px 10px; background:#eef2ff; border-radius:6px; cursor:pointer;
    border:1px dashed #c7d2fe; font-size:14px; color:#3730a3;
  }
  .file-input { display:none; }

  /* Preview box */
  .preview { margin-top:12px; display:flex; gap:12px; align-items:center; }
  .img-wrap {
    position:relative; width:100px; height:100px; flex:0 0 100px; border-radius:8px;
    overflow:hidden; box-shadow:0 6px 16px rgba(2,6,23,0.08); background:#fafafa;
    display:flex; align-items:center; justify-content:center;
  }
  .img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

  /* Remove icon */
  .remove-img {
    position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%;
    border:none; background:rgba(0,0,0,0.6); color:#fff; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,0.25);
  }
  .remove-img:focus { outline:2px solid #fff; box-shadow:0 0 0 3px rgba(37,99,235,0.18); }

  .filename { font-size:13px; color:#334155; max-width:200px; word-break:break-all; }
  .submit-btn { margin-top:14px; background:#10b981; color:#fff; width:100%; padding:12px; border:0; border-radius:8px; cursor:pointer; font-weight:600; }
  .close { position:absolute; top:10px; right:12px; font-size:20px; color:#475569; border:none; background:transparent; cursor:pointer; }

  @media (max-width:420px){ .img-wrap{ width:86px; height:86px; } }
    :root{
      --accent:#ff7b00;
      --bg-overlay: rgba(2,6,23,0.75);
      --card-bg: #fff;
      --radius: 18px;
    }
    body { font-family: "Inter", system-ui, Arial, sans-serif; margin:0; background:#f4f6fb; }

    button.btn-open {
      margin:28px;
      padding:12px 18px;
      background:var(--accent);
      color:#fff;
      border:0; border-radius:10px;
      cursor:pointer; font-weight:600;
      box-shadow:0 8px 24px rgba(255,123,0,0.18);
    }

    /* popup overlay */
    .popup {
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      background: var(--bg-overlay); z-index:9999; padding:24px;
    }

    /* dialog */
    .dialog {
      width:100%; max-width:960px; height:auto; display:flex; border-radius:var(--radius);
      overflow:hidden; box-shadow:0 20px 60px rgba(2,6,23,0.6); background:var(--card-bg);
      transform:translateY(10px); animation:dialogIn .28s ease;
    }
    @keyframes dialogIn { from { opacity:0; transform: translateY(22px) scale(.995) } to { opacity:1; transform:none } }

    /* left: image column */
    .col-left{
      flex:1; min-width:300px; background-image: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.08)),
        url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80');
      background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
      color:#fff; padding:28px; position:relative;
    }
    .col-left .hero {
      text-align:center; font-weight:700; text-shadow: 0 6px 30px rgba(0,0,0,0.45);
      font-size:20px; line-height:1.25;
    }
    .col-left::after{
      content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,8,20,0.15), rgba(6,8,20,0.2));
    }
    .col-left .hero { position:relative; z-index:1; }

    /* right: form column */
    .col-right{ flex:1; padding:28px 30px; background: linear-gradient(180deg,#ffffff,#fbfbfd); position:relative; }

    .close-btn {
      position:absolute; top:14px; right:14px; background:#fff; border:0; width:36px; height:36px;
      border-radius:50%; box-shadow:0 6px 18px rgba(2,6,23,0.08); cursor:pointer; font-size:18px;
    }

    h2.title { margin:6px 0 8px; font-size:20px; color:#07123a; }
    p.sub { margin:0 0 18px; color:#475569; font-size:14px; }

    .form-row { display:block; gap:12px; }

    input[type="text"], textarea, .file-label {
      width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px; border:1px solid #e6e9f0;
      font-size:14px; color:#0b1220; background:#fff;
    }
    textarea { resize:vertical; min-height:96px; }

    /* file label */
    .file-area { display:flex; gap:10px; align-items:center; margin-top:8px; }
    .file-label {
      display:inline-block; cursor:pointer; background:#f1f5f9; color:#0b1220; border:1px dashed #dbe7ff;
      padding:10px 12px; border-radius:10px; text-align:center; font-weight:600;
    }
    .file-label:focus { outline:3px solid rgba(37,99,235,0.12); }

    /* preview area */
    .preview-area { margin-top:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

    .preview-thumb {
      width:110px; height:110px; border-radius:10px; position:relative; overflow:hidden;
      background:#f8fafc; box-shadow: 0 10px 28px rgba(2,6,23,0.06); display:flex; align-items:center; justify-content:center;
    }
    .preview-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

    /* remove icon */
    .remove-btn {
      position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:0;
      background:rgba(0,0,0,0.6); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-weight:700; box-shadow:0 6px 18px rgba(2,6,23,0.25);
    }
    .remove-btn:focus { outline:3px solid rgba(255,255,255,0.12); }

    .filename { font-size:13px; color:#334155; max-width:220px; word-break:break-all; }

    .submit-btn { margin-top:16px; padding:12px 16px; border-radius:10px; border:0; background:var(--accent);
      color:#fff; font-weight:700; cursor:pointer; width:100%; box-shadow:0 10px 30px rgba(255,123,0,0.12); }

    .success-box { display:none; margin-top:14px; padding:12px; background:#ecfdf5; color:#065f46; border-radius:10px; font-weight:600; text-align:center; }

    @media (max-width:880px){
      .dialog{ flex-direction:column; max-width:520px; }
      .col-left{ min-height:160px; height:160px; }
      .preview-thumb { width:88px; height:88px; }
    }
    .help-block {color:red;}
	     #myModalquick .modal-dialog .modal-content {
        border-radius: 10px;
    }
    #myModalquick .modal-dialog .modal-content .modal-body {
        padding:0;
    }
    #myModalquick .modal-dialog .modal-content .modal-header {
      border-bottom: 1px solid #fff;
      background-color: #000;
    }
    #myModalquick .modal-dialog .modal-content .modal-header .close {
      color: #fff;
    }
