:root {
    --primary-color: #2C3E50;
    --secondary-color: #3498DB;
    --accent-color: #2ECC71;
    --text-color: #ECF0F1;
    --background-color: #34495E;
    --card-color: rgba(44, 62, 80, 0.7);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --loader-color: #ffa516;
    --progress-color: #2ECC71;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    background-image: url('../images/backgrounds/default.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    transition: background-image 1s ease;
}

.app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    text-align: center;
    padding: 20px 0;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.tagline {
    font-size: 1.2rem;
    opacity: 0.9;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Timer Container */
.timer-container {
    background-color: var(--card-color);
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    backdrop-filter: blur(10px);
}

.timer-container h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    opacity: 0.9;
}

.timer-display-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.timer-progress-ring {
    position: relative;
    display: inline-block;
}

.progress-ring {
    transform: rotate(-90deg);
    width: 200px;
    height: 200px;
}

.progress-ring-background {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.progress-ring-progress {
    fill: none;
    stroke: var(--progress-color);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.timer-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

button {
    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

button:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

.time-adjust {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-button {
    border-radius: 20px;
    width: auto;
    padding: 0 20px;
    background-color: var(--accent-color);
    position: relative;
    overflow: hidden;
}

.primary-button:hover {
    background-color: #27ae60;
}

.primary-button.running {
    background-color: #e74c3c;
    animation: pulse 2s infinite;
}

.primary-button.running:hover {
    background-color: #c0392b;
}

@keyframes pulse {
   0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
   70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
   100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

h2 {
   margin-bottom: 15px;
   text-align: center;
}

/* Ambient Selector */
.ambient-selector {
   background-color: var(--card-color);
   border-radius: 15px;
   padding: 20px;
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
}

.ambient-categories {
   display: flex;
   flex-direction: column;
   gap: 25px;
}

.ambient-category {
   border-radius: 10px;
   padding: 15px;
   background-color: rgba(255, 255, 255, 0.05);
}

.category-title {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 15px;
   font-size: 1.1rem;
   color: var(--text-color);
   opacity: 0.9;
}

.category-icon {
   font-size: 1.3rem;
}

.ambient-options {
   display: flex;
   justify-content: center;
   gap: 15px;
   flex-wrap: wrap;
}

.ambient-card {
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   padding: 15px;
   text-align: center;
   cursor: pointer;
   transition: var(--transition);
   width: 90px;
   position: relative;
   border: 2px solid transparent;
}

.ambient-card:hover {
   transform: translateY(-5px);
   background-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ambient-card.active {
   background-color: var(--accent-color);
   border-color: rgba(255, 255, 255, 0.3);
   box-shadow: 0 0 20px rgba(46, 204, 113, 0.4);
   transform: translateY(-3px);
}

.ambient-card.active:hover {
   transform: translateY(-7px);
}

.ambient-icon {
   font-size: 2rem;
   margin-bottom: 10px;
   transition: var(--transition);
}

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

.ambient-card p {
   font-size: 0.9rem;
   margin: 0;
}

/* Estilo específico para notificação de limite de áudio */
.ambient-limit-notification {
    background-color: rgba(241, 196, 15, 0.95) !important;
}

.ambient-limit-notification .notification-icon {
    font-size: 2rem;
    filter: grayscale(0.3);
}

.ambient-limit-notification .notification-text h3 {
    color: #2c3e50;
}

.ambient-limit-notification .notification-text p {
    color: #34495e;
}

/* Loading Animation */
.ambient-card .loader {
   width: 40px;
   aspect-ratio: 1;
   border-radius: 50%;
   background: 
     radial-gradient(farthest-side, var(--loader-color) 94%, #0000) top/6px 6px no-repeat,
     conic-gradient(#0000 30%, var(--loader-color));
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
   animation: l13 1s infinite linear;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: none;
}

@keyframes l13 { 
   100% {transform: translate(-50%, -50%) rotate(1turn)}
}

.ambient-card.loading .loader {
   display: block;
}

.ambient-card.loading .ambient-icon,
.ambient-card.loading p:not(.error-text) {
   display: none;
}

/* Error state styling */
.ambient-card .error-text {
   font-size: 0.7rem;
   margin-top: 5px;
   display: none;
   opacity: 0.9;
   color: #e74c3c;
   line-height: 1.2;
}

.ambient-card.error .error-text {
   display: block;
}

.ambient-card.error {
   background-color: rgba(231, 76, 60, 0.2);
   border-color: rgba(231, 76, 60, 0.5);
}

.ambient-card.error .ambient-icon,
.ambient-card.error p:not(.error-text),
.ambient-card.error .loader {
   display: none;
}

/* Session History */
.session-history {
   background-color: var(--card-color);
   border-radius: 15px;
   padding: 20px;
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
}

.history-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.history-item {
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   padding: 12px 15px;
   display: flex;
   justify-content: space-between;
   transition: var(--transition);
   border-left: 3px solid transparent;
}

.history-item:hover {
   background-color: rgba(255, 255, 255, 0.15);
   border-left-color: var(--accent-color);
   transform: translateX(5px);
}

.empty-state {
   text-align: center;
   opacity: 0.7;
   font-style: italic;
   padding: 20px;
}

/* Completion Notification */
.completion-notification {
   position: fixed;
   top: 20px;
   right: 20px;
   background-color: rgba(46, 204, 113, 0.95);
   border-radius: 15px;
   padding: 20px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
   transform: translateX(120%);
   transition: transform 0.5s ease;
   cursor: pointer;
   z-index: 1000;
   max-width: 300px;
}

.completion-notification.show {
   transform: translateX(0);
}

.notification-content {
   display: flex;
   align-items: center;
   gap: 15px;
}

.notification-icon {
   font-size: 2rem;
   animation: bounce 0.6s ease;
}

@keyframes bounce {
   0%, 20%, 53%, 80%, 100% {
       animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
       transform: translate3d(0,0,0);
   }
   40%, 43% {
       animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
       transform: translate3d(0, -10px, 0);
   }
   70% {
       animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
       transform: translate3d(0, -5px, 0);
   }
   90% {
       transform: translate3d(0,-2px,0);
   }
}

.notification-text h3 {
   margin: 0 0 5px 0;
   font-size: 1.1rem;
   color: white;
}

.notification-text p {
   margin: 0;
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.9);
}

footer {
   text-align: center;
   padding: 20px 0;
   opacity: 0.8;
   font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
   .app-container {
       padding: 15px;
   }
   
   .timer-display {
       font-size: 2.5rem;
   }
   
   .progress-ring {
       width: 180px;
       height: 180px;
   }
   
   .ambient-categories {
       gap: 20px;
   }
   
   .ambient-options {
       gap: 10px;
   }
   
   .ambient-card {
       width: 80px;
       padding: 12px;
   }
   
   .ambient-icon {
       font-size: 1.8rem;
   }
   
   .timer-controls {
       gap: 8px;
   }
   
   button {
       width: 35px;
       height: 35px;
       font-size: 1.2rem;
   }
   
   .time-adjust {
       font-size: 0.9rem;
   }
   
   .completion-notification {
       top: 10px;
       right: 10px;
       left: 10px;
       max-width: none;
   }
   
   .notification-content {
       gap: 10px;
   }
   
   .notification-icon {
       font-size: 1.5rem;
   }
}

@media (max-width: 480px) {
   h1 {
       font-size: 2rem;
   }
   
   .tagline {
       font-size: 1rem;
   }
   
   .timer-display {
       font-size: 2rem;
   }
   
   .progress-ring {
       width: 160px;
       height: 160px;
   }
   
   .ambient-card {
       width: 70px;
       padding: 10px;
   }
   
   .ambient-icon {
       font-size: 1.5rem;
   }
   
   .ambient-card p {
       font-size: 0.8rem;
   }
   
   .category-title {
       font-size: 1rem;
   }
   
   .history-item {
       flex-direction: column;
       gap: 5px;
       text-align: center;
   }
   
   .error-text {
       font-size: 0.65rem !important;
   }
}