@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ocean:#262262;--ocean-light:#3d3899;--orange:#f37021;--orange-pale:#fde8d8;
  --sky:#9dceef;--sky-dark:#1a7ab5;--zest:#b9f24c;--forest:#005129;
  --lemon:#f7efca;--lemon-dark:#b89a00;--candy:#ef4d41;
  --text:#1a1a2e;--muted:#5a5a7a;--border:#e2e0f0;--bg:#f8f7fc;--white:#fff;
  --closed-bg:#f0f4f0;--current-bg:#fff8f0;--future-bg:#f5f5fc;
  --tgt-bg:#e8eaf6;--tgt-col:#3949ab;
  --act-bg:#e8f5e9;--act-col:#2e7d32;
  --ann-bg:#fff3e0;--ann-col:#e65100;
  --card-g-bg:#f0faf4;--card-g-border:#a8d5b5;
  --card-a-bg:#fffbf0;--card-a-border:#f5d78e;
  --card-r-bg:#fdf0f0;--card-r-border:#f5c0c0;
}
html{font-family:'Roboto',sans-serif;font-size:18px;color:var(--text);background:var(--bg)}
h1{font-size:28px;font-weight:300;letter-spacing:-0.3px}
h2{font-size:22px;font-weight:500}
h3{font-size:17px;font-weight:500}

#viewer-gate{position:fixed;inset:0;background:var(--ocean);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-box{background:white;border-radius:16px;padding:40px;max-width:400px;width:100%;text-align:center}
nav{background:var(--ocean);padding:0 16px;display:flex;align-items:center;position:sticky;top:0;z-index:100;flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:10px;padding:12px 0;margin-right:16px}
.kinia-k{width:32px;height:32px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:white}
.nav-brand span{color:white;font-size:20px;font-weight:300;letter-spacing:1px}
.nav-tabs{display:flex;flex:1;flex-wrap:wrap}
.nav-tab{padding:15px 10px;color:rgba(255,255,255,0.65);font-size:15px;cursor:pointer;border:none;background:none;border-bottom:3px solid transparent;transition:all 0.2s;font-family:'Roboto',sans-serif;white-space:nowrap}
.nav-tab:hover{color:white}.nav-tab.active{color:white;border-bottom-color:var(--orange)}
.nav-right{display:flex;align-items:center;gap:4px;padding:8px 0;flex-wrap:wrap}
.year-pill{padding:5px 11px;border-radius:20px;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:14px;cursor:pointer;background:none;font-family:'Roboto',sans-serif}
.year-pill.active{background:var(--orange);border-color:var(--orange);color:white;font-weight:500}
.year-pill.closed{border-color:rgba(185,242,76,0.6);color:rgba(185,242,76,0.9)}
.year-pill.current{border-color:var(--orange);color:var(--orange)}

.page{display:none;padding:18px;max-width:1200px;margin:0 auto}.page.active{display:block}
.page-header{background:var(--ocean);border-radius:12px;padding:20px 24px;margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px}
.page-header h1{color:white}.page-header p{color:rgba(255,255,255,0.7);font-size:16px;margin-top:3px}
.header-badge{background:var(--orange);color:white;padding:6px 14px;border-radius:20px;font-size:15px;font-weight:500}
.ys-badge{padding:5px 12px;border-radius:20px;font-size:14px;font-weight:500}
.ys-closed{background:rgba(185,242,76,0.2);color:var(--zest);border:1px solid rgba(185,242,76,0.4)}
.ys-current{background:rgba(243,112,33,0.2);color:var(--orange);border:1px solid rgba(243,112,33,0.4)}
.ys-future{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.2)}

