/* =========================================
   AGREEMENT ANALYZER
========================================= */


/* =========================================
   ANALYZER SECTION
========================================= */

.analyzer-section {

  padding:
    var(--space-20) 0;

  background:
    var(--color-bg);
}


/* =========================================
   ANALYZER WRAPPER
========================================= */

.analyzer-wrapper {

  max-width:
    900px;

  margin:
    0 auto;
}


/* =========================================
   ANALYZER HEADER
========================================= */

.analyzer-header {

  text-align:
    center;

  margin-bottom:
    var(--space-12);
}


.analyzer-title {

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  font-weight:
    var(--font-bold);

  margin-bottom:
    var(--space-4);
}


.analyzer-subtitle {

  font-size:
    var(--text-lg);

  color:
    var(--color-text-light);

  max-width:
    700px;

  margin:
    0 auto;
}


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

.upload-card {

  background:
    var(--color-white);

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

  border-radius:
    var(--radius-2xl);

  padding:
    var(--space-10);

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


/* =========================================
   DROP ZONE
========================================= */

.drop-zone {

  border:
    1px dashed var(--color-border-strong);

  border-radius:
    var(--radius-xl);

  padding:
    var(--space-12);

  text-align:
    center;

  background:
    var(--color-primary-soft);

  transition:
    all var(--transition-normal);

  cursor: pointer;
}


.drop-zone:hover {

  border-color:
    var(--color-primary);

  background:
    var(--color-primary-light);
}


.drop-zone.active {

  border-color:
    var(--color-primary);

  background:
    var(--color-primary-light);
}


/* =========================================
   UPLOAD ICON
========================================= */

.upload-icon {

  width: 72px;
  height: 72px;

  margin:
    0 auto
    var(--space-5);

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    50%;

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-size:
    2rem;
}


/* =========================================
   FILE NAME
========================================= */

.file-name {

  margin-top:
    var(--space-4);

  font-weight:
    var(--font-medium);

  color:
    var(--color-primary);
}


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

.analyze-btn {

  margin-top:
    var(--space-8);

  width: 100%;
}


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

.analysis-result {

  margin-top:
    var(--space-10);
}


/* =========================================
   RISK SCORE CARD
========================================= */

.risk-score-card {

  background:
    var(--color-white);

  border-radius:
    var(--radius-xl);

  padding:
    var(--space-10);

  text-align:
    center;

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

  margin-bottom:
    var(--space-8);
}


.risk-score {

  font-size:
    clamp(
      3rem,
      6vw,
      5rem
    );

  font-weight:
    var(--font-bold);

  margin:
    var(--space-4) 0;
}


.risk-low {

  color:
    var(--color-success);
}


.risk-medium {

  color:
    var(--color-warning);
}


.risk-high {

  color:
    var(--color-danger);
}


/* =========================================
   FINDINGS GRID
========================================= */

.findings-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(300px, 1fr)
    );

  gap:
    var(--space-6);
}


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

.finding-card {

  background:
    var(--color-white);

  border-radius:
    var(--radius-lg);

  padding:
    var(--space-6);

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

  border-left:
    4px solid var(--color-primary);
}


.finding-card.critical {

  border-left-color:
    var(--color-danger);
}


.finding-card.moderate {

  border-left-color:
    var(--color-warning);
}


.finding-title {

  font-size:
    var(--text-lg);

  font-weight:
    var(--font-semibold);

  margin-bottom:
    var(--space-3);
}


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

.summary-card {

  margin-top:
    var(--space-8);

  background:
    var(--color-white);

  border-radius:
    var(--radius-xl);

  padding:
    var(--space-8);

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


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  .upload-card,
  .risk-score-card,
  .summary-card {

    padding:
      var(--space-6);
  }

  .drop-zone {

    padding:
      var(--space-8);
  }

  .findings-grid {

    grid-template-columns:
      1fr;
  }

  .analyzer-title {

    font-size:
      2.5rem;
  }
}

/* =========================================
   LEGACY ANALYZER COMPATIBILITY
========================================= */

.analyzer-hero {

  text-align: center;

  padding:
    var(--space-16) 0
    var(--space-10);
}

.analyzer-sub {

  max-width: 760px;

  margin:
    var(--space-5) auto 0;

  font-size:
    var(--text-lg);

  line-height: 1.8;

  color:
    var(--color-text-light);
}

