/* excel.css — mock Excel (XGrid), ui overlays (keycaps, dialogs, ribbon, callouts, cursor), charts, try-it panel. */

/* ---------- XGrid ---------- */
.xg { background: var(--g-bg); color: var(--g-ink); border: 1px solid #b8bec4; border-radius: 6px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); font-family: "Aptos", "Segoe UI", Calibri, system-ui, sans-serif; }
.xg-bar { display: flex; align-items: stretch; height: 32px; border-bottom: 1px solid #d4d4d4; background: #fff; font-size: .93em; }
.xg-namebox { width: 74px; border-right: 1px solid #d4d4d4; display: flex; align-items: center; padding: 0 8px; color: #333; }
.xg-fx { width: 34px; display: flex; align-items: center; justify-content: center; font: italic 700 15px Georgia, serif; color: #777; border-right: 1px solid #e1e1e1; }
.xg-fx-text { flex: 1; display: flex; align-items: center; padding: 0 10px; font-family: var(--mono); font-size: .95em; white-space: pre; overflow: hidden; color: #222; }
.xg-r { font-weight: 700; }
.xg-sheet { position: relative; display: grid; }
.xg-corner { background: #f3f3f3; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; }
.xg-colhead, .xg-rowhead { background: var(--g-head); color: #555; font-size: 12.5px; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; transition: background .2s, color .2s; }
.xg-colhead.act, .xg-rowhead.act { background: #d3f0e0; color: #0e6b39; font-weight: 700; }
.xg-colhead.act { box-shadow: inset 0 -2px 0 #107C41; }
.xg-rowhead.act { box-shadow: inset -2px 0 0 #107C41; }
.xg-cell { border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; padding: 0 6px; display: flex; align-items: center; white-space: nowrap;
  overflow: hidden; transition: background .35s, color .35s, opacity .35s; }
.xg-cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.xg-cell.head { font-weight: 700; background: #f7faf8; }
.xg-cell.editing { font-family: var(--mono); font-size: .9em; justify-content: flex-start; background: #fff; color: #111; overflow: visible; z-index: 2; }
.xg-cell.editing::after { content: ""; width: 1px; height: 1.1em; background: #111; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.xg-cell.hl-yellow { background: #fff2a8; }
.xg-cell.hl-green { background: #c9f2d9; }
.xg-cell.hl-blue { background: #d6e8ff; }
.xg-cell.hl-red { background: #ffd1d1; color: #9b1c1c; }
.xg-cell.dim { opacity: .3; }
.xg-cell.bold { font-weight: 700; }
.xg-cell.good { color: #0e6b39; font-weight: 700; }
.xg-cell.bad { color: #c62828; font-weight: 700; }
.xg-cell.flash { animation: cellFlash 1.1s ease-out; }
@keyframes cellFlash { 0% { background: #21A366; color: #fff; } 100% { } }
.xg-cell.pop { animation: cellPop .45s ease-out both; }
@keyframes cellPop { from { opacity: 0; transform: translateY(6px); background: #c9f2d9; } to { opacity: 1; transform: none; } }
.xg-sel { position: absolute; border: 2px solid #107C41; pointer-events: none; z-index: 5; box-sizing: border-box;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.xg-sel.dragging { transition-duration: .7s; }
.xg-handle { position: absolute; right: -5px; bottom: -5px; width: 7px; height: 7px; background: #107C41; border: 1px solid #fff; }
.xg-ref { position: absolute; border: 2px solid var(--rc); background: color-mix(in srgb, var(--rc) 10%, transparent); pointer-events: none; z-index: 4; box-sizing: border-box; animation: refIn .3s ease-out; }
@keyframes refIn { from { opacity: 0; } }
.xg-ants { position: absolute; pointer-events: none; z-index: 6; box-sizing: border-box;
  background: linear-gradient(90deg, #107C41 50%, transparent 50%) 0 0 / 10px 2px repeat-x, linear-gradient(90deg, #107C41 50%, transparent 50%) 0 100% / 10px 2px repeat-x,
    linear-gradient(0deg, #107C41 50%, transparent 50%) 0 0 / 2px 10px repeat-y, linear-gradient(0deg, #107C41 50%, transparent 50%) 100% 0 / 2px 10px repeat-y;
  animation: ants .6s linear infinite; }
@keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
.xg-spill { position: absolute; border: 1.5px dashed #2f6fd6; pointer-events: none; z-index: 4; box-sizing: border-box; }
.xg-tab { height: 26px; background: #f3f3f3; border-top: 1px solid #d4d4d4; font-size: 12.5px; display: flex; align-items: flex-end; padding-left: 40px; }
.xg-tab span { background: #fff; padding: 3px 14px; border-bottom: 2px solid #107C41; color: #0e6b39; font-weight: 700; }

/* ---------- ui overlays ---------- */
.ui-keys { display: flex; align-items: center; gap: 8px; z-index: 30; padding: 10px 14px; background: rgba(15,23,32,.86); border: 1px solid var(--line);
  border-radius: 14px; font-size: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.ui-keys .kplus, .ui-keys .kthen { color: var(--muted); font-weight: 800; }
.ui-keys.anim { animation: popIn .25s ease-out both; }
.ui-keys.anim kbd { animation: keyPress .5s ease-in-out both; animation-delay: calc(.25s + var(--k) * var(--kd)); }
@keyframes keyPress { 0% { transform: none; } 40% { transform: translateY(3px); box-shadow: 0 0 0 #8e989f; background: linear-gradient(#c9f2d9, #a7e3bf); } 100% { transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ui-dialog { z-index: 20; background: #fff; color: #1f1f1f; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.55); border: 1px solid #9aa3ab;
  font: 14.5px "Segoe UI", "Aptos", system-ui, sans-serif; overflow: hidden; }
.ui-dialog.anim { animation: popIn .25s ease-out both; }
.ui-dialog .dlg-title { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-weight: 600; background: #f3f3f3; border-bottom: 1px solid #ddd; }
.ui-dialog .dlg-title i { font-style: normal; color: #777; }
.ui-dialog .dlg-body { padding: 12px 14px; line-height: 1.5; }
.ui-dialog .dlg-body label, .ui-dialog .dlg-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.ui-dialog .dlg-field { border: 1px solid #8a8a8a; padding: 3px 8px; min-width: 90px; font-family: var(--mono); font-size: 13.5px; background: #fff; border-radius: 2px; }
.ui-dialog .dlg-field.on { border-color: #107C41; box-shadow: 0 0 0 2px rgba(16,124,65,.25); }
.ui-dialog .radio::before, .ui-dialog .check::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 1.5px solid #555; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ui-dialog .check::before { border-radius: 2px; }
.ui-dialog .radio.on::before { background: radial-gradient(#107C41 40%, #fff 45%); border-color: #107C41; }
.ui-dialog .check.on::before { background: #107C41; border-color: #107C41; box-shadow: inset 0 0 0 2px #fff; }
.ui-dialog .on-text, .ui-dialog .hl { background: #fff2a8; border-radius: 3px; padding: 0 3px; }
.ui-dialog .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #eee; background: #fafafa; }
.ui-dialog .dlg-btn { min-width: 74px; padding: 5px 12px; border: 1px solid #adadad; border-radius: 4px; background: #fdfdfd; text-align: center; }
.ui-dialog .dlg-btn.primary { border: 2px solid #107C41; }
.ui-dialog .dlg-btn.press { animation: btnPress .5s ease-in-out both; }
@keyframes btnPress { 40% { background: #107C41; color: #fff; transform: scale(.95); } 100% { background: #107C41; color: #fff; } }
.ui-ribbon { z-index: 25; display: flex; align-items: center; gap: 6px; font: 600 15px "Segoe UI", system-ui, sans-serif; }
.ui-ribbon .rb { padding: 6px 12px; border-radius: 6px; background: #fff; color: #1f1f1f; border: 1px solid #c8c8c8; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ui-ribbon .rb.tab { background: #107C41; color: #fff; border-color: #107C41; }
.ui-ribbon .rb.last { background: #e6f4ec; border-color: #107C41; color: #0e6b39; }
.ui-ribbon .sep { color: var(--muted); font-size: 18px; }
.ui-ribbon.anim .rb, .ui-ribbon.anim .sep { animation: popIn .25s ease-out both; animation-delay: calc(var(--i) * .3s); }
.ui-callout { z-index: 28; background: #fffbe6; color: #2b2b2b; border-radius: 10px; padding: 10px 14px; font-size: 17px; line-height: 1.35; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); border-left: 5px solid var(--info); }
.ui-callout.good { border-left-color: var(--good); background: #eefcf3; }
.ui-callout.warn { border-left-color: var(--bad); background: #fff1f1; }
.ui-callout.anim { animation: popIn .3s ease-out both; }
.ui-callout::after { content: ""; position: absolute; width: 0; height: 0; border: 9px solid transparent; }
.ui-callout.ar-left::after { left: -18px; top: 14px; border-right-color: #fffbe6; }
.ui-callout.ar-right::after { right: -18px; top: 14px; border-left-color: #fffbe6; }
.ui-callout.ar-up::after { top: -18px; left: 22px; border-bottom-color: #fffbe6; }
.ui-callout.ar-down::after { bottom: -18px; left: 22px; border-top-color: #fffbe6; }
.ui-callout.good.ar-left::after { border-right-color: #eefcf3; } .ui-callout.good.ar-right::after { border-left-color: #eefcf3; }
.ui-callout.good.ar-up::after { border-bottom-color: #eefcf3; } .ui-callout.good.ar-down::after { border-top-color: #eefcf3; }
.ui-callout.warn.ar-left::after { border-right-color: #fff1f1; } .ui-callout.warn.ar-right::after { border-left-color: #fff1f1; }
.ui-callout.warn.ar-up::after { border-bottom-color: #fff1f1; } .ui-callout.warn.ar-down::after { border-top-color: #fff1f1; }
.ui-cursor { z-index: 40; width: 26px; height: 26px; pointer-events: none; }
.ui-cursor.anim { animation: cursorIn .6s ease-out both; }
@keyframes cursorIn { from { transform: translate(50px, 50px); opacity: 0; } to { transform: none; opacity: 1; } }
.ui-cursor.click::after { content: ""; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; }
.ui-cursor.anim.click::after { animation: ripple .6s ease-out .6s both; }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ui-tag { z-index: 26; padding: 4px 10px; border-radius: 999px; font: 700 14px var(--font); background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.ui-tag.good { background: #12391f; color: #7ff0aa; border-color: #2ecc71; }
.ui-tag.warn { background: #3d1515; color: #ffb3b3; border-color: #ff6b6b; }
.ui-tag.info { background: #13314d; color: #a9d4ff; border-color: #4dabf7; }
.ui-tag.anim { animation: popIn .25s ease-out both; }
.ui-menu { z-index: 22; background: #fff; color: #1f1f1f; border: 1px solid #b9b9b9; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px 0;
  font: 14.5px "Segoe UI", system-ui, sans-serif; min-width: 180px; }
.ui-menu div { padding: 6px 14px; }
.ui-menu div.on { background: #e6f4ec; box-shadow: inset 3px 0 0 #107C41; font-weight: 600; }
.ui-menu.anim { animation: popIn .2s ease-out both; }

/* ---------- charts ---------- */
.xc { z-index: 3; background: #fff; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.xc svg { display: block; overflow: visible; }
.xc text { font: 12px "Segoe UI", system-ui, sans-serif; fill: #444; }
.xc .ttl { font-size: 14px; font-weight: 700; fill: #222; }
.xc .ax { stroke: #bbb; stroke-width: 1; }
.xc .gridl { stroke: #eee; stroke-width: 1; }
.xc .bar { fill: #21A366; }
.xc .bar.alt { fill: #9fb0bf; }
.xc .bar.hot { fill: #e8590c; }
.xc .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.xc .pt { stroke: #fff; stroke-width: 1.5; }
.xc .pt.hot { fill: #e03131; r: 6; }
.xc .hline { stroke-width: 1.5; stroke-dasharray: 6 4; }
.xc .band { fill: rgba(247,148,70,.22); }
.xc.anim .bar { transform-box: fill-box; transform-origin: bottom; animation: grow .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes grow { from { transform: scaleY(0); } }
.xc.anim .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s ease-out .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.xc.anim .band, .xc.anim .pt, .xc.anim .lbl { animation: fadeIn .5s ease-out both; animation-delay: .9s; }
@keyframes fadeIn { from { opacity: 0; } }
.spark { width: 100%; height: 100%; display: block; }
.spark .ln { fill: none; stroke: #2f6fd6; stroke-width: 1.8; }
.spark .col { fill: #2f6fd6; }
.spark .hi { fill: #2b8a3e; } .spark .lo { fill: #e03131; }
.spark.anim .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s ease-out forwards; }
.spark.anim .col { transform-box: fill-box; transform-origin: bottom; animation: grow .5s ease-out both; }

/* ---------- try-it panel ---------- */
.tryit-root { position: absolute; left: 24px; right: 24px; top: 96px; bottom: 68px; display: grid; grid-template-columns: 1fr 360px; gap: 20px; }
.ti-sheet { overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.ti-sheet .xg { position: relative !important; box-shadow: none; border: 0; }
.ti-side { display: flex; flex-direction: column; gap: 12px; }
.ti-task { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 10px; padding: 12px 14px; font-size: 18px; line-height: 1.4; }
.ti-task b { color: var(--accent); display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.ti-input-row { display: flex; gap: 8px; }
.ti-input { flex: 1; font: 600 16px var(--mono); padding: 10px 12px; border-radius: 8px; border: 2px solid #3a4b5b; background: #0b1218; color: #e8fff1; min-width: 0; }
.ti-input:focus { outline: none; border-color: var(--xl2); box-shadow: 0 0 0 3px rgba(33,163,102,.3); }
.ti-btn { min-height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.ti-btn.primary { background: var(--xl); border-color: var(--xl2); color: #fff; }
.ti-btn:hover { filter: brightness(1.15); }
.ti-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-msg { min-height: 54px; border-radius: 10px; padding: 10px 14px; font-size: 16px; line-height: 1.4; background: var(--panel); border: 1px solid var(--line); }
.ti-msg.ok { background: #12391f; border-color: #2ecc71; color: #c8ffd9; }
.ti-msg.bad { background: #3d1515; border-color: #ff6b6b; color: #ffd6d6; }
.ti-msg.tip { background: #13314d; border-color: #4dabf7; color: #d6ecff; }
.ti-msg code { font-family: var(--mono); background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }
.ti-hist { background: #fff; border-radius: 8px; height: 170px; position: relative; }
.ti-status { font-size: 13px; color: var(--muted); }
.xg-cell.ti-target { box-shadow: inset 0 0 0 2px #e8590c; }
.xg-cell.ti-cf { background: #ffc9c9; color: #9b1c1c; }
.xg-cell.ti-err { color: #c62828; font-weight: 700; }

/* ---------- phones: try-it as a native-size full-screen panel ---------- */
.ti-mobile { position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink); overflow-y: auto; padding: 12px 12px 28px; display: none;
  font-family: var(--font); font-size: 16px; -webkit-text-size-adjust: 100%; }
.ti-mobile.show { display: block; }
.ti-mobile .tim-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ti-mobile .tim-head h3 { font-size: 18px; margin: 0; flex: 1; color: #fff; }
.ti-mobile .tryit-root { position: static; display: flex; flex-direction: column; gap: 12px; }
.ti-mobile .ti-side { order: 1; }
.ti-mobile .ti-sheet { order: 2; overflow-x: auto; max-width: 100%; }
.ti-mobile .ti-btn { min-height: 44px; }
.ti-mobile .ti-hist { height: 190px; }
.ti-mobile-note { color: var(--muted); font-size: 20px; padding: 20px; }
.rotate-hint { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  .rotate-hint { display: block; position: fixed; top: 10px; left: 10px; right: 10px; z-index: 40; background: var(--panel); border: 1px solid var(--xl);
    color: var(--ink); font: 600 14px var(--font); padding: 8px 12px; border-radius: 10px; text-align: center; }
}