/* HomeHub UI styles.
   Extracted from index.html, which had grown to 2,406 lines with ~520 of them CSS. Same rules,
   same order, no rewriting — a move, so any visual difference is a bug rather than a decision. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ══ RESET & BASE ══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* ══ SHARED AUTH & SELECTOR TOKENS ════════════════════════ */
:root{
  --ivory:#f5f0e8;--cream:#ede6d6;--warm:#d4c9b0;--ebony:#1a1510;--wood:#2d1f0e;
  --mahogany:#5c3317;--gold:#c9a84c;--gold-light:#e8c96a;--red:#c0392b;--green:#2ecc71;
  --muted-piano:#7a6e5f;--border-piano:#c8b898;--key-white:#f8f4ec;--key-black:#1a1510;
  /* recipe tokens */
  --rb-cream:#faf6ef;--rb-paper:#f2ead8;--rb-ink:#1c1408;--rb-brown:#6b4c2a;
  --rb-rust:#b8502a;--rb-gold:#c8963a;--rb-sage:#5a7a5a;--rb-muted:#9a8a72;
  --rb-border:#d8c9a8;--rb-shadow:rgba(28,20,8,.12);
}

html,body{overscroll-behavior-y:contain;}/* stop iOS/Chrome pull-to-refresh from reloading the app */
body{font-family:'DM Mono',monospace;min-height:100vh;background:#f5f0e8;}

.screen{display:none;}
.screen.active{display:block;}

/* ══ AUTH ══════════════════════════════════════════════════ */
#screen-auth{min-height:100vh;display:none;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#f5f0e8 0%,#ede6d6 100%);}
#screen-auth.active{display:flex;}

.auth-card{background:var(--cream);border:1px solid var(--border-piano);border-radius:20px;
  padding:32px 28px;width:100%;max-width:380px;box-shadow:0 8px 40px rgba(0,0,0,.12);}
.auth-logo{text-align:center;margin-bottom:24px;}
.hh-logo{display:inline-block;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIGZpbGw9IiNmNWYwZTgiLz48cmVjdCB4PSI3MiIgeT0iNzIiIHdpZHRoPSI4ODAiIGhlaWdodD0iODgwIiByeD0iMTIwIiBmaWxsPSIjZWRlNmQ2IiBzdHJva2U9IiNkNGM5YjAiIHN0cm9rZS13aWR0aD0iMTgiLz48cG9seWdvbiBwb2ludHM9IjIwNy45MjAwMDAwMDAwMDAwMiw0MjcuMzYgNTEyLjAsMjAyLjkyMDAwMDAwMDAwMDAyIDgxNi4wOCw0MjcuMzYiIGZpbGw9IiM1YzMzMTciLz48cmVjdCB4PSIyNTEuMzYiIHk9IjQwNS42NCIgd2lkdGg9IjUyMS4yOCIgaGVpZ2h0PSIzNzYuNDgiIHJ4PSIyOC45NiIgZmlsbD0iI2VkZTZkNiIgc3Ryb2tlPSIjMmQxZjBlIiBzdHJva2Utd2lkdGg9IjE4LjEiLz48cmVjdCB4PSI1MDEuMTQiIHk9IjQwNS42NCIgd2lkdGg9IjIxLjcyIiBoZWlnaHQ9IjM3Ni40OCIgcng9IjAiIGZpbGw9IiNjOWE4NGMiLz48cmVjdCB4PSIyOTQuOCIgeT0iNDg1LjI4IiB3aWR0aD0iMTczLjc2IiBoZWlnaHQ9IjE4OC4yNCIgcng9IjEwLjg2IiBmaWxsPSIjZjVmMGU4IiBzdHJva2U9IiMyZDFmMGUiIHN0cm9rZS13aWR0aD0iMTAuODYiLz48bGluZSB4MT0iMjk0LjgiIHkxPSI0ODUuMjgiIHgyPSIyOTQuOCIgeTI9IjY3My41MiIgc3Ryb2tlPSIjMmQxZjBlIiBzdHJva2Utd2lkdGg9IjYuNTE1OTk5OTk5OTk5OTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzI5LjU1MiIgeTE9IjQ4NS4yOCIgeDI9IjMyOS41NTIiIHkyPSI2NzMuNTIiIHN0cm9rZT0iIzJkMWYwZSIgc3Ryb2tlLXdpZHRoPSI2LjUxNTk5OTk5OTk5OTk5OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjM2NC4zMDQwMDAwMDAwMDAwMyIgeTE9IjQ4NS4yOCIgeDI9IjM2NC4zMDQwMDAwMDAwMDAwMyIgeTI9IjY3My41MiIgc3Ryb2tlPSIjMmQxZjBlIiBzdHJva2Utd2lkdGg9IjYuNTE1OTk5OTk5OTk5OTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzk5LjA1NjAwMDAwMDAwMDA0IiB5MT0iNDg1LjI4IiB4Mj0iMzk5LjA1NjAwMDAwMDAwMDA0IiB5Mj0iNjczLjUyIiBzdHJva2U9IiMyZDFmMGUiIHN0cm9rZS13aWR0aD0iNi41MTU5OTk5OTk5OTk5OTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSI0MzMuODA4IiB5MT0iNDg1LjI4IiB4Mj0iNDMzLjgwOCIgeTI9IjY3My41MiIgc3Ryb2tlPSIjMmQxZjBlIiBzdHJva2Utd2lkdGg9IjYuNTE1OTk5OTk5OTk5OTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cmVjdCB4PSIzMjAuMTQiIHk9IjQ4NS4yOCIgd2lkdGg9IjE4LjgyMzk5OTk5OTk5OTk5OCIgaGVpZ2h0PSIxMDEuMzYwMDAwMDAwMDAwMDEiIHJ4PSI0LjM0NCIgZmlsbD0iIzFhMTUxMCIvPjxyZWN0IHg9IjM1NC44OTIwMDAwMDAwMDAwNSIgeT0iNDg1LjI4IiB3aWR0aD0iMTguODIzOTk5OTk5OTk5OTk4IiBoZWlnaHQ9IjEwMS4zNjAwMDAwMDAwMDAwMSIgcng9IjQuMzQ0IiBmaWxsPSIjMWExNTEwIi8+PHJlY3QgeD0iNDA3LjAyIiB5PSI0ODUuMjgiIHdpZHRoPSIxOC44MjM5OTk5OTk5OTk5OTgiIGhlaWdodD0iMTAxLjM2MDAwMDAwMDAwMDAxIiByeD0iNC4zNDQiIGZpbGw9IiMxYTE1MTAiLz48bGluZSB4MT0iMjk0LjgiIHkxPSI2NzMuNTIiIHgyPSI0NjguNTYiIHkyPSI2NzMuNTIiIHN0cm9rZT0iI2M5YTg0YyIgc3Ryb2tlLXdpZHRoPSIxNC40OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHJlY3QgeD0iNTYyLjY4IiB5PSI0NzguMDQiIHdpZHRoPSIxNDQuOCIgaGVpZ2h0PSIyMDIuNzIwMDAwMDAwMDAwMDMiIHJ4PSIxNC40OCIgZmlsbD0iI2YyZWFkOCIgc3Ryb2tlPSIjNmI0YzJhIiBzdHJva2Utd2lkdGg9IjEwLjEzNjAwMDAwMDAwMDAwMSIvPjxsaW5lIHgxPSI1ODQuNCIgeTE9IjUyOC43MiIgeDI9IjY3OC41MiIgeTI9IjUyOC43MiIgc3Ryb2tlPSIjYjg1MDJhIiBzdHJva2Utd2lkdGg9IjEwLjg2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNTg0LjQiIHkxPSI1NzIuMTYiIHgyPSI2NjQuMDQiIHkyPSI1NzIuMTYiIHN0cm9rZT0iIzVhN2E1YSIgc3Ryb2tlLXdpZHRoPSI4LjY4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjU4NC40IiB5MT0iNjE1LjYiIHgyPSI2NzEuMjgiIHkyPSI2MTUuNiIgc3Ryb2tlPSIjYzg5NjNhIiBzdHJva2Utd2lkdGg9IjguNjg4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSI3MDcuNDgiIGN5PSI1NDMuMiIgcj0iMjUuMzQwMDAwMDAwMDAwMDAzIiBmaWxsPSIjZThjOTZhIiBzdHJva2U9IiM2YjRjMmEiIHN0cm9rZS13aWR0aD0iOC42ODgiLz48bGluZSB4MT0iNjk2LjYyIiB5MT0iNTY0LjkyIiB4Mj0iNjU2LjgiIHkyPSI3MDIuNDgiIHN0cm9rZT0iIzZiNGMyYSIgc3Ryb2tlLXdpZHRoPSIxMy4wMzE5OTk5OTk5OTk5OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjUxMi4wIiBjeT0iNjA4LjM2IiByPSIxMy4wMzE5OTk5OTk5OTk5OTgiIGZpbGw9IiNlOGM5NmEiLz48dGV4dCB4PSI1MTIiIHk9IjkyMCIgZmlsbD0iIzJkMWYwZSIgZm9udC1mYW1pbHk9IkRNIE1vbm8sIERlamFWdSBTYW5zIE1vbm8sIG1vbm9zcGFjZSIgZm9udC1zaXplPSI1NCIgZm9udC13ZWlnaHQ9IjcwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgbGV0dGVyLXNwYWNpbmc9IjYiPkhPTUVIVUI8L3RleHQ+PC9zdmc+") center/contain no-repeat;}
.auth-hub-title{font-family:'Playfair Display',serif;font-size:28px;color:var(--mahogany);margin-top:8px;}
.auth-hub-sub{font-size:11px;color:var(--muted-piano);letter-spacing:2px;text-transform:uppercase;margin-top:2px;}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,.05);border-radius:10px;
  padding:3px;margin-bottom:20px;gap:2px;}
