:root{
  --bg:#071018;
  --bg2:#0c1722;
  --panel:#0d1620;
  --panel-2:#111e2a;
  --surface:#f3f5f7;
  --text:#eef3f7;
  --text-dark:#17212b;
  --muted:#9eabb7;
  --muted-dark:#5f6d7a;
  --line:rgba(255,255,255,.12);
  --line-dark:rgba(18,32,48,.12);
  --accent:#8ce6df;
  --accent-2:#9fd4ff;
  --accent-3:#c8ff87;
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --danger:#ffb0b0;
  --ok:#c8ff87;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(140deg,#08111a 0%,#0b1620 42%,#101c28 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
a{color:inherit}
.site-bg{
  position:fixed;inset:-36px;z-index:-1;
  background:
   linear-gradient(180deg, rgba(4,9,14,.52), rgba(5,10,16,.60)),
   radial-gradient(circle at 18% 22%, rgba(0,191,166,.10), transparent 30%),
   radial-gradient(circle at 84% 18%, rgba(72,150,255,.08), transparent 28%),
   radial-gradient(circle at 76% 74%, rgba(191,255,110,.05), transparent 28%),
   url('/SFD/assets/sfd-hero-04.jpg') center/cover no-repeat;
  filter:blur(10px) brightness(.62) saturate(.78);
  transform:scale(1.06);
}
.hidden{display:none!important}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;letter-spacing:.18em}
.brand img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}.brand span{font-size:12px;font-weight:600}.brand b{font-weight:500}.brand-light span{color:#edf3f8}.brand-light b{color:#b6c2cd}.brand-dark span{color:#0f1d29}.brand-dark b{color:#3a4c60}.brand.small img{width:40px;height:40px}.brand.small span{font-size:11px}
.eyebrow,.kicker{display:block;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.eyebrow.dark{color:#3b6f90}.muted{color:var(--muted);line-height:1.6}
.lang-icons{display:flex;align-items:center;gap:10px}.lang-pill{width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(8px)}.lang-pill img{width:22px;height:22px;object-fit:contain;border-radius:999px}.login-lang{position:absolute;top:18px;right:20px;z-index:5}.top-lang{margin-right:6px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-layout{position:relative;width:min(1220px,100%);min-height:720px;display:grid;grid-template-columns:minmax(360px,430px) 1fr;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.login-form-panel{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(241,245,248,.89) 100%);padding:40px 42px;display:flex;flex-direction:column;justify-content:center}.login-form-panel h1{margin:16px 0 14px;color:var(--text-dark);font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-.04em;font-weight:600}.lead{line-height:1.7}.lead.dark{color:var(--muted-dark);max-width:42ch;margin:0 0 8px}.dark-field span{color:#4f6274}.field{display:grid;gap:8px;margin:18px 0 0}.field span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.field input,.field select,.pw-form input{width:100%;border:1px solid rgba(16,39,59,.16);background:#fff;color:#12202d;padding:15px 16px;border-radius:14px;outline:none;transition:border-color .2s, box-shadow .2s, background .2s}.field input[readonly]{background:#eef3f7;color:#3f5060;font-weight:600}.field input:focus,.field select:focus,.pw-form input:focus{border-color:rgba(64,139,176,.5);box-shadow:0 0 0 4px rgba(129,197,225,.16)}button{cursor:pointer;border:none;background:none;color:inherit}.primary,.ghost,.file-actions a,.hero-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;transition:transform .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease}.primary:hover,.ghost:hover,.file-actions a:hover,.hero-chip:hover{transform:translateY(-1px)}.primary{width:100%;margin-top:18px;min-height:52px;padding:14px 18px;border:1px solid rgba(88,150,182,.34);background:linear-gradient(180deg,#133247 0%,#0e2435 100%);color:#eef7ff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 16px 34px rgba(10,27,39,.18)}.primary.light-surface{box-shadow:0 12px 28px rgba(11,34,50,.16)}.primary.modal-action{width:100%}.link-btn{border:0;background:none;font-size:13px;margin:16px 0 0;text-align:left;padding:0}.dark-link{color:#2c648a;font-weight:600}.msg{min-height:18px;margin-top:12px;font-size:12px;color:#c44f4f}.msg.ok{color:#2c9d5f}.login-footer-note{margin-top:24px;padding-top:22px;border-top:1px solid rgba(20,40,60,.10);color:var(--muted-dark)}.login-footer-note strong{display:block;color:#233445;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.login-footer-note p{margin:0;line-height:1.65;font-size:13px}
.login-media-panel{position:relative;min-height:720px;display:flex;align-items:flex-end;padding:42px;background:linear-gradient(0deg, rgba(8,16,24,.72), rgba(8,16,24,.34) 40%, rgba(8,16,24,.20) 100%), url('/SFD/assets/sfd-hero-04.jpg') center/cover no-repeat}.login-media-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(5,13,22,.34), rgba(10,20,31,.12) 40%, rgba(17,74,105,.2) 100%)}.login-media-copy{position:relative;z-index:1;max-width:620px}.login-media-copy h2{margin:16px 0 14px;font-size:clamp(34px,4vw,56px);line-height:1.03;letter-spacing:-.04em;font-weight:500}.login-media-copy p{margin:0;color:rgba(239,245,250,.84);line-height:1.7;font-size:16px;max-width:48ch}.media-points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;max-width:640px}.media-points li{display:flex;align-items:flex-start;gap:14px;padding:15px 16px;border:1px solid rgba(255,255,255,.14);background:rgba(8,15,22,.34);backdrop-filter:blur(8px);border-radius:18px;line-height:1.55}.media-points li span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em}
.portal{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;height:80px;padding:0 max(24px,5vw);border-bottom:1px solid var(--line);background:rgba(6,14,21,.82);backdrop-filter:blur(18px)}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.role{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-right:8px}.ghost{min-height:42px;padding:0 18px;border:1px solid rgba(255,255,255,.14);color:#ecf2f6;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.03)}.main{width:min(1240px,92vw);margin:0 auto;padding:32px 0 0}.hero-card{display:grid;grid-template-columns:1.4fr .8fr;gap:26px;padding:38px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg, rgba(16,28,39,.92) 0%, rgba(10,20,31,.94) 58%, rgba(16,37,51,.94) 100%);box-shadow:0 20px 50px rgba(0,0,0,.16)}.hero-copy h1{margin:14px 0 14px;font-size:clamp(40px,6vw,78px);line-height:1.02;letter-spacing:-.05em;font-weight:500}.hero-copy p{margin:0;color:var(--muted);line-height:1.75;font-size:15px;max-width:58ch}.hero-mini-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.hero-chip{min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eef4f8;font-size:12px;font-weight:600}.hero-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px;align-items:flex-end}.hero-upload{width:auto;min-width:210px;margin-top:0}.hero-note{width:min(320px,100%);padding:20px 18px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04)}.hero-note strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#e7eff5;margin-bottom:8px}.hero-note span{display:block;color:var(--muted);line-height:1.6;font-size:13px}.upload-control.disabled,.quick.disabled{opacity:.42;cursor:not-allowed;pointer-events:none}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0}.quick{padding:28px;min-height:172px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));text-align:left}.quick:hover{border-color:rgba(140,230,223,.34);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.026))}.quick span{display:block;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.16em}.quick strong{display:block;margin:18px 0 10px;font-size:24px;font-weight:500;letter-spacing:-.02em}.quick small{display:block;color:var(--muted);line-height:1.6;font-size:13px}.library-section{padding:74px 0 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-head h2{margin:10px 0 0;font-size:40px;font-weight:500;letter-spacing:-.03em}.count{font-size:12px;color:var(--muted)}.file-list{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(9,18,27,.58)}.file-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 170px;gap:20px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.file-row:last-child{border-bottom:0}.file-row:hover{background:rgba(255,255,255,.02)}.file-name{min-width:0}.file-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;color:#eef4f8}.file-name small,.file-meta{color:var(--muted);font-size:11px;letter-spacing:.10em;text-transform:uppercase}.file-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.file-actions a{text-decoration:none;min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#edf4f7;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.empty{padding:26px 22px;color:var(--muted);font-size:14px}footer{width:min(1240px,92vw);margin:0 auto;padding:48px 0 60px;color:#71808d;font-size:12px}.modal{position:fixed;inset:0;z-index:50;background:rgba(4,9,14,.72);display:grid;place-items:center;padding:20px}.modal-card{position:relative;width:min(560px,100%);background:linear-gradient(180deg,#0d1620 0%,#111d2a 100%);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 24px 80px rgba(0,0,0,.52)}.modal-card.wide{width:min(900px,100%)}.modal h2{font-size:30px;font-weight:500;letter-spacing:-.03em;margin:12px 0 16px}.x{position:absolute;right:16px;top:14px;border:0;background:none;font-size:28px;color:#97a5b2}.drop{display:grid;place-items:center;text-align:center;border:1px dashed rgba(255,255,255,.24);border-radius:18px;padding:34px;margin:20px 0;background:rgba(255,255,255,.02)}.drop input{max-width:100%;margin-bottom:12px}.drop span{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.6}.password-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.pw-form{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(255,255,255,.025)}.pw-form h3{font-size:15px;font-weight:600;margin:0 0 16px}.pw-form input{margin-bottom:10px;background:#f7fafc}.pw-form .ghost{width:100%;background:rgba(255,255,255,.03)}
@media (max-width:1050px){.login-layout{grid-template-columns:1fr;min-height:auto}.login-form-panel{padding-top:84px}.login-media-panel{min-height:440px}.hero-card{grid-template-columns:1fr}.hero-side{align-items:flex-start}.hero-note{width:100%}}
@media (max-width:760px){.login-shell{padding:16px}.login-layout{border-radius:22px}.login-lang{top:14px;right:14px}.lang-pill{width:34px;height:34px}.lang-pill img{width:20px;height:20px}.login-card{padding:26px}.login-form-panel{padding:78px 24px 28px}.login-form-panel h1{font-size:36px}.login-media-panel{min-height:360px;padding:24px}.login-media-copy h2{font-size:34px}.brand span{letter-spacing:.12em}.brand.small span{display:none}.role{display:none}.topbar{padding:0 18px}.top-actions{gap:6px}.top-lang{display:none}.ghost{padding:10px 11px}.main{width:calc(100% - 32px)}.hero-card{padding:24px 20px}.hero .primary{margin-top:24px;width:100%}.quick-grid{grid-template-columns:1fr}.quick{border-right:0;min-height:118px}.file-row{grid-template-columns:minmax(0,1fr) 70px;gap:12px}.file-row .modified{display:none}.file-actions{grid-column:1/-1;justify-content:flex-start}.password-grid{grid-template-columns:1fr}.modal-card{padding:26px}.section-head h2{font-size:30px}}

/* v6: login must fit in one desktop viewport */
@media (min-width:1051px){
  html,body{min-height:100%;}
  #loginView:not(.hidden){height:100svh;min-height:0;overflow:hidden;padding:16px;}
  #loginView:not(.hidden) .login-layout{height:calc(100svh - 32px);min-height:0;max-height:none;}
  #loginView:not(.hidden) .login-form-panel{padding:28px 36px 24px;}
  #loginView:not(.hidden) .brand img{width:42px;height:42px;}
  #loginView:not(.hidden) .login-form-panel h1{font-size:clamp(31px,3.2vw,46px);margin:12px 0 10px;}
  #loginView:not(.hidden) .lead.dark{line-height:1.55;font-size:14px;}
  #loginView:not(.hidden) .field{margin-top:13px;gap:6px;}
  #loginView:not(.hidden) .field input{padding:12px 14px;}
  #loginView:not(.hidden) .primary{min-height:46px;margin-top:14px;padding:11px 16px;}
  #loginView:not(.hidden) .link-btn{margin-top:12px;}
  #loginView:not(.hidden) .login-footer-note{margin-top:16px;padding-top:14px;}
  #loginView:not(.hidden) .login-media-panel{min-height:0;padding:34px;}
  #loginView:not(.hidden) .login-media-copy h2{font-size:clamp(30px,3.3vw,48px);margin:12px 0 10px;}
  #loginView:not(.hidden) .login-media-copy p{font-size:14px;line-height:1.55;}
  #loginView:not(.hidden) .media-points{margin-top:18px;gap:10px;}
  #loginView:not(.hidden) .media-points li{padding:11px 13px;border-radius:14px;}
  #loginView:not(.hidden) .media-points li>span:first-child{width:32px;height:32px;}
}
.lang-pill.active{outline:2px solid rgba(255,255,255,.78);outline-offset:2px;background:rgba(255,255,255,.28)}
.media-points .point-copy{display:inline;color:inherit;width:auto;height:auto;border:0;border-radius:0;letter-spacing:normal;font-size:inherit;font-weight:inherit;justify-content:flex-start}


/* v7 requested visual refinements */
#loginView .brand-dark{display:block;max-width:320px}
#loginView .brand-dark .brand-original-gray{
  width:min(310px,100%);
  height:auto;
  display:block;
  object-fit:contain;
  filter:grayscale(1) saturate(0) brightness(.38) contrast(1.28);
}
#loginView #loginBtn{
  background:linear-gradient(180deg,#3d4146 0%,#282c30 100%);
  border-color:rgba(40,44,48,.58);
  color:#f5f5f5;
  box-shadow:0 14px 30px rgba(28,31,34,.20);
}
#loginView #loginBtn:hover{
  background:linear-gradient(180deg,#484d52 0%,#303438 100%);
  border-color:rgba(40,44,48,.72);
}
.login-media-copy .media-corporate-title{
  max-width:760px;
  margin:10px 0 16px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(21px,2.25vw,34px);
  line-height:1.24;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#bdeeff;
  text-shadow:0 1px 18px rgba(0,0,0,.26);
}
@media(max-width:760px){
  #loginView .brand-dark .brand-original-gray{width:min(270px,88vw)}
  .login-media-copy .media-corporate-title{font-size:20px;letter-spacing:.12em;line-height:1.28}
}

/* v8 requested typography and brand sizing */
@media (min-width:1051px){
  #loginView:not(.hidden) .login-form-panel h1{
    font-size:clamp(23px,2.4vw,34.5px); /* 25% smaller */
    line-height:1.08;
  }
  #loginView:not(.hidden) .login-media-copy .media-corporate-title{
    font-size:clamp(19.5px,2.15vw,31px); /* 35% smaller than prior desktop override */
    line-height:1.08;
    margin:10px 0 12px;
  }
  #loginView .brand-dark{
    max-width:none;
    width:100%;
    overflow:visible;
  }
  #loginView .brand-dark .brand-original-gray{
    width:min(420px,100%);
    height:auto !important;
    max-width:none;
  }
}
@media (max-width:760px){
  #loginView .login-form-panel h1{font-size:27px;line-height:1.08}
  .login-media-copy .media-corporate-title{font-size:13px;line-height:1.10;letter-spacing:.12em}
  #loginView .brand-dark .brand-original-gray{width:min(360px,100%);height:auto !important;max-width:none}
}

