/* Desktop interview practice refresh. Existing app navigation and state labels remain owned by their host. */
body.desktop-ui[data-view="interview-practice"] #view{padding:78px clamp(18px,2vw,34px) 36px!important}
body.desktop-ui[data-view="interview-practice"] .ip-page{min-height:calc(100vh - 78px);padding:28px 0 48px;background:linear-gradient(145deg,#f5f9ff 0%,#f8fbff 55%,#f1f6fd 100%);color:#10234f}
.ip-page .ip-topbar,.ip-page .ip-status,.ip-page .ip-main{max-width:1560px}
.ip-page main.ip-main{width:100%;margin:0 auto!important;padding:0!important}
.ip-page .ip-topbar{align-items:center;margin-bottom:22px;gap:24px}
.ip-page .ip-heading{order:0;flex:1;min-width:0}
.ip-page .ip-heading .ip-eyebrow{display:block;font-size:10px;letter-spacing:.16em}
.ip-page .ip-heading h1{margin:5px 0 6px;color:#10234f;font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-.035em}
.ip-page .ip-heading p{font-size:14px;line-height:1.6;color:#64799e}
.ip-page .ip-top-actions{order:1;display:flex;align-items:center;gap:10px;flex:none}
.ip-page .ip-back,.ip-page .ip-history{min-height:42px;padding:0 17px;border-radius:9px;color:#143466;border-color:#d6e2f3;box-shadow:none;font-size:13px;background:#fff}
.ip-page .ip-history{color:#1267e9}
.ip-page .ip-back:hover,.ip-page .ip-history:hover{transform:none;box-shadow:0 4px 14px #1f5eaa12;border-color:#a9c8f3;background:#fafdff}
.ip-page .ip-status{font-size:12px;margin-bottom:12px}
.ip-page .ip-card{padding:24px;border-color:#dce7f5;border-radius:13px;box-shadow:0 8px 24px #1f5eaa0a;background:#fff}
.ip-page .ip-card h2{color:#10234f}
.ip-page .ip-welcome{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:17px 22px;margin:0 0 28px;border-radius:10px;border-color:#d4e5ff;background:linear-gradient(105deg,#f1f7ff,#eaf3ff);box-shadow:none}
.ip-page .ip-welcome-copy{min-width:0}
.ip-page .ip-welcome .ip-kicker{display:block;font-size:10px;letter-spacing:.12em}
.ip-page .ip-welcome h2{font-size:20px;margin:4px 0 5px}
.ip-page .ip-welcome p{margin:0;font-size:13px;line-height:1.6;color:#60779d}
.ip-page .ip-welcome .ip-secondary{min-width:132px;min-height:42px;padding:0 19px;border-radius:8px;background:#1769e8;color:#fff;border-color:#1769e8;font-size:13px;font-weight:700;box-shadow:none}
.ip-page .ip-welcome .ip-secondary:hover{background:#0e5dce}
.ip-page .ip-card-head{margin:0 0 13px;align-items:end}
.ip-page .ip-card-head h2{font-size:21px;margin:3px 0 0;letter-spacing:-.02em}
.ip-page .ip-card-head>span{color:#7487a7;font-weight:500;font-size:12px;white-space:nowrap}
.ip-page .ip-region-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
.ip-page .ip-region{position:relative;justify-content:flex-start;min-width:0;min-height:48px;padding:7px 10px 7px 13px;gap:7px;border-radius:8px;border-color:#dce6f3;box-shadow:none;background:#fff}
.ip-page .ip-region:hover:not(:disabled){transform:translateY(-1px);background:#f8fbff;border-color:#5c9aff;box-shadow:0 4px 12px #1769e815}
.ip-page .ip-region b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#142951}
.ip-page .ip-region-tag{margin-left:auto;padding:3px 7px;border-radius:5px;background:#edf5ff;color:#1769e8;font-size:10px;font-weight:700;line-height:1.35}
.ip-page .ip-region.is-recent{border-color:#4889fa;background:#f6faff}
.ip-page .ip-region.is-recent .ip-region-tag{background:#1769e8;color:#fff}
.ip-page .ip-region-tag.is-pending{background:#fff2f0;color:#c64c3e}
.ip-page .ip-region:disabled{opacity:.58;background:#f8fafc}
.ip-page .ip-region-arrow{color:#1769e8;font-size:20px;line-height:1;margin-left:0}
.ip-page .ip-back-pill{min-height:40px;padding:0 14px;border-radius:8px;color:#1769e8}
.ip-page .ip-mode-header{padding:0 2px}
.ip-page .ip-mode-header h2,.ip-page .ip-card>h2{font-size:25px;letter-spacing:-.025em}
.ip-page .ip-mode-header p{max-width:820px;line-height:1.75}
.ip-page .ip-mode-grid{margin:22px 0 20px;gap:14px}
.ip-page .ip-mode-card,.ip-page .ip-mode-grid button{min-height:108px;padding:20px;border-radius:11px;border-color:#dce7f5;box-shadow:none}
.ip-page .ip-mode-card:hover:not(:disabled),.ip-page .ip-mode-grid button:hover:not(:disabled){transform:translateY(-1px);border-color:#74a8f4;box-shadow:0 8px 20px #1b65c412}
.ip-page .ip-mode-card:disabled{background:#f5f7fa}
.ip-page .ip-mode-grid b{font-size:17px;color:#10234f}
.ip-page .ip-mode-grid small{font-size:13px;line-height:1.6}
.ip-page .ip-select{margin:22px 0 0;max-width:420px;gap:8px;font-weight:650}
.ip-page .ip-select select{min-height:44px;border-radius:8px;border-color:#dce6f3;color:#253d63}
.ip-page .ip-history-list{gap:9px}
.ip-page .ip-history-list article{min-height:76px;padding:14px 16px;border-color:#dce6f3;border-radius:10px;box-shadow:none}
.ip-page .ip-history-list article>div b,.ip-page .ip-review article>b{color:#10234f;font-size:14px}
.ip-page .ip-history-list small{font-size:12px;line-height:1.5}
.ip-page .ip-history-list button,.ip-page .ip-rating button{min-height:40px;padding:0 14px;border-radius:8px;font-size:12px}
.ip-page .ip-history-list button[data-delete-id]{color:#7787a0;background:#fff;border-color:#e0e7f0}
.ip-page .ip-review{gap:12px;margin-top:20px}
.ip-page .ip-review article{padding:18px;border-radius:10px;border-color:#dce6f3;box-shadow:none}
.ip-page .ip-review article>p{margin:9px 0;color:#5f7292;font-size:13px;line-height:1.75}
.ip-page .ip-rating{margin-top:12px;gap:8px}
.ip-page .ip-rating>span{margin-right:3px;font-weight:650}
.ip-page .ip-rating button{background:#fff;color:#456283;border-color:#d8e2ef}
.ip-page .ip-rating button.is-selected{background:#1769e8;border-color:#1769e8;color:#fff}
.ip-page .ip-note{color:#7585a0!important}

/* Shared treatment for the exam notice, login and device setup controls. */
.ipx-root{background:#f2f6fc;color:#172b4d;font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.ipx-bg,.ipx-exambg{background:#f2f6fc}
.ipx-entry-title{color:#10234f}
.ipx-login-form,.ipx-info-panel,.ipx-full,.ipx-panel{border:1px solid #dce6f3;border-radius:12px;background:#fff;box-shadow:0 12px 36px #1f5eaa12}
.ipx-login-form{min-height:130px;padding:38px 44px}
.ipx-login-form input{height:44px;border-color:#d7e2f0;border-radius:8px;color:#223b62}
.ipx-btn{min-height:42px;padding:8px 20px;border-radius:8px;background:#1769e8;font-weight:650;transition:background .15s ease,transform .15s ease}
.ipx-btn:hover:not(:disabled){background:#0e5dce;transform:translateY(-1px)}
.ipx-btn:disabled{background:#aebbd0;color:#fff}
.ipx-btn-ghost{background:#edf3fb;color:#355273;border-color:#dbe5f1}
.ipx-btn-ghost:hover:not(:disabled){background:#e2ebf7;color:#203f69}
.ipx-intro-shade{background:#13244380;backdrop-filter:blur(2px)}
.ipx-intro-dialog{border:1px solid #dce6f3;border-radius:14px;box-shadow:0 24px 80px #12294a30}
.ipx-info-panel{padding:24px 36px}
.ipx-info-panel h2{color:#10234f;font-weight:700}
.ipx-info-tip{background:#eff6ff;color:#355273}
.ipx-full{height:calc(95% - 60px);box-shadow:0 12px 40px #1f5eaa18}
.ipx-banner{color:#10234f;font-weight:700}
.ipx-full:not(.ipx-device):not(.ipx-wait) .ipx-scroll{border-color:#dce6f3;border-radius:9px;box-shadow:inset 0 1px 6px #1f5eaa0a}
.ipx-noticebar{gap:12px}
.ipx-checktoggle{min-height:42px;padding:8px 12px;border:1px solid #dce6f3;border-radius:8px;color:#304867}
.ipx-checktoggle span{border-radius:4px}
.ipx-device-title{color:#10234f;font-weight:700}
.ipx-devcard{max-width:680px;margin:0 auto;padding:20px;border:1px solid #dce6f3;border-radius:10px;background:#f8fbff}
.ipx-test-monitor{border:5px solid #6d7e98;border-radius:10px;overflow:hidden}
.ipx-wait .ipx-scroll{gap:16px}
.ipx-status-view,.ipx-question-card,.ipx-answer-playback,.ipx-video-view{box-shadow:0 5px 18px #1b35511a;border-color:#d3dfed}
.ipx-status-view{border-radius:10px}
.ipx-question-card{border-radius:11px;border-color:#d9e3f0}
.ipx-recording-label{color:#637694}
.ipx-exam-bar{background:#1769e8}
.ipx-side{border-color:#dce6f3;border-radius:8px}
.ipx-side-head{background:#edf5ff;color:#244b7d;font-weight:700}
.ipx-practice-finish{margin-top:16px}
.ipx-groups fieldset{padding:15px;border-color:#dce6f3;border-radius:9px}
.ipx-groups label{padding:9px 10px;border-radius:7px;background:#f7faff}
@media(max-width:1180px){
  .ip-page .ip-region-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  body.desktop-ui[data-view="interview-practice"] #view{padding-right:16px!important;padding-left:16px!important}
}
@media(max-width:800px){
  body.desktop-ui[data-view="interview-practice"] #view{padding:72px 10px 24px!important}
  body.desktop-ui[data-view="interview-practice"] .ip-page{padding:16px 8px 32px}
  .ip-page .ip-topbar{align-items:start;gap:10px;margin-bottom:14px}
  .ip-page .ip-top-actions{gap:6px}
  .ip-page .ip-back,.ip-page .ip-history{min-height:38px;padding:0 10px;font-size:12px}
  .ip-page .ip-heading h1{font-size:25px}
  .ip-page .ip-heading p{font-size:12px}
  .ip-page .ip-card{padding:17px 14px}
  .ip-page .ip-welcome{grid-template-columns:minmax(0,1fr);gap:12px;padding:15px;margin-bottom:19px}
  .ip-page .ip-welcome .ip-secondary{justify-self:start}
  .ip-page .ip-region-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .ip-page .ip-region{min-height:47px;padding:7px 8px;gap:4px}
  .ip-page .ip-region b{font-size:13px}
  .ip-page .ip-region-tag{font-size:9px;padding:3px 5px}
  .ip-page .ip-mode-grid{grid-template-columns:minmax(0,1fr);gap:9px}
  .ip-page .ip-mode-card,.ip-page .ip-mode-grid button{min-height:78px;padding:15px}
  .ip-page .ip-history-list article{min-height:0}
  .ipx-login-form{padding:24px 16px;min-height:100px}
  .ipx-full{width:calc(100% - 16px);height:calc(100% - 36px);padding:17px 13px 14px}
  .ipx-noticebar{gap:8px;flex-wrap:wrap}
  .ipx-noticebar .ipx-btn{min-width:92px;padding-inline:14px}
  .ipx-intro-dialog{padding:20px}
  .ipx-info-panel{padding:18px 14px}
}
@media(max-width:600px){
  .ip-page .ip-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .ip-page .ip-heading{grid-column:1/-1;grid-row:1}
  .ip-page .ip-top-actions{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:space-between}
  .ip-page .ip-region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}