/* Minimal reset (replaces the Tailwind base the React build had) */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:'DM Sans','Noto Sans Arabic',sans-serif;scroll-behavior:smooth}
body{margin:0;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,pre,fieldset,figure,blockquote{margin:0}
fieldset{padding:0;min-width:0}legend{padding:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1em}
small{font-size:80%}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit;margin:0;padding:0;background:transparent;border-radius:0}
button{cursor:pointer;background-image:none}
button:disabled{cursor:not-allowed;opacity:.7}
img,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}
textarea{resize:vertical}
::placeholder{opacity:1;color:#9ca3af}
:focus-visible{outline:3px solid #0874e8;outline-offset:3px}
.share-app {
  --share-ink: #243b4a;
  --share-muted: #6d7b83;
  --share-paper: #f2f5f5;
  --share-card: #fbfcfb;
  --share-border: #d8e0e1;
  --share-accent: #d86f52;
  min-height: 100dvh;
  color: var(--share-ink);
  background-color: var(--share-paper);
  background-image: linear-gradient(rgba(36,59,74,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(36,59,74,.026) 1px, transparent 1px);
  background-size: 36px 36px;
  font-family: 'DM Sans', 'Noto Sans Arabic', sans-serif;
}
.share-app *, .share-app *::before, .share-app *::after { box-sizing: border-box; }
.share-app button, .share-app input, .share-app textarea { font: inherit; }
.share-skip { position: fixed; z-index: 30; inset-block-start: 12px; inset-inline-start: 12px; transform: translateY(-160%); background: var(--share-ink); color: white; padding: 12px 16px; }
.share-skip:focus { transform: translateY(0); }
.share-header { height: 74px; padding: 0 clamp(24px, 6.5vw, 100px); border-bottom: 1px solid var(--share-border); background: rgba(251,252,251,.84); display: flex; align-items: center; justify-content: space-between; }
.share-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--share-ink); font-weight: 700; font-size: 13px; letter-spacing: -.01em; text-decoration: none; }
.brand-symbol { width: 25px; height: 25px; display: grid; place-items: center; border: 1.5px solid var(--share-ink); border-radius: 7px 2px 7px 2px; }
.brand-symbol span { display: block; width: 8px; height: 8px; background: var(--share-accent); border-radius: 2px; }
.share-language { display: flex; align-items: center; gap: 8px; border: 1px solid var(--share-border); padding: 9px 12px; color: var(--share-ink); background: #fff; font-size: 12px !important; cursor: pointer; border-radius: 3px; transition: border-color .18s ease, background .18s ease; }
.share-language:hover { border-color: #8fa2aa; background: #f8faf9; }
.share-main { width: min(1120px, calc(100% - 64px)); margin: 0 auto; min-height: calc(100dvh - 210px); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(38px, 8.4vw, 120px); align-items: center; padding: 66px 0 60px; }
.share-intro { align-self: center; padding-bottom: 22px; }
.intro-label { display: flex; align-items: center; gap: 10px; color: #687980; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.intro-lock { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #bdc9cb; color: var(--share-accent); border-radius: 50%; }
.share-intro h1 { font: 600 clamp(47px, 5.6vw, 76px)/.99 'Manrope', 'Noto Sans Arabic', sans-serif; letter-spacing: -.065em; color: var(--share-ink); margin: 36px 0 22px; }
.share-intro h1 em { font-style: normal; color: var(--share-accent); }
.share-intro > p { color: #63737b; font-size: 14px; line-height: 1.8; max-width: 390px; margin: 0; }
.intro-rule { display: flex; align-items: center; margin-top: 48px; width: 84%; height: 1px; background: #d8e0e1; }
.intro-rule span { height: 2px; width: 31%; background: var(--share-accent); }
.intro-index { display: flex; gap: 11px; align-items: center; margin-top: 17px; font-size: 8px; letter-spacing: .14em; color: #839098; }
.intro-index > span:first-child { color: var(--share-accent); font-weight: 700; }
.index-line { width: 22px; height: 1px; background: #a6b3b5; }
.share-panel { background: var(--share-card); border: 1px solid #d5dfe0; box-shadow: 0 18px 55px rgba(32,57,69,.065); padding: clamp(26px, 3.3vw, 43px); position: relative; }
.share-panel::before { content: ''; position: absolute; width: 46px; height: 3px; inset-block-start: -1px; inset-inline-start: 0; background: var(--share-accent); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #e5e9e8; margin-bottom: 23px; }
.panel-step { color: #839196; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.panel-heading h2 { font: 600 23px/1.3 'Manrope', 'Noto Sans Arabic', sans-serif; letter-spacing: -.04em; margin: 8px 0 0; }
.panel-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #d8e0e1; color: var(--share-accent); border-radius: 50%; }
.share-panel form { display: flex; flex-direction: column; gap: 18px; }
.type-fieldset { padding: 0; margin: 0; min-width: 0; border: 0; }
.type-fieldset legend, .field-block > label, .field-title label { display: block; font-size: 11px; font-weight: 700; color: #354e5b; margin-bottom: 9px; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; background: #f0f3f3; border: 1px solid #e0e6e6; }
.type-option { min-height: 41px; border: 1px solid transparent; color: #68777d; background: transparent; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 11px !important; transition: color .18s, background .18s, border-color .18s; }
.type-option.selected { color: var(--share-ink); background: #fff; border-color: #d5dfe0; box-shadow: 0 1px 2px rgba(37,62,73,.04); }
.type-option.selected svg { color: var(--share-accent); }
.field-block { min-width: 0; }
.required { color: var(--share-accent); padding-inline-start: 4px; }
.optional-label { color: #98a2a5; font-size: 9px; font-weight: 500; padding-inline-start: 7px; }
.share-panel input:not([type=file]), .share-panel textarea { display: block; width: 100%; min-height: 43px; padding: 11px 12px; border: 1px solid #d6dfe0; border-radius: 2px; background: #fff; color: #283e49; outline: none; font-size: 12px; transition: border-color .16s ease, box-shadow .16s ease; }
.share-panel textarea { resize: vertical; min-height: 73px; line-height: 1.55; }
.share-panel input::placeholder, .share-panel textarea::placeholder { color: #a1abad; }
.share-panel input:focus, .share-panel textarea:focus { border-color: #708b92; box-shadow: 0 0 0 3px rgba(62,106,119,.1); }
.file-picker { width: 100%; min-height: 67px; background: #f7f9f8; border: 1px dashed #b9c8ca; display: flex; align-items: center; text-align: start; gap: 12px; padding: 12px 14px; cursor: pointer; color: var(--share-ink); transition: background .18s, border-color .18s; }
.file-picker:hover { background: #f0f5f4; border-color: #849ba0; }
.picker-icon, .file-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; color: var(--share-accent); background: #f3eae6; }
.picker-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.picker-text strong { font-size: 11px; font-weight: 700; }
.picker-text small { color: #8a9699; font-size: 9px; }
.picker-arrow { color: #839195; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.file-picker:focus-visible { outline: 3px solid var(--share-accent); outline-offset: 3px; }
.selected-file { display: flex; align-items: center; gap: 11px; min-height: 65px; border: 1px solid #d6dfe0; background: #f7f9f8; padding: 9px 11px; }
.file-icon { background: #e8eff0; color: #49636d; }
.file-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.file-meta small { color: #879397; font-size: 9px; }
.remove-file, .reveal-button { border: 0; background: transparent; color: #748187; cursor: pointer; display: grid; place-items: center; padding: 8px; }
.remove-file:hover, .reveal-button:hover { color: var(--share-accent); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.input-with-action { position: relative; }
.input-with-action input { padding-inline-end: 43px !important; }
.reveal-button { position: absolute; inset-block: 0; inset-inline-end: 3px; width: 38px; }
.form-bottom { display: flex; flex-direction: column; gap: 12px; padding-top: 1px; }
.share-submit { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 30px; width: 100%; border: 1px solid var(--share-ink); background: var(--share-ink); color: white; padding: 0 16px; font-size: 12px !important; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.share-submit:hover { background: #345464; border-color: #345464; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; color: #77848a; font-size: 9px; line-height: 1.6; margin: 0; }
.privacy-note svg { flex: 0 0 15px; margin-top: 1px; color: #758990; }
.field-error { color: #ad4e3b; font-size: 10px; line-height: 1.4; margin: 7px 0 0; }
.preview-notice { display: flex; gap: 10px; align-items: flex-start; background: #f7eee9; border-inline-start: 2px solid var(--share-accent); padding: 12px; }
.notice-symbol { flex: 0 0 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; color: #9c513d; background: #f0dfd7; }
.preview-notice p { color: #684e45; margin: 2px 0; font-size: 11px; line-height: 1.6; }
.preview-banner { width: min(1120px, calc(100% - 64px)); margin: 0 auto 35px; border: 1px solid #e0e4e2; background: rgba(251,252,251,.72); display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 20px; padding: 14px 18px; }
.preview-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; color: var(--share-ink); }
.preview-badge > span { width: 7px; height: 7px; border-radius: 50%; background: var(--share-accent); }
.preview-banner p { color: #6e7d82; font-size: 10px; line-height: 1.65; margin: 0; }
.share-footer { min-height: 60px; border-top: 1px solid #dce3e3; background: rgba(251,252,251,.7); display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(24px, 6.5vw, 100px); color: #758287; font-size: 10px; }
.footer-wordmark { color: var(--share-ink); font-weight: 700; }
.footer-caption { font-size: 8px; letter-spacing: .12em; }
.share-ar { font-family: 'Noto Sans Arabic', 'DM Sans', sans-serif; }
.share-ar .share-intro h1, .share-ar .panel-heading h2 { font-family: 'Noto Sans Arabic', sans-serif; letter-spacing: 0; line-height: 1.4; }
.share-ar .share-intro h1 { font-size: clamp(42px, 5.2vw, 67px); }
.share-ar .intro-label { letter-spacing: .04em; }
.share-ar .intro-index { letter-spacing: .03em; }
.share-ar .footer-caption { letter-spacing: 0; }
@media (max-width: 900px) {
  .share-main { width: min(700px, calc(100% - 48px)); grid-template-columns: 1fr; gap: 35px; padding: 45px 0 42px; }
  .share-intro { padding: 0; }
  .share-intro h1 { margin: 25px 0 14px; font-size: clamp(48px, 8vw, 68px); }
  .share-intro > p { max-width: 500px; }
  .intro-rule, .intro-index { display: none; }
  .preview-banner { width: min(700px, calc(100% - 48px)); margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .share-header { height: 64px; padding-inline: 18px; }
  .share-main { width: calc(100% - 32px); gap: 27px; padding: 34px 0 30px; }
  .share-intro h1 { font-size: clamp(48px, 14vw, 66px); margin: 22px 0 13px; }
  .share-intro > p { font-size: 13px; line-height: 1.7; }
  .intro-label { font-size: 8px; }
  .share-panel { padding: 23px 18px 21px; }
  .panel-heading h2 { font-size: 20px; }
  .field-grid { grid-template-columns: 1fr; gap: 17px; }
  .share-panel form { gap: 16px; }
  .preview-banner { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 8px; padding: 13px 14px; }
  .share-footer { padding: 14px 18px; gap: 10px; flex-wrap: wrap; font-size: 9px; }
  .share-footer > span:nth-child(2) { order: 3; flex-basis: 100%; }
  .footer-caption { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .share-app *, .share-app *::before, .share-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* One Time Link preview — Scopic navy, vivid blue and measured mint. */
.share-app {
  --share-ink: #12243b;
  --share-muted: #627387;
  --share-paper: #f2f6f8;
  --share-card: #fff;
  --share-border: #d6e1e9;
  --share-accent: #0874e8;
  --share-mint: #bcebd9;
  background-color: var(--share-paper);
  background-image: radial-gradient(circle at 12% 8%, rgba(188,235,217,.28), transparent 26%), linear-gradient(rgba(18,36,59,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(18,36,59,.022) 1px, transparent 1px);
  background-size: auto, 38px 38px, 38px 38px;
  font-family: 'DM Sans', 'Noto Sans Arabic', sans-serif;
}
.share-header { background: rgba(255,255,255,.94); border-color: var(--share-border); }
.share-brand { gap: 12px; }
.scopic-logo { display: block; width: 100px; height: auto; }
.brand-divider { width: 1px; height: 24px; background: var(--share-border); }
.share-brand > span:last-child { font-weight: 600; letter-spacing: -.02em; }
.share-language { border-color: var(--share-border); border-radius: 5px; color: var(--share-ink); }
.share-language:hover { border-color: #9bb8d2; background: #f4f9ff; }
.preview-banner { border-color: #cad9e6; background: #eaf3fa; grid-template-columns: 190px 1fr; margin-top: 22px; margin-bottom: -36px; position: relative; z-index: 1; }
.preview-badge { color: #123762; letter-spacing: .05em; }
.preview-badge > span { background: #08a878; }
.preview-banner p { color: #48627a; }
.share-main { padding-top: 90px; }
.intro-lock { border-color: #bad0e2; color: var(--share-accent); }
.share-intro h1 { color: var(--share-ink); }
.share-intro h1 em { color: var(--share-accent); }
.share-intro > p { color: #576a7e; }
.intro-rule { background: #d3e0e9; }
.intro-rule span { background: var(--share-accent); }
.intro-index > span:first-child { color: var(--share-accent); }
.share-panel { border-color: #d2e0eb; border-radius: 9px; box-shadow: 0 22px 64px rgba(18,48,78,.09); }
.share-panel::before { width: 68px; height: 4px; background: var(--share-accent); border-radius: 0 0 4px 0; }
.panel-heading { border-color: #e4ecf1; }
.panel-step { letter-spacing: .11em; }
.panel-icon { color: #0874e8; border-color: #c8dbeb; background: #f1f7fc; }
.type-fieldset legend, .field-block > label, .field-title label { color: #253e59; }
.type-switch { border-color: #dce6ec; background: #f2f6f8; border-radius: 7px; }
.type-option { border-radius: 5px; color: #617387; }
.type-option.selected { color: #13385e; border-color: #cbddeb; box-shadow: 0 1px 3px rgba(17,53,88,.08); }
.type-option.selected svg { color: #0874e8; }
.share-panel input:not([type=file]), .share-panel textarea { border-color: #d3e0e8; border-radius: 5px; color: #142a43; background: #fcfdfe; }
.share-panel input:focus, .share-panel textarea:focus { border-color: #0874e8; box-shadow: 0 0 0 3px rgba(8,116,232,.12); }
.share-panel input::placeholder, .share-panel textarea::placeholder { color: #899bad; }
.file-picker { border-color: #d2e0e9; border-radius: 6px; background: #f7fafc; }
.file-picker:hover { border-color: #85aed3; background: #f0f7fd; }
.picker-icon { color: #0874e8; background: #e6f2fe; border-radius: 5px; }
.picker-text strong { color: #174d80; }
.selected-file { border-color: #d2e0e9; background: #f5f9fb; border-radius: 5px; }
.file-icon { color: #0874e8; background: #e4f1fd; border-radius: 5px; }
.required, .field-error { color: #b14339; }
.share-submit { border-color: #075ebc; border-radius: 5px; background: #086bd2; color: #fff; min-height: 49px; }
.share-submit:hover { background: #0757ad; border-color: #0757ad; }
.privacy-note { color: #62778b; font-size: 10px; }
.privacy-note svg { color: #168866; }
.preview-nav { display: flex; gap: 9px; margin-top: 27px; flex-wrap: wrap; }
.preview-nav button, .text-action { border: 1px solid #d2dfe8; border-radius: 4px; background: rgba(255,255,255,.58); padding: 9px 12px; color: #48627a; font-size: 10px; font-weight: 600; cursor: pointer; }
.preview-nav button:hover, .text-action:hover { border-color: #87afd2; color: #075db8; background: #fff; }
.preview-nav button.active { background: #e7f2fc; border-color: #9fc5e7; color: #075db8; }
.state-content { display: flex; flex-direction: column; align-items: stretch; gap: 15px; }
.state-illustration { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #0874e8; background: #e9f4fd; border: 1px solid #d3e8f8; }
.state-success { color: #168866; background: #e6f6ef; border-color: #c9eadd; }
.state-warning { color: #a6463b; background: #fbefed; border-color: #f0d6d2; }
.state-content h3 { color: #142b45; font: 700 21px/1.35 'Manrope','Noto Sans Arabic',sans-serif; margin: 0; letter-spacing: -.025em; }
.state-copy { color: #5d7083; font-size: 12px; line-height: 1.75; margin: -6px 0 2px; }
.placeholder-link { border: 1px dashed #aac4d9; border-radius: 5px; background: #f5f9fc; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.placeholder-link > span { color: #63788c; font-size: 10px; font-weight: 600; }
.placeholder-link code { font: 600 11px/1.5 'DM Sans',sans-serif; color: #0757ad; overflow-wrap: anywhere; }
.secondary-action { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d1dfe9; border-radius: 5px; background: #fff; color: #31516e; padding: 9px 12px; font-size: 11px; cursor: pointer; }
.secondary-action:hover { background: #f2f8fc; border-color: #9bbbd5; }
.sender-status { display: flex; gap: 10px; align-items: center; border: 1px solid #d6e2eb; background: #f7fafc; border-radius: 6px; padding: 13px; }
.status-icon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e9f1f6; color: #56718a; }
.sender-status > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.sender-status strong { font-size: 11px; color: #203a55; }
.sender-status span { font-size: 10px; line-height: 1.5; color: #65798b; }
.status-pill { flex: 0 0 auto; border-radius: 20px; padding: 5px 8px; background: #edf2f6; color: #506980 !important; font-size: 9px !important; text-align: center; }
.sender-status.is-accessed { border-color: #c5e6d8; background: #f1faf6; }
.is-accessed .status-icon { background: #daf2e7; color: #13825e; }
.is-accessed .status-pill { color: #126b50 !important; background: #dff4e9; }
.sender-status.is-used { border-color: #eed9d5; background: #fdf7f6; }
.is-used .status-icon { color: #a6463b; background: #f8e8e5; }
.sample-content { border: 1px solid #d6e3eb; border-radius: 5px; padding: 15px; background: #f6f9fb; }
.sample-content > span { color: #0874e8; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.sample-content p { color: #526a80; font-size: 12px; line-height: 1.7; margin: 10px 0 0; }
.illustrative-note { display: flex; gap: 9px; align-items: flex-start; color: #516b7e; background: #eef6f5; border-inline-start: 3px solid #20a47a; padding: 12px; font-size: 10px; line-height: 1.6; }
.illustrative-note svg { flex: 0 0 16px; color: #13825e; }
.text-action { align-self: flex-start; background: transparent; }
.share-footer { background: rgba(255,255,255,.92); border-color: #d6e1e9; color: #66798a; }
.footer-wordmark { color: #123762; }
.footer-caption { color: #0874e8; font-weight: 700; }
.share-ar .state-content h3 { font-family: 'Noto Sans Arabic',sans-serif; letter-spacing: 0; line-height: 1.6; }
.share-ar .placeholder-link code { font-family: 'DM Sans',sans-serif; direction: ltr; text-align: start; }
.share-ar .preview-badge { letter-spacing: 0; }
@media (max-width: 900px) {
  .preview-banner { margin-top: 16px; margin-bottom: -26px; }
  .share-main { padding-top: 73px; }
  .preview-nav { margin-top: 19px; }
}
@media (max-width: 560px) {
  .scopic-logo { width: 79px; }
  .share-brand { gap: 8px; font-size: 11px; }
  .brand-divider { height: 20px; }
  .preview-banner { margin-bottom: -15px; }
  .share-main { padding-top: 55px; }
  .preview-nav { margin-top: 15px; }
  .state-content h3 { font-size: 19px; }
  .sender-status { align-items: flex-start; flex-wrap: wrap; }
  .status-pill { margin-inline-start: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .share-app *, .share-app *::before, .share-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

[hidden]{display:none!important}