/* Comment System Styles */
.comment-tooltip{position:fixed;background:#333;color:#fff;padding:.5rem .8rem;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.2);display:none;transition:opacity .15s}
.comment-tooltip:hover{background:#444}
.comment-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#333}

.comment-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1001;padding:1rem}
.comment-modal.open{display:flex}
.comment-modal-content{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:1.5rem;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.comment-modal h4{font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:.3rem;color:#1E1E2A}
.comment-modal .highlight-preview{background:#FFF9E6;border:1px solid #F0E0A0;border-radius:8px;padding:.6rem .8rem;font-size:.85rem;color:#5A5A72;margin-bottom:.8rem;font-style:italic;max-height:80px;overflow:auto}
.comment-modal textarea{width:100%;border:1.5px solid #E8E8EE;border-radius:10px;padding:.8rem;font-family:'DM Sans',sans-serif;font-size:.9rem;resize:vertical;min-height:100px;outline:none;transition:border-color .2s}
.comment-modal textarea:focus{border-color:#5B7FC7}
.comment-modal-btns{display:flex;gap:.6rem;margin-top:1rem;justify-content:flex-end}
.comment-modal-btns button{padding:.5rem 1rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}
.comment-modal-btns .cancel{background:#f0f0f0;border:none;color:#666}
.comment-modal-btns .cancel:hover{background:#e0e0e0}
.comment-modal-btns .submit{background:#65bf9e;border:none;color:#fff}
.comment-modal-btns .submit:hover{background:#55a88a}

/* General comment box */
.general-comment-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #E8E8EE}
.general-comment-section h4{font-family:'Fraunces',serif;font-size:1rem;color:#1E1E2A;margin-bottom:.5rem}
.general-comment-section p{font-size:.82rem;color:#8A8AA0;margin-bottom:.6rem}
.general-comment-section textarea{width:100%;border:1.5px solid #E8E8EE;border-radius:10px;padding:.8rem;font-family:'DM Sans',sans-serif;font-size:.88rem;resize:vertical;min-height:80px;outline:none;transition:border-color .2s}
.general-comment-section textarea:focus{border-color:#65bf9e}
.general-comment-section button{margin-top:.6rem;background:#65bf9e;color:#fff;border:none;border-radius:8px;padding:.5rem 1.2rem;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}
.general-comment-section button:hover{background:#55a88a}
.general-comment-section button:disabled{background:#ccc;cursor:not-allowed}
.general-comment-section .success-msg{color:#65bf9e;font-size:.82rem;margin-top:.4rem;display:none}

/* Hint */
.comment-hint{background:#F8F8F6;border:1px dashed #D8D8D0;border-radius:8px;padding:.6rem .8rem;margin-bottom:1rem;font-size:.78rem;color:#8A8AA0;text-align:center}

/* Per-tab comment box */
.tab-comment-box{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed #E8E8EE}
.tab-comment-box textarea{width:100%;border:1.5px solid #E8E8EE;border-radius:8px;padding:.6rem .8rem;font-family:'DM Sans',sans-serif;font-size:.82rem;resize:vertical;min-height:52px;outline:none;transition:border-color .2s;background:#FAFAF8}
.tab-comment-box textarea:focus{border-color:#65bf9e;background:#fff}
.tab-comment-actions{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.tab-comment-submit{background:#65bf9e;color:#fff;border:none;border-radius:6px;padding:.35rem .9rem;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}
.tab-comment-submit:hover{background:#55a88a}
.tab-comment-submit:disabled{background:#ccc;cursor:not-allowed}
.tab-comment-success{font-size:.75rem;color:#65bf9e;font-weight:600;opacity:0;transition:opacity .2s}
.tab-comment-success.vis{opacity:1}

/* Draft highlight marks */
mark.draft-highlight{background:#FFF3CD;border-bottom:2px solid #F0C040;cursor:pointer;border-radius:2px}

/* Discard draft button */
.comment-modal-btns .discard{background:#FFF1F2;border:1px solid #FECDD3;color:#9F1239;font-size:.78rem;padding:.4rem .8rem}
.comment-modal-btns .discard:hover{background:#FECDD3}

/* Progress bar (index page) */
.progress-bar-wrap{background:#E8E8EE;border-radius:99px;height:6px;overflow:hidden;margin-top:.5rem}
.progress-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#65bf9e,#4aa889);transition:width .4s ease}
.progress-text{font-size:.72rem;color:#8A8AA0;margin-top:.25rem}

/* Survey card on index */
.survey-card{background:#fff;border:1.5px solid #E8E8EE;border-radius:16px;padding:1.25rem;margin-top:1rem;text-align:center;transition:all .2s}
.survey-card.locked{opacity:.65;pointer-events:none}
.survey-card.unlocked{border-color:#65bf9e;cursor:pointer}
.survey-card.unlocked:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.survey-card h3{font-family:'Fraunces',serif;font-size:1.1rem;color:#1E1E2A;margin-bottom:.3rem}
.survey-card p{font-size:.82rem;color:#8A8AA0;margin-bottom:.6rem}
.survey-card .lock-icon{font-size:1.4rem;margin-bottom:.3rem}

/* My comments link */
.nav-links{display:flex;gap:1rem;justify-content:center;margin-top:1rem;margin-bottom:.5rem}
.nav-links a{font-size:.85rem;color:#5B7FC7;text-decoration:none;font-weight:600;transition:color .2s}
.nav-links a:hover{color:#4a6eb5;text-decoration:underline}

/* My Comments page */
.comment-group{margin-bottom:1.5rem}
.comment-group h3{font-family:'Fraunces',serif;font-size:1.1rem;color:#1E1E2A;margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid #E8E8EE}
.comment-item{background:#fff;border:1px solid #E8E8EE;border-radius:12px;padding:1rem;margin-bottom:.6rem;transition:all .2s}
.comment-item:hover{border-color:#ccc}
.comment-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.comment-badge{font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:4px}
.comment-badge.highlight{background:#FFF9E6;color:#92700C;border:1px solid #F0E0A0}
.comment-badge.tab-feedback{background:#EEF2FB;color:#3B5998;border:1px solid #B0C4E8}
.comment-badge.general{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.comment-badge.survey{background:#F5F3FF;color:#5B21B6;border:1px solid #C4B5FD}
.comment-highlight-text{font-size:.82rem;color:#5A5A72;font-style:italic;background:#FFF9E6;padding:.3rem .5rem;border-radius:6px;margin-bottom:.4rem;display:inline-block}
.comment-text{font-size:.88rem;color:#1E1E2A;line-height:1.5}
.comment-timestamp{font-size:.7rem;color:#8A8AA0;margin-top:.3rem}
.comment-actions{display:flex;gap:.4rem;margin-top:.5rem}
.comment-actions button{font-size:.75rem;padding:.3rem .7rem;border-radius:6px;font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid #E8E8EE;background:#fff}
.comment-actions .edit-btn{color:#5B7FC7}
.comment-actions .edit-btn:hover{background:#EEF2FB;border-color:#B0C4E8}
.comment-actions .delete-btn{color:#E85D5D}
.comment-actions .delete-btn:hover{background:#FFF1F2;border-color:#FECDD3}
.edit-textarea{width:100%;border:1.5px solid #5B7FC7;border-radius:8px;padding:.6rem;font-family:'DM Sans',sans-serif;font-size:.85rem;resize:vertical;min-height:60px;outline:none;margin-top:.4rem}
.edit-actions{display:flex;gap:.4rem;margin-top:.4rem}
.edit-actions button{font-size:.78rem;padding:.35rem .8rem;border-radius:6px;font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;border:none}
.edit-actions .save-btn{background:#65bf9e;color:#fff}
.edit-actions .save-btn:hover{background:#55a88a}
.edit-actions .cancel-edit-btn{background:#f0f0f0;color:#666}
.empty-state{text-align:center;padding:3rem 1rem;color:#8A8AA0}
.empty-state p{font-size:.92rem}

/* Survey page */
.survey-section{margin-bottom:1.5rem}
.survey-section h3{font-family:'Fraunces',serif;font-size:1.15rem;color:#1E1E2A;margin-bottom:.6rem}
.survey-question{background:#fff;border:1px solid #E8E8EE;border-radius:12px;padding:1rem 1.2rem;margin-bottom:.8rem}
.survey-question label{font-size:.9rem;font-weight:600;color:#1E1E2A;display:block;margin-bottom:.5rem}
.survey-question textarea{width:100%;border:1.5px solid #E8E8EE;border-radius:8px;padding:.6rem;font-family:'DM Sans',sans-serif;font-size:.85rem;resize:vertical;min-height:60px;outline:none;transition:border-color .2s}
.survey-question textarea:focus{border-color:#65bf9e}
.rating-grid{display:grid;grid-template-columns:1fr repeat(5,40px);gap:.3rem;align-items:center;font-size:.82rem}
.rating-grid .card-label{font-weight:500;color:#5A5A72;padding:.3rem 0}
.rating-grid .rating-header{text-align:center;font-weight:700;color:#8A8AA0;font-size:.7rem}
.rating-grid input[type=radio]{margin:0 auto;display:block;cursor:pointer;accent-color:#65bf9e}
.unsaved-list{margin-top:.5rem}
.unsaved-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;background:#FFF9E6;border:1px solid #F0E0A0;border-radius:8px;margin-bottom:.4rem;font-size:.82rem}
.unsaved-item .unsaved-card{font-weight:600;color:#1E1E2A}
.unsaved-item .unsaved-tab{color:#8A8AA0}
.unsaved-item .unsaved-preview{color:#5A5A72;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unsaved-item a{color:#5B7FC7;text-decoration:none;font-weight:600;font-size:.78rem}
.unsaved-item a:hover{text-decoration:underline}
.unsaved-item .delete-draft{color:#E85D5D;background:none;border:none;cursor:pointer;font-size:.78rem;font-weight:600;padding:.2rem .4rem}