/* Meal Planner 2001: A Culinary Odyssey */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --space-black: #0a0a0f;
    --deep-space: #12121a;
    --panel: #1a1a2e;
    --panel-hover: #22223a;
    --hal-red: #ff3333;
    --hal-glow: #ff000066;
    --cyan: #00d4ff;
    --cyan-dim: #00d4ff33;
    --white: #eeeef0;
    --gray: #888899;
    --green: #00ff88;
    --yellow: #ffcc00;
    --orange: #ff8800;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--space-black);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    min-height: 100vh;
}

/* HAL 9000 eye */
.hal-eye {
    width: 12px; height: 12px;
    background: var(--hal-red);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--hal-red), 0 0 20px var(--hal-glow);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 8px var(--hal-red), 0 0 20px var(--hal-glow); }
    50% { box-shadow: 0 0 15px var(--hal-red), 0 0 40px var(--hal-glow); }
}

/* Nav */
nav {
    background: var(--deep-space);
    border-bottom: 1px solid #ffffff10;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

nav .brand {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cyan);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

nav a {
    color: var(--gray);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

nav a:hover { color: var(--white); }
nav a.active { color: var(--cyan); }

/* Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero */
.hero {
    text-align: center;
    padding: 4rem 2rem;
}

.hero h1 {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--cyan), var(--white));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.hero .subtitle {
    font-family: 'Orbitron', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--gray);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Cards & Panels */
.panel {
    background: var(--panel);
    border: 1px solid #ffffff10;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.panel h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--cyan);
    margin-bottom: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Forms */
label {
    display: block;
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="number"],
input[type="text"],
input[type="url"],
textarea,
select {
    width: 100%;
    background: var(--space-black);
    border: 1px solid #ffffff20;
    border-radius: 8px;
    color: var(--white);
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px var(--cyan-dim);
}

textarea { min-height: 100px; resize: vertical; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--cyan), #0088cc);
    color: var(--space-black);
}
.btn-primary:hover {
    box-shadow: 0 0 20px var(--cyan-dim);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--hal-red);
    color: white;
}
.btn-danger:hover { box-shadow: 0 0 20px var(--hal-glow); }

.btn-secondary {
    background: var(--panel-hover);
    color: var(--white);
    border: 1px solid #ffffff20;
}
.btn-secondary:hover { border-color: var(--cyan); }

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ffffff10;
}

.tab {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab:hover { color: var(--white); }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-favorite { background: var(--cyan-dim); color: var(--cyan); }
.badge-other { background: #ffffff10; color: var(--gray); }
.badge-OPEN { background: #ffffff10; color: var(--gray); }
.badge-FULL { background: #00ff8822; color: var(--green); }
.badge-LOW { background: #ffcc0022; color: var(--yellow); }
.badge-EMPTY { background: #ff333322; color: var(--hal-red); }
.badge-draft { background: #ffcc0022; color: var(--yellow); }
.badge-finalized { background: #00ff8822; color: var(--green); }

/* Recipe / Staple cards */
.item-card {
    background: var(--deep-space);
    border: 1px solid #ffffff08;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s;
}
.item-card:hover { border-color: #ffffff20; }

.item-card .name { font-weight: 500; }
.item-card .meta { color: var(--gray); font-size: 0.85rem; }
.item-card .actions { display: flex; gap: 0.5rem; align-items: center; }

/* Category groups */
.category-group { margin-bottom: 2rem; }
.category-group h3 {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: var(--gray);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ffffff08;
}

/* Email / Shopping list content */
.content-box {
    background: var(--deep-space);
    border: 1px solid #ffffff10;
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
    white-space: pre-wrap;
    line-height: 1.8;
}

.content-box a { color: var(--cyan); }

.copy-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* Loading */
.loading {
    text-align: center;
    padding: 3rem;
}

.loading .spinner {
    width: 40px; height: 40px;
    border: 3px solid #ffffff10;
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Utility */
.flex { display: flex; }
.gap { gap: 1rem; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-gray { color: var(--gray); }

/* Stars background */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(1px 1px at 20% 30%, #ffffff20, transparent),
        radial-gradient(1px 1px at 40% 70%, #ffffff15, transparent),
        radial-gradient(1px 1px at 60% 20%, #ffffff10, transparent),
        radial-gradient(1px 1px at 80% 50%, #ffffff15, transparent),
        radial-gradient(1px 1px at 10% 80%, #ffffff10, transparent),
        radial-gradient(1px 1px at 90% 10%, #ffffff20, transparent);
    pointer-events: none;
    z-index: -1;
}

/* Responsive */
@media (max-width: 600px) {
    .hero h1 { font-size: 1.5rem; }
    .container { padding: 1rem; }
    nav { padding: 0.75rem 1rem; gap: 1rem; flex-wrap: wrap; }
}

/* History */
.history-list { display:flex; flex-direction:column; gap:1rem; }
.history-card { display:block; background:var(--card-bg, rgba(255,255,255,0.05)); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:1.2rem; text-decoration:none; color:inherit; transition:border-color 0.2s; }
.history-card:hover { border-color:var(--cyan, #00d4ff); }
.history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.history-label { font-family:'Orbitron',monospace; font-size:1rem; color:var(--cyan, #00d4ff); }
.history-meals { font-size:0.9rem; color:rgba(255,255,255,0.8); margin-bottom:0.4rem; }
.history-meal { white-space:nowrap; }
.history-meta { font-size:0.8rem; color:rgba(255,255,255,0.4); }
.history-request { font-size:0.8rem; color:rgba(255,255,255,0.5); font-style:italic; margin-top:0.4rem; }