/* V4.2 - Base ITW obligatoire */
.connection-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(36, 99, 235, .10), transparent 34%),
    #0b1017;
  padding: 24px;
}

.connection-gate.hidden {
  display: none !important
}

.connection-card {
  width: min(560px, 100%);
  background: #111720;
  border: 1px solid #263142;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.connection-card h1 {
  margin: 0 0 8px;
  font-size: 22px;
}

.connection-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 12px;
}

.connection-steps {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}

.connection-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #263142;
  border-radius: 10px;
  background: #0e141d;
}

.connection-step b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1c2a3e;
  font-size: 11px;
}

.connection-status {
  margin-top: 12px;
  min-height: 18px;
  font-size: 11px;
  color: var(--muted);
}

.connection-status.error {
  color: #ff9aa4
}

.connection-status.ok {
  color: #8dd6a8
}

.first-pin-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #2b3748;
  border-radius: 10px;
  background: #0d131c;
}

.first-pin-box input {
  width: 100%;
  margin-top: 8px;
  letter-spacing: .3em;
  font-family: Consolas, monospace;
}

/* V4.2.1 - Fond global + écran autorisation simplifié */
html,
body {
  background: #070b12 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 24%, rgba(76, 115, 255, .20), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(0, 206, 255, .14), transparent 22%),
    radial-gradient(circle at 72% 76%, rgba(130, 86, 255, .12), transparent 28%),
    linear-gradient(180deg, rgba(10, 16, 25, .92), rgba(7, 11, 18, .98)),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'>\
<defs>\
<linearGradient id='g1' x1='0' x2='1'><stop offset='0' stop-color='%23162238'/><stop offset='1' stop-color='%230c1320'/></linearGradient>\
<linearGradient id='g2' x1='0' x2='1'><stop offset='0' stop-color='%23385dff'/><stop offset='1' stop-color='%2358d0ff'/></linearGradient>\
</defs>\
<rect width='1600' height='900' fill='url(%23g1)'/>\
<g opacity='0.22'>\
<circle cx='1240' cy='210' r='170' fill='%23385dff'/>\
<circle cx='1280' cy='190' r='110' fill='%2358d0ff'/>\
<circle cx='1360' cy='130' r='50' fill='%238762ff'/>\
</g>\
<g opacity='0.16' stroke='url(%23g2)' stroke-width='2' fill='none'>\
<path d='M80 760 C240 640, 360 640, 520 760'/>\
<path d='M230 710 C350 610, 470 610, 590 710'/>\
<path d='M1090 720 C1220 620, 1360 620, 1490 720'/>\
<path d='M990 790 C1160 650, 1340 650, 1510 790'/>\
</g>\
<g opacity='0.22'>\
<path d='M520 640 C520 492 622 386 790 386 C950 386 1060 498 1060 640 L1060 782 L520 782 Z' fill='%230b121c'/>\
<path d='M620 430 C666 368 724 334 790 334 C858 334 916 370 962 430 C926 456 875 472 790 472 C708 472 659 457 620 430 Z' fill='%23101825'/>\
<path d='M650 520 C698 556 742 572 790 572 C840 572 884 555 930 520 L968 782 L612 782 Z' fill='%230d1724'/>\
<path d='M730 518 C746 500 767 492 790 492 C814 492 835 500 852 518' stroke='%2358d0ff' stroke-width='5'/>\
</g>\
<g opacity='0.19' fill='%23131f2d'>\
<rect x='86' y='730' width='40' height='100'/><rect x='132' y='696' width='56' height='134'/>\
<rect x='196' y='654' width='48' height='176'/><rect x='252' y='712' width='34' height='118'/>\
<rect x='1140' y='700' width='46' height='130'/><rect x='1193' y='666' width='60' height='164'/>\
<rect x='1262' y='628' width='52' height='202'/><rect x='1323' y='686' width='36' height='144'/>\
<rect x='1365' y='644' width='72' height='186'/>\
</g>\
<g opacity='0.22' stroke='%2358d0ff' stroke-width='2'>\
<line x1='790' y1='782' x2='790' y2='860'/><line x1='720' y1='782' x2='620' y2='850'/>\
<line x1='860' y1='782' x2='960' y2='850'/><line x1='690' y1='620' x2='560' y2='580'/>\
<line x1='890' y1='620' x2='1040' y2='570'/>\
</g>\
</svg>");
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
  opacity: 1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(110, 150, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 150, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  opacity: .28;
}

.connection-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: transparent !important;
  padding: 24px;
}

