/* ==========================================================
   MS Office & CCC page — office hero, app cards, Mini Excel,
   Shortcut Challenge, CCC exam block.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.office-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; filter: drop-shadow(0 30px 40px rgba(60,20,0,.3)); }
.office-hero .app-name{ font-family: var(--font-display); font-weight:700; font-size:11px; fill:#fff; }
.office-hero .fx{ font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:10px; fill: var(--study-accent); font-weight:700; }
.office-hero .cell{ font-family: var(--font-body); font-size:11px; fill: var(--ink); }
.office-hero .cell.total{ font-weight:800; fill: var(--study-accent); }

/* ---------- App cards ---------- */
.app-card{ padding:1.4rem; border-top:4px solid var(--app); }
.app-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; background: var(--app); margin-bottom:.8rem; }
.app-card h5{ margin-bottom:.5rem; }
.app-card ul{ list-style:none; padding:0; margin:0; }
.app-card li{ font-size:.82rem; color: var(--slate); padding-left:1.1rem; position:relative; margin-bottom:.3rem; line-height:1.45; }
.app-card li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background: var(--app); }

/* ---------- Mini Excel ---------- */
.xl-card{ padding:1.2rem; }
.xl-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.xl-title{ font-family: var(--font-display); font-weight:700; color: var(--navy); }
.xl-title .bi{ color: var(--study-accent); }
.xl-formula{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:.7rem; background:#fff; }
.xl-formula:focus-within{ border-color: var(--study-accent); box-shadow: 0 0 0 3px rgba(31,122,99,.12); }
.xl-ref{ min-width:3.2rem; display:flex; align-items:center; justify-content:center; font-weight:800; font-family: var(--font-display); color: var(--navy); background: var(--paper); border-right:1px solid var(--line); }
.xl-fx{ display:flex; align-items:center; padding:0 .6rem; font-style:italic; font-weight:700; color: var(--study-accent); border-right:1px solid var(--line); }
.xl-input{ flex:1; min-width:0; border:none; outline:none; padding:.55rem .7rem; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:.95rem; }
.xl-enter{ border:none; background: var(--study-accent); color:#fff; padding:0 .9rem; font-size:1.1rem; }
.xl-wrap{ overflow-x:auto; border:1px solid #D9D4C5; border-radius:8px; }
.xl-grid{ border-collapse:collapse; width:100%; min-width:520px; font-size:.88rem; background:#fff; table-layout:fixed; }
.xl-grid th{ background:#F1EEE5; color: var(--slate); font-weight:700; font-size:.75rem; text-align:center; padding:.3rem; border:1px solid #DDD7C7; }
.xl-grid th.xl-corner{ width:2.2rem; }
.xl-grid th.is-active{ background:#DCEFE8; color: var(--study-accent); }
.xl-grid td{
  border:1px solid #E6E1D3; padding:.35rem .5rem; height:2.1rem; cursor:cell; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color: var(--ink); transition: background .15s ease;
}
.xl-grid td:hover{ background:#FAF8F2; }
.xl-grid td.is-num{ text-align:right; font-variant-numeric: tabular-nums; }
.xl-grid td.is-head{ font-weight:800; color: var(--navy); background:#FBF8F0; }
.xl-grid td.is-formula{ color: var(--study-accent); font-weight:700; }
.xl-grid td.is-err{ color:#B8422E; font-weight:700; }
.xl-grid td.is-sel{ outline:2.5px solid var(--study-accent); outline-offset:-2px; background:#F2FAF7; }

.xl-done{ font-family: var(--font-display); font-weight:800; color: var(--study-accent); }
.xl-tasks{ list-style:none; padding:0; margin:0 0 1rem; }
.xl-tasks li{ display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .6rem; border-radius:10px; font-size:.86rem; color: var(--ink); cursor:pointer; transition: background .15s ease; }
.xl-tasks li:hover{ background: var(--paper); }
.xl-tasks li .bi{ color:#B9B2A2; font-size:1.05rem; margin-top:.05rem; }
.xl-tasks li.is-done{ color: var(--slate); }
.xl-tasks li.is-done span{ text-decoration: line-through; }
.xl-tasks li.is-done .bi{ color: var(--study-accent); }
.xl-cheats{ display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; color: var(--slate); background: var(--paper); border-radius: var(--radius-sm); padding:.8rem .9rem; }
.xl-cheats b{ color: var(--navy); margin-bottom:.15rem; }
.xl-cheats code, .section-lead code{ color: var(--study-accent); background: rgba(31,122,99,.08); border-radius:4px; padding:0 .25rem; }

/* ---------- Shortcut challenge ---------- */
.sc-stats{ font-family: var(--font-display); font-weight:700; font-size:.9rem; color: var(--slate); }
.sc-stats .bi{ color: var(--study-accent); }
.sc-stage{ background: var(--navy); border-radius: var(--radius-md); padding:1.3rem 1.4rem; min-height:170px; transition: box-shadow .3s ease; }
.sc-card.is-active .sc-stage{ box-shadow: 0 0 0 4px rgba(217,164,65,.45); }
.sc-action{ color:#fff; margin-bottom:.9rem; }
.sc-action b{ display:block; font-family: var(--font-display); font-size:1.6rem; line-height:1.2; }
.sc-label{ display:block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); }
.sc-opts{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; }
.sc-opt{ border:none; border-radius:10px; background: rgba(255,255,255,.1); color:#fff; padding:.55rem .3rem; font-weight:700; transition: background .15s ease; white-space:nowrap; }
.sc-opt:hover:not(:disabled){ background: rgba(255,255,255,.2); }
.sc-opt kbd{ background:#fff; color: var(--navy); border-radius:5px; padding:.1rem .4rem; font-size:.8rem; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sc-opt.is-right{ background: var(--study-accent); }
.sc-opt.is-wrong{ background:#D9412C; }
.sc-stage .game-msg{ color:#C7CEE2; }
.sc-stage .game-msg.ok{ color:#7FE0BE; }
.sc-stage .game-msg.err{ color:#FFB4A6; }
@media (max-width: 575.98px){ .sc-opts{ grid-template-columns: 1fr 1fr; } }

/* ---------- CCC ---------- */
.ccc-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; }
.ccc-stats div{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:.8rem .4rem; text-align:center; box-shadow: var(--shadow-soft); }
.ccc-stats b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.6rem; color: #7B3FBF; line-height:1.1; }
.ccc-stats span{ font-size:.7rem; font-weight:700; color: var(--slate); }
.exam-disclaimer{ font-size:.8rem; color: var(--slate); }
.ccc-syllabus{ display:grid; grid-template-columns: 1fr 1fr; gap:.5rem .9rem; }
.ccc-item{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color: var(--ink); padding:.45rem .2rem; border-bottom:1px dashed var(--line); }
.ccc-item .bi{ color:#7B3FBF; }
.ccc-num{ width:1.5rem; height:1.5rem; flex:none; border-radius:50%; background: rgba(123,63,191,.1); color:#7B3FBF; font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width: 575.98px){ .ccc-syllabus{ grid-template-columns: 1fr; } .ccc-stats{ grid-template-columns: 1fr 1fr; } }