.navbar { height: 50px; background: #1f1f1f; display: flex; align-items: center; padding: 1rem 1rem; position: relative;color:#fffcfc; }


.navbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.navbar-right button { background: #3c3c3c; border: none; color: #ccc; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; }
.navbar-right button:hover { background: #555; color: #fff; }
.profile-pic { width: 32px; height: 32px; border-radius: 50%; background: #555; }
/* Layout */
.layout-container { flex: 1; display: flex; border-radius: 6px; overflow: hidden; background: #1e1e1e; }
.split-container { display: grid; grid-template-columns: 2fr 6px 1fr; width: 100%; height: 100%; }
.divider-vertical, .divider-horizontal { position: relative; background:#222222; }
.divider-vertical { cursor: col-resize; }
.divider-vertical::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2px; height: 30px; background: #fff; }
.divider-vertical:hover { background: #002b70; border-radius:2px;}
.divider-horizontal { cursor: row-resize; }
.divider-horizontal::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 2px; background: #fff; }
.divider-horizontal:hover { background: #002b70; border-radius:2px; }
/* Left Panel */
.panel.left { display: flex; flex-direction: column; background: #252526; min-width: 0; height: 100%; overflow: hidden; }
.tabs { display: flex; background: #333; }
.tabs button { flex: 1; padding: 0.6rem; background: none; border: none; color: #bbb; cursor: pointer; }
.tabs button.active { background: #1e1e1e; color: #fff; }
.content { flex: 1; padding: 1rem; overflow-y: auto; line-height: 1.5; }
/* Meta area */
.problem-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; margin-bottom: 0.5rem; }
.problem-meta label { display: flex; align-items: center; cursor: pointer; }
.problem-meta input[type=number] { width: 4rem; margin-left: 0.25rem; background: #1e1e1e; border: 1px solid #444; border-radius: 4px; color: #eee; text-align: center; }
.heart { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888; }
.heart.filled { color: #e11d48; }
/* Pill Nav & Accordions */
.pill-nav { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.pill-nav button { background: #3c3c3c; color: #ddd; border: none; padding: 0.4rem 0.8rem; border-radius: 16px; cursor: pointer; }
.pill-nav button:hover { background: #505050; }
details { background: #2b2b2b; border: 1px solid #444; border-radius: 4px; margin: 0.5rem 0; }
summary { padding: 0.6rem; cursor: pointer; font-weight: 500; list-style: none; }
summary::before { content: '▶'; margin-right: 0.5rem; display: inline-block; transition: transform 0.2s; }
details[open] summary::before { transform: rotate(90deg); }
.detail-content { padding: 0.6rem 0.6rem 0.6rem; color: #ddd; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem; }
.tag { background: #3c3c3c; padding: 0.3rem 0.6rem; border-radius: 4px; color: #ccc; }
/* Right Panel */
.panel.right { display: grid; grid-template-rows: auto 1fr 6px 1fr; background: #1e1e1e; min-width: 0; height: 100%; overflow: hidden; }
.editor-header { display: flex; justify-content: flex-end; padding: 0.5rem 1rem; background: #282c34; }
.editor-header button { background: #3c3c3c; border: none; color: #ccc; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; }
.latex-editor { padding: 0.8rem; }
.latex-editor textarea { width: 100%; height: 100%; background: #1e1e1e; color: #dcdcdc; border: 1px solid #333; border-radius: 4px; font-family: monospace; padding: 0.75rem; resize: none; }
.preview {
padding: 1rem;
background: #24262f;
color: #ffffff;
overflow-y: auto;
white-space: pre-wrap;

/* Add these properties */
max-height: 100%;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
box-sizing: border-box;
}
.panel.right {
display: grid;
grid-template-rows: auto 1fr 6px 1fr;
background: #1e1e1e;
min-width: 0;
height: 100%;
overflow: hidden;
}


/* Beautify editor and preview */
.latex-editor textarea { width: 100%; height: 100%; background: #1e1e1e; color: #dcdcdc; border: 1px solid #444; border-radius: 10px; font-family: monospace; padding: 0.75rem; resize: none; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.preview { padding: 1rem; background: #24262f; color: #ffffff; overflow-y: auto; white-space: pre-wrap; max-height: 100%; max-width: 100%; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);     margin: 0.4rem;}