/* GLOBAL */
body {
    font-family: 'Segoe UI', sans-serif;
    background: #e9ecef;
}

/* =========================== PROFESSIONAL NEWS HEADER =========================== */
.top-header {
    background: #0f172a;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 2px solid #dc2626;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    padding: 10px 0;
}
.header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
}

/* LOGO */
.header-logo {
    flex: 0 0 120px;
}
.logo-link {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.logo-link span {
    color: #ef4444;
}

/* TICKER AREA */
.header-ticker {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.breaking-badge {
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 4px;
    white-space: nowrap;
    margin-right: 12px;
    letter-spacing: .5px;
}
.ticker-container {
    overflow: hidden;
    flex: 1;
    white-space: nowrap;
}
.ticker-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    animation: tickerScroll 80s linear infinite;
}
.ticker-container:hover .ticker-track {
    animation-play-state: paused;
}
.ticker-track a {
    color: #fff;
    text-decoration: none;
    margin-right: 55px;
    font-size: 14px;
    transition: .3s;
}
.ticker-track a:hover {
    color: #facc15;
}

/* DATE TIME */
.header-time {
    flex: 0 0 110px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: #e5e7eb;
    font-weight: 600;
}

/* CALENDAR */
.header-calendar {
    flex: 0 0 45px;
    text-align: center;
    position: relative;
}
.calendar-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    transition: .3s;
}
.calendar-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
}
.calendar-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* TICKER ANIMATION */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* TABLET */
@media (max-width: 992px) {
    .header-logo { flex-basis: 100px; }
    .logo-link { font-size: 20px; }
    .header-time { flex-basis: 90px; font-size: 11px; }
}

/* MOBILE */
@media (max-width: 768px) {
    .top-header { padding: 6px 0; }
    .header-row { gap: 8px; min-height: 56px; }
    .header-logo { flex: 0 0 80px; }
    .logo-link { font-size: 16px; }
    .breaking-badge { font-size: 10px; padding: 6px 8px; margin-right: 8px; }
    .ticker-track a { font-size: 12px; margin-right: 30px; }
    .header-time { flex: 0 0 70px; font-size: 10px; }
    .calendar-btn { width: 34px; height: 34px; font-size: 16px; }
}

/* EXTRA SMALL */
@media (max-width: 480px) {
    .header-time { display: none; }
    .header-logo { flex: 0 0 70px; }
    .logo-link { font-size: 15px; }
    .breaking-badge { padding: 5px 7px; }
}

/* TOOLBAR */
.toolbar {
    background: #f1f1f1;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.toolbar .btn {
    margin-right: 5px;
}

/* LAYOUT */
.main-container {
    height: calc(100vh - 140px);
}

/* LEFT PANEL */
.left-panel {
    background: #fff;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}
.thumb {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid transparent;
}
.thumb:hover {
    border-color: #dc3545;
}

/* VIEWER */
.viewer-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.action-bar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    text-align: right;
}
.page-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dcdcdc;
    overflow: auto;
}
.page-container img {
    max-width: 95%;
    max-height: 95%;
    transition: transform 0.3s;
}

/* EDITIONS */
.section-title {
    font-weight: 600;
}
.edition-card {
    transition: 0.3s;
}
.edition-card:hover {
    transform: translateY(-5px);
}
.edition-card img {
    height: 220px;
    object-fit: cover;
}

/* FOOTER */
footer {
    background: #111;
    color: #bbb;
    text-align: center;
    padding: 15px 0;
}
footer span {
    color: #fff;
}