/* QuestPick Premium 4.0: native-feeling mobile layouts and layered cards. */
:root{--pn4-sky:#c973f1;--pn4-ink:#1f0a29;--pn4-edge:rgba(206,128,242,.21)}
#app{min-width:0}.pn4-hero,.pn4-audit-card,.pn4-journeyhero{background:radial-gradient(ellipse at 100% 0%,rgba(185,74,237,.18),transparent 65%),linear-gradient(135deg,#391649,#260f30);border:1px solid var(--pn4-edge);box-shadow:0 14px 45px #10041677,inset 0 1px #ffffff12}
.pn4-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:25px 27px;overflow:hidden}
.pn4-hero>svg{width:68px;height:68px;color:#c261ef;opacity:.75;flex-shrink:0}
.pn4-hero h2{margin:7px 0 9px;font-size:clamp(23px,3.7vw,33px);letter-spacing:-.6px}
.pn4-hero p{color:#caacd8;font-size:13px;line-height:1.65;margin:0;max-width:540px}
.pn4-kicker,.pn4-overline{font-size:10px;color:#ce80f2;letter-spacing:1.6px;font-weight:850}
.pn4-progressring{--p:0%;width:105px;height:105px;flex-shrink:0;border-radius:50%;background:conic-gradient(#bf58ee 0 var(--p),#462456 var(--p) 100%);display:grid;place-items:center;box-shadow:0 0 28px #bc4fee17}.pn4-progressring:before{content:'';grid-area:1/1;width:83px;height:83px;border-radius:50%;background:#281033}.pn4-progressring span{grid-area:1/1;z-index:1;font-weight:850;font-size:22px}
.pn4-microstats,.pn4-panelbottom,.pn4-paneltitle,.pn4-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pn4-microstats{font-size:11px;color:#c6a2d6;margin:12px 2px 18px}.pn4-paneltitle{color:#f4e3fc;font-size:15px;font-weight:800;margin-bottom:17px}.pn4-paneltitle svg{color:#c56cef;vertical-align:middle;width:19px;height:19px;margin-right:5px}.pn4-paneltitle span{font-weight:500;color:#b78dcb;font-size:11px}.pn4-paneltitle>b{color:#cb79f2;font-weight:850}
.pn4-toolbar,.pn4-filtergrid,.pn4-stats-grid,.pn4-journeygrid,.pn4-hubcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:15px 0}
.pn4-toolbar>input,.pn4-toolbar>select,.pn4-vault-target+form input,.pn4-vault-target+form textarea,#pn4-vault-game-search{width:100%;min-width:0;background:#230c2e;border:1px solid #70408690;border-radius:12px;padding:12px;color:#f4e3fc}
.pn4-filtergrid .pn4-span,.pn4-span{grid-column:1/-1}
.pn4-draw-panel .pn4-panelbottom{margin:20px 0 12px}.pn4-toggle{display:flex;align-items:center;gap:10px;color:#dcbfe9;font-size:13px;line-height:1.5}.pn4-toggle input{accent-color:#c15fef;width:17px;height:17px}
.pn4-audit-card{display:grid;grid-template-columns:135px minmax(0,1fr);align-items:center;gap:23px;margin-top:17px;padding:22px}.pn4-audit-card .cover{width:100%;max-width:140px;aspect-ratio:2/3;min-height:0}.pn4-audit-card .cover img{object-fit:contain}.pn4-audit-summary{min-width:0}.pn4-audit-summary h2{overflow-wrap:anywhere;margin:7px 0;font-size:clamp(19px,3vw,28px)}.pn4-audit-summary p{color:#c8a4d9;font-size:13px;line-height:1.5}
.pn4-audit-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}.pn4-audit-options button{border-radius:12px;border:1px solid #c371e845;min-height:55px;padding:12px 9px;color:#f4e3fc;background:linear-gradient(145deg,#3e1b4e,#30163c);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:750;transition:.18s}.pn4-audit-options button:hover{border-color:#c871f1}.pn4-audit-options button:active{transform:scale(.97)}.pn4-audit-options svg{width:17px;height:17px;flex:none;color:#c77beb}
.pn4-progressring+.btn{max-width:fit-content}.pn4-journeyhero{justify-content:flex-start;gap:21px}.pn4-journeyhero .cover{width:118px;max-width:30%;aspect-ratio:2/3;flex-shrink:0}.pn4-journeyhero h2{overflow-wrap:anywhere}.pn4-journeygrid{margin-top:17px}.pn4-journeygrid>.panel{min-width:0}.pn4-journeygrid input[type=range]{padding:0;accent-color:#c160ee;background:none;min-height:36px}.pn4-journeygrid small{display:block;color:#aa7fbe;line-height:1.55;margin-top:7px}.pn4-gradientbar{height:11px;border-radius:20px;background:#3e1c4e;overflow:hidden;margin:15px 0}.pn4-gradientbar>span{height:100%;display:block;background:linear-gradient(90deg,#cb78f2,#c15fef);border-radius:inherit;transition:width .35s ease;box-shadow:0 0 18px #bc50ee88}.pn4-noteform{margin-top:12px}.pn4-timeline{padding:9px 22px}.pn4-event{display:flex;gap:14px;position:relative;padding:18px 0;border-bottom:1px solid #ffffff13}.pn4-event:last-child{border-bottom:0}.pn4-event i{width:11px;height:11px;border-radius:50%;background:#c26bea;box-shadow:0 0 18px #c66bf0;flex:none;margin-top:8px}.pn4-event small{color:#b784ce;font-size:11px}.pn4-event p{line-height:1.6;font-size:14px;margin:5px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.pn4-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0}.pn4-stats-grid>.panel{padding:19px 16px;min-width:0}.pn4-stats-grid small{display:block;line-height:1.4;color:#b98ecd;font-size:11px}.pn4-stats-grid b{font-size:clamp(17px,2vw,27px);display:block;margin-top:9px;overflow-wrap:anywhere}.pn4-graph{height:158px;display:flex;gap:9px;align-items:flex-end;margin-top:15px}.pn4-graph-col{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;align-items:center;gap:8px;justify-content:flex-end}.pn4-graph-col small{font-size:9px;color:#bf94d2;overflow:hidden;white-space:nowrap;text-overflow:clip}.pn4-pair{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:120px;border-bottom:1px solid #733f8b80}.pn4-pair i{display:block;width:43%;max-width:18px;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#c262ef,#9e44c8);transition:height .4s}.pn4-pair i:nth-child(2){background:linear-gradient(180deg,#c790f4,#924db2)}.pn4-chartlegend{display:flex;gap:17px;color:#c597da;font-size:11px}.pn4-chartlegend span:first-child{color:#c973f1}.pn4-chartlegend span:nth-child(2){color:#e1b2f7}
.pn4-moneybars{display:grid;gap:12px;margin-top:17px}.pn4-moneyrow{display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:9px}.pn4-moneyrow small{font-size:11px;color:#d6b6e5}.pn4-moneyrow>div{height:12px;border-radius:18px;background:#422152;overflow:hidden}.pn4-moneyrow i{display:block;height:100%;border-radius:18px;background:linear-gradient(90deg,#bf6ae6,#c66def)}.pn4-moneyrow b{font-size:11px;white-space:nowrap;color:#f3e3fb}.pn4-line{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ffffff17;padding:11px 0;font-size:13px}.pn4-line:last-child{border:0}.pn4-line span{min-width:0;overflow-wrap:anywhere}.pn4-line b{white-space:nowrap;color:#ce7ff2}
.pn4-hubcards{margin-top:16px}.pn4-hubcard{text-align:left;display:flex;align-items:center;gap:14px;color:#f4e3fc;min-width:0;cursor:pointer;transition:transform .2s,border .2s}.pn4-hubcard:hover{transform:translateY(-2px);border-color:#bf61ea80}.pn4-hubcard>span>svg{width:30px;height:30px;color:#c779eb}.pn4-hubcard>div{flex:1;min-width:0}.pn4-hubcard b,.pn4-hubcard small{display:block}.pn4-hubcard b{font-size:14px;line-height:1.4}.pn4-hubcard small{color:#bb95cd;font-size:11px;margin-top:4px}.pn4-hubcard>svg{width:18px;height:18px;color:#c77cea}
.pn4-homepanel{margin-top:16px}.pn4-tilelinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}.pn4-tilelinks button{border:1px solid #c36fea3b;background:#351743;border-radius:12px;color:#f4e2fc;padding:12px 7px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:750}.pn4-tilelinks button svg{width:17px;height:17px;color:#bd62e7}.pn4-tilelinks button:active{transform:scale(.98)}
.pn4-picks{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.pn4-picks button{background:#371745;border:1px solid #874aa366;color:#efd5fb;border-radius:9px;padding:9px 12px;text-align:left;font-size:12px}.pn4-vault-target{display:flex;align-items:center;gap:14px;padding:14px;margin:15px 0;background:#21092d;border-radius:14px;border:1px solid #9741bf5e}.pn4-vault-target .cover{width:60px;aspect-ratio:2/3}.pn4-vault-target>div{min-width:0;flex:1}.pn4-vault-target p{margin:4px 0;color:#b38bc5;font-size:11px}.pn4-memorygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pn4-memory{padding:13px;min-width:0;display:flex;flex-direction:column;gap:7px}.pn4-memory>img,.pn4-placeholder{width:100%;aspect-ratio:4/3;object-fit:contain;background:#210c2b;border-radius:12px;border:1px solid #8b47ab3b}.pn4-placeholder{display:grid;place-items:center}.pn4-placeholder svg{width:30px;height:30px;color:#bd55ed}.pn4-memory strong{overflow-wrap:anywhere;font-size:13px}.pn4-memory>small,.pn4-memory-title{color:#c5a3d6;font-size:12px;line-height:1.45;overflow-wrap:anywhere}.pn4-memory-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:auto;font-size:11px;color:#aa7ebf}.pn4-memory-bottom button{border:1px solid #9663ad45;border-radius:8px;background:#331442;color:#fff;width:33px;height:33px;display:grid;place-items:center}.pn4-memory-bottom svg{width:14px;height:14px}
.pn4-callout,.pn4-connection{background:#2e103c;border:1px solid #a65ac953;color:#cba8db;padding:16px;border-radius:13px;font-size:12px;line-height:1.7;margin:16px 0}.pn4-callout svg{width:16px;height:16px;vertical-align:middle;color:#be6be5}.pn4-connection{margin-top:8px}.pn4-connection b{color:#c67be9}.pn4-quick{margin-top:16px;display:flex;align-items:center;gap:12px}.pn4-quick>svg{width:26px;height:26px;color:#c673ec}.pn4-quick .btn{margin-left:auto}.pn4-actions{justify-content:flex-start;margin:16px 0}.pn4-audit-options button:focus-visible,.pn4-hubcard:focus-visible,.pn4-tilelinks button:focus-visible{outline:2px solid #cf82f3;outline-offset:2px}
.pn4-match{display:flex;gap:12px;align-items:center;border-bottom:1px solid #7d4e9250;padding:12px 0}.pn4-match:last-child{border-bottom:0}.pn4-match img{width:58px;height:82px;object-fit:contain;flex:none;background:#260e31;border-radius:9px}.pn4-match div{flex:1;min-width:0}.pn4-match small{display:block;margin-top:5px;font-size:11px;color:#b88bcd}.pn4-detail-cta{display:flex;gap:9px;flex-wrap:wrap;padding:16px 0}.pn4-detail-cta .btn{font-size:12px}.pn4-loading{padding:25px;text-align:center;color:#b884d0}.pn4-empty{text-align:center;padding:32px 15px}.pn4-empty svg{width:38px;height:38px;color:#c779ea}
@media(max-width:900px){.pn4-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pn4-memorygrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pn4-tilelinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pn4-hero{padding:19px 17px;gap:12px}.pn4-hero>svg{width:46px;height:46px}.pn4-progressring{width:75px;height:75px}.pn4-progressring:before{width:59px;height:59px}.pn4-progressring span{font-size:16px}.pn4-audit-card{grid-template-columns:95px minmax(0,1fr);gap:12px;padding:14px}.pn4-audit-card .cover{width:95px}.pn4-audit-summary h2{font-size:18px}.pn4-audit-summary p{font-size:11px}.pn4-audit-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pn4-audit-options button{min-height:58px;padding:10px 6px;line-height:1.3}.pn4-toolbar{grid-template-columns:1fr}.pn4-filtergrid,.pn4-journeygrid,.pn4-hubcards{grid-template-columns:1fr}.pn4-filtergrid .pn4-span{grid-column:auto}.pn4-memorygrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pn4-memory{padding:9px}.pn4-journeyhero .cover{width:84px}.pn4-stats-grid>.panel{padding:14px}.pn4-tilelinks button{min-height:48px;line-height:1.4;flex-wrap:wrap}.pn4-graph{gap:3px}.pn4-graph-col small{font-size:8px}.pn4-moneyrow{grid-template-columns:31px 1fr auto;gap:5px}.pn4-moneyrow b{font-size:10px}.pn4-detail-cta{flex-direction:column}.pn4-detail-cta .btn{width:100%}.pn4-quick{flex-wrap:wrap}.pn4-quick .btn{margin-left:0}.pn4-hero h2{font-size:23px}.pn4-chartlegend{flex-wrap:wrap}}
@media(max-width:350px){.pn4-audit-card{grid-template-columns:80px minmax(0,1fr)}.pn4-audit-card .cover{width:80px}.pn4-audit-options svg{display:none}.pn4-audit-options button{font-size:11px}.pn4-memorygrid{grid-template-columns:1fr}.pn4-hero{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.pn4-gradientbar>span,.pn4-pair i,.pn4-hubcard,.pn4-audit-options button{transition:none!important}}

.pn4-passport-memory{margin:17px 0;padding:13px 0;border-top:1px solid #6b437e38}.pn4-passport-imgs{display:flex;gap:8px;margin:12px 0}.pn4-passport-imgs img{width:100px;height:90px;object-fit:contain;background:#1f0c28;border-radius:10px;border:1px solid #5d356f}

/* QuestPick 6.3 Cloud control, status and version history */
.pn63-cloud-status{border-radius:14px;padding:14px 16px;border:1px solid #926db8;background:#311841;color:#dfc3eb;font-size:13px;line-height:1.5;margin:12px 0;font-weight:700}
.pn63-cloud-status[data-status="saved"]{background:#143d3870;border-color:#6fd2aa;color:#baf1d7}
.pn63-cloud-status[data-status="saving"],.pn63-cloud-status[data-status="refresh"]{background:#34204e;border-color:#b16fda;color:#f3cafa}
.pn63-cloud-status[data-status="error"],.pn63-cloud-status[data-status="signin"]{background:#602a346b;border-color:#e58b8b;color:#ffe0e0}
.pn63-cloud-status[data-status="offline"],.pn63-cloud-status[data-status="pending"]{background:#49391b7b;border-color:#d5ad59;color:#ffe5b5}
.pn63-history{margin-top:22px;padding-top:14px;border-top:1px solid #ffffff24}
.pn63-history .pn4-actions{display:flex;flex-wrap:wrap;gap:8px}
.pn63-version{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid #ffffff16}
.pn63-version>div:first-child{min-width:180px;flex:1}
.pn63-version strong,.pn63-version small{display:block}
.pn63-version strong{font-size:13px;color:#f4e9fb}
.pn63-version small{margin-top:5px;font-size:11px;color:#bea1ce}
.pn63-version button{font-size:11px;padding:10px 12px}
@media(max-width:420px){.pn63-version .pn4-actions{width:100%}.pn63-version .pn4-actions button{flex:1 1 120px}}