:root{
  --bg1:#1e293b;
  --bg2:#312e81;

  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --violet:#ddd6fe;
  --violet2:#a78bfa;
  --emerald:#34d399;

  --typo:#facc15;
  --kanji:#fb923c;
  --keigo:#fb7185;
  --grammar:#c084fc;

  --good:#34d399;
  --warn:#facc15;
  --bad:#fb7185;

  --shadow:0 18px 45px rgba(0,0,0,.25);

  font-family:
    "Noto Sans JP",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

/* =========================
BASE
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  background:#020617;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.bg-hero{
  background:
    radial-gradient(
      1100px 500px at 18% 0%,
      rgba(139,92,246,.28),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 75% 15%,
      rgba(167,139,250,.22),
      transparent 55%
    ),
    radial-gradient(
      800px 600px at 50% 100%,
      rgba(52,211,153,.10),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      var(--bg1),
      var(--bg2)
    );

  min-height:100vh;
}

/* =========================
CARD
========================= */

.card{
  border:1px solid var(--border);
  background:var(--card);

  border-radius:18px;

  padding:18px;

  box-shadow:var(--shadow);

  backdrop-filter:blur(10px);

  transition:
    transform .2s ease,
    border .2s ease,
    background .2s ease;
}

.card:hover{
  border-color:rgba(167,139,250,.22);
}

.card-title{
  font-size:1.08rem;
  font-weight:800;
  color:var(--text);
}

/* =========================
TEXTAREA
========================= */

.textarea{
  width:100%;

  margin-top:10px;

  border-radius:14px;

  border:1px solid var(--border);

  background:rgba(2,6,23,.35);

  padding:12px;

  color:var(--text);

  outline:none;

  resize:vertical;

  transition:
    border .2s ease,
    box-shadow .2s ease,
    background .2s ease;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.textarea:focus{
  border-color:rgba(167,139,250,.45);

  box-shadow:
    0 0 0 4px rgba(167,139,250,.18);
}

textarea::placeholder{
  color:rgba(255,255,255,.45);
}

/* =========================
BUTTON
========================= */

button{
  cursor:pointer;
}

.btn{
  border-radius:12px;

  padding:10px 14px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.05);

  color:var(--text);

  transition:
    transform .05s ease,
    background .2s ease,
    border .2s ease,
    opacity .2s ease;

  font-size:.92rem;

  user-select:none;
}

.btn:hover{
  background:rgba(255,255,255,.08);
}

.btn:active{
  transform:translateY(1px);
}

.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

.btn-primary{
  font-weight:800;
  font-size:1rem;

  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #c4b5fd
    );

  border-color:rgba(167,139,250,.4);

  box-shadow:
    0 8px 24px rgba(139,92,246,.25);
}

.btn-primary:hover{
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,1),
      rgba(167,139,250,1)
    );
}

.btn-copy{
  background:
    linear-gradient(
      135deg,
      rgba(16,185,129,.95),
      rgba(52,211,153,.9)
    );

  border-color:rgba(52,211,153,.4);

  font-weight:700;

  padding:11px 16px;

  box-shadow:
    0 8px 25px rgba(16,185,129,.35);
}

.btn-copy:hover{
  background:
    linear-gradient(
      135deg,
      rgba(16,185,129,1),
      rgba(52,211,153,1)
    );

  transform:translateY(-1px);
}

.btn-copy:active{
  transform:translateY(1px);
}

.btn-ghost{
  background:rgba(255,255,255,.03);
}

/* =========================
TAB
========================= */

.tab{
  border-radius:999px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.05);

  font-weight:700;

  font-size:.92rem;

  color:var(--text);

  padding:10px 16px;

  transition:
    background .2s ease,
    border .2s ease;
}

.tab:hover{
  background:rgba(255,255,255,.08);
}

.tab-active{
  border-color:rgba(167,139,250,.45);

  background:rgba(167,139,250,.18);
}

/* =========================
BADGE
========================= */

.badge{
  display:inline-flex;

  align-items:center;

  gap:6px;

  border-radius:999px;

  padding:4px 10px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.03);

  font-weight:700;

  font-size:.78rem;
}

.badge-typo{
  border-color:rgba(250,204,21,.45);
  color:rgba(250,204,21,.95);
}

.badge-kanji{
  border-color:rgba(251,146,60,.45);
  color:rgba(251,146,60,.95);
}

.badge-keigo{
  border-color:rgba(251,113,133,.45);
  color:rgba(251,113,133,.95);
}

.badge-grammar{
  border-color:rgba(192,132,252,.45);
  color:rgba(192,132,252,.95);
}

