/* ============================================
   PostShelter — Light / Blue
   ============================================ */
:root {
  --bg:           #f5f6f8;
  --white:        #ffffff;
  --border:       #e2e5ea;
  --border-hover: #cdd1d8;

  --text:         #1a1d26;
  --text-sec:     #5f6776;
  --text-muted:   #9aa1af;

  --blue:         #2563eb;
  --blue-hover:   #1d4ed8;
  --blue-light:   #eff4ff;
  --blue-glow:    rgba(37,99,235,0.08);

  --green:        #16a34a;
  --green-light:  #ecfdf3;
  --red:          #dc2626;
  --red-light:    #fef2f2;
  --amber:        #d97706;
  --amber-light:  #fffbeb;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC",sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}

/* ── Top Bar ──────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--white);border-bottom:1px solid var(--border);
  padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:1rem;font-weight:700;color:var(--text);
  text-decoration:none;letter-spacing:-0.01em;
}
.logo:hover{color:var(--blue)}

.topbar-right{display:flex;align-items:center}
.auth-btn{
  padding:4px 14px;border:1px solid var(--border);border-radius:100px;
  background:var(--white);color:var(--text-sec);font-size:0.75rem;font-weight:500;
  cursor:pointer;transition:all .15s;
}
.auth-btn:hover{border-color:var(--border-hover);color:var(--text)}
.auth-btn.authed{border-color:var(--green);color:var(--green);background:var(--green-light)}
.auth-btn.authed:hover{background:var(--red-light);color:var(--red);border-color:var(--red)}

/* Login modal */
.login-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:210;width:90%;max-width:340px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06);
  animation:modalIn .25s var(--spring);
}
.login-modal.hidden{display:none}
.login-input{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text);font-size:0.85rem;
  font-family:inherit;outline:none;transition:border-color .15s;
}
.login-input:focus{border-color:var(--blue)}

/* ── Main ─────────────────────────────────── */
.main{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0 0 56px;
}

/* ── Card (download/error) ────────────────── */
.card{
  width:100%;max-width:440px;margin-top:48px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03);
}

.btn-text{
  display:block;width:100%;margin-top:14px;padding:9px;border:none;
  background:transparent;color:var(--blue);font-size:0.85rem;font-weight:500;
  cursor:pointer;border-radius:var(--r-sm);transition:background .15s;
}
.btn-text:hover{background:var(--blue-light)}

/* ── File List ─────────────────────────────── */
.list-section{
  width:100%;max-width:640px;padding:16px 20px 0;
}

.list-empty{
  text-align:center;padding-top:20vh;color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.list-empty p{font-size:0.9rem}
.list-empty-hint{font-size:0.8rem;color:var(--text-muted)}

.file-list{display:flex;flex-direction:column;gap:10px}

.fitem{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .15s;
  animation:slideUp .25s var(--ease);
}
.fitem:hover{border-color:var(--border-hover)}

.fitem-icon{
  flex-shrink:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-light);color:var(--blue);
  border-radius:var(--r-sm);
}

.fitem-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fitem-name{font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem-meta{font-size:0.72rem;color:var(--text-muted);display:flex;gap:8px}

.fitem-actions{display:flex;gap:4px;flex-shrink:0}
.fitem-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;background:transparent;
  color:var(--text-muted);border-radius:6px;cursor:pointer;transition:all .12s;
  text-decoration:none;
}
.fitem-btn:hover{background:var(--blue-light);color:var(--blue)}
.fitem-btn.copied{color:var(--green)}
.fitem-btn.btn-delete:hover{background:var(--red-light);color:var(--red)}

/* Note item in list */
.fitem-icon.note-icon{background:var(--amber-light);color:var(--amber)}
.fitem-note-text{
  font-size:0.8rem;color:var(--text-sec);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;
}

/* Note textarea in popover */
.note-input{
  width:100%;resize:vertical;min-height:80px;max-height:200px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text);font-size:0.82rem;
  font-family:inherit;line-height:1.5;outline:none;
  transition:border-color .15s;margin-bottom:12px;
}
.note-input:focus{border-color:var(--blue)}
.note-input::placeholder{color:var(--text-muted)}
.popover-note{width:340px}

/* Note preview modal */
.preview-modal{
  position:fixed;
  top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:210;width:90%;max-width:480px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06);
  animation:modalIn .25s var(--spring);
}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.preview-modal.hidden{display:none}
.preview-content{
  max-height:50vh;overflow-y:auto;
  padding:12px 14px;margin-bottom:12px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:0.82rem;line-height:1.6;color:var(--text);
  white-space:pre-wrap;word-break:break-all;
  font-family:inherit;
}

/* ── Download ──────────────────────────────── */
#download-section{text-align:center;animation:scaleIn .3s var(--spring)}
.dl-icon{color:var(--blue);margin-bottom:12px;animation:float 3s ease-in-out infinite}
.dl-filename{font-size:1rem;font-weight:600;margin-bottom:4px;word-break:break-all}
.dl-meta{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:0.8rem;margin-bottom:20px}
.dl-dot{opacity:.4}
.dl-btn{width:100%}

