:root{
  --line:#c7cbd1;
  --bg:#f2f3f5;
  --panel:#ffffff;
  --text:#333333;
  --text-dim:#8a8f96;
  --accent:#4a5568;
  --accent-dark:#374151;
  --accent-bg:#e2e5ea;
  --danger:#a12a2a;
  --danger-bg:#fbdada;
  --ok:#2b7a44;
  --ok-bg:#dcefe1;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent);}

.center-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}
.safety-check-banner{
  width:100%;
  max-width:360px;
  background:linear-gradient(90deg,#d94b4b,#e97676);
  color:#fff;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
  text-align:center;
  font-size:18px;
  font-weight:bold;
  line-height:1.5;
  box-shadow:0 4px 14px rgba(217,75,75,.35);
  animation:safety-check-pulse 2s ease-in-out infinite;
}
.safety-check-banner span{display:block;font-size:12px;font-weight:normal;margin-top:4px;}
@keyframes safety-check-pulse{
  0%,100%{box-shadow:0 4px 14px rgba(217,75,75,.35);}
  50%{box-shadow:0 4px 22px rgba(217,75,75,.65);}
}

.auth-card{
  width:100%;
  max-width:360px;
  background:var(--panel);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:32px 28px 28px;
}

.auth-logo{
  height:56px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:15px;
  letter-spacing:.04em;
  margin-bottom:26px;
}

.field-label{
  font-size:12px;
  color:var(--text-dim);
  margin:0 0 6px 2px;
}

.field-input{
  width:100%;
  height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 12px;
  font-size:14px;
  margin-bottom:16px;
  background:#fff;
  color:var(--text);
}
.field-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}

.field-textarea{
  width:100%;
  min-height:76px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  margin-bottom:16px;
  background:#fff;
  color:var(--text);
  font-family:inherit;
  resize:vertical;
}
.field-textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}

.password-field{position:relative;}
.password-field .field-input{padding-right:42px;}
.password-toggle{
  position:absolute;
  top:0;right:0;
  width:42px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  color:var(--text-dim);
  cursor:pointer;
}
.password-toggle:hover{color:var(--accent);}
.password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.password-toggle svg.is-hidden{display:none;}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:46px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.02em;
  cursor:pointer;
  margin-bottom:10px;
  text-decoration:none;
}
.btn:hover{background:var(--accent-dark);}
.btn.outline{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
}

.auth-links{
  text-align:center;
  font-size:12.5px;
  color:var(--text-dim);
  margin-top:6px;
}
.auth-links a{color:var(--text-dim);text-decoration:underline;}

.alert{
  font-size:12.5px;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:16px;
}
.alert.error{background:var(--danger-bg);color:var(--danger);}
.alert.notice{background:var(--ok-bg);color:var(--ok);}

.help-card{
  width:100%;
  max-width:420px;
  background:var(--panel);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:28px;
}
.help-card h1{font-size:16px;margin:0 0 14px;}
.help-card p{font-size:13px;line-height:1.8;color:var(--text);margin:0 0 20px;}

.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--panel);
  display:flex;
  flex-direction:column;
}
.app-header{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.app-header .brand{font-weight:bold;font-size:14px;}
.app-body{padding:20px 18px;flex:1;}
.profile-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
}
.profile-card .name{font-size:16px;font-weight:bold;margin-bottom:4px;}
.profile-card .meta{font-size:12.5px;color:var(--text-dim);}
.badge{
  display:inline-block;
  font-size:10.5px;
  padding:2px 8px;
  border-radius:10px;
  background:var(--accent-bg);
  color:var(--accent-dark);
  margin-top:8px;
}
.notice-box{
  font-size:12px;
  color:var(--text-dim);
  background:#eceef1;
  border:1px dashed var(--line);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:18px;
  line-height:1.7;
}

