body[data-week="7"] .view-tabs { display: none; }
.functions-view { max-width: 1440px; margin: auto; padding: 16px; color: #243e50; }
.functions-view [hidden] { display: none !important; }
.f7-days,.f7-actions,.f7-toolbar,.f7-case-header { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.f7-days { margin-bottom: 1rem; }
.f7-days .nav-button { color: #304d5a; background: #e8e3d7; font-size: .85rem; }
.f7-days [aria-current="step"] { background: #355d66; color: white; }
.f7-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.f7-panel { min-width: 0; padding: 1.2rem; border: 1px solid #b7c6c5; border-radius: 16px; background: #f9f7ef; margin-bottom: 1rem; }
.f7-panel h2 { margin: 0; font-size: 1.25rem; }
.f7-panel p { line-height: 1.65; }
.f7-panel pre,.f7-ticket code { white-space: pre-wrap; overflow-wrap: anywhere; }
.f7-panel .f7-signature,.f7-panel .f7-original { font: 13px/1.6 monospace; background: #213544; color: #eef6f5; padding: .9rem; border-radius: 9px; }
.f7-kind { color: #284e59; background: #e5edf0; border-left: 3px solid #57818d; padding: .6rem .75rem; font-size: .85rem; }
.f7-hint { border-left: 3px solid #668d96; padding-left: .8rem; font-size: .85rem; }
.f7-panel summary { cursor: pointer; font-weight: 600; }
.f7-help,.f7-debug { margin: .7rem 0; font-size: .85rem; }
.f7-help summary,.f7-debug summary { padding: .4rem 0; color: #44646d; }
.f7-workshop { display: flex; align-items: center; min-height: 135px; border-radius: 12px; background: #e2ece5; padding: .5rem; overflow: hidden; }
.f7-workshop img { width: 115px; height: 130px; object-fit: contain; flex-shrink: 0; animation: f7-hover 2.5s ease-in-out infinite; }
.f7-ticket { min-width: 0; flex: 1; background: #fffcf4; border: 1px dashed #9aa9a1; border-radius: 8px; padding: .8rem; }
.f7-ticket small { display: block; color: #47606d; margin-bottom: .5rem; }
.f7-ticket code { display: block; background: transparent; color: #233f50; font-weight: 700; font-size: .9rem; }
.f7-ticket p { margin: .4rem 0 0; font-size: .8rem; }
.f7-workshop[data-state="pass"] { background: #dcebd6; border-color: #638857; }
.f7-workshop[data-state="fail"] { background: #f2dfd6; border-color: #b47e64; }
.f7-case-header { justify-content: space-between; }
.f7-case-header h3 { font-size: 1rem; }
.f7-cases { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.f7-case { min-width: 0; border: 1px solid #b7c9cb; border-radius: 8px; padding: .7rem; background: #e9eff0; color: #2b4959; }
.f7-case-title { display: flex; align-items: baseline; gap: .6rem; }
.f7-case-status { flex-shrink: 0; font-weight: 700; }
.f7-case-title code { background: transparent; color: inherit; font: 13px/1.6 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.f7-case .f7-case-result { font: 12px/1.6 monospace; margin: .4rem 0 0 1.3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.f7-case-error { margin: .4rem 0 0 1.3rem; font-size: .8rem; }
.f7-inspect { background: transparent; border: 0; color: #355864; font-size: .75rem; text-decoration: underline; cursor: pointer; padding: .4rem 0 0 1.3rem; }
.f7-case[data-state="active"] { outline: 2px solid #2d6f87; }
.f7-case[data-state="pass"] { background: #dfebd9; color: #30572e; }
.f7-case[data-state="fail"] { background: #f5e0d9; color: #853c2e; }
.f7-toolbar { justify-content: space-between; margin-bottom: .7rem; }
.f7-toolbar small { font-size: .75rem; }
.f7-editor-wrap { display: flex; height: 365px; background: #172b3a; border: 1px solid #647f8b; border-radius: 10px; overflow: hidden; margin-bottom: .8rem; }
.f7-editor-wrap .f7-gutter { width: 42px; flex-shrink: 0; padding: 12px 7px; margin: 0; box-sizing: border-box; text-align: right; overflow: hidden; background: #203847; color: #9cb7c4; font: 14px/24px monospace; white-space: pre; }
.f7-source { min-width: 0; flex: 1; position: relative; overflow: hidden; }
.f7-source textarea { position: relative; z-index: 2; display: block; box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 12px; margin: 0; border: 0; border-radius: 0; background: transparent; color: #f2f6f9; font: 14px/24px monospace; tab-size: 4; white-space: pre; }
.f7-source textarea:focus { outline: 2px solid #8fc6dd; outline-offset: -2px; }
.f7-guides { position: absolute; inset: 0; pointer-events: none; font: 14px/24px monospace; }
.f7-guides i { position: absolute; height: 24px; border-left: 1px solid #8da4ad45; }
.f7-trace { position: absolute; left: 0; right: 0; height: 24px; background: #3d6276; pointer-events: none; border-left: 3px solid #8ed6db; }
.f7-actions .button { font-size: .8rem; }
.f7-feedback { background: #e2edf0; border-left: 4px solid #648897; padding: .8rem; font-size: .9rem; overflow-wrap: anywhere; }
.f7-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .6rem; }
.f7-result-grid section { min-width: 0; background: #e8eef0; padding: .7rem; border-radius: 8px; }
.f7-result-grid h3,.f7-answer h3 { font-size: .85rem; margin: 0 0 .45rem; }
.f7-result-grid small { font-size: .7rem; }
.f7-result-grid pre,.f7-answer pre { font: 13px/1.5 monospace; max-height: 150px; overflow: auto; margin-bottom: 0; }
.f7-answer { padding: .8rem; margin-top: .7rem; border-radius: 8px; background: #edf1e6; }
.f7-expected { border-top: 1px solid #c7d2c2; padding-top: .6rem; margin-top: .6rem; font-size: .85rem; }
.f7-return { margin: .8rem 0; display: grid; gap: .4rem; background: #e5ebda; padding: .8rem; border-radius: 8px; font-size: .85rem; }
.f7-return code { background: transparent; color: #354e2c; overflow-wrap: anywhere; }
.f7-progress { border-top: 1px solid #bccdcc; margin-top: 1rem; padding-top: 1rem; }
.f7-progress strong { margin-right: auto; font-size: .9rem; }
.f7-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.f7-form label { display: grid; gap: .4rem; }
@keyframes f7-hover { 50% { transform: translateY(-5px); } }
@media (max-width: 850px) { .f7-layout { grid-template-columns: 1fr; } .f7-days .nav-button { flex: 1 1 65px; } }
@media (max-width: 450px) { .functions-view { padding: 8px; } .f7-panel { padding: .8rem; } .f7-workshop img { width: 95px; height: 130px; } }
@media (prefers-reduced-motion: reduce) { .f7-workshop img { animation: none; } }