/* Uploads area, styled to match the SpotMyPhotos library. */
:root{
  --bg:#f4f6f9; --panel:#fff; --ink:#0c2740; --ink2:#5b6b7d; --hair:#e3e9f0; --hair2:#eef2f7;
  --navy:#08294a; --blue:#0a72bc; --blue-soft:#e7f1fb;
  --amber:#e8a400; --green:#1f8a4c; --red:#c0392b;
  --r-card:12px; --r-ctl:9px;
  --sh-rest:0 1px 2px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.10);
  --sh-hover:0 10px 26px -8px rgba(16,40,67,.26);
  --gut:10px; --cols:5;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font:inherit}

/* ---- header (matches library) ---- */
header.up-head{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 16px;box-shadow:0 8px 24px -14px rgba(0,0,0,.55)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
.brand:focus-visible{outline:2px solid #56c2e8;outline-offset:3px;border-radius:8px}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0a72bc,#0e9bd6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.brand h1{font-size:15px;font-weight:700;white-space:nowrap}
.brand .cpill{font-size:11px;font-weight:600;color:#bfe0fb;background:rgba(255,255,255,.08);padding:3px 9px;border-radius:20px;white-space:nowrap}
.up-head .search{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:10px;padding:8px 12px}
.up-head .search svg{width:16px;height:16px;color:#bcd6ee;flex:0 0 auto}
.up-head .search input{flex:1;background:none;border:0;color:#fff;outline:none;font-size:14px}
.up-head .search input::placeholder{color:#9fc0dc}
.up-head .spacer{flex:1}
.dens{display:flex;background:rgba(255,255,255,.1);border-radius:9px;padding:3px;gap:2px}
.dens button{font-size:12px;font-weight:600;color:#bcd6ee;padding:5px 9px;border-radius:6px}
.dens button.on{background:#fff;color:var(--navy)}
.up-head a.switch,.up-head .hbtn{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);padding:7px 11px;border-radius:8px;font-size:13px;white-space:nowrap;background:none}
.up-head .hbtn.primary{background:var(--blue);border-color:var(--blue);font-weight:600}

/* ---- layout ---- */
.wrap{max-width:1500px;margin:0 auto;padding:16px 18px}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.bar h2{margin:0;font-size:19px}
.bar .spacer,.album-head .spacer{flex:1}
.tabs{display:inline-flex;background:#fff;border:1px solid var(--hair);border-radius:11px;padding:3px;gap:2px;box-shadow:var(--sh-rest)}
.tab{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);padding:7px 13px;border-radius:8px}
.tab.on{background:var(--navy);color:#fff}
.tab .n{font-variant-numeric:tabular-nums;opacity:.8}
button.primary{background:var(--blue);color:#fff;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600}
button.ghost{background:#fff;border:1px solid var(--hair);border-radius:8px;padding:8px 12px;font-size:14px;box-shadow:var(--sh-rest)}

/* ---- albums grid ---- */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.album{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;cursor:pointer;box-shadow:var(--sh-rest);transition:transform .15s,box-shadow .15s}
.album:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.album .cover{aspect-ratio:4/3;background:#dfe8f0 center/cover no-repeat;display:grid;place-items:center;color:var(--ink2);font-size:13px}
.album .meta{padding:11px 13px}
.album .meta .n{font-weight:700;font-size:15px}
.album .meta .d{color:var(--ink2);font-size:13px;margin-top:2px}
.empty{padding:56px 20px;text-align:center;color:var(--ink2)}

/* ---- album view ---- */
.crumbs{font-size:13px;color:var(--ink2);margin-bottom:8px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--blue);cursor:pointer;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:#b9c6d2}
.crumbs b{color:var(--ink)}
.folders-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin:4px 0 8px}
.folders{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.folder{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hair);border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;color:var(--ink);box-shadow:var(--sh-rest);cursor:pointer}
.folder:hover{border-color:#c9def0;box-shadow:var(--sh-hover)}
.folder svg{color:var(--blue)}
.album-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.album-head h2{margin:0;font-size:20px}
.album-head .d{color:var(--ink2)}
.dropzone{border:2px dashed #b9cde0;border-radius:var(--r-card);padding:22px;text-align:center;color:var(--ink2);background:#fff;margin-bottom:16px;cursor:pointer}
.dropzone.drag{border-color:var(--blue);background:var(--blue-soft)}
.prog{height:6px;background:var(--hair);border-radius:4px;overflow:hidden;margin:10px 0}
.prog i{display:block;height:100%;background:var(--blue);width:0;transition:width .2s}

/* ---- filter controls (All Photos view) ---- */
.allctrls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tabs.sm .tab{padding:6px 10px;font-size:12px}

/* ---- masonry photo grid (matches library .card) ---- */
#photos, #allPhotos{columns:var(--cols);column-gap:var(--gut)}
.pcard{position:relative;break-inside:avoid;margin:0 0 var(--gut);border-radius:var(--r-card);background:var(--panel);overflow:hidden;box-shadow:var(--sh-rest);transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.pcard img{width:100%;display:block;cursor:pointer;background:linear-gradient(100deg,#e8edf3 30%,#f2f5f9 50%,#e8edf3 70%)}
.pcard .star{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;background:rgba(8,30,55,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;opacity:.7;transition:opacity .15s}
.pcard:hover .star{opacity:1}
.pcard .star.on{color:var(--amber);background:rgba(8,30,55,.75)}
.pcard.fav .star{color:var(--amber)}
.pcard .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;font-size:12px;line-height:1.35;color:#fff;background:linear-gradient(to top,rgba(6,18,33,.85),transparent);opacity:0;transition:opacity .15s;outline:none}
.pcard:hover .cap,.pcard .cap:focus{opacity:1}
.pcard .cap:empty::before{content:"Add a caption";color:#cdd9e6}
@media (max-width:1100px){:root{--cols:4}}
@media (max-width:800px){:root{--cols:3}}
@media (max-width:520px){:root{--cols:2}}

/* ---- modal / toast / lightbox ---- */
.modal-bg{position:fixed;inset:0;background:rgba(10,25,40,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:14px;padding:22px;max-width:440px;width:100%}
.modal h3{margin:0 0 14px}
.modal label{display:block;font-size:13px;color:var(--ink2);margin:10px 0 4px}
.modal input{width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:8px;font-size:15px}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;font-size:14px;opacity:0;transition:opacity .2s;z-index:60;pointer-events:none}
.toast.on{opacity:1}
.toast.err{background:var(--red)}
.lb{position:fixed;inset:0;background:rgba(6,16,26,.9);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:70;padding:20px}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:76vh;border-radius:8px}
.lb .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.lb .acts button,.lb .acts a{background:#fff;border-radius:8px;padding:9px 13px;font-size:14px;text-decoration:none;color:var(--ink)}
.lb .acts .danger{background:var(--red);color:#fff}
select.movesel{padding:8px 10px;border:1px solid var(--hair);border-radius:8px}