/* styles.css - styles for Deep Grammar Checker demo */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
  --bg: #f1f5f9;
  --card: #ffffff;
  --muted: #64748b;
  --accent: #4f46e5;
}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{background:var(--bg);color:#0f172a;margin:0;padding:0;}
.container{max-width:1100px;margin:32px auto;padding:20px;}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.header h1{font-size:22px;margin:0;}
.header p{margin:4px 0 0;color:var(--muted);font-size:13px;}
.button{padding:8px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600;}
.btn-primary{background:var(--accent);color:white;}
.btn-success{background:#10b981;color:white;}
.grid{display:grid;grid-template-columns:1fr 320px;gap:18px;}
.card{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06);}
.editor-wrap{position:relative;height:320px;border-radius:8px;overflow:hidden;}
.highlight-layer{position:absolute;inset:0;padding:16px;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;overflow:auto;color:transparent;}
.highlight-layer span{color:inherit;}
.text-area{position:relative;width:100%;height:100%;padding:16px;border:0;outline:none;background:transparent;font-size:15px;line-height:1.6;resize:none;}
.stats{display:flex;gap:10px;margin-top:10px;font-size:13px;color:var(--muted);}
.chip{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:8px;background:rgba(2,6,23,0.04);}
.err-grammar{background:rgba(255,200,200,0.6);}
.err-spelling{background:rgba(255,235,150,0.6);}
.err-style{background:rgba(200,230,255,0.6);}
.err-dup{background:rgba(220,200,255,0.6);}
.issues-list{max-height:56vh;overflow:auto;}
.issue-item{padding:10px;border-radius:8px;border:1px solid rgba(2,6,23,0.04);margin-bottom:10px;}
.issue-item strong{display:block;}
.suggestions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.suggestion-btn{padding:6px 8px;border-radius:6px;border:1px solid rgba(2,6,23,0.06);background:transparent;cursor:pointer;font-size:13px;}
.small{font-size:12px;color:var(--muted);margin-top:8px;}
.footer{margin-top:14px;font-size:13px;color:var(--muted);}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:12px;}