@media (min-width: 769px) and (max-width: 1024px) {
:root { --sb: 176px; --fbase: 12.5px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
:root { --sb: 200px; }
}
@media (min-width: 1441px) and (max-width: 1920px) {
:root { --sb: 220px; --fbase: 14px; --fsm: 11px; --pad: 22px; }
}
@media (min-width: 1921px) {
:root { --sb: 240px; --fbase: 15px; --fsm: 12px; --fxs: 10px; --pad: 28px; --gap: 16px; }
}
.content > * { max-width: 100%; width: 100%; box-sizing: border-box; }
@media (min-width: 1280px) {
.g2 { grid-template-columns: repeat(2, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
.g4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1441px) {
.sb-sec { font-size: 9px; letter-spacing: .15em; padding: 12px 16px 4px; }
.sb-item { padding: 9px 18px; font-size: 11px; gap: 10px; }
.sb-icon { font-size: 14px; width: 18px; }
.logo-mark { font-size: 24px; }
}
@media (min-width: 1441px) {
.topbar { padding: 0 28px; height: 50px; min-height: 50px; max-height: 50px; }
.topbar-title { font-size: 12px; }
}
.sb-resize-handle {
position: absolute;
right: -3px;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 10;
transition: background .15s;
}
.sb-resize-handle:hover,
.sb-resize-handle.dragging {
background: rgba(99, 102, 241, .35);
}
.sb { position: relative; }
@media (min-width: 769px) {
.log-table-wrap { overflow-x: auto; }
.log-table-wrap table { min-width: 560px; }
}
@media (min-width: 1100px) {
.cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (min-width: 1500px) {
.cards-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (min-width: 1280px) {
.modal { max-width: 680px; }
}
@media (min-width: 1600px) {
.modal { max-width: 760px; }
}
@media (min-width: 1280px) {
.dash-row td { padding: 11px 14px; }
}
@media (min-width: 1280px) {
.ai-chat-window { min-height: 320px; max-height: 560px !important; }
}
@media (min-width: 1600px) {
.ai-chat-window { max-height: 680px !important; }
}
@media (min-width: 1280px) {
.code-block, pre { max-width: 100%; font-size: 12px; }
}
@media (min-width: 1600px) {
.code-block, pre { font-size: 12.5px; }
}
@media (min-width: 769px) {
#root { overflow: hidden; width: 100%; }
.main { overflow: hidden; min-width: 0; flex: 1; }
.content { overflow-y: auto; overflow-x: hidden; width: 100%; min-width: 0; }
}