-
+ 
diff --git a/styles.css b/styles.css
index b2bb6c5..ae696a4 100644
--- a/styles.css
+++ b/styles.css
@@ -130,10 +130,17 @@ body {
.brand-logo-svg {
height: 34px;
width: auto;
- color: var(--text-main);
+ display: block;
+ object-fit: contain;
transition: transform 0.2s ease;
}
+.theme-dark .brand-block {
+ padding: 3px 6px;
+ background: rgba(255, 255, 255, 0.94);
+ border-radius: 8px;
+}
+
.brand-logo-svg:hover {
transform: scale(1.03);
}
@@ -667,3 +674,193 @@ body {
color: var(--text-sub);
margin-top: 1px;
}
+
+/* --------------------------------------------------------------------------
+ MOBILE / NARROW VIEWPORT
+ -------------------------------------------------------------------------- */
+@media (max-width: 768px) {
+ body {
+ height: auto;
+ min-height: 100dvh;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ .liquid-cockpit-wrapper {
+ width: 100%;
+ height: auto;
+ min-height: 100dvh;
+ padding: 8px;
+ gap: 8px;
+ }
+
+ .liquid-header {
+ height: auto;
+ min-height: 0;
+ padding: 10px;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ .header-left {
+ width: 100%;
+ min-width: 0;
+ gap: 10px;
+ }
+
+ .brand-block {
+ flex: 0 1 150px;
+ min-width: 118px;
+ }
+
+ .brand-logo-svg {
+ width: 100%;
+ max-width: 150px;
+ height: auto;
+ }
+
+ .brand-divider {
+ flex: 0 0 1px;
+ }
+
+ .cockpit-title-wrap {
+ min-width: 0;
+ flex: 1;
+ justify-content: flex-end;
+ }
+
+ .cockpit-title {
+ flex: 0 0 auto;
+ font-size: 15px;
+ white-space: nowrap;
+ word-break: keep-all;
+ }
+
+ .de-tag {
+ display: none;
+ }
+
+ .header-kpi-group {
+ order: 2;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ width: 100%;
+ gap: 6px;
+ }
+
+ .kpi-glass-capsule {
+ min-width: 0;
+ padding: 5px 7px;
+ }
+
+ .capsule-lbl {
+ overflow: hidden;
+ font-size: 8px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .capsule-val {
+ font-size: 12px;
+ white-space: nowrap;
+ }
+
+ .header-controls {
+ order: 3;
+ width: 100%;
+ justify-content: space-between;
+ gap: 4px;
+ }
+
+ .segment-btn,
+ .bw-btn {
+ padding: 4px 8px;
+ font-size: 10px;
+ }
+
+ .time-widget {
+ display: none;
+ }
+
+ .cockpit-main-grid {
+ grid-template-columns: minmax(0, 1fr);
+ flex: none;
+ min-height: 0;
+ gap: 8px;
+ }
+
+ .map-spatial-container {
+ height: 520px;
+ min-height: 520px;
+ }
+
+ .map-top-bar {
+ top: 8px;
+ left: 8px;
+ right: 8px;
+ }
+
+ .status-glass-pill {
+ min-width: 0;
+ max-width: 100%;
+ padding: 4px 8px;
+ }
+
+ #mapStatusText {
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .map-legend-glass {
+ display: none;
+ }
+
+ .map-action-controls {
+ right: 8px;
+ bottom: 30px;
+ gap: 4px;
+ }
+
+ .glass-btn {
+ padding: 5px 7px;
+ font-size: 9px;
+ }
+
+ .map-bottom-info {
+ justify-content: flex-start;
+ overflow: hidden;
+ }
+
+ .map-bottom-info span:not(:last-child) {
+ display: none;
+ }
+
+ .sidebar-operations {
+ min-height: auto;
+ }
+
+ .sidebar-card {
+ overflow: visible;
+ }
+
+ .liquid-ranking-list {
+ max-height: none;
+ overflow: visible;
+ }
+}
+
+@media (max-width: 390px) {
+ .brand-block {
+ flex-basis: 138px;
+ }
+
+ .brand-logo-svg {
+ max-width: 138px;
+ }
+
+ .theme-switcher-bw .bw-btn span {
+ display: none;
+ }
+}