/* =====================================================================================
   LND Aura portal, third layer: a calmer, more finished look for the account and bot pages.
   Solid-feeling cards, clearer contrast in the light theme, better use of space, a tidier side list.
   ===================================================================================== */
:root { --ok: #6fe3a8; --warn: #ffcf6e; --bad: #ff8a8a; --card: color-mix(in srgb, var(--panel-solid) 62%, transparent); }
:root[data-theme="paper"] { --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent); }
.tag.ok, .msg.good { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line2)); } .tag.warn { color: var(--warn); } .tag.bad, .err, .msg.bad { color: var(--bad); }
.led .d.pos { color: var(--ok); } .btn.danger, .src-a .danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line2)); } .btn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.sd-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } .train.ready .dot { background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 20%, transparent); }

/* cards: a clean surface instead of murky glass */
.card, .bcard, .plan, .tile, .auth-card, .sh-card { background: var(--card); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 44px -34px rgba(20, 14, 40, .45); }
:root[data-theme="paper"] .card, :root[data-theme="paper"] .bcard, :root[data-theme="paper"] .plan, :root[data-theme="paper"] .tile { border-color: rgba(40, 30, 10, .12); box-shadow: 0 1px 0 #fff inset, 0 16px 40px -32px rgba(60, 40, 10, .3); }
.card { padding: clamp(22px, 3vw, 34px); } .card + .card { margin-top: 0; }
.card h2 { font-size: 30px; margin-bottom: 8px; } .card > p.lead, .card .lead { max-width: 70ch; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select.sel { background: color-mix(in srgb, var(--panel-solid) 55%, transparent); border-color: color-mix(in srgb, var(--line2) 100%, transparent); }
:root[data-theme="paper"] input[type=text], :root[data-theme="paper"] input[type=email], :root[data-theme="paper"] input[type=password], :root[data-theme="paper"] input[type=url], :root[data-theme="paper"] input[type=number], :root[data-theme="paper"] textarea, :root[data-theme="paper"] select.sel { background: #fff; }
.fld > span { font-weight: 600; color: var(--ink); } .fld > span small { font-weight: 400; }
.chk { background: color-mix(in srgb, var(--panel-solid) 40%, transparent); transition: border-color .2s, background-color .2s; } .chk:hover { border-color: var(--accent); } :root[data-theme="paper"] .chk { background: #fff; }

/* the side list: only as tall as it needs to be */
.side { bottom: auto; max-height: calc(100dvh - 104px); }
.sd-i { min-height: 44px; } .sd-i.on { font-weight: 600; }

/* the tab bar: solid, so nothing shows through it while you scroll */
.etabs { top: 78px; padding: 6px; background: var(--panel-solid); box-shadow: 0 14px 34px -20px rgba(20, 14, 40, .55); -webkit-backdrop-filter: none; backdrop-filter: none; width: auto; display: inline-flex; margin-bottom: 22px; }
.etabs button { position: relative; transition: background-color .2s, color .2s; } .etabs button:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }

/* page headings: a little quieter, more room */
.ph { margin-bottom: 30px; } .ph h1 { font-size: clamp(36px, 4.6vw, 56px); } .ph .tags { margin-top: 12px; }

/* the Look card: the colour choices fill the space, the preview sits beside them */
.lookrow { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
.look { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.look button { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 14px; padding: 16px 18px; border-radius: 20px; text-align: left; font-size: 15.5px; font-weight: 600; color: var(--ink); transition: border-color .2s, transform .25s var(--ease), background-color .2s; }
.look button:hover { transform: translateY(-2px); border-color: var(--accent); } .look button i { grid-row: span 2; width: 52px; height: 52px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.look button small { color: var(--muted); font-weight: 400; font-size: 12.5px; grid-column: 2; }
.look button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pvframe { height: 500px; border-radius: 26px; } .pvwrap { top: 150px; }
@media (max-width: 1100px) { .lookrow { grid-template-columns: 1fr; } .pvwrap { position: static; } .pvframe { height: 440px; } }
@media (max-width: 520px) { .look { grid-template-columns: 1fr; } }

/* bot cards */
.bots { gap: 20px; } .bcard { padding: 22px; gap: 14px; } .bcard-h { gap: 14px; } .bava { width: 52px; height: 52px; border-radius: 17px; font-size: 26px; box-shadow: 0 12px 26px -12px var(--accent); }
.bcard-f { padding-top: 12px; border-top: 1px solid var(--line); }
.bcard.add { display: grid; place-content: center; text-align: center; gap: 8px; min-height: 200px; border-style: dashed; background: transparent; cursor: pointer; color: var(--soft); } .bcard.add::before { display: none; } .bcard.add b { font-size: 34px; color: var(--accent); line-height: 1; }

/* knowledge */
.src { padding: 14px 16px; border-radius: 18px; background: var(--card); transition: border-color .25s, background-color .6s; } .src:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line2)); }
.src.fresh { animation: freshSrc 2.6s ease both; } @keyframes freshSrc { 0% { background: color-mix(in srgb, var(--ok) 28%, transparent); border-color: var(--ok); transform: translateY(-6px); } 40% { transform: none; } 100% { background: var(--card); } }
.src .ico { width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cap .bar, .meter .bar { height: 8px; }
.train { background: var(--card); } .train b { font-size: 16px; }
.drop { background: color-mix(in srgb, var(--accent) 4%, transparent); } .drop b { font-size: 17px; }

/* the toast: clearer, with an icon, and a button when there is one */
#toast { display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line2)); font-size: 15px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); z-index: 100; }
#toast::before { content: "✓"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #06241a; font-weight: 800; font-size: 15px; } #toast.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line2)); } #toast.warn::before { content: "!"; background: var(--warn); }
#toast b { font-weight: 600; } #toast small { display: block; color: var(--muted); font-size: 12.5px; }

/* the account page */
.sidenav a { border-radius: 14px; } .ring { width: 190px; height: 190px; } .ov { grid-template-columns: 230px minmax(0, 1fr); gap: 36px; }
.plan { padding: 26px; border-radius: 24px; } .plan .price { font-size: 46px; }
.keyrow { padding: 16px 18px; border-radius: 18px; background: var(--card); }

/* the savebar: always on top of the content, easy to see */
.savebar { z-index: 20; bottom: 18px; border-radius: 22px; background: var(--panel-solid); } .savebar.done { border-color: var(--ok); }
.savebar.done span { display: flex; align-items: center; gap: 10px; } .savebar.done span::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #06241a; font-weight: 800; font-size: 14px; }

/* the shared page inside a preview: no scrollbar, tidier */
body.embed .msgs { scrollbar-width: none; } body.embed .msgs::-webkit-scrollbar { display: none; }

#toast { bottom: auto; top: 84px; }
@media (max-width: 1100px) { #toast { top: 78px; } }

@media (max-width: 900px) { .ov { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ring { width: 170px; height: 170px; } }
.plans { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.tags { min-width: 0; }

/* the side list: the bots scroll in the middle, Account and Docs stay at the bottom */
.side { bottom: 16px; max-height: none; overflow: hidden; padding: 14px 12px 0; }
@media (min-width: 1180px) { body.hasside .side { display: flex; flex-direction: column; } }
.sd-top { flex: none; } .sd-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; scrollbar-width: thin; }
.sd-foot { flex: none; display: grid; gap: 2px; margin: 0 -12px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 55%, transparent); border-radius: 0 0 26px 26px; }

/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="pro"] { --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent); }
:root[data-theme="pro"] .card, :root[data-theme="pro"] .bcard, :root[data-theme="pro"] .plan, :root[data-theme="pro"] .tile { border-color: rgba(40, 30, 10, .12); box-shadow: 0 1px 0 #fff inset, 0 16px 40px -32px rgba(60, 40, 10, .3); }
:root[data-theme="pro"] input[type=text], :root[data-theme="pro"] input[type=email], :root[data-theme="pro"] input[type=password], :root[data-theme="pro"] input[type=url], :root[data-theme="pro"] input[type=number], :root[data-theme="pro"] textarea, :root[data-theme="pro"] select.sel { background: #fff; }
:root[data-theme="pro"] .chk { background: #fff; }

/* the same light-mode adjustments for the amber and teal light themes */
/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="ember-light"] { --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent); }
/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="tide-light"] { --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent); }
:root[data-theme="ember-light"] .card, :root[data-theme="ember-light"] .bcard, :root[data-theme="ember-light"] .plan, :root[data-theme="ember-light"] .tile { border-color: rgba(40, 30, 10, .12); box-shadow: 0 1px 0 #fff inset, 0 16px 40px -32px rgba(60, 40, 10, .3); }
:root[data-theme="tide-light"] .card, :root[data-theme="tide-light"] .bcard, :root[data-theme="tide-light"] .plan, :root[data-theme="tide-light"] .tile { border-color: rgba(40, 30, 10, .12); box-shadow: 0 1px 0 #fff inset, 0 16px 40px -32px rgba(60, 40, 10, .3); }
:root[data-theme="ember-light"] input[type=text], :root[data-theme="ember-light"] input[type=email], :root[data-theme="ember-light"] input[type=password], :root[data-theme="ember-light"] input[type=url], :root[data-theme="ember-light"] input[type=number], :root[data-theme="ember-light"] textarea, :root[data-theme="ember-light"] select.sel { background: #fff; }
:root[data-theme="tide-light"] input[type=text], :root[data-theme="tide-light"] input[type=email], :root[data-theme="tide-light"] input[type=password], :root[data-theme="tide-light"] input[type=url], :root[data-theme="tide-light"] input[type=number], :root[data-theme="tide-light"] textarea, :root[data-theme="tide-light"] select.sel { background: #fff; }
:root[data-theme="ember-light"] .chk { background: #fff; }
:root[data-theme="tide-light"] .chk { background: #fff; }