/* OneCity resident portal (/my) */
.oc-my { max-width: 1040px; margin: 0 auto; }
.oc-my-hello { font-size: 1.25rem; font-weight: 600; }
.oc-my-tools .btn { margin-left: 6px; }
.oc-my-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-color, #33373d); }
.oc-my-nav a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: inherit; text-decoration: none; }
.oc-my-nav a.active, .oc-my-nav a:hover { background: var(--fg-hover-color, rgba(127,127,127,.15)); font-weight: 600; }
.oc-my-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.oc-my-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border-color, #33373d); border-radius: 14px;
	color: inherit; text-decoration: none !important; background: var(--card-bg, rgba(127,127,127,.06)); transition: transform .1s; }
.oc-my-tile:hover { transform: translateY(-2px); border-color: var(--primary, #4c8bf5); }
.oc-my-tile-icon { font-size: 28px; }
.oc-my-tile span { font-size: .9rem; opacity: .75; }
.oc-my-form { max-width: 720px; }
.oc-my-map { height: 340px; border-radius: 12px; border: 1px solid var(--border-color, #33373d); }
.oc-my-map-sm { height: 240px; }
.oc-my-table td, .oc-my-table th { vertical-align: middle; }
.oc-my-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(127,127,127,.18); }
.oc-st-open { background: rgba(76,139,245,.2); } .oc-st-replied, .oc-st-paused { background: rgba(236,173,75,.25); }
.oc-st-resolved, .oc-st-closed { background: rgba(60,170,90,.25); }
.oc-my-progress { display: flex; gap: 0; margin: 10px 0 16px; }
.oc-my-step { flex: 1; text-align: center; font-size: .85rem; opacity: .6; position: relative; padding-top: 22px; }
.oc-my-step span { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid currentColor; }
.oc-my-step::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: currentColor; opacity: .35; z-index: 0; }
.oc-my-step:first-child::before { display: none; } .oc-my-step span { z-index: 1; background: var(--bg-color, #fff); }
.oc-my-step.done::before { background: #3caa5a; opacity: 1; }
.oc-my-step.done { opacity: 1; font-weight: 600; } .oc-my-step.done span { background: #3caa5a; border-color: #3caa5a; }
.oc-my-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.oc-my-card { border: 1px solid var(--border-color, #33373d); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.oc-my-photo { max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 8px; }
.oc-my-reply { border-left: 3px solid var(--primary, #4c8bf5); padding: 4px 10px; margin: 8px 0; }
.oc-pay-box { max-width: 480px; margin: 0 auto; border: 1px solid var(--border-color, #33373d); border-radius: 16px; padding: 22px; }
.oc-pay-sim { background: #ecad4b; color: #1d1d1d; font-weight: 700; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
.oc-pay-amount { font-size: 2.2rem; font-weight: 700; margin: 6px 0 16px; }
.oc-pay-done h3 { color: #3caa5a; }