/* A darker smoked-glass concept, scoped to the control panel section. */
.control-panel { position: relative; background: #070b0f; color: #f0f2f5; border-bottom: 1px solid rgba(209,225,245,.08); padding: 96px 24px 64px; font-family: 'Geist', sans-serif; }
.control-panel * { box-sizing: border-box; }
.control-panel-inner { max-width: 1104px; margin: 0 auto; }
.control-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.control-panel-eyebrow { display: block; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: #38bdf8; margin-bottom: 20px; }
.control-panel-heading h2 { font-size: clamp(34px,4.1vw,54px); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; max-width: 790px; margin: 0; }
.control-panel-heading p { font-size: 16px; line-height: 1.7; color: #a3adb9; max-width: 590px; margin: 22px 0 0; }
.control-panel-link { display: inline-flex; align-items: center; gap: 10px; color: #d8dfe7; font-size: 15px; white-space: nowrap; padding: 8px 0; margin-bottom: 4px; }
.control-panel-link:hover { color: #fff; }
.control-panel-link:focus-visible { outline: 2px solid #38bdf8; outline-offset: 5px; border-radius: 3px; }
.control-panel-link svg { width: 16px; height: 16px; stroke-width: 1.7; }
.control-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; position: relative; }
.control-card-grid::before { content: ''; position: absolute; inset: 20% 4% 4%; background: radial-gradient(ellipse at 45% 50%,rgba(67,85,106,.13),transparent 70%); pointer-events: none; }
.control-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(200,217,237,.1); border-radius: 12px; background: linear-gradient(145deg,rgba(36,44,55,.42),rgba(12,17,23,.92) 68%); box-shadow: inset 0 1px 0 rgba(234,243,255,.045),0 12px 32px rgba(0,0,0,.13); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.control-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(210,226,245,.1); opacity: 0; pointer-events: none; transition: opacity .25s; }
.control-card:hover::after { opacity: 1; }
.control-card-visual { height: 296px; padding: 30px 22px 0; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.control-mini-window { width: 100%; max-width: 310px; border: 1px solid rgba(205,220,240,.1); border-radius: 8px; background: linear-gradient(160deg,rgba(25,33,43,.7),rgba(12,18,25,.78)); box-shadow: 0 12px 28px rgba(0,0,0,.16); font-family: 'Inter',sans-serif; }
.control-mini-header { display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 13px; border-bottom: 1px solid rgba(207,225,247,.08); font-size: 13px; color: #d4dce6; }
.control-mini-header svg { width: 13px; height: 13px; stroke-width: 1.6; color: #9ba8b8; }
.control-mini-meta { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #8f9cad; font-size: 12px; }
.control-document-row { display: flex; align-items: center; gap: 10px; padding: 15px 13px 7px; }
.control-document-icon { display: grid; place-items: center; width: 28px; height: 31px; color: #a6b2c2; border: 1px solid rgba(205,220,240,.12); border-radius: 4px; background: rgba(217,231,248,.025); flex-shrink: 0; }
.control-document-icon svg { width: 15px; height: 15px; stroke-width: 1.5; }
.control-document-row > div { min-width: 0; }
.control-document-row strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; color: #d8dee6; }
.control-document-row > div > span { display: block; font-size: 12px; color: #9aa8ba; margin-top: 3px; }
.control-document-scope { display: flex; align-items: center; gap: 5px; padding: 0 13px 12px; color: #8f9cad; font-size: 11px; border-bottom: 1px solid rgba(207,225,247,.06); }
.control-document-scope:last-child { border: 0; }
.control-document-scope svg { width: 11px; height: 11px; }
.control-document-scope > span { margin-left: auto; }
.control-schedule-owner { display: flex; align-items: center; gap: 9px; padding: 16px 13px 13px; }
.control-portrait { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }
.control-portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.65); transform-origin: 50% 30%; }
.control-schedule-owner strong { display: block; font-weight: 500; font-size: 13px; color: #d8dee6; }
.control-schedule-owner > div > span { display: block; font-size: 12px; color: #8f9cad; margin-top: 4px; }
.control-schedule-owner > svg { margin-left: auto; width: 13px; height: 13px; color: #8291a3; }
.control-status-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #83b69f; flex-shrink: 0; }
.control-schedule-frequency { display: flex; align-items: center; gap: 7px; margin: 0 13px; font-size: 12px; color: #a5b1c0; }
.control-schedule-frequency svg { width: 12px; height: 12px; }
.control-schedule-frequency > span { margin-left: auto; }
.control-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; padding: 13px; }
.control-week span { display: grid; place-items: center; height: 23px; border: 1px solid rgba(205,220,240,.065); border-radius: 4px; font-size: 12px; color: #7f8d9e; }
.control-week .is-scheduled { color: #d7e1ec; border-color: rgba(188,211,235,.27); background: rgba(188,211,235,.08); }
.control-schedule-next { display: flex; justify-content: space-between; padding: 11px 13px; border-top: 1px solid rgba(207,225,247,.08); font-size: 12px; color: #9aa8ba; }
.control-schedule-next strong { font-weight: 400; color: #b7c2cf; }
.control-card-copy { padding: 25px 25px 30px; flex: 1; }
.control-card-kicker { display: block; font-size: 12px; letter-spacing: .13em; color: #8291a3; margin-bottom: 11px; }
.control-card-copy h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.035em; font-weight: 400; color: #e5eaf0; margin: 0 0 13px; }
.control-card-copy p { font-size: 15px; line-height: 1.75; color: #aab5c3; margin: 0; }
.control-connections { margin: 30px 22px 0; padding: 0; height: 228px; }
.control-connection-lines { position: absolute; inset: 4px 0; width: 100%; height: 220px; overflow: visible; }
.control-connection-lines path { fill: none; stroke: url(#control-connection-gradient); stroke-width: 1; }
.control-connection-source { position: absolute; left: 9%; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 47px; height: 47px; background: linear-gradient(145deg,#212b36,#101820); border: 1px solid rgba(201,221,244,.18); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.control-connection-source img { width: 39px; height: 39px; object-fit: contain; }
.control-connected-tools { position: absolute; left: 48%; right: 0; top: 24px; display: grid; gap: 12px; }
.control-connected-tools > div { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(200,219,240,.09); border-radius: 6px; background: linear-gradient(150deg,#19222d,#101820); }
.control-connected-tools svg { width: 14px; height: 14px; color: #96a8ba; stroke-width: 1.6; flex-shrink: 0; }
.control-connected-tools > div > span:not(.control-status-dot) { font-size: 13px; color: #c4cedb; white-space: nowrap; }
.control-connected-tools small { display: block; margin-top: 3px; font-size: 11px; color: #7e9189; }
.control-connected-tools .control-status-dot { margin-left: auto; width: 3px; height: 3px; }
.control-trust { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 35px; padding: 24px 0 0; color: #8f9cac; }
.control-trust > svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; }
.control-trust strong { font-size: 13px; font-weight: 400; color: #b2bdca; }
.control-trust span { display: block; font-size: 13px; line-height: 1.6; margin-top: 3px; color: #94a3b6; }
@media (max-width: 1023px) {
  .control-panel { padding: 72px 24px 44px; }
  .control-panel-heading { align-items: flex-start; flex-direction: column; gap: 19px; }
  .control-card-grid { gap: 12px; }
  .control-card-visual { padding-inline: 14px; }
  .control-connections { margin-inline: 14px; padding: 0; }
  .control-card-copy { padding: 22px 18px 26px; }
  .control-card-copy h3 { font-size: 19px; }
  .control-connected-tools { left: 42%; }
  .control-connection-source { left: 0; }
  .control-document-row, .control-schedule-owner { gap: 7px; padding-inline: 9px; }
  .control-document-icon { width: 23px; }
  .control-mini-meta { font-size: 11px; }
  .control-mini-header { padding-inline: 9px; }
}
@media (max-width: 1023px) {
  .control-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .control-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .control-card-visual { padding: 24px 18px; height: 296px; }
  .control-connections { margin: 15px 18px; padding: 0; height: 228px; }
  .control-connected-tools { left: 44%; }
  .control-connection-source { left: 0; }
  .control-card-copy { padding: 24px; }
}
@media (max-width: 540px) {
  .control-panel { padding: 56px 20px 36px; }
  .control-panel-heading { margin-bottom: 30px; }
  .control-panel-heading h2 { font-size: 35px; }
  .control-panel-heading h2 br { display: none; }
  .control-panel-heading p { font-size: 16px; }
  .control-card { display: flex; }
  .control-card-visual { width: 100%; height: 280px; padding: 25px 24px 0; }
  .control-connections { width: calc(100% - 48px); margin: 20px 24px 0; height: 220px; padding: 0; }
  .control-card-copy { padding: 25px 26px 28px; }
  .control-card-copy h3 { font-size: 23px; }
  .control-card-copy p { font-size: 15px; }
  .control-trust { justify-content: flex-start; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .control-card::after { transition: none; } }