/* v9: force the original SFD brand to display at the intended size on login */
@media (min-width:1051px){
  #loginView:not(.hidden) .login-form-panel .brand.brand-dark img.brand-original-gray{
    width:300px !important;
    height:auto !important;
    max-width:100% !important;
  }
}
@media (max-width:1050px){
  #loginView .login-form-panel .brand.brand-dark img.brand-original-gray{
    width:260px !important;
    height:auto !important;
    max-width:100% !important;
  }
}


/* v10: complete grayscale brand (symbol + original lettering), 20% smaller */
#loginView .login-brand-combo{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  max-width:none;
  margin:0 0 6px 0;
  overflow:visible;
}
#loginView .login-brand-combo .brand-symbol-gray{
  width:58px !important;
  height:58px !important;
  max-width:none !important;
  object-fit:contain;
  flex:0 0 58px;
  filter:grayscale(1) saturate(0) brightness(.42) contrast(1.25);
}
#loginView .login-brand-combo .brand-original-gray{
  width:240px !important;
  height:auto !important;
  max-width:calc(100% - 68px) !important;
  object-fit:contain;
  object-position:left center;
  filter:grayscale(1) saturate(0) brightness(.38) contrast(1.28);
}
#loginView .login-form-panel > .eyebrow.dark{
  margin-left:0;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-symbol-gray{
    width:52px !important;
    height:52px !important;
    flex-basis:52px;
  }
  #loginView .login-brand-combo .brand-original-gray{
    width:208px !important;
    max-width:calc(100% - 62px) !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo{gap:8px}
  #loginView .login-brand-combo .brand-symbol-gray{
    width:46px !important;
    height:46px !important;
    flex-basis:46px;
  }
  #loginView .login-brand-combo .brand-original-gray{
    width:190px !important;
    max-width:calc(100% - 54px) !important;
  }
}

