:root {
  color-scheme: light;
  --field: #fff;
  --glow: #dff6f3;
  --topbar: rgba(255, 255, 255, .92);
  --coral: #ff785e;
  --yellow: #f5c84b;
  --purple: #8d7cf6;
}

body {
  background: radial-gradient(circle at 7% 5%, var(--glow) 0, transparent 24rem), var(--bg);
  transition: background-color .25s, color .25s;
}

.topbar { background: var(--topbar); }
.skip-link, input, select, textarea { background:var(--paper); color: var(--ink); }
.top-actions, .project-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .project-actions button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 11px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.icon-button { display: flex; align-items: center; gap: 7px; }
.icon-slot, .icon-svg { display: inline-flex; width: 17px; height: 17px; flex-shrink: 0; }
.icon-svg { vertical-align: -3px; }
.project-actions button, .resource-tools button, .result-actions button, .primary {
  display: inline-flex; align-items: center; gap: 7px;
}
.copy-icon { display: inline-flex; align-items: center; }
.project-actions { margin-top: 18px; flex-wrap: wrap; }
.integration-row { margin-top: 18px; }
.field-status{display:block;margin-top:7px;color:var(--muted);font-weight:600}.field-status.available{color:var(--teal-dark)}.field-status.unavailable{color:var(--danger)}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 54px;
  align-items: center;
  margin-bottom: 54px;
}
.hero .intro { margin: 0; }
.hero-canvas {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 30px;
  padding: 20px;
  color: #f4fbfa;
  background:
    radial-gradient(circle at 90% 12%, rgba(141,124,246,.35), transparent 32%),
    radial-gradient(circle at 8% 85%, rgba(56,200,186,.26), transparent 32%),
    #102525;
  box-shadow: 0 34px 70px rgba(17, 64, 59, .22);
  transform: rotate(1deg);
}
.hero-canvas::before { content:""; position:absolute; inset:0; opacity:.11; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:24px 24px; }
.canvas-top,.canvas-footer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.04em}.live-dot{color:#84e8d7}.live-dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#50dabf;margin-right:7px;box-shadow:0 0 0 5px rgba(80,218,191,.13)}
.canvas-grid{position:relative;display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0}.mini-card{border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:14px;backdrop-filter:blur(10px)}.mini-label{font-size:11px;color:#b9cfcc;text-transform:uppercase;letter-spacing:.09em;font-weight:800}.mindmap-card{min-height:298px;display:flex;flex-direction:column}.mindmap-icon{flex:1;width:100%;height:245px;object-fit:contain;margin-top:8px}
.canvas-footer{justify-content:flex-start;flex-wrap:wrap}.chip{border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.08)}.chip.coral{color:#ffab9a}.chip.purple{color:#c4baff}.chip.yellow{color:#f8d97a}
.card{position:relative;overflow:hidden}.card::after{content:"";position:absolute;right:-70px;top:-80px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--aqua),transparent 68%);opacity:.5;pointer-events:none}.visual-card{border-top:4px solid var(--teal)}
.resource-head{align-items:center}.resource-head>div:nth-child(2){flex:1}.resource-tools{display:flex;gap:8px;margin-left:auto;position:relative;z-index:1}.resource-tools button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.field-help{margin:-4px 0 14px;color:var(--muted);font-size:13px}.style-grid .option label{position:relative;overflow:hidden;padding-top:14px}
.resource label{min-height:174px}.resource-demo{position:relative;height:78px;border-radius:11px;background:color-mix(in srgb,var(--aqua) 74%,var(--paper));display:flex;align-items:center;justify-content:center;color:var(--teal-dark);border:1px solid color-mix(in srgb,var(--teal) 20%,transparent);overflow:hidden}
.resource-icon{display:block;width:56px;height:56px;object-fit:contain;color:var(--teal-dark)}

