* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0; background: #f4f6f8; color: #1a1a1a;
}
header {
  background: #075e54; color: white; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
header h1 { margin: 0; font-size: 18px; font-weight: 600; }
.header-right { display: flex; gap: 16px; align-items: center; }
.header-right a { color: white; text-decoration: none; opacity: .75; font-size: 14px; padding: 4px 0; }
.header-right a:hover { opacity: 1; }
.header-right a.active { opacity: 1; border-bottom: 2px solid #25d366; }
.conn { font-size: 13px; padding: 4px 10px; border-radius: 12px; }
.conn.ok { background: #25d366; color: #083c1f; }
.conn.bad { background: #ffb3b3; color: #660000; }

main { max-width: 760px; margin: 24px auto; padding: 0 16px; }
.card {
  background: white; border-radius: 10px; padding: 20px 22px;
  margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h2 { margin: 0 0 14px; font-size: 15px; color: #075e54; font-weight: 600; }

.groups { display: flex; flex-direction: column; gap: 10px; }
.group-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid #e0e4e8; border-radius: 8px; cursor: pointer;
}
.group-item:hover { background: #f9fafb; }
.group-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.group-item code { font-size: 11px; color: #888; }

textarea {
  width: 100%; border: 1px solid #d7dde2; border-radius: 8px; padding: 12px;
  font-family: "Menlo", "Consolas", monospace; font-size: 14px; line-height: 1.5; resize: vertical;
}
textarea:focus { outline: 2px solid #25d366; border-color: transparent; }
.hint { font-size: 13px; color: #666; margin: 10px 0 16px; }

button {
  background: #25d366; color: white; border: 0; padding: 12px 28px;
  border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}
button:hover:not(:disabled) { background: #1fb958; }
button:disabled { background: #a8d5b5; cursor: not-allowed; }

#progress-list { list-style: none; padding: 0; margin: 0; }
#progress-list li { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
#progress-list li:last-child { border-bottom: 0; }
.icon { display: inline-block; width: 24px; }
.mono { font-family: "Menlo", monospace; font-size: 11px; color: #888; }
.st-sent { color: #1fb958; font-weight: 600; }
.st-sending { color: #e67e22; font-weight: 600; }
.st-error { color: #c0392b; font-weight: 600; }
.st-queued { color: #888; }
.err { display: block; font-size: 12px; color: #c0392b; margin-top: 4px; }
.waiting {
  margin-top: 14px; padding: 10px 14px; background: #fff8e1; border-left: 3px solid #ffc107;
  border-radius: 4px; font-size: 13px; color: #7c5e00;
}

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; }
.field input[type="datetime-local"] {
  padding: 10px 12px; border: 1px solid #d7dde2; border-radius: 6px;
  font-size: 14px; font-family: inherit;
}
.field input[type="datetime-local"]:focus { outline: 2px solid #25d366; border-color: transparent; }
.field textarea { width: 100%; }

.flash-banner {
  background: #d4f4dd; color: #0a5d2a; padding: 12px 16px; border-radius: 8px;
  margin-bottom: 16px; border-left: 4px solid #25d366; font-size: 14px;
}

.schedule-list { list-style: none; padding: 0; margin: 0; }
.schedule-list li {
  padding: 14px; border: 1px solid #e0e4e8; border-radius: 8px; margin-bottom: 10px;
  background: #fafbfc;
}
.sched-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.sched-date { font-weight: 600; color: #075e54; font-size: 15px; }
.sched-meta { font-size: 12px; color: #666; }
.sched-preview {
  margin-top: 8px; padding: 8px 10px; background: white; border-radius: 4px;
  font-size: 13px; color: #333; white-space: pre-wrap; font-family: "Menlo", monospace;
}
.btn-danger { background: #c0392b; padding: 6px 14px; font-size: 13px; }
.btn-danger:hover:not(:disabled) { background: #a33225; }

.btn-edit-link, .btn-secondary-link {
  display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 600;
  border-radius: 8px; text-decoration: none; cursor: pointer;
  background: #e8eef3; color: #2c3e50;
}
.btn-edit-link:hover, .btn-secondary-link:hover { background: #d5dde4; }

.fetched-list { display: flex; flex-direction: column; gap: 8px; max-height: 540px; overflow-y: auto; padding: 4px; }
.fetched-list .group-item { grid-template-columns: auto 1fr; align-items: flex-start; padding: 10px 12px; }
.label-input {
  width: 100%; padding: 6px 10px; border: 1px solid #d7dde2; border-radius: 5px;
  font-size: 14px; font-weight: 500; margin-bottom: 6px;
}
.label-input:focus { outline: 2px solid #25d366; border-color: transparent; }

.tag {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
  border-radius: 10px; margin-right: 6px; text-transform: uppercase; letter-spacing: .3px;
}
.tag-announce { background: #d4f4dd; color: #0a5d2a; }
.tag-sub { background: #e0edff; color: #1e40af; }
.tag-plain { background: #f0f0f0; color: #555; }
.tag-size { background: #fff3cd; color: #7c5e00; }

.group-saved { display: block; }
.group-saved code.mono { margin-top: 4px; display: inline-block; }

.file-input-wrap {
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.file-input-wrap input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.file-input-btn {
  display: inline-block; padding: 10px 18px; background: #e8eef3; color: #2c3e50;
  border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px dashed #b0c4d4;
  transition: background .15s;
}
.file-input-wrap:hover .file-input-btn { background: #d5dde4; }
.file-info {
  font-size: 13px; color: #666;
}
.file-info.has-file { color: #075e54; font-weight: 600; }

.current-media {
  background: #f0f7ff; border-left: 3px solid #1e40af;
  padding: 10px 14px; border-radius: 4px; margin-bottom: 8px;
  font-size: 14px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.remove-media-check {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer;
}
.remove-media-check input { width: auto !important; }

.media-badge {
  display: inline-block; background: #fff3cd; color: #7c5e00;
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  margin-right: 6px;
}

.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #075e54;
}
.login-box {
  background: white; padding: 32px; border-radius: 12px; width: 320px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.login-box h1 { margin: 0 0 20px; font-size: 18px; color: #075e54; text-align: center; }
.login-box label { display: block; font-size: 13px; color: #555; margin-bottom: 12px; }
.login-box input {
  width: 100%; padding: 10px; border: 1px solid #d7dde2; border-radius: 6px;
  font-size: 14px; margin-top: 4px;
}
.login-box input:focus { outline: 2px solid #25d366; border-color: transparent; }
.login-box button { width: 100%; margin-top: 8px; }
.flash {
  background: #ffe0e0; color: #a00; padding: 8px 12px; border-radius: 6px;
  font-size: 13px; margin-bottom: 14px;
}