/* The Estates app (ui/estates-ui.js) inside the phone: the Mansion estates' auctions and your own estate - ivory and gold. */
.es { --gold: #b08d57; --deep: #1c1a17; font-family: var(--ui); }
.es button { font-family: var(--ui); cursor: pointer; }
.es-hero { background: linear-gradient(135deg, #1c1a17, #2d2620 55%, #4a3a26); color: #fff; border-radius: 18px; padding: 16px 15px; margin-bottom: 12px; box-shadow: 0 8px 22px rgba(28,26,23,.3); }
.es-hero b { display: block; font: 800 20px var(--ui); letter-spacing: -.3px; color: #f3dfb4; } .es-hero span { display: block; font: 600 12px/1.4 var(--ui); opacity: .82; margin-top: 3px; }
.es-hero.sm b { font-size: 17px; } .es-hero.own { background: linear-gradient(135deg, #3a2d14, #6b5124 60%, #b08d57); }
.es-card, .es-mine { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; margin-bottom: 8px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.es-pic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 25px; background: linear-gradient(135deg, #f7efe0, #e9d9b8); }
.es-nm { flex: 1; min-width: 0; } .es-nm strong { display: block; font: 800 14px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-nm em { display: block; font: 600 11px var(--ui); color: var(--muted); font-style: normal; margin: 1px 0 3px; } .es-nm > span { display: block; font: 600 12px var(--ui); color: var(--ink); }
.es-nm > span b { color: #8a6a35; } .es-go { font-style: normal; color: var(--muted); font-size: 20px; }
.es-tag { font-style: normal; font: 800 9.5px var(--ui); letter-spacing: .04em; background: #f3ead8; color: #8a6a35; border-radius: 6px; padding: 2px 5px; margin-left: 6px; }
.es-tag.own { background: #b08d57; color: #fff; } .es-tag.lead { background: #16a34a; color: #fff; }
.es-mine { background: linear-gradient(135deg, #fff8ea, #f3e5c6); } .es-mine > span { font-size: 24px; } .es-mine > div { flex: 1; } .es-mine strong { display: block; font: 800 14px var(--ui); } .es-mine em { font: 600 11.5px var(--ui); color: #8a6a35; font-style: normal; } .es-mine > em:last-child { font-size: 20px; }
.es-box { background: #fff; border-radius: 16px; padding: 4px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.es-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1ede6; font: 600 12.5px var(--ui); color: var(--muted); } .es-row:last-child { border: 0; }
.es-row b { color: var(--ink); font: 800 13.5px var(--ui); text-align: right; } .es-row b small { font: 700 10.5px var(--ui); color: var(--muted); }
.es-sheet { background: #fff; border-radius: 18px; padding: 14px; margin: 6px 0 12px; box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.es-st { display: block; font: 800 15px var(--ui); margin-bottom: 8px; }
.es-in { display: flex; align-items: center; gap: 8px; background: #f4f1ec; border-radius: 14px; padding: 4px 6px 4px 14px; }
.es-in input { flex: 1; min-width: 0; border: 0; background: none; font: 800 22px var(--ui); color: var(--ink); padding: 8px 0; outline: none; } .es-in span { font: 800 13px var(--ui); color: var(--muted); padding-right: 8px; }
.es-in.sm { margin: 6px 0 8px; } .es-in.sm input { font: 700 14px var(--ui); } .es-in.sm button { border: 0; border-radius: 999px; background: var(--deep); color: #f3dfb4; font: 800 12.5px var(--ui); padding: 9px 13px; white-space: nowrap; }
.es-in.sm button:disabled { opacity: .5; }
.es-chips { display: flex; gap: 6px; margin: 8px 0; } .es-chips button { flex: 1; border: 0; border-radius: 999px; background: #f3ead8; padding: 8px 0; font: 800 12px var(--ui); color: #6b5124; }
.es-est { display: flex; justify-content: space-between; gap: 8px; font: 600 12px var(--ui); color: var(--muted); margin: 4px 2px; } .es-est b { color: var(--ink); }
.es-btn { width: 100%; margin-top: 10px; border: 0; border-radius: 999px; padding: 13px; font: 800 15px var(--ui); color: #1c1a17; background: linear-gradient(135deg, #f3dfb4, #b08d57); box-shadow: 0 4px 14px rgba(176,141,87,.35); }
.es-btn:disabled { opacity: .45; }
.es-ok { font: 700 12.5px/1.45 var(--ui); color: #15803d; background: #ecfdf3; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.es-perks { list-style: none; margin: 4px 0 12px; padding: 0; } .es-perks li { font: 600 12.5px/1.4 var(--ui); color: var(--ink); background: #fff; border-radius: 12px; padding: 9px 11px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.es-note { font: 600 11.5px/1.45 var(--ui); color: var(--muted); margin: 10px 2px; }
.es-h { color: var(--muted); font: 800 11px var(--ui); text-transform: uppercase; letter-spacing: .05em; margin: 16px 2px 8px; }
.es-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.es-slot { background: #fff; border-radius: 14px; padding: 9px 6px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); min-width: 0; }
.es-slot b { display: block; font-size: 22px; } .es-slot span { display: block; font: 700 11px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 6px; }
.es-slot button { border: 0; border-radius: 999px; background: var(--deep); color: #f3dfb4; font: 800 11px var(--ui); padding: 6px 9px; } .es-slot button:disabled { opacity: .5; }
.es-slot.empty { background: #f7f5f1; box-shadow: none; color: var(--muted); } .es-slot.empty b { font-size: 18px; opacity: .5; }
.es-park { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .es-park button { border: 0; border-radius: 999px; background: #f3ead8; color: #6b5124; font: 800 12px var(--ui); padding: 8px 11px; } .es-park button:disabled { opacity: .5; }
.es-gal { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 12px; margin-bottom: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.es-gal span { font: 700 12.5px var(--ui); } .es-gal select { flex: 1; max-width: 62%; border: 0; background: #f4f1ec; border-radius: 10px; padding: 8px; font: 700 12.5px var(--ui); color: var(--ink); }
.es-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-radius: 14px; background: #fff; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); color: var(--ink); text-align: left; }
.es-toggle span { font: 700 13px var(--ui); } .es-toggle i { flex: none; width: 42px; height: 24px; border-radius: 12px; background: #d1d5db; position: relative; }
.es-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.es-toggle.on i { background: #b08d57; } .es-toggle.on i::after { left: 21px; }
.es-guest { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 5px; font: 700 13px var(--ui); }
.es-guest button { border: 0; background: #fee2e2; color: #b91c1c; border-radius: 999px; font: 800 11.5px var(--ui); padding: 6px 10px; }