/* iPad · 到店与开工 —— 尺寸与颜色取自 origin/main 各组件的 StyleSheet（见 page.js 文件头）。所有类名 ik- 前缀。 */
.ik-root { position: absolute; inset: 0; }
.ik-root .g { flex: 1; }
.ik-root b { font-weight: 700; }
.ik-root small { font-size: 12px; }

/* ---------- 时间轴 ---------- */
.ik-tl { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.ik-th { height: 44px; flex: none; display: grid; grid-template-columns: 64px repeat(3, 1fr); align-items: center; border-bottom: 1px solid #E5E7EB; font-size: 13px; color: #24252C; }
.ik-th b { text-align: center; font-weight: 600; }
.ik-grid { position: relative; flex: 1; overflow: hidden; }
.ik-hr { position: absolute; left: 0; right: 0; height: 150px; border-top: 1px solid #F3F4F6; }
.ik-hr small { position: absolute; left: 12px; top: 4px; font-size: 12px; color: #91929E; }
.ik-now { position: absolute; left: 64px; right: 0; height: 2px; background: #3DCAB1; z-index: 3; transition: top .6s ease; }
.ik-now em { position: absolute; left: -58px; top: -9px; font: 600 11px/18px Inter, sans-serif; font-style: normal; color: #3DCAB1; }
.ik-card { position: absolute; width: calc((100% - 64px) / 3 - 8px); border-radius: 10px; background: color-mix(in srgb, var(--c) 16%, #fff); border-top: 3px solid var(--c);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: top .6s ease, height .6s ease, box-shadow .2s; z-index: 1; }
.ik-card.st-scheduled { opacity: .62; }
.ik-card.sel { box-shadow: 0 0 0 2px var(--c), 0 6px 16px rgba(15, 23, 42, .12); z-index: 2; }
.ik-card > b { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #0A1629; }
.ik-card > small { display: flex; align-items: center; gap: 5px; color: #4B5563; }
.ik-card > small i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.ik-tri { position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(45deg, transparent 50%, var(--c) 50%); color: #fff; display: flex; justify-content: flex-end; padding: 2px; }
.ik-late { align-self: flex-start; padding: 1px 6px; border-radius: 6px; background: #FEF3E2; color: #9A5B00; font-size: 11px; font-weight: 600; }
.ik-tp { position: absolute; left: 10px; bottom: 8px; width: 22px; height: 22px; border-radius: 11px; background: var(--c); color: #fff; font: 700 11px/22px Inter, sans-serif; text-align: center; }

/* Kuee 小助手（侧栏最底） */
.ik-kuee { position: absolute; left: 14px; bottom: 12px; width: 212px; height: 52px; border-radius: 14px; background: #E8F8F4; display: flex; align-items: center; gap: 10px; padding: 0 12px; z-index: 5; }
.ik-kuee > i { width: 30px; height: 30px; border-radius: 15px; background: #0F766E; color: #fff; font: 800 14px/30px Inter, sans-serif; font-style: normal; text-align: center; }
.ik-kuee div { display: flex; flex-direction: column; } .ik-kuee b { color: #0F766E; font-size: 14px; } .ik-kuee small { color: #0F766E; opacity: .7; font-size: 11px; }

/* ---------- 右侧预约详情 ---------- */
.ik-det { position: absolute; inset: 0; background: #fff; border-left: 1px solid #E5E7EB; padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ik-dh { display: flex; align-items: center; gap: 8px; }
.ik-dh > b { font-size: 16px; color: #24252C; }
.ik-dh em { font-style: normal; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; transition: background .3s, color .3s; }
.ik-dh em.conf { background: #a697e226; color: #7e6cd6; } .ik-dh em.prog { background: #3dcab126; color: #0f766e; } .ik-dh em.sch { background: #7599fd26; color: #7599fd; }
.ik-x { width: 28px; height: 28px; border-radius: 6px; background: #F3F4F6; color: #9CA3AF; display: inline-flex; align-items: center; justify-content: center; }
.ik-cust { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #F9FAFB; color: #9CA3AF; }
.ik-cust > i { width: 36px; height: 36px; border-radius: 18px; background: #E0F2FE; color: #0369A1; font: 700 13px/36px Inter, sans-serif; font-style: normal; text-align: center; flex: none; }
.ik-cust > div { flex: 1; display: flex; flex-direction: column; } .ik-cust b { color: #0A1629; font-size: 14px; }
.ik-dv { height: 1px; background: #F3F4F6; margin: 2px 0; }
.ik-sl { color: #91929E; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 11px !important; margin-top: 2px; }
.ik-svc { display: flex; align-items: center; gap: 10px; }
.ik-svc > i { width: 4px; height: 34px; border-radius: 2px; flex: none; }
.ik-svc > div { flex: 1; display: flex; flex-direction: column; } .ik-svc > div b { font-size: 14px; color: #24252C; } .ik-svc small { color: #91929E; }
.ik-svc > b { font-size: 14px; color: #24252C; }
.ik-addsec { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-left: 14px; }
.ik-addsec > small { color: #91929E; }
.ik-adds { display: flex; gap: 6px; }
.ik-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: #F3F4F6; color: #4B5563; font-size: 11px; font-weight: 600; }
.ik-chip.t { background: #3DCAB11A; color: #0F766E; }
.ik-addbtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; border: 1px dashed #3DCAB1; color: #0F766E; font-size: 12px; font-weight: 600; }
.ik-time, .ik-notes { font-size: 13px; color: #24252C; }
.ik-notes { padding: 8px 10px; border-radius: 8px; background: #F9FAFB; color: #4B5563; }
.ik-ar { display: flex; gap: 8px; }
.ik-ab { flex: 1; height: 58px; border-radius: 12px; background: #F3F4F6; color: #24252C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 600; }
.ik-ab small { font-size: 12px; }
.ik-ab.pri { background: #3DCAB1; color: #fff; } .ik-ab.dan { background: #FEF2F2; color: #DC2626; }
.ik-ab.off { opacity: .38; }

/* ---------- 签到确认 ---------- */
.ik-scrim, .ik-amask { position: absolute; inset: 0; z-index: 40; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; animation: kt-fade .2s ease; }
.ik-amask { z-index: 60; background: rgba(15, 23, 42, .28); }
.ik-ci { width: 420px; background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); animation: ip-pop .22s ease; }
.ik-ct { font-size: 18px; color: #0A1629; } .ik-cb { color: #6B7280; font-size: 14px !important; margin-top: -6px; }
.ik-tc { border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.ik-tr { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; font-size: 14px; color: #4B5563; }
.ik-tr.d { border-bottom: 1px solid #E5E7EB; } .ik-tr b { color: #24252C; display: inline-flex; align-items: center; gap: 4px; } .ik-tr.a b { color: #0F766E; }
.ik-pk { display: flex; justify-content: center; gap: 16px; padding: 4px 0; animation: kt-fade .2s ease; }
.ik-picker { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 16px/1 Inter, sans-serif; color: #C4C4C4; }
.ik-picker span.on { color: #0A1629; font-weight: 700; font-size: 20px; padding: 6px 18px; border-radius: 8px; background: #F3F4F6; }
.ik-hint { padding: 10px 12px; border-radius: 10px; background: #FEF3E2; color: #9A5B00; font-size: 13px; font-weight: 600; animation: kt-fade .2s ease; }
.ik-cf { display: flex; gap: 10px; justify-content: flex-end; }
.ik-btn { height: 44px; padding: 0 20px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.ik-btn.g { background: #F3F4F6; color: #4B5563; } .ik-btn.pri { background: #3DCAB1; color: #fff; } .ik-btn.sm { height: 36px; padding: 0 16px; }

/* iOS 原生 Alert */
.ik-al { width: 290px; border-radius: 16px; background: rgba(250, 250, 250, .97); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 16px 0; gap: 6px; box-shadow: 0 12px 40px rgba(15, 23, 42, .2); animation: ip-pop .22s ease; }
.ik-al > b { font-size: 16px; color: #000; } .ik-al > small { font-size: 13px; color: #333; line-height: 1.4; }
.ik-alb { align-self: stretch; display: flex; margin: 12px -16px 0; border-top: 1px solid #DDD; }
.ik-alb span { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; color: #007AFF; font-size: 15px; }
.ik-alb span + span { border-left: 1px solid #DDD; }
.ik-alb span.pri { font-weight: 700; } .ik-alb span.dan { color: #FF3B30; font-weight: 700; }

/* ---------- 加钟 / 附加项（整屏） ---------- */
.ik-full { position: absolute; inset: 0; z-index: 45; background: #F5F4F1; display: flex; flex-direction: column; animation: kt-fade .2s ease; }
.ik-fh { height: 56px; flex: none; display: flex; align-items: center; padding: 0 24px; background: #fff; border-bottom: 1px solid #E5E7EB; }
.ik-fh > b { font-size: 18px; color: #0A1629; }
.ik-fb { flex: 1; display: flex; min-height: 0; }
.ik-rail { width: 300px; background: #fff; border-right: 1px solid #E5E7EB; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ik-rail > small { color: #91929E; font-weight: 600; }
.ik-rc { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid #E5E7EB; }
.ik-rc.on { border-color: #3DCAB1; background: #3DCAB10D; }
.ik-rc > i { width: 4px; height: 34px; border-radius: 2px; } .ik-rc div { display: flex; flex-direction: column; } .ik-rc b { font-size: 14px; } .ik-rc small { color: #91929E; }
.ik-fm { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.ik-fs { display: flex; align-items: baseline; gap: 10px; } .ik-fs b { font-size: 15px; color: #24252C; } .ik-fs small { color: #91929E; }
.ik-exts { display: flex; gap: 12px; }
.ik-ext, .ik-ad { position: relative; flex: 1; min-height: 64px; border-radius: 14px; background: #fff; border: 1px solid #E5E7EB; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, background .2s; }
.ik-ext b, .ik-ad b { font-size: 14px; color: #24252C; } .ik-ext small, .ik-ad small { color: #91929E; }
.ik-ext.on, .ik-ad.on { border-color: #3DCAB1; background: #3DCAB10F; }
.ik-ext em, .ik-ad em { font-style: normal; color: #0F766E; font-size: 12px; font-weight: 600; }
.ik-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ik-ad > .lu { position: absolute; right: 12px; top: 12px; color: #3DCAB1; }
.ik-saved { display: inline-flex; align-items: center; gap: 6px; color: #0F766E; font-size: 13px; margin-top: 4px; }

/* ---------- 即时预约 ---------- */
.ik-wh { display: flex; align-items: flex-start; gap: 12px; }
.ik-wh > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } .ik-wh b { font-size: 18px; color: #0A1629; } .ik-wh small { color: #6B7280; font-size: 13px; }
.ik-off { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ik-off small { color: #4B5563; font-weight: 600; margin-right: 6px; }
.ik-off span { height: 34px; padding: 0 14px; border-radius: 17px; background: #F3F4F6; color: #4B5563; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.ik-off span.on { background: #3DCAB1; color: #fff; }
.ik-ws { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; } .ik-ws b { font-size: 14px; color: #24252C; } .ik-ws small { color: #91929E; }
.ik-wg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ik-wc { position: relative; border-radius: 14px; border: 1px solid #E5E7EB; padding: 14px 12px 12px 18px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.ik-wc > i { position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 2px 2px 0; }
.ik-wc b { font-size: 14px; color: #24252C; } .ik-wc small { color: #91929E; }
.ik-wf { text-align: center; color: #91929E; margin-top: 4px; }
.ik-load { position: absolute; inset: 0; border-radius: 20px; background: rgba(255, 255, 255, .86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #0F766E; font-weight: 600; animation: kt-fade .2s ease; }
.ik-load .lu { animation: ik-spin 1s linear infinite; }
@keyframes ik-spin { to { transform: rotate(360deg); } }
.ip-modal { position: relative; }
.ik-fr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #E5E7EB; transition: border-color .2s, background .2s; }
.ik-fr.on { border-color: #3DCAB1; background: #3DCAB10F; }
.ik-fr > i { width: 38px; height: 38px; border-radius: 19px; background: #EEF2FF; color: #4F46E5; font: 700 14px/38px Inter, sans-serif; font-style: normal; text-align: center; }
.ik-fr > div { flex: 1; display: flex; flex-direction: column; } .ik-fr b { font-size: 14px; color: #24252C; } .ik-fr small { color: #B45309; }
.ik-fr em { font-style: normal; padding: 4px 10px; border-radius: 10px; background: #F3F4F6; color: #4B5563; font-size: 12px; font-weight: 600; }
.ik-fr em.rec { background: #3DCAB11F; color: #0F766E; }
.ik-sc { width: 420px; background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; box-shadow: 0 12px 40px rgba(15, 23, 42, .2); animation: ip-pop .22s ease; }
.ik-sci { width: 44px; height: 44px; border-radius: 22px; background: #FEF3E2; color: #D97706; display: inline-flex; align-items: center; justify-content: center; }
.ik-sc > b { font-size: 17px; color: #0A1629; } .ik-sc > small { color: #6B7280; font-size: 13px; }
.ik-scb { align-self: stretch; padding: 10px 12px; border-radius: 10px; background: #FFFBEB; display: flex; flex-direction: column; gap: 2px; }
.ik-scb b { color: #92400E; font-size: 13px; } .ik-scb small { color: #92400E; }
.ik-sc .ik-cf { align-self: stretch; }

/* ---------- 头像菜单 ---------- */
.ik-pop { position: absolute; right: 12px; top: 56px; width: 300px; z-index: 50; background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 12px 40px rgba(15, 23, 42, .2); animation: ip-pop .18s ease; }
.ik-ph { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.ik-ph > i { width: 34px; height: 34px; border-radius: 17px; background: #FCE7F3; color: #BE185D; font: 700 14px/34px Inter, sans-serif; font-style: normal; text-align: center; }
.ik-ph b { font-size: 15px; } .ik-ph em { font-style: normal; padding: 2px 8px; border-radius: 8px; background: #3DCAB11F; color: #0F766E; font-size: 11px; font-weight: 600; }
.ik-pstore { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #F9FAFB; }
.ik-pstore > i { width: 26px; height: 26px; border-radius: 13px; background: #3DCAB1; } .ik-pstore div { display: flex; flex-direction: column; } .ik-pstore small { color: #91929E; }
.ik-psw { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #3DCAB112; color: #0F766E; }
.ik-psw div { display: flex; flex-direction: column; } .ik-psw b { font-size: 14px; } .ik-psw small { opacity: .75; }
.ik-pr { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; color: #24252C; font-size: 14px; }
.ik-lang { display: inline-flex; gap: 4px; } .ik-lang em { font-style: normal; padding: 3px 8px; border-radius: 6px; background: #F3F4F6; font-size: 12px; } .ik-lang em.on { background: #3DCAB1; color: #fff; }

/* ---------- PIN 页 ---------- */
.ik-pin { position: absolute; inset: 0; background: linear-gradient(180deg, #F2FBF8 0%, #FFFFFF 70%); display: flex; flex-direction: column; align-items: center; padding-top: 30px; gap: 6px; }
.ik-plogo { width: 56px; height: 56px; border-radius: 28px; background: #3DCAB1; }
.ik-pname { font-size: 22px; color: #24252C; font-weight: 600 !important; } .ik-psub { color: #91929E; margin-top: -4px; }
.ik-psel { font-size: 15px !important; color: #4B5563; margin: 14px 0 8px; }
.ik-pcards { display: flex; gap: 14px; }
.ik-pc { width: 120px; height: 132px; border-radius: 14px; background: #fff; border: 1px solid #EEF0F2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); transition: border-color .2s; }
.ik-pc > i { width: 52px; height: 52px; border-radius: 26px; color: #6B7280; display: flex; align-items: center; justify-content: center; }
.ik-pc b { font-size: 14px; color: #24252C; } .ik-pc small { color: #91929E; font-size: 11px; }
.ik-pc.on { border: 2px solid #3DCAB1; } .ik-pc.on b { color: #3DCAB1; }
.ik-pc.add > i { background: #F3F4F6; } .ik-pc.add b { color: #91929E; } .ik-pc.add small { color: #C4C4C4; }
.ik-kp { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; animation: kt-fade .2s ease; }
.ik-kpp { font-size: 14px !important; color: #4B5563; }
.ik-dots { display: flex; gap: 14px; } .ik-dots i { width: 14px; height: 14px; border-radius: 7px; border: 1.5px solid #B9BCC2; transition: background .15s; }
.ik-dots i.on { background: #3DCAB1; border-color: #3DCAB1; } .ik-dots i.err { border-color: #EF4444; } .ik-dots i.on.err { background: #EF4444; }
.ik-kpe { color: #DC2626; font-weight: 600; }
.ik-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px 14px; }
.ik-keys span { height: 50px; border-radius: 12px; background: #fff; border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; font: 500 22px/1 Inter, sans-serif; color: #24252C; transition: background .1s; }
.ik-keys span.e { border: 0; background: none; } .ik-keys span.d { border: 0; background: none; color: #9CA3AF; }
.ik-keys span.p { background: #E8F8F4; }
.ik-kpc { color: #4B5563; font-size: 14px !important; margin-top: 2px; }
.ik-pfoot { position: absolute; bottom: 14px; color: #C4C4C4; }
.ik-cpt { font-size: 18px; color: #0A1629; text-align: center; }