﻿/* Global mobile optimization */
/* Shared login-gate password toggle fix */
.password-field{
  position:relative;
}

.password-field input{
  padding-right:3rem !important;
}

.pw-toggle{
  position:absolute;
  right:0.45rem;
  top:auto;
  bottom:0.3rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  padding:0;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--muted-foreground);
  line-height:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  overflow:visible;
}

.pw-toggle:hover{
  color:var(--foreground);
  background:hsla(25, 20%, 20%, 0.06);
}

.pw-toggle:focus-visible{
  outline:none;
  color:var(--foreground);
  box-shadow:0 0 0 3px hsla(18, 85%, 60%, 0.18);
}

.pw-toggle::before{
  content:"";
  display:block;
  width:1.1rem;
  height:1.1rem;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363574c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.pw-toggle:hover::before,
.pw-toggle:focus-visible::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.pw-toggle svg{
  display:none;
  width:1.1rem;
  height:1.1rem;
  flex:none;
  pointer-events:none;
}

@media (max-width: 1024px){
  .container{width:100% !important;max-width:100% !important;padding-left:0.875rem !important;padding-right:0.875rem !important;}
  header .container{padding-left:0.875rem !important;padding-right:0.875rem !important;}
  .tab-stage{min-height:auto !important;}
}

@media (max-width: 900px){
  nav{display:none !important;}
  .mobile-menu-btn{display:flex !important;}
  .header-actions > a[href="mypage.html"],
  .header-actions > a[href="admin.html"]{display:none !important;}
  header .header-content{position:relative;}
  header .header-content.mobile-open nav{
    display:flex !important;
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    right:0;
    z-index:70;
    flex-direction:column;
    gap:0.25rem;
    padding:0.5rem;
    border:1px solid var(--border);
    border-radius:0.75rem;
    background:var(--card);
    box-shadow:0 12px 28px -18px rgba(0,0,0,0.4);
  }
  header .header-content.mobile-open nav a{
    width:100%;
    justify-content:flex-start;
  }
  .hero-section,.hero,.hero-content,.main-hero{padding-top:1rem !important;}
  .info-grid,.about-grid,.about-row,.animal-admin-grid,.dashboard-grid,.stats-grid{grid-template-columns:1fr !important;}
  .main-content{padding:1rem !important;}
  .form-row{grid-template-columns:1fr !important;}
  .animal-grid,.kids-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0.75rem !important;}
  .shelter-grid,.posts-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0.875rem !important;}
  .card,.animal-card,.shelter-card,.post-item{border-radius:0.85rem !important;}
  .calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr)) !important;}
  .fab{right:1rem !important;bottom:calc(env(safe-area-inset-bottom, 0px) + 0.85rem) !important;}
}

@media (max-width: 640px){
  html,body{overflow-x:hidden !important;}
  .container{padding-left:0.625rem !important;padding-right:0.625rem !important;}
  .header-content{min-height:3.75rem !important;height:auto !important;padding-top:0.35rem !important;padding-bottom:0.35rem !important;}
  .logo-text{font-size:1rem !important;line-height:1.1 !important;}
  .hero-title,h1{font-size:1.35rem !important;line-height:1.3 !important;}
  .section-title,h2{font-size:1.1rem !important;line-height:1.35 !important;}
  .hero-subtitle,.subtitle,p{font-size:0.92rem !important;}
  .animal-grid,.kids-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0.5rem !important;}
  .shelter-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0.5rem !important;}
  .posts-grid{grid-template-columns:1fr !important;}
  .animal-card-content{padding:0.55rem !important;display:grid !important;gap:0.28rem !important;min-width:0 !important;}
  .animal-card h3,.animal-card h4{font-size:0.8rem !important;line-height:1.25 !important;margin-bottom:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .animal-card-info,.animal-card p{font-size:0.68rem !important;line-height:1.35 !important;margin-bottom:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .animal-card-shelter{font-size:0.62rem !important;min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .animal-status{top:0.3rem !important;left:0.3rem !important;padding:0.16rem 0.38rem !important;font-size:0.58rem !important;}
  .about-intro,.about-info,.calendar-wrap,.volunteer-list,.modal-card{padding:0.9rem !important;}
  .slide img,.hero-image,.main-image,.post-media img{height:auto !important;max-height:280px !important;}
  .slider-controls{padding:0 0.35rem !important;}
  .slider-btn{width:2rem !important;height:2rem !important;font-size:1.4rem !important;}
  .login-modal,.signup-modal,.modal-card{max-width:100% !important;width:100% !important;}
  .btn{min-height:42px !important;}
  .footer-grid{grid-template-columns:1fr !important;gap:1rem !important;}

  #shelterGrid.shelter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.75rem !important;
  }

  #shelterGrid .shelter-card{
    border-radius:0.95rem !important;
  }

  #shelterGrid .shelter-card-content{
    padding:0.9rem 0.85rem 1rem !important;
  }

  #shelterGrid .shelter-card h3{
    font-size:0.98rem !important;
    line-height:1.32 !important;
    letter-spacing:-0.02em !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
    margin-bottom:0.45rem !important;
  }

  #shelterGrid .shelter-card-address,
  #shelterGrid .shelter-card-stat{
    font-size:0.78rem !important;
    line-height:1.45 !important;
    align-items:flex-start !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
  }

  #shelterGrid .shelter-card-address{
    margin-bottom:0.8rem !important;
    gap:0.32rem !important;
  }

  #shelterGrid .shelter-card-stats{
    gap:0.6rem !important;
  }

  #shelterGrid .shelter-card-address svg,
  #shelterGrid .shelter-card-stat svg{
    width:0.92rem !important;
    height:0.92rem !important;
    margin-top:0.08rem !important;
    flex:0 0 auto !important;
  }

  #shelterGrid .shelter-status{
    top:0.45rem !important;
    right:0.45rem !important;
    padding:0.22rem 0.65rem !important;
    font-size:0.68rem !important;
  }

  #volunteer .calendar-wrap{
    overflow-x:clip !important;
    padding:0.78rem !important;
  }

  #volunteer .week-header,
  #volunteer .week-grid,
  #volunteer .month-grid{
    min-width:0 !important;
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, calc((100% - 0.66rem) / 4))) !important;
    gap:0.22rem !important;
  }

  #volunteer .day-card{
    min-width:0 !important;
    min-height:64px !important;
    padding:0.42rem 0.38rem !important;
    border-radius:0.6rem !important;
    gap:0.22rem !important;
    overflow:hidden !important;
  }

  #volunteer .day-title{
    display:grid !important;
    gap:0.05rem !important;
    line-height:1.08 !important;
    letter-spacing:-0.03em !important;
    white-space:normal !important;
    min-width:0 !important;
  }

  #volunteer .day-title .day-date{
    font-size:0.76rem !important;
    font-weight:700 !important;
  }

  #volunteer .day-title .day-weekday{
    font-size:0.62rem !important;
    font-weight:600 !important;
    color:var(--muted-foreground) !important;
  }

  #volunteer .day-sub{
    font-size:0.58rem !important;
    line-height:1.15 !important;
  }

  #volunteer .day-dot{
    font-size:0.72rem !important;
  }
}

