:root{
  --primary:#5b2b95;
  --secondary:#6e8ef5;
  --accent:#b08ef7;
  --muted:#6c757d;
  --bg:#f6f7fb;
  --surface:#ffffff;
}
*{box-sizing:border-box}
body{background:var(--bg);color:#0f1724;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.navbar-sticky{background:linear-gradient(90deg,var(--primary),var(--secondary))!important;box-shadow:0 6px 28px rgba(16,24,40,0.08)}
.container{max-width:1100px}
.hero{background:linear-gradient(180deg,rgba(91,43,149,0.06),transparent);border-radius:14px;padding:28px;margin-bottom:20px;display:flex;align-items:center;gap:20px}
.hero .title{font-weight:700;font-size:1.6rem}
.hero .sub{color:var(--muted)}
.card{border-radius:12px;background:var(--surface);box-shadow:0 8px 22px rgba(15,23,40,0.06);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(15,23,40,0.12)}
.card .card-body{padding:18px}
.btn-primary{background:var(--primary);border-color:var(--primary);border-radius:12px;padding:.6rem 1rem;font-weight:600}
.btn-outline-primary{border-radius:12px}
.rating{color:#f5a623;font-weight:700}
.comment-card .card-body{padding:12px}
.comment-card b{font-weight:700}
.small-muted{color:var(--muted)}

/* General comments improvements */
.avatar-sm{width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,var(--secondary),var(--primary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex-shrink:0}
.comment-text{color:#101018;max-height:4.6rem;overflow:hidden}
.comment-text.expanded{max-height:100vh}
.read-more{color:var(--primary);text-decoration:none}
.read-more:hover{text-decoration:underline}

/* Make comment cards slightly more distinct */
.comment-card{border-left:4px solid rgba(91,43,149,0.06);background:linear-gradient(180deg,#fff,#fbfbff)}
.medyum-hero{padding:20px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfbff);box-shadow:0 8px 24px rgba(16,24,40,0.04);margin-bottom:16px}
.medyum-header{display:flex;align-items:center;gap:16px}
.medyum-header .avatar{width:96px;height:96px;border-radius:12px;background:linear-gradient(135deg,var(--secondary),var(--primary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:700}
.stars{display:inline-flex;gap:4px;align-items:center}
.star{width:18px;height:18px;display:inline-block;background:linear-gradient(90deg,#ffd54a,#ffb300);-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 .587l3.668 7.431L23.5 9.75l-5.5 4.985L19.334 24 12 19.897 4.666 24l1.334-9.265-5.5-4.985 7.832-1.732z"/></svg>') center/contain no-repeat}
.star.off{opacity:.18;background:linear-gradient(90deg,#e9edf2,#e9edf2)}
@media (max-width:768px){
  .hero{flex-direction:column;align-items:flex-start;padding:18px}
  .medyum-header{flex-direction:column;align-items:flex-start}
  .medyum-header .avatar{width:84px;height:84px}
}
.toast-container{position:fixed;bottom:18px;right:18px;z-index:2000}
.modal-fullscreen-sm-down{max-width:620px;width:100%;}
.form-control:focus{box-shadow:0 6px 24px rgba(91,43,149,0.08);border-color:var(--primary)}
/* accessibility */
.btn-primary:focus{outline:3px solid rgba(91,43,149,0.12)}

/* small utility */
.lead-compact{margin-top:-6px;margin-bottom:6px}

/* Card thumbnail */
.card-thumb{height:140px;border-radius:10px 10px 6px 6px;background-size:cover;background-position:center;margin-bottom:12px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* star number next to stars */
.stars + .star-num{margin-left:8px;color:var(--muted);font-size:0.95rem}

/* subtle microinteraction */
.card .btn{transition:transform .12s ease}
.card .btn:active{transform:scale(.98)}

/* Form UX improvements */
.form-label{font-weight:600}
.form-help{font-size:.9rem;color:var(--muted)}
.form-error{color:#b00020;font-size:.92rem;margin-top:6px}

/* Honeypot: hidden off-screen for accessibility */
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Char counter */
.char-counter{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem;margin-top:6px}
.char-counter .remaining{font-weight:600}

/* Spinner inside button */
.btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.9);border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* FAB for mobile */
.fab-comment{position:fixed;right:16px;bottom:18px;z-index:2000;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;box-shadow:0 12px 30px rgba(91,43,149,0.18);border:none}
.fab-comment i{font-size:20px}

@media(min-width:768px){.fab-comment{display:none}}

/* Accessibility focus for forms */
.form-control:focus{outline:2px solid rgba(91,43,149,0.12);box-shadow:none}