* { box-sizing: border-box; }
body {
margin: 0; padding: 20px; font-family: sans-serif;
background: #1a1a2e; color: #eee;
min-height: 100vh; display: flex; flex-direction: column;
}
header {
width: 1000px; margin: auto; display: flex; justify-content: space-between;
align-items: center; padding-bottom: 20px; border-bottom: 1px solid #333;
flex-wrap: wrap; gap: 15px;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-right {
display: flex; align-items: center; gap: 10px; margin-left: auto;
flex-wrap: wrap; justify-content: flex-end;
}
.header-right button {
padding: 8px 16px; cursor: pointer; background: #007bff; color: #fff;
border: none; border-radius: 4px; white-space: nowrap;
}
.header-right button:hover { background: #0056b3; }
.clock-section {
display: flex; align-items: center; gap: 8px; background: #26314e;
padding: 8px 12px; border-radius: 8px; flex-wrap: wrap; justify-content: center;
}
.tz-buttons { display: flex; gap: 10px; }
.tz-btn {
padding: 4px 8px; background: #16213e; border: 1px solid #4a90e2;
color: #fff; border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.tz-btn:hover, .tz-btn.active { background: #4a90e2; border: 1px solid #cde; }
.msk-clock-wrapper {
text-align: center; font-family: monospace, sans-serif; position: relative;
display: inline-block; z-index: 50; border-radius: 8px;
transition: background-color 1.5s ease, color 1.5s ease;
background-color: #1a1a2e; padding: 10px 20px; min-width: 180px;
}
.msk-clock {
font-size: 3rem; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
line-height: 1; display: inline-block; transition: color 1.5s ease;
}
.msk-clock-wrapper.period-night { background-color: #1a1a2e; }
.msk-clock-wrapper.period-night .msk-clock { color: #4a6fa5; }
.msk-clock-wrapper.period-dawn { background-color: #2d2440; }
.msk-clock-wrapper.period-dawn .msk-clock { color: #f4a261; }
.msk-clock-wrapper.period-morning { background-color: #87ceeb; }
.msk-clock-wrapper.period-morning .msk-clock { color: #1a1a2e; }
.msk-clock-wrapper.period-noon { background-color: #e0f7ff; }
.msk-clock-wrapper.period-noon .msk-clock { color: #2b2d42; }
.msk-clock-wrapper.period-afternoon { background-color: #ffd89a; }
.msk-clock-wrapper.period-afternoon .msk-clock { color: #2b2d42; }
.msk-clock-wrapper.period-sunset { background-color: #4a1c40; }
.msk-clock-wrapper.period-sunset .msk-clock { color: #ff6b6b; }
.msk-clock-wrapper.period-evening { background-color: #2b2d42; }
.msk-clock-wrapper.period-evening .msk-clock { color: #9d4edd; }
.msk-date-tooltip {
visibility: hidden; opacity: 0; background-color: #2c3e50; color: #fff;
text-align: center; border-radius: 6px; padding: 12px 20px; position: absolute;
top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
z-index: 100; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
transition: all 0.3s ease; border: 1px solid #4a6fa5; pointer-events: none; margin-top: 5px;
}
.msk-clock-wrapper:hover .msk-date-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
.tooltip-day { display: block; font-size: 1.2rem; font-weight: bold; color: #add8e6; margin-bottom: 3px; }
.tooltip-date { display: block; font-size: 1rem; color: #ecf0f1; }
#rates-grid { position: relative; min-height: 400px; margin-top: 10px; flex: 1; }
.rate-card {
background: #26314e; padding: 15px; border-radius: 8px; border-left: 4px solid #007bff;
width: 220px; height: 140px; cursor: grab; position: absolute; user-select: none; touch-action: pan-y;
}
.rate-card.dragging { opacity: 0.5; cursor: grabbing; z-index: 1000; }
.rate-card .symbol { font-weight: bold; font-size: 18px; }
.rate-card .price { font-weight: bold; font-size: 24px; margin: 5px 0; text-align: right; }
.rate-card .change { font-size: 14px; margin: 5px 0; }
.rate-card .change.positive { color: #28a745; }
.rate-card .change.negative { color: #ff3545; }
.rate-card .price.positive { color: #28a745; }
.rate-card .price.negative { color: #ff3545; }
.rate-card .updated { font-size: 12px; color: #99b; margin-top: 10px; }
.rate-card.crypto { border-left: 4px solid #f7931a; }
.rate-card.stock { border-left: 4px solid #27ae60; }
.drag-placeholder {
position: absolute; border: 2px dashed #4a90e2; background: rgba(74,144,226,0.2);
border-radius: 8px; pointer-events: none; z-index: 0; width: 220px; height: 140px;
}
#loading { text-align: center; padding: 40px; color: #999; }
.error { color: #dc3545; text-align: center; padding: 20px; }
.fng-indicator {
display: flex; align-items: center; gap: 8px; background: #26314e;
padding: 8px 12px; border-radius: 8px; border-left: 4px solid #4a90e2; cursor: help;
}
.fng-label { font-weight: bold; font-size: 12px; color: #aaa; }
.fng-value { font-weight: bold; font-size: 18px; min-width: 30px; text-align: center; }
.fng-desc { font-size: 12px; color: #ccc; }
.fng-extreme-fear { border-left-color: #ff3545; } .fng-extreme-fear .fng-value { color: #ff3545; }
.fng-fear { border-left-color: #ff6b6b; } .fng-fear .fng-value { color: #ff6b6b; }
.fng-neutral { border-left-color: #f7931a; } .fng-neutral .fng-value { color: #f7931a; }
.fng-greed { border-left-color: #28a745; } .fng-greed .fng-value { color: #28a745; }
.fng-extreme-greed { border-left-color: #27ae60; } .fng-extreme-greed .fng-value { color: #27ae60; }

footer {
width: 100%; background: #16213e; padding: 15px 0;
text-align: center; border-top: 1px solid #333; margin-top: auto;
}
.footer-content {
color: #aaa; font-size: 14px;
}
.footer-content a {
color: #eec; line-height: 1.8; padding: 10px;
}