body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #333;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    overflow: hidden; /* Hide scrollbars if phone overflows slightly */
    flex-direction: column;
}

#phone {
    width: 375px; /* Typical phone width */
    height: 812px; /* Typical phone height */
    background-color: #111;
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0,0,0,0.3);
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    /* Simple notch simulation */
    /* border-top: 30px solid #111; */
}

#screen {
    width: 100%;
    height: 100%;
    background-color: #1f1f1f; /* Dark background for ČašekOS */
    border-radius: 25px; /* Inner screen radius */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative; /* Needed for absolute positioning of status bar and nav bar */
}

#status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    color: #e0e0e0;
    font-size: 12px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2); /* Slightly transparent status bar */
    position: absolute; /* Keep it at the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 25px; /* Fixed height */
}

#status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

#status-bar .icon {
    width: 16px;
    height: 16px;
    fill: #e0e0e0;
}

#status-bar .icon.disabled {
    opacity: 0.4;
}

/* Basic cross-out for disabled icons - can be improved */
#status-bar .icon.disabled.wifi-off::after {
    content: '/';
    position: absolute;
    color: red;
    font-weight: bold;
    font-size: 18px; /* Adjust size */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    text-shadow: 0 0 2px black;
}

#battery-level {
    margin-right: 2px;
}

#home-screen {
    flex-grow: 1;
    padding: 15px;
    padding-top: 40px; /* Avoid status bar overlap */
    padding-bottom: 65px; /* Add padding at the bottom for the nav bar (50px height + 15px original padding) */
    overflow-y: auto; /* Allow scrolling if apps overflow */
    /* Optional: Add a subtle cat fur texture or gradient later */
    background: linear-gradient(to bottom, #2a2a2a, #1c1c1c);
    position: relative; /* Needed for z-index stacking if required */
    z-index: 1; /* Ensure home screen is below app views */
}

#home-screen.hidden {
    display: none;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 icons per row */
    gap: 20px;
    justify-items: center;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #f0f0f0;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 64px; /* Fixed width for alignment */
}

.app-icon:hover {
    transform: scale(1.1);
}

.app-icon .icon-bg {
    width: 56px;
    height: 56px;
    border-radius: 14px; /* Squircle */
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.app-icon .icon-bg svg {
    width: 32px;
    height: 32px;
}

.app-icon span {
    /* Allow text wrapping */
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
    max-width: 100%; /* Ensure text doesn't overflow container */
}

.app-view {
    position: absolute;
    top: 25px; /* Below status bar */
    left: 0;
    right: 0;
    bottom: 50px; /* Above nav bar */
    background-color: #282828; /* Default app background */
    color: #e0e0e0;
    padding: 20px;
    padding-top: 15px; /* Adjust top padding */
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to top */
    text-align: center;
    overflow-y: auto;
    z-index: 5; /* Above home screen, below status bar */
    font-size: 1.2em;
}

.app-view.active {
    display: flex; /* Show when active */
}

.app-view h2 {
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #fff;
}

.app-view p {
    font-size: 0.9em;
    color: #ccc;
}

#app-meowssages-view {
    background-color: #3a3a3a;
}

#app-catnap-view {
    background: linear-gradient(to bottom, #ffcc80, #ffb74d);
    color: #5d4037;
}

#app-catnap-view h2 {
    color: #4e342e;
}

#app-catnap-view p {
    color: #6d4c41;
}

#app-purrferences-view {
    background-color: #303030; /* Slightly different grey */
    justify-content: flex-start; /* Align settings to top */
    padding-top: 15px;
}

#app-purrferences-view h2 {
    margin-bottom: 25px;
}

.settings-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between settings */
    padding: 0 10px; /* Add some horizontal padding */
    box-sizing: border-box;
    text-align: left; /* Ensure text inside list items is left-aligned */
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #424242; /* Darker item background */
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.9em;
}

.setting-item-navigable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.setting-item-navigable:hover {
    background-color: #555; /* Slightly lighter on hover */
}

body.theme-light .setting-item-navigable:hover {
    background-color: #f0f0f0; /* Slightly darker on hover for light theme */
}

