bs.to css 2.0

/*
   Modernized Theme for bs.to / cine.to
   Clean, Dark, Streaming-Platform Aesthetic
*/

:root {
    --bg-main: #0d0e12;
    --bg-darker: #07080a;
    --bg-card: #161820;
    --bg-card-hover: #1e2230;
    --accent-primary: #4facfe;
    --accent-secondary: #00f2fe;
    --text-main: #f1f3f5;
    --text-muted: #9aa0a6;
    --text-dark: #12131a;
    --border-color: rgba(255, 255, 255, 0.06);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --glow-effect: x0 4px 20px rgba(0, 242, 254, 0.15);
}

/* Global Reset & Body Background */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.01em;
}

/* Wrapper / Container */
#root, #wrapper, .container, #main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Header & Navigation Modernization */
header, #nav, .navigation, nav {
    background-color: var(--bg-darker) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 15px 0 !important;
}

nav a, .nav-link {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

nav a:hover, .nav-link:hover, nav a.active {
    color: var(--accent-secondary) !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

/* Content Boxes & Cards (Zusammenfassungen, Serienbeschreibungen) */
.box, .card, .content-box, #content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* Tables / Episode Lists (Schnittstelle zu den Streams) */
table, .table, .episodes, .series-list {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    width: 100% !important;
    background: transparent !important;
}

th {
    background: transparent !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    padding: 10px 15px !important;
    border: none !important;
}

td {
    background-color: var(--bg-card) !important;
    padding: 12px 15px !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background-color 0.2s ease;
}

td:first-child {
    border-left: 1px solid var(--border-color) !important;
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

td:last-child {
    border-right: 1px solid var(--border-color) !important;
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

tr:hover td {
    background-color: var(--bg-card-hover) !important;
}

/* Links & Text Utilities */
a {
    color: var(--accent-primary);
    text-decoration: none !important;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--accent-secondary);
}

/* Hoster Buttons / Stream Links */
.hoster-button, .stream-link, .btn, input[type="submit"], button {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2) !important;
}

.hoster-button:hover, .stream-link:hover, .btn:hover, button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.4) !important;
}

/* Inputs & Search Bar */
input[type="text"], input[type="search"], select, textarea {
    background-color: var(--bg-darker) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus, input[type="search"]:focus, select:focus {
    border-color: var(--accent-secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.15) !important;
}

/* Genre / Badges Tag Styles */
.badge, .genre, .tag {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Scrollbar Overrides */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 2px solid var(--bg-main);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}