.account-menu { position: relative; }
.account-menu[hidden] { display: none; }
.account-menu > summary { min-width: 88px; max-width: 160px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #d9d0c2; border-radius: 18px; color: #334039; cursor: pointer; list-style: none; font-size: 12px; font-weight: 850; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #9ca49f; }
.account-menu[data-sync="synced"] > summary::before { background: #419260; }
.account-menu[data-sync="connecting"] > summary::before,.account-menu[data-sync="syncing"] > summary::before { background: #d9a631; }
.account-menu[data-sync="offline"] > summary::before { background: #cf5c4d; }
.account-menu > summary::after { content: "⌄"; color: #7b847f; }
.account-menu > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu > div { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 156px; padding: 6px; border: 1px solid #d9d0c2; border-radius: 12px; background: #fbf8f1; box-shadow: 0 12px 30px rgba(39,50,44,.16); }
.account-sync { min-height: 28px; padding: 5px 10px 7px; display: block; color: #6e7972; border-bottom: 1px solid #e4ddd2; font-size: 8px; font-weight: 750; line-height: 1.35; }
.account-menu[data-sync="offline"] .account-sync { color: #b24f44; }
.account-menu button { width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; color: #344139; background: transparent; text-align: left; cursor: pointer; font: 800 11px system-ui,sans-serif; }
.account-menu button:hover { background: #eee9df; }
.account-menu button:last-child { color: #b9574b; }

.auth-dialog,.history-dialog { padding: 0; border: 0; color: #29362f; background: transparent; }
.auth-dialog::backdrop,.history-dialog::backdrop { background: rgba(20,27,23,.58); backdrop-filter: blur(3px); }
.auth-dialog form { width: min(390px,calc(100vw - 32px)); padding: 28px; border-radius: 22px; background: #f8f3ea; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 27px; font-size: 20px; font-weight: 950; }
.auth-brand .brand-mark { width: 42px; height: 42px; }
.auth-dialog h2 { margin: 0 0 8px; font: 700 31px Georgia,serif; }
.auth-dialog p { margin: 0 0 22px; color: #637069; font-size: 13px; line-height: 1.5; }
.auth-dialog label { display: block; margin-bottom: 7px; color: #526058; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.auth-dialog input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cfc6b7; border-radius: 11px; outline: 0; color: #243129; background: white; font: 750 15px system-ui,sans-serif; }
.auth-dialog input:focus { border-color: #287653; box-shadow: 0 0 0 3px rgba(40,118,83,.14); }
.login-error { min-height: 23px; margin: 6px 0 2px!important; color: #ba5146!important; font-size: 11px!important; }
.auth-dialog button[type="submit"] { width: 100%; height: 48px; border: 0; border-radius: 11px; color: white; background: #287653; cursor: pointer; font-weight: 900; }

.history-dialog form { width: min(620px,calc(100vw - 24px)); max-height: min(760px,calc(100vh - 36px)); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border-radius: 20px; background: #f8f3ea; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.history-dialog header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #ded6ca; }
.history-dialog h2 { margin: 0; font: 700 25px Georgia,serif; }
.history-dialog header button { width: 36px; height: 36px; border: 1px solid #d5ccbd; border-radius: 50%; color: #58635d; background: transparent; cursor: pointer; font-size: 20px; }
.history-content { min-height: 180px; padding: 16px; overflow-y: auto; }
.history-empty { margin: 40px auto; max-width: 340px; color: #6c7771; text-align: center; line-height: 1.55; }
.history-task { padding: 16px; border: 1px solid #dcd4c8; border-radius: 14px; background: #fffdf8; }
.history-task + .history-task { margin-top: 12px; }
.history-task.solved { border-color: #a9c9b7; }
.history-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.history-task-heading div { display: grid; gap: 3px; }
.history-task-heading small { color: #287653; font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.history-task-heading strong { font: 700 20px Georgia,serif; }
.history-state { flex: none; padding: 6px 9px; border-radius: 20px; color: #6d756f; background: #eee9df; font-size: 10px; font-weight: 900; }
.history-task.solved .history-state { color: #236b4b; background: #e1f0e7; }
.history-meta { margin: 10px 0; color: #78817c; font-size: 10px; }
.history-program { max-height: 160px; margin: 0; padding: 10px 10px 10px 36px; overflow-y: auto; border-radius: 9px; color: #dfe9e3; background: #15241c; font: 700 10px ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 1.8; }
.history-program li::marker { color: #718078; }
.history-program li.empty { color: #7d8982; list-style: none; }

@media (max-width:700px) {
  .account-menu > summary { min-width: 0; max-width: 112px; height: 32px; padding: 0 10px; font-size: 10px; }
  .auth-dialog form { padding: 23px 20px; border-radius: 18px; }
  .history-dialog { margin: auto 8px 8px; }
  .history-dialog form { width: calc(100vw - 16px); max-height: calc(100dvh - 30px); border-radius: 18px; }
  .history-dialog header { min-height: 62px; padding: 0 16px; }
  .history-content { padding: 10px; }
}