/* Somantix — Wrapper Component CSS */

/* ═══════════════════════════════════════
   WRAPPER VIEW
   ═══════════════════════════════════════ */
#wrapper-view {
  --black:#e6edf3;--white:#0d1117;
  --g50:#0d1117;--g100:#161b22;--g200:#21262d;--g300:#30363d;
  --g400:#484f58;--g500:#8b949e;--g600:#c9d1d9;--g700:#e6edf3;
  --g800:#f0f6fc;--g900:#fff;
  --em:#059669;--eml:#10b981;--emd:#047857;--emp:#d1fae5;
  --red:#dc2626;--amber:#d97706;--blue:#3b82f6;
}
#wrapper-view.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;flex:1;}
#wrapper-view .serif{font-family:'Newsreader',Georgia,serif;font-weight:700;}
#wrapper-view .mono{font-family:'JetBrains Mono',monospace;}
#wrapper-view .wrap-subview{display:none;width:100%;max-width:700px;}
#wrapper-view .wrap-subview.active{display:flex;flex-direction:column;align-items:center;}

/* ── DROP ZONE ── */
#wrapper-view .dz-eyebrow{font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--em);margin-bottom:1rem;text-align:center;}
#wrapper-view .dz-headline{font-family:'Newsreader',serif;font-size:2.5rem;font-weight:600;line-height:1.1;color:var(--black);margin-bottom:.625rem;letter-spacing:-.02em;text-align:center;}
#wrapper-view .dz-sub{font-size:.9rem;color:var(--g500);margin-bottom:2rem;line-height:1.6;text-align:center;}
#wrapper-view .drop-zone{border:2px dashed var(--g200);border-radius:16px;padding:3rem 2rem;background:var(--white);cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden;width:100%;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
#wrapper-view .drop-zone::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(5,150,105,.02) 0%,transparent 50%);pointer-events:none;}
#wrapper-view .drop-zone:hover,#wrapper-view .drop-zone.drag-over{border-color:var(--em);background:#f0fdf9;transform:translateY(-2px);box-shadow:0 12px 40px rgba(5,150,105,.1),0 0 0 1px rgba(5,150,105,.08);}
#wrapper-view .dz-icon{width:44px;height:44px;margin:0 auto .875rem;color:var(--em);opacity:.8;display:block;}
#wrapper-view .dz-label{font-family:'Newsreader',serif;font-size:1.125rem;font-weight:500;color:var(--g700);margin-bottom:.35rem;}
#wrapper-view .dz-hint{font-size:.8rem;color:var(--g400);margin-bottom:1rem;}
#wrapper-view .dz-formats{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-bottom:1.125rem;}
#wrapper-view .fmt{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:500;background:var(--g100);color:var(--g600);padding:.2rem .55rem;border-radius:4px;letter-spacing:.04em;}
#wrapper-view .btn-browse{display:inline-block;background:var(--black);color:var(--white);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.7rem 1.75rem;border-radius:8px;cursor:pointer;border:none;transition:all .2s;}
#wrapper-view .btn-browse:hover{background:var(--em);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(5,150,105,.25);}
#wrapper-view .batch-hint{font-size:.75rem;color:var(--em);margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:.35rem;}