@media (max-width: 380px){
  #shelterGrid.shelter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.6rem !important;
  }

  #shelterGrid .shelter-card-content{
    padding:0.78rem 0.72rem 0.9rem !important;
  }

  #shelterGrid .shelter-card h3{
    font-size:0.9rem !important;
  }

  #shelterGrid .shelter-card-address,
  #shelterGrid .shelter-card-stat{
    font-size:0.72rem !important;
  }

  #volunteer .calendar-wrap{
    overflow-x:clip !important;
    padding:0.68rem !important;
  }

  #volunteer .week-header,
  #volunteer .week-grid,
  #volunteer .month-grid{
    min-width:0 !important;
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, calc((100% - 0.54rem) / 4))) !important;
    gap:0.18rem !important;
  }

  #volunteer .day-card{
    min-width:0 !important;
    min-height:58px !important;
    padding:0.36rem 0.3rem !important;
    overflow:hidden !important;
  }

  #volunteer .day-title{
    gap:0.04rem !important;
  }

  #volunteer .day-title .day-date{
    font-size:0.7rem !important;
  }

  #volunteer .day-title .day-weekday{
    font-size:0.56rem !important;
  }

  #volunteer .day-sub{
    font-size:0.54rem !important;
  }

  #volunteer .day-dot{
    font-size:0.66rem !important;
  }
}

@media (max-width: 768px){
  footer .footer-grid,
  footer .footer-brand,
  footer .footer-links,
  footer .footer-brand-tagline{
    display:none !important;
  }
  footer .footer-bottom{
    display:block !important;
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:none !important;
  }
  footer .footer-content{
    padding:0 !important;
  }
  footer .footer-content > *:not(p){
    display:none !important;
  }
  footer p{
    margin:0 !important;
    text-align:center !important;
    font-size:0.68rem !important;
    line-height:1.4 !important;
  }
}

