*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;font-family:"Poppins","Inter",Arial,sans-serif;color:#202020;background:#D7D7D7}body{display:flex;justify-content:center}.app{width:440px;max-width:100%;min-height:100dvh;background:#F5F5F5;position:relative;overflow-x:hidden}.page{min-height:100dvh;padding-bottom:104px}.page-content{padding:24px 20px 32px}.top-hero{height:302px;background:linear-gradient(120deg,#B9281C 0%,#D84322 58%,#F9782A 100%);border-radius:0 0 34px 34px;position:absolute;top:0;left:0;right:0;overflow:hidden}.top-hero:after{content:"";position:absolute;width:210px;height:300px;border-radius:50%;right:-104px;top:18px;background:#FF7A28}.home-header{position:relative;z-index:2;padding:42px 24px 0;display:flex;align-items:center;gap:16px}.avatar-sm{width:56px;height:56px;border-radius:50%;background:#FFFFFF;overflow:hidden;flex:0 0 56px}.avatar-sm img{width:100%;height:100%;object-fit:cover}.identity{min-width:0;flex:1}.identity h1{margin:0;color:#FFFFFF;font-size:24px;line-height:30px;font-weight:700}.identity p{margin:2px 0 0;color:#FFEAE4;font-size:14px;line-height:20px;font-weight:500}.bell{width:42px;height:42px;border:0;border-radius:50%;background:#FFFFFF;color:#E22E20;display:grid;place-items:center;flex:0 0 42px}.bell svg{width:22px;height:22px}.attendance-wrap{position:relative;z-index:3;padding:28px 20px 0}.company-ribbon{height:64px;padding:12px 16px 28px;border-radius:24px 24px 0 0;background:#D92D20;color:#FFFFFF;border:1px solid #FFFFFF;border-bottom:0;display:flex;align-items:flex-start;justify-content:center;font-size:14px;line-height:20px;font-weight:700;text-align:center}.attendance-card{margin-top:-28px;border-radius:26px;background:#FFFFFF;border:1px solid #E8E8E8;overflow:hidden}.workday-row{padding:24px 22px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.workday-date small{display:block;color:#929292;font-size:12px;line-height:18px;font-weight:600}.workday-date strong{display:block;margin-top:2px;color:#262626;font-size:14px;line-height:22px;font-weight:600;white-space:nowrap}.work-mode{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right}.mode-badge{height:26px;padding:0 12px;border-radius:20px;background:#DDF7EC;color:#1ABA71;display:inline-flex;align-items:center;gap:6px;font-size:10px;line-height:16px;font-weight:700}.mode-badge svg{width:13px;height:13px}.work-location{margin-top:5px;color:#888888;font-size:10px;line-height:16px;font-weight:500;text-align:right}.clock-actions{padding:6px 22px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.clock-card{height:72px;border-radius:15px;border:1px solid #E4E4E4;background:#FAFAFA;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:#262626}.clock-card.active-in{border-color:#1ABA71;background:#FFFFFF}.clock-card.active-out{border-color:#EF5547;background:#FFFFFF}.clock-card:disabled{opacity:1}.clock-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 38px}.clock-icon.in{background:#EAF9F2;color:#18B46B}.clock-icon.out{background:#FFF0EE;color:#EF5547}.clock-icon svg{width:22px;height:22px}.clock-time{font-size:16px;line-height:22px;font-weight:600}.clock-label{margin-top:2px;color:#999999;font-size:10px;line-height:15px;font-weight:500}.duration-row{padding:16px 22px 22px}.duration-box{height:42px;padding:0 15px;border-radius:13px;background:#F3F3F3;display:flex;align-items:center;gap:8px}.duration-label{color:#8F8F8F;font-size:10px;line-height:16px;font-weight:500}.duration-value{color:#252525;font-size:14px;line-height:22px;font-weight:600}.work-dot{width:10px;height:10px;border-radius:50%;margin-left:auto;background:#E4E4E4;border:3px solid #FFFFFF;box-sizing:content-box;box-shadow:0 0 0 1px #E4E4E4}.work-dot.is-working{background:#1ABA71;box-shadow:0 0 0 1px #1ABA71,0 0 12px #1ABA7166}.home-section{position:relative;z-index:2;padding:24px 20px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title{font-size:16px;line-height:22px;font-weight:700}.section-link{border:0;background:transparent;color:#D94927;font-size:12px;line-height:16px;font-weight:600;text-decoration:none}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-link{text-decoration:none;color:#303030;text-align:center;min-width:0}.quick-icon{width:70px;height:70px;max-width:100%;margin:0 auto;border-radius:18px;background:#FFFFFF;border:1px solid #EEE8E5;box-shadow:0 8px 18px #4A23120F;display:grid;place-items:center}.quick-icon svg{width:28px;height:28px}.quick-link.history{color:#D94B29}.quick-link.reimburse{color:#C45A38}.quick-link.visit{color:#E27425}.quick-link.more{color:#A44D42}.quick-label{margin-top:9px;color:#303030;font-size:10px;line-height:14px;font-weight:600}.announcement-card{display:block;width:100%;padding:14px;border:0;border-radius:18px;background:#FFFFFF;text-align:left;text-decoration:none;color:#242424;box-shadow:0 8px 20px #37221D0A}.announce-top{display:flex;align-items:flex-start;gap:10px}.announce-icon{width:44px;height:44px;border-radius:14px;background:#FFF0EA;color:#D94B29;display:grid;place-items:center;flex:0 0 44px}.announce-icon.important{background:#FFF3E6;color:#D96120}.announce-icon.birthday{background:#FBEAF2;color:#B14671}.announce-icon svg{width:22px;height:22px}.announce-copy{min-width:0;flex:1}.announce-title{font-size:12px;line-height:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announce-preview{margin-top:3px;color:#747474;font-size:10px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announce-time{font-size:10px;line-height:14px;font-weight:600;color:#777777;white-space:nowrap}.announce-author{margin-top:4px;margin-left:54px;color:#696969;font-size:10px;line-height:13px;font-weight:600}.mini-history{display:grid;gap:10px}.history-card{padding:13px 14px;border-radius:16px;background:#FFFFFF;border:1px solid #ECECEC;text-decoration:none;color:#252525}.history-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-date{font-size:12px;line-height:16px;font-weight:600}.tag-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.pill{height:22px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;font-size:8px;line-height:12px;font-weight:700}.pill.wfo{background:#EDF8FF;color:#2B82AD}.pill.wfh{background:#F1EDFF;color:#7055C7}.pill.good{background:#EAF9F2;color:#1B9B60}.pill.warn{background:#FFF5E0;color:#A66B00}.history-summary{margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#6E6E6E;font-size:10px;line-height:14px}.history-summary strong{color:#555555;font-weight:600}.page-hero{height:110px;background:#D93A24;padding:38px 20px 20px;color:#FFFFFF}.page-hero h1{margin:0;font-size:22px;line-height:28px;font-weight:700}.page-hero p{margin:4px 0 0;color:#FFE4DE;font-size:10px;line-height:15px}.surface-stack{padding:18px 20px 32px;display:grid;gap:12px}.surface{background:#FFFFFF;border:1px solid #ECE8E5;border-radius:18px;padding:16px;box-shadow:0 8px 20px #3D21150A}.surface h2{margin:0;font-size:14px;line-height:20px;font-weight:700}.surface p{margin:5px 0 0;color:#6E6E6E;font-size:10px;line-height:16px}.schedule-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-card{height:54px;padding:0 12px;border:1px solid #EAEAEA;border-radius:14px;background:#FFFFFF;display:flex;align-items:center;justify-content:space-between;gap:8px}.select-card small{display:block;color:#888888;font-size:8px;line-height:12px}.select-card strong{display:block;margin-top:2px;font-size:10px;line-height:15px}.select-card svg{width:14px;height:14px;color:#777777}.week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.day{height:68px;border:1px solid #EAEAEA;border-radius:14px;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#333333}.day span{font-size:8px;line-height:12px;font-weight:600}.day strong{font-size:16px;line-height:18px;font-weight:800}.day.active{background:#D93A24;border-color:#D93A24;color:#FFFFFF}.day.off{opacity:55%}.schedule-selected{display:flex;align-items:center;justify-content:space-between;gap:12px}.schedule-selected strong{display:block;font-size:12px;line-height:18px}.schedule-selected span{display:block;margin-top:3px;color:#777777;font-size:10px;line-height:14px}.announcement-list{display:grid;gap:12px}.filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.filter{height:34px;padding:0 12px;border:0;border-radius:999px;background:#FFFFFF;color:#777777;font-size:10px;line-height:14px;font-weight:600;white-space:nowrap}.filter.active{background:#D93A24;color:#FFFFFF}.month-label{margin:4px 0 0;color:#7A7A7A;font-size:10px;line-height:15px;font-weight:700;text-transform:uppercase}.settings-profile{display:flex;align-items:center;gap:13px;text-decoration:none;color:#242424}.settings-profile img{width:58px;height:58px;border-radius:50%;object-fit:cover}.settings-profile-copy{min-width:0;flex:1}.settings-profile-copy strong{display:block;font-size:14px;line-height:20px}.settings-profile-copy span{display:block;margin-top:3px;color:#777777;font-size:10px;line-height:15px}.chev{color:#929292}.chev svg{width:18px;height:18px}.settings-list{display:grid;gap:8px}.settings-item{height:54px;padding:0 14px;border-radius:14px;background:#FFFFFF;border:1px solid #ECECEC;display:flex;align-items:center;gap:11px;text-decoration:none;color:#303030}.settings-item-icon{width:34px;height:34px;border-radius:10px;background:#FFF1EC;color:#D94B29;display:grid;place-items:center}.settings-item-icon svg{width:17px;height:17px}.settings-item strong{font-size:12px;line-height:16px}.settings-item span{margin-left:auto;color:#969696}.profile-page{padding-bottom:112px}.profile-cover{height:224px;background:linear-gradient(120deg,#B9281C,#D84322 60%,#F9782A);position:relative;border-radius:0 0 34px 34px;padding:36px 20px 22px;color:#FFFFFF}.back-link{width:38px;height:38px;border-radius:50%;background:#FFFFFF;color:#D93A24;display:grid;place-items:center;text-decoration:none}.back-link svg{width:20px;height:20px}.profile-main{margin-top:22px;display:flex;align-items:center;gap:14px}.profile-main img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid #FFFFFF}.profile-main h1{margin:0;font-size:22px;line-height:28px;font-weight:700}.profile-main p{margin:3px 0 0;color:#FFE9E4;font-size:12px;line-height:16px}.profile-content{padding:18px 20px 32px;display:grid;gap:14px}.hello{font-size:20px;line-height:26px;font-weight:700;margin:0}.hello-sub{margin:3px 0 0;color:#747474;font-size:10px;line-height:16px}.info-card{background:#FFFFFF;border:1px solid #ECE8E5;border-radius:18px;overflow:hidden}.info-head{padding:15px 16px 10px;font-size:14px;line-height:19px;font-weight:700}.info-row{min-height:50px;padding:10px 16px;display:grid;grid-template-columns:132px 1fr;align-items:center;gap:10px;border-top:1px solid #F0F0F0}.info-row span{color:#888888;font-size:10px;line-height:14px}.info-row strong{text-align:right;font-size:10px;line-height:15px;font-weight:600;word-break:break-word}.info-card details{border-top:1px solid #F0F0F0}.info-card summary{height:48px;padding:0 16px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#D94B29;font-size:10px;line-height:15px;font-weight:700;cursor:pointer}.info-card summary::-webkit-details-marker{display:none}.info-card details[open] summary .chev{transform:rotate(180deg)}.detail-rows{border-top:1px solid #F0F0F0}.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.more-card{min-height:124px;padding:16px;border:1px solid #ECE8E5;border-radius:18px;background:#FFFFFF;text-decoration:none;color:#252525}.more-icon{width:42px;height:42px;border-radius:13px;background:#FFF1EC;color:#D94B29;display:grid;place-items:center}.more-icon svg{width:21px;height:21px}.more-card strong{display:block;margin-top:12px;font-size:12px;line-height:18px}.more-card span{display:block;margin-top:3px;color:#777777;font-size:10px;line-height:14px}.detail-list{display:grid;gap:10px}.detail-row{padding:14px;border-radius:15px;background:#FFFFFF;border:1px solid #ECECEC}.detail-row strong{display:block;font-size:12px;line-height:17px}.detail-row span{display:block;margin-top:4px;color:#777777;font-size:10px;line-height:14px}.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,440px);height:86px;padding:8px 14px 14px;background:#FFFFFFF2;border-top:1px solid #E7E7E7;backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(4,1fr);z-index:100}.nav-link{text-decoration:none;color:#A7A7A7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;line-height:12px;font-weight:600;position:relative}.nav-link svg{width:22px;height:22px}.nav-link.active{color:#D93A24}.nav-badge{position:absolute;top:7px;margin-left:24px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#D93A24;color:#FFFFFF;border:2px solid #FFFFFF;display:grid;place-items:center;font-size:8px;line-height:10px}.toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:130;padding:10px 14px;border-radius:11px;background:#242424;color:#FFFFFF;font-size:10px;line-height:14px;transition:160ms}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:439px){.home-header{padding-left:18px;padding-right:18px}.attendance-wrap,.home-section,.surface-stack,.profile-content{padding-left:16px;padding-right:16px}.workday-row,.clock-actions,.duration-row{padding-left:18px;padding-right:18px}.quick-icon{width:64px;height:64px}.identity h1{font-size:22px;line-height:28px}.company-ribbon{font-size:12px}.info-row{grid-template-columns:112px 1fr}}