/* ── FILE QUEUE ── */
#wrapper-view .file-queue{width:100%;background:var(--white);border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.03);overflow:hidden;margin-top:1.5rem;}
#wrapper-view .fq-header{padding:.875rem 1.25rem;background:var(--g50);border-bottom:1.5px solid var(--g100);display:flex;align-items:center;justify-content:space-between;}
#wrapper-view .fq-title{font-family:'Newsreader',serif;font-size:1rem;font-weight:600;color:var(--black);}
#wrapper-view .fq-count{font-size:.75rem;color:var(--g500);}
#wrapper-view .fq-actions{display:flex;gap:.5rem;align-items:center;}
#wrapper-view .btn-sm{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px;cursor:pointer;transition:all .15s;border:1.5px solid var(--g200);background:var(--white);color:var(--g600);}
#wrapper-view .btn-sm:hover{border-color:var(--g400);color:var(--black);}
#wrapper-view .btn-sm.primary{background:var(--em);color:var(--white);border-color:var(--em);}
#wrapper-view .btn-sm.primary:hover{background:var(--emd);}
#wrapper-view .btn-sm.danger{border-color:var(--red);color:var(--red);}
#wrapper-view .btn-sm.danger:hover{background:var(--red);color:var(--white);}
#wrapper-view .fq-list{max-height:260px;overflow-y:auto;}
#wrapper-view .fq-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--g100);transition:background .15s;}
#wrapper-view .fq-item:last-child{border-bottom:none;}
#wrapper-view .fq-item:hover{background:var(--g50);}
#wrapper-view .fq-item.processing{background:#f0fdf9;}
#wrapper-view .fq-item.done{background:#f0fdf9;}
#wrapper-view .fq-item.error{background:#fef2f2;}
#wrapper-view .fq-cb{width:16px;height:16px;cursor:pointer;accent-color:var(--em);flex-shrink:0;}
#wrapper-view .fq-ext{width:34px;height:34px;background:var(--g100);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.5rem;font-weight:500;color:var(--g600);letter-spacing:.03em;text-transform:uppercase;}
#wrapper-view .fq-ext.done{background:var(--emp);color:var(--emd);}
#wrapper-view .fq-ext.error{background:#fee2e2;color:var(--red);}
#wrapper-view .fq-info{flex:1;min-width:0;}
#wrapper-view .fq-name{font-size:.8125rem;font-weight:500;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#wrapper-view .fq-size{font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:var(--g400);margin-top:1px;}
#wrapper-view .fq-status{flex-shrink:0;}
#wrapper-view .fq-badge{font-size:.625rem;font-weight:500;padding:.2rem .5rem;border-radius:4px;font-family:'Inter',sans-serif;}
#wrapper-view .fq-badge.pending{background:var(--g100);color:var(--g500);}
#wrapper-view .fq-badge.processing{background:#fef3c7;color:#92400e;}
#wrapper-view .fq-badge.done{background:var(--emp);color:var(--emd);}
#wrapper-view .fq-badge.error{background:#fee2e2;color:var(--red);}
#wrapper-view .fq-save{font-size:.75rem;font-weight:500;color:var(--em);background:none;border:none;cursor:pointer;padding:.2rem .4rem;border-radius:4px;transition:all .15s;font-family:'Inter',sans-serif;}
#wrapper-view .fq-save:hover{background:var(--emp);}
#wrapper-view .fq-remove{width:24px;height:24px;border-radius:5px;border:none;background:none;color:var(--g400);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:.875rem;}
#wrapper-view .fq-remove:hover{background:var(--g100);color:var(--red);}
#wrapper-view .fq-progress{height:2px;background:var(--g100);}
#wrapper-view .fq-progress-bar{height:100%;background:var(--em);transition:width .4s ease;width:0;}
#wrapper-view .fq-footer{padding:.875rem 1.25rem;border-top:1.5px solid var(--g100);display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
#wrapper-view .fq-add-more{font-size:.8rem;color:var(--em);background:none;border:1.5px dashed var(--g200);border-radius:7px;padding:.5rem .875rem;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;font-weight:500;}
#wrapper-view .fq-add-more:hover{border-color:var(--em);background:#f0fdf9;}

/* ── MODAL ── */
#wrapper-view .modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,10,.82);backdrop-filter:blur(6px);z-index:200;align-items:flex-start;justify-content:center;padding:1.25rem 1rem;overflow-y:auto;}
#wrapper-view .modal-overlay.open{display:flex;}
#wrapper-view .modal{background:var(--white);border-radius:18px;width:100%;max-width:600px;box-shadow:0 32px 80px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.06);animation:modalIn .25s ease;margin:auto;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* MODAL HEADER */
#wrapper-view .mhd{padding:1.25rem 1.5rem 0;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
#wrapper-view .mfi{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;}
#wrapper-view .mfi-ext{width:40px;height:40px;background:var(--g100);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:500;color:var(--emd);letter-spacing:.03em;text-transform:uppercase;}
#wrapper-view .mfi-name{font-family:'Newsreader',serif;font-size:.9375rem;font-weight:600;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#wrapper-view .mfi-meta{font-size:.625rem;color:var(--g400);margin-top:2px;font-family:'JetBrains Mono',monospace;}
#wrapper-view .mfi-batch{font-size:.6875rem;font-weight:500;color:var(--em);background:var(--emp);padding:.2rem .5rem;border-radius:4px;font-family:'Inter',sans-serif;}
#wrapper-view .modal-close{width:28px;height:28px;border-radius:7px;border:none;background:var(--g100);color:var(--g500);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:.875rem;}
#wrapper-view .modal-close:hover{background:var(--g200);color:var(--black);}