.setting-item .nav-arrow-icon {
    width: 20px;
    height: 20px;
    fill: #bdbdbd;
}

body.theme-light .setting-item .nav-arrow-icon {
    fill: #757575;
}

.setting-item label:first-child { /* Target the text label */
    font-weight: bold;
    color: #e0e0e0;
}

.sub-view {
    background-color: #3a3a3a; /* Keep it distinct */
    z-index: 6; /* Ensure it appears above the main settings view */
}

body.theme-light .sub-view {
     background-color: #e8e8e8; /* Lighter grey for light theme */
}

#about-phone-view .about-section {
    background-color: #4f4f4f;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: left; /* Ensure text inside the section is left-aligned */
    width: 90%;
    box-sizing: border-box;
    font-size: 0.85em;
}

body.theme-light #about-phone-view .about-section {
    background-color: #fdfdfd;
}

#about-phone-view p {
    margin: 8px 0;
    color: #e0e0e0;
    line-height: 1.4;
}

body.theme-light #about-phone-view p {
     color: #333;
}

#about-phone-view p strong {
    color: #fff;
    margin-right: 5px;
}

body.theme-light #about-phone-view p strong {
     color: #000;
}

body.theme-dark #about-phone-view h2 { color: #fff; }
body.theme-dark #about-phone-view p { color: #ccc; }
body.theme-dark #about-phone-view p strong { color: #fff; }

body.theme-light #about-phone-view h2 { color: #000; }
body.theme-light #about-phone-view p { color: #444; }
body.theme-light #about-phone-view p strong { color: #000; }

.setting-item-slider {
    flex-direction: column;
    align-items: stretch; /* Make items stretch */
    padding-bottom: 18px; /* More space for slider */
}

.setting-item-slider label {
    margin-bottom: 10px; /* Space between label and slider */
    text-align: left;
}

.setting-item-slider input[type="range"] {
    width: calc(100% - 30px); /* Adjust width to fit */
    margin-left: auto; /* Push to right */
    margin-right: auto; /* Center remaining space */
    cursor: pointer;
}

.setting-item-slider .brightness-icon {
    position: absolute;
    right: 20px;
    bottom: 15px;
    width: 18px;
    height: 18px;
    fill: #bdbdbd;
    pointer-events: none; /* Don't interfere with slider */
}

#theme-select {
    background-color: #616161;
    color: #f0f0f0;
    border: none;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9em;
}

#theme-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #007bff; /* Focus indicator */
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Width of the switch */
  height: 24px; /* Height of the switch */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px; /* Height of the knob */
  width: 18px; /* Width of the knob */
  left: 3px;  /* Padding from left */
  bottom: 3px; /* Padding from bottom */
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3; /* Blue when checked */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px); /* Move knob to the right */
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px; /* Make the track round */
}

.slider.round:before {
  border-radius: 50%; /* Make the knob round */
}

#nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10; /* Keep nav bar above app views */
    /* Position it absolute at the bottom of the screen */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* Span full width of screen */
}

.nav-icon {
    width: 24px;
    height: 24px;
    fill: #e0e0e0;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 5px; /* Easier clicking */
    border-radius: 50%;
}

.nav-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#nav-home {
    width: 28px;
    height: 28px;
}

#screen-brightness-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0; /* Initially fully bright */
    pointer-events: none; /* Allow interaction with elements underneath */
    z-index: 100; /* Should be above everything else inside the screen */
    border-radius: 25px; /* Match screen radius */
    transition: opacity 0.1s ease-in-out;
}

/* Hide scrollbar for webkit */
#home-screen::-webkit-scrollbar,
.app-view::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#home-screen,
.app-view {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Light Theme */
body.theme-light #screen {
    background-color: #f5f5f5;
}
body.theme-light #status-bar {
    color: #333;
    background-color: rgba(255, 255, 255, 0.5);
}
body.theme-light #status-bar .icon {
    fill: #333;
}
body.theme-light #home-screen {
    background: linear-gradient(to bottom, #e0e0e0, #f5f5f5);
}
body.theme-light .app-icon {
    color: #333;
}
body.theme-light .app-view {
    background-color: #eeeeee;
    color: #333;
}
body.theme-light .app-view h2 {
    color: #000;
}
body.theme-light .app-view p {
    color: #555;
}
body.theme-light #nav-bar {
    background-color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
