.product-preview { min-width: 280px; }
.preview-disclaimer { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px 15px; padding: 12px 24px; background: #25203cf5; color: #d9ccec; border-bottom: 2px solid #a286cc; backdrop-filter: blur(12px); font-size: 11px; }
.preview-disclaimer > a { font-weight: 750; white-space: nowrap; color: #f0ddff; }
.preview-pill { border: 1px solid #ba9cd7; border-radius: 5px; padding: 3px 7px; font-size: 9px; letter-spacing: 1px; color: #ebd6ff; font-weight: 750; white-space: nowrap; }
.preview-shell { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: calc(100vh - 53px); }
.preview-sidebar { padding: 30px 18px; background: #0e1523f7; border-right: 1px solid #47516d; display: flex; flex-direction: column; min-width: 0; }
.preview-sidebar .brand { margin: 0 12px 37px; }
.preview-sidebar .nav-label { margin: 0 12px 13px; padding: 0; font-size: 9px; }
.preview-sidebar-bottom { margin-top: auto; padding: 65px 10px 0; }
.preview-sidebar-bottom p { color: #c6d0e5; font-family: "Trebuchet MS", system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.6; }
.preview-sidebar-bottom .button { width: 100%; font-size: 11px; margin-bottom: 15px; }
.preview-sidebar-bottom .text-button { display: block; margin-bottom: 12px; }
.preview-sidebar-bottom small { color: #a7b7d2; font-size: 10px; line-height: 1.8; display: block; }
.preview-main { min-width: 0; }
.preview-topbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; width: calc(100% - 70px); max-width: 1380px; min-height: 84px; margin: 24px auto 0; padding: 17px 20px; gap: 28px; border: 1px solid #68597a80; border-radius: 14px; background: linear-gradient(115deg,#1b2135f5,#141a2df5); box-shadow: 0 8px 28px #080c191c; }
.preview-workspace { display: flex; align-items: center; gap: 12px; min-width: 0; }
.preview-workspace > div { min-width: 0; }
.preview-workspace .server-symbol { width: 42px; height: 42px; border-radius: 11px; background: #7853db1f; border-color: #a68aca60; color: #d5bfff; }
.preview-workspace strong { display: block; font-size: 15px; font-weight: 650; color: #f0ebfa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-workspace small { display: block; color: #b3abc4; font-size: 11px; margin-top: 5px; }
.preview-location { padding-left: 25px; border-left: 1px solid #8c749d38; min-width: 105px; }
.preview-location > span { display: block; font-size: 10px; color: #aaa1bc; margin-bottom: 5px; }
.preview-location strong { display: block; color: #e3d3f7; font-size: 12px; font-weight: 600; }
.preview-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.preview-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; white-space: nowrap; color: #d7c6ee; background: #7853db15; border: 1px solid #9c78c438; border-radius: 6px; padding: 6px 8px; }
.preview-mode > span { width: 5px; height: 5px; border-radius: 50%; background: #bfa0ed; }
.preview-topbar .button { font-size: 11px; white-space: nowrap; gap: 9px; }
.preview-topbar .button svg { width: 16px; height: 16px; flex-shrink: 0; color: #c9b3e7; }
.preview-page { max-width: 1450px; padding: 24px 35px 45px; margin: auto; }
.preview-view { display: none; }
.preview-view.active { display: block; animation: arrive .16s ease-out; }
.preview-hero { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(170px, 1fr); gap: 30px; align-items: center; padding: 32px; margin-bottom: 27px; border: 2px solid #ac92c9; border-radius: 27px; background: linear-gradient(100deg, #131d33f5, #1f2344cb 55%, #2b234962), url("/assets/desk-landscape.png") center 80% / cover; box-shadow: 0 7px 0 #080f1d8f; }
.preview-hero h1 { font-size: clamp(31px, 3.3vw, 47px); line-height: 1.12; margin: 14px 0 18px; }
.preview-hero p:not(.eyebrow) { color: #d3d8e8; font-size: 12px; line-height: 1.8; max-width: 550px; margin-bottom: 22px; }
.preview-hero .eyebrow { color: #e0c8ff; font-size: 9px; }
.preview-hero-sticker { justify-self: center; width: 205px; max-width: 100%; transform: rotate(4deg); text-align: center; padding: 15px 16px 18px; background: #171d32ea; border: 2px solid #bea6df; border-radius: 24px; box-shadow: 0 7px 0 #0a10218a; }
.preview-hero-sticker svg { width: 120px; height: 120px; display: block; margin: auto; }
.preview-hero-sticker strong { color: #e9d9ff; display: block; font: 700 13px "Trebuchet MS", system-ui, sans-serif; }
.preview-hero-sticker small { display: block; color: #c5badc; margin-top: 7px; font-size: 10px; }
.preview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 0 0 27px; }
.preview-stats button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 19px; color: #c4cde2; background: #19243cf7; border: 2px solid #796c9c; border-radius: 19px; box-shadow: 0 4px 0 #080f1d99; text-align: left; transition: background .15s, border-color .15s; }
.preview-stats button:hover { border-color: #d4b9ff; background: #302b46; }
.preview-stats strong { font-size: 29px; line-height: 1.2; color: #e5d8ff; }
.preview-stats small { font-size: 10px; }
.preview-overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 23px; align-items: stretch; }
.preview-overview-grid > .panel { margin: 0; }
.preview-journeys { display: grid; gap: 11px; }
.preview-journeys button { display: flex; align-items: center; gap: 14px; padding: 15px 13px; text-align: left; background: #18243a; border: 1px solid #5d6c88; border-radius: 13px; color: #dfd9ef; }
.preview-journeys button:hover { background: #282c44; border-color: #bca0e8; }
.preview-journey-icon { display: grid; place-items: center; width: 31px; height: 35px; flex-shrink: 0; border: 1px solid #a891d5; border-radius: 9px; color: #dcc6ff; font-size: 11px; background: #6f52912c; }
.preview-journeys button > span:nth-child(2) { flex: 1; min-width: 0; }
.preview-journeys strong { font-size: 12px; display: block; }
.preview-journeys small { font-size: 10px; color: #adbdd6; line-height: 1.7; display: block; margin-top: 3px; }
.preview-minecraft { background: linear-gradient(125deg, #1c3539f2, #142036ef); border-color: #649984; }
.preview-sample-label { display: inline-block; border: 1px solid #79b39c; border-radius: 6px; padding: 4px 8px; font-size: 9px; color: #bbe5d2; }
.preview-health-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 25px 0 22px; }
.preview-health-stats strong { display: block; color: #b5efd9; font-size: 21px; }
.preview-health-stats small { display: block; color: #afc5c6; margin-top: 5px; font-size: 9px; }
.preview-minecraft > p:last-child { color: #b5cad7; font-size: 11px; line-height: 1.8; margin: 0; }
.preview-what-next { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 25px; }
.preview-what-next h2 { margin-bottom: 9px; }
.preview-what-next p:not(.eyebrow) { color: #b5c3dc; font-size: 12px; margin: 0; }
.preview-what-next .button { flex-shrink: 0; }
.preview-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.preview-filters > input { flex: 1; min-width: 230px; }
.preview-filters > label { min-width: 145px; }
.preview-filters label > span { font-size: 10px; color: #b4c4df; }
.preview-filters select { margin-top: 7px; min-height: 45px; padding-right: 28px; }
.preview-filters .text-button { min-height: 44px; }
.product-preview select { color-scheme: dark; border-width: 2px; border-radius: 12px; background: #111b2c; color: #dce5f6; cursor: pointer; }
.product-preview select option { background: #172237; color: #e8edfa; }
.preview-result-count { color: #c4cee2; font-size: 11px; margin-bottom: 15px; }
.preview-case-list, .preview-task-list, .preview-alert-list { display: grid; gap: 14px; }
.preview-case-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(125px, 1fr) 100px 100px; align-items: center; gap: 18px; text-align: left; width: 100%; padding: 20px; color: #becce0; background: #172238f5; border: 2px solid #61718c; border-radius: 17px; box-shadow: 0 4px 0 #080f1d7a; transition: background .15s, border-color .15s; }
.preview-case-row:hover { border-color: #c4a4ed; background: #292d45; }
.preview-case-row strong { display: block; font-size: 13px; color: #e8e8fa; overflow-wrap: anywhere; }
.preview-case-row small { display: block; margin-top: 5px; color: #aebed7; font-size: 10px; overflow-wrap: anywhere; }
.preview-case-row > span { min-width: 0; font-size: 11px; }
.preview-case-row > span:last-child { justify-self: end; }
.preview-task-form { display: grid; grid-template-columns: minmax(0, 1fr) 175px auto; gap: 17px; align-items: end; }
.preview-task-form .button { margin-bottom: 1px; }
.preview-task { display: grid; grid-template-columns: minmax(0, 1.3fr) 170px 175px; gap: 20px; align-items: center; padding: 21px; border: 2px solid #66748e; border-radius: 18px; background: #172237f5; box-shadow: 0 4px 0 #080f1d88; }
.preview-task h3 { font-size: 14px; margin: 0 0 6px; overflow-wrap: anywhere; }
.preview-task p { font-size: 10px; color: #afbed7; margin: 0; line-height: 1.7; }
.preview-task label { font-size: 10px; }
.preview-task select { font-size: 12px; min-height: 44px; }
.preview-warning { color: #e6cfaa; background: #2e2938ed; border: 2px solid #a98b59; border-radius: 17px; padding: 17px 20px; font-size: 12px; line-height: 1.8; margin-bottom: 23px; }
.preview-warning strong { color: #ffe5b9; }
.preview-alert { padding: 21px; border: 2px solid #6a7492; border-radius: 19px; background: #172137f5; box-shadow: 0 4px 0 #080f1d88; }
.preview-alert > header { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.preview-alert h3 { font-size: 15px; margin: 0 0 5px; }
.preview-alert small { color: #b4c3dc; font-size: 10px; }
.preview-alert > p { color: #c8cfe3; font-size: 12px; line-height: 1.8; margin: 15px 0; }
.preview-alert .button-row { padding-top: 15px; border-top: 1px solid #53617c; }
.preview-alert .button { font-size: 11px; }
.preview-alert-badge { display: inline-block; color: #d7c1ff; border: 1px solid #ad8ed1; padding: 5px 9px; border-radius: 7px; font-size: 10px; white-space: nowrap; }
.preview-alert-badge.reviewed { color: #a7e6cf; border-color: #78b39b; }
.preview-alert-badge.dismissed { color: #c4cfe3; border-color: #7e8ca5; }
.preview-footer { padding: 5px 35px 30px; color: #a7b7d0; font-size: 10px; line-height: 1.8; }
#preview-case-dialog { width: 900px; }
.preview-detail-body { padding: 25px; }
.preview-detail-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: 22px; align-items: start; }
.preview-detail-layout > aside { padding: 19px; background: #172237; border: 1px solid #52617e; border-radius: 15px; }
.preview-detail-layout > aside .button { width: 100%; margin-top: 11px; }
.preview-detail-layout > aside p { color: #bac7df; font-size: 11px; line-height: 1.8; margin: 11px 0 0; }
.preview-detail-layout > aside h3 { font-size: 12px; color: #dac5ff; }
.preview-detail-layout .preview-warning { font-size: 10px; padding: 11px 14px; border-width: 1px; }
.preview-conversation { display: grid; gap: 12px; margin: 18px 0 22px; }
.preview-message { padding: 15px; border: 1px solid #5a6782; background: #172337; border-radius: 13px; overflow-wrap: anywhere; }
.preview-message.staff { border-color: #a387c4; background: #27233d; }
.preview-message strong { font-size: 11px; color: #e4ddf3; }
.preview-message p { color: #c3cfe2; font-size: 12px; line-height: 1.8; white-space: pre-wrap; margin: 7px 0 0; }
.preview-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.preview-detail-meta span { border: 1px solid #62728e; border-radius: 7px; font-size: 10px; color: #c6d2e7; padding: 4px 8px; }
.preview-reply-form label { font-size: 12px; }
.preview-reply-form textarea { margin-top: 9px; min-height: 120px; }
.preview-reply-form .button-row { margin-top: 14px; }
.preview-reply-form small { display: block; color: #b8c6dd; font-size: 10px; margin-top: 11px; line-height: 1.7; }
.preview-confirm-body { padding: 28px; }
#preview-confirm-dialog { width: 440px; }
#preview-confirm-message { font-size: 13px; color: #bcc9df; line-height: 1.8; }
.preview-confirm-body .button-row { justify-content: flex-end; margin-top: 23px; }
.preview-noscript { padding: 25px; color: #f3d6ab; background: #211c30; text-align: center; }
@media(max-width:1150px) { .preview-shell { grid-template-columns: 220px minmax(0, 1fr); } .preview-overview-grid { grid-template-columns: 1fr; } .preview-task { grid-template-columns: minmax(0, 1fr) 150px 155px; gap: 15px; } .preview-task-form { grid-template-columns: minmax(0, 1fr) 150px; } .preview-task-form .button { justify-self: start; } }
@media(max-width:900px) { .preview-hero { grid-template-columns: 1fr; } .preview-hero-sticker { display: none; } .preview-case-row { grid-template-columns: minmax(0, 1fr) auto; } .preview-case-row > span:nth-child(2), .preview-case-row > span:nth-child(3) { grid-column: 1; } .preview-case-row > span:last-child { grid-column: 2; grid-row: 1; } .preview-task { grid-template-columns: 1fr 1fr; } .preview-task > div { grid-column: 1 / -1; } }
@media(max-width:1150px) { .preview-location { display: none; } .preview-topbar { grid-template-columns: minmax(0,1fr) auto; gap: 14px; } }
@media(max-width:760px) {
  .preview-disclaimer { padding: 10px 16px; gap: 6px 10px; justify-content: flex-start; font-size: 10px; line-height: 1.6; }
  .preview-disclaimer > span:nth-child(2) { flex-basis: 100%; order: 3; }
  .preview-disclaimer > a { margin-left: auto; }
  .preview-shell { display: block; }
  .preview-sidebar { padding: 18px 17px 10px; border-right: 0; border-bottom: 1px solid #4b5770; }
  .preview-sidebar .brand { margin: 0 0 17px 3px; font-size: 20px; }
  .preview-sidebar .nav-label, .preview-sidebar-bottom { display: none; }
  .preview-sidebar nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 0 2px 8px; }
  .preview-sidebar .nav { width: 100%; white-space: nowrap; min-width: 0; font-size: 11px; padding: 9px 10px; margin: 0; }
  .preview-topbar { width: calc(100% - 34px); margin-top: 18px; padding: 14px; gap: 10px; min-height: 76px; border-radius: 12px; }
  .preview-workspace { gap: 10px; }
  .preview-workspace strong { font-size: 13px; }
  .preview-workspace small { font-size: 10px; }
  .preview-workspace .server-symbol { width: 35px; height: 35px; border-radius: 9px; }
  .preview-mode { display: none; }
  .preview-topbar .button { font-size: 10px; padding: 10px; }
  .preview-page { padding: 25px 17px 35px; }
  .preview-hero { padding: 25px 21px; border-radius: 23px; }
  .preview-hero h1 { font-size: 35px; }
  .preview-hero .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .preview-stats button { padding: 15px; }
  .preview-stats strong { font-size: 27px; }
  .preview-overview-grid { gap: 20px; }
  .preview-what-next { flex-direction: column; align-items: flex-start; gap: 19px; }
  .preview-filters { gap: 11px; }
  .preview-filters > input { min-width: 0; flex-basis: 100%; }
  .preview-filters > label { min-width: 0; flex: 1; }
  .preview-filters select { font-size: 11px; padding: 10px 7px; }
  .preview-filters .text-button { flex-basis: 100%; text-align: left; min-height: 30px; }
  .preview-case-row { gap: 9px; padding: 17px; }
  .preview-case-row strong { font-size: 12px; }
  .preview-task-form { grid-template-columns: 1fr; gap: 16px; }
  .preview-task-form .button { justify-self: stretch; }
  .preview-task { padding: 18px; gap: 16px 12px; }
  .preview-task select { font-size: 11px; padding: 10px 7px; }
  .preview-alert { padding: 18px; }
  .preview-alert > header { flex-wrap: wrap; gap: 10px; }
  .preview-alert .button { flex: 1; }
  .preview-health-stats { gap: 8px; }
  .preview-health-stats strong { font-size: 18px; }
  .preview-health-stats small { font-size: 9px; }
  .preview-footer { padding: 0 17px 25px; }
  .preview-detail-body { padding: 18px; }
  .preview-detail-layout { grid-template-columns: 1fr; }
  .preview-detail-layout > aside { grid-row: 1; }
  .preview-detail-layout > aside .button { width: auto; margin-right: 8px; }
  .preview-detail-layout > aside h3 { margin-bottom: 6px; }
  .preview-reply-form .button { flex: 1; }
  .preview-confirm-body { padding: 23px; }
}
@media(max-width:480px) { .preview-topbar #preview-reset { width: 44px; min-height: 44px; padding: 10px; } .preview-topbar #preview-reset > span { display: none; } }
@media(max-width:400px) { .preview-task { grid-template-columns: minmax(0,1fr); } .preview-task > div { grid-column: auto; } }