@media (max-width: 900px){
  body{
    overflow-x:hidden !important;
  }

  .page-head,
  .page-header,
  .section-header,
  .calendar-head,
  .post-upload-head{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .page-head,
  .section-header,
  .calendar-head{
    gap:0.75rem !important;
  }

  .hero-buttons,
  .shelter-actions,
  .action-buttons,
  .filters,
  .animal-filters,
  .invite-link,
  .slot-cta{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .hero-buttons > *,
  .shelter-actions > *,
  .action-buttons > *,
  .filters > *,
  .animal-filters > *,
  .invite-link > *,
  .slot-cta > *{
    width:100% !important;
    min-width:0 !important;
  }

  .search-box,
  .filter-input,
  .filter-select,
  .manager-scope{
    width:100% !important;
    min-width:0 !important;
  }

  .region-dropdown{
    width:min(100%, 18rem) !important;
    align-self:flex-start !important;
  }

  .region-dropdown-btn{
    width:100% !important;
    min-width:0 !important;
  }

  .region-dropdown-menu{
    left:0 !important;
    right:auto !important;
    width:min(18rem, calc(100vw - 1.25rem)) !important;
    max-width:calc(100vw - 1.25rem) !important;
    box-sizing:border-box !important;
    max-height:min(60vh, 20rem) !important;
    overflow-y:auto !important;
  }

  .hero-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.75rem !important;
  }

  .hero-stats .stat-card{
    padding:0.9rem !important;
  }

  .tabs{
    gap:0 !important;
    padding-bottom:0.25rem !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .tabs::-webkit-scrollbar{
    display:none;
  }

  .tab{
    flex:0 0 auto !important;
    padding-left:0.9rem !important;
    padding-right:0.9rem !important;
  }

  .shelter-meta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0.75rem !important;
  }

  .animal-detail{
    grid-template-columns:1fr !important;
    gap:1.25rem !important;
  }

  .thumbnail-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .animal-header h1,
  .page-header h1,
  .shelter-title h1{
    font-size:1.6rem !important;
    line-height:1.25 !important;
  }

  .info-card,
  .about-intro,
  .about-info,
  .calendar-wrap,
  .volunteer-list,
  .post-item,
  .post-editor,
  .modal-card{
    padding:1rem !important;
  }

  .slide img,
  .hero-image{
    height:260px !important;
  }

  .post-media-grid,
  .slot-row{
    grid-template-columns:1fr !important;
  }

  .post-comment-input,
  .booking-row,
  .volunteer-item,
  .manager-row,
  .list-item{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .list-item-meta{
    text-align:left !important;
  }

  .manager-actions,
  .row-actions,
  .modal-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0.5rem !important;
    justify-content:stretch !important;
  }

  .manager-actions > *,
  .row-actions > *,
  .modal-actions > *{
    width:100% !important;
  }

  .table{
    overflow:visible !important;
  }

  .table-head{
    display:none !important;
  }

  .table-row{
    display:flex !important;
    flex-direction:column !important;
    gap:0.75rem !important;
    padding:1rem !important;
  }

  .table-row > div{
    width:100% !important;
    min-width:0 !important;
  }

  .table-row > div:not(:last-child){
    padding-bottom:0.6rem !important;
    border-bottom:1px dashed var(--border) !important;
  }

  #volunteerBookingRows .table-row > div,
  #inquiryRows .table-row > div,
  #dashRecentInquiries .table-row > div{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:0.85rem !important;
  }

  #volunteerBookingRows .table-row > div::before,
  #inquiryRows .table-row > div::before,
  #dashRecentInquiries .table-row > div::before{
    flex:0 0 4.6rem;
    font-size:0.72rem;
    font-weight:700;
    color:var(--muted-foreground);
  }

  #volunteerBookingRows .table-row > div:nth-child(1)::before{content:"예약";}
  #volunteerBookingRows .table-row > div:nth-child(2)::before{content:"날짜";}
  #volunteerBookingRows .table-row > div:nth-child(3)::before{content:"시간";}
  #volunteerBookingRows .table-row > div:nth-child(4)::before{content:"상태";}
  #volunteerBookingRows .table-row > div:nth-child(5)::before{content:"작업";}

  #inquiryRows .table-row > div:nth-child(1)::before{content:"문의자";}
  #inquiryRows .table-row > div:nth-child(2)::before{content:"동물";}
  #inquiryRows .table-row > div:nth-child(3)::before{content:"접수";}
  #inquiryRows .table-row > div:nth-child(4)::before{content:"상태";}
  #inquiryRows .table-row > div:nth-child(5)::before{content:"작업";}

  #dashRecentInquiries .table-row > div:nth-child(1)::before{content:"문의자";}
  #dashRecentInquiries .table-row > div:nth-child(2)::before{content:"동물";}
  #dashRecentInquiries .table-row > div:nth-child(3)::before{content:"접수";}

  .table-row .meta,
  .list-item-info p,
  .animal-list-meta h4,
  .animal-list-meta p,
  .checklist label span{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .chip,
  .badge,
  .status,
  .booking-tag{
    white-space:normal !important;
  }

  .stats-grid,
  .mini-stats,
  .content-grid,
  .panel-grid,
  .manager-grid,
  .editor-grid{
    grid-template-columns:1fr !important;
  }

  .stat-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0.75rem !important;
  }

  .admin-calendar-wrap,
  .calendar-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .calendar-nav,
  .view-toggle{
    width:100% !important;
    flex-wrap:wrap !important;
  }

  .cal-label{
    min-width:0 !important;
  }

  .week-header,
  .week-grid,
  .month-grid{
    min-width:32rem !important;
    grid-template-columns:repeat(7, minmax(3.8rem, 1fr)) !important;
  }

  #volunteer .calendar-wrap{
    overflow-x:clip !important;
  }

  #volunteer .week-header,
  #volunteer .week-grid,
  #volunteer .month-grid{
    min-width:0 !important;
    width:100% !important;
  }

  .animal-admin-grid,
  .animal-admin-grid .list-panel,
  .animal-admin-grid .edit-panel,
  .animal-admin-grid .preview-panel{
    min-width:0 !important;
  }

  .animal-image-grid,
  .link-row{
    grid-template-columns:1fr !important;
  }

  .intro-thumb-cell{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

@media (max-width: 640px){
  .hero-stats{
    grid-template-columns:1fr !important;
  }

  .page-header,
  .shelter-header{
    padding-top:1.5rem !important;
    padding-bottom:2rem !important;
  }

  .breadcrumb{
    flex-wrap:wrap !important;
    font-size:0.78rem !important;
  }

  .slide img,
  .hero-image{
    height:220px !important;
  }

  .tab{
    padding-left:0.8rem !important;
    padding-right:0.8rem !important;
  }
}

.admin-focus-card{
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--warm-cream);
}

