:root {
  --ink: #172b30;
  --muted: #647b80;
  --navy: #075866;
  --dark: #132c31;
  --cyan: #00afc2;
  --cyan-soft: #8be8ef;
  --bg: #edf5f6;
  --line: #d5e2e4;
  --white: #fff;
  --green: #13966f;
  --orange: #d87909;
  --red: #c53c47;
  --shadow: 0 22px 60px rgba(15, 47, 53, .12);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: "Manrope", system-ui, sans-serif; line-height: 1.55; }
body.portal-active { padding-bottom: 62px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 9px 14px; border-radius: 8px; background: white; }
.skip-link:focus { top: 12px; }

.portal-header { position: relative; z-index: 20; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 4vw, 64px); color: white; background: var(--dark); }
.portal-brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
.portal-brand img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.portal-brand span { display: grid; line-height: 1.2; }
.portal-brand small { color: var(--cyan-soft); }
.portal-header-actions { display: flex; align-items: center; gap: 24px; font-size: .84rem; font-weight: 700; }
.portal-header-actions a { color: rgba(255,255,255,.75); text-decoration: none; }
.link-button { padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: white; background: transparent; cursor: pointer; }

.auth-layout { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 8vw, 125px); overflow: hidden; color: white; background: linear-gradient(145deg, rgba(7, 88, 102, .97), rgba(19, 44, 49, .98)), url('../images/hero-office.jpg') center/cover; }
.auth-story::after { content: ""; position: absolute; width: 430px; height: 430px; right: -190px; bottom: -180px; border: 80px solid rgba(139,232,239,.15); border-radius: 50%; }
.auth-story > * { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: var(--navy); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; }
.auth-story .eyebrow { color: var(--cyan-soft); }
.auth-story h1 { max-width: 680px; margin: 0 0 24px; font-size: clamp(2.8rem, 5vw, 5.6rem); line-height: 1.02; letter-spacing: -.055em; }
.auth-story h1 span { color: var(--cyan-soft); }
.auth-story > p:not(.eyebrow) { max-width: 610px; color: rgba(255,255,255,.72); font-size: 1.04rem; }
.auth-story ul { display: grid; gap: 10px; padding: 0; margin: 26px 0 0; list-style: none; color: rgba(255,255,255,.78); }
.auth-story li::before { content: "✓"; margin-right: 10px; color: var(--cyan-soft); }
.auth-card { width: min(560px, calc(100% - 48px)); align-self: center; justify-self: center; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.muted { color: var(--muted); }
.auth-card form, .portal-form { display: grid; gap: 16px; margin-top: 28px; }
label { display: grid; gap: 7px; color: #40565b; font-size: .78rem; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 49px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fbfdfd; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,175,194,.12); }
input:disabled { color: #64777b; background: #edf2f3; }
.two-columns, .three-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.three-columns { grid-template-columns: repeat(3, 1fr); }
.privacy-check { grid-template-columns: 20px 1fr; align-items: start; font-weight: 500; }
.privacy-check input { width: 17px; min-height: 17px; margin-top: 3px; accent-color: var(--navy); }
.privacy-check a { color: var(--navy); }
.primary-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 13px; color: white; background: var(--navy); font-weight: 800; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.primary-button:hover { transform: translateY(-1px); background: #064b57; }
.primary-button:disabled { opacity: .58; cursor: wait; }
.primary-button.compact { min-height: 44px; width: fit-content; }
.auth-links { display: flex; justify-content: space-between; gap: 18px; margin-top: 22px; }
.auth-links button, .back-button { padding: 0; border: 0; color: var(--navy); background: transparent; font-size: .78rem; font-weight: 700; cursor: pointer; }
.back-button { margin-bottom: 22px; }
.form-message { min-height: 0; margin: 0; color: #b42318; font-size: .8rem; }
.form-message.success { color: var(--green); }

.client-app { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 285px 1fr; }
.client-sidebar { position: sticky; top: 0; align-self: start; min-height: calc(100vh - 78px); display: flex; flex-direction: column; padding: 30px 22px; color: white; background: #102f35; }
.client-identity { display: flex; gap: 12px; align-items: center; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.client-identity > span { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--dark); background: var(--cyan-soft); font-size: 1.1rem; font-weight: 800; }
.client-identity div { min-width: 0; display: grid; }
.client-identity strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.client-identity small { color: rgba(255,255,255,.55); }
.client-sidebar nav { display: grid; gap: 5px; padding: 24px 0; }
.client-sidebar nav button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 0 12px; border: 0; border-radius: 12px; color: rgba(255,255,255,.67); background: transparent; text-align: left; cursor: pointer; }
.client-sidebar nav button:hover, .client-sidebar nav button.active { color: white; background: rgba(139,232,239,.12); }
.client-sidebar nav button span { color: var(--cyan-soft); font-size: 1.1rem; }
.client-sidebar nav b { min-width: 24px; padding: 2px 6px; border-radius: 999px; color: var(--cyan-soft); background: rgba(255,255,255,.08); font-size: .68rem; text-align: center; }
.sidebar-help { display: grid; gap: 6px; margin-top: auto; padding: 18px; border: 1px solid rgba(139,232,239,.18); border-radius: 16px; background: rgba(255,255,255,.04); }
.sidebar-help span { color: rgba(255,255,255,.58); font-size: .72rem; }
.sidebar-help a { margin-top: 8px; color: var(--cyan-soft); font-size: .74rem; font-weight: 800; }
.client-content { min-width: 0; padding: clamp(25px, 4vw, 58px); }
.portal-active .client-content { padding-bottom: 100px; }
.mobile-section-nav { display: none; }
.portal-section { max-width: 1320px; margin: auto; }
.welcome-card { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(30px, 5vw, 58px); overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, white, #c8f0f3); box-shadow: 0 14px 34px rgba(15,47,53,.08); }
.welcome-card::after { content: ""; position: absolute; width: 270px; height: 270px; right: -110px; top: -130px; border: 54px solid rgba(0,175,194,.12); border-radius: 50%; }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-card h2, .section-title h2 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.045em; }
.welcome-card p:last-child, .section-title p:last-child { margin: 0; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.metric-grid article { min-height: 112px; display: flex; gap: 14px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: white; }
.metric-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-weight: 800; }
.metric-icon.green { color: var(--green); background: #e1f5ee; }
.metric-icon.blue { color: var(--navy); background: #dcf3f6; }
.metric-icon.orange { color: var(--orange); background: #fff0dd; }
.metric-icon.red { color: var(--red); background: #fde8eb; }
.metric-grid article div { display: grid; }
.metric-grid strong { font-size: 1.65rem; line-height: 1.1; }
.metric-grid small { color: var(--muted); }
.content-card { margin-top: 20px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: white; }
.card-heading, .section-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.card-heading h3 { margin: 0; font-size: 1.35rem; }
.card-heading button { border: 0; color: var(--navy); background: transparent; font-weight: 800; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.quick-grid button { min-height: 150px; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #f8fbfb; text-align: left; cursor: pointer; }
.quick-grid button:hover { border-color: var(--cyan); background: #effafb; }
.quick-grid span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 7px; border-radius: 11px; color: var(--navy); background: #dff5f7; font-weight: 800; }
.quick-grid small { color: var(--muted); }
.timeline-list { display: grid; margin-top: 18px; }
.timeline-item { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid #edf2f3; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--orange); background: #fff0dd; }
.timeline-item div { min-width: 0; display: grid; }
.timeline-item small { color: var(--muted); }
.timeline-item time { margin-left: auto; color: var(--navy); font-size: .78rem; font-weight: 800; }
.empty-state { padding: 32px 20px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); background: #fbfdfd; text-align: center; }

.section-title { margin-bottom: 28px; }
.card-list { display: grid; gap: 14px; }
.item-card { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.item-card-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.item-card-head h3 { margin: 0 0 4px; font-size: 1.08rem; }
.item-card-head p { margin: 0; color: var(--muted); font-size: .85rem; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; color: var(--navy); background: #e3f3f4; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.status-pill.paid, .status-pill.active, .status-pill.resolved { color: #08765a; background: #e1f5ee; }
.status-pill.pending { color: #a15c00; background: #fff0dd; }
.status-pill.expired { color: #a82d39; background: #fde8eb; }
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.data-grid div { display: grid; }
.data-grid small { color: var(--muted); }
.data-grid strong { font-size: .88rem; }
.item-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 15px; border-top: 1px solid #edf2f3; }
.manager-reply { display: grid; gap: 5px; padding: 16px 18px; border-left: 4px solid var(--cyan); border-radius: 13px; background: #effafb; }
.manager-reply strong { color: var(--navy); font-size: .82rem; }
.manager-reply p { margin: 0; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.request-description { margin: 0; white-space: pre-wrap; }
.proposal-files { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfd; }
.proposal-files > strong { color: var(--navy); font-size: .82rem; }
.proposal-files .item-actions { padding-top: 10px; }
.proposal-decision { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(0,175,194,.3); border-radius: 15px; background: #effafb; }
.proposal-decision > strong { color: var(--navy); }
.proposal-decision > p { margin: -4px 0 2px; color: var(--muted); font-size: .8rem; }
.proposal-decision textarea { min-height: 82px; background: white; }
.decision-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.reject-button { color: var(--red); border-color: rgba(197,60,71,.3); }
.proposal-result { display: grid; gap: 4px; padding: 16px 18px; border-left: 4px solid var(--green); border-radius: 13px; color: #08765a; background: #e1f5ee; }
.proposal-result.rejected { border-color: var(--red); color: #a82d39; background: #fde8eb; }
.proposal-result small { color: inherit; opacity: .75; }
.proposal-result p { margin: 5px 0 0; color: var(--ink); white-space: pre-wrap; }
.secondary-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); background: white; font-size: .76rem; font-weight: 800; cursor: pointer; text-decoration: none; }
.secondary-button:hover { border-color: var(--cyan); background: #effafb; }
.split-layout { display: grid; grid-template-columns: minmax(360px, .85fr) 1.15fr; gap: 22px; align-items: start; }
.split-layout .content-card { margin-top: 0; }
.portal-form h3 { margin: 0 0 4px; }
.list-heading { margin: 0 0 14px; }
.compact-list .item-card { padding: 19px; }
.notice-card { margin-bottom: 20px; padding: 18px 20px; border-left: 4px solid var(--cyan); border-radius: 14px; background: #dcf3f6; }
.notice-card p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.upload-row { display: flex; gap: 10px; align-items: center; }
.upload-row input { min-width: 0; }
.profile-form { max-width: 900px; margin-top: 0; }

.client-product-ticker { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; padding: 0 28px; overflow: hidden; color: white; background: #0c282e; box-shadow: 0 -10px 30px rgba(9, 40, 46, .15); }
.client-product-ticker > strong { position: relative; z-index: 2; padding-right: 22px; color: var(--cyan-soft); font-size: .78rem; white-space: nowrap; background: #0c282e; }
.ticker-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); }
.ticker-flow { width: max-content; display: flex; gap: 30px; animation: portalTicker 92s linear infinite; will-change: transform; }
.ticker-products { display: flex; align-items: center; gap: 30px; }
.ticker-products button { padding: 8px 0; border: 0; color: rgba(255,255,255,.78); background: transparent; font-size: .76rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ticker-products button:hover, .ticker-products button:focus-visible { color: var(--cyan-soft); outline: none; }
.client-product-ticker:hover .ticker-flow, .client-product-ticker:focus-within .ticker-flow { animation-play-state: paused; }
@keyframes portalTicker { to { transform: translateX(calc(-50% - 15px)); } }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 82px; max-width: 430px; padding: 16px 20px; border-radius: 14px; color: white; background: var(--dark); box-shadow: var(--shadow); font-size: .85rem; font-weight: 700; }

@media (max-width: 1080px) {
  .metric-grid, .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .data-grid { grid-template-columns: repeat(2, 1fr); }
  .split-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 390px; padding: 60px 28px; }
  .auth-story h1 { font-size: clamp(2.5rem, 10vw, 4.2rem); }
  .auth-card { margin: 28px auto 50px; }
  .client-app { display: block; }
  .client-sidebar { display: none; }
  .client-content { padding: 24px 16px 50px; }
  .portal-active .client-content { padding-bottom: 92px; }
  .mobile-section-nav { display: block; margin-bottom: 18px; }
  .client-product-ticker { grid-template-columns: 1fr; padding: 0 12px; }
  .client-product-ticker > strong { display: none; }
}

@media (max-width: 580px) {
  .portal-header { height: 70px; padding: 0 14px; }
  .portal-brand img { width: 40px; height: 40px; }
  .portal-header-actions > a { display: none; }
  .auth-layout { min-height: calc(100vh - 70px); }
  .auth-story { min-height: 330px; }
  .auth-story ul { display: none; }
  .auth-card { width: calc(100% - 24px); padding: 26px 18px; border-radius: 22px; }
  .two-columns, .three-columns, .metric-grid, .quick-grid, .data-grid { grid-template-columns: 1fr; }
  .auth-links { align-items: flex-start; flex-direction: column; }
  .welcome-card, .card-heading, .section-title, .item-card-head { align-items: flex-start; flex-direction: column; }
  .welcome-card { padding: 30px 22px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid article { min-height: 100px; padding: 15px; }
  .metric-icon { display: none; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-grid button { min-height: 108px; }
  .upload-row { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .ticker-flow { animation: none; }
}