/* =============== my.tungo.xyz - ACCOUNT PAGES (SETTINGS, NOTIFICATIONS, SUPPORT, PROGRESS, THE DASHBOARD CARD) =============== */ /* LOADED AFTER Default.css ON my.tungo.xyz ONLY (my.tungo.xyz/index.php). CONSUMES Default.css's :root TOKENS - ORANGE STAYS THE ONLY ACCENT (VISUALS.md). PAGE CONTENT IS SCOPED UNDER .MyPage, WHICH RESETS THE MARKETING-SITE DEFAULTS (h1 400%, p 112%, 16px INPUT PADDING + text-indent, button space-between) TO AN APP SCALE. REMEMBER Default.css's `* { background: none; }` - EVERY SURFACE SETS ITS OWN BACKGROUND */ .MyPage { box-sizing: border-box; width: 100%; max-width: 1125px; margin: 0 auto; padding: 2rem 1rem 4rem; color: var(--color-text); font-size: 15px; line-height: 1.5; } .MyPage h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; } .MyPage h2 { font-size: 1.05rem; font-weight: 700; margin: 0; } .MyPage h3 { font-size: 0.95rem; font-weight: 700; margin: 0.25rem 0 0; } .MyPage p, .MyPage p:last-of-type { font-size: inherit; margin: 0; } .MyPage ul, .MyPage ol { margin: 0; padding: 0; } .MyMuted { color: var(--color-text-muted); } .MySmall { font-size: 0.84rem; } .MySub { display: block; color: var(--color-text-muted); font-size: 0.8rem; font-weight: 400; } .MyVisuallyHidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .MyPage .DangerText, .MyButton.DangerText { color: var(--color-danger); } .Hot { color: var(--color-accent); } /* ---------- FORM CONTROLS ---------- */ .MyPage label, .MyLabel { display: block; font-weight: 700; font-size: 0.86rem; margin: 0 0 0.4rem; color: var(--color-text); } .MyPage input:not([type="hidden"]):not([type="checkbox"]), .MyPage select, .MyPage textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; text-indent: 0; font-size: 0.95rem; line-height: 1.4; border-radius: var(--radius-sm); background-color: var(--color-surface); } .MyPage select { padding-right: 38px; } .MyPage textarea { min-height: 110px; resize: vertical; } .MyPage textarea.Tall { min-height: 170px; } .MyPage .PasswordFieldRow input:not([type="hidden"]):not([type="checkbox"]) { padding-right: 2.75rem; } .MyPage .PasswordToggle { margin-top: 0; } .MyPage output.Invalid { margin-top: 0.35rem; } .MyField { display: flex; flex-direction: column; min-width: 0; } .MyFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .MyFormGrid .Full { grid-column: 1 / -1; } .MyCounter { align-self: flex-end; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.25rem; } .MyCodeField { max-width: 230px; } .MyPage .MyCodeInput { font-size: 1.4rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; } .MyInline { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; } .MyInline input { flex: 1 1 180px; width: auto !important; } .MyInlineBlock { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); } .MyInlineBlock.Hidden { display: none; } .MyLocked { display: flex; align-items: center; gap: 0.6rem; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); font-weight: 600; overflow-wrap: anywhere; } /* ---------- BUTTONS - SAME ORANGE PILL LANGUAGE AS .ButtonPrimary, SIZED FOR SETTINGS ---------- */ .MyButton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-sizing: border-box; padding: 0.65rem 1.15rem; border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; overflow: visible; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .MyButton:hover { opacity: 1; border-color: var(--color-accent); color: var(--color-accent); } .MyButton:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } .MyButton.Primary { background-color: var(--color-accent); border-color: var(--color-accent); color: #fefefe; box-shadow: 0 6px 14px -8px rgba(226, 128, 17, 0.6); } .MyButton.Primary:hover { background-color: #ec8b1a; color: #fefefe; transform: translateY(-1px); } .MyButton.Small { padding: 0.4rem 0.8rem; font-size: 0.8rem; } .MyButton.Ghost { border-color: transparent; background-color: transparent; } .MyButton.Ghost:hover { background-color: var(--color-accent-tint); } .MyButton.DangerText:hover { border-color: var(--color-danger); color: var(--color-danger); background-color: var(--color-danger-tint); } .MyButton[data-busy] { opacity: 0.6; pointer-events: none; } .MyLink { color: var(--color-accent); font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; } .MyBack { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 0.9rem; } .MyBack:hover { color: var(--color-accent); opacity: 1; } /* ---------- LAYOUT ---------- */ .MyHeader { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .MyHeader .MyMuted { margin-top: 0.3rem; } .MyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .MyGrid.Side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .MyGrid .Span2 { grid-column: 1 / -1; } .MyStack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .MyRow { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .MyActionsRow { margin: 1.25rem 0 0.6rem; } .MyNarrow { max-width: 560px; margin: 2rem auto; } .MyPanelIntro { margin-bottom: 0.9rem !important; font-size: 0.88rem; } .MyCard { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.35rem 1.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .MyCard.Danger { border-color: rgba(211, 47, 47, 0.3); } .MyCardHead { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .MyCardHead h2 i { color: var(--color-accent); margin-right: 0.3rem; } .MyNotice { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.85rem 1.1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--color-accent-tint); border: 1px solid var(--color-accent-light); font-size: 0.9rem; } .MyNotice > i { color: var(--color-accent); } .MyEmpty { text-align: center; color: var(--color-text-muted); padding: 1.5rem 1rem; font-size: 0.92rem; } .MyEmpty > i { display: block; font-size: 1.7rem; color: var(--color-accent-light); margin-bottom: 0.6rem; } .MyEmpty.Big { padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .MyEmpty.Big > i { font-size: 2.4rem; color: var(--color-accent); } .MyEmpty.Big h1, .MyEmpty.Big h2 { color: var(--color-text); font-size: 1.4rem; } .MyTag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; background: #efece6; color: #5f5b53; } .MyTag.Good { background: rgba(46, 125, 50, 0.12); color: #2e7d32; } .MyTag.Accent { background: var(--color-accent-tint-strong); color: #a85c08; } .MyTag.Strong { background: var(--color-accent); color: #fefefe; } .MyTag.Muted { background: #efece6; color: #7a7a7a; } .MyProgressBar { height: 8px; border-radius: 999px; background: var(--color-surface-alt); overflow: hidden; } .MyProgressBar > span { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: 999px; transition: width 0.3s ease; } .MyList { display: flex; flex-direction: column; } .MyList > a, .MyList > div { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-weight: 500; min-width: 0; } .MyList > a:hover { color: var(--color-accent); opacity: 1; } .MyList > :last-child { border-bottom: none; } .MyList.Compact > div { padding: 0.45rem 0; font-size: 0.9rem; } .MyTicks { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; } .MyTicks li { display: flex; gap: 0.55rem; align-items: baseline; } .MyTicks i { color: var(--color-accent); } /* ---------- RINGS (LEVEL / DAILY GOAL) - --Goal IS 0-100. 169.65 = THE CIRCLE'S CIRCUMFERENCE (2 x PI x 27) ---------- */ .MyRing, .MyGoalRing { position: relative; width: 58px; height: 58px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .MyRing.Big { width: 76px; height: 76px; } .MyRing svg, .MyGoalRing svg { position: absolute; inset: 0; width: 100%; height: 100%; } .MyRing svg circle, .MyGoalRing svg circle { fill: none; stroke: var(--color-surface-alt); stroke-width: 6; } .MyRing svg circle.Fill, .MyGoalRing svg circle.Fill { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 169.65; stroke-dashoffset: calc(169.65 - (169.65 * var(--Goal, 0) / 100)); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.6s ease; } .MyRing strong, .MyGoalRing strong { position: relative; font-size: 1.1rem; font-weight: 800; } .MyRing.Big strong { font-size: 1.5rem; } .MyGoalRing strong small { font-size: 0.65rem; color: var(--color-text-muted); font-weight: 700; } .MyGoalRing.Empty { border-radius: 50%; background: var(--color-accent-tint); color: var(--color-accent); font-size: 1.4rem; } /* ---------- SETTINGS: HERO ---------- */ .MyHero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding: 1.6rem 1.7rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg); background: linear-gradient(160deg, #1a1a1a 0%, #222222 55%, #3a2308 100%); color: #fefefe; box-shadow: var(--shadow-card-hover); } .MyAvatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #fefefe; background: var(--Avatar, #e28011); box-shadow: 0 0 0 4px rgba(254, 254, 254, 0.15); } .MyHeroText { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .MyPage .MyHero h1 { color: #fefefe; } .MyHeroText p { color: rgba(254, 254, 254, 0.72); display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .MyHeroText .Flag { width: 18px; height: 18px; padding: 0; box-sizing: border-box; } .MyMotivation { color: #f4b860 !important; font-style: italic; } .MyHeroStats { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; } .MyRingStat, .MyStat { display: flex; align-items: center; gap: 0.6rem; } .MyRingStat span, .MyStat span { display: flex; flex-direction: column; line-height: 1.2; } .MyRingStat small, .MyStat small { color: rgba(254, 254, 254, 0.6); font-size: 0.75rem; } .MyHero .MyRing svg circle { stroke: rgba(254, 254, 254, 0.15); } .MyHero .MyRing svg circle.Fill { stroke: var(--color-accent); } .MyStat > i { font-size: 1.3rem; color: rgba(254, 254, 254, 0.55); } .MyStat > i.Hot { color: var(--color-accent); } .MyStat strong { font-size: 1.2rem; } /* ---------- SETTINGS: CHECKLIST ---------- */ .MyChecklist { margin-bottom: 1.25rem; } .MyChecklist ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.55rem 1.2rem; } .MyChecklist li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; } .MyChecklist li i { color: var(--color-text-muted); font-size: 1.05rem; } .MyChecklist li.Done { color: var(--color-text-muted); text-decoration: line-through; } .MyChecklist li.Done i { color: #2e7d32; } .MyChecklist.Compact { margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); display: flex; flex-direction: column; gap: 0.7rem; } .MyChecklist.Compact h3 { margin: 0; font-size: 0.95rem; } .MyChecklist a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-light); text-underline-offset: 3px; font-weight: 600; } /* ---------- SETTINGS: TABS ---------- */ .MyTabs { display: flex; gap: 0.35rem; overflow-x: auto; margin-bottom: 1.25rem; padding: 0.35rem; border-radius: 999px; background: var(--color-surface-alt); scrollbar-width: none; } .MyTabs::-webkit-scrollbar { display: none; } .MyTabs button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px; background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 0.88rem; font-weight: 700; white-space: nowrap; } .MyTabs button:hover { color: var(--color-text); opacity: 1; } .MyTabs button.Active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); } .MyTabs button.Active i { color: var(--color-accent); } .MyPanel.Hidden { display: none; } /* ---------- SETTINGS: CHOICES ---------- */ .MySwatches { display: flex; gap: 0.65rem; flex-wrap: wrap; } .MySwatch { width: 40px; height: 40px; border-radius: 50%; background: var(--Avatar); color: #fefefe; justify-content: center; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06); transition: transform 0.15s ease; } .MySwatch:hover { transform: scale(1.08); opacity: 1; } .MySwatch.Selected { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--Avatar); } .MyOptions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; } .MyOptions.Four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .MyOptions.Three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .MyOption { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.9rem; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } .MyOption.Row { flex-direction: row; align-items: center; justify-content: flex-start; font-weight: 600; } .MyOption small { color: var(--color-text-muted); font-weight: 500; } .MyOption:hover { border-color: var(--color-accent-light); background: var(--color-accent-tint); opacity: 1; } .MyOption.Selected { border-color: var(--color-accent); background: var(--color-accent-tint-strong); box-shadow: inset 0 0 0 1px var(--color-accent); } .MyOption.Selected strong { color: #a85c08; } .MySwitch { display: inline-flex !important; align-items: center; gap: 0.5rem; margin: 0 !important; font-weight: 600 !important; cursor: pointer; } .MySwitch.Locked { cursor: default; opacity: 0.75; } .MySwitchLabel { font-size: 0.82rem; color: var(--color-text-muted); } .MySwitch .NotifyToggleCheckbox:disabled { cursor: default; } .MyDays { display: flex; gap: 0.4rem; flex-wrap: wrap; } .MyDay { position: relative; margin: 0 !important; } .MyDay input { position: absolute; opacity: 0; width: 1px; height: 1px; } .MyDay span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s ease; } .MyDay input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: #fefefe; } .MyDay input:focus-visible + span { box-shadow: var(--shadow-focus-ring); } .MyPrefs { display: flex; flex-direction: column; } .MyPrefsHead, .MyPrefsRow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; gap: 1rem; align-items: center; } .MyPrefsHead { padding-bottom: 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .MyPrefsRow { padding: 0.85rem 0; border-top: 1px solid var(--color-border); } .MyPrefsName { display: flex; gap: 0.75rem; align-items: flex-start; } .MyPrefsName > i { color: var(--color-accent); margin-top: 0.2rem; } .MyPrefsName span { display: flex; flex-direction: column; } .MyPrefsName small { color: var(--color-text-muted); font-size: 0.82rem; } /* ---------- SETTINGS: SECURITY ---------- */ .MySteps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 1rem; } .MySteps > li { counter-increment: step; position: relative; padding-left: 2.4rem; display: flex; flex-direction: column; gap: 0.5rem; } .MySteps > li::before { content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-accent); color: #fefefe; font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; } .MyQR { align-self: flex-start; padding: 10px; background: #fefefe; border: 1px solid var(--color-border); border-radius: var(--radius-sm); line-height: 0; } .MySecret { align-self: flex-start; padding: 0.45rem 0.75rem; border-radius: 8px; background: var(--color-surface-alt); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; word-break: break-all; } .MyMethod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--color-border); } .MyMethod > i { font-size: 1.2rem; color: var(--color-accent); } .MyMethod div { display: flex; flex-direction: column; } .MyMethod small { color: var(--color-text-muted); font-size: 0.82rem; } .MyDetails { padding: 0; background: transparent !important; } .MyDetails summary { padding: 0.35rem 0; font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; border: none !important; margin: 0 !important; } .MyDetails[open] { display: flex; flex-direction: column; gap: 0.8rem; } .MyBackupCodes { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--color-accent-tint); border: 1px dashed var(--color-accent-light); } .MyCodeList { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1rem; } .MyCodeList code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; } .MyStrength ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.5rem; } .MyStrength li { font-size: 0.8rem; color: var(--color-text-muted); } .MyStrength li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem; border-radius: 50%; background: var(--color-border); vertical-align: middle; } .MyStrength li.Ok { color: #2e7d32; } .MyStrength li.Ok::before { background: #2e7d32; } .MyPlan h2 { font-size: 1.5rem; } .MyPlan h2 small { font-size: 0.95rem; color: var(--color-text-muted); font-weight: 600; } /* ---------- NOTIFICATIONS PAGE ---------- */ .MyChips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1rem; } .MyChips a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; font-weight: 700; } .MyChips a span { color: var(--color-text-muted); font-weight: 600; } .MyChips a.Active { background: var(--color-accent); border-color: var(--color-accent); color: #fefefe; } .MyChips a.Active span { color: rgba(254, 254, 254, 0.8); } .MyNotifications { display: flex; flex-direction: column; } .MyNotification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: flex-start; padding: 1rem 0.6rem; border-bottom: 1px solid var(--color-border); border-radius: 10px; } .MyNotification:last-child { border-bottom: none; } .MyNotification.Unread { background: var(--color-accent-tint); } .MyNotificationIcon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent-tint-strong); color: var(--color-accent); } .MyNotificationBody { display: flex; flex-direction: column; gap: 0.2rem; } .MyNotificationActions { display: flex; gap: 0.3rem; align-items: center; } .MyPager { display: flex; justify-content: space-between; align-items: center; padding-top: 0.8rem; font-size: 0.88rem; } /* ---------- SUPPORT ---------- */ .MyThread { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; } .MyBubble { max-width: 85%; padding: 0.9rem 1.1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .MyBubble.Mine { align-self: flex-end; background: var(--color-accent-tint-strong); border: 1px solid var(--color-accent-light); border-bottom-right-radius: 4px; } .MyBubble.Theirs { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; } .MyBubbleHead { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.35rem; } .MyBubbleHead strong { color: var(--color-text); } .MyBubbleBody { white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------- PROGRESS ---------- */ .MyTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .MyTile { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-width: 0; } .MyTile.Wide { grid-column: span 2; } .MyTile > span { display: flex; flex-direction: column; min-width: 0; } .MyTileValue { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .MyTileValue.Small { font-size: 1.15rem; } .MyTileValue small { font-size: 0.9rem; color: var(--color-text-muted); } .MyCalendarWrap { overflow-x: auto; } .MyCalendar { display: flex; gap: 4px; } .MyCalendarWeek { display: flex; flex-direction: column; gap: 4px; } .MyCalendar span, .MyCalendarKey span[class^="Shade"] { display: block; width: 16px; height: 16px; border-radius: 4px; } .Shade0 { background: var(--color-surface-alt); } .Shade1 { background: rgba(226, 128, 17, 0.25); } .Shade2 { background: rgba(226, 128, 17, 0.5); } .Shade3 { background: rgba(226, 128, 17, 0.75); } .Shade4 { background: #e28011; } .MyCalendar span.Future { background: transparent; box-shadow: inset 0 0 0 1px var(--color-surface-alt); } .MyCalendarKey { display: flex; align-items: center; gap: 4px; margin-top: 0.7rem; } .MyCompare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .MyCompare > div { display: flex; flex-direction: column; gap: 0.15rem; } .MyCompare strong { font-size: 1.4rem; } .MyChange { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); } .MyChange.Up { color: #2e7d32; } .MyChange.Down { color: var(--color-danger); } .MyChart { position: relative; height: 230px; min-width: 0; } .MyGames { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; } .MyGame { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; transition: border-color 0.15s ease, transform 0.15s ease; } .MyGame:hover { border-color: var(--color-accent-light); transform: translateY(-2px); opacity: 1; } .MyGame > i { font-size: 1.3rem; color: var(--color-accent); margin-bottom: 0.3rem; } .MyGame small { font-size: 0.82rem; } .MyWords { display: flex; gap: 0.45rem; flex-wrap: wrap; } .MyWord { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-surface-alt); font-size: 0.85rem; font-weight: 600; } .MyWord.Good { background: rgba(46, 125, 50, 0.1); color: #2e7d32; } .MyWeekBars, .MyMiniBars { display: flex; align-items: flex-end; gap: 6px; height: 110px; } .MyWeekBars > span, .MyMiniBar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .MyWeekBars > span > span, .MyMiniBar > span { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--color-accent); min-height: 2px; } .MyWeekBars small, .MyMiniBar small { font-size: 0.65rem; color: var(--color-text-muted); white-space: nowrap; } .MyBadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; } .MyBadges.Small { grid-template-columns: repeat(auto-fill, 44px); gap: 0.5rem; } .MyBadgeCard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1rem 0.6rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); opacity: 0.6; } .MyBadgeCard.Earned { opacity: 1; background: var(--color-accent-tint); } .MyBadgeTile { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-border); color: #fefefe; font-size: 1.1rem; } .MyBadgeTile.Earned { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(226, 128, 17, 0.2); } /* ---------- DASHBOARD CARD (INSIDE THE OBJECT TREE - NOT UNDER .MyPage) ---------- */ .MyDashCard { display: flex; flex-direction: column; gap: 1.2rem; } .MyDashGrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; } .MyDashGoal { display: flex; align-items: center; gap: 0.85rem; } .MyDashGoal h3 { margin: 0; font-size: 1.05rem; } .MyDashGoal .MyMuted { font-size: 0.8rem; } .MyDashWeek { display: flex; flex-direction: column; gap: 0.3rem; } .MyDashWeek .MyMiniBars { height: 70px; } .MyDashCard .GameStatsBar { margin: 0; } .MyDashLinks { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; } .MyDashLinks a { font-weight: 700; } /* ---------- LANGUAGE PICKER WITH CIRCLE FLAGS (Settings > Learning) - A BUTTON AND A LISTBOX, BECAUSE A NATIVE