/* ── Error ─────────────────────────────────── */
#error-section{text-align:center;animation:scaleIn .3s var(--spring)}
.error-icon{color:var(--red);margin-bottom:12px}
#error-section h2{font-size:1rem;margin-bottom:4px}
.error-hint{color:var(--text-muted);font-size:0.8rem}

/* ── Bottom Bar ────────────────────────────── */
.bottombar{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--white);border-top:1px solid var(--border);
  padding:0;height:48px;display:flex;align-items:center;
}
.bottombar-inner{
  width:100%;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
}

.storage{
  display:flex;align-items:center;gap:6px;
}
.storage-label{font-size:0.7rem;color:var(--text-muted);white-space:nowrap}
.storage-track{
  width:64px;height:3px;
  background:var(--border);border-radius:2px;overflow:hidden;
}
.storage-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .5s var(--ease)}
.storage-value{font-size:0.7rem;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.bottombar-actions{display:flex;align-items:center;gap:8px}

.btn-outline-trigger{
  height:32px;padding:0 16px;border:1px solid var(--blue);border-radius:100px;
  background:var(--white);color:var(--blue);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:0.8rem;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);
}
.btn-outline-trigger:hover{background:var(--blue-light)}
.btn-outline-trigger:active{transform:scale(0.96)}

.btn-upload-trigger{
  height:32px;padding:0 18px;border:none;border-radius:100px;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:0.8rem;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);
}
.btn-upload-trigger:hover{background:var(--blue-hover)}
.btn-upload-trigger:active{transform:scale(0.96)}

/* ── Popover ───────────────────────────────── */
.popover-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.15);
  transition:opacity .2s;
}
.popover-backdrop.hidden{opacity:0;pointer-events:none}

.popover{
  position:fixed;
  bottom:68px;right:20px;
  z-index:210;
  width:320px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:0 8px 32px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06);
  padding:16px;
  transform-origin:bottom right;
  transition:opacity .2s var(--ease),transform .25s var(--spring);
}
.popover.hidden{
  opacity:0;transform:scale(0.9) translateY(8px);pointer-events:none;
}

.popover-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.popover-title{font-size:0.85rem;font-weight:600;color:var(--text)}

.btn-icon-sm{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:none;background:transparent;
  color:var(--text-muted);border-radius:6px;cursor:pointer;transition:all .15s;
}
.btn-icon-sm:hover{background:var(--bg);color:var(--text)}

/* File selected */
.pop-file{animation:slideUp .25s var(--spring)}
.pop-file-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);
}
.pop-file-icon{flex-shrink:0;color:var(--blue)}
.pop-file-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pop-file-name{font-size:0.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-file-size{font-size:0.7rem;color:var(--text-muted)}

/* TTL inside popover */
.pop-ttl{margin-top:12px}
.pop-ttl-label{display:block;font-size:0.7rem;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.pop-ttl-presets{display:flex;flex-wrap:wrap;gap:6px}
.ttl-btn{
  padding:5px 10px;border:1px solid var(--border);border-radius:100px;
  background:var(--white);color:var(--text-sec);font-size:0.72rem;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.ttl-btn:hover{border-color:var(--border-hover);color:var(--text)}
.ttl-btn.active{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:600}

.pop-ttl-custom{
  margin-top:10px;display:flex;align-items:center;gap:10px;
  animation:slideUp .2s var(--spring);
}
.pop-ttl-custom input[type="range"]{
  flex:1;-webkit-appearance:none;appearance:none;
  height:4px;background:var(--border);border-radius:2px;outline:none;
}
.pop-ttl-custom input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
}
.pop-ttl-custom input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  background:var(--blue);border-radius:50%;cursor:pointer;
  border:2px solid var(--white);box-shadow:0 0 0 3px var(--blue-glow);
}
.pop-ttl-custom input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;background:var(--blue);border-radius:50%;
  cursor:pointer;border:2px solid var(--white);
}
.ttl-display{font-size:0.72rem;color:var(--blue);font-weight:600;min-width:56px;text-align:right;font-variant-numeric:tabular-nums}

.pop-upload-btn{
  width:100%;margin-top:14px;padding:10px;
  font-size:0.85rem;
}

/* Progress inside popover */
.pop-progress{
  margin-top:14px;display:flex;align-items:center;gap:10px;
  animation:slideUp .2s var(--spring);
}
.progress-track{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{
  height:100%;width:0%;background:var(--blue);border-radius:3px;
  transition:width .3s var(--ease);position:relative;
}
.progress-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 1.5s infinite;
}
.progress-text{font-size:0.75rem;font-weight:600;color:var(--blue);min-width:30px;text-align:right;font-variant-numeric:tabular-nums}

/* ── Shared Button ─────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border:none;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;font-size:0.85rem;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;
}
.btn-primary:hover{background:var(--blue-hover);box-shadow:0 2px 8px rgba(37,99,235,0.25)}
.btn-primary:active{transform:scale(0.97)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Utility ───────────────────────────────── */
.hidden{display:none !important}

/* ── Animations ────────────────────────────── */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── Responsive ────────────────────────────── */
@media(max-width:520px){
  .main{padding:32px 16px 72px}
  .card{padding:20px}
  .topbar{padding:0 16px}
  .bottombar{padding:8px 16px}
  .popover{left:16px;right:16px;width:auto}
}