.step-count{font-size:11px;color:var(--text-dim);}
.step-indicator{display:flex;gap:6px;margin-bottom:16px;}
.step-indicator .dot{flex:1;height:4px;border-radius:2px;background:var(--accent-bg);}
.step-indicator .dot.done{background:var(--accent);}

.lead-text{font-size:12.5px;line-height:1.8;color:var(--text);margin:0 0 16px;}
.meta-text{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.field-note{font-size:10.5px;color:var(--text-dim);margin:-10px 0 14px 2px;line-height:1.6;}
.field-note.center{text-align:center;margin-top:8px;}
.field-error{font-size:10.5px;color:var(--danger);margin:-10px 0 14px 2px;}

.card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:12px;
  background:#fff;
}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.row-between{display:flex;justify-content:space-between;align-items:center;}

.badge.warn{background:#fde8d8;color:#9a5a1d;}
.badge.danger{background:#fbdada;color:#a12a2a;}
.badge.ok{background:var(--ok-bg);color:var(--ok);}

.chips{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin-bottom:14px;
  padding-bottom:2px;
}
.chip{
  flex:0 0 auto;
  font-size:11px;
  padding:6px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  color:var(--text-dim);
  white-space:nowrap;
  text-decoration:none;
}
.chip.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.list-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 2px;
  border-bottom:1px solid #f0f0f0;
  font-size:12px;
}
.list-row .ic{
  width:22px;height:22px;
  flex:0 0 auto;
  border-radius:5px;
  background:var(--accent-bg);
}
.list-row .main{
  flex:1;
  color:var(--text);
  text-decoration:none;
  min-width:0;
  overflow-wrap:anywhere;
}
.list-row .badge{margin-top:0;flex:0 0 auto;white-space:nowrap;}

.btn.sm{width:auto;height:32px;padding:0 14px;font-size:11.5px;margin-bottom:0;}
.btn.outline.sm{width:auto;height:32px;padding:0 14px;font-size:11.5px;margin:6px 0 12px;}

.link-back{font-size:11.5px;color:var(--text-dim);text-decoration:underline;}
.link-plain{display:block;text-align:center;font-size:12px;color:var(--accent);text-decoration:underline;margin-top:12px;}
.link-plain.center{text-align:center;}

.step-list{margin:6px 0 10px;padding-left:18px;font-size:11.5px;line-height:1.9;color:var(--text);}

.contact-row{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line);border-radius:8px;padding:10px;margin-bottom:10px;}
.contact-row .field-input{margin-bottom:0;}

.divider{height:1px;background:var(--line);margin:16px 0;}

