/* PostPix.site shared UI: time-aware greeting, site footer, AI loader.
   Uses each page's existing theme variables (--bg, --panel, --border, --text, --muted, --amber*). */
:root{--pp-footer-bg:#f1f2f5;}
:root[data-theme="dark"]{--pp-footer-bg:#0f1015;}

/* ---------- Greeting ---------- */
.pp-greet{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 8px;border-radius:12px;
  background:linear-gradient(135deg,var(--amber-dim),transparent);border:1px solid rgba(239,180,40,.28);cursor:default;flex-shrink:0;}
.pp-greet-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--panel);border:1px solid var(--border);}
.pp-greet-ico svg{width:19px;height:19px;display:block;}
.pp-greet-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.pp-greet .pp-hello{font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap;}
.pp-greet .pp-hello b{color:var(--amber-text);font-weight:900;}
.pp-greet .pp-email{font-size:11px;color:var(--muted);white-space:nowrap;}

/* ---------- Footer ---------- */
.pp-footer{margin-top:48px;background:var(--pp-footer-bg);border-top:1px solid var(--border);font-family:'Inter',sans-serif;color:var(--text);}
.pp-footer *{box-sizing:border-box;}
.pp-footer-inner{max-width:1180px;margin:0 auto;padding:46px 32px 0;}
.pp-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;}
.pp-f-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;margin-bottom:12px;color:var(--text);text-decoration:none;}
.pp-f-logo img{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block;}
.pp-f-about{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 16px;max-width:300px;}
.pp-footer a.pp-f-cta{display:inline-block;font-weight:800;font-size:13px;text-decoration:none;background:var(--amber);color:#1a1400;padding:10px 18px;border-radius:9px;}
.pp-footer a.pp-f-cta:hover{filter:brightness(1.06);}
.pp-f-head{font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;margin:0 0 14px;color:var(--text);}
.pp-f-col a{display:block;font-size:14px;color:var(--muted);text-decoration:none;padding:5px 0;line-height:1.4;}
.pp-f-col a:hover{color:var(--amber-text);}
.pp-f-contact{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.5;}
.pp-f-col .pp-f-contact a{display:inline;padding:0;color:var(--amber-text);font-weight:700;}
.pp-trust-row{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0;padding:20px 0;border-top:1px solid var(--border);}
.pp-trust{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text);
  background:var(--panel);border:1px solid var(--border);padding:8px 14px;border-radius:999px;}
.pp-trust svg{width:15px;height:15px;color:var(--amber-text);flex-shrink:0;}
.pp-footer-bottom{border-top:1px solid var(--border);padding:20px 0 28px;}
.pp-fb-copy{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.pp-fb-disclaimer{font-size:11.5px;color:var(--muted);line-height:1.6;opacity:.9;max-width:900px;}
@media (max-width:820px){
  .pp-footer-grid{grid-template-columns:1fr 1fr;}
  .pp-f-brand{grid-column:1/-1;}
  .pp-footer-inner{padding:36px 20px 0;}
}
@media (max-width:480px){.pp-footer-grid{grid-template-columns:1fr;}}

/* ---------- AI loader (picture paints in from bottom to top) ---------- */
.pp-loader{width:100%;max-width:340px;margin:16px auto 0;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px;text-align:center;font-family:'Inter',sans-serif;}
.pp-frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--panel-2);border:1px solid var(--border);}
.pp-frame::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:22px 22px;opacity:.55;}
.pp-art{position:absolute;inset:0;clip-path:inset(100% 0 0 0);animation:ppPaintUp 3.4s cubic-bezier(.55,.1,.35,1) infinite;}
.pp-art svg{width:100%;height:100%;display:block;}
.pp-scan{position:absolute;left:0;right:0;height:3px;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--amber),#fff,var(--amber),transparent);
  box-shadow:0 0 14px 3px rgba(239,180,40,.65);animation:ppScanUp 3.4s cubic-bezier(.55,.1,.35,1) infinite;}
.pp-spark{position:absolute;bottom:10%;width:10px;height:10px;border-radius:50%;background:var(--amber);opacity:0;
  box-shadow:0 0 10px 2px rgba(239,180,40,.8);animation:ppSpark 3.4s ease-in-out infinite;}
