:root { /* Color palette - sophisticated and accessible */ --bg: #fafbfc; --bg-card: #ffffff; --bg-soft: #f1f5f9; --bg-elevated: #ffffff; --text: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-subtle: #94a3b8; --border: #e2e8f0; --border-subtle: #f1f5f9; --border-strong: #cbd5e1; /* Brand colors */ --primary: #0ea5e9; --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd; --primary-300: #7dd3fc; --primary-500: #0ea5e9; --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985; --primary-900: #0c4a6e; --accent: #06b6d4; --accent-50: #ecfeff; --accent-500: #06b6d4; --accent-600: #0891b2; --success: #10b981; --success-50: #ecfdf5; --success-100: #d1fae5; --success-200: #a7f3d0; --success-300: #6ee7b7; --success-500: #10b981; --success-600: #059669; --success-700: #047857; --success-800: #065f46; --success-900: #064e3b; --warning: #f59e0b; --warning-50: #fffbeb; --warning-500: #f59e0b; --danger: #ef4444; --danger-50: #fef2f2; --danger-500: #ef4444; --danger-600: #dc2626; /* Shadows - layered and realistic */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Radius system */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Typography scale */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index scale */ --z-modal: 1000; --z-popover: 100; --z-header: 50; --z-overlay: 40; } /* Subject theming: override brand and accent colors by subject key on */ html[data-subject='国'] { --primary: #16a34a; /* green */ --primary-50: #f0fdf4; --primary-100: #dcfce7; --primary-200: #bbf7d0; --primary-300: #86efac; --primary-500: #22c55e; --primary-600: #16a34a; --primary-700: #15803d; --primary-800: #166534; --primary-900: #14532d; --accent: #10b981; --accent-50: #ecfdf5; --accent-500: #10b981; --accent-600: #059669; } html[data-subject='数'] { --primary: #dc2626; /* red */ --primary-50: #fef2f2; --primary-100: #fee2e2; --primary-200: #fecaca; --primary-300: #fca5a5; --primary-500: #ef4444; --primary-600: #dc2626; --primary-700: #b91c1c; --primary-800: #991b1b; --primary-900: #7f1d1d; --accent: #f97316; --accent-50: #fff7ed; --accent-500: #f97316; --accent-600: #ea580c; } html[data-subject='理'] { --primary: #ca8a04; /* yellow (gold) */ --primary-50: #fefce8; --primary-100: #fef9c3; --primary-200: #fef08a; --primary-300: #fde047; --primary-500: #eab308; --primary-600: #ca8a04; --primary-700: #a16207; --primary-800: #854d0e; --primary-900: #713f12; --accent: #facc15; --accent-50: #fefce8; --accent-500: #facc15; --accent-600: #eab308; } html[data-subject='社'] { --primary: #7c3aed; /* purple */ --primary-50: #f5f3ff; --primary-100: #ede9fe; --primary-200: #ddd6fe; --primary-300: #c4b5fd; --primary-500: #8b5cf6; --primary-600: #7c3aed; --primary-700: #6d28d9; --primary-800: #5b21b6; --primary-900: #4c1d95; --accent: #a78bfa; --accent-50: #f5f3ff; --accent-500: #a78bfa; --accent-600: #8b5cf6; } html[data-subject='英'] { --primary: #2563eb; /* blue */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; --accent: #06b6d4; --accent-50: #ecfeff; --accent-500: #06b6d4; --accent-600: #0891b2; } /* Base styles - smooth, readable, accessible */ *, *::before, *::after { box-sizing: border-box; } /* Smooth theme transitions */ * { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } html { height: 100%; scroll-behavior: smooth; } body { height: 100%; margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: var(--font-size-base); line-height: var(--leading-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; } /* Typography enhancements */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.025em; } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } p { margin: 0; line-height: var(--leading-relaxed); } /* Improved link styles */ a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); } /* Container with responsive padding */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); } @media (max-width: 768px) { .container { padding-left: var(--space-4); padding-right: var(--space-4); } } /* Enhanced header with glassmorphism effect */ .app-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(250, 251, 252, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav { display: grid; grid-template-columns: 1fr minmax(280px, 600px) 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); max-width: 1200px; margin: 0 auto; } .brand { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--primary-600), var(--accent-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; user-select: none; } .nav-middle { display: flex; justify-content: center; } .nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); } .brand-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .brand-text { letter-spacing: -0.01em; } .nav-search { transform: translateY(-8px) scaleY(0.98); transform-origin: top; border: 1px solid var(--border); border-top: none; border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); background: var(--bg-card); box-shadow: var(--shadow-sm); padding: 0 var(--space-5) var(--space-5); margin-top: -4px; /* overlap border seam with card */ display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border: 1px solid var(--border); transform: translateY(0) scaleY(1); border-radius: 999px; background: var(--bg-card); box-shadow: var(--shadow-xs); width: 100%; } .nav-search input { border: none; outline: none; background: transparent; width: 100%; font-size: var(--font-size-sm); color: var(--text); } .nav-search .icon-svg { color: var(--text-subtle); width: 18px; height: 18px; } .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .view-toggle .btn { border: none; box-shadow: none; } .view-toggle .btn[aria-pressed='true'] { background: var(--primary-50); color: var(--primary-700); } @media (max-width: 768px) { .nav { padding: var(--space-3) var(--space-4); } .brand { font-size: var(--font-size-lg); } } /* Refined button system with multiple variants */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text); font-size: var(--font-size-sm); font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; user-select: none; box-shadow: var(--shadow-xs); transition: all var(--transition-fast); position: relative; overflow: hidden; } .btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Primary button with gradient */ .btn-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: white; border-color: var(--primary-600); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); border-color: var(--primary-700); box-shadow: var(--shadow-md); color: white; } /* Ghost button for subtle actions */ .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-soft); color: var(--text); border-color: transparent; box-shadow: none; transform: none; } /* Danger button */ .btn-danger { background: var(--danger-50); color: var(--danger-600); border-color: var(--danger-500); } .btn-danger:hover { background: var(--danger-500); color: white; border-color: var(--danger-600); } /* Button sizes */ .btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); } .btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--font-size-base); } /* Enhanced flash messages with better styling */ .flash { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); font-size: var(--font-size-sm); position: relative; overflow: hidden; } .flash::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary-500); } .flash.success { background: var(--success-50); border-color: var(--success-500); color: var(--success-600); } .flash.success::before { background: var(--success-500); } .flash.error { background: var(--danger-50); border-color: var(--danger-500); color: var(--danger-600); } .flash.error::before { background: var(--danger-500); } .flash.warning { background: var(--warning-50); border-color: var(--warning-500); color: var(--warning-600); } .flash.warning::before { background: var(--warning-500); } /* Modern breadcrumbs with improved visual hierarchy */ .breadcrumbs { font-size: var(--font-size-sm); margin: var(--space-6) 0 var(--space-2); color: var(--text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--bg-soft); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); } .breadcrumbs a { color: var(--text-secondary); font-weight: 500; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .breadcrumbs a:hover { background: var(--bg-card); color: var(--primary); text-decoration: none; } .breadcrumbs .sep { margin: 0 var(--space-1); color: var(--border-strong); font-size: var(--font-size-xs); } .breadcrumbs .muted { font-weight: 600; color: var(--text); padding: var(--space-1) var(--space-2); } /* Enhanced grid and card system with micro-interactions */ .grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Force grid layout when toggled, regardless of original class */ .cards[data-view='grid'] { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .cards[data-view='list'] { display: block; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } /* Ensure even when grid class is present, list view wins */ .grid.cards[data-view='list'], .stack.cards[data-view='list'] { display: block; } .cards[data-view='list'] .card-item, .cards[data-view='list'] > .card { margin: 0; } .cards[data-view='list'] > .card, .cards[data-view='list'] .card-item > .card { padding: var(--space-4); align-items: center; display: grid; grid-template-columns: 48px 1fr auto; /* icon | content | actions */ gap: var(--space-4); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } .cards[data-view='list'] > .card:last-child, .cards[data-view='list'] .card-item:last-child > .card { border-bottom: 0; } .cards[data-view='list'] .card .icon { width: 40px; height: 40px; } .cards[data-view='list'] .name { -webkit-line-clamp: 1; line-clamp: 1; } .cards[data-view='list'] .card .name { font-size: var(--font-size-lg); line-height: var(--leading-tight); } .cards[data-view='list'] .btn-icon { width: 36px; height: 36px; } /* Larger meta text in list for readability */ .cards[data-view='list'] .card .content .meta { font-size: var(--font-size-base); } /* Content splits into Name | Meta columns for alignment */ .cards[data-view='list'] .card .content { display: grid; grid-template-columns: 1fr 220px; /* name | meta */ align-items: center; gap: var(--space-2); } .cards[data-view='list'] .card .content .meta { text-align: right; white-space: nowrap; } /* Seamless expand panel in list mode */ .cards[data-view='list'] .card-link.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; } .cards[data-view='list'] .preview-panel { border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--border); border-radius: 0; margin-top: 0; box-shadow: none; } /* List view subject color policy: left edge bar only (hover adds tint) */ .cards[data-view='list'] .card { /* Neutral base in list view */ background: var(--bg-card); border-color: var(--border); } .cards[data-view='list'] .card .icon { background: var(--bg-soft); } .cards[data-view='list'] .card .icon .icon-svg { color: var(--text-secondary); } /* Ensure top bar becomes left edge bar for subject indication (already defined) */ .cards[data-view='list'] .card[data-subject]::before { left: 0; top: 0; bottom: 0; width: 4px; height: auto; right: auto; /* Always visible in list view */ transform: none; } /* Page-level subject: add color on hover */ html[data-subject] .cards[data-view='list'] .card:hover { background: color-mix(in srgb, var(--primary-50) 60%, var(--bg-card)); border-color: color-mix(in srgb, var(--primary-600) 30%, var(--border)); } html[data-subject] .cards[data-view='list'] .card:hover .icon { background: var(--primary-50); } html[data-subject] .cards[data-view='list'] .card:hover .icon .icon-svg { color: var(--primary-600); } /* Per-card subject: add color on hover (cards with their own subject) */ .cards[data-view='list'] .card[data-subject]:hover { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-card)); border-color: color-mix(in srgb, var(--s-primary-600) 30%, var(--border)); } .cards[data-view='list'] .card[data-subject]:hover .icon { background: var(--s-primary-50); } .cards[data-view='list'] .card[data-subject]:hover .icon .icon-svg { color: var(--s-primary-600); } /* Page-level subject: left edge bar always visible in list view */ html[data-subject] .cards[data-view='list'] .card::before { left: 0; top: 0; bottom: 0; width: 4px; height: auto; right: auto; transform: none; } /* Always keep folder icons colored by subject in list view */ /* Per-card subject */ .cards[data-view='list'] .card[data-subject] .icon .icon-svg.icon-folder { color: var(--s-primary-600); } /* Page-level subject */ html[data-subject] .cards[data-view='list'] .card .icon .icon-svg.icon-folder { color: var(--primary-600); } /* Always keep FILE icons colored by subject in list view */ /* Per-card subject */ .cards[data-view='list'] .card[data-subject] .icon .icon-svg.icon-file-text { color: var(--s-primary-600); } /* Page-level subject */ html[data-subject] .cards[data-view='list'] .card .icon .icon-svg.icon-file-text { color: var(--primary-600); } /* Responsive: collapse to stacked in narrow view */ @media (max-width: 768px) { .cards[data-view='list'] > .card, .cards[data-view='list'] .card-item > .card { grid-template-columns: 40px 1fr; /* icon | content */ } .cards[data-view='list'] .card-quick-actions { grid-column: 2 / -1; justify-content: flex-end; margin-top: var(--space-2); } .cards[data-view='list'] .card .content { grid-template-columns: 1fr; /* stack name over meta */ } .cards[data-view='list'] .card .content .meta { text-align: left; white-space: normal; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: var(--space-4); } } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); display: flex; gap: var(--space-4); align-items: center; /* center content vertically */ transition: all var(--transition-base); position: relative; overflow: hidden; backdrop-filter: blur(8px); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary-500), var(--accent-500)); transform: scaleX(0); transition: transform var(--transition-base); transform-origin: left; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .card:hover::before { transform: scaleX(1); } .card .icon { font-size: 24px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--bg-soft); flex-shrink: 0; transition: all var(--transition-base); } .card .icon .icon-svg { width: 22px; height: 22px; } .card:hover .icon { transform: scale(1.05); background: var(--primary-50); } .card .content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .name { font-weight: 600; font-size: var(--font-size-base); line-height: var(--leading-tight); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .meta { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .card .actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } /* Quick actions aligned to the far right, vertically centered */ .card-quick-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); box-shadow: var(--shadow-xs); cursor: pointer; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; } .btn-icon:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); } .btn-icon .icon-svg { width: 18px; height: 18px; } @media (max-width: 640px) { .btn-icon { width: 44px; height: 44px; border-radius: 12px; } .btn-icon .icon-svg { width: 20px; height: 20px; } } /* Enhanced clickable cards */ .card-link { color: inherit; text-decoration: none; cursor: pointer; } .card-link:hover { text-decoration: none; color: inherit; } .card-link .name { color: inherit; } /* Enhanced badges with modern styling */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; border: 1px solid transparent; transition: all var(--transition-fast); } .badge-problem { background: var(--primary-100); color: var(--primary-800); border-color: var(--primary-200); box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1); } .badge-problem:hover { background: var(--primary-200); color: var(--primary-900); transform: scale(1.02); box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15); } .badge-answer { background: var(--success-100); color: var(--success-900); border-color: var(--success-300); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 185, 129, 0.1); } .badge-answer:hover { background: var(--success-200); color: var(--success-900); transform: scale(1.02); box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15); } /* Icon sizing within badges */ .badge .icon-svg { width: 14px; height: 14px; } /* Inline PDF preview panel */ .card-item { position: relative; } .card-link.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .preview-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), opacity var(--transition-slow), transform var(--transition-slow), border-color var(--transition-fast); opacity: 0; transform: translateY(-8px) scaleY(0.98); transform-origin: top; border: 1px solid var(--border); border-top: none; border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); background: var(--bg-card); box-shadow: var(--shadow-sm); padding: 0 var(--space-5) var(--space-5); margin-top: -4px; /* overlap border seam with card */ } .preview-panel.open { max-height: 80vh; opacity: 1; border-color: var(--border); transform: translateY(0) scaleY(1); } .preview-panel iframe { width: 100%; height: 75vh; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); margin: var(--space-3) 0 var(--space-5); } /* Subject color reflection on cards */ /* Page-level subject (html[data-subject]) influences all cards */ html[data-subject] .card { border-color: color-mix(in srgb, var(--primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--primary-50) 60%, transparent), var(--bg-card) ); } html[data-subject] .card::before { background: linear-gradient(90deg, var(--primary-500), var(--accent-500)); } html[data-subject] .card .icon { background: color-mix(in srgb, var(--primary-50) 60%, var(--bg-soft)); } html[data-subject] .card .icon .icon-svg { color: var(--primary-600); } html[data-subject] .card:hover { border-color: color-mix(in srgb, var(--primary-600) 35%, var(--border)); } /* Per-card subject (card[data-subject]) allows mixed subjects on one page */ .card[data-subject]::before, .card[data-subject] .icon .icon-svg { transition: color var(--transition-fast), background var(--transition-fast); } /* 国語 */ .card[data-subject='国'] { --s-primary-50: #f0fdf4; --s-primary-500: #22c55e; --s-primary-600: #16a34a; --s-accent-500: #10b981; } .card[data-subject='国'] { border-color: color-mix(in srgb, var(--s-primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--s-primary-50) 60%, transparent), var(--bg-card) ); } .card[data-subject='国']::before { background: linear-gradient( 90deg, var(--s-primary-500), var(--s-accent-500) ); } .card[data-subject='国'] .icon { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-soft)); } .card[data-subject='国'] .icon .icon-svg { color: var(--s-primary-600); } /* 数学 */ .card[data-subject='数'] { --s-primary-50: #fef2f2; --s-primary-500: #ef4444; --s-primary-600: #dc2626; --s-accent-500: #f97316; } .card[data-subject='数'] { border-color: color-mix(in srgb, var(--s-primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--s-primary-50) 60%, transparent), var(--bg-card) ); } .card[data-subject='数']::before { background: linear-gradient( 90deg, var(--s-primary-500), var(--s-accent-500) ); } .card[data-subject='数'] .icon { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-soft)); } .card[data-subject='数'] .icon .icon-svg { color: var(--s-primary-600); } /* 理科 */ .card[data-subject='理'] { --s-primary-50: #fefce8; --s-primary-500: #eab308; --s-primary-600: #ca8a04; --s-accent-500: #facc15; } .card[data-subject='理'] { border-color: color-mix(in srgb, var(--s-primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--s-primary-50) 60%, transparent), var(--bg-card) ); } .card[data-subject='理']::before { background: linear-gradient( 90deg, var(--s-primary-500), var(--s-accent-500) ); } .card[data-subject='理'] .icon { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-soft)); } .card[data-subject='理'] .icon .icon-svg { color: var(--s-primary-600); } /* 社会 */ .card[data-subject='社'] { --s-primary-50: #f5f3ff; --s-primary-500: #8b5cf6; --s-primary-600: #7c3aed; --s-accent-500: #a78bfa; } .card[data-subject='社'] { border-color: color-mix(in srgb, var(--s-primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--s-primary-50) 60%, transparent), var(--bg-card) ); } .card[data-subject='社']::before { background: linear-gradient( 90deg, var(--s-primary-500), var(--s-accent-500) ); } .card[data-subject='社'] .icon { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-soft)); } .card[data-subject='社'] .icon .icon-svg { color: var(--s-primary-600); } /* 英語 */ .card[data-subject='英'] { --s-primary-50: #eff6ff; --s-primary-500: #3b82f6; --s-primary-600: #2563eb; --s-accent-500: #06b6d4; } .card[data-subject='英'] { border-color: color-mix(in srgb, var(--s-primary-600) 20%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--s-primary-50) 60%, transparent), var(--bg-card) ); } .card[data-subject='英']::before { background: linear-gradient( 90deg, var(--s-primary-500), var(--s-accent-500) ); } .card[data-subject='英'] .icon { background: color-mix(in srgb, var(--s-primary-50) 60%, var(--bg-soft)); } .card[data-subject='英'] .icon .icon-svg { color: var(--s-primary-600); } /* List view alignment adjustments keep subject edge-bar visible */ .cards[data-view='list'] .card[data-subject]::before { left: 0; top: 0; bottom: 0; width: 4px; height: auto; right: auto; } /* Make preview toggle badges look clickable */ .preview-toggle { cursor: pointer; user-select: none; } .preview-toggle:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } /* Empty state with illustration */ .empty { border: 2px dashed var(--border); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-6); text-align: center; color: var(--text-muted); background: var(--bg-card); margin: var(--space-8) 0; } .empty::before { content: ''; width: 48px; height: 48px; display: block; margin: 0 auto var(--space-4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3Cpath d='M9 13h6' stroke-dasharray='2,2'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.5; } /* Stack layout for list views */ .stack { display: flex; flex-direction: column; gap: var(--space-3); } .section { margin: var(--space-6) 0; } .section-title { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.025em; color: var(--text); display: flex; align-items: center; gap: var(--space-2); } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* Enhanced PDF viewer with better UX */ .viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); margin: var(--space-6) 0 var(--space-4); backdrop-filter: blur(8px); } .viewer-title { font-weight: 600; font-size: var(--font-size-lg); color: var(--text); display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; } .viewer-title .badge { flex-shrink: 0; } .viewer-frame { width: 100%; height: 85vh; border: 1px solid var(--border); border-radius: var(--radius-xl); background: white; box-shadow: var(--shadow-lg); transition: box-shadow var(--transition-base); } .viewer-frame:hover { box-shadow: var(--shadow-xl); } /* Subject color for viewer page file icon (stronger specificity) */ html[data-subject] .viewer-toolbar .viewer-title > .icon-svg.icon-file-text, html[data-subject] main .viewer-title > .icon-svg.icon-file-text { color: var(--primary-600); } @media (max-width: 768px) { .viewer-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); } .viewer-title { justify-content: center; } .row { justify-content: center; } .viewer-frame { height: 75vh; } } /* Mobile header adjustments */ @media (max-width: 900px) { .nav { grid-template-columns: 1fr auto 1fr; gap: var(--space-3); } .nav-middle { display: none; } } /* Enhanced authentication forms */ .auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 80px); padding: var(--space-6); background: radial-gradient( circle at 50% 20%, var(--primary-50), transparent 70% ); } .auth-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-xl); backdrop-filter: blur(12px); position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-500), var(--accent-500)); } /* Form elements with modern styling */ label { display: block; font-weight: 600; font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-2); letter-spacing: 0.025em; } input[type='password'], input[type='text'], input[type='email'] { width: 100%; padding: var(--space-4) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-soft); font-size: var(--font-size-base); color: var(--text); transition: all var(--transition-fast); } /* Header inputs compact */ .app-header input[type='search'] { padding: 8px 4px; } input[type='password']:focus, input[type='text']:focus, input[type='email']:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); background: var(--bg-card); } input[type='password']:hover, input[type='text']:hover, input[type='email']:hover { border-color: var(--border-strong); } /* Utility classes and responsive design */ .muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-subtle { color: var(--text-subtle); } .row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .space { height: var(--space-3); } .space-sm { height: var(--space-2); } .space-lg { height: var(--space-6); } /* Loading states and micro-interactions */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease-out; } /* Focus indicators for accessibility */ *:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } /* Smooth scrolling and reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Manual theme switching support */ /* Dark mode when manually selected */ :root[data-theme='dark'] { --bg: #0f172a; --bg-card: #1e293b; --bg-soft: #334155; --bg-elevated: #1e293b; --text: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-subtle: #64748b; --border: #334155; --border-subtle: #1e293b; --border-strong: #475569; /* Adjust shadows for dark mode */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); } /* Dark mode specific component adjustments */ :root[data-theme='dark'] .app-header { background: rgba(15, 23, 42, 0.8); } :root[data-theme='dark'] .viewer-frame { background: #374151; } /* Auto mode - follows system preference */ @media (prefers-color-scheme: dark) { :root[data-theme='auto'] { --bg: #0f172a; --bg-card: #1e293b; --bg-soft: #334155; --bg-elevated: #1e293b; --text: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-subtle: #64748b; --border: #334155; --border-subtle: #1e293b; --border-strong: #475569; /* Adjust shadows for dark mode */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); } :root[data-theme='auto'] .app-header { background: rgba(15, 23, 42, 0.8); } :root[data-theme='auto'] .viewer-frame { background: #374151; } } /* Print styles */ @media print { .app-header, .breadcrumbs, .viewer-toolbar { display: none !important; } .viewer-frame { height: auto !important; border: none !important; box-shadow: none !important; } body { background: white !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --border: #000; --border-strong: #000; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.8); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.8); } .card { border-width: 2px; } .btn { border-width: 2px; } } /* Additional mobile optimizations */ @media (max-width: 480px) { .container { padding-left: var(--space-3); padding-right: var(--space-3); } .card { padding: var(--space-4); } .section-title { font-size: var(--font-size-base); } .viewer-frame { height: 60vh; } } /* Theme switcher styles */ .theme-switcher { position: relative; display: inline-flex; align-items: center; } .theme-switcher-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-xs); } .theme-switcher-button:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); } .theme-switcher-menu { position: absolute; top: 100%; right: 0; margin-top: var(--space-2); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); min-width: 160px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--transition-fast); z-index: var(--z-popover); } .theme-switcher-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .theme-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-sm); border: none; background: none; width: 100%; text-align: left; } .theme-option:hover { background: var(--bg-soft); color: var(--text); } .theme-option.active { background: var(--primary-50); color: var(--primary-600); font-weight: 500; } :root[data-theme='dark'] .theme-option.active { background: var(--primary-900); color: var(--primary-300); } .theme-option .icon-svg { width: 16px; height: 16px; flex-shrink: 0; } /* Mobile responsive adjustments for theme switcher */ @media (max-width: 768px) { .theme-switcher-menu { right: -8px; min-width: 140px; } .theme-option { font-size: var(--font-size-xs); padding: var(--space-2); } .theme-option .icon-svg { width: 14px; height: 14px; } }