.analyzer-card {

  background:
    var(--color-white);

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

  border-radius:
    var(--radius-2xl);

  padding:
    var(--space-10);

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

.analyzer-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap:
    var(--space-6);

  margin-bottom:
    var(--space-8);
}

.analyzer-header p {

  color:
    var(--color-text-light);

  margin-top:
    var(--space-2);

  line-height: 1.7;
}

.risk-check-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap:
    var(--space-4);

  margin-bottom:
    var(--space-8);
}

.risk-check-item {

  background:
    var(--color-surface-alt);

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

  border-radius:
    var(--radius-lg);

  padding:
    var(--space-5);
}

.risk-check-item strong {

  display: block;

  margin-bottom:
    var(--space-2);
}

.risk-check-item span {

  color:
    var(--color-text-light);

  font-size:
    var(--text-sm);

  line-height: 1.6;
}

.upload-box {

  margin-bottom:
    var(--space-6);
}

.upload-label {

  display: block;

  margin-bottom:
    var(--space-3);

  font-weight:
    var(--font-semibold);
}

.upload-note {

  margin-top:
    var(--space-2);

  color:
    var(--color-text-light);

  font-size:
    var(--text-sm);
}

.divider-text {

  text-align: center;

  margin:
    var(--space-6) 0;

  color:
    var(--color-text-muted);

  font-weight:
    var(--font-semibold);
}

#agreementText {

  width: 100%;

  min-height: 120px;

  resize: vertical;
}

.analyzer-btn {

  margin-top:
    var(--space-6);

  width: 100%;
}

.analysis-loading {

  margin-top:
    var(--space-8);

  padding:
    var(--space-8);

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

  border-radius:
    var(--radius-xl);

  background:
    var(--color-surface-alt);
}

.analysis-steps {

  margin-top:
    var(--space-5);

  display: flex;

  flex-direction: column;

  gap:
    var(--space-3);

  text-align: center;

  color:
    var(--color-text-light);
}

.ai-disclaimer,
.upload-consent {

  margin-top:
    var(--space-6);

  padding:
    var(--space-5);

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

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-alt);

  line-height: 1.8;

  color:
    var(--color-text-light);
}

.upload-consent ul {

  margin-top:
    var(--space-3);

  padding-left:
    20px;
}

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

@media (max-width: 768px) {

  .analyzer-header {

    flex-direction: column;
  }

  .risk-check-grid {

    grid-template-columns: 1fr;
  }

  .analyzer-card {

    padding:
      var(--space-6);
  }
}

.modern-analysis-card {
  margin-top: 32px;
  border-radius: var(--radius-2xl);
  padding: 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.analysis-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 30px;
}

.risk-score-label {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.risk-score-value {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 18px;
}

.risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}

.risk-pill.high {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.risk-pill.medium {
  background: var(--color-warning-soft);
  color: #92400e;
}

.risk-pill.low {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.analysis-summary-box {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 24px;
  line-height: 1.8;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.analysis-section-box,
.recommendation-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.analysis-section-box h3,
.recommendation-box h3 {
  margin-bottom: 18px;
}

.analysis-section-box ul,
.recommendation-box ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 18px;
}

.analysis-section-box li,
.recommendation-box li {
  line-height: 1.7;
}

.critical-box {
  border-color: #fecaca;
  background: var(--color-danger-soft);
}

.moderate-box {
  border-color: #fde68a;
  background: var(--color-warning-soft);
}

.premium-lock-box {
  margin-top: 28px;
  padding: 28px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-dark));
  color: white;
  text-align: center;
}

.premium-lock-box h3 {
  margin-bottom: 12px;
}

.premium-lock-box p {
  max-width: 720px;
  margin: auto;
  line-height: 1.8;
  opacity: 0.92;
}

.premium-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.analysis-loading-card,
.analysis-error-card {
  margin-top: 32px;
  padding: 40px;
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {

  .analysis-top,
  .analysis-grid {
    grid-template-columns: 1fr;
  }

  .risk-score-value {
    font-size: 48px;
  }

  .modern-analysis-card {
    padding: 24px;
  }

  .analyzer-action-row {

    flex-direction: column;
  }

  .analyzer-reset-btn {

    width: 100%;
  }
}

.analyzer-action-row {

  display: flex;

  gap: 16px;

  margin-top: 28px;
}

.analyzer-reset-btn {

  min-width: 180px;
}

.analyzer-action-row .analyzer-btn {

  margin-top: 0;

  flex: 1;
}