.contract-main { min-height: calc(100vh - 150px); }
.contract-hero { padding: 4.5rem 0 2rem; background: radial-gradient(circle at 82% 15%, rgba(44,229,255,.12), transparent 28%); }
.contract-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 2rem; align-items: center; }
.contract-hero h1 { margin: .45rem 0 .8rem; font-size: clamp(2.2rem, 6vw, 4.7rem); }
.contract-hero h1 span { color: var(--cyan); }
.contract-hero p { max-width: 780px; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.contract-security-note { padding: 1.2rem; display: grid; gap: .45rem; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(145deg,rgba(44,229,255,.08),rgba(255,255,255,.025)); }
.contract-security-note span { color: var(--muted); line-height: 1.5; }
.portal-loading { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.portal-spinner { width: 40px; height: 40px; margin: 0 auto 1rem; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--cyan); border-radius: 50%; animation: portal-spin .8s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.auth-wrap { max-width: 650px; padding: 1.5rem 1rem 5rem; }
.auth-card { padding: clamp(1.2rem,4vw,2.2rem); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .35rem; margin-bottom: 1.7rem; background: rgba(255,255,255,.04); border-radius: 14px; }
.auth-tabs button, .portal-link-button { border: 0; font: inherit; font-weight: 700; color: var(--muted); background: transparent; cursor: pointer; }
.auth-tabs button { padding: .85rem; border-radius: 10px; }
.auth-tabs button[aria-selected="true"] { color: #001425; background: var(--cyan); }
.auth-form { display: grid; gap: 1rem; }
.auth-form h2 { margin: 0 0 .35rem; }
.auth-form p { margin: 0; color: var(--muted); line-height: 1.55; }
.field-help { margin-top: -.55rem !important; font-size: .78rem; }
.field textarea { resize: vertical; min-height: 86px; }
.verification-code { text-align: center; letter-spacing: .65rem; font-size: 1.55rem; font-weight: 800; }
.portal-message { min-height: 1.35rem; font-size: .85rem; }
.portal-message.error { color: #ff8d9a; }
.portal-message.success { color: #7fffd4; }
.portal-view { padding-bottom: 5rem; }
.portal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 1.2rem; }
.portal-toolbar h2 { margin: .25rem 0; }
.portal-toolbar p { margin: 0; color: var(--muted); }
.contract-cart-button { padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: rgba(44,229,255,.08); font: inherit; font-weight: 800; cursor: pointer; }
.contract-cart-button span { display: inline-grid; place-items: center; min-width: 25px; height: 25px; margin-left: .35rem; border-radius: 50%; color: #001425; background: var(--cyan); }
.catalog-status { min-height: 1.5rem; color: var(--muted); }
.contract-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; margin: .7rem 0 2rem; }
.contract-product { overflow: hidden; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); }
.contract-product-image { aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,rgba(44,229,255,.12),transparent 65%),#061326; }
.contract-product-image img { width: 100%; height: 100%; object-fit: cover; }
.contract-product-placeholder { color: var(--cyan); font-family: Orbitron,sans-serif; font-size: 1.8rem; }
.contract-product-body { padding: 1.15rem; display: grid; align-content: start; gap: .75rem; }
.contract-product-body h3 { margin: 0; font-size: 1.05rem; }
.contract-product-body p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.55; }
.product-contract-meta { display: flex; flex-wrap: wrap; gap: .4rem; color: #a9c3dd; font-size: .74rem; }
.product-contract-meta span { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 999px; }
.contract-product-footer { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: end; margin-top: auto; }
.contract-product-price { font-size: 1.2rem; font-weight: 800; }
.contract-product-footer label { color: var(--muted); font-size: .7rem; }
.contract-product-footer input { width: 68px; margin-top: .25rem; padding: .55rem; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; }
.contract-product .btn { grid-column: 1 / -1; }
.order-history-panel { padding: 1.25rem; }
.section-heading-row h2 { margin: 0 0 .3rem; }
.section-heading-row p { margin: 0 0 1rem; color: var(--muted); }
.history-list { display: grid; gap: .55rem; }
.history-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; }
.history-row small { color: var(--muted); }
.status-pill { padding: .28rem .5rem; border-radius: 999px; color: #ffd78a; background: rgba(255,190,90,.1); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,8,19,.68); backdrop-filter: blur(3px); }
.contract-cart { position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(540px,100%); padding: 1.25rem; overflow-y: auto; transform: translateX(102%); transition: transform .28s ease; color: var(--text); background: #061326; box-shadow: -18px 0 50px rgba(0,0,0,.4); }
.contract-cart.open { transform: translateX(0); }
.contract-cart-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; }
.contract-cart-head span { color: var(--cyan); text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.contract-cart-head h2 { margin: .25rem 0; }
.contract-cart-head button { border: 0; color: var(--text); background: transparent; font-size: 2rem; cursor: pointer; }
.private-cart-items { display: grid; gap: .6rem; }
.private-cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; }
.private-cart-row small { color: var(--muted); }
.private-cart-row input { width: 64px; padding: .45rem; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; }
.private-cart-row button { border: 0; color: #ff8d9a; background: transparent; cursor: pointer; }
.private-cart-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.contract-order-form { display: grid; gap: .9rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.private-cart-total { display: flex; justify-content: space-between; font-size: 1.12rem; }
.address-grid { display: grid; grid-template-columns: 1fr 80px 110px; gap: .55rem; }
.check-notice { display: grid; gap: .25rem; padding: .8rem; color: var(--muted); border: 1px solid rgba(44,229,255,.25); border-radius: 12px; background: rgba(44,229,255,.05); font-size: .82rem; }
.check-notice strong { color: var(--text); }
.order-confirmation { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(0,8,19,.82); }
.confirmation-card { max-width: 540px; padding: 2rem; text-align: center; }
.confirmation-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; color: #001425; background: var(--cyan); font-size: 2rem; font-weight: 900; }
.confirmation-card h2 { margin: 0 0 .65rem; }
.confirmation-card p { color: var(--muted); line-height: 1.55; }
.confirmation-number strong { color: var(--cyan); }
body.cart-open { overflow: hidden; }
@media (max-width: 900px) { .contract-hero-inner { grid-template-columns: 1fr; } .contract-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .contract-grid { grid-template-columns: 1fr; } .portal-toolbar { align-items: flex-start; flex-direction: column; } .address-grid { grid-template-columns: 1fr 90px; } .address-grid label:first-child { grid-column: 1/-1; } .history-row { grid-template-columns: 1fr auto; } .history-row .status-pill { grid-column: 1/-1; justify-self: start; } .contract-hero { padding-top: 2.8rem; } }