/* =========================================================
   V1.2 — iOS status bar, floating nav, fullscreen mood, schedule sheet
   ========================================================= */
.ios-statusbar{height:30px;padding:7px 19px 0;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:240;color:#FFFFFF;background:#D93A24;font-size:12px;line-height:16px;font-weight:700;letter-spacing:0}.home-header{padding-top:14px}.ios-status-time{min-width:56px}.ios-status-icons{height:16px;display:flex;align-items:center;gap:6px}.ios-signal{height:11px;display:flex;align-items:flex-end;gap:2px}.ios-signal i{display:block;width:3px;border-radius:2px;background:currentColor}.ios-signal i:nth-child(1){height:4px}.ios-signal i:nth-child(2){height:6px}.ios-signal i:nth-child(3){height:8px}.ios-signal i:nth-child(4){height:10px}.ios-wifi{width:15px;height:12px}.ios-wifi svg{display:block;width:15px;height:12px}.ios-battery{width:23px;height:11px;border:1px solid currentColor;border-radius:3px;padding:1px;position:relative}.ios-battery:after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;border-radius:0 2px 2px 0;background:currentColor;opacity:70%}.ios-battery-level{display:block;width:15px;height:7px;border-radius:1px;background:currentColor}.page{min-height:calc(100dvh - 30px);padding-bottom:112px}.profile-page{min-height:calc(100dvh - 30px);padding-bottom:112px}.page-hero{height:110px}.profile-cover{padding-top:20px}.top-hero{top:0}

.bottom-nav{left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),408px);height:70px;padding:6px 8px;border:1px solid rgba(255,255,255,80%);border-radius:26px;background:rgba(255,255,255,88%);box-shadow:0 16px 38px rgba(31,24,22,16%),inset 0 1px 0 rgba(255,255,255,95%);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);overflow:visible}.nav-link{border-radius:20px;gap:4px;font-size:8px;line-height:11px;transition:background 160ms ease,color 160ms ease,transform 120ms ease}.nav-link svg{width:21px;height:21px}.nav-link.active{background:rgba(217,58,36,9%);color:#D93A24}.nav-link:active{transform:scale(96%)}.nav-badge{top:5px;margin-left:25px}.toast{bottom:96px}

/* Fullscreen mood picker */
.mood-screen{position:fixed;inset:0;left:50%;width:min(100%,440px);height:100dvh;transform:translateX(-50%);z-index:520;background:linear-gradient(180deg,#D93A24 0,#ED5B32 38%,#F7F7F7 38%,#F7F7F7 100%);display:flex;flex-direction:column;overflow:hidden}.mood-screen[hidden]{display:none}.mood-status{height:30px;padding:7px 19px 0;color:#FFFFFF;display:flex;align-items:flex-start;justify-content:space-between;font-size:12px;line-height:16px;font-weight:700}.mood-top{padding:22px 24px 28px;color:#FFFFFF;text-align:center}.mood-check{width:72px;height:72px;margin:0 auto 14px;border-radius:24px;background:rgba(255,255,255,18%);border:1px solid rgba(255,255,255,28%);display:grid;place-items:center;font-size:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,22%)}.mood-top h2{margin:0;font-size:22px;line-height:29px;font-weight:700}.mood-top p{margin:5px 0 0;color:#FFE8E2;font-size:10px;line-height:16px}.mood-panel{flex:1;min-height:0;margin-top:0;padding:26px 20px max(22px,env(safe-area-inset-bottom));border-radius:30px 30px 0 0;background:#F7F7F7;display:flex;flex-direction:column}.mood-panel-head{text-align:center}.mood-panel-head h3{margin:0;font-size:18px;line-height:25px;font-weight:700;color:#242424}.mood-panel-head p{margin:6px auto 0;max-width:310px;color:#777777;font-size:10px;line-height:16px}.mood-options{margin-top:26px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.mood-option{min-width:0;padding:0;border:0;background:transparent;color:#555555;text-align:center}.mood-emoji{width:58px;height:58px;max-width:100%;margin:0 auto;border-radius:18px;background:#FFFFFF;border:1px solid #EAEAEA;display:grid;place-items:center;font-size:28px;box-shadow:0 8px 20px rgba(45,31,26,6%);transition:transform 130ms ease,border 130ms ease,background 130ms ease}.mood-option span:last-child{display:block;margin-top:7px;font-size:8px;line-height:12px;font-weight:600}.mood-option.selected .mood-emoji{border:2px solid #D93A24;background:#FFF2ED;transform:translateY(-3px)}.mood-spacer{flex:1;min-height:24px}.mood-summary{padding:13px 14px;border-radius:16px;background:#FFFFFF;border:1px solid #EAEAEA;display:flex;align-items:center;justify-content:space-between;gap:12px}.mood-summary span{color:#7A7A7A;font-size:10px;line-height:14px}.mood-summary strong{font-size:10px;line-height:15px;font-weight:700}.mood-save{width:100%;height:50px;margin-top:12px;border:0;border-radius:15px;background:#D93A24;color:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;box-shadow:0 10px 22px rgba(217,58,36,22%)}.mood-save:disabled{background:#D6D6D6;box-shadow:none}.mood-skip{height:36px;margin:7px auto 0;padding:0 12px;border:0;background:transparent;color:#7B7B7B;font-size:10px;line-height:14px;font-weight:600}

/* iOS style schedule picker */
.ios-sheet-backdrop{position:fixed;inset:0;z-index:430;background:rgba(20,20,20,30%);display:flex;align-items:flex-end;justify-content:center;padding:0 12px max(12px,env(safe-area-inset-bottom));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.ios-sheet-backdrop[hidden]{display:none}.ios-sheet{width:min(100%,416px);max-height:72dvh;padding:10px 14px 14px;border-radius:28px;background:rgba(250,250,250,97%);border:1px solid rgba(255,255,255,88%);box-shadow:0 24px 60px rgba(0,0,0,22%);overflow:auto}.ios-sheet-handle{width:42px;height:5px;margin:1px auto 14px;border-radius:99px;background:#D0D0D0}.ios-sheet-title{padding:0 4px 10px;font-size:16px;line-height:22px;font-weight:700;color:#252525}.ios-sheet-options{display:grid;gap:7px}.ios-sheet-option{min-height:50px;padding:0 14px;border:1px solid #E8E8E8;border-radius:15px;background:#FFFFFF;color:#2B2B2B;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font-size:10px;line-height:15px;font-weight:600}.ios-sheet-option.is-selected{border-color:#E7B2A4;background:#FFF2ED;color:#D93A24}.ios-sheet-check{font-size:16px}.select-card{cursor:pointer}.day{cursor:pointer}.day:active,.select-card:active{transform:scale(98%)}

@media(max-width:439px){.bottom-nav{width:calc(100% - 20px);bottom:max(10px,env(safe-area-inset-bottom))}.mood-panel{padding-left:16px;padding-right:16px}.mood-options{gap:6px}.mood-emoji{width:54px;height:54px;font-size:26px}}

/* =========================================================
   V1.3 — seamless iOS status bar background
   ========================================================= */
/* Home hero already sits from the very top of .app, so expose it behind the status bar. */
.app:has(.top-hero) > .ios-statusbar {
  background: transparent;
}

/* Profile cover now extends behind the iOS status bar as one continuous surface. */
.app:has(.profile-cover) > .ios-statusbar {
  background: transparent;
}

.app:has(.profile-cover) .profile-cover {
  margin-top: -30px;
  height: 254px;
  padding-top: 50px;
}

/* Standard inner pages use the same solid red as their page hero. */
.app:has(.page-hero) > .ios-statusbar {
  background: #D93A24;
}


/* =========================================================
   V1.4 — spacing system polish
   Integer-only type, spacing, radius, and component dimensions.
   ========================================================= */

/* Base rhythm */
.page{
  padding-bottom:108px;
}
.page-content{
  padding:20px 20px 28px;
}

/* iOS status area */
.ios-statusbar{
  height:30px;
  padding:7px 20px 0;
  font-size:12px;
  line-height:16px;
  letter-spacing:0;
}
.ios-status-icons{
  gap:6px;
}

/* Home header */
.home-header{
  padding:12px 20px 0;
  gap:14px;
}
.avatar-sm{
  width:56px;
  height:56px;
  flex-basis:56px;
}
.identity h1{
  font-size:24px;
  line-height:29px;
}
.identity p{
  margin-top:2px;
  font-size:12px;
  line-height:18px;
}
.bell{
  width:42px;
  height:42px;
  flex-basis:42px;
}

/* Attendance block */
.attendance-wrap{
  padding:24px 20px 0;
}
.company-ribbon{
  height:60px;
  padding:11px 16px 25px;
  border-radius:24px 24px 0 0;
  font-size:12px;
  line-height:18px;
}
.attendance-card{
  margin-top:-24px;
  border-radius:24px;
}
.workday-row{
  padding:22px 20px 12px;
  gap:16px;
}
.workday-date small{
  font-size:12px;
  line-height:16px;
}
.workday-date strong{
  margin-top:3px;
  font-size:14px;
  line-height:20px;
}
.mode-badge{
  height:28px;
  padding:0 12px;
  gap:6px;
  font-size:10px;
  line-height:14px;
}
.work-location{
  margin-top:5px;
  font-size:10px;
  line-height:15px;
}
.clock-actions{
  padding:8px 20px 0;
  gap:12px;
}
.clock-card{
  height:76px;
  padding:12px 14px;
  gap:12px;
  border-radius:16px;
}
.clock-icon{
  width:38px;
  height:38px;
  flex-basis:38px;
  border-radius:12px;
}
.clock-time{
  font-size:16px;
  line-height:22px;
}
.clock-label{
  margin-top:3px;
  font-size:10px;
  line-height:14px;
}
.duration-row{
  padding:14px 20px 20px;
}
.duration-box{
  height:44px;
  padding:0 14px;
  gap:8px;
  border-radius:14px;
}
.duration-label{
  font-size:10px;
  line-height:15px;
}
.duration-value{
  font-size:14px;
  line-height:20px;
}
.work-dot{
  width:9px;
  height:9px;
  border-width:3px;
}

/* Home section rhythm */
.home-section{
  padding:22px 20px 0;
}
.section-head{
  gap:12px;
  margin-bottom:12px;
}
.section-title{
  font-size:16px;
  line-height:21px;
}
.section-link{
  font-size:12px;
  line-height:16px;
}
.quick-grid{
  gap:12px;
}
.quick-icon{
  width:68px;
  height:68px;
  border-radius:18px;
}
.quick-icon svg{
  width:27px;
  height:27px;
}
.quick-label{
  margin-top:8px;
  font-size:10px;
  line-height:14px;
}

/* Announcements */
.announcement-card{
  padding:14px;
  border-radius:18px;
}
.announce-top{
  gap:10px;
}
.announce-icon{
  width:42px;
  height:42px;
  flex-basis:42px;
  border-radius:13px;
}
.announce-icon svg{
  width:21px;
  height:21px;
}
.announce-title{
  font-size:12px;
  line-height:17px;
}
.announce-preview{
  margin-top:3px;
  font-size:10px;
  line-height:14px;
}
.announce-time{
  padding-top:1px;
  font-size:10px;
  line-height:14px;
}
.announce-author{
  margin-top:2px;
  margin-left:52px;
  font-size:10px;
  line-height:13px;
}
.announcement-list{
  gap:12px;
}

/* History cards */
.mini-history,
.detail-list{
  gap:10px;
}
.history-card{
  padding:13px 14px;
  border-radius:16px;
}
.history-top{
  gap:8px;
}
.tag-row{
  gap:6px;
}
.history-date{
  font-size:12px;
  line-height:16px;
}
.pill{
  height:22px;
  padding:0 8px;
  font-size:8px;
  line-height:12px;
}
.history-summary{
  margin-top:6px;
  gap:6px;
  font-size:10px;
  line-height:14px;
}

/* Standard inner pages */
.page-hero{
  height:104px;
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.page-hero h1{
  font-size:22px;
  line-height:28px;
}
.page-hero p{
  margin-top:4px;
  font-size:10px;
  line-height:15px;
}
.surface-stack{
  padding:20px 20px 28px;
  gap:14px;
}
.surface{
  padding:16px;
  border-radius:18px;
}
.surface h2{
  font-size:14px;
  line-height:20px;
}
.surface p{
  margin-top:5px;
  font-size:10px;
  line-height:16px;
}

/* Schedule */
.schedule-controls{
  gap:12px;
}
.select-card{
  height:56px;
  padding:0 13px;
  border-radius:15px;
  gap:8px;
}
.select-card small{
  font-size:8px;
  line-height:12px;
}
.select-card strong{
  margin-top:2px;
  font-size:10px;
  line-height:15px;
}
.week-row{
  gap:6px;
}
.day{
  height:66px;
  border-radius:14px;
  gap:5px;
}
.day span{
  font-size:8px;
  line-height:12px;
}
.day strong{
  font-size:16px;
  line-height:18px;
}
.schedule-selected{
  gap:12px;
}
.schedule-selected strong{
  font-size:12px;
  line-height:18px;
}
.schedule-selected span{
  margin-top:3px;
  font-size:10px;
  line-height:14px;
}

/* Announcement filters */
.filter-row{
  gap:8px;
  padding-bottom:2px;
}
.filter{
  height:34px;
  padding:0 12px;
  font-size:10px;
  line-height:14px;
}
.month-label{
  margin-top:2px;
  font-size:10px;
  line-height:15px;
}

/* Settings */
.settings-profile{
  gap:14px;
}
.settings-profile img{
  width:58px;
  height:58px;
}
.settings-profile-copy strong{
  font-size:14px;
  line-height:20px;
}
.settings-profile-copy span{
  margin-top:3px;
  font-size:10px;
  line-height:15px;
}
.settings-list{
  gap:10px;
}
.settings-item{
  height:56px;
  padding:0 14px;
  gap:12px;
  border-radius:15px;
}
.settings-item-icon{
  width:36px;
  height:36px;
  border-radius:11px;
}
.settings-item strong{
  font-size:12px;
  line-height:16px;
}

/* Profile */
.app:has(.profile-cover) .profile-cover{
  margin-top:-30px;
  height:250px;
  padding:50px 20px 22px;
}
.back-link{
  width:38px;
  height:38px;
}
.profile-main{
  margin-top:20px;
  gap:14px;
}
.profile-main img{
  width:76px;
  height:76px;
}
.profile-main h1{
  font-size:22px;
  line-height:28px;
}
.profile-main p{
  margin-top:3px;
  font-size:12px;
  line-height:16px;
}
.profile-content{
  padding:20px 20px 28px;
  gap:14px;
}
.hello{
  font-size:20px;
  line-height:26px;
}
.hello-sub{
  margin-top:4px;
  font-size:10px;
  line-height:16px;
}
.info-card{
  border-radius:18px;
}
.info-head{
  padding:16px 16px 11px;
  font-size:14px;
  line-height:19px;
}
.info-row{
  min-height:52px;
  padding:10px 16px;
  grid-template-columns:128px 1fr;
  gap:12px;
}
.info-row span{
  font-size:10px;
  line-height:14px;
}
.info-row strong{
  font-size:10px;
  line-height:15px;
}
.info-card summary{
  height:50px;
  padding:0 16px;
  gap:10px;
  font-size:10px;
  line-height:15px;
}

/* More and detail pages */
.more-grid{
  gap:12px;
}
.more-card{
  min-height:126px;
  padding:16px;
  border-radius:18px;
}
.more-icon{
  width:42px;
  height:42px;
  border-radius:13px;
}
.more-card strong{
  margin-top:11px;
  font-size:12px;
  line-height:18px;
}
.more-card span{
  margin-top:3px;
  font-size:10px;
  line-height:14px;
}
.detail-row{
  padding:14px;
  border-radius:15px;
}
.detail-row strong{
  font-size:12px;
  line-height:17px;
}
.detail-row span{
  margin-top:4px;
  font-size:10px;
  line-height:14px;
}

/* Floating navigation */
.bottom-nav{
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(calc(100% - 24px),404px);
  height:68px;
  padding:6px 8px;
  border-radius:25px;
}
.nav-link{
  gap:4px;
  border-radius:19px;
  font-size:8px;
  line-height:11px;
}
.nav-link svg{
  width:21px;
  height:21px;
}
.nav-badge{
  top:5px;
  margin-left:24px;
}
.toast{
  bottom:94px;
}

/* Fullscreen mood spacing */
.mood-top{
  padding:20px 22px 24px;
}
.mood-check{
  width:68px;
  height:68px;
  margin-bottom:12px;
  border-radius:22px;
  font-size:32px;
}
.mood-top h2{
  font-size:22px;
  line-height:28px;
}
.mood-top p{
  margin-top:5px;
  font-size:10px;
  line-height:16px;
}
.mood-panel{
  padding:24px 20px max(20px,env(safe-area-inset-bottom));
  border-radius:28px 28px 0 0;
}
.mood-panel-head h3{
  font-size:18px;
  line-height:25px;
}
.mood-panel-head p{
  margin-top:6px;
  font-size:10px;
  line-height:16px;
}
.mood-options{
  margin-top:24px;
  gap:8px;
}
.mood-emoji{
  width:56px;
  height:56px;
  border-radius:18px;
  font-size:28px;
}
.mood-option span:last-child{
  margin-top:7px;
  font-size:8px;
  line-height:12px;
}
.mood-spacer{
  min-height:20px;
}
.mood-summary{
  padding:12px 14px;
  border-radius:16px;
  gap:12px;
}
.mood-save{
  height:50px;
  margin-top:12px;
  border-radius:15px;
}
.mood-skip{
  height:36px;
  margin-top:6px;
}

/* Schedule picker sheet */
.ios-sheet-backdrop{
  padding:0 12px max(12px,env(safe-area-inset-bottom));
}
.ios-sheet{
  width:min(100%,416px);
  padding:10px 14px 14px;
  border-radius:28px;
}
.ios-sheet-handle{
  width:42px;
  height:5px;
  margin:1px auto 14px;
}
.ios-sheet-title{
  padding:0 4px 10px;
  font-size:16px;
  line-height:22px;
}
.ios-sheet-options{
  gap:8px;
}
.ios-sheet-option{
  min-height:50px;
  padding:0 14px;
  border-radius:15px;
  gap:12px;
  font-size:10px;
  line-height:15px;
}

/* Narrow phones: preserve the same rhythm with smaller side gutters only. */
@media(max-width:439px){
  .home-header{
    padding-left:16px;
    padding-right:16px;
  }
  .attendance-wrap,
  .home-section,
  .surface-stack,
  .profile-content{
    padding-left:16px;
    padding-right:16px;
  }
  .workday-row,
  .clock-actions,
  .duration-row{
    padding-left:16px;
    padding-right:16px;
  }
  .quick-grid{
    gap:10px;
  }
  .quick-icon{
    width:64px;
    height:64px;
  }
  .bottom-nav{
    width:calc(100% - 20px);
    bottom:max(10px,env(safe-area-inset-bottom));
  }
  .info-row{
    grid-template-columns:112px 1fr;
    gap:10px;
  }
  .mood-panel{
    padding-left:16px;
    padding-right:16px;
  }
  .mood-options{
    gap:6px;
  }
  .mood-emoji{
    width:54px;
    height:54px;
    font-size:26px;
  }
}

@media(max-width:374px){
  .identity h1{
    font-size:22px;
    line-height:27px;
  }
  .identity p{
    font-size:12px;
    line-height:17px;
  }
  .workday-date strong{
    font-size:14px;
    line-height:19px;
  }
  .clock-card{
    padding:10px 11px;
    gap:9px;
  }
  .clock-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .quick-icon{
    width:60px;
    height:60px;
  }
  .week-row{
    gap:4px;
  }
  .day{
    height:62px;
  }
}


/* =========================================================
   V1.5 — timeline schedule, restored camera, functional settings
   Integer-only layout values.
   ========================================================= */
html,body{overflow-x:hidden}
button,a{font-family:inherit}
button{cursor:pointer}
[data-icon]{display:inline-grid;place-items:center;line-height:0}
[data-icon] svg{display:block;margin:auto}
.app{overflow-x:hidden}
.page,.profile-page{width:100%;max-width:100%;overflow-x:hidden}
.surface-stack,.home-section,.attendance-wrap,.profile-content{width:100%;max-width:100%}
.surface-stack>* ,.home-section>* ,.attendance-card,.announcement-card,.history-card,.detail-row,.info-card,.settings-item,.more-card{min-width:0;max-width:100%}
.surface,.announcement-card,.history-card,.detail-row,.info-card,.settings-item,.more-card{overflow:hidden}

/* Home menu: four larger buttons with a colorful but related palette. */
.menu-section{padding-top:24px}
.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.quick-link{display:flex;min-width:0;flex-direction:column;align-items:center}
.quick-icon{width:78px;height:78px;max-width:100%;border-radius:20px;border:0;box-shadow:none;display:grid;place-items:center}
.quick-icon>span{width:100%;height:100%;display:grid;place-items:center}
.quick-icon svg{width:30px;height:30px;display:block}
.quick-link.history .quick-icon{background:#E8F1FF;color:#4D76D7}
.quick-link.reimburse .quick-icon{background:#FFF0E9;color:#D9683C}
.quick-link.visit .quick-icon{background:#E8F8F1;color:#299B70}
.quick-link.more .quick-icon{background:#F3EDFF;color:#785CC5}
.quick-label{width:100%;margin-top:9px;font-size:10px;line-height:14px;font-weight:600;color:#303030;text-align:center;overflow-wrap:anywhere}

/* Home spacing and alignment details. */
.announce-author{margin-top:2px}
.duration-box{justify-content:flex-start}
.duration-value{margin-left:0}
.work-dot{margin-left:auto}
.work-mode{min-width:98px;align-items:flex-end;text-align:right}
.mode-badge,.work-location{align-self:flex-end;text-align:right}

/* Schedule: date is always on the left and rows read as a timeline. */
.schedule-page{gap:0}
.schedule-controls{margin-bottom:22px}
.schedule-intro{padding:0 2px 14px;display:flex;flex-direction:column;gap:3px}
.schedule-intro strong{font-size:14px;line-height:20px;color:#262626}
.schedule-intro span{font-size:10px;line-height:14px;color:#7B7B7B}
.schedule-timeline{width:100%;display:grid;gap:0}
.timeline-item{width:100%;min-height:92px;padding:0;border:0;background:transparent;display:grid;grid-template-columns:48px 18px minmax(0,1fr);gap:10px;text-align:left;color:#242424;position:relative}
.timeline-date{padding-top:10px;text-align:left}
.timeline-date span{display:block;font-size:10px;line-height:14px;font-weight:600;color:#8A8A8A;text-transform:uppercase}
.timeline-date strong{display:block;margin-top:2px;font-size:22px;line-height:26px;font-weight:800;color:#282828}
.timeline-rail{position:relative;min-height:92px;display:flex;justify-content:center}
.timeline-rail:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:#E4E4E4}
.timeline-item:first-child .timeline-rail:before{top:20px}
.timeline-item:last-child .timeline-rail:before{bottom:54px}
.timeline-dot{position:relative;z-index:2;width:10px;height:10px;margin-top:18px;border-radius:50%;background:#C7C7C7;border:3px solid #F5F5F5;box-sizing:content-box}
.timeline-content{min-width:0;padding:10px 0 18px;border-bottom:1px solid #E9E9E9;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.timeline-copy{min-width:0;flex:1}
.timeline-copy strong{display:block;font-size:12px;line-height:18px;font-weight:700;color:#282828}
.timeline-copy span{display:block;margin-top:4px;font-size:10px;line-height:15px;color:#747474}
.timeline-item.active .timeline-dot{background:#D93A24;box-shadow:0 0 0 4px #FCE9E4}
.timeline-item.active .timeline-date strong{color:#D93A24}
.timeline-item.active .timeline-copy strong{color:#C83C25}
.timeline-item.off .timeline-date,.timeline-item.off .timeline-copy{opacity:55%}
.timeline-content .pill{flex:0 0 auto;margin-top:1px}
.select-card{min-width:0;text-align:left}
.select-card>span:first-child{min-width:0}
.select-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Mood is mandatory and runs from bad on the left to great on the right. */
.mood-screen{background:linear-gradient(180deg,#D93A24 0,#E95A33 36%,#F7F7F7 36%,#F7F7F7 100%)}
.mood-panel{padding:26px 20px max(24px,env(safe-area-inset-bottom));justify-content:flex-start}
.mood-options{margin-top:28px;gap:8px}
.mood-spacer{flex:1;min-height:40px}
.mood-summary,.mood-skip{display:none!important}
.mood-save{margin-top:auto;height:52px}

/* Camera preview before saving Clock In / Clock Out. */
.camera-screen{position:fixed;inset:0;left:50%;width:min(100%,440px);height:100dvh;transform:translateX(-50%);z-index:510;background:#111820;color:#FFFFFF;overflow:hidden}
.camera-screen[hidden]{display:none}
.camera-preview{position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,#81766F 0,#424A50 28%,#202A31 62%,#111820 100%)}
.camera-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,42%),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 58%,rgba(0,0,0,68%))}
.camera-person{position:absolute;left:50%;top:48%;width:176px;height:254px;transform:translate(-50%,-50%);z-index:1}
.camera-person-head{width:96px;height:108px;margin:0 auto;border-radius:48px 48px 42px 42px;background:#C99378;box-shadow:inset 0 -15px 22px rgba(75,42,31,20%)}
.camera-person-head:before{content:"";display:block;width:102px;height:44px;margin-left:-3px;border-radius:50px 50px 20px 20px;background:#262626;transform:translateY(-5px)}
.camera-person-body{width:176px;height:148px;margin-top:-2px;border-radius:70px 70px 18px 18px;background:#929CA4}
.camera-face-frame{position:absolute;left:50%;top:45%;width:184px;height:240px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,88%);border-radius:92px;z-index:2;box-shadow:0 0 0 999px rgba(0,0,0,10%)}
.camera-topbar{position:absolute;top:0;left:0;right:0;z-index:5;padding:7px 20px 0;height:30px;display:flex;align-items:flex-start;justify-content:space-between;font-size:12px;font-weight:700}
.camera-header{position:absolute;top:30px;left:0;right:0;z-index:5;height:70px;padding:10px 20px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:12px}
.camera-close,.camera-switch{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,14%);color:#FFFFFF;display:grid;place-items:center}
.camera-close svg,.camera-switch svg{width:19px;height:19px}
.camera-title{text-align:center}
.camera-title strong{display:block;font-size:14px;line-height:20px}
.camera-title span{display:block;margin-top:3px;font-size:10px;line-height:14px;color:rgba(255,255,255,72%)}
.camera-range{position:absolute;top:112px;left:50%;z-index:5;transform:translateX(-50%);height:30px;padding:0 12px;border-radius:999px;background:rgba(18,24,29,75%);display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;white-space:nowrap;backdrop-filter:blur(10px)}
.camera-range i{width:8px;height:8px;border-radius:50%;background:#23C778}
.camera-footer{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:22px 20px max(24px,env(safe-area-inset-bottom));text-align:center}
.camera-context{margin-bottom:12px;font-size:10px;line-height:15px;color:rgba(255,255,255,74%)}
.camera-context strong{color:#FFFFFF;font-weight:600}
.camera-capture{width:100%;height:52px;border:0;border-radius:16px;background:#FFFFFF;color:#222222;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.camera-capture svg{width:18px;height:18px;color:#D93A24}

/* Settings: everything aligns to the left and controls are usable. */
.settings-page{gap:0}
.settings-profile-card{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.settings-photo-wrap{width:66px;height:66px;position:relative;flex:0 0 66px}
.settings-photo-wrap img{width:66px;height:66px;border-radius:50%;object-fit:cover;display:block}
.photo-edit-button{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;padding:0;border:2px solid #FFFFFF;border-radius:50%;background:#D93A24;color:#FFFFFF;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,12%)}
.photo-edit-button svg{width:13px;height:13px}
.settings-profile-copy{min-width:0;text-align:left}
.settings-profile-copy strong{display:block;font-size:14px;line-height:20px}
.settings-profile-copy span{display:block;margin-top:2px;font-size:10px;line-height:15px;color:#777777}
.settings-profile-copy a{display:inline-block;margin-top:7px;color:#D93A24;text-decoration:none;font-size:10px;line-height:14px;font-weight:600}
.settings-section-label{margin:0 2px 8px;padding-top:18px;font-size:10px;line-height:14px;font-weight:700;color:#878787;text-transform:uppercase;letter-spacing:1px;text-align:left}
.settings-list{gap:8px}
.settings-item{width:100%;min-height:62px;height:auto;padding:10px 14px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
.settings-item-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;margin:0}
.settings-item-icon svg{width:18px;height:18px;display:block}
.settings-item-copy{min-width:0;flex:1;text-align:left}
.settings-item-copy strong{display:block;font-size:12px;line-height:16px;color:#2A2A2A}
.settings-item-copy small{display:block;margin-top:2px;font-size:8px;line-height:13px;color:#858585;font-weight:500}
.settings-value{margin-left:auto;max-width:112px;color:#777777;font-size:8px;line-height:13px;text-align:right}
.settings-chevron{margin-left:auto;color:#999999}
.settings-chevron svg{width:16px;height:16px}
.settings-item-icon.user-tone{background:#FFF0EB;color:#D65A35}
.settings-item-icon.blue-tone{background:#EAF2FF;color:#4C75D2}
.settings-item-icon.purple-tone{background:#F2ECFF;color:#785CC5}
.settings-item-icon.orange-tone{background:#FFF2E5;color:#D77B25}
.settings-item-icon.green-tone{background:#EAF8F1;color:#27986D}
.settings-item-icon.teal-tone{background:#E7F7F7;color:#268C91}
.settings-item-icon.amber-tone{background:#FFF5DF;color:#C48A22}
.settings-item-icon.red-tone{background:#FCECEC;color:#C84B4B}
.switch{width:42px;height:24px;margin-left:auto;padding:2px;border-radius:999px;background:#D8D8D8;display:flex;align-items:center;flex:0 0 42px;transition:background 140ms ease}
.switch i{width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 5px rgba(0,0,0,16%);transition:transform 140ms ease}
.switch.is-on{background:#26B873}
.switch.is-on i{transform:translateX(18px)}

/* Generic functional filters, detail sheets and primary actions. */
.detail-button{width:100%;border:0;text-align:left;font-family:inherit}
.history-card.detail-button{display:block}
.action-surface{display:flex;align-items:center;justify-content:space-between;gap:14px}
.action-surface>div{min-width:0;flex:1}
.primary-mini{height:38px;padding:0 14px;border:0;border-radius:12px;background:#D93A24;color:#FFFFFF;font-size:10px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.empty-state{padding:24px 14px;text-align:center;color:#888888;font-size:10px;line-height:16px}
.sheet-copy{display:grid;gap:9px;margin-bottom:12px}
.sheet-copy-row{padding:11px 12px;border-radius:13px;background:#FFFFFF;border:1px solid #EAEAEA;color:#505050;font-size:10px;line-height:15px}
.sheet-action{width:100%;height:48px;border:0;border-radius:14px;background:#D93A24;color:#FFFFFF;font-size:10px;font-weight:700}

/* More menu colors in the same muted palette. */
.more-card.leave-tone .more-icon{background:#EAF2FF;color:#4D76D7}
.more-card.pay-tone .more-icon{background:#F3EDFF;color:#785CC5}
.more-card.doc-tone .more-icon{background:#FFF4E0;color:#C18B24}
.more-card.history-tone .more-icon{background:#E8F8F1;color:#299B70}

/* Defensive overflow / centering fixes. */
.info-row strong,.surface p,.detail-row span,.more-card span,.announce-preview,.timeline-copy span{overflow-wrap:anywhere;word-break:normal}
.clock-icon,.announce-icon,.more-icon,.bell,.back-link,.photo-edit-button,.camera-close,.camera-switch{display:grid;place-items:center}
.clock-icon svg,.announce-icon svg,.more-icon svg,.bell svg,.back-link svg{display:block;margin:auto}

@media(max-width:439px){
  .quick-grid{gap:8px}
  .quick-icon{width:74px;height:74px}
  .timeline-item{grid-template-columns:44px 16px minmax(0,1fr);gap:8px}
  .timeline-content{gap:8px}
  .settings-value{max-width:92px}
}
@media(max-width:374px){
  .quick-grid{gap:6px}
  .quick-icon{width:68px;height:68px;border-radius:18px}
  .quick-icon svg{width:27px;height:27px}
  .quick-label{font-size:10px;line-height:13px}
  .schedule-controls{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:40px 14px minmax(0,1fr)}
  .timeline-content .pill{display:none}
}
.clock-label{display:block}

[hidden]{display:none!important}
.page,.profile-page{padding-bottom:132px}


/* =========================================================
   V1.6 — RETURN TO ORIGINAL SINGLE-FILE RHYTHM
   Shared components are intentionally centralized here so
   every page keeps the same spacing, radius, typography and UX.
   ========================================================= */
:root{
  --page-x:20px;
  --card-radius:18px;
  --card-border:#ECECEC;
  --surface:#FFFFFF;
  --muted:#777777;
  --brand:#D93A24;
}

/* Consistent containers: no page-specific drift */
.surface-stack,.home-section,.attendance-wrap,.profile-content{padding-left:var(--page-x);padding-right:var(--page-x)}
.surface-stack,.profile-content{gap:14px}
.surface,.history-accordion,.profile-info-card,.announcement-card,.settings-item,.detail-row,.more-card{max-width:100%;min-width:0}

/* History accordion — restored from the original one-HTML interaction */
.history-list{display:grid;gap:10px;width:100%}
.history-accordion{width:100%;border:1px solid var(--card-border);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 8px 18px rgba(55,34,29,0.04)}
.history-accordion summary{list-style:none;cursor:pointer;padding:13px 14px;outline:none}
.history-accordion summary::-webkit-details-marker{display:none}
.history-card-head{display:flex;align-items:center;gap:12px;width:100%}
.history-main{min-width:0;flex:1}
.history-label-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.history-summary-mini{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#737373;font-size:10px;line-height:14px}
.history-summary-mini span{white-space:nowrap}
.history-summary-mini strong{margin-left:auto;color:#555555;font-weight:600;text-align:right;white-space:nowrap}
.history-expand-icon{width:28px;height:28px;border-radius:50%;background:#F5F5F5;color:#7B7B7B;display:grid;place-items:center;flex:0 0 28px;transition:transform 160ms ease}
.history-expand-icon svg{width:14px;height:14px}
.history-accordion[open] .history-expand-icon{transform:rotate(180deg)}
.history-accordion-body{padding:11px 14px 14px;border-top:1px solid #EFEFEF;background:#FAFAFA}
.simple-attendance-detail{display:grid;gap:8px}
.simple-attendance-row{min-height:48px;padding:10px 11px;border:1px solid #EFEFEF;border-radius:12px;background:#FFFFFF;display:flex;align-items:center;justify-content:space-between;gap:12px}
.simple-attendance-main,.simple-attendance-row>div{min-width:0;display:grid;gap:2px}
.simple-attendance-row strong{font-size:10px;line-height:15px;font-weight:600;color:#292929}
.simple-attendance-row div span{font-size:10px;line-height:14px;color:#747474}
.range-chip{min-height:25px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;line-height:12px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.range-chip.in{background:#EAF9F2;color:#1C985D}
.range-chip.out{background:#FFF0EA;color:#B65A2D}
.compact-history .history-accordion-body{padding-bottom:12px}
.history-page-list{margin-top:2px}

/* Profile — key information visible, rest expands down in-place */
.profile-content{padding-top:20px;padding-bottom:40px}
.profile-greeting{padding:0 2px 2px}
.profile-info-card{width:100%;border:1px solid #ECE8E5;border-radius:18px;background:#FFFFFF;overflow:hidden;box-shadow:0 8px 20px rgba(61,33,21,0.03)}
.profile-section-title{padding:16px 16px 10px;font-size:14px;line-height:19px;font-weight:700;color:#252525}
.profile-visible-rows{width:100%}
.profile-info-card .info-row{min-height:50px;padding:10px 16px;display:grid;grid-template-columns:124px minmax(0,1fr);align-items:center;gap:12px;border-top:1px solid #F0F0F0}
.profile-info-card .info-row span{font-size:10px;line-height:14px;color:#858585}
.profile-info-card .info-row strong{min-width:0;text-align:right;font-size:10px;line-height:15px;font-weight:600;color:#292929;overflow-wrap:anywhere}
.profile-accordion{border-top:1px solid #F0F0F0}
.profile-accordion summary{min-height:58px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;color:#292929}
.profile-accordion summary::-webkit-details-marker{display:none}
.profile-accordion summary>span:first-child{min-width:0;display:grid;gap:2px}
.profile-accordion summary strong{font-size:10px;line-height:15px;font-weight:700;color:#D94B29}
.profile-accordion summary small{font-size:8px;line-height:13px;font-weight:500;color:#8A8A8A}
.profile-expand-icon{width:28px;height:28px;border-radius:50%;background:#F5F5F5;color:#7A7A7A;display:grid;place-items:center;flex:0 0 28px;transition:transform 160ms ease}
.profile-expand-icon svg{width:14px;height:14px}
.profile-accordion[open] .profile-expand-icon{transform:rotate(180deg)}
.profile-accordion-body{background:#FAFAFA;border-top:1px solid #F0F0F0}
.profile-accordion-body .info-row{background:#FFFFFF}

/* Make the page feel like the stable single-HTML version */
.page-hero{height:116px;padding-top:42px}
.page-hero h1{font-size:22px;line-height:27px}
.page-hero p{font-size:10px;line-height:15px}
.filter-row{padding:2px 0 4px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter{min-height:34px}

/* Reliable centering for every icon holder */
.quick-icon,.clock-icon,.announce-icon,.settings-item-icon,.more-icon,.bell,.back-link,.history-expand-icon,.profile-expand-icon{display:grid;place-items:center}
.quick-icon>span,.clock-icon>span,.announce-icon>span,.settings-item-icon>span,.more-icon>span,.bell>span,.back-link>span,.history-expand-icon>span,.profile-expand-icon>span{display:grid;place-items:center;width:100%;height:100%;margin:0}
.quick-icon svg,.clock-icon svg,.announce-icon svg,.settings-item-icon svg,.more-icon svg,.bell svg,.back-link svg,.history-expand-icon svg,.profile-expand-icon svg{display:block;margin:auto}

@media(max-width:439px){
  :root{--page-x:16px}
  .profile-info-card .info-row{grid-template-columns:110px minmax(0,1fr)}
  .history-summary-mini{gap:6px}
}

/* V1.7 — back navigation on every non-home page */
.page-hero.has-back{position:relative;padding-left:68px}
.page-back-button{position:absolute;left:20px;top:38px;width:36px;height:36px;border-radius:50%;background:#FFFFFF;color:#D93A24;display:grid;place-items:center;text-decoration:none;box-shadow:0 6px 16px #7A25151A;z-index:4}
.page-back-button svg{width:19px;height:19px;display:block;margin:auto}
.page-back-button:active{transform:scale(96%)}


/* =========================================================
   V1.8 — CAMERA, READ-ONLY SCHEDULE, DETAIL + ALIGNMENT POLISH
   ========================================================= */

/* Keep every inner surface inside the page container. */
.surface-stack,.home-section,.attendance-wrap,.profile-content{min-width:0}
.surface,.announcement-card,.history-accordion,.select-card,.timeline-content,.detail-key-card{max-width:100%;min-width:0}

/* Menu: only the glyphs carry color; every button surface stays white. */
.quick-icon{background:#FFFFFF!important;color:inherit!important;border:1px solid #ECE7E4!important}
.quick-link.history{color:#4583D7!important}
.quick-link.reimburse{color:#E39A2B!important}
.quick-link.visit{color:#35A979!important}
.quick-link.more{color:#8A68C7!important}
.quick-icon>span,.clock-icon>span,.announce-icon>span,.settings-item-icon>span,.more-icon>span,.bell>span,.camera-close>span,.camera-switch>span,.camera-capture>span:first-child{display:grid;place-items:center;width:100%;height:100%}

/* Header: back button and page title share one row and vertical center. */
.page-hero.has-back{height:118px;padding:38px 20px 17px;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:36px auto;column-gap:12px;row-gap:1px;align-content:start}
.page-hero.has-back .page-back-button{position:static;grid-column:1;grid-row:1;width:36px;height:36px;align-self:center}
.page-hero.has-back h1{grid-column:2;grid-row:1;align-self:center;margin:0;line-height:28px}
.page-hero.has-back p{grid-column:2;grid-row:2;margin:1px 0 0;align-self:start}

/* History: time on the left, work duration mirrored on the right. */
.history-summary-mini{margin-top:7px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%}
.history-summary-mini span{min-width:0;color:#737373;white-space:nowrap}
.history-summary-mini strong{margin:0;color:#4F4F4F;text-align:right;white-space:nowrap;font-size:10px;line-height:14px;font-weight:700}
.range-chip{max-width:150px;text-align:center}

/* Camera controls: centered glyphs, clearer distance, more explicit verification CTA. */
.camera-close,.camera-switch{display:flex;align-items:center;justify-content:center}
.camera-switch svg{width:22px;height:22px}
.camera-range{max-width:calc(100% - 40px);height:auto;min-height:32px;padding:7px 12px;white-space:normal;text-align:center;justify-content:center;line-height:14px}
.camera-range span{min-width:0}
.camera-capture{min-height:52px;height:auto;padding:12px 16px;line-height:16px;text-align:center}
.camera-capture span:last-child{min-width:0}

/* Schedule timeline: date/year at left; schedule info is a white framed, read-only card. */
.schedule-intro{padding:2px 2px 4px}
.schedule-timeline{margin-top:2px}
.timeline-item{width:100%;min-height:108px;padding:0;border:0;background:transparent;display:grid;grid-template-columns:48px 18px minmax(0,1fr);gap:10px;text-align:left;color:#242424;position:relative;cursor:default}
.timeline-date{padding-top:12px;text-align:left}
.timeline-date span{font-size:10px;line-height:13px}
.timeline-date strong{margin-top:1px;font-size:22px;line-height:25px}
.timeline-date small{display:block;margin-top:1px;font-size:8px;line-height:11px;font-weight:600;color:#A0A0A0}
.timeline-rail{min-height:108px}
.timeline-rail:before{top:0;bottom:0}
.timeline-item:first-child .timeline-rail:before{top:23px}
.timeline-item:last-child .timeline-rail:before{bottom:60px}
.timeline-dot{margin-top:21px}
.timeline-content{margin:6px 0 12px;padding:14px;border:1px solid #ECECEC;border-radius:16px;background:#FFFFFF;box-shadow:0 7px 18px rgba(55,34,29,4%);display:flex;align-items:center;justify-content:space-between;gap:12px}
.timeline-copy strong{font-size:12px;line-height:18px;color:#292929!important}
.timeline-copy span{margin-top:3px;font-size:10px;line-height:14px;color:#747474}
.timeline-content .pill{margin-top:0;align-self:center}
.timeline-item.active .timeline-date strong{color:#D93A24}
.timeline-item.active .timeline-copy strong{color:#292929!important}
.timeline-item.off .timeline-content{background:#FAFAFA}
.timeline-item.off .timeline-date,.timeline-item.off .timeline-copy{opacity:65%}

/* Announcement detail: concise labels instead of multiple verbose cards. */
.announcement-detail-stack{gap:0}
.detail-key-card{width:100%;overflow:hidden;border:1px solid #ECE8E5;border-radius:18px;background:#FFFFFF;box-shadow:0 8px 20px rgba(61,33,21,3%)}
.detail-key-row{min-height:58px;padding:13px 16px;border-top:1px solid #F0F0F0;display:grid;grid-template-columns:122px minmax(0,1fr);align-items:center;gap:14px}
.detail-key-row:first-child{border-top:0}
.detail-key-row>span{font-size:10px;line-height:14px;color:#858585}
.detail-key-row>strong{min-width:0;text-align:right;font-size:10px;line-height:16px;font-weight:600;color:#292929;overflow-wrap:anywhere}
.detail-key-row.detail-key-body{align-items:start;padding-top:15px;padding-bottom:15px}
.detail-key-row p{margin:0;text-align:right;font-size:10px;line-height:17px;color:#4F4F4F;overflow-wrap:anywhere}

@media(max-width:390px){
  .page-hero.has-back{padding-left:16px;padding-right:16px;grid-template-columns:36px minmax(0,1fr)}
  .quick-grid{gap:9px}
  .quick-icon{width:66px;height:66px}
  .range-chip{max-width:132px;padding-left:7px;padding-right:7px;font-size:8px}
  .detail-key-row{grid-template-columns:104px minmax(0,1fr);gap:10px}
}

.camera-capture-label{white-space:nowrap}

/* =========================================================
   V1.9 — NEUTRAL COPY + COLOR-ONLY STATUS LABELS
   ========================================================= */

/* Keep primary information neutral. Only status labels carry color. */
.history-card-head,
.history-main,
.history-date,
.history-summary-mini,
.history-summary-mini span,
.history-summary-mini strong,
.simple-attendance-row strong,
.simple-attendance-row span,
.timeline-item,
.timeline-date span,
.timeline-date strong,
.timeline-date small,
.timeline-copy strong,
.timeline-copy span,
.timeline-item.active .timeline-date strong,
.timeline-item.active .timeline-copy strong,
.schedule-intro strong,
.schedule-intro span {
  color:#4F4F4F!important;
}

.history-date,
.timeline-copy strong,
.schedule-intro strong {
  color:#2F2F2F!important;
}

.history-summary-mini span,
.timeline-copy span,
.timeline-date span,
.timeline-date small,
.schedule-intro span {
  color:#7A7A7A!important;
}

/* Status labels are the only colorful elements. */
.pill.wfo {
  background:#EAF5FB!important;
  color:#2B82AD!important;
}

.pill.wfh {
  background:#F1EDFF!important;
  color:#7055C7!important;
}

.pill.good {
  background:#EAF9F2!important;
  color:#1B9B60!important;
}

.pill.warn {
  background:#FFF5E0!important;
  color:#A66B00!important;
}

/* Home work-mode follows the same rule: neutral copy, colored WFO label. */
.workday-date small,
.workday-date strong,
.work-location {
  color:#6F6F6F!important;
}

.workday-date strong {
  color:#2F2F2F!important;
}

.mode-badge {
  background:#EAF9F2!important;
  color:#1B9B60!important;
}

/* =========================================================
   V1.10 — seamless status bar / page hero
   Remove any visible divider between the iOS status bar and
   the red page header so both read as one continuous surface.
   ========================================================= */
.ios-statusbar{
  border:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.app:has(.page-hero) > .ios-statusbar{
  background:#D93A24 !important;
  margin-bottom:-1px;
}

.page-hero{
  position:relative;
  border-top:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  margin-top:0 !important;
}

.page-hero::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:10px;
  background:#D93A24;
  pointer-events:none;
  z-index:0;
}

.page-hero > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   V1.11 — HOME "LAINNYA" SHEET + NEUTRAL STATUS TEXT
   ========================================================= */
.quick-link-button{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
}
.quick-link-button .quick-label{display:block}

.ios-sheet-link-option{
  min-height:64px;
  padding:10px 12px;
  text-decoration:none;
  justify-content:flex-start;
  color:#303030!important;
}
.ios-sheet-link-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
}
.ios-sheet-link-icon svg{width:20px;height:20px}
.ios-sheet-link-icon.leave-tone{background:#EEF4FF;color:#5477CF}
.ios-sheet-link-icon.pay-tone{background:#FFF3E5;color:#D88A25}
.ios-sheet-link-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.ios-sheet-link-copy strong{
  color:#303030;
  font-size:12px;
  line-height:16px;
  font-weight:700;
}
.ios-sheet-link-copy small{
  margin-top:2px;
  color:#7B7B7B;
  font-size:10px;
  line-height:14px;
  font-weight:500;
}
.ios-sheet-link-chevron{
  margin-left:auto;
  color:#A0A0A0;
  display:grid;
  place-items:center;
}
.ios-sheet-link-chevron svg{width:16px;height:16px}

/* The colored status is carried by the label surface, while its wording stays neutral. */
.pill.wfo,
.pill.wfh,
.pill.good,
.pill.warn,
.mode-badge{
  color:#343434!important;
}

/* =========================================================
   V1.12 — PROFILE ACCORDIONS MATCH ATTENDANCE HISTORY
   ========================================================= */
.profile-content{
  display:grid;
  gap:12px;
}
.profile-history-accordion{
  width:100%;
  border-radius:16px;
}
.profile-history-accordion summary{
  padding:14px;
}
.profile-history-accordion .history-card-head{
  align-items:flex-start;
}
.profile-history-accordion .history-main{
  display:grid;
  gap:8px;
}
.profile-history-accordion .history-label-row{
  min-height:20px;
}
.profile-history-accordion .history-date{
  font-size:12px!important;
  line-height:18px;
  font-weight:700;
  color:#2F2F2F!important;
}
.profile-summary-grid{
  display:grid;
  gap:5px;
}
.profile-summary-row{
  display:grid;
  grid-template-columns:106px minmax(0,1fr);
  gap:10px;
  align-items:start;
  min-width:0;
}
.profile-summary-row span{
  font-size:8px;
  line-height:13px;
  color:#858585;
}
.profile-summary-row strong{
  min-width:0;
  text-align:right;
  font-size:10px;
  line-height:14px;
  font-weight:600;
  color:#4F4F4F;
  overflow-wrap:anywhere;
}
.profile-history-accordion .history-expand-icon{
  margin-top:0;
}
.profile-history-accordion .history-accordion-body{
  padding:11px 14px 14px;
}
.profile-detail-list{
  gap:8px;
}
.profile-detail-row{
  min-height:46px;
  padding:10px 11px;
  border:1px solid #EFEFEF;
  border-radius:12px;
  background:#FFFFFF;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.profile-detail-row span{
  font-size:10px;
  line-height:14px;
  color:#858585;
}
.profile-detail-row strong{
  min-width:0;
  text-align:right;
  font-size:10px;
  line-height:14px;
  font-weight:600;
  color:#353535;
  overflow-wrap:anywhere;
}
@media(max-width:390px){
  .profile-summary-row{grid-template-columns:92px minmax(0,1fr)}
  .profile-detail-row{grid-template-columns:96px minmax(0,1fr);gap:9px}
}

/* =========================================================
   V1.13 — notification settings + modern iOS-style back
   ========================================================= */
.settings-sub-label{margin:14px 2px 8px;font-size:10px;line-height:14px;font-weight:600;color:#8A8A8A;text-align:left}
.settings-section-label+.settings-sub-label{margin-top:0}
.settings-page .settings-list+.settings-sub-label{margin-top:16px}
.settings-page .settings-list{display:grid;gap:8px}

/* A modern back affordance: large 44px tap target, visually lightweight chevron. */
.page-hero.has-back{grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding-left:16px;padding-right:20px}
.page-hero.has-back .page-back-button{width:44px;height:44px;border-radius:14px;background:transparent;color:#FFFFFF;box-shadow:none;border:0;align-self:center}
.page-back-button svg{width:22px;height:22px;stroke-width:2.2}
.page-back-button:hover,.page-back-button:focus-visible{background:#FFFFFF14;outline:none}
.page-back-button:active{transform:scale(96%);background:#FFFFFF1F}
.page-hero.has-back h1{align-self:center}

@media(max-width:439px){
  .page-hero.has-back{padding-left:12px;padding-right:16px}
}

/* V1.14 — face verification status in attendance history */
.attendance-status-group{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:0 0 auto}
.face-chip{min-height:25px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;line-height:12px;font-weight:600;white-space:nowrap;color:#333333;background:#EAF9F2;border:1px solid #D8F2E5}
.face-chip.verified{background:#EAF9F2;color:#333333}
@media(max-width:390px){.attendance-status-group{gap:5px}.face-chip{min-height:24px;padding:0 7px;font-size:8px}.attendance-status-group .range-chip{max-width:118px}}


/* v1.16 — compact history summary: time · duration · location */
.history-summary-mini{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  min-width:0;
  color:#727272;
  font-size:10px;
  line-height:14px;
}
.history-summary-mini .history-summary-time,
.history-summary-mini .history-summary-location{
  color:#727272;
  font-weight:500;
  white-space:nowrap;
}
.history-summary-mini .history-summary-duration{
  margin:0;
  color:#555555;
  font-size:10px;
  line-height:14px;
  font-weight:700;
  text-align:left;
  white-space:nowrap;
}
.history-summary-mini .history-summary-sep{
  color:#A0A0A0;
  font-weight:500;
  flex:0 0 auto;
}
@media(max-width:390px){
  .history-summary-mini{gap:6px;font-size:10px}
  .history-summary-mini .history-summary-duration{font-size:10px}
}


/* =========================================================
   V1.17 — CAMERA CTA + RANGE STATUS REFINEMENT
   ========================================================= */

/* Keep the verification CTA balanced: icon left, label truly centered. */
.camera-capture{
  width:100%;
  min-height:56px;
  height:auto;
  padding:12px 18px;
  border:0;
  border-radius:18px;
  background:#FFFFFF;
  color:#262626;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:16px;
  font-weight:700;
  text-align:center;
  overflow:hidden;
}
.camera-capture::after{
  content:"";
  width:20px;
  height:20px;
}
.camera-capture>span:first-child{
  width:20px!important;
  height:20px!important;
  display:grid;
  place-items:center;
}
.camera-capture svg{
  width:18px;
  height:18px;
  color:#D93A24;
}
.camera-capture-label{
  min-width:0;
  width:100%;
  white-space:normal!important;
  overflow:visible;
  text-overflow:clip;
  text-align:center;
}

/* Two-line range copy, with a dot that can never be compressed. */
.camera-range{
  position:absolute;
  top:112px;
  left:50%;
  z-index:5;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 40px);
  min-height:50px;
  height:auto;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(18,24,29,75%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:normal;
  text-align:left;
  backdrop-filter:blur(10px);
}
.camera-range i{
  display:block;
  width:8px;
  height:8px;
  min-width:8px;
  min-height:8px;
  flex:0 0 8px;
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:#23C778;
}
.camera-range-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}
.camera-range-copy strong{
  display:block;
  font-size:12px;
  line-height:16px;
  font-weight:700;
  color:#FFFFFF;
}
.camera-range-copy span{
  display:block;
  font-size:10px;
  line-height:14px;
  font-weight:500;
  color:rgba(255,255,255,78%);
}

@media(max-width:390px){
  .camera-capture{
    padding-left:14px;
    padding-right:14px;
    gap:8px;
  }
  .camera-range{
    max-width:calc(100% - 32px);
  }
}


/* =========================================================
   V1.18/V1.21 — INLINE "LAINNYA" AS MATCHING QUICK MENU
   ========================================================= */
.home-more-inline{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.home-more-inline[hidden]{display:none!important}
.home-more-inline .more-option{
  min-width:0;
  text-align:center;
  text-decoration:none;
}
.home-more-inline .more-option .quick-icon{
  width:70px;
  height:70px;
  max-width:100%;
  margin:0 auto;
  border-radius:18px;
  background:#FFFFFF;
  border:1px solid #EEE8E5;
  box-shadow:0 8px 18px #4A23120F;
  display:grid;
  place-items:center;
}
.home-more-inline .more-option .quick-icon>span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.home-more-inline .more-option .quick-icon svg{
  width:28px;
  height:28px;
  display:block;
  margin:auto;
}
.home-more-inline .more-option .quick-label{
  display:block;
  margin-top:9px;
  color:#303030;
  font-size:10px;
  line-height:14px;
  font-weight:600;
}
.home-more-inline .more-option.leave-tone{color:#5477CF}
.home-more-inline .more-option.pay-tone{color:#D88A25}
.quick-link-button.is-open .quick-icon{
  border-color:#DDD4CF;
  box-shadow:0 8px 20px rgba(74,35,18,0.08);
}

/* Keep the History date the same visual size as the announcement title. */
.announce-title,
.history-date{
  font-size:12px!important;
  line-height:18px!important;
  font-weight:700!important;
}

@media(max-width:390px){
  .home-more-inline{gap:12px}
  .home-more-inline .more-option .quick-icon{
    width:68px;
    height:68px;
  }
}

/* =========================================================
   V1.19 — ANNOUNCEMENT DETAIL STRUCTURE + ACTIVE NAV PILL
   ========================================================= */
.announcement-detail-stack{
  gap:12px!important;
}
.announcement-detail-frame{
  width:100%;
  min-width:0;
  max-width:100%;
  padding:16px;
  border:1px solid #ECE8E5;
  border-radius:18px;
  background:#FFFFFF;
  box-shadow:0 8px 20px rgba(61,33,21,0.04);
  overflow:hidden;
}
.announcement-detail-summary{
  display:block;
}
.announcement-detail-category{
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:14px;
  font-weight:700;
  color:#303030;
}
.announcement-detail-category.important{
  background:#FFF0DA;
}
.announcement-detail-category.general{
  background:#FFF0EA;
}
.announcement-detail-category.birthday{
  background:#FBEAF2;
}
.announcement-detail-summary h2{
  margin:10px 0 0;
  font-size:16px;
  line-height:22px;
  font-weight:700;
  color:#242424;
}
.announcement-detail-time{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:10px;
  line-height:16px;
  color:#777777;
}
.announcement-detail-time strong{
  font-size:10px;
  line-height:16px;
  font-weight:600;
  color:#5E5E5E;
}
.announcement-detail-time strong::after{
  content:"·";
  margin-left:8px;
  color:#B0B0B0;
}
.announcement-detail-time span{
  font-size:10px;
  line-height:16px;
  color:#858585;
}
.announcement-detail-sender{
  display:flex;
  align-items:center;
  gap:12px;
}
.announcement-sender-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  background:linear-gradient(145deg,#FFD9CE,#F0A28B);
  color:#78301F;
  display:grid;
  place-items:center;
  font-size:12px;
  line-height:16px;
  font-weight:700;
}
.announcement-sender-copy{
  min-width:0;
  flex:1;
}
.announcement-sender-copy strong{
  display:block;
  font-size:12px;
  line-height:18px;
  font-weight:700;
  color:#292929;
}
.announcement-sender-copy span{
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:16px;
  font-weight:500;
  color:#777777;
}
.announcement-detail-body h3{
  margin:0;
  font-size:12px;
  line-height:18px;
  font-weight:700;
  color:#292929;
}
.announcement-detail-body p{
  margin:8px 0 0;
  font-size:10px;
  line-height:18px;
  font-weight:400;
  color:#535353;
}

/* Active bottom navigation: colored surface, white icon + label. */
.nav-link{
  min-width:0;
  padding:6px 4px;
}
.nav-link.active{
  background:#D93A24!important;
  color:#FFFFFF!important;
  box-shadow:0 6px 14px rgba(217,58,36,0.20);
}
.nav-link.active svg{
  color:#FFFFFF!important;
}
.nav-link.active>span:not(.nav-badge){
  color:#FFFFFF!important;
}
.nav-link.active .nav-badge{
  background:#FFFFFF;
  color:#D93A24;
  border-color:#D93A24;
}

/* =========================================================
   V1.20 — SETTINGS INFORMATION ARCHITECTURE
   Main Settings is now a clean three-item hub. Each item opens
   a dedicated settings page with its own controls.
   ========================================================= */
.settings-hub{
  padding-top:20px!important;
}
.settings-hub-list{
  display:grid;
  gap:12px!important;
}
.settings-hub-item{
  min-height:72px;
  padding:12px 14px;
  border:1px solid #ECE8E5;
  background:#FFFFFF;
  box-shadow:0 8px 20px rgba(61,33,21,0.04);
  text-decoration:none;
  color:#292929;
}
.settings-hub-item .settings-item-icon{
  width:42px;
  height:42px;
  flex-basis:42px;
  border-radius:14px;
}
.settings-hub-item .settings-item-icon svg{
  width:20px;
  height:20px;
}
.settings-hub-item .settings-item-copy strong{
  font-size:14px;
  line-height:20px;
}
.settings-hub-item .settings-item-copy small{
  margin-top:4px;
  font-size:10px;
  line-height:16px;
}
.settings-hub-logout .settings-item-copy strong{
  color:#B9473B;
}
.settings-detail-page{
  padding-top:20px!important;
}
.settings-first-label{
  padding-top:0!important;
}
.logout-account-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
}
.logout-avatar{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:50%;
  object-fit:cover;
}
.logout-account-card strong{
  display:block;
  font-size:14px;
  line-height:20px;
  color:#292929;
}
.logout-account-card span{
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:16px;
  color:#777777;
}
.logout-info-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
}
.logout-info-card>div{
  min-width:0;
  flex:1;
}
.logout-info-card strong{
  display:block;
  font-size:12px;
  line-height:18px;
  color:#292929;
}
.logout-info-card p{
  margin:6px 0 0;
  font-size:10px;
  line-height:18px;
  color:#6F6F6F;
}
.logout-primary{
  width:100%;
  height:50px;
  margin-top:4px;
  border:0;
  border-radius:16px;
  background:#C94A3E;
  color:#FFFFFF;
  font-family:inherit;
  font-size:12px;
  line-height:16px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(201,74,62,0.18);
}
.logout-primary:active{
  transform:scale(0.98);
}
.logout-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.logout-sheet-cancel,.logout-sheet-confirm{height:46px;border:0;border-radius:14px;font-family:inherit;font-size:12px;line-height:16px;font-weight:700}
.logout-sheet-cancel{background:#ECECEC;color:#3A3A3A}
.logout-sheet-confirm{background:#C94A3E;color:#FFFFFF}


/* =========================================================
   V1.22 — profile accordion detail state, unified settings,
   stronger back icon, red status bar, and request accents.
   ========================================================= */

/* Status bar is always red on every page so it never falls back to white. */
.ios-statusbar{
  background:#D93A24!important;
  color:#FFFFFF!important;
}
.app:has(.top-hero) > .ios-statusbar,
.app:has(.profile-cover) > .ios-statusbar,
.app:has(.page-hero) > .ios-statusbar{
  background:#D93A24!important;
}

/* Bigger, heavier back chevron while keeping a 44px iOS-size tap target. */
.page-back-button svg,
.back-link svg{
  width:26px!important;
  height:26px!important;
  stroke-width:3!important;
}
.back-link{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,0.10)!important;
  color:#FFFFFF!important;
  box-shadow:none!important;
}
.back-link:active{
  background:rgba(255,255,255,0.18)!important;
  transform:scale(0.96);
}

/* Home identity begins a little lower so the baseline rhythm is calmer. */
.home-header .identity{
  transform:translateY(4px);
}

/* Profile summary transforms into the same row pattern as the rest of the details. */
.profile-history-accordion[open] .profile-summary-grid{
  display:none;
}
.profile-detail-primary{
  background:#FFFFFF;
}

/* Settings uses one visual tone, matching the existing "Profil lengkap" treatment. */
.settings-section-label,
.settings-sub-label{
  color:#D65A35!important;
}
.settings-item-icon,
.settings-item-icon.user-tone,
.settings-item-icon.blue-tone,
.settings-item-icon.purple-tone,
.settings-item-icon.orange-tone,
.settings-item-icon.green-tone,
.settings-item-icon.teal-tone,
.settings-item-icon.amber-tone,
.settings-item-icon.red-tone{
  background:#FFF0EB!important;
  color:#D65A35!important;
}
.settings-profile-copy a{
  color:#D65A35!important;
}
.switch.is-on{
  background:#D65A35!important;
}
.settings-hub-logout .settings-item-copy strong{
  color:#2A2A2A!important;
}

/* Submission/action surfaces get a small red backplate, echoing Home's layered attendance card. */
.request-action-wrap{
  position:relative;
  padding-top:10px;
  min-width:0;
}
.request-action-accent{
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:34px;
  border-radius:18px 18px 12px 12px;
  background:#D93A24;
  box-shadow:0 8px 18px rgba(217,58,36,0.14);
}
.request-action-wrap .action-surface{
  position:relative;
  z-index:1;
  margin:0;
}


/* =========================================================
   V1.23 — Announcement header breathing room
   ========================================================= */
.announcement-page .page-hero.has-back{
  height:128px;
  padding-top:46px;
  padding-bottom:18px;
}
.announcement-page .page-hero.has-back p{
  margin-top:4px;
}
@media(max-width:439px){
  .announcement-page .page-hero.has-back{
    height:126px;
    padding-top:44px;
  }
}

/* =========================================================
   V1.24 — home top continuity + identity vertical rhythm
   ========================================================= */
/* Let the Home hero continue behind the iOS status bar without a separate strip. */
.app:has(.top-hero) > .ios-statusbar{
  background:transparent!important;
  color:#FFFFFF!important;
}

/* Lower only the Home identity copy a little more for a calmer baseline. */
.home-header .identity{
  transform:translateY(8px)!important;
}


/* =========================================================
   V1.25 — refined half-hero page layout + simplified schedule
   ========================================================= */

/* Half red page hero: a taller red surface with the content floating over
   the transition into the neutral page background. */
.page-hero{
  height:166px!important;
  padding-top:46px!important;
  padding-bottom:50px!important;
  background:#D93A24!important;
  border-radius:0 0 22px 22px;
  overflow:hidden;
}
.page-hero::before{
  top:-3px!important;
  height:12px!important;
  background:#D93A24!important;
}
.page-hero.has-back{
  grid-template-rows:44px auto;
  align-content:start;
  column-gap:8px!important;
}
.page-hero.has-back .page-back-button{
  align-self:center;
}
.page-hero.has-back h1{
  align-self:center;
  margin:0!important;
}
.page-hero.has-back p{
  grid-column:2;
  margin-top:3px!important;
  max-width:300px;
}

/* The first content block now overlaps the red hero instead of starting
   only after it, matching the layered concept used on Home. */
.page-hero + .surface-stack{
  position:relative;
  z-index:3;
  margin-top:-34px;
  padding-top:0!important;
}
.page-hero + .surface-stack > :first-child{
  position:relative;
  z-index:1;
}
.page-hero + .surface-stack > .surface:first-child,
.page-hero + .surface-stack > .settings-hub-list:first-child,
.page-hero + .surface-stack > .settings-list:first-child{
  box-shadow:0 12px 28px rgba(61,33,21,0.08);
}

/* Announcement had a custom header height in v1.23; use the unified
   half-hero treatment now, while retaining its breathing room. */
.announcement-page .page-hero.has-back{
  height:166px!important;
  padding-top:46px!important;
  padding-bottom:50px!important;
}

/* Schedule: the timeline itself communicates the work mode. No sentence,
   no WFO/WFH pill, no work-hour copy. WFO shows the office location; WFH
   intentionally has no location line. */
.schedule-intro{
  margin-top:2px;
  padding:4px 2px 6px!important;
}
.schedule-timeline{
  margin-top:0!important;
}
.timeline-item{
  min-height:100px!important;
  grid-template-columns:48px 18px minmax(0,1fr)!important;
}
.timeline-date{
  padding-top:13px!important;
}
.timeline-date span{
  color:#777777!important;
}
.timeline-date strong,
.timeline-item.active .timeline-date strong{
  color:#292929!important;
}
.timeline-date small{
  color:#A0A0A0!important;
}
.timeline-rail{
  min-height:100px!important;
}
.timeline-item:first-child .timeline-rail:before{
  top:24px!important;
}
.timeline-item:last-child .timeline-rail:before{
  bottom:54px!important;
}
.timeline-dot{
  margin-top:22px!important;
}
.timeline-content{
  min-height:72px;
  margin:6px 0 14px!important;
  padding:14px 16px!important;
  border:1px solid #ECE8E5!important;
  border-radius:16px!important;
  background:#FFFFFF!important;
  box-shadow:0 8px 20px rgba(61,33,21,0.05)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.timeline-copy strong,
.timeline-item.active .timeline-copy strong{
  display:block;
  color:#292929!important;
  font-size:14px!important;
  line-height:20px!important;
  font-weight:700!important;
}
.timeline-copy span{
  display:block;
  margin-top:4px!important;
  color:#747474!important;
  font-size:10px!important;
  line-height:16px!important;
  font-weight:500;
}
.timeline-content .pill{
  display:none!important;
}
.timeline-item.off .timeline-content{
  background:#FAFAFA!important;
}
.timeline-item.off .timeline-date,
.timeline-item.off .timeline-copy{
  opacity:65%;
}

@media(max-width:390px){
  .page-hero{
    height:160px!important;
    padding-top:42px!important;
    padding-bottom:46px!important;
  }
  .announcement-page .page-hero.has-back{
    height:160px!important;
    padding-top:42px!important;
    padding-bottom:46px!important;
  }
  .page-hero + .surface-stack{
    margin-top:-30px;
  }
}


/* =========================================================
   V1.26 — announcement + payslip keep the simpler page header
   ========================================================= */
.no-half-hero .page-hero,
.announcement-page.no-half-hero .page-hero.has-back{
  height:118px!important;
  padding-top:38px!important;
  padding-bottom:17px!important;
  background:#D93A24!important;
  border-radius:0!important;
  overflow:visible!important;
}
.no-half-hero .page-hero::before{
  display:none!important;
}
.no-half-hero .page-hero + .surface-stack{
  margin-top:0!important;
  padding-top:20px!important;
}
.no-half-hero .page-hero + .surface-stack > :first-child{
  position:static!important;
}
.no-half-hero .page-hero + .surface-stack > .surface:first-child,
.no-half-hero .page-hero + .surface-stack > .settings-hub-list:first-child,
.no-half-hero .page-hero + .surface-stack > .settings-list:first-child{
  box-shadow:0 8px 20px rgba(61,33,21,0.04)!important;
}
@media(max-width:390px){
  .no-half-hero .page-hero,
  .announcement-page.no-half-hero .page-hero.has-back{
    height:118px!important;
    padding-top:38px!important;
    padding-bottom:17px!important;
  }
  .no-half-hero .page-hero + .surface-stack{
    margin-top:0!important;
    padding-top:20px!important;
  }
}

/* =========================================================
   V1.27 — SETTINGS DETAIL VERTICAL RHYTHM
   Tighter section spacing without making groups feel cramped.
   ========================================================= */
.settings-detail-page{
  row-gap:0!important;
}
.settings-detail-page .settings-profile-card{
  margin-bottom:0!important;
}
.settings-detail-page .settings-section-label{
  margin:20px 2px 8px!important;
  padding-top:0!important;
}
.settings-detail-page .settings-first-label,
.settings-detail-page > .settings-section-label:first-child{
  margin-top:0!important;
}
.settings-detail-page > .settings-profile-card + .settings-section-label{
  margin-top:18px!important;
}
.settings-detail-page .settings-list + .settings-section-label{
  margin-top:22px!important;
}
.settings-detail-page .settings-list{
  gap:8px!important;
}


/* =========================================================
   V1.28 — profile lift, neutral settings labels,
   schedule mode colors, and announcement top spacing
   ========================================================= */

/* Profile detail starts directly with Info Personal; no greeting block. */
.profile-content{
  padding-top:14px!important;
}

/* Settings section headings should read as neutral hierarchy, not accents. */
.settings-section-label,
.settings-sub-label{
  color:#505050!important;
}

/* Notification settings uses a normal page flow instead of a raised/overlap card. */
.settings-notifications-page .page-hero + .surface-stack{
  margin-top:0!important;
  padding-top:20px!important;
}

/* Schedule: mode is communicated by text/date color; no extra label needed. */
.timeline-item.mode-wfo .timeline-copy strong,
.timeline-item.mode-wfo .timeline-date span,
.timeline-item.mode-wfo .timeline-date strong,
.timeline-item.mode-wfo .timeline-date small{
  color:#3F73B8!important;
}
.timeline-item.mode-wfh .timeline-copy strong,
.timeline-item.mode-wfh .timeline-date span,
.timeline-item.mode-wfh .timeline-date strong,
.timeline-item.mode-wfh .timeline-date small{
  color:#765EB0!important;
}
.timeline-item.mode-off .timeline-copy strong,
.timeline-item.mode-off .timeline-date span,
.timeline-item.mode-off .timeline-date strong,
.timeline-item.mode-off .timeline-date small{
  color:#C9473A!important;
  opacity:1!important;
}
.timeline-item.mode-wfo .timeline-dot{background:#3F73B8!important}
.timeline-item.mode-wfh .timeline-dot{background:#765EB0!important}
.timeline-item.mode-off .timeline-dot{background:#C9473A!important}
.timeline-item.mode-off .timeline-date,
.timeline-item.mode-off .timeline-copy{
  opacity:1!important;
}

/* Announcement list needs a little more breathing room above the page title. */
.announcement-page.no-half-hero .page-hero.has-back{
  height:134px!important;
  padding-top:50px!important;
  padding-bottom:18px!important;
}
@media(max-width:390px){
  .announcement-page.no-half-hero .page-hero.has-back{
    height:132px!important;
    padding-top:48px!important;
    padding-bottom:18px!important;
  }
}

/* =========================================================
   V1.29 — calmer neutral background, tighter radii,
   realistic announcement rhythm, history filter frame,
   and corrected Home identity placement.
   ========================================================= */

/* Use a slightly stronger but still light neutral page background. */
.app{
  background:#F3F3F3!important;
}

/* Reduce the overall roundness while preserving circles and status pills. */
.top-hero{border-radius:0 0 24px 24px!important}
.page-hero{border-radius:0 0 18px 18px!important}
.company-ribbon{border-radius:18px 18px 0 0!important}
.attendance-card{border-radius:18px!important}
.clock-card{border-radius:12px!important}
.clock-icon{border-radius:10px!important}
.duration-box{border-radius:10px!important;background:#F3F3F3!important}
.quick-icon{border-radius:14px!important}
.announcement-card,
.surface,
.history-accordion,
.profile-info-card,
.info-card,
.settings-item,
.settings-hub-item,
.detail-row,
.more-card,
.select-card,
.timeline-content,
.detail-key-card,
.announcement-detail-frame,
.simple-attendance-row,
.settings-profile-card,
.logout-account-card,
.logout-info-card{
  border-radius:14px!important;
}
.announce-icon{border-radius:12px!important}
.settings-item-icon,.more-icon{border-radius:10px!important}
.request-action-accent{border-radius:14px 14px 10px 10px!important}
.bottom-nav{border-radius:20px!important}
.nav-link{border-radius:14px!important}

/* Neutral inset surfaces use the requested #F3F3F3. */
.history-accordion-body,
.profile-accordion-body,
.timeline-item.off .timeline-content,
.empty-state,
.sheet-copy-row{
  background:#F3F3F3!important;
}

/* Home: move the entire identity row lower, but align the copy naturally
   with the avatar instead of pushing only the name down. */
.home-header{
  padding-top:26px!important;
  align-items:center!important;
}
.home-header .identity{
  transform:none!important;
  align-self:center;
}
.home-header .identity h1{
  margin:0!important;
}
.home-header .bell{
  align-self:center;
}

/* More breathing room between the shortcut menu and Announcement section. */
.menu-section + .home-section{
  padding-top:38px!important;
}

/* Announcement page: also keep a clearer visual gap between Back and title. */
.announcement-page.no-half-hero .page-hero.has-back{
  column-gap:16px!important;
}

/* Announcement cards: slightly calmer spacing for realistic copy. */
.announcement-list{gap:10px!important}
.announcement-card{padding:14px!important}
.announce-preview{
  margin-top:4px!important;
  line-height:16px!important;
}
.announce-author{
  margin-top:7px!important;
  color:#707070!important;
}

/* History filters sit inside one white frame with a dedicated filter control. */
.history-filter-panel{
  width:100%;
  min-width:0;
  padding:8px;
  border:1px solid #E7E7E7;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 8px 18px rgba(55,34,29,0.04);
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  align-items:center;
  gap:8px;
}
.history-filter-panel .filter-row{
  min-width:0;
  padding:0!important;
  gap:6px!important;
}
.history-filter-panel .filter{
  height:32px!important;
  padding:0 10px!important;
  background:#F3F3F3!important;
  color:#555555!important;
}
.history-filter-panel .filter.active{
  background:#D93A24!important;
  color:#FFFFFF!important;
}
.history-filter-button{
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:10px;
  background:#F3F3F3;
  color:#555555;
  display:grid;
  place-items:center;
  flex:0 0 38px;
}
.history-filter-button svg{
  width:18px;
  height:18px;
  display:block;
}
.history-filter-button.is-active{
  background:#D93A24;
  color:#FFFFFF;
}
.history-page-list{margin-top:0!important}

/* Preserve fully round status indicators even as card radii become tighter. */
.pill,.range-chip,.face-chip,.mode-badge,.work-dot,.avatar-sm,.bell,.profile-main img,.settings-profile img,.logout-avatar{
  border-radius:999px!important;
}

@media(max-width:390px){
  .home-header{padding-top:24px!important}
  .menu-section + .home-section{padding-top:34px!important}
  .history-filter-panel{grid-template-columns:minmax(0,1fr) 36px;padding:7px;gap:6px}
  .history-filter-button{width:36px;height:36px}
  .history-filter-panel .filter{padding:0 9px!important}
}
.profile-cover{border-radius:0 0 24px 24px!important}
.page-back-button,.back-link{border-radius:12px!important}
.logout-primary,.logout-sheet-cancel,.logout-sheet-confirm{border-radius:12px!important}
.ios-sheet{border-radius:20px 20px 0 0!important}

/* =========================================================
   V1.30 — Schedule color hierarchy
   Only work mode (WFO/WFH/Libur) and the date stack use status colors.
   Supporting copy and timeline decoration stay neutral gray.
   ========================================================= */
.schedule-page .schedule-intro strong,
.schedule-page .select-card strong{
  color:#303030!important;
}
.schedule-page .schedule-intro span,
.schedule-page .select-card small,
.schedule-page .select-card svg,
.timeline-copy span{
  color:#747474!important;
}
.timeline-rail:before{
  background:#E3E3E3!important;
}
.timeline-dot,
.timeline-item.mode-wfo .timeline-dot,
.timeline-item.mode-wfh .timeline-dot,
.timeline-item.mode-off .timeline-dot{
  background:#BDBDBD!important;
  box-shadow:none!important;
}

/* WFO — only mode text + date are blue. */
.timeline-item.mode-wfo .timeline-copy strong,
.timeline-item.mode-wfo .timeline-date span,
.timeline-item.mode-wfo .timeline-date strong,
.timeline-item.mode-wfo .timeline-date small{
  color:#3F73B8!important;
}

/* WFH — only mode text + date are purple. */
.timeline-item.mode-wfh .timeline-copy strong,
.timeline-item.mode-wfh .timeline-date span,
.timeline-item.mode-wfh .timeline-date strong,
.timeline-item.mode-wfh .timeline-date small{
  color:#765EB0!important;
}

/* Libur — only mode text + date are red. */
.timeline-item.mode-off .timeline-copy strong,
.timeline-item.mode-off .timeline-date span,
.timeline-item.mode-off .timeline-date strong,
.timeline-item.mode-off .timeline-date small{
  color:#C9473A!important;
  opacity:1!important;
}
.timeline-item.mode-off .timeline-copy span{
  color:#747474!important;
}
.timeline-item.mode-off .timeline-date,
.timeline-item.mode-off .timeline-copy{
  opacity:1!important;
}


/* =========================================================
   V1.31 — announcement detail overlap + unified page canvas
   ========================================================= */

/* The main application canvas is consistently the requested light neutral. */
.app,
.page,
.profile-page,
.settings-detail-page{
  background:#F3F3F3!important;
}

/* Announcement detail follows the same layered / overlapping page treatment
   used by the other inner pages. */
.announcement-detail-page .page-hero{
  height:166px!important;
  padding-top:46px!important;
  padding-bottom:50px!important;
  border-radius:0 0 18px 18px!important;
  overflow:hidden!important;
}
.announcement-detail-page .page-hero + .announcement-detail-stack{
  position:relative;
  z-index:3;
  margin-top:-34px!important;
  padding-top:0!important;
}
.announcement-detail-page .announcement-detail-summary{
  box-shadow:0 12px 28px rgba(61,33,21,0.08)!important;
}

@media(max-width:390px){
  .announcement-detail-page .page-hero{
    height:160px!important;
    padding-top:42px!important;
    padding-bottom:46px!important;
  }
  .announcement-detail-page .page-hero + .announcement-detail-stack{
    margin-top:-30px!important;
  }
}

/* =========================================================
   V1.32 — schedule date hierarchy
   Keep weekday + year neutral; only date number + WFO/WFH/Libur use status color.
   ========================================================= */
.timeline-item.mode-wfo .timeline-date span,
.timeline-item.mode-wfh .timeline-date span,
.timeline-item.mode-off .timeline-date span{
  color:#5F5F5F!important;
}
.timeline-item.mode-wfo .timeline-date small,
.timeline-item.mode-wfh .timeline-date small,
.timeline-item.mode-off .timeline-date small{
  color:#8A8A8A!important;
}

/* =========================================================
   V1.33 — white canvas for announcement detail
   The global app canvas remains #F3F3F3; only the announcement detail
   page uses a clean white detail background beneath the red hero.
   ========================================================= */
.announcement-detail-page,
.announcement-detail-page .page{
  background:#FFFFFF!important;
}


/* =========================================================
   V1.34 — Account overlap reinforcement + Logout spacing fix
   ========================================================= */

/* Account keeps the layered treatment: first profile card overlaps the red hero. */
body:has(.settings-detail-page) .page-hero + .settings-detail-page:not(.settings-notifications-page):not(.settings-logout-page){
  position:relative;
  z-index:3;
  margin-top:-34px!important;
  padding-top:0!important;
}
body:has(.settings-detail-page) .page-hero + .settings-detail-page:not(.settings-notifications-page):not(.settings-logout-page) > .settings-profile-card:first-child{
  box-shadow:0 12px 28px rgba(61,33,21,0.08)!important;
}

/* Logout needs its own vertical rhythm instead of the zero-gap Account rhythm. */
.settings-logout-page{
  position:relative;
  z-index:3;
  margin-top:-28px!important;
  padding-top:0!important;
  row-gap:12px!important;
}
.settings-logout-page .logout-account-card{
  margin:0!important;
  padding:16px!important;
  min-height:84px;
  box-shadow:0 12px 28px rgba(61,33,21,0.08)!important;
}
.settings-logout-page .logout-info-card{
  margin:0!important;
  padding:16px!important;
  gap:12px!important;
}
.settings-logout-page .logout-info-card p{
  margin-top:6px!important;
  line-height:17px!important;
}
.settings-logout-page .logout-primary{
  margin-top:4px!important;
  height:48px!important;
}

@media(max-width:390px){
  .settings-logout-page{
    margin-top:-24px!important;
    row-gap:10px!important;
  }
}

/* =========================================================
   V1.35 — stronger Account profile-card overlap
   ========================================================= */
.settings-account-page{
  position:relative;
  z-index:3;
  margin-top:-56px!important;
  padding-top:0!important;
}
.settings-account-page > .settings-profile-card:first-child{
  position:relative;
  z-index:4;
  box-shadow:0 12px 28px rgba(61,33,21,0.08)!important;
}
@media(max-width:390px){
  .settings-account-page{
    margin-top:-50px!important;
  }
}

/* =========================================================
   V1.36 — Account overlap backdrop fix
   Keep the Account content stack transparent while it overlaps the hero,
   so the red hero remains visibly behind the Diba Dwi profile card.
   ========================================================= */
.settings-account-page{
  background:transparent!important;
}
.settings-account-page > .settings-profile-card:first-child{
  background:#FFFFFF!important;
}

/* V1.37 — opened attendance history hierarchy */
.history-accordion-body{
  background:#FFFFFF!important;
}
.simple-attendance-row{
  background:#F3F3F3!important;
}


/* =========================================================
   V1.38 — Schedule live-day indicator + full-strength holiday cards
   ========================================================= */
/* Libur is still a normal schedule item: keep its frame white and fully active. */
.schedule-page .timeline-item.mode-off .timeline-content,
.schedule-page .timeline-item.off .timeline-content{
  background:#FFFFFF!important;
  opacity:1!important;
}
.schedule-page .timeline-item.mode-off .timeline-date,
.schedule-page .timeline-item.mode-off .timeline-copy,
.schedule-page .timeline-item.off .timeline-date,
.schedule-page .timeline-item.off .timeline-copy{
  opacity:1!important;
}
/* The date that is happening today gets the green progress dot only. */
.schedule-page .timeline-item.active .timeline-dot{
  background:#1ABA71!important;
  box-shadow:0 0 0 4px #EAF9F2!important;
}


/* =========================================================
   V1.39 — safe status bar, higher page headers, cleaner Announcement nav
   ========================================================= */
/* Keep the iOS status area in its own protected layer. Page content starts
   below it, so back buttons/titles can move higher without covering the time,
   signal, Wi-Fi, or battery indicators. */
.ios-statusbar{
  position:relative!important;
  z-index:600!important;
  flex:0 0 30px!important;
  min-height:30px!important;
  overflow:visible!important;
}

/* Raise the back button + page title row on all standard inner pages while
   retaining a clear gap below the 30px status bar. */
.page-hero.has-back{
  padding-top:18px!important;
}
.page-hero.has-back .page-back-button,
.page-hero.has-back h1{
  align-self:start!important;
}
.page-hero.has-back p{
  margin-top:2px!important;
}

/* Keep the taller half-hero compositions, but move their heading group up. */
.announcement-detail-page .page-hero,
.announcement-page .page-hero.has-back,
.no-half-hero .page-hero,
.announcement-page.no-half-hero .page-hero.has-back{
  padding-top:18px!important;
}

/* Profile is the one cover that visually continues behind the status bar.
   Its controls remain below the protected status area. */
.app:has(.profile-cover) .profile-cover{
  padding-top:42px!important;
}

/* Announcement navigation no longer shows an unread-count badge. */
.bottom-nav .nav-link[href="announcement.html"] .nav-badge{
  display:none!important;
}

@media(max-width:390px){
  .page-hero.has-back,
  .announcement-detail-page .page-hero,
  .announcement-page .page-hero.has-back,
  .no-half-hero .page-hero,
  .announcement-page.no-half-hero .page-hero.has-back{
    padding-top:16px!important;
  }
  .app:has(.profile-cover) .profile-cover{
    padding-top:40px!important;
  }
}
/* V1.39 alignment correction: keep the raised title vertically centered with the 44px back control. */
.page-hero.has-back .page-back-button,
.page-hero.has-back h1{
  align-self:center!important;
}


/* =========================================================
   V1.40 — Profile accordion detail hierarchy + richer announcement copy
   ========================================================= */
/* Match the opened Attendance History hierarchy on Profile detail:
   expanded panel stays white; individual information rows sit on #F3F3F3. */
.profile-history-accordion .history-accordion-body{
  background:#FFFFFF!important;
}
.profile-history-accordion .profile-detail-row,
.profile-history-accordion .profile-detail-primary{
  background:#F3F3F3!important;
  border-color:#ECECEC!important;
}

/* Announcement copy should read like real content, not tiny metadata. */
.announcement-detail-body h3{
  font-size:14px!important;
  line-height:20px!important;
}
.announcement-detail-body p{
  margin:10px 0 0!important;
  font-size:12px!important;
  line-height:20px!important;
  color:#4F4F4F!important;
}
.announcement-detail-body p + p{
  margin-top:12px!important;
}

/* =========================================================
   V1.41 — Announcement follows the History page composition
   ========================================================= */
/* Use the same half-hero + overlapping first surface language as History. */
.announcement-page .page-hero.has-back{
  height:166px!important;
  padding-top:18px!important;
  padding-bottom:50px!important;
  border-radius:0 0 18px 18px!important;
  overflow:hidden!important;
}
.announcement-page .page-hero + .announcement-surface-stack{
  position:relative!important;
  z-index:3!important;
  margin-top:-34px!important;
  padding-top:0!important;
}

/* Category tabs now live inside one white frame, mirroring History filters. */
.announcement-filter-panel{
  width:100%;
  min-width:0;
  padding:8px;
  border:1px solid #E7E7E7;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 8px 18px rgba(55,34,29,0.04);
}
.announcement-filter-panel .filter-row{
  width:100%;
  min-width:0;
  padding:0!important;
  gap:6px!important;
}
.announcement-filter-panel .filter{
  height:32px!important;
  padding:0 10px!important;
  background:#F3F3F3!important;
  color:#555555!important;
}
.announcement-filter-panel .filter.active{
  background:#D93A24!important;
  color:#FFFFFF!important;
}

/* Keep announcement rows visually in the same family as History cards. */
.announcement-page .announcement-card{
  border:1px solid #ECECEC!important;
  border-radius:14px!important;
  box-shadow:0 8px 18px rgba(55,34,29,0.04)!important;
}
.announcement-page .month-label{
  margin-top:2px!important;
  color:#6D6D6D!important;
}

@media(max-width:390px){
  .announcement-page .page-hero.has-back{
    height:160px!important;
    padding-top:16px!important;
    padding-bottom:46px!important;
  }
  .announcement-page .page-hero + .announcement-surface-stack{
    margin-top:-30px!important;
  }
  .announcement-filter-panel{
    padding:7px;
  }
  .announcement-filter-panel .filter{
    padding:0 9px!important;
  }
}

/* =========================================================
   V1.42 — Notification settings layout repair
   Keep this page in normal flow, with clear separation from the red hero
   and enough bottom breathing room above the fixed navigation.
   ========================================================= */
.settings-notifications-page .page-hero{
  height:126px!important;
  padding-top:18px!important;
  padding-bottom:22px!important;
}
.settings-notifications-page .page-hero p{
  margin-top:4px!important;
}
.settings-notifications-page .page-hero + .settings-detail-page{
  margin-top:0!important;
  padding-top:28px!important;
  padding-bottom:132px!important;
  row-gap:0!important;
  background:#F3F3F3!important;
}
.settings-notifications-page .settings-first-label,
.settings-notifications-page .settings-detail-page > .settings-section-label:first-child{
  margin-top:0!important;
  margin-bottom:10px!important;
}
.settings-notifications-page .settings-list{
  gap:10px!important;
}
.settings-notifications-page .settings-item{
  min-height:64px!important;
  padding:11px 14px!important;
  border-radius:14px!important;
}
.settings-notifications-page .settings-list + .settings-section-label{
  margin-top:26px!important;
  margin-bottom:10px!important;
}
.settings-notifications-page .settings-section-label{
  padding-top:0!important;
  color:#555555!important;
  line-height:16px!important;
}
.settings-notifications-page .settings-item-copy strong{
  color:#2E2E2E!important;
}
.settings-notifications-page .settings-item-copy small{
  color:#858585!important;
}
.settings-notifications-page .bottom-nav{
  z-index:700!important;
}
@media(max-width:390px){
  .settings-notifications-page .page-hero{
    height:124px!important;
    padding-top:16px!important;
    padding-bottom:20px!important;
  }
  .settings-notifications-page .page-hero + .settings-detail-page{
    padding-top:24px!important;
    padding-bottom:128px!important;
  }
}


/* =========================================================
   V1.43 — Logout page compact spacing repair
   Remove the oversized red gap and keep the confirmation flow compact,
   while retaining a subtle overlap for the account card.
   ========================================================= */
.settings-logout-app .page-hero.has-back{
  height:136px!important;
  padding-top:16px!important;
  padding-bottom:20px!important;
  border-radius:0 0 18px 18px!important;
}
.settings-logout-app .page-hero.has-back p{
  margin-top:2px!important;
}
.settings-logout-app .page-hero + .settings-logout-page{
  position:relative!important;
  z-index:3!important;
  margin-top:-20px!important;
  padding-top:0!important;
  padding-bottom:132px!important;
  row-gap:10px!important;
  background:#F3F3F3!important;
}
.settings-logout-app .logout-account-card{
  min-height:76px!important;
  padding:14px!important;
  gap:12px!important;
  border-radius:14px!important;
  box-shadow:0 10px 22px rgba(61,33,21,0.06)!important;
}
.settings-logout-app .logout-avatar{
  width:48px!important;
  height:48px!important;
  flex-basis:48px!important;
}
.settings-logout-app .logout-info-card{
  min-height:94px!important;
  padding:14px!important;
  gap:12px!important;
  border-radius:14px!important;
  box-shadow:0 8px 18px rgba(61,33,21,0.04)!important;
}
.settings-logout-app .logout-info-card .settings-item-icon{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  border-radius:12px!important;
}
.settings-logout-app .logout-info-card strong{
  font-size:12px!important;
  line-height:18px!important;
}
.settings-logout-app .logout-info-card p{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:17px!important;
}
.settings-logout-app .logout-primary{
  height:48px!important;
  margin-top:2px!important;
  border-radius:12px!important;
  box-shadow:0 8px 18px rgba(201,74,62,0.14)!important;
}
@media(max-width:390px){
  .settings-logout-app .page-hero.has-back{
    height:132px!important;
    padding-top:14px!important;
    padding-bottom:18px!important;
  }
  .settings-logout-app .page-hero + .settings-logout-page{
    margin-top:-18px!important;
    padding-bottom:128px!important;
    row-gap:9px!important;
  }
}


/* =========================================================
   V1.44 — Announcement filter shell matches History exactly
   ========================================================= */
.announcement-page .announcement-filter-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 38px!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid #E7E7E7!important;
  border-radius:14px!important;
  background:#FFFFFF!important;
  box-shadow:0 8px 18px rgba(55,34,29,0.04)!important;
}
.announcement-page .announcement-filter-panel .filter-row{
  min-width:0!important;
  padding:0!important;
  gap:6px!important;
}
.announcement-page .announcement-filter-panel .filter{
  height:32px!important;
  padding:0 10px!important;
  background:#F3F3F3!important;
  color:#555555!important;
}
.announcement-page .announcement-filter-panel .filter.active{
  background:#D93A24!important;
  color:#FFFFFF!important;
}
.announcement-page .announcement-filter-panel .history-filter-button{
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
  background:#F3F3F3!important;
  color:#555555!important;
}
.announcement-page .announcement-filter-panel .history-filter-button.is-active{
  background:#D93A24!important;
  color:#FFFFFF!important;
}
@media(max-width:390px){
  .announcement-page .announcement-filter-panel{
    grid-template-columns:minmax(0,1fr) 36px!important;
    padding:7px!important;
    gap:6px!important;
  }
  .announcement-page .announcement-filter-panel .history-filter-button{
    width:36px!important;
    height:36px!important;
  }
  .announcement-page .announcement-filter-panel .filter{
    padding:0 9px!important;
  }
}