* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --bg: var(--tg-theme-bg-color, #0f0f1a);
  --card: var(--tg-theme-secondary-bg-color, #1a1a2e);
  --text: var(--tg-theme-text-color, #e8e8f0);
  --hint: var(--tg-theme-hint-color, #8888aa);
  --accent: var(--tg-theme-button-color, #6c5ce7);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  --gradient: linear-gradient(135deg, #6c5ce7, #a855f7, #ec4899);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0) 16px calc(env(safe-area-inset-bottom, 0) + 24px);
  display: flex; justify-content: center;
}

#app { width: 100%; max-width: 480px; }

/* Header */
#header { text-align: center; padding: 20px 0 8px; }
.logo {
  font-size: 32px; font-weight: 900; letter-spacing: 4px;
  background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-sub { font-size: 12px; color: var(--hint); margin-top: 2px; letter-spacing: 1px; }

/* Section title */
.section-title { font-size: 14px; color: var(--hint); margin: 16px 0 12px; text-transform: uppercase; letter-spacing: 2px; }

/* Service cards */
.service-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 16px; margin-bottom: 10px;
  border: none; border-radius: 16px; background: var(--card); color: var(--text);
  width: 100%; cursor: pointer; text-align: left; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); position: relative; overflow: hidden;
}
.service-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  background: var(--gradient); border-radius: 0 16px 16px 0;
}
.service-card:active { transform: scale(0.97); }
.service-card .sc-icon { font-size: 32px; flex-shrink: 0; }
.service-card .sc-info { flex: 1; }
.service-card .sc-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.service-card .sc-desc { font-size: 12px; color: var(--hint); line-height: 1.4; }
.service-card .sc-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: var(--gradient); color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
  position: absolute; top: 10px; right: 12px;
}

.powered-by { text-align: center; font-size: 11px; color: var(--hint); margin-top: 24px; opacity: 0.5; }

/* Screens */
.screen { animation: fadeIn 0.3s ease; }
.hidden { display: none !important; }

.back-link {
  display: inline-block; background: none; border: none; color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 0 12px;
}

.screen-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }

/* Form inputs */
.form-input {
  width: 100%; padding: 12px 16px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; background: var(--card); color: var(--text); font-size: 14px;
  outline: none; font-family: inherit; resize: vertical;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--hint); }

select.form-input { -webkit-appearance: none; }

/* Buttons */
.btn-primary-full {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: var(--gradient); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 4px; transition: opacity 0.2s;
}
.btn-primary-full:active { opacity: 0.8; }
.btn-primary-full:disabled { opacity: 0.5; }

.btn-primary, .btn-secondary {
  flex: 1; padding: 12px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-secondary { background: var(--card); color: var(--text); }

.modal-buttons { display: flex; gap: 8px; margin-top: 12px; }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.modal-content {
  background: var(--bg); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 24px; width: 100%; max-width: 360px;
}
.modal-content h3 { font-size: 18px; margin-bottom: 16px; text-align: center; }

/* === DIAGNOSTIC === */
.diag-progress { display: flex; gap: 4px; margin-bottom: 20px; }
.diag-dot {
  flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);
  transition: background 0.3s;
}
.diag-dot.done { background: var(--accent); }
.diag-dot.active { background: var(--gradient); }

.diag-dimension { text-align: center; margin-bottom: 20px; }
.diag-dimension .dim-icon { font-size: 48px; margin-bottom: 8px; }
.diag-dimension .dim-name { font-size: 18px; font-weight: 700; }
.diag-dimension .dim-num { font-size: 12px; color: var(--hint); margin-top: 4px; }

.diag-question {
  font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 16px; text-align: center;
  min-height: 48px;
}

.diag-scale { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.scale-btn {
  width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.15); border-radius: 12px;
  background: var(--card); color: var(--text); font-size: 18px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.scale-btn:active, .scale-btn.selected { border-color: var(--accent); background: var(--accent); color: #fff; transform: scale(1.1); }

.scale-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--hint); margin-top: -20px; margin-bottom: 16px; padding: 0 4px; }

.diag-nav { display: flex; gap: 8px; }
.diag-nav button { flex: 1; }

