/* Premium experience layer: visual refinement without changing workflow behavior. */
:root {
  --ft-background: #fef9f3;
  --ft-surface-soft: #f8f0e5;
  --ft-gold-500: #d4a373;
  --ft-gold-100: #f8ead5;
  --ft-blue-600: #6b3c1f;
  --ft-blue-500: #d4a373;
  --ft-blue-100: #f2e9d9;
  --ft-border: #eadfd2;
  --ft-radius-sm: .65rem;
  --ft-radius-md: 1rem;
  --ft-radius-lg: 1.35rem;
  --ft-shadow-soft: 0 12px 32px rgba(107, 60, 31, .07);
  --ft-shadow-raised: 0 22px 55px rgba(107, 60, 31, .13);
  --ft-transition: 220ms cubic-bezier(.2, .75, .25, 1);
}

body.portal-v2 {
  background:
    radial-gradient(circle at 18% 3%, rgba(231, 157, 25, .09), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(212, 163, 115, .10), transparent 25rem),
    var(--ft-background);
}

.ui-app-shell,
.ui-app-shell main {
  background: #fff;
}

.portal-v2 h1,
.portal-v2 h2,
.portal-v2 h3,
.portal-v2 .ui-topbar-context strong {
  font-family: "Manrope", "Inter", sans-serif;
}

.ui-topbar {
  background: #6b3c1f;
  box-shadow: 0 6px 22px rgba(67, 40, 24, .16);
}

