.smart-monitor-page { background: #fff; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--muted); font-size: .82rem; font-weight: 700; }.back-link svg { width: 17px; }
.monitor-hero { min-height: 760px; padding: calc(var(--header-height) + 68px) 0 92px; overflow: hidden; background: radial-gradient(circle at 86% 19%, rgba(53,152,187,.15), transparent 29%), linear-gradient(180deg, #f7fcfe 0%, #fff 100%); }.monitor-hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(45px, 6vw, 90px); }.monitor-hero h1 { max-width: 720px; margin-bottom: 14px; font-size: clamp(3.25rem, 5.7vw, 5.5rem); line-height: 1.02; }.monitor-hero h2 { max-width: 670px; margin-bottom: 24px; color: var(--blue-700); font-family: "Inter", sans-serif; font-size: clamp(1.4rem, 2.35vw, 2.05rem); line-height: 1.3; letter-spacing: -.03em; }.monitor-hero-copy > p { max-width: 660px; font-size: 1.04rem; }.monitor-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }.monitor-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: .77rem; font-weight: 700; }.monitor-trust span { display: inline-flex; align-items: center; gap: 7px; }.monitor-trust svg { width: 17px; color: var(--blue-500); }

.monitor-app { position: relative; max-width: 740px; padding: 20px; background: #fff; border: 1px solid rgba(53,152,187,.2); border-radius: 27px; box-shadow: 0 34px 80px rgba(7,36,64,.16); }.monitor-app-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 2px 18px; border-bottom: 1px solid var(--line); }.monitor-app-head > div { display: flex; align-items: center; gap: 11px; }.monitor-app-head > div > svg { width: 40px; height: 40px; padding: 9px; color: var(--blue-700); background: #e2f3f7; border-radius: 12px; }.monitor-app-head strong, .monitor-app-head small { display: block; }.monitor-app-head strong { color: var(--ink); font-size: .84rem; }.monitor-app-head small { color: var(--muted); font-size: .65rem; }.monitor-app-head button { display: grid; width: 35px; height: 35px; place-items: center; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }.monitor-app-head button svg { width: 18px; }
.monitor-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 17px 0; }.monitor-toolbar > div { display: flex; align-items: center; gap: 9px; padding: 11px 12px; color: #8aa0ad; background: #f8fbfd; border: 1px solid var(--line); border-radius: 10px; font-size: .69rem; }.monitor-toolbar svg { width: 16px; }.monitor-toolbar > span { display: inline-flex; align-items: center; gap: 7px; padding: 11px; color: var(--blue-700); background: #e5f4f7; border-radius: 10px; font-size: .69rem; font-weight: 800; }
.monitor-table-head, .monitor-table-row { display: grid; grid-template-columns: 1.15fr 1.1fr .7fr .45fr; align-items: center; gap: 12px; }.monitor-table-head { padding: 9px 13px; color: #8298a6; background: var(--soft); border-radius: 8px; font-size: .62rem; font-weight: 800; text-transform: uppercase; }.monitor-table-row { margin-top: 8px; padding: 13px; border: 1px solid #e2ebf0; border-radius: 11px; font-size: .68rem; }.monitor-table-row.selected { background: #f1fbfd; border-color: #b9e4ed; }.monitor-table-row strong, .monitor-table-row small { display: block; }.monitor-table-row strong { color: var(--ink); font-size: .7rem; }.monitor-table-row small { color: var(--muted); font-size: .59rem; }.monitor-table-row > span:nth-child(3) { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; }.status-dot { width: 7px; height: 7px; border-radius: 50%; }.status-dot.analyzing { background: #1ba5c3; box-shadow: 0 0 0 4px rgba(27,165,195,.1); }.status-dot.completed { background: #2cac66; box-shadow: 0 0 0 4px rgba(44,172,102,.1); }.monitor-table-row > span:last-child { color: var(--muted); text-align: right; }.monitor-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 13px; color: #d5e4ed; background: var(--navy-900); border-radius: 11px; }.monitor-summary > span { display: flex; align-items: center; gap: 8px; }.monitor-summary svg { width: 18px; color: #58d18b; }.monitor-summary strong { color: #fff; font-size: .7rem; }.monitor-summary small { font-size: .6rem; }

.monitor-overview { background: #fff; }.monitor-overview-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 85px; }.monitor-overview-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.overview-card { display: flex; min-height: 190px; gap: 16px; padding: 24px; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; }.overview-card > svg { width: 42px; height: 42px; flex: 0 0 42px; padding: 9px; color: var(--blue-700); background: #e1f3f7; border-radius: 12px; }.overview-card span { color: #93a8b5; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }.overview-card h3 { margin: 6px 0 9px; font-size: 1rem; }.overview-card p { margin: 0; font-size: .8rem; }

.protocol-section { color: #c7d8e7; background: radial-gradient(circle at 15% 15%, rgba(53,152,187,.16), transparent 28%), var(--navy-950); }.protocol-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 90px; }.protocol-copy h2 { color: #fff; }.protocol-copy > p { color: #aabfd1; font-size: 1.02rem; }.protocol-copy ul { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }.protocol-copy li { display: flex; align-items: center; gap: 9px; color: #d5e3ed; font-size: .85rem; }.protocol-copy li svg { width: 19px; color: var(--cyan-400); }
.protocol-card { padding: 25px; color: var(--ink); background: #fff; border: 1px solid rgba(80,210,238,.2); border-radius: 24px; box-shadow: 0 28px 65px rgba(0,0,0,.22); }.protocol-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 5px 3px 20px; border-bottom: 1px solid var(--line); }.protocol-card-head > span { color: var(--muted); font-size: .69rem; }.protocol-card-head > strong { color: var(--blue-700); font-family: monospace; }.protocol-card-head > small { display: inline-flex; align-items: center; gap: 6px; color: #168c55; font-weight: 700; }.protocol-card-head > small i { width: 7px; height: 7px; background: #2db16a; border-radius: 50%; }.protocol-timeline { position: relative; display: grid; gap: 0; padding-top: 10px; }.protocol-timeline::before { content: ""; position: absolute; top: 35px; bottom: 35px; left: 18px; width: 1px; background: #d8e6ed; }.protocol-timeline > div { position: relative; z-index: 1; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 13px; padding: 12px 0; }.protocol-timeline > div > span { display: grid; width: 36px; height: 36px; place-items: center; color: #8399a7; background: #edf3f6; border: 4px solid #fff; border-radius: 50%; }.protocol-timeline > div.done > span { color: #fff; background: #2aaa64; }.protocol-timeline > div.active > span { color: var(--blue-700); background: #dff3f7; }.protocol-timeline svg { width: 16px; }.protocol-timeline p { margin: 0; }.protocol-timeline strong, .protocol-timeline small { display: block; }.protocol-timeline strong { color: var(--ink); font-size: .78rem; }.protocol-timeline small { color: var(--muted); font-size: .65rem; }.protocol-timeline time { color: var(--muted); font-size: .66rem; }

.protocol-content { background: var(--soft); }.protocol-content-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 17px; }.protocol-content-card { position: relative; min-height: 250px; padding: 27px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }.protocol-content-card > span { position: absolute; top: 22px; right: 22px; color: #9db0bc; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }.protocol-content-card > svg { width: 48px; height: 48px; margin-bottom: 32px; padding: 11px; color: var(--blue-700); background: #e3f4f8; border-radius: 14px; }.protocol-content-card h3 { font-size: 1.06rem; }.protocol-content-card p { margin: 0; font-size: .81rem; }

.monitor-history { padding: 115px 0; background: #fff; }.monitor-history-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 90px; }.history-visual { padding: 25px; background: #f8fbfd; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }.history-visual-head { display: flex; align-items: center; gap: 11px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }.history-visual-head > svg { width: 42px; height: 42px; padding: 9px; color: var(--blue-700); background: #e0f2f7; border-radius: 12px; }.history-visual-head strong, .history-visual-head small { display: block; }.history-visual-head strong { color: var(--ink); font-size: .84rem; }.history-visual-head small { color: var(--muted); font-size: .65rem; }.history-line { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid #e3edf1; }.history-line > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--blue-700); background: #e3f4f8; border-radius: 11px; }.history-line.final > span { color: #fff; background: #2aaa64; }.history-line svg { width: 17px; }.history-line p { margin: 0; }.history-line strong, .history-line small { display: block; }.history-line strong { color: var(--ink); font-size: .76rem; }.history-line small { color: var(--muted); font-size: .64rem; }.history-line time { color: var(--muted); font-size: .65rem; }.history-copy > p { font-size: 1.02rem; }.history-benefits { display: grid; gap: 12px; margin-top: 27px; }.history-benefits > div { display: flex; gap: 12px; padding: 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }.history-benefits svg { width: 22px; flex: 0 0 22px; color: var(--blue-700); }.history-benefits strong, .history-benefits span { display: block; }.history-benefits span { color: var(--muted); font-size: .76rem; }.history-benefits strong { margin-bottom: 2px; color: var(--ink); font-size: .82rem; }

.receipt-section { background: var(--soft); }.receipt-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }.receipt-copy > p { font-size: 1.02rem; }.receipt-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }.receipt-copy li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .81rem; font-weight: 600; }.receipt-copy li svg { width: 18px; color: var(--blue-500); }
.receipt-document { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }.receipt-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.receipt-brand { display: flex; align-items: center; gap: 10px; }.receipt-brand > svg { width: 43px; height: 43px; padding: 9px; color: #fff; background: var(--navy-900); border-radius: 12px; }.receipt-brand strong, .receipt-brand small { display: block; }.receipt-brand strong { color: var(--ink); }.receipt-brand small { color: var(--muted); font-size: .65rem; }.receipt-valid { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #168a52; background: #e1f7e9; border-radius: 99px; font-size: .65rem; font-weight: 800; }.receipt-valid svg { width: 15px; }.receipt-protocol { padding: 23px 0; text-align: center; }.receipt-protocol small, .receipt-protocol strong, .receipt-protocol span { display: block; }.receipt-protocol small { color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; }.receipt-protocol strong { margin: 5px 0; color: var(--blue-700); font-family: monospace; font-size: 1.3rem; }.receipt-protocol span { color: var(--muted); font-size: .68rem; }.receipt-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 12px 2px; border-top: 1px solid #e5edf1; font-size: .73rem; }.receipt-row span { color: var(--muted); }.receipt-row strong { color: var(--ink); }.receipt-seal { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding: 14px; color: #bfd3df; background: var(--navy-900); border-radius: 12px; }.receipt-seal svg { width: 27px; color: var(--cyan-400); }.receipt-seal strong, .receipt-seal span { display: block; }.receipt-seal span { font-size: .65rem; }.receipt-seal strong { color: #fff; font-size: .75rem; }

.monitor-benefits { padding: 58px 0; color: #d2e1eb; background: var(--navy-950); }.monitor-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.monitor-benefit-grid article { padding: 22px 30px; border-right: 1px solid rgba(255,255,255,.1); }.monitor-benefit-grid article:last-child { border-right: 0; }.monitor-benefit-grid svg { width: 28px; color: var(--cyan-400); }.monitor-benefit-grid h3 { margin: 12px 0 6px; color: #fff; font-size: .95rem; }.monitor-benefit-grid p { margin: 0; color: #93adbe; font-size: .76rem; }
.monitor-cta { padding: 78px 0; color: #c7d8e7; background: var(--navy-900); }.monitor-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }.monitor-cta h2 { max-width: 830px; margin-bottom: 14px; color: #fff; font-size: clamp(2.2rem, 3.8vw, 3.8rem); }.monitor-cta p { margin: 0; }.monitor-cta-button { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); white-space: nowrap; }.monitor-cta-button:hover { color: #fff; }

@media (max-width: 1080px) { .monitor-hero-grid, .monitor-overview-grid { grid-template-columns: 1fr; }.monitor-app { max-width: 900px; }.protocol-content-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .protocol-grid, .monitor-history-grid, .receipt-grid, .monitor-cta-inner { grid-template-columns: 1fr; gap: 48px; }.monitor-benefit-grid { grid-template-columns: 1fr 1fr; }.monitor-benefit-grid article:nth-child(2) { border-right: 0; }.monitor-cta-button { justify-self: start; } }
@media (max-width: 580px) { .monitor-hero { padding-top: calc(var(--header-height) + 45px); padding-bottom: 65px; }.monitor-hero h1 { font-size: 3.05rem; }.monitor-hero-actions { display: grid; }.monitor-hero-actions .button { width: 100%; }.monitor-trust, .monitor-overview-cards, .protocol-content-grid, .receipt-copy ul, .monitor-benefit-grid { display: grid; grid-template-columns: 1fr; }.monitor-app { padding: 14px; border-radius: 18px; }.monitor-table-head { display: none; }.monitor-table-row { grid-template-columns: 1fr auto; }.monitor-table-row > span:nth-child(2) { grid-column: 1; }.monitor-table-row > span:nth-child(3) { grid-column: 1; }.monitor-table-row > span:last-child { grid-column: 2; grid-row: 1; }.monitor-summary { align-items: flex-start; flex-direction: column; }.overview-card, .protocol-content-card { min-height: 0; }.protocol-card { padding: 19px 16px; }.protocol-card-head { grid-template-columns: 1fr; }.protocol-timeline > div { grid-template-columns: 36px 1fr; }.protocol-timeline time { grid-column: 2; }.monitor-history { padding: 75px 0; }.history-line { grid-template-columns: 37px 1fr; }.history-line time { grid-column: 2; }.receipt-document { padding: 22px 18px; }.receipt-top { align-items: flex-start; flex-direction: column; }.monitor-benefit-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }.monitor-benefit-grid article:last-child { border-bottom: 0; }.monitor-cta { padding: 65px 0; } }