.admin-focus-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.85rem;
}

.admin-focus-copy{
  display:grid;
  gap:0.25rem;
  min-width:0;
}

.admin-focus-kicker{
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--primary);
}

.admin-focus-copy h4{
  margin:0;
  font-size:1rem;
  line-height:1.35;
  letter-spacing:-0.02em;
}

.admin-focus-copy p{
  margin:0;
  font-size:0.84rem;
  line-height:1.55;
  color:var(--muted-foreground);
}

.admin-detail-grid{
  display:grid;
  gap:0.85rem;
}

.admin-detail-pills{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.75rem;
}

.admin-detail-pill{
  display:grid;
  gap:0.24rem;
  padding:0.85rem;
  border:1px solid var(--border);
  border-radius:0.9rem;
  background:#fff;
}

.admin-detail-pill span{
  font-size:0.74rem;
  font-weight:700;
  color:var(--muted-foreground);
}

.admin-detail-pill strong{
  font-size:0.95rem;
  line-height:1.45;
  color:var(--foreground);
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.admin-detail-field{
  display:grid;
  gap:0.4rem;
  padding:0.95rem;
  border:1px solid var(--border);
  border-radius:0.95rem;
  background:#fff;
}

.admin-detail-field strong{
  font-size:0.82rem;
  line-height:1.35;
}

.admin-detail-field .meta{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.admin-sticky-actions{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0.6rem;
  margin-top:0.95rem;
}

.admin-sticky-actions .btn{
  width:100%;
}

.admin-table-card.is-selected{
  border-color:var(--primary) !important;
  background:var(--coral-light) !important;
  box-shadow:0 0 0 1px rgba(232,121,62,0.16), 0 18px 30px -28px rgba(232,121,62,0.42) !important;
}

@media (min-width: 901px){
  #volunteerBookingRows .table-row.admin-table-card,
  #inquiryRows .table-row.admin-table-card{
    cursor:pointer;
  }

  #volunteerBookingRows .table-row.admin-table-card{
    grid-template-columns:minmax(0, 1.2fr) minmax(6.5rem, 0.7fr) minmax(6rem, 0.65fr) minmax(5.8rem, 0.55fr) auto;
  }

  #inquiryRows .table-row.admin-table-card{
    grid-template-columns:minmax(0, 1.1fr) minmax(6.8rem, 0.62fr) minmax(0, 1.35fr) minmax(6rem, 0.52fr);
  }

  .admin-page[data-page="inquiry"] .table-head{
    grid-template-columns:minmax(0, 1.1fr) minmax(6.8rem, 0.62fr) minmax(0, 1.35fr) minmax(6rem, 0.52fr);
  }

  .admin-page .table-row.admin-table-card{
    gap:0.8rem;
    align-items:start;
    padding:0.95rem 1rem;
  }

  .admin-page .table-row.admin-table-card > *{
    min-width:0;
  }

  .admin-page .table-row.admin-table-card > .table-card-main{
    display:grid;
    gap:0.3rem;
    min-width:0;
  }

  .admin-page .table-row.admin-table-card > .table-card-field{
    display:grid;
    gap:0.24rem;
    align-content:start;
    min-width:0;
  }

  .admin-page .table-row.admin-table-card .table-card-label{
    display:block;
    font-size:0.7rem;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--muted-foreground);
  }

  .admin-page .table-row.admin-table-card .table-card-value{
    min-width:0;
    font-size:0.9rem;
    line-height:1.5;
    color:var(--foreground);
    word-break:keep-all;
    overflow-wrap:anywhere;
  }

  .admin-page .table-row.admin-table-card .table-card-main .name{
    font-size:0.96rem;
    line-height:1.35;
  }

  .admin-page .table-row.admin-table-card .table-card-main .meta{
    font-size:0.8rem;
    line-height:1.45;
    color:var(--muted-foreground);
    word-break:keep-all;
    overflow-wrap:anywhere;
  }

  .admin-page .table-row.admin-table-card .table-card-status .status{
    justify-self:flex-start;
  }

  .admin-page .table-row.admin-table-card .table-card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.45rem;
    justify-content:flex-end;
    align-items:center;
    align-self:center;
  }

  .admin-page .table-row.admin-table-card .table-card-actions .btn,
  .admin-page .table-row.admin-table-card .table-card-actions .chip{
    min-height:2.35rem;
    padding:0.45rem 0.7rem;
  }

  #inquiryRows .table-card-value--snippet{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  #inquiryRows .table-row.admin-table-card .table-card-actions{
    display:none;
  }
}

