*{box-sizing:border-box}
:root{--blue:#0f5d93;--red:#d92323;--light:#f7fbff;--border:#e5e7eb;--shadow:0 8px 24px rgba(0,0,0,.06)}
html,body{margin:0;padding:0;background:#fff;color:#080808;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
.app{max-width:1080px;margin:0 auto;padding:14px}
.header{text-align:center;border-bottom:1px solid #ececec;padding-bottom:14px}
.brand{position:relative;min-height:105px;display:flex;align-items:center;justify-content:center}
.logo{width:430px;max-width:84%;height:auto;object-fit:contain}
.langSwitch{position:absolute;right:0;top:8px;border:1px solid #d9d9d9;border-radius:999px;padding:3px;background:#fff;display:flex;gap:2px}
.langSwitch button{border:0;background:#fff;color:#1495e6;font-weight:900;border-radius:999px;padding:7px 11px;cursor:pointer}
.langSwitch button.active{background:#111;color:#fff}
.todayLine,.weatherLine{font-size:17px;font-weight:900;line-height:1.45}
.weatherLine{font-size:16px}
.noticeMini{border:0;background:transparent;color:var(--red);font-size:15px;font-weight:900;line-height:1.5;cursor:pointer;padding:0;margin-top:3px}
.main{padding-top:14px}
.wideCard{min-height:78px;border:1px solid var(--border);border-radius:22px;background:#fff;text-decoration:none;color:#111;display:grid;grid-template-columns:58px 1fr 30px;align-items:center;padding:0 24px;margin-bottom:2px;box-shadow:var(--shadow)}
.wideCard .icon{font-size:30px}.wideCard .label{font-size:27px;font-weight:900}.wideCard .arrow{font-size:48px;line-height:1;color:#6e6e6e;text-align:right}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.tile{border:1px solid var(--border);border-radius:22px;background:#fff;min-height:126px;padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;text-align:left}
.tile.defect,.tile.rules{border-left:4px solid #ff3333}.tile.defect .tileText{color:var(--red)}
.tileIcon{font-size:34px}.tileText{font-size:24px;font-weight:900}.tile small{display:block;font-size:15px;font-weight:800;color:#555;margin-top:6px}
.hidden{display:none!important}
.modal{position:fixed;inset:0;z-index:9999}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modalPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,1000px);max-height:88vh;overflow:auto;background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.modalClose{position:sticky;top:0;float:right;border:0;background:#fff;color:#1495e6;font-size:42px;line-height:32px;cursor:pointer;z-index:2}
.modal h2{font-size:32px;margin:8px 0 22px}
.loadingBox,.emptyBox,.errorBox{border:1px solid var(--border);border-radius:18px;min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;color:#666;padding:18px;font-size:18px}
.errorBox{color:#b40000;background:#fff8f8}
.ruleChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ruleChoice{border:1px solid var(--border);border-radius:20px;background:#fff;min-height:150px;padding:24px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);cursor:pointer;text-align:left}
.ruleChoice span:first-child{font-size:42px}.ruleChoice b{display:block;font-size:28px;font-weight:900}.ruleChoice small{display:block;color:#666;font-size:16px;margin-top:8px}
.cardGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ruleCard,.qualityItem,.defectItem{border:1px solid var(--border);border-radius:18px;padding:16px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.035)}
.ruleCard h3,.qualityItem h3{font-size:22px;margin:0 0 10px;color:#1495e6}.defectItem h3{font-size:22px;margin:0 0 14px;color:var(--red)}
.ruleCard ul{margin:0;padding-left:24px}.ruleCard li{font-size:17px;line-height:1.65;white-space:pre-wrap}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tabs button{border:1px solid #ddd;background:#fff;color:#1495e6;border-radius:999px;padding:9px 14px;font-size:15px;font-weight:900;cursor:pointer}
.tabs button.active{background:#1495e6;color:#fff;border-color:#1495e6}.defectTabs button.active{background:var(--red);border-color:var(--red)}
.list{display:grid;gap:14px}.std{font-size:17px;line-height:1.55;margin:6px 0 12px;color:#333;white-space:pre-wrap}
.photoGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photoBox{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fafafa}
.photoLabel{font-size:15px;font-weight:900;padding:9px 10px}.ok{color:#178a3d}.bad{color:var(--red)}
.photoBox img{width:100%;height:220px;object-fit:cover;display:block;cursor:pointer}
.noPhoto{min-height:120px;display:flex;align-items:center;justify-content:center;color:#aaa}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:190px;object-fit:cover;border-radius:16px;border:1px solid var(--border);cursor:pointer;background:#fafafa}
.photoViewer{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center}
.photoBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.86)}
#photoLarge{position:relative;max-width:94vw;max-height:92vh;border-radius:12px;background:#fff}
@media(max-width:760px){
 .app{padding:8px 12px}.header{padding-bottom:10px}.brand{min-height:88px}.logo{width:430px;max-width:86%}.langSwitch{right:0;top:4px;transform:scale(.9);transform-origin:right top}
 .todayLine,.weatherLine{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.noticeMini{font-size:13px}
 .wideCard{min-height:62px;border-radius:18px;padding:0 16px;grid-template-columns:44px 1fr 24px}.wideCard .icon{font-size:26px}.wideCard .label{font-size:24px}.wideCard .arrow{font-size:38px}
 .tiles{grid-template-columns:1fr;gap:10px;margin-top:12px}.tile{min-height:82px;border-radius:18px;padding:14px;justify-content:flex-start}.tileIcon{font-size:28px}.tileText{font-size:21px}
 .modalPanel{width:94vw;max-height:88vh;border-radius:22px;padding:22px 16px}.modal h2{font-size:27px}
 .ruleChoiceGrid,.cardGrid,.photoGrid{grid-template-columns:1fr}.ruleChoice{min-height:112px;padding:18px}.ruleChoice b{font-size:24px}
 .gallery{grid-template-columns:1fr 1fr}.gallery img{height:160px}.photoBox img{height:230px}
}

/* V12.1 refinements */
.twoTiles{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.qualityChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qualityChoice{border:1px solid var(--border);border-radius:20px;background:#fff;min-height:150px;padding:24px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);cursor:pointer;text-align:left}
.qualityChoice span:first-child{font-size:42px}.qualityChoice b{display:block;font-size:28px;font-weight:900}.qualityChoice small{display:block;color:#666;font-size:16px;margin-top:8px}
.noticeList{display:grid;gap:12px}.noticeCard{border:1px solid var(--border);border-radius:18px;padding:16px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.035)}.noticeCard h3{margin:0 0 8px;color:#d92323;font-size:22px}.noticeCard p{margin:0;white-space:pre-wrap;line-height:1.6;font-size:17px;color:#333}
@media(max-width:760px){.twoTiles,.qualityChoiceGrid{grid-template-columns:1fr}.qualityChoice{min-height:112px;padding:18px}.qualityChoice b{font-size:24px}}

/* V12.2 inline notice */
.noticeInline{color:#d92323;font-size:15px;font-weight:900;line-height:1.5;margin-top:3px;white-space:pre-wrap}
.noticeInline.hasNotice{background:#fff8f8;border:1px solid #ffd2d2;border-radius:12px;padding:7px 12px;display:inline-block;max-width:92%;text-align:left}
.noticeInline.noNotice{color:#b62525}
@media(max-width:760px){.noticeInline{font-size:13px}.noticeInline.hasNotice{max-width:96%;padding:6px 10px}}

/* V12.3 compact UI */
.brand{min-height:74px;justify-content:center;padding-right:112px;padding-left:112px}
.logo{width:340px;max-width:72%;height:auto}
.langSwitch{right:0;top:50%;transform:translateY(-50%)}
.infoOneLine{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.todayLine,.weatherLine{font-size:16px;font-weight:900;line-height:1.4}
.main{padding-top:14px}
.homeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.homeCard{border:1px solid var(--border);border-radius:22px;background:#fff;min-height:126px;padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;text-align:left;text-decoration:none;color:#111}
.homeCard.rules,.homeCard.quality{border-left:4px solid #ff3333}
.homeCard .tileIcon{font-size:34px}.homeCard .tileText{font-size:24px;font-weight:900}
.wideCard,.tiles,.tile .arrow,.arrow{display:none!important}
.ruleChoice small,.qualityChoice small,.tile small,.homeCard small{display:none!important}
.ruleChoice,.qualityChoice{min-height:128px}
.ruleChoice b,.qualityChoice b{font-size:30px}
@media(max-width:760px){
  .brand{min-height:70px;padding-left:0;padding-right:92px;justify-content:flex-start}
  .logo{width:285px;max-width:76%}
  .langSwitch{right:0;top:50%;transform:translateY(-50%) scale(.9);transform-origin:right center}
  .infoOneLine{gap:8px;white-space:normal}
  .todayLine,.weatherLine{font-size:13.5px}
  .homeGrid{grid-template-columns:1fr;gap:10px;margin-top:12px}
  .homeCard{min-height:82px;border-radius:18px;padding:14px;justify-content:flex-start}
  .homeCard .tileIcon{font-size:28px}.homeCard .tileText{font-size:24px}
  .ruleChoice,.qualityChoice{min-height:104px;padding:18px}
  .ruleChoice b,.qualityChoice b{font-size:28px}
}

/* V12.4 logo + swipe defect photos */
.header{padding-top:0}
.brand{min-height:54px;align-items:flex-start;padding-top:0;margin-top:0}
.logo{width:300px;max-width:68%;margin-top:-8px}
.langSwitch{transform:translateY(-50%) scale(.72)!important;transform-origin:right center}
.infoOneLine{margin-top:-8px}
.noticeInline{margin-top:2px}

/* Defect photos: swipe left/right like carousel */
.defectItem .gallery{
  display:flex!important;
  overflow-x:auto;
  overflow-y:hidden;
  gap:12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:2px 4px 12px;
}
.defectItem .gallery img{
  flex:0 0 82%;
  width:82%!important;
  height:auto!important;
  max-height:72vh;
  object-fit:contain!important;
  scroll-snap-align:center;
  border-radius:16px;
  background:#fafafa;
}
.defectItem .gallery::-webkit-scrollbar{height:6px}
.defectItem .gallery::-webkit-scrollbar-thumb{background:#ddd;border-radius:999px}

@media(max-width:760px){
  .brand{min-height:48px;padding-right:74px}
  .logo{width:260px;max-width:72%;margin-top:-12px}
  .langSwitch{transform:translateY(-50%) scale(.68)!important}
  .infoOneLine{margin-top:-10px}
  .defectItem .gallery img{flex-basis:88%;width:88%!important;max-height:68vh}
}

/* =========================================================
   FTZ HUB V13 PRODUCTION
   ========================================================= */

/* Compact header / logo */
.header{
  padding-top:0!important;
  padding-bottom:10px!important;
}
.brand{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding-left:14px!important;
  padding-right:76px!important;
  margin:0!important;
}
.logo{
  width:225px!important;
  max-width:68%!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0!important;
}
.langSwitch{
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%) scale(.56)!important;
  transform-origin:right center!important;
}
.infoOneLine{
  margin-top:4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.todayLine,.weatherLine{
  font-size:13.6px!important;
  line-height:1.25!important;
}
.noticeInline{
  margin-top:5px!important;
}

/* Four homepage cards consistent */
.homeGrid{
  margin-top:12px!important;
}
.homeCard{
  position:relative!important;
}
.homeCard::after{
  content:"›";
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  line-height:1;
  color:#222;
}
.homeCard .tileText{
  padding-right:38px;
}

/* Remove small descriptions inside centre popups */
.ruleChoice small,
.qualityChoice small,
.defectItem .std{
  display:none!important;
}

/* Defect thumbnails carousel inside modal */
.defectItem .gallery{
  display:flex!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:12px!important;
  scroll-snap-type:x mandatory!important;
  -webkit-overflow-scrolling:touch!important;
  padding:2px 4px 14px!important;
}
.defectItem .gallery img{
  flex:0 0 88%!important;
  width:88%!important;
  height:auto!important;
  max-height:66vh!important;
  object-fit:contain!important;
  scroll-snap-align:center!important;
  border-radius:16px!important;
  background:#fafafa!important;
}

/* Full-screen photo carousel */
.photoViewer{
  background:rgba(0,0,0,.95)!important;
  overflow:hidden!important;
  touch-action:none!important;
}
.photoBackdrop{
  background:rgba(0,0,0,.95)!important;
}
.photoStage{
  position:relative;
  z-index:2;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.photoTrack{
  width:100%;
  height:100%;
  display:flex;
  transition:transform .28s ease;
  will-change:transform;
}
.photoSlide{
  min-width:100vw;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 0 92px;
}
.photoSlide img{
  max-width:100vw;
  max-height:calc(100vh - 156px);
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.photoTopBar{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 18px);
  left:0;
  right:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.photoCounter{
  color:#fff;
  font-size:18px;
  font-weight:900;
  background:rgba(0,0,0,.32);
  padding:5px 12px;
  border-radius:999px;
}
.photoClose{
  position:absolute;
  left:16px;
  top:calc(env(safe-area-inset-top,0px) + 14px);
  z-index:5;
  border:0;
  background:rgba(0,0,0,.32);
  color:#fff;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:34px;
  line-height:38px;
  cursor:pointer;
}
.photoArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  border:0;
  background:rgba(0,0,0,.42);
  color:#fff;
  width:42px;
  height:52px;
  border-radius:999px;
  font-size:34px;
  cursor:pointer;
}
.photoPrev{left:12px}
.photoNext{right:12px}
.photoHint{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 38px);
  z-index:4;
  text-align:center;
  color:rgba(255,255,255,.78);
  font-size:14px;
  font-weight:800;
}
#bigPhoto{
  display:none!important;
}

@media(max-width:760px){
  .brand{
    min-height:42px!important;
    padding-left:12px!important;
    padding-right:70px!important;
  }
  .logo{
    width:205px!important;
    max-width:70%!important;
  }
  .langSwitch{
    right:6px!important;
    transform:translateY(-50%) scale(.52)!important;
  }
  .todayLine,.weatherLine{
    font-size:12.8px!important;
  }
  .noticeInline{
    font-size:13px!important;
  }
}

/* V14 quality list-only homepage */
.qualityCategoryList{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.qualityCategoryRow{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  min-height:66px;
  padding:0 18px;
  display:grid;
  grid-template-columns:42px 1fr auto 24px;
  align-items:center;
  gap:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.035);
  cursor:pointer;
  text-align:left;
}
.qualityCategoryRow.active{
  border-left:5px solid #e51c23;
}
.folderIcon{
  font-size:27px;
}
.folderName{
  font-size:20px;
  font-weight:900;
  color:#111;
}
.folderCount{
  font-size:17px;
  font-weight:900;
  color:#0b95e6;
}
.folderArrow{
  font-size:32px;
  color:#555;
  text-align:right;
}
#defectList{
  margin-top:14px;
}
.backToCats{
  border:0;
  background:transparent;
  color:#0b95e6;
  font-weight:900;
  font-size:16px;
  padding:0 0 12px;
  cursor:pointer;
}
.qualityPhotos h3{
  margin-top:0;
}
@media(max-width:760px){
  .qualityCategoryRow{
    min-height:58px;
    border-radius:16px;
    padding:0 14px;
    grid-template-columns:36px 1fr auto 20px;
  }
  .folderIcon{font-size:24px}
  .folderName{font-size:18px}
  .folderCount{font-size:15px}
  .folderArrow{font-size:28px}
}

/* V14.1 category opens as separate centred photo page */
.qualityCategoryList.hidden{display:none!important}
.qualityPhotosPage{margin-top:0!important;text-align:center}
.qualityPhotosPage .backToCats{display:block;text-align:left;margin-bottom:14px}
.qualityPhotosPage h3{text-align:center;color:#d92323;font-size:26px;margin:0 0 18px!important}
.qualityPhotosPage .gallery{margin-left:auto!important;margin-right:auto!important;justify-content:flex-start!important;max-width:760px}
.qualityPhotosPage .gallery img{flex:0 0 86%!important;width:86%!important;margin:auto;object-fit:contain!important;background:#fafafa!important}
@media(max-width:760px){
  .qualityPhotosPage h3{font-size:24px}
  .qualityPhotosPage .gallery{max-width:100%}
  .qualityPhotosPage .gallery img{flex-basis:90%!important;width:90%!important}
}