:root { --bg-dark: #0f172a; --bg-panel: #1e293b; --text-main: #f8fafc; --text-muted: #94a3b8; --accent: #3b82f6; --accent-hover: #2563eb; --border: #334155; --math-bg: #0f172a; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; } body { background-color: var(--bg-dark); color: var(--text-main); line-height: 1.6; } .app-container { max-width: 1000px; margin: 0 auto; padding: 2rem; } header { margin-bottom: 2rem; } .logo { display: flex; align-items: center; gap: 1rem; } .logo svg { color: var(--accent); } h1 { font-size: 1.8rem; font-weight: 700; } h2 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--text-main); display: flex; align-items: center; gap: 0.5rem; } .panel { background: var(--bg-panel); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; } /* Toolbar */ .toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; background: var(--bg-dark); padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border); flex-wrap: wrap; } .toolbar button { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-main); padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; } .toolbar button:hover { background: var(--border); color: #fff; } .divider { width: 1px; background: var(--border); margin: 0 0.5rem; } /* Math Editor */ .equation-container { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.2rem; background: var(--math-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); } .equation-left { padding-top: 0.5rem; font-family: 'Cambria Math', 'Times New Roman', serif; font-style: italic; white-space: nowrap; } .equation-cases { display: flex; flex-direction: column; gap: 1rem; border-left: 2px solid var(--border); padding-left: 1rem; position: relative; flex: 1; } .equation-cases::before { content: "{"; position: absolute; left: -10px; top: 50%; transform: translateY(-50%) scaleY(3); font-weight: 100; color: var(--border); font-size: 2rem; } .case-row { display: flex; align-items: center; gap: 1rem; position: relative; flex-wrap: wrap; } .math-editable { min-width: 150px; min-height: 3rem; padding: 0.8rem 1rem; border: 1px dashed var(--border); border-radius: 6px; font-size: 1.2rem; font-family: 'Cambria Math', 'Times New Roman', serif; outline: none; transition: border-color 0.2s; background: rgba(255,255,255,0.02); flex: 1 1 auto; display: flex; align-items: center; } .math-editable:focus { border-color: var(--accent); background: rgba(59, 130, 246, 0.05); } .math-editable:empty::before { content: "wyrażenie"; color: var(--text-muted); font-style: italic; } .case-condition { min-width: 150px; } .case-condition:empty::before { content: "warunek (np. n=1)"; } .remove-case { background: transparent; border: none; color: #ef4444; cursor: pointer; opacity: 0.5; padding: 0.2rem; } .remove-case:hover { opacity: 1; } /* Math Elements */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.2rem; } .frac .num { padding: 0 0.2rem; border-bottom: 1px solid var(--text-main); min-width: 1.5rem; text-align: center; outline: none; } .frac .den { padding: 0 0.2rem; min-width: 1.5rem; text-align: center; outline: none; } .power-base { display: inline-block; min-width: 1rem; outline: none; } .power-sup { display: inline-block; min-width: 1rem; outline: none; vertical-align: super; font-size: 0.7em; } /* Controls */ .add-case-btn { margin-top: 1rem; background: transparent; border: 1px dashed var(--border); color: var(--text-muted); width: 100%; padding: 0.8rem; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .add-case-btn:hover { border-color: var(--text-main); color: var(--text-main); } .inputs { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; } .input-group { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .input-group label { font-weight: 500; color: var(--text-muted); } .input-group input { background: var(--bg-dark); border: 1px solid var(--border); padding: 0.8rem; border-radius: 8px; color: var(--text-main); font-size: 1rem; outline: none; transition: border-color 0.2s; } .input-group input:focus { border-color: var(--accent); } .input-math { background: var(--bg-dark); font-size: 1.1rem; padding: 0.8rem; min-height: 3rem; display: flex; align-items: center; } .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--accent); padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; } .btn-secondary:hover { background: var(--border); color: var(--accent-hover); } .calc-btn { background: var(--accent); color: white; border: none; padding: 1rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; transition: background 0.2s; } .calc-btn:hover { background: var(--accent-hover); } /* Results */ .stats { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .stat-box { flex: 1; background: var(--bg-dark); border: 1px solid var(--border); padding: 1.5rem; border-radius: 8px; display: flex; flex-direction: column; gap: 0.5rem; } .stat-label { color: var(--text-muted); font-size: 0.9rem; } .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-main); word-break: break-all; } .table-container { overflow-x: auto; } .calls-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .calls-table th, .calls-table td { padding: 0.8rem; text-align: left; border-bottom: 1px solid var(--border); } .calls-table th { color: var(--text-muted); font-weight: 500; background: var(--bg-dark); } .calls-table tr:hover td { background: rgba(255,255,255,0.02); } /* Modals */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--bg-panel); border: 1px solid var(--border); padding: 2rem; border-radius: 12px; width: 400px; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.5); } .modal-input { width: 100%; background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-main); padding: 0.8rem; border-radius: 6px; outline: none; font-size: 1rem; } .modal-input:focus { border-color: var(--accent); } .modal-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-dark); } .modal-list-item { padding: 0.8rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; } .modal-list-item:last-child { border-bottom: none; } .modal-list-item:hover { background: rgba(255,255,255,0.05); } .modal-list-item.selected { background: var(--accent); color: white; } .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }