/* Tone Rewriter — modern dark theme */
:root{
  --bg:#0c0f14; --panel:#121720; --muted:#98a2b3; --text:#e6e7eb; --soft:#1a2130;
  --accent:#6c8cff; --accent-600:#5979ff; --accent-700:#4d69ea; --ok:#2ecc71; --err:#ff5c7a;
  --border:#222a3a; --focus:#9db2ff; --del-bg:#391a1e; --ins-bg:#16321f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
img{max-width:100%;display:block}
a{color:var(--accent)}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--panel),transparent)}
.brand{display:flex;gap:12px;align-items:center}
.logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.title{margin:0;font-size:18px}
.subtitle{margin:0;color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px}

.layout{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;max-width:1200px;margin:18px auto;padding:0 18px}
.pane{min-width:0}
.pane .card{margin-bottom:18px}

.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.card h2{margin:0 0 10px 0;font-size:18px}
.placeholder{opacity:.9}

.alert{border-radius:10px;padding:12px 14px;margin-bottom:12px}
.alert.ok{background:rgba(46, 204, 113, .09);border:1px solid rgba(46, 204, 113, .25)}
.alert.error{background:rgba(255, 92, 122, .08);border:1px solid rgba(255, 92, 122, .28)}

.form .field{margin-bottom:12px}
.form label{display:block;margin:0 0 6px 0;color:#d9dbe1}
.form .help{color:var(--muted);font-size:12px;margin-top:6px}
.form input[type=text],
.form input[type=url],
.form input[type=number],
.form textarea,
.form select{width:100%;background:var(--soft);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;outline:none}
.form textarea{resize:vertical}
.form input:focus,
.form textarea:focus,
.form select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(157,178,255,.15)}

.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row .field{margin-bottom:0}

.btn{appearance:none;border:1px solid var(--border);background:var(--soft);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn:hover{border-color:#2f3a51}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-600));border-color:transparent;color:white}
.btn.primary:hover{filter:brightness(1.05)}
.btn.secondary{background:#1f2535}
.btn.ghost{background:transparent;border-color:#2b3347}
.btn.tiny{padding:6px 8px;font-size:12px;border-radius:8px}

.badge{display:inline-block;background:#1f2535;border:1px solid #2b3347;border-radius:999px;padding:2px 8px;font-size:12px}
.muted{color:var(--muted)}

.expander{background:#101521;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0}
.expander > summary{cursor:pointer;color:#d9dbe1}
.expander.small{padding:8px 10px}

.variants{list-style:decimal;padding-left:18px}
.variant{margin:10px 0;padding:10px;border:1px dashed #2b3347;border-radius:10px}
.variant-actions{display:flex;justify-content:flex-end;margin-bottom:6px}
.rewritten{white-space:pre-wrap;background:#0e1320;border-radius:8px;padding:10px;border:1px solid #202a42}

.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.history .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.history .snippet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d0d4de}
.history pre.small{white-space:pre-wrap;background:#0f1421;border:1px solid #1f2942;border-radius:8px;padding:8px}
.profile-list{list-style:none;margin:8px 0 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.profile-list li{display:flex;gap:8px;align-items:center}
.profile-name{font-weight:600}
.profile-date{color:var(--muted);font-size:12px}

.checkbox{display:inline-flex;gap:8px;align-items:center}

.diff{background:#0e1320;border:1px solid #202a42;border-radius:8px;padding:10px;overflow:auto}
.diff-del{background:var(--del-bg);text-decoration:line-through;color:#ff7a7a;border-radius:3px;padding:0 2px}
.diff-ins{background:var(--ins-bg);color:#79f2a5;border-radius:3px;padding:0 2px}

.busy{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);z-index:100}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.app-footer{max-width:1200px;margin:20px auto;padding:0 18px 30px 18px;color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
}