html, body { width: 100%; height: 100%; margin: 0; }
body { color: var(--se-text); background: var(--se-bg); font-family: var(--se-font); }
.se-page-layout { height: 100%; }

.app-content { padding-block: 3rem; }
.app-page { display: grid; width: min(100%, 72rem); margin: auto; gap: 1.5rem; }
.app-page > * { min-width: 0; }
.app-account-page { max-width: 48rem; }
.app-method-list { display: grid; }
.app-method-list .app-method-row { padding-block: 1rem; border-top: 1px solid var(--se-border); }
.app-method-icon { flex: none; width: 1.5rem; height: 1.5rem; }
.app-auth { display: grid; min-height: 100%; place-items: center; box-sizing: border-box; padding: 2rem; }
.app-auth-card { display: block; width: min(100%, 28rem); box-sizing: border-box; }
.app-form { display: grid; gap: 1.5rem; }
.app-form > header { display: grid; gap: .375rem; }
.app-form-fields { display: grid; gap: 1.25rem; }
.app-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--se-border); }
.app-auth .app-form-actions se-button { flex: 1; }
.app-provider-form { display: flex; }
.app-provider-form se-button { flex: 1; }
.app-auth-links { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; color: var(--se-faint); font-size: .875rem; }
.app-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.app-stack { display: grid; gap: 1.25rem; }
.app-row-actions { display: flex; align-items: center; gap: .5rem; }
.app-row-actions form { margin: 0; }
.app-method-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.app-method-label { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.app-auth-divider { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--se-border); }
.app-auth se-segmented-control .se-segmented__options { display: grid; }
se-sidebar > footer { display: grid; gap: .75rem; }
#logout-form { display: none; }
@media (max-width: 767px) { .app-auth { padding: 1rem; } .app-content { padding-block: 1.5rem; } .app-grid { grid-template-columns: 1fr; } }
.app-deletion-phrase { user-select: none; }
.app-method-details { min-width: 0; overflow-wrap: anywhere; }
.app-method-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.app-method-heading > div { flex: 1; min-width: 0; }
.app-method-heading > form, .app-method-heading > se-badge { flex: none; }
.app-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.app-shell > se-topbar { flex: none; }
.app-shell se-topbar > [data-end] { flex: none; }
.app-shell se-topbar > [data-start] { min-width: 0; flex: 1; }
.app-shell se-topbar se-layout-brand { width: auto; flex: none; }
.app-shell se-topbar se-layout-brand .se-layout-brand__logo,
.app-shell se-sidebar:not([collapsed]) se-layout-brand .se-layout-brand__logo { width: auto; height: 3.5rem; }
.app-scope-row { position: relative; display: flex; flex: 1; min-height: 0; }
.app-scope-row > main { flex: 1; min-width: 0; overflow: auto; }
#app-navigation { display: contents; }
#app-content { display: block; }
@media (max-width: 767px) {
  .app-shell se-topbar se-layout-brand .se-layout-brand__logo { width: 2.5rem; height: 2.5rem; }
  .app-shell se-topbar se-layout-brand[data-wide-icon] .se-layout-brand__asset--full-light,
  .app-shell se-topbar se-layout-brand[data-wide-icon] .se-layout-brand__asset--full-dark { display: none; }
}

/* The upload preview uses the same centered cover crop as the profile avatar. */
.app-photo-preview { display: grid; justify-items: center; gap: 1rem; }
.app-photo-preview[hidden], [data-profile-photo-upload][hidden] { display: none; }
.app-photo-frame { position: relative; width: min(100%, 18rem); aspect-ratio: 1; overflow: hidden; background: var(--se-surface-soft); }
.app-photo-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-photo-circle { position: absolute; inset: 0; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 6rem rgb(0 0 0 / .5); pointer-events: none; }

/* Shared illustration size; the library caps the artwork at its container width. */
se-empty-illustration { --se-illustration-width: 32rem; margin-block-start: clamp(1rem, 6vh, 4rem); }

.app-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 767px) { .app-sheet-grid, .app-form-row { grid-template-columns: 1fr; } }

.app-shell se-layout-brand { user-select: none; -webkit-user-select: none; }

/* App-owned identity layout: keep verification beside both name and email. */
.app-user-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.app-verification-status { flex-shrink: 0; }

/* Action alignment; the library handles focus-ring overflow. */
.app-table-actions { display: flex; align-items: center; }

.app-setting-form { white-space: normal; display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; gap: 1rem; padding: .25rem; }
@media (max-width: 640px) { .app-setting-form { grid-template-columns: minmax(0, 1fr); } .app-setting-form > se-button { justify-self: start; } }

.app-setting-form .app-setting-description { white-space: normal; }

.app-table-profile { min-width: 0; flex: 1; }

