/* =========================================
   GLOBAL VARIABLES & RESET
   ========================================= */
:root {
    --bg-start: #1a1a1a;
    --bg-end: #b2b6bd;
}

/* =========================================
   ALLGEMEINES LAYOUT & TYPOGRAFIE
   ========================================= */
body {
    /* Fallback Schriftart, wird in index.php dynamisch überschrieben */
    font-family: 'Rajdhani', 'Rubik', sans-serif; 
    
    /* Hintergrund-Verlauf von Dunkel (oben) nach Hellgrau (unten) */
    background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed; /* Fixiert den Hintergrund beim Scrollen */
    background-repeat: no-repeat;
    
    color: #F0F0F0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    font-size: 14px;
}

#dashboard-container {
    width: 90%;
    max-width: 960px;
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 40px; 
    display: grid;
    gap: 15px;
}

/* =========================================
   HEADER BAR
   ========================================= */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: #1a1a1a; 
    border-radius: 5px;
    font-size: 0.9em;
    color: #aaa;
    border-bottom: 2px solid #333; 
    margin-bottom: 5px; 
    transition: color 0.5s, border-color 0.5s; 
}

.header-bar .logo {
    font-weight: bold;
    color: #F0F0F0; 
    font-size: 1.1em;
    transition: color 0.5s; 
}

