:root{
  --csc-bg:#f6f7fb;
  --csc-card:#ffffff;
  --csc-text:#273142;
  --csc-muted:#70727c;
  --csc-subtle:#98999e;
  --csc-border:#e5e6eb;
  --csc-border-strong:#dcdfe6;
  --csc-primary:#3e72ed;
  --csc-primary-hover:#5585ff;
  --csc-primary-disabled:#a6c4f7;
  --csc-danger:#ff5454;
  --csc-upload-bg:#f6f6f6;
  --csc-content-width:1200px;
  --csc-form-width:632px;
  --csc-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Noto Sans SC","Noto Sans JP","Microsoft JhengHei",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--csc-font);color:var(--csc-text);background:var(--csc-bg);font-size:14px}
body{min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
.csc-page{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:
  radial-gradient(circle at 14% 13%,rgba(106,149,255,.28) 0,rgba(106,149,255,.16) 18px,transparent 19px),
  radial-gradient(circle at 9% 16%,rgba(255,255,255,.8) 0,rgba(255,255,255,.8) 9px,transparent 10px),
  radial-gradient(circle at 88% 100%,rgba(232,239,255,.88) 0,rgba(232,239,255,.68) 210px,transparent 211px),
  linear-gradient(105deg,#fff 0%,#f7f5ff 36%,#eef6ff 100%)}
.csc-page:before{content:"";position:absolute;left:0;top:58px;width:320px;height:112px;pointer-events:none;opacity:.46;background-image:radial-gradient(circle,rgba(199,205,218,.58) 0 1px,transparent 2px);background-size:38px 38px}
.csc-page:after{content:"";position:absolute;right:-110px;bottom:-130px;width:620px;height:360px;border-radius:50%;pointer-events:none;opacity:.48;border:28px solid rgba(255,255,255,.48);box-shadow:inset 0 0 0 22px rgba(255,255,255,.26)}
.csc-layout-header{position:relative;z-index:2;height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.csc-header-left,.csc-header-right{display:flex;align-items:center;min-width:0}.csc-header-left{gap:10px}.csc-header-right{gap:16px}.csc-brand{display:flex;align-items:center;flex:0 0 auto;width:160px;min-width:160px;overflow:visible;text-decoration:none;color:inherit}.csc-brand-logo{display:block;width:160px;height:40px;object-fit:contain;object-position:left center;transform:none}.csc-header-divider{width:1px;height:18px;margin:0 4px;background:rgba(141,182,221,.85);border-radius:1px;flex:0 0 auto}.csc-service-title{font-size:22px;font-weight:600;line-height:26px;color:var(--csc-text);white-space:nowrap}
.csc-user-wrap{position:relative;display:flex;align-items:center;min-width:0}.csc-user-chip{position:relative;display:flex;align-items:center;gap:8px;min-width:0;max-width:260px;height:40px;padding:0 10px 0 12px;border:0;border-radius:8px;background:rgba(255,255,255,.72);color:var(--csc-text);cursor:pointer;opacity:.95}.csc-user-chip:hover,.csc-user-wrap.is-open .csc-user-chip{background:#fff}.csc-user-chip:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(62,114,237,.20)}.csc-user-name{display:block;min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;color:#273142}.csc-user-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .18s ease}.csc-user-wrap.is-open .csc-user-caret{transform:rotate(180deg)}.csc-user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:240px;padding:8px;border:.5px solid var(--csc-border);border-radius:8px;background:#fff;box-shadow:0 3px 14px 2px rgba(0,0,0,.05),0 8px 10px 1px rgba(0,0,0,.06),0 5px 5px -3px rgba(0,0,0,.1);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.csc-user-wrap.is-open .csc-user-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.csc-user-menu-head{padding:8px 10px 10px;border-bottom:1px solid #f0f2f5;margin-bottom:6px}.csc-user-menu-label{font-size:12px;line-height:18px;color:var(--csc-subtle);margin-bottom:2px}.csc-user-menu-name{font-size:14px;line-height:20px;font-weight:500;color:var(--csc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.csc-user-menu-item{width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--csc-text);font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.csc-user-menu-item:hover,.csc-user-menu-item:focus-visible{background:#f6f7f9;outline:0}.csc-user-menu-item:active{background:#eef2f8}
.csc-account-slot{display:flex;align-items:center;min-width:0}
.csc-content{position:relative;z-index:1;flex:1;min-height:0;overflow:auto}.csc-main{width:var(--csc-content-width);max-width:calc(100vw - 80px);min-height:calc(100% - 16px);margin:0 auto 16px;display:flex;flex-direction:column}.csc-breadcrumb{height:44px;flex:0 0 44px;display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--csc-muted)}.csc-breadcrumb span{white-space:nowrap}.csc-breadcrumb__current{font-weight:600;color:var(--csc-text)}.csc-card{position:relative;flex:1;min-height:0;display:flex;justify-content:center;background:var(--csc-card);border-radius:12px;box-shadow:none;overflow:hidden}.csc-shell{width:100%;min-height:100%;margin:0 auto;background:#fff}.csc-shell-feedback{display:flex;align-items:stretch;justify-content:center}.csc-placeholder{width:min(var(--csc-form-width),100%);margin:auto;padding:32px;text-align:center;border:1px solid var(--csc-border);border-radius:12px;background:#fff}.csc-placeholder h1{margin:0 0 10px;font-size:22px;line-height:30px;font-weight:600}.csc-placeholder p{margin:0;color:var(--csc-muted);line-height:1.8}
.csc-lang.mi-i18n{z-index:50}.csc-lang .mi-i18n-btn{height:40px;border-radius:8px;background:transparent;border-color:transparent;box-shadow:none;padding:0 10px;color:var(--csc-text)}.csc-lang .mi-i18n-btn:hover,.csc-lang.mi-i18n-open .mi-i18n-btn,.csc-lang.is-open .mi-i18n-btn{background:rgba(255,255,255,.72);border-color:transparent}.csc-lang .mi-i18n-icon{width:16px;height:16px}.csc-lang .mi-i18n-current{max-width:96px}.csc-lang .mi-i18n-menu{top:calc(100% + 6px)}
@media(max-width:900px){body{overflow:auto}.csc-page{min-height:100vh;height:auto;overflow:visible}.csc-layout-header{height:auto;min-height:60px;padding:10px 18px;align-items:flex-start;gap:12px}.csc-header-left{flex-wrap:wrap;gap:12px}.csc-header-right{margin-left:auto;gap:8px}.csc-brand{width:142px;min-width:142px}.csc-brand-logo{width:154px;height:34px}.csc-header-divider{margin:0}.csc-service-title{font-size:19px}.csc-user-chip{max-width:180px}.csc-user-menu{right:0}.csc-main{max-width:none;width:100%;min-height:0;margin:0;padding:0 12px 16px}.csc-breadcrumb{height:40px;flex-basis:40px}.csc-card{min-height:auto;border-radius:12px}.csc-shell-feedback{display:block}.csc-content{overflow:visible}}
@media(max-width:560px){.csc-layout-header{flex-direction:column;align-items:stretch}.csc-header-right{justify-content:space-between;margin-left:0}.csc-brand{width:136px;min-width:136px}.csc-brand-logo{width:148px;height:32px}.csc-service-title{font-size:18px}.csc-header-divider{height:16px}.csc-user-chip{max-width:48vw}.csc-user-menu{width:min(240px,calc(100vw - 24px));right:0}.csc-lang .mi-i18n-current{display:none}.csc-main{padding:0 0 12px}.csc-breadcrumb{padding:0 18px}.csc-card{border-radius:0}.csc-placeholder{border:0}}

/* serviceProgress keeps the entire page inside the viewport; only the message list scrolls. */
body.csc-route-serviceProgress,
body.csc-route-serviceProgress .csc-page{
  height:100vh;
  min-height:100vh;
  overflow:hidden;
}
body.csc-route-serviceProgress .csc-content{
  overflow:hidden;
}
body.csc-route-serviceProgress .csc-main{
  height:100%;
  min-height:0;
  margin-bottom:0;
  padding-bottom:16px;
}
body.csc-route-serviceProgress .csc-card{
  flex:1;
  min-height:0;
  overflow:hidden;
}
body.csc-route-serviceProgress .csc-shell,
body.csc-route-serviceProgress .csc-shell-progress{
  height:100%;
  min-height:0;
  overflow:hidden;
}
@media(max-width:900px){
  body.csc-route-serviceProgress,
  body.csc-route-serviceProgress .csc-page{
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }
  body.csc-route-serviceProgress .csc-content{
    flex:1;
    min-height:0;
    overflow:hidden;
  }
  body.csc-route-serviceProgress .csc-main{
    height:100%;
    min-height:0;
    padding-bottom:12px;
  }
  body.csc-route-serviceProgress .csc-card{
    min-height:0;
  }
}


/* 20260521 serviceProgress viewport lock refinement */
body.csc-route-serviceProgress .csc-layout-header{flex:0 0 60px}
body.csc-route-serviceProgress .csc-content{flex:1 1 auto;min-height:0;overflow:hidden}
body.csc-route-serviceProgress .csc-main{height:100%;min-height:0;max-height:100%;overflow:hidden}
body.csc-route-serviceProgress .csc-breadcrumb{flex:0 0 44px}
body.csc-route-serviceProgress .csc-card,body.csc-route-serviceEvaluation .csc-card,body.csc-route-serviceEvaluationDetail .csc-card{flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden;background:#fff}
@media(max-width:900px){
  body.csc-route-serviceProgress .csc-layout-header{flex:0 0 auto}
  body.csc-route-serviceProgress .csc-page{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
  body.csc-route-serviceProgress .csc-main{padding:0 12px 12px}
  body.csc-route-serviceProgress .csc-card,body.csc-route-serviceEvaluation .csc-card,body.csc-route-serviceEvaluationDetail .csc-card{border-radius:12px}
}
@media(max-width:640px){
  body.csc-route-serviceProgress .csc-breadcrumb{display:none}
  body.csc-route-serviceProgress .csc-main{padding:8px 0 8px}
  body.csc-route-serviceProgress .csc-card,body.csc-route-serviceEvaluation .csc-card,body.csc-route-serviceEvaluationDetail .csc-card{border-radius:0}
}

/* 20260522 mobile header compaction
   Phone layout: logo on the left; account chip to the left of language selector on the right.
   Hide the desktop divider/title on small screens so header controls do not wrap or collide. */
@media(max-width:760px){
  body:not(.csc-route-serviceProgress){overflow:auto;}
  .csc-layout-header{
    height:58px;
    min-height:58px;
    flex:0 0 58px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));
  }
  .csc-header-left{
    flex:0 1 auto;
    min-width:0;
    flex-wrap:nowrap;
    gap:0;
  }
  .csc-header-left .csc-header-divider,
  .csc-service-title{
    display:none;
  }
  .csc-brand{
    width:128px;
    min-width:128px;
    max-width:34vw;
  }
  .csc-brand-logo{
    width:138px;
    height:32px;
  }
  .csc-header-right{
    flex:1 1 auto;
    min-width:0;
    margin-left:0;
    justify-content:flex-end;
    gap:6px;
  }
  .csc-header-right>.csc-header-divider{
    display:none;
  }
  .csc-user-wrap{
    order:1;
    flex:0 1 auto;
    min-width:0;
  }
  .csc-lang{
    order:2;
    flex:0 0 auto;
  }
  .csc-user-chip{
    height:36px;
    max-width:min(36vw,136px);
    padding:0 8px 0 10px;
    gap:6px;
    background:rgba(255,255,255,.78);
  }
  .csc-user-name{
    max-width:calc(min(36vw,136px) - 28px);
    font-size:13px;
  }
  .csc-user-caret{
    border-left-width:3.5px;
    border-right-width:3.5px;
    border-top-width:4.5px;
  }
  .csc-user-menu{
    width:min(240px,calc(100vw - 24px));
    right:0;
  }
  .csc-lang .mi-i18n-btn{
    min-width:36px;
    height:36px;
    padding:0 8px;
    gap:5px;
    background:rgba(255,255,255,.58);
  }
  .csc-lang .mi-i18n-current{
    display:none;
  }
  .csc-lang .mi-i18n-icon{
    width:16px;
    height:16px;
  }
  .csc-lang .mi-i18n-menu{
    right:0;
    min-width:200px;
  }
  .csc-main{
    padding:0 12px 12px;
  }
  .csc-breadcrumb{
    height:38px;
    flex:0 0 38px;
    padding:0 2px;
    font-size:14px;
  }
}

@media(max-width:420px){
  .csc-layout-header{
    height:56px;
    min-height:56px;
    flex-basis:56px;
    padding-left:12px;
    padding-right:12px;
    gap:8px;
  }
  .csc-brand{
    width:116px;
    min-width:116px;
    max-width:31vw;
  }
  .csc-brand-logo{
    width:126px;
    height:30px;
  }
  .csc-header-right{
    gap:5px;
  }
  .csc-user-chip{
    max-width:min(38vw,124px);
    height:34px;
    padding-left:9px;
    padding-right:7px;
  }
  .csc-user-name{
    max-width:calc(min(38vw,124px) - 26px);
  }
  .csc-lang .mi-i18n-btn{
    min-width:34px;
    height:34px;
    padding:0 7px;
  }
  .csc-main{
    padding:0 0 12px;
  }
  .csc-breadcrumb{
    padding:0 16px;
  }
}

@media(max-width:360px){
  .csc-brand{
    width:104px;
    min-width:104px;
  }
  .csc-brand-logo{
    width:114px;
  }
  .csc-user-chip{
    max-width:36vw;
  }
  .csc-user-name{
    max-width:calc(36vw - 24px);
  }
}


/* 20260522 mobile Safari keyboard viewport stabilization
   Keep the page tied to the visible viewport so closing the keyboard does not
   leave a blank bottom area. Body remains locked; page content scrolls inside
   .csc-content when needed. */
:root{--csc-vvh:100vh;--csc-safe-bottom:env(safe-area-inset-bottom,0px)}
.csc-page{height:var(--csc-vvh);min-height:var(--csc-vvh);max-height:var(--csc-vvh)}
.csc-content{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding-bottom:calc(24px + var(--csc-safe-bottom))}
body.csc-keyboard-open .csc-content{scroll-padding-bottom:calc(160px + var(--csc-safe-bottom))}
@media(max-width:900px){
  html,body{height:var(--csc-vvh);min-height:0;max-height:var(--csc-vvh);overflow:hidden!important}
  body{position:fixed;inset:0;width:100%;overscroll-behavior:none}
  .csc-page{height:var(--csc-vvh)!important;min-height:var(--csc-vvh)!important;max-height:var(--csc-vvh)!important;overflow:hidden!important}
  .csc-content{flex:1 1 auto;min-height:0;overflow:auto!important;overscroll-behavior:contain;background:transparent}
  .csc-main{min-height:calc(100% - 12px);padding-bottom:calc(12px + var(--csc-safe-bottom))}
  body.csc-keyboard-open .csc-layout-header{flex:0 0 auto}
}
@media(max-width:640px){
  .csc-content{scroll-padding-bottom:calc(96px + var(--csc-safe-bottom))}
  body.csc-keyboard-open .csc-content{scroll-padding-bottom:calc(180px + var(--csc-safe-bottom))}
}


/* 20260522 serviceProgress mobile viewport hard lock
   Prevent the iOS keyboard from leaving a blank scrollable area under the card. */
body.csc-route-serviceProgress{
  overflow:hidden!important;
  overscroll-behavior:none;
  background:var(--csc-bg);
}
body.csc-route-serviceProgress .csc-page{
  height:var(--csc-vvh)!important;
  min-height:0!important;
  max-height:var(--csc-vvh)!important;
  overflow:hidden!important;
}
body.csc-route-serviceProgress .csc-content,
body.csc-route-serviceProgress .csc-main,
body.csc-route-serviceProgress .csc-card,
body.csc-route-serviceProgress .csc-shell-progress{
  min-height:0!important;
  overflow:hidden!important;
}
body.csc-route-serviceProgress .csc-content{flex:1 1 auto!important;}
body.csc-route-serviceProgress .csc-main{height:100%!important;max-height:100%!important;}
body.csc-route-serviceProgress .csc-card,body.csc-route-serviceEvaluation .csc-card,body.csc-route-serviceEvaluationDetail .csc-card{flex:1 1 auto!important;}
@media(max-width:900px){
  body.csc-route-serviceProgress{
    width:100%;
    height:var(--csc-vvh)!important;
    min-height:0!important;
    max-height:var(--csc-vvh)!important;
    overflow:hidden!important;
  }
  body.csc-route-serviceProgress{
    position:fixed!important;
    inset:0!important;
  }
  body.csc-route-serviceProgress .csc-layout-header{flex:0 0 56px!important;height:56px!important;min-height:56px!important;}
  body.csc-route-serviceProgress .csc-content{height:auto!important;max-height:none!important;overflow:hidden!important;}
  body.csc-route-serviceProgress .csc-main{padding:8px 0 0!important;margin:0!important;}
  body.csc-route-serviceProgress .csc-breadcrumb{display:none!important;}
  body.csc-route-serviceProgress .csc-card,body.csc-route-serviceEvaluation .csc-card,body.csc-route-serviceEvaluationDetail .csc-card{border-radius:0!important;}
}
@media(max-width:420px){
  body.csc-route-serviceProgress .csc-layout-header{height:54px!important;min-height:54px!important;flex-basis:54px!important;}
}

/* Keep feedback header visible after mobile file picker / viewport changes. */
body.csc-route-feedback,
body.csc-route-feedback .csc-page{
  height:var(--csc-vvh, 100vh);
  min-height:var(--csc-vvh, 100vh);
  overflow:hidden;
}
body.csc-route-feedback .csc-content{
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:900px){
  body.csc-route-feedback{overflow:hidden!important;}
  body.csc-route-feedback .csc-page{height:var(--csc-vvh, 100vh)!important;min-height:var(--csc-vvh, 100vh)!important;overflow:hidden!important;}
  body.csc-route-feedback .csc-content{overflow:auto!important;}
  .csc-header-right{justify-content:flex-end;}
}
@media(max-width:560px){
  .csc-layout-header{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:8px 12px;}
  .csc-header-left{min-width:0;flex:1 1 auto;gap:0;}
  .csc-header-left .csc-header-divider,.csc-service-title{display:none;}
  .csc-header-right{flex:0 0 auto;gap:6px;min-width:0;}
  .csc-user-chip{height:36px;max-width:34vw;padding:0 8px;}
  .csc-user-name{max-width:26vw;font-size:13px;}
  .csc-lang .mi-i18n-btn{height:36px;min-width:38px;padding:0 8px;}
}


/* 20260522 header logo spacing refinement */
.csc-header-left{gap:10px!important;}
.csc-brand{width:160px!important;min-width:160px!important;max-width:none!important;overflow:visible!important;}
.csc-brand-logo{width:160px!important;height:40px!important;object-fit:contain!important;object-position:left center!important;transform:none!important;}
.csc-header-divider{margin:0 4px!important;}
@media(max-width:760px){
  .csc-brand{width:132px!important;min-width:132px!important;max-width:36vw!important;}
  .csc-brand-logo{width:132px!important;height:34px!important;}
}
@media(max-width:420px){
  .csc-brand{width:122px!important;min-width:122px!important;max-width:34vw!important;}
  .csc-brand-logo{width:122px!important;height:32px!important;}
}
@media(max-width:360px){
  .csc-brand{width:112px!important;min-width:112px!important;}
  .csc-brand-logo{width:112px!important;height:30px!important;}
}

/* Account widget extracted to /system/account; keep host layout only. */
.csc-header-right .pv-account{flex:0 1 auto;min-width:0}
@media(max-width:760px){.csc-account-slot{min-width:0}.csc-header-right .pv-account{max-width:46vw}}