body.theme-light .nav-icon {
    fill: #333;
}
body.theme-light .nav-icon:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
body.theme-light #app-purrferences-view {
    background-color: #e0e0e0;
}
body.theme-light .setting-item {
    background-color: #fdfdfd;
}
body.theme-light .setting-item label:first-child {
    color: #222;
}
body.theme-light #theme-select {
    background-color: #f0f0f0;
    color: #333;
}
body.theme-light .slider {
    background-color: #bdbdbd;
}
body.theme-light input:checked + .slider {
  background-color: #64b5f6; /* Lighter blue for light theme */
}
body.theme-light .setting-item-slider .brightness-icon {
    fill: #757575;
}

/* Paw Store Styling */
.pawstore-app-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 10px;
    text-align: left; /* Align text left within items */
}

.pawstore-app-item {
    display: flex;
    align-items: center;
    background-color: #424242; /* Darker item background */
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.9em;
    justify-content: space-between; /* Space out content and button */
}

body.theme-light .pawstore-app-item {
    background-color: #fdfdfd;
}

.pawstore-app-item .app-info {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allow info section to take space */
    margin-right: 15px; /* Space before the button */
}

.pawstore-app-item .app-icon-small .icon-bg {
    width: 40px;
    height: 40px;
    border-radius: 10px; /* Slightly smaller squircle */
    margin-right: 12px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pawstore-app-item .app-icon-small .icon-bg svg {
    width: 24px;
    height: 24px;
}

.pawstore-app-item .app-details {
    display: flex;
    flex-direction: column;
}

.pawstore-app-item .app-details strong {
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 3px;
    line-height: 1.2;
}

body.theme-light .pawstore-app-item .app-details strong {
    color: #222;
}

.pawstore-app-item .app-details span {
    font-size: 0.8em;
    color: #bdbdbd;
    line-height: 1.3;
}

body.theme-light .pawstore-app-item .app-details span {
    color: #757575;
}

.pawstore-install-button {
    background-color: #007bff; /* Blue install button */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.pawstore-install-button:hover {
    background-color: #0056b3;
}

.pawstore-install-button:active {
    background-color: #004085;
}

.pawstore-install-button.installed {
    background-color: #616161; /* Grey when installed */
    cursor: default;
}

.pawstore-install-button.installed:hover {
     background-color: #616161; /* No hover effect when installed */
}

body.theme-light .pawstore-install-button {
    background-color: #64b5f6; /* Lighter blue */
}

body.theme-light .pawstore-install-button:hover {
    background-color: #2196f3; /* Still blue, but standard */
}

body.theme-light .pawstore-install-button.installed {
    background-color: #bdbdbd; /* Lighter grey */
}
body.theme-light .pawstore-install-button.installed:hover {
     background-color: #bdbdbd;
}

#app-pawstore-view {
    padding-top: 15px;
}

#app-purrferences-view,
#about-phone-view {
    align-items: flex-start; /* Align content to the left */
    text-align: left; /* Default text alignment within these views */
}

#app-purrferences-view h2,
#about-phone-view h2 {
     text-align: center; /* Keep the main title centered */
     width: 100%; /* Ensure centering works */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%; /* Take full width */
}

.gallery-item {
    width: 100%; /* Take full grid cell width */
    padding-bottom: 100%; /* Create a square aspect ratio */
    position: relative; /* Needed for content absolute positioning */
    border-radius: 10px;
    overflow: hidden; /* Clip image corners */
    display: flex; /* Center placeholder content */
    justify-content: center;
    align-items: center;
    background-size: cover; /* For images */
    background-position: center; /* For images */
    background-repeat: no-repeat; /* For images */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.gallery-item svg {
    width: 40px;
    height: 40px;
    fill: #757575; /* Default fill for placeholders */
}

body.theme-light .gallery-item svg {
    fill: #a0a0a0;
}

.gallery-item.gallery-image {
     background-image: url('/casek.jpg'); /* Use the provided asset */
     background-color: transparent; /* No background color needed */
}

.gallery-item.gallery-image svg {
     display: none; /* Hide the placeholder icon if it exists */
}

#app-gallery-view p {
    margin-top: 20px;
    font-style: italic;
    color: #aaa;
    width: 100%;
    text-align: center;
}