/* HASH BAR */
#wrapper-view .hash-bar{margin:.75rem 1.5rem 0;background:var(--g900);border-radius:6px;padding:.5rem .875rem;display:flex;align-items:center;gap:.5rem;}
#wrapper-view .hash-lbl{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--eml);flex-shrink:0;text-transform:uppercase;letter-spacing:.06em;}
#wrapper-view .hash-val{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--g400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}

/* MODAL BODY */
#wrapper-view .mbody{padding:1rem 1.5rem;}

/* DECL SECTION */
#wrapper-view .ds{border:1.5px solid var(--g100);border-radius:10px;overflow:hidden;margin-bottom:.75rem;}
#wrapper-view .ds-hd{background:var(--g50);padding:.5625rem .9375rem;display:flex;align-items:center;gap:.5rem;border-bottom:1.5px solid var(--g100);cursor:pointer;user-select:none;transition:background .15s;}
#wrapper-view .ds-hd:hover{background:var(--g100);}
#wrapper-view .ds-hd.collapsible .ds-chevron{transition:transform .2s;}
#wrapper-view .ds-hd.collapsed .ds-chevron{transform:rotate(-90deg);}
#wrapper-view .ds-ico{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
#wrapper-view .ds-ico.video{background:#ede9fe;}#wrapper-view .ds-ico.audio{background:#fef3c7;}#wrapper-view .ds-ico.person{background:#dbeafe;}#wrapper-view .ds-ico.provider{background:var(--emp);}#wrapper-view .ds-ico.tos{background:#fce7f3;}
#wrapper-view .ds-title{font-size:.8rem;font-weight:600;color:var(--black);}
#wrapper-view .ds-sub{font-size:.5625rem;color:var(--g400);margin-left:auto;margin-right:.375rem;}
#wrapper-view .ds-chevron{color:var(--g400);flex-shrink:0;}
#wrapper-view .ds-body{padding:.875rem .9375rem;display:flex;flex-direction:column;gap:.625rem;}
#wrapper-view .ds-body.collapsed{display:none;}

/* SUBSECTION */
#wrapper-view .sub-lbl{font-size:.5625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);padding-bottom:.2rem;border-bottom:1px solid var(--g100);margin-bottom:.2rem;}
#wrapper-view .sub-div{height:1px;background:var(--g100);margin:.125rem 0;}

/* CHECKBOXES */
#wrapper-view .cb-grid{display:flex;flex-wrap:wrap;gap:.35rem;}
#wrapper-view .cb-opt{display:flex;align-items:center;gap:.375rem;padding:.375rem .7rem;border:1.5px solid var(--g200);border-radius:6px;cursor:pointer;transition:all .15s;background:var(--white);user-select:none;}
#wrapper-view .cb-opt:hover{border-color:var(--g300);background:var(--g50);}
#wrapper-view .cb-opt.checked{border-color:var(--em);background:#f0fdf9;}
#wrapper-view .cb-opt input[type=checkbox]{width:13px;height:13px;border:1.5px solid var(--g300);border-radius:3px;background:var(--white);cursor:pointer;appearance:none;-webkit-appearance:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;pointer-events:none;}
#wrapper-view .cb-opt.checked input[type=checkbox]{background:var(--em);border-color:var(--em);}
#wrapper-view .cb-opt.checked input[type=checkbox]::after{content:'';display:block;width:3px;height:5px;border:1.5px solid white;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px);}
#wrapper-view .cb-lbl{font-size:.75rem;color:var(--g700);transition:color .15s;}
#wrapper-view .cb-opt.checked .cb-lbl{color:var(--emd);font-weight:500;}

/* FIELDS */
#wrapper-view .fi{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--black);background:var(--white);border:1.5px solid var(--g200);border-radius:7px;padding:.4375rem .7rem;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;-webkit-appearance:none;}
#wrapper-view .fi:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(5,150,105,.1);}
#wrapper-view select.fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239c9890' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .625rem center;padding-right:1.75rem;cursor:pointer;}
#wrapper-view .fl{font-size:.6875rem;font-weight:500;color:var(--g600);margin-bottom:.25rem;display:block;}
#wrapper-view .req{color:var(--em);font-size:.5rem;}
#wrapper-view .fw{display:flex;flex-direction:column;}
#wrapper-view .row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
#wrapper-view .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;}

