.welcome-account { width: 100%; margin-top: 6px; }
.app-dialog { color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 26px; max-height: calc(100dvh - 32px); }
.app-dialog::backdrop { background: rgba(34, 49, 43, .42); backdrop-filter: blur(5px); }
.app-dialog .dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.dialog-heading h2 { margin: 0; font-size: clamp(21px, 3vw, 30px); font-weight: 550; letter-spacing: -.035em; }
.app-dialog .close-button { flex: 0 0 44px; width: 44px; height: 44px; }
.app-dialog button { min-height: 44px; }
.app-dialog a { color: var(--accent-dark); text-underline-offset: 3px; }
.app-dialog :focus-visible { outline: 3px solid #71a38c; outline-offset: 3px; }
.app-dialog .muted, .account-hint { color: #64756b; }
.account-dialog { width: min(590px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; }
.account-body { display: grid; gap: 15px; }
.account-body p { margin: 0; }
.account-body h3 { margin: 14px 0 0; font-weight: 600; }
.account-tabs, .account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.account-tabs .active { background: var(--accent-soft); border-color: var(--accent); }
.account-tabs > button { flex: 1; padding: 9px; font-size: 12px; }
.account-form { display: grid; gap: 14px; }
.account-field { display: grid; gap: 7px; font-size: 13px; font-weight: 600; }
.account-hint { font-size: 12px; line-height: 1.55; }
.account-checkbox { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; line-height: 1.5; cursor: pointer; }
.account-checkbox input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent-dark); }
.draft-notice { padding: 12px 14px; border: 1px solid #dfc99d; border-radius: 10px; background: #faf0d9; color: #715931; font-size: 12px; }
.legal-links { font-size: 12px; line-height: 1.8; }
.account-message { padding: 12px; border-radius: 9px; background: var(--accent-soft); }
.account-message.error { background: #fae8e4; color: #813b35; }
.recovery-code { display: block; user-select: all; overflow-wrap: anywhere; padding: 20px; border: 1px dashed #87a590; border-radius: 12px; background: #eef4ec; font-size: 20px; line-height: 1.6; letter-spacing: .045em; }
.saved-trays { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.saved-trays li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.saved-trays li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.saved-trays strong { display: block; font-weight: 550; }
.saved-trays small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.saved-trays .account-actions { flex-shrink: 0; }
.saved-trays button { padding: 8px 11px; font-size: 12px; }
.account-security { border-top: 1px solid var(--line); padding-top: 12px; }
.account-security summary { cursor: pointer; padding: 12px 0; }
.account-security form { margin: 10px 0 25px; }
.button-danger { background: #8d443e; color: white; border: 1px solid #8d443e; }
.button-danger:hover { background: #75372f; }
.catalog-dialog { width: min(1080px, calc(100% - 36px)); height: min(860px, calc(100dvh - 40px)); overflow: hidden; }
.catalog-dialog[open] { display: flex; flex-direction: column; }
.catalog-intro { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.catalog-filters { display: flex; gap: 10px; margin-bottom: 17px; }
.catalog-filters input, .catalog-filters select { min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: white; color: var(--ink); font: inherit; padding: 10px 12px; }
.catalog-filters input { flex: 1; }
.catalog-filters select { max-width: 36%; }
.catalog-filters button { font-size: 12px; }
.catalog-viewport { position: relative; flex: 1; min-height: 0; }
.catalog-scroll { overflow: auto; width: 100%; height: 100%; overscroll-behavior: contain; scrollbar-gutter: stable; }
.catalog-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 4px 10px 12px 4px; }
.catalog-card { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; padding: 0; border: 1px solid #d8ddd0; border-radius: 17px; cursor: pointer; color: var(--ink); background: linear-gradient(150deg, #f4f2e8, #e4ebdf); box-shadow: 0 4px 12px #344d3410; text-align: left; min-width: 0; transition: border-color .16s, box-shadow .16s, background .16s; overflow: hidden; }
.catalog-card:hover, .catalog-card:focus-visible { border-color: #729582; box-shadow: 0 5px 17px #395b3f27; background: linear-gradient(150deg, #fff9e8, #e3eddb); }
.catalog-card-visual { position: relative; display: block; flex: 1; min-height: 0; width: 100%; }
.catalog-card-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 48px; padding: 10px 12px; background: #fffdf6c9; font-size: 12px; font-weight: 550; }
.catalog-card-label > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.catalog-card-add { flex-shrink: 0; font-size: 23px; font-weight: 300; color: var(--accent-dark); }
.catalog-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a48d; font-size: 56px; }
.catalog-fallback img { width: 90%; height: 90%; object-fit: contain; }
.preview-ready .catalog-fallback { visibility: hidden; }
.catalog-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12px; }
.catalog-empty { text-align: center; padding: 40px; color: var(--muted); }
.admin-tooltip { position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 24px)); max-height: min(320px, 45dvh); overflow: auto; pointer-events: auto; padding: 15px 17px; color: #f7faf3; background: #314b3ff5; border: 1px solid #708677; border-radius: 13px; box-shadow: 0 10px 30px #20382d30; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-tooltip strong { display: block; margin-bottom: 7px; color: #c1d8b8; font-size: 11px; letter-spacing: .015em; }
.admin-tooltip p { margin: 0; white-space: pre-wrap; }
.admin-tooltip .admin-tooltip-model { margin: 0 0 8px; color: #fff4d9; font-size: 15px; line-height: 1.4; }
.file-actions { flex-wrap: wrap; max-width: calc(100% - 24px); }
@media (max-width: 850px) { .catalog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .app-dialog { padding: 18px; border-radius: 18px; }
  .catalog-dialog { width: calc(100% - 16px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); }
  .catalog-filters { flex-wrap: wrap; gap: 8px; }
  .catalog-filters input { flex-basis: 100%; }
  .catalog-filters select { flex: 1; max-width: none; width: 50%; }
  .catalog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catalog-card-label { padding: 7px 9px; font-size: 11px; min-height: 42px; }
  .saved-trays li { flex-wrap: wrap; }
  .recovery-code { font-size: 17px; padding: 14px; }
  .file-actions { gap: 5px; }
  .file-actions .canvas-button { padding: 7px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .catalog-card { transition: none; } }