.connection-gate.hidden {
  display: none !important
}

.connection-card {
  width: min(500px, 100%);
  background: rgba(14, 20, 29, .86);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(71, 89, 116, .55);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.connection-badge {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #4c73ff, #6bd7ff);
  color: white;
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(76, 115, 255, .25);
}

.connection-card h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
}

.connection-card p {
  margin: 0;
  color: #afbdd0;
  line-height: 1.6;
  font-size: 13px;
}

.connection-note {
  margin-top: 12px;
  color: #7fd0a8;
  font-size: 11px;
  letter-spacing: .01em;
}

.connection-status {
  margin-top: 14px;
  min-height: 18px;
  font-size: 11px;
  color: #93a3b9;
}

.connection-status.error {
  color: #ff9aa4
}

.connection-status.ok {
  color: #8dd6a8
}

/* laisse voir légèrement le fond dans les zones vides */
#content,
.explorer-pane,
.detail-pane,
.dash-card,
.metric-card,
.vault-card,
.modal-panel {
  backdrop-filter: saturate(110%);
}

/* V4.2.2 - bouton centré + fond renforcé + fallback fichier */
.connection-card .actions {
  justify-content: center !important;
}

.connection-card .primary {
  min-width: 220px;
}

body::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(76, 115, 255, .30), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(0, 206, 255, .20), transparent 20%),
    radial-gradient(circle at 72% 76%, rgba(130, 86, 255, .18), transparent 24%),
    linear-gradient(180deg, rgba(8, 13, 21, .90), rgba(5, 9, 15, .98)),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'>\
<defs>\
<linearGradient id='g1' x1='0' x2='1'><stop offset='0' stop-color='%23172337'/><stop offset='1' stop-color='%230b121d'/></linearGradient>\
<linearGradient id='g2' x1='0' x2='1'><stop offset='0' stop-color='%233e66ff'/><stop offset='1' stop-color='%2358d0ff'/></linearGradient>\
<filter id='glow'><feGaussianBlur stdDeviation='6' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter>\
</defs>\
<rect width='1600' height='900' fill='url(%23g1)'/>\
<g opacity='0.42'>\
<circle cx='1220' cy='180' r='170' fill='%233f63ff'/><circle cx='1290' cy='170' r='108' fill='%2358d0ff'/>\
<circle cx='1360' cy='120' r='44' fill='%238f63ff'/>\
</g>\
<g opacity='0.35' stroke='url(%23g2)' stroke-width='2.2' fill='none' filter='url(%23glow)'>\
<path d='M70 765 C215 650, 365 650, 530 765'/>\
<path d='M210 705 C340 596, 470 596, 600 705'/>\
<path d='M990 786 C1155 650, 1330 650, 1515 786'/>\
<path d='M1070 715 C1200 610, 1338 610, 1468 715'/>\
<path d='M560 260 C640 220, 710 220, 790 260 C870 300, 940 300, 1020 260'/>\
</g>\
<g opacity='0.48' stroke='%23468dff' stroke-width='1.6' fill='none'>\
<circle cx='230' cy='180' r='56'/><circle cx='230' cy='180' r='88' opacity='.55'/>\
<circle cx='1310' cy='690' r='62'/><circle cx='1310' cy='690' r='96' opacity='.55'/>\
</g>\
<g opacity='0.34'>\
<path d='M520 640 C520 490 622 384 790 384 C950 384 1060 498 1060 640 L1060 785 L520 785 Z' fill='%230a111a'/>\
<path d='M620 430 C666 368 724 334 790 334 C858 334 916 370 962 430 C926 456 875 472 790 472 C708 472 659 457 620 430 Z' fill='%23111d2a'/>\
<path d='M650 520 C698 556 742 572 790 572 C840 572 884 555 930 520 L968 785 L612 785 Z' fill='%230d1623'/>\
<path d='M725 516 C745 499 767 492 790 492 C813 492 836 500 854 517' stroke='%2358d0ff' stroke-width='5' filter='url(%23glow)'/>\
<path d='M710 600 C742 625 764 660 774 712' stroke='%233f63ff' stroke-width='3'/><path d='M870 600 C838 625 816 660 806 712' stroke='%233f63ff' stroke-width='3'/>\
</g>\
<g opacity='0.26' fill='%23131e2c'>\
<rect x='80' y='724' width='42' height='104'/><rect x='128' y='690' width='58' height='138'/>\
<rect x='194' y='646' width='50' height='182'/><rect x='252' y='706' width='34' height='122'/>\
<rect x='1140' y='696' width='46' height='132'/><rect x='1194' y='662' width='60' height='166'/>\
<rect x='1263' y='624' width='52' height='204'/><rect x='1323' y='682' width='36' height='146'/>\
<rect x='1365' y='640' width='72' height='188'/>\
</g>\
<g opacity='0.40' stroke='%2358d0ff' stroke-width='2.1'>\
<line x1='790' y1='785' x2='790' y2='860'/><line x1='720' y1='785' x2='620' y2='852'/>\
<line x1='860' y1='785' x2='960' y2='852'/><line x1='690' y1='620' x2='555' y2='576'/>\
<line x1='890' y1='620' x2='1045' y2='568'/>\
</g>\
</svg>");
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
}