.card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px}
.card-title{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:10px}
.yr-banner{border-radius:8px;padding:9px 13px;margin-bottom:14px;font-size:16px;display:flex;align-items:center;gap:8px}
.yr-banner.closed{background:var(--closed-bg);border:1px solid #c5d9c5;color:var(--forest)}
.yr-banner.current{background:var(--current-bg);border:1px solid #f8c89a;color:#854f0b}
.yr-banner.future{background:var(--future-bg);border:1px solid var(--border);color:var(--muted)}

.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.mcard{border-radius:10px;padding:13px;border:1px solid var(--border);background:var(--white)}
.mcard.status-g{background:var(--card-g-bg);border-color:var(--card-g-border)}
.mcard.status-a{background:var(--card-a-bg);border-color:var(--card-a-border)}
.mcard.status-r{background:var(--card-r-bg);border-color:var(--card-r-border)}
.mcard.status-n{background:var(--future-bg);border-color:var(--border)}
.mcard.annual-card{border-top:3px solid var(--ann-col)}
#page-pillar3 .metric-grid .mcard{padding:20px;font-size:1.08em}
#page-pillar3 .metric-grid .mcard .mval{font-size:30px}
#page-pillar3 .metric-grid .mcard .mlabel{font-size:17px}
#page-pillar3 .metric-grid{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){#page-pillar3 .metric-grid{grid-template-columns:repeat(2,1fr)}}
.mcard .mlabel{font-size:13px;color:var(--muted);margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em}
.mcard .mval{font-size:24px;font-weight:300;color:var(--ocean)}
.pill{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;padding:3px 7px;border-radius:3px;display:inline-block;margin-bottom:1px}
.pill-tgt{background:var(--tgt-bg);color:var(--tgt-col)}
.pill-act{background:var(--act-bg);color:var(--act-col)}
.pill-ann{background:var(--ann-bg);color:var(--ann-col)}
.rag-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:14px;font-weight:600}
.rag-badge.g{background:var(--card-g-bg);color:#155724;border:1px solid var(--card-g-border)}
.rag-badge.a{background:var(--card-a-bg);color:#856404;border:1px solid var(--card-a-border)}
.rag-badge.r{background:var(--card-r-bg);color:#721c24;border:1px solid var(--card-r-border)}
.rag-badge.n{background:var(--border);color:var(--muted)}
.rag-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rag-dot.g{background:#155724}.rag-dot.a{background:#856404}.rag-dot.r{background:#721c24}.rag-dot.n{background:var(--muted)}
.rag{font-size:13px;padding:3px 8px;border-radius:10px;font-weight:600;min-width:44px;text-align:center;display:inline-block}
.rag-g{background:var(--card-g-bg);color:#155724}.rag-a{background:var(--card-a-bg);color:#856404}.rag-r{background:var(--card-r-bg);color:#721c24}.rag-n{background:var(--border);color:var(--muted)}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stories-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}

.insight-box{border-left:4px solid var(--border);background:var(--bg);border-radius:0 8px 8px 0;padding:11px 13px;margin-bottom:14px}
.insight-box.live{border-left-color:var(--orange);background:var(--orange-pale)}
.insight-box .ititle{font-size:13px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:2px}
.insight-box.live .ititle{color:var(--orange)}
.insight-box p{font-size:16px;color:var(--muted);font-style:italic;line-height:1.6}
.insight-box.live p{color:var(--text);font-style:normal}

.dash-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:8px 12px;background:var(--white);border:1px solid var(--border);border-radius:8px;font-size:14px;align-items:center}
.dl-item{display:flex;align-items:center;gap:4px;color:var(--muted)}
.dl-sw{width:11px;height:11px;border-radius:2px;flex-shrink:0}

.rag-key{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.rag-key-card{border-radius:10px;padding:14px 16px;border:1px solid}
.rag-key-card.g{background:var(--card-g-bg);border-color:var(--card-g-border)}
.rag-key-card.a{background:var(--card-a-bg);border-color:var(--card-a-border)}
.rag-key-card.r{background:var(--card-r-bg);border-color:var(--card-r-border)}
.rag-key-card .rk-title{font-size:17px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.rag-key-card.g .rk-title{color:#155724}.rag-key-card.a .rk-title{color:#856404}.rag-key-card.r .rk-title{color:#721c24}
.rag-key-card p{font-size:15px;color:var(--muted);line-height:1.6}

.kpi-row{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.kpi-label{width:200px;color:var(--muted);flex-shrink:0;font-size:14px;line-height:1.25}
.kpi-bar-wrap{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden;position:relative}
.kpi-bar-tgt{position:absolute;left:0;top:0;height:100%;background:#c5cae9;width:100%;border-radius:4px}
.kpi-bar-act{position:absolute;left:0;top:0;height:100%;border-radius:4px}
.kpi-vals{min-width:120px;text-align:right;font-size:14px}

.trend-table{width:100%;border-collapse:collapse;font-size:14px}
.trend-table th{text-align:left;padding:5px 7px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);font-size:13px;text-transform:uppercase;letter-spacing:0.05em}
.trend-table td{padding:6px 7px;border-bottom:0.5px solid var(--border);vertical-align:top}
.trend-table tr:last-child td{border-bottom:none}
.th-closed{background:var(--closed-bg)}.th-current{background:var(--current-bg)}.th-future{background:var(--future-bg)}

.smart-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.si-card{border-radius:10px;padding:13px;border:1px solid var(--border);background:var(--white)}
.si-card .si-icon{font-size:22px;margin-bottom:5px}
.si-card .si-label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:3px}
.si-card .si-val{font-size:21px;font-weight:500;color:var(--ocean);margin-bottom:2px}
.si-card .si-sub{font-size:14px;color:var(--muted);line-height:1.5}
.si-green{background:#f0faf4;border-color:#a8d5b5}.si-green .si-val{color:var(--forest)}
.si-amber{background:#fffbf0;border-color:#f5d78e}.si-amber .si-val{color:#854f0b}
.si-ocean{background:#eef0fc;border-color:#b0aee8}.si-ocean .si-val{color:var(--ocean)}
.si-orange{background:var(--orange-pale);border-color:#f8a06a}.si-orange .si-val{color:var(--orange)}

.pie-legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pie-leg-item{display:flex;align-items:center;gap:3px;font-size:13px;color:var(--muted)}
.pie-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

.story-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;border-top:4px solid var(--ocean)}
.story-media{width:100%;height:180px;object-fit:cover;display:block}
.story-media-ph{width:100%;height:120px;background:var(--ocean);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.story-media-ph span{color:rgba(255,255,255,0.4);font-size:14px}
.story-body{padding:14px}
.story-org{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.07em;color:var(--orange);margin-bottom:3px}
.story-title{font-size:17px;font-weight:500;color:var(--ocean);margin-bottom:6px;line-height:1.4}
.story-quote{font-size:16px;font-style:italic;color:var(--text);line-height:1.7;margin-bottom:7px}
.story-attr{font-size:14px;color:var(--muted)}
.story-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.story-tag{background:var(--lemon);color:var(--ocean);font-size:13px;padding:4px 9px;border-radius:10px;font-weight:500}
.story-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.story-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.partner-chip{background:var(--lemon);border:1px solid var(--lemon-dark);border-radius:20px;padding:5px 12px;font-size:14px;color:var(--ocean);font-weight:500;display:inline-block;margin:2px}
.pol-item{background:var(--bg);border-radius:6px;padding:8px 11px;font-size:15px;color:var(--text);margin-bottom:6px;border-left:3px solid var(--sky-dark)}
.fund-item{background:var(--bg);border-radius:6px;padding:8px 11px;font-size:15px;color:var(--text);margin-bottom:6px;border-left:3px solid var(--forest)}

.btn-orange{background:var(--orange);color:white;border:none;border-radius:8px;padding:6px 14px;font-size:15px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif}
.btn-ocean{background:var(--ocean);color:white;border:none;border-radius:8px;padding:8px 18px;font-size:16px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif}
.dl-btn{display:inline-flex;align-items:center;gap:4px;background:var(--forest);color:white;border:none;border-radius:8px;padding:6px 13px;font-size:15px;cursor:pointer;font-family:'Roboto',sans-serif}
.sec-div{display:flex;align-items:center;gap:8px;margin:18px 0 12px}
.sec-div-line{flex:1;height:1px;background:var(--border)}
.sec-div-label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);white-space:nowrap}
#page-overview .sec-div-label{font-size:19px;font-weight:600;letter-spacing:0.01em;text-transform:none;color:var(--ocean)}

.how-section{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.how-section h3{color:var(--ocean);margin-bottom:10px;font-size:18px}
.how-section p,.how-section li{font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:4px}
.how-section ul{padding-left:18px}
.how-step{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.how-step-num{width:26px;height:26px;border-radius:50%;background:var(--ocean);color:white;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.how-step-body{font-size:16px;color:var(--muted);line-height:1.7}
.how-step-body strong{color:var(--text)}

.q-compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.q-kpi-block{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:13px}

/* Programme-area sections (Creative Technology / Literacy / Numeracy) */
.prog-area-header{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.prog-area-title{font-size:18px;font-weight:600;color:var(--ocean);line-height:1.3}
.prog-area-sub{font-size:14px;color:var(--muted);margin-top:1px}
.prog-block{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px;background:linear-gradient(180deg,rgba(0,0,0,0.012),transparent 40px)}
.prog-block.ct{border-top:3px solid var(--orange)}
.prog-block.lit{border-top:3px solid var(--sky-dark)}
.prog-block.num{border-top:3px solid var(--forest)}
.prog-row-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin:2px 0 6px 2px}

/* Distinct cumulative vs "this year" card treatment */
.mcard{position:relative;overflow:visible}
.mcard.mcard-cum{border-left:4px solid var(--tgt-col)}
.mcard.mcard-ann{border-left:4px solid var(--ann-col)}
.mcard-ribbon{position:absolute;top:-10px;left:10px;font-size:12px;font-weight:700;letter-spacing:0.06em;padding:3px 9px;border-radius:5px;color:white;box-shadow:0 1px 3px rgba(0,0,0,0.18)}
.mcard-ribbon.cum{background:var(--tgt-col)}
.mcard-ribbon.ann{background:var(--ann-col)}
.mcard-progress-track{height:5px;border-radius:3px;background:rgba(0,0,0,0.07);margin-top:8px;overflow:hidden}
.mcard-progress-fill{height:100%;border-radius:3px;transition:width 0.3s}

/* Chart target/actual axis labels */
.chart-axis-label{display:flex;gap:11px;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:500;flex-wrap:wrap}
.chart-axis-label span{display:flex;align-items:center;gap:3px}
.chart-axis-label .sw{width:9px;height:9px;border-radius:2px;display:inline-block;flex-shrink:0}

/* Quarter filter chips (Reach & Influence / Impact Stories) */
.q-chip{padding:7px 16px;border-radius:20px;border:1px solid var(--border);background:var(--white);color:var(--muted);font-size:15px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif}
.q-chip.active{background:var(--ocean);border-color:var(--ocean);color:white}
.q-chip.has-data{border-color:var(--orange)}
.q-chip.has-data.active{background:var(--orange);border-color:var(--orange)}
.ri-hist-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.ri-hist-card h4{font-size:15px;color:var(--ocean);margin-bottom:5px}
.ri-hist-card .rh-empty{font-size:14px;color:var(--muted);font-style:italic}
.insight-history-item{border-left:3px solid var(--border);padding:5px 0 5px 10px;margin-top:8px}
.insight-history-item .ih-q{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.insight-history-item p{font-size:15px;color:var(--text);margin-top:2px;line-height:1.6}
.story-period-tag{background:var(--ocean);color:white;font-size:12px;font-weight:600;letter-spacing:0.05em;padding:4px 9px;border-radius:10px;text-transform:uppercase}

/* Board scorecard */
.scorecard-summary{display:flex;gap:16px;align-items:center;margin-bottom:12px;flex-wrap:wrap;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:11px 18px}
.scorecard-summary .ss-overall{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;color:var(--ocean)}
.scorecard-summary .ss-overall-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.scorecard-summary .ss-counts{display:flex;gap:16px;font-size:15px;color:var(--muted);flex-wrap:wrap;margin-left:auto}
.scorecard-summary .ss-count-item{display:flex;align-items:center;gap:5px}
.scorecard-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.scorecard-chip{border-radius:10px;padding:10px 12px;border:1px solid var(--border);border-left:4px solid var(--border);background:var(--white);display:flex;flex-direction:row;align-items:center;gap:10px}
.scorecard-chip.g{background:var(--card-g-bg);border-color:var(--card-g-border);border-left-color:#155724}
.scorecard-chip.a{background:var(--card-a-bg);border-color:var(--card-a-border);border-left-color:#856404}
.scorecard-chip.r{background:var(--card-r-bg);border-color:var(--card-r-border);border-left-color:#721c24}
.scorecard-chip.n{border-left-color:var(--border)}
.scorecard-chip .sc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.scorecard-chip .sc-label{font-size:13px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.03em}
.scorecard-chip .sc-vals{font-size:16px;font-weight:500;color:var(--ocean);white-space:nowrap}
.scorecard-chip .sc-sub{font-size:13px;color:var(--muted)}
@media(max-width:900px){.scorecard-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.scorecard-wrap{grid-template-columns:1fr}.scorecard-summary .ss-counts{margin-left:0}}

/* Admin target warning */
.tgt-warning{background:#fff8e1;border:1px solid #ffe082;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:15px;color:#5d4037}

input[type=password],input[type=number],input[type=text],input[type=url],input[type=date],textarea,select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:16px;font-family:'Roboto',sans-serif;color:var(--text);background:white}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ocean)}
.field-group{margin-bottom:10px}
.field-group label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);display:block;margin-bottom:2px;line-height:1.3;min-height:2.6em}

footer{text-align:center;padding:18px;color:var(--muted);font-size:14px;border-top:1px solid var(--border);margin-top:28px}
@media(max-width:720px){.metric-grid,.g2,.g3,.g4,.smart-insights,.q-compare-grid,.rag-key,.stories-grid{grid-template-columns:1fr}.nav-tabs{overflow-x:auto}}