:root{
    --primary-purple:#f8f5ff;
    --gold:#d4af37;
    --dark-bg:#f8f5ff;
    --card-bg:#f8f5ff;
    --text:#222;
    --danger:#d63b3b;
    --theme-bg-start:#f8f5ff;
    --theme-bg-end:#e6e1ee;
    --theme-card:rgba(171, 141, 214, 0.9);
    --theme-line:rgba(212,175,55,.25);
    --theme-btn-start:#113a73;
    --theme-btn-end:#69c4ff;
    --theme-accent:#2e75d8;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; min-height:100vh; color:var(--text);
    background:linear-gradient(135deg,var(--theme-bg-start) 0%, var(--theme-bg-end) 100%);
    font-family:"Noto Sans TC",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"PingFang TC","Microsoft JhengHei",sans-serif;
    padding:0 18px 18px;
    transition:background .35s ease, color .35s ease;
  }
  h2{ margin:14px 0 10px; font-size:18px; }
  .card{
    background:var(--theme-card);
    border:1px solid var(--theme-line);
    border-radius:14px;
    padding:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    margin-bottom:14px;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .form-input{
    border-radius:10px; border:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.18);
    color:var(--text);
    padding:10px 12px;
    outline:none;
  }
  .is-hidden{ display:none !important; }
  .input-gender{ max-width:55px; }
  .input-name{ min-width:120px; max-width:260px; }
  .input-birthday{ max-width:180px; }
  .input-group-name{ max-width:360px; }
  .input-debug-mode{ max-width:160px; }
  .input-mode-switch{ max-width:140px; }
  .row-gap-top{ margin-top:10px; }
  .row-center{ justify-content:center; text-align:center; }
  .btn{
    border:none; border-radius:10px;
    padding:10px 14px;
    cursor:pointer;
    background:rgba(255,255,255,.12);
    color:var(--text);
    font-weight:700;
  }
  .btn-primary{
    background:linear-gradient(90deg,#6a11cb,#2575fc); 
  }
  .step-badge{
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.96);
    color: #2f4f79;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(0,0,0,.16);
  }
  .step-copy{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.12;
  }
  .step-copy strong{
    font-size: 15px;
    font-weight: 900;
  }
  .step-copy small{
    font-size: 11px;
    opacity: .92;
    font-weight: 700;
  }
  #analyze-btn{
    width:100%;
    max-width:480px;
    padding:10px 16px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--theme-btn-start),var(--theme-accent) 52%,var(--theme-btn-end));
    color:#fff;
    box-shadow:0 12px 28px rgba(22,70,138,.28);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  #analyze-btn:disabled{
    background:linear-gradient(135deg,#6f7d94,#8f9db3);
    color:rgba(255,255,255,.92);
    box-shadow:none;
  }
  .btn:disabled{ opacity:.55; cursor:not-allowed; }
  body.theme-single-man{
    --theme-bg-start:#eef6ff;
    --theme-bg-end:#d7e8ff;
    --theme-card:rgba(226,240,255,.92);
    --theme-line:rgba(59,130,246,.28);
    --theme-btn-start:#0f3b8a;
    --theme-btn-end:#60a5fa;
    --theme-accent:#2563eb;
  }
  body.theme-single-woman{
    --theme-bg-start:#fff4f8;
    --theme-bg-end:#f8dce8;
    --theme-card:rgba(255,236,245,.92);
    --theme-line:rgba(236,72,153,.26);
    --theme-btn-start:#9d174d;
    --theme-btn-end:#f472b6;
    --theme-accent:#db2777;
  }
  body.theme-couple{
    --theme-bg-start:#fff8ef;
    --theme-bg-end:#eadbff;
    --theme-card:rgba(255,245,230,.92);
    --theme-line:rgba(217,119,6,.24);
    --theme-btn-start:#9a3412;
    --theme-btn-end:#c084fc;
    --theme-accent:#7c3aed;
  }
  body.theme-group{
    --theme-bg-start:#eefcf5;
    --theme-bg-end:#d7f0e7;
    --theme-card:rgba(232,251,241,.94);
    --theme-line:rgba(16,185,129,.24);
    --theme-btn-start:#0f766e;
    --theme-btn-end:#34d399;
    --theme-accent:#059669;
  }

  /* progress */
  .progress-container{
    display:none;
    margin-top:10px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    padding:10px 12px;
  }
  .progress-bar{
    width:100%;
    height:12px;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    overflow:hidden;
  }
  .progress{
    width:0%;
    height:100%;
    background:#5bc0de;
    transition:width .35s;
  }
  .status-message{
    margin-top:8px;
    font-size:13px;
    opacity:.95;
  }

  body.scan-focus-open{
    overflow:hidden;
  }
  body.scan-focus-open #progressWrap{
    opacity:0;
    pointer-events:none;
    height:0;
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
  }
  .scan-focus-overlay{
    position:fixed;
    inset:0;
    z-index:12050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 18px;
    background:
      radial-gradient(circle at 50% 28%, rgba(255,220,120,.12), rgba(0,0,0,0) 28%),
      linear-gradient(180deg, rgba(5,10,22,.84), rgba(5,8,18,.92));
    backdrop-filter:blur(10px);
  }
  .scan-focus-shell{
    width:min(78vw, 560px);
    max-width:calc(100vw - 36px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    animation:scan-focus-pop .45s ease-out both;
  }
  .scan-focus-stage{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:26px;
    border:1px solid rgba(255,220,120,.42);
    box-shadow:
      0 32px 90px rgba(0,0,0,.48),
      0 0 28px rgba(255,210,80,.18),
      inset 0 0 42px rgba(255,200,0,.12);
    background:
      radial-gradient(circle at 50% 46%, rgba(255,244,158,.12), rgba(0,0,0,.2) 55%, rgba(0,0,0,.46) 100%),
      linear-gradient(135deg, rgba(255,200,0,.08), rgba(255,255,0,.04));
  }
  .scan-focus-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.14) translate3d(0,0,0);
    transform-origin:center center;
    filter:saturate(1.02) contrast(1.05) brightness(.82);
    animation:scan-focus-float 10.2s ease-in-out infinite;
    transition:opacity 2.55s ease;
  }
  .scan-focus-image.is-active{
    opacity:1;
    z-index:1;
  }
  .scan-focus-stage::before{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:18px;
    border:1px solid rgba(255,214,84,.48);
    box-shadow:
      0 0 18px rgba(255,200,0,.24),
      inset 0 0 20px rgba(255,180,0,.16);
    pointer-events:none;
    z-index:3;
  }
  .scan-focus-glow{
    position:absolute;
    inset:-12%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 24%),
      radial-gradient(circle at 72% 62%, rgba(86,170,255,.16), rgba(86,170,255,0) 26%),
      radial-gradient(circle at 55% 20%, rgba(255,240,120,.14), rgba(255,240,120,0) 22%);
    mix-blend-mode:screen;
    opacity:.95;
    animation:scan-focus-glow 5.8s ease-in-out infinite;
    pointer-events:none;
    z-index:2;
  }
  .scan-focus-spark{
    position:absolute;
    width:18%;
    aspect-ratio:1/1;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(102,187,255,.54) 22%, rgba(102,187,255,0) 72%);
    mix-blend-mode:screen;
    filter:blur(.5px);
    opacity:0;
    z-index:4;
    pointer-events:none;
  }
  .scan-focus-spark.spark-a{
    top:18%;
    left:12%;
    animation:scan-spark-a 2.2s linear infinite;
  }
  .scan-focus-spark.spark-b{
    right:14%;
    top:58%;
    animation:scan-spark-b 2.6s linear infinite;
  }
  .scan-beam{
    position:absolute;
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:0;
    z-index:5;
  }
  .scan-beam-h{
    inset:5%;
    background:
      linear-gradient(180deg, rgba(115,210,255,0) 0%, rgba(115,210,255,.12) 35%, rgba(115,210,255,.22) 50%, rgba(115,210,255,.12) 65%, rgba(115,210,255,0) 100%),
      linear-gradient(90deg, rgba(95,195,255,0) 0%, rgba(150,230,255,.9) 18%, rgba(255,255,255,1) 50%, rgba(150,230,255,.9) 82%, rgba(95,195,255,0) 100%);
    background-size:100% 20px, 100% 3px;
    background-repeat:no-repeat;
    background-position:center -14%, center -14%;
    filter:
      drop-shadow(0 0 8px rgba(90,196,255,.95))
      drop-shadow(0 0 18px rgba(90,196,255,.6))
      drop-shadow(0 0 34px rgba(90,196,255,.28));
    animation:scan-beam-h 2.8s linear infinite;
  }
  .scan-beam-v{
    inset:5%;
    background:
      linear-gradient(90deg, rgba(115,210,255,0) 0%, rgba(115,210,255,.12) 35%, rgba(115,210,255,.2) 50%, rgba(115,210,255,.12) 65%, rgba(115,210,255,0) 100%),
      linear-gradient(180deg, rgba(95,195,255,0) 0%, rgba(150,230,255,.88) 18%, rgba(255,255,255,1) 50%, rgba(150,230,255,.88) 82%, rgba(95,195,255,0) 100%);
    background-size:20px 100%, 3px 100%;
    background-repeat:no-repeat;
    background-position:-14% center, -14% center;
    filter:
      drop-shadow(0 0 8px rgba(90,196,255,.92))
      drop-shadow(0 0 18px rgba(90,196,255,.56))
      drop-shadow(0 0 34px rgba(90,196,255,.24));
    animation:scan-beam-v 2.8s linear infinite;
  }
  .scan-focus-progress{
    width:100%;
    padding:14px 16px 16px;
    border-radius:18px;
    background:rgba(10,18,34,.74);
    border:1px solid rgba(110,170,255,.22);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
  }
  .scan-focus-progress .progress-bar{
    height:10px;
    background:rgba(255,255,255,.08);
  }
  .scan-focus-progress .status-message{
    margin-top:10px;
    text-align:center;
    color:#edf5ff;
    letter-spacing:.3px;
  }
  .scan-focus-caption{
    font-size:13px;
    color:rgba(255,245,220,.86);
    text-align:center;
    letter-spacing:.8px;
    margin-bottom:8px;
  }
  @keyframes scan-focus-pop{
    0%{ opacity:0; transform:translateY(18px) scale(.96); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes scan-focus-float{
    0%,100%{ transform:scale(1.12) translate3d(0,-1.2%,0); }
    50%{ transform:scale(1.16) translate3d(0,1.2%,0); }
  }
  @keyframes scan-focus-glow{
    0%,100%{ opacity:.48; transform:scale(1); }
    50%{ opacity:.92; transform:scale(1.04); }
  }
  @keyframes scan-spark-a{
    0%,56%,100%{ opacity:0; transform:scale(.3); }
    8%,18%{ opacity:.92; transform:scale(1); }
    24%{ opacity:0; transform:scale(1.4); }
  }
  @keyframes scan-spark-b{
    0%,62%,100%{ opacity:0; transform:scale(.4); }
    14%,24%{ opacity:.85; transform:scale(1.05); }
    30%{ opacity:0; transform:scale(1.5); }
  }
  @keyframes scan-beam-h{
    0%{
      opacity:0;
      background-position:center -14%, center -14%;
    }
    8%{
      opacity:1;
      background-position:center -4%, center -4%;
    }
    42%{
      opacity:1;
      background-position:center 104%, center 104%;
    }
    50%{
      opacity:0;
      background-position:center 112%, center 112%;
    }
    100%{
      opacity:0;
      background-position:center 112%, center 112%;
    }
  }
  @keyframes scan-beam-v{
    0%,48%{
      opacity:0;
      background-position:-14% center, -14% center;
    }
    56%{
      opacity:1;
      background-position:-4% center, -4% center;
    }
    92%{
      opacity:1;
      background-position:104% center, 104% center;
    }
    100%{
      opacity:0;
      background-position:112% center, 112% center;
    }
  }
  @media (max-width: 640px){
    #analyze-btn{
      width:100%;
      max-width:480px;
    }
    .step-badge{
      width: 30px;
      height: 30px;
      min-width: 30px;
      font-size: 17px;
    }
    .step-copy strong{ font-size: 14px; }
    .step-copy small{ font-size: 10px; }
    .scan-focus-overlay{
      padding:12px;
    }
    .scan-focus-shell{
      width:calc(100vw - 24px);
      max-width:calc(100vw - 24px);
      gap:12px;
    }
    .scan-focus-stage{
      border-radius:20px;
    }
    .scan-focus-progress{
      padding:12px;
    }
  }

  /* toast */
  .toast{
    position:fixed;
    left:50%;
    bottom:34px;
    transform:translateX(-50%);
    background:#111;
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    z-index:99999;
    opacity:0;
    transition:opacity .2s;
    font-size:14px;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
    max-width:min(90vw,520px);
    white-space:pre-line;
  }
  .toast.show{ opacity:1; }


 
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 10px;border:1px solid var(--line);border-radius:999px;
    background:rgba(255,255,255,.04);
    color:var(--muted); font-size:13px;
  }
