/* Mindex Smooth sheets stylesheet
   付箋/枠/テンプレ/データ/設定/一覧/AI出力のシート表示。
   古い上書き履歴を整理し、最終仕様だけを残した版。
*/

:root{
  --sheet-bg:#fffaf0;
  --sheet-panel:rgba(255,255,255,.56);
  --sheet-line:rgba(216,207,193,.72);
  --sheet-line-strong:rgba(30,27,22,.09);
  --sheet-ink:rgba(30,27,22,.88);
  --sheet-muted:rgba(107,96,80,.76);
  --sheet-shadow:0 -6px 26px rgba(30,27,22,.18), 0 18px 44px rgba(30,27,22,.16), inset 0 1px 0 rgba(255,255,255,.78);
}

/* =========================================================
   Common sheet shell
   ========================================================= */

#cardModalBackdrop,
#groupModalBackdrop,
#templateModalBackdrop,
#dataModalBackdrop,
#settingsModalBackdrop{
  align-items:flex-end;
  justify-content:center;
  padding:0 12px calc(14px + var(--safeBottom));
  background:rgba(30,27,22,.24);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

#dataModalBackdrop{
  background:rgba(30,27,22,.22);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

#cardModalBackdrop .modal,
#groupModalBackdrop .modal,
#templateModalBackdrop .templateSheetModal,
#dataModalBackdrop .dataSheetModal,
#settingsModalBackdrop .settingsCardsModal,
#settingChoiceBackdrop .settingChoiceModal{
  position:relative !important;
  isolation:isolate !important;
  overflow:auto !important;
  background:var(--sheet-bg) !important;
  background-clip:padding-box !important;
  border:1px solid var(--sheet-line-strong);
  box-shadow:var(--sheet-shadow);
  padding-top:0 !important;
  animation:compactSheetIn .24s cubic-bezier(.18,1.08,.22,1) both;
}

#cardModalBackdrop .modal,
#groupModalBackdrop .modal{
  width:min(520px, calc(100vw - 24px));
  max-height:min(76svh, 640px);
  border-radius:30px;
  padding:0 14px calc(14px + var(--safeBottom));
}

#templateModalBackdrop .templateSheetModal{
  width:min(580px, calc(100vw - 24px));
  max-height:min(82svh, 720px);
  border-radius:30px;
  padding:0 14px calc(14px + var(--safeBottom));
}

#dataModalBackdrop .dataSheetModal{
  width:min(520px, calc(100vw - 24px));
  max-height:min(72svh, 560px);
  border-radius:30px;
  padding:0 14px calc(14px + var(--safeBottom));
  animation-duration:.20s;
}

#settingsModalBackdrop .settingsCardsModal{
  width:min(560px, calc(100vw - 20px));
  max-height:min(78svh, 680px);
  border-radius:30px;
  padding:0 14px calc(14px + var(--safeBottom));
}

@keyframes compactSheetIn{
  from{opacity:0; transform:translateY(18px) scale(.97); filter:blur(2px)}
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

/* =========================================================
   Common sheet header / close button
   ========================================================= */

.sheetClose{
  width:42px;
  height:42px;
  border-radius:50%!important;
  padding:0!important;
  display:grid;
  place-items:center;
  font-size:26px;
  line-height:1;
  font-weight:500;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(30,27,22,.08)!important;
  color:rgba(30,27,22,.58)!important;
  box-shadow:0 6px 16px rgba(30,27,22,.08)!important;
}

.sheetClose:active{
  transform:scale(.92);
}

#cardModalBackdrop .modalTop,
#groupModalBackdrop .modalTop,
#templateModalBackdrop .modalTop,
#dataModalBackdrop .modalTop,
#settingsModalBackdrop .modalTop{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  isolation:isolate !important;
  display:flex;
  align-items:center;
  gap:8px;
  padding:18px 0 9px !important;
  margin-bottom:16px !important;
  background:var(--sheet-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

#cardModalBackdrop .modalTop::before,
#groupModalBackdrop .modalTop::before,
#templateModalBackdrop .modalTop::before,
#dataModalBackdrop .modalTop::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:5px;
  border-radius:999px;
  background:rgba(107,98,87,.22);
  z-index:2;
}

#cardModalBackdrop .modalTop::after,
#groupModalBackdrop .modalTop::after,
#templateModalBackdrop .modalTop::after,
#dataModalBackdrop .modalTop::after,
#settingsModalBackdrop .modalTop::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-30px;
  bottom:0;
  background:var(--sheet-bg);
  z-index:0;
  pointer-events:none;
}

