/* ===================================================
   Thrive Better Health — Craving Log Modal v2.0
   File: /static/craving-log-modal.css
   Replaces: craving-assistant-modal.css (chat-based input)
   Design: dark glassmorphism · soft glow · pill components
   Voice-agent compatible (Revo / CravingLogModal API)
   =================================================== */

/* Overlay */
.clm-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(4,6,28,0.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);opacity:0;pointer-events:none;transition:opacity 0.28s cubic-bezier(.4,0,.2,1);padding:16px}
.clm-overlay.clm-open{opacity:1;pointer-events:auto}
.clm-modal{position:relative;width:100%;max-width:520px;max-height:calc(100dvh - 32px);background:rgba(20,21,48,0.88);border:1px solid rgba(255,255,255,0.09);border-radius:24px;box-shadow:0 0 0 1px rgba(108,99,255,0.22),0 0 48px rgba(108,99,255,0.10),0 24px 64px rgba(0,0,0,0.55);display:flex;flex-direction:column;overflow:hidden;transform:translateY(18px) scale(0.97);transition:transform 0.30s cubic-bezier(.4,0,.2,1),opacity 0.30s cubic-bezier(.4,0,.2,1);opacity:0}
.clm-overlay.clm-open .clm-modal{transform:translateY(0) scale(1);opacity:1}
.clm-header{display:flex;align-items:center;gap:12px;padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0}
.clm-header-icon{width:38px;height:38px;background:linear-gradient(135deg,rgba(108,99,255,0.3),rgba(34,211,238,0.2));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 0 16px rgba(108,99,255,0.2)}
.clm-header-text{flex:1;min-width:0}
.clm-title{font-size:17px;font-weight:700;color:#F0F0FF;line-height:1.2;margin:0}
.clm-subtitle{font-size:12px;color:#9395B0;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clm-close-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:#9395B0;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.18s,color 0.18s;flex-shrink:0}
.clm-close-btn:hover{background:rgba(248,113,113,0.18);color:#F87171}
.clm-progress{display:flex;gap:6px;padding:0 22px 14px;flex-shrink:0}
.clm-prog-dot{height:3px;flex:1;border-radius:99px;background:rgba(255,255,255,0.1);transition:background 0.25s}
.clm-prog-dot.active{background:rgba(108,99,255,0.8)}
.clm-prog-dot.done{background:rgba(52,211,153,0.6)}
.clm-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 22px 22px;scrollbar-width:thin;scrollbar-color:rgba(108,99,255,0.3) transparent}
.clm-body::-webkit-scrollbar{width:4px}
.clm-body::-webkit-scrollbar-thumb{background:rgba(108,99,255,0.3);border-radius:99px}
.clm-step{display:none;flex-direction:column;gap:20px}
.clm-step.clm-step-active{display:flex;animation:clmFadeIn 0.22s ease both}
@keyframes clmFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.clm-field{display:flex;flex-direction:column;gap:8px}
.clm-label{font-size:13px;font-weight:600;color:#F0F0FF;display:flex;align-items:center;gap:6px}
.clm-label-badge{font-size:10px;font-weight:500;color:#F87171;background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.2);border-radius:99px;padding:1px 7px;letter-spacing:0.4px;text-transform:uppercase}
.clm-label-opt{font-size:10px;font-weight:500;color:#9395B0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:99px;padding:1px 7px;letter-spacing:0.4px;text-transform:uppercase}
.clm-hint{font-size:12px;color:#9395B0;margin:0;font-style:italic;line-height:1.5}
.clm-intensity-row{display:flex;align-items:center;gap:14px}
.clm-intensity-badge{min-width:54px;height:54px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(108,99,255,0.18);border:1px solid rgba(108,99,255,0.3);box-shadow:0 0 16px rgba(108,99,255,0.1);transition:background 0.2s,border-color 0.2s;flex-shrink:0}
.clm-intensity-num{font-size:22px;font-weight:800;color:#DDD6FE;line-height:1}
.clm-intensity-denom{font-size:10px;color:#9395B0;line-height:1;margin-top:1px}
.clm-slider-wrap{flex:1}
.clm-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;cursor:pointer;background:linear-gradient(to right,rgba(108,99,255,0.9) 0%,rgba(108,99,255,0.9) var(--slider-pct,40%),rgba(255,255,255,0.1) var(--slider-pct,40%),rgba(255,255,255,0.1) 100%)}
.clm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#DDD6FE;border:2px solid rgba(108,99,255,0.8);box-shadow:0 0 0 4px rgba(108,99,255,0.2)}
.clm-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#DDD6FE;border:2px solid rgba(108,99,255,0.8);box-shadow:0 0 0 4px rgba(108,99,255,0.2)}
.clm-intensity-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:#9395B0}
.clm-int-low .clm-intensity-badge{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.35)}
.clm-int-low .clm-intensity-num{color:#6EE7B7}
.clm-int-low .clm-slider{background:linear-gradient(to right,rgba(52,211,153,0.9) 0%,rgba(52,211,153,0.9) var(--slider-pct),rgba(255,255,255,0.1) var(--slider-pct),rgba(255,255,255,0.1) 100%)}
.clm-int-mid .clm-intensity-badge{background:rgba(245,158,11,0.18);border-color:rgba(245,158,11,0.35)}
.clm-int-mid .clm-intensity-num{color:#FCD34D}
.clm-int-mid .clm-slider{background:linear-gradient(to right,rgba(245,158,11,0.9) 0%,rgba(245,158,11,0.9) var(--slider-pct),rgba(255,255,255,0.1) var(--slider-pct),rgba(255,255,255,0.1) 100%)}
.clm-int-high .clm-intensity-badge{background:rgba(248,113,113,0.18);border-color:rgba(248,113,113,0.35)}
.clm-int-high .clm-intensity-num{color:#FCA5A5}
.clm-int-high .clm-slider{background:linear-gradient(to right,rgba(248,113,113,0.9) 0%,rgba(248,113,113,0.9) var(--slider-pct),rgba(255,255,255,0.1) var(--slider-pct),rgba(255,255,255,0.1) 100%)}
.clm-chips{display:flex;flex-wrap:wrap;gap:8px}
.clm-chip{min-height:36px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#9395B0;font-size:13px;cursor:pointer;transition:background 0.18s,border-color 0.18s,color 0.18s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.clm-chip:hover{background:rgba(108,99,255,0.15);border-color:rgba(108,99,255,0.35);color:#DDD6FE}
.clm-chip.selected{background:rgba(108,99,255,0.25);border-color:rgba(108,99,255,0.55);color:#DDD6FE;box-shadow:0 0 12px rgba(108,99,255,0.15)}
.clm-input,.clm-textarea{width:100%;min-height:44px;padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:12px;color:#F0F0FF;font-size:14px;font-family:inherit;outline:none;transition:border-color 0.18s,box-shadow 0.18s,background 0.18s;box-sizing:border-box;resize:none}
.clm-input::placeholder,.clm-textarea::placeholder{color:#9395B0;opacity:0.7}
.clm-input:focus,.clm-textarea:focus{border-color:rgba(108,99,255,0.55);background:rgba(108,99,255,0.06);box-shadow:0 0 0 3px rgba(108,99,255,0.12)}
.clm-field.clm-field-focus .clm-input,.clm-field.clm-field-focus .clm-textarea{border-color:rgba(34,211,238,0.55);background:rgba(34,211,238,0.05);box-shadow:0 0 0 3px rgba(34,211,238,0.12)}
.clm-field.clm-field-focus .clm-label{color:#22D3EE}
.clm-time-row{display:flex;align-items:center;gap:8px}
.clm-time-now-btn{flex-shrink:0;height:44px;padding:0 14px;border-radius:99px;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.25);color:#22D3EE;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.18s,border-color 0.18s}
.clm-time-now-btn:hover{background:rgba(34,211,238,0.18);border-color:rgba(34,211,238,0.45)}
.clm-more-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#9395B0;font-size:13px;font-family:inherit;cursor:pointer;padding:4px 0;transition:color 0.18s}
.clm-more-toggle:hover{color:#DDD6FE}
.clm-more-toggle-icon{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:12px;transition:transform 0.2s}
.clm-more-toggle.open .clm-more-toggle-icon{transform:rotate(180deg)}
.clm-more-section{display:none;flex-direction:column;gap:16px;animation:clmFadeIn 0.22s ease both}
.clm-more-section.open{display:flex}
.clm-divider{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}
.clm-summary{display:flex;flex-direction:column;gap:10px}
.clm-summary-heading{font-size:16px;font-weight:700;color:#F0F0FF;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.clm-summary-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:12px}
.clm-summary-key{font-size:11px;font-weight:600;color:#9395B0;text-transform:uppercase;letter-spacing:0.5px;min-width:90px;flex-shrink:0;padding-top:1px}
.clm-summary-val{font-size:14px;color:#F0F0FF;line-height:1.4;flex:1}
.clm-summary-val.empty{color:rgba(147,149,176,0.45);font-style:italic}
.clm-summary-int-pill{padding:2px 10px;border-radius:99px;font-size:13px;font-weight:700}
.clm-summary-int-pill.low{background:rgba(52,211,153,0.15);color:#6EE7B7}
.clm-summary-int-pill.mid{background:rgba(245,158,11,0.15);color:#FCD34D}
.clm-summary-int-pill.high{background:rgba(248,113,113,0.15);color:#FCA5A5}
.clm-footer{padding:14px 22px 20px;border-top:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.clm-btn-primary{width:100%;height:50px;border-radius:99px;background:linear-gradient(135deg,rgba(108,99,255,0.85),rgba(79,70,229,0.85));border:1px solid rgba(108,99,255,0.5);color:#fff;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 0 20px rgba(108,99,255,0.25),0 4px 16px rgba(0,0,0,0.3);transition:background 0.18s,box-shadow 0.18s,transform 0.1s;letter-spacing:0.2px}
.clm-btn-primary:hover{background:linear-gradient(135deg,rgba(108,99,255,1),rgba(79,70,229,1));box-shadow:0 0 28px rgba(108,99,255,0.4),0 6px 20px rgba(0,0,0,0.4)}
.clm-btn-primary:active{transform:scale(0.98)}
.clm-btn-primary:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}
.clm-btn-secondary{width:100%;height:44px;border-radius:99px;background:transparent;border:1px solid rgba(255,255,255,0.1);color:#9395B0;font-size:14px;font-family:inherit;cursor:pointer;transition:background 0.18s,border-color 0.18s,color 0.18s}
.clm-btn-secondary:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.18);color:#DDD6FE}
.clm-footer-row{display:flex;gap:8px}
.clm-footer-row .clm-btn-secondary{width:auto;flex:1}
.clm-error{font-size:12px;color:#F87171;display:none;align-items:center;gap:5px}
.clm-error.show{display:flex;animation:clmShake 0.28s ease}
@keyframes clmShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.clm-voice-indicator{display:none;align-items:center;gap:8px;padding:8px 12px;background:rgba(34,211,238,0.08);border:1px solid rgba(34,211,238,0.2);border-radius:10px;font-size:12px;color:#22D3EE;margin-bottom:4px;animation:clmFadeIn 0.2s ease}
.clm-voice-indicator.show{display:flex}
.clm-voice-dot{width:8px;height:8px;border-radius:50%;background:#22D3EE;box-shadow:0 0 8px rgba(34,211,238,0.6);animation:clmPulse 1.2s infinite;flex-shrink:0}
@keyframes clmPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.6}}
.clm-success{display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 22px;text-align:center;gap:12px}
.clm-success.show{display:flex;animation:clmFadeIn 0.3s ease}
.clm-success-icon{width:64px;height:64px;border-radius:50%;background:rgba(52,211,153,0.15);border:1px solid rgba(52,211,153,0.3);box-shadow:0 0 28px rgba(52,211,153,0.2);display:flex;align-items:center;justify-content:center;font-size:28px}
.clm-success-title{font-size:18px;font-weight:700;color:#F0F0FF}
.clm-success-sub{font-size:14px;color:#9395B0;max-width:300px}
.ct-btn-log-craving{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:99px;background:linear-gradient(135deg,rgba(108,99,255,0.85),rgba(79,70,229,0.75));border:1px solid rgba(108,99,255,0.45);color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 0 18px rgba(108,99,255,0.22),0 4px 12px rgba(0,0,0,0.25);transition:background 0.18s,box-shadow 0.18s,transform 0.1s;white-space:nowrap}
.ct-btn-log-craving:hover{background:linear-gradient(135deg,rgba(108,99,255,1),rgba(79,70,229,1));box-shadow:0 0 28px rgba(108,99,255,0.38),0 6px 18px rgba(0,0,0,0.35)}
.ct-btn-log-craving:active{transform:scale(0.97)}
.clm-cta-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.75);animation:clmPulse 2s infinite}
@media(max-width:600px){.clm-modal{border-radius:20px 20px 0 0;max-width:100%;max-height:92dvh}.clm-overlay{align-items:flex-end;padding:0}.clm-overlay .clm-modal{transform:translateY(100%) scale(1)}.clm-overlay.clm-open .clm-modal{transform:translateY(0) scale(1)}.clm-header{padding:16px 18px 12px}.clm-body{padding:4px 18px 18px}.clm-footer{padding:12px 18px 24px}.clm-progress{padding:0 18px 12px}.clm-chip{font-size:12px;min-height:38px}}

/* ── Craving name field — top of modal ───────────────────────────── */
.clm-name-field{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;background:rgba(108,99,255,0.07);border:1px solid rgba(108,99,255,0.18);border-radius:16px;position:relative}
.clm-name-field::before{content:'';position:absolute;inset:-1px;border-radius:16px;background:linear-gradient(135deg,rgba(108,99,255,0.2),rgba(34,211,238,0.1));z-index:-1;pointer-events:none}
.clm-name-label{font-size:12px;font-weight:700;color:#9395B0;letter-spacing:0.8px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.clm-name-label-icon{font-size:14px}
.clm-name-label-opt{font-size:10px;font-weight:400;color:rgba(147,149,176,0.6);text-transform:none;letter-spacing:0;font-style:italic;margin-left:2px}
.clm-name-input{width:100%;height:48px;padding:0 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(108,99,255,0.22);border-radius:12px;color:#F0F0FF;font-size:15px;font-weight:600;font-family:inherit;outline:none;transition:border-color 0.18s,box-shadow 0.18s,background 0.18s;box-sizing:border-box;letter-spacing:0.1px}
.clm-name-input::placeholder{color:rgba(147,149,176,0.5);font-weight:400}
.clm-name-input:focus{border-color:rgba(108,99,255,0.6);background:rgba(108,99,255,0.08);box-shadow:0 0 0 3px rgba(108,99,255,0.14)}
.clm-name-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.clm-name-chip{height:28px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:rgba(147,149,176,0.8);font-size:11px;cursor:pointer;transition:background 0.16s,border-color 0.16s,color 0.16s;white-space:nowrap;display:flex;align-items:center;gap:4px}
.clm-name-chip:hover{background:rgba(108,99,255,0.15);border-color:rgba(108,99,255,0.35);color:#DDD6FE}
.clm-name-chip.selected{background:rgba(108,99,255,0.22);border-color:rgba(108,99,255,0.5);color:#DDD6FE}
.clm-summary-row.clm-sum-name-row{background:rgba(108,99,255,0.07);border-color:rgba(108,99,255,0.18)}
.clm-summary-row.clm-sum-name-row .clm-summary-key{color:#9B93FF}
.clm-summary-row.clm-sum-name-row .clm-summary-val{font-weight:600;color:#DDD6FE}
.clm-name-field.clm-field-focus .clm-name-input{border-color:rgba(34,211,238,0.55);background:rgba(34,211,238,0.05);box-shadow:0 0 0 3px rgba(34,211,238,0.12)}
.clm-name-field.clm-field-focus .clm-name-label{color:#22D3EE}

/* ===================================================
   Inline Craving Log View (v2.1)
   =================================================== */
.clog-section{padding:18px;border:1px solid rgba(255,255,255,0.08);border-radius:18px;background:rgba(18,20,44,0.72);box-shadow:0 10px 32px rgba(0,0,0,0.28)}
.clog-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.clog-header-left{display:flex;align-items:center;gap:10px;min-width:0}
.clog-header-icon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(34,211,238,0.20),rgba(108,99,255,0.20));box-shadow:0 0 12px rgba(34,211,238,0.15);font-size:16px;flex-shrink:0}
.clog-header-title{margin:0;font-size:15px;font-weight:700;color:#F0F0FF;line-height:1.15}
.clog-header-sub{margin:2px 0 0;font-size:12px;color:#9395B0;line-height:1.2}
.clog-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clog-filter-select{height:34px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:#E9E9FF;font-size:12px;font-family:inherit;outline:none}
.clog-filter-select:focus{border-color:rgba(108,99,255,0.55);box-shadow:0 0 0 3px rgba(108,99,255,0.12)}
.clog-body{min-height:108px}
.clog-loading{min-height:96px;display:flex;align-items:center;justify-content:center;gap:10px;color:#9395B0;font-size:13px}
.clog-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(147,149,176,0.3);border-top-color:rgba(108,99,255,0.85);animation:clogSpin 0.8s linear infinite}
@keyframes clogSpin{to{transform:rotate(360deg)}}
.clog-empty{text-align:center;padding:24px 14px}
.clog-empty-icon{font-size:22px;opacity:.85;margin-bottom:8px}
.clog-empty-title{margin:0;font-size:14px;font-weight:700;color:#E8E9FF}
.clog-empty-sub{margin:6px 0 0;font-size:12px;color:#9395B0}
.clog-date-group{margin:14px 0 8px;font-size:12px;font-weight:700;color:#BFC1DD;letter-spacing:.2px}
.clog-entry{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
.clog-entry + .clog-entry{margin-top:8px}
.clog-entry:hover{background:rgba(108,99,255,0.08);border-color:rgba(108,99,255,0.25);box-shadow:0 0 0 1px rgba(108,99,255,0.15) inset}
.clog-entry.expanded{background:rgba(34,211,238,0.06);border-color:rgba(34,211,238,0.25)}
.clog-intensity-orb{width:52px;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:19px;font-weight:800;line-height:1;flex-shrink:0;border:1px solid transparent}
.clog-denom{font-size:9px;font-weight:600;line-height:1;margin-top:1px;opacity:.75}
.clog-orb-low{color:#6EE7B7;background:rgba(52,211,153,0.14);border-color:rgba(52,211,153,0.35)}
.clog-orb-mid{color:#FCD34D;background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.35)}
.clog-orb-high{color:#FCA5A5;background:rgba(248,113,113,0.14);border-color:rgba(248,113,113,0.35)}
.clog-entry-content{min-width:0}
.clog-entry-name{margin:0;font-size:14px;font-weight:700;color:#F0F0FF;line-height:1.2;word-break:break-word}
.clog-entry-trigger{margin:4px 0 0;font-size:12px;color:#CFCFFE;line-height:1.25;word-break:break-word}
.clog-entry-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.clog-meta-pill{height:22px;padding:0 8px;border-radius:99px;display:inline-flex;align-items:center;font-size:11px;font-weight:600}
.clog-meta-time{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);color:#BFC1DD}
.clog-ai-preview{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(34,211,238,0.08);border:1px solid rgba(34,211,238,0.22);color:#BDEFF8;font-size:12px;line-height:1.35;word-break:break-word}
.clog-entry-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.clog-time-badge{height:22px;padding:0 8px;border-radius:99px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);color:#BFC1DD;font-size:11px;display:inline-flex;align-items:center}
.clog-risk-badge{height:22px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:700;display:inline-flex;align-items:center}
.clog-risk-low{background:rgba(52,211,153,0.14);border:1px solid rgba(52,211,153,0.32);color:#6EE7B7}
.clog-risk-mod{background:rgba(245,158,11,0.14);border:1px solid rgba(245,158,11,0.32);color:#FCD34D}
.clog-risk-high{background:rgba(248,113,113,0.14);border:1px solid rgba(248,113,113,0.32);color:#FCA5A5}
.clog-detail-panel{grid-column:1 / -1;margin-top:2px;padding:10px 11px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.clog-full-advice{font-size:12px;line-height:1.42;color:#D8EFFF;white-space:pre-wrap;word-break:break-word}
.clog-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.07)}
.clog-total{font-size:12px;color:#AEB0CC}
.clog-load-more{height:32px;padding:0 12px;border-radius:99px;background:rgba(108,99,255,0.14);border:1px solid rgba(108,99,255,0.35);color:#DDD6FE;font-size:12px;font-weight:700;cursor:pointer}
.clog-load-more:hover{background:rgba(108,99,255,0.22);border-color:rgba(108,99,255,0.55)}
@media (max-width:700px){
  .clog-section{padding:14px;border-radius:14px}
  .clog-header{align-items:flex-start}
  .clog-filters{width:100%}
  .clog-filter-select{flex:1;min-width:0}
  .clog-entry{grid-template-columns:auto 1fr;grid-template-areas:"orb content" "right right";gap:10px}
  .clog-intensity-orb{grid-area:orb}
  .clog-entry-content{grid-area:content}
  .clog-entry-right{grid-area:right;align-items:flex-start;flex-direction:row}
}