/* Flapart account and handoff panels — Flaptown Design v5. Uses the tokens from app.css. */
.account-dialog { width: min(640px, 94vw); max-height: 88vh; overflow: auto; padding: 25px; font-size: 13px; line-height: 20px; }
.account-dialog h2 { font-size: 18px; line-height: 26px; margin: 0 0 10px; }
.account-dialog h3 {
  display: flex; align-items: center; gap: 10px; margin: 25px 0 10px;
  font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose);
}
.account-dialog h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--mocha), transparent); box-shadow: 0 1px 0 #000; }
.account-dialog h4 { font-size: 13px; line-height: 20px; margin: 0; }
.account-dialog p { color: var(--rose); }
.account-dialog button, .account-dialog a { margin: 6px 10px 6px 0; }
.account-dialog a {
  display: inline-flex; align-items: center; min-height: var(--key-h); padding: 0 12px; border-radius: 6px; vertical-align: middle;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--oak);
  border: 1.5px solid #3e4158b3; background: #3e415866; box-shadow: 0 3px 0 #000, inset 0 1px 0 #c9bab00f;
}
.account-dialog a:hover { border-color: var(--indigo); color: var(--oak); }
.account-dialog a:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.account-dialog label { display: block; margin: 15px 0; }
.account-dialog input, .account-dialog textarea { display: block; width: 100%; margin-top: 6px; }
.account-dialog textarea { min-height: 90px; resize: vertical; }
/* the notice line is a status readout: lamp and words */
.account-notice { display: flex; gap: 10px; align-items: baseline; color: var(--oak) !important; }
.account-notice:empty { display: none; }
.account-notice::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px; transform: translateY(-1px);
  background: radial-gradient(circle at 35% 35%, #f6c9b8 0%, #e07a62 55%, #a46f67 100%);
  box-shadow: 0 0 0 1.5px #050606, 0 1px 0 2px #c9bab012, 0 0 6px 1px #e07a6299;
}
/* saved works: tiles on a pocket floor */
.saved-art {
  margin: 8px 0; padding: 10px 12px; border-radius: 3px;
  background: var(--plate-hi); box-shadow: 0 1px 0 #000, 0 2px 4px #000000b3, inset 0 1px 0 #c9bab012;
}
.saved-art h4, .saved-art p { margin: 2px 0; }
.saved-art p { font-size: 11px; line-height: 16px; letter-spacing: .04em; color: var(--dusty); }

.native-handoff {
  margin: 10px 10px 0; padding: 15px 20px; max-width: 960px; border-radius: 12px; color: var(--oak);
  background: var(--plate) var(--grain-h);
  box-shadow: inset 0 1px 0 #c9bab014, inset 0 -1px 0 #00000099, 0 2px 0 #000, 0 10px 24px #00000080, inset 3px 0 0 var(--clay);
}
.native-handoff h2 { font-size: 15px; line-height: 25px; font-weight: 400; margin: 0 0 6px; }
.native-handoff p { margin: 6px 0; font-size: 13px; line-height: 20px; color: var(--rose); }
.native-handoff .handoff-hint { color: var(--dusty); }
.handoff-status { color: var(--oak) !important; }
.handoff-status:empty { display: none; }
.handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.handoff-actions button[hidden] { display: none; }
@media (max-width: 480px) {
  .native-handoff { margin: 8px 8px 0; padding: 12px; }
  .handoff-actions { align-items: stretch; }
  .handoff-actions button { flex: 1 1 150px; }
}