#text-rephraser-container {
  max-width: 1000px;
  margin: 20px auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  overflow: hidden;
  border: 1px solid #e1e8f0;
}
.tr-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  text-align: center;
  position: relative;
}
.tr-header h1 { margin:0; font-size:32px; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,0.3); }
.tr-header p { margin:12px 0 0 0; opacity:.95; font-size:18px; }
.tr-content { padding: 35px; background: linear-gradient(145deg, #f8fbff 0%, #ffffff 100%); }
.tr-modes {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px; margin-bottom:30px;
  padding:25px; background:white; border-radius:12px; border:2px solid #e8f2ff; box-shadow:0 2px 12px rgba(102,126,234,.08);
}
.tr-mode-group { display:flex; flex-direction:column; gap:10px; }
.tr-mode-group label {
  font-weight:700; color:#2c3e50; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px;
}
.tr-select {
  padding:12px 15px; border:2px solid #e1e8f0; border-radius:10px; font-size:15px; background:white; transition:all .3s ease; font-weight:500;
}
.tr-select:focus { border-color:#667eea; outline:none; box-shadow:0 0 0 4px rgba(102,126,234,.15); }
.tr-textarea {
  width:100%; min-height:220px; padding:25px; border:2px solid #e1e8f0; border-radius:12px; font-size:16px; line-height:1.7;
  resize:vertical; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:white; transition:all .3s ease; box-sizing:border-box;
  margin-bottom:25px; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.tr-textarea:focus { border-color:#667eea; outline:none; box-shadow:0 0 0 4px rgba(102,126,234,.15); }
.tr-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:30px; }
.tr-btn {
  padding:18px 25px; border:none; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1);
  text-transform:uppercase; letter-spacing:.8px; color:white; text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.tr-btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 20px rgba(102,126,234,.4); }
.tr-btn-secondary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 20px rgba(245,87,108,.4); }
.tr-btn-tertiary { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 20px rgba(79,172,254,.4); }
.tr-btn-quaternary { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); box-shadow: 0 4px 20px rgba(67,233,123,.4); }
.tr-btn:hover { transform: translateY(-3px); opacity:.9; }
.tr-results { display:none; gap:25px; }
.tr-result-section {
  background:white; border:2px solid #e8f2ff; border-radius:12px; padding:25px; box-shadow:0 4px 16px rgba(102,126,234,.08); position:relative;
}
.tr-result-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:15px; border-bottom:2px solid #f1f5f9; }
.tr-result-title { font-size:20px; font-weight:700; color:#667eea; margin:0; }
.tr-copy-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; }
.tr-result-content { font-size:16px; line-height:1.7; color:#334155; }
.tr-bullets { list-style:none; padding:0; margin:0; }
.tr-bullets li { position:relative; padding:12px 0 12px 30px; margin-bottom:8px; border-left:3px solid #e2e8f0; padding-left:25px; }
.tr-bullets li::before { content:'▶'; position:absolute; left:8px; top:12px; color:#667eea; font-size:12px; }
.tr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px; margin-top:30px; padding:25px; background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0; }
.tr-stat { text-align:center; padding:15px; background:white; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.tr-stat-value { font-size:28px; font-weight:800; color:#667eea; display:block; }
.tr-stat-label { font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:.8px; margin-top:8px; font-weight:600; }
@media (max-width:768px){
  #text-rephraser-container{margin:10px;}
  .tr-content{padding:25px;}
  .tr-modes{grid-template-columns:1fr; padding:20px;}
  .tr-actions{grid-template-columns:1fr;}
  .tr-header h1{font-size:26px;}
}