/* ===== Birthday date picker (text + calendar button + hidden native date input) ===== */
.date-wrap{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.date-input-group{
position:relative;
display:inline-flex;
align-items:center;
min-width:0;
}
.date-input-group .form-input{ padding-right:42px; }
.birthday-age{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(212,175,55,.42);
background:linear-gradient(180deg, rgba(255,238,188,.98), rgba(243,213,122,.96));
color:#3b2a0f;
font-size:13px;
font-weight:800;
white-space:nowrap;
box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.birthday-age:empty{
display:none;
}
.date-btn{
position:absolute; right:6px; top:50%;
transform:translateY(-50%);
width:34px; height:34px;
border-radius:10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.10);
color:rgba(255,255,255,.95);
cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
}
.date-btn:hover{ background:rgba(255,255,255,.16); }
.date-hidden{
position:absolute;
opacity:0;
pointer-events:none;
width:1px; height:1px;
}
.input-invalid{
border-color: rgba(214,59,59,.95) !important;
box-shadow: 0 0 0 3px rgba(214,59,59,.18);
}


/* ===== Custom Date Picker (fast year/month) ===== */
.dp-mask{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; }
.dp-modal{
position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
width:min(360px, 92vw);
background:rgba(28,18,46,.98);
border:1px solid rgba(212,175,55,.35);
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.45);
z-index:9999; color:#fff;
}
.dp-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
border-bottom:1px solid rgba(255,255,255,.10); }
.dp-title{ font-weight:1000; font-size:14px; display:flex; gap:8px; align-items:center; }
.dp-close{
width:34px; height:34px; border-radius:10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);
color:#fff; cursor:pointer;
}
.dp-controls{ display:flex; gap:10px; padding:12px 14px 8px; }
.dp-sel{
flex:1;
height:36px;
border-radius:10px;
border:1px solid rgba(255,255,255,.18);

background-color:#1c122e;   /* 深色底 */
color:#ffffff;              /* 白字 */

font-weight:900;
padding:0 10px;

appearance:auto;            /* 重要：不要 none */
}
.dp-week{ display:grid; grid-template-columns:repeat(7, 1fr); padding:0 14px; gap:6px;
opacity:.85; font-size:12px; font-weight:900; }
.dp-week span{ text-align:center; padding:6px 0; }
.dp-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; padding:10px 14px 14px; }
.dp-day{
height:36px; border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
color:#fff; font-weight:900; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.dp-day.is-empty{ background:transparent; border-color:transparent; cursor:default; }
.dp-day.is-selected{
border-color:rgba(212,175,55,.65);
box-shadow:0 0 0 3px rgba(212,175,55,.18);
background:rgba(212,175,55,.14);
}
.dp-day.is-disabled,
.dp-day:disabled{
opacity:.28;
cursor:not-allowed;
background:rgba(255,255,255,.02);
border-color:rgba(255,255,255,.06);
}
.dp-actions{ display:flex; justify-content:space-between; gap:10px; padding:0 14px 14px; }
  .dp-btn{
    flex:1; height:38px; border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff; font-weight:1000; cursor:pointer;
  }
  .dp-btn.dp-primary{ border-color:rgba(212,175,55,.55); background:rgba(212,175,55,.18); }
  .login-gate-mask{
    position:fixed;
    inset:0;
    background:rgba(10,16,28,.64);
    backdrop-filter:blur(4px);
    z-index:13000;
    display:none;
  }
  .login-gate-modal{
    position:fixed;
    z-index:13010;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92vw, 420px);
    background:linear-gradient(180deg, rgba(23,34,58,.97), rgba(18,26,42,.98));
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.38);
    padding:20px;
    color:#fff;
    display:none;
  }
  .login-gate-title{font-size:20px;font-weight:900;margin-bottom:10px}
  .login-gate-text{line-height:1.7;color:rgba(255,255,255,.84)}
  .login-gate-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
  .login-gate-btn{
    min-width:108px;
    border:0;
    border-radius:12px;
    padding:11px 16px;
    font-weight:800;
    cursor:pointer;
  }
  .login-gate-close{background:#d6dde8;color:#1e293b}
  .login-gate-login{background:linear-gradient(135deg,#d4af37,#f3d57a);color:#2f2411}

  @media (max-width: 640px){
    body{
      padding:0 10px 14px;
    }
    .card{
      padding:12px 10px;
      border-radius:12px;
    }
    .row{
      gap:8px;
    }
    #single-info-card .row,
    #couple-info-card .row,
    #group-info-card .row{
      align-items:flex-start;
    }
    #single-info-card label,
    #couple-info-card label,
    #group-info-card label{
      font-size:13px;
      white-space:nowrap;
    }
    #single-info-card .form-input,
    #couple-info-card .form-input,
    #group-info-card .form-input{
      min-width:0;
      width:100%;
      max-width:100%;
      min-height:42px;
      padding:10px 12px;
      font-size:16px;
    }
    #single-info-card #gender{
      max-width:65px !important;
      min-width:80px;
      padding-right:12px;
    }
    #single-info-card #name{
      max-width:none !important;
      flex:1 1 160px;
    }
    #single-info-card #birthday{
      max-width:none !important;
    }
    #single-info-card .date-wrap,
    #couple-info-card .date-wrap{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
      flex:1 1 100%;
      min-width:0;
    }
    #single-info-card .date-input-group,
    #couple-info-card .date-input-group{
      flex:0 1 auto;
      min-width:0;
    }
    #single-info-card .date-input-group .form-input,
    #couple-info-card .date-input-group .form-input{
      width:100%;
      padding-right:46px;
    }
    .birthday-age{
      min-height:32px;
      font-size:12px;
      padding:0 8px;
    }
    .date-btn{
      width:38px;
      height:38px;
      right:4px;
      border-radius:10px;
      font-size:16px;
    }
    .dp-modal{
      width:min(400px, calc(100vw - 16px));
    }
    .dp-controls{
      gap:8px;
    }
    .dp-sel{
      min-height:42px;
      font-size:16px;
      padding:0 12px;
    }
    .dp-day{
      min-height:40px;
      font-size:15px;
    }
    .dp-btn{
      min-height:42px;
      font-size:15px;
    }

    #photo-up-slot .photo-up .upload-area{
      padding:18px 10px;
      margin-bottom:10px;
    }
    #photo-up-slot .photo-up .upload-text{
      font-size:12px;
      line-height:1.6;
      margin:8px 0 10px;
    }
    #photo-up-slot .photo-up .btn{
      max-width:100% !important;
      min-height:42px;
      padding:8px 12px;
      font-size:14px;
    }
    #photo-up-slot .photo-up .step-badge{
      width:28px;
      height:28px;
      min-width:28px;
      font-size:15px;
    }
    #photo-up-slot .photo-up .step-copy strong{
      font-size:13px;
    }
    #photo-up-slot .photo-up .step-copy small{
      font-size:10px;
    }
    #photo-up-slot .photo-up #shared-preview-list{
      gap:8px;
      margin:10px 0;
    }
    #photo-up-slot .photo-up #shared-preview-list .img-item{
      border-radius:12px;
    }
    #photo-up-slot .photo-up #shared-preview-list .thumb,
    #photo-up-slot .photo-up .guide-card{
      min-height:118px;
    }
    #photo-up-slot .photo-up .guide-hint{
      gap:4px;
      max-width:82%;
      padding:4px 8px;
      font-size:10px;
      line-height:1.2;
    }
    #photo-up-slot .photo-up .guide-hint::after{
      width:20px;
    }
    #photo-up-slot .photo-up .guide-hint-top{
      top:8px;
      left:8px;
    }
    #photo-up-slot .photo-up .guide-hint-bottom{
      left:8px;
      bottom:8px;
    }
    #photo-up-slot .photo-up .guide-caption{
      margin:6px 8px 8px;
      font-size:10px;
      line-height:1.45;
    }
    #photo-up-slot .photo-up .gender-badge{
      top:6px;
      left:6px;
      gap:4px;
      padding:3px 8px;
      font-size:11px;
    }
    #photo-up-slot .photo-up .gender-badge span{
      font-size:16px !important;
    }
    #photo-up-slot .photo-up .gender-badge small{
      font-size:10px;
    }
    #photo-up-slot .photo-up .status-badge{
      bottom:6px;
      left:6px;
      gap:4px;
      padding:3px 8px;
      font-size:10px;
    }
    #photo-up-slot .photo-up .gender-summary{
      padding:8px 10px;
      font-size:11px;
    }
  }

  @media (max-width: 430px){
    #single-info-card .row{
      display:grid;
      grid-template-columns:44px 88px 32px minmax(0, 1fr);
      align-items:center;
      gap:6px;
    }
    #single-info-card .row > label{
      justify-self:start;
    }
    #single-info-card .date-wrap{
      grid-column:1 / -1;
    }
    #single-info-card .date-wrap{
      display:flex;
      align-items:center;
      gap:6px;
      width:100%;
      flex-wrap:nowrap;
    }
    #single-info-card .date-input-group{
      flex:0 0 150px;
      width:150px;
      max-width:150px !important;
    }
    #single-info-card .date-input-group .form-input{
      flex:0 0 150px;
      width:150px;
      max-width:150px !important;
      padding-right:44px;
    }
    #single-info-card .date-wrap .birthday-age{
      flex:0 0 auto;
    }
    #single-info-card #gender{
      width:100%;
      min-width:0;
    }
    #single-info-card .date-wrap .date-btn{
      position:absolute;
    }
    #single-info-card #name,
    #single-info-card #birthday{
      max-width:none !important;
      width:100%;
    }
  }

  @supports (-webkit-touch-callout: none) {
    @media (max-width: 640px){
      #photo-up-slot .photo-up .upload-area{
        padding:16px 8px;
      }
      #photo-up-slot .photo-up #shared-preview-list{
        gap:7px;
      }
      #photo-up-slot .photo-up #shared-preview-list .thumb,
      #photo-up-slot .photo-up .guide-card{
        min-height:108px;
      }
      #photo-up-slot .photo-up .guide-hint{
        font-size:9px;
        padding:4px 7px;
      }
      #photo-up-slot .photo-up .guide-caption{
        font-size:9px;
      }
      #photo-up-slot .photo-up .gender-badge{
        padding:2px 7px;
        font-size:10px;
      }
      #photo-up-slot .photo-up .gender-badge span{
        font-size:14px !important;
      }
    }
  }