.auth-tab{padding:9px;border-radius:8px;border:none;background:none;font-family:'DM Mono',monospace;
  font-size:11px;font-weight:500;color:var(--muted-piano);cursor:pointer;letter-spacing:1px;
  text-transform:uppercase;transition:all .2s;}
.auth-tab.active{background:var(--cream);color:var(--mahogany);box-shadow:0 1px 6px rgba(0,0,0,.1);}
.field-group{margin-bottom:14px;}
.field-label{display:block;font-size:10px;color:var(--muted-piano);letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:6px;}
.field-input{width:100%;padding:11px 13px;border:1.5px solid var(--border-piano);border-radius:9px;
  background:var(--ivory);font-family:'DM Mono',monospace;font-size:13px;color:var(--ebony);
  outline:none;transition:border-color .2s;}
.field-input:focus{border-color:var(--gold);}
.auth-btn{width:100%;padding:14px;border-radius:10px;border:none;background:var(--mahogany);
  color:var(--ivory);font-family:'DM Serif Display',serif;font-size:16px;cursor:pointer;
  transition:all .2s;margin-top:4px;}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;}
.auth-or{display:none;align-items:center;gap:12px;margin:16px 0;color:var(--muted,#8a7a63);font-size:13px;}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:rgba(120,90,50,.2);}
.google-btn{display:none;width:100%;padding:12px;border-radius:10px;border:1px solid rgba(120,90,50,.28);
  background:#fff;color:#3c4043;font-family:'Lato',system-ui,sans-serif;font-size:15px;font-weight:700;
  cursor:pointer;align-items:center;justify-content:center;gap:10px;transition:box-shadow .2s,background .2s;}
.google-btn:hover{background:#f7f8fa;box-shadow:0 1px 4px rgba(0,0,0,.14);}
.google-btn svg{width:18px;height:18px;flex:none;}
.auth-google-wrap.on .auth-or{display:flex;}
.auth-google-wrap.on .google-btn{display:flex;}
.auth-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.25);border-radius:8px;
  padding:10px 12px;font-size:11px;color:var(--red);margin-bottom:14px;display:none;}

/* ══ APP SELECTOR ══════════════════════════════════════════ */
#screen-selector{min-height:100vh;display:none;flex-direction:column;
  background:linear-gradient(135deg,#f5f0e8 0%,#ede6d6 100%);}
#screen-selector.active{display:flex;}

.sel-header{background:var(--ebony);padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;box-shadow:0 2px 20px rgba(0,0,0,.4);}
.sel-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);}
.sel-user{font-size:11px;color:var(--warm);display:flex;align-items:center;gap:10px;}
.sel-signout{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--muted-piano);
  padding:5px 12px;border-radius:6px;font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;
  letter-spacing:1px;text-transform:uppercase;}