/* Editor composition; form styling is provided by Simple Elements. */
.translation-key { display: flex; align-items: center; gap: .25rem; white-space: normal; min-width: 0; }
.translation-key > .app-table-actions { margin-inline-start: auto; flex: none; }
.translation-key > span { overflow-wrap: anywhere; }
.translation-cell { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: .5rem; min-width: 0; white-space: normal; }
.translation-cell > [data-translation-cell-target="conflict"], .translation-cell > [data-translation-cell-target="error"] { grid-column: 1 / -1; }
.translation-save-status { width: 1rem; height: 1rem; color: var(--se-primary); }
.translation-status-label { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.translation-value { display: block; width: 100%; min-height: 2rem; padding: .25rem .5rem; border: 1px solid transparent; font-size: .75rem; line-height: 1.125rem; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; color: inherit; font-family: inherit; }
button.translation-value { cursor: text; }
.translation-cell pre { white-space: pre-wrap; }



.translation-toolbar { display: flex; align-items: center; gap: .5rem; margin: 0; }
.translation-toolbar [data-desktop-search] > se-input { width: clamp(12rem, 24vw, 22rem); }
.translation-loading-frame { display: block; width: 100%; margin-top: 1rem; }
.translation-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem; }
se-list-header .app-row-actions > se-select { flex: 1; min-width: 0; }

.translation-cell > [hidden] { display: none; }

/* Use the content gutter for the translation table on narrow screens. */
@media (max-width: 767px) {
  #translation-results { margin-inline: -1.25rem; width: calc(100% + 2.5rem); }
}

/* Mobile key-label experiment: remove this block and its row label to revert. */
@media (max-width: 767px) {
  #translation-rows se-list-row { row-gap: 0; }
  #translation-rows .translation-mobile-key { display: flex; justify-content: center; align-items: center; gap: .25rem; text-align: center; margin-inline: -1rem; padding-inline: 1rem; border-bottom: 1px solid var(--se-border); grid-column: 1 / -1; grid-row: 1; padding-block: .25rem; color: var(--se-muted); font-size: .6875rem; white-space: normal; overflow-wrap: anywhere; }
  #translation-rows .translation-mobile-key se-icon { width: .75rem; height: .75rem; flex: none; }
  #translation-rows se-list-row > .app-table-control { grid-row: 2; }
}

.key-name-row { align-items: end; }

.key-translation-row[hidden], se-list-row[data-plural-parent][hidden] { display: none; }

@media (max-width: 767px) { .app-export-action { display: none; } }

.translation-key-parent { color: var(--se-muted); }

/* Keep page navigation above the existing page scroller on desktop. */
@media (min-width: 768px) {
  .app-page-navigation { position: sticky; top: -3rem; z-index: 5; margin-top: -3rem; padding-top: 3rem; background: var(--se-bg); }
}

@media (min-width: 768px) { [data-controller="translation-table"] { --se-list-header-top: calc(var(--app-nav-height, 6rem) - 3rem); } }

.app-language-add, .app-language-add > button { width: 100%; }

.app-settings-body { width: min(100%, 48rem); margin-inline: auto; }
.export-format-row { display: flex; gap: 1rem; }
.export-format-row > se-select { flex: 1; min-width: 0; }
[data-export-download-target="progress"] { width: 100%; accent-color: var(--se-primary); }

.app-sheet-image { max-width: 100%; width: 16rem; max-height: 10rem; object-fit: contain; }

.app-reference-link { color: var(--se-primary); }
.sheet-import-files { display: grid; gap: .5rem; }

.translation-empty { color: var(--se-faint); }
.translation-wildcard { color: var(--se-warning); }

.history-actor, .history-change, .history-description { min-width: 0; }
.history-actor { display: flex; align-items: center; gap: .75rem; }
.history-actor > se-badge { flex: none; margin-inline-start: auto; }
.history-mobile-actor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-mobile-name { font-weight: 700; }
.history-change { display: flex; align-items: center; justify-content: space-between; gap: 1rem; white-space: normal; }
.history-description { display: grid; gap: .375rem; overflow-wrap: anywhere; }
.history-change-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.history-description se-code { display: inline-block; line-height: 1.4; vertical-align: middle; }
.history-event-detail { grid-column: 1 / -1; }
.history-values { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--se-muted); }
.history-key-change { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.history-restore-action { flex: none; margin-inline-start: auto; }
.history-more { display: flex; justify-content: center; }
.history-filter-group { display: grid; gap: .75rem; margin: 0; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--se-border); }
.history-filter-group:last-child { border-bottom: 0; }
.format-showcase { display: grid; gap: 1.5rem; }
.format-preview-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.format-preview-files--single { grid-template-columns: minmax(0, 1fr); }
.format-preview-file { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; gap: .5rem; }
.format-preview-file se-code-editor, .format-preview-file .se-editor { height: 100%; min-width: 0; }
.se-table .format-preview-value { white-space: pre-line; }
@media (max-width: 767px) {
  .format-preview-files { grid-template-columns: minmax(0, 1fr); }
  .history-table > :is(se-list-header, se-list-row) > [data-column-divider] { border-right: 0; padding-right: 0; }
  .history-table .se-list__row:has(> .history-actor) { position: relative; row-gap: .25rem; padding: .75rem 3.5rem; }
  .history-table .se-list__row:has(> .history-actor) > * { padding-block: 0; }
  .history-table.se-table:has(> se-list-row[collapsible]) .se-list__row:has(> .history-actor) > :first-child { padding-left: 0; }
  .history-table .se-list__row:has(> .history-actor) .se-list__toggle,
  .history-table .se-list__row:has(> .history-actor) .history-restore-action { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; }
  .history-table .se-list__row:has(> .history-actor) .se-list__toggle { left: 1rem; }
  .history-table .se-list__row:has(> .history-actor) .history-restore-action { right: 1rem; }
}