.cn-box{border-radius:12px;padding:12px 14px;margin:10px 0}
.cn-box.cn-alert{background:#fff4e5;border:1px solid #ffd8a8}
.cn-box.cn-success{background:#e6ffed;border:1px solid #b2f5bf}
.cn-box.cn-notice{background:#eef6ff;border:1px solid #cfe3ff}
.cn-notice-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cn-notice-text{font-weight:600}
.cn-notice-action .cn-notice-btn{background:#111;color:#fff;border:0;border-radius:999px;padding:8px 14px;text-decoration:none;display:inline-block}
.cn-notice-action .cn-notice-btn:hover{opacity:.9}

.cn-tst-form{display:grid;gap:12px;max-width:720px}
.cn-field label{font-weight:600;display:block;margin-bottom:6px}
.cn-field textarea{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px;font:inherit;transition:box-shadow .12s ease,border-color .12s ease}
.cn-field .cn-help{display:block;margin-top:4px;color:#6b7280;font-size:12px}
.cn-btn{background:#111;color:#fff;border:0;border-radius:999px;padding:12px 18px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.cn-btn:disabled{opacity:.5;cursor:not-allowed}
.cn-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}

.cn-stars{direction:rtl;display:inline-flex;gap:6px}
.cn-stars input{display:none}
.cn-stars label{font-size:28px;cursor:pointer;opacity:.4;transition:transform .08s ease,opacity .08s ease}
.cn-stars input:checked ~ label, .cn-stars label:hover, .cn-stars label:hover ~ label{opacity:1}
.cn-stars label:active{transform:scale(.92)}

.cn-tst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.cn-card{position:relative;background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 2px 14px rgba(0,0,0,.06);transition:transform .15s ease, box-shadow .15s ease}
.cn-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.cn-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.cn-avatar{width:44px;height:44px;border-radius:999px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 44px}
.cn-header-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.cn-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cn-stars-readonly{margin-top:6px}
.cn-stars-readonly .cn-star{font-size:16px;color:#f5c518;opacity:.25}
.cn-stars-readonly .cn-star.is-on{opacity:1}

.cn-card-body{position:relative;margin-top:6px;line-height:1.55;color:#111}
.cn-card-body:before{content:'\201C';position:absolute;left:-6px;top:-10px;font-size:32px;opacity:.15}

.cn-rating-line{
  font-size: inherit;
  color:#111;
  line-height:1.6;
}