.sel-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;}
.sel-greeting{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--mahogany);
  text-align:center;margin-bottom:10px;}
.sel-sub{font-size:.82rem;color:var(--muted-piano);text-align:center;margin-bottom:20px;}

.app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;width:100%;max-width:620px;}
.app-card{background:white;border-radius:20px;padding:32px 24px;text-align:center;
  cursor:pointer;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.08);border:2px solid transparent;}
.app-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.14);}
.app-card.piano{border-color:rgba(201,168,76,.3);}
.app-card.piano:hover{border-color:var(--gold);}
.app-card.recipe{border-color:rgba(107,76,42,.2);}
.app-card.recipe:hover{border-color:var(--rb-brown);}
.app-card-icon{font-size:3.5rem;margin-bottom:16px;}
.app-card-title{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:6px;}
.app-card.piano .app-card-title{color:var(--mahogany);}
.app-card.recipe .app-card-title{color:var(--rb-brown);}
.app-card-desc{font-size:.8rem;color:var(--muted-piano);line-height:1.6;}
.app-card-badge{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:20px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.app-card.piano .app-card-badge{background:rgba(201,168,76,.12);color:var(--gold);}
.app-card.recipe .app-card-badge{background:rgba(107,76,42,.08);color:var(--rb-brown);}
.app-card-share{display:block;margin:16px auto 0;background:none;border:1px solid rgba(0,0,0,.14);color:inherit;
  opacity:.72;padding:6px 14px;border-radius:20px;font-size:.72rem;font-weight:700;font-family:inherit;cursor:pointer;
  letter-spacing:.03em;transition:opacity .18s,border-color .18s;}
.app-card-share:hover{opacity:1;border-color:currentColor;}
.sel-sharehint{margin-top:18px;max-width:520px;text-align:center;font-size:.72rem;color:var(--muted-piano);opacity:.85;line-height:1.5;}

/* ── Admin: Users roster ────────────────────────────────
   A card per account, ordered most-recently-active first. auto-fill rather than a fixed column
   count, so this is one column on a phone and as many as fit on a desktop window with no
   breakpoint per size. */
.sel-admin-btn{margin-top:22px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.35);
  color:var(--mahogany);padding:8px 16px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:.74rem;letter-spacing:.5px;}
.sel-admin-btn:hover{background:rgba(201,168,76,.22);}
.ad-sub{font-size:.78rem;color:var(--muted-piano);text-align:center;margin-bottom:18px;}
.ad-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  align-items:start;width:100%;max-width:1100px;margin:0 auto;}
/* overflow stays visible so an open kebab menu can hang below the card instead of being clipped
   by it — the tile gets its own corner radius rather than relying on the card to crop it. */
.ad-card{background:var(--cream);border:1px solid var(--border-piano);border-radius:14px;
  position:relative;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ad-card-top{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-radius:13px 13px 0 0;}
.ad-card-top svg{width:52%;height:52%;fill:rgba(255,255,255,.85);}
.ad-card-body{padding:10px 12px 12px;display:flex;align-items:flex-start;gap:6px;}
.ad-card-text{flex:1;min-width:0;}
.ad-name{font-weight:700;font-size:.86rem;color:var(--ebony);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.ad-meta{font-size:.7rem;color:var(--muted-piano);line-height:1.45;margin-top:3px;}
.ad-badge{display:inline-block;margin-top:5px;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;padding:1px 7px;border-radius:999px;
  background:rgba(201,168,76,.18);color:var(--mahogany);}
/* Sits beside the admin badge on the same line, vertically centred against it. 14px keeps the G
   legible — smaller and the four colours smear into a grey dot at normal viewing distance. */
.ad-google{display:inline-flex;align-items:center;margin-top:5px;margin-left:6px;vertical-align:middle;}
.ad-google svg{width:14px;height:14px;display:block;}
/* Why the reset action is absent, in the place the button would have been. An action that simply
   vanishes with no explanation reads as a broken menu. */
.ad-menu-note{padding:7px 10px;font-size:.72rem;line-height:1.35;color:var(--muted-piano);
  border-top:1px solid rgba(26,21,16,.08);margin-top:2px;}
.ad-kebab{background:none;border:none;cursor:pointer;color:var(--muted-piano);padding:2px 4px;
  line-height:1;font-size:1.05rem;border-radius:6px;flex-shrink:0;}
.ad-kebab:hover{background:rgba(26,21,16,.07);}
/* Anchored under the kebab and hanging off the bottom of the card, so it never covers the name
   and last-activity of the card it belongs to. */
.ad-kebab-wrap{position:relative;flex-shrink:0;}
.ad-menu{position:absolute;right:0;top:26px;z-index:30;min-width:190px;padding:4px;
  background:var(--ivory);border:1px solid var(--border-piano);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);}
.ad-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:none;
  background:none;cursor:pointer;font-family:inherit;font-size:.72rem;color:var(--mahogany);
  border-radius:7px;}
.ad-menu button:hover{background:rgba(201,168,76,.15);}
.ad-edit{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px;}
.ad-edit input{width:100%;padding:7px 9px;border:1.5px solid var(--border-piano);border-radius:8px;
  font-family:inherit;font-size:.74rem;background:var(--ivory);color:var(--ebony);}