.ui-topbar-brand img { filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .16)); }
.ui-topbar-account { display: flex; align-items: center; gap: .45rem; }
.ui-notification-link { position: relative; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.ui-notification-link:hover { color: #fff; background: rgba(255,255,255,.16); }
.ui-notification-link > b { position: absolute; top: -.25rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border: 2px solid #4b2f24; border-radius: 999px; color: #fff; background: var(--ft-red-600); font-size: .58rem; line-height: .9rem; text-align: center; }

.ui-sidebar {
  background:
    radial-gradient(circle at 0 10%, rgba(212, 163, 115, .17), transparent 18rem),
    linear-gradient(180deg, #fffdf9 0%, #f8f0e5 100%);
  color: var(--ft-brown-800);
  border-right: 1px solid #e2d2c2;
  box-shadow: 8px 0 28px rgba(107, 60, 31, .055);
}

.ui-sidebar-heading > span {
  border: 1px solid rgba(107, 60, 31, .12);
  color: #432818;
  background: linear-gradient(145deg, #f6d7a8, #d4a373);
  box-shadow: 0 8px 20px rgba(107, 60, 31, .12);
}

.ui-sidebar-nav a { transition: color var(--ft-transition), background var(--ft-transition), transform var(--ft-transition); }
.ui-sidebar-nav a { color: #765f50; }
.ui-sidebar-nav a:hover { color: #432818; background: rgba(212, 163, 115, .16); transform: translateX(3px); }
.ui-sidebar-nav a.is-active {
  color: #432818;
  background: #f2dfc5;
  box-shadow: inset 3px 0 0 var(--ft-brand-orange);
}
.ui-sidebar-nav a.is-active .ui-nav-icon { color: #a96c1e; }
.ui-sidebar-heading { border-bottom-color: rgba(107, 60, 31, .12); }
.ui-sidebar-heading strong { color: #432818; }
.ui-sidebar-heading small { color: #9a8272; }
.ui-nav-label { color: #9a8272; }
.ui-sidebar-logout button {
  color: #6b3c1f;
  border-color: rgba(107, 60, 31, .2);
  background: rgba(255, 255, 255, .52);
}
.ui-sidebar-logout button:hover {
  color: #432818;
  border-color: rgba(107, 60, 31, .34);
  background: #fff;
}
.ui-service-state { border-top-color: rgba(107, 60, 31, .12); }
.ui-service-state strong { color: #6b3c1f; }
.ui-service-state small { color: #9a8272; }

.ui-button {
  border-radius: .75rem;
  font-weight: 700;
  transition: transform var(--ft-transition), box-shadow var(--ft-transition), background var(--ft-transition), border-color var(--ft-transition);
}

.ui-button:hover { transform: translateY(-2px); }
.ui-button-primary {
  border-color: #6b3c1f;
  background: linear-gradient(135deg, #7b5034, #6b3c1f);
  box-shadow: 0 10px 24px rgba(107, 60, 31, .20);
}
.ui-button-primary:hover { border-color: #432818; background: #432818; box-shadow: 0 15px 30px rgba(107, 60, 31, .26); }
.ui-button-secondary { background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); }

.ui-page-header h1 {
  font-weight: 800;
  letter-spacing: -.045em;
}

.ui-eyebrow {
  color: #755632;
  font-weight: 700;
  letter-spacing: .09em;
}

.pilot-home-hero {
  isolation: isolate;
  min-height: 25rem;
  border-color: rgba(208, 166, 79, .32);
  background:
    linear-gradient(115deg, rgba(255,255,255,.97), rgba(254,249,243,.94) 58%, rgba(248,234,213,.88));
  box-shadow: 0 24px 65px rgba(107, 60, 31, .09);
}

.pilot-home-hero::before {
  top: -9rem;
  left: 31%;
  width: 25rem;
  height: 25rem;
  background: rgba(255, 208, 83, .12);
}

.premium-hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(208, 166, 79, .2);
  border-radius: 50%;
  pointer-events: none;
}
.premium-hero-orbit-one { top: -4rem; right: 11rem; width: 14rem; height: 14rem; }
.premium-hero-orbit-two { right: 3rem; bottom: -6rem; width: 19rem; height: 19rem; }

.pilot-brand-note {
  min-height: 16rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 199, 91, .28), transparent 38%),
    linear-gradient(145deg, #3d271f, #75492d);
  box-shadow: 0 24px 50px rgba(67, 44, 31, .24);
}

.premium-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.15rem;
  margin-top: 1.25rem;
  color: var(--ft-text-secondary);
  font-size: var(--ft-font-xs);
  font-weight: 600;
}
.premium-trust-line span { display: inline-flex; align-items: center; gap: .45rem; }
.premium-trust-line i {
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ft-green-600);
  font-size: .65rem;
  font-style: normal;
}

.pilot-public-features { gap: 1rem; }
.pilot-public-features article {
  position: relative;
  min-height: 14rem;
  padding: 1.6rem;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--ft-shadow-soft);
  overflow: hidden;
  transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.pilot-public-features article::after {
  position: absolute;
  right: -2.5rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border: 1.5rem solid rgba(46, 127, 196, .055);
  border-radius: 50%;
  content: "";
}
.pilot-public-features article:hover {
  border-color: rgba(46, 127, 196, .24);
  box-shadow: var(--ft-shadow-raised);
  transform: translateY(-5px);
}
.premium-feature-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin-top: 1.25rem;
  border-radius: .8rem;
  color: var(--ft-blue-600);
  background: var(--ft-blue-100);
  font-size: 1.15rem;
  font-weight: 800;
}
.pilot-public-features article:nth-child(2) .premium-feature-icon { color: #77569d; background: var(--ft-lilac-100); }
.pilot-public-features article:nth-child(3) .premium-feature-icon { color: var(--ft-green-600); background: var(--ft-green-100); }

.ui-stat,
.pilot-recent,
.pilot-quick-actions,
.submissions-browser,
.request-card {
  border-color: rgba(216, 212, 207, .85);
  box-shadow: var(--ft-shadow-soft);
}

.catalog-page { max-width: 96rem; }
.catalog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.catalog-entity-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-color: rgba(216, 212, 207, .86);
}
.catalog-entity-card:hover { border-color: rgba(46, 127, 196, .3); transform: translateY(-7px); }
.catalog-cover {
  min-height: 10.5rem;
  aspect-ratio: 16 / 8.8;
  order: initial;
}
.catalog-cover::after { background: linear-gradient(180deg, transparent 30%, rgba(32, 22, 17, .46)); }
.catalog-category {
  position: absolute;
  z-index: 3;
  top: .9rem;
  left: .9rem;
  padding: .38rem .65rem;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 999px;
  color: #fff;
  background: rgba(35, 28, 24, .62);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .14);
  backdrop-filter: blur(10px);
  font-size: .67rem;
  font-weight: 700;
}
.catalog-cover-brand > span {
  width: 4rem;
  height: 4rem;
  margin: 0;
  color: #f0c96d;
  font-size: 1.25rem;
}
.catalog-entity-copy {
  grid-template-rows: auto auto 1fr;
  padding: 1.35rem;
}
.catalog-entity-copy h2 {
  margin-bottom: .65rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.25;
}
.catalog-entity-copy > div:first-child > p {
  display: -webkit-box;
  min-height: 4.2em;
  overflow: hidden;
  color: var(--ft-text-secondary);
  font-size: .84rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.premium-service-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}
.premium-service-facts span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  color: var(--ft-text-secondary);
  background: var(--ft-surface-soft);
  font-size: .68rem;
  font-weight: 600;
}
.premium-service-facts i { color: var(--ft-green-600); font-style: normal; }
.catalog-start {
  align-self: end;
  width: 100%;
  justify-content: space-between;
  margin-top: 1.15rem;
}

.premium-priority-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(55, 132, 90, .2);
  border-radius: var(--ft-radius-md);
  color: #255d40;
  background: linear-gradient(115deg, var(--ft-green-100), #fff);
}
.premium-priority-banner.has-alerts {
  border-color: rgba(169, 108, 30, .26);
  color: #805015;
  background: linear-gradient(115deg, var(--ft-warning-100), #fff);
}
.premium-priority-symbol {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: .8rem;
  color: #fff;
  background: var(--ft-green-600);
  font-weight: 800;
}
.has-alerts .premium-priority-symbol { background: var(--ft-warning-600); }
.premium-priority-banner div { display: grid; }
.premium-priority-banner small { color: var(--ft-text-secondary); }
.premium-priority-count {
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-size: var(--ft-font-xs);
  font-weight: 700;
}

.pending-summary > div,
.submissions-summary > div {
  box-shadow: 0 8px 24px rgba(42, 52, 77, .055);
  transition: transform var(--ft-transition), box-shadow var(--ft-transition);
}
.pending-summary > div:hover,
.submissions-summary > div:hover { box-shadow: var(--ft-shadow-soft); transform: translateY(-3px); }
.pending-card { transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition); }
.pending-card:hover { box-shadow: var(--ft-shadow-raised); transform: translateY(-4px); }
.pending-card-sla-warning { box-shadow: 0 12px 34px rgba(169, 108, 30, .1); }
.pending-card-sla-danger { box-shadow: 0 12px 34px rgba(185, 74, 72, .12); }
.pending-sla { position: relative; padding-bottom: 1.05rem; overflow: hidden; }
.premium-sla-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: rgba(0, 0, 0, .07);
}
.premium-sla-track i { display: block; width: 68%; height: 100%; background: currentColor; }
.pending-sla-warning .premium-sla-track i { width: 86%; }
.pending-sla-danger .premium-sla-track i { width: 100%; }

.tracking-status-card {
  position: relative;
  border-top: 4px solid var(--ft-blue-500);
  overflow: hidden;
}
.tracking-status-card::after {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border: 2rem solid rgba(46, 127, 196, .055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.tracking-state { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.tracking-step { border: 1px solid transparent; }
.tracking-step.active { border-color: rgba(55, 132, 90, .14); background: linear-gradient(135deg, var(--ft-green-100), #fff); }
.workflow-history-item { transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition); }
.workflow-history-item:hover { border-color: rgba(46, 127, 196, .22); box-shadow: var(--ft-shadow-raised); transform: translateX(3px); }

.login-page { min-width: 0; overflow-x: hidden; }
.login-shell {
  width: min(100%, 62rem);
  grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
}
.login-welcome {
  background:
    radial-gradient(circle at 88% 15%, rgba(242, 199, 91, .28), transparent 34%),
    linear-gradient(145deg, #35221c, #72462c 66%, #9a6d32);
}
.login-card { min-width: 0; }
.login-card .form-control { border-radius: .75rem; background: #fcfcfd; }
.login-card .form-control:focus { background: #fff; box-shadow: 0 0 0 4px rgba(46, 127, 196, .12); }

@media (max-width: 1200px) and (min-width: 992px) {
  .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-page { padding: var(--ft-space-6); }
  .login-shell { grid-template-columns: minmax(0, .85fr) minmax(18rem, 1.15fr); }
  .login-welcome, .login-card { padding: 2rem; }
}

@media (max-width: 767.98px) {
  .premium-hero-orbit { display: none; }
  .premium-trust-line { display: grid; }
  .pilot-public-features article { min-height: 0; }
  .catalog-list { grid-template-columns: 1fr; }
  .catalog-cover { min-height: 10rem; }
  .premium-priority-banner { grid-template-columns: auto 1fr; }
  .premium-priority-count { grid-column: 2; width: max-content; }
}

.notification-page { max-width: 78rem; margin: 0 auto; padding: var(--ft-space-10); }
.notification-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.notification-summary { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); background: rgba(255,255,255,.86); }
.notification-summary strong { color: var(--ft-blue-600); font: 800 1.5rem Manrope,sans-serif; }
.notification-summary span { font-weight: 700; }
.notification-summary small { margin-left: auto; color: var(--ft-text-muted); }
.notification-read-all { border: 0; color: var(--ft-blue-600); background: transparent; font-size: .72rem; font-weight: 700; }
.notification-list { display: grid; gap: .65rem; }
.notification-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); color: var(--ft-text); background: rgba(255,255,255,.94); box-shadow: var(--ft-shadow-soft); text-decoration: none; transition: transform var(--ft-transition), box-shadow var(--ft-transition); }
.notification-item:hover { color: var(--ft-text); box-shadow: var(--ft-shadow-raised); transform: translateX(4px); }
.notification-item.is-read { opacity: .58; box-shadow: none; }
.notification-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .8rem; color: var(--ft-blue-600); background: var(--ft-blue-100); font-weight: 800; }
.notification-copy { display: grid; }
.notification-copy small { color: var(--ft-text-muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.notification-copy strong { font-size: .9rem; }
.notification-copy > span { color: var(--ft-text-secondary); font-size: .77rem; }
.notification-item time { color: var(--ft-text-muted); font-size: .7rem; }
.notification-danger { border-left: 4px solid var(--ft-red-600); }
.notification-danger .notification-icon { color: var(--ft-red-600); background: var(--ft-red-100); }
.notification-warning { border-left: 4px solid var(--ft-warning-600); }
.notification-warning .notification-icon { color: var(--ft-warning-600); background: var(--ft-warning-100); }
.notification-success .notification-icon { color: var(--ft-green-600); background: var(--ft-green-100); }
@media (max-width: 767.98px) { .notification-page { padding: var(--ft-space-5) var(--ft-space-4) var(--ft-space-8); } .notification-header { align-items: start; flex-direction: column; } .notification-item { grid-template-columns: auto 1fr auto; } .notification-item time { grid-column: 2; } .notification-summary small { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-sidebar-nav a,
  .ui-button,
  .pilot-public-features article,
  .catalog-entity-card,
  .pending-card,
  .pending-summary > div,
  .submissions-summary > div,
  .workflow-history-item { transition: none; }
}

/* Guided multi-step public forms */
.step-form-page { max-width: 88rem; margin: 0 auto; padding: var(--ft-space-10); }
.step-form-header { max-width: 48rem; margin-bottom: 2rem; }
.step-form-back { display: inline-block; margin-bottom: 1.4rem; color: var(--ft-text-secondary); font-size: .78rem; font-weight: 700; text-decoration: none; }
.step-form-header h1 { margin: 0 0 .75rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.045em; }
.step-form-header > p { color: var(--ft-text-secondary); line-height: 1.7; }
.step-form-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.step-form-sidebar, .step-form-card { border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); background: rgba(255,255,255,.92); box-shadow: var(--ft-shadow-soft); }
.step-form-sidebar { position: sticky; top: calc(var(--ft-topbar-height) + 1.5rem); padding: 1.35rem; }
.step-form-sidebar > strong { display: block; margin-bottom: 1rem; font-family: Manrope, sans-serif; }
.step-form-sidebar ol { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.step-form-sidebar li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .7rem; border-radius: .75rem; color: var(--ft-text-muted); }
.step-form-sidebar li > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--ft-border); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.step-form-sidebar li div { display: grid; }
.step-form-sidebar li b { color: inherit; font-size: .77rem; }
.step-form-sidebar li small { font-size: .67rem; }
.step-form-sidebar li.is-active { color: var(--ft-blue-600); background: var(--ft-blue-100); }
.step-form-sidebar li.is-active > span { color: #fff; border-color: var(--ft-blue-600); background: var(--ft-blue-600); }
.step-form-sidebar li.is-complete { color: var(--ft-green-600); }
.step-form-sidebar li.is-complete > span { color: #fff; border-color: var(--ft-green-600); background: var(--ft-green-600); }
.step-time { display: flex; gap: .7rem; margin-top: 1.2rem; padding: .85rem; border-radius: .75rem; background: var(--ft-gold-100); }
.step-time > span { font-size: 1.2rem; }
.step-time div { display: grid; }
.step-time small { color: var(--ft-text-secondary); font-size: .67rem; }
.step-time strong { font-size: .78rem; }
.step-form-card { min-height: 32rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.step-panel { display: none; animation: portal-fade-up .35s ease both; }
.step-panel.is-active { display: block; }
.step-kicker { color: var(--ft-blue-600); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.step-panel h2 { margin: .55rem 0 .5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.step-panel > p { margin-bottom: 1.5rem; color: var(--ft-text-secondary); }
.step-field { margin: 1.25rem 0; }
.step-field label { font-weight: 700; }
.step-field label em { color: var(--ft-red-600); font-style: normal; }
.step-field .form-control, .step-field .form-select { min-height: 3.15rem; border-radius: .75rem; }
.step-field textarea.form-control { min-height: 8rem; }
.step-field-error { display: block; margin-top: .35rem; color: var(--ft-red-600); font-size: .72rem; }
.requirement-list { display: grid; gap: .75rem; margin: 1.5rem 0; }
.requirement-list label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--ft-border); border-radius: .8rem; cursor: pointer; transition: border-color var(--ft-transition), background var(--ft-transition); }
.requirement-list input { position: absolute; opacity: 0; }
.requirement-list label > span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 2px solid #c8c4bf; border-radius: .45rem; color: transparent; }
.requirement-list label:has(input:checked) { border-color: rgba(55,132,90,.3); background: var(--ft-green-100); }
.requirement-list input:checked + span { color: #fff; border-color: var(--ft-green-600); background: var(--ft-green-600); }
.requirement-list strong { font-size: .86rem; }
.step-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ft-border); }
.step-actions [disabled] { opacity: .45; transform: none; cursor: not-allowed; }
@media (max-width: 991.98px) { .step-form-layout { grid-template-columns: 1fr; } .step-form-sidebar { position: static; } .step-form-sidebar ol { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) { .step-form-page { padding: var(--ft-space-5) var(--ft-space-4) var(--ft-space-8); } .step-form-sidebar ol { grid-template-columns: 1fr; } .step-form-sidebar li:not(.is-active) div small { display: none; } .step-form-card { min-height: 0; padding: 1.25rem; } .step-actions { display: grid; } .step-actions .ui-button { width: 100%; } }