body { font-family: 'Roboto', sans-serif; background-color: #f9f9f9; margin:0; padding:0; }
.container { width:90%; max-width:1100px; margin:20px auto; padding:20px; background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
h3.title { font-size:22px; font-weight:700; text-align:center; margin-bottom:25px; }

/* controls */
.control-button { height:34px; padding:0 12px; font-size:14px; border-radius:6px; border:none; background:#cce7ff; color:#000; cursor:pointer; margin-right:8px; }
.control-button.erase { background:#ffcccc; }
#checkboxLine { display:flex; gap:10px; align-items:center; margin-left:10px; }
.search-area { margin-top:20px; margin-bottom:20px; position:relative; }
.search-area input[type='text'] { width: 100%; padding: 8px 10px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.search-area input[type='text']:focus { outline: none; border-color: #ccc; box-shadow: none; }

/* results */
#loadMessage {font-weight: normal; color: #333; margin-bottom: 8px; font-size: 15px; }
#results { font-family:Arial, sans-serif; font-size:16px; color:#000; }
.result { margin-bottom:6px; padding:4px 4px; border-bottom:1px solid #f0f0f0; }

/* highlights */
.highlight { color:red; font-weight:bold; background:inherit; }
.highlightO { color:yellowgreen; font-weight:bold; }
.highlightX { color:skyblue; font-weight:bold; }
.highlightAnswer { color:yellowgreen; font-weight:bold; }

#topControlLine { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
select { height:34px; font-size:14px; }
#commandNotice { margin-top:20px; padding:15px; background:#fef9e7; border:1px solid #f0e68c; border-radius:6px; }
#initialNotice { background-color:#fef8e7; padding:15px; border-radius:6px; margin-bottom:10px; line-height:1.6; font-size:14px; color:#000; }

@media (max-width:480px) {
  h3.title{font-size:20px;}
  .container{padding:10px;width:90%;}
  #topControlLine{flex-wrap:wrap;}
  #topControlLine select,.control-button{height:34px;font-size:14px;}
  .search-area input[type='text']{width:100%;}
}

/* overlays */
#copyOverlay, #captureOverlay {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8); color: #fff; padding: 15px 25px; border-radius: 10px;
  font-size: 18px; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 9999;
}

/* links */
a { text-decoration: none; }