/* v11: increase symbol 15% and scale lettering to preserve the main-site brand proportion */
#loginView .login-brand-combo{
  gap:11px;
}
#loginView .login-brand-combo .brand-symbol-gray{
  width:67px !important;
  height:67px !important;
  flex-basis:67px;
}
#loginView .login-brand-combo .brand-original-gray{
  width:276px !important;
  max-width:calc(100% - 78px) !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-symbol-gray{
    width:60px !important;
    height:60px !important;
    flex-basis:60px;
  }
  #loginView .login-brand-combo .brand-original-gray{
    width:239px !important;
    max-width:calc(100% - 71px) !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo{gap:9px}
  #loginView .login-brand-combo .brand-symbol-gray{
    width:53px !important;
    height:53px !important;
    flex-basis:53px;
  }
  #loginView .login-brand-combo .brand-original-gray{
    width:219px !important;
    max-width:calc(100% - 62px) !important;
  }
}

/* v12: reduce SANS FRONTIÈRES DESIGN lettering 25%, keep symbol unchanged */
#loginView .login-brand-combo .brand-original-gray{
  width:207px !important;
  max-width:calc(100% - 78px) !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-original-gray{
    width:179px !important;
    max-width:calc(100% - 71px) !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo .brand-original-gray{
    width:164px !important;
    max-width:calc(100% - 62px) !important;
  }
}


/* v13: exact reference proportion — one grayscale brand asset */
#loginView .login-brand-combo{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 8px 0 !important;
  gap:0 !important;
}
#loginView .login-brand-combo .brand-combined-gray{
  display:block !important;
  width:352px !important;
  height:auto !important;
  max-width:88% !important;
  object-fit:contain !important;
  object-position:left top !important;
  filter:none !important;
  flex:none !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:324px !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:285px !important;
    max-width:92% !important;
  }
}

/* v14: move brand up, reduce 20%, improve grayscale visibility on light panel */
#loginView .login-brand-combo{
  margin:-15px 0 8px 0 !important;
}
#loginView .login-brand-combo .brand-combined-gray{
  width:282px !important;
  max-width:82% !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:259px !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:228px !important;
    max-width:88% !important;
  }
}

/* v15: logo 20% smaller and 20px higher */
#loginView .login-brand-combo{
  margin:-35px 0 8px 0 !important;
}
#loginView .login-brand-combo .brand-combined-gray{
  width:226px !important;
  max-width:78% !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:207px !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo .brand-combined-gray{
    width:182px !important;
    max-width:84% !important;
  }
}

/* v16: force visible upward movement of the complete login brand */
#loginView .login-brand-combo{
  position:relative !important;
  top:-20px !important;
  margin-bottom:-12px !important;
}
#loginView .login-brand-combo .brand-combined-gray{
  width:226px !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo{
    top:-20px !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo{
    top:-16px !important;
  }
}

/* v17: move only the logo upward, keep the rest of the block in place */
#loginView .login-brand-combo{
  position:relative !important;
  top:0 !important;
  margin:-35px 0 8px 0 !important;
  margin-bottom:8px !important;
}
#loginView .login-brand-combo .brand-combined-gray{
  width:226px !important;
  transform:translateY(-20px) !important;
  transform-origin:left top !important;
}
@media (max-width:1050px){
  #loginView .login-brand-combo{
    top:0 !important;
  }
  #loginView .login-brand-combo .brand-combined-gray{
    transform:translateY(-20px) !important;
  }
}
@media (max-width:760px){
  #loginView .login-brand-combo{
    top:0 !important;
  }
  #loginView .login-brand-combo .brand-combined-gray{
    transform:translateY(-16px) !important;
  }
}

/* v18: move ONLY right-panel title/subtitle upward; title 15% smaller */
@media (min-width:1051px){
  #loginView:not(.hidden) .login-media-copy .media-corporate-title{
    position:relative !important;
    top:-245px !important;
    font-size:clamp(16.5px,1.83vw,26.4px) !important;
    line-height:1.08 !important;
    margin-bottom:12px !important;
  }
  #loginView:not(.hidden) .login-media-copy > p{
    position:relative !important;
    top:-245px !important;
  }
}

/* v19: move title/subtitle higher so they stay above the monitors */
@media (min-width:1051px){
  #loginView:not(.hidden) .login-media-copy .media-corporate-title{
    top:-325px !important;
  }
  #loginView:not(.hidden) .login-media-copy > p{
    top:-325px !important;
  }
}

/* v20: title/subtitle higher; title uses the compact bold typeface from reference */
@media (min-width:1051px){
  #loginView:not(.hidden) .login-media-copy .media-corporate-title{
    top:-380px !important;
    font-family:"Arial Narrow", Arial, Helvetica, sans-serif !important;
  }
  #loginView:not(.hidden) .login-media-copy > p{
    top:-380px !important;
  }
}

/* v21 adjustments */
/* 1. Login left panel: 30% transparency (70% visible white) */
#loginView .login-form-panel{
  background:rgba(245,248,250,.70) !important;
  backdrop-filter:blur(16px) saturate(.85) !important;
  -webkit-backdrop-filter:blur(16px) saturate(.85) !important;
}

/* 2. Improve title/subtitle readability over the office image without changing title color */
#loginView .login-media-copy .media-corporate-title{
  text-shadow:0 2px 8px rgba(0,0,0,.78), 0 1px 2px rgba(0,0,0,.95) !important;
}
#loginView .login-media-copy > p{
  color:rgba(255,255,255,.96) !important;
  text-shadow:0 2px 7px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,1) !important;
  background:rgba(5,12,18,.28) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  padding:7px 10px !important;
  border-radius:8px !important;
  width:max-content !important;
  max-width:520px !important;
}

/* 3. Use the same grayscale SFD logo after login */
#portalView .portal-brand-gray{
  display:flex !important;
  align-items:center !important;
  text-decoration:none !important;
  flex:0 0 auto !important;
}
#portalView .portal-brand-gray img{
  display:block !important;
  width:190px !important;
  height:auto !important;
  max-height:58px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

/* 4. Language icon buttons 40% smaller */
.lang-pill{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  padding:0 !important;
}
.lang-pill img{
  width:14px !important;
  height:14px !important;
}
.lang-icons{gap:7px !important;}

