/* Project-local visual refresh. Loaded after the original page styles. */
:root {
    --ui-ink: #11233a;
    --ui-muted: #63758a;
    --ui-teal: #087f78;
    --ui-teal-deep: #075e5b;
    --ui-line: #dae5e9;
    --ui-canvas: #f4f8f8;
    --ui-shadow: 0 18px 50px rgba(17, 43, 59, .075);
}

html { scroll-behavior: smooth; }
body.portal-view, body.eye-view, body.cell-view, body.performance-view, body.login-view {
    color: var(--ui-ink);
    background: var(--ui-canvas);
    font-family: "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}
:is(a, button, input, label):focus-visible {
    outline: 3px solid rgba(8, 127, 120, .45);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Portal */
.portal-view .topbar {
    border-bottom: 1px solid #e1e9ed;
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
}
.portal-view .topbar-inner, .portal-view .portal-shell { width: min(1240px, calc(100% - 64px)); }
.portal-view .topbar-inner { min-height: 76px; }
.portal-view .brand { gap: 13px; font-size: 15px; letter-spacing: 0; }
.portal-view .brand-mark {
    width: 42px; height: 42px; border-radius: 13px;
    background: #093c48; box-shadow: none;
}
.portal-view .brand-mark svg { width: 27px; fill: none; stroke: #b0ece5; stroke-width: 2; }
.portal-view .account-name { color: #1a3547; }
.portal-view .logout-button { border-color: #d8e4e9; border-radius: 10px; }
.portal-view .portal-shell { padding: 30px 0 24px; }
.portal-hero {
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    min-height: 350px; overflow: hidden; position: relative;
    border: 1px solid #183b4e; border-radius: 27px;
    background: linear-gradient(118deg, #0a2639 0%, #0c3846 64%, #0c4d54 100%);
    box-shadow: 0 25px 58px rgba(8, 37, 53, .19);
}
.portal-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 74% 53%, rgba(46, 196, 178, .13), transparent 37%),
                linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%);
}
.portal-hero__content { position: relative; z-index: 2; align-self: center; padding: 50px 56px; }
.portal-view .portal-kicker {
    display: flex; align-items: center; gap: 9px; margin: 0 0 19px;
    color: #a8e5dc; font-size: 12px; letter-spacing: .16em;
}
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #56d7c1; box-shadow: 0 0 0 5px rgba(86, 215, 193, .15); }
.portal-hero h1 { margin: 0; color: #fff; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.19; letter-spacing: -.045em; font-weight: 760; }
.portal-hero h1 span { color: #a5e8de; }
.portal-view .portal-description { max-width: 570px; margin: 21px 0 0; color: #c0d5dc; font-size: 15px; line-height: 1.8; }
.portal-hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.portal-hero__chips span { padding: 7px 11px; border: 1px solid rgba(181,230,224,.27); border-radius: 7px; color: #dcefed; background: rgba(255,255,255,.055); font-size: 11px; }
.portal-hero__visual { position: relative; min-height: 350px; overflow: hidden; }
.scan-grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(166,236,225,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(166,236,225,.12) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle, black 20%, transparent 78%); }
.scan-orbit { position: absolute; left: 52%; top: 48%; border: 1px solid rgba(130,229,216,.28); border-radius: 50%; transform: translate(-50%,-50%); }
.scan-orbit--outer { width: 328px; height: 328px; box-shadow: 0 0 0 35px rgba(92,190,179,.028), 0 0 0 72px rgba(92,190,179,.022); }
.scan-orbit--middle { width: 232px; height: 232px; border-color: rgba(130,229,216,.48); }
.scan-orbit--inner { width: 136px; height: 136px; border-color: rgba(130,229,216,.68); background: rgba(107,222,203,.07); }
.scan-center { position: absolute; left: 52%; top: 48%; display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid #7bdccf; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 30px rgba(64,221,190,.38); }
.scan-center span { width: 21px; height: 21px; border-radius: 50%; background: #85e3d5; box-shadow: 0 0 17px #70e8d6; }
.scan-marker { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #93f0d7; box-shadow: 0 0 0 5px rgba(147,240,215,.14); }
.scan-marker--one { left: 30%; top: 29%; }.scan-marker--two { right: 20%; bottom: 22%; }
.scan-caption { position: absolute; right: 26px; bottom: 23px; color: rgba(220,250,245,.55); font: 10px monospace; letter-spacing: .2em; }
.module-section { margin-top: 30px; }
.module-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-eyebrow { margin: 0 0 5px; color: var(--ui-teal); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.module-section__heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.module-section__heading > p { margin: 0 0 2px; color: var(--ui-muted); font-size: 13px; }
.portal-view .module-grid { grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portal-view .module-card { min-height: 192px; padding: 24px 26px; border-color: var(--ui-line); border-radius: 20px; box-shadow: var(--ui-shadow); }
.portal-view .module-card:hover { transform: translateY(-4px); box-shadow: 0 22px 55px rgba(15,47,61,.14); }
.portal-view .module-card--featured { grid-row: span 2; min-height: 400px; padding: 31px; background: linear-gradient(145deg, #e9faf6 0%, #fff 64%); }
.portal-view .module-card--featured::after { content: ""; position: absolute; right: -55px; top: -105px; width: 330px; height: 330px; border: 1px solid rgba(12,142,126,.14); border-radius: 50%; box-shadow: 0 0 0 48px rgba(12,142,126,.04), 0 0 0 96px rgba(12,142,126,.025); pointer-events: none; }
.portal-view .module-card--cell { background: linear-gradient(115deg, #fff, #f5f8fd); }
.portal-view .module-card--performance { background: linear-gradient(115deg, #fff, #f8f5fc); }
.portal-view .module-icon { width: 57px; height: 57px; border-color: currentColor; border-radius: 14px; background: rgba(255,255,255,.78); }
.portal-view .module-icon svg { width: 38px; height: 38px; }
.portal-view .module-content { align-self: end; padding-top: 14px; }
.portal-view .module-content h3 { margin: 7px 0 7px; font-size: 23px; line-height: 1.3; letter-spacing: -.03em; }
.portal-view .module-card--featured .module-content h3 { font-size: 33px; }
.portal-view .module-content p { max-width: 560px; font-size: 13px; line-height: 1.7; }
.portal-view .module-index { color: #557585; font-size: 10px; }
.portal-view .module-action { margin-top: 15px; padding: 0; color: var(--ui-teal); background: none !important; box-shadow: none !important; font-size: 12px; }
.portal-view .module-card--cell .module-action { color: #2866a0; }.portal-view .module-card--performance .module-action { color: #7957a7; }
.portal-view .module-card:hover .module-action { transform: none; }
.module-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.module-tags span { padding: 6px 9px; border: 1px solid #cde8e2; border-radius: 7px; color: #327c71; background: #f6fffc; font-size: 11px; }
.portal-view .portal-footer { margin-top: 22px; font-size: 11px; }

/* Eye analysis */
.eye-view { --eye-primary: var(--ui-teal); --eye-canvas: var(--ui-canvas); --eye-line: var(--ui-line); --eye-shadow: var(--ui-shadow); }
.eye-view .eye-page { width: min(1340px, calc(100% - 56px)); padding-top: 30px; }
.eye-view .eye-header { grid-template-columns: 160px minmax(0,1fr) auto; margin-bottom: 21px; }
.eye-view .eye-back { border-color: var(--ui-line); box-shadow: none; }
.eye-view .eye-heading p { color: var(--ui-teal); font-size: 10px; letter-spacing: .15em; }
.eye-view .eye-heading h1 { font-size: clamp(27px, 3vw, 38px); }
.eye-view .eye-status { border-color: #cde6e1; color: #126d65; background: #eaf8f5; font-size: 11px; }
.eye-mode-panel { display: grid; grid-template-columns: 265px minmax(0,1fr); align-items: center; gap: 22px; margin-bottom: 17px; padding: 17px 20px; border: 1px solid var(--ui-line); border-radius: 18px; background: #fff; box-shadow: var(--ui-shadow); }
.eye-mode-panel__intro { display: flex; align-items: center; gap: 12px; }
.eye-mode-panel__intro h2 { margin: 0 0 4px; font-size: 16px; }.eye-mode-panel__intro p { margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.eye-view .step-index { width: 35px; height: 35px; border-radius: 10px; background: #087f78; }
.eye-view .eye-mode-switch { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.eye-view .eye-mode-option { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 11px; border-color: #d9e7e8; border-radius: 12px; background: #f9fbfb; }
.eye-view .eye-mode-option.active { border-color: #45ab9e; background: #ecf8f5; box-shadow: inset 0 0 0 1px #45ab9e; }
.eye-view .eye-mode-option:focus-within { outline: 3px solid rgba(8,127,120,.32); outline-offset: 2px; }
.eye-mode-option__index { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border: 1px solid #cfdfdf; border-radius: 8px; color: #4a6d72; background: #fff; font-size: 11px; font-weight: 800; }
.eye-mode-option.active .eye-mode-option__index { color: #fff; border-color: #087f78; background: #087f78; }
.eye-mode-option strong, .eye-mode-option small { display: block; text-align: left; }
.eye-mode-option strong { color: #173344; font-size: 12px; line-height: 1.5; }.eye-mode-option small { margin-top: 3px; color: #6a8490; font-size: 10px; line-height: 1.35; }
.eye-view .eye-layout { grid-template-columns: minmax(310px,.85fr) minmax(0,1.25fr); gap: 17px; }
.eye-view .eye-panel { border-color: var(--ui-line); border-radius: 18px; box-shadow: var(--ui-shadow); }
.eye-view .eye-upload-panel, .eye-view .eye-result-panel { padding: 22px; }
.eye-view .panel-heading { margin-bottom: 16px; }.eye-view .panel-heading h2 { font-size: 17px; }
.eye-view .eye-drop-zone { min-height: 245px; border-color: #bad8d6; border-radius: 13px; background: radial-gradient(circle at center, rgba(8,127,120,.045), transparent 62%), repeating-linear-gradient(0deg, transparent 0 25px, rgba(8,127,120,.025) 26px), #f7fbfa; }
.eye-view .eye-drop-zone:hover, .eye-view .eye-drop-zone.dragover { border-color: var(--ui-teal); background: #edf9f6; }
.eye-view .eye-drop-zone svg { color: var(--ui-teal); }.eye-view .eye-drop-zone strong { font-size: 16px; }
.eye-view .upload-note { margin-top: 14px; border-left-color: #0d8c80; background: #f2f9f7; }
.eye-view .eye-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.eye-view .eye-detect-button { width: 100%; min-height: 48px; padding: 10px 18px; border-radius: 10px; background: #087f78; box-shadow: 0 10px 22px rgba(8,127,120,.19); font-size: 14px; }
.eye-view .eye-detect-button:hover { background: #066b66; }
.eye-view .eye-detect-button span { margin-left: 6px; }
.eye-view .eye-detect-status { margin: 0; text-align: left; }
.eye-view .result-card { border-color: #dce8ea; border-radius: 13px; box-shadow: none; }
.eye-view .result-card--cdr { grid-column: 1 / -1; }
.eye-view .cdr-panel, .eye-view .lesion-panel, .eye-view .mamff-panel { min-height: 185px; }
.eye-view .cdr-value { font-size: clamp(52px, 6vw, 66px); }
.eye-view .cdr-panel p { max-width: 440px; margin-top: 12px; }
.eye-view .cdr-panel[hidden], .eye-view .lesion-panel[hidden], .eye-view .mamff-panel[hidden] { display: none; }
.eye-view .eye-image-placeholder, .eye-view .eye-overlay-placeholder { min-height: 240px; }
.eye-view .result-card-title { background: #f9fbfb; }
.eye-view .eye-history-panel { margin-top: 20px; }
.eye-view .eye-history-layout { grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); }
.eye-view .eye-history-layout:has(> .eye-history-detail[hidden]) { grid-template-columns: minmax(0,1fr); }
.eye-view .eye-history-list-panel { min-width: 0; overflow-x: auto; }
.eye-view .eye-history-list { max-height: 350px; }
.eye-view .eye-history-list-header, .eye-view .eye-history-item { grid-template-columns: minmax(130px,1.2fr) minmax(88px,.8fr) minmax(150px,1.4fr) 76px minmax(110px,.9fr); }

/* Cell analysis */
.cell-view { background: #f4f8f8 !important; }
.cell-view .sidebar { width: 228px; background: #102c3c; }
.cell-view .logo { padding: 24px 20px; border-color: rgba(255,255,255,.12); font-size: 17px; }
.cell-view .home-link { border-radius: 10px; }
.cell-view .nav-btn { margin: 2px 10px; width: calc(100% - 20px); border-radius: 9px; }
.cell-view .nav-btn.active { background: #0b827a; }
.cell-view .content { padding: 32px 36px; }
.cell-view #page-title, .cell-view #page-history h1 { font-size: 31px; letter-spacing: -.035em; }
.cell-view .desc { margin-bottom: 22px; }
.cell-view .panel { border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: var(--ui-shadow); }
.cell-view .block-title { border-left-color: var(--ui-teal); }
.cell-view .drop-zone { min-height: 185px; border-color: #b9d7d4; border-radius: 13px; background: #f8fbfa; }
.cell-view .drop-zone:hover, .cell-view .drop-zone.dragover { border-color: var(--ui-teal); background: #eef8f5; }
.cell-view .drop-icon { color: var(--ui-teal); }.cell-view .btn-primary { background: var(--ui-teal); }
.cell-view input[type="range"] { accent-color: var(--ui-teal); }

/* Performance */
.performance-view { --perf-blue: #087f78; --perf-teal: #0c967e; --perf-purple: #6b69a9; --perf-canvas: var(--ui-canvas); }
.performance-view .performance-topbar { box-shadow: none; }
.performance-view .performance-brand__mark { background: #093c48; box-shadow: none; }
.performance-view .performance-page { padding-top: 31px; }
.performance-view .highlight-card, .performance-view .data-panel { border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.performance-view .highlight-card { border-radius: 18px; }.performance-view .data-panel { border-radius: 17px; }
.performance-view .section-kicker { color: var(--ui-teal); }

/* Login */
.login-view { background: linear-gradient(125deg, #092d3d 0%, #104d55 56%, #e3f3ee 56%, #f4f8f7 100%) !important; }
.login-view .login-card { border: 1px solid #d9e9e7; border-radius: 22px; box-shadow: 0 25px 70px rgba(0,31,40,.22); }
.login-view .login-kicker { color: var(--ui-teal); }
.login-view .login-button { background: #087f78; box-shadow: 0 10px 24px rgba(8,127,120,.2); }
.login-view .login-button:hover:not(:disabled) { box-shadow: 0 14px 28px rgba(8,127,120,.27); }
.login-view .login-field input:focus { border-color: #087f78; box-shadow: 0 0 0 4px rgba(8,127,120,.12); }

@media (max-width: 1100px) {
    .eye-mode-panel { grid-template-columns: 1fr; gap: 14px; }
    .eye-view .eye-layout { grid-template-columns: 1fr; }
    .eye-view .eye-history-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .portal-view .topbar-inner, .portal-view .portal-shell { width: min(100% - 28px, 700px); }
    .portal-hero { grid-template-columns: 1fr; }
    .portal-hero__content { padding: 36px 32px 18px; }
    .portal-hero__visual { min-height: 155px; opacity: .7; }
    .scan-orbit, .scan-center { top: 30%; }
    .portal-view .module-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .portal-view .module-card--featured { grid-row: auto; min-height: 300px; }
    .module-section__heading { align-items: start; flex-direction: column; gap: 5px; }
    .eye-view .eye-page { width: min(100% - 28px, 700px); }
    .eye-view .eye-header { grid-template-columns: 1fr; gap: 10px; }
    .eye-view .eye-mode-switch { grid-template-columns: 1fr; }
    .eye-view .eye-mode-option { min-height: 58px; }
    .eye-view .eye-history-list-header, .eye-view .eye-history-item { min-width: 640px; }
}
@media (max-width: 560px) {
    .portal-view .topbar-inner { align-items: center; min-height: 70px; }
    .portal-view .brand-text { max-width: 145px; font-size: 12px; }
    .portal-view .account-label { display: none; }
    .portal-view .account-name { display: none; }
    .portal-view .account-area { flex-direction: row; align-items: center; }
    .portal-hero__content { padding: 30px 24px 10px; }
    .portal-hero h1 { font-size: 34px; }
    .portal-hero__visual { min-height: 115px; }
    .portal-view .module-card { padding: 21px; }
    .portal-view .module-card--featured { min-height: 310px; }
    .eye-view .eye-page { width: min(100% - 24px, 520px); }
    .eye-mode-panel { padding: 15px; }
    .eye-view .eye-upload-panel, .eye-view .eye-result-panel { padding: 17px; }
    .cell-view .sidebar { width: 100%; }
    .cell-view .content { padding: 22px 15px; }
}