:root{
  --bg:#fbfbfa;
  --card:#ffffff;
  --muted:#666;
  --accent:#2b8a7a;
  --danger:#e65550;
  --radius:14px;
  font-family: system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP","Helvetica Neue",sans-serif;
}
html,body{height:100%;margin:0;background:var(--bg);}
#app{height:100%;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;}
.card{
  width:100%;
  max-width:820px;
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 6px 22px rgba(20,30,30,0.06);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
}
.row{display:flex;gap:8px;align-items:center;}
.row.small{gap:6px;}
.row.actions{justify-content:flex-end;margin-top:6px;}
input#keywords{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #ececec;
  font-size:15px;
  outline:none;
}
button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:10px;
  font-size:15px;
  min-width:56px;
  height:44px;
  box-shadow:none;
  touch-action: manipulation;
}
button.small{padding:6px 8px;min-width:48px;height:36px;font-size:13px;border-radius:8px;}
button#copy{background:#4a5568;}
button#clear{background:var(--danger);}
button.danger{background:var(--danger);color:#fff;}
select{
  padding:8px 10px;border-radius:10px;border:1px solid #ececec;background:#fff;height:40px;font-size:14px;
}
.result{
  margin-top:6px;
  padding:12px;
  background:#fbfbfb;
  border-radius:10px;
  min-height:92px;
  max-height:260px;
  overflow:auto;
  color:#111;
  font-size:15px;
  line-height:1.6;
  white-space:pre-wrap;
}

/* entries list */
.entries-wrap{margin-top:8px;border-top:1px solid #f0f0f0;padding-top:8px}
.entries-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--muted);font-size:14px}
.entries{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow:auto;padding-right:6px}
.entry{background:#fff;border-radius:10px;padding:10px;border:1px solid #f1f1f1;display:flex;flex-direction:column;gap:8px}
.entry-title{font-size:13px;color:#444}
.entry-preview{font-size:14px;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry-actions{display:flex;gap:8px;justify-content:flex-end}

/* empty state */
.empty{color:var(--muted);padding:10px;border-radius:8px;background:#fbfbfb;text-align:center}

/* tweaks */
@media (max-width:420px){
  .card{padding:12px;}
  input#keywords{font-size:14px;padding:10px;}
  button{font-size:14px;height:44px;}
  .entries{max-height:120px}
}