/* ── Occasion · shared chrome (nav, auth modal, toast) ──
   Each app sets the --oc-* tokens to match its own palette. */
:root{
  --oc-bg:#121A24; --oc-fg:#F2EDE3; --oc-muted:#7F8C9E; --oc-line:rgba(242,237,227,.14);
  --oc-accent:#E8B04B; --oc-accent-fg:#1A1206; --oc-font:inherit; --oc-radius:18px;
  --oc-ease:cubic-bezier(.16,1,.3,1);
}
.oc-nav{position:fixed;top:14px;right:14px;z-index:90;display:flex;gap:6px;align-items:center;font-family:var(--oc-font)}
.oc-nav button{background:var(--oc-bg);color:var(--oc-fg);border:1px solid var(--oc-line);border-radius:100px;
  padding:8px 12px;font:inherit;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s var(--oc-ease),background .2s}
.oc-nav button:active{transform:scale(.95)}
.oc-nav .oc-avatar{width:22px;height:22px;border-radius:50%;background:var(--oc-accent);color:var(--oc-accent-fg);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.oc-menu{position:fixed;top:56px;right:14px;z-index:91;background:var(--oc-bg);border:1px solid var(--oc-line);
  border-radius:16px;padding:8px;min-width:210px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  transform-origin:top right;animation:ocPop .35s var(--oc-ease) both;font-family:var(--oc-font)}
@keyframes ocPop{from{opacity:0;transform:scale(.9) translateY(-6px)}to{opacity:1;transform:none}}
.oc-menu a,.oc-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  color:var(--oc-fg);padding:11px 12px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.oc-menu a:hover,.oc-menu button:hover{background:rgba(127,140,158,.14)}
.oc-menu a.on{color:var(--oc-accent)}
.oc-menu i{width:9px;height:9px;border-radius:50%;flex:none}
.oc-menu hr{border:0;border-top:1px solid var(--oc-line);margin:6px 4px}
.oc-menu small{display:block;color:var(--oc-muted);font-size:11px;padding:4px 12px 6px}

.oc-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:end center;background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:ocFade .3s both;font-family:var(--oc-font)}
@media (min-width:640px){.oc-modal{place-items:center}}
@keyframes ocFade{from{opacity:0}to{opacity:1}}
.oc-sheet{width:100%;max-width:440px;background:var(--oc-bg);color:var(--oc-fg);border:1px solid var(--oc-line);
  border-radius:var(--oc-radius) var(--oc-radius) 0 0;padding:22px 22px 30px;animation:ocUp .5s var(--oc-ease) both;
  max-height:92vh;overflow:auto}
@media (min-width:640px){.oc-sheet{border-radius:var(--oc-radius)}}
@keyframes ocUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.oc-sheet h3{margin:0 0 4px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.oc-sheet p{color:var(--oc-muted);font-size:14px;margin:0 0 18px;line-height:1.45}
.oc-tabs{display:flex;gap:4px;background:rgba(127,140,158,.12);border-radius:100px;padding:4px;margin-bottom:18px}
.oc-tabs button{flex:1;border:0;background:none;color:var(--oc-muted);padding:9px;border-radius:100px;font:inherit;font-size:13.5px;cursor:pointer}
.oc-tabs button.on{background:var(--oc-fg);color:var(--oc-bg);font-weight:600}
.oc-sheet label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oc-muted);margin:0 0 6px}
.oc-sheet input{width:100%;box-sizing:border-box;background:rgba(127,140,158,.10);border:1px solid var(--oc-line);border-radius:12px;
  padding:13px 14px;color:var(--oc-fg);font:inherit;font-size:16px;margin-bottom:14px}
.oc-sheet input:focus{outline:0;border-color:var(--oc-accent);box-shadow:0 0 0 4px rgba(232,176,75,.12)}
.oc-btn{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:100px;padding:15px;
  background:var(--oc-accent);color:var(--oc-accent-fg);font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:transform .3s var(--oc-ease),opacity .2s}
.oc-btn:active{transform:scale(.97)}.oc-btn[disabled]{opacity:.5;pointer-events:none}
.oc-btn.ghost{background:transparent;color:var(--oc-fg);border:1px solid var(--oc-line);margin-top:8px}
.oc-err{color:#E6735C;font-size:13px;min-height:18px;margin:-6px 0 10px}
.oc-close{position:absolute;right:14px;top:12px;background:none;border:0;color:var(--oc-muted);font-size:22px;cursor:pointer;padding:6px;line-height:1}
.oc-sheet{position:relative}

.oc-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,24px);z-index:99;background:var(--oc-fg);color:var(--oc-bg);
  padding:12px 20px;border-radius:100px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  transition:all .45s var(--oc-ease);box-shadow:0 12px 30px rgba(0,0,0,.4);font-family:var(--oc-font);max-width:90vw;text-align:center}
.oc-toast.on{opacity:1;transform:translate(-50%,0)}
.oc-spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ocSpin .7s linear infinite}
@keyframes ocSpin{to{transform:rotate(360deg)}}