body::after {
  background-image:
    linear-gradient(rgba(110, 150, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 150, 255, .11) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(88, 208, 255, .09), transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  opacity: .52;
}

/* V4.2.4 - Gate cleanup / visible background / working button */
.connection-badge {
  display: none !important
}

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 16% 22%, rgba(76, 115, 255, .24), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(0, 206, 255, .18), transparent 18%),
    radial-gradient(circle at 74% 80%, rgba(133, 93, 255, .14), transparent 24%),
    linear-gradient(180deg, #09111b 0%, #060c14 100%) !important;
}

.connection-gate {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: transparent !important;
  overflow: hidden;
}

.connection-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(100, 145, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 145, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 24% 28%, rgba(88, 208, 255, .14), transparent 20%),
    radial-gradient(circle at 77% 66%, rgba(88, 208, 255, .10), transparent 18%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%;
  opacity: .9;
}

.connection-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(63, 99, 255, .24), transparent 26%),
    radial-gradient(circle at 80% 20%, rgba(88, 208, 255, .18), transparent 22%),
    radial-gradient(circle at 78% 76%, rgba(137, 98, 255, .14), transparent 28%);
}

.connection-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: min(920px, 88vw);
  height: min(620px, 66vh);
  transform: translateX(-50%);
  opacity: .65;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
<defs>\
<linearGradient id='g1' x1='0' x2='1'><stop offset='0' stop-color='%233f63ff'/><stop offset='1' stop-color='%2358d0ff'/></linearGradient>\
<filter id='glow'><feGaussianBlur stdDeviation='4' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter>\
</defs>\
<g opacity='.18' fill='%23131d2a'>\
<rect x='40' y='640' width='46' height='120'/><rect x='92' y='606' width='60' height='154'/>\
<rect x='160' y='560' width='54' height='200'/><rect x='222' y='622' width='34' height='138'/>\
<rect x='947' y='618' width='44' height='142'/><rect x='996' y='584' width='60' height='176'/>\
<rect x='1064' y='548' width='54' height='212'/><rect x='1124' y='606' width='38' height='154'/>\
</g>\
<g opacity='.34' stroke='url(%23g1)' stroke-width='2' fill='none' filter='url(%23glow)'>\
<path d='M86 692 C210 590, 334 590, 458 692'/>\
<path d='M740 716 C852 616, 980 616, 1110 716'/>\
<path d='M298 246 C394 194, 490 194, 600 246 C708 298, 804 298, 902 246'/>\
</g>\
<g opacity='.24'>\
<path d='M384 542 C384 404 480 306 600 306 C722 306 818 404 818 542 L818 726 L384 726 Z' fill='%230a1119'/>\
<path d='M464 372 C500 324 548 292 600 292 C652 292 700 324 736 372 C704 396 662 410 600 410 C540 410 496 396 464 372 Z' fill='%23111c29'/>\
<path d='M490 446 C526 474 560 488 600 488 C640 488 676 474 710 446 L744 726 L456 726 Z' fill='%230d1723'/>\
<path d='M554 444 C568 430 582 424 600 424 C618 424 634 430 648 444' stroke='%2358d0ff' stroke-width='5' filter='url(%23glow)'/>\
</g>\
<g opacity='.32' stroke='%2358d0ff' stroke-width='2'>\
<line x1='600' y1='726' x2='600' y2='786'/><line x1='548' y1='726' x2='470' y2='780'/>\
<line x1='652' y1='726' x2='730' y2='780'/><line x1='524' y1='560' x2='422' y2='526'/>\
<line x1='676' y1='560' x2='786' y2='522'/>\
</g>\
</svg>");
}