/* 5. Logged-in hero panel uses original HFC map + three highlighters image */
#portalView .hero-card{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(7,15,23,.88) 0%,rgba(7,15,23,.77) 53%,rgba(7,15,23,.62) 100%),
    url('/SFD/assets/sfd-hero-03.png') center 47%/cover no-repeat !important;
}
#portalView .hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,10,16,.14),rgba(4,10,16,.24));
  pointer-events:none;
}
#portalView .hero-card > *{
  position:relative !important;
  z-index:1 !important;
}

@media(max-width:760px){
  #portalView .portal-brand-gray img{width:150px !important;max-height:48px !important;}
  .lang-pill{width:21px !important;height:21px !important;min-width:21px !important;}
  .lang-pill img{width:13px !important;height:13px !important;}
}


/* v22: left login panel glass effect + highlighter-inspired field fills; right panel unchanged */
#loginView .login-form-panel{
  background:linear-gradient(180deg, rgba(245,248,251,.18) 0%, rgba(241,245,248,.14) 100%) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  border-right:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.08);
}
#loginView .dark-field input{
  box-shadow:0 10px 22px rgba(24,40,56,.08), inset 0 1px 0 rgba(255,255,255,.38);
}
#loginView .dark-field input[disabled],
#loginView .dark-field input[readonly]{
  background:linear-gradient(90deg, rgba(203,228,212,.82) 0%, rgba(244,230,187,.74) 100%) !important;
  color:#5f6e79 !important;
  border-color:rgba(146,165,155,.30) !important;
  cursor:not-allowed !important;
  opacity:.95 !important;
}
#loginView #password{
  background:linear-gradient(90deg, rgba(203,228,239,.86) 0%, rgba(231,242,248,.84) 100%) !important;
  color:#203244 !important;
  border-color:rgba(134,170,196,.34) !important;
}
#loginView #password::placeholder{
  color:rgba(52,77,96,.62) !important;
}
#loginView .login-footer-note{
  background:transparent !important;
}

/* v23: left panel frosted light glass for better text readability */
#loginView .login-form-panel{
  background:linear-gradient(180deg, rgba(247,249,251,.50) 0%, rgba(243,246,249,.44) 100%) !important;
  backdrop-filter:blur(22px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.04) !important;
  border-right:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#loginView .login-form-panel h1{
  color:#172433 !important;
}
#loginView .lead.dark,
#loginView .login-footer-note,
#loginView .login-footer-note p,
#loginView .dark-link,
#loginView .msg,
#loginView .msg.ok{
  color:#46596b !important;
}
#loginView .dark-link{
  color:#275f8a !important;
}
#loginView .login-footer-note strong,
#loginView .dark-field span,
#loginView .eyebrow.dark{
  color:#43617d !important;
}
#loginView .eyebrow.dark{
  text-shadow:none !important;
}
#loginView .login-form-panel .login-brand-combo,
#loginView .login-form-panel .field,
#loginView .login-form-panel .login-footer-note,
#loginView .login-form-panel #forgotBtn,
#loginView .login-form-panel h1,
#loginView .login-form-panel .lead.dark{
  position:relative;
  z-index:1;
}

/* v24: remove blue tones from the left login panel */
#loginView .eyebrow.dark,
#loginView .dark-field span,
#loginView .login-footer-note strong,
#loginView .dark-link,
#loginView .login-footer-note,
#loginView .login-footer-note p,
#loginView .lead.dark{
  color:#4a4f55 !important;
}
#loginView .dark-link{
  color:#3f4348 !important;
}
#loginView .dark-link:hover{
  color:#1f2327 !important;
}
#loginView .login-form-panel h1{
  color:#1f252b !important;
}

/* v26 visual: show the HFC map in its original color, without darkening */
#portalView .hero-card{
  background:url('/SFD/assets/sfd-hero-03.png') center 47%/cover no-repeat !important;
}
#portalView .hero-card::before{
  display:none !important;
  background:transparent !important;
}
/* keep text readable without darkening the image */
#portalView .hero-copy h1,
#portalView .hero-copy p,
#portalView .hero-note strong,
#portalView .hero-note span,
#portalView .hero-chip,
#portalView .hero-upload{
  text-shadow:0 2px 10px rgba(0,0,0,.26) !important;
}

/* v27 visual: dark fade on the left, progressively revealing the original HFC image to the right */
#portalView .hero-card{
  background:
    linear-gradient(90deg,
      rgba(5,10,16,.82) 0%,
      rgba(5,10,16,.68) 22%,
      rgba(5,10,16,.42) 42%,
      rgba(5,10,16,.18) 62%,
      rgba(5,10,16,.05) 78%,
      rgba(5,10,16,0) 100%),
    url('/SFD/assets/sfd-hero-03.png') center 47%/cover no-repeat !important;
}
#portalView .hero-card::before{
  display:none !important;
  background:transparent !important;
}


/* v28: icon-only download + visible edit/delete maintenance controls */
#portalView .file-row{grid-template-columns:minmax(0,1fr) 110px 150px 230px !important;}
#portalView .file-actions{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;}
#portalView .file-actions .icon-action{width:38px !important;height:38px !important;min-width:38px !important;padding:0 !important;border-radius:12px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.04) !important;color:#eef2f4 !important;text-decoration:none !important;}
#portalView .file-actions .icon-action svg{width:18px !important;height:18px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
#portalView .file-actions .view-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;text-decoration:none;color:#eef2f4;font-size:9px;font-weight:700;letter-spacing:.08em;}
#portalView .file-actions button.icon-action{cursor:pointer !important;}
#portalView .file-actions .icon-action:hover:not(.disabled){background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.28) !important;}
#portalView .file-actions .icon-action.disabled,#portalView .file-actions .icon-action:disabled{opacity:.26 !important;cursor:not-allowed !important;filter:grayscale(1) !important;transform:none !important;}
#portalView .file-actions .file-delete:not(.disabled):hover{background:rgba(160,70,70,.18) !important;border-color:rgba(205,120,120,.32) !important;}
@media(max-width:760px){#portalView .file-row{grid-template-columns:minmax(0,1fr) 70px !important;}#portalView .file-actions{grid-column:1/-1 !important;justify-content:flex-start !important;}}

/* v29: upload button placement/transparency + pastel action colors */
#portalView .hero-side{
  justify-content:flex-start !important;
  align-items:flex-end !important;
  padding-top:10px !important;
}
#portalView .hero-upload{
  margin-top:-10px !important;
  transform:translateY(-8px) !important;
  background:rgba(42,42,42,.30) !important; /* 70% transparent */
  border:1px solid rgba(255,255,255,.26) !important;
  color:#f4f5f6 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
#portalView .hero-upload:hover{
  background:rgba(42,42,42,.40) !important;
  border-color:rgba(255,255,255,.34) !important;
}

/* action icons colors */
#portalView .file-actions a.icon-action:not(.view-action){
  background:rgba(187,227,236,.20) !important;
  border-color:rgba(187,227,236,.40) !important;
  color:#bfe6ef !important; /* pastel celeste */
}
#portalView .file-actions a.icon-action:not(.view-action):hover{
  background:rgba(187,227,236,.30) !important;
  border-color:rgba(187,227,236,.52) !important;
}
#portalView .file-actions .file-edit{
  background:rgba(245,201,156,.18) !important;
  border-color:rgba(245,201,156,.36) !important;
  color:#f3c99c !important; /* pastel orange */
}
#portalView .file-actions .file-edit:hover:not(.disabled){
  background:rgba(245,201,156,.28) !important;
  border-color:rgba(245,201,156,.48) !important;
}
#portalView .file-actions .file-delete{
  background:rgba(167,77,77,.16) !important;
  border-color:rgba(184,96,96,.34) !important;
  color:#c98383 !important; /* sober red */
}
#portalView .file-actions .file-delete:hover:not(.disabled){
  background:rgba(167,77,77,.24) !important;
  border-color:rgba(197,111,111,.46) !important;
}
/* keep disabled buttons visible but clearly inactive */
#portalView .file-actions .file-edit.disabled,
#portalView .file-actions .file-edit:disabled,
#portalView .file-actions .file-delete.disabled,
#portalView .file-actions .file-delete:disabled{
  opacity:.45 !important;
  filter:saturate(.6) grayscale(.15) !important;
}

