:root{
  --ssa-primary:#2563eb;
  --ssa-primary-hover:#1d4ed8;
  --ssa-bg:#f5f7fb;
  --ssa-surface:#ffffff;
  --ssa-surface2:#f8fafc;
  --ssa-text:#0f172a;
  --ssa-muted:#64748b;
  --ssa-border:rgba(15,23,42,.12);
  --ssa-shadow:0 12px 30px rgba(2,6,23,.10);
  --ssa-radius:16px;
  --ssa-pill:999px;
  --ssa-focus:0 0 0 3px rgba(37,99,235,.25);
  --ssa-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.ssa-wrap{font-family:var(--ssa-sans); color:var(--ssa-text); margin:18px auto; max-width:980px; padding:0 12px;}
.ssa-shell{background:var(--ssa-bg); border-radius:var(--ssa-radius); padding:14px;}
.ssa-header{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; gap:12px;}
.ssa-h{margin:0; font-size:22px; letter-spacing:-0.01em;}
.ssa-sub{margin:6px 0 0 0; color:var(--ssa-muted);}
.ssa-points-badge{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--ssa-border); box-shadow:var(--ssa-shadow); font-weight:900; white-space:nowrap;}

.ssa-compose{background:var(--ssa-surface); border:1px solid var(--ssa-border); border-radius:var(--ssa-radius); box-shadow:var(--ssa-shadow); padding:14px; margin-bottom:14px;}
.ssa-textarea{width:100%; border:1px solid var(--ssa-border); border-radius:14px; padding:12px 12px; resize:vertical; min-height:84px; font-size:14px; outline:none; background:var(--ssa-surface2);}
.ssa-textarea:focus{box-shadow:var(--ssa-focus); border-color:rgba(37,99,235,.5); background:#fff;}

.ssa-compose__bar{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:10px;}
.ssa-compose__left{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0;}
.ssa-compose__right{display:flex; gap:10px; align-items:center;}

.ssa-file{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.ssa-file input[type=file]{display:none;}
.ssa-file__btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px; border:1px solid var(--ssa-border); background:#fff; font-weight:800; cursor:pointer; transition:transform .06s ease, border-color .15s ease;}
.ssa-file__btn:hover{transform:translateY(-1px); border-color:rgba(37,99,235,.35);}
.ssa-file__hint{font-size:12px;}

.ssa-input{border:1px solid var(--ssa-border); border-radius:12px; padding:10px 12px; outline:none; background:#fff; font-size:14px;}
.ssa-input:focus{box-shadow:var(--ssa-focus); border-color:rgba(37,99,235,.5);}
.ssa-input--video{min-width:260px; max-width:360px;}

.ssa-btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; font-weight:900; border:1px solid transparent; cursor:pointer; text-decoration:none!important;}
.ssa-btn--primary{background:var(--ssa-primary); border-color:var(--ssa-primary); color:#fff;}
.ssa-btn--primary:hover{background:var(--ssa-primary-hover); border-color:var(--ssa-primary-hover);}
.ssa-btn--ghost{background:#fff; border-color:var(--ssa-border); color:var(--ssa-text);}
.ssa-btn--ghost:hover{border-color:rgba(37,99,235,.35); transform:translateY(-1px);}

.ssa-notice{background:var(--ssa-surface); border:1px dashed rgba(15,23,42,.25); border-radius:14px; padding:14px 16px; color:var(--ssa-muted); margin:12px 0;}
.ssa-notice--cta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.ssa-notice__title{font-weight:700; color:var(--ssa-text);}
.ssa-notice__actions{display:flex; gap:10px; flex-wrap:wrap;}
.ssa-notice--success{border-style:solid; border-color:rgba(34,197,94,.25); background:#f0fdf4; color:#166534;}

.ssa-feed{display:flex; flex-direction:column; gap:12px;}

.ssa-card{background:var(--ssa-surface); border:1px solid var(--ssa-border); border-radius:var(--ssa-radius); box-shadow:var(--ssa-shadow); overflow:hidden;}
.ssa-card__header{display:flex; gap:12px; align-items:center; padding:14px; border-bottom:1px solid var(--ssa-border); background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,0));}
.ssa-avatar{width:42px; height:42px; border-radius:50%; background:rgba(2,6,23,.06); border:1px solid var(--ssa-border); display:flex; align-items:center; justify-content:center; font-weight:900;}
.ssa-card__meta{flex:1; min-width:0;}
.ssa-card__title{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.ssa-card__sub{font-size:12px;}
.ssa-muted{color:var(--ssa-muted);}
.ssa-dot{color:var(--ssa-muted);}

.ssa-actions{margin-left:auto;}

.ssa-card__body{padding:14px;}
.ssa-content{font-size:14px; line-height:1.5;}
.ssa-content a{color:var(--ssa-primary); text-decoration:underline;}

.ssa-media-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-top:12px;}
.ssa-media{border:1px solid var(--ssa-border); border-radius:14px; overflow:hidden; background:var(--ssa-surface2); display:block;}
.ssa-media img{width:100%; height:auto; display:block;}
.ssa-video video{width:100%; height:auto; display:block;}

.ssa-embed{margin-top:12px; border:1px solid var(--ssa-border); border-radius:14px; overflow:hidden; background:var(--ssa-surface2);}
.ssa-embed iframe{width:100%; max-width:100%;}

.ssa-card__footer{padding:12px 14px; border-top:1px solid var(--ssa-border); background:var(--ssa-surface2);}

.ssa-comments__list{display:flex; flex-direction:column; gap:10px; margin-bottom:10px;}
.ssa-comment{background:#fff; border:1px solid var(--ssa-border); border-radius:14px; padding:10px 12px;}
.ssa-comment__head{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px;}
.ssa-comment__body{font-size:13px; line-height:1.5; margin-top:6px;}

.ssa-commentform__row{display:flex; gap:10px; align-items:center;}
.ssa-commentform__row .ssa-input{flex:1; min-width:0;}

.ssa-pagination{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:14px; flex-wrap:wrap;}

@media (max-width: 720px){
  .ssa-header{align-items:stretch; flex-direction:column;}
  .ssa-notice--cta{align-items:stretch;}
  .ssa-notice__actions{width:100%;}
  .ssa-notice__actions .ssa-btn{flex:1;}
}