/* aiapps-web — Emerald & Cream, mobile-first */
:root{
  --cream:#f7f4ec; --cream2:#efeadd; --panel:#fff; --ink:#243029; --soft:#5b6b60;
  --emerald:#128a5e; --emerald-d:#0f6e4b; --emerald-dd:#0f3d2e; --tint:#e6f3ec;
  --gold:#c9a24b; --danger:#c0492f; --line:#e3ddcd; --r:14px;
  --shadow:0 8px 24px rgba(15,61,46,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--emerald-dd),#0c3326);color:#eaf3ee;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:26px}
.brand-title{font-family:Georgia,serif;font-weight:700;font-size:17px}
.brand-sub{font-size:12px;color:#b9d2c6}
.brand-sub strong{color:var(--gold)}
.brand-note{font-size:12px;color:#9fc0b1}

.wrap{max-width:860px;margin:0 auto;padding:22px 16px 60px}
.hero h1{font-family:Georgia,serif;font-size:26px;margin:8px 0}
.hero .accent{color:var(--emerald)}
.hero p{color:var(--soft);line-height:1.6;max-width:680px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px;margin:16px 0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.card-head h2{font-family:Georgia,serif;font-size:17px;margin:0}
.muted{color:var(--soft);font-size:13px;line-height:1.55}
.small{font-size:12px}
.pill{font-size:12px;padding:4px 10px;border-radius:20px;background:var(--cream2);color:var(--soft);white-space:nowrap}
.pill.ok{background:var(--tint);color:var(--emerald-d)} .pill.bad{background:#fae6e0;color:var(--danger)} .pill.warn{background:#fbf1d8;color:#9a7b27}

.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:13px}
.field>span{font-weight:600}
.field small{color:var(--soft);font-weight:400}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
input,textarea{font:inherit;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:#fcfbf6;color:var(--ink);width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--tint)}
textarea{resize:vertical}

.btn{font:inherit;font-weight:600;font-size:14px;padding:10px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--cream2);color:var(--ink)}
.btn:hover{background:#e7e1d1}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--emerald);color:#fff;border-color:var(--emerald-d);box-shadow:0 4px 12px rgba(18,138,94,.28)}
.btn.primary:hover{background:var(--emerald-d)}
.file-btn{display:inline-flex;align-items:center}
.btn.wa{background:#25d366;color:#073d24;border-color:#1eb558;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.wa:hover{background:#1eb558;color:#fff}

.table-wrap{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--cream2);color:var(--soft)}
tr:last-child td{border-bottom:none}

.results{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.rcard{border:1px solid var(--line);border-left:4px solid var(--emerald);border-radius:10px;padding:12px 14px;background:#fcfbf6}
.rcard.err{border-left-color:var(--danger)}
.rcard .who{font-size:12px;color:var(--emerald-d);font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rcard textarea{min-height:84px;font-size:14px;line-height:1.5;direction:auto}
.rcard .actions{display:flex;gap:10px;margin-top:10px;align-items:center;flex-wrap:wrap}
.rcard .status{font-size:12px;color:var(--soft)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--cream2);border-top-color:var(--emerald);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{color:var(--soft);font-size:12px;text-align:center;margin-top:24px}