/* =========================
SENSITIVE ALERT
========================= */

.sensitive-alert{
  margin-top:14px;

  border-radius:14px;

  border:1px solid rgba(251,113,133,.55);

  background:rgba(251,113,133,.12);

  padding:14px;

  animation:fadeIn .25s ease;
}

.sensitive-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.sensitive-inner i{
  color:#fb7185;
  font-size:1.1rem;
  margin-top:2px;
}

.sensitive-title{
  font-weight:800;
  color:#fecdd3;
  font-size:.95rem;
}

.sensitive-body{
  margin-top:6px;
  font-size:.88rem;
  line-height:1.7;
  color:rgba(255,255,255,.9);
}

.sensitive-body strong{
  color:#fda4af;
}

/* =========================
RESULT
========================= */

.result-card{
  animation:fadeIn .25s ease;

  margin-top:14px;

  border:1px solid var(--border);

  background:rgba(2,6,23,.35);

  border-radius:14px;

  padding:16px;

  line-height:1.8;
}

.result-title{
  font-weight:800;
  color:var(--text);
}

.muted{
  color:var(--muted);
}

.hint{
  margin-top:10px;

  padding:12px;

  border-radius:14px;

  border:1px dashed rgba(255,255,255,.18);

  background:rgba(255,255,255,.04);

  font-size:.92rem;

  color:rgba(255,255,255,.86);
}

/* =========================
SUMMARY
========================= */

.summary{
  padding:14px 18px;

  border-radius:14px;

  font-size:1.05rem;

  font-weight:800;

  text-align:center;

  margin-bottom:12px;

  animation:fadeIn .3s ease;
}

.summary-good{
  background:rgba(52,211,153,.15);
  border:1px solid rgba(52,211,153,.4);
  color:#34d399;
}

.summary-warning{
  background:rgba(250,204,21,.15);
  border:1px solid rgba(250,204,21,.4);
  color:#facc15;
}

.summary-bad{
  background:rgba(251,113,133,.15);
  border:1px solid rgba(251,113,133,.4);
  color:#fb7185;
}

/* =========================
HIGHLIGHT
========================= */

.hl{
  padding:1px 2px;

  border-radius:6px;

  border:1px solid rgba(255,255,255,.12);
}

.hl-typo{
  background:rgba(250,204,21,.35);
}

.hl-kanji{
  background:rgba(251,146,60,.35);
}

.hl-keigo{
  background:rgba(251,113,133,.35);
}

.hl-grammar{
  background:rgba(192,132,252,.35);
}

/* =========================
ISSUE
========================= */

.issue{
  border:1px solid var(--border);

  background:rgba(2,6,23,.25);

  border-radius:12px;

  padding:12px;

  transition:
    border .2s ease,
    transform .2s ease;
}

.issue:hover{
  border-color:rgba(167,139,250,.24);
}

.issue .type{
  font-weight:900;

  font-size:.78rem;

  letter-spacing:.02em;

  text-transform:uppercase;
}

.issue .msg{
  margin-top:6px;

  color:rgba(255,255,255,.86);

  font-size:.94rem;

  line-height:1.7;
}

.issue .sug{
  margin-top:8px;

  font-size:.92rem;

  color:rgba(255,255,255,.92);

  padding:10px;

  border-radius:10px;

  background:rgba(255,255,255,.04);
}

.issue .sug code{
  background:rgba(255,255,255,.06);

  border:1px solid var(--border);

  padding:1px 6px;

  border-radius:8px;
}

/* =========================
ANALYSIS STEP
========================= */

.analysis-steps{
  margin-top:14px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,.08);

  background:rgba(255,255,255,.03);

  padding:14px;
}

.analysis-step{
  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 0;

  font-size:.92rem;

  color:rgba(255,255,255,.88);
}

.analysis-step i{
  color:#a78bfa;
}

/* =========================
AGENT BADGE / STATUS（既存補完）
========================= */

.agent-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(52,211,153,.4);
  background:rgba(52,211,153,.12);
  font-size:.82rem;
  font-weight:700;
  color:#34d399;
}

.agent-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6);
  animation:pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5); }
  70%{ box-shadow:0 0 0 8px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

.mini-card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:14px;
  text-align:center;
}

.mini-icon{
  font-size:1.2rem;
  color:#a78bfa;
}

.mini-title{
  margin-top:8px;
  font-weight:800;
  font-size:.9rem;
}

.mini-desc{
  margin-top:4px;
  font-size:.78rem;
  color:rgba(255,255,255,.7);
}

.agent-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(167,139,250,.3);
  background:rgba(167,139,250,.08);
}