.ad-edit-row{display:flex;gap:6px;}
.ad-btn{padding:6px 11px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.7rem;
  border:1px solid var(--border-piano);background:var(--ivory);color:var(--mahogany);}
.ad-btn-primary{background:var(--gold);border-color:var(--gold);color:var(--wood);font-weight:700;}
.ad-note{margin:0 12px 12px;padding:9px 10px;border-radius:9px;font-size:.68rem;line-height:1.55;
  background:rgba(46,204,113,.09);border:1px solid rgba(46,204,113,.28);color:var(--wood);
  word-break:break-all;}
.ad-note code{font-weight:700;letter-spacing:.04em;}
.ad-err{margin:0 12px 12px;font-size:.68rem;color:var(--red);}

/* ══ SHARED BACK BAR ═══════════════════════════════════════ */
.back-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.06);}
.back-btn{background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:6px;transition:all .18s;}
.piano-back-btn{color:var(--gold);border:1px solid rgba(201,168,76,.3);}
.piano-back-btn:hover{background:rgba(201,168,76,.1);}
.recipe-back-btn{color:var(--rb-rust);border:1px solid rgba(184,80,42,.25);}
.recipe-back-btn:hover{background:rgba(184,80,42,.06);}
/* The admin entry point inside an app. Pushed to the far end of PianoLink's back bar; in
   RecipeBook the nav's own layout already places it beside the user badge.
   It borrows each app's existing header idiom rather than inventing a look — piano-back-btn's gold
   is 6.99:1 on the wood bar, comfortably readable. RecipeBook is the exception: the rust of its
   back arrow is only 3.66:1 on --rb-ink, under AA for text this size. An arrow glyph carries that;
   a word does not. So this takes the nav tabs' own muted-to-cream treatment (5.42:1) instead. */
.admin-entry{margin-left:auto;flex:0 0 auto;}
.rb-nav .admin-entry{margin-left:0;color:var(--rb-muted);border:1px solid rgba(255,255,255,.14);}
.rb-nav .admin-entry:hover{background:rgba(255,255,255,.07);color:var(--rb-cream);}

/* ════════════════════════════════════════════════════════════
   PIANO APP STYLES
   ════════════════════════════════════════════════════════════ */
#screen-piano{background:var(--ivory);}
.piano-wrap{background:var(--ivory);min-height:100vh;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(201,168,76,.12) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 100%,rgba(92,51,23,.08) 0%,transparent 60%);}

.p-header{background:var(--ebony);padding:18px 20px 14px;display:flex;align-items:center;
  justify-content:space-between;box-shadow:0 2px 20px rgba(0,0,0,.4);}
.p-brand{display:flex;align-items:center;gap:12px;}
.p-brand-name{font-family:'DM Serif Display',serif;font-size:22px;color:var(--gold);letter-spacing:.5px;}
.p-brand-sub{font-size:9px;color:var(--warm);letter-spacing:3px;text-transform:uppercase;margin-top:1px;}
.p-chip{font-size:10px;padding:3px 9px;border-radius:20px;letter-spacing:1px;font-weight:500;text-transform:uppercase;}
.p-chip-gold{background:rgba(201,168,76,.15);color:var(--gold);}
.p-chip-green{background:rgba(46,204,113,.12);color:#2ecc71;}
.p-chip-red{background:rgba(192,57,43,.12);color:#e74c3c;}

.cloud-bar{background:rgba(26,21,16,.04);border-bottom:1px solid var(--border-piano);padding:7px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cloud-status{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted-piano);letter-spacing:.5px;}
.cloud-dot{width:6px;height:6px;border-radius:50%;background:var(--muted-piano);transition:background .3s;}
.cloud-dot.synced{background:var(--green);}
.cloud-dot.syncing{background:var(--gold);animation:btpulse 1s ease-in-out infinite;}
.cloud-dot.error{background:var(--red);}
.cloud-actions{display:flex;gap:6px;}
.cloud-btn{background:none;border:1px solid var(--border-piano);color:var(--muted-piano);padding:4px 10px;
  border-radius:5px;font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;
  letter-spacing:.5px;text-transform:uppercase;transition:all .2s;}
.cloud-btn:hover{border-color:var(--gold);color:var(--gold);}

.bt-bar{background:var(--wood);border-bottom:1px solid rgba(201,168,76,.2);padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bt-status{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.bt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted-piano);transition:background .3s;}
.bt-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green);}
.bt-dot.searching{background:var(--gold);animation:btpulse 1s ease-in-out infinite;}
.bt-dot.error{background:var(--red);}
@keyframes btpulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(201,168,76,.5);}50%{opacity:.6;box-shadow:0 0 0 6px rgba(201,168,76,0);}}
.bt-label{font-size:11px;color:var(--warm);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bt-btn{background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.35);color:var(--gold);
  padding:7px 14px;border-radius:6px;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;
  cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.bt-btn:active{background:rgba(201,168,76,.3);}

.piano-visual{background:var(--ebony);border-radius:0 0 14px 14px;padding:14px 20px 18px;
  display:flex;justify-content:center;align-items:flex-end;gap:3px;overflow:hidden;position:relative;
  box-shadow:inset 0 -4px 12px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.2);}
