#ect-order-tip {
    --ect-gold: #efb500;
    --ect-ink: #20211f;
    --ect-muted: #5d625d;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: min(1000px, calc(100vw - 48px));
    max-width: 1000px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 22px;
    background: #fff;
    color: var(--ect-ink);
    box-shadow: 0 28px 100px rgba(0,0,0,.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    letter-spacing: normal;
    overflow: auto;
    overscroll-behavior: contain;
}
#ect-order-tip:not([open]) { display: none !important; }
#ect-order-tip[open] { display: block; animation: ect-tip-enter .24s ease-out both; }
#ect-order-tip::backdrop { background: rgba(20,25,23,.53); backdrop-filter: blur(3px); }
#ect-order-tip *, #ect-order-tip *::before, #ect-order-tip *::after { box-sizing: border-box; }
#ect-order-tip .ect-tip-shell { position: relative; display: grid; grid-template-columns: 1.04fr 1fr; min-height: 490px; }
#ect-order-tip .ect-tip-content { padding: 44px 36px 32px 42px; }
#ect-order-tip .ect-tip-eyebrow { margin: 0 0 17px; display: flex; align-items: center; gap: 10px; color: #736016; font-size: 14px; font-weight: 750; letter-spacing: .02em; }
#ect-order-tip .ect-tip-bulb { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff5d6; color: #967000; }
#ect-order-tip #ect-order-tip-title { margin: 0 0 21px; padding: 0; color: var(--ect-ink); font-family: inherit; font-size: clamp(30px, 3vw, 40px); font-style: normal; font-weight: 750; line-height: 1.14; letter-spacing: -.035em; text-transform: none; }
#ect-order-tip .ect-tip-copy p { margin: 0 0 15px; padding: 0; color: var(--ect-muted); font-size: 15px; font-weight: 400; line-height: 1.65; }
#ect-order-tip .ect-tip-copy .ect-tip-warning { color: var(--ect-ink); font-weight: 700; }
#ect-order-tip .ect-tip-warning strong { font-weight: 700; }
#ect-order-tip .ect-tip-warning .ect-tip-no { color: #c62828; font-weight: 800; }
#ect-order-tip .ect-tip-copy a { color: #765600; text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
#ect-order-tip .ect-tip-primary { display: inline-flex; justify-content: center; align-items: center; gap: 18px; width: 100%; min-height: 50px; margin: 11px 0 0; padding: 12px 20px; border: 1px solid var(--ect-gold); border-radius: 8px; background: var(--ect-gold); color: #171912; box-shadow: 0 3px 8px rgba(160,114,0,.13); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; transition: background .15s; }
#ect-order-tip .ect-tip-primary:hover { background: #e0a900; border-color: #e0a900; color: #171912; }
#ect-order-tip .ect-tip-secondary { display: block; width: 100%; min-height: 44px; margin: 7px 0 0; padding: 9px 0 0; border: 0; border-radius: 6px; background: transparent; color: #666b65; box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: center; text-transform: none; cursor: pointer; }
#ect-order-tip .ect-tip-secondary:hover { color: #20211f; text-decoration: underline; text-underline-offset: 3px; }
#ect-order-tip .ect-tip-close { position: absolute; top: 13px; right: 13px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0; padding: 0; border: 1px solid rgba(57,62,52,.13); border-radius: 50%; background: rgba(255,255,255,.95); color: #484d45; box-shadow: none; cursor: pointer; line-height: 1; }
#ect-order-tip .ect-tip-close:hover { color: #111; background: #fff; border-color: #adb0a8; }
#ect-order-tip a:focus-visible, #ect-order-tip button:focus-visible { outline: 3px solid #756000; outline-offset: 4px; }
#ect-order-tip svg { display: block; flex: 0 0 auto; max-width: none; margin: 0; }
#ect-order-tip .ect-tip-visual { display: flex; flex-direction: column; justify-content: center; padding: 70px 28px 48px; border-left: 1px solid #eeeade; border-radius: 0 21px 21px 0; background: radial-gradient(ellipse at 70% 20%,#fff8dd 0,transparent 60%),#f7f6f0; }
#ect-order-tip .ect-tip-visual-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 21px 3px; color: #7a7b6c; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
#ect-order-tip .ect-tip-tiny-line { width: 23px; height: 2px; background: #c79c16; }
#ect-order-tip .ect-tip-account { width: 100%; overflow: hidden; border: 1px solid #dedfd5; border-radius: 11px; background: #fff; box-shadow: 0 16px 32px rgba(50,48,24,.08); }
#ect-order-tip .ect-tip-account-header { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 13px 17px; border-bottom: 1px solid #e9ebe4; font-size: 13px; font-weight: 700; }
#ect-order-tip .ect-tip-account-icon { display: flex; align-items: center; color: #747e70; }
#ect-order-tip .ect-tip-account-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #c6cec0; box-shadow: -11px 0 0 #dfe3db; }
#ect-order-tip .ect-tip-account-body { display: grid; grid-template-columns: 42% 58%; min-height: 186px; }
#ect-order-tip .ect-tip-nav { padding: 19px 10px 14px 12px; border-right: 1px solid #edf0e9; color: #7b8277; font-size: 10px; }
#ect-order-tip .ect-tip-nav > span { display: flex; justify-content: space-between; align-items: center; min-height: 33px; padding: 7px 10px; border-radius: 4px; line-height: 1.4; }
#ect-order-tip .ect-tip-nav .ect-tip-nav-active { margin: 4px 0; background: #fff3c9; color: #594815; font-weight: 700; }
#ect-order-tip .ect-tip-order { padding: 23px 16px; }
#ect-order-tip .ect-tip-order-label { margin-bottom: 4px; color: #7a8274; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
#ect-order-tip .ect-tip-order-status { display: flex; align-items: center; gap: 5px; margin: 0 0 16px; color: #586750; font-size: 11px; }
#ect-order-tip .ect-tip-order-status i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #82a16f; }
#ect-order-tip .ect-tip-example-view { width: max-content; padding: 4px 10px; border: 1px solid #e7e9e0; border-radius: 4px; color: #7a8072; font-size: 8px; font-weight: 700; }
#ect-order-tip .ect-tip-example-cancel { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding: 11px 10px; border-radius: 5px; background: var(--ect-gold); color: #252511; box-shadow: 0 0 0 4px #fff5d2; font-size: 9px; font-weight: 750; white-space: nowrap; }
#ect-order-tip .ect-tip-callout { display: flex; align-items: flex-start; gap: 9px; margin: 22px 0 0 4px; color: #717967; font-size: 12px; line-height: 1.6; }
#ect-order-tip .ect-tip-callout strong { color: #4f5944; font-weight: 650; }
#ect-order-tip .ect-tip-callout-check { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e9eedd; color: #6a7e51; }
html.ect-order-tip-open { overflow: hidden !important; }
@keyframes ect-tip-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 740px) {
    #ect-order-tip { width: calc(100vw - 28px); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); border-radius: 17px; }
    #ect-order-tip .ect-tip-shell { display: flex; flex-direction: column; min-height: 0; }
    #ect-order-tip .ect-tip-content { padding: 30px 25px 23px; }
    #ect-order-tip .ect-tip-eyebrow { margin-bottom: 16px; padding-right: 20px; }
    #ect-order-tip #ect-order-tip-title { margin-bottom: 16px; font-size: 32px; }
    #ect-order-tip .ect-tip-copy p { font-size: 14px; margin-bottom: 12px; }
    #ect-order-tip .ect-tip-primary { margin-top: 7px; }
    #ect-order-tip .ect-tip-visual { padding: 20px 25px 22px; border-top: 1px solid #eeeade; border-left: 0; border-radius: 0 0 16px 16px; }
    #ect-order-tip .ect-tip-visual-heading { margin-bottom: 13px; }
    #ect-order-tip .ect-tip-account-header { min-height: 42px; padding: 8px 15px; font-size: 12px; }
    #ect-order-tip .ect-tip-account-body { min-height: 137px; }
    #ect-order-tip .ect-tip-nav { padding-top: 12px; padding-bottom: 9px; }
    #ect-order-tip .ect-tip-order { padding: 14px 15px; }
    #ect-order-tip .ect-tip-order-status { margin-bottom: 9px; }
    #ect-order-tip .ect-tip-example-view { display: none; }
    #ect-order-tip .ect-tip-callout { margin-top: 15px; font-size: 11px; }
    #ect-order-tip .ect-tip-callout br { display: none; }
    #ect-order-tip .ect-tip-close { position: sticky; top: 10px; right: auto; margin: 10px 10px -50px auto; }
}
@media (max-width: 350px) {
    #ect-order-tip .ect-tip-content { padding-left: 20px; padding-right: 20px; }
    #ect-order-tip #ect-order-tip-title { font-size: 28px; }
    #ect-order-tip .ect-tip-visual { padding-left: 16px; padding-right: 16px; }
    #ect-order-tip .ect-tip-nav { padding-left: 5px; padding-right: 5px; }
    #ect-order-tip .ect-tip-order { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #ect-order-tip[open] { animation: none; }
    #ect-order-tip .ect-tip-primary { transition: none; }
}
