:root{
  --parchment:#f7f1e8;
  --parchment-deep:#efe4d6;
  --ink:#2b2320;
  --taupe:#6b5d54;
  --sand:#a08d80;
  --blush:#f2d7cf;
  --blush-deep:#e8a893;
  --spark:#e8572a;
  --spark-soft:#fbeae4;
  --card:#ffffff;
  --line:#e9ddcf;
  --marker:#f4d35e;
  --sky-1:#f8eeee;
  --sky-2:#f0dbdd;
  --sky-3:#e5c4c8;
  --grey-line:#d9dee5;
  --grey-text:#8b93a0;
  --grey-text-soft:#a9b0bb;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  overflow-x:hidden;
  background:var(--parchment);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  background:var(--card); border-radius:24px; padding:40px 32px; width:100%; max-width:340px;
  text-align:center; box-shadow:0 24px 60px rgba(43,35,32,.15); border:1px solid var(--line);
}
.login-avatar{width:64px; height:64px; margin:0 auto 16px; position:relative;}
.login-avatar .avatar-img, .login-avatar .avatar-fallback{width:64px; height:64px; font-size:26px;}
.login-avatar.croissant-avatar{
  position:static; right:auto; bottom:auto; margin:0 auto 16px;
  width:64px; height:64px; border-radius:50%; background:#fff; border:2px solid #fff;
  box-shadow:0 2px 8px rgba(43,35,32,.15); display:flex; align-items:center; justify-content:center;
}
.login-avatar.croissant-avatar .croissant-svg{width:40px; height:40px;}
.login-card h1{font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; font-weight:600;}
.login-tag{font-size:12px; color:var(--sand); font-style:italic; margin-top:4px; margin-bottom:24px;}
.login-card input{
  width:100%; padding:12px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--parchment); font-size:14px; color:var(--ink); margin-bottom:12px;
}
.login-card input:focus{outline:none; border-color:var(--spark);}
.login-card button{
  width:100%; padding:12px; border-radius:14px; border:none; background:var(--ink);
  color:var(--parchment); font-size:14px; font-weight:600;
}
.login-error{color:var(--spark); font-size:12px; margin-top:10px; min-height:16px;}

/* ---------- App shell ---------- */
.app{max-width:1200px; margin:0 auto; padding:20px 20px 60px;}