.key{border-radius:0 0 4px 4px;transition:background .08s,transform .08s;position:relative;}
.key.white{width:22px;height:60px;background:var(--key-white);border:1px solid #ccc;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.3);z-index:1;}
.key.black{width:14px;height:38px;background:var(--key-black);margin:0 -7px;z-index:2;box-shadow:0 3px 6px rgba(0,0,0,.5);}
.key.white.lit{background:var(--gold-light);transform:translateY(2px);box-shadow:0 0 12px rgba(201,168,76,.6);}
.key.black.lit{background:var(--gold);transform:translateY(2px);}

.p-main{padding:20px 16px 100px;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.p-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.p-section-title{font-family:'DM Serif Display',serif;font-size:16px;color:var(--mahogany);letter-spacing:.3px;}
.p-section-count{font-size:11px;color:var(--muted-piano);letter-spacing:1px;}
.p-card{background:var(--cream);border:1px solid var(--border-piano);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07);}
.p-card-header{background:rgba(92,51,23,.06);border-bottom:1px solid var(--border-piano);padding:13px 16px;display:flex;align-items:center;justify-content:space-between;}
.p-card-title{font-family:'DM Serif Display',serif;font-size:14px;color:var(--mahogany);}
.p-card-body{padding:16px;}
.p-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,0,0,.04);border-radius:10px;padding:3px;gap:2px;}
.p-tab{padding:10px 6px;border-radius:8px;border:none;background:none;font-family:'DM Mono',monospace;
  font-size:10px;font-weight:500;color:var(--muted-piano);cursor:pointer;letter-spacing:.5px;
  text-transform:uppercase;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:5px;}
.p-tab svg{width:18px;height:18px;}
.p-tab.active{background:var(--cream);color:var(--mahogany);box-shadow:0 1px 6px rgba(0,0,0,.1);}
.p-song-list{display:flex;flex-direction:column;gap:8px;}
.p-song-item{background:var(--key-white);border:1px solid var(--border-piano);border-radius:10px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s;}
.p-song-item:active,.p-song-item.selected{border-color:var(--gold);background:rgba(201,168,76,.08);box-shadow:0 0 0 2px rgba(201,168,76,.2);}
.p-song-icon{width:36px;height:36px;border-radius:8px;background:var(--ebony);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);}
.p-song-icon svg{width:18px;height:18px;}
.p-song-info{flex:1;min-width:0;}
.p-song-name{font-family:'DM Serif Display',serif;font-size:14px;color:var(--ebony);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-song-meta{font-size:10px;color:var(--muted-piano);margin-top:2px;letter-spacing:.5px;}
.p-song-dur{font-size:11px;color:var(--muted-piano);flex-shrink:0;}
.p-song-del{background:none;border:none;color:var(--muted-piano);cursor:pointer;padding:4px;border-radius:4px;font-size:14px;line-height:1;flex-shrink:0;}
.p-song-del:hover{color:var(--red);}
.saved-section{margin-top:16px;}
.saved-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.saved-title{font-size:12px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;}
.upload-zone{border:2px dashed var(--border-piano);border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px;}
.upload-zone:active{border-color:var(--gold);background:rgba(201,168,76,.06);}
.upload-zone svg{color:var(--gold);}
.upload-zone p{font-family:'DM Serif Display',serif;font-size:14px;color:var(--mahogany);}
.upload-zone small{font-size:11px;color:var(--muted-piano);}
.rec-visualizer{background:var(--ebony);border-radius:10px;height:60px;margin-bottom:14px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
.rec-visualizer canvas{width:100%;height:100%;display:block;}
.rec-idle{display:flex;gap:3px;align-items:center;}
.rec-idle span{display:block;width:3px;background:rgba(201,168,76,.3);border-radius:2px;animation:idle 1.6s ease-in-out infinite;}
@keyframes idle{0%,100%{height:6px;}50%{height:22px;}}
.pitch-row{display:flex;align-items:center;justify-content:space-between;background:var(--ebony);border-radius:8px;padding:10px 14px;margin-bottom:14px;}
.live-note-big{font-family:'DM Serif Display',serif;font-size:26px;color:var(--gold);}
.live-detail{font-size:11px;color:var(--warm);text-align:right;}
.live-detail strong{display:block;color:var(--ivory);font-size:13px;}
.player-card{background:var(--ebony);border-radius:16px;padding:20px;color:var(--ivory);box-shadow:0 4px 24px rgba(0,0,0,.2);}
.np-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.np-name{font-family:'DM Serif Display',serif;font-size:20px;color:var(--ivory);margin-bottom:4px;min-height:26px;}
.np-sub{font-size:11px;color:var(--warm);margin-bottom:18px;}
.playbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.playbar-time{font-size:10px;color:var(--warm);min-width:36px;}
.playbar-time:last-child{text-align:right;}
.playbar-track{flex:1;height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;}
.playbar-fill{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .3s linear;}
.p-controls{display:flex;align-items:center;justify-content:center;gap:16px;}
.ctrl-btn{background:none;border:none;cursor:pointer;color:var(--warm);padding:8px;border-radius:50%;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.ctrl-btn:active{transform:scale(.9);color:var(--ivory);}
.ctrl-btn.primary{background:var(--gold);color:var(--ebony);width:56px;height:56px;box-shadow:0 4px 16px rgba(201,168,76,.4);}
.ctrl-btn.primary:active{transform:scale(.95);}
.tempo-row{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;}
.tempo-label{font-size:10px;color:var(--warm);letter-spacing:1px;text-transform:uppercase;flex-shrink:0;}
.tempo-val{font-size:13px;color:var(--gold);font-weight:500;flex-shrink:0;min-width:52px;text-align:right;}
input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:rgba(255,255,255,.15);border-radius:2px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.send-btn{width:100%;padding:17px;border-radius:12px;border:none;background:var(--gold);color:var(--ebony);font-family:'DM Serif Display',serif;font-size:17px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px rgba(201,168,76,.35);}
.send-btn:disabled{opacity:.35;cursor:not-allowed;}
.send-btn.sending{background:linear-gradient(90deg,var(--gold),var(--gold-light));animation:shimmer 1.2s ease-in-out infinite;}
@keyframes shimmer{0%,100%{box-shadow:0 4px 20px rgba(201,168,76,.35);}50%{box-shadow:0 4px 32px rgba(201,168,76,.7);}}
.record-btn{width:100%;padding:16px;border-radius:12px;border:2px solid var(--mahogany);background:none;color:var(--mahogany);font-family:'DM Mono',monospace;font-size:13px;font-weight:500;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;}
.record-btn.recording{border-color:var(--red);color:var(--red);animation:rec-pulse 1s ease-in-out infinite;}
@keyframes rec-pulse{0%,100%{box-shadow:none;}50%{box-shadow:0 0 0 4px rgba(192,57,43,.15);}}
.rec-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0;}
.recording .rec-dot{animation:blink .8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.device-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.device-item{background:var(--key-white);border:1px solid var(--border-piano);border-radius:8px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s;}
.device-item:active{background:rgba(201,168,76,.1);border-color:var(--gold);}
.device-item.connected{border-color:#2ecc71;background:rgba(46,204,113,.05);}
.device-name{font-size:13px;color:var(--ebony);}
.device-type{font-size:10px;color:var(--muted-piano);margin-top:2px;letter-spacing:.5px;}
.device-action{font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;}

/* ════════════════════════════════════════════════════════════
   RECIPE APP STYLES
   ════════════════════════════════════════════════════════════ */
#screen-recipe{background:var(--rb-cream);}
.rb-wrap{background:var(--rb-cream);min-height:100vh;font-family:'Lato',sans-serif;color:var(--rb-ink);}

.rb-nav{background:var(--rb-ink);color:var(--rb-cream);padding:0 1rem;display:flex;align-items:center;
  justify-content:space-between;height:56px;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px var(--rb-shadow);}
.rb-logo{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--rb-gold);}
.rb-nav-tabs{display:flex;gap:.2rem;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.rb-nav-tabs::-webkit-scrollbar{display:none;}
.rb-nav-tab{background:none;border:none;color:var(--rb-muted);padding:.35rem .6rem;border-radius:6px;
  cursor:pointer;font-size:.72rem;font-family:'Lato',sans-serif;font-weight:700;flex:0 0 auto;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em;transition:all .18s;}
.rb-nav-tab:hover{background:rgba(255,255,255,.07);color:var(--rb-cream);}
.rb-nav-tab.active{background:var(--rb-rust);color:#fff;}
.rb-user{font-size:.78rem;color:var(--rb-muted);}

.rb-page{flex:1;padding:1.25rem 1rem;max-width:1100px;margin:0 auto;width:100%;}
.rb-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.6rem;}
.rb-page-title{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--rb-brown);}

.rb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.2rem;
  border-radius:8px;cursor:pointer;font-family:'Lato',sans-serif;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em;border:none;transition:all .18s;white-space:nowrap;}
.rb-btn-primary{background:var(--rb-rust);color:white;}
.rb-btn-primary:hover{background:#9e4323;}
.rb-btn-secondary{background:var(--rb-paper);color:var(--rb-brown);border:1.5px solid var(--rb-border);}
.rb-btn-secondary:hover{background:var(--rb-border);}
.rb-btn-ghost{background:none;color:var(--rb-muted);border:1.5px solid var(--rb-border);}
.rb-btn-ghost:hover{border-color:var(--rb-rust);color:var(--rb-rust);}
.rb-btn-danger{background:#c0392b;color:white;}
.rb-btn-sm{padding:.3rem .7rem;font-size:.75rem;}

.rb-filter-bar{display:flex;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.rb-search-wrap{position:relative;flex:1;min-width:160px;}
.rb-search-wrap input{width:100%;padding:.55rem .75rem .55rem 2rem;border:1.5px solid var(--rb-border);
  border-radius:8px;font-family:'Lato',sans-serif;font-size:.88rem;background:var(--rb-cream);
  color:var(--rb-ink);outline:none;transition:border-color .2s;}
.rb-search-wrap input:focus{border-color:var(--rb-rust);}
.rb-search-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--rb-muted);font-size:.82rem;pointer-events:none;}
.rb-filter-select{padding:.55rem .75rem;border:1.5px solid var(--rb-border);border-radius:8px;
  background:var(--rb-cream);font-family:'Lato',sans-serif;font-size:.82rem;color:var(--rb-ink);
  outline:none;cursor:pointer;}

.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
.rb-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px var(--rb-shadow);
  border:1px solid var(--rb-border);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.rb-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px var(--rb-shadow);}
.rb-card-img{height:140px;background:var(--rb-paper);display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;}
.rb-card-fav{position:absolute;top:.4rem;right:.4rem;background:white;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;border:none;box-shadow:0 1px 6px var(--rb-shadow);transition:transform .15s;}
.rb-card-fav:hover{transform:scale(1.2);}
.rb-card-body{padding:.75rem .9rem .9rem;flex:1;display:flex;flex-direction:column;}
.rb-card-title{font-family:'Playfair Display',serif;font-size:1rem;color:var(--rb-brown);margin-bottom:.15rem;}
.rb-card-chef{font-size:.75rem;color:var(--rb-muted);margin-bottom:.35rem;}
.rb-card-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:auto;}
.rb-tag{background:var(--rb-paper);color:var(--rb-brown);font-size:.66rem;padding:.12rem .45rem;
  border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--rb-border);}
