:root {
            --color-primary: #5b8c85;
            --color-primary-soft: #85a8a3;
            --color-accent: #d1b87a;
            --color-danger: #d9534f;
            --color-finish: #c97870;
            --color-neutral: #82908d;
            --color-surface: #ffffff;
            --color-background: #f9fbfd;
            --color-border: #e8f0ef;
            --radius-card: 20px;
            --shadow-card: 0 12px 35px rgba(65, 105, 98, 0.09);
        }

        * { box-sizing: border-box; }

        /* --- 全体レイアウト --- */
        body { font-family: "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; background: radial-gradient(circle at 12% 8%, rgba(209,184,122,.13), transparent 24%), radial-gradient(circle at 88% 3%, rgba(133,168,163,.16), transparent 25%), linear-gradient(145deg, #f8fcfa, #f1f8f6 55%, #fbfaf5); color: #333; text-align: center; padding: 24px; margin: 0; min-height: 100vh; }
        
        /* 掲示板のときだけ幅を広くできるように、max-widthを少し柔軟にするか、
           あるいはコンテナ自体を800px〜900px程度に広げると横並びが綺麗になります */
        .container { max-width: 900px; width: 100%; margin: 0 auto; background: rgba(255,255,255,.94); padding: 32px; border: 1px solid rgba(200,220,216,.72); border-radius: 26px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
        .container::before { content: "🌿  ✦"; position: absolute; top: 15px; right: 24px; color: var(--color-primary-soft); opacity: .5; letter-spacing: 8px; pointer-events: none; }
        .container.board-mode { max-width: 1200px; }
        .section { display: none; }
        h1, h2, h3 { font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; }
        h1 { color: #5b8c85; }
        .page-title::before { content: "🌿"; margin-right: 8px; font-size: .85em; }
        .page-title::after { content: "✦"; margin-left: 8px; color: var(--color-accent); font-size: .7em; }

        /* --- コンポーネント --- */
        .card { background: linear-gradient(145deg, #ffffff, #fbfefd); border: 1px solid #dcebe7; border-radius: 20px; padding: 20px; margin: 20px auto; box-shadow: 0 8px 24px rgba(91,140,133,.07); text-align: left; }
        .card-label { font-size: 0.85em; color: #85a8a3; font-weight: bold; margin-bottom: 10px; padding-left: 10px; border-left: 4px solid #85a8a3; }
        .common-textarea { width: 100%; height: 120px; padding: 15px; border: 2px solid #c8dcd8; border-radius: 15px; box-sizing: border-box; font-size: 0.95em; resize: none; background-color: #fcfcfc; }

        /* --- ボタン共通 --- */
        .btn, .btn-common { font-weight: bold; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; border: none; padding: 12px 25px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 5px 14px rgba(74,108,102,.16); color: white; }
        .btn:hover, .btn-common:hover { transform: translateY(-2px); filter: brightness(1.1); }
        .btn:active, .btn-common:active { transform: scale(.97); }
        .btn:disabled, .btn-common:disabled { cursor: wait; opacity: .65; transform: none; }

        /* --- 入力欄 --- */
        input {
            width: 100%;
            max-width: 280px;
            padding: 12px;
            margin: 8px 0;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 10px;
            box-sizing: border-box;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* ログイン・戻るボタン */
        .btn-login { background: linear-gradient(135deg, #6c9b94, #4f817a); color: white; }
        .btn-back { background: linear-gradient(135deg, #99a5a2, #768582); color: white; font-weight: bold; }
        .btn-action { background-color: #5b8c85; width: 100%; padding: 15px; }
        .btn-finish { background-color: #d9534f; }
        .btn-neutral { background-color: #b2c2c0; }
        .btn-sub { background-color: #d1b87a; }
        .message-btn { background: linear-gradient(135deg, #85a8a3, #5b8c85); color: white; padding: 18px 30px; border-radius: 40px; }
        
        #pair-status { margin: 10px auto 20px; padding: 10px 18px; background: #eef5f4; border-radius: 10px; font-size: 14px; color: #5b8c85; width: fit-content; max-width: min(100%, 520px); }
    
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(209, 184, 122, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(209, 184, 122, 0); }
            100% { box-shadow: 0 0 0 0 rgba(209, 184, 122, 0); }
        }

        #phase-explanation-box {
            margin-left: auto !important;
            margin-right: auto !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: fit-content;
            min-width: 300px;
        }

        /* 右側パネルをカード型にする */
        .analysis-panel-card {
            background: #ffffff;
            border: 1px solid #e0e8e8;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            width: 300px; /* 右側の幅を固定 */
            margin-left: 20px;
        }

        .score-item {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            font-size: 0.9em;
        }

        .score-bar {
            height: 8px;
            background: #e0e8e8;
            border-radius: 4px;
            overflow: hidden;
            width: 100px;
        }

        .score-fill {
            height: 100%;
            background: #5b8c85; /* 親密性の色 */
        }

        /* 吹き出しの共通スタイル */
        .chat-bubble {
            white-space: pre-wrap; 
            word-wrap: break-word;
            padding: 12px 18px;
            border-radius: 20px;
            max-width: 75%;           /* 枠の75%の幅まで広がるように調整 */
            position: relative;
            font-size: 14px;
            line-height: 1.5;
            width: fit-content;       /* ★文字の長さに吹き出しの幅を合わせる */
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 軽い影をつけて見やすく */
        }

        /* 自分・相手 */
        .my-bubble { align-self: flex-end; background-color: #5b8c85; color: white; border-bottom-right-radius: 5px; }
        .partner-bubble { align-self: flex-start; background-color: #f1f0f0; color: #333; border: 1px solid #e0e0e0; border-bottom-left-radius: 5px; }

        /* 掲示板用：AIからのアドバイス (点線枠) */
        .ai-consult-ai {
            align-self: flex-start !important;
            background-color: #fffaf0 !important;
            color: #856404 !important;
            border: 2px dashed #d4b483 !important;
            border-radius: 15px 15px 15px 5px !important;
            padding: 10px 15px !important;
            margin-bottom: 10px !important;
            max-width: 75% !important;
            font-size: 14px !important;
        }

        /* 掲示板用：自分の相談内容 (ベージュゴールド) */
        .ai-consult-my {
            align-self: flex-end !important;
            background-color: #d4b483 !important;
            color: white !important;
            border-radius: 15px 15px 5px 15px !important;
            padding: 10px 15px !important;
            margin-bottom: 10px !important;
            max-width: 75% !important;
            background-image: radial-gradient(#e0c59a 1px, transparent 1px) !important;
            background-size: 8px 8px !important;
        }

        .bubble-label { 
            display: block; 
            font-size: 10px; 
            margin-bottom: 5px;   /* 下のメッセージとの隙間を少しあける */
            opacity: 0.7; 
            text-align: center;   /* ★これを追加：文字を吹き出し内の中央に寄せます */
            width: 100%;          /* ★幅いっぱいに広げて中央寄せを確実に効かせる */
        }

        /* 掲示板セクション全体 */
        #board-section {
            display: none;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        
        /* 掲示板のタイトルとヘッダー情報を中央にまとめる */
        #board-section h2 {
            text-align: left;
            margin-left: 5px;
        }

        #board-header {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
            margin-top: 5px;
            margin-left: auto;
            margin-right: auto;
        }

        /* 履歴の枠自体のスタイル */
        #board-history {
            height: min(68vh, 760px);
            overflow-y: auto; 
            padding: 20px;            /* 内側の余白を少し広げてスッキリ */
            border: 2px solid #5b8c85; 
            border-radius: 20px; 
            background-color: #fcfcfc; 
            box-sizing: border-box; 
            width: 100%;
            max-width: 650px;         /* ★下のボタンや入力欄（650px）と完全にサイズを合わせる */
            margin: 0 auto;           /* 中央寄せ */
            
            display: flex;            /* ★これらが超重要！ */
            flex-direction: column;   /* 縦方向に上から順に並べる */
            gap: 16px;                /* ★吹き出し同士の縦の隙間をしっかりあける */
        }

        /* 2カラムを包むコンテナ：基本（フェーズ1）は最大幅600pxで画面の真ん中に置く */
        #board-main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto 20px auto;
            max-width: 600px; /* フェーズ1の時はスッキリ中央に収める */
            width: 100%;
            transition: max-width 0.3s ease; /* 切り替わりをスムーズに */
        }

        /* 【左側ブロック】基本はすべての中身を中央揃えにする */
        #board-left-block {
            display: flex;
            flex-direction: column;
            align-items: center; /* これでタイトルも名前も履歴も全部セットで中央に揃う */
            width: 100%;
            text-align: center;
            max-width: 650px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .board-title { color: #5b8c85; margin: 0 0 15px !important; font-size: 1.5em; text-align: center !important; }
        .partner-chip { display: inline-block; padding: 6px 16px; background: #fcfcfc; border: 1.5px solid #d1b87a; border-radius: 20px; color: #888; font-weight: 700; font-size: .95em; box-shadow: 0 2px 4px rgba(209,184,122,.2); }
        .partner-name { color: #d1b87a; font-size: 1.1em; margin-left: 4px; }
        .board-meta { margin-top: 8px; font-size: .9em; color: #777; font-weight: 700; }
        .board-connection { margin-top: 4px; font-size: .78em; color: #777; }
        .board-elapsed { margin-top: 4px; font-size: .8em; color: #999; }

        /* 【右側ブロック】AIの提案エリア */
        #board-right-block {
            display: none;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        /* ★★★ 【フェーズ2以降】AIの提案が出て「has-sidebar」クラスがついた時のスタイル ★★★ */
        #board-main-container.has-sidebar {
            flex-direction: row !important; /* 横並びにする */
            align-items: flex-start !important; /* 上のラインをピシッと揃える */
            gap: 30px;
            max-width: 1100px; /* 2カラムを並べるために全体の幅を広げる */
        }

        /* 横並びになった時、左右の各ブロックがそれぞれのエリア（左半分・右半分）の中で中央に収まるようにする */
        .has-sidebar #board-left-block {
            flex: 1.2;
            align-items: center !important; /* 左側エリアの「中央」にセットで配置 */
        }

        .has-sidebar #board-right-block {
            display: flex;
            flex: 1;
            align-items: center !important; /* 右側エリアの「中央」にセットで配置 */
            position: sticky;
            top: 14px;
            max-height: calc(100vh - 28px);
        }
        #ai-panel-content { width: 100%; max-height: calc(100vh - 80px); overflow-y: auto; padding-right: 6px; }
        #ai-panel-content[hidden] { display: none; }
        .ai-panel-toggle { width: 100%; margin-bottom: 8px; padding: 9px 14px; border: 1px solid #cbded9; border-radius: 999px; background: #f4faf8; color: #527b75; font-weight: 800; cursor: pointer; }

        .phase-explanation-card { width: min(100%, 520px); margin: 20px auto 0; text-align: center; padding: 22px 28px; }
        .phase-explanation-card h3 { color: var(--color-primary); margin-top: 0; }
        .phase-explanation-card ul { display: inline-block; margin: 0 auto 14px; padding: 0; list-style-position: inside; line-height: 1.8; text-align: center; }
        .phase-explanation-card .btn { width: min(100%, 360px) !important; margin: 10px auto 0; }
        .consult-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
        .consult-actions button { border: 1px solid #d8c79f; border-radius: 999px; padding: 7px 10px; background: #fffaf0; color: #755d28; cursor: pointer; }
        #ai-hint-area { margin: 0; width: 100%; }
        #private-consult-panel { display: none; margin-top: 16px; padding: 15px; background: #fffaf0; border: 1px solid #e5d3ad; border-radius: 12px; }
        .private-consult-title { font-weight: 700; color: #856404; }
        .private-consult-note { font-size: .75em; color: #888; margin: 5px 0 10px; }
        #private-consult-input { width: 100%; box-sizing: border-box; min-height: 70px; }
        #private-consult-submit { width: 100%; margin-top: 8px; background: #d4b483; color: #fff; }
        #private-consult-results { margin-top: 12px; }
        #interaction-area { display: flex; flex-direction: column; gap: 10px; max-width: 650px; margin: 20px auto 0; box-sizing: border-box; }
        .message-label { max-width: none; margin: 0; }
        #direct-message-input { width: 100%; padding: 12px; border: 2px solid #5b8c85; border-radius: 20px; box-sizing: border-box; }
        .send-row { display: flex; gap: 10px; }
        #send-message-btn { flex: 1; background: #5b8c85; color: #fff; padding: 12px; border: 0; border-radius: 20px; cursor: pointer; }
        #finish-btn { color: #fff; padding: 12px; border: 0; border-radius: 20px; cursor: pointer; }
        .summary-section { padding: 20px; }
        .summary-title { color: #5b8c85; text-align: center; margin-bottom: 20px; }
        .summary-intro { color: #666; margin-bottom: 20px; font-size: .95em; text-align: center; }
        .summary-card { background: linear-gradient(135deg,#fff,#f9fdfd); text-align: left; padding: 25px; border: 1px solid #e0e8e8; border-radius: 20px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,.05); }
        .summary-action { text-align: center; }
        .summary-note { font-size: .85em; color: #85a8a3; margin-bottom: 15px; }
        .survey-button { background: #5b8c85; color: #fff; padding: 12px 25px; font-size: 15px; border-radius: 50px; border: 0; cursor: pointer; transition: transform .2s; }

        #menu-section[style*="display: block"] ~ #board-section { display: none !important; }

        /* AIヒント専用のスタイル */
        .ai-hint-bubble { background-color: #e8f5e9; border-left: 5px solid #5b8c85; padding: 15px; margin: 15px 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 0.95em; }
        .hint-container { background-color: #e8f5e9; border: 2px solid #81c784; border-radius: 15px; padding: 20px; margin-top: 20px; }
        .hint-title { color: #2e7d32; font-weight: bold; font-size: 1.1em; margin-bottom: 10px; }

        /* ボタンのデザイン */
        .next-step-button { display: block; width: 100%; text-align: center; background-color: #5b8c85; color: white; padding: 15px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 15px; transition: 0.3s; }
        .next-step-button:hover { background-color: #4a7c75; }

        /* 開いた時に出てくるエリア（入れ子を解消しました） */
        .hint-panel {
            background-color: #f9fdf9;
            border: 2px solid #81c784;
            border-top: none;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            padding: 20px;
            margin-top: -5px;
        }
        .ai-hint-card {
            background-color: #f0f7f6;
            border: 1px solid #b2c9c5;
            border-radius: 16px;
            padding: 20px;
            margin: 15px 0;
            box-shadow: 0 4px 12px rgba(91, 140, 133, 0.1);
            color: #4a6663;
            text-align: left;
            font-size: 14px !important;
        }
        .ai-hint-card h4 {
            color: #5b8c85;
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 1.05em;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        /* スクショ右側の「1位」「2位」の中の提案テキストのサイズ調整用 */
        .ai-hint-card p, .hint-panel p, #ai-hint-area div {
            font-size: 14px !important;
        }

        #ai-hint-area { width: 100%; margin: 10px 0; }
        
        /* 振り返りカード */
        .reflection-card {
            background: linear-gradient(135deg, #ffffff, #f9fdfd);
            border: 1px solid #e0e8e8;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin: 20px 0;
        }
        .reflection-text { font-size: 0.9em; line-height: 1.8; color: #4a5d5d; margin-bottom: 20px; }
        .final-message-container { text-align: center; border-top: 2px dashed #b2c9c9; padding-top: 20px; }

        .phase-progress { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 24px; color: #9ba6a4; font-size: .82rem; font-weight: 700; }
        .phase-progress[hidden] { display: none; }
        .phase-step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
        .phase-dot { width: 10px; height: 10px; border: 2px solid #adb8b6; border-radius: 50%; background: white; }
        .phase-step.is-current { color: var(--color-primary); }
        .phase-step.is-current .phase-dot { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 4px rgba(91,140,133,.13); }
        .phase-step.is-complete { color: #a78f56; }
        .phase-step.is-complete .phase-dot { border-color: var(--color-accent); background: var(--color-accent); }
        .phase-line { width: 44px; height: 1px; background: #d9e2e0; }

        .field-label { display: block; max-width: 280px; margin: 10px auto 2px; color: #526d68; font-size: .85rem; font-weight: 700; text-align: left; }
        input:focus, textarea:focus { border-color: var(--color-primary-soft) !important; box-shadow: 0 0 0 4px rgba(133,168,163,.14); outline: none; }
        #direct-message-input { min-height: 92px; font-size: 16px; background: #fff; }
        #finish-btn { background: linear-gradient(135deg, #d58d85, #bd7169) !important; }
        #turn-count-display { display: inline-block; padding: 5px 13px; border-radius: 999px; background: #edf5f3; color: var(--color-primary) !important; }
        #ai-hint-area > div, #private-consult-panel { background: linear-gradient(145deg, #fffdf8, #fff9ec) !important; border-color: #eadbb9 !important; box-shadow: 0 8px 24px rgba(164,132,67,.08); }

        @keyframes message-arrive { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
        .message-row { display: flex; width: 100%; align-items: flex-end; gap: 8px; animation: message-arrive .25s ease-out; }
        .message-row-me { justify-content: flex-end; }
        .message-row-partner { justify-content: flex-start; }
        .message-avatar { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf5f3; border: 1px solid #c9ddd9; color: var(--color-primary); font-size: 11px; font-weight: 800; box-shadow: 0 3px 8px rgba(91,140,133,.12); }
        .message-row-me .message-avatar { background: #f6efdf; border-color: #e3d1a8; color: #9a7d39; }
        .bubble-content, .bubble-time { display: block; }
        .bubble-time { margin-top: 5px; font-size: 10px; opacity: .62; text-align: right; }

        button, input, textarea { font: inherit; }
        textarea { max-width: 100%; }
        button:focus-visible, input:focus-visible, textarea:focus-visible {
            outline: 3px solid rgba(209, 184, 122, 0.45);
            outline-offset: 2px;
        }

        @media (max-width: 760px) {
            body { padding: 10px; }
            .container { padding: 18px 14px; border-radius: 16px; }
            .card { padding: 16px; margin: 14px auto; }

            #initial-buttons,
            #login-button-area,
            #interaction-area > div,
            #pair-register-section > div:last-child,
            #update-section > div:last-child {
                flex-direction: column !important;
                width: 100%;
            }

            .btn, .btn-common {
                min-height: 44px;
                max-width: 100%;
            }

            #board-main-container.has-sidebar {
                flex-direction: column !important;
                gap: 18px !important;
                max-width: 650px !important;
            }
            .has-sidebar #board-left-block,
            .has-sidebar #board-right-block,
            #board-right-block {
                width: 100% !important;
                max-width: 650px;
                margin: 0 auto;
                position: static !important;
                max-height: none !important;
            }
            #ai-panel-content { max-height: 62vh; }
            #board-history {
                height: min(58vh, 520px) !important;
                min-height: 340px;
                padding: 12px !important;
            }
            .chat-bubble,
            .ai-consult-ai,
            .ai-consult-my { max-width: 88% !important; }
            #summary-section { padding: 8px !important; }
            #phase-explanation-box { min-width: 0; width: 100%; }
            .phase-progress { gap: 6px; font-size: .74rem; }
            .phase-line { width: 20px; }
            .message-avatar { flex-basis: 28px; width: 28px; height: 28px; }
        }

        @media (max-width: 420px) {
            body { padding: 0; }
            .container { min-height: 100vh; padding: 16px 10px; border-radius: 0; }
            #board-history { min-height: 300px; }
            input { max-width: 100%; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

        .turn-progress-card {
            margin: 10px auto 4px;
            padding: 10px 12px;
            max-width: 360px;
            border: 1px solid #dcebe7;
            border-radius: 16px;
            background: rgba(255,255,255,.8);
        }
        .turn-progress-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: center; font-size: .78rem; color: #61716e; }
        .turn-progress-row + .turn-progress-row { margin-top: 7px; }
        .turn-progress-row progress { width: 100%; height: 10px; accent-color: var(--color-primary); }

        .analysis-card { position: relative; border-radius: 16px; padding: 18px 15px 15px; text-align: left; }
        .analysis-card--completed { background: linear-gradient(145deg,#eef9f6,#e5f3f0); border: 1px solid #cde2dd; color: #4c7771; }
        .analysis-card--pending { background: #f2f8f7; border: 2px dashed #b2c9c5; color: #5b8c85; text-align: center; }
        .analysis-card--failed { background: #fff8f0; border: 1px solid #ead7c2; color: #856404; }
        .status-badge { display: inline-flex; margin-bottom: 10px; padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
        .status-badge--completed { background: #d5ebe6; color: #3f736b; }
        .status-badge--pending { background: #fff; color: #668b85; }
        .status-badge--failed { background: #f6e1cc; color: #956329; }
        .retry-analysis-btn { display: block; margin-top: 10px; border: 0; border-radius: 999px; padding: 8px 12px; background: #c97870; color: #fff; cursor: pointer; }
        .feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(91,140,133,.2); font-size: .75rem; }
        .feedback-actions button { border: 1px solid #b9d4ce; border-radius: 999px; padding: 6px 9px; background: #fff; color: #527b75; cursor: pointer; }

        .skeleton-card { padding: 18px; border-radius: 16px; background: #f3f8f7; overflow: hidden; }
        .skeleton-card span { display: block; height: 12px; margin: 10px 0; border-radius: 8px; background: linear-gradient(90deg,#e5efed 25%,#f7fbfa 50%,#e5efed 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; }
        .skeleton-card span:nth-child(2) { width: 84%; }
        .skeleton-card span:nth-child(3) { width: 66%; }
        @keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
        .date-divider { align-self: center; margin: 8px 0 2px; padding: 4px 11px; border-radius: 999px; background: #eef4f2; color: #7a8c88; font-size: .7rem; }