.ssf-wrap{
  --primary:#0b5ed7;--dark:#17324d;--light:#f4f7fb;--border:#d8e0ea;--danger:#c62828;--success:#16803c;
  font-family:Arial,Helvetica,sans-serif;color:#1f2937;background:var(--light);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.ssf-wrap *{box-sizing:border-box}
.ssf-wrap .container{max-width:1250px;margin:25px auto;padding:0 18px}
.ssf-wrap .header{background:linear-gradient(135deg,#0b5ed7,#17324d);color:#fff;padding:25px;border-radius:14px;margin-bottom:18px}
.ssf-wrap .header h1{margin:0 0 7px;font-size:27px}
.ssf-wrap .header p{margin:0;opacity:.9}
.ssf-wrap .card{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:16px;overflow:hidden;box-shadow:0 2px 8px #0000000b}
.ssf-wrap .card h2{margin:0;padding:14px 18px;background:#eef5ff;color:var(--dark);font-size:19px;border-bottom:1px solid var(--border)}
.ssf-wrap .content{padding:18px}
.ssf-wrap .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ssf-wrap .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ssf-wrap .field{display:flex;flex-direction:column;gap:6px}
.ssf-wrap label{font-weight:600;font-size:13px}
.ssf-wrap input,.ssf-wrap select,.ssf-wrap textarea{width:100%;padding:10px 11px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;font:inherit;min-height:44px}
.ssf-wrap textarea{min-height:80px;resize:vertical}
.ssf-wrap fieldset{border:1px solid var(--border);border-radius:9px;padding:12px;margin:12px 0}
.ssf-wrap legend{font-weight:700;padding:0 7px;color:var(--dark)}
.ssf-wrap .options{display:flex;flex-wrap:wrap;gap:12px}
.ssf-wrap .options label{font-weight:500;display:flex;align-items:center;gap:6px}
.ssf-wrap .options input{width:auto;min-height:0}
.ssf-wrap table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.ssf-wrap th,.ssf-wrap td{border:1px solid var(--border);padding:8px;text-align:left;vertical-align:middle}
.ssf-wrap th{background:#f1f5f9;white-space:nowrap}
.ssf-wrap td input,.ssf-wrap td select{padding:7px;min-height:38px}
.ssf-wrap .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.ssf-wrap .table-scroll table{min-width:520px}
.ssf-wrap .actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;z-index:10}
.ssf-wrap button{border:0;border-radius:8px;padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}
.ssf-wrap .primary{background:var(--primary);color:#fff}
.ssf-wrap .secondary{background:#e7edf5;color:#17324d}
.ssf-wrap .success{background:var(--success);color:#fff}
.ssf-wrap .danger{background:var(--danger);color:#fff}
.ssf-wrap .small{font-size:12px;color:#64748b}
.ssf-wrap .filebox{border:2px dashed #b9c8dc;padding:14px;border-radius:9px;background:#fafcff}
.ssf-wrap .preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.ssf-wrap .preview img{width:100%;height:120px;object-fit:cover;border-radius:7px;border:1px solid var(--border)}
.ssf-wrap .badge{display:inline-block;background:#e8f2ff;color:#0754a6;padding:4px 8px;border-radius:99px;font-size:12px}

.ssf-banner{max-width:1250px;margin:0 auto 14px;padding:14px 16px;border-radius:10px;font-weight:600;font-size:14px}
.ssf-banner.ssf-ok{background:#e8f7ee;color:#16803c;border:1px solid #b7e4c7}
.ssf-banner.ssf-err{background:#fdecec;color:#c62828;border:1px solid #f5c2c2}
.ssf-banner.ssf-loading{background:#eef5ff;color:#0754a6;border:1px solid #cfe2ff}

.ssf-wrap button:disabled{opacity:.6;cursor:not-allowed}
.ssf-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:ssf-spin .7s linear infinite;margin-right:7px;vertical-align:-2px}
.ssf-banner .ssf-spinner{border-color:rgba(7,84,166,.3);border-top-color:#0754a6}
@keyframes ssf-spin{to{transform:rotate(360deg)}}

@media(max-width:850px){
  .ssf-wrap .grid,.ssf-wrap .grid2{grid-template-columns:1fr}
  .ssf-wrap .preview{grid-template-columns:repeat(2,1fr)}
  .ssf-wrap .header h1{font-size:21px}
  .ssf-wrap .header p{font-size:13px}
  .ssf-wrap .actions{justify-content:stretch}
  .ssf-wrap .actions button{flex:1 1 45%}
  .ssf-wrap .actions #ssfSubmitBtn{flex:1 1 100%;order:99}
  .ssf-wrap .container{padding:0 12px;margin:14px auto}
  .ssf-wrap .content{padding:14px}
}
@media(max-width:480px){
  .ssf-wrap .preview{grid-template-columns:repeat(2,1fr)}
  .ssf-wrap .actions button{flex:1 1 100%}
}
.ssf-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.ssf-overlay-box{background:#fff;border-radius:14px;max-width:820px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 50px #0000004d}
.ssf-overlay-head{padding:18px 20px 8px}
.ssf-overlay-head h3{margin:0 0 4px;color:var(--dark)}
.ssf-preview-frame{flex:1 1 auto;width:100%;min-height:300px;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ssf-file-summary{padding:10px 20px;font-size:13px;color:#475569;max-height:110px;overflow-y:auto}
.ssf-overlay-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}
#ssfSendStatus{padding:0 20px 10px}
@media(max-width:600px){
  .ssf-overlay-box{max-height:96vh}
  .ssf-overlay-actions{flex-wrap:wrap}
  .ssf-overlay-actions button{flex:1 1 100%}
}
@media print{
  .ssf-wrap{background:#fff}
  .ssf-wrap .actions,.ssf-banner{display:none}
  .ssf-wrap .card{box-shadow:none;break-inside:avoid}
  .ssf-wrap .container{max-width:none}
  .ssf-wrap .filebox{display:none}
}