/* Results */
.result-card {
  background: var(--card); border-radius: 16px; padding: 20px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.result-total {
  text-align: center; padding: 24px 0;
}
.result-total .rt-score {
  font-size: 64px; font-weight: 900;
  background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.result-total .rt-label { font-size: 20px; font-weight: 700; margin-top: 4px; }
.result-total .rt-level { font-size: 14px; color: var(--hint); margin-top: 8px; }

/* Radar chart (CSS) */
.radar-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.radar-bar {
  flex: 1; min-width: 120px; background: var(--card); border-radius: 10px; padding: 10px 12px;
}
.radar-bar .rb-name { font-size: 11px; color: var(--hint); margin-bottom: 6px; }
.radar-bar .rb-track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.radar-bar .rb-fill { height: 100%; border-radius: 3px; background: var(--gradient); transition: width 1s ease; }
.radar-bar .rb-score { font-size: 13px; font-weight: 700; margin-top: 4px; }

/* Plan items */
.plan-item {
  display: flex; gap: 12px; padding: 12px; margin-bottom: 8px;
  background: var(--card); border-radius: 12px; border-left: 3px solid var(--accent);
}
.plan-item .pi-icon { font-size: 24px; }
.plan-item .pi-info { flex: 1; }
.plan-item .pi-dim { font-size: 12px; color: var(--hint); }
.plan-item .pi-action { font-size: 13px; font-weight: 600; margin-top: 2px; line-height: 1.4; }
.plan-item .pi-score { font-size: 12px; color: #e53935; font-weight: 700; }

/* === AI CHAT === */
.ai-subtitle { font-size: 13px; color: var(--hint); margin-bottom: 16px; text-align: center; }

#ai-messages {
  min-height: 200px; max-height: 400px; overflow-y: auto; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.ai-msg {
  padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5;
  max-width: 85%; animation: msgIn 0.3s ease; white-space: pre-wrap;
}
.ai-msg.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg.bot { background: var(--card); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.typing { opacity: 0.6; }

@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ai-input-wrap { display: flex; gap: 8px; }
.ai-input-wrap input { flex: 1; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: var(--card); color: var(--text); font-size: 14px; outline: none; }
.ai-input-wrap button { padding: 12px 16px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 18px; cursor: pointer; }

/* === TZ & NEGOTIATION RESULTS === */
.tz-section { margin-bottom: 16px; }
.tz-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--accent); }
.tz-section .tz-body {
  font-size: 13px; line-height: 1.6; padding: 14px; background: var(--card);
  border-radius: 12px; white-space: pre-wrap;
}

.nego-phase {
  background: var(--card); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  border-left: 3px solid var(--accent);
}
.nego-phase .np-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.nego-phase .np-duration { font-size: 11px; color: var(--hint); margin-bottom: 8px; }
.nego-phase .np-action { font-size: 13px; line-height: 1.5; padding-left: 12px; }
.nego-phase .np-action::before { content: '→ '; color: var(--accent); }

.nego-risk {
  display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--card); border-radius: 10px; font-size: 13px;
}
.nego-risk .nr-risk { flex: 1; font-weight: 600; }
.nego-risk .nr-mitigation { flex: 1; color: var(--hint); }

.nego-arg {
  padding: 12px; margin-bottom: 8px; background: var(--card); border-radius: 12px;
}
.nego-arg .na-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.nego-arg .na-detail { font-size: 12px; color: var(--hint); line-height: 1.4; }

/* === KANBAN === */
.kanban-hint { font-size: 12px; color: var(--hint); margin-bottom: 12px; text-align: center; font-style: italic; }

.kanban-col {
  margin-bottom: 16px;
}
.kanban-col-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 4px;
}
.kanban-col-header .kc-icon { font-size: 18px; }
.kanban-col-header .kc-name { font-size: 14px; font-weight: 700; }
.kanban-col-header .kc-count {
  font-size: 11px; background: rgba(255,255,255,0.1); padding: 1px 6px;
  border-radius: 8px; color: var(--hint);
}

.kanban-card {
  background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); position: relative;
}
.kanban-card .kk-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.kanban-card .kk-desc { font-size: 12px; color: var(--hint); margin-bottom: 6px; }
.kanban-card .kk-meta { display: flex; gap: 8px; font-size: 11px; color: var(--hint); }
.kanban-card .kk-priority {
  position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 12px 0 0 12px;
}
.kk-priority.high { background: #e53935; }
.kk-priority.medium { background: #ff9800; }
.kk-priority.low { background: #4caf50; }

.kanban-card .kk-actions { display: flex; gap: 4px; margin-top: 8px; }
.kk-move-btn {
  flex: 1; padding: 6px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  background: transparent; color: var(--hint); font-size: 10px; cursor: pointer;
  text-align: center;
}
.kk-move-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn-add-card {
  width: 100%; padding: 12px; border: 2px dashed rgba(255,255,255,0.15); border-radius: 12px;
  background: transparent; color: var(--hint); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 8px;
}

/* Toast */
.toast {
  position: fixed; bottom: calc(env(safe-area-inset-bottom,0)+24px); left: 50%; transform: translateX(-50%);
  background: rgba(108,92,231,0.95); color: #fff; padding: 10px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600; z-index: 999;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.2s;
}

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }