/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
	--up-purple:        #9810fa;
	--up-purple-tint:   rgba(139,0,255,0.08);
	--up-purple-tint2:  rgba(139,0,255,0.1);
	--up-text:          #030213;
	--up-muted:         #717182;
	--up-very-muted:    #b0b0ba;
	--up-border:        rgba(0,0,0,0.1);
	--up-border-light:  rgba(0,0,0,0.06);
	--up-bg:            #fafafa;
	--up-input-bg:      #f3f3f5;
	--up-card-bg:       #fff;
	--up-radius:        0.625rem;
	--up-radius-sm:     0.5rem;
	--up-font:          ui-sans-serif, system-ui, sans-serif;
	--up-red:           #dc2626;
	--up-red-tint:      rgba(220,38,38,0.08);
	--up-green:         #16a34a;
	--up-green-tint:    rgba(22,163,74,0.1);
	--up-amber:         #d97706;
	--up-amber-tint:    rgba(217,119,6,0.1);
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.oko-up-wrap {
	font-family: var(--up-font);
	background:  var(--up-bg);
	min-height:  400px;
}

/* ── Login gate ───────────────────────────────────────────────────────────── */
.oko-up-gate {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         60px 24px;
	text-align:      center;
	gap:             16px;
}
.oko-up-gate-icon {
	width:            64px;
	height:           64px;
	border-radius:    50%;
	background:       var(--up-purple-tint);
	display:          flex;
	align-items:      center;
	justify-content:  center;
}
.oko-up-gate-icon svg { color: var(--up-purple); }
.oko-up-gate h2 { font-size: 18px; font-weight: 500; color: var(--up-text); margin: 0; }
.oko-up-gate p  { font-size: 13.5px; color: var(--up-muted); margin: 0; line-height: 1.6; }
.oko-up-gate-btn {
	display:         inline-block;
	padding:         11px 28px;
	background:      var(--up-purple);
	color:           #fff;
	border-radius:   var(--up-radius);
	font-size:       14px;
	font-weight:     500;
	text-decoration: none !important;
	font-family:     var(--up-font);
}

.oko-up-gate-btn:hover {
	color: #fff;
	background: #7a00e6;
}

/* ── Tab nav ──────────────────────────────────────────────────────────────── */
.oko-up-tabs {
	display:          flex;
	align-items:      center;
	gap:              2px;
	padding:          0 28px;
	border-bottom:    1px solid var(--up-border);
	background:       var(--up-card-bg);
	overflow-x:       auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:  none;
}
.oko-up-tabs::-webkit-scrollbar { display: none; }