@media (max-width: 1200px){
  .admin-page[data-page="animals"] .edit-panel .card-content{
    display:grid !important;
    gap:0.9rem !important;
  }

  .admin-page[data-page="animals"] .animal-mobile-preview{
    display:inline-flex !important;
  }

  .admin-page[data-page="animals"] .animal-edit-header-actions{
    width:100% !important;
  }

  .admin-page[data-page="animals"] .animal-edit-header-actions .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  .admin-page[data-page="animals"] .animal-edit-overview{
    grid-template-columns:minmax(0, 1fr) auto !important;
  }

  .admin-page[data-page="animals"] .animal-form-section{
    margin:0 !important;
    border:1px solid rgba(226,214,201,0.95) !important;
    border-radius:1rem !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:0 14px 30px -30px rgba(53,34,18,0.16) !important;
  }

  .admin-page[data-page="animals"] .animal-form-section > summary{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:0.8rem !important;
    padding:0.92rem 1rem !important;
    cursor:pointer !important;
    list-style:none !important;
  }

  .admin-page[data-page="animals"] .animal-form-section > summary::after{
    content:"";
    flex:0 0 0.58rem;
    width:0.58rem;
    height:0.58rem;
    margin-top:0.26rem;
    border-right:2px solid rgba(102,85,70,0.72);
    border-bottom:2px solid rgba(102,85,70,0.72);
    transform:rotate(45deg);
    transition:transform 0.2s ease;
  }

  .admin-page[data-page="animals"] .animal-form-section[open] > summary::after{
    transform:rotate(225deg);
  }

  .admin-page[data-page="animals"] .animal-form-section-title{
    display:block !important;
    font-size:0.94rem !important;
    font-weight:800 !important;
    line-height:1.28 !important;
    letter-spacing:-0.02em !important;
    color:var(--foreground) !important;
  }

  .admin-page[data-page="animals"] .animal-form-section-meta{
    display:block !important;
    margin-top:0.12rem !important;
    font-size:0.75rem !important;
    line-height:1.45 !important;
    color:var(--muted-foreground) !important;
  }

  .admin-page[data-page="animals"] .animal-form-section[open] > summary{
    border-bottom:1px solid rgba(226,214,201,0.7) !important;
  }

  .admin-page[data-page="animals"] .animal-section-body{
    padding:1rem !important;
    gap:0.9rem !important;
  }

  .admin-page[data-page="animals"] .animal-form-section:not([open]) .animal-section-body{
    display:none !important;
  }
}

