*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 24px 16px;
  font-family: 'Microsoft Sans Serif', 'Segoe UI', sans-serif;
}

.container {
  width: 100%;
  max-width: 440px;
  background: #000;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

/* ── Tab bar ────────────────────────────────────────── */

.tab-bar {
  display: flex;
  background: #0a0a0a;
  border-bottom: 1px solid #1e1e1e;
}

.tab-btn {
  flex: 1;
  padding: 9px 2px;
  background: none;
  border: none;
  border-right: 1px solid #1e1e1e;
  color: #555;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s, background 0.15s;
}

.tab-btn:last-child { border-right: none; }
.tab-btn:hover { background: #111; color: #aaa; }
.tab-btn.active {
  background: #000;
  color: #ddd;
  border-bottom: 2px solid #6495ed;
  margin-bottom: -1px;
}

/* ── Panels ─────────────────────────────────────────── */

.tab-panel { display: none; padding: 8px 8px 6px; }
.tab-panel.active { display: block; }

.row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

/* Vertical 加密/解密 button */
.side-btn {
  width: 40px;
  height: 116px;
  flex-shrink: 0;
  background: #000;
  border: 2px solid #6495ed;
  color: #ffff00;
  cursor: crosshair;
  font-size: 13px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 6px;
  padding-top: 10px;
  transition: background 0.12s;
}

.side-btn:hover  { background: #060616; }
.side-btn:active { background: #0e0e20; }

/* Text areas */
.box {
  flex: 1;
  height: 116px;
  padding: 6px;
  border: 1px solid #2a2a2a;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12.5px;
  resize: none;
  outline: none;
  line-height: 1.5;
}

.plain  { background: #282828; color: #00ff00; }
.cipher { background: #000;    color: #00e5ff; border-color: #0a2a2a; }

.plain::placeholder  { color: #2a4a2a; }
.cipher::placeholder { color: #0a3a3a; }

/* ── Toolbar ─────────────────────────────────────────── */

.bar {
  display: flex;
  gap: 5px;
  padding: 5px 0 2px;
  flex-wrap: wrap;
  align-items: center;
}

.ext-btn {
  padding: 4px 11px;
  background: none;
  border: 1px solid #3a3030;
  color: #cc3333;
  font-size: 11.5px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}

.ext-btn:hover { background: #1a0505; }

.act-btn {
  padding: 4px 11px;
  background: none;
  border: 1px solid #1e321e;
  color: #00bb00;
  font-size: 11.5px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}

.act-btn:hover    { background: #001800; }
.act-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Toast ───────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1c1c1c;
  border: 1px solid #333;
  color: #ddd;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
  white-space: nowrap;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { background: #2a0000; border-color: #550000; color: #ff9090; }

/* ── Mobile ──────────────────────────────────────────── */

@media (max-width: 480px) {
  body { padding: 0; align-items: stretch; }
  .container { max-width: 100%; border-radius: 0; border: none; min-height: 100vh; }
  .tab-btn { font-size: 10px; }
}