/*
 * Księga Wspomnień® — „Jasne złoto”
 * Paleta zaakceptowana w studium kolorystycznym 2026-08-31.
 * Zieleń pozostaje wyłącznie kolorem semantycznym dla ukończonych elementów.
 */

.clientPortal {
  --client-ink: #292722;
  --client-muted: #746e64;
  --client-soft: #f6f1e8;
  --client-line: rgba(169, 124, 40, 0.18);
  --client-forest: #292722;
  --client-forest-deep: #1d1c19;
  --client-sage: #168761;
  --client-sage-deep: #08704f;
  --client-sage-soft: #e2f2eb;
  --client-mist: #eef7f3;
  --client-green: #168761;
  --client-gold: #d7af57;
  --client-gold-deep: #a97c28;
  --client-champagne: #d7af57;
  --client-champagne-light: #f1d382;
  --client-ivory: #f6f2ea;
  --client-paper: #fffdf8;
  background:
    radial-gradient(circle at 82% 6%, rgba(215, 175, 87, 0.13), transparent 28%),
    linear-gradient(180deg, #fbf8f2 0%, #f2ede4 54%, #fbf8f2 100%);
  color: var(--client-ink);
}

/* Górna belka: czarna, elegancka baza i jasne złoto. */
.clientPortal .clientTopbar {
  border-bottom-color: rgba(215, 175, 87, 0.28);
  background: linear-gradient(118deg, rgba(6, 6, 6, 0.99), rgba(28, 22, 14, 0.98));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.clientPortal .clientTopbarLabel {
  color: rgba(255, 249, 237, 0.68);
}

.clientPortal .clientIdentity,
.clientPortal .clientGuideButton,
.clientPortal .clientLogoutButton,
.clientPortal .clientSaveState {
  border-color: rgba(215, 175, 87, 0.3) !important;
  background: rgba(255, 250, 240, 0.075) !important;
}

.clientPortal .clientSaveState,
.clientPortal .clientIdentityMark {
  color: #f1d382;
}

/* Logowanie. */
.clientPortal .clientLogin::before {
  border-color: rgba(215, 175, 87, 0.3);
  box-shadow:
    0 0 0 72px rgba(215, 175, 87, 0.045),
    0 0 0 142px rgba(215, 175, 87, 0.026);
}

.clientPortal .clientLogin::after {
  background: radial-gradient(circle, rgba(215, 175, 87, 0.22) 0%, rgba(246, 242, 234, 0) 70%);
}

.clientPortal .clientHero h1,
.clientPortal .clientCard h2,
.clientPortal .clientOverviewWelcome h1,
.clientPortal .clientSectionHeader h1 {
  color: #25231f;
}

.clientPortal .clientHero h1 em,
.clientPortal .clientEyebrow,
.clientPortal .clientHeroPromise strong {
  color: #a97c28;
}

.clientPortal .clientHeroPromise {
  border-top-color: rgba(215, 175, 87, 0.24);
  color: #6f6a62;
}

.clientPortal .clientCard {
  border-color: rgba(215, 175, 87, 0.34);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 34px 86px rgba(53, 44, 29, 0.12);
}

.clientPortal .clientCard::before {
  border-color: rgba(215, 175, 87, 0.24);
}

.clientPortal .clientTogetherIdea {
  border-color: rgba(169, 124, 40, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 175, 87, 0.17), transparent 46%),
    rgba(255, 253, 248, 0.82);
  color: #5f584d;
  box-shadow: 0 16px 38px rgba(53, 44, 29, 0.06);
}

.clientPortal .clientTogetherIdeaMark {
  background: #d7af57;
  color: #17130c;
}

.clientPortal .clientTogetherIdea strong {
  color: #292722;
}

.clientPortal .clientTogetherIdea p {
  color: #746e64;
}

.clientPortal .clientForm label {
  color: #9a7124;
}

.clientPortal input,
.clientPortal textarea {
  border-color: rgba(169, 124, 40, 0.24);
  background: rgba(255, 255, 255, 0.8);
  color: #292722;
}

.clientPortal input:focus,
.clientPortal textarea:focus {
  border-color: rgba(169, 124, 40, 0.72);
  box-shadow: 0 0 0 4px rgba(215, 175, 87, 0.14);
}

.clientPortal button:not(.secondary):not(.danger):not(.clientGuideButton):not(.clientLogoutButton):not(.clientSidebarHome):not(.clientSidebarAction):not(.clientOverviewAction):not(.clientMediaChoiceButton):not(.onboardingSkip),
.clientPortal .fileButton {
  border-bottom-color: #b98d34;
  background: linear-gradient(180deg, #dfbb68 0%, #d7af57 100%);
  color: #17130c;
  box-shadow: 0 14px 30px rgba(169, 124, 40, 0.18);
}

/* Główna przestrzeń i powierzchnie robocze. */
.clientPortal .clientWorkspace,
.clientPortal .clientWorkspaceMain {
  background: transparent;
}

.clientPortal .clientSidebar {
  border-color: rgba(169, 124, 40, 0.15);
  background: linear-gradient(180deg, rgba(250, 247, 241, 0.98), rgba(244, 239, 230, 0.97));
}

.clientPortal .clientSectionHeader,
.clientPortal .clientJourney,
.clientPortal .clientAiHint,
.clientPortal .clientStepFooter,
.clientPortal .idleScreenMessageEditor,
.clientPortal .onboardingMiniSteps,
.clientPortal .onboardingMiniSteps span {
  border-color: rgba(169, 124, 40, 0.14);
}

.clientPortal .clientWorkspace .clientPanel,
.clientPortal .clientWorkspace .pasteBox,
.clientPortal .clientExperienceCard,
.clientPortal .clientFlowFooter {
  border-color: rgba(169, 124, 40, 0.17);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 22px 58px rgba(53, 44, 29, 0.075);
}

.clientPortal .clientWorkspace button.secondary,
.clientPortal .clientWorkspace .clientSidebarHome,
.clientPortal .clientWorkspace .clientSidebarAction,
.clientPortal .clientWorkspace .clientMediaChoiceButton {
  border-color: rgba(169, 124, 40, 0.2);
  background: rgba(255, 253, 248, 0.72);
  color: #292722;
}

.clientPortal .clientWorkspace button.secondary:hover,
.clientPortal .clientWorkspace button.secondary:focus-visible,
.clientPortal .clientWorkspace .clientSidebarHome:hover,
.clientPortal .clientWorkspace .clientSidebarHome:focus-visible,
.clientPortal .clientWorkspace .clientSidebarAction:hover,
.clientPortal .clientWorkspace .clientSidebarAction:focus-visible,
.clientPortal .clientWorkspace .clientMediaChoiceButton:hover,
.clientPortal .clientWorkspace .clientMediaChoiceButton:focus-visible {
  border-color: rgba(169, 124, 40, 0.48);
  background: #fffefa;
  box-shadow: 0 12px 30px rgba(53, 44, 29, 0.09);
}

.clientPortal .clientWorkspace .clientSidebarHome.is-active {
  border-color: rgba(169, 124, 40, 0.42);
  background: linear-gradient(135deg, rgba(241, 211, 130, 0.18), rgba(255, 253, 248, 0.94));
}

.clientPortal .clientOverviewGroupHeader,
.clientPortal .clientSidebarMaterialsIntro {
  border-color: rgba(169, 124, 40, 0.18);
}

.clientPortal .clientOverviewGroupLabel {
  color: #292722;
}

.clientPortal .clientSidebarActionLabel {
  color: #a97c28;
}

.clientPortal .clientOverviewGroupHeader > p:last-child,
.clientPortal .clientSidebarGroupIntro > p:last-child:not(.clientSidebarActionLabel) {
  color: #746e64;
}

.clientPortal .clientOverviewMaterialsGroup {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Kafelki: złoto jako interfejs, szmaragd tylko jako informacja „gotowe”. */
.clientPortal .clientWorkspace .clientOverviewAction {
  border-color: rgba(169, 124, 40, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 175, 87, 0.18), transparent 42%),
    rgba(255, 253, 248, 0.94);
  box-shadow: 0 20px 52px rgba(53, 44, 29, 0.075);
  color: #292722;
}

.clientPortal .clientWorkspace .clientOverviewAction:hover,
.clientPortal .clientWorkspace .clientOverviewAction:focus-visible {
  border-color: rgba(169, 124, 40, 0.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 175, 87, 0.27), transparent 42%),
    #fffefa;
  box-shadow: 0 27px 62px rgba(53, 44, 29, 0.12);
}

.clientPortal .clientOverviewActionCopy small,
.clientPortal .clientOverviewLead {
  color: #746e64;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete {
  border-color: #168761;
  background:
    radial-gradient(circle at 100% 0%, rgba(22, 135, 97, 0.075), transparent 42%),
    rgba(255, 253, 248, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(22, 135, 97, 0.14),
    0 22px 56px rgba(36, 55, 46, 0.08);
  color: #292722;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete:hover,
.clientPortal .clientWorkspace .clientOverviewAction.is-complete:focus-visible {
  border-color: #08704f;
  background:
    radial-gradient(circle at 100% 0%, rgba(22, 135, 97, 0.11), transparent 42%),
    #fffefa;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete .clientOverviewActionNumber {
  color: #a97c28;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete .clientOverviewActionCopy small {
  color: #746e64;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete .clientOverviewActionStatus {
  color: #08704f;
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete .clientOverviewActionStatus i {
  border-color: #168761;
  background: #168761;
  box-shadow: 0 0 0 5px rgba(22, 135, 97, 0.1);
}

.clientPortal .clientWorkspace .clientOverviewAction.is-complete .clientOverviewActionArrow {
  border-color: rgba(22, 135, 97, 0.34);
  background: rgba(22, 135, 97, 0.08);
  color: #08704f;
}

/* Nawigacja boczna ma ten sam język co kafelki. */
.clientPortal .clientWorkspace .clientSidebarAction.is-current {
  border-color: rgba(169, 124, 40, 0.5);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 175, 87, 0.24), transparent 48%),
    #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(169, 124, 40, 0.1), 0 14px 30px rgba(53, 44, 29, 0.09);
  color: #292722;
}

.clientPortal .clientSidebarAction.is-current .clientSidebarActionNumber,
.clientPortal .clientSidebarAction.is-current .clientOverviewActionStatus {
  color: #a97c28;
}

.clientPortal .clientSidebarAction.is-current small {
  color: #746e64;
}

.clientPortal .clientSidebarAction.is-complete:not(.is-current) {
  border-color: #168761;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: inset 0 0 0 1px rgba(22, 135, 97, 0.1);
}

.clientPortal .clientSidebarAction.is-complete .clientOverviewActionStatus i,
.clientPortal .clientStepNavItem.is-complete .clientStepState {
  border-color: #168761;
  background: #168761;
}

.clientPortal .clientProgressRing {
  background: conic-gradient(#d7af57 calc(var(--progress) * 1%), rgba(169, 124, 40, 0.1) 0);
}

.clientPortal .clientSidebar .clientStat,
.clientPortal .clientSidebar .eventDeadline {
  border-color: rgba(169, 124, 40, 0.15);
  background: rgba(255, 253, 248, 0.68);
}

/* Formularze, podpowiedzi i treści. */
.clientPortal .clientAiHintMark,
.clientPortal .clientTogetherIdeaMark,
.clientPortal .clientVideoGuide li::before {
  border-color: rgba(169, 124, 40, 0.34);
}

.clientPortal .clientAiHintMark,
.clientPortal .clientVideoGuide li::before,
.clientPortal .clientCoupleNameHeading em {
  background: rgba(215, 175, 87, 0.14);
  color: #9a7124;
}

.clientPortal .clientCoupleIdentity,
.clientPortal .clientCoupleIdentity.is-incomplete {
  border-color: rgba(169, 124, 40, 0.22);
  background: linear-gradient(135deg, rgba(241, 228, 199, 0.68), rgba(255, 253, 248, 0.86));
}

.clientPortal .idleScreenMessageRow,
.clientPortal .guestRow td,
.clientPortal .questionChip {
  border-color: rgba(169, 124, 40, 0.15);
  background: rgba(255, 255, 255, 0.66);
}

.clientPortal .questionChip {
  color: #5f584d;
}

.clientPortal .questionChip:hover,
.clientPortal .questionChip:focus-visible {
  border-color: rgba(169, 124, 40, 0.46);
  background: #fffefa;
}

.clientPortal .questionsBank {
  box-shadow: inset 0 3px 0 #d7af57, 0 22px 58px rgba(53, 44, 29, 0.075) !important;
}

.clientPortal .clientExperienceCard.is-personalized {
  border-color: rgba(169, 124, 40, 0.24);
  background: linear-gradient(145deg, rgba(241, 228, 199, 0.5), rgba(255, 253, 248, 0.9));
}

.clientPortal .clientExperienceCard.is-personalized > header > span {
  background: #292722;
  color: #fffdf8;
}

.clientPortal .clientGuestImportOptions {
  border-top-color: rgba(169, 124, 40, 0.17);
}

.clientPortal .clientWorkspace .clientMediaChoiceButton.is-active {
  border-color: rgba(169, 124, 40, 0.58);
  background: rgba(215, 175, 87, 0.14);
  box-shadow: inset 0 0 0 1px rgba(169, 124, 40, 0.14);
}

.clientPortal .clientMediaStatusBadge {
  border-color: rgba(169, 124, 40, 0.26);
  background: rgba(215, 175, 87, 0.13);
  color: #9a7124;
}

.clientPortal .clientMediaStatusBadge.is-custom {
  border-color: rgba(22, 135, 97, 0.32);
  background: rgba(22, 135, 97, 0.08);
  color: #08704f;
}

.clientPortal .clientMediaControls {
  border-color: rgba(169, 124, 40, 0.17);
  background: rgba(255, 253, 248, 0.66);
}

.clientPortal .clientMediaRotationNote,
.clientPortal .clientRecorderSilentNotice {
  border-color: rgba(169, 124, 40, 0.2);
  background: rgba(241, 228, 199, 0.5);
  color: #5f584d !important;
}

.clientPortal .clientMediaCaptionField > span {
  color: #5f584d;
}

.clientPortal .clientMediaChoiceButton.is-complete {
  border-color: #168761 !important;
  box-shadow: inset 0 0 0 1px rgba(22, 135, 97, 0.1);
}

.clientPortal .guestRow.is-complete td {
  border-color: rgba(22, 135, 97, 0.52);
  background: linear-gradient(115deg, rgba(236, 249, 243, 0.92), rgba(255, 255, 255, 0.78));
}

.clientPortal .guestRow.is-complete:hover td {
  border-color: rgba(22, 135, 97, 0.68);
  background: linear-gradient(115deg, rgba(229, 247, 238, 0.98), rgba(255, 255, 255, 0.94));
}

.clientPortal .clientMediaStage,
.clientPortal .clientRecorderStage,
.clientPortal .clientTabletFrame {
  box-shadow: 0 24px 60px rgba(53, 44, 29, 0.16);
}

/* Modale i samouczek. */
.clientPortal .customEditorModal,
.clientPortal .onboardingModal,
.clientPortal .clientRecorderModal {
  background: rgba(18, 16, 12, 0.74);
}

.clientPortal .customEditorDialog,
.clientPortal .onboardingDialog,
.clientPortal .clientRecorderDialog {
  border-color: rgba(215, 175, 87, 0.38);
  background: #fffdf8;
  box-shadow: 0 44px 108px rgba(18, 16, 12, 0.34);
}

.clientPortal .customEditorModeBtn.is-active {
  border-color: #d7af57 !important;
  background: #d7af57 !important;
  color: #17130c !important;
}

.clientPortal .onboardingOrnament {
  border-color: rgba(215, 175, 87, 0.44);
  background: linear-gradient(118deg, #060606, #1c160e);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.clientPortal .onboardingSkip {
  border-bottom-color: rgba(169, 124, 40, 0.32) !important;
  color: #746e64 !important;
}

.clientPortal .onboardingDots span {
  background: rgba(169, 124, 40, 0.18);
}

.clientPortal .clientRecorderCountdown {
  background: rgba(18, 16, 12, 0.58);
}

.clientPortal .clientRecorderCountdown strong {
  border-color: rgba(241, 211, 130, 0.76);
  background: rgba(29, 28, 25, 0.82);
  color: #f1d382;
}

@media (max-width: 920px) {
  .clientPortal .clientWorkspace:not([data-active-step="overview"]) .clientSidebar {
    border-bottom-color: rgba(169, 124, 40, 0.16);
    background: rgba(250, 247, 241, 0.96);
    box-shadow: 0 12px 26px rgba(53, 44, 29, 0.08);
  }
}