/* ==========================================================
   Pinkdows apps
   ========================================================== */

/* ---------------- Explorer (My Computer, Recycle Bin) ---------------- */
.ex-toolbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: var(--face); border-bottom: 1px solid #d8d2bd; overflow: hidden; }
.ex-tb { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px; border: 1px solid transparent; border-radius: 3px; background: none; color: #000; font: 11px var(--ui); cursor: pointer; flex: none; }
.ex-tb svg { width: 24px; height: 24px; display: block; }
.ex-tb:hover:not(:disabled) { border-color: #cecec3; background: linear-gradient(#fff, #f0efe6); }
.ex-tb:disabled { opacity: .45; filter: grayscale(1); cursor: default; }
.ex-sep { width: 1px; height: 26px; margin: 0 4px; background: #cecec3; flex: none; }
.ex-address { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--face); border-bottom: 1px solid #d8d2bd; }
.ex-addr-label { color: #555; }
.ex-addr-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px; border: 1px solid #7f9db9; background: #fff; white-space: nowrap; overflow: hidden; }
.ex-addr-box img { width: 16px; height: 16px; flex: none; }
.ex-go { display: flex; align-items: center; gap: 4px; padding: 0 2px; border: 0; background: none; font: 11px var(--ui); cursor: pointer; }
.ex-go i { position: relative; width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(#4fd35a, #2a9c35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.ex-go i::after { content: ''; position: absolute; left: 6px; top: 4px; border: 5px solid transparent; border-left: 6px solid #fff; border-right: 0; }
.ex-main { flex: 1; min-height: 0; display: flex; }
.ex-side { flex: none; width: 206px; overflow: auto; padding: 12px 10px; background: linear-gradient(180deg, #7ba2e7, #6375d6); }
.ex-side.hide { display: none; }
.ex-card { margin-bottom: 12px; border-radius: 4px 4px 0 0; overflow: hidden; }
.ex-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 25px; padding: 0 4px 0 11px; border: 0; background: linear-gradient(90deg, #fff, #c6d3f7); color: #215dc6; font: bold 11px var(--ui); text-align: left; cursor: pointer; }
.ex-card-head:hover { color: #428eff; }
.ex-card.special .ex-card-head { background: linear-gradient(90deg, #0c4ab4, #2e6ad8); color: #fff; }
.ex-chev { position: relative; width: 17px; height: 17px; flex: none; border: 1px solid #b0c0e8; border-radius: 50%; background: #fff; }
.ex-chev::before { content: ''; position: absolute; left: 5px; top: 4px; width: 4px; height: 4px; border: solid #215dc6; border-width: 2px 2px 0 0; transform: rotate(-45deg); }
.ex-card.collapsed .ex-chev::before { top: 2px; transform: rotate(135deg); }
.ex-card-body { padding: 8px 10px; background: #d6dff7; border: 1px solid #fff; border-top: 0; }
.ex-card.special .ex-card-body { background: #eff3ff; }
.ex-card.collapsed .ex-card-body { display: none; }
.ex-card-text { line-height: 1.45; }
.ex-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 0; border: 0; background: none; color: #0c32a4; font: 11px var(--ui); text-align: left; cursor: pointer; }
.ex-link img { width: 16px; height: 16px; flex: none; }
.ex-link:hover { color: #2b72ff; text-decoration: underline; }
.ex-view { flex: 1; min-width: 0; overflow: auto; padding: 4px 14px 20px; background: #fff; }
.ex-group { margin: 14px 0 8px; padding-bottom: 3px; font: bold 11px var(--ui); color: #000; border-bottom: 1px solid; border-image: linear-gradient(90deg, #7ba2e7, rgba(123, 162, 231, 0)) 1; }
.ex-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 6px 10px; }
.ex-tile { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 2px; outline: none; cursor: default; }
.ex-tile img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.ex-tile-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ex-tile-text b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-tile-text small { color: #7a7a7a; }
.ex-tile:hover { background: #eef3fc; }
.ex-tile.sel { background: var(--sel); color: #fff; }
.ex-tile.sel small { color: #dfe8ff; }
.ex-tile:focus-visible { outline: 1px dotted #000; }
.ex-bar { display: block; width: 130px; height: 11px; margin-top: 2px; border: 1px solid #999; background: #fff; }
.ex-bar i { display: block; height: 100%; background: linear-gradient(#ff9fd0, #d6337f); }
.ex-details { min-width: 520px; margin-top: 6px; }
.ex-row { display: grid; grid-template-columns: minmax(170px, 2fr) minmax(130px, 2fr) minmax(110px, 1.2fr) 70px; align-items: center; padding: 1px 0; outline: none; cursor: default; }
.ex-row > span { padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ex-row.head { position: sticky; top: -4px; background: linear-gradient(#fff, #f1efe2); border-bottom: 1px solid #d5d2c0; }
.ex-row.head > span { padding: 3px 6px; border-right: 1px solid #d5d2c0; }
.ex-row .nm { display: flex; align-items: center; gap: 5px; }
.ex-row .nm img { width: 16px; height: 16px; flex: none; }
.ex-row .nm b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; }
.ex-row:not(.head):hover { background: #eef3fc; }
.ex-row.sel { background: var(--sel) !important; color: #fff; }
@keyframes row-out { to { opacity: 0; transform: translateX(50px); } }
.ex-empty { padding: 36px 10px; color: #777; text-align: center; }

/* ---------------- Buy dialog ---------------- */
.buy-dlg .window-body { gap: 10px; padding: 14px 16px 10px; }
.buy-top { display: flex; align-items: flex-start; gap: 12px; }
.buy-top img { width: 50px; height: 50px; flex: none; }
.buy-top b { font-size: 14px; }
.buy-top p { margin: 4px 0 0; line-height: 1.5; }
.buy-ca { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid #7f9db9; background: #fff; }
.buy-ca span { font-weight: bold; color: var(--pink-deep); }
.buy-ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--mono); }
.buy-ca .btn { min-width: 58px; }
.buy-btns { display: flex; justify-content: center; gap: 10px; padding: 6px 0; }
.buy-btns .run { transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); position: relative; z-index: 2; }
.buy-fine { margin: 0; color: #777; font-size: 10px; text-align: center; }

/* ---------------- Browser frame ---------------- */
.chrome { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; container: browser / inline-size; }
.ch-strip { flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px 0; background: #dee1e6; }
.ch-tabs { display: flex; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.ch-tab { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 230px; min-width: 56px; height: 32px; padding: 0 8px 0 12px; border-radius: 8px 8px 0 0; color: #3c4043; font-size: 12px; cursor: default; }
.ch-tab img { width: 16px; height: 16px; flex: none; object-fit: contain; }
.ch-tab span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-tab.active { background: #fff; color: #202124; }
.ch-tab:not(.active):hover { background: rgba(255, 255, 255, .5); }
.ch-tab-x { width: 18px; height: 18px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: #5f6368; font-size: 15px; line-height: 17px; cursor: pointer; }
.ch-tab-x:hover { background: #e8eaed; }
.ch-new { width: 28px; height: 28px; margin-bottom: 2px; border: 0; border-radius: 50%; background: none; color: #3c4043; font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.ch-new:hover { background: rgba(0, 0, 0, .08); }
.ch-bar { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 8px; background: #fff; border-bottom: 1px solid #dadce0; }
.ch-btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: #5f6368; cursor: pointer; }
.ch-btn svg { width: 16px; height: 16px; display: block; }
.ch-btn:hover:not(:disabled) { background: #f1f3f4; }
.ch-btn:disabled { opacity: .35; cursor: default; }
.ch-omni { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 4px; padding: 0 12px; border-radius: 16px; background: #f1f3f4; }
.ch-omni:focus-within { background: #fff; box-shadow: 0 0 0 2px #1a73e8; }
.ch-lock { width: 14px; height: 14px; flex: none; color: #5f6368; }
.ch-lock svg { display: block; width: 14px; height: 14px; }
.ch-url { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #202124; font: 14px "Segoe UI", -apple-system, Roboto, Arial, sans-serif; }
.ch-star { color: #5f6368; font-size: 16px; cursor: pointer; }
.ch-marks { flex: none; display: flex; gap: 2px; padding: 3px 8px; background: #fff; border-bottom: 1px solid #dadce0; overflow-x: auto; scrollbar-width: none; }
.ch-marks:empty { display: none; }
.ch-marks::-webkit-scrollbar { display: none; }
.ch-mark { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 13px; background: none; color: #3c4043; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ch-mark img { width: 16px; height: 16px; object-fit: contain; }
.ch-mark:hover { background: #f1f3f4; }
.ch-view { position: relative; flex: 1; min-height: 0; overflow: auto; background: #fff; -webkit-user-select: text; user-select: text; }
.ch-embed { display: block; width: 100%; height: 100%; border: 0; }
.chrome.x-chrome .ch-strip { background: #202124; }
.chrome.x-chrome .ch-tab { color: #bdc1c6; }
.chrome.x-chrome .ch-tab.active { background: #35363a; color: #fff; }
.chrome.x-chrome .ch-bar { background: #35363a; border-color: #202124; }
.chrome.x-chrome .ch-omni { background: #202124; }
.chrome.x-chrome .ch-omni:focus-within { background: #202124; box-shadow: 0 0 0 2px #8ab4f8; }
.chrome.x-chrome .ch-url { color: #e8eaed; }
.chrome.x-chrome .ch-btn { color: #e8eaed; }
.chrome.x-chrome .ch-btn:hover:not(:disabled) { background: #4a4b4f; }
.chrome.x-chrome .ch-lock, .chrome.x-chrome .ch-star { color: #9aa0a6; }

/* ---------------- Poogle ---------------- */
.pg-home { min-height: 100%; display: flex; flex-direction: column; color: #202124; font-family: Arial, sans-serif; }
.pg-top { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 10px 16px; font-size: 13px; }
.pg-top a { color: #202124; cursor: pointer; }
.pg-top a:hover { text-decoration: underline; }
.pg-apps { color: #5f6368; font-size: 12px; letter-spacing: -2px; }
.pg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sky); }
.pg-center { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 5vh 16px 24px; }
.pg-logo { display: flex; align-items: center; font: 700 88px/1 "Avenir Next", Futura, "Century Gothic", "Trebuchet MS", Arial, sans-serif; letter-spacing: -3px; -webkit-user-select: none; user-select: none; }
.pg-logo img { width: .8em; height: .8em; margin: 0 -.03em; object-fit: contain; transform: translateY(.07em); }
.pg-logo .l1, .pg-logo .l2 { color: #4285f4; }
.pg-logo .l3 { color: #34a853; }
.pg-logo .l4 { color: #ea4335; }
.pg-logo.mini { font-size: 30px; letter-spacing: -1px; cursor: pointer; }
.pg-search { display: flex; align-items: center; gap: 10px; width: min(584px, 100%); height: 46px; margin-top: 28px; padding: 0 14px; border: 1px solid #dfe1e5; border-radius: 24px; background: #fff; }
.pg-search:hover, .pg-search:focus-within { border-color: transparent; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.pg-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #202124; font: 16px Arial, sans-serif; }
.pg-ic svg { display: block; width: 20px; height: 20px; }
.pg-ic.mic svg { width: 22px; height: 22px; }
.pg-search.small { flex: 1; height: 42px; margin: 0; max-width: 660px; }
.pg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.pg-btns button { height: 36px; padding: 0 16px; border: 1px solid #f8f9fa; border-radius: 4px; background: #f8f9fa; color: #3c4043; font: 14px Arial, sans-serif; cursor: pointer; }
.pg-btns button:hover { border-color: #dadce0; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); color: #202124; }
.pg-trends { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin-top: 26px; color: #5f6368; font-size: 13px; }
.pg-trends b { width: 100%; font-weight: normal; text-align: center; }
.pg-chip { padding: 6px 12px; border: 1px solid #dadce0; border-radius: 16px; background: #fff; color: #1a0dab; font: 13px Arial, sans-serif; cursor: pointer; }
.pg-chip:hover { background: #f1f3f4; }
.pg-lang { margin-top: 26px; color: #4d5156; font-size: 13px; }
.pg-lang a { margin: 0 3px; color: #1a0dab; cursor: pointer; }
.pg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 24px; background: #f2f2f2; border-top: 1px solid #dadce0; color: #70757a; font-size: 13px; }
.pg-results { padding-bottom: 30px; color: #202124; font-family: Arial, sans-serif; }
.pg-rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 18px 24px 12px; }
.pg-rtabs { display: flex; gap: 22px; padding: 0 24px 0 158px; border-bottom: 1px solid #ebebeb; color: #5f6368; font-size: 13px; overflow-x: auto; }
.pg-rtabs span { padding: 10px 2px 11px; white-space: nowrap; }
.pg-rtabs .on { padding-bottom: 8px; border-bottom: 3px solid #1a73e8; color: #1a73e8; }
.pg-list { max-width: 810px; padding: 8px 24px 0 158px; }
.pg-stats { padding: 6px 0 12px; color: #70757a; font-size: 14px; }
.pg-dym { margin-bottom: 16px; color: #c5221f; font-size: 18px; }
.pg-dym a { color: #1a0dab; font-weight: bold; font-style: italic; cursor: pointer; }
.pg-result { max-width: 620px; margin-bottom: 26px; }
.pg-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pg-site img { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: #f1f3f4; object-fit: contain; border: 1px solid #ecedef; }
.pg-site b { display: block; font-size: 14px; font-weight: normal; }
.pg-site small { color: #4d5156; font-size: 12px; }
.pg-title { display: inline-block; margin-bottom: 3px; color: #1a0dab; font-size: 20px; line-height: 1.3; text-decoration: none; }
.pg-title:hover { text-decoration: underline; }
.pg-result p { margin: 0; color: #4d5156; font-size: 14px; line-height: 1.58; }
.pg-paa { max-width: 620px; margin: 0 0 26px; }
.pg-paa h3 { margin: 0 0 8px; font-size: 20px; font-weight: normal; }
.pg-paa details { border-bottom: 1px solid #dadce0; }
.pg-paa summary { padding: 14px 4px; font-size: 16px; cursor: pointer; }
.pg-paa details p { margin: 0 4px 14px; color: #4d5156; font-size: 14px; line-height: 1.5; }
.pg-pager { display: flex; justify-content: center; max-width: 620px; padding: 10px 0; font: 700 30px Arial, sans-serif; letter-spacing: -1px; }
.pg-pager .l1 { color: #4285f4; } .pg-pager .l2 { color: #ea4335; } .pg-pager .l3 { color: #fbbc05; }
.pg-pager .l4 { color: #34a853; } .pg-pager .l5 { color: #4285f4; } .pg-pager .l6 { color: #ea4335; }
@container browser (max-width: 720px) {
  .pg-logo { font-size: 58px; }
  .pg-logo.mini { font-size: 26px; }
  .pg-rtabs, .pg-list { padding-left: 16px; padding-right: 16px; }
  .pg-rhead { padding: 12px 16px; }
  .pg-title { font-size: 17px; }
}

/* ---------------- Pigipedia ---------------- */
.wiki { max-width: 920px; margin: 0 auto; padding: 16px 24px 40px; color: #202122; font: 14px/1.6 Georgia, "Times New Roman", serif; }
.wiki::after { content: ''; display: block; clear: both; }
.wk-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #a2a9b1; font-family: Arial, sans-serif; }
.wk-head img { width: 42px; height: 42px; }
.wk-head b { display: block; font: 22px Georgia, serif; }
.wk-head span { color: #54595d; font-size: 11px; }
.wiki h1 { margin: 14px 0 0; padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; font: 28px/1.3 Georgia, "Times New Roman", serif; }
.wk-from { margin: 6px 0 12px; color: #54595d; font: 12px Arial, sans-serif; }
.wiki h2 { margin: 22px 0 8px; padding-bottom: 2px; border-bottom: 1px solid #a2a9b1; font: 21px Georgia, serif; }
.wk-box { float: right; width: 260px; margin: 0 0 14px 18px; border: 1px solid #a2a9b1; border-collapse: collapse; background: #f8f9fa; font: 12px/1.5 Arial, sans-serif; }
.wk-box caption { padding: 6px; background: #ffd1e8; font-size: 15px; font-weight: bold; }
.wk-box th, .wk-box td { padding: 4px 8px; text-align: left; vertical-align: top; }
.wk-box th { width: 42%; }
.wk-img { text-align: center !important; background: var(--sky); }
.wk-img img { width: 150px; }
.wk-img small { display: block; color: #1b1b1b; }
.wiki sup { color: #0645ad; font-size: 10px; }
.wk-refs { font-size: 12px; }
.wk-note { margin-top: 24px; color: #54595d; font: italic 12px Arial, sans-serif; }
@container browser (max-width: 620px) { .wk-box { float: none; width: 100%; margin: 0 0 14px; } }

/* ---------------- Hopium Index ---------------- */
.hop { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 340px; background: #0b0e17; color: #d1d4dc; font-family: -apple-system, "Segoe UI", Arial, sans-serif; }
.hop-head { padding: 10px 14px; border-bottom: 1px solid #1e2230; font-size: 13px; }
.hop-live { margin-left: 8px; color: #ff5fa8; animation: blink 1.4s steps(1) infinite; }
.hop-cv { display: block; flex: 1; width: 100%; min-height: 0; }
.hop-card { position: absolute; left: 50%; top: 54%; width: min(370px, 90%); padding: 18px; border: 1px solid #2a3042; border-radius: 12px; background: rgba(18, 22, 34, .93); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); text-align: center; transform: translate(-50%, -50%); }
.hop-card b { color: #fff; font-size: 16px; }
.hop-card p { color: #9aa4b8; font-size: 13px; line-height: 1.5; }
.hop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------------- Notepad ---------------- */
.np-text { flex: 1; min-height: 0; width: 100%; padding: 4px 6px; border: 0; border-top: 1px solid #aca899; outline: none; resize: none; background: #fff; color: #000; font: 13px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-text.nowrap { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* ---------------- Setup wizard ---------------- */
.wz-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--face); }
.wz-body.wz-edge { flex-direction: row; background: #fff; }
.wz-side {
  flex: none;
  width: 164px;
  border-right: 1px solid #aca899;
  background: url(../assets/peppa-sm.png) 50% 92% / 124px auto no-repeat, url(../assets/sun.png) 88% 6% / 52px auto no-repeat, linear-gradient(180deg, #7fb8ef 0%, #bfe0ff 58%, #78c06e 58.3%, #5fae55 100%);
}
.wz-main { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; }
.wz-main h2 { margin: 4px 0 14px; font: bold 16px/1.3 Verdana, var(--ui); }
.wz-main p { margin: 0 0 10px; line-height: 1.5; }
.wz-main .xp-check { margin: 4px 0; }
.wz-small { color: #666; font-size: 10px; }
.wz-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 8px 22px; background: #fff; border-bottom: 1px solid #aca899; }
.wz-top b { font-size: 12px; }
.wz-top p { margin: 3px 0 0 14px; color: #333; }
.wz-top img { width: 48px; height: 48px; flex: none; }
.wz-content { flex: 1; min-height: 0; overflow: auto; padding: 14px 24px; }
.wz-eula { display: block; width: 100%; height: 160px; resize: none; font: 11px/1.45 var(--ui); white-space: pre-wrap; }
.wz-radio { display: flex; align-items: center; gap: 6px; margin-top: 7px; cursor: pointer; }
.wz-ngmi { color: #c00; }
.wz-list { margin: 0 0 10px; padding-left: 18px; line-height: 1.6; }
.wz-list li { margin-bottom: 4px; }
.wz-tip { padding: 6px 8px; border: 1px solid #e6db55; background: #ffffe1; }
.wz-ca { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; padding: 6px; border: 1px solid #7f9db9; background: #fff; }
.wz-ca code { flex: 1; min-width: 0; font: 11px var(--mono); overflow-wrap: anywhere; }
.wz-status { margin: 0 0 8px; }
.wz-file { margin-top: 6px; overflow: hidden; color: #555; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.wz-foot { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--face); border-top: 1px solid #fff; box-shadow: 0 -1px #aca899; }
.wz-brand { flex: 1; color: #aca899; font: italic bold 12px var(--ui); text-shadow: 1px 1px #fff; }

/* ---------------- Properties dialogs ---------------- */
.props-win .window-body { padding: 8px 8px 0; }
.props { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.props-btns { flex: none; display: flex; justify-content: flex-end; gap: 6px; padding: 8px 0; }
.tabpanel hr { margin: 8px 0; border: 0; border-top: 1px solid #d0d0bf; }
.pp-row { display: flex; align-items: center; gap: 12px; }
.pp-name img { width: 34px; height: 34px; }
.pp-name input { flex: 1; }
.pp-mini { width: 16px; height: 16px; vertical-align: middle; }
.pp-change, .pp-copy { min-width: 0 !important; min-height: 20px !important; margin-left: 6px; padding: 0 8px !important; }
.pp-ca { font: 11px var(--mono); }
.pp-attrs { display: flex; flex-direction: column; gap: 4px; }
.pp-disk { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pp-legend { align-self: stretch; }
.sw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 1px solid #555; vertical-align: middle; }
.pie3d { position: relative; width: 176px; height: 94px; }
.pie-top, .pie-side i { position: absolute; left: 0; width: 176px; height: 78px; border-radius: 50%; background: var(--pie); }
.pie-top { top: 0; z-index: 30; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pie-side i { filter: brightness(.62); }
.pp-cap { margin: 0; }
.pp-buy { margin-top: 8px; }
.pp-users { height: 78px; overflow: auto; padding: 2px; }
.pp-users div { padding: 2px 4px; }
.pp-users .sel { background: var(--sel); color: #fff; }
.pp-perm { width: 100%; margin-top: 4px; border-collapse: collapse; }
.pp-perm th, .pp-perm td { padding: 3px 6px; border-bottom: 1px solid #eee; text-align: center; }
.pp-perm td:first-child { text-align: left; }
.pp-prev { padding: 30px 10px; color: #444; text-align: center; }
.pp-prev img { width: 70px; height: 70px; }
.dp-mon { display: flex; flex-direction: column; align-items: center; margin: 2px 0 12px; }
.dp-screen { position: relative; width: 184px; height: 124px; overflow: hidden; border: 10px solid #d8d8d0; border-radius: 6px 6px 2px 2px; background: var(--sky) url(../assets/wallpaper-full.jpg) center / cover; box-shadow: inset 0 0 0 1px #888, 0 0 0 1px #999; }
.dp-screen[data-wall="tiles"] { background: #ffc2dc url(../assets/peppa-head-sm.png) 0 0 / 24px; }
.dp-screen[data-wall="pink"] { background: #ff8cc8; }
.dp-screen.saver { display: grid; place-items: center; background: #05050d; color: #ff8fc8; font: bold 13px var(--comic); }
.dp-win { position: absolute; left: 28px; top: 16px; width: 92px; height: 56px; border: 2px solid #0831d9; border-top: 10px solid #0054e3; border-radius: 3px 3px 0 0; background: var(--face); }
.dp-win.pink { border-color: #c42a73; border-top-color: #ec4897; }
.dp-tb { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #245edb; }
.dp-tb.pink { background: #d63c88; }
.dp-tb i { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; border-radius: 0 4px 4px 0; background: #3c9b39; }
.dp-stand { width: 64px; height: 16px; background: linear-gradient(#d8d8d0, #b0b0a8); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.dp-list { display: flex; flex-direction: column; height: 124px; overflow: auto; }
.dp-opt { padding: 3px 6px; border: 0; background: none; font: 11px var(--ui); text-align: left; cursor: pointer; }
.dp-opt.sel { background: var(--sel); color: #fff; }
.props label > select { margin-left: 6px; }
.props fieldset .btn { margin-left: 6px; }
.sp-gen { display: flex; gap: 14px; }
.sp-logo { position: relative; width: 132px; flex: none; }
.sp-logo img { width: 128px; }
.sp-logo .sp-peppa { position: absolute; left: 25px; top: 21px; width: 50px; }
.sp-info p { margin: 0 0 12px; line-height: 1.45; }

/* ---------------- cmd.exe ---------------- */
.cmd-win .window-body { background: #000; }
.cmd { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px; background: #000; color: #c0c0c0; font: 14px/1.32 var(--mono); cursor: text; -webkit-user-select: text; user-select: text; }
.cmd[data-color="green"] { color: #3bf06a; }
.cmd[data-color="pink"] { color: #ff8fc8; }
.cmd-l { min-height: 1.32em; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd .pink { color: #ff5fa8; }
.cmd .red { color: #ff5555; }
.cmd .green { color: #3bf06a; }
.cmd .art { line-height: 1.05; white-space: pre; overflow-wrap: normal; font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans Mono", "DejaVu Sans", "Noto Sans Symbols 2", monospace; }
.nf { display: flex; gap: 14px; align-items: flex-start; }
.nf pre { margin: 0; font: inherit; }
.cmd-line { display: flex; }
.cmd-prompt { flex: none; white-space: pre; }
.cmd-in { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: inherit; font: inherit; caret-color: currentColor; }
.cmd-matrix { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* ---------------- MudSweeper ---------------- */
.sweeper-win .window-body { background: #c0c0c0; }
.ms { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #c0c0c0; border: 3px solid; border-color: #fff #808080 #808080 #fff; }
.ms-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.led { display: flex; gap: 1px; padding: 2px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: #000; }
.led svg { display: block; width: 13px; height: 23px; }
.ms-mid { display: flex; align-items: center; gap: 6px; }
.ms-face { position: relative; width: 34px; height: 34px; padding: 2px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; cursor: pointer; }
.ms-face:active { border-color: #808080 #fff #fff #808080; }
.ms-face img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .12s; }
.ms-face[data-state="o"] img { transform: scale(1.14) rotate(-8deg); }
.ms-face[data-state="dead"] img { filter: grayscale(1) brightness(.9); transform: rotate(180deg); }
.ms-face[data-state="win"]::after { content: '👑'; position: absolute; top: -13px; left: 50%; font-size: 15px; transform: translateX(-50%); }
.ms-mode { min-width: 34px; height: 34px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; font-size: 16px; cursor: pointer; }
.ms-mode.on { border-color: #808080 #fff #fff #808080; background: #ffd1e8; }
.ms-field { align-self: center; border: 3px solid; border-color: #808080 #fff #fff #808080; }
.ms-grid { display: grid; --cs: 22px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ms-grid .c {
  width: var(--cs);
  height: var(--cs);
  display: grid;
  place-items: center;
  border: calc(var(--cs) * .12) solid;
  border-color: #fff #808080 #808080 #fff;
  background: #c0c0c0 center / 62% no-repeat;
  font: 900 calc(var(--cs) * .6)/1 "Arial Black", Tahoma, sans-serif;
  cursor: default;
}
.ms-grid .c.open { border: 0; border-right: 1px solid #8a8a8a; border-bottom: 1px solid #8a8a8a; background-color: #bdbdbd; }
.ms-grid .c.flag { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2h1.5v10H6.5z' fill='%23000'/%3E%3Cpath d='M8 2l6 3-6 3z' fill='%23ff2d8a'/%3E%3Cpath d='M3.5 12h8v2h-8z' fill='%23000'/%3E%3C/svg%3E"); }
.ms-grid .c.mine { border: 0; border-right: 1px solid #8a8a8a; border-bottom: 1px solid #8a8a8a; background-color: #bdbdbd; background-size: 72%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M8 1v14M1 8h14M3 3l10 10M13 3 3 13'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='4.7' fill='%23000'/%3E%3Crect x='5.6' y='5.6' width='2' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.ms-grid .c.boom { background-color: #ff1f1f; }
.ms-grid .c.wrong { background-size: 72%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M8 1v14M1 8h14M3 3l10 10M13 3 3 13'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='4.7' fill='%23000'/%3E%3Cpath d='M2 2l12 12M14 2 2 14' stroke='%23f00' stroke-width='1.8'/%3E%3C/svg%3E"); }
.ms-grid .n1 { color: #0000ff; } .ms-grid .n2 { color: #008000; } .ms-grid .n3 { color: #ff0000; } .ms-grid .n4 { color: #000080; }
.ms-grid .n5 { color: #800000; } .ms-grid .n6 { color: #008080; } .ms-grid .n7 { color: #000; } .ms-grid .n8 { color: #808080; }

/* ---------------- Peppa Paint ---------------- */
.paint-win .window-body { background: var(--face); }
.pt-main { flex: 1; min-height: 0; display: flex; }
.pt-tools { flex: none; display: grid; grid-template-columns: 26px 26px; align-content: start; gap: 1px; width: 60px; padding: 4px; border-right: 1px solid #aca899; }
.pt-tool { width: 26px; height: 26px; padding: 3px; border: 1px solid transparent; background: none; cursor: pointer; }
.pt-tool svg, .pt-tool img { display: block; width: 18px; height: 18px; object-fit: contain; }
.pt-tool:hover { border-color: #fff #808080 #808080 #fff; }
.pt-tool.on { border-color: #808080 #fff #fff #808080; background: repeating-conic-gradient(#fff 0 25%, #e6e6e6 0 50%) 0 0 / 2px 2px; }
.pt-sizes { grid-column: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; padding: 3px 0; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.pt-size { display: grid; place-items: center; width: 42px; height: 16px; border: 0; background: none; cursor: pointer; }
.pt-size i { border-radius: 50%; background: #000; }
.pt-size.on { background: var(--sel); }
.pt-size.on i { background: #fff; }
.pt-stage { flex: 1; min-width: 0; overflow: auto; padding: 6px; background: #808080; }
.pt-wrap { position: relative; width: max-content; box-shadow: 2px 2px 0 #404040; }
.pt-cv, .pt-ov { display: block; }
.pt-ov { position: absolute; left: 0; top: 0; cursor: crosshair; touch-action: none; }
.pt-text { position: absolute; min-width: 140px; padding: 0 3px; border: 1px dashed #333; outline: none; background: rgba(255, 255, 255, .75); font-family: Impact, "Arial Black", sans-serif; font-weight: bold; transform: translateY(-50%); }
.pt-bottom { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-top: 1px solid #fff; }
.pt-cur { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: repeating-conic-gradient(#fff 0 25%, #d4d0c8 0 50%) 0 0 / 2px 2px; }
.pt-fg, .pt-bg { position: absolute; width: 14px; height: 14px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.pt-fg { left: 4px; top: 4px; z-index: 1; }
.pt-bg { right: 4px; bottom: 4px; }
.pt-pal { display: grid; grid-template-columns: repeat(14, 16px); grid-template-rows: 16px 16px; gap: 1px; }
.pt-sw { width: 16px; height: 16px; padding: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; cursor: pointer; }

/* ---------------- Pinkamp (skinned window) ---------------- */
.window.amp-win { padding: 0 3px 3px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #2b2a3a, #3d3b55); }
.window.amp-win .titlebar { height: 20px; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(180deg, #4b4a66 0 1px, #3a3950 1px 3px); }
.window.amp-win .tb-icon { width: 12px; height: 12px; }
.window.amp-win .tb-title { color: #ffd1e8; font: bold 10px/1 var(--ui); letter-spacing: 3px; text-align: center; text-shadow: none; text-transform: uppercase; }
.window.amp-win .tb-btn { width: 14px; height: 14px; border-radius: 2px; }
.window.amp-win .tb-min::before { left: 3px; top: 8px; width: 6px; height: 2px; }
.window.amp-win .tb-close::before, .window.amp-win .tb-close::after { left: 5px; top: 2px; width: 1.6px; height: 8px; }
.window.amp-win .window-body { background: #1c1b26; }
.amp { padding: 6px; color: #c8c8d8; font: 10px var(--ui); }
.amp-main { padding: 6px; border: 1px solid #555a70; border-radius: 2px; background: linear-gradient(180deg, #3a3950, #29283a); }
.amp-display { display: flex; gap: 6px; }
.amp-l { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: 28px 1fr; gap: 2px 6px; width: 126px; padding: 4px; border: 1px solid #555a70; background: #000; }
.amp-state { color: #3bf06a; font-size: 12px; }
.amp-time { color: #3bf06a; font: 28px/1 "VT323", monospace; text-align: right; text-shadow: 0 0 6px rgba(59, 240, 106, .5); }
.amp-vis { grid-column: 1 / 3; display: block; width: 100%; height: 32px; image-rendering: pixelated; }
.amp-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.amp-marquee { height: 20px; padding: 0 4px; overflow: hidden; border: 1px solid #555a70; background: #000; color: #3bf06a; font: 14px/18px "VT323", monospace; white-space: nowrap; }
.amp-marquee span { display: inline-block; animation: ticker 14s linear infinite; }
.amp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #9aa; font-size: 9px; }
.amp-info b { padding: 0 3px; background: #000; color: #3bf06a; font: 13px "VT323", monospace; }
.amp-ms { color: #555; }
.amp-ms.on { color: #3bf06a; }
.amp-sl label { display: flex; align-items: center; gap: 5px; color: #9aa; font-size: 9px; }
.amp-vol { flex: 1; min-width: 0; height: 12px; accent-color: #ff5fa8; }
.amp-seek { position: relative; height: 10px; margin: 7px 0; border: 1px solid #555a70; border-radius: 2px; background: #111; }
.amp-seek i { position: absolute; top: -2px; width: 26px; height: 12px; margin-left: -13px; border: 1px solid #fff; border-radius: 2px; background: linear-gradient(#ffd1e8, #ff5fa8); }
.amp-ctrls { display: flex; align-items: center; gap: 2px; }
.amp-ctrls button { width: 32px; height: 22px; padding: 0; border: 1px solid; border-color: #8b8fa8 #1c1b26 #1c1b26 #8b8fa8; background: linear-gradient(#5a5a78, #3a3950); color: #fff; font-size: 11px; cursor: pointer; }
.amp-ctrls button:active, .amp-ctrls button.on { border-color: #1c1b26 #8b8fa8 #8b8fa8 #1c1b26; background: #2a2940; color: #3bf06a; }
.amp-logo { margin-left: auto; color: #ff5fa8; font: italic bold 12px var(--ui); text-shadow: 0 0 6px rgba(255, 95, 168, .6); cursor: default; }
.amp-pl-head { margin: 6px 0 3px; color: #ffd1e8; font: bold 9px var(--ui); letter-spacing: 2px; text-align: center; }
.amp-pl { max-height: 150px; margin: 0; padding: 4px; overflow: auto; list-style: none; border: 1px solid #555a70; background: #000; font: 11px var(--ui); }
.amp-pl li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; color: #3bf06a; outline: none; cursor: default; }
.amp-pl li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.amp-pl li b { font-weight: normal; }
.amp-pl li.cur { color: #fff; }
.amp-pl li.sel { background: #0000c6; }
.amp-pl li:focus-visible { outline: 1px dotted #3bf06a; }

/* ---------------- Run, viewer ---------------- */
.run-row { display: flex; align-items: center; gap: 8px; padding: 2px 16px 0 64px; }
.run-row input { flex: 1; min-width: 0; }
.msg-btns.right { justify-content: flex-end; }
.pv-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #fff; }
.pv-stage img { max-width: 92%; max-height: 92%; object-fit: contain; transition: transform .25s ease; }
.pv-bar { flex: none; display: flex; justify-content: center; gap: 4px; padding: 6px; border-top: 1px solid #aaa; background: linear-gradient(#f6f6f6, #dcdcdc); }
.pv-btn { width: 34px; height: 30px; border: 1px solid #aaa; border-radius: 4px; background: linear-gradient(#fff, #e8e8e8); font-size: 15px; cursor: pointer; }
.pv-btn:hover { border-color: #3169c6; }

/* ==========================================================
   X (Twitter) — dark mode, inside the Chrome frame
   ========================================================== */
.x-win .window-body { background: #000; }
.x-host {
  --x-line: #2f3336;
  --x-text: #e7e9ea;
  --x-dim: #71767b;
  --x-blue: #1d9bf0;
  --x-pink: #f91880;
  --x-green: #00ba7c;
  --x-hover: rgba(231, 233, 234, .1);
  --x-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  container: xhost / size;
  overflow: hidden !important;
  background: #000;
  color: var(--x-text);
}
.x-host button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.x-host svg { display: block; }
.x-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #3e4144 #000; }
.x-win .x-scroll::-webkit-scrollbar { width: 10px; }
.x-win .x-scroll::-webkit-scrollbar-track { background: #000; }
.x-win .x-scroll::-webkit-scrollbar-thumb { border: 2px solid #000; border-radius: 6px; background: #3e4144; box-shadow: none; }
.x-win .x-scroll::-webkit-scrollbar-button:single-button { display: none; }
.x-layer { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; font-family: var(--x-font); }
.x-layer > * { pointer-events: auto; }
.xapp { display: flex; justify-content: center; min-height: 100%; background: #000; color: var(--x-text); font: 15px/1.3125 var(--x-font); }
.x-dim { color: var(--x-dim); }
.x-tag { color: var(--x-blue); text-decoration: none; cursor: pointer; }
.x-tag:hover { text-decoration: underline; }
.x-ver { display: inline-block; flex: none; width: 18px; height: 18px; margin-left: 2px; vertical-align: -3px; }

/* left nav */
.x-nav { position: sticky; top: 0; flex: none; align-self: flex-start; display: flex; justify-content: flex-end; width: 88px; height: 100cqh; }
.x-nav-in { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 88px; height: 100%; padding: 4px 12px 12px; overflow-y: auto; scrollbar-width: none; }
.x-nav-in::-webkit-scrollbar { display: none; }
.x-host .x-logo { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; }
.x-logo svg { width: 30px; height: 30px; }
.x-host .x-logo:hover { background: var(--x-hover); }
.x-host .x-nav-item { position: relative; display: flex; align-items: center; gap: 20px; flex: none; padding: 12px; border-radius: 999px; font-size: 20px; }
.x-nav-item svg { width: 26px; height: 26px; }
.x-nav-item span { display: none; }
.x-nav-item.on { font-weight: 700; }
.x-host .x-nav-item:hover { background: var(--x-hover); }
.x-badge { position: absolute; top: 5px; left: 25px; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid #000; border-radius: 9px; background: var(--x-blue); color: #fff; font: normal 700 11px/16px var(--x-font); text-align: center; }
.x-host .x-post-big { display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin: 12px 0; border-radius: 999px; background: #eff3f4; color: #0f1419; font-weight: 700; }
.x-post-big span { display: none; }
.x-post-big svg { width: 24px; height: 24px; }
.x-host .x-post-big:hover { background: #d7dbdc; }
.x-host .x-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-radius: 999px; text-align: left; }
.x-me-n, .x-me > svg { display: none; }
.x-host .x-me:hover { background: var(--x-hover); }
@container xhost (min-width: 1250px) {
  .x-nav, .x-nav-in { width: 260px; }
  .x-nav-in { align-items: flex-start; }
  .x-nav-item span { display: inline; }
  .x-host .x-nav-item { padding-right: 24px; }
  .x-host .x-post-big { width: 224px; font-size: 17px; }
  .x-post-big span { display: inline; }
  .x-post-big svg { display: none; }
  .x-host .x-me { width: 100%; }
  .x-me-n { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .x-me-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .x-me-n small { color: var(--x-dim); }
  .x-me > svg { display: block; width: 18px; height: 18px; }
}

/* center column */
.x-main { flex: 0 1 600px; min-width: 0; min-height: 100cqh; border-left: 1px solid var(--x-line); border-right: 1px solid var(--x-line); }
.x-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 28px; height: 53px; padding: 0 16px; background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.x-top b { display: flex; align-items: center; gap: 2px; font-size: 20px; font-weight: 800; }
.x-top small { display: block; color: var(--x-dim); font-size: 13px; }
.x-host .x-round { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; }
.x-round svg { width: 20px; height: 20px; }
.x-host .x-round:hover { background: var(--x-hover); }
.x-host .x-round.line { border: 1px solid #536471; }
.x-host .x-round.on { color: var(--x-blue); border-color: var(--x-blue); }

.x-banner { position: relative; aspect-ratio: 3 / 1; overflow: hidden; background: #6fb3ec url(../assets/banner.jpg) center 58% / cover; }

.x-prof { padding: 12px 16px 0; }
.x-prof-row { display: flex; align-items: flex-start; justify-content: space-between; height: 70px; }
.x-av-big { position: relative; z-index: 1; flex: none; width: 134px; height: 134px; margin-top: -80px; overflow: hidden; border: 4px solid #000; border-radius: 50%; }
.x-av-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-prof-btns { display: flex; align-items: center; gap: 8px; }
.x-host .x-follow { height: 36px; min-width: 82px; padding: 0 16px; border-radius: 999px; background: #eff3f4; color: #0f1419; font-weight: 700; }
.x-host .x-follow:hover { background: #d7dbdc; }
.x-host .x-follow.on { min-width: 112px; border: 1px solid #536471; background: transparent; color: var(--x-text); }
.x-follow .b { display: none; }
.x-host .x-follow.on:hover { border-color: #67070f; background: rgba(244, 33, 46, .1); color: #f4212e; }
.x-follow.on:hover .a { display: none; }
.x-follow.on:hover .b { display: inline; }
.x-pname { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.x-pname b { font-size: 20px; font-weight: 800; }
.x-pname .x-ver { width: 20px; height: 20px; }
.x-chip { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; background: #202327; color: var(--x-dim); font-size: 11px; line-height: 16px; vertical-align: 1px; }
.x-bio { margin: 12px 0; line-height: 1.35; }
.x-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.x-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.x-meta svg { width: 18px; height: 18px; }
.x-counts { display: flex; gap: 20px; margin: 12px 0; font-size: 14px; }
.x-counts a { cursor: pointer; }
.x-counts a:hover { text-decoration: underline; }
.x-counts b { color: var(--x-text); font-weight: 700; }
.x-fby { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 13px; }
.x-stack { display: inline-flex; flex: none; }
.x-stack .x-av { margin-left: -8px; border: 2px solid #000; }
.x-stack .x-av:first-child { margin-left: 0; }

.x-tabs { position: sticky; top: 53px; z-index: 2; display: flex; border-bottom: 1px solid var(--x-line); background: rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.x-host .x-tabs button { position: relative; flex: 1; height: 53px; color: var(--x-dim); font-weight: 500; }
.x-host .x-tabs button:hover { background: var(--x-hover); }
.x-host .x-tabs button.on { color: var(--x-text); font-weight: 700; }
.x-tabs button.on::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--x-blue); transform: translateX(-50%); }

/* avatars + posts */
.x-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; }
.x-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-av i { font-size: 22px; font-style: normal; line-height: 1; }
.x-av.sm { width: 32px; height: 32px; }
.x-av.sm i { font-size: 17px; }
.x-av.xs { width: 20px; height: 20px; }
.x-av.xs i { font-size: 11px; }
.x-post { padding: 12px 16px 4px; border-bottom: 1px solid var(--x-line); transition: background .15s; }
.x-post:hover { background: rgba(255, 255, 255, .03); }
.x-post.thread { padding-bottom: 0; border-bottom: 0; }
.x-post.fresh { animation: x-fresh 1.2s ease; }
@keyframes x-fresh { from { background: rgba(29, 155, 240, .22); } }
.x-ctx { display: flex; align-items: center; gap: 12px; margin: -2px 0 4px; padding-left: 24px; color: var(--x-dim); font-size: 13px; font-weight: 700; }
.x-ctx svg { width: 16px; height: 16px; }
.x-row { display: flex; gap: 12px; }
.x-left { display: flex; flex-direction: column; align-items: center; flex: none; }
.x-thread-line { flex: 1; width: 2px; min-height: 16px; margin-top: 4px; background: #333639; }
.x-body { flex: 1; min-width: 0; }
.x-head { display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; }
.x-uname { overflow: hidden; font-weight: 700; text-overflow: ellipsis; }
.x-head .x-dim { overflow: hidden; text-overflow: ellipsis; }
.x-host .x-more { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin: -8px -8px -8px auto; border-radius: 50%; color: var(--x-dim); }
.x-more svg { width: 18px; height: 18px; }
.x-host .x-more:hover { background: rgba(29, 155, 240, .1); color: var(--x-blue); }
.x-replying { margin: 2px 0; }
.x-replying.pad { padding: 4px 16px 0 68px; }
.x-text { margin-top: 2px; line-height: 20px; overflow-wrap: anywhere; }
.x-media { position: relative; margin-top: 12px; overflow: hidden; border: 1px solid var(--x-line); border-radius: 16px; }
.x-media img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.x-meme { display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(#7fb8ef 0 72%, #78c06e 72%); }
.x-media.x-meme img { width: auto; height: 72%; margin-top: 11%; object-fit: contain; }
.x-meme b { position: absolute; left: 0; right: 0; padding: 0 10px; color: #fff; font: 900 clamp(16px, 4.6cqw, 34px)/1.05 Impact, "Arial Black", "Anton", sans-serif; letter-spacing: .5px; text-align: center; text-transform: uppercase; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.x-meme .t { top: 5%; }
.x-meme .b { bottom: 5%; }
.x-chart { aspect-ratio: 2 / 1; background: #0b0e17; }
.x-chart svg { display: block; width: 100%; height: 100%; }
.x-chart-l, .x-chart-r { position: absolute; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font: 700 13px var(--x-font); }
.x-chart-l { left: 10px; }
.x-chart-r { right: 10px; color: #26d07c; }
.x-poll { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.x-host .x-poll-opt { height: 34px; border: 1px solid var(--x-blue); border-radius: 999px; color: var(--x-blue); font-weight: 700; }
.x-host .x-poll-opt:hover { background: rgba(29, 155, 240, .1); }
.x-poll-res { position: relative; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; overflow: hidden; border-radius: 6px; }
.x-poll-res i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #333639; animation: x-grow .8s cubic-bezier(.2, .8, .2, 1); }
.x-poll-res.top i { background: rgba(29, 155, 240, .58); }
.x-poll-res span, .x-poll-res b { position: relative; display: flex; align-items: center; gap: 4px; }
.x-poll-res b { font-weight: 400; }
.x-poll-res.top span, .x-poll-res.top b { font-weight: 700; }
.x-poll-res svg { width: 16px; height: 16px; }
@keyframes x-grow { from { width: 0; } }
.x-quote { margin-top: 12px; padding: 12px; border: 1px solid var(--x-line); border-radius: 16px; }
.x-quote-head { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.x-quote-text { margin-top: 4px; }
.x-actions { display: flex; align-items: center; justify-content: space-between; margin: 4px -8px 0; }
.x-host .x-act { display: flex; align-items: center; gap: 1px; min-width: 0; color: var(--x-dim); font-size: 13px; }
.x-act svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; transition: background .15s, color .15s; }
.x-host .x-act.reply:hover, .x-host .x-act.views:hover, .x-host .x-act.bm:hover, .x-host .x-act.share:hover, .x-host .x-act.bm.on { color: var(--x-blue); }
.x-act.reply:hover svg, .x-act.views:hover svg, .x-act.bm:hover svg, .x-act.share:hover svg { background: rgba(29, 155, 240, .1); }
.x-host .x-act.rt:hover, .x-host .x-act.rt.on { color: var(--x-green); }
.x-act.rt:hover svg { background: rgba(0, 186, 124, .1); }
.x-host .x-act.like:hover, .x-host .x-act.like.on { color: var(--x-pink); }
.x-act.like:hover svg { background: rgba(249, 24, 128, .1); }
.x-act-r { display: flex; }
.x-act.like { position: relative; }
.x-act.like.burst svg { animation: x-heart .45s cubic-bezier(.2, 1.6, .5, 1); }
.x-act.like.burst::before { content: ''; position: absolute; left: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; border: 2px solid var(--x-pink); border-radius: 50%; pointer-events: none; animation: x-ring .5s ease-out forwards; }
@keyframes x-heart { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes x-ring { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.5); } }
.x-hl { padding: 16px; border-bottom: 1px solid var(--x-line); }
.x-hl b { font-size: 20px; font-weight: 800; }
.x-hl p { margin: 4px 0 0; }
.x-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.x-host .x-grid-i { position: relative; aspect-ratio: 1; overflow: hidden; background: #7fb8ef; }
.x-grid-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-grid-i.pv img { padding: 8%; object-fit: contain; }
.x-grid-i.meme img { padding: 20% 10% 4%; object-fit: contain; }
.x-grid-i.meme b { position: absolute; left: 0; right: 0; top: 5%; color: #fff; font: 900 clamp(12px, 3.6cqw, 22px) Impact, "Arial Black", sans-serif; text-align: center; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; }
.x-grid-i.meme .b { top: auto; bottom: 5%; }
.x-notif { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--x-line); }
.x-notif-ic { display: flex; justify-content: flex-end; flex: none; width: 32px; color: var(--x-pink); }
.x-notif-ic svg { width: 28px; height: 28px; }
.x-notif p { margin: 6px 0 0; }
.x-empty { padding: 40px 32px; }
.x-empty b { display: block; font-size: 31px; font-weight: 800; line-height: 1.1; }

/* right column */
.x-side { position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 16px; flex: 0 0 350px; margin-left: 30px; padding-bottom: 40px; }
.x-search { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; height: 44px; margin-top: 6px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: #202327; color: var(--x-dim); box-shadow: 0 -6px 0 6px #000; }
.x-search:focus-within { border-color: var(--x-blue); background: #000; color: var(--x-blue); }
.x-search svg { flex: none; width: 18px; height: 18px; }
.x-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--x-text); font: 15px var(--x-font); }
.x-search input::placeholder { color: var(--x-dim); }
.x-card { overflow: hidden; border: 1px solid var(--x-line); border-radius: 16px; }
.x-card h2 { margin: 0; padding: 12px 16px; font-size: 20px; font-weight: 800; }
.x-card p { margin: 0 16px 12px; }
.x-premium { padding-bottom: 14px; }
.x-premium .x-btn-blue { margin-left: 16px; }
.x-host .x-btn-blue { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--x-blue); color: #fff; font-weight: 700; }
.x-host .x-btn-blue:hover { background: #1a8cd8; }
.x-host .x-btn-blue:disabled { opacity: .5; cursor: default; }
.x-host .x-btn-white { height: 36px; margin: 0 16px 16px; padding: 0 16px; border-radius: 999px; background: #eff3f4; color: #0f1419; font-weight: 700; }
.x-host .x-btn-white:hover { background: #d7dbdc; }
.x-host .x-btn-line { height: 36px; padding: 0 16px; border: 1px solid #536471; border-radius: 999px; font-weight: 700; }
.x-host .x-btn-line:hover { background: var(--x-hover); }
.x-host .big { width: 100%; height: 44px; margin: 6px 0 0; font-size: 17px; }
.x-host .x-trend { display: flex; flex-direction: column; width: 100%; padding: 10px 16px; text-align: left; }
.x-host .x-trend:hover, .x-wtf:hover { background: rgba(255, 255, 255, .03); }
.x-trend small { color: var(--x-dim); font-size: 13px; }
.x-trend b { margin: 1px 0; font-weight: 700; }
.x-show-more { display: block; padding: 16px; color: var(--x-blue); cursor: pointer; }
.x-show-more:hover { background: rgba(255, 255, 255, .03); }
.x-wtf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.x-wtf-n { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.x-wtf-n b { display: flex; align-items: center; overflow: hidden; font-weight: 700; white-space: nowrap; }
.x-wtf-n small { color: var(--x-dim); font-size: 15px; }
.x-host .x-follow-sm { height: 32px; padding: 0 16px; border-radius: 999px; background: #eff3f4; color: #0f1419; font-size: 14px; font-weight: 700; }
.x-host .x-follow-sm.on { border: 1px solid #536471; background: transparent; color: var(--x-text); }
.x-real p { color: var(--x-dim); }
.x-foot { padding: 0 16px; color: var(--x-dim); font-size: 13px; line-height: 1.6; }

/* overlay bits */
.x-bottom { display: none; }
.x-host .x-fab { position: absolute; right: 16px; bottom: 70px; display: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--x-blue); color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .5); }
.x-fab svg { width: 24px; height: 24px; }
.x-host .x-pill { position: absolute; top: 62px; left: 50%; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--x-blue); color: #fff; font: 700 14px var(--x-font); box-shadow: 0 4px 14px rgba(0, 0, 0, .55); transform: translateX(-50%); animation: x-pill .35s cubic-bezier(.3, 1.5, .5, 1); }
.x-pill .x-stack .x-av { border-color: var(--x-blue); }
@keyframes x-pill { from { opacity: 0; transform: translate(-50%, -16px); } }
.x-toast { position: absolute; left: 50%; bottom: 22px; max-width: 90%; padding: 12px 16px; border-radius: 6px; background: var(--x-blue); color: #fff; font: 15px var(--x-font); text-align: center; opacity: 0; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s; pointer-events: none !important; box-shadow: 0 0 12px rgba(0, 0, 0, .4); }
.x-toast.show { opacity: 1; transform: translate(-50%, 0); }
.x-modal { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 5% 12px 12px; background: rgba(91, 112, 131, .4); animation: fade-in .15s; }
.x-dialog { width: min(600px, 100%); max-height: 92%; overflow: auto; border-radius: 16px; background: #000; color: var(--x-text); font: 15px var(--x-font); animation: pop-in .2s cubic-bezier(.3, 1.3, .5, 1); }
.x-modal.small .x-dialog { width: min(330px, 100%); margin-top: 8%; }
.x-dlg-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.x-drafts { padding: 0 12px; color: var(--x-blue); font-size: 14px; font-weight: 700; }
.x-compose { display: flex; gap: 12px; padding: 8px 16px 0; }
.x-compose textarea { flex: 1; min-height: 110px; padding-top: 6px; border: 0; outline: none; resize: none; background: none; color: var(--x-text); font: 20px/1.3 var(--x-font); }
.x-compose textarea::placeholder { color: var(--x-dim); }
.x-everyone { display: flex; align-items: center; gap: 4px; margin: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--x-line); color: var(--x-blue); font-size: 14px; font-weight: 700; }
.x-everyone svg { width: 16px; height: 16px; }
.x-compose-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; }
.x-tools { display: flex; flex: 1; color: var(--x-blue); }
.x-host .x-tool { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--x-blue); }
.x-tool svg { width: 20px; height: 20px; }
.x-host .x-tool:hover { background: rgba(29, 155, 240, .1); }
.x-ring { flex: none; width: 24px; height: 24px; }
.x-confirm { padding: 30px; }
.x-confirm h3 { margin: 0 0 8px; font-size: 20px; }
.x-confirm p { margin: 0 0 20px; line-height: 1.35; }
.x-prem { padding: 28px; text-align: center; }
.x-prem-logo svg { width: 42px; height: 42px; margin: 0 auto 8px; color: #ff5fa8; }
.x-prem h3 { margin: 0 0 8px; font-size: 24px; }
.x-prem-price { margin: 14px 0; }
.x-prem-price b { font-size: 28px; }
.x-pop { position: absolute; z-index: 6; min-width: 230px; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 0 15px rgba(255, 255, 255, .2), 0 0 3px 1px rgba(255, 255, 255, .15); animation: fade-in .12s; }
.x-host .x-pop button { display: block; width: 100%; padding: 12px 16px; color: var(--x-text); font: 700 15px var(--x-font); text-align: left; }
.x-host .x-pop button:hover { background: rgba(255, 255, 255, .05); }
.x-host .x-pop button.red { color: #f4212e; }

@container xhost (max-width: 1000px) { .x-side { display: none; } }
@container xhost (min-width: 1001px) and (max-width: 1120px) { .x-side { flex-basis: 290px; margin-left: 20px; } }
@container xhost (max-width: 600px) {
  .xapp { flex-direction: column; justify-content: flex-start; }
  .x-nav, .x-side { display: none; }
  .x-main { flex: 1 0 auto; width: 100%; min-height: calc(100cqh - 53px); border: 0; }
  .x-bottom { position: sticky; bottom: 0; z-index: 4; display: flex; height: 53px; border-top: 1px solid var(--x-line); background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .x-host .x-bottom button { display: grid; place-items: center; flex: 1; }
  .x-bottom svg { width: 26px; height: 26px; }
  .x-host .x-fab { display: grid; }
  .x-post { padding: 10px 12px 2px; }
  .x-act svg { width: 30px; height: 30px; padding: 6px; }
  .x-host .x-act { font-size: 12px; }
  .x-top { gap: 18px; }
  .x-av-big { width: 86px; height: 86px; margin-top: -50px; }
  .x-prof-row { height: 48px; }
  .x-host .x-follow { min-width: 0; }
  .x-replying.pad { padding-left: 16px; }
  .x-host .x-pill { top: 60px; }
}

/* ---------------- phones ---------------- */
@media (max-width: 720px), (max-height: 480px) {
  .ex-side { display: none; }
  .ex-tb span { display: none; }
  .ex-tiles { grid-template-columns: 1fr; }
  .ex-tile img { width: 40px; height: 40px; }
  .ex-tile-text b, .ex-tile-text small { font-size: 13px; }
  .ex-row { font-size: 12px; }
  .buy-top b { font-size: 16px; }
  .buy-top p, .buy-ca code, .buy-fine { font-size: 12.5px; }
  .buy-btns .btn { min-width: 110px; }
  .ch-tab { flex-basis: 160px; }
  .ch-mark { font-size: 12.5px; }
  .ch-url { font-size: 16px; }
  .ch-btn:nth-child(4) { display: none; }
  .wz-body.wz-edge { flex-direction: column; }
  .wz-side { width: 100%; height: 90px; border-right: 0; border-bottom: 1px solid #aca899; background-size: auto 80px, 40px auto, auto; background-position: 92% 100%, 6% 12%, 0 0; }
  .wz-main p, .wz-list, .wz-top p, .wz-main .xp-check { font-size: 13px; }
  .wz-content { padding: 12px 14px; }
  .wz-brand { display: none; }
  .tabpanel { font-size: 12.5px; }
  .tab { padding: 5px 8px; font-size: 12px; }
  .cmd { font-size: 13px; }
  .pt-main { flex-direction: column; }
  .pt-tools { display: flex; flex-wrap: wrap; width: auto; border-right: 0; border-bottom: 1px solid #aca899; }
  .pt-tool { width: 34px; height: 34px; padding: 6px; }
  .pt-sizes { flex-direction: row; margin: 0 0 0 4px; }
  .pt-stage { padding: 4px; }
  .pt-wrap { width: 100%; }
  .pt-cv, .pt-ov { width: 100%; height: auto; }
  .pt-pal { flex: 1; grid-template-columns: repeat(14, minmax(0, 1fr)); grid-template-rows: 20px 20px; }
  .pt-sw { width: 100%; height: 20px; }
  .amp-win { width: calc(100vw - 16px) !important; }
  .amp-ctrls button { height: 30px; flex: 1; }
  .amp-pl { font-size: 13px; max-height: 180px; }
  .amp-pl li { padding: 5px 4px; }
  .run-row { padding-left: 16px; }
  .pv-btn { width: 42px; height: 36px; }
}