:root{
    --bg:#F3F7F6; --surface:#FFFFFF; --ink:#142523; --ink-soft:#4B615D; --ink-faint:#8AA09B;
    --teal:#0E7C74; --teal-dark:#0B5F59; --mint:#DCF1EA; --mint-strong:#BFE8DE;
    --agree:#2E9E6D; --agree-bg:#E4F6EE; --disagree:#D65B4A; --disagree-bg:#FCEAE7;
    --neutral:#7A8B95; --neutral-bg:#EEF2F3; --line:#E1E8E6; --warn-bg:#FFF4E9; --warn-ink:#9A5B12;
    --radius:14px; --shadow: 0 1px 2px rgba(20,37,35,0.04), 0 8px 24px -12px rgba(20,37,35,0.12);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{ background:var(--bg); color:var(--ink); font-family:'Sarabun',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; }
  body::before{
    content:""; position:fixed; inset:0;
    background-image: radial-gradient(circle at 15% 8%, rgba(14,124,116,0.06), transparent 40%), radial-gradient(circle at 85% 92%, rgba(46,158,109,0.05), transparent 40%);
    pointer-events:none; z-index:0;
  }
  h1,h2,h3,.display{ font-family:'Chakra Petch',sans-serif; letter-spacing:0.01em; }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  a{color:var(--teal);}
  button{ font-family:inherit; cursor:pointer; }
  ::selection{ background:var(--mint-strong); }
  #app{ position:relative; z-index:1; min-height:100vh; }
  .center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{ width:34px; height:34px; flex:none; }
  .brand-name{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:20px; color:var(--teal-dark); letter-spacing:0.01em; }
  .brand-name small{ display:block; font-family:'Sarabun',sans-serif; font-weight:400; font-size:11px; color:var(--ink-faint); letter-spacing:0.05em; margin-top:-2px; }
  @keyframes pulse-line{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
  .pulse{ animation:pulse-line 2.4s ease-in-out infinite; }
  .auth-card{ width:100%; max-width:420px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); padding:32px 30px 28px; border:1px solid var(--line); }
  .auth-head{ text-align:center; margin-bottom:22px; }
  .auth-head .brand{ justify-content:center; margin-bottom:6px; }
  .auth-head p{ color:var(--ink-soft); font-size:13.5px; margin:6px 0 0; }
  .tabs{ display:flex; background:var(--bg); border-radius:999px; padding:4px; margin-bottom:22px; border:1px solid var(--line); }
  .tab-btn{ flex:1; border:none; background:transparent; padding:9px 0; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink-soft); transition:all .15s; }
  .tab-btn.active{ background:var(--teal); color:#fff; box-shadow:0 2px 8px rgba(14,124,116,0.35); }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
  .field input, .field select, .field textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; background:#fbfdfc; color:var(--ink); transition:border-color .15s; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
  .field-hint{ font-size:11.5px; margin-top:4px; color:var(--ink-faint); }
  .field-hint.ok{ color:var(--agree); font-weight:600; }
  .field-hint.bad{ color:var(--disagree); font-weight:600; }
  .btn-primary{ width:100%; background:var(--teal); color:#fff; border:none; padding:12px; border-radius:10px; font-weight:700; font-size:14.5px; letter-spacing:0.02em; box-shadow:0 4px 14px -4px rgba(14,124,116,0.5); transition:background .15s, transform .1s; }
  .btn-primary:hover{ background:var(--teal-dark); }
  .btn-primary:active{ transform:scale(0.99); }
  .btn-primary:disabled{ background:#B7C6C3; box-shadow:none; cursor:not-allowed; }
  .btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink-soft); padding:10px 16px; border-radius:10px; font-weight:600; font-size:13.5px; }
  .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
  .btn-ghost:disabled{ opacity:0.45; cursor:not-allowed; }
  .error-box{ background:var(--disagree-bg); color:var(--disagree); border:1px solid #f3c9c1; padding:9px 12px; border-radius:10px; font-size:13px; margin-bottom:14px; font-weight:600; }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .topbar{ position:sticky; top:0; z-index:20; background:rgba(243,247,246,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .topbar-inner{ max-width:640px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .user-chip{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
  .user-chip .pseudo{ font-weight:700; color:var(--ink); }
  .user-chip .bu-tag{ background:var(--mint); color:var(--teal-dark); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
  .icon-btn{ background:transparent; border:1.5px solid var(--line); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
  .icon-btn:hover{ border-color:var(--teal); color:var(--teal); }
  .ecg{ width:100%; height:14px; display:block; opacity:0.5; }
  .search-bar{ max-width:640px; margin:0 auto; padding:0 16px 10px; }
  .search-row{ display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; }
  .search-row input{ flex:1; border:none; outline:none; font-size:13.5px; font-family:inherit; background:transparent; color:var(--ink); }
  .filter-badge{ position:absolute; top:-4px; right:-4px; background:var(--disagree); color:#fff; font-size:9px; font-weight:800; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .filter-panel{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:8px; box-shadow:var(--shadow); }
  .feed-wrap{ max-width:640px; margin:0 auto; padding:18px 16px 100px; }
  .empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
  .empty-state h3{ margin:14px 0 6px; color:var(--ink); }
  .case-card{ background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden; position:relative; }
  .case-card.is-hidden{ opacity:0.55; border-style:dashed; }
  .case-tab{ position:absolute; left:0; top:0; bottom:0; width:5px; }
  .case-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px 10px 18px; }
  .case-head-left{ display:flex; align-items:center; gap:10px; min-width:0; }
  .avatar{ width:38px; height:38px; border-radius:50%; background:var(--mint); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Chakra Petch',sans-serif; font-size:15px; flex:none; }
  .case-meta{ min-width:0; }
  .case-meta .row1{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .case-meta .pseudo{ font-weight:700; font-size:14.5px; color:var(--ink); }
  .case-meta .bu-tag{ background:var(--mint); color:var(--teal-dark); font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; }
  .case-meta .row2{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
  .case-no{ font-size:11px; color:var(--ink-faint); font-weight:600; white-space:nowrap; }
  .hidden-badge{ background:var(--warn-bg); color:var(--warn-ink); font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; }
  .case-media{ width:100%; background:#0f1f1d; display:flex; align-items:center; justify-content:center; max-height:460px; overflow:hidden;}
  .case-media img, .case-media video{ width:100%; max-height:460px; object-fit:contain; display:block; }
  .file-chip{ margin:0 16px 4px; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; display:flex; gap:10px; align-items:center; text-decoration:none; }
  .file-chip svg{ flex:none; color:var(--teal); }
  .file-chip .fc-name{ font-size:13px; font-weight:700; color:var(--ink); word-break:break-all; }
  .file-chip .fc-size{ font-size:11px; color:var(--ink-faint); }
  .case-caption{ padding:12px 18px 4px; font-size:14.5px; line-height:1.6; white-space:pre-wrap; }
  .case-caption a{ word-break:break-all; }
  .reaction-row{ display:flex; gap:8px; padding:12px 16px 6px; border-top:1px solid var(--line); margin-top:10px; }
  .react-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:all .12s; }
  .react-btn svg{ width:15px; height:15px; }
  .react-btn:hover{ border-color:currentColor; }
  .react-btn.agree.active{ background:var(--agree-bg); border-color:var(--agree); color:var(--agree); }
  .react-btn.disagree.active{ background:var(--disagree-bg); border-color:var(--disagree); color:var(--disagree); }
  .react-btn.neutral.active{ background:var(--neutral-bg); border-color:var(--neutral); color:var(--neutral); }
  .comment-toggle{ padding:2px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .comment-toggle button{ background:none; border:none; color:var(--ink-faint); font-size:12.5px; font-weight:600; padding:6px 0; }
  .comment-toggle button:hover{ color:var(--teal); }
  .admin-mini-actions{ display:flex; gap:6px; }
  .admin-mini-actions button{ background:none; border:none; font-size:11px; font-weight:700; padding:3px 0; }
  .comments-box{ border-top:1px solid var(--line); padding:12px 16px 14px; background:#fafcfb; }
  .comment-item{ display:flex; gap:9px; margin-bottom:12px; }
  .comment-item.is-hidden{ opacity:0.5; }
  .comment-avatar{ width:28px; height:28px; border-radius:50%; background:var(--mint); color:var(--teal-dark); font-size:11.5px; font-weight:700; font-family:'Chakra Petch',sans-serif; display:flex; align-items:center; justify-content:center; flex:none; }
  .comment-bubble{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; flex:1; min-width:0; }
  .comment-bubble .c-head{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .comment-bubble .c-pseudo{ font-weight:700; font-size:12.5px; }
  .comment-bubble .c-bu{ font-size:9.5px; font-weight:700; color:var(--teal-dark); background:var(--mint); padding:1px 6px; border-radius:999px; }
  .comment-bubble .c-time{ font-size:10.5px; color:var(--ink-faint); margin-left:auto; }
  .comment-bubble .c-text{ font-size:13px; margin-top:3px; line-height:1.5; white-space:pre-wrap; }
  .comment-bubble .c-img{ max-width:100%; max-height:220px; border-radius:8px; margin-top:6px; display:block; }
  .mini-react{ display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
  .mini-react button{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-faint); }
  .mini-react button.active.agree{ background:var(--agree-bg); border-color:var(--agree); color:var(--agree); }
  .mini-react button.active.disagree{ background:var(--disagree-bg); border-color:var(--disagree); color:var(--disagree); }
  .mini-react button.active.neutral{ background:var(--neutral-bg); border-color:var(--neutral); color:var(--neutral); }
  .comment-form{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
  .comment-form-row{ display:flex; gap:8px; align-items:center; }
  .comment-form input[type="text"]{ flex:1; padding:9px 12px; border-radius:999px; border:1.5px solid var(--line); font-size:13px; font-family:inherit; }
  .comment-form input[type="text"]:focus{ outline:none; border-color:var(--teal); }
  .comment-form button.send-btn{ background:var(--teal); color:#fff; border:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
  .comment-form button.send-btn:hover{ background:var(--teal-dark); }
  .comment-form button.send-btn:disabled{ background:#B7C6C3; cursor:not-allowed; }
  .attach-btn{ background:var(--bg); border:1.5px solid var(--line); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:var(--ink-soft); }
  .attach-btn:hover{ border-color:var(--teal); color:var(--teal); }
  .comment-attach-preview{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px 8px; }
  .comment-attach-preview img{ width:36px; height:36px; object-fit:cover; border-radius:6px; }
  .comment-attach-preview .remove-x{ margin-left:auto; background:none; border:none; color:var(--disagree); font-weight:700; font-size:13px; }
  .fab{ position:fixed; right:22px; bottom:22px; z-index:30; background:var(--teal); color:#fff; border:none; padding:14px 20px; border-radius:999px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px -6px rgba(14,124,116,0.55); }
  .fab:hover{ background:var(--teal-dark); }
  .modal-overlay{ position:fixed; inset:0; background:rgba(15,31,29,0.5); z-index:50; display:flex; align-items:flex-end; justify-content:center; }
  @media(min-width:640px){ .modal-overlay{ align-items:center; } }
  .modal-overlay.center-always{ align-items:center; }
  .modal-card{ background:#fff; width:100%; max-width:520px; border-radius:20px 20px 0 0; padding:22px 22px 26px; max-height:90vh; overflow-y:auto; box-shadow:0 -8px 40px rgba(0,0,0,0.2); }
  @media(min-width:640px){ .modal-card{ border-radius:20px; } }
  .modal-card.narrow{ max-width:380px; text-align:center; }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .modal-head h3{ margin:0; font-size:19px; color:var(--ink); }
  .close-x{ background:var(--bg); border:none; width:30px; height:30px; border-radius:50%; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; }
  .media-type-row{ display:flex; gap:8px; margin-bottom:14px; }
  .media-type-row button{ flex:1; padding:9px 4px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .media-type-row button.active{ background:var(--teal); border-color:var(--teal); color:#fff; }
  .upload-box{ border:1.5px dashed var(--line); border-radius:12px; padding:16px; text-align:center; background:#fbfdfc; }
  .upload-box input[type=file]{ font-size:12.5px; width:100%; }
  .media-preview{ margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--bg); }
  .media-preview img, .media-preview video{ width:100%; max-height:260px; object-fit:contain; display:block; }
  .processing-line{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--teal-dark); font-weight:600; margin-top:8px; }
  .spinner-sm{ width:14px; height:14px; border-radius:50%; border:2px solid var(--mint-strong); border-top-color:var(--teal); animation:spin .8s linear infinite; flex:none; }
  .success-icon{ width:56px; height:56px; border-radius:50%; background:var(--agree-bg); color:var(--agree); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
  .toast-wrap{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; }
  .toast{ background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,0.25); animation:toast-in .18s ease; max-width:88vw; text-align:center; }
  .toast.error{ background:var(--disagree); }
  .toast.success{ background:var(--agree); }
  @keyframes toast-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
  .loading-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:80px 20px; color:var(--ink-soft); }
  .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--mint-strong); border-top-color:var(--teal); animation:spin 0.8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .footnote{ text-align:center; font-size:11px; color:var(--ink-faint); padding:18px 20px 30px; }
  textarea{ resize:vertical; min-height:70px; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible{ outline:2.5px solid var(--teal); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ .pulse, .spinner, .spinner-sm, .toast{ animation:none !important; } }