.pp-spark:nth-of-type(1){left:18%;animation-delay:.2s;}
.pp-spark:nth-of-type(2){left:52%;animation-delay:.9s;}
.pp-spark:nth-of-type(3){left:80%;animation-delay:1.5s;}
@keyframes ppPaintUp{0%{clip-path:inset(100% 0 0 0);}78%,100%{clip-path:inset(0 0 0 0);}}
@keyframes ppScanUp{0%{bottom:0;opacity:1;}78%{bottom:calc(100% - 3px);opacity:1;}86%,100%{bottom:calc(100% - 3px);opacity:0;}}
@keyframes ppSpark{0%,100%{opacity:0;transform:translateY(0) scale(.6);}40%{opacity:1;}70%{opacity:0;transform:translateY(-70px) scale(1);}}
.pp-loader .pp-title{font-weight:900;font-size:14.5px;margin:14px 0 4px;color:var(--text);}
.pp-loader .pp-msg{font-size:12.5px;color:var(--muted);min-height:18px;transition:opacity .25s ease;}
.pp-loader .pp-msg.pp-fade{opacity:0;}
.pp-dots{display:inline-flex;gap:4px;margin-left:4px;vertical-align:middle;}
.pp-dots i{width:4px;height:4px;border-radius:50%;background:var(--amber-text);animation:ppDot 1.2s infinite;}
.pp-dots i:nth-child(2){animation-delay:.2s;}
.pp-dots i:nth-child(3){animation-delay:.4s;}
@keyframes ppDot{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
.pp-loader .pp-hint{font-size:11px;color:var(--muted);opacity:.8;margin-top:10px;}
@media (prefers-reduced-motion:reduce){
  .pp-art,.pp-scan,.pp-spark{animation-duration:.01s;animation-iteration-count:1;}
  .pp-art{clip-path:inset(0 0 0 0);}
  .pp-scan{opacity:0;}
}

/* ---------- Phones: tidy three-row header ----------
   Row 1: logo + title (left) and theme toggle (right)
   Row 2: greeting + account buttons
   Row 3: navigation (scrolls sideways, never wraps) */
@media (max-width:700px){
  .topbar{padding:12px 14px 10px 14px !important;gap:10px !important;}
  .topbar .topbar-top{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:10px;}
  .topbar .topbar-left{flex:1 1 0;min-width:0;order:1;gap:10px;}
  .topbar .topbar-right{display:contents;}
  .topbar .theme-toggle-btn{order:2;flex:0 0 auto;width:36px;height:36px;}
  .topbar .topbar-account{order:3;flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .topbar h1{font-size:15.5px !important;line-height:1.25;letter-spacing:.2px !important;}
  .topbar .logo-icon{width:32px;height:32px;flex:0 0 auto;}
  .topbar .topbar-account .account-btn{padding:8px 12px;font-size:12px;}
  .pp-greet{min-width:0;padding:3px 9px 3px 5px;margin-right:auto;}
  .pp-greet .pp-email{display:none;}
  .pp-greet-ico{width:26px;height:26px;}
  .topbar .topbar-nav{width:100% !important;margin-left:0 !important;padding-bottom:4px;scrollbar-width:none;}
  .topbar .topbar-nav::-webkit-scrollbar{display:none;}
}

/* ---------- Top navigation: full-size tabs spanning the row + "Other Tools" dropdown ---------- */
.topbar .topbar-nav{margin-left:0;width:100%;max-width:100%;justify-content:space-between;gap:10px;padding:4px 0 6px;overflow-x:auto;overflow-y:hidden;}
.topbar .topbar-nav>*{flex:0 0 auto;}
.nav-dd{position:relative;}
.nav-dd .nav-btn{display:inline-flex;align-items:center;gap:8px;}
.nav-dd .nav-btn svg{width:12px;height:12px;transition:transform .15s;}
.nav-dd.open .nav-btn svg{transform:rotate(180deg);}
.nav-dd-menu{position:fixed;z-index:60;min-width:300px;max-width:calc(100vw - 16px);background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 14px 36px rgba(0,0,0,.18);display:none;}
.nav-dd.open .nav-dd-menu{display:block;}
.nav-dd-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text);}
.nav-dd-item:hover,.nav-dd-item:focus-visible{background:var(--amber-dim);outline:none;}
.nav-dd-item b{font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;}
.nav-dd-item small{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.4;}
.nav-dd-item i{font-style:normal;background:#0068fe;color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.4px;padding:2px 5px;border-radius:6px;line-height:1.2;}
.nav-dd-sep{height:1px;background:var(--border);margin:6px 8px;}

/* ---------- Top navigation: fit on one line with no scrollbar ----------
   postpix-ui.js trims each button's left/right padding (16px -> 8px) just enough to fit, and only
   if that is not enough lowers the text size a little. The scrollbar is always hidden. */
.topbar .topbar-nav{scrollbar-width:none;-ms-overflow-style:none;gap:var(--nav-gap,10px);}
.topbar .topbar-nav::-webkit-scrollbar{display:none;width:0;height:0;}
.topbar .topbar-nav .nav-btn{padding-left:var(--nav-pad,16px);padding-right:var(--nav-pad,16px);font-size:var(--nav-font,12.5px);}

.new-tag{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.4px;background:var(--amber);color:#1a1400;border-radius:999px;padding:2px 7px;margin-left:7px;vertical-align:middle}
.nav-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #1a1400;margin-left:2px;box-sizing:content-box}