#cardModalBackdrop .modalTop > *,
#groupModalBackdrop .modalTop > *,
#templateModalBackdrop .modalTop > *,
#dataModalBackdrop .modalTop > *,
#settingsModalBackdrop .modalTop > *{
  position:relative !important;
  z-index:3 !important;
}

#cardModalBackdrop .modalTitle,
#groupModalBackdrop .modalTitle,
#templateModalBackdrop .modalTitle,
#dataModalBackdrop .modalTitle,
#settingsModalBackdrop .modalTitle{
  margin-right:auto;
  font-size:17px;
  font-weight:900;
  letter-spacing:.01em;
  color:var(--sheet-ink);
}

/* =========================================================
   Edit sheets: note / frame
   ========================================================= */

#cardModalBackdrop .field,
#groupModalBackdrop .field{
  margin:8px 0;
}

#cardModalBackdrop .label,
#groupModalBackdrop .label{
  font-size:12px;
  margin-bottom:4px;
  color:rgba(107,96,80,.70);
}

#cardModalBackdrop .field input,
#cardModalBackdrop .field textarea,
#cardModalBackdrop .field select,
#groupModalBackdrop .field input,
#groupModalBackdrop .field textarea,
#groupModalBackdrop .field select{
  border-radius:16px;
  padding:10px 11px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(216,207,193,.92);
}

#cardModalBackdrop .field textarea{min-height:104px}
#groupModalBackdrop .field textarea{min-height:86px}

#cardModalBackdrop .grid2,
#groupModalBackdrop .grid2{
  gap:8px;
}

#cardModalBackdrop .actions,
#groupModalBackdrop .actions{
  margin-top:12px;
  justify-content:flex-end;
}

#cardModalBackdrop .actions button,
#groupModalBackdrop .actions button{
  border-radius:999px;
  min-height:38px;
  padding:9px 14px;
}

/* =========================================================
   Color picker
   ========================================================= */

#cardModalBackdrop .colorPick,
#groupModalBackdrop .colorPick{
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(216,207,193,.70);
  border-radius:18px;
  background:rgba(255,255,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
  width:max-content;
  max-width:100%;
}

#cardModalBackdrop .colorDot,
#groupModalBackdrop .colorDot{
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(30,27,22,.08);
  box-shadow:0 5px 12px rgba(30,27,22,.09), inset 0 1px 0 rgba(255,255,255,.72);
  outline:none;
  padding:0;
}

#cardModalBackdrop .colorDot.active,
#groupModalBackdrop .colorDot.active{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 6px rgba(47,111,115,.28),
    0 7px 16px rgba(30,27,22,.12),
    inset 0 1px 0 rgba(255,255,255,.72);
}

#cardModalBackdrop .colorDot.active::after,
#groupModalBackdrop .colorDot.active::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:6px;
  border-left:2px solid rgba(30,27,22,.58);
  border-bottom:2px solid rgba(30,27,22,.58);
  transform:translate(-50%,-58%) rotate(-45deg);
}

