* {
  box-sizing:border-box
}

body {
  margin:0;
  background:#edf0f5;
  color:#253049;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif
}

[hidden] {
  display:none!important
}

button,input,textarea {
  font:inherit
}

button {
  cursor:pointer
}

.stage {
  padding:20px 8px;
  display:flex;
  justify-content:center
}

.phone {
  width:375px;
  max-width:100%;
  min-height:724px;
  background:#f5f7fb;
  border:1px solid #e4e9f2;
  border-radius:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.appbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px 14px;
  font-weight:600
}

.home,.workspace {
  padding:20px;
  flex:1
}

h2 {
  font-size:24px;
  margin:8px 0
}

h3 {
  font-size:16px;
  margin:0 0 10px
}

p {
  color:#69758b;
  margin:0;
  font-size:13px
}

.grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:28px
}

.tile {
  text-align:left;
  padding:20px 14px;
  border:1px solid #e4e9f2;
  border-radius:16px;
  background:#fff;
  color:#253049;
  display:flex;
  flex-direction:column;
  gap:8px
}

.symbol {
  width:40px;
  height:40px;
  border-radius:12px;
  background:#edf2fd;
  color:#345db5;
  display:grid;
  place-items:center;
  font-size:23px
}

.tile strong {
  font-size:16px
}

.tile small {
  font-size:12px;
  color:#69758b
}

.back,.edit {
  border:0;
  background:none;
  color:#345db5;
  padding:8px 0
}

.back {
  margin-bottom:12px
}

.box {
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:14px;
  padding:16px;
  margin-top:18px
}

.dates {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:8px;
  margin-top:10px
}

.dates label {
  min-width:0;
  font-size:12px;
  color:#69758b
}

input[type=number],input[type=text],input[type=date],input[type=time],textarea {
  display:block;
  min-width:0;
  width:100%;
  padding:11px 8px;
  margin-top:8px;
  border:1px solid #dbe2ed;
  border-radius:10px;
  background:#f8faff;
  color:#253049;
  font-size:16px
}

textarea {
  resize:vertical;
  min-height:80px
}

.region-picker { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eee7f5; }
.region-picker h3 { margin-bottom: 5px; color: #51405f; font-size: 15px; }
.region-picker-intro { margin-bottom: 14px; color: #94849f; font-size: 12px; line-height: 1.7; }
.region-picker-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.region-picker-fields label { min-width: 0; color: #78658d; font-size: 12px; }
.region-picker-fields select { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; margin-top: 8px; padding: 11px 26px 11px 10px; border: 1px solid #e4d9f3; border-radius: 12px; appearance: none; background-color: #f7f3fc; background-image: linear-gradient(45deg,transparent 50%,#9474ac 50%),linear-gradient(135deg,#9474ac 50%,transparent 50%); background-position: calc(100% - 15px) 20px,calc(100% - 11px) 20px; background-size: 4px 4px; background-repeat: no-repeat; color: #51465f; font: inherit; font-size: 14px; text-overflow: ellipsis; }
.region-picker-fields select:focus-visible { outline: 2px solid #a58bc7; outline-offset: 2px; }
.region-picker-fields select:disabled { color: #b4a9be; border-color: #eee8f5; background-color: #faf8fd; }
.region-picker-hint { margin-top: 14px; font-size: 12px; line-height: 1.8; }
@media(max-width:360px) { .region-picker-fields { gap: 6px; } .region-picker-fields select { padding-left: 7px; font-size: 13px; } }

.sex {
  display:flex;
  gap:12px
}

.sex label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:1;
  padding:12px;
  background:#f5f7fb;
  border-radius:10px
}

input[type=radio],input[type=checkbox] {
  accent-color:#345db5
}

.check {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
  font-size:12px;
  color:#69758b
}

.hint {
  font-size:12px;
  color:#69758b
}

.submit {
  width:100%;
  border:0;
  border-radius:24px;
  padding:14px;
  background:#345db5;
  color:white;
  margin-top:22px
}

.error {
  color:#b02f37;
  margin-top:16px
}

.result-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}

.result-head h3 {
  margin:0
}

.edit {
  font-size:12px
}

.row {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #e4e9f2;
  padding:12px 0
}

.values {
  flex:1;
  min-width:0
}

.value {
  color:#345db5;
  font-size:21px;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums
}

.row-label {
  width:76px;
  flex-shrink:0;
  text-align:right;
  font-size:12px;
  color:#69758b
}

.cells {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px 2px
}

.cell {
  text-align:center;
  padding:3px 0;
  border-radius:4px
}

.cell b {
  display:block;
  font-size:16px;
  font-weight:500;
  color:#345db5
}

.cell small {
  display:block;
  font-size:10px;
  white-space:nowrap;
  color:#69758b
}

.active {
  background:#e5edfc
}

.note {
  margin-top:14px;
  font-size:12px
}

.bottom {
  background:#fff;
  border-top:1px solid #e4e9f2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:10px 20px;
  margin-top:16px
}

.home-button {
  background:none;
  border:0;
  color:#345db5;
  padding:8px 20px;
  min-height:44px
}

.result-mode {
  padding:12px 16px
}

.result-mode>.title,.result-mode>.intro {
  display:none
}

@media(max-width:360px) {
  .cells {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .home,.workspace {
    padding-left:14px;
    padding-right:14px
  }
}