/* v30: smaller/higher upload button + premium upload/password modals */
#portalView .hero-side{
  padding-top:0 !important;
}
#portalView .hero-upload{
  min-width:176px !important;
  min-height:46px !important;
  padding:12px 22px !important;
  font-size:11px !important;
  letter-spacing:.18em !important;
  margin-top:-18px !important;
  transform:translateY(-20px) !important;
  border-radius:18px !important;
}
@media (max-width:760px){
  #portalView .hero-upload{
    min-width:160px !important;
    min-height:42px !important;
    transform:translateY(-10px) !important;
  }
}

/* richer modal shell */
#portalView .modal{
  background:rgba(4,10,16,.74) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
#portalView .modal-card{
  width:min(620px,100%) !important;
  padding:34px 38px 36px !important;
  border-radius:30px !important;
  border:1px solid rgba(134,162,186,.22) !important;
  background:
    radial-gradient(circle at top right, rgba(33,86,126,.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(115,156,194,.08), transparent 28%),
    linear-gradient(145deg, rgba(8,20,31,.96) 0%, rgba(8,18,29,.96) 52%, rgba(8,27,44,.94) 100%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
#portalView .modal-card.wide{
  width:min(980px,100%) !important;
}
#portalView .modal-card::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.035);
  pointer-events:none;
}
#portalView .modal .x{
  right:18px !important;
  top:14px !important;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#dbe6f0 !important;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:26px !important;
  line-height:1 !important;
}
#portalView .modal .x:hover{
  background:rgba(255,255,255,.08);
}
#portalView .modal .kicker{
  color:#bff2ee !important;
  font-size:12px !important;
  letter-spacing:.22em !important;
}
#portalView .modal h2{
  margin:14px 0 22px !important;
  color:#f2f7fb !important;
  font-size:clamp(34px,4.2vw,48px) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
  font-weight:500 !important;
}
#portalView .modal p.muted{
  color:#aab9c8 !important;
  line-height:1.7 !important;
  margin:0 0 16px !important;
}
#portalView .modal .field{
  gap:10px !important;
  margin:18px 0 0 !important;
}
#portalView .modal .field span,
#portalView .pw-form h3{
  color:#edf4f8 !important;
  font-size:12px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
#portalView .modal .field select,
#portalView .modal .field input,
#portalView .pw-form input{
  border-radius:18px !important;
  border:1px solid rgba(166,190,214,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(244,248,251,.95) 100%) !important;
  color:#182331 !important;
  min-height:56px !important;
  padding:16px 18px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
#portalView .modal .field select:focus,
#portalView .modal .field input:focus,
#portalView .pw-form input:focus{
  border-color:rgba(166,210,230,.44) !important;
  box-shadow:0 0 0 4px rgba(166,210,230,.12), 0 12px 30px rgba(0,0,0,.15) !important;
}
#portalView .drop{
  position:relative;
  min-height:168px !important;
  padding:30px 24px !important;
  margin:22px 0 16px !important;
  border-radius:24px !important;
  border:1px dashed rgba(188,214,231,.24) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#portalView .drop strong{
  display:block;
  color:#f2f6fa !important;
  font-size:18px !important;
  margin-top:12px;
  font-weight:600 !important;
}
#portalView .drop span{
  color:#b4c0cb !important;
  font-size:13px !important;
}
#portalView .drop input[type="file"]{
  display:block;
  margin:0 auto 12px !important;
  max-width:100%;
  color:#e8eef4;
}
#portalView .modal .modal-action,
#portalView .pw-form .ghost{
  min-height:54px !important;
  border-radius:18px !important;
  font-size:12px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
#portalView #uploadBtn.modal-action{
  background:linear-gradient(180deg, rgba(42,42,42,.68) 0%, rgba(23,23,23,.74) 100%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#f3f6f9 !important;
  box-shadow:0 18px 36px rgba(0,0,0,.22) !important;
}
#portalView #uploadBtn.modal-action:hover{
  background:linear-gradient(180deg, rgba(52,52,52,.72) 0%, rgba(28,28,28,.78) 100%) !important;
}
#portalView .password-grid{
  gap:18px !important;
}
#portalView .pw-form{
  position:relative;
  padding:24px 22px 22px !important;
  border-radius:24px !important;
  border:1px solid rgba(168,190,212,.16) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#portalView .pw-form::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:24px 0 0 24px;
  background:linear-gradient(180deg, rgba(189,235,229,.85), rgba(140,183,211,.35));
}
#portalView .pw-form h3{
  margin:0 0 16px !important;
  padding-left:10px;
}
#portalView .pw-form .ghost{
  width:100% !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#eef4f8 !important;
}
#portalView .pw-form .ghost:hover{
  background:rgba(255,255,255,.10) !important;
}
#portalView .pw-form .msg,
#portalView #uploadMsg{
  margin-top:12px !important;
  color:#d6e0ea !important;
}
@media (max-width:760px){
  #portalView .modal-card,
  #portalView .modal-card.wide{
    width:min(94vw,100%) !important;
    padding:26px 22px 24px !important;
    border-radius:24px !important;
  }
  #portalView .modal h2{
    font-size:30px !important;
  }
  #portalView .drop{
    min-height:150px !important;
    padding:24px 18px !important;
  }
}

/* v31: premium modal redesign */
#portalView .modal-card{
  overflow:hidden;
}
#portalView .modal-lead{
  color:#9fb0c0 !important;
  max-width:62ch;
  margin:0 0 24px !important;
}
#portalView .upload-modal-card{
  width:min(660px,100%) !important;
}
#portalView .modal-surface{
  padding:26px;
  border-radius:24px;
  border:1px solid rgba(173,197,219,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.018) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#portalView .modal-field{
  margin-top:0 !important;
}
#portalView .upload-zone{
  margin:22px 0 14px;
  padding:26px 22px;
  border-radius:24px;
  border:1px dashed rgba(187,209,228,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#portalView .upload-picker{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  cursor:pointer;
}
#portalView .picker-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,251,.96));
  color:#17222f;
  border:1px solid rgba(165,185,203,.28);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
#portalView .picker-name{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(173,197,219,.14);
  background:rgba(255,255,255,.04);
  color:#dbe5ee;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
#portalView .upload-zone-copy{
  text-align:center;
  padding-top:4px;
}
#portalView .upload-zone-copy strong{
  display:block;
  color:#f1f6fa;
  font-size:22px;
  margin-bottom:8px;
  font-weight:500;
}
#portalView .upload-zone-copy span{
  display:block;
  color:#aebbc7;
  line-height:1.7;
  font-size:13px;
}
#portalView .premium-password-grid{
  gap:22px !important;
}
#portalView .premium-pw-card{
  padding:24px 22px 22px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border:1px solid rgba(173,197,219,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#portalView .pw-card-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}
#portalView .pw-card-mark{
  width:44px;
  height:44px;
  border-radius:16px;
  flex:0 0 44px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#portalView .pw-admin-mark{
  background:linear-gradient(135deg, rgba(191,242,235,.28), rgba(118,172,205,.14));
}
#portalView .pw-user-mark{
  background:linear-gradient(135deg, rgba(248,214,177,.22), rgba(192,214,235,.14));
}
#portalView .premium-pw-card h3{
  margin:2px 0 6px !important;
  padding-left:0 !important;
}
#portalView .pw-card-note{
  margin:0;
  color:#9fb0c0;
  line-height:1.6;
  font-size:13px;
}
#portalView .premium-pw-card input{
  margin-bottom:12px !important;
}
#portalView .premium-pw-card .ghost{
  margin-top:4px;
}
@media (max-width:760px){
  #portalView .modal-surface{padding:18px}
  #portalView .upload-zone{padding:20px 16px}
  #portalView .upload-picker{gap:10px}
  #portalView .picker-btn,
  #portalView .picker-name{width:100%;justify-content:center}
  #portalView .upload-zone-copy strong{font-size:18px}
  #portalView .pw-card-head{gap:12px}
  #portalView .pw-card-mark{width:38px;height:38px;flex-basis:38px}
}