/* PROVIDER ROWS */
#wrapper-view .prow{display:grid;grid-template-columns:1fr 0.8fr 0.6fr auto;gap:.4rem;align-items:center;margin-bottom:.5rem;}
#wrapper-view .btn-icon{width:30px;height:30px;border-radius:6px;border:1.5px solid var(--g200);background:var(--white);color:var(--g500);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:.875rem;}
#wrapper-view .btn-icon:hover{border-color:var(--red);color:var(--red);}
#wrapper-view .btn-add{background:none;border:none;color:var(--em);font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;cursor:pointer;padding:.25rem 0;display:flex;align-items:center;gap:.3rem;transition:opacity .15s;}
#wrapper-view .btn-add:hover{opacity:.7;}

/* ToS */
#wrapper-view .tos-list{display:flex;flex-direction:column;gap:.35rem;}
#wrapper-view .tos-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--g50);border:1.5px solid var(--g100);border-radius:7px;}
#wrapper-view .tos-name{font-size:.75rem;font-weight:600;color:var(--black);min-width:85px;flex-shrink:0;}
#wrapper-view .tos-url{font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:var(--emd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-decoration:none;}
#wrapper-view .tos-url:hover{text-decoration:underline;}
#wrapper-view .tos-chk{width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.5rem;}
#wrapper-view .tos-chk.ok{background:var(--emp);color:var(--emd);}#wrapper-view .tos-chk.na{background:var(--g100);color:var(--g400);}
#wrapper-view .tos-empty{font-size:.75rem;color:var(--g400);text-align:center;padding:.75rem;font-style:italic;}

/* APPROVAL */
#wrapper-view .approval{display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .9375rem;background:var(--g50);border:1.5px solid var(--g200);border-radius:9px;cursor:pointer;transition:all .15s;margin-top:.25rem;}
#wrapper-view .approval:hover{border-color:var(--em);background:#f0fdf9;}
#wrapper-view .approval.checked{border-color:var(--em);background:#f0fdf9;}
#wrapper-view .approval input[type=checkbox]{width:16px;height:16px;border:2px solid var(--g300);border-radius:4px;background:var(--white);cursor:pointer;flex-shrink:0;margin-top:1px;appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;transition:all .15s;pointer-events:none;}
#wrapper-view .approval.checked input[type=checkbox]{background:var(--em);border-color:var(--em);}
#wrapper-view .approval.checked input[type=checkbox]::after{content:'';display:block;width:4px;height:7px;border:2px solid white;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px);}
#wrapper-view .appr-txt strong{display:block;font-size:.75rem;font-weight:500;color:var(--black);margin-bottom:.15rem;}
#wrapper-view .appr-txt span{font-size:.6875rem;color:var(--g500);line-height:1.5;}

/* OPTIONAL */
#wrapper-view .opt-toggle{display:flex;align-items:center;gap:.35rem;background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;color:var(--g400);padding:.3rem 0;margin-bottom:.4rem;transition:color .15s;}
#wrapper-view .opt-toggle:hover{color:var(--black);}
#wrapper-view .opt-toggle svg{transition:transform .2s;}
#wrapper-view .opt-toggle.open svg{transform:rotate(180deg);}
#wrapper-view .opt-fields{display:none;flex-direction:column;gap:.625rem;}
#wrapper-view .opt-fields.open{display:flex;}

/* MODAL FOOTER */
#wrapper-view .mft{padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--g100);display:flex;gap:.5rem;align-items:center;}
#wrapper-view .btn-primary{flex:1;background:var(--em);color:var(--white);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;padding:.6875rem 1.125rem;border-radius:9px;border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.375rem;}
#wrapper-view .btn-primary:hover:not(:disabled){background:var(--emd);transform:translateY(-1px);box-shadow:0 4px 14px rgba(5,150,105,.3);}
#wrapper-view .btn-primary:disabled{opacity:.4;cursor:not-allowed;}
#wrapper-view .btn-secondary{background:transparent;color:var(--g600);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.6875rem 1.125rem;border-radius:9px;border:1.5px solid var(--g200);cursor:pointer;transition:all .15s;}
#wrapper-view .btn-secondary:hover{border-color:var(--g300);color:var(--black);}

