:root {
    --ink: #102e3a;
    --ink-deep: #0f2d37;
    --ink-soft: #17434c;
    --muted: #526a75;
    --brand: #0b7a75;
    --brand-dark: #08625e;
    --brand-bright: #34c3a0;
    --brand-soft: #e6f4f2;
    --accent: #f0b44d;
    --paper: #fff;
    --wash: #f2f6f7;
    --line: #d7e2e5;
    --urgent: #a83f35;
    --urgent-bg: #faebe8;
    --soon: #98620a;
    --soon-bg: #fff3d6;
    --good: #1d6f52;
    --good-bg: #e4f3eb;
    --radius: 12px;
    --radius-lg: 22px;
    --shadow: 0 24px 64px rgba(20,47,61,.13);
    --shadow-deep: 0 30px 80px rgba(4,25,34,.28);
    --font: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font); background: var(--paper); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; }
.shell { width: min(1180px,calc(100% - 48px)); margin: auto; }
.skip-link { position: fixed; z-index: 50; top: 8px; left: 8px; padding: 9px 14px; color: var(--ink); background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; background: var(--ink-deep); }
.header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; flex: 0 1 250px; min-width: 0; text-decoration: none; }
.brand img { display: block; width: 250px; max-width: 100%; height: auto; aspect-ratio: 10 / 3; }
.site-header .brand img { width: 230px; aspect-ratio: 85 / 26; }
.site-header .brand { padding: 4px 0; }
nav { display: flex; gap: 30px; align-items: center; font-size: 14px; font-weight: 650; }
nav a { color: #dbe7e9; text-decoration: none; }
nav a:hover { color: #fff; }
.login-link { padding:8px 14px; border:1px solid rgba(121,200,184,.45); border-radius:7px; }
.public-menu-toggle { display:none; min-width:44px; min-height:44px; padding:8px 10px; border:1px solid rgba(121,200,184,.45); border-radius:7px; align-items:center; gap:9px; color:#fff; background:transparent; font-weight:750; cursor:pointer; }
.public-menu-toggle:hover { background:rgba(121,200,184,.12); }
.public-menu-icon { width:20px; display:grid; gap:4px; }
.public-menu-icon i { display:block; height:2px; border-radius:2px; background:currentColor; }
.coming { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(121,200,184,.3); border-radius: 999px; color: #b9d8d2; font-size: 12px; }
.coming i,.development-note i,.preview-caption i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand-bright); box-shadow: 0 0 0 4px rgba(45,165,143,.15); }

.hero { position: relative; color: #fff; background: linear-gradient(128deg,var(--ink-deep) 0%,#0d3542 58%,#075852 150%); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg,transparent,black); }
.hero-grid { position: relative; z-index: 1; min-height: 680px; padding-top: 92px; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0,1fr) minmax(460px,.9fr); gap: 74px; align-items: center; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .17em; color: var(--brand); font-size: 11px; font-weight: 800; }
.eyebrow-light { color: #79c8b8; }
.hero h1 { margin: 18px 0 26px; max-width: 670px; font-size: clamp(45px,5.3vw,72px); line-height: 1.06; letter-spacing: -.045em; }
.hero h1 em { color: #79c8b8; font-style: normal; }
.lead { max-width: 650px; color: #c9d8dc; font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.button { display: inline-flex; gap: 24px; align-items: center; justify-content: center; padding: 13px 18px; border: 1px solid transparent; border-radius: 8px; background: var(--brand); color: #fff; box-shadow: 0 10px 25px rgba(4,25,34,.2); text-decoration: none; font-weight: 750; }
.button:hover { background: var(--brand-dark); }
.button-light { color: var(--ink); background: #fff; }
.button-light:hover { color: #fff; background: var(--brand); }
.development-note { display: inline-flex; align-items: center; gap: 9px; color: #c4d4d8; font-size: 12px; font-weight: 700; }
.availability { max-width: 590px; margin-top: 17px; color: #8fabb3; font-size: 11px; }

.watch-console { position: relative; border: 1px solid rgba(158,219,207,.22); border-radius: var(--radius-lg); background: linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045)); box-shadow: var(--shadow-deep); backdrop-filter: blur(8px); }
.watch-console::before { content: ""; position: absolute; z-index: -1; inset: 45px -22px -24px 35px; border-radius: inherit; background: rgba(11,107,102,.28); filter: blur(2px); }
.console-head { min-height: 66px; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.11); }
.console-head>span { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 750; }
.console-head img { padding: 5px; border-radius: 9px; background: #fff; }
.console-head>b { padding: 4px 8px; border-radius: 999px; color: #bedbd6; background: rgba(121,200,184,.12); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.console-focus { display: grid; grid-template-columns: 76px 1fr auto; gap: 17px; align-items: center; padding: 27px 23px 23px; }
.date-tile { height: 82px; display: grid; place-content: center; text-align: center; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.2); line-height: 1.05; }
.date-tile span { color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.date-tile strong { font-size: 30px; }
.date-tile small { color: var(--muted); font-size: 8px; }
.console-kicker { margin: 0 0 4px; color: #80b8b0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.console-focus h2 { margin: 0; font-size: 20px; }
.console-focus div>p:last-child { margin: 2px 0 0; color: #afc2c7; font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 5px 9px; border-radius: 999px; color: var(--status); background: var(--status-bg); font-size: 9px; font-weight: 800; white-space: nowrap; }
.status i { width: 14px; height: 14px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: var(--status); font-size: 9px; font-style: normal; }
.urgent { --status: var(--urgent); --status-bg: var(--urgent-bg); }
.soon { --status: var(--soon); --status-bg: var(--soon-bg); }
.good { --status: var(--good); --status-bg: var(--good-bg); }
.console-timeline { height: 1px; margin: 0 41px; display: flex; justify-content: space-between; background: rgba(255,255,255,.17); }
.console-timeline span { width: 9px; height: 9px; margin-top: -4px; border: 2px solid #55737b; border-radius: 50%; background: var(--ink-soft); }
.console-timeline .done { border-color: var(--brand-bright); background: var(--brand-bright); }
.console-timeline .current { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(240,180,77,.14); }
.console-events { padding: 23px; display: grid; gap: 8px; }
.console-events>div { padding: 11px 12px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(4,25,34,.25); }
.event-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #79c8b8; background: rgba(121,200,184,.1); }
.event-icon svg,.category-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.console-events p { margin: 0; line-height: 1.3; }
.console-events small,.console-events strong { display: block; }
.console-events small { color: #8eabb2; font-size: 9px; }
.console-events strong { font-size: 11px; }
.check { color: #68c4a2; }
.soon-text { color: var(--accent); font-size: 9px; text-transform: uppercase; }

.category-band { padding: 84px 0 92px; background: var(--paper); }
.category-intro { margin-bottom: 34px; display: grid; grid-template-columns: 1fr .72fr; gap: 60px; align-items: end; }
.category-intro h2,.flow-copy h2,.preview-heading h2,.proposition h2,.closing h2 { margin: 8px 0 0; font-size: clamp(31px,4vw,48px); line-height: 1.12; letter-spacing: -.035em; }
.category-intro>p { max-width: 470px; margin: 0; color: var(--muted); }
.categories { display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 18px 50px rgba(20,47,61,.08); overflow: hidden; }
.category-card { min-width: 0; padding: 24px 17px 21px; border-right: 1px solid var(--line); }
.category-card:last-child { border: 0; }
.category-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.category-icon svg { width: 25px; height: 25px; }
.category-card h3 { margin: 0; font-size: 14px; }
.category-card p { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.scope-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.flow-section { padding: 100px 0; color: #fff; background: linear-gradient(115deg,var(--ink-deep),#103a46); }
.flow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 95px; align-items: center; }
.flow-copy>p:last-child { color: #adbec3; }
.monitoring-flow { position: relative; margin: 0; padding: 0; list-style: none; }
.monitoring-flow::before { content: ""; position: absolute; top: 25px; bottom: 25px; left: 25px; width: 1px; background: linear-gradient(var(--brand-bright),rgba(121,200,184,.15)); }
.monitoring-flow li { position: relative; padding: 20px 18px; display: grid; grid-template-columns: 52px 1fr 42px; gap: 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); }
.monitoring-flow li:last-child { border-bottom: 0; }
.flow-number { z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(121,200,184,.35); border-radius: 50%; color: #8ad0c2; background: var(--ink-soft); font-size: 10px; font-weight: 800; }
.monitoring-flow small,.monitoring-flow strong { display: block; }
.monitoring-flow small { color: #79c8b8; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.monitoring-flow strong { font-size: 17px; }
.monitoring-flow p { margin: 3px 0 0; color: #aabdc2; font-size: 12px; }
.flow-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #79c8b8; background: rgba(121,200,184,.1); font-weight: 800; }

.preview-wrap { padding: 105px 0 115px; background: linear-gradient(180deg,var(--wash),#e9f1f1); }
.preview-heading { margin-bottom: 40px; display: grid; grid-template-columns: 1fr .72fr; gap: 60px; align-items: end; }
.preview-heading>p { margin: 0; color: var(--muted); }
.preview-frame { padding: 14px; border: 1px solid #cbdcdf; border-radius: 20px; background: rgba(255,255,255,.62); box-shadow: var(--shadow); }
.preview-caption { min-height: 39px; padding: 0 7px 13px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; }
.preview-caption span { display: flex; align-items: center; gap: 9px; }
.dashboard { border: 1px solid rgba(20,47,61,.12); border-radius: 13px; background: #fff; overflow: hidden; }
.dash-top { height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--ink-deep); }
.mini-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; }
.mini-brand img { padding: 4px; border-radius: 7px; background: #fff; }
.mini-brand span,.mini-brand small { display: block; line-height: 1.15; }
.mini-brand small { color: #8eabb2; font-size: 8px; font-weight: 500; }
.demo-label { padding: 4px 9px; border: 1px solid rgba(121,200,184,.25); border-radius: 999px; color: #b6d8d2; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dash-body { display: grid; grid-template-columns: 188px 1fr; }
.dash-body aside { padding: 30px 20px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); color: var(--muted); background: #f7faf9; font-size: 11px; }
.dash-body aside b { margin-left: -20px; padding: 7px 12px 7px 17px; border-left: 3px solid var(--brand); color: var(--brand); background: var(--brand-soft); }
.dash-body aside small { margin-top: auto; padding-top: 20px; color: #82949b; border-top: 1px solid var(--line); }
.dash-main { min-width: 0; padding: 29px 32px 34px; }
.dash-title { display: flex; justify-content: space-between; align-items: start; }
.dash-title small { color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dash-title h3 { margin: 2px 0 0; font-size: 24px; }
.dash-title p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 3px solid var(--brand-soft); border-radius: 50%; color: #fff; background: var(--brand); font-size: 10px; }
.stats { margin: 24px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.stats>div { position: relative; min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(120deg,#fff,var(--status-bg)); }
.stats small,.stats strong,.stats>div>span:last-child { display: block; }
.stats small { color: var(--status); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.stats strong { margin-top: 3px; font-size: 26px; line-height: 1.1; }
.stats>div>span:last-child { color: var(--muted); font-size: 9px; }
.stat-symbol { position: absolute; top: 15px; right: 15px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--status); font-size: 11px; font-weight: 800; }
.items { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.items-head { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.items-head h4 { margin: 0; font-size: 13px; }
.items-head span { display: block; color: var(--muted); font-size: 8px; }
.items-head>b { color: var(--brand); font-size: 9px; }
.items article { padding: 12px 16px; display: grid; grid-template-columns: 36px 1fr 110px 125px; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); font-size: 11px; }
.items article:last-child { border: 0; }
.item-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-weight: 800; }
.item-name strong,.item-name small,.items time b,.items time small { display: block; }
.item-name small,.items time small { color: var(--muted); font-size: 9px; }
.items time b { font-size: 10px; }

.proposition { padding: 105px 0; background: #fff; }
.proposition-grid { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); gap: 88px; align-items: center; }
.registered-date-flow { position: relative; padding: 26px 24px; border: 1px solid #cfe5e1; border-radius: var(--radius-lg); background: linear-gradient(145deg,#f5fbfa,#e6f4f2); box-shadow: 0 20px 55px rgba(15,45,55,.12); }
.registered-date-flow::before { content: ""; position: absolute; top: 54px; bottom: 54px; left: 55px; width: 3px; background: linear-gradient(var(--brand-bright),var(--brand)); }
.registered-date-flow ol { margin: 0; padding: 0; list-style: none; }
.registered-date-flow li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; min-height: 82px; padding: 10px 14px 10px 0; }
.registered-date-flow li:nth-child(even) { margin-left: 34px; }
.sequence-icon { z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #c7e2dd; border-radius: 16px; color: #fff; background: #fff; box-shadow: 0 8px 20px rgba(15,45,55,.1); font-size: 26px; font-weight: 800; }
.sequence-icon img { display: block; width: 38px; height: 38px; }
.sequence-icon.sequence-mark img { width: 48px; height: 48px; }
.flow-action .sequence-icon { border-color: var(--brand); background: var(--brand); }
.registered-date-flow small,.registered-date-flow strong { display: block; }
.registered-date-flow small { color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.registered-date-flow strong { font-size: 16px; }
.registered-date-flow p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.proposition>div>div:last-child>p { color: var(--muted); }
.proposition ul { margin: 25px 0 0; padding: 0; list-style: none; }
.proposition li { padding: 9px 0; color: var(--ink); font-size: 14px; }
.proposition li span { width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 9px; border-radius: 50%; color: var(--good); background: var(--good-bg); font-weight: 800; }

.closing { padding: 100px 0; text-align: center; color: #fff; background: linear-gradient(120deg,var(--brand-dark),var(--brand),#08756d); }
.closing h2 { max-width: 760px; margin: 10px auto 0; }
.closing p:not(.eyebrow) { max-width: 590px; margin: 17px auto; color: #d0e4df; }
.button-outline { margin-top: 13px; border-color: rgba(255,255,255,.55); background: transparent; box-shadow: none; }
.button-outline:hover { color: var(--brand); background: #fff; }
footer { color: #b8c8cc; background: var(--ink-deep); }
.footer-inner { min-height: 135px; display: flex; align-items: center; justify-content: space-between; gap: 30px; font-size: 11px; }
footer .brand { width: 200px; }
.brand-footer img { width: 200px; height: auto; }
.footer-inner p { margin: 5px 0 0; }
.footer-meta { text-align: right; }
.footer-meta span { color: #79c8b8; }

@media(max-width:1000px) {
    .hero-grid { grid-template-columns: 1fr 430px; gap: 38px; }
    .hero h1 { font-size: 51px; }
    .console-focus { grid-template-columns: 68px 1fr; }
    .console-focus>.status { grid-column: 2; }
    .categories { grid-template-columns: repeat(3,1fr); }
    .category-card { border-bottom: 1px solid var(--line); }
    .category-card:nth-child(3n) { border-right: 0; }
    .category-card:nth-child(n+4) { border-bottom: 0; }
    .flow-grid { gap: 50px; }
}

@media(max-width:800px) {
    .shell { width: min(100% - 32px,700px); }
    .header-inner { min-height:72px; flex-wrap:wrap; gap:0 16px; }
    .site-header .brand { flex:0 1 210px; max-width:calc(100% - 70px); }
    .site-header .brand img { width:210px; }
    .public-menu-toggle { display:inline-flex; margin-left:auto; }
    .public-nav { display:none; width:100%; flex:1 0 100%; padding:8px 0 16px; flex-direction:column; align-items:stretch; gap:2px; }
    .public-nav.is-open { display:flex; }
    .public-nav a { display:block; padding:10px 12px; border-radius:7px; }
    .public-nav .login-link { margin-top:4px; text-align:center; }
    .hero-grid { min-height: 0; padding-top: 70px; padding-bottom: 82px; grid-template-columns: 1fr; gap: 55px; }
    .hero-copy { max-width: 650px; }
    .watch-console { width: min(100%,570px); margin: auto; }
    .category-intro,.preview-heading { grid-template-columns: 1fr; gap: 15px; }
    .flow-grid,.proposition-grid { grid-template-columns: 1fr; gap: 52px; }
    .flow-copy { max-width: 620px; }
    .dash-body { grid-template-columns: 1fr; }
    .dash-body aside { display: none; }
    .registered-date-flow { width: min(100%,520px); margin: auto; }
}

/* Authenticated application boundary */
input,button { font: inherit; }
button:focus-visible,input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px,.9fr) minmax(460px,1.1fr); background: var(--wash); }
.auth-brand { position: relative; padding: clamp(38px,6vw,88px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg,var(--ink-deep),#0d4650); overflow: hidden; }
.auth-brand::after { content:""; position:absolute; width:460px; height:460px; right:-230px; bottom:-180px; border:70px solid rgba(52,195,160,.1); border-radius:50%; }
.auth-brand>a,.auth-brand>div { position:relative; z-index:1; }
.auth-brand img { width: min(400px,100%); height:auto; }
.auth-brand h1 { max-width:570px; margin:16px 0; font-size:clamp(38px,5vw,66px); line-height:1.08; letter-spacing:-.04em; }
.auth-brand div>p:last-child { max-width:500px; color:#bdd0d4; }
.auth-panel { padding:40px; display:grid; place-items:center; }
.auth-card { width:min(100%,480px); padding:clamp(30px,5vw,54px); border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow); }
.auth-card h2 { margin:7px 0 4px; font-size:38px; letter-spacing:-.035em; }
.auth-intro,.auth-help { color:var(--muted); }
.auth-card form { margin-top:30px; }
.public-result { min-height:clamp(460px,62vh,680px); padding:clamp(54px,8vw,104px) 0; display:grid; place-items:center; }
.public-result-card { text-align:center; }
.public-result-card h1 { margin:10px 0 8px; font-size:clamp(31px,4vw,42px); line-height:1.15; letter-spacing:-.035em; }
.public-result-card>p:not(.eyebrow) { color:var(--muted); }
.public-result-action { margin-top:18px; color:#fff; }
.field { margin-bottom:20px; }
.field label { display:block; margin-bottom:7px; font-size:13px; font-weight:750; }
.field input { width:100%; padding:13px 14px; border:1px solid #b9c9ce; border-radius:8px; color:var(--ink); background:#fff; }
.field input:focus { border-color:var(--brand); }
.auth-submit { width:100%; border:0; cursor:pointer; }
.form-error { margin:20px 0 0; padding:12px 14px; border-left:4px solid var(--urgent); border-radius:6px; color:var(--urgent); background:var(--urgent-bg); font-size:13px; }
.auth-help { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:12px; }
.app-shell { min-height:100vh; background:var(--wash); }
.app-header { min-height:82px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:34px; background:var(--ink-deep); }
.app-header img { display:block; width:210px; height:auto; }
.app-header button { padding:9px 14px; border:1px solid rgba(255,255,255,.35); border-radius:7px; color:#fff; background:transparent; cursor:pointer; }
.app-header button:hover { background:rgba(255,255,255,.1); }
.app-content { width:min(1180px,calc(100% - 48px)); margin:auto; padding:64px 0; }
.welcome-card { padding:34px 38px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-radius:var(--radius-lg); color:#fff; background:linear-gradient(120deg,var(--ink-deep),#0b625f); box-shadow:var(--shadow); }
.welcome-card h1 { margin:7px 0 3px; font-size:clamp(30px,4vw,48px); line-height:1.15; }
.welcome-card p { margin:0; color:#c6d8db; }
.role-badge { padding:8px 13px; border:1px solid rgba(255,255,255,.28); border-radius:999px; white-space:nowrap; font-size:12px; font-weight:750; }
.empty-dashboard { margin-top:28px; padding:50px; display:grid; grid-template-columns:96px 1fr; gap:32px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
.empty-dashboard img { padding:12px; border-radius:20px; background:var(--brand-soft); }
.empty-dashboard h2 { margin:7px 0; font-size:30px; }
.empty-dashboard p:last-child { max-width:700px; margin:0; color:var(--muted); }
.app-logo { flex:0 0 auto; }
.app-nav { margin-right:auto; }
.app-nav a { padding:9px 4px; color:#dbe7e9; }
.app-identity { display:flex; align-items:center; gap:18px; color:#b9ced2; font-size:12px; }
.app-identity form { margin:0; }
.app-identity-copy strong,.app-identity-copy small { display:block; line-height:1.3; }
.app-identity-copy strong { color:#fff; }
.app-identity-copy small { color:#9eb7bc; }
.page-heading { margin-bottom:28px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.page-heading h1 { margin:6px 0 2px; font-size:clamp(34px,5vw,52px); line-height:1.1; letter-spacing:-.04em; }
.page-heading p:last-child { margin:0; color:var(--muted); }
.metric-grid { margin-bottom:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.metric-card { padding:23px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(130deg,#fff,var(--status-bg)); }
.metric-card span,.metric-card strong,.metric-card small { display:block; }
.metric-card span { color:var(--status); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.metric-card strong { margin:4px 0; font-size:36px; line-height:1; }
.metric-card small,.muted { color:var(--muted); }
.panel { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 12px 35px rgba(20,47,61,.06); }
.panel h2 { margin-top:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.panel-heading h2 { margin:3px 0 0; }
.panel-heading>a,.back-link { color:var(--brand); font-weight:750; }
.item-list { margin:-1px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.item-row { padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr) 120px 105px; align-items:center; gap:18px; border-bottom:1px solid var(--line); text-decoration:none; }
.item-row:last-child { border:0; }
.item-row:hover { background:var(--brand-soft); }
.item-row div strong,.item-row div span { display:block; }
.item-row div span { color:var(--muted); font-size:12px; }
.item-row time { font-weight:700; }
.item-row.is-archived { color:var(--muted); background:#f7f9f9; }
.status.archived { --status:#526a75; --status-bg:#e8edef; }
.tabs { margin-bottom:18px; gap:8px; }
.tabs a { padding:8px 13px; border-radius:8px; color:var(--muted); text-decoration:none; }
.tabs a.active { color:var(--brand); background:var(--brand-soft); }
.compact-empty { padding:25px; text-align:center; }
.bounded-note { margin:18px 0 0; color:var(--muted); font-size:12px; }
.narrow-page { width:min(780px,100%); margin:auto; }
.narrow-page>.back-link,.app-content>.back-link { display:inline-block; margin-bottom:24px; }
.app-form fieldset { margin:0 0 30px; padding:0; border:0; }
.app-form legend { width:100%; margin-bottom:18px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:19px; font-weight:800; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; }
.field-grid .field:nth-child(2) { grid-column:2; }
.app-form .field input,.app-form .field select { width:100%; min-height:46px; padding:11px 12px; border:1px solid #b9c9ce; border-radius:8px; color:var(--ink); background:#fff; }
.app-form .field small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.field label span { color:var(--muted); font-weight:400; }
.form-actions,.action-bar { display:flex; align-items:center; gap:18px; }
.form-actions button { border:0; cursor:pointer; }
.button-secondary { color:var(--brand); border-color:#b9d9d4; background:#fff; box-shadow:none; }
.button-danger { border-color:#e2b9b4; color:var(--urgent); background:#fff; box-shadow:none; cursor:pointer; }
.button-danger:hover { color:#fff; background:var(--urgent); }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.75fr); gap:22px; }
.details { margin:0; }
.details div { padding:13px 0; display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--line); }
.details div:last-child { border:0; }
.details dt { color:var(--muted); }
.details dd { margin:0; font-weight:700; overflow-wrap:anywhere; }
.action-bar { margin-top:22px; }
.action-bar form { margin:0; }
.sensitive-action-list { margin-top:22px; display:grid; gap:18px; }
.sensitive-action { padding:22px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr); gap:28px; align-items:start; border:1px solid var(--line); border-radius:var(--radius); background:var(--wash); }
.sensitive-action h2 { margin:0 0 5px; font-size:19px; }
.sensitive-action>div>p { margin:0; color:var(--muted); font-size:13px; }
.sensitive-action form,.sensitive-action .field { margin:0; }
.sensitive-action form button { margin-top:16px; }
.notice,.flash-success { margin-bottom:22px; padding:14px 17px; border-left:4px solid var(--brand); border-radius:7px; background:var(--brand-soft); }
.notice p { margin:3px 0 0; color:var(--muted); }
.flash-success { border-color:var(--good); color:var(--good); background:var(--good-bg); }
.check-field { display:flex; align-items:center; gap:10px; }
.app-form .check-field input { width:20px; min-height:20px; }
.check-field label { margin:0; }
@media(max-width:760px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-brand { min-height:300px; gap:70px; }
  .auth-brand img { width:min(280px,100%); }
  .auth-brand h1 { font-size:38px; }
  .auth-panel { padding:24px 16px 40px; }
  .app-content { width:min(100% - 28px,700px); padding:35px 0; }
  .app-header { min-height:70px; padding:0 15px; }
  .app-header img { width:170px; }
  .app-header { flex-wrap:wrap; gap:8px 18px; padding-top:12px; padding-bottom:12px; }
  .app-nav { order:3; width:100%; justify-content:flex-start; gap:20px; }
  .app-nav a { display:block; }
  .app-identity { margin-left:auto; }
  .app-identity-copy small { display:none; }
  .welcome-card { padding:28px 24px; align-items:flex-start; flex-direction:column; }
  .empty-dashboard { padding:30px 24px; grid-template-columns:1fr; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .metric-grid,.detail-grid,.field-grid,.sensitive-action { grid-template-columns:1fr; }
  .field-grid .field:nth-child(2) { grid-column:auto; }
  .panel { padding:21px 17px; }
  .item-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  .item-row .status { grid-column:1/3; }
  .details div { grid-template-columns:1fr; gap:2px; }
  .action-bar { align-items:stretch; flex-direction:column; }
  .action-bar .button,.action-bar form button { width:100%; }
}

@media(max-width:580px) {
    .shell { width: min(100% - 24px,520px); }
    .site-header .brand img { width: 170px; height: auto; }
    .coming { padding: 7px 9px; font-size: 10px; }
    .hero-grid { padding-top: 55px; }
    .hero h1 { font-size: clamp(37px,11vw,49px); }
    .lead { font-size: 16px; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .watch-console::before { inset: 30px -8px -12px 18px; }
    .console-focus { padding: 20px 15px; grid-template-columns: 62px minmax(0,1fr); gap: 12px; }
    .date-tile { height: 74px; }
    .console-focus h2 { font-size: 17px; }
    .console-events { padding: 19px 14px; }
    .category-band,.flow-section,.preview-wrap,.proposition,.closing { padding-top: 75px; padding-bottom: 75px; }
    .categories { grid-template-columns: repeat(2,1fr); }
    .category-card:nth-child(3n) { border-right: 1px solid var(--line); }
    .category-card:nth-child(2n) { border-right: 0; }
    .category-card:nth-child(n+4) { border-bottom: 1px solid var(--line); }
    .category-card:nth-child(n+5) { border-bottom: 0; }
    .monitoring-flow li { padding: 18px 0; grid-template-columns: 46px 1fr; gap: 14px; }
    .monitoring-flow::before { left: 22px; }
    .flow-number { width: 46px; height: 46px; }
    .flow-symbol { display: none; }
    .preview-frame { margin: 0 -4px; padding: 7px; }
    .preview-caption { padding: 5px 5px 11px; align-items: flex-start; flex-direction: column; gap: 4px; }
    .dash-top { padding: 0 13px; }
    .dash-main { padding: 22px 11px 25px; }
    .dash-title h3 { font-size: 20px; }
    .stats { grid-template-columns: 1fr; }
    .stats>div { padding: 12px 14px; }
    .items article { padding: 12px 10px; grid-template-columns: 32px minmax(0,1fr) auto; }
    .items time { display: none; }
    .items .status { grid-column: 2/4; }
    .items-head>b { display: none; }
    .registered-date-flow { padding: 20px 14px; }
    .registered-date-flow::before { left: 45px; }
    .registered-date-flow li { grid-template-columns: 58px 1fr; gap: 12px; }
    .registered-date-flow li:nth-child(even) { margin-left: 0; }
    .sequence-icon { width: 58px; height: 58px; }
    .footer-inner { padding: 30px 0; align-items: flex-start; flex-direction: column; gap: 15px; }
    .footer-meta { text-align: left; }
}

@media(max-width:370px) {
    .site-header .brand img { width: 132px; }
    .coming i { display: none; }
    .console-events>div { grid-template-columns: 30px 1fr; }
    .console-events>div>b { grid-column: 2; }
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
.field-wide{grid-column:1/-1}.field textarea{width:100%;resize:vertical}.reminder-chips{display:flex;flex-wrap:wrap;gap:.65rem}.reminder-chip{position:relative}.reminder-chip input{position:absolute;opacity:0;pointer-events:none}.reminder-chip span{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.65rem .85rem;border:2px solid #b7c7c4;border-radius:999px;background:#fff;color:#243c38;font-weight:700;cursor:pointer}.reminder-chip input:focus-visible+span{outline:3px solid #f3a712;outline-offset:2px}.reminder-chip input:checked+span{border-color:#087f6c;background:#d9f4ed;color:#075e51;box-shadow:0 0 0 2px rgba(8,127,108,.12)}.reminder-chip .checkmark{display:none;min-height:0;padding:0;border:0;background:transparent}.reminder-chip input:checked+span .checkmark{display:inline}.weekdays .reminder-chip span{justify-content:center;min-width:48px}@media(max-width:520px){.reminder-chip{flex:1 1 calc(50% - .65rem)}.reminder-chip>span{width:100%;justify-content:center}.weekdays .reminder-chip{flex:1 1 44px}}