
:root{
  --cv-ptab-h-mobile: 64px;
  --cv-ptab-h-desktop: 56px;
}

html.cv-phoner-shell .shell,
html.cv-phoner-shell .shell.sidebar-collapsed{ display: block !important; grid-template-columns: 1fr !important; }
html.cv-phoner-shell .stage{ width: 100% !important; height: 100vh; height: 100dvh; }
html.cv-phoner-shell aside.rail{ display: none !important; }

html.cv-phoner-shell .sidebar-mobile-trigger,
html.cv-phoner-shell .sidebar-backdrop-mobile{ display: none; }

html.cv-phoner-shell .screen{
  bottom: calc(var(--cv-ptab-h-mobile) + env(safe-area-inset-bottom, 0px));
}

.cv-phoner-tabbar{ display: none; }
html.cv-phoner-shell .cv-phoner-tabbar{
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 120;
  align-items: stretch; justify-content: space-around;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--card-solid, var(--card));
  background: color-mix(in srgb, var(--card-solid, var(--card)) 86%, transparent);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 -6px 22px -12px rgba(0,0,0,.45);
}

.cv-ptab{
  flex: 1 1 0; max-width: 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 7px 6px; min-height: 50px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .64rem; font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-3);
  border-radius: 13px;
  transition: color .16s ease, background .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cv-ptab .cv-ptab-ic{ font-size: 1.32rem; line-height: 1; }
.cv-ptab .cv-ptab-lb{ line-height: 1; }
.cv-ptab:hover{ color: var(--text-1); }
.cv-ptab:active{ transform: scale(.94); }
.cv-ptab.is-active{
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
}
.cv-ptab:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cv-phoner-preview-badge{
  display: none;
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px;
  z-index: 130;
  align-items: center; gap: 9px;
  padding: 7px 8px 7px 13px;
  border-radius: 999px;
  background: var(--card-solid, var(--card));
  background: color-mix(in srgb, var(--card-solid, var(--card)) 90%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 8px 26px -10px rgba(0,0,0,.5);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  font-size: .74rem; font-weight: 600; color: var(--text-2);
}
html.cv-phoner-shell .cv-phoner-preview-badge.is-on{ display: inline-flex; }
.cv-phoner-preview-badge .cv-ppb-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
  animation: cvPpbPulse 2s ease-in-out infinite;
}
.cv-phoner-preview-badge .cv-ppb-txt{ white-space: nowrap; }
.cv-phoner-preview-badge .cv-ppb-emp{ color: var(--text-1); font-weight: 700; }
.cv-phoner-preview-badge .cv-ppb-exit{
  border: 0; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent-ink, #fff);
  font-family: inherit; font-size: .72rem; font-weight: 700;
}
.cv-phoner-preview-badge .cv-ppb-exit:hover{ filter: brightness(1.06); }
@keyframes cvPpbPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }

@media (min-width: 769px){
  html.cv-phoner-shell .cv-phoner-tabbar{
    bottom: auto; top: 0;
    border-top: 0; border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    gap: 8px;
    justify-content: center;
    box-shadow: 0 6px 22px -14px rgba(0,0,0,.4);
  }
  .cv-ptab{
    flex: 0 0 auto; max-width: none;
    flex-direction: row; gap: 9px;
    padding: 9px 20px; min-height: 0;
    font-size: .85rem;
    border-radius: 999px;
  }
  .cv-ptab .cv-ptab-ic{ font-size: 1.05rem; }
  html.cv-phoner-shell .screen{
    top: var(--cv-ptab-h-desktop);
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .cv-ptab{ transition: none; }
  .cv-ptab:active{ transform: none; }
  .cv-phoner-preview-badge .cv-ppb-dot{ animation: none; }
}


html.cv-phoner-shell .phoner-screen-wrap{ max-width: 1600px; margin: 0 auto; }
html.cv-phoner-shell #phonerScreenSubtitle{ font-size: clamp(.78rem, 1.4vw, .9rem); }

.phoner-coach-strip{ margin: 0 0 clamp(10px, 1.5vw, 16px); }
.phoner-coach-strip[hidden]{ display: none; }
.phoner-coach-strip .phc-card{
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 24px);
  border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), .22);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .03));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.phoner-coach-strip .phc-greet{ font-size: clamp(.74rem, 1.3vw, .82rem); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.phoner-coach-strip .phc-line{ font-size: clamp(.9rem, 1.6vw, 1.02rem); color: var(--text-1); line-height: 1.45; }
.phoner-coach-strip .phc-line strong{ font-weight: 800; }
.phoner-coach-strip .phc-activity{ font-weight: 600; }
.phoner-coach-strip .phc-hour{ color: var(--text-2); }
.phoner-coach-strip .phc-motiv{ color: var(--text-3); font-size: clamp(.82rem, 1.4vw, .92rem); }
.phoner-coach-strip .phc-empty{ font-size: .9rem; color: var(--text-3); }
.phoner-coach-strip .phc-goal{ margin: 4px 0 6px; }
.phoner-coach-strip .phc-goal-top{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.phoner-coach-strip .phc-goal-label{ font-size: clamp(.8rem, 1.4vw, .9rem); font-weight: 700; color: var(--text-2); }
.phoner-coach-strip .phc-goal-pct{ font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.phoner-coach-strip .phc-goal-bar{ height: 8px; border-radius: 999px; background: rgba(var(--accent-rgb), .14); overflow: hidden; }
.phoner-coach-strip .phc-goal-fill{ height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.phoner-coach-strip .phc-goal--green{ color: var(--green, #1F9E5A); }
.phoner-coach-strip .phc-goal-fill.phc-goal--green{ background: var(--green, #1F9E5A); }
.phoner-coach-strip .phc-goal--amber{ color: var(--amber, #E8A33D); }
.phoner-coach-strip .phc-goal-fill.phc-goal--amber{ background: var(--amber, #E8A33D); }
.phoner-coach-strip .phc-goal--red{ color: var(--red, #E5484D); }
.phoner-coach-strip .phc-goal-fill.phc-goal--red{ background: var(--red, #E5484D); }
@media (prefers-reduced-motion: reduce){ .phoner-coach-strip .phc-goal-fill{ transition: none; } }

@media (max-width: 599px){
  #phonerScreenGrid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row;
    gap: 12px !important;
  }
  #phonerScreenGrid > .w{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 200px;
  }
  #phonerScreenGrid > .w[data-type="phoner-header"]    { min-height: 150px; }
  #phonerScreenGrid > .w[data-type="phoner-yesterday"] { min-height: 158px; }
  #phonerScreenGrid > .w[data-type="phoner-forecast"]  { min-height: 372px; }
  #phonerScreenGrid > .w[data-type="phoner-stats"]     { min-height: 410px; }
  #phonerScreenGrid > .w[data-type="phoner-team-feed"] { min-height: 320px; }
  #phonerScreenGrid > .w[data-type="phoner-records"]   { min-height: 215px; }
  #phonerScreenGrid > .w[data-type="phoner-podium"]    { min-height: 350px; }
}

@media (min-width: 600px) and (max-width: 899px){
  #phonerScreenGrid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row;
    gap: 14px !important;
  }
  #phonerScreenGrid > .w{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px;
  }
  #phonerScreenGrid > .w[data-type="phoner-forecast"],
  #phonerScreenGrid > .w[data-type="phoner-stats"],
  #phonerScreenGrid > .w[data-type="phoner-podium"]{ grid-column: 1 / -1 !important; }
  #phonerScreenGrid > .w[data-type="phoner-forecast"]  { min-height: 320px; }
  #phonerScreenGrid > .w[data-type="phoner-stats"]     { min-height: 360px; }
  #phonerScreenGrid > .w[data-type="phoner-header"]    { min-height: 150px; }
  #phonerScreenGrid > .w[data-type="phoner-yesterday"] { min-height: 150px; }
  #phonerScreenGrid > .w[data-type="phoner-team-feed"] { min-height: 300px; }
  #phonerScreenGrid > .w[data-type="phoner-records"]   { min-height: 215px; }
  #phonerScreenGrid > .w[data-type="phoner-podium"]    { min-height: 300px; }
}


html.cv-phoner-shell .cv-phoner-util{ display: inline-flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; }
.cv-phoner-util .cv-pu-btn,
.cv-phoner-util .cv-pu-avatar{
  border: 1px solid var(--border); background: var(--card-solid, var(--card)); color: var(--text-2);
  cursor: pointer; border-radius: 11px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: background .15s ease, color .15s ease;
}
.cv-phoner-util .cv-pu-avatar{ border-radius: 50%; font-weight: 800; color: var(--accent); background: rgba(var(--accent-rgb), .14); border-color: transparent; }
.cv-phoner-util .cv-pu-btn:hover{ color: var(--text-1); }
.cv-phoner-util .cv-pu-btn:focus-visible,
.cv-phoner-util .cv-pu-avatar:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-phoner-util .cv-pu-menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 184px; padding: 8px; border-radius: 14px;
  background: var(--card-solid, var(--card)); border: 1px solid var(--border);
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.5);
}
.cv-phoner-util .cv-pu-menu[hidden]{ display: none; }
.cv-phoner-util .cv-pu-menu-name{
  padding: 6px 10px 8px; font-size: .8rem; font-weight: 700; color: var(--text-1);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-phoner-util .cv-pu-menu-item{
  display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; color: var(--text-1); font: inherit; font-size: .82rem; font-weight: 600;
}
.cv-phoner-util .cv-pu-menu-item:hover{ background: rgba(var(--accent-rgb), .10); color: var(--accent); }
@media (prefers-reduced-motion: reduce){
  .cv-phoner-util .cv-pu-btn,
  .cv-phoner-util .cv-pu-avatar{ transition: none; }
}

.phoner-delte-wrap{ max-width: 1200px; margin: 0 auto; padding: 24px clamp(14px, 2.5vw, 40px); }
.phoner-delte-head h1{ font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--text-1); }
.phoner-delte-head p{ color: var(--text-3); font-size: clamp(.8rem, 1.4vw, .92rem); margin: 6px 0 0; }
.phoner-delte-toolbar{ display: flex; gap: 10px; align-items: center; margin: 16px 0 4px; flex-wrap: wrap; }
.phoner-delte-toolbar[hidden]{ display: none; }
.phoner-delte-toolbar .pdt-search{ flex: 1; min-width: 180px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, rgba(var(--accent-rgb), .04)); color: var(--text-1); font: inherit; font-size: .9rem; }
.phoner-delte-toolbar .pdt-search::placeholder{ color: var(--text-3); }
.phoner-delte-toolbar .pdt-search:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.phoner-delte-toolbar .pdt-sort{ flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-2); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.phoner-delte-toolbar .pdt-sort:hover{ background: rgba(var(--accent-rgb), .08); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
.phoner-delte-toolbar .pdt-sort:active{ transform: translateY(1px); background: rgba(var(--accent-rgb), .14); }
.phoner-delte-toolbar .pdt-sort:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.phoner-delte-state{ padding: 28px 8px; color: var(--text-3); font-size: .86rem; }
.phoner-delte-state[hidden]{ display: none; }
.phoner-delte-empty{ text-align: center; padding: clamp(40px, 8vw, 80px) 20px; }
.phoner-delte-empty .pde-emoji{ font-size: 2.6rem; margin-bottom: 10px; }
.phoner-delte-empty .pde-title{ font-size: 1rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.phoner-delte-empty .pde-sub{ font-size: .84rem; line-height: 1.5; color: var(--text-3); max-width: 42ch; margin: 0 auto; }
.phoner-delte-error{ color: var(--danger, var(--red, #e5484d)); }
.phoner-delte-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.phoner-delte-card{
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 16px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--card-solid, var(--card)); color: var(--text-1); font: inherit;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.phoner-delte-card:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 10px 26px -14px rgba(0,0,0,.5); }
.phoner-delte-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.phoner-delte-card .pdc-thumb{
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: var(--accent);
  background: rgba(var(--accent-rgb), .14);
}
.phoner-delte-card .pdc-body{ min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.phoner-delte-card .pdc-name{ font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phoner-delte-card .pdc-meta{ font-size: .74rem; color: var(--text-3); }
.phoner-delte-card .pdc-arrow{ flex-shrink: 0; color: var(--text-3); font-size: 1.1rem; transition: transform .14s ease, color .14s ease; }
.phoner-delte-card:hover .pdc-arrow{ color: var(--accent); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .phoner-delte-card, .phoner-delte-card .pdc-arrow{ transition: none; }
  .phoner-delte-card:hover{ transform: none; }
  .phoner-delte-card:hover .pdc-arrow{ transform: none; }
}

.cv-phoner-util .cv-pu-refresh-ic{ display: inline-block; font-size: 1.2rem; line-height: 1; }
.cv-phoner-util .cv-pu-refresh-ic.is-spinning,
.cv-ptr-indicator .cv-ptr-spin.is-spinning{ animation: cvPhSpin .7s linear; }
@keyframes cvPhSpin{ to{ transform: rotate(360deg); } }

.cv-ptr-indicator{
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-solid, var(--card)); border: 1px solid var(--border);
  color: var(--accent); font-size: 1.2rem; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; z-index: 125;
}
@media (prefers-reduced-motion: reduce){
  .cv-phoner-util .cv-pu-refresh-ic.is-spinning,
  .cv-ptr-indicator .cv-ptr-spin.is-spinning{ animation: none; }
}

.phoner-comp-wrap{ max-width: 760px; margin: 0 auto; padding: 24px clamp(14px, 2.5vw, 40px); }
.phoner-comp-head h1{ font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--text-1); }
.phoner-comp-head p{ color: var(--text-3); font-size: clamp(.8rem, 1.4vw, .92rem); margin: 6px 0 0; }
.phoner-comp-state{ padding: 28px 8px; color: var(--text-3); font-size: .86rem; }
.phoner-comp-state[hidden]{ display: none; }
.phoner-comp-empty{ text-align: center; padding: clamp(40px, 8vw, 80px) 20px; }
.phoner-comp-empty .pce-emoji{ font-size: 2.6rem; margin-bottom: 10px; }
.phoner-comp-empty .pce-title{ font-size: 1rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.phoner-comp-empty .pce-sub{ font-size: .84rem; line-height: 1.5; color: var(--text-3); max-width: 42ch; margin: 0 auto; }
.phoner-comp-error{ color: var(--danger, var(--red, #e5484d)); }
.phoner-comp-list{ margin-top: 22px; display: grid; gap: 16px; }

.phoner-comp-card{
  border: 1px solid var(--border); border-radius: 18px; padding: 18px clamp(14px, 2.2vw, 22px);
  background: var(--card-solid, var(--card)); overflow: hidden; position: relative;
}
.phoner-comp-card .pcc-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.phoner-comp-card .pcc-title{ font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--text-1); }
.phoner-comp-card .pcc-kpi{ display: inline-block; margin-top: 3px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.phoner-comp-card .pcc-countdown{ flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--text-2); padding: 5px 11px; border-radius: 999px; background: rgba(var(--accent-rgb), .10); white-space: nowrap; }
.phoner-comp-card .pcc-hero{ display: flex; align-items: baseline; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.phoner-comp-card .pcc-rank{ font-size: clamp(2.2rem, 7vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.phoner-comp-card .pcc-rank-sub{ font-size: .86rem; font-weight: 600; color: var(--text-2); }
.phoner-comp-card .pcc-standings{ display: flex; flex-direction: column; gap: 4px; }
.phoner-comp-card .pcc-row{ display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; }
.phoner-comp-card .pcc-row.is-me{ background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); }
.phoner-comp-card .pcc-medal{ flex-shrink: 0; width: 30px; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--text-2); }
.phoner-comp-card .pcc-name{ flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phoner-comp-card .pcc-row.is-me .pcc-name{ font-weight: 800; color: var(--accent); }
.phoner-comp-card .pcc-val{ flex-shrink: 0; font-size: .92rem; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.phoner-comp-card .pcc-gap{ text-align: center; color: var(--text-3); font-size: .8rem; line-height: 1; padding: 2px 0; }
.phoner-comp-card .pcc-seeall{ display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.phoner-comp-card .pcc-seeall:hover{ background: rgba(var(--accent-rgb), .08); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
.phoner-comp-card .pcc-seeall:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.phoner-comp-card .pcc-countdown::before{ content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: pcc-live-pulse 2s ease-in-out infinite; }
@keyframes pcc-live-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
@media (prefers-reduced-motion: reduce){ .phoner-comp-card .pcc-countdown::before{ animation: none; } }
.phoner-comp-card .pcc-foot{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.phoner-comp-card .pcc-reward{ font-size: .78rem; font-weight: 600; color: var(--text-2); }