/* v32: restore original modal distribution; upgrade only visual language */
/* UPLOAD — original structure, richer Team Resources finish */
#uploadModal .modal-card{
  width:min(620px,94vw) !important;
  padding:34px 36px 36px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:1px solid rgba(196,208,218,.16) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(204,226,217,.10), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(244,218,181,.08), transparent 26%),
    linear-gradient(145deg, rgba(18,23,28,.97) 0%, rgba(25,31,37,.96) 58%, rgba(31,36,41,.95) 100%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
#uploadModal .modal-card::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg, rgba(204,226,203,.90), rgba(245,210,174,.82), rgba(188,223,233,.86));
}
#uploadModal .kicker{
  color:#d7e4df !important;
  letter-spacing:.22em !important;
}
#uploadModal h2{
  margin:12px 0 22px !important;
  color:#f3f4f5 !important;
  font-size:38px !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
  font-weight:500 !important;
}
#uploadModal .field{
  margin:0 !important;
  gap:9px !important;
}
#uploadModal .field span{
  color:#c9d0d5 !important;
  letter-spacing:.18em !important;
}
#uploadModal #uploadCategory{
  min-height:56px !important;
  border-radius:16px !important;
  border:1px solid rgba(78,86,92,.15) !important;
  background:linear-gradient(180deg, rgba(247,248,249,.98), rgba(233,236,238,.96)) !important;
  color:#20262b !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#uploadModal .drop{
  min-height:170px !important;
  margin:22px 0 14px !important;
  padding:28px 24px !important;
  border-radius:22px !important;
  border:1px dashed rgba(201,211,217,.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    radial-gradient(circle at 50% 0%, rgba(204,226,203,.08), transparent 58%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 34px rgba(0,0,0,.14) !important;
}
#uploadModal .drop input[type="file"]{
  margin:0 0 14px !important;
  color:#e2e5e8 !important;
  font-size:14px !important;
}
#uploadModal .drop strong{
  color:#f2f3f4 !important;
  font-size:18px !important;
  font-weight:600 !important;
  margin-top:0 !important;
}
#uploadModal .drop span{
  color:#aeb6bd !important;
  font-size:13px !important;
  letter-spacing:.01em !important;
}
#uploadModal #uploadBtn{
  min-height:52px !important;
  border-radius:16px !important;
  margin-top:14px !important;
  background:linear-gradient(180deg, rgba(66,69,72,.82), rgba(40,43,46,.88)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#f4f4f4 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#uploadModal #uploadBtn:hover{
  background:linear-gradient(180deg, rgba(77,80,83,.88), rgba(47,50,53,.92)) !important;
}
#uploadModal .x{
  color:#d7dbde !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}

/* PASSWORD MAINTENANCE — keep two-column original distribution */
#settingsModal .modal-card.wide{
  width:min(980px,94vw) !important;
  padding:34px 36px 36px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  border:1px solid rgba(196,208,218,.16) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(188,223,233,.09), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(244,218,181,.07), transparent 26%),
    linear-gradient(145deg, rgba(18,23,28,.97) 0%, rgba(24,30,35,.96) 58%, rgba(31,36,41,.95) 100%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
#settingsModal .modal-card.wide::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg, rgba(204,226,203,.90), rgba(245,210,174,.82), rgba(188,223,233,.86));
}
#settingsModal .kicker{
  color:#d7e4df !important;
  letter-spacing:.22em !important;
}
#settingsModal h2{
  margin:12px 0 10px !important;
  color:#f3f4f5 !important;
  font-size:40px !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
  font-weight:500 !important;
}
#settingsModal > .modal-card > .muted{
  color:#b0b8bf !important;
  margin:0 0 24px !important;
}
#settingsModal .password-grid{
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  margin-top:24px !important;
}
#settingsModal .pw-form{
  position:relative !important;
  padding:24px 22px 22px !important;
  border-radius:22px !important;
  overflow:hidden !important;
  border:1px solid rgba(200,209,215,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.12) !important;
}
#settingsModal .pw-form:first-child::before,
#settingsModal .pw-form:last-child::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:3px;
}
#settingsModal .pw-form:first-child::before{
  background:linear-gradient(90deg, rgba(204,226,203,.84), rgba(188,223,233,.54));
}
#settingsModal .pw-form:last-child::before{
  background:linear-gradient(90deg, rgba(245,210,174,.82), rgba(236,199,176,.48));
}
#settingsModal .pw-form h3{
  margin:0 0 18px !important;
  color:#f0f2f3 !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
#settingsModal .pw-form input{
  min-height:54px !important;
  margin-bottom:12px !important;
  border-radius:15px !important;
  border:1px solid rgba(72,81,88,.14) !important;
  background:linear-gradient(180deg, rgba(247,248,249,.98), rgba(233,236,238,.96)) !important;
  color:#20262b !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#settingsModal .pw-form input::placeholder{
  color:#7d8388 !important;
}
#settingsModal .pw-form .ghost{
  width:100% !important;
  min-height:48px !important;
  border-radius:14px !important;
  margin-top:2px !important;
  background:linear-gradient(180deg, rgba(70,73,76,.72), rgba(46,49,52,.82)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:#f1f1f1 !important;
  box-shadow:0 12px 24px rgba(0,0,0,.16) !important;
}
#settingsModal .pw-form .ghost:hover{
  background:linear-gradient(180deg, rgba(80,83,86,.80), rgba(53,56,59,.88)) !important;
}
#settingsModal .x{
  color:#d7dbde !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}

@media(max-width:760px){
  #uploadModal .modal-card,
  #settingsModal .modal-card.wide{
    width:min(94vw,100%) !important;
    padding:28px 20px 24px !important;
    border-radius:24px !important;
  }
  #uploadModal h2,#settingsModal h2{font-size:30px !important}
  #settingsModal .password-grid{grid-template-columns:1fr !important}
}

/* v33: subtle blurred office/archive imagery inside premium modals — layout unchanged */
#uploadModal .modal-card,
#settingsModal .modal-card.wide{
  isolation:isolate !important;
}
#uploadModal .modal-card::after,
#settingsModal .modal-card.wide::after{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:-2;
  pointer-events:none;
  background:url('/SFD/assets/sfd-hero-04.jpg') center/cover no-repeat;
  filter:blur(12px) brightness(.48) saturate(.72);
  transform:scale(1.06);
  opacity:.36;
}
#uploadModal .modal-card::before,
#settingsModal .modal-card.wide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(145deg, rgba(18,23,28,.83) 0%, rgba(24,30,35,.78) 58%, rgba(31,36,41,.74) 100%),
    radial-gradient(circle at 88% 12%, rgba(188,223,233,.08), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(244,218,181,.06), transparent 26%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* Restore the thin premium top accent after reusing ::before */
#uploadModal .modal-card{
  border-top:4px solid rgba(207,224,214,.66) !important;
}
#settingsModal .modal-card.wide{
  border-top:4px solid rgba(207,224,214,.58) !important;
}

/* Slightly lighter inner surfaces so the blurred imagery is perceived without hurting readability */
#uploadModal .drop,
#settingsModal .pw-form{
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}
#uploadModal .field select,
#settingsModal .pw-form input{
  box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* v34: move only the main UPLOAD FILE button slightly lower and to the right */