/* WRAPPING ANIMATION */
#wrapper-view .wrapping{display:none;flex-direction:column;align-items:center;padding:2.5rem 2rem;gap:1rem;text-align:center;}
#wrapper-view .wrapping.active{display:flex;}
#wrapper-view .spinner{width:52px;height:52px;position:relative;}
#wrapper-view .spinner::before{content:'';position:absolute;inset:0;border:3px solid var(--g100);border-top-color:var(--em);border-radius:50%;animation:spin .8s linear infinite;}
#wrapper-view .spinner::after{content:'\1F6E1';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;animation:shieldPulse 1.6s ease-in-out infinite;}
@keyframes shieldPulse{0%,100%{opacity:.6;transform:scale(.9);}50%{opacity:1;transform:scale(1.05);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* BATCH PROGRESS IN MODAL */
#wrapper-view .batch-progress{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:340px;}
#wrapper-view .bp-item{display:flex;align-items:center;gap:.625rem;}
#wrapper-view .bp-name{font-size:.75rem;color:var(--g600);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
#wrapper-view .bp-bar-wrap{width:80px;height:4px;background:var(--g100);border-radius:2px;flex-shrink:0;}
#wrapper-view .bp-bar{height:100%;border-radius:2px;background:var(--em);transition:width .5s ease;width:0;}
#wrapper-view .bp-bar.done{background:var(--em);}
#wrapper-view .bp-tick{font-size:.75rem;flex-shrink:0;width:14px;text-align:center;}

/* STEPS */
#wrapper-view .steps{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:220px;}
#wrapper-view .step{display:flex;align-items:center;gap:.45rem;font-size:.75rem;color:var(--g400);text-align:left;transition:color .3s;}
#wrapper-view .step.active{color:var(--black);}#wrapper-view .step.done{color:var(--em);}
#wrapper-view .step-dot{width:6px;height:6px;border-radius:50%;background:var(--g200);flex-shrink:0;transition:background .3s;}
#wrapper-view .step.active .step-dot{background:var(--amber);}#wrapper-view .step.done .step-dot{background:var(--em);}

/* SUCCESS */
#wrapper-view #successView{max-width:600px;}
#wrapper-view .sc-banner{animation:successSlideIn .4s ease-out;}
@keyframes successSlideIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
#wrapper-view .sc-ico{animation:successPop .5s ease-out .2s both;}
@keyframes successPop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
#wrapper-view .sc{background:var(--white);border-radius:18px;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.08);width:100%;}
#wrapper-view .sc-banner{background:var(--em);padding:1.25rem 1.75rem;display:flex;align-items:center;gap:.875rem;}
#wrapper-view .sc-ico{width:42px;height:42px;background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#wrapper-view .sc-title{font-family:'Newsreader',serif;font-size:1.25rem;font-weight:600;color:var(--white);margin-bottom:.15rem;}
#wrapper-view .sc-sub{font-size:.75rem;color:rgba(255,255,255,.75);}
#wrapper-view .sc-body{padding:1.5rem 1.75rem;display:flex;flex-direction:column;gap:1rem;}

/* BATCH SUMMARY */
#wrapper-view .batch-summary{display:flex;flex-direction:column;gap:.375rem;}
#wrapper-view .bs-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;background:var(--g50);border:1.5px solid var(--g100);border-radius:8px;}
#wrapper-view .bs-ext{width:32px;height:32px;background:var(--emp);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.5rem;font-weight:500;color:var(--emd);text-transform:uppercase;letter-spacing:.03em;}
#wrapper-view .bs-ext.err{background:#fee2e2;color:var(--red);}
#wrapper-view .bs-info{flex:1;min-width:0;}
#wrapper-view .bs-name{font-size:.8125rem;font-weight:500;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px;}
#wrapper-view .bs-meta{font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:var(--g400);}
#wrapper-view .bs-save{font-size:.75rem;font-weight:500;color:var(--em);background:var(--emp);border:none;padding:.3rem .625rem;border-radius:5px;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;flex-shrink:0;}
#wrapper-view .bs-save:hover{background:var(--emd);color:var(--white);}
#wrapper-view .bs-saved{font-size:.75rem;font-weight:500;color:var(--emd);background:var(--emp);padding:.3rem .625rem;border-radius:5px;flex-shrink:0;}
#wrapper-view .btn-save-all{width:100%;background:var(--em);color:var(--white);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;padding:.6875rem;border-radius:9px;border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;}
#wrapper-view .btn-save-all:hover{background:var(--emd);}
#wrapper-view .btn-save-all:disabled{opacity:.4;cursor:not-allowed;}

/* VERIFY URL */
#wrapper-view .vu-lbl{font-size:.5625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:.4rem;}
#wrapper-view .vu-box{display:flex;align-items:center;gap:.375rem;padding:.5625rem .875rem;background:var(--g900);border-radius:9px;cursor:pointer;transition:background .15s;}
#wrapper-view .vu-box:hover{background:var(--g800);}
#wrapper-view .vu-txt{flex:1;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--eml);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wrapper-view .copy-btn{background:rgba(255,255,255,.1);border:none;border-radius:5px;color:var(--g300);font-size:.5625rem;font-weight:500;font-family:'Inter',sans-serif;padding:.25rem .5rem;cursor:pointer;flex-shrink:0;transition:all .15s;}
#wrapper-view .copy-btn:hover{background:rgba(255,255,255,.18);color:var(--white);}
#wrapper-view .copy-btn.copied{background:var(--em);color:var(--white);}

/* QR + MANIFEST ACTIONS */
#wrapper-view .sc-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
#wrapper-view .btn-qr{display:flex;align-items:center;gap:.375rem;padding:.5rem .8rem;border:1.5px solid var(--g200);border-radius:7px;background:var(--white);color:var(--g600);font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;}
#wrapper-view .btn-qr:hover{border-color:var(--black);color:var(--black);}
#wrapper-view .btn-qr.active{border-color:var(--em);color:var(--emd);background:#f0fdf9;}
#wrapper-view .btn-mf{display:flex;align-items:center;gap:.375rem;background:none;border:1.5px solid var(--g200);border-radius:7px;color:var(--g500);font-family:'JetBrains Mono',monospace;font-size:.5625rem;padding:.45rem .65rem;cursor:pointer;transition:all .15s;}
#wrapper-view .btn-mf:hover{border-color:var(--g400);color:var(--black);}
#wrapper-view .qr-reveal{display:none;padding:.75rem;background:var(--g50);border:1.5px solid var(--g100);border-radius:8px;flex-direction:column;gap:.625rem;}
#wrapper-view .qr-reveal.open{display:flex;}
#wrapper-view .qr-inner{display:flex;gap:.875rem;align-items:flex-start;}
#wrapper-view .qr-box{width:80px;height:80px;background:white;border:1px solid var(--g100);border-radius:6px;padding:4px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#wrapper-view .qr-box canvas,#wrapper-view .qr-box img{width:100%!important;height:100%!important;}
#wrapper-view .place-lbl{font-size:.5625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);margin-bottom:.375rem;}
#wrapper-view .place-opts{display:flex;flex-wrap:wrap;gap:.3rem;}
#wrapper-view .place-opt{padding:.3rem .6rem;border:1.5px solid var(--g200);border-radius:5px;cursor:pointer;font-size:.6875rem;color:var(--g600);transition:all .15s;background:var(--white);font-family:'Inter',sans-serif;border:1.5px solid var(--g200);}
#wrapper-view .place-opt:hover{border-color:var(--g400);color:var(--black);}
#wrapper-view .place-opt.selected{border-color:var(--em);background:#f0fdf9;color:var(--emd);}
#wrapper-view .mf-tree{display:none;background:var(--g900);border-radius:7px;padding:.75rem;font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:var(--g300);line-height:1.8;}
#wrapper-view .mf-tree.open{display:block;}
#wrapper-view .mf-tree .k{color:#93c5fd;}#wrapper-view .mf-tree .s{color:#86efac;}#wrapper-view .mf-tree .b{color:#fde68a;}

/* SINGLE FILE SAVE BUTTON */
#wrapper-view .btn-save-file{width:100%;background:var(--em);color:var(--white);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;padding:.75rem;border-radius:9px;border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;}
#wrapper-view .btn-save-file:hover:not(:disabled){background:var(--emd);}
#wrapper-view .btn-save-file.saved{background:var(--emd);}
#wrapper-view .btn-save-file:disabled{opacity:.5;cursor:not-allowed;}
#wrapper-view .sc-actions{display:flex;gap:.5rem;}
#wrapper-view .btn-again{flex:1;background:var(--black);color:var(--white);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.625rem 1rem;border-radius:8px;border:none;cursor:pointer;transition:all .15s;}
#wrapper-view .btn-again:hover{background:var(--g800);}
#wrapper-view .btn-gv{flex:1;background:transparent;color:var(--g600);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.625rem 1rem;border-radius:8px;border:1.5px solid var(--g200);cursor:pointer;transition:all .15s;}
#wrapper-view .btn-gv:hover{border-color:var(--g300);color:var(--black);}

/* VERIFY VIEW */
#wrapper-view #verifyView{max-width:700px;}
#wrapper-view .vdrop{width:100%;border:2px dashed var(--g200);border-radius:14px;padding:2.5rem 2rem;background:var(--white);cursor:pointer;transition:all .2s;text-align:center;margin-bottom:1.5rem;}
#wrapper-view .vdrop:hover{border-color:var(--em);background:#f0fdf9;}
#wrapper-view .vdrop-lbl{font-family:'Newsreader',serif;font-size:1.1rem;font-weight:500;color:var(--g700);margin-bottom:.3rem;}
#wrapper-view .vdrop-hint{font-size:.75rem;color:var(--g400);}
#wrapper-view .vresult{display:none;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08);width:100%;}
#wrapper-view .vresult.show{display:block;}
#wrapper-view .vr-banner{padding:1.25rem 1.75rem;display:flex;align-items:center;gap:.75rem;}
#wrapper-view .vr-banner.valid{background:var(--em);}#wrapper-view .vr-banner.invalid{background:var(--red);}
#wrapper-view .vr-badge{width:44px;height:44px;background:rgba(255,255,255,.2);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
#wrapper-view .vr-title{font-family:'Newsreader',serif;font-size:1.25rem;font-weight:600;color:var(--white);}
#wrapper-view .vr-sub{font-size:.75rem;color:rgba(255,255,255,.75);margin-top:.15rem;}
#wrapper-view .vr-body{padding:1.375rem 1.75rem;display:flex;flex-direction:column;gap:1rem;}
#wrapper-view .vr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;}
#wrapper-view .vr-field{display:flex;flex-direction:column;gap:.2rem;}
#wrapper-view .vr-fl{font-size:.5625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);}
#wrapper-view .vr-fv{font-size:.8125rem;font-weight:500;color:var(--black);}
#wrapper-view .vr-hash{background:var(--g900);border-radius:7px;padding:.75rem .875rem;display:flex;flex-direction:column;gap:.4rem;}
#wrapper-view .vr-hrow{display:flex;align-items:center;gap:.5rem;}
#wrapper-view .vr-hlbl{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--eml);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;width:52px;}
#wrapper-view .vr-hval{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--g300);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* SAVE DIALOG OVERLAY */
#wrapper-view .save-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,10,.6);z-index:500;align-items:center;justify-content:center;}
#wrapper-view .save-overlay.open{display:flex;}
#wrapper-view .save-dialog{background:var(--white);border-radius:14px;padding:1.75rem;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:modalIn .2s ease;}
#wrapper-view .sd-title{font-family:'Newsreader',serif;font-size:1.125rem;font-weight:600;color:var(--black);margin-bottom:.25rem;}
#wrapper-view .sd-sub{font-size:.8125rem;color:var(--g500);margin-bottom:1.25rem;line-height:1.5;}
#wrapper-view .sd-file{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;background:var(--g50);border:1.5px solid var(--g100);border-radius:8px;margin-bottom:1.25rem;}
#wrapper-view .sd-ext{width:32px;height:32px;background:var(--emp);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.5rem;font-weight:500;color:var(--emd);text-transform:uppercase;}
#wrapper-view .sd-fname{font-size:.8125rem;font-weight:500;color:var(--black);}
#wrapper-view .sd-fmeta{font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:var(--g400);}
#wrapper-view .sd-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem;}
#wrapper-view .sd-option{display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .875rem;border:1.5px solid var(--g200);border-radius:8px;cursor:pointer;transition:all .15s;}
#wrapper-view .sd-option:hover{border-color:var(--g300);}
#wrapper-view .sd-option.selected{border-color:var(--em);background:#f0fdf9;}
#wrapper-view .sd-option input[type=radio]{margin-top:2px;accent-color:var(--em);flex-shrink:0;}
#wrapper-view .sd-opt-title{font-size:.8125rem;font-weight:500;color:var(--black);margin-bottom:.15rem;}
#wrapper-view .sd-opt-desc{font-size:.6875rem;color:var(--g500);line-height:1.4;}
#wrapper-view .sd-actions{display:flex;gap:.5rem;}
#wrapper-view .sd-btn-save{flex:1;background:var(--em);color:var(--white);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.6875rem;border-radius:8px;border:none;cursor:pointer;transition:all .15s;}
#wrapper-view .sd-btn-save:hover{background:var(--emd);}
#wrapper-view .sd-btn-cancel{background:transparent;color:var(--g600);font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;padding:.6875rem 1rem;border-radius:8px;border:1.5px solid var(--g200);cursor:pointer;transition:all .15s;}
#wrapper-view .sd-btn-cancel:hover{border-color:var(--g300);color:var(--black);}

/* FS API not supported */
#wrapper-view .no-fsa{background:#fef3c7;border:1.5px solid #fcd34d;border-radius:8px;padding:.625rem .875rem;font-size:.75rem;color:#92400e;display:none;margin-bottom:.75rem;line-height:1.5;}
#wrapper-view .no-fsa.show{display:block;}

/* POLICY BANNER */
#wrapper-view .policy-banner{display:none;margin:.75rem 1.5rem 0;border-radius:12px;overflow:hidden;animation:policySlideIn .5s cubic-bezier(.2,.8,.3,1);}
#wrapper-view .policy-banner.show{display:block;}
@keyframes policySlideIn{from{opacity:0;transform:translateY(-10px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
#wrapper-view .pb-header{background:var(--navy,#1a3352);padding:.75rem 1rem;display:flex;align-items:center;gap:.625rem;}
#wrapper-view .pb-icon{font-size:1rem;flex-shrink:0;}
#wrapper-view .pb-title{font-size:.875rem;font-weight:700;color:white;flex:1;font-family:'Newsreader',serif;letter-spacing:-.01em;}
#wrapper-view .pb-proj{font-family:'JetBrains Mono',monospace;font-size:.625rem;color:rgba(255,255,255,.55);flex-shrink:0;}
#wrapper-view .pb-body{background:linear-gradient(135deg,#f0f8ff,#f5f0ff);border:1.5px solid #c5d9f0;border-top:none;padding:.75rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem;}
#wrapper-view .pb-rule{display:flex;align-items:center;gap:.375rem;padding:.3rem .625rem;background:white;border:1px solid rgba(0,0,0,.06);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.04);animation:ruleIn .3s ease backwards;}
#wrapper-view .pb-rule:nth-child(1){animation-delay:.1s;}#wrapper-view .pb-rule:nth-child(2){animation-delay:.15s;}#wrapper-view .pb-rule:nth-child(3){animation-delay:.2s;}#wrapper-view .pb-rule:nth-child(4){animation-delay:.25s;}#wrapper-view .pb-rule:nth-child(5){animation-delay:.3s;}#wrapper-view .pb-rule:nth-child(6){animation-delay:.35s;}#wrapper-view .pb-rule:nth-child(7){animation-delay:.4s;}#wrapper-view .pb-rule:nth-child(8){animation-delay:.45s;}
@keyframes ruleIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
#wrapper-view .pb-rule-icon{font-size:.75rem;}
#wrapper-view .pb-rule-text{font-size:.6875rem;color:#1a3352;font-weight:500;}
#wrapper-view .pb-loading{padding:.625rem .9375rem;background:#f0f6ff;border:1.5px solid #c5d9f0;border-top:none;font-size:.6875rem;color:#5a7a9a;display:flex;align-items:center;gap:.375rem;}

/* TRANSPARENCY NOTE IN FORM */
#wrapper-view .review-flag-block{display:none;margin:.375rem 0;background:#eff6ff;border:1.5px solid #93c5fd;border-radius:7px;padding:.5rem .75rem;}
#wrapper-view .review-flag-block.show{display:block;}
#wrapper-view .vb-title{font-size:.6875rem;font-weight:600;color:#1e40af;margin-bottom:.2rem;display:flex;align-items:center;gap:.3rem;}
#wrapper-view .vb-items{display:flex;flex-direction:column;gap:.175rem;}
#wrapper-view .vb-item{font-size:.625rem;color:#1e3a5f;display:flex;align-items:flex-start;gap:.3rem;}

/* MANIFEST VIOLATION FLAG */
#wrapper-view .manifest-review-flag{display:inline-block;background:#fef3c7;border:1px solid #fcd34d;border-radius:4px;padding:.15rem .4rem;font-size:.5625rem;font-weight:600;color:#92400e;margin-left:.375rem;vertical-align:middle;}


html[data-theme="light"] #wrapper-view {
  --black:#0a0a0a;--white:#fafaf8;
  --g50:#f7f7f5;--g100:#eeede9;--g200:#dddbd5;--g300:#c4c1b8;
  --g400:#9c9890;--g500:#737068;--g600:#555250;--g700:#3a3835;
  --g800:#252320;--g900:#141210;
}
html[data-theme="light"] #wrapper-view .fi { background:var(--white); border-color:var(--g200); color:var(--black); }
html[data-theme="light"] #wrapper-view .fi:focus { border-color:var(--eml); }
html[data-theme="light"] #wrapper-view .ds { border-color:var(--g200); }
html[data-theme="light"] #wrapper-view .ds-hd { border-color:var(--g200); }
html[data-theme="light"] #wrapper-view ::placeholder { color:var(--g400); }