:root{--teal:#08777c;--teal-dark:#05696f;--bg:#e4eff0;--text:#13202a;--muted:#6e7890;--border:#cfd6df}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top right,#f7fbfb 0,var(--bg) 40%,#eef4f4 100%);margin:0;color:var(--text);font-size:18px}
.container{max-width:1120px;margin:0 auto;padding:20px}
.hero{background:linear-gradient(135deg,var(--teal),#05666c);color:white;padding:26px 30px;border-radius:0 0 36px 0;margin-bottom:24px;box-shadow:0 14px 30px rgba(7,90,96,.18);display:block;width:100%}
.hero-link{display:flex;align-items:center;gap:18px;text-decoration:none;color:white;min-width:0;flex:1}
.hero h1{color:white;margin:0 0 8px;font-size:clamp(34px,6vw,58px);line-height:1.05}
.hero p{margin:0;font-size:clamp(18px,3vw,28px);line-height:1.25;color:white}
.camera{font-size:46px;line-height:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.18))}
.card{background:white;border-radius:26px;padding:26px;margin-bottom:22px;box-shadow:0 10px 28px rgba(25,50,60,.08);border:1px solid rgba(210,220,225,.8)}
h1,h2{color:var(--teal-dark)}
h2{font-size:clamp(30px,4.5vw,46px);margin:0 0 18px}
label{display:block;font-weight:800;margin:16px 0 8px;font-size:22px}
input,textarea,select{width:100%;padding:16px 18px;border-radius:20px;border:2px solid var(--border);margin:0 0 16px;font-size:20px;background:white}
textarea{min-height:100px}
button,.btn{background:var(--teal);color:white;border:none;padding:14px 22px;border-radius:18px;font-weight:800;font-size:19px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.secondary,button.secondary{background:#dff2f2;color:var(--teal-dark)}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.logout{background:transparent;color:white;border:2px solid rgba(255,255,255,.45);font-size:18px;padding:9px 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile{min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.thumb{width:100%;border-radius:16px;display:block}
.small{color:var(--muted);font-size:16px;line-height:1.4}
.error{color:#a30000;font-weight:700;background:#ffe8e8;border-radius:16px;padding:14px 18px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.corner{position:fixed;right:18px;bottom:18px;z-index:5}
.danger{background:#9e2a2b}
.iconbtn{width:44px;height:44px;padding:0;border-radius:15px;font-size:20px;line-height:1}
.iconbtn.wide{width:auto;padding:0 14px}
.iconlabel{position:absolute;left:-9999px}
.login-wrap{max-width:980px;margin:0 auto}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;flex-wrap:wrap}
.sort-actions{display:flex;gap:8px;flex-wrap:wrap}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:24px 0}
.inline-form{display:inline-block;margin:0}

@media(max-width:640px){
  body{font-size:16px}
  .container{padding:0 0 18px}
  .hero{border-radius:0 0 34px 0;margin:0 0 22px;padding:24px 22px}
  .topbar{display:grid;grid-template-columns:1fr auto;align-items:start}
  .hero-link{gap:12px;align-items:center}
  .camera{font-size:34px}
  .hero h1{font-size:40px;margin-bottom:6px}
  .hero p{font-size:22px}
  .hero-actions{flex-direction:column;align-items:flex-end;gap:7px}
  .logout{width:44px;height:44px;padding:0;border-radius:15px;font-size:0}
  .logout::before{content:"⏻";font-size:22px}
  .card{border-radius:24px;margin:18px 14px;padding:22px}
  h2{font-size:34px}
  label{font-size:22px}
  input,textarea,select{font-size:20px;padding:15px 16px}
  .toolbar{padding:0 14px;align-items:center}
  .sort-actions .btn{width:44px;height:44px;padding:0;border-radius:15px;font-size:0}
  .sort-actions .btn.sort-name::before{content:"A↧";font-size:19px}
  .sort-actions .btn.sort-latest::before{content:"🕘";font-size:20px}
  .toolbar .small{font-size:15px}
  .grid{grid-template-columns:1fr;gap:0}
  .tile{min-height:auto}
  .corner{position:fixed;right:14px;bottom:14px;width:54px;height:54px;border-radius:18px;padding:0;font-size:0}
  .corner::before{content:"+";font-size:34px;line-height:1}
  .btn.mobile-icon-text{font-size:0;width:44px;height:44px;padding:0}
  .btn.mobile-icon-text::before{font-size:21px}
  .edit-icon::before{content:"✎"}
  .delete-icon::before{content:"🗑"}
}

.photo-actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.photo-note{margin:12px 0 0;color:var(--text);font-size:18px;line-height:1.4;white-space:pre-wrap}
.iconbtn{width:44px;height:44px;padding:0;border-radius:15px;font-size:20px;line-height:1}
.download-icon::before{content:"⬇";font-size:21px}
@media(max-width:640px){
  .photo-note{font-size:16px}
}


/* v2.8 mobile readability fixes */
.card h2{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.hero h1{
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  .hero{
    padding:20px 18px;
    overflow:hidden;
  }
  .hero-link{
    min-width:0;
  }
  .hero-link > div:last-child{
    min-width:0;
  }
  .hero h1{
    font-size:34px;
    line-height:1.05;
    max-width:100%;
  }
  .hero p{
    font-size:18px;
    line-height:1.25;
    max-width:100%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .camera{
    font-size:28px;
    flex:0 0 auto;
  }
  .card{
    padding:20px;
  }
  .card h2{
    font-size:30px;
    line-height:1.12;
    margin-bottom:16px;
  }
  .tile{
    min-height:0;
  }
  .tile .actions h2{
    flex:1;
    min-width:0;
  }
  .grid{
    grid-template-columns:minmax(0, 1fr);
  }
}
@media(max-width:380px){
  .hero h1{font-size:30px}
  .card h2{font-size:27px}
  .btn{font-size:17px}
}


/* v2.9 desktop + tablet layout stabilization */
.container{
  overflow-x:hidden;
}
.hero{
  overflow:hidden;
}
.topbar{
  min-width:0;
}
.hero-link{
  min-width:0;
}
.hero-link > div:last-child{
  min-width:0;
}
.hero h1{
  font-size:clamp(34px, 4.8vw, 58px);
  overflow-wrap:break-word;
  word-break:normal;
}
.hero p{
  font-size:clamp(18px, 2.5vw, 28px);
  overflow-wrap:break-word;
}
.grid{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.card{
  min-width:0;
}
.card h2{
  font-size:clamp(28px, 3.1vw, 42px);
  line-height:1.12;
  overflow-wrap:break-word;
  word-break:normal;
}
.tile .actions{
  align-items:flex-start;
}
.tile .actions h2{
  flex:1;
  min-width:0;
}
.tile{
  min-width:0;
}
.iconbtn{
  flex:0 0 auto;
}

@media(min-width:641px) and (max-width:900px){
  .container{
    padding:18px;
  }
  .hero{
    padding:24px;
  }
  .hero h1{
    font-size:38px;
  }
  .hero p{
    font-size:22px;
  }
  .camera{
    font-size:38px;
  }
  .card{
    padding:24px;
  }
  .card h2{
    font-size:32px;
  }
  .grid{
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  }
}


/* v3.0 list layout instead of tiles */
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.list-row{
  background:white;
  border-radius:24px;
  padding:20px 22px;
  box-shadow:0 8px 22px rgba(25,50,60,.07);
  border:1px solid rgba(210,220,225,.85);
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(180px, .9fr) auto;
  gap:18px;
  align-items:center;
}
.list-title{
  font-size:30px;
  line-height:1.15;
  font-weight:800;
  color:var(--teal-dark);
  overflow-wrap:break-word;
}
.list-desc{
  margin-top:6px;
  color:var(--text);
  font-size:16px;
  line-height:1.35;
}
.list-meta{
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}
.list-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
.list-actions .btn:not(.iconbtn){
  padding:12px 18px;
  font-size:18px;
}

@media(max-width:760px){
  .list{
    padding:0 14px;
  }
  .list-row{
    grid-template-columns:1fr auto;
    gap:12px;
    padding:18px;
  }
  .list-main{
    grid-column:1 / 2;
  }
  .list-meta{
    grid-column:1 / 3;
    grid-row:2;
    font-size:15px;
  }
  .list-actions{
    grid-column:2;
    grid-row:1;
    align-self:start;
  }
  .list-title{
    font-size:26px;
  }
  .list-desc{
    font-size:15px;
  }
  .list-actions .open-text{
    display:none;
  }
}


/* v3.1 simplified stacked list layout */
.list-row{
  display:block;
  padding:18px 22px;
}
.list-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.list-main{
  min-width:0;
}
.list-title{
  font-size:32px;
  line-height:1.15;
  margin:0;
}
.list-desc{
  margin-top:10px;
}
.list-meta{
  margin-top:10px;
}
.list-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
@media(max-width:640px){
  .list-row{
    padding:16px 18px;
  }
  .list-title{
    font-size:26px;
  }
}

.list-title a{
  color:inherit;
  text-decoration:none;
}
.list-title a:hover{
  text-decoration:underline;
}