:root{
      --bg:#0e0f10;--panel:#16181a;--panel2:#1b1e21;--ink:#ececec;--muted:#8b9096;
      --accent:#c9a35b;--accent-dim:#a8874a;--line:#26292c;--danger:#e78a8a;--ok:#7bd88f;
      --serif:'Iowan Old Style',Georgia,serif;--sans:system-ui,Segoe UI,Roboto,sans-serif;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh}
    a{color:var(--accent);text-decoration:none}
    button{font-family:inherit;cursor:pointer}
    .btn{padding:.5rem .85rem;border:1px solid var(--line);border-radius:8px;background:var(--panel2);
      color:var(--ink);font-size:.85rem}
    .btn:hover{border-color:var(--accent-dim)}
    .btn.primary{background:var(--accent);color:#141414;border-color:var(--accent);font-weight:600}
    .btn.danger{color:var(--danger);border-color:#43302f}
    .btn.danger:hover{background:#2a1c1c}
    .btn:disabled{opacity:.5;cursor:default}
    .hidden{display:none!important}

    /* ---- Login (centered) ---- */
    #loginWrap{min-height:100vh;display:grid;place-items:center}
    .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2.25rem;
      width:min(92vw,420px);text-align:center}
    .brand{font-family:var(--serif);font-size:1.6rem;margin:0 0 .25rem}
    .brand .a{color:var(--accent)}
    .sub{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.75rem}
    #loginWrap input{width:100%;padding:.75rem .9rem;border-radius:8px;border:1px solid var(--line);
      background:#0c0d0e;color:var(--ink);font-size:1rem;margin-bottom:.75rem}
    #loginWrap button.send{width:100%;padding:.75rem;border:0;border-radius:8px;background:var(--accent);
      color:#141414;font-weight:600;font-size:1rem}
    .msg{margin-top:1rem;font-size:.9rem;min-height:1.2em}
    .msg.ok{color:var(--ok)} .msg.err{color:var(--danger)}
    .fine{color:var(--muted);font-size:.8rem;margin-top:1.25rem}

    /* ---- App shell ---- */
    header{position:sticky;top:0;z-index:20;background:rgba(14,15,16,.92);backdrop-filter:blur(8px);
      border-bottom:1px solid var(--line);padding:.75rem 1.1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
    header .logo{font-family:var(--serif);font-size:1.15rem}
    header .logo .a{color:var(--accent)}
    header .spacer{flex:1}
    header .who{color:var(--muted);font-size:.8rem}
    .tabbar{display:flex;gap:.35rem;padding:.6rem 1.1rem 0;flex-wrap:wrap}
    .tab{padding:.45rem .8rem;border-radius:8px 8px 0 0;background:transparent;border:1px solid transparent;
      color:var(--muted);font-size:.85rem}
    .tab.active{background:var(--panel);border-color:var(--line);border-bottom-color:var(--panel);color:var(--ink)}
    main{padding:1.1rem;max-width:1200px;margin:0 auto}

    .banner{border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem}
    .banner.locked{background:#2a2013;border:1px solid #4a3a1c;color:#e9c88a}
    .banner.locked b{color:#f0d59a}

    /* ---- Upload dropzone ---- */
    .drop{border:2px dashed var(--line);border-radius:12px;padding:1.4rem;text-align:center;color:var(--muted);
      margin-bottom:1.1rem;transition:.15s;cursor:pointer}
    .drop:hover,.drop.over{border-color:var(--accent);color:var(--ink);background:var(--panel)}
    .drop b{color:var(--ink)}
    .up-status{font-size:.85rem;color:var(--muted);margin-bottom:1rem;min-height:1.1em}

    /* ---- Grid ---- */
    .toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
    .toolbar .count{color:var(--muted);font-size:.85rem}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
    .cell{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;
      cursor:grab;aspect-ratio:1;transition:.12s}
    .cell.drag{opacity:.4}
    .cell.over{outline:2px solid var(--accent);outline-offset:-2px}
    .cell img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
    .cell .num{position:absolute;top:.35rem;left:.35rem;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;
      padding:.1rem .4rem;border-radius:5px}
    .cell .flags{position:absolute;top:.35rem;right:.35rem;display:flex;gap:.2rem}
    .cell .flag{background:rgba(0,0,0,.65);font-size:.65rem;padding:.1rem .35rem;border-radius:5px}
    .cell .flag.hid{color:#e7b98a}
    .cell .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.8));
      color:#fff;font-size:.72rem;padding:1.2rem .45rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cell.hiddenphoto img{opacity:.4}

    /* ---- Editor drawer ---- */
    .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40}
    .drawer{position:fixed;top:0;right:0;height:100vh;width:min(94vw,440px);background:var(--panel);
      border-left:1px solid var(--line);z-index:41;overflow-y:auto;padding:1.1rem}
    .drawer h3{font-family:var(--serif);margin:.2rem 0 1rem}
    .drawer .prev{width:100%;border-radius:10px;border:1px solid var(--line);margin-bottom:1rem;display:block}
    .field{margin-bottom:.9rem}
    .field label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.3rem}
    .field input[type=text],.field textarea,select{width:100%;padding:.6rem .7rem;border-radius:8px;border:1px solid var(--line);
      background:#0c0d0e;color:var(--ink);font-size:.95rem;font-family:inherit}
    .field textarea{min-height:70px;resize:vertical}
    .toggles{display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0 1rem}
    .tog{display:flex;align-items:center;gap:.55rem;font-size:.9rem}
    .tog input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}
    .rotrow{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
    .drawer-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;border-top:1px solid var(--line);padding-top:1rem}
    .exif{font-size:.75rem;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:8px;
      padding:.6rem .7rem;margin-bottom:1rem;line-height:1.5}
    .savehint{font-size:.8rem;min-height:1.1em;margin-top:.5rem}
    .savehint.ok{color:var(--ok)} .savehint.err{color:var(--danger)}

    /* ---- Team + settings tables ---- */
    .section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem;max-width:640px}
    .section h2{font-family:var(--serif);margin:.1rem 0 1rem;font-size:1.2rem}
    .member{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
    .member .role{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
      border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem}
    .member .em{flex:1}
    .invite{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
    .invite input{flex:1;min-width:180px;padding:.55rem .7rem;border-radius:8px;border:1px solid var(--line);
      background:#0c0d0e;color:var(--ink);font-size:.9rem}
    .note{color:var(--muted);font-size:.82rem;margin-top:.8rem;line-height:1.5}
    .toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--panel2);
      border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;font-size:.88rem;z-index:60;opacity:0;
      transition:.2s;pointer-events:none}
    .toast.show{opacity:1}
    .toast.err{border-color:#43302f;color:var(--danger)}
    .empty{color:var(--muted);text-align:center;padding:3rem 1rem;font-size:.95rem}
  #captionToolbar{display:flex;gap:5px;margin:8px 0;flex-wrap:wrap}#captionToolbar .btn{padding:6px 11px;min-height:38px}#captionPreview{padding:12px;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 Georgia,serif}#captionPreview p{margin:0 0 .8em}#captionPreview a{color:inherit;text-decoration:underline}


    #cropDialog{box-sizing:border-box;width:min(760px,96vw);max-height:94dvh;overflow:auto;border:1px solid #657766;border-radius:12px;padding:20px;background:#faf8f0;color:#24372d}
    #cropDialog::backdrop{background:#14251cbb} #cropDialog select{padding:10px;max-width:100%}
    #cropCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:move}
    #cropPreview{display:block;max-width:100%;max-height:280px;width:auto;height:auto;margin:auto}
    .cropSliders{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.cropSliders label{min-width:0}.cropSliders input{display:block;width:100%;min-height:32px}
    .cropActions{position:sticky;bottom:-20px;padding:12px 0;background:#faf8f0}.cropActions button{min-height:44px}
  #captionToolbar{display:flex;gap:5px;margin:8px 0;flex-wrap:wrap}#captionToolbar .btn{padding:6px 11px;min-height:38px}#captionPreview{padding:12px;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 Georgia,serif}#captionPreview p{margin:0 0 .8em}#captionPreview a{color:inherit;text-decoration:underline}

#newGallery,#renameGallery,#sharingSetting,#dGallery,#dMove,#captionToolbar,#captionLinkBox,.toggles .tog:has(#dShowCaption),.toggles .tog:has(#dShowExif){display:none!important}
.field:has(#dGallery){display:none} .drawer{max-width:100vw} #dCategory{padding:10px;width:100%} .cell{touch-action:pan-y} .note{overflow-wrap:anywhere}

/* Center the Google-rendered sign-in control within the owner card. */
#googleLogin{display:flex;justify-content:center;align-items:center}