body.theme-light #app-gallery-view p {
     color: #555;
}

#app-meowssages-view .meowssages-list {
     flex-grow: 1;
     overflow-y: auto;
     width: 100%;
     padding: 0 10px;
     box-sizing: border-box;
     margin-bottom: 10px;
     text-align: left; /* Messages are typically left-aligned */
}

#app-meowssages-view .message {
    background-color: #5a5a5a;
    color: #f0f0f0;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.9em;
}

body.theme-light #app-meowssages-view .message {
    background-color: #ddd;
    color: #333;
}

#app-meowssages-view .message.sent {
    background-color: #007bff;
    color: white;
    align-self: flex-end; /* Align sent messages to the right */
    border-bottom-right-radius: 3px; /* Pointy corner */
}

body.theme-light #app-meowssages-view .message.sent {
    background-color: #64b5f6;
}

#app-meowssages-view .message.received {
    background-color: #616161;
    color: #f0f0f0;
    align-self: flex-start; /* Align received messages to the left */
    border-bottom-left-radius: 3px; /* Pointy corner */
}

body.theme-light #app-meowssages-view .message.received {
    background-color: #bdbdbd;
    color: #333;
}

#app-meowssages-view .timestamp {
     display: block; /* Display timestamp on a new line */
     font-size: 0.7em;
     color: #bbb;
     margin-top: 2px;
     text-align: right; /* Align timestamp to the right */
}

body.theme-light #app-meowssages-view .timestamp {
     color: #666;
}

#app-meowssages-view .message-input {
    display: flex;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #555;
    background-color: #3a3a3a; /* Match view background */
}

body.theme-light #app-meowssages-view .message-input {
    background-color: #eee;
    border-top: 1px solid #ccc;
}

#app-meowssages-view .message-input input[type="text"] {
    flex-grow: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #5a5a5a;
    color: #f0f0f0;
    font-size: 0.9em;
}

body.theme-light #app-meowssages-view .message-input input[type="text"] {
    background-color: #ddd;
    color: #333;
}

#app-meowssages-view .message-input input[type="text"]::placeholder {
     color: #bbb;
}

body.theme-light #app-meowssages-view .message-input input[type="text"]::placeholder {
     color: #777;
}

#app-meowssages-view .message-input button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

body.theme-light #app-meowssages-view .message-input button {
    background-color: #64b5f6;
}

#app-meowssages-view .message-input button:hover {
    background-color: #0056b3;
}
body.theme-light #app-meowssages-view .message-input button:hover {
    background-color: #2196f3;
}

#app-catnap-view .timer-display {
    font-size: 4em;
    font-weight: bold;
    margin: 30px 0;
    color: #5d4037;
}

#app-catnap-view .timer-controls {
    display: flex;
    gap: 15px;
}

#app-catnap-view .timer-controls button {
    background-color: #e65100; /* Deep orange */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

#app-catnap-view .timer-controls button:hover {
     background-color: #bf360c; /* Darker orange */
}

#app-catnap-view .timer-controls button#pause-timer {
    background-color: #fbc02d; /* Amber for pause */
}
#app-catnap-view .timer-controls button#pause-timer:hover {
     background-color: #f9a825;
}

#app-catnap-view .timer-controls button#reset-timer {
    background-color: #795548; /* Brown for reset */
}
#app-catnap-view .timer-controls button#reset-timer:hover {
    background-color: #5d4037;
}

#app-scratchpad-view textarea {
    width: calc(100% - 40px); /* Subtract padding */
    flex-grow: 1; /* Take available height */
    padding: 15px;
    border: none;
    border-radius: 10px;
    background-color: #424242;
    color: #f0f0f0;
    font-size: 1em;
    line-height: 1.5;
    resize: none; /* Prevent manual resize */
    margin-bottom: 15px; /* Space before button */
    box-sizing: border-box;
}

