*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f7f9fc;--bg2:#ffffff;--bg3:#ffffff;--border:#e3e8f0;--text:#0f172a;--text2:#5b6878;--text3:#64748b;--accent:#2563eb;--green:#059669;--radius:12px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
nav{background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.nav-inner{max-width:none;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:18px;color:var(--accent)}
.nav-right{display:flex;gap:8px}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text2);padding:6px 12px;border-radius:7px;font-size:13px;cursor:pointer;transition:all .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--text)}

.limits-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.limits-label{font-size:12px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.limit-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap}
.limit-btn:hover{border-color:var(--accent);color:var(--text)}
.limit-clear{border-color:transparent;color:var(--text3)}

.main-layout{display:grid;grid-template-columns:1fr 320px;flex:1;overflow:hidden}

/* EDITOR */
.editor-col{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden}
.editor-wrap{flex:1;display:flex;flex-direction:column;position:relative}
#text-input{flex:1;background:transparent;border:none;color:var(--text);font-size:16px;line-height:1.8;padding:24px;resize:none;outline:none;font-family:Georgia,'Times New Roman',serif}
#text-input::placeholder{color:var(--text3)}
.limit-progress{height:4px;background:var(--bg3);flex-shrink:0}
.limit-fill{height:100%;border-radius:0;transition:width .2s,background .2s}
.limit-label-text{padding:6px 24px;font-size:12px;color:var(--text3);text-align:right;flex-shrink:0;background:var(--bg2);border-top:1px solid var(--border)}

/* STATS */
.stats-col{overflow-y:auto;padding:16px;background:var(--bg2)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat-card{background:var(--bg3);border-radius:10px;padding:14px;text-align:center;border:1px solid var(--border)}
.stat-card.accent{background:rgba(79,142,247,0.12);border-color:rgba(79,142,247,0.3)}
.stat-val{font-size:26px;font-weight:700;color:var(--text)}
.stat-card.accent .stat-val{color:var(--accent)}
.stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}

.time-card,.keywords-card,.extra-stats-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
.time-card h3,.keywords-card h3,.extra-stats-card h3{font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}
.time-grid{display:flex;gap:16px}
.time-item{display:flex;align-items:flex-start;gap:10px;flex:1}
.time-icon{font-size:20px;margin-top:2px}
.time-val{font-size:17px;font-weight:700;color:var(--text)}
.time-lbl{font-size:12px;color:var(--text2);margin-top:2px}
.time-note{color:var(--text3);font-size:11px}

.kw-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kw-header h3{margin-bottom:0}
.toggle-label{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:5px;cursor:pointer}
.toggle-label input{accent-color:var(--accent)}
.keyword-list{display:flex;flex-direction:column;gap:5px}
.kw-item{display:flex;align-items:center;gap:8px}
.kw-bar-wrap{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.kw-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.kw-word{font-size:13px;color:var(--text2);min-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-count{font-size:12px;color:var(--text3);min-width:24px;text-align:right}
.kw-pct{font-size:11px;color:var(--text3);min-width:34px;text-align:right}
.kw-empty{font-size:13px;color:var(--text3);text-align:center;padding:12px}

.extra-stats-list{display:flex;flex-direction:column;gap:6px}
.extra-stat-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-bottom:1px solid rgba(42,51,71,.4)}
.extra-stat-row:last-child{border-bottom:none}
.extra-stat-lbl{color:var(--text2)}
.extra-stat-val{color:var(--text);font-weight:600}

@media(max-width:700px){
  body{height:auto}
  .main-layout{grid-template-columns:1fr;overflow:visible}
  .editor-col{height:300px;border-right:none;border-bottom:1px solid var(--border)}
  .stats-col{overflow-y:visible}
  .limits-bar{overflow-x:auto;flex-wrap:nowrap}
}