.ai-config-modal{width:min(480px,calc(100vw - 28px));height:auto;max-height:calc(100vh - 28px)}
.ai-config-form{display:grid;gap:14px;padding-top:4px}
.ai-config-form label{font-size:14px;font-weight:750;color:var(--ink);display:block}
.ai-config-form input{display:block;width:100%;margin-top:6px;border:1px solid var(--field);border-radius:12px;background:var(--paper);color:var(--ink);padding:11px 13px;font:inherit}
.ai-config-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.ai-config-actions button{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}
#ai-config-clear{background:var(--paper);color:var(--danger)}
.result-modal{width:min(1040px,calc(100vw - 28px));height:min(780px,calc(100vh - 28px));padding:0;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 35px 100px rgba(0,0,0,.42)}.result-modal::backdrop{background:rgba(3,14,14,.72);backdrop-filter:blur(6px)}.modal-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding:24px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}.modal-head h2{margin:2px 0 0;font-size:26px}.modal-close{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:25px;cursor:pointer}.result-actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0}.result-actions button{border:1px solid var(--line);background:var(--aqua);color:var(--teal-dark);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.result-actions button.active{background:var(--ink);color:var(--paper)}.result-actions button.copied{background:#1f9c79;color:#fff;border-color:#1f9c79}.result-actions .pdf-action{margin-left:auto;background:var(--teal);color:#062622;border-color:var(--teal)}.modal-content{min-height:0}.modal-content pre,.modal-content iframe{width:100%;height:100%;min-height:420px;border:0;border-radius:16px}.modal-content iframe{background:#fff}.status{margin:12px 0 0}.toast{position:fixed;z-index:20;right:24px;bottom:24px;background:#173d39;color:#eafffb;border:1px solid #3b786f;border-radius:13px;padding:13px 17px;font-weight:800;box-shadow:0 16px 45px rgba(0,0,0,.3);transform:translateY(12px);opacity:0;transition:.2s}.toast.show{transform:translateY(0);opacity:1}
.generated-files{height:100%;overflow:auto;display:grid;align-content:start;gap:14px;padding:4px}.generated-files[hidden]{display:none}.generated-file{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}.file-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--aqua);color:var(--teal-dark);font-weight:900;font-size:12px}.generated-file h3{margin:0 0 3px;font-size:16px}.generated-file p{margin:0;color:var(--muted);font-size:13px}.generated-file button{border:0;border-radius:10px;padding:11px 14px;background:var(--teal);color:#052622;font:inherit;font-weight:850;cursor:pointer}.ai-loading{display:grid;place-items:center;gap:14px;min-height:350px;text-align:center;color:var(--muted)}.ai-spinner{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.workflow-progress{position:relative;max-width:480px;margin-top:28px;padding:0 6px}.workflow-progress ol{list-style:none;display:flex;justify-content:space-between;margin:0;padding:0;position:relative;z-index:2}.workflow-progress li{display:grid;justify-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.workflow-progress li span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);border:2px solid var(--line);color:var(--muted);transition:.25s}.workflow-progress li.active span,.workflow-progress li.complete span{background:var(--teal);border-color:var(--teal);color:#062522;box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 15%,transparent)}.workflow-progress li.active strong,.workflow-progress li.complete strong{color:var(--teal-dark)}.progress-track{position:absolute;top:16px;left:23px;right:23px;height:3px;background:var(--line);overflow:hidden}.progress-track i{display:block;width:var(--progress);height:100%;background:linear-gradient(90deg,var(--teal),#45d4bd);transition:width .35s ease}

/* Polimento visual: micro-interações, anel de progresso, canvas reativo, transições de modal/toast */
.option label, .resource label { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.option label:hover, .resource label:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 50, 46, .12); }
.primary { transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(54, 209, 167, .35); }
.primary:disabled { opacity: .75; cursor: wait; }
.button-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(9, 43, 38, .35); border-top-color: #092b26; border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }

.completion-ring { display: inline-block; width: 30px; height: 30px; margin-right: 6px; vertical-align: -8px; border-radius: 50%; background: conic-gradient(#36d1a7 calc(var(--pct, 0) * 3.6deg), rgba(255, 255, 255, .18) 0); mask: radial-gradient(circle, #0000 56%, #000 58%); transition: background .25s ease; }

.mini-card { transition: box-shadow .25s ease, opacity .25s ease, transform .25s ease; opacity: .55; }
.mini-card.active { opacity: 1; box-shadow: 0 0 0 2px rgba(80, 218, 191, .55), inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(-1px); }
.canvas-footer .chip { transition: opacity .2s ease, transform .2s ease; opacity: .45; }
.canvas-footer .chip.active { opacity: 1; transform: translateY(-1px); }

.result-modal { animation: modal-in .22s ease; }
.result-modal::backdrop { animation: backdrop-in .22s ease; }
@keyframes modal-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.toast { transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }

@media (max-width: 600px) {
  .theme-label { display: none; }
  .project-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .project-actions button:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-canvas { min-height: 390px; transform: none; }
}

@media (max-width: 600px) {
  .hero { gap: 30px; }
  .hero-canvas { min-height: 420px; padding: 14px; border-radius: 22px; }
  .mindmap-card { min-height: 220px; }
  .mindmap-icon { height: 175px; }
  .result-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .modal-shell { padding: 16px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .result-actions .pdf-action { margin-left: 0; }
  .modal-content pre, .modal-content iframe { min-height: 0; }
  .toast { left: 14px; right: 14px; bottom: 14px; text-align: center; }
  .resource-head{align-items:flex-start;flex-wrap:wrap}.resource-tools{width:100%;margin-left:58px}.resource-tools button{flex:1}
  .workflow-progress{max-width:none}.workflow-progress li strong{font-size:11px}
}