.rb-tag-rust{background:#fae8e3;color:var(--rb-rust);border-color:#f0c4b8;}
.rb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:4px;border-radius:9px;background:var(--rb-rust);color:#fff;font-size:.62rem;font-weight:700;line-height:1;}
.rb-friend-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:white;border:1px solid var(--rb-border);border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem;}
.rb-friend-name{font-weight:700;color:var(--rb-brown);font-size:.9rem;}
.rb-friend-sub{font-size:.72rem;color:var(--rb-muted);}
.rb-section-card{background:white;border:1px solid var(--rb-border);border-radius:12px;padding:1rem;margin-bottom:1rem;}
.rb-section-label{font-family:'Playfair Display',serif;color:var(--rb-brown);font-size:1.05rem;margin-bottom:.6rem;}
.rb-share-list{display:flex;flex-direction:column;gap:.35rem;max-height:180px;overflow:auto;margin-top:.4rem;}
.rb-share-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--rb-ink);}
.rb-owner-chip{font-size:.66rem;padding:.12rem .45rem;border-radius:20px;font-weight:700;background:var(--rb-paper);color:var(--rb-brown);border:1px solid var(--rb-border);}
.rb-pub-inline{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem;padding:.5rem .6rem;background:var(--rb-paper);border:1px solid var(--rb-border);border-radius:10px;}
.rb-pub-inline-label{font-size:.72rem;font-weight:700;color:var(--rb-muted);text-transform:uppercase;letter-spacing:.05em;margin-right:.15rem;}
.rb-pub-scope{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--rb-ink);margin-bottom:.6rem;}
.rb-pub-scope label{display:flex;align-items:center;gap:.35rem;cursor:pointer;}
.rb-pub-list{display:flex;flex-direction:column;gap:.15rem;max-height:44vh;overflow:auto;border:1px solid var(--rb-border);border-radius:10px;padding:.35rem;}
.rb-pub-list.rb-pub-disabled{opacity:.5;pointer-events:none;}
.rb-pub-row{display:flex;align-items:center;gap:.5rem;font-size:.83rem;padding:.3rem .35rem;border-radius:7px;cursor:pointer;}
.rb-pub-row:hover{background:var(--rb-paper);}
.rb-pub-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-pub-row-vis{font-size:.7rem;color:var(--rb-muted);white-space:nowrap;}

