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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    line-height: 1.6;
}

.app-container {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.app-title {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.brand-line {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: #aaa;
    font-weight: 600;
    margin-bottom: 4px;
}

.title-line {
    display: block;
    font-size: 2.2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    text-align: center;
    color: #aaa;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* TEMPORARY bug-fixing aid — lets Graham glance at his phone and confirm a fresh
   deploy actually reached it (service workers can hold a stale cache for a while).
   Remove this whole block + the #versionBadge div in index.html + the APP_VERSION
   line in app.js once we're done tracing bugs, in a few months. */
.version-badge {
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    color: #aaa;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
}

/* Voice Controls */
.voice-controls {
    text-align: center;
    margin-bottom: 25px;
}

.voice-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 25px 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 auto 15px;
    font-size: 1.2rem;
    color: white;
    font-weight: 600;
}

.voice-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(102, 126, 234, 0.5);
}

.voice-btn:active {
    transform: translateY(-1px);
}

.voice-btn.listening {
    background: linear-gradient(135deg, #ff4444 0%, #ff6b6b 100%);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.voice-icon {
    font-size: 2rem;
}

.voice-text {
    font-size: 1.1rem;
}

.voice-hint {
    color: #aaa;
    font-size: 0.9rem;
    font-style: italic;
}

/* Manual Add */
.manual-add {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.manual-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    padding: 15px;
    font-size: 1rem;
    transition: all 0.3s;
}

.manual-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.15);
}

.manual-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.add-btn {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
}

.add-btn:hover {
    transform: scale(1.05);
}

/* List Container */
.list-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    min-height: 300px;
    margin-bottom: 20px;
}

.list-empty {
    text-align: center;
    color: #666;
    padding: 60px 20px;
    font-size: 1.1rem;
}

.list-empty p:first-child {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* Share / Import current list */
.list-share-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.share-btn,
.import-btn {
    flex: 1;
    background: rgba(102, 126, 234, 0.15);
    color: #b3bdfa;
    border: 2px solid rgba(102, 126, 234, 0.4);
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.share-btn:hover,
.import-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* Delete All Button */
.delete-all-btn {
    width: 100%;
    background: rgba(255, 77, 77, 0.2);
    color: #ff6b6b;
    border: 2px solid #ff6b6b;
    padding: 15px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.delete-all-btn:hover {
    background: rgba(255, 77, 77, 0.4);
    transform: translateY(-2px);
}

.delete-all-btn:active {
    transform: translateY(0);
}

/* Info Sections */
.info-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    margin: 20px 0;
}

.info-section h2 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.info-section ol,
.info-section ul {
    margin-left: 20px;
}

.info-section li {
    margin: 10px 0;
    color: #ddd;
}

.features-list {
    list-style: none;
    margin-left: 0;
}

.features-list li {
    padding-left: 10px;
}

.tip {
    background: rgba(102, 126, 234, 0.2);
    border-left: 4px solid #667eea;
    padding: 12px 15px;
    margin-top: 15px;
    border-radius: 4px;
    color: #ddd;
}

/* Use Cases */
.use-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.use-case-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #667eea;
}

.use-case-item strong {
    color: #667eea;
    display: block;
    margin-bottom: 5px;
}

.use-case-item p {
    color: #aaa;
    font-size: 0.9rem;
}

/* Footer — three-column layout so the icon (left) and QR code (right) balance
   the screen around "Made in New Zealand" (center), instead of the QR sitting
   alone against empty space on the other side. */
.app-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
}

.footer-icon {
    justify-self: start;
    line-height: 0;
}

.footer-icon img {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 12px;
}

.footer-text {
    text-align: center;
    justify-self: center;
}

.app-footer a {
    color: #667eea;
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
}

.affiliate-disclosure {
    font-size: 0.75rem;
    color: #666;
    margin-top: 8px;
}

/* Footer QR code — sits in normal page flow next to "Made in New Zealand",
   so it scrolls with the page instead of floating fixed over content. Tap
   grows it to a big, scannable size so someone else can scan YOUR phone;
   tap again shrinks it back. Same proven pattern as the Model Yacht Timer
   app's #qrCorner — toggle a class, no backdrop, no page navigation. */
.footer-qr {
    display: block;
    justify-self: end;
    flex-shrink: 0;
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    line-height: 0;
    cursor: pointer;
}

.footer-qr.big {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4vmin;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
    z-index: 2000;
}

.footer-qr img {
    display: block;
    width: 64px;
    height: 64px;
}

.footer-qr.big img {
    width: min(80vw, 80vh);
    height: min(80vw, 80vh);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .app-title {
        margin-top: 15px;
    }

    .title-line {
        font-size: 1.8rem;
    }

    .voice-btn {
        padding: 20px 30px;
        font-size: 1rem;
    }

    .use-cases {
        grid-template-columns: 1fr;
    }
}