body.theme-light #app-scratchpad-view textarea {
    background-color: #fdfdfd;
    color: #333;
}

#app-scratchpad-view textarea::placeholder {
     color: #bbb;
}
body.theme-light #app-scratchpad-view textarea::placeholder {
     color: #777;
}

#app-scratchpad-view button {
    background-color: #9C27B0; /* Purple */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

#app-scratchpad-view button:hover {
     background-color: #7b1fa2; /* Darker purple */
}

#app-weather-view .weather-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

#app-weather-view .weather-icon {
    width: 80px;
    height: 80px;
    fill: #ffc107; /* Amber for sunny */
    margin-bottom: 10px;
}

body.theme-light #app-weather-view .weather-icon {
     fill: #fbc02d;
}

#app-weather-view .weather-display p {
    font-size: 1.5em;
    font-weight: bold;
    margin: 5px 0;
    color: #fff; /* White text over blue background */
}

body.theme-light #app-weather-view .weather-display p {
     color: #000;
}

#app-weather-view p:last-child {
    font-size: 1em;
    font-weight: normal;
    color: #e0e0e0;
}
body.theme-light #app-weather-view p:last-child {
     color: #333;
}

#app-camera-view .camera-preview {
    width: calc(100% - 40px); /* Subtract padding */
    height: 300px; /* Fixed height for preview area */
    background-color: #555;
    border-radius: 10px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ddd;
    font-size: 1.1em;
}

body.theme-light #app-camera-view .camera-preview {
    background-color: #ccc;
    color: #555;
}

#app-camera-view .camera-preview svg {
    width: 60px;
    height: 60px;
    fill: #ddd;
    margin-bottom: 10px;
}

body.theme-light #app-camera-view .camera-preview svg {
     fill: #555;
}

#app-camera-view button {
    background-color: #f44336; /* Red */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    margin-bottom: 15px;
}

#app-camera-view button:hover {
     background-color: #d32f2f; /* Darker red */
}

#app-camera-view #camera-message {
    font-size: 0.9em;
    color: #aed581; /* Light green */
}

body.theme-light #app-camera-view #camera-message {
    color: #558b2f; /* Dark green */
}

#app-music-view .album-art-placeholder {
     width: 200px;
     height: 200px;
     background-color: #555;
     border-radius: 10px;
     margin: 20px auto; /* Center the block element */
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

body.theme-light #app-music-view .album-art-placeholder {
     background-color: #ccc;
}

#app-music-view .album-art-placeholder svg {
    width: 80px;
    height: 80px;
    fill: #ddd;
}

body.theme-light #app-music-view .album-art-placeholder svg {
     fill: #555;
}

#app-music-view .track-info {
    margin-bottom: 20px;
}

#app-music-view .track-info strong {
    font-size: 1.4em;
    color: #fff;
}

body.theme-light #app-music-view .track-info strong {
     color: #000;
}

#app-music-view .track-info p {
    font-size: 1em;
    color: #bbb;
    margin-top: 5px;
}

body.theme-light #app-music-view .track-info p {
     color: #444;
}

#app-music-view .music-controls {
    display: flex;
    gap: 20px;
}

#app-music-view .music-controls button {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
}

body.theme-light #app-music-view .music-controls button {
     color: #333;
}

#app-music-view .music-controls button.play-pause {
    font-size: 1.5em;
    font-weight: bold;
}

#fullscreen-recommendation {
    position: fixed; /* Position relative to the viewport */
    left: 15px; /* Position it 15px from the left edge */
    top: 50%; /* Start the top edge at 50% of the viewport height */
    transform: translateY(-50%) rotate(-90deg); /* Vertically center and rotate -90 degrees */
    transform-origin: left top; /* Rotate from the top-left corner of the element */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    white-space: nowrap; /* Prevent text wrapping after rotation */
    z-index: 101; /* Ensure it's above the phone */
    /* Reset static properties */
    margin-top: 0;
}