/* Account /konto: guest entry, tabs, favourites, history, settings. */

.acc-guest { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acc-guest__card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--color-line); }
.acc-guest__card p { color: var(--color-muted); }
.acc-guest__card--alt { background: radial-gradient(120% 90% at 100% 0%, var(--color-mint-tint), transparent 60%), var(--color-surface-1); }
.acc-guest__card .auth__perks { margin: 0; }

.phero__facts .pill .icon { width: 14px; height: 14px; }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: var(--color-surface-1); border: 1px solid var(--color-line); margin-bottom: 28px; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-muted); font-weight: 600; transition: background var(--dur-base), color var(--dur-base); }
.tabs [role="tab"] .icon { width: 18px; height: 18px; }
.tabs [role="tab"]:hover { color: var(--color-text); }
.tabs [role="tab"][aria-selected="true"] { background: var(--color-brand); color: var(--color-on-brand); }
.tabs__n { font-size: var(--fs-xs); padding: 2px 7px; border-radius: var(--radius-pill); background: rgba(243, 239, 230, .12); }
[aria-selected="true"] .tabs__n { background: rgba(22, 12, 8, .16); }
.tabpanel { animation: stepIn .35s var(--ease); }
.gcard.is-removing { opacity: 0; transform: scale(.95); transition: opacity .3s, transform .3s; }

.hist__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--color-muted); font-size: var(--fs-small); }
.hist { display: grid; gap: 8px; }
.hist__item { width: 100%; display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 10px 16px 10px 10px; border-radius: var(--radius-md); background: var(--color-surface-1); border: 1px solid var(--color-line); color: var(--color-text); text-align: left; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease); }
.hist__item:hover { border-color: var(--color-brand); transform: translateX(4px); }
.hist__item img { width: 96px; height: 60px; border-radius: 10px; object-fit: cover; }
.hist__item b { display: block; font: 500 1.05rem/1.25 var(--font-display); }
.hist__item small { color: var(--color-mint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hist__item time { font-size: var(--fs-small); color: var(--color-muted); white-space: nowrap; }

.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings__card { padding: 26px; border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--color-line); }
.settings__card .h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.settings__card .h3 .icon { width: 20px; height: 20px; color: var(--color-mint); }
.settings__static { padding: 13px 16px; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px dashed var(--color-line-strong); color: var(--color-muted); overflow-wrap: anywhere; }
.settings__p { color: var(--color-muted); font-size: .95rem; margin-bottom: 16px; }
.settings__card--danger { border-color: rgba(255, 138, 138, .35); }
.settings__card--danger .h3 .icon { color: var(--color-error); }
.btn--danger { background: transparent; border-color: var(--color-error); color: var(--color-error); }
.btn--danger:hover { background: var(--color-error); color: var(--color-bg); }

@media (max-width: 760px) {
  .acc-guest, .settings { grid-template-columns: 1fr; }
  .tabs { display: flex; width: 100%; }
  .tabs [role="tab"] { flex: 1; justify-content: center; padding: 0 10px; }
  .hist__item { grid-template-columns: 72px 1fr; }
  .hist__item img { width: 72px; height: 48px; }
  .hist__item time { grid-column: 2; }
}