/* Dynamische Header-Farben */
.header-bar.temp-freezing .logo { color: #81D4FA !important; }
.header-bar.temp-cold .logo     { color: #4FC3F7 !important; }
.header-bar.temp-cool .logo     { color: #64B5F6 !important; }
.header-bar.temp-mild .logo     { color: #C5E1A5 !important; }
.header-bar.temp-warm .logo     { color: #FFD54F !important; }
.header-bar.temp-hot .logo      { color: #FF8A65 !important; }


/* =========================================
   HAUPT-STATUS-GRID (KREISE)
   ========================================= */
.main-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    margin-top: 15px;
    
    /* WICHTIG: Zwingt alle Inhalte (Kreise) exakt in die horizontale Mitte der Spalte */
    justify-items: center; 
}

@media (max-width: 768px) { 
    .main-stats-grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 480px) { 
    .main-stats-grid { grid-template-columns: 1fr; } 
}

.circle-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;     /* Zentriert Horizontal */
    justify-content: center; /* Zentriert Vertikal */
    text-align: center;
    position: relative; 
    padding-bottom: 20px;
    width: 100%; /* Nimmt die volle Breite der Zelle ein */
}

.circle-display {
    width: 100px; 
    height: 100px;
    font-size: 1.8em; 
    border-radius: 50%;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    position: relative; 
    overflow: visible; 
    color: #F0F0F0; 
    background: linear-gradient(145deg, #2b2b2b, #151515);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3);
    transition: color 0.5s, border-color 0.5s, box-shadow 0.2s;
}

.circle-display.large {
    width: 150px;
    height: 150px;
    font-size: 2.5em; 
}

/* Webcam Kreis */
.circle-display.webcam-circle {
    padding: 0;
    overflow: hidden; 
    cursor: pointer;
    background: #000;
    border: 2px solid #555;
    display: block; 
}
.circle-display.webcam-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: opacity 0.5s; 
}

/* Icons in den Kreisen */
.circle-display i, #wind-icon {
    font-size: 1.0em; 
    margin-bottom: 3px; 
    color: inherit; 
    position: static; 
}

#wind-direction-arrow { display: none; }
.circle-display#wind-speed-display .circle-value { color: #F0F0F0 !important; }

/* Roter Wind-Pfeil auf dem Rand */
#wind-direction-indicator {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    transition: transform 0.5s ease-out; 
    z-index: 10;
    transform-origin: 50% 50%; 
}
#wind-direction-indicator::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -20px); 
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 8px 20px 8px; 
    border-color: transparent transparent #FF3333 transparent; 
}

.circle-value { line-height: 1; }
.circle-unit { font-size: 0.5em; font-weight: normal; color: #aaa; margin-top: -5px; }

/* Label unter dem Kreis */
.circle-label-bottom {
    margin-top: 10px; 
    font-size: 1em; 
    font-weight: 500; 
    color: #ccc; 
    width: 100%; 
    text-align: center; /* Erzwingt Zentrierung des Textes */
}

.no-transition { transition: none !important; }


/* =========================================
   DETAIL KARTEN (MITTE)
   ========================================= */
.middle-row-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 600px) { .middle-row-grid { grid-template-columns: 1fr 1fr; } }

.detail-card-left, .detail-card-right {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.detail-card-left h3, .detail-card-right h3 {
    margin-top: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: #F0F0F0;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.detail-card-left p, .detail-card-right p {
    margin: 5px 0; font-size: 1em;
    display: flex; justify-content: space-between; align-items: center;
    color: #F0F0F0; 
}
/* Icons färben */
.detail-card-left p i, .detail-card-right p i {
    margin-right: 10px; color: #C5E1A5; transition: color 0.5s; 
}

/* Dynamische Detail-Icons */
.detail-card-left.temp-freezing i, .detail-card-right.temp-freezing i { color: #81D4FA !important; }
.detail-card-left.temp-cold i, .detail-card-right.temp-cold i       { color: #4FC3F7 !important; }
.detail-card-left.temp-cool i, .detail-card-right.temp-cool i       { color: #64B5F6 !important; }
.detail-card-left.temp-mild i, .detail-card-right.temp-mild i       { color: #C5E1A5 !important; }
.detail-card-left.temp-warm i, .detail-card-right.temp-warm i       { color: #FFD54F !important; }
.detail-card-left.temp-hot i, .detail-card-right.temp-hot i         { color: #FF8A65 !important; }

.data-value { font-weight: bold; color: #F0F0F0; margin-left: auto; transition: color 0.5s; }
.data-unit, .unit-time { font-size: 0.8em; color: #aaa; margin-left: 5px; }
.value-no-unit { font-size: 1em; }
.value-no-unit-full { text-align: right; width: 100%; }
.astro-divider { border: 0; height: 1px; background-color: #333; margin: 10px 0; }


/* =========================================
   DIAGRAMME
   ========================================= */
.chart-section-grid {
    display: grid; grid-template-columns: 1fr; gap: 15px;
}
@media (min-width: 600px) { .chart-section-grid { grid-template-columns: 1fr 1fr; } }

.chart-card {
    background-color: #2a2a2a; padding: 15px;
    border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    height: 300px; position: relative;
}
.chart-card h3 {
    margin-top: 0; font-size: 1.1em; font-weight: 500; color: #F0F0F0; margin-bottom: 10px;
}


/* =========================================
   FOOTER
   ========================================= */
.footer-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; margin-top: 20px; font-size: 0.8em; color: #888;
    border-top: 1px solid #333;
}
.update-info { font-style: italic; }


/* =========================================
   GLOBALE DYNAMISCHE FARBEN
   ========================================= */
/* Temperatur */
.temp-freezing { color: #81D4FA; border-color: #81D4FA !important; }
.temp-cold     { color: #4FC3F7; border-color: #4FC3F7 !important; }
.temp-cool     { color: #64B5F6; border-color: #64B5F6 !important; }
.temp-mild     { color: #C5E1A5; border-color: #C5E1A5 !important; }
.temp-warm     { color: #FFD54F; border-color: #FFD54F !important; }
.temp-hot      { color: #FF8A65; border-color: #FF8A65 !important; }

/* Wind */
.wind-calm   { color: #EEEEEE; border-color: #EEEEEE !important; }
.wind-light  { color: #B3E5FC; border-color: #B3E5FC !important; }
.wind-medium { color: #4DB6AC; border-color: #4DB6AC !important; }
.wind-strong { color: #FFB300; border-color: #FFB300 !important; }
.wind-high   { color: #E53935; border-color: #E53935 !important; }

/* Feuchte */
.humidity-dry     { color: #FFCC80; border-color: #FFCC80 !important; }
.humidity-optimal { color: #A5D6A7; border-color: #A5D6A7 !important; }
.humidity-moist   { color: #81D4FA; border-color: #81D4FA !important; }
.humidity-high    { color: #4FC3F7; border-color: #4FC3F7 !important; }


/* =========================================
   TREND INDIKATOREN & ANIMATIONEN
   ========================================= */
.trend-indicator {
    position: absolute; top: 10px; right: 10px; 
    font-size: 1.8em; font-weight: 900; 
    opacity: 0; transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transform: translateY(0); z-index: 15; 
}
.trend-indicator i { font-size: inherit !important; }

/* Größe für Haupt-Kreise (alle gleich) */
#temp-display ~ .trend-indicator,
#wind-speed-display > .trend-indicator,
#humidity-out-display ~ .trend-indicator {
    font-size: 2.5em !important; top: 10px !important; right: 10px !important;
    transform: translateY(0) !important; 
}

.trend-up { color: #4CAF50; opacity: 1; animation: pulse-up 2s ease-in-out forwards !important; }
.trend-down { color: #ff4d4d; opacity: 1; animation: pulse-down 2s ease-in-out forwards !important; }

@keyframes pulse-up {
    0% { transform: translateY(0); opacity: 0; }
    10% { transform: translateY(-7px); opacity: 1; } 
    80% { transform: translateY(-7px); opacity: 1; } 
    100% { transform: translateY(-7px); opacity: 0; } 
}
@keyframes pulse-down {
    0% { transform: translateY(0); opacity: 0; }
    10% { transform: translateY(7px); opacity: 1; } 
    80% { transform: translateY(7px); opacity: 1; } 
    100% { transform: translateY(7px); opacity: 0; } 
}

.circle-display.highlight-up {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 15px #4CAF50, inset 0 2px 5px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.circle-display.highlight-down {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 15px #ff4d4d, inset 0 2px 5px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s, border-color 0.2s;
}

@keyframes detail-pulse {
    0% { color: #F0F0F0; transform: scale(1); } 
    50% { color: #FF9800; transform: scale(1.05); } 
    100% { color: #F0F0F0; transform: scale(1); } 
}
.data-value.pulse-change { animation: detail-pulse 1s ease-out; }


/* =========================================
   LIGHTBOX & MEGA MODE
   ========================================= */
.lightbox {
    display: none; position: fixed; z-index: 9999; 
    padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0, 0, 0, 0.95); 
    align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.lightbox-content {
    margin: auto; display: block; width: 90%; max-width: 900px;
    animation-name: zoom; animation-duration: 0.6s; position: relative;
    border-radius: 8px; overflow: hidden;
}
.lightbox-content img { width: 100%; height: auto; display: block; }
.lightbox-close {
    position: absolute; top: 15px; right: 35px; color: #f1f1f1;
    font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 10000;
}
.lightbox-close:hover, .lightbox-close:focus { color: #bbb; text-decoration: none; cursor: pointer; }
@keyframes zoom { from {transform: scale(0)} to {transform: scale(1)} }
@media only screen and (max-width: 700px){ .lightbox-content { width: 100%; } }

/* MEGA KREIS STYLE (in Lightbox) */
.circle-display.mega-size {
    width: 50vmin;
    height: 50vmin;
    font-size: 8em; 
    border-width: 6px; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
    background: linear-gradient(145deg, #222, #111);
    margin: auto; /* Zentriert im Flex Container */
}
.circle-display.mega-size i { font-size: 0.6em; margin-bottom: 20px; }
.circle-display.mega-size .circle-value { line-height: 0.9; }
.circle-display.mega-size .circle-unit { font-size: 0.3em; margin-top: 10px; color: #ccc; }
@media (max-width: 768px) {
    .circle-display.mega-size { width: 70vmin; height: 70vmin; font-size: 5em; }
}


/* =========================================
   WETTERVORSCHAU (FORECAST)
   ========================================= */
.forecast-card {
    background-color: #2a2a2a; padding: 15px;
    border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); margin-top: 0; 
}
.forecast-card h2 {
    font-size: 1.1em; font-weight: 500; color: #F0F0F0;
    margin-top: 0; margin-bottom: 15px;
    border-bottom: 1px solid #333; padding-bottom: 5px;
    border-left: 4px solid #333; padding-left: 10px; 
    transition: border-left-color 0.5s; 
}
/* Dynamische Farbe für H2 */
.forecast-card.temp-freezing h2 { border-left-color: #81D4FA !important; }
.forecast-card.temp-cold h2     { border-left-color: #4FC3F7 !important; }
.forecast-card.temp-cool h2     { border-left-color: #64B5F6 !important; }
.forecast-card.temp-mild h2     { border-left-color: #C5E1A5 !important; }
.forecast-card.temp-warm h2     { border-left-color: #FFD54F !important; }
.forecast-card.temp-hot h2      { border-left-color: #FF8A65 !important; }

/* GRID Layout */
.weather-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1024px) { .weather-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .weather-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .weather-grid { grid-template-columns: 1fr; } }

.weather-day {
    background-color: #222; padding: 10px; border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2); 
    display: flex; flex-direction: column; gap: 6px; border: 1px solid #333;
}
.weather-day .day-header {
    display: flex; justify-content: space-between; font-weight: bold;
    border-bottom: 1px solid #444; padding-bottom: 4px;
    margin-bottom: 2px; color: #ddd; font-size: 0.95em; 
}
.day-part {
    background: rgba(255,255,255,0.03); border-radius: 5px; padding: 8px; margin-bottom: 0;
}
.day-part.warn { background: rgba(129, 212, 250, 0.1); border: 1px solid rgba(129, 212, 250, 0.3); }

.part-time { font-size: 0.75em; color: #888; text-transform: uppercase; margin-bottom: 4px; border-bottom: 1px solid #333; padding-bottom: 2px;}
.part-details { display: flex; flex-direction: column; gap: 1px; }
.part-symbol { font-size: 1.4em; display: block; margin-bottom: 2px; }
.part-temp { font-weight: bold; font-size: 0.95em; color: #fff; white-space: nowrap; }
.part-desc { font-size: 0.8em; opacity: 0.8; display: block; margin-top: 1px; line-height: 1.2; }
.part-extra {
    display: flex; justify-content: space-between; font-size: 0.75em; color: #ccc;
    margin-top: 5px; padding-top: 3px; border-top: 1px solid #444;
}

/* HEUTE KARTE */
.weather-day.today-card { border-width: 1px; border-style: solid; border-color: #444; transition: border-color 0.5s; }
.weather-day.today-card h3 { transition: color 0.5s; }
.forecast-card.temp-freezing .weather-day.today-card { border-color: #81D4FA !important; }
.forecast-card.temp-cold .weather-day.today-card { border-color: #4FC3F7 !important; }
.forecast-card.temp-cool .weather-day.today-card { border-color: #64B5F6 !important; }
.forecast-card.temp-mild .weather-day.today-card { border-color: #C5E1A5 !important; }
.forecast-card.temp-warm .weather-day.today-card { border-color: #FFD54F !important; }
.forecast-card.temp-hot .weather-day.today-card { border-color: #FF8A65 !important; }


/* =========================================
   GROSSES SEITEN-THERMOMETER
   ========================================= */
.side-thermometer-wrapper {
    position: fixed;
    top: 50%;
    left: 5%; 
    transform: translateY(-50%);
    display: none; 
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 50;

    /* KARTEN-LOOK */
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    min-width: 120px;
}
/* Zentrierung im freien Bereich */
@media (min-width: 1450px) {
    .side-thermometer-wrapper {
        display: flex;
        left: calc((100vw - 1000px) / 4); 
        transform: translate(-50%, -50%);
    }
}

.thermometer-body {
    position: relative; width: 90px; height: 400px; display: flex; justify-content: center; 
}
/* Skala */
.thermometer-scale { position: absolute; left: 0; top: 10px; bottom: 50px; width: 100%; pointer-events: none; }
.tick { position: absolute; left: 25px; width: 30px; border-bottom: 2px solid #666; height: 0; }
.tick.small { width: 15px; left: 40px; border-bottom: 1px solid #555; opacity: 0.6; }
.tick span { position: absolute; left: -45px; top: -7px; font-size: 0.85em; font-weight: bold; text-align: right; width: 40px; }

/* Ticks Farben */
.tick.scorching { border-color: #D32F2F; } .tick.scorching span { color: #D32F2F; }
.tick.hot { border-color: #FF6D00; } .tick.hot span { color: #FF6D00; }
.tick.warm { border-color: #FFD600; } .tick.warm span { color: #FFD600; }
.tick.mild { border-color: #76FF03; } .tick.mild span { color: #76FF03; }
.tick.zero { border-color: #00E5FF; border-width: 3px; width: 35px; } .tick.zero span { color: #00E5FF; font-size: 1.1em; text-shadow: 0 0 5px #00E5FF; }
.tick.cold { border-color: #2979FF; } .tick.cold span { color: #2979FF; }
.tick.freezing { border-color: #D500F9; } .tick.freezing span { color: #D500F9; }

/* Röhre & Füllung */
.thermometer-tube {
    width: 16px; height: calc(100% - 50px); background: #222; border: 2px solid #444; border-bottom: none; border-radius: 10px 10px 0 0; position: relative; z-index: 1; overflow: hidden; 
}
.tube-bg {
    position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to right, rgba(255,255,255,0.05), transparent, rgba(255,255,255,0.05)); z-index: 0;
}
.thermometer-fill {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background-color: #ccc; 
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s; z-index: 1;
    box-shadow: 0 0 10px currentColor; animation: liquid-pulse 3s infinite alternate;
}
.thermometer-fill::after {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 100%; height: 10px; border-radius: 50%; background: inherit; filter: brightness(1.5); 
    box-shadow: 0 -2px 6px rgba(255,255,255,0.6); animation: surface-splash 6s infinite ease-in-out;
}

/* Kugel */
.thermometer-bulb {
    position: absolute; bottom: 0; width: 54px; height: 54px; border-radius: 50%; background: #2a2a2a; border: 2px solid #444; z-index: 2; box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.thermometer-bulb::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background-color: #ccc; transition: background 0.5s; box-shadow: 0 0 20px currentColor; animation: liquid-pulse 3s infinite alternate;
}
.thermometer-text {
    font-size: 2.5em; font-weight: bold; color: #F0F0F0; text-shadow: 0 2px 5px rgba(0,0,0,0.5); margin-top: 5px;
}
.thermometer-text .unit { font-size: 0.5em; color: #888; }

/* Animationen & Verläufe für Thermometer */
@keyframes liquid-pulse { 0% { opacity: 0.85; box-shadow: 0 0 8px currentColor; } 100% { opacity: 1; box-shadow: 0 0 16px currentColor; } }
@keyframes surface-splash {
    0%, 80% { transform: translateX(-50%) scaleY(1); border-radius: 50%; top: -6px; }
    82% { transform: translateX(-50%) scaleY(0.8); top: -5px; }
    85% { transform: translateX(-50%) scaleY(1.8) skewX(5deg); border-radius: 40% 60% 50% 50%; top: -9px; }
    90% { transform: translateX(-50%) scaleY(0.9) skewX(-5deg); top: -5px; }
    100% { transform: translateX(-50%) scaleY(1); top: -6px; }
}

.side-thermometer-wrapper.temp-freezing .thermometer-fill { background: linear-gradient(to top, #AA00FF, #2962FF); color: #2979FF; }
.side-thermometer-wrapper.temp-freezing .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #EA80FC, #AA00FF); color: #D500F9; }
.side-thermometer-wrapper.temp-cold .thermometer-fill { background: linear-gradient(to top, #2962FF, #00B0FF); color: #00B0FF; }
.side-thermometer-wrapper.temp-cold .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #80D8FF, #2962FF); color: #00B0FF; }
.side-thermometer-wrapper.temp-cool .thermometer-fill { background: linear-gradient(to top, #00B0FF, #00E676); color: #00E5FF; }
.side-thermometer-wrapper.temp-cool .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #84FFFF, #00B0FF); color: #00E5FF; }
.side-thermometer-wrapper.temp-mild .thermometer-fill { background: linear-gradient(to top, #00E676, #FFEB3B); color: #76FF03; }
.side-thermometer-wrapper.temp-mild .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #CCFF90, #64DD17); color: #76FF03; }
.side-thermometer-wrapper.temp-warm .thermometer-fill { background: linear-gradient(to top, #FFEB3B, #FF9800); color: #FFC107; }
.side-thermometer-wrapper.temp-warm .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #FFFF8D, #FFD600); color: #FFC107; }
.side-thermometer-wrapper.temp-hot .thermometer-fill { background: linear-gradient(to top, #FF9800, #D50000); color: #FF3D00; }
.side-thermometer-wrapper.temp-hot .thermometer-bulb::after { background: radial-gradient(circle at 30% 30%, #FF9E80, #DD2C00); color: #FF3D00; }