:root {
--bg: #f5f7fb;
--panel: #ffffff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--danger: #ef4444;
--favorite: #f59e0b;
--shadow: 0 10px 30px rgba(0,0,0,0.08);
}

html[data-theme="dark"] {
--bg: #0f172a;
--panel: #111827;
--text: #f9fafb;
--muted: #9ca3af;
--border: #243041;
--primary: #60a5fa;
--primary-hover: #3b82f6;
--danger: #ef4444;
--favorite: #f59e0b;
--shadow: 0 10px 30px rgba(0,0,0,0.25);
}

* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
}

.app {
width: min(1180px, calc(100% - 32px));
margin: 24px auto;
}

/* Header */

.topbar,
.controls,
.section {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: var(--shadow);
}

.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-bottom: 18px;
}

/* Medium Dark Mode Button */

.ghost-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 8px 14px;
font-size: 0.9rem;
border-radius: 10px;
cursor: pointer;
width: auto;
transition: 0.2s ease;
}

.ghost-btn:hover {
background: var(--bg);
}

/* Controls */

.controls {
padding: 16px;
margin-bottom: 18px;
}

.search-box {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
margin-bottom: 12px;
}

.filters {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 10px;
}

input, select {
padding: 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
}

button {
padding: 10px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 500;
transition: 0.2s ease;
}

button:hover {
transform: translateY(-1px);
}

.search-box button {
background: var(--primary);
color: white;
}

.search-box button:hover {
background: var(--primary-hover);
}

/* Sections */

.section {
padding: 18px;
margin-bottom: 18px;
}

.section-head {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}

.section-head span {
color: var(--muted);
}

/* Movie Grid */

.movies {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 16px;
}

.movie-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 10px;
}

.movie-card img {
width: 100%;
border-radius: 12px;
}

.movie-info {
padding: 8px;
}

.movie-info h3 {
margin: 5px 0;
font-size: 1rem;
}

.movie-info p {
margin: 4px 0;
color: var(--muted);
}

/* Buttons */

.movie-info button {
width: 100%;
margin-top: 6px;
background: var(--primary);
color: white;
}

.movie-info button:hover {
background: var(--primary-hover);
}

/* Favorite Button */

.movie-info button:nth-child(4){
background: var(--favorite);
}

/* Remove Button */

.remove-btn {
background: var(--danger) !important;
color: white;
}

/* States */

.hidden {
display:none;
}

.loading{
padding:20px;
text-align:center;
}

.empty{
padding:20px;
text-align:center;
color:var(--muted);
}

/* Responsive */

@media(max-width:768px){

.search-box{
grid-template-columns:1fr;
}

.filters{
grid-template-columns:1fr;
}

.topbar{
flex-direction:column;
gap:10px;
align-items:flex-start;
}

}