/* ---------- Hero band (sky/cloud header + search + filters) ---------- */
.hero-band{
  position:relative; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:24px;
  min-height:320px; padding:48px 24px 40px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(ellipse 55% 40% at 18% 25%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 50% 38% at 80% 15%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(ellipse 65% 45% at 55% 95%, rgba(255,255,255,.5), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 45%, var(--sky-3) 75%, var(--parchment) 100%);
}
.hero-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.head-right{
  position:absolute; top:0; right:0; display:flex; align-items:center; gap:10px; z-index:2;
}
.lock-badge{
  background:rgba(255,255,255,.6); border-radius:20px; padding:5px 11px;
  font-size:10px; color:var(--grey-text); font-weight:600; white-space:nowrap;
  backdrop-filter:blur(6px);
}
.icon-btn{
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); border-radius:12px; width:36px; height:36px;
  font-size:16px; color:var(--grey-text); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
.icon-btn:hover{background:#fff;}

.hero-center{
  position:relative; z-index:2; width:100%; max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.name-lockup{position:relative; display:inline-flex; align-items:baseline; gap:8px; padding-right:44px;}
.name-main{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:800;
  font-size:34px; letter-spacing:-.2px; color:var(--ink);
}
.name-script{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600;
  font-size:34px; color:var(--ink); position:relative; padding:0 3px;
}
.name-script::before{
  content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:11px;
  background:var(--marker); z-index:-1; transform:rotate(-1deg); border-radius:2px;
}
.croissant-avatar{
  position:absolute; right:0; bottom:-6px; width:42px; height:42px; border-radius:50%;
  background:#fff; border:2px solid #fff; box-shadow:0 3px 10px rgba(43,35,32,.18);
  display:flex; align-items:center; justify-content:center;
}
.croissant-avatar .croissant-svg{width:27px; height:27px;}

.tag{font-size:11.5px; color:var(--grey-text); letter-spacing:.4px; margin-top:8px;}

.search-wrap{position:relative; width:min(600px, 100%); margin:26px auto 6px;}
.search-underline{
  width:100%; border:none; border-bottom:1px solid var(--grey-line); background:transparent;
  padding:8px 2px; font-size:15px; font-style:italic; color:var(--ink); outline:none; text-align:center;
}
.search-underline::placeholder{color:var(--grey-text-soft);}
.search-underline:focus{border-bottom-color:var(--grey-text);}
.tag-suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:8px; display:none; flex-wrap:wrap; gap:6px; z-index:20;
  box-shadow:0 12px 30px rgba(43,35,32,.12); text-align:left;
}
.tag-suggest.show{display:flex;}
.hero-band .row{justify-content:center; max-width:100%;}
.hero-band .row.platforms{padding-top:18px; padding-bottom:0; flex-wrap:wrap; overflow:visible;}

@media (max-width:768px){
  .hero-band{padding:44px 20px 34px;}
  .name-main, .name-script{font-size:28px;}
}

@media (max-width:480px){
  .hero-band{padding-top:60px; min-height:0;}
  .name-main, .name-script{font-size:23px;}
  .name-lockup{padding-right:36px;}
  .croissant-avatar{width:34px; height:34px;}
  .croissant-avatar .croissant-svg{width:22px; height:22px;}
  .lock-badge{
    width:32px; height:32px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .lock-label{display:none;}
}

/* ---------- Filter rows ---------- */
.row{display:flex; gap:8px; padding:8px 0; flex-wrap:nowrap; overflow-x:auto; align-items:center; scrollbar-width:none;}
.row::-webkit-scrollbar{display:none;}
.row.expanded{flex-wrap:wrap; overflow:visible;}
.pill{
  border-radius:18px; padding:7px 15px; font-size:12.5px; cursor:pointer;
  background:rgba(255,255,255,.6); border:1px solid var(--grey-line); color:#5b6472;
  white-space:nowrap; user-select:none; transition:all .15s ease; flex-shrink:0;
  box-shadow:0 2px 8px rgba(30,50,80,.06); backdrop-filter:blur(6px);
}
.pill:hover{background:rgba(255,255,255,.9);}
.pill.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; box-shadow:none;}

.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0;}

.row.cats .pill{
  font-size:11.5px; padding:6px 14px;
  display:flex; align-items:center; gap:6px;
}

.pill .count{
  font-size:10px; background:rgba(43,35,32,.06); color:#5b6472; border-radius:8px; padding:1px 6px; font-weight:600;
}
.pill.on .count{background:rgba(255,255,255,.22); color:#fff;}

.row.tagsrow{gap:8px;}
.row.tagsrow .tlabel{
  font-size:9px; color:var(--grey-text-soft); text-transform:uppercase; letter-spacing:.8px;
  font-weight:600; margin-right:2px; flex-shrink:0; opacity:.7;
}
.row.tagsrow .pill{
  background:transparent; border:1px dashed var(--grey-line); color:#5b6472; font-size:11.5px; padding:6px 13px;
  display:flex; align-items:center; gap:6px; box-shadow:none;
}
.row.tagsrow .pill:hover{background:rgba(255,255,255,.7); border-style:solid;}
.row.tagsrow .pill.on{background:var(--ink); border:1px solid var(--ink); color:#fff; font-weight:600;}
.row.tagsrow .pill.on .count{background:rgba(255,255,255,.22); color:#fff;}

.morepill{
  background:rgba(255,255,255,.6) !important; border-color:var(--grey-line) !important;
  color:#5b6472 !important; font-weight:600;
}

.tag-active-bar{
  display:none; align-items:center; gap:8px; margin:2px 0 14px;
  background:var(--ink); color:#fff; border-radius:14px;
  padding:9px 16px; font-size:12px; cursor:pointer; width:fit-content;
}
.tag-active-bar.show{display:flex;}
.tag-active-bar b{color:#e3aeb3;}

/* ---------- Sort control ---------- */
.sort-control{
  position:relative; text-align:right; margin:18px 4px 14px;
}
.sort-toggle{
  background:none; border:none; font-size:13px; color:#aaa; font-family:inherit;
  cursor:pointer; padding:4px 2px;
}
.sort-toggle strong{color:#111; font-weight:600;}
.sort-caret{color:#aaa; font-size:10px;}
.sort-menu{
  position:absolute; top:calc(100% + 4px); right:2px; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.1); padding:6px; min-width:150px; z-index:20;
}
.sort-option{
  padding:8px 12px; font-size:13px; color:#444; border-radius:8px; cursor:pointer; text-align:left;
}
.sort-option:hover{background:#f7f7f7;}

/* ---------- Grid & Cards (editorial) ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; align-content:start;
  padding:0 0 32px;
}
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2, 1fr); gap:22px;}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr; gap:20px;}
}
.lcard{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden; position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.04); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  animation:pop .25s ease both;
}
.lcard:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.07);}
@keyframes pop{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);}}
.lcard.fresh{
  animation:freshIn .5s ease both;
  box-shadow:0 0 0 2px var(--spark), 0 14px 32px rgba(232,87,42,.18);
}
@keyframes freshIn{
  from{opacity:0; transform:translateY(-14px) scale(.95);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.card-meta{
  height:52px; padding:0 20px; background:#f7f7f7; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-category{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#555;
  text-transform:lowercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-category.sorting{color:#999; font-style:italic;}
.card-date{font-size:11.5px; color:#999; white-space:nowrap; flex-shrink:0;}

.card-image-wrap{height:320px; position:relative;}
.card-image{width:100%; height:100%; background-size:cover; background-position:center;}
.badge{
  position:absolute; top:12px; left:12px; background:rgba(0,0,0,.6); color:#fff;
  font-size:9px; border-radius:10px; padding:3px 8px; font-weight:600; letter-spacing:.3px;
}
.freshtag{
  position:absolute; top:12px; right:12px; background:var(--spark); color:#fff;
  font-size:8px; border-radius:9px; padding:3px 7px; font-weight:700; letter-spacing:.5px;
}
.card-menu-btn{
  position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.55); color:#fff;
  border:none; border-radius:10px; width:26px; height:22px; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease;
}
@media (hover:hover){
  .lcard:hover .card-menu-btn{opacity:1;}
}
@media (hover:none){
  .card-menu-btn{opacity:1;}
}

.card-content{padding:24px 26px 26px;}
.card-title{
  font-family:'Cormorant Garamond', Georgia, serif; font-size:26px; line-height:1.1;
  font-weight:600; color:#111; margin-bottom:12px;
}
.card-description{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14.5px; line-height:1.55;
  color:#666; margin-bottom:16px; font-style:normal;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-source{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; letter-spacing:.04em;
  color:#8a8a8a; display:flex; align-items:center; gap:6px;
}
.source-arrow{font-size:12px;}
.card-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}
.tchip{
  font-size:11px; color:#8a8a8a; border:1px dashed rgba(0,0,0,.12); border-radius:8px;
  padding:2px 8px; cursor:pointer; transition:all .12s ease; user-select:none;
}
.tchip:hover{background:#f7f7f7; border-style:solid;}

.empty{
  grid-column:1/-1; text-align:center; color:var(--sand); font-size:13px;
  padding:60px 20px; font-style:italic;
}

.hint-bar{
  margin-top:30px; background:var(--ink); color:var(--parchment); border-radius:16px;
  padding:12px 18px; font-size:12px; display:flex; gap:10px; align-items:center;
  line-height:1.4; width:fit-content; max-width:100%;
}
.hint-bar b{color:#f4b8a3;}

.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(16px);
  background:var(--ink); color:var(--parchment); border-radius:18px;
  padding:11px 18px; font-size:12px; white-space:nowrap; opacity:0;
  transition:all .4s ease; pointer-events:none; box-shadow:0 8px 20px rgba(43,35,32,.3); z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Modals ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(43,35,32,.45); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:100;
}
.modal{
  background:var(--parchment); border-radius:20px; width:100%; max-width:480px; max-height:85vh;
  overflow-y:auto; box-shadow:0 30px 70px rgba(43,35,32,.3);
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center; padding:20px 22px 10px;
  position:sticky; top:0; background:var(--parchment); z-index:2;
}
.modal-head h2{font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:600;}
.modal-tabs{display:flex; gap:8px; padding:6px 22px 14px;}
.tab-btn{
  border:1px solid var(--line); background:var(--card); color:var(--taupe); border-radius:16px;
  padding:7px 16px; font-size:12.5px;
}
.tab-btn.on{background:var(--ink); color:var(--parchment); border-color:var(--ink); font-weight:600;}
.modal-body{padding:0 22px 24px;}
.manage-section{margin-bottom:22px;}
.manage-section h3{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--sand); margin-bottom:10px;}
.manage-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.manage-row input, .manage-row select{
  flex:1; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card);
  font-size:13px; color:var(--ink);
}
.manage-row button{
  padding:9px 14px; border-radius:12px; border:none; background:var(--ink); color:var(--parchment);
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.manage-list{display:flex; flex-direction:column; gap:8px;}
.manage-item{
  display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px;
}
.manage-item .item-name{flex:1; font-size:13px; font-weight:600;}
.manage-item .item-name[contenteditable]{outline:none; border-bottom:1px dashed transparent;}
.manage-item .item-name[contenteditable]:focus{border-bottom:1px dashed var(--spark);}
.manage-item .item-count{font-size:10.5px; color:var(--sand);}
.manage-item button{
  border:none; background:var(--parchment-deep); color:var(--taupe); border-radius:10px;
  padding:5px 9px; font-size:11px;
}
.manage-item button.danger{background:var(--spark-soft); color:var(--spark);}
.pending-item{border-color:var(--blush-deep); background:var(--spark-soft);}

.chip-edit{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.chip-edit .chip{
  background:var(--blush); color:#8a4a38; border-radius:12px; padding:4px 8px 4px 12px; font-size:11.5px;
  display:flex; align-items:center; gap:6px;
}
.chip-edit .chip button{
  border:none; background:none; color:#8a4a38; font-size:12px; padding:0; line-height:1;
}
.danger-btn{
  width:100%; padding:11px; border-radius:14px; border:1px solid var(--spark); background:var(--spark-soft);
  color:var(--spark); font-weight:600; font-size:13px;
}

@media (max-width:480px){
  .card-modal{max-width:100%;}
}