/* ============================================================
   ECOSYSTEM‑G — CHANNEL BASE STYLES (MASTER)
   ------------------------------------------------------------
   Global foundation for all channel pages.
   Provides layout, typography, spacing, panels, buttons,
   containers, hero sections, and cinematic-ready surfaces.
   ============================================================ */

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

html, body {
    height: 100%;
    background: #0d0f14;
    color: #e4e6eb;
    font-family: "Inter", Arial, sans-serif;
    overflow-x: hidden;
}

/* -----------------------------------------
   GLOBAL LAYOUT
----------------------------------------- */
.channel-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 25px;
}

/* -----------------------------------------
   HEADERS
----------------------------------------- */
.channel-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1f232b;
}

.channel-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(77,163,255,0.3);
}

/* -----------------------------------------
   HERO SECTION (Shard-ready)
----------------------------------------- */
.channel-hero {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #1a1e25, #0f1116);
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #232832;
}

/* -----------------------------------------
   PANELS
----------------------------------------- */
.panel {
    background: #1a1e25;
    border: 1px solid #232832;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    transition: 0.25s;
}

.panel:hover {
    border-color: #4da3ff;
    box-shadow: 0 0 12px rgba(77,163,255,0.2);
}

/* -----------------------------------------
   BUTTONS
----------------------------------------- */
.btn {
    display: inline-block;
    padding: 10px 16px;
    background: #232832;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
    border: 1px solid #2f3642;
}

.btn:hover {
    background: #2f3642;
    border-color: #4da3ff;
    box-shadow: 0 0 10px rgba(77,163,255,0.3);
}

/* -----------------------------------------
   INPUTS
----------------------------------------- */
input, textarea {
    width: 100%;
    padding: 10px 12px;
    background: #11141a;
    border: 1px solid #232832;
    border-radius: 6px;
    color: #e4e6eb;
    font-size: 14px;
    margin-bottom: 12px;
}

input:focus, textarea:focus {
    border-color: #4da3ff;
    outline: none;
    box-shadow: 0 0 8px rgba(77,163,255,0.3);
}

/* -----------------------------------------
   MESSAGE BUBBLES (Base)
----------------------------------------- */
.msg {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    max-width: 80%;
    font-size: 14px;
}

.msg.you {
    background: #2f3642;
    margin-left: auto;
    border: 1px solid #4da3ff;
}

.msg.them {
    background: #1a1e25;
    border: 1px solid #232832;
}

/* -----------------------------------------
   META TEXT
----------------------------------------- */
.msg-meta {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}

/* -----------------------------------------
   GRID / FLEX UTILITIES
----------------------------------------- */
.flex {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* -----------------------------------------
   SPACING UTILITIES
----------------------------------------- */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }

/* -----------------------------------------
   TEXT UTILITIES
----------------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { opacity: 0.7; }

/* -----------------------------------------
   CINEMATIC SHARDS (Base)
----------------------------------------- */
.shard {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(77,163,255,0.4);
    border-radius: 2px;
    filter: blur(1px);
    animation: floatShard 6s infinite linear;
}

@keyframes floatShard {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}