#portalView .hero-upload{
  transform:translate(14px,-10px) !important;
}
@media (max-width:760px){
  #portalView .hero-upload{
    transform:translate(10px,-4px) !important;
  }
}


/* v36: drag-to-reorder file rows (administrator only) */
#portalView .file-row{
  position:relative;
}
#portalView .file-row.is-draggable{
  cursor:grab;
  grid-template-columns:28px minmax(0,1fr) 110px 150px 230px !important;
  user-select:none;
}
#portalView .file-row.is-draggable:active{
  cursor:grabbing;
}
#portalView .drag-handle{
  width:24px;
  min-width:24px;
  height:34px;
  display:grid;
  grid-template-columns:repeat(2,4px);
  grid-auto-rows:4px;
  gap:4px;
  align-content:center;
  justify-content:center;
  border-radius:10px;
  opacity:.68;
  transition:opacity .18s ease, background .18s ease, transform .18s ease;
}
#portalView .drag-handle span{
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(226,232,236,.78);
}
#portalView .file-row.is-draggable:hover .drag-handle{
  opacity:1;
  background:rgba(255,255,255,.07);
}
#portalView .drag-handle.disabled{
  display:none;
}
#portalView .file-row.dragging{
  opacity:.56 !important;
  transform:scale(.995);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  z-index:3;
}
#portalView .file-row.drag-over{
  box-shadow:inset 0 2px 0 rgba(194,225,220,.68);
}
@media(max-width:760px){
  #portalView .file-row.is-draggable{
    grid-template-columns:24px minmax(0,1fr) 70px !important;
  }
  #portalView .file-row.is-draggable .file-actions{
    grid-column:2/-1 !important;
  }
}

/* v39: upload drag/drop zone + progress */
#portalView .upload-zone{
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
#portalView .upload-zone.is-dragover{
  border-color:rgba(178,223,215,.72) !important;
  background:linear-gradient(180deg,rgba(203,226,219,.16),rgba(255,255,255,.045)) !important;
  box-shadow:0 0 0 4px rgba(180,220,212,.08),inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:translateY(-1px);
}
#portalView .upload-zone.has-file{
  border-style:solid !important;
  border-color:rgba(222,196,158,.34) !important;
}
#portalView .upload-drop-icon{
  width:52px;
  height:52px;
  margin:0 auto 12px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
#portalView .upload-drop-icon svg{
  width:25px;height:25px;fill:none;stroke:#c8ddd7;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
#portalView .upload-picker-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
#portalView .picker-btn{
  cursor:pointer;
}
#portalView .picker-name{
  color:#cbd3da;
  font-size:13px;
  max-width:320px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#portalView .upload-progress-wrap{
  margin:16px 0 4px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
#portalView .upload-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
  color:#dce4e8;
  font-size:12px;
  letter-spacing:.06em;
}
#portalView .upload-progress-head strong{
  color:#e9d4ad;
  font-size:12px;
}
#portalView .upload-progress-track{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
#portalView .upload-progress-bar{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(203,228,212,.95),rgba(244,213,178,.95));
  transition:width .12s linear;
  box-shadow:0 0 16px rgba(224,218,183,.18);
}
@media(max-width:760px){
  #portalView .upload-picker-row{align-items:stretch;flex-direction:column}
  #portalView .picker-name{max-width:100%;text-align:center}
}


/* v40 — definitive Upload modal repair.
   The upload modal lives OUTSIDE #portalView, so all modal styles are scoped directly to #uploadModal. */

#uploadModal{
  padding:24px !important;
  overflow:auto !important;
}

#uploadModal .modal-card{
  width:min(650px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 48px) !important;
  overflow:auto !important;
  padding:30px 34px 32px !important;
  border-radius:28px !important;
}

#uploadModal .modal-lead{
  margin:0 0 20px !important;
  color:rgba(231,237,241,.70) !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

#uploadModal .modal-surface{
  display:block !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#uploadModal .modal-field{
  margin:0 !important;
  gap:8px !important;
}

#uploadModal .modal-field > span{
  color:#d8dde1 !important;
}

#uploadModal #uploadCategory{
  width:100% !important;
  min-height:54px !important;
  border-radius:16px !important;
  padding:0 18px !important;
  font-size:16px !important;
  color:#21272c !important;
  background:linear-gradient(180deg,rgba(250,250,249,.98),rgba(233,235,236,.97)) !important;
  border:1px solid rgba(255,255,255,.35) !important;
}

/* Drag & drop panel */
#uploadModal .upload-zone{
  position:relative !important;
  width:100% !important;
  min-height:190px !important;
  margin:20px 0 14px !important;
  padding:24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  border-radius:22px !important;
  border:1px dashed rgba(224,229,232,.32) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,225,216,.09), transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.025)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 38px rgba(0,0,0,.14) !important;
  cursor:pointer !important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease !important;
  overflow:hidden !important;
}

#uploadModal .upload-zone:hover{
  border-color:rgba(219,229,226,.46) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,225,216,.12), transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032)) !important;
}

#uploadModal .upload-zone.is-dragover{
  border-color:rgba(193,223,214,.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(202,229,218,.18), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.040)) !important;
  box-shadow:
    0 0 0 4px rgba(194,223,214,.07),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:translateY(-1px) !important;
}

#uploadModal .upload-zone.has-file{
  border-style:solid !important;
  border-color:rgba(235,205,166,.46) !important;
}

#uploadModal .upload-drop-icon{
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  margin:0 0 2px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

#uploadModal .upload-drop-icon svg{
  width:25px !important;
  height:25px !important;
  fill:none !important;
  stroke:#d3dfdc !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#uploadModal .upload-zone-copy{
  text-align:center !important;
  margin:0 !important;
}

#uploadModal .upload-zone-copy strong{
  display:block !important;
  margin:0 0 6px !important;
  color:#f2f3f4 !important;
  font-size:17px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}

#uploadModal .upload-zone-copy span{
  display:block !important;
  color:#acb5bc !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
}

#uploadModal .upload-picker-row{
  width:100% !important;
  margin-top:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

#uploadModal .picker-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(247,248,248,.98),rgba(227,230,232,.96)) !important;
  color:#242a2f !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.13) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

#uploadModal .picker-name{
  max-width:320px !important;
  color:#d3d9de !important;
  font-size:12.5px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* real progress */
#uploadModal .upload-progress-wrap{
  margin:10px 0 2px !important;
  padding:12px 14px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.035) !important;
}

#uploadModal .upload-progress-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:8px !important;
  color:#dbe1e5 !important;
  font-size:11.5px !important;
}

#uploadModal .upload-progress-head strong{
  color:#ead6b6 !important;
  font-size:11.5px !important;
}

#uploadModal .upload-progress-track{
  width:100% !important;
  height:7px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.09) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.24) !important;
}

#uploadModal .upload-progress-bar{
  width:0%;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,rgba(203,228,212,.96),rgba(244,215,181,.96)) !important;
  box-shadow:0 0 14px rgba(224,218,183,.16) !important;
  transition:width .12s linear !important;
}

#uploadModal #uploadMsg{
  min-height:16px !important;
  margin:8px 0 0 !important;
}

#uploadModal #uploadBtn{
  width:100% !important;
  min-height:48px !important;
  margin:12px 0 0 !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,rgba(67,70,72,.80),rgba(42,45,48,.88)) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#f3f4f4 !important;
  box-shadow:0 14px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#uploadModal #uploadBtn:hover{
  background:linear-gradient(180deg,rgba(77,80,82,.86),rgba(48,51,54,.92)) !important;
}

#uploadModal #uploadBtn:disabled{
  opacity:.55 !important;
  cursor:wait !important;
}

/* Avoid any native file-input block from leaking into layout */
#uploadModal #uploadFile{
  display:none !important;
}

