.dumb-box
{
  border: solid white 1px;
    border-radius: 8px;
    padding: 2px;
    /* background: #14532D; */
    background: radial-gradient(1200px 600px at 80% 20%, rgb(255 74 198 / 12%), #4d262600 30%), radial-gradient(1200px 500px at -10% 20%, rgb(0 255 202 / 10%), transparent 30%), #084221;
    color: white;
}


/* ===== Base & Theme (all prefixed with .murphy-) ===== */
/* TERMINAL ███╗░░░███╗░█████╗░██╗███╗░░██╗ MURPHY */
/* TERMINAL ████╗░████║██╔══██╗██║████╗░██║ MURPHY */
/* TERMINAL ██╔████╔██║███████║██║██╔██╗██║ MURPHY */
/* TERMINAL ██║╚██╔╝██║██╔══██║██║██║╚████║ MURPHY */
/* TERMINAL ██║░╚═╝░██║██║░░██║██║██║░╚███║ MURPHY */
/* TERMINAL ╚═╝░░░░░╚═╝╚═╝░░╚═╝╚═╝╚═╝░░╚══╝ MURPHY */
:root {
      --murphy-bg: #0b0b0f;
      --murphy-bg-elev: #14141b;
      --murphy-text: #e6e6f0;
      --murphy-text-dim: white;
      --murphy-accent: #ff5c5cff;
      --murphy-accent-2: #00d3a7;
      --murphy-border: #262635;
      --murphy-radius: 16px;
      --murphy-gap: 14px;
      --murphy-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    html, body { height: 100%; }

    body.murphy-body {
      margin: 0;
      background: radial-gradient(1200px 600px at 80% 20%, rgba(124,92,255,.12), transparent 30%),
                  radial-gradient(1200px 500px at -10% 20%, rgba(0,211,167,.10), transparent 30%),
                  var(--murphy-bg);
      color: var(--murphy-text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font: inherit; }

    .murphy-container {
      width: min(100%, 1024px);
      margin-inline: auto;
      padding:0px 10px;
      /* padding-inline: 16px; //this make screen gose crazy */ 
    }

    /* ===== Navbar ===== */
    .murphy-navbar-wrap {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: saturate(140%) blur(10px);
      background: color-mix(in oklab, var(--murphy-bg-elev) 88%, transparent);
      border-bottom: 1px solid var(--murphy-border);
      box-shadow: 0 6px 16px rgba(0,0,0,.28);
    }
    
    .murphy-navbar {
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      gap: 8px; height: 56px;
      padding:0 16px;
    }
    .murphy-nav-left, .murphy-nav-center, .murphy-nav-right { display: flex; align-items: center; }
    .murphy-nav-left { justify-content: flex-start; }
    .murphy-nav-center { justify-content: center; }
    .murphy-nav-right { justify-content: flex-end; }

    .murphy-icon-btn {
      width: 38px; height: 38px; display: grid; place-items: center;
      border-radius: 999px; border: 0px solid var(--murphy-border);
      /* background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); */
      /* box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--murphy-shadow); */
      cursor: pointer;
      transition: transform .12s ease, border-color .2s ease, background .2s ease;
    }
    .murphy-icon-btn:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--murphy-accent) 30%, var(--murphy-border)); }
    .murphy-icon { width: 40px; height: 40px; fill:#A1A1AA; opacity: .9; }

    .murphy-title {
      font-weight: 700; letter-spacing: .3px; font-size: 14px; text-transform: uppercase;
      background: linear-gradient(90deg, var(--murphy-text), color-mix(in oklab, var(--murphy-text) 70%, var(--murphy-accent)));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* ===== Swiper (Hero Slider) ===== */
    .murphy-hero {
      margin: 14px 0 8px;
      /* border-radius: calc(var(--murphy-radius) + 2px); */
      overflow: hidden;
      border: 0px solid var(--murphy-border);
      box-shadow: var(--murphy-shadow);
    }
    .murphy-hero .swiper-slide {
      /* aspect-ratio: 16/9; //mobile-first, keeps height tidy */
      background: #0e0e14;
      position: relative;
    }
    .murphy-hero .murphy-slide-img {
      width: 100%;
       /* height: 100%; */
       object-fit: cover; filter: saturate(1.05) contrast(1.05);
    }
    .murphy-hero .murphy-slide-badge {
      position: absolute; inset: auto 12px 12px auto; padding: 6px 10px; border-radius: 999px;
      font-size: 12px; color: #0b0b0f; background: var(--murphy-accent);
      box-shadow: 0 4px 12px rgba(124,92,255,.5);
    }

    /* ===== Section Title ===== */
    .murphy-section-title {
      margin: 14px 2px 10px; font-size: 15px; font-weight: 600; color: var(--murphy-text-dim);
    }
    .murphy-section-title-home-page {
      margin: 14px 2px 10px; 
      /* font-size: 15px;  */
      font-weight: 600; 
      /* color: var(--murphy-text-dim); */
      text-align: center;
    }

    /* ===== 2x2 Grid (Cards) ===== */
    .murphy-grid {
        display: grid; gap: var(--murphy-gap);
        grid-template-columns: repeat(2, minmax(0,1fr));
        padding: 10px;
      
    }
    @media (min-width: 768px) {
      .murphy-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

   .murphy-card {
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        border: 1px solid var(--murphy-border);
        border-radius: var(--murphy-radius);
        overflow: hidden;
        box-shadow: var(--murphy-shadow);
        transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease;
    }


    .murphy-card {
    contain: layout paint;               /* isolates each card’s painting/layout */
    transform: translateZ(0);            /* stabilizes GPU rasterization */
    backface-visibility: hidden;
    will-change: transform;              /* hint without causing jumps */
    }



    .murphy-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--murphy-accent) 30%, var(--murphy-border)); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

    .murphy-card-media { aspect-ratio: 1/1; background: #101019; }
    .murphy-card-media img { width: 100%; height: 100%; object-fit: cover; }

    /* Position any child element perfectly centered inside a relative container */
    .murphy-center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* So clicks go through to buttons below if needed */
    }

    /* Make sure the parent is positioned relative */
    .murphy-card-media {
    position: relative;
    }

    .murphy-card-body { 
      padding: 10px 5px 10px 5px;
      display: flex; flex-direction: column; gap: 10px; }
    .murphy-card-title { font-weight: 600; font-size: 14px; color: var(--murphy-text); }
    .murphy-card-desc { font-size: 12px; line-height: 1.4; color: var(--murphy-text-dim); }

    .murphy-btn {
      width: 100%; border: 1px solid var(--murphy-border);
      background: linear-gradient(180deg, color-mix(in oklab, var(--murphy-accent) 24%, #1a1a26), #101019);
      color: var(--murphy-text); padding: 10px 12px; border-radius: 12px; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(124,92,255,.18);
      transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    }
    .murphy-btn:hover   { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,92,255,.28); }
    .murphy-btn:active  { transform: translateY(0); }

    .murphy-btn-home-page {
      width: 100%; border: 1px solid #3A041E;
      background:#3A041E;
      font-size: 15px;
      color: #FF709F; padding: 10px 0px; cursor: pointer;  
    }

    

    /* ===== Footer Placeholder ===== */
    .murphy-footer-placeholder { height: 80px; }

    /* ===== Utilities ===== */
    .murphy-sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    /* ==== Footer (centered, dark, .murphy- prefixed) ==== */
    .murphy-footer {
        margin-top: 24px;
        border-top: 1px solid var(--murphy-border);
        background: color-mix(in oklab, var(--murphy-bg-elev) 92%, transparent);
        }

        .murphy-footer-inner {
        width: min(100%, 1024px);
        margin-inline: auto;
        padding: 18px 16px 28px;
        display: grid;
        justify-items: center;
        gap: 12px;
        text-align: center;
        }

        /* Line 1: facebook + MUAN */
        .murphy-footer-social {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            /* padding: 6px 10px; */
            /* border-radius: 999px; */
            /* border: 1px solid var(--murphy-border); */
            /* background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); */
            /* box-shadow: inset 0 1px 0 rgba(255,255,255,.05); */
        }
        .murphy-footer-fb {
        width: 16px; height: 16px; fill: #1877F2; /* Facebook blue */
        }
        .murphy-footer-name {
        font-weight: 600; color: var(--murphy-text);
        letter-spacing: .2px;
        }

        /* Line 2: Terms button */
        .murphy-footer-terms {
        border: 0px solid var(--murphy-border);
        background: linear-gradient(180deg, #1a1a26, #101019);
        color: var(--murphy-text);
        /* padding: 8px 12px; */
        /* border-radius: 12px; */
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        /* box-shadow: inset 0 1px 0 rgba(255,255,255,.06); */
        transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .murphy-footer-terms:hover {
        transform: translateY(-1px);
        /* box-shadow: 0 8px 18px rgba(124,92,255,.24); */
        /* border-color: color-mix(in oklab, var(--murphy-accent) 30%, var(--murphy-border)); */
        }

        /* Line 3: brand image already centered by grid; no extra styles needed */

        .murphy-footer-copy {
        color: var(--murphy-text-dim);
        font-size: 12px;
        letter-spacing: .2px;
        }
/* TERMINAL ███████╗███╗░░██╗██████╗░░░░░░░███╗░░░███╗░█████╗░██╗███╗░░██╗ */
/* TERMINAL ██╔════╝████╗░██║██╔══██╗░░░░░░████╗░████║██╔══██╗██║████╗░██║ */
/* TERMINAL █████╗░░██╔██╗██║██║░░██║█████╗██╔████╔██║███████║██║██╔██╗██║ */
/* TERMINAL ██╔══╝░░██║╚████║██║░░██║╚════╝██║╚██╔╝██║██╔══██║██║██║╚████║ */
/* TERMINAL ███████╗██║░╚███║██████╔╝░░░░░░██║░╚═╝░██║██║░░██║██║██║░╚███║ */
/* TERMINAL ╚══════╝╚═╝░░╚══╝╚═════╝░░░░░░░╚═╝░░░░░╚═╝╚═╝░░╚═╝╚═╝╚═╝░░╚══╝ */


            
/* TERMINAL ███╗░░░███╗░█████╗░██████╗░░█████╗░██╗░░░░░ */
/* TERMINAL ████╗░████║██╔══██╗██╔══██╗██╔══██╗██║░░░░░ */
/* TERMINAL ██╔████╔██║██║░░██║██║░░██║███████║██║░░░░░ */
/* TERMINAL ██║╚██╔╝██║██║░░██║██║░░██║██╔══██║██║░░░░░ */
/* TERMINAL ██║░╚═╝░██║╚█████╔╝██████╔╝██║░░██║███████╗ */
/* TERMINAL ╚═╝░░░░░╚═╝░╚════╝░╚═════╝░╚═╝░░╚═╝╚══════╝ */

/* Shell */
            .murphy-modal-overlay {
                position: fixed; inset: 0; display: none;
                place-items: center; z-index: 1000;
                background: rgba(8, 8, 12, .65);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            .murphy-modal-overlay.murphy-show { display: grid; animation: murphyFade .16s ease-out; }
            @keyframes murphyFade { from {opacity:0} to {opacity:1} }

            .murphy-modal,.alert-murphy-modal {
                width: min(92vw, 420px);
                /* background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); */
                background: linear-gradient(180deg, #18181B, #18181B);
                border: 1px solid var(--murphy-border, #262635);
                border-radius: var(--murphy-radius, 16px);
                box-shadow: 0 20px 60px rgba(0,0,0,.55);
                color: var(--murphy-text, #e6e6f0);
                overflow: clip;
                transform: translateY(8px) scale(.98);
                opacity: 0;
                animation: murphyPop .18s ease-out forwards;
                
            }

            .success-murphy-modal
            { 
                width: min(92vw, 420px);
                /* background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); */
                background: linear-gradient(180deg, #18181B, #18181B);
                border: 1px solid var(--murphy-border, #262635);
                border-radius: var(--murphy-radius, 16px);
                box-shadow: 0 20px 60px rgba(0,0,0,.55);
                color: var(--murphy-text, #e6e6f0);
                overflow: clip;
                transform: translateY(8px) scale(.98);
                opacity: 0;
                animation: murphyPop .18s ease-out forwards;
            }
            @keyframes murphyPop {
                to { transform: translateY(0) scale(1); opacity: 1; }
            }

            .murphy-modal-header { padding: 16px 18px 6px; }
            .murphy-modal-title {
                margin: 0;
                font-size: 16px; font-weight: 700; letter-spacing: .3px;
                background: linear-gradient(90deg, var(--murphy-text, #e6e6f0), #b9b9c6 70%);
                -webkit-background-clip: text; background-clip: text; color: transparent;
            }
            .murphy-modal-body { padding: 8px 18px 14px; color: var(--murphy-text-dim, #b9b9c6); font-size: 14px; }
            .murphy-modal-actions {
                padding: 14px 18px 18px; display: flex; gap: 10px; justify-content: flex-end;
                border-top: 1px solid var(--murphy-border, #262635);
            }

            .murphy-modal-actions-center {
                padding: 14px 18px 18px; display: flex; gap: 10px; justify-content: center;
                border-top: 1px solid var(--murphy-border, #262635);
            }

            /* Inputs */
            .murphy-field {
                display: grid; gap: 8px; margin-top: 10px;
            }
            .murphy-input {
                width: 100%;
                border: 1px solid var(--murphy-border, #262635);
                background: #101019;
                color: var(--murphy-text, #e6e6f0);
                padding: 12px 14px; border-radius: 12px;
                outline: none;
                transition: border-color .2s ease, box-shadow .2s ease;
                font-size: 16px; letter-spacing: .4px;
            }
            .murphy-input:focus {
                border-color: color-mix(in oklab, var(--murphy-accent, #7c5cff) 50%, #262635);
                box-shadow: 0 0 0 4px rgba(124,92,255,.16);
            }
            .murphy-input::-webkit-outer-spin-button,
            .murphy-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

            .murphy-help { font-size: 12px; color: var(--murphy-text-dim, #b9b9c6); }
            .murphy-error { color: #ff6b6b; font-size: 12px; min-height: 16px; margin-top: 4px; }

            /* Buttons (reuse your tone) */
            .murphy-btn-ghost, .murphy-btn-primary {
                appearance: none; border-radius: 12px; padding: 10px 14px; cursor: pointer;
                font-weight: 700; letter-spacing: .2px; font-size: 14px;
            }
            .murphy-btn-ghost {
                border: 1px solid var(--murphy-border, #262635);
                background: linear-gradient(180deg, #1a1a26, #101019);
                color: var(--murphy-text, #e6e6f0);
            }
            .murphy-btn-primary {
                border: 1px solid color-mix(in oklab, var(--murphy-accent, #7c5cff) 40%, var(--murphy-border, #262635));
                background: linear-gradient(180deg, color-mix(in oklab, var(--murphy-accent, #7c5cff) 30%, #1a1a26), #101019);
                color: var(--murphy-text, #e6e6f0);
                box-shadow: 0 8px 18px rgba(124,92,255,.25), inset 0 1px 0 rgba(255,255,255,.08);
            }
            .murphy-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

            /* Loading modal */
            .murphy-loading-wrap {
                display: grid; place-items: center; gap: 12px; padding: 22px 0 8px; color: var(--murphy-text-dim, #b9b9c6);
            }
            .murphy-spinner {
                width: 36px; height: 36px; border: 3px solid #2a2a38; border-top-color: var(--murphy-accent, #7c5cff);
                border-radius: 50%; animation: murphySpin .9s linear infinite;
            }
            @keyframes murphySpin { to { transform: rotate(360deg); } }

            /* Focus trap hint */
            .murphy-sr-only { position: absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
            /* 6-digit code input layout */
        .murphy-code-field {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 14px 0;
        }

        .murphy-code-input {
        width: 42px;
        height: 48px;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: var(--murphy-text, #e6e6f0);
        background: #101019;
        border: 1px solid var(--murphy-border, #262635);
        border-radius: 10px;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease;
        }
        .murphy-code-input:focus {
        border-color: color-mix(in oklab, var(--murphy-accent, #7c5cff) 50%, #262635);
        box-shadow: 0 0 0 3px rgba(124,92,255,.18);
        }
        .murphy-code-input::-webkit-outer-spin-button,
        .murphy-code-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }



.murphy-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.murphy-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;min-width:320px;max-width:92vw;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);}
.murphy-modal__title{margin:0 0 6px;font-weight:800;}
.murphy-modal__text{margin:0 0 14px;color:#555;}
.murphy-modal__actions{display:flex;gap:10px;justify-content:flex-end;}


/* TERMINAL ███████╗███╗░░██╗██████╗░░░░░░░███╗░░░███╗░█████╗░██████╗░░█████╗░██╗░░░░░ */
/* TERMINAL ██╔════╝████╗░██║██╔══██╗░░░░░░████╗░████║██╔══██╗██╔══██╗██╔══██╗██║░░░░░ */
/* TERMINAL █████╗░░██╔██╗██║██║░░██║█████╗██╔████╔██║██║░░██║██║░░██║███████║██║░░░░░ */
/* TERMINAL ██╔══╝░░██║╚████║██║░░██║╚════╝██║╚██╔╝██║██║░░██║██║░░██║██╔══██║██║░░░░░ */
/* TERMINAL ███████╗██║░╚███║██████╔╝░░░░░░██║░╚═╝░██║╚█████╔╝██████╔╝██║░░██║███████╗ */
/* TERMINAL ╚══════╝╚═╝░░╚══╝╚═════╝░░░░░░░╚═╝░░░░░╚═╝░╚════╝░╚═════╝░╚═╝░░╚═╝╚══════╝ */
 

 /* TERMINAL ██████╗░██████╗░███████╗░█████╗░██████╗░░█████╗░██████╗░██╗░░░██╗███╗░░░███╗██████╗░░░░░░░░██████╗███████╗░█████╗░████████╗██╗ */
 /* TERMINAL ██╔══██╗██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║░░░██║████╗░████║██╔══██╗░░░░░░██╔════╝██╔════╝██╔══██╗╚══██╔══╝██║ */
 /* TERMINAL ██████╦╝██████╔╝█████╗░░███████║██║░░██║██║░░╚═╝██████╔╝██║░░░██║██╔████╔██║██████╦╝█████╗╚█████╗░█████╗░░██║░░╚═╝░░░██║░░░██║ */
 /* TERMINAL ██╔══██╗██╔══██╗██╔══╝░░██╔══██║██║░░██║██║░░██╗██╔══██╗██║░░░██║██║╚██╔╝██║██╔══██╗╚════╝░╚═══██╗██╔══╝░░██║░░██╗░░░██║░░░██║ */
 /* TERMINAL ██████╦╝██║░░██║███████╗██║░░██║██████╔╝╚█████╔╝██║░░██║╚██████╔╝██║░╚═╝░██║██████╦╝░░░░░░██████╔╝███████╗╚█████╔╝░░░██║░░░██║ */
 /* TERMINAL ╚═════╝░╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝╚═════╝░░╚════╝░╚═╝░░╚═╝░╚═════╝░╚═╝░░░░░╚═╝╚═════╝░░░░░░░╚═════╝░╚══════╝░╚════╝░░░░╚═╝░░░╚═╝ */

    /* ===== Breadcrumb ===== */
.murphy-breadcrumb {
  border-bottom: 1px solid var(--murphy-border, #262635);
  /* background: color-mix(in oklab, var(--murphy-bg-elev, #14141b) 94%, transparent); */
  padding: 0px 0;
}
.murphy-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--murphy-text-dim, #b9b9c6);
  font-size: 14px;
}
.murphy-breadcrumb-home,
.murphy-breadcrumb-arrow {
  flex-shrink: 0;
  display: block;
}
.murphy-breadcrumb-current {
  font-weight: 600;
  color: var(--murphy-text, #e6e6f0);
}

/* ===== Vote List ===== */
.murphy-vote-list {
  padding: 2px  10px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.murphy-vote-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--murphy-border, #262635);
  border-radius: var(--murphy-radius, 16px);
  overflow: hidden;
  box-shadow: var(--murphy-shadow, 0 10px 30px rgba(0,0,0,.35));
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin-inline: auto;
}
.murphy-vote-media {
  width: 100%;
 
  background: #101019;
}
.murphy-vote-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.murphy-vote-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.murphy-vote-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--murphy-text, #e6e6f0);
}
.murphy-vote-desc {
  margin: 0;
  font-size: 13px;
  color: var(--murphy-text-dim, #b9b9c6);
  line-height: 1.4;
}
.murphy-vote-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 0;
  border: 1px solid var(--murphy-border, #262635);
  /* background: linear-gradient(180deg, color-mix(in oklab, var(--murphy-accent, #7c5cff) 24%, #1a1a26), #101019); */
  color: black;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(124,92,255,.18);
}
.murphy-vote-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124,92,255,.28);
}
 /* TERMINAL ███████╗███╗░░██╗██████╗░░░░░░░██████╗░██████╗░███████╗░█████╗░██████╗░░█████╗░██████╗░██╗░░░██╗███╗░░░███╗██████╗░░░░░░░░██████╗ */
 /* TERMINAL ██╔════╝████╗░██║██╔══██╗░░░░░░██╔══██╗██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║░░░██║████╗░████║██╔══██╗░░░░░░██╔════╝ */
 /* TERMINAL █████╗░░██╔██╗██║██║░░██║█████╗██████╦╝██████╔╝█████╗░░███████║██║░░██║██║░░╚═╝██████╔╝██║░░░██║██╔████╔██║██████╦╝█████╗╚█████╗░ */
 /* TERMINAL ██╔══╝░░██║╚████║██║░░██║╚════╝██╔══██╗██╔══██╗██╔══╝░░██╔══██║██║░░██║██║░░██╗██╔══██╗██║░░░██║██║╚██╔╝██║██╔══██╗╚════╝░╚═══██╗ */
 /* TERMINAL ███████╗██║░╚███║██████╔╝░░░░░░██████╦╝██║░░██║███████╗██║░░██║██████╔╝╚█████╔╝██║░░██║╚██████╔╝██║░╚═╝░██║██████╦╝░░░░░░██████╔╝ */
 /* TERMINAL ╚══════╝╚═╝░░╚══╝╚═════╝░░░░░░░╚═════╝░╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝╚═════╝░░╚════╝░╚═╝░░╚═╝░╚═════╝░╚═╝░░░░░╚═╝╚═════╝░░░░░░░╚═════╝░ */


 /* TERMINAL █▀ █▀▀ █▀▀ ▀█▀ █ █▀█ █▄░█ ▄▄ ▄█ ▀ ▄▄ █░█ █▀▀ █▀█ █▀█ ▄▄ █░█░█ █ ▀█▀ █░█ ▄▄ █ █▀▄▀█ ▄▀█ █▀▀ █▀▀ ▄▄ ▄█▄ ▄▄ █▄▄ █▀█ ▀█▀ ▀█▀ █▀█ █▀▄▀█ */
 /* TERMINAL ▄█ ██▄ █▄▄ ░█░ █ █▄█ █░▀█ ░░ ░█ ▄ ░░ █▀█ ██▄ █▀▄ █▄█ ░░ ▀▄▀▄▀ █ ░█░ █▀█ ░░ █ █░▀░█ █▀█ █▄█ ██▄ ░░ ░▀░ ░░ █▄█ █▄█ ░█░ ░█░ █▄█ █░▀░█ */


    .murphy-artist-hero{position:relative;border-bottom:1px solid var(--murphy-border)}
    .murphy-artist-hero-media{
     
      position:relative;overflow:hidden}
    .murphy-artist-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}

      .murphy-artist-hero-mediax{
     
      position:relative;overflow:hidden}
    .murphy-artist-hero-mediax img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
    .murphy-artist-hero-gradient{position:absolute;inset:auto 0 0 0;height:26%;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.82) 100%)}
    .murphy-artist-hero-caption{position:absolute;left:16px;right:16px;bottom:12px;display:flex;flex-direction:column;gap:4px}
    .murphy-artist-name{font-weight:800;font-size:20px;letter-spacing:.2px}
    .murphy-artist-sub{font-size:13px;color:var(--murphy-text-dim)}

    /* ===== Section 2: Center title + name + long description ===== */
    .murphy-artist-header{padding:18px 0 8px;text-align:center}
    .murphy-artist-header .murphy-section-title{margin:0;font-weight:800;font-size:18px}
    .murphy-artist-bio{padding:10px 0 18px}
    .murphy-artist-bio .murphy-bio-name{margin:0 0 6px 0;font-weight:700;font-size:16px;}
    .murphy-bio-name{
      margin:20px auto;
    }
    .murphy-artist-bio .murphy-bio-text{margin:-20px auto;color:var(--murphy-text-dim);font-size:14px;line-height:1.7;max-width:70ch;white-space:pre-wrap}

    /* ===== Section 3: Tracks (Spotify embed) ===== */
    .murphy-artist-tracks{padding:10px 0 20px}
    /* .murphy-embed-wrap{border:1px solid var(--murphy-border);border-radius:12px;overflow:hidden;box-shadow:var(--murphy-shadow);background:#101019} */
    .murphy-embed-aspect{position:relative;aspect-ratio:16/9}
    .murphy-embed-aspect iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

    /* ===== Section 4: (optional extra content slot) ===== */
    .murphy-extra{display:none}

    /* ===== Section 5: Full-width vote CTA ===== */
    .murphy-vote-cta{padding:16px 0 32px}
    .murphy-vote-btn{
            display:block;
            width:100%;
            padding:14px 16px;
            border-radius:14px;
            border:1px solid var(--murphy-border);
            background:white, (#101019);
            /* background: linear-gradient(180deg, color-mix(in oklab, var(--murphy-accent, #7c5cff) 24%, #1a1a26), #101019); */
            color:black;font-weight:800;letter-spacing:.3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(124,92,255,.18);cursor:pointer;transition:transform .12s ease, box-shadow .2s ease}
    .murphy-vote-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,92,255,.28)}

    /* Optional fixed-bottom variant for mobile */
    @media (max-width: 640px){
      .murphy-vote-cta-fixed{position:sticky;bottom:0;background:linear-gradient(180deg, transparent, rgba(0,0,0,.25) 40%, rgba(0,0,0,.45));backdrop-filter:saturate(130%) blur(6px);padding:12px 16px 16px;margin:0;border-top:1px solid var(--murphy-border)}
    }
    
 /* TERMINAL█▀▀ █▄░█ █▀▄ ▄▄ █▀ █▀▀ █▀▀ ▀█▀ █ █▀█ █▄░█ ▄▄ ▄█ ▀ ▄▄ █░█ █▀▀ █▀█ █▀█ ▄▄ █░█░█ █ ▀█▀ █░█ ▄▄ █ █▀▄▀█ ▄▀█ █▀▀ █▀▀ ▄▄ ▄█▄ ▄▄ █▄▄ █▀█ */
 /* TERMINAL██▄ █░▀█ █▄▀ ░░ ▄█ ██▄ █▄▄ ░█░ █ █▄█ █░▀█ ░░ ░█ ▄ ░░ █▀█ ██▄ █▀▄ █▄█ ░░ ▀▄▀▄▀ █ ░█░ █▀█ ░░ █ █░▀░█ █▀█ █▄█ ██▄ ░░ ░▀░ ░░ █▄█ █▄█ */



 /* TERMINAL██╗░░██╗██╗░██████╗████████╗░█████╗░██████╗░██╗░░░██╗░░░░░░██╗░░░░░██╗░██████╗████████╗*/
 /* TERMINAL██║░░██║██║██╔════╝╚══██╔══╝██╔══██╗██╔══██╗╚██╗░██╔╝░░░░░░██║░░░░░██║██╔════╝╚══██╔══╝*/
 /* TERMINAL███████║██║╚█████╗░░░░██║░░░██║░░██║██████╔╝░╚████╔╝░█████╗██║░░░░░██║╚█████╗░░░░██║░░░*/
 /* TERMINAL██╔══██║██║░╚═══██╗░░░██║░░░██║░░██║██╔══██╗░░╚██╔╝░░╚════╝██║░░░░░██║░╚═══██╗░░░██║░░░*/
 /* TERMINAL██║░░██║██║██████╔╝░░░██║░░░╚█████╔╝██║░░██║░░░██║░░░░░░░░░███████╗██║██████╔╝░░░██║░░░*/
 /* TERMINAL╚═╝░░╚═╝╚═╝╚═════╝░░░░╚═╝░░░░╚════╝░╚═╝░░╚═╝░░░╚═╝░░░░░░░░░╚══════╝╚═╝╚═════╝░░░░╚═╝░░░*/

  .murphy-container{width:min(100%,1024px);margin-inline:auto;padding:16px}

  /* ===== Part 1: Profile Card ===== */
  .murphy-profile-card{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid var(--murphy-border); border-radius:var(--murphy-radius);
    box-shadow:var(--murphy-shadow); padding:14px;
  }
  .murphy-profile-grid{
    display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  }
  .murphy-avatar{
    width:72px; height:72px; border-radius:999px; overflow:hidden; border:1px solid var(--murphy-border);
    background:#101019; flex:0 0 auto;
  }
  .murphy-avatar img{width:100%;height:100%;object-fit:cover}
  .murphy-profile-info{
    display:flex; 
    /* flex-direction:column;  */
    justify-content: end;
    gap:8px;
  }
  .murphy-phone{
    display:flex; 
    justify-content: end;
    align-items:center; gap:8px; color:var(--murphy-text);
    font-weight:700; letter-spacing:.2px;
    padding-right:11px;
  }
  .murphy-phone svg{width:18px;height:18px;display:block}
  .murphy-logout{
    width:fit-content; padding:8px 12px; border-radius:12px; cursor:pointer;
    border:1px solid var(--murphy-border);
    background:linear-gradient(180deg,#1a1a26,#101019);
    color:var(--murphy-text); font-weight:700; letter-spacing:.2px;
    transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .murphy-logout:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(124,92,255,.24);
    border-color:color-mix(in oklab, var(--murphy-accent) 30%, var(--murphy-border));
  }

  /* ===== Part 2: Voting History ===== */
  .murphy-history{
    margin-top:18px; display:flex; flex-direction:column; gap:10px;
  }
  .murphy-history-row{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:12px; border:1px solid var(--murphy-border); border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  }
  .murphy-h-left, .murphy-h-right{display:flex; flex-direction:column; gap:4px}
  .murphy-h-phone{font-weight:700; color:var(--murphy-text)}
  .murphy-h-datetime{font-size:12px; color:var(--murphy-text-dim)}
  .murphy-h-artist{font-weight:700; color:var(--murphy-text); text-align:right}
  .murphy-h-aka{font-size:12px; color:var(--murphy-text-dim); text-align:right}

  /* Stack the two columns on very narrow screens if needed */
  @media (max-width: 360px){
    .murphy-history-row{grid-template-columns:1fr}
    .murphy-h-artist, .murphy-h-aka{text-align:left}
  }

  /* ===== Part 3: Pagination ===== */
  .murphy-pagination{
    margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 0 24px;
  }
  .murphy-page-btn{
    min-width:42px; height:38px; padding:0 10px; border-radius:10px; cursor:pointer;
    border:1px solid var(--murphy-border);
    background:linear-gradient(180deg,#1a1a26,#101019);
    color:var(--murphy-text); font-weight:800; letter-spacing:.2px;
    transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .murphy-page-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(124,92,255,.24);
    border-color:color-mix(in oklab, var(--murphy-accent) 30%, var(--murphy-border));
  }
    .murphy-page-status{min-width:64px; text-align:center; color:var(--murphy-text-dim); font-weight:700}



/*TERMINAL███████╗███╗░░██╗██████╗░░░░░░░██╗░░██╗██╗░██████╗████████╗░█████╗░██████╗░██╗░░░██╗░░░░░░██╗░░░░░██╗░██████╗████████╗ */
/*TERMINAL██╔════╝████╗░██║██╔══██╗░░░░░░██║░░██║██║██╔════╝╚══██╔══╝██╔══██╗██╔══██╗╚██╗░██╔╝░░░░░░██║░░░░░██║██╔════╝╚══██╔══╝ */
/*TERMINAL█████╗░░██╔██╗██║██║░░██║█████╗███████║██║╚█████╗░░░░██║░░░██║░░██║██████╔╝░╚████╔╝░█████╗██║░░░░░██║╚█████╗░░░░██║░░░ */
/*TERMINAL██╔══╝░░██║╚████║██║░░██║╚════╝██╔══██║██║░╚═══██╗░░░██║░░░██║░░██║██╔══██╗░░╚██╔╝░░╚════╝██║░░░░░██║░╚═══██╗░░░██║░░░ */
/*TERMINAL███████╗██║░╚███║██████╔╝░░░░░░██║░░██║██║██████╔╝░░░██║░░░╚█████╔╝██║░░██║░░░██║░░░░░░░░░███████╗██║██████╔╝░░░██║░░░ */
/*TERMINAL╚══════╝╚═╝░░╚══╝╚═════╝░░░░░░░╚═╝░░╚═╝╚═╝╚═════╝░░░░╚═╝░░░░╚════╝░╚═╝░░╚═╝░░░╚═╝░░░░░░░░░╚══════╝╚═╝╚═════╝░░░░╚═╝░░░ */






input::placeholder {
    font-family: 'noto_san_lao_light';
    font-size: 14px;        /* optional */
    color: #999;           /* optional */
    opacity: 1;            /* ensure consistent placeholder styling */
}

input.noto_san_lao_light::placeholder {
    font-family: 'noto_san_lao_light';
}