.connection-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%) !important;
  background: rgba(11, 18, 28, .78) !important;
  border: 1px solid rgba(70, 88, 116, .65) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .36) !important;
  padding: 30px 28px !important;
}

.connection-card h1 {
  margin: 0 0 10px !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
}

.connection-card p {
  margin: 0 !important;
  color: #b7c4d5 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.connection-note {
  margin-top: 14px !important;
  color: #87d9ac !important;
  font-size: 12px !important;
}

.connection-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px !important;
}

.connection-actions .primary {
  min-width: 220px !important;
}

.connection-status {
  margin-top: 14px !important;
  text-align: center;
  min-height: 20px;
  font-size: 12px !important;
}

#app,
#lock,
.topbar,
.explorer-pane,
.detail-pane,
#content {
  background-color: transparent !important;
}

/* V4.2.5 - Fond simplifié + propre */
.connection-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(72, 112, 255, .20), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(0, 198, 255, .14), transparent 16%),
    radial-gradient(circle at 75% 80%, rgba(130, 85, 255, .10), transparent 22%),
    linear-gradient(180deg, rgba(10, 16, 26, .96), rgba(6, 10, 16, .99));
  opacity: 1;
}

.connection-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109, 148, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 148, 255, .10) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .45;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.connection-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'>\
<g fill='none' stroke='%2359bfff' stroke-opacity='0.22' stroke-width='2'>\
<circle cx='210' cy='220' r='10'/><circle cx='380' cy='160' r='8'/><circle cx='520' cy='250' r='9'/>\
<circle cx='1220' cy='210' r='10'/><circle cx='1360' cy='310' r='8'/><circle cx='1100' cy='340' r='9'/>\
<circle cx='320' cy='690' r='10'/><circle cx='460' cy='760' r='8'/><circle cx='190' cy='790' r='9'/>\
<circle cx='1240' cy='700' r='10'/><circle cx='1380' cy='760' r='8'/><circle cx='1080' cy='810' r='9'/>\
<path d='M210 220 L380 160 L520 250'/><path d='M1220 210 L1360 310 L1100 340'/>\
<path d='M320 690 L460 760 L190 790'/><path d='M1240 700 L1380 760 L1080 810'/>\
<path d='M600 120 L760 200 L920 120'/><path d='M640 510 L800 590 L960 510'/>\
</g>\
<g fill='none' stroke='%233f63ff' stroke-opacity='0.18' stroke-width='2'>\
<path d='M60 640 C180 560, 300 560, 420 640'/><path d='M1180 640 C1300 560, 1420 560, 1540 640'/>\
<path d='M200 330 C330 250, 450 250, 580 330'/><path d='M980 330 C1110 250, 1230 250, 1360 330'/>\
</g>\
</svg>") center/cover no-repeat;
  opacity: .9;
}

.connection-card {
  background: rgba(10, 17, 27, .82) !important;
  border: 1px solid rgba(78, 97, 127, .65) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42) !important;
}

.connection-card h1 {
  font-size: 30px !important;
  text-align: center;
}

.connection-status[hidden] {
  display: none !important
}

.connection-actions .primary {
  min-width: 230px !important;
}

/* V4.2.6 - fond sombre simple */
html,
body {
  background: #070b12 !important
}

body::before,
body::after {
  content: none !important;
  display: none !important
}

.connection-bg {
  display: none !important
}

.connection-gate {
  background: #070b12 !important
}

.connection-card {
  background: #101720 !important;
  border: 1px solid #2b394b !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important;
}