.table-wire{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:10px;}
.table-wire th,.table-wire td{border:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top;}
.table-wire th{background:#f5f6f8;font-weight:normal;color:var(--text-dim);}

.idcard-body{display:flex;justify-content:center;padding-top:24px;}
.idcard-panel{width:100%;max-width:320px;text-align:center;}
.avatar-box{
  width:96px;height:96px;
  border-radius:50%;
  border:1px dashed var(--line);
  background:#fafafa;
  margin:0 auto 12px;
}
.avatar-photo{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 12px;
  display:block;
  border:1px solid var(--line);
}
.idcard-name{font-size:17px;font-weight:bold;}
.idcard-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.photo-upload-form{margin-top:10px;}
.photo-upload-label{display:inline-flex;cursor:pointer;}
.photo-upload-row{display:flex;gap:8px;flex-wrap:wrap;}
.photo-upload-row.center{justify-content:center;}
.photo-upload-row .photo-upload-form{margin-top:0;}

.qr-mount{width:128px;height:128px;margin:8px auto 4px;}
.barcode-mount{display:block;width:100%;max-width:220px;margin:8px auto 4px;}

.btn-warm{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  border-radius:22px;
  background:linear-gradient(90deg,#ff8a3d,#ffb648);
  color:#fff;
  font-size:13px;
  font-weight:bold;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(255,140,50,.35);
  margin-bottom:10px;
}
.coin-icon{font-size:18px;margin-right:6px;}
.coin-icon-img{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:-4px;margin-right:6px;}
.brand-coin-icon{width:16px;height:16px;border-radius:50%;object-fit:cover;vertical-align:-3px;margin-right:4px;}

.idcard-actions{display:flex;gap:8px;margin-bottom:10px;}
.idcard-actions .btn,.idcard-actions .btn.outline{flex:1;margin-bottom:0;}

.desktop-greeting{font-size:12.5px;color:var(--text-dim);margin-bottom:16px;}
.desktop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px 10px;
}
.app-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.app-icon-sq{
  width:52px;height:52px;
  border-radius:14px;
  background:var(--accent-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}
.app-icon-sq.warm{
  background:linear-gradient(135deg,#ff8a3d,#ffb648);
  box-shadow:0 3px 8px rgba(255,140,50,.35);
}
.app-icon-sq img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
}
.app-icon span{
  font-size:9.5px;
  color:var(--text);
  text-align:center;
  line-height:1.25;
}

.tabbar{
  display:flex;
  border-top:1px solid var(--line);
  padding:8px 4px 12px;
}
.copyright-footer{
  text-align:right;
  font-size:9.5px;
  color:var(--text-dim);
  padding:6px 14px 10px;
}
.tabbar .tab{
  flex:1;
  text-align:center;
  font-size:9px;
  color:var(--text-dim);
  text-decoration:none;
}
.tabbar .tab .dot{
  width:20px;height:20px;
  margin:0 auto 3px;
  border-radius:6px;
  background:var(--accent-bg);
}
.tabbar .tab.active{color:var(--accent);font-weight:bold;}
.tabbar .tab.active .dot{background:var(--accent);}

.tw-balance-card{
  border-radius:16px;
  padding:22px 20px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#ff8a3d,#ffb648);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,140,50,.3);
  text-align:center;
}
.tw-balance-label{font-size:11.5px;opacity:.9;}
.tw-balance-points{font-size:36px;font-weight:bold;margin:4px 0 2px;}
.tw-balance-note{font-size:10.5px;opacity:.85;}
.tw-received-total{font-size:11px;opacity:.9;margin-top:10px;}

.tw-actions{display:flex;gap:10px;margin-bottom:18px;}
.tw-actions .btn-warm,.tw-actions .btn.outline{flex:1;margin-bottom:0;}

.tw-section-title{font-size:12.5px;font-weight:bold;margin:0 0 10px;color:var(--text);}

.tw-received-item{
  border:1px solid #ffe0c2;
  background:#fff8f1;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:10px;
}
.tw-received-item .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.tw-received-item .sender{font-size:12.5px;font-weight:bold;}
.tw-received-item .points{font-size:12.5px;font-weight:bold;color:#c96a1d;}
.tw-received-item .reason{font-size:11px;color:var(--text-dim);}
.tw-received-item .message{font-size:11.5px;color:var(--text);margin-top:4px;line-height:1.6;}
.tw-received-item .date{font-size:10px;color:var(--text-dim);margin-top:4px;}

.tw-empty{font-size:11.5px;color:var(--text-dim);text-align:center;padding:18px 0;}

.tw-reason-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.tw-reason-chip{position:relative;}
.tw-reason-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.tw-reason-chip label{
  display:block;
  font-size:11.5px;
  padding:8px 14px;
  border-radius:16px;
  border:1px solid #ffcda0;
  color:#c96a1d;
  background:#fff8f1;
  cursor:pointer;
}
.tw-reason-chip input:checked + label{
  background:linear-gradient(135deg,#ff8a3d,#ffb648);
  color:#fff;
  border-color:transparent;
}

.tw-history-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:12px 2px;
  border-bottom:1px solid #f0f0f0;
}
.tw-history-row .main{flex:1;min-width:0;}
.tw-history-row .counterpart{font-size:12.5px;font-weight:bold;}
.tw-history-row .reason{font-size:11px;color:var(--text-dim);margin-top:2px;}
.tw-history-row .date{font-size:10px;color:var(--text-dim);margin-top:2px;}
.tw-history-row .points{font-size:13px;font-weight:bold;white-space:nowrap;}
.tw-history-row .points.sent{color:var(--text-dim);}
.tw-history-row .points.received{color:#c96a1d;}

.permit-paper{
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
  background:#fff;
}
.permit-title{font-size:16px;text-align:center;margin:0 0 4px;}
.permit-issuer{font-size:11.5px;text-align:center;color:var(--text-dim);margin:0 0 16px;}

.admin-menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 12px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
}
.admin-menu-item .ic{font-size:22px;flex:0 0 auto;width:32px;text-align:center;}
.admin-menu-item .main{flex:1;min-width:0;}
.admin-menu-item .title{font-size:13px;font-weight:bold;}
.admin-menu-item .desc{font-size:11px;color:var(--text-dim);margin-top:2px;line-height:1.6;}

.urgent-log-panel{
  border:1px solid var(--danger);
  background:var(--danger-bg);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:18px;
}
.urgent-log-panel-title{
  font-size:12.5px;
  font-weight:bold;
  color:var(--danger);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.urgent-log-empty{font-size:11.5px;color:var(--text-dim);}
.urgent-log-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:11px;
  padding:6px 0;
  border-top:1px solid rgba(161,42,42,.15);
}
.urgent-log-row:first-of-type{border-top:none;}
.urgent-log-row .who{color:var(--text);font-weight:bold;}
.urgent-log-row .when{color:var(--text-dim);margin-left:auto;white-space:nowrap;}

.safety-check-widget{
  background:linear-gradient(90deg,#d94b4b,#e97676);
  color:#fff;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:18px;
  box-shadow:0 4px 14px rgba(217,75,75,.3);
}
.safety-check-widget-title{font-size:14px;font-weight:bold;margin-bottom:6px;}
.safety-check-widget-body{font-size:12px;line-height:1.7;margin-bottom:4px;opacity:.95;}
.safety-check-widget .btn{width:100%;font-weight:bold;}
.safety-check-response-list-link{
  display:block;
  text-align:center;
  font-size:11.5px;
  color:#fff;
  text-decoration:underline;
  margin-top:8px;
}

.news-panel{
  border:1px solid #ffd9c2;
  background:linear-gradient(135deg,#fff6ec,#fff0f2);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:18px;
}
.news-panel-empty{
  border:1px solid #ffe4d6;
  background:#fff9f4;
  border-radius:10px;
  padding:8px 14px;
  font-size:11.5px;
  color:var(--text-dim);
  margin-bottom:18px;
}
.news-marquee-wrap{
  overflow:hidden;
  white-space:nowrap;
  margin-bottom:6px;
}
.news-marquee-text{
  display:inline-block;
  padding-left:100%;
  font-weight:bold;
  font-size:13.5px;
  color:var(--text);
  animation-name:news-marquee;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes news-marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}
.news-body{
  font-size:11.5px;
  color:var(--text);
  line-height:1.6;
  white-space:pre-wrap;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-panel.expanded .news-body{
  -webkit-line-clamp:unset;
  overflow:visible;
}
.news-extra{
  display:none;
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.news-panel.expanded .news-extra{display:block;}
.news-extra-item{margin-bottom:10px;}
.news-extra-item:last-child{margin-bottom:0;}
.news-extra-title{font-weight:bold;font-size:12px;margin-bottom:2px;color:var(--text);}
.news-extra-body{font-size:11.5px;color:var(--text-dim);line-height:1.6;white-space:pre-wrap;}
.news-toggle{
  display:block;
  margin-top:8px;
  background:none;
  border:none;
  padding:0;
  font-size:11.5px;
  color:var(--accent);
  cursor:pointer;
}
@media (prefers-reduced-motion: reduce){
  .news-marquee-text{animation:none;padding-left:0;}
}