@media (max-width: 900px){
  .admin-layout .main-content,
  body.admin-app-mode .main-content{
    background:#fff !important;
    overflow-x:clip !important;
  }

  .admin-page .page-head{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    margin-bottom:1rem !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  .admin-page .page-copy{
    min-width:0 !important;
  }

  .admin-page .page-kicker{
    font-size:0.67rem !important;
  }

  .admin-page .page-title{
    font-size:1.34rem !important;
    line-height:1.18 !important;
    letter-spacing:-0.03em !important;
  }

  .admin-page .page-description{
    max-width:none !important;
    font-size:0.82rem !important;
    line-height:1.5 !important;
  }

  .admin-page .page-head > .btn{
    width:100% !important;
    min-height:2.95rem !important;
  }

  .dashboard-priority-layout{
    grid-template-columns:1fr !important;
    gap:0.9rem !important;
    margin-bottom:1rem !important;
  }

  .dashboard-priority-head{
    flex-direction:column !important;
    gap:0.65rem !important;
  }

  .dashboard-priority-copy h3{
    font-size:1.05rem !important;
    line-height:1.32 !important;
  }

  .dashboard-priority-copy p{
    font-size:0.8rem !important;
    line-height:1.5 !important;
  }

  .dashboard-priority-badge{
    align-self:flex-start !important;
  }

  .dashboard-task-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.55rem !important;
  }

  .dashboard-task-grid > .dashboard-task-btn:last-child{
    grid-column:1 / -1 !important;
  }

  .dashboard-task-btn{
    padding:0.9rem !important;
    border-radius:0.95rem !important;
  }

  .dashboard-task-btn strong{
    font-size:1rem !important;
  }

  .dashboard-task-btn p{
    font-size:0.75rem !important;
    line-height:1.45 !important;
  }

  .dashboard-activity-card .card-header{
    align-items:flex-start !important;
  }

  .dashboard-activity-item,
  .dashboard-summary-row{
    padding:0.82rem !important;
    border-radius:0.95rem !important;
  }

  .dashboard-activity-item strong,
  .dashboard-summary-row strong{
    font-size:0.9rem !important;
  }

  .dashboard-activity-item p,
  .dashboard-summary-row p{
    font-size:0.78rem !important;
    line-height:1.45 !important;
  }

  .admin-page[data-page="animals"] .page-head{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    margin:0 0 1rem !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  .admin-page[data-page="animals"] .animal-page-actions{
    width:100% !important;
    padding:0.88rem !important;
    border:1px solid rgba(226,214,201,0.95) !important;
    border-radius:1rem !important;
    background:rgba(255,255,255,0.94) !important;
    box-shadow:0 18px 34px -32px rgba(53,34,18,0.22) !important;
    gap:0.5rem !important;
  }

  .admin-page[data-page="animals"] .animal-page-actions .btn{
    width:100% !important;
    min-height:2.8rem !important;
    margin:0 !important;
  }

  .admin-page .stat-card,
  .admin-page .content-card,
  .admin-page .mini-card,
  .admin-page .table-row,
  .master-shelter-picker{
    border-color:rgba(226,214,201,0.95) !important;
    box-shadow:0 18px 34px -32px rgba(53,34,18,0.22) !important;
  }

  .admin-page .mini-card{
    padding:1rem !important;
    gap:0.32rem !important;
  }

  .admin-page .card-header{
    padding:1rem 1rem 0.85rem !important;
    gap:0.45rem !important;
  }

  .admin-page .card-header h3{
    font-size:0.98rem !important;
    line-height:1.35 !important;
    letter-spacing:-0.02em !important;
  }

  .admin-page .card-content{
    padding:1rem !important;
  }

  .admin-page .toolbar{
    align-items:stretch !important;
    gap:0.55rem !important;
    margin-bottom:0.95rem !important;
  }

  .admin-page .toolbar .search{
    flex:1 1 100% !important;
    min-height:3rem !important;
    padding:0.78rem 0.85rem !important;
    border-radius:0.95rem !important;
    background:#fff !important;
  }

  .admin-page .toolbar select{
    flex:1 1 calc(50% - 0.275rem) !important;
    min-width:0 !important;
    min-height:2.8rem !important;
    padding:0.72rem 0.85rem !important;
    border-radius:0.9rem !important;
    background:#fff !important;
  }

  .admin-page .toolbar > .btn,
  .admin-page .toolbar > .chip{
    min-height:2.8rem !important;
  }

  .admin-page .toolbar > .chip{
    padding:0.55rem 0.8rem !important;
  }

  .admin-page[data-page="animals"] .animal-edit-overview{
    grid-template-columns:1fr !important;
    gap:0.6rem !important;
    padding:0.95rem 1rem !important;
  }

  .admin-page[data-page="animals"] .animal-edit-overview-copy strong{
    font-size:1rem !important;
  }

  .admin-page[data-page="animals"] .animal-edit-overview-copy p{
    font-size:0.8rem !important;
    line-height:1.5 !important;
  }

  .admin-page[data-page="animals"] .animal-edit-overview .pill{
    justify-self:flex-start !important;
  }

  .admin-page[data-page="animals"] .animal-mobile-actions{
    position:static !important;
    bottom:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.55rem !important;
    margin-top:0.35rem !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    z-index:auto !important;
  }

  .admin-page[data-page="animals"] .animal-mobile-actions .btn{
    min-height:2.85rem !important;
    border-radius:0.9rem !important;
  }

  .admin-page[data-page="animals"] .animal-form-section > summary{
    padding:0.88rem 0.92rem !important;
  }

  .admin-page[data-page="animals"] .animal-section-body{
    padding:0.92rem !important;
  }

  .admin-page[data-page="animals"] .animal-image-upload .slide-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.55rem !important;
  }

  .admin-page[data-page="volunteer"],
  .admin-page[data-page="volunteer"] .content-card,
  .admin-page[data-page="volunteer"] .card-content{
    min-width:0 !important;
    overflow-x:clip !important;
  }

  .admin-page[data-page="volunteer"] .admin-calendar-wrap{
    overflow-x:clip !important;
    padding:0.78rem !important;
  }

  .admin-page[data-page="volunteer"] .week-header{
    display:none !important;
  }

  .admin-page[data-page="volunteer"] .week-grid,
  .admin-page[data-page="volunteer"] .month-grid{
    min-width:0 !important;
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, calc((100% - 0.66rem) / 4))) !important;
    gap:0.22rem !important;
  }

  .admin-page[data-page="volunteer"] .day-card{
    min-width:0 !important;
    min-height:64px !important;
    padding:0.42rem 0.38rem !important;
    border-radius:0.6rem !important;
    gap:0.22rem !important;
    overflow:hidden !important;
  }

  .admin-page[data-page="volunteer"] .day-title{
    display:grid !important;
    gap:0.05rem !important;
    line-height:1.08 !important;
    letter-spacing:-0.03em !important;
    white-space:normal !important;
    min-width:0 !important;
  }

  .admin-page[data-page="volunteer"] .day-title .day-date{
    font-size:0.76rem !important;
    font-weight:700 !important;
  }

  .admin-page[data-page="volunteer"] .day-title .day-weekday{
    font-size:0.62rem !important;
    font-weight:600 !important;
    color:var(--muted-foreground) !important;
  }

  .admin-page[data-page="volunteer"] .day-sub{
    font-size:0.58rem !important;
    line-height:1.15 !important;
  }

  .admin-page[data-page="inquiry"],
  .admin-page[data-page="inquiry"] .content-card,
  .admin-page[data-page="inquiry"] .card-content,
  .admin-page[data-page="inquiry"] .panel-grid{
    min-width:0 !important;
    overflow-x:clip !important;
  }

  .admin-page[data-page="inquiry"] #inquiryModeSelector{
    width:100% !important;
    max-width:none !important;
  }

  .admin-page[data-page="inquiry"] .toolbar{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.55rem !important;
  }

  .admin-page[data-page="inquiry"] .toolbar .search{
    grid-column:1 / -1 !important;
  }

  .admin-page[data-page="inquiry"] .toolbar > .chip{
    width:100% !important;
    margin:0 !important;
    justify-content:center !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-row.admin-table-card{
    gap:0.72rem !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-main{
    gap:0.3rem !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-title-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0.6rem !important;
    min-width:0 !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-title-row .name{
    min-width:0 !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-title-row .status{
    flex:0 0 auto !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-value--snippet{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    line-height:1.5 !important;
  }

  .admin-page[data-page="inquiry"] #inquiryDetailCard .card-header{
    align-items:flex-start !important;
  }

  .admin-page[data-page="inquiry"] #inquiryDetail{
    gap:0.9rem !important;
  }

  .admin-page[data-page="volunteer"] #volunteerBookingDetailCard,
  .admin-page[data-page="volunteer"] #volunteerBookingDetail,
  .admin-page[data-page="volunteer"] #volunteerBookingDetailActions{
    overflow:visible !important;
  }

  .admin-page[data-page="volunteer"] #volunteerBookingDetailActions{
    position:static !important;
    bottom:auto !important;
    z-index:auto !important;
    margin-top:0.85rem !important;
    padding:0.85rem 0 0 !important;
    border:none !important;
    border-top:1px solid rgba(226,214,201,0.92) !important;
    border-radius:0 !important;
    background:#fffdfb !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .admin-page[data-page="inquiry"] #inquiryDetailActions{
    position:static !important;
    bottom:auto !important;
    z-index:auto !important;
    margin-top:0.15rem !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-page .table{
    gap:0.75rem !important;
  }

  .admin-focus-card{
    border-color:rgba(226,214,201,0.95) !important;
    border-radius:1.05rem !important;
    background:linear-gradient(180deg, #fffaf5 0%, #fffdfb 100%) !important;
    box-shadow:0 18px 34px -32px rgba(53,34,18,0.22) !important;
  }

  .admin-focus-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0.7rem !important;
  }

  .admin-detail-pills{
    grid-template-columns:1fr !important;
    gap:0.65rem !important;
  }

  .admin-detail-pill,
  .admin-detail-field{
    border-radius:0.95rem !important;
  }

  .admin-sticky-actions{
    position:sticky !important;
    bottom:calc(var(--admin-bottom-nav-offset, 7.6rem) + 0.8rem) !important;
    z-index:18 !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.55rem !important;
    padding:0.82rem !important;
    border:1px solid rgba(148,163,184,0.18) !important;
    border-radius:1rem !important;
    background:rgba(255,255,255,0.96) !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:0 18px 42px -30px rgba(15,23,42,0.28) !important;
  }

  .admin-sticky-actions .btn{
    min-height:2.85rem !important;
    border-radius:0.9rem !important;
  }

  #inquiryDetailActions .btn-danger{
    grid-column:1 / -1 !important;
  }

  #volunteerBookingRows .admin-table-card,
  #inquiryRows .admin-table-card{
    cursor:pointer !important;
  }

  #volunteerBookingRows .admin-table-card .table-card-actions,
  #inquiryRows .admin-table-card .table-card-actions{
    display:none !important;
  }

  #volunteerBookingDetailCard,
  #inquiryDetailCard{
    scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 7rem) !important;
  }

  .admin-page .table-row.admin-table-card{
    gap:0.8rem !important;
    padding:1rem !important;
    border-radius:1.05rem !important;
    background:linear-gradient(180deg, #ffffff 0%, #fffdfb 100%) !important;
  }

  .admin-page .table-row.admin-table-card > .table-card-main,
  .admin-page .table-row.admin-table-card > .table-card-field,
  .admin-page .table-row.admin-table-card > .table-card-actions{
    padding-bottom:0 !important;
    border-bottom:none !important;
  }

  .admin-page .table-row.admin-table-card > .table-card-main{
    display:grid !important;
    gap:0.24rem !important;
  }

  .admin-page .table-row.admin-table-card > .table-card-field{
    display:grid !important;
    grid-template-columns:minmax(4.2rem, auto) 1fr !important;
    gap:0.75rem !important;
    align-items:center !important;
  }

  .admin-page .table-row.admin-table-card .table-card-label{
    display:block !important;
    font-size:0.7rem !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
    color:var(--muted-foreground) !important;
    white-space:nowrap !important;
  }

  .admin-page .table-row.admin-table-card .table-card-value{
    min-width:0 !important;
    font-size:0.9rem !important;
    line-height:1.45 !important;
    color:var(--foreground) !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
  }

  .admin-page .table-row.admin-table-card .table-card-main .name{
    font-size:1rem !important;
    line-height:1.3 !important;
  }

  .admin-page .table-row.admin-table-card .table-card-main .meta{
    font-size:0.78rem !important;
    line-height:1.45 !important;
  }

  .admin-page .table-row.admin-table-card .table-card-status{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .admin-page .table-row.admin-table-card .table-card-status .status{
    justify-self:auto !important;
  }

  .admin-page .table-row.admin-table-card .table-card-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.5rem !important;
  }

  .admin-page .table-row.admin-table-card .table-card-actions.table-card-actions--triple{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .admin-page .table-row.admin-table-card .table-card-actions .btn,
  .admin-page .table-row.admin-table-card .table-card-actions .chip{
    width:100% !important;
    min-height:2.7rem !important;
    justify-content:center !important;
    padding:0.55rem 0.65rem !important;
    border-radius:0.85rem !important;
    font-size:0.78rem !important;
  }

  #volunteerBookingRows .table-row.admin-table-card > .table-card-main::before,
  #volunteerBookingRows .table-row.admin-table-card > .table-card-field::before,
  #volunteerBookingRows .table-row.admin-table-card > .table-card-actions::before,
  #inquiryRows .table-row.admin-table-card > .table-card-main::before,
  #inquiryRows .table-row.admin-table-card > .table-card-field::before,
  #inquiryRows .table-row.admin-table-card > .table-card-actions::before{
    content:none !important;
    display:none !important;
  }

  .admin-page .admin-list-card{
    margin-bottom:0.75rem !important;
    padding:0.92rem !important;
    border:1px solid rgba(226,214,201,0.95) !important;
    border-radius:1rem !important;
    background:linear-gradient(180deg, #ffffff 0%, #fffdfb 100%) !important;
    box-shadow:0 16px 30px -30px rgba(53,34,18,0.18) !important;
  }

  .admin-page .admin-list-card:last-child{
    margin-bottom:0 !important;
  }

  .admin-page .admin-list-card .list-item-info h4{
    font-size:0.96rem !important;
    line-height:1.32 !important;
    letter-spacing:-0.02em !important;
  }

  .admin-page .admin-list-card .list-item-info p{
    font-size:0.8rem !important;
    line-height:1.45 !important;
  }

  .admin-page .empty-state,
  .admin-page .table-empty,
  .admin-page .timeline-empty{
    padding:1rem !important;
    border:1px dashed rgba(218,198,181,0.95) !important;
    border-radius:1rem !important;
    background:#fffaf7 !important;
  }

  .admin-bottom-nav{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(var(--admin-bottom-nav-count, 6), minmax(0, 1fr)) !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    width:100% !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
    gap:0.22rem !important;
    padding:0.4rem 0.55rem calc(env(safe-area-inset-bottom, 0px) + 0.45rem) !important;
    background:rgba(255,255,255,0.95) !important;
    box-shadow:0 -12px 30px -24px rgba(15,23,42,0.34) !important;
  }

  .admin-bottom-nav::-webkit-scrollbar{
    display:none !important;
  }

  .admin-bottom-nav-item{
    min-width:0 !important;
    min-height:4.05rem !important;
    padding:0.32rem 0.16rem !important;
    gap:0.28rem !important;
    border-radius:1rem !important;
  }

  .admin-bottom-nav-item span{
    line-height:1.08 !important;
    letter-spacing:-0.02em !important;
    white-space:nowrap !important;
  }

  .admin-bottom-nav-item.active{
    background:linear-gradient(180deg, #fff3ea 0%, #ffefe4 100%) !important;
    box-shadow:0 16px 30px -26px rgba(232,121,62,0.95) !important;
  }
}

@media (max-width: 420px){
  .admin-page .page-head{
    padding:0 !important;
  }

  .dashboard-task-grid{
    grid-template-columns:1fr !important;
  }

  .dashboard-task-grid > .dashboard-task-btn:last-child{
    grid-column:auto !important;
  }

  .dashboard-priority-copy h3{
    font-size:0.98rem !important;
  }

  .admin-page[data-page="animals"] .animal-edit-header-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.5rem !important;
  }

  .admin-page[data-page="animals"] .animal-form-section-title{
    font-size:0.9rem !important;
  }

  .admin-page[data-page="animals"] .animal-form-section-meta{
    font-size:0.72rem !important;
  }

  .admin-page[data-page="animals"] .animal-mobile-actions{
    grid-template-columns:1fr !important;
  }

  .admin-page[data-page="volunteer"] .admin-calendar-wrap{
    padding:0.68rem !important;
  }

  .admin-page[data-page="volunteer"] .week-grid,
  .admin-page[data-page="volunteer"] .month-grid{
    grid-template-columns:repeat(4, minmax(0, calc((100% - 0.54rem) / 4))) !important;
    gap:0.18rem !important;
  }

  .admin-page[data-page="volunteer"] .day-card{
    min-height:58px !important;
    padding:0.36rem 0.3rem !important;
  }

  .admin-page[data-page="volunteer"] .day-title .day-date{
    font-size:0.7rem !important;
  }

  .admin-page[data-page="volunteer"] .day-title .day-weekday{
    font-size:0.56rem !important;
  }

  .admin-page[data-page="volunteer"] .day-sub{
    font-size:0.54rem !important;
  }

  .admin-page[data-page="inquiry"] #inquiryModeSelector{
    grid-template-columns:1fr !important;
  }

  .admin-page[data-page="inquiry"] .toolbar{
    grid-template-columns:1fr !important;
  }

  .admin-page[data-page="inquiry"] #inquiryRows .table-card-title-row{
    align-items:flex-start !important;
  }

  .admin-page[data-page="inquiry"] #inquiryDetailActions{
    grid-template-columns:1fr !important;
  }

  .admin-page[data-page="volunteer"] #volunteerBookingDetailActions{
    grid-template-columns:1fr !important;
  }

  .admin-sticky-actions{
    grid-template-columns:1fr !important;
  }

  .admin-page .table-row.admin-table-card > .table-card-field{
    grid-template-columns:3.9rem 1fr !important;
    gap:0.55rem !important;
  }

  .admin-page .table-row.admin-table-card .table-card-actions,
  .admin-page .table-row.admin-table-card .table-card-actions.table-card-actions--triple{
    grid-template-columns:1fr !important;
  }

  .admin-bottom-nav-item{
    min-height:3.75rem !important;
  }

  .admin-bottom-nav-item span{
    font-size:0.6rem !important;
  }
}
