/* Protections, partage depuis l’historique et notifications de complétion. */
.app-lock-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, rgba(204, 222, 190, .38), transparent 38%), #f7f6ef;
}
.app-lock-card {
  width: min(100%, 420px);
  padding: clamp(24px, 6vw, 38px);
  border: 1px solid #e2e8dd;
  border-radius: 27px;
  background: #fffefa;
  box-shadow: 0 22px 60px rgba(23, 74, 58, .12);
  text-align: center;
}
.app-lock-logo { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; }
.app-lock-card .eyebrow { margin-bottom: 9px; color: #6f8a6d; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.app-lock-card h1 { margin: 0; color: #1c2b23; font: 800 clamp(24px, 6vw, 31px) Manrope, sans-serif; letter-spacing: -1px; }
.app-lock-intro { margin: 11px 0 24px; color: #6e786f; font-size: 14px; line-height: 1.6; }
#unlock-form { display: grid; gap: 12px; text-align: left; }
#unlock-form label { color: #35463b; font-size: 12px; font-weight: 800; }
#unlock-pin { min-height: 52px; border: 1px solid #dfe6dc; border-radius: 13px; background: #fbfcf8; padding: 0 15px; color: #173c2f; font: 700 22px Manrope, sans-serif; letter-spacing: .32em; text-align: center; }
#unlock-pin:focus, #pin-form input:focus, .history-edit-field input:focus { outline: 3px solid rgba(72, 125, 89, .19); border-color: #67916f; }
#unlock-form .button { min-height: 48px; margin-top: 4px; }
.app-lock-note { margin: 20px 0 0; color: #7b837b; font-size: 11px; line-height: 1.6; }
.app-lock-error { margin: 4px 0 0; color: #963b34; font-size: 12px; line-height: 1.45; }

.security-card {
  display: grid;
  gap: 12px;
  padding: 19px;
  border: 1px solid #e1e8de;
  border-radius: 18px;
  background: linear-gradient(140deg, #fffefa, #f4f8f1);
  box-shadow: 0 8px 20px rgba(23, 74, 58, .045);
}
.security-card .section-heading { margin: 0; }
.security-card .section-heading h2 { font-size: 18px; }
.security-card > p { max-width: 610px; margin: 0; color: #69766d; font-size: 12px; line-height: 1.65; }
.security-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.security-actions .button { min-height: 39px; font-size: 11px; }

#pin-dialog { width: min(92vw, 430px); max-height: min(90dvh, 720px); padding: 26px; border: 1px solid #e3e8df; border-radius: 23px; background: #fffefa; box-shadow: 0 24px 80px rgba(13, 38, 27, .26); }
#pin-dialog::backdrop { background: rgba(10, 30, 22, .55); backdrop-filter: blur(4px); }
#pin-form { display: grid; gap: 11px; }
#pin-form h2 { margin: 0; color: #1c2b23; font: 800 22px Manrope, sans-serif; }
#pin-form > p { margin: 0 0 5px; color: #707b72; font-size: 12px; line-height: 1.55; }
#pin-form input { min-height: 44px; border: 1px solid #dfe6dc; border-radius: 11px; padding: 0 12px; background: #fbfcf8; color: #173c2f; font: 700 18px Manrope, sans-serif; letter-spacing: .25em; }
#pin-form .pin-storage-note { color: #778078; font-size: 10px; line-height: 1.5; }
#pin-dialog-error { min-height: 16px; color: #963b34; font-size: 11px; }

.flash-region { position: fixed; z-index: 3000; inset: max(12px, env(safe-area-inset-top)) 12px auto; display: grid; justify-items: center; pointer-events: none; }
.flash-message { display: flex; width: min(100%, 540px); align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid transparent; border-radius: 15px; box-shadow: 0 15px 35px rgba(22, 43, 31, .19); animation: agro-flash-in .22s ease-out both; }
.flash-message > div { display: grid; gap: 3px; }
.flash-message small { font-size: 8px; font-weight: 900; letter-spacing: 1.2px; opacity: .78; }
.flash-message strong { font: 800 12px/1.45 Manrope, sans-serif; }
.flash-symbol { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .55); font-size: 17px; font-weight: 900; }
.flash-success { border-color: #bddbc2; background: #e7f4e8; color: #184a30; }
.flash-failure { border-color: #edc6bc; background: #fff0eb; color: #8a352d; }
.flash-info { border-color: #e3d8b8; background: #fff7df; color: #5e4b1e; }
@keyframes agro-flash-in { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }

.share-import-card { max-width: 560px; margin: clamp(26px, 7vh, 70px) auto; padding: clamp(23px, 5vw, 38px); border: 1px solid #e0e7dc; border-radius: 24px; background: linear-gradient(145deg, #fffefa, #f4f8f1); box-shadow: 0 16px 42px rgba(23, 74, 58, .08); text-align: center; }
.share-import-card .empty-symbol { display: grid; width: 54px; height: 54px; margin: 0 auto 16px; place-items: center; border-radius: 18px; background: #e6efe3; color: #174a3a; }
.share-import-card .eyebrow { color: #748a70; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; }
.share-import-card h1 { margin: 7px 0 10px; color: #1b2a22; font: 800 clamp(23px, 5vw, 30px) Manrope, sans-serif; letter-spacing: -.8px; }
.share-import-card > p:not(.eyebrow) { max-width: 430px; margin: 0 auto 21px; color: #6f7a71; font-size: 13px; line-height: 1.65; }
.share-import-card .detail-actions { justify-content: center; }

.history-edit-field { min-width: 96px; }
.history-edit-field label { display: block; margin-bottom: 5px; color: #66756a; font-size: 8px; font-weight: 900; letter-spacing: .6px; }
.history-edit-field label span { font-size: inherit; }
.history-edit-field input { width: 92px; min-height: 40px; border: 1px solid #dbe4d8; border-radius: 10px; padding: 0 9px; background: #fffefa; color: #173c2f; font: 800 16px Manrope, sans-serif; text-align: center; }
.history-edit-error { min-height: 16px; margin: -5px 0 13px; color: #963b34; font-size: 12px; }

@media (max-width: 620px) {
  .security-card { padding: 15px; }
  .security-actions { display: grid; grid-template-columns: 1fr; }
  .security-actions .button { width: 100%; }
  .flash-region { inset-inline: 8px; }
  .flash-message { padding: 11px 13px; border-radius: 13px; }
  .flash-message strong { font-size: 11px; }
  .share-import-card { margin: 24px 0; }
  .share-import-card .detail-actions { display: grid; }
  .history-edit-field input { width: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .flash-message { animation: none; }
}


/* Menu principal et sécurité regroupée dans Paramètres. */
.topbar { position: relative; }
.topbar-leading { display: flex; min-width: 0; align-items: center; gap: 15px; }
.menu-toggle { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--forest); }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: var(--mint); border-color: #cbdacb; }
.menu-toggle .icon { width: 19px; height: 19px; }
.app-menu { position: absolute; z-index: 2201; top: calc(100% + 6px); left: clamp(18px, 5vw, 76px); width: min(270px, calc(100vw - 32px)); padding: 9px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 46px rgba(16, 49, 35, .19); }
.app-menu-caption { display: block; padding: 8px 11px 6px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.app-menu-item { display: flex; width: 100%; align-items: center; gap: 11px; padding: 12px; border: 0; border-radius: 10px; background: transparent; color: var(--forest); text-align: left; font-weight: 800; font-size: 12px; }
.app-menu-item:hover, .app-menu-item.active { background: var(--mint2); }
.app-menu-item .icon:last-child { width: 15px; margin-left: auto; color: var(--muted); }
.menu-backdrop { position: fixed; z-index: 2200; inset: 68px 0 0; border: 0; background: transparent; cursor: default; }
.settings-stack { display: grid; max-width: 850px; gap: 14px; }
.settings-stack .security-card { gap: 15px; padding: clamp(18px, 3vw, 25px); }
.settings-stack .security-card > p { max-width: 690px; font-size: 13px; }
.settings-stack .security-actions { gap: 9px; }
.recovery-warning { padding: 12px 14px; border: 1px solid #eadbb4; border-radius: 12px; background: #fff7df; color: #715728 !important; }
.recovery-key-panel { display: grid; gap: 11px; padding: 18px; border: 1px solid #c5ddc7; border-radius: 17px; background: #edf7ed; color: var(--forest); }
.recovery-key-panel .eyebrow { margin: 0; color: #3f7650; }
.recovery-key-panel > p:not(.eyebrow) { margin: 0; color: #4e6555; font-size: 12px; line-height: 1.6; }
.recovery-key-panel .form-label { margin: 0; color: #405c49; font-size: 10px; font-weight: 800; }
#recovery-key-value { width: 100%; min-height: 48px; border: 1px dashed #82a98b; border-radius: 11px; padding: 8px 12px; background: #fffefa; color: #174a3a; font: 800 clamp(13px, 3.3vw, 18px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-align: center; }
#pin-form .form-label { margin: 0; color: #46594a; font-size: 10px; font-weight: 800; }
#pin-form .dialog-copy { line-height: 1.65; }
#pin-form .dialog-actions { margin-top: 3px; }
#recovery-form { display: grid; gap: 11px; text-align: left; }
#recovery-form label { color: #35463b; font-size: 11px; font-weight: 800; }
#recovery-form input { min-height: 48px; border: 1px solid #dfe6dc; border-radius: 12px; background: #fbfcf8; padding: 0 12px; color: var(--forest); font: 700 15px Manrope, sans-serif; }
#recovery-form #recovery-input { font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
#recovery-form input:focus { outline: 3px solid rgba(72, 125, 89, .19); border-color: #67916f; }
#recovery-form .button { width: 100%; min-height: 48px; margin-top: 4px; }
.forgot-pin-button { display: inline-flex; justify-content: center; margin: 13px auto 0; padding: 8px 12px; border: 0; background: transparent; color: var(--forest); font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) {
  .topbar-leading { gap: 9px; }
  .topbar-leading .topbar-label { max-width: 145px; font-size: 7px; letter-spacing: .8px; }
  .menu-toggle { width: 36px; height: 36px; }
  .settings-stack .security-card { padding: 16px; }
  .settings-stack .security-actions { display: grid; grid-template-columns: 1fr; }
  .settings-stack .security-actions .button { width: 100%; }
  .recovery-key-panel { padding: 15px; }
  .recovery-key-panel .security-actions { display: grid; }
  .recovery-key-panel .security-actions .button { width: 100%; }
}