.agent-loading{
  width:18px;
  height:18px;
  border:3px solid rgba(167,139,250,.4);
  border-top-color:#a78bfa;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

.agent-status-text{
  font-size:.9rem;
  color:rgba(255,255,255,.88);
}

.global-loading{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,6,23,.6);
  backdrop-filter:blur(3px);
}

.global-loading-card{
  background:rgba(15,23,42,.95);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 36px;
  text-align:center;
}

.loading-spinner-large{
  width:40px;
  height:40px;
  margin:0 auto;
  border:4px solid rgba(167,139,250,.3);
  border-top-color:#a78bfa;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* =========================
BULK
========================= */

#bulkHighlighted{
  margin-top:20px;

  white-space:pre-wrap;

  line-height:1.8;

  font-size:.95rem;

  padding:14px;

  border-radius:14px;

  background:rgba(2,6,23,.35);

  border:1px solid var(--border);
}

#bulkCorrected{
  overflow-x:auto;
}

/* =========================
TOAST
========================= */

.toast{
  position:fixed;

  bottom:20px;

  left:50%;

  transform:
    translateX(-50%)
    translateY(20px);

  background:#333;

  color:white;

  padding:12px 18px;

  border-radius:10px;

  font-size:14px;

  opacity:0;

  transition:all .3s ease;

  z-index:9999;

  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.toast.show{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

.toast.success{
  background:#27ae60;
}

.toast.error{
  background:#c0392b;
}

/* =========================
SPINNER
========================= */

.spinner{
  display:inline-block;

  width:14px;
  height:14px;

  border:2px solid #ffffff;

  border-top:2px solid transparent;

  border-radius:50%;

  animation:spin .8s linear infinite;

  margin-right:6px;

  vertical-align:middle;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================
FADE
========================= */

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
MODAL
========================= */

.modal{
  position:fixed;

  inset:0;

  z-index:50;
}

.modal-backdrop{
  position:absolute;

  inset:0;

  background:rgba(0,0,0,.55);

  backdrop-filter:blur(3px);
}

.modal-card{
  position:relative;

  max-width:720px;

  margin:6vh auto;

  background:rgba(15,23,42,.98);

  border:1px solid var(--border);

  border-radius:18px;

  padding:18px;

  box-shadow:var(--shadow);
}

.code{
  background:rgba(255,255,255,.06);

  border:1px solid var(--border);

  padding:1px 8px;

  border-radius:10px;
}

/* =========================
FOOTER
========================= */

footer{
  padding:30px 0;

  color:rgba(255,255,255,.85);
}

footer a{
  text-decoration:underline;
}

/* =========================
FEEDBACK
========================= */

.feedback-box{
  margin-top:20px;
  border-radius:14px;
  border:1px solid rgba(52,211,153,.35);
  background:rgba(52,211,153,.07);
  padding:16px;
  animation:fadeIn .3s ease;
}

.feedback-title{
  font-weight:800;
  font-size:.98rem;
  color:#6ee7b7;
}

.feedback-desc{
  margin-top:6px;
  font-size:.86rem;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}

.feedback-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn-fb-good{
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.4);
  color:#6ee7b7;
  font-weight:700;
}

.btn-fb-good:hover{
  background:rgba(52,211,153,.22);
}

.btn-fb-bad{
  background:rgba(251,113,133,.12);
  border-color:rgba(251,113,133,.4);
  color:#fda4af;
  font-weight:700;
}

.btn-fb-bad:hover{
  background:rgba(251,113,133,.2);
}

.fb-selected{
  outline:2px solid rgba(167,139,250,.6);
  outline-offset:1px;
}

.feedback-teach{
  margin-top:14px;
  border-top:1px dashed rgba(255,255,255,.14);
  padding-top:12px;
}

.feedback-label{
  display:block;
  font-size:.82rem;
  color:rgba(255,255,255,.78);
}

.btn-fb-teach{
  margin-top:8px;
  background:rgba(167,139,250,.14);
  border-color:rgba(167,139,250,.4);
  color:#c4b5fd;
  font-weight:700;
}

.btn-fb-teach:hover{
  background:rgba(167,139,250,.22);
}

/* =========================
MOBILE
========================= */

@media (max-width:640px){

  .modal-card{
    margin:4vh 12px;
  }

  .card{
    padding:14px;
  }

  .btn{
    width:100%;
  }

  .tab{
    width:100%;
    text-align:center;
  }

  .summary{
    font-size:.95rem;
  }

  .issue{
    padding:10px;
  }

  .textarea{
    font-size:16px;
  }

  .feedback-actions .btn{
    width:100%;
  }

}