.rb-chef-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.rb-chef-card{background:white;border-radius:12px;padding:1.1rem .9rem .9rem;border:1px solid var(--rb-border);
  box-shadow:0 2px 10px var(--rb-shadow);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .2s;}
.rb-chef-card:hover{transform:translateY(-2px);}
.rb-chef-avatar{width:56px;height:56px;border-radius:50%;background:var(--rb-paper);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:.6rem;border:2px solid var(--rb-border);}
.rb-chef-name{font-family:'Playfair Display',serif;font-size:1rem;color:var(--rb-brown);margin-bottom:.1rem;}
.rb-chef-cuisine{font-size:.75rem;color:var(--rb-muted);margin-bottom:.4rem;}
.rb-chef-count{font-size:.72rem;color:var(--rb-rust);font-weight:700;}

/* Recipe book view */
.rb-book-wrap{display:flex;justify-content:center;padding:1rem 0;}
.rb-book{position:relative;width:min(760px,100%);background:white;border-radius:4px 16px 16px 4px;
  box-shadow:-8px 4px 28px rgba(0,0,0,.22),4px 4px 18px rgba(0,0,0,.12);min-height:clamp(480px,66vh,860px);
  display:flex;overflow:hidden;border:1px solid var(--rb-border);perspective:1600px;}
.rb-spine{width:26px;align-self:stretch;background:linear-gradient(90deg,#1c1408 0%,#3a2810 60%,#1c1408 100%);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.rb-spine-text{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Playfair Display',serif;
  color:var(--rb-gold);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;user-select:none;}
/* Book leaf (renamed from .rb-page to avoid colliding with the tab-panel .rb-page) */
.rb-leaf{flex:1;min-width:0;padding:1.75rem 1.75rem 1rem;background:repeating-linear-gradient(transparent,transparent 27px,#e8dfc8 27px,#e8dfc8 28px),var(--rb-paper);min-height:clamp(480px,66vh,860px);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.rb-leaf::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(90deg,#f0d8a0,transparent);z-index:2;}
.rb-leaf-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;transform-origin:left center;}
.rb-leaf-content.turn-next{animation:leafNext .4s cubic-bezier(.22,.61,.36,1);}
.rb-leaf-content.turn-prev{animation:leafPrev .4s cubic-bezier(.22,.61,.36,1);}
@keyframes leafNext{from{transform:rotateY(-16deg) translateX(26px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes leafPrev{from{transform:rotateY(16deg) translateX(-26px);opacity:0;}to{transform:none;opacity:1;}}
@media(prefers-reduced-motion:reduce){.rb-leaf-content.turn-next,.rb-leaf-content.turn-prev{animation:none;}}
.rb-book-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem;border-bottom:2px solid var(--rb-brown);padding-bottom:.45rem;}
.rb-book-title{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--rb-brown);}
.rb-book-pgnum{font-size:.75rem;color:var(--rb-muted);font-style:italic;}
.rb-book-recipe-title{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--rb-rust);margin-bottom:.15rem;}
.rb-book-meta{font-size:.78rem;color:var(--rb-muted);margin-bottom:.9rem;font-style:italic;}
.rb-book-section{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rb-brown);margin:.7rem 0 .25rem;}
.rb-book-ing{font-size:.85rem;line-height:1.7;color:var(--rb-ink);padding-left:.9rem;position:relative;}
.rb-book-ing::before{content:'•';position:absolute;left:0;color:var(--rb-rust);}
.rb-book-step{font-size:.85rem;line-height:1.7;color:var(--rb-ink);margin-bottom:.35rem;display:flex;gap:.45rem;}
.rb-book-step-num{font-family:'Playfair Display',serif;font-weight:700;color:var(--rb-rust);min-width:1.1rem;}
.rb-book-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem;padding-top:.6rem;border-top:1px solid var(--rb-border);}
.rb-book-nav-btn{background:var(--rb-brown);color:var(--rb-cream);border:none;padding:.35rem .9rem;border-radius:6px;cursor:pointer;font-family:'Lato',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.04em;transition:background .18s;}
.rb-book-nav-btn:hover{background:var(--rb-rust);}
.rb-book-nav-btn:disabled{background:var(--rb-border);color:var(--rb-muted);cursor:default;}
.rb-toc-item{display:flex;align-items:baseline;gap:.3rem;font-size:.85rem;line-height:1.9;cursor:pointer;color:var(--rb-brown);transition:color .15s;}
.rb-toc-item:hover{color:var(--rb-rust);}
.rb-toc-dots{flex:1;border-bottom:1px dotted var(--rb-muted);margin:0 .3rem .2rem;}
.rb-toc-pg{font-size:.75rem;color:var(--rb-muted);}

