/* ===== device.php ===== */
        .panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .panel h2 {
            margin-bottom: 20px;
            color: #1f2f3f;
            font-size: 1.1em;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            padding-bottom: 10px;
        }

        .devices-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }

        .device-card {
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            padding: 18px;
            background: #fff;
        }

        .device-name {
            margin: 0;
            font-weight: 600;
            font-size: 1.05rem;
        }

        .device-model {
            margin: 0 0 0;
            color: #6c757d;
            font-size: 0.92rem;
        }
         .device-comment {
            margin: 0 0 10px;
            color: #6c757d;
            font-size: 0.92rem;
        }

        .metric-title {
            font-size: 0.92rem;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .metric-box {
            border-radius: 8px;
            text-align: center;
            padding: 10px 8px;
        }

        .metric-box.setting {
            background: rgba(255, 193, 7, 0.22);
            color: #946200;
        }

        .metric-box.temperature {
            background: rgba(25, 135, 84, 0.2);
            color: #0f5132;
        }

        .metric-value {
            font-size: 1.35rem;
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
            user-select: none;
            cursor: default;
            outline: none;
        }

        .metric-box:hover,
        .metric-box:focus,
        .metric-value:hover,
        .metric-value:focus {
            box-shadow: none;
            outline: none;
        }

        .topbar {
            padding-top: 14px;
            padding-bottom: 10px;
        }

        .topbar-panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .topbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            margin-right: 12px;
            margin-bottom: 0;
            padding: 0;
        }

        .topbar .navbar-collapse {
            flex: 1;
            align-items: center;
        }

        .topbar-logo {
            height: 40px;
            width: auto;
            display: block;
        }

        .topbar .nav-link {
            font-weight: 600;
            color: #1f2f3f;
        }

        .topbar .navbar-nav {
            gap: 10px;
        }

        .topbar .nav-link.active {
            color: #0d6efd;
        }

        .topbar-start-link {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 7px 14px;
            border-radius: 10px;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .topbar-start-link:hover,
        .topbar-start-link:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f !important;
        }

        .topbar-user {
            font-size: 18px;
            color: #1f2f3f;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .topbar-actions .btn,
        .topbar .nav-item .btn {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border-width: 1px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }

        .btn-topbar-primary {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        .btn-topbar-primary:hover,
        .btn-topbar-primary:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        .btn-topbar-accent {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        .btn-topbar-accent:hover,
        .btn-topbar-accent:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        .btn-topbar-danger {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        .btn-topbar-danger:hover,
        .btn-topbar-danger:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        .btn-card-header-style {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .btn-card-header-style:hover,
        .btn-card-header-style:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
            text-decoration: none;
        }

        @media (max-width: 991.98px) {
            .topbar-panel {
                flex-wrap: wrap;
            }

            .topbar .navbar-collapse {
                width: 100%;
            }

            .topbar-user {
                margin-top: 10px;
                margin-bottom: 10px;
                display: block;
            }

            .topbar-actions {
                margin-top: 4px;
                flex-wrap: wrap;
            }
        }

/* ===== fullinfo.php ===== */
        .tab-content {
            display: block;
        }

        .panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .panel h2 {
            margin-bottom: 20px;
            color: #0d6efd;
            font-size: 1.1em;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            padding-bottom: 10px;
        }

        .topbar {
            padding-top: 14px;
            padding-bottom: 10px;
        }

        .topbar-panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .topbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            margin-right: 12px;
            margin-bottom: 0;
            padding: 0;
        }

        .topbar-logo {
            height: 40px;
            width: auto;
            display: block;
        }

        .topbar .navbar-collapse {
            flex: 1;
            align-items: center;
        }

        .topbar .nav-link {
            font-weight: 600;
            color: #1f2f3f;
        }

        .topbar .navbar-nav {
            gap: 10px;
        }

        .topbar .nav-link.active {
            color: #0d6efd;
        }

        .topbar-start-link {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 7px 14px;
            border-radius: 10px;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .topbar-start-link:hover,
        .topbar-start-link:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f !important;
        }

        .topbar-user {
            font-size: 18px;
            color: #1f2f3f;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .topbar-actions .btn,
        .topbar .nav-item .btn {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border-width: 1px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }

        .btn-topbar-accent,
        .btn-topbar-danger {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        .btn-topbar-accent:hover,
        .btn-topbar-accent:focus,
        .btn-topbar-danger:hover,
        .btn-topbar-danger:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        .header-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 20px;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
        }

        .status-indicator.connected {
            background: rgba(0, 255, 100, 0.2);
            color: #0f7a32;
        }

        .status-indicator.disconnected {
            background: rgba(255, 71, 87, 0.2);
            color: #b42334;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .connected .status-dot {
            background: #00a63c;
        }

        .disconnected .status-dot {
            background: #ff4757;
        }

        .thermostat {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: 32px;
            padding: 20px;
        }

        .thermo-main {
            flex: 1;
        }
        .thermo-cards {
            min-width: 180px;
            max-width: 260px;
            flex: 0 0 auto;
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .thermostat-dial {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: linear-gradient(145deg, #1e1e2f, #2a2a3f);
            box-shadow: 0 0 30px rgba(13, 110, 253, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 3px solid rgba(13, 110, 253, 0.25);
            margin-left: auto;
            margin-right: auto;
        }

        .current-temp {
            font-size: 3.4em;
            font-weight: bold;
            color: #fff;
        }

        .current-temp .unit {
            font-size: 0.4em;
            vertical-align: super;
            color: #aaa;
        }

        .temp-label {
            color: #bbb;
            font-size: 0.9em;
            margin-top: 5px;
        }

        .target-temp-container {
            margin-top: 25px;
            text-align: center;
        }

        .target-controls {
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: center;
        }

        .mb-2.text-muted {
            text-align: center !important;
            width: 100%;
            display: block;
        }

        .target-controls {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .temp-btn {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 2px solid rgba(13, 110, 253, 0.4);
            background: rgba(13, 110, 253, 0.1);
            color: #0d6efd;
            font-size: 1.4em;
            cursor: pointer;
        }

        .target-temp-input {
            font-size: 1.8em;
            width: 120px;
            text-align: center;
            padding: 8px 10px;
            border: 2px solid rgba(13, 110, 253, 0.4);
            border-radius: 8px;
            color: #0d6efd;
            font-weight: bold;
        }

        .target-temp-input::-webkit-outer-spin-button,
        .target-temp-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .target-temp-input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .chart-wrap {
            height: 280px;
            position: relative;
        }

        .chart-wrap canvas {
            width: 100% !important;
            height: 100% !important;
        }

        .log-container {
            height: 180px;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.03);
            border-radius: 8px;
            padding: 12px;
            font-family: Consolas, monospace;
            font-size: 0.85em;
        }

        .log-entry {
            padding: 4px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .log-entry .time {
            color: #888;
            margin-right: 8px;
        }

        .log-entry.info { color: #0d6efd; }
        .log-entry.success { color: #198754; }
        .log-entry.error { color: #dc3545; }
        .log-entry.data { color: #fd7e14; }

        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .chart-header h2 {
            margin-bottom: 0;
            border-bottom: 0;
            padding-bottom: 0;
        }

        .chart-mode-actions {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            flex-wrap: nowrap;
            overflow-x: auto;
        }

        .chart-points-select {
            width: auto;
            min-width: 0;
            flex: 0 0 auto;
        }

        .chart-timezone-select {
            width: auto;
            min-width: 0;
            flex: 0 0 auto;
        }

        .chart-timeline-controls {
            display: grid;
            gap: 8px;
            margin-top: 12px;
        }

        .chart-timeline-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chart-timeline-slider {
            flex: 1;
        }

        .chart-timeline-info {
            font-size: 0.9em;
            color: #6c757d;
        }

        @media (max-width: 991.98px) {
            .topbar-panel {
                flex-wrap: wrap;
            }

            .topbar .navbar-collapse {
                width: 100%;
            }

            .topbar-user {
                margin-top: 10px;
                margin-bottom: 10px;
                display: block;
            }

            .topbar-actions {
                margin-top: 4px;
                flex-wrap: wrap;
            }

            .thermostat {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            .thermo-main {
                width: 100%;
            }
            .thermo-cards {
                max-width: 100% !important;
                min-width: 0 !important;
                flex-direction: row !important;
                gap: 12px !important;
                margin-top: 18px;
                align-self: stretch !important;
                justify-content: center;
            }
            .thermo-cards .card {
                flex: 1 1 0;
                min-width: 0;
                white-space: normal;
                word-break: break-word;
            }
        }

/* ===== monitor.php ===== */
		.panel {
			background: rgba(255, 255, 255, 0.92);
			border-radius: 15px;
			padding: 25px;
			margin-bottom: 20px;
			border: 1px solid rgba(0, 0, 0, 0.08);
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		}

		.panel h2 {
			margin-bottom: 20px;
			color: #0d6efd;
			font-size: 1.1em;
			border-bottom: 1px solid rgba(0, 0, 0, 0.12);
			padding-bottom: 10px;
		}

		.topbar {
			padding-top: 14px;
			padding-bottom: 10px;
		}

		.topbar-panel {
			background: rgba(255, 255, 255, 0.92);
			border-radius: 15px;
			border: 1px solid rgba(0, 0, 0, 0.08);
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			padding: 8px 14px;
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.topbar .navbar-brand {
			display: inline-flex;
			align-items: center;
			margin-right: 12px;
			margin-bottom: 0;
			padding: 0;
		}

		.topbar-logo {
			height: 40px;
			width: auto;
			display: block;
		}

		.topbar .navbar-collapse {
			flex: 1;
			align-items: center;
		}

		.topbar .navbar-nav {
			gap: 10px;
		}

		.topbar-start-link {
			display: inline-flex;
			align-items: center;
			min-height: 38px;
			padding: 7px 14px;
			border-radius: 10px;
			border: 1px solid #d9dee6;
			background: #fff;
			color: #1f2f3f !important;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
			transition: all 0.2s ease;
			text-decoration: none;
		}

		.topbar-start-link:hover,
		.topbar-start-link:focus {
			background: #f7f9fc;
			border-color: #c7cfdb;
			color: #1f2f3f !important;
		}

		.topbar-user {
			font-size: 18px;
			color: #1f2f3f;
		}

		.topbar-actions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.topbar-actions .btn,
		.topbar .nav-item .btn {
			border-radius: 10px;
			min-height: 38px;
			padding: 7px 14px;
			font-weight: 600;
			border-width: 1px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
			transition: all 0.2s ease;
		}

		.btn-topbar-primary,
		.btn-topbar-accent,
		.btn-topbar-danger {
			background: #fff;
			border-color: #d9dee6;
			color: #1f2f3f;
		}

		.btn-topbar-primary:hover,
		.btn-topbar-primary:focus,
		.btn-topbar-accent:hover,
		.btn-topbar-accent:focus,
		.btn-topbar-danger:hover,
		.btn-topbar-danger:focus {
			background: #f7f9fc;
			border-color: #c7cfdb;
			color: #1f2f3f;
		}

		.devices-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			gap: 10px;
		}

		.device-check {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			padding: 10px 12px;
			border: 1px solid #d9dee6;
			border-radius: 10px;
			background: #fff;
		}

		.device-check small {
			display: block;
			color: #6c757d;
		}

		.chart-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 12px;
			flex-wrap: wrap;
		}

		.chart-header h2 {
			margin-bottom: 0;
			border-bottom: 0;
			padding-bottom: 0;
		}

		.chart-mode-actions {
			display: inline-flex;
			gap: 8px;
			align-items: center;
			flex-wrap: nowrap;
			overflow-x: auto;
		}

		.chart-points-select {
			width: auto;
			min-width: 0;
			flex: 0 0 auto;
		}

		.chart-wrap {
			height: 380px;
			position: relative;
		}

		.chart-wrap canvas {
			width: 100% !important;
			height: 100% !important;
		}

		.chart-timeline-controls {
			display: grid;
			gap: 8px;
			margin-top: 12px;
		}

		.chart-timeline-row {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.chart-timeline-slider {
			flex: 1;
		}

		.chart-timeline-info {
			font-size: 0.9em;
			color: #6c757d;
		}

		.log-container {
			height: 160px;
			overflow-y: auto;
			background: rgba(0, 0, 0, 0.03);
			border-radius: 8px;
			padding: 12px;
			font-family: Consolas, monospace;
			font-size: 0.85em;
		}

		.log-entry {
			padding: 4px 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		}

		.log-entry .time {
			color: #888;
			margin-right: 8px;
		}

		.log-entry.info { color: #0d6efd; }
		.log-entry.success { color: #198754; }
		.log-entry.error { color: #dc3545; }

		@media (max-width: 991.98px) {
			.topbar-panel {
				flex-wrap: wrap;
			}

			.topbar .navbar-collapse {
				width: 100%;
			}

			.topbar-user {
				margin-top: 10px;
				margin-bottom: 10px;
				display: block;
			}

			.topbar-actions {
				margin-top: 4px;
				flex-wrap: wrap;
			}
		}

/* ===== login.php ===== */
        .btn-device-style {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }

        .btn-device-style:hover,
        .btn-device-style:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

/* ===== index.html ===== */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: #f8f9fa;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .topbar {
            padding-top: 14px;
            padding-bottom: 10px;
        }

        .topbar-panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .topbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            margin-right: 12px;
            margin-bottom: 0;
            padding: 0;
        }

        .topbar .navbar-collapse {
            flex: 1;
            align-items: center;
        }

        .topbar-logo {
            height: 40px;
            width: auto;
            display: block;
        }

        .topbar .nav-link {
            font-weight: 600;
            color: #1f2f3f;
        }

        .topbar .navbar-nav {
            gap: 10px;
        }

        .topbar-start-link {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 7px 14px;
            border-radius: 10px;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .topbar-start-link:hover,
        .topbar-start-link:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f !important;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }

        .topbar-actions .btn {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border-width: 1px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }

        .btn-topbar-primary {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        .btn-topbar-primary:hover,
        .btn-topbar-primary:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        @media (max-width: 991.98px) {
            .topbar-panel {
                flex-wrap: wrap;
            }

            .topbar .navbar-collapse {
                width: 100%;
            }

            .topbar-actions {
                width: 100%;
                justify-content: flex-end;
                margin-top: 8px;
            }
        }

/* ===== index.php ===== */
        .panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .panel h2 {
            margin-bottom: 20px;
            color: #0d6efd;
            font-size: 1.1em;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            padding-bottom: 10px;
        }


/* ===== device.php (page namespace) ===== */
        body.page-device .panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        body.page-device .panel h2 {
            margin-bottom: 20px;
            color: #1f2f3f;
            font-size: 1.1em;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            padding-bottom: 10px;
        }

        body.page-device .devices-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }

        body.page-device .device-card {
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            padding: 18px;
            background: #fff;
        }

        body.page-device .device-name {
            margin: 0;
            font-weight: 600;
            font-size: 1.05rem;
        }

        body.page-device .device-model {
            margin: 0 0 0;
            color: #6c757d;
            font-size: 0.92rem;
        }

        body.page-device .device-comment {
            margin: 0 0 10px;
            color: #6c757d;
            font-size: 0.92rem;
        }

        body.page-device .metric-title {
            font-size: 0.92rem;
            font-weight: 600;
            margin-bottom: 6px;
        }

        body.page-device .metric-box {
            border-radius: 8px;
            text-align: center;
            padding: 10px 8px;
        }

        body.page-device .metric-box.setting {
            background: rgba(255, 193, 7, 0.22);
            color: #946200;
        }

        body.page-device .metric-box.temperature {
            background: rgba(25, 135, 84, 0.2);
            color: #0f5132;
        }

        body.page-device .metric-value {
            font-size: 1.35rem;
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
            user-select: none;
            cursor: default;
            outline: none;
        }

        body.page-device .metric-box:hover,
        body.page-device .metric-box:focus,
        body.page-device .metric-value:hover,
        body.page-device .metric-value:focus {
            box-shadow: none;
            outline: none;
        }

        body.page-device .topbar {
            padding-top: 14px;
            padding-bottom: 10px;
        }

        body.page-device .topbar-panel {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        body.page-device .topbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            margin-right: 12px;
            margin-bottom: 0;
            padding: 0;
        }

        body.page-device .topbar .navbar-collapse {
            flex: 1;
            align-items: center;
        }

        body.page-device .topbar-logo {
            height: 40px;
            width: auto;
            display: block;
        }

        body.page-device .topbar .nav-link {
            font-weight: 600;
            color: #1f2f3f;
        }

        body.page-device .topbar .navbar-nav {
            gap: 10px;
        }

        body.page-device .topbar .nav-link.active {
            color: #0d6efd;
        }

        body.page-device .topbar-start-link {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 7px 14px;
            border-radius: 10px;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        body.page-device .topbar-start-link:hover,
        body.page-device .topbar-start-link:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f !important;
        }

        body.page-device .topbar-user {
            font-size: 18px;
            color: #1f2f3f;
        }

        body.page-device .topbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        body.page-device .topbar-actions .btn,
        body.page-device .topbar .nav-item .btn {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border-width: 1px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }

        body.page-device .btn-topbar-primary {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        body.page-device .btn-topbar-primary:hover,
        body.page-device .btn-topbar-primary:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        body.page-device .btn-topbar-accent {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        body.page-device .btn-topbar-accent:hover,
        body.page-device .btn-topbar-accent:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        body.page-device .btn-topbar-danger {
            background: #fff;
            border-color: #d9dee6;
            color: #1f2f3f;
        }

        body.page-device .btn-topbar-danger:hover,
        body.page-device .btn-topbar-danger:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
        }

        body.page-device .btn-card-header-style {
            border-radius: 10px;
            min-height: 38px;
            padding: 7px 14px;
            font-weight: 600;
            border: 1px solid #d9dee6;
            background: #fff;
            color: #1f2f3f;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        body.page-device .btn-card-header-style:hover,
        body.page-device .btn-card-header-style:focus {
            background: #f7f9fc;
            border-color: #c7cfdb;
            color: #1f2f3f;
            text-decoration: none;
        }

        body.page-device @media (max-width: 991.98px) {
            body.page-device .topbar-panel {
                flex-wrap: wrap;
            }

            body.page-device .topbar .navbar-collapse {
                width: 100%;
            }

            body.page-device .topbar-user {
                margin-top: 10px;
                margin-bottom: 10px;
                display: block;
            }

            body.page-device .topbar-actions {
                margin-top: 4px;
                flex-wrap: wrap;
            }
        }