:root {
  --bg: #0b1020;
  --card: #121a33;
  --text: #e8ecff;
  --muted: #a7b0d6;
  --btn: #4b63ff;
  --btn2: #2a355f;
  --danger: #ff4d6d;

  /* Animal Colors */
  --dog-color: #ffc107;
  --cat-color: #03a9f4;
  --rabbit-color: #e91e63;
  --ham-color: #fd9843;

  /* Light mode colors */
  --light-bg: #f0f2f5;
  --light-card: #ffffff;
  --light-text: #333333;
  --light-muted: #666666;
  --light-btn: #007bff;
  --light-btn2: #6c757d;
  --light-danger: #dc3545;
}

body.light-mode {
  --bg: var(--light-bg);
  --card: var(--light-card);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --btn: var(--light-btn);
  --btn2: var(--light-btn2);
  --danger: var(--light-danger);
  background: radial-gradient(1200px 600px at 30% 10%, #e0e7fd 0%, transparent 60%),
              radial-gradient(1000px 500px at 70% 30%, #fce4ec 0%, transparent 55%),
              var(--bg);
}

*{ box-sizing:border-box }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background: radial-gradient(1200px 600px at 30% 10%, #1a2a7a 0%, transparent 60%),
              radial-gradient(1000px 500px at 70% 30%, #3a0b5f 0%, transparent 55%),
              var(--bg);
  color:var(--text);
  padding:24px;
  position: relative;
}

.header-buttons { position: absolute; top: 24px; right: 24px; z-index: 1000; display: flex; gap: 12px; }
#animal-test-btn { background: var(--btn); color: var(--text); padding: 8px 12px; border-radius: 8px; font-weight: 500; cursor: pointer; border: 1px solid rgba(255,255,255,.1); }
body.light-mode #animal-test-btn { background: var(--light-btn); color: #fff; border: 1px solid rgba(0,0,0,.1); }

.wrap{
  width:min(920px,100%);
  display:grid;
  gap:16px;
  grid-template-columns: 1.2fr .8fr;
  grid-template-areas:
    "main-card history-card"
    "inquiry-card comments-card";
}

@media(max-width:860px){
  .wrap{ grid-template-columns:1fr; grid-template-areas: "main-card" "history-card" "inquiry-card" "comments-card"; }
}

.card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-radius:16px; padding:20px; border:1px solid rgba(255,255,255,.1); }
body.light-mode .card { background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03)); border:1px solid rgba(0,0,0,.1); }

h1{ margin:0 0 8px } .sub{ font-size:13px; color:var(--muted); line-height:1.5 }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

button{ border:0; cursor:pointer; padding:10px 14px; border-radius:12px; font-weight:700; color:var(--text); background:var(--btn); }
body.light-mode button { color: #fff; }
button.secondary{ background:var(--btn2) } button.danger{ background:var(--danger) } button:disabled{ opacity:.5; cursor: not-allowed; }

.hr{ height:1px; background:rgba(255,255,255,.1); margin:16px 0; }
body.light-mode .hr { background:rgba(0,0,0,.1); }

/* Animal Test Page Specific Styles */
.test-page-body .wrap { grid-template-columns: 1fr; grid-template-areas: "main-card"; max-width: 600px; justify-items: center; }
.test-page-body .card { display: flex; flex-direction: column; align-items: center; text-align: center; width:100%; }

#webcam-wrapper {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.2);
    width: 100%;
    padding: 20px;
}
#webcam-wrapper .error-msg { margin-bottom: 16px; color: var(--danger); }
#webcam-wrapper canvas { border-radius: 8px; }

#image-preview { margin-top: 20px; border-radius: 8px; overflow: hidden; min-height: 340px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.2); width: 100%; }
#image-preview img { max-width: 100%; max-height: 300px; border-radius: 8px; }

.label-container { margin-top: 20px; display: grid; gap: 12px; width: 100%; }
.back-button { align-self: flex-start; text-decoration: none; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.back-button:hover { color: var(--text); }
.test-options { display: flex; gap: 10px; margin: 20px 0; border-radius: 12px; background: var(--btn2); padding: 6px; width: 100%; }
.tab-btn { flex: 1; padding: 10px 14px; background: transparent; color: var(--muted); font-weight: 700; border-radius: 8px; transition: all 0.3s ease; }
.tab-btn.active { background: var(--btn); color: var(--text); }
.test-section { display: none; width: 100%; flex-direction: column; align-items: center; }
.test-section.active { display: flex; }
#drop-zone { border: 2px dashed var(--muted); border-radius: 12px; padding: 40px; width: 100%; cursor: pointer; transition: all 0.3s ease; color: var(--muted); margin-top: 20px; min-height: 340px; display:flex; justify-content:center; align-items:center; flex-direction:column; }
#drop-zone.dragover, #drop-zone:hover { border-color: var(--btn); color: var(--text); background: rgba(75, 99, 255, 0.1); }

/* Result Item Styles */
.result-item { display: grid; grid-template-columns: 1fr 2fr 0.5fr; align-items: center; gap: 16px; width: 100%; transition: all 0.3s ease; padding: 8px; border-radius: 8px; }
.result-label { font-size: 16px; font-weight: 600; text-align: left; }
.result-percentage { font-size: 16px; font-weight: 700; text-align: right; color: var(--muted); transition: color 0.3s ease; }
.progress-bar-container { width: 100%; height: 16px; background-color: var(--btn2); border-radius: 8px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 8px; transition: width 0.4s ease-in-out; }

/* Top Result Highlight */
.result-item.top-result { transform: scale(1.05); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,.1); }
.result-item.top-result .result-label { font-weight: 900; }
.result-item.top-result .result-percentage { font-size: 18px; font-weight: 900; }

/* Result Colors */
.result-item.dog .progress-bar { background: var(--dog-color); }
.result-item.top-result.dog .result-percentage { color: var(--dog-color); }

.result-item.cat .progress-bar { background: var(--cat-color); }
.result-item.top-result.cat .result-percentage { color: var(--cat-color); }

.result-item.rabbit .progress-bar { background: var(--rabbit-color); }
.result-item.top-result.rabbit .result-percentage { color: var(--rabbit-color); }

.result-item.ham .progress-bar { background: var(--ham-color); }
.result-item.top-result.ham .result-percentage { color: var(--ham-color); }

body.light-mode .result-item.top-result { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
body.light-mode .progress-bar-container { background-color: #e9ecef; }