.colorDot.c1{background:linear-gradient(180deg,#fff8d8,#f4d98e)!important}
.colorDot.c2{background:linear-gradient(180deg,#e8f8ff,#a9d8ee)!important}
.colorDot.c3{background:linear-gradient(180deg,#efffe8,#bfe3ad)!important}
.colorDot.c4{background:linear-gradient(180deg,#fff0f6,#efb7cc)!important}
.colorDot.c5{background:linear-gradient(180deg,#f3edff,#cbbdea)!important}
.colorDot.g1{background:linear-gradient(180deg,#d9eeee,#7fb8bb)!important}
.colorDot.g2{background:linear-gradient(180deg,#fff1c7,#d6a74a)!important}
.colorDot.g3{background:linear-gradient(180deg,#e8f6df,#9fcb83)!important}
.colorDot.g4{background:linear-gradient(180deg,#ffe4ef,#d98bad)!important}
.colorDot.g5{background:linear-gradient(180deg,#eee7ff,#ab9bdd)!important}

/* =========================================================
   Settings cards
   ========================================================= */

.settingsCardGrid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  padding:4px 0 6px !important;
}

.settingsCard{
  all:unset;
  box-sizing:border-box;
  min-width:0;
  min-height:104px;
  border:1px solid rgba(30,27,22,.08);
  border-radius:22px;
  background:radial-gradient(circle at 80% 18%, rgba(47,111,115,.08), transparent 42%), rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(30,27,22,.08), inset 0 1px 0 rgba(255,255,255,.78);
  padding:13px 12px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  color:rgba(30,27,22,.84);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.settingsCard:active{
  transform:scale(.98);
}

.settingsCardIcon{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  background:rgba(47,111,115,.10);
  color:var(--accent);
  font-size:13px;
  font-weight:900;
}

.settingsCardIcon.colorPreview{
  background:var(--bg);
  border:1px solid rgba(30,27,22,.12);
}

.settingsCardLabel{
  display:block;
  font-size:12.5px;
  font-weight:900;
  line-height:1.25;
  color:rgba(30,27,22,.88);
  word-break:keep-all;
}

.settingsCardValue{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  width:max-content;
  min-height:24px;
  margin-top:8px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.settingsActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.settingsActionLink,
.settingsResetButton{
  all:unset;
  box-sizing:border-box;
  min-height:44px;
  border-radius:18px;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.settingsActionLink{
  background:rgba(47,111,115,.08);
  color:var(--accent);
  border:1px solid rgba(47,111,115,.16);
  text-decoration:none;
}

.settingsResetButton{
  background:rgba(255,255,255,.75);
  color:rgba(30,27,22,.72);
  border:1px solid rgba(216,207,193,.86);
}

/* =========================================================
   Setting choice popup
   ========================================================= */

#settingChoiceBackdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:90 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(30,27,22,.18) !important;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  pointer-events:auto !important;
}

#settingChoiceBackdrop.show{
  display:flex !important;
}

#settingChoiceBackdrop .settingChoiceModal{
  width:min(320px, calc(100vw - 42px)) !important;
  max-height:min(60svh, 430px) !important;
  margin:0 !important;
  border-radius:24px !important;
  border:1px solid rgba(30,27,22,.10);
  box-shadow:0 18px 44px rgba(30,27,22,.22), inset 0 1px 0 rgba(255,255,255,.78);
  padding:12px 14px 14px !important;
  transform:none !important;
  animation:settingChoiceIn .20s cubic-bezier(.18,1.1,.22,1) both;
  pointer-events:auto !important;
}

#settingChoiceBackdrop .settingChoiceModal .modalTop{
  position:relative !important;
  top:auto !important;
  padding:2px 0 10px !important;
  margin-bottom:4px !important;
  background:var(--sheet-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

#settingChoiceBackdrop .settingChoiceModal .modalTop::before,
#settingChoiceBackdrop .settingChoiceModal .modalTop::after{
  display:none !important;
  content:none !important;
}

#settingChoiceBackdrop .settingChoiceModal .modalTitle{
  font-size:16px;
}

.settingChoiceList,
#settingChoiceBackdrop .settingChoiceList{
  display:grid;
  gap:8px;
  padding:4px 0 0;
}

.settingChoiceButton,
#settingChoiceBackdrop .settingChoiceButton{
  all:unset;
  box-sizing:border-box;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(30,27,22,.08);
  background:rgba(255,255,255,.78);
  color:rgba(30,27,22,.82);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 13px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.settingChoiceButton:active,
#settingChoiceBackdrop .settingChoiceButton:active{
  transform:scale(.98);
}

.settingChoiceButton.active,
#settingChoiceBackdrop .settingChoiceButton.active{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(47,111,115,.22);
}

.settingChoiceButton .choiceCheck,
#settingChoiceBackdrop .settingChoiceButton .choiceCheck{
  opacity:0;
}

.settingChoiceButton.active .choiceCheck,
#settingChoiceBackdrop .settingChoiceButton.active .choiceCheck{
  opacity:1;
}

@keyframes settingChoiceIn{
  from{opacity:0; transform:translateY(10px) scale(.96); filter:blur(2px)}
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

/* =========================================================
   Full-view sheets: index / AI output
   ========================================================= */

.fullView{
  background:rgba(30,27,22,.24) !important;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  padding:0 12px calc(14px + var(--safeBottom)) !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.fullView.active{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

.fullViewSurface{
  position:relative !important;
  isolation:isolate !important;
  display:flex;
  flex-direction:column;
  width:min(760px, calc(100vw - 24px)) !important;
  height:auto !important;
  max-height:min(84svh, 760px) !important;
  min-height:0 !important;
  border-radius:30px !important;
  border:1px solid var(--sheet-line-strong) !important;
  background:var(--sheet-bg) !important;
  box-shadow:var(--sheet-shadow) !important;
  overflow:hidden !important;
  animation:compactSheetIn .24s cubic-bezier(.18,1.08,.22,1) both;
}

#exportView .fullViewSurface{
  width:min(820px, calc(100vw - 24px)) !important;
  max-height:min(88svh, 820px) !important;
}

.fullViewHeader{
  position:relative !important;
  z-index:80 !important;
  isolation:isolate !important;
  flex:0 0 auto !important;
  min-height:58px !important;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 10px !important;
  background:var(--sheet-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

.fullViewHeader::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-30px;
  bottom:0;
  background:var(--sheet-bg);
  z-index:0;
  pointer-events:none;
}

.fullViewHeader > *{
  position:relative !important;
  z-index:3 !important;
}

.fullViewTitle{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:17px !important;
  font-weight:900;
  letter-spacing:.01em;
  color:rgba(30,27,22,.90) !important;
}

.fullViewClose{
  all:unset;
  box-sizing:border-box;
  flex:0 0 auto;
  width:42px !important;
  height:42px !important;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(30,27,22,.09) !important;
  color:rgba(30,27,22,.58) !important;
  box-shadow:0 6px 16px rgba(30,27,22,.08) !important;
  font-size:28px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.fullViewClose:active{
  transform:scale(.92);
}

.fullViewBody,
.fullView .shelf,
.fullView .export{
  position:relative !important;
  z-index:1 !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  background:var(--sheet-bg) !important;
  transform:translateZ(0);
}

.fullView .shelf,
.fullView .export{
  padding:12px 12px calc(14px + var(--safeBottom)) !important;
}

.fullView .filters{
  position:sticky !important;
  top:0 !important;
  z-index:70 !important;
  isolation:isolate !important;
  padding:0 0 10px !important;
  margin:0 0 10px !important;
  background:var(--sheet-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  gap:7px !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  border-bottom:0 !important;
}

.fullView .filters::after{
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  top:-16px;
  bottom:-8px;
  background:var(--sheet-bg);
  border-bottom:1px solid rgba(216,207,193,.50);
  z-index:0;
  pointer-events:none;
}

.fullView .filters > *{
  position:relative !important;
  z-index:2 !important;
}

.fullView .filters select,
.fullView .filters input{
  min-height:38px !important;
  border-radius:14px !important;
  padding:8px 10px !important;
  font-size:12.5px !important;
  background:rgba(255,255,255,.88) !important;
}

#exportView .panel{
  margin-bottom:10px !important;
  border-radius:20px !important;
  background:var(--sheet-panel) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#exportView .output{
  min-height:260px !important;
  max-height:42svh !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.90) !important;
}

/* =========================================================
   Template / data content panels
   ========================================================= */

#templateModalBackdrop .panel,
#dataModalBackdrop .dataPanel{
  margin:0 0 10px !important;
  padding:12px !important;
  border-radius:22px;
  border:1px solid var(--sheet-line);
  background:var(--sheet-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#templateModalBackdrop .panel:last-child,
#dataModalBackdrop .dataPanel:last-child{
  margin-bottom:0 !important;
}

#templateModalBackdrop .panel h2,
#dataModalBackdrop .dataPanel h2{
  font-size:15px;
  line-height:1.25;
  margin:0 0 6px;
  color:var(--sheet-ink);
}

#templateModalBackdrop .panel p,
#dataModalBackdrop .dataPanel p{
  font-size:12px;
  line-height:1.45;
  margin:4px 0 10px;
  color:var(--sheet-muted);
}

#templateModalBackdrop .field{
  margin:8px 0;
}

#templateModalBackdrop .label{
  font-size:12px;
  margin-bottom:4px;
}

#templateModalBackdrop .field input,
#templateModalBackdrop .field select,
#templateModalBackdrop .field textarea,
#templateModalBackdrop #templatePreview{
  border-radius:16px;
  padding:10px 11px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(216,207,193,.92);
}

#templateModalBackdrop #templatePreview{
  min-height:150px !important;
  resize:vertical;
  font-size:12.5px;
  line-height:1.45;
}

#templateModalBackdrop .templateUseCaseCard{
  margin:6px 0 10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(47,111,115,.07);
  border:1px solid rgba(47,111,115,.14);
  color:rgba(30,27,22,.82);
  font-size:12px;
  line-height:1.45;
}

#templateModalBackdrop .templateUseCaseCard b{
  display:block;
  margin-bottom:4px;
  color:var(--accent);
}

#templateModalBackdrop .templateUseCaseCard p{
  margin:2px 0 0;
}

#templateModalBackdrop .templateUseCaseCard ul{
  margin:6px 0 0;
  padding-left:1.2em;
}

#templateModalBackdrop .templateUseCaseCard .templateUseCaseNote{
  margin-top:8px;
  color:var(--sheet-muted);
  font-size:11px;
}

#templateModalBackdrop .actions,
#dataModalBackdrop .actions{
  margin-top:10px;
  justify-content:flex-end;
}

#templateModalBackdrop .actions button,
#dataModalBackdrop .actions button{
  border-radius:999px;
  min-height:38px;
  padding:9px 14px;
}

#templateModalBackdrop #deleteTemplateBtn{
  color:rgba(30,27,22,.70);
}

#dataModalBackdrop .dataSaveInfo{
  font-size:12.5px;
  line-height:1.45;
  margin:12px 0 0;
  color:rgba(107,96,80,.82);
}

/* =========================================================
   Header spacing insurance
   ========================================================= */

#cardModalBackdrop .modal > .field:first-of-type,
#groupModalBackdrop .modal > .field:first-of-type,
#templateModalBackdrop .templateSheetModal > .panel:first-of-type,
#dataModalBackdrop .dataSheetModal > .panel:first-of-type,
#settingsModalBackdrop .settingsCardsModal > .settingsCardGrid{
  margin-top:4px !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width:720px){
  #cardModalBackdrop,
  #groupModalBackdrop,
  #templateModalBackdrop,
  #dataModalBackdrop,
  #settingsModalBackdrop{
    align-items:center;
    padding:22px;
  }

  #cardModalBackdrop .modal,
  #groupModalBackdrop .modal{
    max-height:min(74vh, 640px);
  }

  #templateModalBackdrop .templateSheetModal{
    max-height:min(80vh, 720px);
  }

  .fullView{
    padding:22px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .fullView.active{
    justify-content:center !important;
  }

  .fullView .shelf,
  .fullView .export{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width:520px){
  #cardModalBackdrop,
  #groupModalBackdrop,
  #templateModalBackdrop,
  #dataModalBackdrop,
  #settingsModalBackdrop{
    padding:0 9px calc(12px + var(--safeBottom));
  }

  #cardModalBackdrop .modal,
  #groupModalBackdrop .modal,
  #templateModalBackdrop .templateSheetModal,
  #dataModalBackdrop .dataSheetModal,
  #settingsModalBackdrop .settingsCardsModal{
    width:calc(100vw - 18px);
    border-radius:28px;
    padding-left:12px;
    padding-right:12px;
    padding-bottom:calc(13px + var(--safeBottom));
  }

  #cardModalBackdrop .modal,
  #groupModalBackdrop .modal{
    max-height:74svh;
  }

  #templateModalBackdrop .templateSheetModal{
    max-height:82svh;
  }

  #dataModalBackdrop .dataSheetModal{
    max-height:72svh;
  }

  #cardModalBackdrop .grid2,
  #groupModalBackdrop .grid2{
    grid-template-columns:1fr;
  }

  #templateModalBackdrop .panel,
  #dataModalBackdrop .dataPanel{
    padding:11px !important;
    border-radius:20px;
  }

  #templateModalBackdrop .actions,
  #dataModalBackdrop .actions{
    gap:7px;
  }

  #templateModalBackdrop .actions button,
  #dataModalBackdrop .actions button{
    flex:1 1 auto;
    min-width:0;
    font-size:12.5px;
  }

  .settingsCardGrid{
    gap:10px !important;
  }

  .settingsCard{
    min-height:96px;
    border-radius:20px;
    padding:11px;
  }

  .settingsCardIcon{
    width:30px;
    height:30px;
    margin-bottom:7px;
  }

  .settingsCardLabel{
    font-size:12px;
  }

  .settingsCardValue{
    min-height:22px;
    font-size:10.5px;
  }

  .settingsActions{
    grid-template-columns:1fr;
  }

  .fullView{
    padding:0 9px calc(12px + var(--safeBottom)) !important;
  }

  .fullViewSurface,
  #exportView .fullViewSurface{
    width:calc(100vw - 18px) !important;
    border-radius:28px !important;
  }

  .fullViewSurface{
    max-height:84svh !important;
  }

  #exportView .fullViewSurface{
    max-height:88svh !important;
  }

  .fullViewHeader{
    min-height:54px !important;
    padding:9px 12px 8px !important;
  }

  .fullViewTitle{
    font-size:16px !important;
  }

  .fullViewClose{
    width:40px !important;
    height:40px !important;
    font-size:25px !important;
  }

  .fullView .shelf,
  .fullView .export{
    padding:10px 10px calc(12px + var(--safeBottom)) !important;
  }

  .fullView .filters{
    gap:6px !important;
    padding-bottom:8px !important;
  }

  .fullView .filters select,
  .fullView .filters input{
    min-height:36px !important;
    padding:7px 9px !important;
    font-size:12px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #cardModalBackdrop .modal,
  #groupModalBackdrop .modal,
  #templateModalBackdrop .templateSheetModal,
  #dataModalBackdrop .dataSheetModal,
  #settingsModalBackdrop .settingsCardsModal,
  #settingChoiceBackdrop .settingChoiceModal,
  .fullViewSurface{
    animation:none !important;
  }
}