/* Option 1 polish; artwork and approved copy are unchanged. */
.line-work-button{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:13px 16px;min-height:65px;border:1px solid #c9e9d7;border-radius:12px;background:#fff;color:#24593b;text-align:left;transition:transform .15s ease,box-shadow .18s ease}.line-work-button>span:nth-child(2){flex:1;font-size:14px;font-weight:bold}.line-work-button small{display:block;font-size:11px;font-weight:400;color:#626776;margin-top:3px}.line-badge{display:grid;place-items:center;background:#06c755;color:white;border-radius:10px;width:43px;height:38px;font-size:11px;font-weight:bold}.line-work-button:active{transform:scale(.98)}.line-qr{display:block;width:min(100%,290px);height:auto;margin:18px auto;background:#fff}.line-owner{font-size:12px;color:#626776}#lineWorkDialog{max-height:calc(100dvh - 36px);overflow-y:auto}#lineWorkDialog p{font-size:12px;line-height:1.7}.line-save{display:block;text-align:center;color:var(--blue);padding:11px;min-height:44px}#lineWorkDialog button{margin-top:10px}@media(prefers-reduced-motion:reduce){.line-work-button{transition:none}.line-work-button:active{transform:none}}
body{background:radial-gradient(ellipse at 50% 0,#fafbff 0,#eef1f7 65%)}
header{padding-bottom:20px}header p{font-size:10px;letter-spacing:2.2px}
h1{font-size:clamp(23px,5.8vw,29px);line-height:1.65;letter-spacing:0;font-weight:700}
.english{font-family:"Segoe UI",Tahoma,sans-serif;font-size:17px;font-weight:500;line-height:1.5;margin:3px 0 8px;letter-spacing:.15px}
.role{font-size:12px;line-height:1.7;margin:0;color:#626776}.identity{margin:0 0 25px}
.flipper{transition:transform .68s cubic-bezier(.22,.72,.18,1)}
.face{box-shadow:0 15px 32px #273b6222,0 3px 7px #273b620d;transition:box-shadow .65s ease}
.card-scene[aria-pressed=true] .face{box-shadow:0 18px 38px #273b622a,0 4px 9px #273b6214}
.face-indicator{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0;min-height:14px}
.face-indicator .dot{height:6px;width:6px;background:#b6bed1;border-radius:8px;transition:width .28s ease,background-color .28s ease}
.face-indicator[data-face=front] .dot:first-child,.face-indicator[data-face=back] .dot:nth-child(2){width:19px;background:var(--blue)}
.face-indicator .face-label{font-size:10px;color:#626776;margin-left:3px;line-height:1.4}
.flip-hint{margin:7px 0 22px;font-size:10px;color:#6a7286}
.action,.secondary-actions button,dialog button{transition:transform .15s ease,box-shadow .18s ease,background-color .18s ease}
.action.primary{box-shadow:0 5px 14px #1715ce18}
.action:active,.secondary-actions button:active,dialog button:active{transform:scale(.97);box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .action:hover,.secondary-actions button:hover{transform:translateY(-2px);box-shadow:0 7px 18px #23365a16}
  .action.primary:hover{background:#1110af}
  .card-scene:hover .face{box-shadow:0 20px 42px #273b622d,0 4px 9px #273b6214}
  .action:active,.secondary-actions button:active{transform:scale(.97)}
}
@keyframes card-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.card-scene{animation:card-arrive .48s cubic-bezier(.22,.72,.18,1) both}}
@media(prefers-reduced-motion:reduce){
  .card-scene,.flipper,.face,.dot,.action,.secondary-actions button,dialog button{animation:none!important;transition:none!important}
  .action:hover,.action:active,.secondary-actions button:hover,.secondary-actions button:active,dialog button:active{transform:none}
}