.oko-up-tab {
	display:         flex;
	align-items:     center;
	gap:             7px;
	padding:         14px 16px;
	border:          none;
	border-bottom:   2.5px solid transparent;
	background:      none;
	font-family:     var(--up-font);
	font-size:       13.5px;
	font-weight:     400;
	color:           var(--up-muted);
	cursor:          pointer;
	white-space:     nowrap;
	text-decoration: none !important;
	transition:      color 0.15s, border-color 0.15s;
}
.oko-up-tab svg { flex-shrink: 0; }
.oko-up-tab.is-active {
	color:        var(--up-purple);
	border-color: var(--up-purple);
	font-weight:  500;
}
.oko-up-tab:hover:not(.is-active) { color: var(--up-text); }
.oko-up-tab-disabled {
	opacity: 0.45;
	cursor:  not-allowed;
	pointer-events: none;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.oko-up-content { padding: 32px 10px; max-width: 100%; margin: 0 auto; }
#oko-up-routes-module { max-width: 80%; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.oko-up-card {
	background:    var(--up-card-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	padding:       24px;
}
.oko-up-card-hdr {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   16px;
}
.oko-up-card-title {
	font-size:   15px;
	font-weight: 500;
	color:       var(--up-text);
	margin:      0;
}
.oko-up-see-all {
	background:      none;
	border:          none;
	cursor:          pointer;
	font-size:       12.5px;
	color:           var(--up-purple);
	font-weight:     500;
	display:         flex;
	align-items:     center;
	gap:             4px;
	font-family:     var(--up-font);
	padding:         0;
	text-decoration: none !important;
}

/* ── Dashboard welcome ────────────────────────────────────────────────────── */
.oko-up-welcome { margin-bottom: 28px; }
.oko-up-welcome-row {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-wrap:   wrap;
}
.oko-up-h1 { font-size: 24px; font-weight: 500; color: var(--up-text); margin: 0; }
.oko-up-subtitle { font-size: 13.5px; color: var(--up-muted); margin-top: 6px; }

/* ── Role badge ───────────────────────────────────────────────────────────── */
.oko-up-role-badge {
	display:       inline-block;
	padding:       0px 12px;
	border-radius: 999px;
	font-size:     12px;
	font-weight:   600;
	letter-spacing: 0.02em;
}
.oko-up-role-badge--explorer { background: var(--up-purple-tint2); color: var(--up-purple); }
.oko-up-role-badge--kurator  { background: rgba(22, 163, 74, 0.1);   color: #16a34a; }
.oko-up-role-badge--opiekun  { background: rgba(217, 119, 6, 0.1);   color: rgb(217, 119, 6); }

/* ── Dashboard grid ───────────────────────────────────────────────────────── */
.oko-up-dash-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap:                   20px;
}

/* ── Favorite preview row ─────────────────────────────────────────────────── */
.oko-up-fav-list { display: flex; flex-direction: column; gap: 10px; }
.oko-up-fav-item {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       10px;
	border-radius: var(--up-radius-sm);
	border:        1px solid var(--up-border-light);
	text-decoration: none !important;
	transition:    background 0.12s;
}
.oko-up-fav-item:hover { background: #f8f8fa; }
.oko-up-fav-thumb {
	width:        52px;
	height:       52px;
	border-radius: var(--up-radius-sm);
	object-fit:   cover;
	flex-shrink:  0;
	background:   var(--up-input-bg);
	display:      flex;
	align-items:  center;
	justify-content: center;
	overflow:     hidden;
}
.oko-up-fav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oko-up-fav-name {
	font-size:     13px;
	font-weight:   500;
	color:         var(--up-text);
	margin:        0 !important;
	padding-bottom:        0 !important;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	text-decoration: none !important;
}
.oko-up-fav-meta { font-size: 12px; color: var(--up-muted); margin: 2px 0 0 !important; }
.oko-up-heart { color: var(--up-purple); flex-shrink: 0; }

/* ── Route preview row ────────────────────────────────────────────────────── */
.oko-up-route-list { display: flex; flex-direction: column; gap: 10px; }
.oko-up-route-item {
	padding:        14px 16px;
	border-radius:  var(--up-radius-sm);
	border:         1px solid rgba(0,0,0,0.08);
	cursor:         pointer;
	text-decoration: none !important;
	display:        block;
	transition:     border-color 0.12s, background 0.12s;
}
.oko-up-route-item:hover {
	border-color: rgba(139,0,255,0.2);
	background:   rgba(139,0,255,0.02);
}
.oko-up-route-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}
.oko-up-route-inner { display: flex; align-items: center; gap: 10px; }
.oko-up-route-icon {
	width:           34px;
	height:          34px;
	border-radius:   var(--up-radius-sm);
	background:      var(--up-purple-tint);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.oko-up-route-icon svg { color: var(--up-purple); }
.oko-up-route-name  { font-size: 13px; font-weight: 500; color: var(--up-text); margin: 0; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.oko-up-route-meta  { font-size: 11.5px; color: var(--up-muted); margin: 2px 0 0; margin-bottom: 0 !important; }

/* ── "Create route" dashed button ────────────────────────────────────────── */
.oko-up-btn-dashed {
	padding:         10px;
	border-radius:   var(--up-radius-sm);
	border:          1.5px dashed rgba(0,0,0,0.15);
	background:      none;
	cursor:          pointer;
	font-size:       13px;
	color:           var(--up-muted);
	display:         flex;
	align-items:     center;
	justify-content: center;
	text-decoration: none !important;
	gap:             6px;
	font-family:     var(--up-font);
	transition:      border-color 0.12s, color 0.12s;
	width:           100%;
}
.oko-up-btn-dashed:hover { border-color: var(--up-purple); color: var(--up-purple); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.oko-up-empty {
	text-align: center;
	padding:    48px 16px;
	color:      var(--up-muted);
	font-size:  13.5px;
}
.oko-up-empty a { color: var(--up-purple); text-decoration: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   FAVORITES MODULE
   ════════════════════════════════════════════════════════════════════════════ */

/* Header */
.oko-up-mod-hdr {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   24px;
	flex-wrap:       wrap;
	gap:             12px;
}
.oko-up-mod-title { font-size: 22px; font-weight: 500; color: var(--up-text); margin: 0; }
.oko-up-mod-count { font-size: 13px; color: var(--up-muted); margin-top: 4px; }

/* Filter bar */
.oko-up-filter-bar {
	background:    var(--up-card-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	margin-bottom: 20px;
	overflow:      hidden;
}
.oko-up-filter-chips { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.oko-up-filter-extra { padding: 14px 20px; }
.oko-up-filter-lbl-row {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 12px;
}
.oko-up-filter-lbl { font-size: 13px; font-weight: 500; color: var(--up-text); }

/* AND/OR toggle */
.oko-up-logic-toggle {
	display:       flex;
	gap:           2px;
	background:    var(--up-input-bg);
	border-radius: var(--up-radius-sm);
	padding:       2px;
	margin-left:   8px;
}
.oko-up-logic-btn {
	padding:       3px 10px;
	border-radius: 0.375rem;
	background:    transparent;
	color:         var(--up-muted);
	border:        none;
	cursor:        pointer;
	font-size:     11.5px;
	font-family:   var(--up-font);
	transition:    background 0.12s, color 0.12s;
}
.oko-up-logic-btn.is-active { background: var(--up-purple); color: #fff; font-weight: 600; }

/* Filter fields row */
.oko-up-filter-fields {
	display:     flex;
	flex-wrap:   wrap;
	gap:         10px;
	align-items: flex-end;
}
.oko-up-filter-input {
	padding:       7px 10px !important;
	background:    var(--up-card-bg) !important;
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius-sm) !important;
	font-size:     13px !important;
	color:         var(--up-text) !important;
	outline:       none;
	font-family:   var(--up-font);
	transition:    border-color 0.15s !important;
	height: 37.45px !important;
}
.oko-up-filter-input:focus { border-color: var(--up-purple); }
.oko-up-filter-input--loc { min-width: 180px; }
.oko-up-filter-input--author { min-width: 140px; }
.oko-up-filter-input--year { width: 80px; }
.oko-up-filter-input--stan { min-width: 160px; cursor: pointer; }
.oko-up-year-sep { font-size: 12px; color: var(--up-very-muted); }
.oko-up-year-wrap { display: flex; align-items: center; gap: 6px; }

/* Clear filters btn */
.oko-up-btn-clear {
	display:       flex;
	align-items:   center;
	gap:           4px;
	padding:       6px 12px;
	border-radius: var(--up-radius-sm);
	background:    var(--up-red-tint);
	color:         var(--up-red);
	border:        none;
	cursor:        pointer;
	font-size:     12.5px;
	font-family:   var(--up-font);
}

/* Technique chips in filter */
.oko-up-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.oko-up-chip {
	display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    background: #fff;
    color: #717182;
    font-size: 12.5px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.oko-up-chip:focus{
	background: #fff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
    color: #717182;
}
.oko-up-chip:hover  { 
	border-color: rgba(139, 0, 255, 0.35);
    color: #030213;
    background-color: #fff;
}
.oko-up-chip.is-active {
	background: #9810fa;
    border-color: #9810fa;
    color: #fff;
    font-weight: 500;
}
.oko-up-chip-badge {
	background:    rgba(255,255,255,0.25);
	border-radius: 999px;
	padding:       1px 6px;
	font-size:     10.5px;
}
.oko-up-chip.is-active .oko-up-chip-badge { background: rgba(255,255,255,0.25); }
.oko-up-chip:not(.is-active) .oko-up-chip-badge { background: rgba(0,0,0,0.07); color: var(--up-muted); }

/* Favorites grid */
.oko-up-fav-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   16px;
}

#oko-up-fav-grid{
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   16px;
}

/* Favorite card */
.oko-up-fav-card {
	background:    var(--up-card-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	overflow:      hidden;
	transition:    box-shadow 0.15s;
}
.oko-up-fav-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.oko-up-fav-card-img-wrap { position: relative; }
.oko-up-fav-card-img {
	width:      100%;
	height:     160px;
	object-fit: cover;
	display:    block;
	background: var(--up-input-bg);
}
.oko-up-fav-card-img-placeholder {
	width:           100%;
	height:          160px;
	background:      var(--up-input-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.oko-up-fav-stan-badge {
	position:        absolute;
	top:             10px;
	right:           10px;
	padding:         3px 10px;
	border-radius:   999px;
	font-size:       11.5px;
	font-weight:     500;
	backdrop-filter: blur(4px);
}
.oko-up-fav-body { padding: 14px 16px; }
.oko-up-fav-card-name { font-size: 13.5px; font-weight: 500; color: var(--up-text); margin: 0 0 4px; }
.oko-up-fav-loc-row {
	display:     flex;
	align-items: center;
	gap:         4px;
	margin-bottom: 4px;
}
.oko-up-fav-loc-row svg { color: var(--up-very-muted); flex-shrink: 0; }
.oko-up-fav-loc-text { font-size: 12px; color: var(--up-muted); }
.oko-up-fav-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      8px;
}
.oko-up-technique-pill {
	padding:       2px 10px;
	border-radius: 999px;
	background:    var(--up-input-bg);
	color:         var(--up-muted);
	font-size:     11.5px;
	font-weight:   400;
}
.oko-up-year-text { font-size: 11.5px; color: var(--up-very-muted); }
.oko-up-fav-actions { display: flex; gap: 8px; margin-top: 12px; }
.oko-up-btn-map {
	flex:            1;
	padding:         7px 0;
	background:      var(--up-purple);
	color:           #fff;
	border:          none;
	border-radius:   var(--up-radius-sm);
	font-size:       12.5px;
	font-weight:     500;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	font-family:     var(--up-font);
	text-decoration: none !important;
}
.oko-up-btn-map:hover{
	color: #fff;
	background: #7a00e6;
}
.oko-up-btn-remove-fav {
	height:          34px;
	border:          1px solid rgba(220,38,38,0.2);
	border-radius:   var(--up-radius-sm);
	background:      rgba(220,38,38,0.06);
	color:           var(--up-red);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	transition:      background 0.12s;
}
.oko-up-btn-remove-fav:hover { background: rgba(220,38,38,0.14); }

/* Pagination */
.oko-up-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.oko-up-page-btn {
	min-width:     36px;
	height:        36px;
	padding:       0 10px;
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius-sm);
	background:    var(--up-card-bg);
	color:         var(--up-muted);
	cursor:        pointer;
	font-size:     13px;
	font-family:   var(--up-font);
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background 0.12s, color 0.12s, border-color 0.12s;
}
.oko-up-page-btn:hover:not(.is-active) { border-color: var(--up-purple); color: var(--up-purple); }
.oko-up-page-btn.is-active { background: var(--up-purple); color: #fff; border-color: var(--up-purple); }
.oko-up-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.oko-up-page-ellipsis { color: var(--up-very-muted); font-size: 13px; padding: 0 4px; }

/* ════════════════════════════════════════════════════════════════════════════
   ROUTES MODULE
   ════════════════════════════════════════════════════════════════════════════ */

.oko-up-routes-list { display: flex; flex-direction: column; gap: 12px; }

/* Route card */
.oko-up-route-card {
	background:    var(--up-card-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	overflow:      hidden;
}
.oko-up-route-card-hdr {
	display:     flex;
	align-items: center;
	gap:         14px;
	padding:     16px 20px;
	cursor:      pointer;
	transition:  background 0.12s;
}
.oko-up-route-card-hdr:hover { background: #f8f8fa; }
.oko-up-route-card-icon {
	width:           38px;
	height:          38px;
	border-radius:   var(--up-radius-sm);
	background:      var(--up-purple-tint);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.oko-up-route-card-icon svg { color: var(--up-purple); }
.oko-up-route-card-info { flex: 1; }
.oko-up-route-card-name { font-size: 14px; font-weight: 500; color: var(--up-text); margin: 0; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.oko-up-route-card-meta { font-size: 12px; color: var(--up-muted); margin: 2px 0 0; margin-bottom: 0 !important; }
.oko-up-route-card-actions { display: flex; align-items: center; gap: 8px; }
.oko-up-btn-delete-route {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    color: #717182;
    transition: color 0.15s, transform 0.15s, background 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.oko-up-btn-delete-route:hover { color: var(--up-red); background: var(--up-red-tint); border: 1px solid var(--up-red); }
.oko-up-chevron { color: var(--up-muted); }

/* Route card expanded body */
.oko-up-route-body {
	border-top: 1px solid var(--up-border-light);
	padding:    16px 20px;
}
.oko-up-route-stops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.oko-up-route-stop {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       10px 12px;
	border-radius: var(--up-radius-sm);
	border:        1px solid var(--up-border-light);
	background:    #fafafa;
	cursor:        grab;
	transition:    border-color 0.12s;
}
.oko-up-route-stop.is-drag-over {
	border: 1.5px solid var(--up-purple);
	background: rgba(139,0,255,0.03);
}
.oko-up-route-stop:active { cursor: grabbing; }
.oko-up-grip { color: #c0c0cc; flex-shrink: 0; }
.oko-up-stop-num {
	width:           20px;
	height:          20px;
	border-radius:   50%;
	background:      var(--up-purple);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       10px;
	font-weight:     700;
	flex-shrink:     0;
}
.oko-up-stop-thumb {
	width:         44px;
	height:        44px;
	border-radius: 0.4rem;
	object-fit:    cover;
	flex-shrink:   0;
	background:    var(--up-input-bg);
}
.oko-up-stop-info { flex: 1; min-width: 0; }
.oko-up-stop-name {
	font-size:     13px;
	font-weight:   500;
	color:         var(--up-text);
	margin:        0;
	margin-bottom:        0 !important;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}
.oko-up-stop-addr {
	display:     flex;
	align-items: center;
	gap:         4px;
	margin-top:  2px;
}
.oko-up-stop-addr svg { color: var(--up-very-muted); }
.oko-up-stop-addr-text { font-size: 11.5px; color: var(--up-muted); }
.oko-up-btn-remove-stop {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    color: #717182;
    transition: color 0.15s, transform 0.15s, background 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.oko-up-btn-remove-stop:hover { color: var(--up-red); background: var(--up-red-tint); border: 1px solid var(--up-red); }

/* Google Maps btn */
.oko-up-btn-gmaps {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         9px 18px;
	background:      var(--up-purple);
	color:           #fff;
	border-radius:   var(--up-radius);
	font-size:       13px;
	font-weight:     500;
	text-decoration: none !important;
	transition:      background 0.15s;
	font-family:     var(--up-font);
}
.oko-up-btn-gmaps:hover { background: #7a00e6; color: #fff; }

/* New route form */
.oko-up-new-route-form {
	background:    var(--up-card-bg);
	border:        1px solid rgba(139,0,255,0.2);
	border-radius: var(--up-radius);
	padding:       18px 20px;
	margin-bottom: 16px;
}
.oko-up-new-route-label { font-size: 13px; font-weight: 500; color: var(--up-text); margin: 0 0 10px; }
.oko-up-new-route-row { display: flex; gap: 10px; }
.oko-up-new-route-input {
	flex:          1;
	padding:       8px 12px;
	background:    var(--up-input-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	font-size:     13.5px;
	color:         var(--up-text);
	outline:       none;
	font-family:   var(--up-font);
	transition:    border-color 0.15s;
}
.oko-up-new-route-input:focus { border-color: var(--up-purple); }
.oko-up-btn-create {
	padding:       8px 18px;
	background:    var(--up-purple);
	color:         #fff;
	border:        none;
	border-radius: var(--up-radius);
	font-size:     13.5px;
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--up-font);
}
.oko-up-btn-cancel {
	padding:       8px 14px;
	background:    transparent;
	color:         var(--up-muted);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	font-size:     13.5px;
	cursor:        pointer;
	font-family:   var(--up-font);
}
/* Routes header btn */
.oko-up-btn-primary {
	display:       flex;
	align-items:   center;
	gap:           6px;
	padding:       9px 16px;
	background:    var(--up-purple);
	color:         #fff;
	border:        none;
	border-radius: var(--up-radius);
	font-size:     13.5px;
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--up-font);
}
.oko-up-btn-primary:hover{
	background: #7a00e6;
	color: #fff;
}
/* Route stop empty */
.oko-up-route-empty {
	font-size:  13px;
	color:      var(--up-very-muted);
	text-align: center;
	padding:    16px 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE MODULE
   ════════════════════════════════════════════════════════════════════════════ */

.oko-up-profile-wrap { max-width: 700px; margin: 0 auto; }
.oko-up-profile-wrap .oko-up-card { padding: 24px 28px; }
.oko-up-profile-avatar-card {
	display:     flex;
	align-items: center;
	gap:         18px;
	margin-bottom: 16px;
}
.oko-up-avatar {
	width:           64px;
	height:          64px;
	border-radius:   50%;
	background:      rgba(139,0,255,0.12);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       22px;
	font-weight:     600;
	color:           var(--up-purple);
	flex-shrink:     0;
}
.oko-up-avatar-name { font-size: 16px; font-weight: 500; color: var(--up-text); padding-bottom: 0 !important; margin: 0; margin-bottom: 0 !important; }
.oko-up-avatar-email { font-size: 13px; color: var(--up-muted); margin: 4px 0 0; margin-bottom: 0 !important; }

/* Profile form */
.oko-up-profile-form { margin-bottom: 0; }
.oko-up-form-section-title { font-size: 15px; font-weight: 500; color: var(--up-text); margin: 0 0 20px; }
.oko-up-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.oko-up-field { margin-bottom: 14px; }
.oko-up-field:last-child { margin-bottom: 0; }
.oko-up-label { display: block; font-size: 13px; font-weight: 500; color: var(--up-text); margin-bottom: 6px; }
.oko-up-input {
	width:         100%;
	padding:       9px 12px !important;
	background:    var(--up-input-bg) !important;
	border:        1px solid var(--up-border) !important;
	border-radius: var(--up-radius) !important;
	font-size:     13.5px !important;
	color:         var(--up-text) !important;
	outline:       none;
	box-sizing:    border-box !important;
	transition:    border-color 0.15s !important;
	font-family:   var(--up-font);
}
.oko-up-input:focus { border-color: var(--up-purple); }
.oko-up-input--pr { padding-right: 38px; }
.oko-up-pass-wrap { position: relative; }
.oko-up-pass-toggle {
	position:    absolute;
	right:       10px;
	top:         50%;
	transform:   translateY(-50%);
	background:  none;
	border:      none;
	cursor:      pointer;
	color:       var(--up-muted);
	display:     flex;
	align-items: center;
	box-shadow: none;
}
button.oko-up-pass-toggle:hover,
button.oko-up-pass-toggle:focus {
	background-color: transparent;
	color: var(--up-muted);
	border-color: transparent;
}
#oko-up-password-form{
	margin-bottom: 0;
}
.oko-up-divider { border-top: 1px solid rgba(0,0,0,0.07); padding-top: 20px; margin-top: 4px; }
.oko-up-pass-section-title { font-size: 14px; font-weight: 500; color: var(--up-text); margin: 0 0 16px; }
.oko-up-pass-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.oko-up-btn-save {
	display:       flex;
	align-items:   center;
	gap:           6px;
	padding:       10px 24px;
	background:    var(--up-purple);
	color:         #fff;
	border:        none;
	border-radius: var(--up-radius);
	font-size:     14px;
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--up-font);
}
.oko-up-btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
.oko-up-btn-save:hover { background: #7a00e6; }

/* Toast */
.oko-up-toast {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       12px 16px;
	border-radius: var(--up-radius);
	margin-bottom: 16px;
	font-size:     13px;
	font-weight:   500;
}
.oko-up-toast--success {
	background: var(--up-green-tint);
	border:     1px solid rgba(22,163,74,0.2);
	color:      #15803d;
}
.oko-up-toast--error {
	background: var(--up-red-tint);
	border:     1px solid rgba(220,38,38,0.2);
	color:      var(--up-red);
}

/* Danger zone */
.oko-up-danger-card {
	border:     1px solid rgba(220,38,38,0.2);
	background: rgba(220,38,38,0.02);
}
.oko-up-danger-title { font-size: 15px; font-weight: 500; color: var(--up-red); margin: 0 0 8px; }
.oko-up-danger-text  { font-size: 13px; color: var(--up-muted); margin: 0 0 16px; line-height: 1.6; }
.oko-up-btn-danger {
	display:       flex;
	align-items:   center;
	gap:           6px;
	padding:       9px 18px;
	background:    var(--up-red-tint);
	color:         var(--up-red);
	border:        1px solid rgba(220,38,38,0.2);
	border-radius: var(--up-radius);
	font-size:     13.5px;
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--up-font);
	transition:    all 0.12s;
}
.oko-up-btn-danger:hover { border: 1px solid var(--up-red); background:  var(--up-red-tint); color: var(--up-red);  }

/* Delete confirmation modal */
.oko-up-modal-backdrop {
	position:        fixed;
	inset:           0;
	background:      rgba(0,0,0,0.4);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         9999;
	padding:         16px;
}
.oko-up-modal {
	background:    var(--up-card-bg);
	border-radius: var(--up-radius);
	padding:       28px 32px;
	max-width:     420px;
	width:         100%;
	box-shadow:    0 16px 48px rgba(0,0,0,0.18);
}
.oko-up-modal-hdr {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin-bottom: 14px;
}
.oko-up-modal-icon {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      var(--up-red-tint);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.oko-up-modal-icon svg { color: var(--up-red); }
.oko-up-modal-title { font-size: 16px; font-weight: 500; color: var(--up-text); margin: 0; }
.oko-up-modal-close {
	margin-left:  auto;
	background:   none;
	border:       none;
	cursor:       pointer;
	color:        var(--up-muted);
	display:      flex;
	align-items:  center;
}
.oko-up-modal-body { font-size: 13.5px; color: var(--up-muted); margin-bottom: 18px; line-height: 1.6; }
.oko-up-modal-input {
	width:         100%;
	padding:       9px 12px !important;
	background:    var(--up-input-bg);
	border:        1px solid rgba(220,38,38,0.3) !important;
	border-radius: var(--up-radius);
	font-size:     13.5px;
	color:         var(--up-text) !important;
	outline:       none;
	box-sizing:    border-box;
	margin-bottom: 18px;
	font-family:   var(--up-font);
	transition:    border-color 0.15s;
}
.oko-up-modal-input:focus { border-color: var(--up-red); }
.oko-up-modal-footer { display: flex; gap: 10px; }
.oko-up-btn-confirm-delete {
	flex:          1;
	padding:       10px 0;
	background:    var(--up-red);
	color:         #fff;
	border:        none;
	border-radius: var(--up-radius);
	font-size:     13.5px;
	font-weight:   500;
	cursor:        pointer;
	font-family:   var(--up-font);
}
.oko-up-btn-confirm-delete:disabled {
	background: rgba(220,38,38,0.3);
	cursor:     not-allowed;
}
.oko-up-btn-modal-cancel {
	flex:          1;
	padding:       10px 0;
	background:    var(--up-input-bg);
	color:         var(--up-muted);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
	font-size:     13.5px;
	cursor:        pointer;
	font-family:   var(--up-font);
}

/* ════════════════════════════════════════════════════════════════════════════
   HEART BUTTON (catalog / object card)
   ════════════════════════════════════════════════════════════════════════════ */
.oko-fav-btn {
	background:    rgba(255,255,255,0.92);
	border:        1px solid rgba(0,0,0,0.1);
	cursor:        pointer;
	padding:       5px;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	border-radius: 50%;
	color:         #717182;
	transition:    color 0.15s, transform 0.15s, background 0.15s;
	box-shadow:    0 1px 4px rgba(0,0,0,0.08);
}
.oko-fav-btn:hover              { color: var(--up-purple); transform: scale(1.15); }
.oko-fav-btn.is-active          { color: var(--up-purple); }
.oko-fav-btn.is-active svg path { fill: var(--up-purple); }

/* ════════════════════════════════════════════════════════════════════════════
   CATALOG / OBJECT CARD OVERLAY ACTIONS
   ════════════════════════════════════════════════════════════════════════════ */
.oko-cat-card-wrap {
	position: relative;
	display:  block;
}
.oko-cat-card-actions {
	position:   absolute;
	top:        8px;
	right:      8px;
	display:    flex;
	align-items: center;
	gap:        4px;
	z-index:    10;
	opacity:    0;
	transition: opacity 0.15s;
}
.oko-cat-card-wrap:hover .oko-cat-card-actions,
.oko-cat-card-wrap:focus-within .oko-cat-card-actions { opacity: 1; }

.oko-route-add-btn {
	background:    rgba(255,255,255,0.92);
	border:        1px solid rgba(0,0,0,0.1);
	cursor:        pointer;
	padding:       5px;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	border-radius: 50%;
	color:         #717182;
	transition:    color 0.15s, transform 0.15s, background 0.15s;
	box-shadow:    0 1px 4px rgba(0,0,0,0.08);
}
.oko-route-add-btn:hover { color: var(--up-purple); background: #fff; transform: scale(1.1); }

.oko-fav-btn--card {
	background: rgba(255,255,255,0.92);
	border:     1px solid rgba(0,0,0,0.1);
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.oko-fav-btn--card:hover { background: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   "ADD TO ROUTE" DROPDOWN
   ════════════════════════════════════════════════════════════════════════════ */
.oko-route-add-wrap  { position: relative; display: inline-block; }
.oko-route-dropdown {
	position:    absolute;
	top:         calc(100% + 4px);
	right:       0;
	background:  var(--up-card-bg);
	border:      1px solid var(--up-border);
	border-radius: var(--up-radius);
	box-shadow:  0 8px 24px rgba(0,0,0,0.1);
	min-width:   200px;
	z-index:     200;
	overflow:    hidden;
	padding:     4px;
}
.oko-route-dropdown-item {
	display:       block;
	width:         100%;
	padding:       8px 12px;
	background:    none;
	border:        none;
	cursor:        pointer;
	font-size:     13px;
	color:         var(--up-text);
	text-align:    left;
	font-family:   var(--up-font);
	border-radius: 0.4rem;
	transition:    background 0.1s;
}
.oko-route-dropdown-item:hover { background: var(--up-input-bg); }
.oko-route-dropdown-empty { padding: 12px; font-size: 12.5px; color: var(--up-muted); text-align: center; }

/* ════════════════════════════════════════════════════════════════════════════
   AJAX SPINNER
   ════════════════════════════════════════════════════════════════════════════ */
.oko-up-spinner {
	width:       18px;
	height:      18px;
	border:      2.5px solid rgba(139,0,255,0.2);
	border-top-color: var(--up-purple);
	border-radius: 50%;
	animation:   oko-spin 0.65s linear infinite;
	flex-shrink: 0;
}
@keyframes oko-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	.oko-up-content { padding: 20px 5px; }
	.oko-up-tabs    { padding: 0 16px; }
	.oko-up-dash-grid { grid-template-columns: 1fr; }
	.oko-up-fav-grid  { grid-template-columns: 1fr; }
	.oko-up-grid-2    { grid-template-columns: 1fr; }
	.oko-up-modal     { padding: 20px; }
}
@media (max-width: 480px) {
	.oko-up-filter-fields { flex-direction: column; }
	.oko-up-filter-input--loc,
	.oko-up-filter-input--author,
	.oko-up-filter-input--stan { min-width: 0; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   KURATOR DASHBOARD — stats tiles
   ════════════════════════════════════════════════════════════════════════════ */

.oko-up-stats-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap:                   14px;
	margin-bottom:         24px;
}
.oko-up-stat-tile { padding: 24px; }
.oko-up-stat-inner {
	display:     flex;
	align-items: center;
	gap:         12px;
}
.oko-up-stat-icon {
	width:           38px;
	height:          38px;
	border-radius:   var(--up-radius-sm);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.oko-up-stat-number {
	font-size:   22px;
	font-weight: 600;
	color:       var(--up-text);
	margin:      0;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1;
}
.oko-up-stat-label {
	font-size:  12px;
	color:      var(--up-muted);
	margin:     4px 0 0;
	margin-bottom: 0 !important;
}

/* ── Recent submissions preview (pulpit) ──────────────────────────────────── */

.oko-up-sub-preview-list { display: flex; flex-direction: column; gap: 8px; }
.oko-up-sub-preview-item {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         11px 14px;
	border-radius:   var(--up-radius-sm);
	border:          1px solid var(--up-border-light);
	text-decoration: none !important;
	transition:      background 0.12s;
	flex-wrap:       wrap;
	gap:             8px;
}
.oko-up-sub-preview-item:hover { background: #f8f8fa; }
.oko-up-sub-preview-name {
	font-size:   13px;
	font-weight: 500;
	color:       var(--up-text);
	margin:      0;
	margin-bottom:      0 !important;
	padding-bottom:      0 !important;
}
.oko-up-sub-preview-meta {
	font-size: 12px;
	color:     var(--up-muted);
	margin:    2px 0 0;
	margin-bottom:      0 !important;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */

.oko-up-sub-status-badge {
	padding:       3px 10px;
	border-radius: 999px;
	font-size:     11.5px;
	font-weight:   500;
	white-space:   nowrap;
	display:       inline-block;
}

/* ════════════════════════════════════════════════════════════════════════════
   SUBMISSIONS LIST (B2)
   ════════════════════════════════════════════════════════════════════════════ */

.oko-up-sub-table-wrap {
	background:    var(--up-card-bg);
	overflow:      hidden;
}
.oko-up-sub-table {
	width:           100%;
	border-collapse: collapse;
	margin-bottom: 0;
}
.oko-up-sub-table thead tr {
	background:    var(--up-input-bg);
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.oko-up-sub-table th {
	padding:        11px 16px;
	text-align:     left;
	font-size:      12px;
	font-weight:    500;
	color:          var(--up-muted);
	letter-spacing: 0.02em;
	white-space:    nowrap;
}
.oko-up-sub-table tbody tr:not(:last-child) {
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.oko-up-sub-table tbody tr:hover { background: #fafafa; }
.oko-up-sub-table td              { padding: 12px 16px; vertical-align: middle; }
.oko-up-sub-table-thumb {
	width:        48px;
	height:       40px;
	border-radius: 0.4rem;
	object-fit:   cover;
	display:      block;
}
.oko-up-sub-table-thumb-empty {
	width:           48px;
	height:          40px;
	border-radius:   0.4rem;
	background:      var(--up-input-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.oko-up-sub-table-name { font-size: 13.5px; font-weight: 500; color: var(--up-text); }
.oko-up-sub-table-meta { font-size: 13px; color: var(--up-muted); }

.oko-up-sub-actions {
	display: flex;
	gap:     6px;
	flex-wrap: wrap;
}
.oko-up-btn-action {
	display:         flex;
	align-items:     center;
	gap:             4px;
	padding:         5px 10px;
	border-radius:   var(--up-radius-sm);
	font-size:       12.5px;
	font-weight:     500;
	cursor:          pointer;
	font-family:     var(--up-font);
	transition:      background 0.12s;
	border:          1px solid var(--up-border);
	background:      var(--up-card-bg);
	color:           var(--up-text);
	text-decoration: none !important;
	white-space:     nowrap;
}
.oko-up-btn-action--primary {
	border:     none;
	background: var(--up-purple);
	color:      #fff;
}
.oko-up-btn-action--primary:hover { background: #7a00e6; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   SUBMISSION DETAIL / EDIT (B3)
   ════════════════════════════════════════════════════════════════════════════ */

.oko-up-sub-detail { max-width: 800px; margin: 0 auto; }

.oko-up-sub-back {
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      none;
	border:          none;
	cursor:          pointer;
	font-size:       13px;
	color:           var(--up-muted);
	padding:         0;
	margin-bottom:   20px;
	font-family:     var(--up-font);
	text-decoration: none !important;
}
.oko-up-sub-back:hover { color: var(--up-text); }

.oko-up-sub-detail-header {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	margin-bottom:   24px;
	flex-wrap:       wrap;
	gap:             10px;
}
.oko-up-sub-detail-title { font-size: 20px; font-weight: 500; color: var(--up-text); margin: 0 0 6px; }
.oko-up-sub-detail-meta  { font-size: 13px; color: var(--up-muted); margin: 0; }

.oko-up-sub-success-banner,
.oko-up-sub-admin-banner {
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       14px 18px;
	border-radius: var(--up-radius);
	margin-bottom: 20px;
}
.oko-up-sub-success-banner {
	background: rgba(22,163,74,0.08);
	border:     1px solid rgba(22,163,74,0.2);
}
.oko-up-sub-admin-banner--info {
	background: rgba(37,99,235,0.06);
	border:     1px solid rgba(37,99,235,0.2);
}
.oko-up-sub-admin-banner--warn {
	background: rgba(220,38,38,0.06);
	border:     1px solid rgba(220,38,38,0.2);
}
.oko-up-sub-admin-banner--purple {
	background: rgba(139,0,255,0.06);
	border:     1px solid rgba(139,0,255,0.15);
}
.oko-up-sub-banner-title {
	font-size:   13px;
	font-weight: 500;
	margin:      0 0 4px;
	margin-bottom:      0 !important;
}
.oko-up-sub-banner-body {
	font-size:   13px;
	color:       var(--up-muted);
	margin:      0;
	margin-bottom:      0 !important;
	line-height: 1.6;
}

.oko-up-sub-section-title { font-size: 14px; font-weight: 500; color: var(--up-text); margin: 0 0 14px; }
.oko-up-sub-thumb-img {
	width:        100%;
	max-width:    400px;
	height:       220px;
	object-fit:   cover;
	border-radius: var(--up-radius-sm);
	display:      block;
}

.oko-up-sub-textarea {
	resize:     vertical;
	min-height: 90px;
}
.oko-up-sub-readonly-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   14px;
}
.oko-up-sub-optional { color: var(--up-very-muted); font-weight: 400; }

.oko-up-sub-upload-label {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       12px 16px;
	border-radius: var(--up-radius);
	border:        1.5px dashed rgba(0,0,0,0.15);
	cursor:        pointer;
	background:    var(--up-input-bg);
	font-size:     13px;
	color:         var(--up-muted);
	transition:    border-color 0.15s;
}
.oko-up-sub-upload-label:hover { border-color: var(--up-purple); }
.oko-up-sub-upload-label.has-file { background: rgba(139,0,255,0.03); border-color: rgba(139,0,255,0.3); }

.oko-up-sub-edit-actions {
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-wrap:   wrap;
}
.oko-up-sub-cancel-link {
	font-size:       13px;
	color:           var(--up-muted);
	text-decoration: none !important;
}
.oko-up-sub-cancel-link:hover { color: var(--up-text); }

@media (max-width: 640px) {
	.oko-up-stats-grid          { grid-template-columns: 1fr 1fr; }
	.oko-up-sub-readonly-grid   { grid-template-columns: 1fr; }
	.oko-up-sub-table th:nth-child(1),
	.oko-up-sub-table td:nth-child(1) { display: none; }
}
@media (max-width: 480px) {
	.oko-up-stats-grid { grid-template-columns: 1fr; }
}

/* ── Guardian module (Etap 11) ────────────────────────────────────────────── */
.oko-up-grd-empty-state {
	text-align:      center;
	padding:         56px 36px;
	max-width:       540px;
	margin:          0 auto;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
}
.oko-up-grd-state-icon {
	width:            64px;
	height:           64px;
	border-radius:    50%;
	background:       var(--up-purple-tint);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	margin:           0 auto 20px;
	color:            var(--up-purple);
}
.oko-up-grd-state-title {
	font-size:    17px;
	font-weight:  500;
	color:        var(--up-text);
	margin:       0 0 8px;
}
.oko-up-grd-state-desc {
	font-size:     13.5px;
	color:         var(--up-muted);
	margin-bottom: 20px;
	line-height:   1.6;
}
.oko-up-grd-status-pill {
	display:       inline-block;
	padding:       5px 14px;
	border-radius: 999px;
	background:    rgba(0,0,0,0.06);
	font-size:     12px;
	color:         var(--up-muted);
	margin-bottom: 20px;
}
.oko-up-grd-status-pill strong { color: var(--up-text); }
.oko-up-grd-status-card { /* inherits .oko-up-card */ }
.oko-up-grd-objects-list { display: flex; flex-direction: column; gap: 10px; }
.oko-up-grd-contact-box {
	padding:     14px 16px;
	background:  rgba(0,0,0,0.04);
	border-left: 3px solid var(--up-purple);
	border-radius: 0 var(--up-radius-sm) var(--up-radius-sm) 0;
	font-size:   13px;
	color:       var(--up-muted);
	line-height: 1.6;
}
.oko-up-grd-contact-box a { color: var(--up-purple); text-decoration: none; }
.oko-up-grd-contact-box a:hover { text-decoration: underline; }

/* ── C2: Assigned object cards ──────────────────────────────────────────── */
.oko-up-grd-obj-list { display: flex; flex-direction: column; gap: 16px; }
.oko-up-grd-obj-card {
	display:       flex;
	gap:           18px;
	flex-wrap:     wrap;
	padding:       20px;
	background:    var(--up-card-bg);
	border:        1px solid var(--up-border);
	border-radius: var(--up-radius);
}
.oko-up-grd-obj-media {
	width:            180px;
	height:           130px;
	border-radius:    var(--up-radius-sm);
	flex-shrink:      0;
	background:       var(--up-input-bg);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	overflow:         hidden;
}
.oko-up-grd-obj-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oko-up-grd-obj-info  { flex: 1; min-width: 200px; }
.oko-up-grd-obj-tech-badge {
	display:       inline-block;
	padding:       2px 10px;
	border-radius: 999px;
	background:    var(--up-purple-tint2);
	color:         var(--up-purple);
	font-size:     12px;
	font-weight:   500;
	margin-bottom: 8px;
}
.oko-up-grd-obj-name  { font-size: 15px; font-weight: 500; color: var(--up-text); margin: 0 0 10px; }
.oko-up-grd-obj-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.oko-up-grd-obj-label { font-size: 12.5px; color: var(--up-muted); min-width: 120px; }
.oko-up-grd-obj-val   { font-size: 13px; color: var(--up-text); }
@media (max-width: 560px) {
	.oko-up-grd-obj-media { width: 100%; height: 180px; }
}