/** * EdenAbacus V2 Theme - Playful Sunny Edition * 视觉风格：奶油黄背景 + 糖果色 3D 按钮 + 绘本风粗边框 * 目标人群：儿童与学生，强调亲和力与快乐感。 */ /* ══════════════════════════════════════════════ V2 DYNAMIC THEME SYSTEM ═══════════════════════════════════════════════ */ :root { /* ── COLOUR ──────────────────────────────── */ --v2-bg-main: #FFF9E6; /* page background */ --v2-surface: #FFFFFF; /* card surface */ --v2-primary: #FF8A00; /* orange — main accent */ --v2-primary-dark: #E67E00; --v2-secondary: #4CAF50; /* green — success */ --v2-secondary-dark:#388E3C; --v2-accent: #2196F3; /* blue */ --v2-danger: #FF5252; /* red */ --v2-danger-dark: #C62828; --v2-text: #4A4A4A; /* body text */ --v2-text-dark: #333333; /* strong text */ --v2-muted: #9A9A9A; /* secondary / hint text */ --v2-green: #4CAF50; --v2-green-dark: #2E7D32; --v2-red: #FF5252; --v2-red-dark: #C62828; /* ── BORDER ──────────────────────────────── */ --v2-border-main: #E0D0B0; --v2-border-width: 3px; --v2-card-border: var(--v2-border-width) solid var(--v2-border-main); /* ── SHADOW ──────────────────────────────── */ --v2-shadow-depth: 4px; --v2-shadow-soft: 0 var(--v2-shadow-depth) 0 var(--v2-border-main); --v2-shadow-inner: inset 0 2px 5px rgba(0, 0, 0, 0.08); --v2-shadow-flat: none; /* ── RADIUS ──────────────────────────────── */ --v2-radius-card: 24px; /* large cards */ --v2-radius-chip: 12px; /* chips, small cards, setting cards */ --v2-radius-btn: 20px; /* buttons */ --v2-radius-icon: 20px; /* icon containers */ /* ── TYPOGRAPHY ──────────────────────────── */ --v2-font-main: 'Outfit', sans-serif; --v2-font-num: 'Outfit', sans-serif; --v2-size-xs: 10px; --v2-size-sm: 12px; --v2-size-md: 14px; --v2-size-body: 16px; --v2-size-lg: 18px; --v2-size-xl: 20px; --v2-size-title: 24px; --v2-weight-normal: 600; --v2-weight-bold: 800; --v2-weight-heavy: 900; /* ── INTERACTION ─────────────────────────── */ --v2-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); --v2-transition-fast: all 0.1s ease; --v2-transition-pop: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* ── BUTTON ──────────────────────────────── */ --v2-btn-height: 52px; --v2-btn-font-size: var(--v2-size-lg); --v2-btn-radius: var(--v2-radius-btn); --v2-btn-shadow: 0 8px 0 var(--v2-primary-dark); /* ── LAYOUT ──────────────────────────────── */ --v2-gap-screen: 20px; /* gap between cards on screen */ --v2-gap-card: 8px; /* gap inside a card */ --v2-pad-card: 20px 15px; --v2-pad-screen: 10px 6px; --v2-header-height: 90px; /* ── LEGACY ALIASES (keep for backwards compat) ── */ --v2-text-main: var(--v2-text); --v2-card-bg: var(--v2-surface); --v2-bg: var(--v2-bg-main); --v2-shadow-raised: var(--v2-shadow-soft); --v2-glass: none; /* ── MODE ICON TOKENS (sunny defaults) ────────── Each training mode has a bg + accent color, used by [data-mode=X] .v2-neu-icon rules below. Themes override these in their own .v2-theme-X block. */ --v2-mode-flash-bg: #FDF2F8; --v2-mode-flash-accent: #DB2777; --v2-mode-look-bg: #FFF7ED; --v2-mode-look-accent: #F97316; --v2-mode-listen-bg: #E0F2FE; --v2-mode-listen-accent:#0EA5E9; --v2-mode-speed-bg: #F0FDF4; --v2-mode-speed-accent: #16A34A; --v2-mode-challenge-bg: #FEF9C3; --v2-mode-challenge-accent: #CA8A04; --v2-mode-ranking-bg: #FEE2E2; --v2-mode-ranking-accent: #DC2626; } /* 1. Playful Sunny (Default) */ .v2-theme-sunny { --v2-bg-main: #FFF9E6; --v2-primary: #FF8A00; --v2-border-main: #E0D0B0; --v2-font-num: 'Outfit', sans-serif; /* 大数字：橙红实色 + 轻奶油描边，配奶油黄背景 */ --v2-display-color: #E65100; --v2-display-glow: 0 2px 0 rgba(255, 138, 0, 0.18); --v2-display-divider: #E67E00; } /* 2. Modern Premium (Apple Style) */ .v2-theme-modern { --v2-bg-main: #F2F2F7; --v2-primary: #007AFF; --v2-primary-dark: #0051D5; --v2-secondary: #34C759; --v2-border-main: rgba(0,0,0,0.1); --v2-card-bg: rgba(255, 255, 255, 0.85); --v2-text-main: #1C1C1E; --v2-card-border: 1px solid rgba(0,0,0,0.1); --v2-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08); --v2-btn-shadow: 0 8px 0 #0051D5; --v2-glass: blur(20px); --v2-font-num: 'Montserrat', sans-serif; /* 现代感字体 */ /* Cool/neutral palette: cyan, indigo, magenta, lime, teal, blue */ --v2-mode-flash-bg: #E0F7FA; --v2-mode-flash-accent: #00ACC1; --v2-mode-look-bg: #F3E5F5; --v2-mode-look-accent: #8E24AA; --v2-mode-listen-bg: #E8EAF6; --v2-mode-listen-accent: #3949AB; --v2-mode-speed-bg: #F1F8E9; --v2-mode-speed-accent: #689F38; --v2-mode-challenge-bg: #FFF8E1; --v2-mode-challenge-accent: #F57C00; --v2-mode-ranking-bg: #FCE4EC; --v2-mode-ranking-accent: #D81B60; /* 大数字：深石板色 + 极轻阴影，干净 Apple 风 */ --v2-display-color: #1C1C1E; --v2-display-glow: 0 1px 2px rgba(0, 0, 0, 0.12); --v2-display-divider: #007AFF; } /* 3. Space Adventure (Neon Style) */ .v2-theme-space { --v2-bg-main: #0B0E14; --v2-primary: #BB86FC; --v2-primary-dark: #7C4DFF; --v2-secondary: #03DAC6; --v2-border-main: #BB86FC; --v2-card-bg: #1E1E1E; --v2-text-main: #E0E0E0; --v2-text-dark: #F5F0FF; /* 深色底上的标题等通用文字 */ --v2-muted: #9AA3B8; --v2-card-border: 2px solid var(--v2-primary); /* 大数字：紫白霓虹 + 紫青双层辉光 */ --v2-display-color: #F5F0FF; --v2-display-glow: 0 0 12px rgba(187, 134, 252, 0.85), 0 0 28px rgba(187, 134, 252, 0.55), 0 0 60px rgba(3, 218, 198, 0.35); --v2-display-divider: #03DAC6; --v2-display-divider-glow: 0 0 10px rgba(3, 218, 198, 0.7); --v2-shadow-soft: 0 0 20px rgba(187, 134, 252, 0.3); --v2-btn-shadow: 0 8px 0 #7C4DFF; --v2-font-num: 'Space Mono', monospace; /* 科技感等宽字体 */ /* Deep neon panels — dark bg, glowing accents */ --v2-mode-flash-bg: #1A1033; --v2-mode-flash-accent: #BB86FC; --v2-mode-look-bg: #001A1F; --v2-mode-look-accent: #03DAC6; --v2-mode-listen-bg: #0F1B33; --v2-mode-listen-accent: #82B1FF; --v2-mode-speed-bg: #0F1F14; --v2-mode-speed-accent: #69F0AE; --v2-mode-challenge-bg: #2A1A0F; --v2-mode-challenge-accent: #FFAB40; --v2-mode-ranking-bg: #2A0F1A; --v2-mode-ranking-accent: #FF80AB; } /* 4. Sakura (Soft Pink) */ .v2-theme-sakura { --v2-bg-main: #FFF0F5; --v2-primary: #EC4899; --v2-primary-dark: #BE185D; --v2-secondary: #F472B6; --v2-btn-shadow: 0 8px 0 #BE185D; --v2-border-main: #F9A8D4; /* deeper pink so cards have visible outline */ --v2-card-bg: #FFF7FB; /* faintly tinted surface */ --v2-card-border: var(--v2-border-width) solid #F9A8D4; --v2-shadow-soft: 0 var(--v2-shadow-depth) 0 #F9A8D4; --v2-font-num: 'Outfit', sans-serif; /* Warm pastel palette tied to sakura/peach */ --v2-mode-flash-bg: #FCE7F3; --v2-mode-flash-accent: #DB2777; --v2-mode-look-bg: #FFE4E6; --v2-mode-look-accent: #E11D48; --v2-mode-listen-bg: #F5E1FF; --v2-mode-listen-accent: #9333EA; --v2-mode-speed-bg: #FFE4F1; --v2-mode-speed-accent: #BE185D; --v2-mode-challenge-bg: #FEF3C7; --v2-mode-challenge-accent: #D97706; --v2-mode-ranking-bg: #FFD8E4; --v2-mode-ranking-accent: #BE123C; /* 大数字：深玫红 + 粉色柔光 */ --v2-display-color: #9D174D; --v2-display-glow: 0 2px 0 rgba(244, 114, 182, 0.35), 0 0 18px rgba(236, 72, 153, 0.18); --v2-display-divider: #EC4899; } /* 5. Ocean (Cool Blue) */ .v2-theme-ocean { --v2-bg-main: #E0F2FE; --v2-primary: #0EA5E9; --v2-primary-dark: #0369A1; --v2-secondary: #06B6D4; --v2-btn-shadow: 0 8px 0 #0369A1; --v2-border-main: #7DD3FC; /* sky-300 — visible against pale-blue page */ --v2-card-bg: #F5FBFF; /* cool-tinted surface */ --v2-card-border: var(--v2-border-width) solid #7DD3FC; --v2-shadow-soft: 0 var(--v2-shadow-depth) 0 #7DD3FC; --v2-font-num: 'Outfit', sans-serif; /* Aqueous palette: cyan, teal, deep blue, with seafoam accents */ --v2-mode-flash-bg: #CFFAFE; --v2-mode-flash-accent: #0891B2; --v2-mode-look-bg: #DBEAFE; --v2-mode-look-accent: #2563EB; --v2-mode-listen-bg: #E0E7FF; --v2-mode-listen-accent: #4F46E5; --v2-mode-speed-bg: #CCFBF1; --v2-mode-speed-accent: #0D9488; --v2-mode-challenge-bg: #FEF9C3; --v2-mode-challenge-accent: #0369A1; --v2-mode-ranking-bg: #BAE6FD; --v2-mode-ranking-accent: #0C4A6E; /* 大数字：深海军蓝 + 青色水波柔光 */ --v2-display-color: #0C4A6E; --v2-display-glow: 0 2px 0 rgba(125, 211, 252, 0.45), 0 0 20px rgba(6, 182, 212, 0.22); --v2-display-divider: #0EA5E9; } /* 6. Forest (Calm Green) */ .v2-theme-forest { --v2-bg-main: #ECFDF5; --v2-primary: #059669; --v2-primary-dark: #047857; --v2-secondary: #10B981; --v2-btn-shadow: 0 8px 0 #047857; --v2-border-main: #6EE7B7; /* emerald-300 — visible against mint page */ --v2-card-bg: #FFFFFF; /* solid white for clear contrast on mint bg */ --v2-card-border: var(--v2-border-width) solid #6EE7B7; --v2-shadow-soft: 0 var(--v2-shadow-depth) 0 #6EE7B7; --v2-font-num: 'Outfit', sans-serif; /* Earthen palette: lime, leaf, moss, bark */ --v2-mode-flash-bg: #FEF3C7; --v2-mode-flash-accent: #CA8A04; --v2-mode-look-bg: #D1FAE5; --v2-mode-look-accent: #047857; --v2-mode-listen-bg: #DCFCE7; --v2-mode-listen-accent: #15803D; --v2-mode-speed-bg: #ECFCCB; --v2-mode-speed-accent: #65A30D; --v2-mode-challenge-bg: #FFEDD5; --v2-mode-challenge-accent: #C2410C; --v2-mode-ranking-bg: #FEE2E2; --v2-mode-ranking-accent: #B91C1C; /* 大数字：墨绿森林色 + 嫩芽柔光 */ --v2-display-color: #064E3B; --v2-display-glow: 0 2px 0 rgba(110, 231, 183, 0.5), 0 0 18px rgba(16, 185, 129, 0.2); --v2-display-divider: #059669; } /* 7. Kaamatan / 丰收节 (Sabah Harvest Festival) 配色灵感：金黄稻穗 + 沙巴庆典红 + 椰风绿 + 竹木棕。 */ .v2-theme-harvest { --v2-bg-main: #FFFBEB; /* warm rice-paper cream */ --v2-primary: #D97706; /* harvest amber */ --v2-primary-dark: #B45309; --v2-secondary: #DC2626; /* festival red */ --v2-border-main: #FCD34D; /* golden rice stalk */ --v2-card-bg: #FFFEF7; /* paler cream surface */ --v2-card-border: var(--v2-border-width) solid #FCD34D; --v2-shadow-soft: 0 var(--v2-shadow-depth) 0 #FCD34D; --v2-btn-shadow: 0 8px 0 #B45309; --v2-font-num: 'Outfit', sans-serif; /* Mode tints: gold, red, palm-green, bamboo-brown, sunset, hibiscus */ --v2-mode-flash-bg: #FEF3C7; --v2-mode-flash-accent: #D97706; --v2-mode-look-bg: #FEE2E2; --v2-mode-look-accent: #DC2626; --v2-mode-listen-bg: #DCFCE7; --v2-mode-listen-accent: #15803D; --v2-mode-speed-bg: #FED7AA; --v2-mode-speed-accent: #C2410C; --v2-mode-challenge-bg: #FCE7F3; --v2-mode-challenge-accent: #BE185D; --v2-mode-ranking-bg: #FEF9C3; --v2-mode-ranking-accent: #A16207; /* 大数字：丰收红 + 金穗柔光 */ --v2-display-color: #B91C1C; --v2-display-glow: 0 2px 0 rgba(252, 211, 77, 0.55), 0 0 18px rgba(217, 119, 6, 0.22); --v2-display-divider: #D97706; } #app { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--v2-bg-main); display: flex; flex-direction: column; color: var(--v2-text); font-family: 'Outfit', 'Montserrat', sans-serif; overflow: hidden; } /* Dot pattern background — color is themable via --v2-dot-color */ #app::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--v2-dot-color, rgba(224, 208, 176, 0.3)) 2px, transparent 2px); background-size: var(--v2-dot-size, 30px) var(--v2-dot-size, 30px); z-index: -1; } /* Harvest theme: warm cream gradient + golden rice-stalk dots */ .v2-theme-harvest #app { background: radial-gradient(circle at 15% 10%, rgba(252, 211, 77, 0.35) 0%, transparent 45%), radial-gradient(circle at 85% 90%, rgba(220, 38, 38, 0.18) 0%, transparent 50%), linear-gradient(160deg, #FFFBEB 0%, #FEF3C7 55%, #FFE8D6 100%); } .v2-theme-harvest { --v2-dot-color: rgba(217, 119, 6, 0.22); /* golden amber dots */ --v2-dot-size: 28px; } /* ══════════════════════════════════════════════ SCREEN & CONTENT ═══════════════════════════════════════════════ */ .v2-screen { display: none; flex: 1; height: 100%; flex-direction: column; overflow: hidden; position: relative; animation: v2PopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); width: 100%; max-width: 100%; } .v2-screen.active { display: flex; } @keyframes v2PopIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .v2-header { font-size: var(--v2-size-title); font-weight: var(--v2-weight-heavy); text-align: center; padding: 15px 10px; color: var(--v2-primary); text-shadow: 2px 2px 0 var(--v2-surface); position: relative; display: flex; justify-content: center; align-items: center; } .v2-header-gear { position: absolute; right: 20px; font-size: 20px; color: var(--v2-primary); cursor: pointer; transition: transform 0.3s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 12px; box-shadow: 2px 2px 0 var(--v2-border-main); } .v2-header-gear:active { transform: scale(0.9) rotate(45deg); } .v2-content { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; box-sizing: border-box; } .v2-footer { padding: 16px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: white; border-top: var(--v2-card-border); border-radius: 40px 40px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.04); width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════ UNIFIED BUTTON SYSTEM ═══════════════════════════════════════════════ */ /* Base button — all footer / content buttons inherit this */ .v2-footer button, .v2-content button:not(.v2-neu-key):not(.v2-step-btn) { width: 95%; max-width: 1000px; height: var(--v2-btn-height); padding: 0 24px; border-radius: var(--v2-btn-radius); border: none; outline: none; background: var(--v2-primary); color: var(--v2-surface); font-family: var(--v2-font-main); font-size: var(--v2-btn-font-size); font-weight: var(--v2-weight-heavy); cursor: pointer; position: relative; box-shadow: var(--v2-btn-shadow); transition: var(--v2-transition-fast); margin: 0 auto; display: flex; align-items: center; justify-content: center; } .v2-footer button:active, .v2-content button:not(.v2-neu-key):not(.v2-step-btn):active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; } /* Primary action button (Start / Generate) */ .v2-start-btn { background: var(--v2-primary); color: var(--v2-surface); box-shadow: var(--v2-btn-shadow); width: 100%; max-width: 1000px; } .v2-start-btn:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; } .v2-start-btn.disabled { background: #BDC3C7 !important; color: #ECF0F1 !important; box-shadow: none !important; opacity: 0.6 !important; cursor: not-allowed !important; pointer-events: none !important; } /* Secondary button (last in footer = cancel/back) */ .v2-footer button:last-child:not(.v2-start-btn) { background: #F0F0F0; color: var(--v2-muted); box-shadow: 0 var(--v2-shadow-depth) 0 #D0D0D0; } .v2-footer button:last-child:not(.v2-start-btn):active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; } /* Result-screen home/back button — keep it clearly clickable (colored), even when it becomes the last footer button (retry hidden). */ #v2-result-home-btn, .v2-footer button:last-child#v2-result-home-btn { background: var(--v2-accent); color: #fff; box-shadow: 0 var(--v2-shadow-depth) 0 #1976D2; } #v2-result-home-btn:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; } /* Back button (neumorphic style) */ .v2-back-btn { background: #EDF1F5; color: var(--v2-text); box-shadow: 3px 3px 6px #d1d9e6, -3px -3px 6px var(--v2-surface); } .v2-back-btn:active { box-shadow: var(--v2-shadow-inner); } /* ══════════════════════════════════════════════ PLAYFUL CARDS (MODE SELECT) ═══════════════════════════════════════════════ */ .v2-neu-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; width: 100%; max-width: 1000px; /* 提升至 1000px，兼顾视觉中心与大气感 */ margin: 0 auto; box-sizing: border-box; padding: 5px; } /* 网格内的卡片应该不受 max-width 限制 */ .v2-neu-grid .v2-neu-card { max-width: none; margin: 0; } .v2-neu-card { background: var(--v2-card-bg); border: var(--v2-card-border); border-radius: var(--v2-radius-card); padding: 20px 15px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: var(--v2-shadow-soft); transition: var(--v2-transition); width: 100%; max-width: 1000px; margin: 0 auto; box-sizing: border-box; } .v2-neu-card:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; } .v2-neu-icon { font-size: 36px; width: 80px; height: 80px; background: var(--v2-bg-main); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; background-size: cover; background-position: center; } /* 各模式图标颜色：由 [data-mode=X] 驱动，主题级 token 控制配色 */ .v2-neu-card[data-mode="flash"] .v2-neu-icon { background: var(--v2-mode-flash-bg); color: var(--v2-mode-flash-accent); } .v2-neu-card[data-mode="look"] .v2-neu-icon { background: var(--v2-mode-look-bg); color: var(--v2-mode-look-accent); } .v2-neu-card[data-mode="listen"] .v2-neu-icon { background: var(--v2-mode-listen-bg); color: var(--v2-mode-listen-accent); } .v2-neu-card[data-mode="speed"] .v2-neu-icon { background: var(--v2-mode-speed-bg); color: var(--v2-mode-speed-accent); } .v2-neu-card[data-mode="challenge"] .v2-neu-icon { background: var(--v2-mode-challenge-bg); color: var(--v2-mode-challenge-accent); } .v2-neu-card[data-mode="ranking"] .v2-neu-icon { background: var(--v2-mode-ranking-bg); color: var(--v2-mode-ranking-accent); } .v2-neu-title { font-weight: 900; font-size: 19px; color: var(--v2-text); } .v2-neu-desc { font-size: 11px; color: var(--v2-muted); font-weight: 700; text-align: center; } /* ══════════════════════════════════════════════ SETTINGS UI (PLAYFUL LIST) ═══════════════════════════════════════════════ */ .v2-settings-grid { width: 100%; max-width: 1000px; } .v2-setting-item { background: white; border: 3px solid var(--v2-border-main); border-radius: 28px; padding: 20px; margin-bottom: 16px; box-shadow: 0 6px 0 var(--v2-border-main); } .v2-setting-item label { font-weight: 900; font-size: 15px; color: var(--v2-muted); display: flex; justify-content: space-between; margin-bottom: 15px; } /* Range Input Chunky */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; background: #EEE; border-radius: 10px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; background: white; border: 4px solid var(--v2-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.1); } .v2-range-value { background: var(--v2-primary); color: white; padding: 4px 12px; border-radius: 12px; font-weight: 900; font-family: 'Outfit', sans-serif; } /* ══════════════════════════════════════════════ PLAYER & ENGINE (SUNNY STYLE) ═══════════════════════════════════════════════ */ .v2-speed-card { background: white; border: 5px solid var(--v2-primary); border-radius: 50px; padding: 50px 30px; text-align: center; box-shadow: 0 15px 0 rgba(255, 138, 0, 0.2); width: 90%; max-width: 1000px; position: relative; } .v2-speed-card::after { content: '⭐'; position: absolute; top: -20px; right: -20px; font-size: 40px; transform: rotate(15deg); } .v2-num-display { font-size: 100px; font-weight: 900; font-family: var(--v2-font-num); color: var(--v2-text-dark); margin-bottom: 10px; text-align: center; width: 100%; } .v2-feedback-card { background: white; border: 6px solid var(--v2-primary); border-radius: 40px; padding: 30px 20px; text-align: center; width: 85%; max-width: 1000px; box-shadow: 0 12px 0 rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: v2PopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* 答对场景：SFX + 绿勾已经传达，去掉外框/底色/阴影，更安静 */ .v2-feedback-card.correct { background: transparent; border: none !important; /* 覆盖 inline border-color */ box-shadow: none; padding: 10px; } .v2-feedback-icon { font-size: 64px; margin-bottom: 15px; } .v2-feedback-msg { font-size: 20px; font-weight: 900; color: var(--v2-text); line-height: 1.4; } .v2-num-pos { color: #2196F3; } /* 蓝色 */ .v2-num-neg { color: #FF5252; } /* 红色 */ /* ⚠️ REMARK: 乘除法横向显示（闪算 + 看算模式共用） — 样式由 FlashEngineV2.js 和 LookEngineV2.js 引用 */ .v2-num-multi { white-space: nowrap; letter-spacing: 1px; /* 调整为更平衡的比例，让 3x2/3x3 依然醒目但能装下 */ font-size: clamp(50px, 12vw, 100px) !important; font-weight: 900; font-family: var(--v2-font-num); width: 100%; text-align: center; color: var(--v2-text-dark); } .v2-step-info { display: inline-block; padding: 8px 20px; background: #F5F5F5; border-radius: 25px; font-size: 14px; font-weight: 900; color: var(--v2-muted); } /* ══════════════════════════════════════════════ FLASH MODE SPECIFIC ═══════════════════════════════════════════════ */ /* ══════════════════════════════════════════════ FLASH MODE V2 REFINED LAYOUT ═══════════════════════════════════════════════ */ .v2-flash-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .v2-flash-controls { width: 100%; display: flex; justify-content: space-between; padding: 10px 0; } .v2-mini-btn { background: white !important; color: #666 !important; padding: 8px 15px !important; font-size: 14px !important; border-radius: 12px !important; box-shadow: 0 4px 0 #DDD !important; width: auto !important; max-width: none !important; margin: 0 !important; } .v2-mini-btn:active { transform: translateY(2px) !important; box-shadow: 0 2px 0 #DDD !important; } /* Mouth Progress Bar */ .v2-mouth-progress-wrap { width: 100%; height: 12px; background: rgba(0,0,0,0.05); border-radius: 6px; overflow: hidden; margin: 20px 0; } .v2-mouth-progress-bar { height: 100%; background: var(--v2-secondary); border-radius: 6px; transition: width 0.2s ease; } .v2-mouth-info { font-size: 18px; font-weight: 900; color: var(--v2-muted); background: white; padding: 5px 20px; border-radius: 20px; border: 2px solid var(--v2-border-main); } @keyframes v2PulseQuick { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } /* ══════════════════════════════════════════════ PLAYER & ENGINE (SUNNY STYLE) ═══════════════════════════════════════════════ */ .v2-player-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; position: relative; overflow: hidden; } .v2-flash-stage { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; width: 100%; height: 100%; } /* ⚠️ REMARK: 题目显示（闪算 + 听算模式） — 样式由 FlashEngineV2.js 和 ListenEngineV2.js 引用 颜色/辉光由各主题在 token 层定义：--v2-display-color / --v2-display-glow */ .v2-flash-display, .v2-look-item { color: var(--v2-display-color, var(--v2-text-dark)); text-shadow: var(--v2-display-glow, none); } .v2-flash-display { font-size: 160px; font-weight: 900; font-family: var(--v2-font-num); animation: v2PulseQuick 0.15s ease-out; } .v2-input-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; height: 100%; } /* ══════════════════════════════════════════════ NUMPAD V2 (PLAYFUL & RESPONSIVE) ═══════════════════════════════════════════════ */ .v2-input-area .v2-input-label { font-size: 16px; font-weight: 800; color: var(--v2-text); margin: 0; opacity: 1; } .v2-neu-input-box { width: 90%; max-width: 300px; height: 80px; background: var(--v2-bg); border: none; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 900; color: var(--v2-accent); box-shadow: var(--v2-shadow-inner); position: relative; /* 为绝对定位光标做准备 */ } /* 确保数字展示区域可以容纳绝对定位的光标 */ #v2-input-val, #v2-answer-display { position: relative; display: inline-flex; align-items: center; justify-content: center; } /* 确保光标不占位，且不重叠 */ .v2-cursor { display: none !important; } .v2-neu-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 90%; max-width: 300px; justify-items: center; } .v2-neu-key { width: 100%; max-width: 85px; aspect-ratio: 1 / 1; height: auto; min-height: 60px; background: var(--v2-surface); border: var(--v2-card-border); border-radius: var(--v2-radius-card); font-size: 26px; font-weight: var(--v2-weight-heavy); color: var(--v2-text); cursor: pointer; box-shadow: var(--v2-shadow-soft); transition: var(--v2-transition-fast); display: flex; align-items: center; justify-content: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-neu-key:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none; background: var(--v2-bg-main); } @keyframes v2Blink { 50% { opacity: 0; } } /* ══════════════════════════════════════════════ NEU-STICKER CARDS (拟物贴纸风 - 还原版) ═══════════════════════════════════════════════ */ .v2-neu-card .v2-neu-title { font-size: 18px; /* 调大标题 */ font-weight: 900; color: var(--v2-text); } .v2-neu-card .v2-neu-desc { font-size: 12px; opacity: 0.6; font-weight: 600; margin-top: 4px; } #v2-screen-player .screen-header { padding: 0 20px; display: flex; align-items: center; justify-content: center; background: var(--v2-bg-main); z-index: 100; position: relative; border-bottom: 2px solid rgba(0,0,0,0.05); height: 90px; } .v2-header-side { flex: 1; display: flex; justify-content: flex-start; } .v2-global-progress { flex: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; } .v2-progress-stats { display: flex; gap: 8px; } .progress-pill { background: var(--v2-primary); color: white; font-size: 11px; font-weight: 900; padding: 4px 12px; border-radius: 50px; box-shadow: 0 3px 0 rgba(0,0,0,0.1); white-space: nowrap; } .v2-progress-bar-wrap { width: 100%; max-width: 180px; height: 8px; background: rgba(0,0,0,0.1); border-radius: 12px; overflow: hidden; border: none; } .v2-progress-bar { height: 100%; background: linear-gradient(90deg, var(--v2-secondary), var(--v2-primary)); width: 0%; transition: width 0.1s linear, background-color 0.2s ease; border-radius: 12px; box-shadow: 0 0 8px rgba(108, 99, 255, 0.4); } .v2-header-controls { flex: 1; display: flex; justify-content: flex-end; gap: 12px; } /* 强力锁定：确保训练界面顶部的三个按钮风格完全一致（白底、粗边、3D投影） */ #v2-screen-player .screen-header button.back-btn, #v2-screen-player .screen-header button.pause-btn, #v2-screen-player .screen-header button.skip-btn { width: 48px !important; height: 48px !important; background: white !important; border: 3px solid var(--v2-border-main) !important; border-radius: 15px !important; color: var(--v2-primary) !important; box-shadow: 0 4px 0 var(--v2-border-main) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; cursor: pointer !important; transition: all 0.1s !important; padding: 0 !important; margin: 0 !important; outline: none !important; } #v2-screen-player .screen-header button:active { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--v2-border-main) !important; } /* ══════════════════════════════════════════════ RESULT PAGE V2 ═══════════════════════════════════════════════ */ .v2-result-card { background: white; border: var(--v2-card-border); border-radius: var(--v2-radius-card); padding: 30px 20px; width: 90%; max-width: 1000px; box-shadow: var(--v2-shadow-soft); text-align: center; margin: 0 auto; animation: v2PopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-height: 80vh; display: flex; flex-direction: column; } .v2-result-details-header { margin-top: 25px; font-size: 14px; font-weight: 900; color: var(--v2-muted); text-transform: uppercase; border-top: 2px dashed #EEE; padding-top: 15px; margin-bottom: 10px; } .v2-result-details-list { flex: 1; overflow-y: auto; padding-right: 5px; margin-bottom: 10px; } .v2-detail-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: #F9F9F9; border-radius: 15px; margin-bottom: 8px; border: 2px solid transparent; } .v2-detail-item.correct { background: rgba(76, 175, 80, 0.05); border-color: rgba(76, 175, 80, 0.1); } .v2-detail-item.wrong { background: rgba(255, 82, 82, 0.05); border-color: rgba(255, 82, 82, 0.1); } .v2-detail-item .idx { font-weight: 900; color: var(--v2-muted); width: 30px; } .v2-detail-item .detail-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-left: 10px; } .v2-detail-item .q-text { font-size: 15px; font-weight: 900; color: #555; margin-bottom: 4px; } .v2-detail-item .ans-group { display: flex; gap: 12px; font-size: 13px; font-weight: 900; } .v2-detail-item .correct-ans { color: var(--v2-secondary); } .v2-detail-item .user-ans { color: var(--v2-danger); text-decoration: none; /* 移除中划线，改为文字对比更清晰 */ opacity: 0.8; } /* Custom Scrollbar for details */ .v2-result-details-list::-webkit-scrollbar { width: 6px; } .v2-result-details-list::-webkit-scrollbar-thumb { background: #DDD; border-radius: 10px; } .v2-score-header { margin-bottom: 30px; } .v2-stars { font-size: 40px; margin-bottom: 20px; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.1)); } .v2-score-circle { width: 140px; height: 140px; background: var(--v2-bg-main); border: 8px solid var(--v2-secondary); border-radius: 50%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 6px 0 rgba(0,0,0,0.05); } .v2-score-num { font-size: 38px; font-weight: 900; color: var(--v2-secondary); } .v2-score-label { font-size: 14px; font-weight: 900; color: var(--v2-muted); } .v2-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; } .v2-stat-item { background: #FDFDFD; padding: 15px 5px; border-radius: var(--v2-radius-chip); border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); } .v2-stat-item .label { display: block; font-size: 11px; color: var(--v2-muted); font-weight: 900; margin-bottom: 5px; } .v2-stat-item .val { display: block; font-size: 18px; font-weight: 900; color: var(--v2-text-dark); } .v2-result-message { font-size: 18px; font-weight: 900; color: var(--v2-primary); padding: 0 10px; } /* Bento Grid Layout for Homework Results */ .v2-bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; text-align: left; width: 100%; box-sizing: border-box; } .v2-bento-card { background: #F8FAFC; border: 3px solid var(--v2-border-main); border-radius: 18px; padding: 14px 18px; box-shadow: 3px 3px 0 var(--v2-border-main); transition: all 0.2s ease; box-sizing: border-box; } .v2-bento-card:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--v2-border-main); } .v2-bento-card .bento-title { font-size: 11px; font-weight: 900; color: var(--v2-muted); text-transform: uppercase; letter-spacing: 0.5px; } .v2-bento-card .bento-value { font-size: 24px; font-weight: 900; color: var(--v2-text-dark); margin-top: 6px; } /* Ceremony header customisation */ .v2-homework-ceremony { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; } .v2-score-circle.active-hw { border-color: #6366F1; background: linear-gradient(135deg, #EEF2FF, white); } .mood-item { transition: all 0.2s ease; } .mood-item:hover { transform: scale(1.1); } #v2-teacher-sub-content { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 16px; box-sizing: border-box; } /* ══════════════════════════════════════════════ THEME SELECTOR (SKIN STORE) ═══════════════════════════════════════════════ */ .v2-theme-selector-wrap { margin-bottom: 20px; background: white; padding: 20px; border-radius: var(--v2-radius-card); border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .v2-section-label { display: block; font-size: 14px; font-weight: 900; color: var(--v2-muted); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .v2-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .v2-theme-chip { background: white; border: var(--v2-card-border); border-radius: var(--v2-radius-chip); padding: 15px 10px; text-align: center; position: relative; cursor: pointer; transition: var(--v2-transition); box-shadow: var(--v2-shadow-soft); touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-theme-chip.active { border-color: var(--v2-primary); background: var(--v2-bg-main); transform: translateY(-5px); box-shadow: 0 8px 0 var(--v2-primary); } .v2-theme-chip.locked { opacity: 0.6; filter: grayscale(0.8); background: #F5F5F5; } .v2-theme-preview { font-size: 32px; margin-bottom: 8px; } .v2-theme-name { font-size: 13px; font-weight: 900; color: var(--v2-muted); } .v2-theme-lock { position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid white; } /* ══════════════════════════════════════════════ SETTINGS V2 (OPTIMIZED) ═══════════════════════════════════════════════ */ .v2-settings-list { width: 100%; max-width: 1000px; padding: 0; display: flex; flex-direction: column; gap: 12px; transition: all 0.3s ease; align-items: center; margin: 0 auto; } .v2-setting-card { background: white; border-radius: var(--v2-radius-card); padding: 20px 15px; border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); transition: transform 0.2s, opacity 0.2s; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto; } .v2-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .v2-card-icon { font-size: 20px; color: var(--v2-primary); opacity: 0.85; flex-shrink: 0; } .v2-card-label { font-size: 17px; font-weight: 900; color: var(--v2-text-dark); letter-spacing: 0.3px; flex: 1; } .v2-card-body { width: 100%; display: flex; flex-direction: column; gap: 12px; } /* 高级拟物步进器 (Premium Neumorphic Stepper) */ .v2-stepper { display: flex; align-items: center; justify-content: center; gap: 0; background: #F0F2F5; padding: 4px; border-radius: 14px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); width: 100%; max-width: 240px; margin: 0 auto; box-sizing: border-box; } .v2-step-btn { width: 32px; height: 32px; border: none; outline: none; border-radius: 50%; background: var(--v2-primary); color: var(--v2-surface); box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--v2-size-body); font-weight: var(--v2-weight-heavy); transition: var(--v2-transition-fast); flex-shrink: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-step-btn:active { transform: scale(0.88); background: var(--v2-primary-dark); } .v2-step-value { flex: 1; text-align: center; font-size: var(--v2-size-lg); font-weight: var(--v2-weight-heavy); color: var(--v2-text); padding: 8px 12px; min-width: 40px; cursor: pointer; transition: var(--v2-transition-fast); background: transparent; border-radius: 14px; box-shadow: none; display: flex; align-items: center; justify-content: center; } .v2-step-value:hover { color: var(--v2-primary); } .v2-step-input { width: 100%; height: 100%; background: transparent; border: none; outline: none; text-align: center; font-size: var(--v2-size-lg); font-weight: var(--v2-weight-heavy); color: var(--v2-text); font-family: inherit; -moz-appearance: textfield !important; appearance: textfield !important; padding: 0 !important; margin: 0 !important; } .v2-step-input::-webkit-outer-spin-button, .v2-step-input::-webkit-inner-spin-button { display: none !important; -webkit-appearance: none !important; margin: 0 !important; } /* Level Chips (自适应网格版) */ .v2-level-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); gap: 12px; width: 100%; box-sizing: border-box; } .v2-level-chip { background: #FAFAFA; border-radius: 14px; padding: 10px 4px; min-height: 85px; text-align: center; border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); transition: var(--v2-transition); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; overflow: hidden; min-width: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-level-chip.active { background: white; border-color: var(--v2-secondary); color: var(--v2-secondary); box-shadow: 0 var(--v2-shadow-depth) 0 var(--v2-secondary); transform: translateY(-2px); } .v2-level-chip:active { transform: scale(0.95); box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); } .v2-level-chip .icon { font-size: 18px; display: block; transition: transform 0.2s; } .v2-level-chip.active .icon { transform: scale(1.2); } .v2-level-chip .name { font-size: 12px; font-weight: 900; } /* Chip Group Settings (通用) */ .v2-chip-group { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; width: 100%; padding: 5px 0; box-sizing: border-box; } .v2-setting-chip { flex: 1; min-width: 0; /* 允许弹性压缩，彻底防止横向溢出 */ background: #F5F5F5; border-radius: 12px; padding: 8px 2px; /* 压缩内边距，释放横向宽度 */ display: flex; flex-direction: column; align-items: center; gap: 4px; border: var(--v2-border-width) solid #F5F5F5; transition: var(--v2-transition); cursor: pointer; box-sizing: border-box; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-setting-chip.active { background: white; border-color: var(--v2-primary); box-shadow: 0 var(--v2-shadow-depth) 0 var(--v2-primary); transform: translateY(-2px); } .v2-setting-chip:active { transform: scale(0.95); box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); } .v2-setting-chip .icon { font-size: 20px; /* 统一图标字号 */ height: 28px; width: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s; /* 强制 emoji 与符号渲染口径一致，防止 ⚡ / 👀 / 👂 高度参差 */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; text-align: center; flex: 0 0 auto; } .v2-setting-chip.active .icon { transform: scale(1.15); } .v2-setting-chip .label { font-size: 13px; /* 优化文字字号至 13px，在极窄屏幕上也能完美展示 */ font-weight: 900; color: var(--v2-muted); transition: var(--v2-transition); text-align: center; line-height: 1.25; min-height: 2.5em; /* 锁定两行高度，防止图标随标签行数上下漂移 */ display: flex; align-items: center; justify-content: center; } .v2-setting-chip.active .label { color: var(--v2-primary); transform: scale(1.03); /* 激活时微调放大，保证排版平滑 */ } /* Multi-Chip Group (数字矩阵全景版 - 分行优化) */ /* 紧凑型三联排卡片 (题数、口数、位数) */ .v2-stepper-group-row { display: flex; flex-direction: column; gap: 8px; width: 100%; } .v2-multi-layout { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* Stepper Group/Pair Styling (Horizontal) */ .v2-stepper-pair-horizontal { display: flex; justify-content: center; align-items: flex-end; width: 100%; gap: 24px; padding: 16px 0; } .v2-stepper-row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; width: 100%; gap: 12px; padding: 16px 0; } .v2-stepper-mini-item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; } .v2-mixed-row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; gap: 12px; padding: 16px 0; } .v2-mixed-item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; } .v2-mixed-item.stepper-item { justify-content: center; } .v2-mixed-item.toggle-item { justify-content: center; } .v2-mixed-item.stepper-item .v2-stepper { min-width: 120px; } .v2-mixed-item.toggle-item .v2-toggle-inline-container { display: flex; align-items: center; justify-content: center; } .v2-stepper-mini { display: flex; flex-direction: column; align-items: center; gap: 10px; } .v2-stepper-mini .mini-label, .v2-stepper-mini-item .mini-label { font-size: 12px; font-weight: 900; color: var(--v2-muted); text-transform: uppercase; letter-spacing: 0.3px; display: block; text-align: center; width: 100%; line-height: 1.2; } .v2-stepper-mini-item .mini-label span { display: block; width: 100%; text-align: center; } .v2-stepper-sep { font-size: 28px; font-weight: 900; color: var(--v2-primary); display: flex; align-items: center; justify-content: center; height: 40px; opacity: 0.8; } /* 📱 Mobile Responsive Scale down for Steppers to prevent button overlap on narrow screens */ @media (max-width: 480px) { .v2-setting-card { padding: 16px 10px; } .v2-stepper-row { gap: 6px; } .v2-stepper-pair-horizontal { gap: 12px; } .v2-mixed-row { gap: 8px; } .v2-stepper { padding: 2px; border-radius: 10px; max-width: 180px; } .v2-step-btn { width: 26px; height: 26px; font-size: 13px; } .v2-step-value { padding: 5px 6px; font-size: 13px; min-width: 32px; border-radius: 10px; } .v2-step-input { font-size: 13px; } .v2-stepper-mini { gap: 6px; } .v2-stepper-mini-item { gap: 6px; } .v2-stepper-mini .mini-label, .v2-stepper-mini-item .mini-label { font-size: 11px; } .v2-stepper-sep { font-size: 18px; height: 36px; } } /* 📱 Super Narrow Mobile viewports (e.g., screen width <= 360px) */ @media (max-width: 360px) { .v2-stepper-row { gap: 4px; } .v2-stepper { padding: 1px; } .v2-step-btn { width: 22px; height: 22px; font-size: 11px; } .v2-step-value { padding: 4px 4px; font-size: 11px; min-width: 26px; } .v2-step-input { font-size: 11px; } .v2-stepper-mini .mini-label, .v2-stepper-mini-item .mini-label { font-size: 10px; } } .v2-stepper-sample { width: 100%; text-align: center; font-size: 15px; font-weight: 900; color: #3498DB; margin-top: 12px; padding: 10px 12px; background: rgba(52, 152, 219, 0.06); border-radius: 12px; border: 1px solid rgba(52, 152, 219, 0.15); font-family: var(--v2-font-num); letter-spacing: 0.5px; } .v2-chip-row { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; } .v2-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; } .v2-desc-mini-title { font-size: 11px; color: var(--v2-muted); margin: 12px 0 8px 0; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; } .v2-chip-row .v2-setting-chip, .v2-chip-grid .v2-setting-chip { flex: 1 1 calc(25% - 10px); min-width: 80px; height: 48px; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--v2-radius-chip); font-size: 13px; font-weight: 900; background: #F8F9FA; border: var(--v2-card-border); transition: var(--v2-transition); white-space: normal; text-align: center; line-height: 1.1; } .v2-chip-row .v2-setting-chip.active { background: white; border-color: var(--v2-primary); color: var(--v2-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* Description Panel (新面板样式) */ .v2-desc-panel { margin-top: 8px; padding: 14px 16px; background: #F5F7FB; border-radius: 14px; border-left: 4px solid var(--v2-primary); animation: v2-fade-in-up 0.3s ease; width: 100%; box-sizing: border-box; } .v2-desc-title { font-size: 11px; font-weight: 900; color: var(--v2-primary); opacity: 0.75; margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; } .v2-desc-body { font-size: 14px; font-weight: 700; color: #555; line-height: 1.5; } @keyframes v2-fade-in-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .v2-chip-row.all-row { width: 100%; } .v2-chip-row.all-row .v2-setting-chip { background: #E0E0E0; height: 36px; margin-bottom: 4px; } .v2-chip-row .v2-setting-chip.active, .v2-chip-grid .v2-setting-chip.plus-chip.active { background: white; border-color: var(--v2-primary); color: var(--v2-primary); box-shadow: 0 4px 0 rgba(0,0,0,0.05); transform: translateY(-2px); } .v2-chip-grid .v2-setting-chip.minus-chip.active { background: white; border-color: var(--v2-secondary); color: var(--v2-secondary); box-shadow: 0 4px 0 rgba(0,0,0,0.05); transform: translateY(-2px); } .v2-chip-grid .v2-setting-chip.minus-chip.active .label { color: var(--v2-secondary); } /* ══════════════════════════════════════════════ LOOK & LISTEN SIMPLE STYLE (统一中心化) ═══════════════════════════════════════════════ */ .v2-look-simple-container, .v2-listen-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; flex: 1; } .v2-look-list { display: flex; flex-direction: column; align-items: center; /* 容器居中 */ padding: 30px; min-width: 200px; } /* ⚠️ REMARK: 加减法竖排显示（看算模式）— 样式由 LookEngineV2.js renderQuestion() 引用 */ .v2-look-item { font-size: clamp(45px, 15vw, 90px); font-weight: 900; font-family: var(--v2-font-num); line-height: 1.1; display: grid; grid-template-columns: 0.5fr 1.5fr; /* 符号占位，数字占位 */ align-items: center; width: 100%; font-variant-numeric: tabular-nums; } .v2-look-item .symbol { text-align: left; opacity: 0.8; } .v2-look-item .val { text-align: right; } /* ⚠️ REMARK: 加减法分割线（看算模式）— 样式由 LookEngineV2.js renderQuestion() 引用 */ .v2-look-divider { width: 100%; height: 4px; background: var(--v2-display-divider, #333); box-shadow: var(--v2-display-divider-glow, none); margin: 15px 0; border-radius: 2px; } .v2-look-numpad-wrap { transform: scale(0.9); margin-top: -10px; } /* 迷你反馈动画 */ .v2-mini-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border: 4px solid currentColor; padding: 20px 40px; border-radius: 30px; text-align: center; z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: v2MiniPop 1.2s forwards; } @keyframes v2MiniPop { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } } /* ══════════════════════════════════════════════ LISTEN MODE V2 (听算) ═══════════════════════════════════════════════ */ .v2-listen-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; height: auto; } .v2-listen-visualizer { display: flex; align-items: center; gap: 8px; height: 60px; margin-bottom: 20px; } .v2-wave { width: 12px; height: 40px; background: var(--v2-primary); border-radius: 10px; animation: v2Wave 1s ease-in-out infinite; } .v2-wave:nth-child(2) { animation-delay: 0.2s; height: 60px; } .v2-wave:nth-child(3) { animation-delay: 0.4s; } @keyframes v2Wave { 0%, 100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1.2); opacity: 1; } } .v2-listen-msg { font-size: clamp(40px, 15vw, 80px); font-weight: 900; color: var(--v2-muted); letter-spacing: 2px; } /* ══════════════════════════════════════════════ READY SCREEN & COUNTDOWN ══════════════════════════════════════════════ */ .v2-ready-card { background: white; padding: 40px 30px; border-radius: var(--v2-radius-card); border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); text-align: center; max-width: 1000px; width: 90%; margin: 40px auto; animation: v2-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .v2-ready-icon { font-size: 60px; margin-bottom: 15px; } .v2-ready-title { font-size: 28px; font-weight: 900; color: var(--v2-primary); margin-bottom: 10px; } .v2-ready-detail { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; font-size: 14px; color: var(--v2-muted); } .v2-ready-btn { background: var(--v2-secondary); color: white; border: none; padding: 18px 40px; border-radius: 25px; font-size: 20px; font-weight: 900; box-shadow: 0 8px 0 #388E3C; cursor: pointer; transition: var(--v2-transition-fast); width: 100%; } .v2-ready-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #388E3C; } .v2-countdown-circle { font-size: 120px; font-weight: 900; color: var(--v2-primary); text-shadow: 0 10px 0 rgba(0,0,0,0.1); animation: v2-pulse 0.8s infinite alternate; flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; } @keyframes v2-pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes v2-pulse { from { transform: scale(0.9); } to { transform: scale(1.1); } } .v2-round-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; } .v2-round-splash .label { font-size: 20px; font-weight: 900; color: var(--v2-muted); letter-spacing: 4px; margin-bottom: 5px; } .v2-round-splash .num { font-size: 70px; font-weight: 900; color: var(--v2-primary); line-height: 1; } /* Toggle Switch */ .v2-toggle-container { display: flex; align-items: center; gap: 12px; cursor: pointer; background: #F8F9FA; padding: 8px 16px; border-radius: 20px; border: 2px solid #EEE; transition: var(--v2-transition); touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-toggle-container:active { transform: scale(0.95); } .v2-toggle-inline-container { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--v2-transition); touch-action: manipulation; user-select: none; -webkit-user-select: none; } .v2-toggle-inline-container:active { transform: scale(0.95); } .v2-toggle { width: 44px; height: 24px; background: #DDD; border-radius: 12px; position: relative; transition: all 0.3s; } .v2-toggle.active { background: var(--v2-secondary); } .v2-toggle-thumb { width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .v2-toggle.active .v2-toggle-thumb { left: 23px; } .v2-toggle-label-text { font-size: 14px; font-weight: 900; color: var(--v2-muted); } /* ══════════════════════════════════════════════ V2 AUTH & PROFILE (Neumorphism & Bento) ═══════════════════════════════════════════════ */ /* Profile Bento Card */ .v2-profile-trigger.v2-card-profile { background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important; border: var(--v2-card-border) !important; box-shadow: var(--v2-shadow-soft) !important; display: flex !important; } .v2-profile-trigger.v2-card-profile .v2-avatar-mini { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; color: white !important; } /* Profile Trigger on Main Menu */ .v2-profile-trigger { grid-column: span 2; display: flex; align-items: center; gap: 15px; padding: 15px 25px; background: var(--v2-bg); box-shadow: var(--v2-shadow-flat); border-radius: 20px; cursor: pointer; margin-bottom: 10px; transition: all 0.2s ease; } .v2-profile-trigger:active { box-shadow: var(--v2-shadow-inner); transform: scale(0.98); } .v2-avatar-mini { width: 40px; height: 40px; background: var(--v2-surface); box-shadow: var(--v2-shadow-raised); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } #v2-username-main { font-weight: 800; font-size: 16px; color: var(--v2-text); } /* Auth Form & Inputs */ .v2-neu-form { padding: 10px; } .v2-input-label { display: block; font-size: 13px; font-weight: 800; color: var(--v2-text); margin-bottom: 10px; margin-left: 5px; opacity: 0.8; } .v2-neu-input-wrap { background: var(--v2-bg); box-shadow: var(--v2-shadow-inner); border-radius: 18px; padding: 5px 15px; display: flex; align-items: center; } .v2-neu-input { width: 100%; height: 50px; background: transparent; border: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--v2-text-main, var(--v2-text)); } .v2-neu-btn-primary { background: var(--v2-primary); color: white; border: none; border-radius: 20px; padding: 18px; font-size: 16px; font-weight: 900; box-shadow: 6px 6px 12px rgba(108, 99, 255, 0.3); cursor: pointer; transition: var(--v2-transition); } .v2-neu-btn-primary:active { transform: scale(0.96); filter: brightness(0.9); } /* Loading Spinner inside Buttons */ .v2-btn-loading-spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.35); border-radius: 50%; border-top-color: #FFF; animation: v2SpinnerRotate 0.8s linear infinite; margin-right: 10px; vertical-align: middle; } @keyframes v2SpinnerRotate { to { transform: rotate(360deg); } } /* Profile Specific */ .v2-profile-avatar { width: 70px; height: 70px; background: var(--v2-surface); box-shadow: var(--v2-shadow-raised); border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 35px; } .v2-badge-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; font-size: 10px; font-weight: 900; padding: 3px 10px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3); } .v2-badge-silver { background: #E2E8F0; color: #475569; font-size: 10px; font-weight: 900; padding: 3px 10px; border-radius: 8px; text-transform: uppercase; } .v2-card-mini-title { font-size: 14px; font-weight: 800; opacity: 0.7; width: 100%; max-width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 0 15px; } .v2-neu-btn-action { background: var(--v2-secondary); color: white; border: none; border-radius: 15px; padding: 0 20px; font-weight: 800; box-shadow: var(--v2-shadow-raised); cursor: pointer; } .v2-neu-btn-action:active { box-shadow: var(--v2-shadow-inner); transform: translateY(2px); } .v2-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 15px; border-radius: 15px; cursor: pointer; transition: var(--v2-transition); } .v2-menu-item:hover { background: rgba(0,0,0,0.03); } .v2-menu-item:active { background: rgba(0,0,0,0.06); transform: translateX(5px); } .v2-menu-item span { font-weight: 700; font-size: 15px; } .v2-menu-item i { opacity: 0.4; font-size: 12px; } /* V2 Teacher Console Specifics */ .v2-neu-select { background: var(--v2-bg); box-shadow: var(--v2-shadow-inner); border: none; border-radius: 12px; padding: 8px 12px; font-family: inherit; font-weight: 800; color: var(--v2-text); outline: none; appearance: none; cursor: pointer; } .v2-neu-btn-mini { background: var(--v2-bg); box-shadow: var(--v2-shadow-raised); border: none; border-radius: 12px; padding: 8px 15px; font-size: 12px; font-weight: 900; color: var(--v2-text); cursor: pointer; transition: var(--v2-transition); } .v2-neu-btn-mini:active { box-shadow: var(--v2-shadow-inner); transform: translateY(2px); } .v2-stat-num { font-family: 'Outfit', sans-serif; font-weight: 900; } /* Teacher Center Bento Card - Main Menu Version */ .v2-card-teacher { background: linear-gradient(135deg, #fffbeb, #fef3c7) !important; border: var(--v2-card-border) !important; box-shadow: var(--v2-shadow-soft) !important; transition: all 0.2s ease; } .v2-card-teacher:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none !important; } .v2-card-teacher .v2-neu-icon { background: #fbbf24 !important; color: white !important; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2); } /* Profile Bento Card */ .v2-card-profile { background: var(--v2-bg) !important; border: var(--v2-card-border) !important; box-shadow: var(--v2-shadow-soft) !important; transition: all 0.2s ease; } .v2-card-profile:active { transform: translateY(var(--v2-shadow-depth)); box-shadow: none !important; } .v2-card-profile .v2-avatar-mini { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); } /* V2 GRADER & SCORING STATION */ .v2-grader-dashboard { background: white; border: var(--v2-card-border); border-radius: var(--v2-radius-card); padding: 16px 20px; box-shadow: var(--v2-shadow-soft); animation: v2GraderPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .v2-grader-board-card { width: 100%; } .v2-board-main { display: flex; align-items: center; justify-content: space-between; } .v2-board-score { font-size: 42px; font-weight: 900; color: var(--v2-primary); font-family: 'Outfit', sans-serif; display: flex; align-items: baseline; line-height: 1; } .v2-score-unit { font-size: 14px; font-weight: 800; color: var(--v2-muted); margin-left: 4px; } .v2-board-divider { width: 2px; height: 44px; background: var(--v2-border-main); margin: 0 20px; opacity: 0.6; } .v2-board-stats { display: flex; gap: 20px; flex: 1; justify-content: space-around; } .v2-board-stat-item { display: flex; flex-direction: column; align-items: center; } .v2-stat-label { font-size: 11px; font-weight: 900; color: var(--v2-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .v2-stat-val { font-size: 18px; font-weight: 900; color: var(--v2-text-dark); } .v2-grader-grid { column-count: 4; column-gap: 12px; padding: 10px 0; width: 100%; box-sizing: border-box; } @media (max-width: 600px) { .v2-grader-grid { column-count: 3; column-gap: 8px; } } @media (max-width: 380px) { .v2-grader-grid { column-count: 2; } } .v2-grader-card { background: #FDFDFD; border-radius: var(--v2-radius-chip); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; user-select: none; box-sizing: border-box; animation: v2GraderPop 0.4s ease backwards; break-inside: avoid; margin-bottom: 10px; } .v2-grader-card:active { transform: scale(0.95); } .v2-grader-card.is-correct { background: #E8F5E9 !important; border-color: #4CAF50 !important; box-shadow: 0 4px 0 #388E3C !important; } .v2-grader-card.is-correct .v2-grader-val { color: #2E7D32 !important; } .v2-grader-card.is-correct .v2-grader-idx { background: rgba(76, 175, 80, 0.15) !important; color: #2E7D32 !important; } .v2-grader-card.is-correct .v2-grader-status-icon { color: #2E7D32 !important; } .v2-grader-card.is-wrong { background: #FFEBEE !important; border-color: #FF5252 !important; box-shadow: 0 4px 0 #C62828 !important; } .v2-grader-card.is-wrong .v2-grader-val { color: #C62828 !important; text-decoration: line-through; } .v2-grader-card.is-wrong .v2-grader-idx { background: rgba(255, 82, 82, 0.15) !important; color: #C62828 !important; } .v2-grader-card.is-wrong .v2-grader-status-icon { color: #C62828 !important; } .v2-grader-card-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .v2-grader-idx { width: 20px; height: 20px; background: rgba(0,0,0,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #7A8B99; flex-shrink: 0; transition: all 0.2s ease; } .v2-grader-val { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 900; color: var(--v2-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease; } .v2-grader-status-icon { font-size: 12px; font-weight: 900; margin-left: 4px; flex-shrink: 0; transition: all 0.2s ease; } @keyframes v2GraderPop { 0% { transform: scale(0.9) translateY(10px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @media (max-width: 600px) { .v2-grader-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0; } .v2-board-score { font-size: 34px; } .v2-board-divider { margin: 0 10px; } .v2-board-stats { gap: 10px; } .v2-stat-val { font-size: 15px; } } @media (max-width: 380px) { .v2-grader-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════ LEGACY COMPONENTS — migrated & updated to V2 tokens ═══════════════════════════════════════════════ */ /* ── TOAST ──────────────────────────────────── */ #toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--v2-bg-main); border: var(--v2-card-border); color: var(--v2-text); padding: 12px 20px; border-radius: 999px; font-size: var(--v2-size-sm); font-weight: var(--v2-weight-normal); z-index: 200000; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap; box-shadow: var(--v2-shadow-soft); } #toast.show { transform: translateX(-50%) translateY(0); } /* ── SCROLLABLE CONTENT ─────────────────────── */ .scroll-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } .scroll-content::-webkit-scrollbar { width: 4px; } .scroll-content::-webkit-scrollbar-thumb { background: var(--v2-border-main); border-radius: 2px; } /* ── STATUS COLOURS ─────────────────────────── */ .correct { color: var(--v2-green); } .wrong { color: var(--v2-red); } .wrong-user { background: rgba(239,68,68,0.1); color: var(--v2-red); } .correct-user { background: rgba(34,197,94,0.1); color: var(--v2-green); } /* ── ANSWER FEEDBACK POPUP ──────────────────── */ .feedback-overlay { position: fixed; inset: 0; background: rgba(255,249,230,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.2s; } .feedback-overlay.active { display: flex; opacity: 1; } .feedback-card { background: var(--v2-surface); border: var(--v2-card-border); border-radius: var(--v2-radius-card); padding: 40px; width: 280px; max-width: 90vw; text-align: center; transform: scale(0.5); transition: var(--v2-transition-pop); box-shadow: 0 20px 0 var(--v2-border-main); } .feedback-overlay.active .feedback-card { transform: scale(1); } .feedback-icon { font-size: 80px; line-height: 1; margin-bottom: 20px; display: block; } .feedback-text { font-size: 32px; font-weight: var(--v2-weight-heavy); margin-bottom: 8px; } .feedback-sub { font-size: var(--v2-size-body); color: var(--v2-muted); font-weight: var(--v2-weight-normal); } .feedback-card.is-correct { border-color: var(--v2-green); box-shadow: 0 20px 0 var(--v2-green-dark); } .feedback-card.is-correct .feedback-text { color: var(--v2-green-dark); } .feedback-card.is-wrong { border-color: var(--v2-red); box-shadow: 0 20px 0 var(--v2-red-dark); } .feedback-card.is-wrong .feedback-text { color: var(--v2-red-dark); } /* ── VIRTUAL ABACUS ─────────────────────────── */ .abacus-container { background: #fdf6e3; border: 8px solid #8b5e3c; border-radius: 20px; padding: 20px 30px; display: inline-flex; gap: 32px; box-shadow: 0 10px 0 #5d3a24, inset 0 2px 10px rgba(0,0,0,0.1); position: relative; margin-top: 20px; touch-action: none; } .abacus-reset-lever { position: absolute; top: -18px; left: 25px; right: 25px; height: 24px; background: var(--v2-primary); border: 2px solid var(--v2-primary-dark); border-radius: 12px; box-shadow: 0 5px 0 var(--v2-primary-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 3px; font-weight: var(--v2-weight-heavy); color: var(--v2-surface); text-transform: uppercase; z-index: 30; transition: var(--v2-transition-fast); user-select: none; } .abacus-reset-lever:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--v2-primary-dark); } .abacus-reset-lever::before { content: ''; position: absolute; left: 15px; right: 15px; top: 4px; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; } .abacus-rod { width: 64px; height: 300px; position: relative; display: flex; flex-direction: column; align-items: center; } .abacus-rod::before { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: #d4a574; border-radius: 2px; box-shadow: inset 1px 0 2px rgba(0,0,0,0.2); } .abacus-divider-bar { position: absolute; top: 85px; left: -15px; right: -15px; height: 12px; background: #8b5e3c; z-index: 10; border-radius: 6px; } .abacus-divider-bar.has-dot::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; background: var(--v2-surface); border-radius: 50%; } .bead { width: 76px; height: 44px; border-radius: 22px; position: absolute; z-index: 5; transition: all 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28); cursor: pointer; pointer-events: all; touch-action: none; user-select: none; } .bead:active { filter: brightness(1.3); transform: scale(1.05); } .bead-up { background: linear-gradient(to bottom,#ffcc33,#e6b800); box-shadow: 0 4px 0 #b38f00, inset 0 2px 4px rgba(255,255,255,0.6); top: 5px; } .bead-up.active { top: 38px; } .bead-down { background: linear-gradient(to bottom,#a0522d,#8b4513); box-shadow: 0 4px 0 #5d2e0a, inset 0 2px 4px rgba(255,255,255,0.3); } .bead-down-1 { bottom:145px; } .bead-down-2 { bottom:98px; } .bead-down-3 { bottom:51px; } .bead-down-4 { bottom:4px; } .bead-down-1.active { bottom:162px; } .bead-down-2.active { bottom:115px; } .bead-down-3.active { bottom:68px; } .bead-down-4.active { bottom:21px; } .abacus-label { position: absolute; bottom: -22px; font-family: var(--v2-font-main); font-size: var(--v2-size-sm); font-weight: var(--v2-weight-bold); color: #8b5e3c; } .abacus-tool-controls { padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* ── LOOK ENGINE — number display ───────────── */ .look-list { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: auto; padding: 40px 0; font-variant-numeric: tabular-nums; min-width: 160px; } .look-list.dense .look-number { font-size: 36px; } .look-list.ultra-dense { gap: 4px; } .look-list.ultra-dense .look-number { font-size: 24px; } .look-number { font-family: 'JetBrains Mono', var(--v2-font-num); font-size: 64px; font-weight: var(--v2-weight-heavy); line-height: 1.1; color: var(--v2-text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 100%; } .look-number.negative { color: var(--v2-red-dark); } .look-number.len-4 { font-size: 42px !important; } .look-number.len-5 { font-size: 38px !important; } .look-number.len-6 { font-size: 34px !important; } .look-number.len-7 { font-size: 31px !important; } .look-number.len-8, .look-number.len-9 { font-size: 28px !important; } .look-number.len-10,.look-number.len-11 { font-size: 24px !important; } .look-number.len-12,.look-number.len-13 { font-size: 20px !important; } .look-divider-double { width: 100%; height: 80px; border-top: 4px solid var(--v2-text); border-bottom: 4px solid var(--v2-text); margin-top: 10px; } .look-mask { position: absolute; inset: 0; background: rgba(255,249,230,0.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: var(--v2-weight-heavy); color: var(--v2-primary); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; } .look-mask.active { opacity: 1; visibility: visible; } /* ── RESULT ITEMS (rendered by TrainingCore) ─── */ .result-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; } .result-list-header { font-size: var(--v2-size-md); font-weight: var(--v2-weight-bold); color: var(--v2-muted); margin-bottom: 10px; padding-left: 5px; } .result-item { background: var(--v2-surface); border-radius: var(--v2-radius-chip); padding: 12px 16px; display: flex; align-items: center; gap: 12px; border: var(--v2-card-border); box-shadow: var(--v2-shadow-soft); } .ri-num { width:24px; height:24px; background:var(--v2-bg-main); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--v2-weight-bold); color:var(--v2-muted); flex-shrink:0; } .ri-expr { flex:1; font-family:var(--v2-font-num); font-size:15px; font-weight:700; color:var(--v2-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ri-ans { font-family:var(--v2-font-num); font-weight:var(--v2-weight-heavy); font-size:var(--v2-size-body); color:var(--v2-green-dark); } .ri-user { font-family:var(--v2-font-num); font-weight:var(--v2-weight-heavy); font-size:var(--v2-size-body); min-width:40px; text-align:right; } .ri-user.correct-user { color: var(--v2-green-dark); } .ri-user.wrong-user { color: var(--v2-red); text-decoration: line-through; opacity: 0.6; } .ri-icon { font-size: var(--v2-size-md); flex-shrink: 0; } /* ── WORKSHEET PRINT ────────────────────────── */ .ws-print-header { border-bottom: 2px solid black; padding-bottom: 10px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; } .ws-print-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 20px 10px; } .ws-item { border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); padding: 10px 5px; display: flex; flex-direction: column; align-items: center; } .ws-num-list { font-family: var(--v2-font-main); font-size: var(--v2-size-body); text-align: right; width: 100%; margin-bottom: 10px; line-height: 1.4; } .ws-ans-box { width: 100%; height: 30px; border: 1px solid #475569; border-radius: 6px; background: #f8fafc; margin-top: auto; } .ws-idx { font-size: var(--v2-size-xs); color: var(--v2-muted); margin-bottom: 5px; } .ws-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } /* ── DEBUG TOOL ─────────────────────────────── */ .debug-question-card { background: var(--v2-surface); border-radius: var(--v2-radius-chip); padding: 16px; margin-bottom: 20px; box-shadow: var(--v2-shadow-soft); border: var(--v2-card-border); } .debug-item { transition: var(--v2-transition); } .debug-item:hover { transform: translateY(-2px); } #debug-results-list { padding-bottom: 40px; } #persistent-debug-btn { animation: debug-pulse 2s infinite; transition: var(--v2-transition-fast); } #persistent-debug-btn:active { transform: scale(0.9); } @keyframes debug-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); } 70% { box-shadow: 0 0 0 15px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } /* ── PRINT MEDIA ────────────────────────────── */ @media print { body { background: white !important; padding: 0 !important; margin: 0 !important; } .no-print, .bg-orb, .v2-header, .v2-footer { display: none !important; } #app { overflow: visible !important; min-height: auto !important; } .v2-screen { display: none !important; } #screen-worksheet-print { display: block !important; } } /* ── KEYFRAMES ANIMATIONS ─────────────────────── */ @keyframes popUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes v2BadgeBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .v2-hw-badge { animation: v2BadgeBounce 2s infinite ease-in-out; } /* ══════════════════════════════════════════════ QR SCANNER VIEWPORT (V2 Premium Style) ═══════════════════════════════════════════════ */ .v2-scanner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.45); z-index: 10; box-sizing: border-box; padding: 40px 20px; } .v2-scanner-header { width: 100%; display: flex; align-items: center; gap: 15px; z-index: 20; padding: 10px; } .v2-scanner-header .v2-round-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1.5px solid rgba(255, 255, 255, 0.3); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: var(--v2-transition-fast); } .v2-scanner-header .v2-round-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.3); } .v2-scanner-title { font-size: 20px; font-weight: 900; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .v2-scanner-frame-wrap { width: 280px; height: 280px; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.6); /* Viewport mask */ border: 2px solid rgba(255, 255, 255, 0.25); z-index: 15; } /* Viewfinder Corners */ .v2-scanner-corners { position: absolute; inset: 10px; pointer-events: none; z-index: 18; background: linear-gradient(to right, var(--v2-primary) 4px, transparent 4px) 0 0, linear-gradient(to bottom, var(--v2-primary) 4px, transparent 4px) 0 0, linear-gradient(to left, var(--v2-primary) 4px, transparent 4px) 100% 0, linear-gradient(to bottom, var(--v2-primary) 4px, transparent 4px) 100% 0, linear-gradient(to right, var(--v2-primary) 4px, transparent 4px) 0 100%, linear-gradient(to top, var(--v2-primary) 4px, transparent 4px) 0 100%, linear-gradient(to left, var(--v2-primary) 4px, transparent 4px) 100% 100%, linear-gradient(to top, var(--v2-primary) 4px, transparent 4px) 100% 100%; background-size: 20px 20px; background-repeat: no-repeat; } /* Laser scanning horizontal line animation */ .v2-scanner-corners::after { content: ''; position: absolute; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, var(--v2-primary), transparent); box-shadow: 0 0 12px var(--v2-primary), 0 0 4px var(--v2-primary); z-index: 17; animation: v2ScannerLaser 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; pointer-events: none; } @keyframes v2ScannerLaser { 0% { top: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .v2-scanner-footer { width: 100%; display: flex; justify-content: center; z-index: 20; padding: 10px; } .v2-scanner-hint { background: rgba(0, 0, 0, 0.65); color: #FFF; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); animation: v2ScannerPulse 1.5s ease-in-out infinite alternate; } @keyframes v2ScannerPulse { from { transform: scale(1); border-color: rgba(255, 255, 255, 0.15); } to { transform: scale(1.02); border-color: var(--v2-primary); } } /* ══════════════════════════════════════════════ HALL OF FAME — Achievements & Leaderboard ═══════════════════════════════════════════════ */ .hof-badges-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; } .hof-group { display: flex; flex-direction: column; gap: 10px; } .hof-group-header { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 4px 4px; border-bottom: 2px dashed rgba(0,0,0,0.08); } .hof-group-title { display: flex; flex-direction: column; line-height: 1.15; } .hof-group-title-zh { font-size: 16px; font-weight: 900; color: #1f2937; } .hof-group-title-en { font-size: 11px; font-weight: 600; color: #6b7280; opacity: 0.75; letter-spacing: 0.3px; } .hof-group-progress { font-size: 12px; font-weight: 800; color: #4b5563; background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 999px; box-shadow: inset 1px 1px 3px rgba(163,177,198,0.4), inset -1px -1px 3px rgba(255,255,255,0.9); } .hof-group-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } @media (max-width: 720px) { .hof-group-grid { grid-template-columns: repeat(3, 1fr); } } .hof-badge { background: #E6EAF0; border: 1px solid rgba(255,255,255,0.85); border-radius: 20px; padding: 16px 10px 14px; text-align: center; box-shadow: 6px 6px 14px rgba(163,177,198,0.5), -6px -6px 14px rgba(255,255,255,0.85); transition: transform 0.2s ease; position: relative; overflow: hidden; } .hof-badge.unlocked { background: linear-gradient(145deg, #FFFFFF, #FFFBEB); border-top: 3px solid var(--ach-color, #F59E0B); } .hof-badge.unlocked:hover { transform: translateY(-2px); } .hof-badge.locked { opacity: 0.55; filter: grayscale(0.7); } .hof-badge-icon { font-size: 38px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12)); } .hof-badge-title { font-weight: 900; font-size: 14px; color: #1F2937; } .hof-badge-title-en { font-weight: 600; font-size: 10px; opacity: 0.65; margin-top: 1px; letter-spacing: 0.3px; } .hof-badge-desc { font-size: 10px; opacity: 0.75; margin-top: 6px; line-height: 1.35; min-height: 26px; } .hof-badge-status { font-size: 9px; font-weight: 900; letter-spacing: 1px; margin-top: 8px; padding: 3px 8px; border-radius: 999px; display: inline-block; background: var(--ach-color, #F59E0B); color: white; } .hof-badge-status.locked { background: rgba(0,0,0,0.25); } /* ─── TABS ────────────────────────────────────── */ .hof-tabs { display: flex; background: rgba(0,0,0,0.04); padding: 5px; border-radius: 16px; gap: 4px; margin-bottom: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); } .hof-tab { flex: 1; padding: 9px 4px; border-radius: 12px; border: none; font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.22s; background: transparent; color: var(--v2-muted, #6B7280); margin: 0; } .hof-tab.active { background: white; color: var(--v2-primary, #FF8A00); box-shadow: 0 4px 10px rgba(0,0,0,0.06); } /* ─── LEADERBOARD ROWS ────────────────────────── */ .hof-leaderboard { display: flex; flex-direction: column; gap: 6px; } .hof-row { display: grid; grid-template-columns: 44px 38px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; background: white; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); transition: transform 0.15s; } .hof-row.top-1 { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border-left: 4px solid #F59E0B; } .hof-row.top-2 { background: linear-gradient(135deg, #F8FAFC, #E2E8F0); border-left: 4px solid #94A3B8; } .hof-row.top-3 { background: linear-gradient(135deg, #FFF7ED, #FED7AA); border-left: 4px solid #EA580C; } .hof-row.is-me { outline: 2px solid var(--v2-primary, #FF8A00); outline-offset: -2px; } .hof-rank { font-weight: 900; font-size: 18px; text-align: center; } .hof-avatar { font-size: 24px; text-align: center; } .hof-name { font-weight: 800; font-size: 14px; color: #1F2937; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hof-me-tag { display: inline-block; background: var(--v2-primary, #FF8A00); color: white; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; } .hof-value { font-weight: 900; font-size: 15px; color: var(--v2-primary, #FF8A00); font-family: ''Outfit'', sans-serif; } .hof-empty { text-align: center; padding: 40px 20px; opacity: 0.6; font-weight: 700; } /* ══════════════════════════════════════════════ ACHIEVEMENT UNLOCK TOAST (Neumorphic Bento) ═══════════════════════════════════════════════ */ .ach-unlock-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; transition: opacity 0.35s; cursor: pointer; } .ach-unlock-overlay.show { opacity: 1; } .ach-unlock-card { background: #E6EAF0; border: 1px solid rgba(255,255,255,0.85); border-radius: 24px; padding: 30px 36px 28px; text-align: center; box-shadow: 12px 12px 24px rgba(163,177,198,0.5), -12px -12px 24px rgba(255,255,255,0.8); border-top: 5px solid var(--ach-color, #F59E0B); transform: scale(0.7); transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2); max-width: 340px; width: 86%; } .ach-unlock-overlay.show .ach-unlock-card { transform: scale(1); } .ach-unlock-tag { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--ach-color, #F59E0B); margin-bottom: 14px; } .ach-unlock-icon { font-size: 72px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2)); animation: achIconPulse 1.2s ease-in-out infinite; } @keyframes achIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .ach-unlock-title { font-size: 22px; font-weight: 900; color: #1F2937; margin-top: 4px; } .ach-unlock-title-en { font-size: 13px; font-weight: 600; opacity: 0.7; margin-top: 2px; letter-spacing: 0.5px; } .ach-unlock-desc { font-size: 13px; margin-top: 12px; color: #4B5563; font-weight: 700; } .ach-unlock-desc-en { font-size: 11px; opacity: 0.75; margin-top: 3px; font-weight: 500; } /* --- V2 SVG Badge Integration Styles --- */ .hof-badge-svg-container { width: 90px; height: 82px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .hof-badge.unlocked:hover .hof-badge-svg-container { transform: scale(1.08) translateY(-2px); } .ach-unlock-icon svg { width: 165px; height: 150px; margin: 0 auto; } .hof-badge.locked .hof-badge-svg-container { filter: grayscale(0.85) opacity(0.5); } /* ══════════════════════════════════════════════ FX LAYER — themed visual effects (rice burst, etc.) ═══════════════════════════════════════════════ */ .v2-fx-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; } .v2-rice-particle { position: absolute; font-size: 26px; line-height: 1; will-change: transform, opacity; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; text-align: center; user-select: none; animation: v2RiceBurst 800ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; /* 移除了耗费 GPU 资源的 drop-shadow filter 以显著提升移动端流畅度 */ } .v2-rice-particle--big { font-size: 34px; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; } @keyframes v2RiceBurst { 0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; } 15% { transform: translate(0, 0) scale(1.15) rotate(calc(var(--fx-rot) * 0.2)); opacity: 1; } 100% { transform: translate(var(--fx-dx), var(--fx-dy)) scale(0.8) rotate(var(--fx-rot)); opacity: 0; } } /* =========================================================== Ranking Challenge — subject tabs (复用 v2-level-chip 风格) =========================================================== */ .ranking-subject-tabs { margin: 0; } .ranking-events-section .ranking-panel { margin-top: 4px; } .ranking-panel { animation: rankingPanelIn 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.15); } @keyframes rankingPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Competition Banner (主屏比赛横幅) ───────────────────────────── */ .comp-banner{ position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, #FF8A00, #FF5722); box-shadow: 0 10px 24px rgba(255,87,34,.35); animation: compBannerIn .5s cubic-bezier(.175,.885,.32,1.2); } .comp-banner.joined{ background: linear-gradient(135deg, #16a34a, #0d9488); box-shadow: 0 10px 24px rgba(13,148,136,.3); } .comp-banner .cb-glow{ position:absolute; top:-50%; right:-20%; width:200px; height:200px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); pointer-events:none; } .comp-banner .cb-icon{ font-size: 38px; flex-shrink:0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); } .comp-banner .cb-body{ flex:1; min-width:0; color:#fff; } .comp-banner .cb-tag{ font-size:11px; font-weight:900; letter-spacing:.5px; opacity:.95; background: rgba(255,255,255,.22); display:inline-block; padding:2px 9px; border-radius:999px; margin-bottom:4px; } .comp-banner .cb-title{ font-size:17px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .comp-banner .cb-sub{ font-size:12px; font-weight:600; opacity:.9; } .comp-banner .cb-arrow{ font-size:30px; font-weight:900; color:#fff; opacity:.85; flex-shrink:0; } /* 图片横幅（裁判上传的自定义横幅图） */ .comp-banner.img{ display:block; padding:0; min-height:96px; background-size:cover; background-position:center; position:relative; box-shadow:0 8px 20px rgba(0,0,0,.2); } .comp-banner.img .cb-img-tag{ position:absolute; top:10px; left:12px; background:rgba(0,0,0,.55); color:#fff; font-weight:800; font-size:12px; padding:4px 12px; border-radius:999px; backdrop-filter:blur(4px); } .comp-banner.img.joined .cb-img-tag{ background:rgba(22,163,74,.85); } .comp-banner.img .cb-img-arrow{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:30px; font-weight:900; color:#fff; opacity:.9; text-shadow:0 2px 6px rgba(0,0,0,.5); } @keyframes compBannerIn{ from{opacity:0; transform:scale(.94) translateY(-6px);} to{opacity:1; transform:scale(1) translateY(0);} } /* ── Competition Registration Page (报名页) ─────────────────────── */ .cr-loading,.cr-empty{ padding:40px; text-align:center; color:var(--v2-muted); font-weight:700; } .cr-empty.err{ color:#dc2626; } .cr-wrap{ max-width:480px; margin:0 auto; width:100%; } .cr-hero{ text-align:center; padding:18px 0 22px; } .cr-hero-icon{ font-size:54px; } .cr-hero-title{ font-size:22px; font-weight:900; color:var(--v2-text-dark); margin-top:6px; } .cr-hero-meta{ display:flex; gap:16px; justify-content:center; margin-top:8px; color:var(--v2-muted); font-size:13px; font-weight:700; } .cr-card{ background:#E6EAF0; border-radius:20px; padding:16px 18px; margin-bottom:14px; border:1px solid rgba(255,255,255,.85); box-shadow:8px 8px 18px rgba(163,177,198,.5),-8px -8px 18px rgba(255,255,255,.8); } .cr-card-label{ font-size:13px; font-weight:900; color:var(--v2-text-dark); margin-bottom:12px; } .cr-card-label .muted{ font-weight:600; color:var(--v2-muted); font-size:12px; } .cr-field{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(163,177,198,.2); } .cr-field:last-child{ border-bottom:none; } .cr-field .k{ color:var(--v2-muted); font-weight:700; font-size:13px; } .cr-field .v{ font-weight:800; color:var(--v2-text-dark); font-size:14px; } .cr-field .v.hl{ color:var(--v2-primary); } .cr-warn{ background:#FEF3C7; color:#92400E; border-radius:14px; padding:12px 14px; font-size:13px; font-weight:700; margin-bottom:14px; } .cr-foot{ display:flex; gap:10px; } .cr-btn{ flex:1; padding:15px; border:none; border-radius:16px; cursor:pointer; font-size:16px; font-weight:900; } .cr-btn.primary{ color:#fff; background:var(--v2-primary); box-shadow:0 6px 0 var(--v2-primary-dark); } .cr-btn.primary:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--v2-primary-dark); } .cr-btn.primary:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; } .cr-btn.joined{ color:#16a34a; background:#dcfce7; width:100%; } .cr-btn.ghost{ background:transparent; color:var(--v2-muted); flex:1; } /* 报名截止提示 */ .cr-deadline{ margin-top:8px; font-size:12px; font-weight:800; color:var(--v2-primary-dark); } .cr-deadline.over{ color:#dc2626; } /* 报名成功引导卡 */ .cr-success{ text-align:center; background:#dcfce7; border-radius:18px; padding:18px; margin-bottom:14px; border:1px solid rgba(22,163,74,.25); } .cr-success .cs-icon{ font-size:34px; } .cr-success .cs-title{ font-size:18px; font-weight:900; color:#15803d; margin-top:4px; } .cr-success .cs-sub{ font-size:13px; font-weight:600; color:#166534; margin-top:6px; line-height:1.5; } .cr-success .cs-sub b{ color:#15803d; } /* 弱化的取消链接 */ .cr-cancel-link{ text-align:center; margin-top:14px; font-size:13px; font-weight:600; color:var(--v2-muted); text-decoration:underline; cursor:pointer; opacity:.7; } .cr-cancel-link:hover{ opacity:1; color:#dc2626; } /* ══ Competition Player (比赛答题全屏层) ══ */ #cp-root{ position:fixed; inset:0; z-index:9000; } .cp-overlay{ position:fixed; inset:0; background:var(--v2-bg-main,#FFF9E6); display:flex; flex-direction:column; align-items:center; padding:16px; overflow:auto; } .cp-center{ margin:auto; font-size:16px; font-weight:700; color:var(--v2-muted); text-align:center; } .cp-err{ color:#dc2626; font-weight:800; margin-bottom:16px; } /* 顶栏：进度 / 组别 / 倒计时 */ .cp-top{ width:100%; max-width:480px; display:flex; align-items:center; justify-content:space-between; padding:10px 4px; flex-shrink:0; } .cp-prog{ font-weight:900; font-size:15px; color:var(--v2-text-dark,#2c3140); } .cp-grp{ font-size:12px; font-weight:800; color:#fff; background:var(--v2-primary,#FF8A00); padding:3px 10px; border-radius:999px; } .cp-timer{ font-weight:900; font-size:20px; color:var(--v2-primary-dark,#E67E00); font-variant-numeric:tabular-nums; } .cp-timer.low{ color:#dc2626; animation:cpPulse .8s infinite; } @keyframes cpPulse{ 0%,100%{opacity:1} 50%{opacity:.4} } /* 直式题目舞台（常驻） */ .cp-stage{ flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:160px; } .cp-vstack{ display:flex; flex-direction:column; align-items:stretch; min-width:120px; } .cp-vrow{ display:grid; grid-template-columns:0.5fr 1.5fr; align-items:center; font-size:clamp(34px,11vw,64px); font-weight:900; line-height:1.12; font-variant-numeric:tabular-nums; color:var(--v2-text-dark,#2c3140); } .cp-sym{ text-align:left; opacity:.8; } .cp-val{ text-align:right; } .cp-vline{ height:4px; background:#333; border-radius:2px; margin:8px 0; } /* 乘除横式 a × b = ? */ .cp-hstack{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,2.5vw,18px); flex-wrap:wrap; font-size:clamp(34px,10vw,60px); font-weight:900; font-variant-numeric:tabular-nums; color:var(--v2-text-dark,#2c3140); } .cp-hsym{ opacity:.7; } .cp-hq{ color:var(--v2-primary,#FF8A00); } /* 输入框 */ .cp-inputbox{ width:100%; max-width:480px; min-height:54px; margin:8px 0; padding:10px 18px; background:#fff; border-radius:16px; font-size:30px; font-weight:900; text-align:right; color:var(--v2-primary-dark,#E67E00); font-variant-numeric:tabular-nums; box-shadow:inset 3px 3px 7px rgba(163,177,198,.5),inset -3px -3px 7px rgba(255,255,255,.9); display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; } .cp-inputbox .cp-ph{ color:var(--v2-muted,#8a93a6); font-size:18px; font-weight:600; } .cp-inputbox.shake{ animation:cpShake .4s; } @keyframes cpShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} } /* numpad */ .cp-numpad{ width:100%; max-width:480px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; flex-shrink:0; } .cp-key{ padding:18px 0; border:none; border-radius:16px; font-size:26px; font-weight:900; cursor:pointer; background:#fff; color:var(--v2-text-dark,#2c3140); box-shadow:5px 5px 12px rgba(163,177,198,.5),-5px -5px 12px rgba(255,255,255,.9); } .cp-key:active{ box-shadow:inset 4px 4px 8px rgba(163,177,198,.6),inset -4px -4px 8px rgba(255,255,255,.9); } .cp-key.cp-fn{ color:#dc2626; } .cp-key.cp-ok{ background:var(--v2-primary,#FF8A00); color:#fff; box-shadow:0 5px 0 var(--v2-primary-dark,#E67E00); } .cp-key.cp-ok:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--v2-primary-dark,#E67E00); } /* skip */ .cp-skip{ width:100%; max-width:480px; margin:12px 0 4px; padding:13px; border:none; border-radius:14px; background:transparent; color:var(--v2-muted,#8a93a6); font-size:14px; font-weight:800; cursor:pointer; border:2px dashed rgba(138,147,166,.4); flex-shrink:0; } .cp-skip:active{ background:rgba(138,147,166,.1); } .cp-kbhint{ width:100%; max-width:480px; text-align:center; margin-top:8px; font-size:11px; color:var(--v2-muted,#8a93a6); font-weight:600; flex-shrink:0; } @media (hover: none) and (pointer: coarse) { .cp-kbhint{ display:none; } } /* 触屏设备隐藏键盘提示 */ /* 结果页 */ .cp-result{ margin:auto; max-width:420px; text-align:center; background:#E6EAF0; border-radius:24px; padding:32px 26px; box-shadow:12px 12px 24px rgba(163,177,198,.5),-12px -12px 24px rgba(255,255,255,.8); } .cp-res-icon{ font-size:56px; } .cp-res-title{ font-size:22px; font-weight:900; color:var(--v2-text-dark,#2c3140); margin:6px 0 18px; } .cp-res-stats{ display:flex; justify-content:center; gap:24px; margin-bottom:18px; } .cp-res-stats div{ display:flex; flex-direction:column; } .cp-res-stats b{ font-size:26px; font-weight:900; color:var(--v2-primary,#FF8A00); } .cp-res-stats span{ font-size:12px; color:var(--v2-muted,#8a93a6); font-weight:700; margin-top:2px; } .cp-res-note{ font-size:13px; color:var(--v2-muted,#8a93a6); font-weight:600; line-height:1.5; margin-bottom:20px; } .cp-btn{ padding:14px 40px; border:none; border-radius:16px; font-size:16px; font-weight:900; cursor:pointer; color:#fff; background:var(--v2-primary,#FF8A00); box-shadow:0 6px 0 var(--v2-primary-dark,#E67E00); } .cp-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--v2-primary-dark,#E67E00); }