@media(max-width:760px){
  #uploadModal{
    padding:12px !important;
  }
  #uploadModal .modal-card{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
    padding:24px 18px 22px !important;
    border-radius:22px !important;
  }
  #uploadModal h2{
    font-size:30px !important;
  }
  #uploadModal .upload-zone{
    min-height:170px !important;
    padding:20px 16px !important;
  }
  #uploadModal .upload-picker-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #uploadModal .picker-btn,
  #uploadModal .picker-name{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
  }
}


/* v41 — compact upload modal: exact fit, no internal scroll, radio-button destination */
@media (min-width:761px){
  #uploadModal{
    overflow:hidden !important;
    padding:16px !important;
  }
  #uploadModal .modal-card{
    width:min(620px, calc(100vw - 32px)) !important;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    padding:24px 30px 26px !important;
  }
  #uploadModal .modal-card h2{
    margin:10px 0 8px !important;
    font-size:36px !important;
    line-height:1.02 !important;
  }
  #uploadModal .modal-lead{
    margin:0 0 14px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }
  #uploadModal .upload-zone{
    min-height:150px !important;
    margin:14px 0 10px !important;
    padding:18px 20px !important;
    gap:7px !important;
  }
  #uploadModal .upload-drop-icon{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  #uploadModal .upload-zone-copy strong{
    font-size:16px !important;
    margin-bottom:4px !important;
  }
  #uploadModal .upload-zone-copy span{
    font-size:12px !important;
  }
  #uploadModal .upload-picker-row{
    margin-top:6px !important;
  }
  #uploadModal .upload-progress-wrap{
    margin:8px 0 2px !important;
    padding:9px 12px !important;
  }
  #uploadModal #uploadBtn{
    min-height:44px !important;
    margin-top:9px !important;
  }
}

/* destination radios */
#uploadModal .destination-radios{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:2px !important;
}
#uploadModal .destination-option{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-height:48px !important;
  padding:0 15px !important;
  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)) !important;
  color:#eef2f4 !important;
  cursor:pointer !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease !important;
}
#uploadModal .destination-option:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.048)) !important;
  border-color:rgba(255,255,255,.22) !important;
}
#uploadModal .destination-option input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#uploadModal .radio-dot{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(236,239,241,.55) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 0 0 4px transparent !important;
}
#uploadModal .destination-option input:checked + .radio-dot{
  border-color:rgba(221,225,228,.88) !important;
  background:rgba(216,219,221,.95) !important;
  box-shadow:inset 0 0 0 4px rgba(51,54,57,.95) !important;
}
#uploadModal .radio-label{
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  color:#eceff1 !important;
}
#uploadModal .destination-option:has(input:checked){
  border-color:rgba(220,224,227,.30) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055)) !important;
}

@media (max-width:760px){
  #uploadModal .destination-radios{
    grid-template-columns:1fr !important;
  }
}

/* v42 — subtler modal accent + finer destination radio controls */
#uploadModal .modal-card{
  border-top:0 !important;
  background-image:linear-gradient(90deg,
    rgba(77,194,185,.95) 0%,
    rgba(102,188,181,.78) 24%,
    rgba(113,128,132,.52) 62%,
    rgba(45,49,53,.18) 100%) !important;
  background-size:100% 3px !important;
  background-repeat:no-repeat !important;
  background-position:left top !important;
}

#uploadModal .destination-radios{
  gap:9px !important;
}
#uploadModal .destination-option{
  min-height:44px !important;
  padding:0 14px !important;
  gap:9px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.024)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#uploadModal .destination-option:hover{
  border-color:rgba(255,255,255,.17) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032)) !important;
}
#uploadModal .radio-dot{
  width:15px !important;
  height:15px !important;
  flex:0 0 15px !important;
  border-width:1px !important;
  border-color:rgba(230,234,236,.46) !important;
  background:rgba(255,255,255,.025) !important;
  box-shadow:none !important;
}
#uploadModal .destination-option input:checked + .radio-dot{
  border-color:rgba(124,201,194,.92) !important;
  background:rgba(124,201,194,.92) !important;
  box-shadow:inset 0 0 0 4px rgba(39,43,46,.95) !important;
}
#uploadModal .radio-label{
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  color:#e6e9eb !important;
}
#uploadModal .destination-option:has(input:checked){
  border-color:rgba(117,187,181,.27) !important;
  background:linear-gradient(180deg,rgba(92,145,140,.11),rgba(255,255,255,.028)) !important;
}

/* v46 — lighter frosted upload window, background less visible */
#uploadModal .modal-card{
  position:relative !important;
  background:
    linear-gradient(180deg, rgba(92,96,99,.88) 0%, rgba(72,76,79,.86) 48%, rgba(58,62,65,.88) 100%) !important;
  border:1px solid rgba(230,234,236,.18) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(26px) saturate(.78) !important;
  -webkit-backdrop-filter:blur(26px) saturate(.78) !important;
}
#uploadModal .modal-card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:3px !important;
  border-radius:28px 28px 0 0 !important;
  background:linear-gradient(90deg,
    rgba(76,201,191,.92) 0%,
    rgba(92,177,171,.70) 28%,
    rgba(118,128,130,.42) 66%,
    rgba(45,49,52,.08) 100%) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
#uploadModal .modal-card > *{
  position:relative !important;
  z-index:3 !important;
}
#uploadModal .upload-zone{
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.038)) !important;
  border-color:rgba(236,239,241,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 16px 34px rgba(0,0,0,.12) !important;
}
#uploadModal .destination-option{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045)) !important;
  border-color:rgba(255,255,255,.16) !important;
}
#uploadModal .destination-option:has(input:checked){
  background:linear-gradient(180deg,rgba(104,158,153,.20),rgba(255,255,255,.055)) !important;
  border-color:rgba(122,194,187,.34) !important;
}

/* v47 — top accent starts after rounded corner; same frost/transparency, 30% darker tone */
#uploadModal .modal-card{
  background:
    linear-gradient(180deg, rgba(64,67,69,.88) 0%, rgba(50,53,55,.86) 48%, rgba(41,43,46,.88) 100%) !important;
}
#uploadModal .modal-card::before{
  left:28px !important;
  right:28px !important;
  width:auto !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,
    rgba(76,201,191,.92) 0%,
    rgba(92,177,171,.70) 28%,
    rgba(118,128,130,.42) 66%,
    rgba(45,49,52,.08) 100%) !important;
}
@media(max-width:760px){
  #uploadModal .modal-card::before{
    left:22px !important;
    right:22px !important;
  }
}

/* v48 — fix upload top accent and close button placement */
#uploadModal .modal-card{
  border-top:1px solid rgba(230,234,236,.18) !important;
}
#uploadModal .modal-card::before{
  top:0 !important;
  left:28px !important;
  right:28px !important;
  height:3px !important;
  border-radius:0 !important;
  transform:none !important;
  background:linear-gradient(90deg,
    rgba(76,201,191,.92) 0%,
    rgba(92,177,171,.70) 28%,
    rgba(118,128,130,.42) 66%,
    rgba(45,49,52,.08) 100%) !important;
}
#uploadModal .x{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  left:auto !important;
  margin:0 !important;
  z-index:10 !important;
}
@media(max-width:760px){
  #uploadModal .modal-card::before{
    left:24px !important;
    right:24px !important;
  }
  #uploadModal .x{
    top:14px !important;
    right:14px !important;
  }
}


/* v49 — move upload top accent slightly more left so it starts right after the rounded corner */
#uploadModal .modal-card::before{
  left:18px !important;
  right:18px !important;
}
@media(max-width:760px){
  #uploadModal .modal-card::before{
    left:16px !important;
    right:16px !important;
  }
}


/* v50: ocultar texto claro del bloque Upload Area en el hero */
#portalView .hero-note{
  display:none !important;
}