/**
 * FRANticc Platform Shell — Consistent top bar + footer across all pages
 * Load this on every page: <link rel="stylesheet" href="/franticc-shell.css">
 */

/* ─── PLATFORM TOP BAR (Cockpit) ─── */
/* .ftc-bar is an alias for .top-black-bar — identical visual */
.ftc-bar, .top-black-bar-shell { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: rgba(10,15,20,0.95); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); z-index: 20000; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.08); overflow: visible; }

/* Grid overlay */
.ftc-bar::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); }

/* Icon glow pools */
.ftc-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 140px 60px at 90px 50%, rgba(16,185,129,0.12), transparent 70%), radial-gradient(ellipse 100px 50px at calc(100% - 200px) 50%, rgba(255,255,255,0.06), transparent 70%), radial-gradient(ellipse 100px 50px at calc(100% - 100px) 50%, rgba(255,255,255,0.05), transparent 70%), radial-gradient(ellipse 80px 40px at calc(100% - 40px) 50%, rgba(255,255,255,0.04), transparent 70%); mix-blend-mode: overlay; }

/* Cockpit buttons — match brandpage .btn-naked */
.ftc-bar .btn-naked { background: transparent; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; transition: all 0.2s; opacity: 0.8; outline: none; flex-shrink: 0; position: relative; z-index: 1; }
.ftc-bar .btn-naked:hover { opacity: 1; }
.ftc-bar .btn-naked svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ftc-bar .top-controls { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }

/* ─── PLATFORM FOOTER ─── */
.ftc-footer { background: #0a0f14; border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 24px 32px; text-align: center; font-family: 'Inter', sans-serif; margin-top: 40px; position: relative; overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); box-sizing: border-box; }

/* Footer grid — subtler diagonal crosshatch, different from top bar */
.ftc-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(135deg, rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(225deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, black 0%, transparent 60%); -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 60%); }

/* Footer glow — single subtle emerald wash at top */
.ftc-footer::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 80px; pointer-events: none; background: radial-gradient(ellipse 600px 80px at center top, rgba(16,185,129,0.04), transparent 70%); }

.ftc-footer-inner { max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
.ftc-footer-brand { font-family: 'Urbanist', sans-serif; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ftc-footer-brand .dot { color: #10b981; }
.ftc-footer-brand .fade { opacity: 0.35; }
.ftc-footer-tagline { font-size: 11px; color: rgba(255,255,255,0.3); margin-bottom: 20px; }
.ftc-footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ftc-footer-links a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 12px; font-weight: 500; font-family: 'Urbanist', sans-serif; transition: color 0.15s; }
.ftc-footer-links a:hover { color: rgba(255,255,255,0.7); }
.ftc-footer-sources { font-size: 10px; color: rgba(255,255,255,0.2); margin-bottom: 12px; letter-spacing: 0.3px; }
.ftc-footer-email { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 12px; }
.ftc-footer-email a { color: rgba(255,255,255,0.35); text-decoration: none; }
.ftc-footer-legal { font-size: 10px; color: rgba(255,255,255,0.15); }

/* ─── LIGHT MODE for dark-default pages ─── */
body.light-mode { background: #fafaf9 !important; color: #1e293b !important; }
body.light-mode .ftc-bar { background: rgba(255,255,255,0.95); border-bottom-color: rgba(0,0,0,0.06); }
body.light-mode .ftc-bar::before { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }
body.light-mode .ftc-bar::after { background: radial-gradient(ellipse 140px 60px at 90px 50%, rgba(16,185,129,0.08), transparent 70%); }
body.light-mode .ftc-bar .btn-naked { color: #1e293b; }
body.light-mode .ftc-bar .btn-naked:hover { background: rgba(0,0,0,0.05); }
body.light-mode .ftc-bar .fl-logo span { color: #1e293b; }
body.light-mode .ftc-ctrl-btn { color: #1e293b; }
body.light-mode .ftc-footer { background: #f1f5f9; border-top-color: rgba(0,0,0,0.06); }
body.light-mode .ftc-footer-brand { color: #1e293b; }
body.light-mode .ftc-footer-tagline { color: #64748b; }
body.light-mode .ftc-footer-links a { color: #64748b; }
body.light-mode .ftc-footer-links a:hover { color: #1e293b; }
body.light-mode .ftc-footer-legal { color: #94a3b8; }
body.light-mode .ftc-footer::before { background-image: linear-gradient(135deg, rgba(0,0,0,0.02) 1px, transparent 1px), linear-gradient(225deg, rgba(0,0,0,0.02) 1px, transparent 1px); }

@media (max-width: 768px) {
    .ftc-bar { padding: 0 16px; height: 56px; }
    .ftc-footer { padding: 32px 16px 24px; }
    .ftc-footer-links { gap: 12px; }
}