/* Recipe modal */
.rb-modal-overlay{position:fixed;inset:0;background:rgba(28,20,8,.45);display:flex;align-items:flex-start;justify-content:center;z-index:500;padding:1rem;overflow-y:auto;}
.rb-modal{background:white;border-radius:16px;width:min(680px,100%);margin:auto;box-shadow:0 16px 60px rgba(0,0,0,.3);border:1px solid var(--rb-border);overflow:hidden;}
.rb-modal-header{background:var(--rb-ink);color:var(--rb-cream);padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:space-between;}
.rb-modal-header h2{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--rb-gold);}
.rb-modal-close{background:none;border:none;color:var(--rb-muted);font-size:1.4rem;cursor:pointer;line-height:1;}
.rb-modal-close:hover{color:var(--rb-cream);}
.rb-modal-body{padding:1.1rem;max-height:78vh;overflow-y:auto;}
.rb-modal-footer{padding:.9rem 1.1rem;border-top:1px solid var(--rb-border);display:flex;gap:.4rem;justify-content:flex-end;}
.rb-form-group{margin-bottom:1rem;}
.rb-form-group label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rb-muted);margin-bottom:.3rem;}
.rb-form-group input,.rb-form-group select,.rb-form-group textarea{width:100%;padding:.6rem .75rem;border:1.5px solid var(--rb-border);border-radius:8px;font-family:'Lato',sans-serif;font-size:.88rem;background:var(--rb-cream);color:var(--rb-ink);outline:none;transition:border-color .2s;appearance:none;}
.rb-form-group textarea{resize:vertical;min-height:72px;}
.rb-form-group input:focus,.rb-form-group select:focus,.rb-form-group textarea:focus{border-color:var(--rb-rust);}
.rb-ing-row,.rb-step-row{display:flex;gap:.4rem;margin-bottom:.4rem;align-items:flex-start;}
.rb-ing-row input{flex:1;}
.rb-remove-btn{background:none;border:none;color:var(--rb-muted);cursor:pointer;font-size:1.1rem;padding:.3rem;line-height:1;transition:color .15s;}
.rb-remove-btn:hover{color:#c0392b;}
.rb-add-row-btn{background:none;border:1.5px dashed var(--rb-border);color:var(--rb-muted);padding:.35rem .9rem;border-radius:8px;cursor:pointer;font-size:.8rem;width:100%;margin-top:.25rem;transition:all .18s;}
.rb-add-row-btn:hover{border-color:var(--rb-rust);color:var(--rb-rust);}
.rb-tag-pill{background:var(--rb-paper);padding:.18rem .5rem;border-radius:20px;font-size:.75rem;display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--rb-border);margin:.2rem .2rem 0 0;}
.rb-tag-pill button{background:none;border:none;cursor:pointer;color:var(--rb-muted);font-size:.85rem;line-height:1;}

/* import/export */
.rb-io-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem;}
.rb-io-card{background:white;border-radius:12px;padding:1.25rem;border:1px solid var(--rb-border);box-shadow:0 2px 10px var(--rb-shadow);}
.rb-io-icon{font-size:1.8rem;margin-bottom:.4rem;}
.rb-io-title{font-family:'Playfair Display',serif;font-size:1rem;color:var(--rb-brown);margin-bottom:.35rem;}
.rb-io-desc{font-size:.82rem;color:var(--rb-muted);margin-bottom:.9rem;line-height:1.55;}

.rb-empty{text-align:center;padding:3.5rem 2rem;color:var(--rb-muted);}
.rb-empty-icon{font-size:3.5rem;margin-bottom:.8rem;opacity:.4;}
.rb-empty h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--rb-brown);margin-bottom:.4rem;}

/* ── TOAST ── */
#toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;
  gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none;}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;
  background:#1f2530;color:#f3f4f6;font-family:'DM Mono',monospace;font-size:12.5px;line-height:1.45;
  letter-spacing:.2px;box-shadow:0 10px 30px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--toast-accent,#6b7280);opacity:0;transform:translateX(24px);
  transition:opacity .25s ease,transform .28s cubic-bezier(.34,1.4,.64,1);pointer-events:auto;cursor:pointer;}
.toast.show{opacity:1;transform:translateX(0);}
.toast-ico{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--toast-accent,#6b7280);margin-top:1px;}
.toast-msg{flex:1;word-break:break-word;}
.toast-success{--toast-accent:#16a34a;}
.toast-warning{--toast-accent:#d99a0b;}
.toast-error{--toast-accent:#dc2626;}
.toast-info{--toast-accent:#2563eb;}
.toast-neutral{--toast-accent:#6b7280;}

.hidden{display:none !important;}
.mt8{margin-top:8px;}

@media(max-width:600px){
  /* The gear alone on a phone. RecipeBook's nav already scrolls its tabs horizontally at this
     width, and a word here would steal room from them for no information the icon lacks. */
  .admin-entry-label{display:none;}
  .rb-nav{padding:0 .5rem;gap:.4rem;}
  .rb-nav-tabs{justify-content:flex-start;}
  .rb-nav-tab{padding:.3rem .5rem;font-size:.66rem;}
  .rb-logo{font-size:1.05rem;flex:0 0 auto;}
  .rb-book-wrap{padding:.5rem 0;}
  .rb-book{flex-direction:column;min-height:0;border-radius:12px;}
  .rb-spine{width:100%;height:16px;align-self:auto;writing-mode:horizontal-tb;border-radius:12px 12px 0 0;}
  .rb-spine-text{writing-mode:horizontal-tb;transform:none;}
  .rb-leaf{min-height:320px;height:calc(100vh - 172px);height:calc(100dvh - 172px);padding:1.1rem 1.1rem .7rem;border-radius:0 0 12px 12px;}
  .rb-page{padding:1rem .8rem;}
  .app-cards{grid-template-columns:1fr;}
  .p-main{padding:16px 12px 80px;}
}
@media(max-width:380px){.rb-grid{grid-template-columns:1fr;}}