:root {
  --navy-950: #061625;
  --navy-900: #081d31;
  --navy-800: #0d2942;
  --ink: #17293d;
  --muted: #718296;
  --line: #e4ebf1;
  --soft: #f4f7fa;
  --white: #ffffff;
  --cyan: #20cbb4;
  --cyan-dark: #0ea88f;
  --blue: #4585f5;
  --purple: #8269e8;
  --amber: #f4a83d;
  --red: #ef6a6a;
  --shadow: 0 16px 45px rgba(16, 42, 68, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif; color: var(--ink); background: var(--soft); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; display: flex; flex-direction: column; padding: 24px 18px 18px; color: #fff; background: linear-gradient(180deg, var(--navy-950), #092139 70%, #0a2842); box-shadow: 10px 0 30px rgba(5, 22, 38, .12); }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 25px; color: #fff; text-decoration: none; }
.brand-mark { position: relative; width: 34px; height: 34px; display: inline-block; flex: none; transform: rotate(-5deg); }
.brand-mark span { position: absolute; left: 3px; width: 26px; height: 7px; border-radius: 5px 1px 5px 1px; background: linear-gradient(90deg, #34dcc4, #78efe1); transform: skewY(-24deg); }
.brand-mark span:nth-child(1) { top: 4px; width: 19px; }
.brand-mark span:nth-child(2) { top: 13px; width: 25px; }
.brand-mark span:nth-child(3) { top: 22px; width: 31px; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 23px; letter-spacing: 4px; line-height: 1; }
.brand-copy small { margin-top: 5px; color: #7593aa; font-size: 7px; letter-spacing: 1.6px; }
.primary-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-eyebrow { margin: 20px 12px 7px; color: #64839a; font-size: 10px; letter-spacing: 1.8px; }
.nav-item { position: relative; width: 100%; border: 0; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: #9eb2c1; background: transparent; text-align: left; transition: .2s ease; }
.nav-item:hover, .nav-item.is-active { color: #fff; background: linear-gradient(90deg, rgba(32,203,180,.18), rgba(32,203,180,.04)); }
.nav-item.is-active::before { content: ""; position: absolute; left: -18px; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.nav-icon { width: 20px; text-align: center; color: #7d9cb3; font-size: 18px; }
.nav-item.is-active .nav-icon { color: var(--cyan); }
.nav-badge { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(32,203,180,.28); border-radius: 4px; color: #4ce1cd; background: rgba(32,203,180,.08); font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.nav-count { margin-left: auto; width: 19px; height: 19px; border-radius: 20px; color: #fff; background: var(--red); font-size: 10px; display: grid; place-items: center; }
.sidebar-card { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(117, 167, 194, .14); border-radius: 8px; background: rgba(255,255,255,.035); }
.status-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(32,203,180,.09), 0 0 12px var(--cyan); }
.sidebar-card div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-card strong { font-size: 10px; }
.sidebar-card small { color: #7995a8; font-size: 8px; }
.sidebar-card-value { margin-left: auto; color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.sidebar-user { margin-top: 12px; padding: 12px 5px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(140deg, #30c8b3, #347ad7); font-size: 12px; font-weight: 700; }
.sidebar-user div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-user strong { overflow: hidden; color: #dce8f0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: #6d899d; font-size: 8px; }
.sidebar-user button { margin-left: auto; border: 0; color: #6d899d; background: transparent; }
.main { width: calc(100% - 248px); margin-left: 248px; min-width: 0; }
.topbar { height: 62px; padding: 0 34px; border-bottom: 1px solid #e5ebef; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 10px; }
.breadcrumb span { color: #95a3af; letter-spacing: 1px; }
.breadcrumb b { color: #c9d1d8; font-weight: 400; }
.breadcrumb strong { font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.language, .icon-button { height: 32px; border: 1px solid transparent; border-radius: 7px; color: #687a8a; background: transparent; }
.language { padding: 0 8px; display: flex; gap: 6px; align-items: center; font-size: 10px; }
.language span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-800); background: #e9f2f5; font-size: 9px; }
.language i { color: #a1adb8; font-style: normal; }
.icon-button { position: relative; width: 32px; font-size: 18px; }
.language:hover, .icon-button:hover { border-color: var(--line); background: var(--soft); }
.notification-button span { position: absolute; right: 5px; top: 4px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #ef6a6a; }
.avatar.compact { width: 30px; height: 30px; border: 0; margin-left: 5px; }
.mobile-menu { display: none; border: 0; color: var(--ink); background: transparent; font-size: 20px; }
.view { display: none; min-height: calc(100vh - 62px); padding: 28px 32px 45px; }
.view.is-active { display: block; animation: viewIn .32s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.hero { position: relative; overflow: hidden; min-height: 226px; padding: 35px 42px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(112deg, #081e33 0%, #0c344d 56%, #0d4958 100%); box-shadow: 0 17px 35px rgba(8,29,49,.18); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(83, 225, 206, .08); }
.hero::before { width: 380px; height: 380px; right: -80px; top: -170px; box-shadow: 0 0 0 70px rgba(83,225,206,.018), 0 0 0 140px rgba(83,225,206,.018); }
.hero::after { inset: 0; border: 0; border-radius: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000); }
.hero > div { position: relative; z-index: 1; }
.eyebrow, .page-kicker { display: flex; align-items: center; gap: 8px; color: #60d9c8; font-size: 8px; font-weight: 800; letter-spacing: 2.2px; }
.eyebrow span { width: 18px; height: 1px; background: var(--cyan); }
.hero h1 { margin: 14px 0 9px; font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: 1px; }
.hero h1 em { color: #66e0cd; font-style: normal; font-weight: 650; }
.hero p { max-width: 590px; margin: 0; color: #a4bac8; font-size: 11px; line-height: 1.8; }
.hero-actions { margin-top: 22px; display: flex; gap: 9px; }
.button { border: 0; border-radius: 6px; padding: 10px 15px; font-size: 10px; font-weight: 600; transition: .2s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.button.primary { color: #03231f; background: linear-gradient(135deg, #2ed5bd, #5de2d2); box-shadow: 0 8px 20px rgba(32,203,180,.2); }
.button.primary span { margin-left: 7px; }
.button.secondary { border: 1px solid rgba(255,255,255,.16); color: #d5e4eb; background: rgba(255,255,255,.05); }
.button.secondary.full { color: var(--ink); border-color: var(--line); background: #fff; }
.button.full { width: 100%; }
.hero-score { width: 190px; height: 190px; margin-right: 35px; display: grid; place-items: center; flex: none; }
.hero-score svg { width: 170px; height: 170px; transform: rotate(-90deg); }
.ring-bg, .ring-value { fill: none; stroke-width: 7; }
.ring-bg { stroke: rgba(255,255,255,.08); }
.ring-value { stroke: url(#scoreGradient); stroke-linecap: round; stroke-dasharray: 412 478; filter: drop-shadow(0 0 5px rgba(63,219,196,.5)); }
.hero-score-copy { position: absolute; text-align: center; display: flex; flex-direction: column; }
.hero-score-copy small { color: #91abba; font-size: 8px; }
.hero-score-copy strong { margin: 2px 0; font-size: 41px; font-weight: 500; letter-spacing: -2px; }
.hero-score-copy span { color: #79e0d0; font-size: 8px; }
.hero-score-copy i { font-style: normal; }
.score-level { position: absolute; bottom: -1px; padding: 6px 10px; border: 1px solid rgba(94,224,207,.15); border-radius: 20px; color: #b4c7d1; background: rgba(4,23,37,.7); font-size: 8px; }
.score-level span { margin-right: 5px; color: #6ce6d4; font-weight: 800; letter-spacing: 1px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin: 18px 0; }
.metric-card { min-height: 98px; padding: 17px; border: 1px solid #e8edf1; border-radius: 9px; display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: 0 5px 18px rgba(16,42,68,.035); }
.metric-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 16px; }
.metric-icon.cyan { color: #0eac96; background: #e8faf7; }
.metric-icon.blue { color: #437eda; background: #edf4ff; }
.metric-icon.amber { color: #db9031; background: #fff6e9; }
.metric-icon.purple { color: #7860da; background: #f2efff; }
.metric-main { min-width: 0; display: flex; flex-direction: column; }
.metric-main small { color: #7b8c99; font-size: 8px; }
.metric-main strong { margin: 3px 0 1px; font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.metric-main strong em { font-size: 11px; font-style: normal; }
.metric-main span { color: #9aa6b0; font-size: 7px; white-space: nowrap; }
.metric-main .trend-up { color: #1ab69e; }
.mini-bars { height: 38px; margin-left: auto; display: flex; gap: 3px; align-items: end; }
.mini-bars i { width: 3px; border-radius: 2px; background: #64d9c8; }
.metric-pill { margin-left: auto; width: 45px; height: 45px; border: 4px solid #edf2f7; border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--blue); font-size: 8px; font-weight: 700; transform: rotate(10deg); }
.metric-pill small { color: #9aa7b1; font-size: 5px; transform: rotate(-10deg); }
.live-wave { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.live-wave i { width: 2px; height: 8px; background: #f3b961; animation: wave 1s ease infinite alternate; }
.live-wave i:nth-child(2) { height: 21px; animation-delay: -.3s; }.live-wave i:nth-child(3) { height: 13px; animation-delay: -.6s; }.live-wave i:nth-child(4) { height: 28px; animation-delay: -.4s; }.live-wave i:nth-child(5) { height: 17px; animation-delay: -.7s; }
@keyframes wave { to { transform: scaleY(.45); opacity: .45; } }
.ai-orb { margin-left: auto; width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; color: #7962dc; background: radial-gradient(circle at 35% 30%, #fff, #e8e3ff); box-shadow: 0 0 0 5px #f5f2ff, inset -4px -4px 8px rgba(101,79,195,.1); font-size: 8px; font-weight: 800; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(310px,.78fr); gap: 18px; margin-bottom: 18px; }
.dashboard-grid.lower { grid-template-columns: minmax(0,1.35fr) minmax(340px,.75fr); }
.panel { border: 1px solid #e5ebf0; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.panel-head { padding: 17px 19px; border-bottom: 1px solid #edf1f4; display: flex; align-items: center; justify-content: space-between; }
.panel-head > div { display: flex; flex-direction: column; gap: 2px; }
.panel-kicker { color: #91a0ac; font-size: 7px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.panel-kicker.accent { color: #1bbba4; }
.panel-head h2, .panel h2 { margin: 0; font-size: 14px; font-weight: 650; }
.text-button { border: 0; color: #8292a0; background: transparent; font-size: 8px; }
.text-button:hover { color: var(--cyan-dark); }
.dimension-content { padding: 16px 20px 20px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 15px; }
.radar-wrap { position: relative; min-width: 0; }
.radar { width: 100%; max-height: 250px; overflow: visible; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: #dfe8ed; stroke-width: 1; }
.radar-fill { fill: rgba(32,203,180,.17); stroke: #21bea9; stroke-width: 2; }
.radar-points circle { fill: #fff; stroke: #16ae99; stroke-width: 2; }
.radar-labels { fill: #697c8a; font-size: 8px; font-weight: 600; }
.radar-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; text-align: center; pointer-events: none; }
.radar-center span { color: #8b9aa6; font-size: 7px; }
.radar-center strong { color: #0e927f; font-size: 13px; }
.dimension-list { display: flex; flex-direction: column; gap: 13px; }
.dimension-row { display: grid; grid-template-columns: 27px 1fr 33px; gap: 9px; align-items: center; }
.dimension-code { width: 27px; height: 27px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 800; }
.dimension-code.hqid { background: #25bba7; }.dimension-code.tf { background: #4a87eb; }.dimension-code.nqi { background: #8a71e4; }.dimension-code.sdg { background: #efab48; }
.dimension-row div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dimension-row b { font-size: 9px; }
.dimension-row small { overflow: hidden; color: #9aa6af; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.dimension-row i, .score-breakdown i, .table-progress i { height: 3px; overflow: hidden; border-radius: 5px; background: #edf2f5; }
.dimension-row i span, .score-breakdown i span, .table-progress i span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #2dc8b2, #62ddce); }
.dimension-row strong { font-size: 10px; }
.status-tag { padding: 4px 7px; border: 1px solid #d7f2ed; border-radius: 20px; color: #10aa92; background: #effbf9; font-size: 7px; }
.status-tag.neutral { color: #6d7f8e; border-color: #e5eaf0; background: #f8fafb; }
.insight-featured { margin: 15px; padding: 14px; border: 1px solid #dff4f0; border-radius: 7px; display: flex; gap: 10px; background: linear-gradient(135deg, #effbf9, #f8fdfd); }
.insight-mark { width: 25px; height: 25px; border-radius: 6px; display: grid; place-items: center; flex: none; color: #0caa92; background: #d7f5f0; }
.insight-featured small { color: #2bb8a4; font-size: 7px; font-weight: 700; }
.insight-featured h3 { margin: 5px 0 0; color: #405464; font-size: 10px; line-height: 1.55; font-weight: 500; }
.insight-featured h3 em { color: #0c9d88; font-style: normal; font-weight: 800; }
.insight-list { padding: 0 15px; display: flex; flex-direction: column; }
.insight-list button { padding: 11px 0; border: 0; border-bottom: 1px solid #eef2f5; display: flex; gap: 9px; align-items: center; background: transparent; text-align: left; }
.insight-list button:last-child { border-bottom: 0; }
.insight-list button:hover b { color: var(--cyan-dark); }
.insight-icon { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; }
.insight-icon.risk { color: #d97777; background: #fff0f0; }.insight-icon.opportunity { color: #457ed9; background: #eef5ff; }.insight-icon.green { color: #18a98e; background: #edf9f6; }
.insight-list div { display: flex; flex-direction: column; gap: 2px; }
.insight-list b { color: #526575; font-size: 8px; transition: .2s; }
.insight-list small { color: #9ba7b0; font-size: 7px; }
.insight-list i { margin-left: auto; color: #a4b0b9; font-style: normal; font-size: 9px; }
.ai-button { width: calc(100% - 30px); margin: 12px 15px 15px; color: #fff; background: linear-gradient(100deg, #102b42, #154354); }
.ai-button span { float: right; color: #4bdac6; }
.trend-panel .panel-head select { border: 1px solid var(--line); border-radius: 5px; padding: 5px 18px 5px 7px; color: #748592; background: #fff; font-size: 7px; }
.line-chart { position: relative; height: 220px; margin: 15px 20px 17px 38px; }
.line-chart svg { width: 100%; height: 175px; overflow: visible; }
.chart-grid line { stroke: #e9eef1; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-area { fill: url(#areaGradient); }
.chart-line { fill: none; stroke: #25bda8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-points circle { fill: #fff; stroke: #25bda8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-y { position: absolute; left: -31px; top: 0; height: 176px; display: flex; flex-direction: column; justify-content: space-between; color: #9da8b1; font-size: 7px; }
.chart-x { display: flex; justify-content: space-between; color: #9da8b1; font-size: 7px; }
.chart-tooltip { position: absolute; right: 1%; top: 12px; padding: 7px 9px; border: 1px solid #dcece9; border-radius: 5px; display: flex; flex-direction: column; background: rgba(255,255,255,.93); box-shadow: 0 5px 15px rgba(25,57,79,.08); }
.chart-tooltip small, .chart-tooltip span { color: #92a1ac; font-size: 6px; }
.chart-tooltip strong { color: #159b88; font-size: 14px; }
.certification-brief { overflow: hidden; }
.cert-progress { padding: 16px 20px; display: flex; align-items: center; gap: 15px; }
.progress-ring { width: 70px; height: 70px; border: 6px solid #eaf0f3; border-top-color: #2ac5af; border-right-color: #2ac5af; border-bottom-color: #2ac5af; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(12deg); }
.progress-ring strong, .progress-ring small { transform: rotate(-12deg); }
.progress-ring strong { font-size: 16px; }.progress-ring small { color: #91a0aa; font-size: 6px; }
.cert-progress h3 { margin: 0 0 3px; font-size: 10px; }.cert-progress p { margin: 0 0 7px; color: #95a1ab; font-size: 7px; }
.cert-level { padding: 3px 6px; border-radius: 4px; color: #6d7f8d; background: #f4f7f9; font-size: 7px; }.cert-level b { color: #1aaf99; letter-spacing: 1px; }
.steps { margin: 2px 20px 15px; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: 59%; width: 82%; height: 1px; background: #e2e8ec; }
.steps li.done:not(:last-child)::after { background: #5bd4c3; }
.steps li > span { z-index: 1; width: 20px; height: 20px; border: 1px solid #e0e7eb; border-radius: 50%; display: grid; place-items: center; color: #9aa7b0; background: #fff; font-size: 7px; }
.steps li.done > span { color: #fff; border-color: #42c9b5; background: #42c9b5; }.steps li.active > span { color: #16aa94; border-color: #40cbb6; box-shadow: 0 0 0 4px #e9f9f6; }
.steps div { margin-top: 7px; display: flex; flex-direction: column; }.steps b { font-size: 7px; }.steps small { color: #a0abb4; font-size: 6px; margin-top: 2px; }
.page-heading { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.page-heading h1 { margin: 5px 0 4px; font-size: 25px; font-weight: 600; letter-spacing: -.5px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.page-heading .button.secondary { color: var(--ink); border-color: var(--line); background: #fff; }
.assessment-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.65fr); gap: 18px; }
.assessment-form { overflow: hidden; }
.form-grid { padding: 20px; border-bottom: 1px solid #edf1f4; display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.form-grid label, .modal label { display: flex; flex-direction: column; gap: 6px; color: #6e7f8d; font-size: 8px; }
.form-grid input, .form-grid select, .modal input, .modal select { width: 100%; border: 1px solid #dde6eb; border-radius: 6px; padding: 9px 10px; color: #334b5c; outline: none; background: #fafcfd; font-size: 9px; }
.form-grid input:focus, .form-grid select:focus, .modal input:focus, .modal select:focus { border-color: #4bcbb8; box-shadow: 0 0 0 3px rgba(32,203,180,.08); }
.score-inputs { padding: 10px 20px 20px; }
.score-input { padding: 16px 0; border-bottom: 1px solid #edf1f4; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.score-input:last-child { border-bottom: 0; }
.score-input > div { display: flex; align-items: center; gap: 10px; }
.score-input > div div { display: flex; flex-direction: column; gap: 3px; }
.score-input b { font-size: 10px; }.score-input small { color: #9aa7b1; font-size: 7px; }
.score-input label { min-width: 190px; display: flex; align-items: center; gap: 12px; }
.score-input input[type="range"] { width: 100%; accent-color: #25bfa9; }
.score-input output { width: 30px; color: #178f80; font-size: 12px; font-weight: 700; }
.assessment-result { padding: 23px; text-align: center; background: linear-gradient(160deg, #fff, #f8fdfc); }
.assessment-result h2 { margin-top: 5px; }
.big-score { margin: 20px auto; width: 180px; height: 180px; border: 1px solid #e1f3f0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #fff 52%, #edf9f7 53%, #fff 65%); box-shadow: inset 0 0 0 8px #f3fbfa, 0 10px 30px rgba(28,165,145,.08); }
.big-score small { color: #92a2ad; font-size: 7px; letter-spacing: 1.4px; }.big-score strong { color: #139b87; font-size: 46px; font-weight: 500; letter-spacing: -3px; }.big-score span { color: #51707a; font-size: 8px; }
.score-breakdown { margin: 12px 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.score-breakdown span { display: flex; justify-content: space-between; color: #7b8d99; font-size: 8px; }.score-breakdown b { color: #324d5d; }
.result-note { margin: 20px 0; padding: 11px; border-radius: 6px; display: flex; gap: 8px; color: #667c89; background: #edf9f7; text-align: left; }
.result-note span { color: #16a88f; }.result-note p { margin: 0; font-size: 8px; line-height: 1.6; }.result-note strong { color: #159d88; }
.cert-stats { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cert-stats article { padding: 18px; border: 1px solid #e5ebf0; border-radius: 9px; display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: var(--shadow); }
.cert-stats div { display: flex; flex-direction: column; }.cert-stats small { color: #7d8e9b; font-size: 8px; }.cert-stats strong { font-size: 21px; }.cert-stats em { margin-left: auto; color: #29ad98; font-size: 7px; font-style: normal; }
.applications-panel { overflow: hidden; }
.filter-tabs { display: flex !important; flex-direction: row !important; gap: 4px !important; }
.filter-tabs button { border: 0; border-radius: 5px; padding: 5px 9px; color: #82919d; background: transparent; font-size: 7px; }.filter-tabs button.active { color: #158f7e; background: #edf9f7; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { padding: 11px 18px; color: #8c9aa5; background: #fafcfd; font-size: 7px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 14px 18px; border-top: 1px solid #edf1f4; color: #657885; font-size: 8px; white-space: nowrap; }
.table-title { display: flex; align-items: center; gap: 9px; }.table-title div { display: flex; flex-direction: column; gap: 2px; }.table-title b { color: #354d5c; font-size: 9px; }.table-title small { color: #a0abb4; font-size: 6px; }
.table-icon { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: #438ad7; font-size: 8px; }.table-icon.green-bg { background: #2eb79f; }.table-icon.amber-bg { background: #dda34d; }
.stage { padding: 4px 7px; border-radius: 12px; font-size: 7px; }.stage.running { color: #2281c7; background: #edf6fc; }.stage.review { color: #8066d7; background: #f3f0ff; }.stage.done { color: #149c87; background: #eaf8f5; }
.table-progress { display: flex; align-items: center; gap: 7px; }.table-progress i { width: 55px; }.table-progress b { color: #536975; font-size: 7px; }
.stars { color: #13a891; font-size: 8px; letter-spacing: 1px; }
.row-action { border: 1px solid #e0e8ed; border-radius: 5px; padding: 5px 8px; color: #587080; background: #fff; font-size: 7px; }
.row-action:hover { color: #0f9a87; border-color: #bce8e1; }
.diagnosis-hero { min-height: 125px; margin-bottom: 17px; padding: 20px 27px; display: flex; align-items: center; gap: 20px; color: #fff; background: linear-gradient(110deg, #0a263e, #0b4554); }
.diagnosis-orb { width: 75px; height: 75px; border: 1px solid rgba(93,232,213,.24); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(54,221,199,.26), rgba(54,221,199,.03) 65%); box-shadow: 0 0 0 8px rgba(46,213,190,.04), 0 0 0 16px rgba(46,213,190,.025); }
.diagnosis-orb span { color: #67e4d2; font-size: 14px; font-weight: 800; letter-spacing: 2px; }
.diagnosis-hero h2 { margin: 5px 0; font-size: 18px; }.diagnosis-hero h2 em { color: #59dac6; font-style: normal; }.diagnosis-hero p { margin: 0; color: #94afbc; font-size: 8px; }
.health-score { margin-left: auto; display: grid; grid-template-columns: auto auto; align-items: end; }.health-score strong { font-size: 42px; font-weight: 500; }.health-score small { padding-bottom: 8px; color: #8da9b6; font-size: 9px; }.health-score span { grid-column: 1 / -1; color: #6f94a4; font-size: 7px; }
.diagnosis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.diagnosis-card { padding: 20px; }.diagnosis-card-head { display: flex; align-items: center; gap: 10px; }.diagnosis-card-head > span { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; }.risk-card .diagnosis-card-head > span { color: #db7171; background: #fff0f0; }.opportunity-card .diagnosis-card-head > span { color: #20aa92; background: #eaf9f6; }
.diagnosis-card-head div { display: flex; flex-direction: column; }.diagnosis-card-head small { color: #92a0ab; font-size: 7px; }.diagnosis-card-head h3 { margin: 2px 0; font-size: 12px; }.diagnosis-card-head b { margin-left: auto; padding: 4px 7px; border-radius: 12px; color: #ce7272; background: #fff2f2; font-size: 7px; }.opportunity-card .diagnosis-card-head b { color: #159b85; background: #ebf9f6; }
.diagnosis-card ul { margin: 14px 0 0; padding: 0; list-style: none; }.diagnosis-card li { padding: 12px 0; border-top: 1px solid #edf1f3; display: flex; gap: 8px; align-items: center; }.diagnosis-card li i { width: 5px; height: 5px; border-radius: 50%; flex: none; background: #e57d7d; }.opportunity-card li i { background: #26b69f; }.diagnosis-card li div { display: flex; flex-direction: column; gap: 3px; }.diagnosis-card li strong { color: #405767; font-size: 8px; }.diagnosis-card li small { color: #98a6af; font-size: 7px; }.diagnosis-card li em { margin-left: auto; padding: 3px 5px; border-radius: 4px; color: #cf6c6c; background: #fff0f0; font-size: 6px; font-style: normal; }.opportunity-card li em { color: #179c87; background: #ecf9f6; }
.roadmap-card { grid-column: 1 / -1; overflow: hidden; }.roadmap { padding: 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }.roadmap > div { position: relative; display: flex; gap: 10px; }.roadmap > div > span { width: 27px; height: 27px; border: 1px solid #c7ece6; border-radius: 50%; display: grid; place-items: center; flex: none; color: #18a58f; background: #f2fbf9; font-size: 7px; font-weight: 800; }.roadmap > div > i { position: absolute; left: 32px; top: 13px; width: calc(100% - 26px); border-top: 1px dashed #cbdde1; }.roadmap section { position: relative; z-index: 1; background: #fff; }.roadmap small { color: #1aa58f; font-size: 7px; }.roadmap h3 { margin: 5px 0; font-size: 9px; }.roadmap p { margin: 0 0 8px; color: #8c9ba6; font-size: 7px; line-height: 1.6; }.roadmap b { color: #58707f; font-size: 7px; }
.indicator-summary { margin-bottom: 17px; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.indicator-summary article { position: relative; overflow: hidden; padding: 17px; border: 1px solid #e5ebef; border-radius: 9px; display: flex; align-items: center; gap: 11px; background: #fff; box-shadow: var(--shadow); }.indicator-summary article > span { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: #25baa5; font-weight: 800; }.indicator-summary article:nth-child(2) > span { background: #4684df; }.indicator-summary article:nth-child(3) > span { background: #826cdf; }.indicator-summary article:nth-child(4) > span { background: #dda34d; }.indicator-summary div { display: flex; flex-direction: column; }.indicator-summary strong { font-size: 18px; }.indicator-summary small { color: #8797a2; font-size: 7px; }.indicator-summary i { position: absolute; left: 0; bottom: 0; width: var(--bar); height: 2px; background: #25baa5; }
.indicator-panel { overflow: hidden; }.indicator-toolbar { padding: 14px 18px; display: flex; gap: 9px; align-items: center; }.search-field { width: 240px; border: 1px solid #dfe7ec; border-radius: 6px; padding: 0 9px; display: flex; align-items: center; gap: 5px; color: #9ba8b1; }.search-field input { min-width: 0; width: 100%; border: 0; padding: 8px 0; outline: none; font-size: 8px; }.indicator-toolbar select { border: 1px solid #dfe7ec; border-radius: 6px; padding: 7px 12px; color: #657987; background: #fff; font-size: 8px; }
td code { color: #487083; font-size: 8px; }.dimension-tag { padding: 3px 6px; border-radius: 4px; font-size: 7px; }.dimension-tag.hqid { color: #159b87; background: #eaf8f5; }.dimension-tag.tf { color: #3979d0; background: #edf4ff; }.dimension-tag.nqi { color: #745cd1; background: #f2efff; }.dimension-tag.sdg { color: #c4852d; background: #fff6e8; }.positive { color: #1aa48f; }.negative { color: #d18048; }.active-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #25bba5; }
.compact-heading { justify-content: center; text-align: center; }.compact-heading .page-kicker { justify-content: center; }.verify-wrap { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; align-items: start; }
.verify-search { padding: 35px 25px; text-align: center; }.verify-icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 15px; display: grid; place-items: center; color: #19a891; background: #eaf9f6; font-size: 23px; }.verify-search h2 { font-size: 15px; }.verify-search p { color: #83949f; font-size: 8px; }.verify-search label { margin: 20px 0 10px; border: 1px solid #dce6eb; border-radius: 7px; display: flex; overflow: hidden; }.verify-search input { min-width: 0; flex: 1; border: 0; padding: 10px; outline: none; font-size: 8px; }.verify-search button { border: 0; padding: 0 13px; color: #fff; background: #14a991; font-size: 8px; }.verify-search > small { color: #a1adb5; font-size: 6px; }
.certificate-card { position: relative; overflow: hidden; padding: 25px; border-color: #cfece7; background: linear-gradient(145deg, #fff, #f5fbfa); }.certificate-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid #d8efeb; pointer-events: none; }.certificate-ribbon { position: absolute; right: -38px; top: 18px; width: 135px; padding: 5px 0; color: #fff; background: #22b69f; text-align: center; transform: rotate(45deg); font-size: 6px; font-weight: 800; letter-spacing: 1px; }.certificate-card header { position: relative; display: flex; align-items: center; justify-content: space-between; }.certificate-logo { display: flex; align-items: center; gap: 6px; }.certificate-logo .brand-mark { transform: scale(.6); margin: -7px; }.certificate-logo strong { color: #17364a; font-size: 13px; letter-spacing: 2px; }.chain-status { margin-right: 24px; padding: 4px 7px; border: 1px solid #d5eee9; border-radius: 20px; color: #159b85; font-size: 6px; }.chain-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #23b89f; }
.certificate-title { position: relative; margin: 27px 0 20px; text-align: center; }.certificate-title small { color: #1c9f8b; font-size: 6px; letter-spacing: 1.7px; }.certificate-title h2 { margin: 8px 0; color: #15384d; font-family: Georgia, "Microsoft YaHei", serif; font-size: 17px; line-height: 1.5; }.certificate-title span { color: #8998a2; font-size: 6px; }.certificate-entity { position: relative; padding: 17px; border: 1px solid #e1eeec; text-align: center; background: rgba(255,255,255,.6); }.certificate-entity small, .certificate-entity p { color: #8899a3; font-size: 7px; }.certificate-entity h3 { margin: 6px 0 8px; color: #284d5f; font-size: 14px; }.certificate-entity p { margin: 0 0 8px; }.certificate-entity strong { display: block; color: #159f89; font-size: 25px; letter-spacing: 4px; }.certificate-entity span { color: #68808d; font-size: 7px; }.certificate-meta { position: relative; margin: 18px 0; display: grid; grid-template-columns: repeat(3,1fr); }.certificate-meta div { border-right: 1px solid #e0ebe9; display: flex; flex-direction: column; text-align: center; }.certificate-meta div:last-child { border-right: 0; }.certificate-meta small { color: #95a3ac; font-size: 6px; }.certificate-meta b { margin-top: 3px; color: #385464; font-size: 8px; }.certificate-card footer { position: relative; display: flex; align-items: end; justify-content: space-between; }.certificate-card footer div:first-child { display: flex; flex-direction: column; }.certificate-card footer small { color: #98a6ae; font-size: 6px; }.certificate-card footer code { margin-top: 3px; color: #59717e; font-size: 7px; }.qr-sim { width: 35px; height: 35px; padding: 3px; border: 1px solid #aecbc7; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }.qr-sim i { background: #214c57; }.certificate-card.loading { opacity: .55; transform: scale(.99); transition: .2s; }.certificate-card.verified { animation: verified .45s ease; }
@keyframes verified { 50% { box-shadow: 0 0 0 6px rgba(32,203,180,.12), var(--shadow); } }
.mobile-bottom-nav { display: none; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 60; min-width: 220px; padding: 11px 14px; border: 1px solid #d8ebe8; border-radius: 8px; display: flex; gap: 9px; align-items: center; color: #fff; background: #103547; box-shadow: 0 12px 35px rgba(6,32,48,.25); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #07342e; background: #4dd4bf; font-size: 9px; }.toast div { display: flex; flex-direction: column; gap: 2px; }.toast strong { font-size: 8px; }.toast small { color: #9eb7c2; font-size: 7px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(4,20,32,.62); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: .2s; }.modal-backdrop.show { opacity: 1; pointer-events: auto; }.modal { position: relative; width: min(380px,100%); padding: 28px; border-radius: 11px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.25); transform: translateY(10px); transition: .2s; }.modal-backdrop.show .modal { transform: translateY(0); }.modal-close { position: absolute; right: 12px; top: 10px; border: 0; color: #8b9aa5; background: transparent; font-size: 18px; }.modal-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #119f89; background: #eaf9f6; }.modal h2 { margin: 14px 0 4px; font-size: 16px; }.modal p { margin: 0 0 18px; color: #82939f; font-size: 8px; }.modal label { margin-bottom: 12px; }.modal .button { margin-top: 5px; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .dashboard-grid.lower { grid-template-columns: 1fr; }
  .ai-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .ai-panel .panel-head, .ai-panel .ai-button { grid-column: 1 / -1; }
  .dimension-content { grid-template-columns: .7fr 1.3fr; }
  .assessment-layout { grid-template-columns: 1fr; }
  .assessment-result { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; align-items: center; text-align: left; }
  .assessment-result > .panel-kicker, .assessment-result > h2 { grid-column: 1; }.big-score { grid-column: 2; grid-row: 1 / 5; }.result-note, .assessment-result .button { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: .25s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { width: 100%; margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { padding: 0 18px; }
  .breadcrumb span, .breadcrumb b { display: none; }
  .view { padding: 23px 18px 90px; }
  .hero { min-height: 250px; padding: 28px; }
  .hero-score { margin-right: 0; transform: scale(.85); }
  .cert-stats, .indicator-summary { grid-template-columns: repeat(2,1fr); }
  .verify-wrap { grid-template-columns: 1fr; }
  .diagnosis-grid { grid-template-columns: 1fr; }
  .roadmap-card { grid-column: 1; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 25; height: 62px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e9ed; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,255,255,.96); backdrop-filter: blur(15px); box-shadow: 0 -8px 20px rgba(18,44,63,.06); }
  .mobile-bottom-nav button { border: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; color: #8a9aa6; background: transparent; font-size: 7px; }
  .mobile-bottom-nav span { font-size: 15px; }
  .mobile-bottom-nav button.is-active { color: #12a18c; }
}

@media (max-width: 650px) {
  .topbar { height: 55px; }
  .topbar-actions .language, .topbar-actions .icon-button:first-of-type { display: none; }
  .view { min-height: calc(100vh - 55px); padding: 18px 12px 85px; }
  .hero { min-height: 410px; padding: 25px 20px; align-items: flex-start; }
  .hero p { font-size: 9px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-score { position: absolute !important; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%) scale(.9); }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
  .metric-card { min-height: 110px; padding: 12px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .metric-icon { width: 30px; height: 30px; }
  .metric-main strong { font-size: 18px; }
  .mini-bars, .metric-pill, .live-wave, .ai-orb { position: absolute; align-self: end; }
  .metric-card { position: relative; }
  .metric-pill, .ai-orb { right: 12px; top: 12px; transform: scale(.8); transform-origin: top right; }
  .mini-bars, .live-wave { right: 12px; bottom: 14px; }
  .dashboard-grid { gap: 12px; margin-bottom: 12px; }
  .panel-head { padding: 14px; }
  .dimension-content { padding: 12px; grid-template-columns: 1fr; }
  .dimension-list { gap: 10px; }
  .ai-panel { display: block; }
  .insight-featured { margin: 12px; }
  .insight-list { padding: 0 12px; }
  .ai-button { width: calc(100% - 24px); margin: 12px; }
  .line-chart { margin-left: 32px; }
  .chart-tooltip { right: 0; }
  .cert-progress { padding: 14px; }
  .steps { margin-inline: 12px; }
  .steps li:not(:last-child)::after { width: 72%; left: 65%; }
  .steps b { font-size: 6px; }
  .page-heading { margin-bottom: 16px; align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 20px; }
  .page-heading .button { width: 100%; }
  .form-grid { padding: 14px; grid-template-columns: 1fr; }
  .score-inputs { padding: 8px 14px 14px; }
  .score-input { align-items: flex-start; flex-direction: column; gap: 11px; }
  .score-input label { width: 100%; min-width: 0; }
  .assessment-result { display: block; text-align: center; }
  .big-score { width: 160px; height: 160px; }
  .cert-stats, .indicator-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cert-stats article { padding: 13px; align-items: flex-start; flex-direction: column; }
  .cert-stats em { margin-left: 0; }
  .diagnosis-hero { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
  .diagnosis-orb { width: 55px; height: 55px; }
  .diagnosis-hero > div:nth-child(2) { width: calc(100% - 75px); }
  .health-score { width: 100%; margin-left: 75px; }
  .roadmap { padding: 18px; grid-template-columns: 1fr; }
  .roadmap > div > i { left: 13px; top: 31px; width: 1px; height: calc(100% + 19px); border-top: 0; border-left: 1px dashed #cbdde1; }
  .indicator-toolbar { flex-wrap: wrap; }
  .search-field { width: 100%; }
  .verify-search { padding: 25px 15px; }
  .verify-search label { flex-direction: column; border: 0; gap: 8px; }
  .verify-search input { border: 1px solid #dce6eb; border-radius: 6px; }
  .verify-search button { padding: 10px; border-radius: 6px; }
  .certificate-card { padding: 20px 16px; }
  .certificate-title h2 { font-size: 14px; }
  .certificate-ribbon { right: -44px; top: 15px; }
  .certificate-meta b { font-size: 7px; }
  .toast { right: 12px; bottom: 75px; left: 12px; }
}