/* ==========================================================================
   1. GLOBAL ENGINE FOUNDATION & TRANSITIONS
   ========================================================================== */
body {
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    transition: all 0.4s ease;
}

header {
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

h1 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

.subtitle {
    font-size: 0.9rem;
    margin: 0;
}

.post-form {
    padding: 15px;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}

.post-form h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

.form-group { margin-bottom: 12px; }
label { display: block; margin-bottom: 5px; font-size: 0.9rem; }

input[type="text"], textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
button { padding: 8px 16px; cursor: pointer; font-weight: bold; transition: all 0.2s ease; }

.posts-list h2 { font-size: 1.3rem; padding-bottom: 5px; margin-bottom: 15px; }
.post-card { padding: 15px; margin-bottom: 15px; position: relative; transition: all 0.3s ease; }
.post-meta { font-size: 0.8rem; margin-bottom: 8px; padding-bottom: 5px; }
.post-meta span { margin-right: 15px; }
.post-title { font-size: 1.1rem; margin: 0 0 10px 0; font-weight: bold; }
.post-content { white-space: pre-wrap; font-size: 0.95rem; }

.delete-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Theme Controller Bar Layout */
.mode-dashboard {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}
.mode-label { font-size: 0.85rem; font-weight: bold; }
.mode-btn { padding: 5px 12px; font-size: 0.8rem; background: #222; color: #888; border: 1px solid #444; }
.mode-btn.active { color: #fff; background: #444; border-color: #888; }

footer { margin-top: 40px; text-align: center; font-size: 0.8rem; padding-top: 15px; }


/* ==========================================================================
   2. MODE A: CLASSIC RETRO TERMINAL (1983 STYLE)
   ========================================================================== */
body.theme-retro { background-color: #0d0d0d; color: #e0e0e0; font-family: "Courier New", monospace; }
.theme-retro .container { background-color: #121212; border: 1px solid #333; }
.theme-retro header { border-bottom: 2px double #555; }
.theme-retro h1 { color: #ffffff; }
.theme-retro .subtitle { color: #888; }
.theme-retro .post-form { border: 1px dashed #444; background-color: #161616; }
.theme-retro .post-form h2 { color: #00ff66; }
.theme-retro input[type="text"], .theme-retro textarea { background-color: #000; border: 1px solid #444; color: #fff; font-family: "Courier New", monospace; }
.theme-retro input[type="text"]:focus, .theme-retro textarea:focus { border-color: #00ff66; outline: none; }
.theme-retro button { background-color: #222; color: #00ff66; border: 1px solid #00ff66; font-family: "Courier New", monospace; }
.theme-retro button:hover { background-color: #00ff66; color: #000; }
.theme-retro .mode-btn.active { color: #000 !important; background: #00ff66 !important; border-color: #00ff66 !important; }
.theme-retro .posts-list h2 { border-bottom: 1px solid #333; color: #fff; }
.theme-retro .post-card { background-color: #141414; border: 1px solid #222; }
.theme-retro .post-meta { border-bottom: 1px dashed #222; color: #666; }
.theme-retro .post-title { color: #ffffff; }
.theme-retro .post-content { color: #cccccc; }
.theme-retro .delete-btn { color: #666; }
.theme-retro .delete-btn:hover { color: #ff3333; }
.theme-retro footer { border-top: 1px solid #222; color: #444; }


/* ==========================================================================
   3. MODE B: MODERN MINIMALIST DARK (NEW TRENDS)
   ========================================================================== */
body.theme-modern { background-color: #12141c; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
.theme-modern .container { background-color: #1e2230; border-radius: 12px; border: 1px solid #2d334a; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.theme-modern header { border-bottom: 1px solid #2d334a; padding-bottom: 20px; }
.theme-modern h1 { color: #f8fafc; font-weight: 700; letter-spacing: -0.5px; }
.theme-modern .subtitle { color: #94a3b8; }
.theme-modern .post-form { border-radius: 8px; background-color: #181b26; border: 1px solid #2d334a; }
.theme-modern .post-form h2 { color: #38bdf8; font-weight: 600; }
.theme-modern input[type="text"], .theme-modern textarea { background-color: #12141c; border: 1px solid #334155; color: #f8fafc; border-radius: 6px; font-family: inherit; }
.theme-modern input[type="text"]:focus, .theme-modern textarea:focus { border-color: #38bdf8; outline: none; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }
.theme-modern button { border-radius: 6px; border: none; font-family: inherit; background-color: #334155; color: #f1f5f9; }
.theme-modern button:hover { background-color: #475569; }
.theme-modern button.action-btn-submit { background-color: #0284c7; color: #fff; }
.theme-modern button.action-btn-submit:hover { background-color: #0369a1; }
.theme-modern .mode-btn.active { background: #38bdf8 !important; color: #12141c !important; border-color: #38bdf8 !important; }
.theme-modern .posts-list h2 { border-bottom: 2px solid #2d334a; color: #f1f5f9; font-weight: 600; }
.theme-modern .post-card { background-color: #181b26; border: 1px solid #2d334a; border-radius: 8px; }
.theme-modern .post-meta { border-bottom: 1px solid #2d334a; color: #64748b; }
.theme-modern .post-title { color: #f8fafc; }
.theme-modern .post-content { color: #cbd5e1; }
.theme-modern .delete-btn { color: #94a3b8; }
.theme-modern .delete-btn:hover { color: #ef4444; }
.theme-modern footer { border-top: 1px solid #2d334a; color: #64748b; }


/* ==========================================================================
   4. MODE C: CYBERPUNK TECH MATRIX (HIGH-TECH GLOW)
   ========================================================================== */
body.theme-cyber { background-color: #05050a; color: #00ffcc; font-family: "Lucida Console", Monaco, monospace; text-shadow: 0 0 2px rgba(0,255,204,0.3); }
.theme-cyber .container { background-color: #0a0a14; border: 2px solid #ff0055; box-shadow: 0 0 15px #ff0055; position: relative; }
.theme-cyber header { border-bottom: 2px dashed #00ffcc; padding-bottom: 15px; }
.theme-cyber h1 { color: #ff0055; text-transform: uppercase; font-style: italic; text-shadow: 0 0 8px #ff0055; }
.theme-cyber .subtitle { color: #00ffcc; font-weight: bold; }
.theme-cyber .post-form { border: 2px solid #00ffcc; background-color: #0e0e1f; box-shadow: inset 0 0 10px rgba(0,255,204,0.2); }
.theme-cyber .post-form h2 { color: #ffff00; text-transform: uppercase; text-shadow: 0 0 5px #ffff00; }
.theme-cyber input[type="text"], .theme-cyber textarea { background-color: #05050a; border: 1px solid #ff0055; color: #00ffcc; font-family: inherit; }
.theme-cyber input[type="text"]:focus, .theme-cyber textarea:focus { border-color: #ffff00; outline: none; box-shadow: 0 0 8px #ffff00; }
.theme-cyber button { background-color: #05050a; color: #ff0055; border: 2px solid #ff0055; text-transform: uppercase; box-shadow: 0 0 4px #ff0055; }
.theme-cyber button:hover { background-color: #ff0055; color: #000; box-shadow: 0 0 10px #ff0055; }
.theme-cyber button.action-btn-submit { color: #00ffcc; border-color: #00ffcc; box-shadow: 0 0 4px #00ffcc; }
.theme-cyber button.action-btn-submit:hover { background-color: #00ffcc; color: #000; box-shadow: 0 0 10px #00ffcc; }
.theme-cyber .mode-btn.active { background: #ff0055 !important; color: #000 !important; border-color: #ff0055 !important; box-shadow: 0 0 8px #ff0055 !important; }
.theme-cyber .posts-list h2 { border-bottom: 2px dashed #ff0055; color: #00ffcc; }
.theme-cyber .post-card { background-color: #0e0e1f; border: 1px solid #00ffcc; box-shadow: 3px 3px 0px rgba(0,255,204,0.2); }
.theme-cyber .post-meta { border-bottom: 1px dashed #ff0055; color: #ff0055; }
.theme-cyber .post-title { color: #ffff00; text-shadow: 0 0 3px #ffff00; }
.theme-cyber .post-content { color: #00ffcc; }
.theme-cyber .delete-btn { color: #ff0055; font-weight: bold; }
.theme-cyber .delete-btn:hover { color: #ffff00; text-shadow: 0 0 5px #ffff00; }
.theme-cyber footer { border-top: 2px solid #00ffcc; color: #ff0055; }
/* ==========================================================================
   5. ADVANCED UPGRADE STYLES (SEARCH & COUNTER)
   ========================================================================== */
/* 字數計算器基礎排版 */
.word-counter {
    font-size: 0.8rem;
    text-align: right;
    margin-top: 5px;
    font-weight: bold;
    transition: color 0.3s;
}

/* 搜尋區塊基礎排版 */
.search-filter-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.4s ease;
}
.search-icon { font-size: 0.85rem; font-weight: bold; }
#forumSearchInput { width: 100%; padding: 8px 12px; font-size: 0.9rem; }

/* A 款風格：Retro 1983 */
.theme-retro .word-counter { color: #888; font-family: "Courier New", monospace; }
.theme-retro .search-filter-box { background-color: #121212; border: 1px dashed #444; }
.theme-retro .search-icon { color: #00ff66; }
.theme-retro #forumSearchInput { background-color: #000; border: 1px solid #444; color: #fff; font-family: "Courier New", monospace; }
.theme-retro #forumSearchInput:focus { border-color: #00ff66; outline: none; }

/* B 款風格：Modern Minimalist */
.theme-modern .word-counter { color: #64748b; }
.theme-modern .search-filter-box { background-color: #181b26; border: 1px solid #2d334a; }
.theme-modern .search-icon { color: #38bdf8; }
.theme-modern #forumSearchInput { background-color: #12141c; border: 1px solid #334155; color: #f8fafc; border-radius: 6px; }
.theme-modern #forumSearchInput:focus { border-color: #38bdf8; outline: none; }

/* C 款風格：Cyberpunk Tech */
.theme-cyber .word-counter { color: #00ffcc; font-family: "Lucida Console", monospace; }
.theme-cyber .search-filter-box { background-color: #0e0e1f; border: 1px solid #00ffcc; box-shadow: inset 0 0 8px rgba(0,255,204,0.1); }
.theme-cyber .search-icon { color: #ffff00; text-shadow: 0 0 4px #ffff00; }
.theme-cyber #forumSearchInput { background-color: #05050a; border: 1px solid #ff0055; color: #00ffcc; font-family: "Lucida Console", monospace; }
.theme-cyber #forumSearchInput:focus { border-color: #ffff00; outline: none; box-shadow: 0 0 8px #ffff00; }

/* 當字數即將爆板或超過時的警戒色 */
.counter-warn { color: #ff3333 !important; text-shadow: 0 0 5px #ff3333 !important; }