/* Tolips Mobilgalleri — app-web-5-media-admin.css
   7.10.18: den tidigare app-web.css är uppdelad i åtta filer. De läses in
   i nummerordning och innehåller exakt samma regler i samma ordning som
   förut, så ingenting i utseendet ändras.
   Innehåll: Verktygsrad, brickor, flerval och massredigering i Test. */

/* ============================================================
   7.5.37: verktygsrad, brickor, flerval och massredigering.
   ============================================================ */
.tmg-app-test-toolbar{
	display:grid;
	gap:10px;
	margin:0 0 14px;
	padding:12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-test-search{display:flex;gap:8px;flex-wrap:wrap}
.tmg-app-test-search input[type="search"]{
	flex:1 1 160px;
	min-width:0;
	min-height:44px;
	padding:8px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-test-filters{display:flex;gap:6px;flex-wrap:wrap}
.tmg-app-test-filters a{
	min-height:40px;
	padding:0 14px;
	display:inline-flex;
	align-items:center;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:11px;
	background:#fff;
	color:var(--tmg-test-ink,#252536);
	font-size:14px;
	font-weight:700;
	text-decoration:none;
}
.tmg-app-test-filters a.is-active{
	border-color:var(--tmg-test-primary,#385fe7);
	background:var(--tmg-test-primary,#385fe7);
	color:#fff;
}
.tmg-app-test-select-toggle.is-active{
	border-color:var(--tmg-test-primary,#385fe7)!important;
	background:var(--tmg-test-primary,#385fe7)!important;
	color:#fff!important;
}
.tmg-app-test-empty{margin:12px 0}

/* Brickor som visar var filen ligger, direkt i rutnätet. */
.tmg-app-test-badges{
	position:absolute;
	left:5px;
	right:5px;
	bottom:5px;
	display:flex;
	gap:4px;
	flex-wrap:wrap;
	pointer-events:none;
}
.tmg-app-test-badges b{
	padding:2px 7px;
	border-radius:999px;
	background:rgba(17,20,29,.82);
	color:#fff;
	font-size:10px;
	font-weight:800;
	line-height:1.6;
	letter-spacing:.02em;
}
.tmg-app-test-badges b.is-private{background:rgba(191,58,86,.92)}
.tmg-app-test-badges b.is-public{background:rgba(56,95,231,.92)}
.tmg-app-test-badges b.is-store{background:rgba(169,112,18,.94)}
.tmg-app-test-badges b.is-free{background:rgba(40,124,92,.92)}
.tmg-app-test-badges b.is-hidden-badge{background:rgba(90,96,116,.92)}
.tmg-app-test-compact-thumb.is-hidden-media img,
.tmg-app-test-compact-thumb.is-hidden-media video{opacity:.42}

/* Flerval: rutnätet byter läge i stället för att öppna redigeraren. */
.tmg-app-test-select-mark{display:none}
.tmg-app-test-thumb-grid.is-selecting .tmg-app-test-select-mark{
	position:absolute;
	top:6px;
	right:6px;
	display:block;
	width:24px;
	height:24px;
	border:2px solid #fff;
	border-radius:8px;
	background:rgba(17,20,29,.45);
	box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.tmg-app-test-thumb-grid.is-selecting .is-selected .tmg-app-test-select-mark{
	border-color:#fff;
	background:var(--tmg-test-primary,#385fe7)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.tmg-app-test-thumb-grid.is-selecting .is-selected{
	outline:3px solid var(--tmg-test-primary,#385fe7);
	outline-offset:-3px;
}

.tmg-app-test-bulk{
	display:grid;
	gap:10px;
	margin:12px 0 0;
	padding:14px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-test-bulk[hidden]{display:none!important}
.tmg-app-test-bulk-count{margin:0;font-weight:700}
.tmg-app-test-bulk-fields{display:grid;gap:10px}
.tmg-app-test-bulk-fields label{display:grid;gap:5px;font-weight:600}
.tmg-app-test-bulk-fields input{
	min-height:44px;
	padding:8px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-test-bulk-actions{display:flex;gap:8px;flex-wrap:wrap}
.tmg-app-test-editor-poster{display:grid;gap:6px;margin:0}
.tmg-app-test-editor-poster small{color:var(--tmg-test-muted,#77768a)}
.tmg-app-test-editor form[data-test-editor-restore][hidden]{display:none!important}

@media(min-width:620px){
	.tmg-app-test-bulk-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mörkt tema för de nya delarna. */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content :is(.tmg-app-test-toolbar,.tmg-app-test-bulk){
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-test-filters a{
	border-color:rgba(243,245,251,.6)!important;
	background:#3a3a3a!important;
	color:#f3f5fb!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-test-filters a.is-active{
	border-color:#7188ff!important;
	background:#4057bd!important;
	color:#fff!important;
}

/* ============================================================
   7.5.39: listan ersätter rutnätet och popupen. Varje rad fälls
   ut med <details>, så redigering fungerar utan JavaScript.
   ============================================================ */
.tmg-app-test-upload-panel{
	margin:0 0 16px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
	overflow:hidden;
}
.tmg-app-test-upload-panel>summary{
	padding:14px 16px;
	font-weight:700;
	cursor:pointer;
	list-style:none;
}
.tmg-app-test-upload-panel>summary::-webkit-details-marker{display:none}
/* 7.23.3: uppladdningspanelen hade en egen liten triangel. När den blev ett
   vanligt block fick den två pilar ovanpå varandra. Blockets egen pil gäller. */
.tmg-app-test-upload-panel:not(.tmg-app-fold)>summary::after{content:" ▾";opacity:.5}
.tmg-app-test-upload-panel:not(.tmg-app-fold)[open]>summary::after{content:" ▴"}
.tmg-app-test-upload-panel .tmg-app-test-upload-form{padding:0 14px 14px}

.tmg-app-test-count{margin:0;font-size:13px;opacity:.7}
.tmg-app-test-list{display:grid;gap:10px;margin:14px 0}
.tmg-app-test-row{
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:#fff;
	overflow:hidden;
}
.tmg-app-test-row.is-hidden-media{opacity:.72}
.tmg-app-test-row-head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px;
	cursor:pointer;
	list-style:none;
}
.tmg-app-test-row-head::-webkit-details-marker{display:none}
.tmg-app-test-row-thumb{
	flex:0 0 64px;
	width:64px;
	height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	background:#111;
	overflow:hidden;
}
.tmg-app-test-row-thumb img{width:100%;height:100%;object-fit:cover}
.tmg-app-test-row-noposter{color:#fff;font-size:20px;opacity:.7}
.tmg-app-test-row-copy{display:grid;gap:6px;min-width:0;flex:1 1 auto}
.tmg-app-test-row-copy>strong{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:15px;
}
.tmg-app-test-row .tmg-app-test-badges{position:static;display:flex;gap:4px;flex-wrap:wrap}
.tmg-app-test-badges b.is-meta{background:rgba(90,96,116,.72)}
.tmg-app-test-row-open{flex:0 0 auto;opacity:.45;font-size:18px}
.tmg-app-test-row[open] .tmg-app-test-row-open{transform:rotate(180deg)}
.tmg-app-test-row-body{
	display:grid;
	gap:12px;
	padding:4px 12px 16px;
	border-top:1px solid var(--tmg-test-border,#e3e5f0);
}
.tmg-app-test-row-select{
	display:flex;
	align-items:center;
	gap:8px;
	padding-top:10px;
	font-weight:600;
}
.tmg-app-test-row-preview{
	width:100%;
	max-height:46vh;
	border-radius:12px;
	background:#111;
	object-fit:contain;
}
.tmg-app-test-row-form{display:grid;gap:10px}
.tmg-app-test-row-form>label{display:grid;gap:5px;font-weight:600}
.tmg-app-test-row-form input[type="text"],
.tmg-app-test-row-form textarea{
	width:100%;
	min-height:44px;
	padding:9px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-test-row-form textarea{min-height:76px}
.tmg-app-test-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.tmg-app-test-hint{display:block;opacity:.68;font-size:12px}
.tmg-app-test-pager{display:flex;gap:8px;justify-content:space-between;margin:12px 0}
.tmg-app-test-bulk[hidden]{display:grid!important}
.tmg-app-test-bulk h3{margin:0}

/* Mörkt tema för listan. */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content :is(.tmg-app-test-row,.tmg-app-test-upload-panel){
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-test-row-body{
	border-top-color:#4a4a4a!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content :is(.tmg-app-test-row-form input[type="text"],.tmg-app-test-row-form textarea){
	border-color:rgba(243,245,251,.6)!important;
	background:#282828!important;
	color:#f3f5fb!important;
}

/* ============================================================
   7.5.41: rund ram runt profilbilden, så zoomen skalar bilden
   inuti cirkeln i stället för att förstora hela cirkeln.
   ============================================================ */
.app-mobilwebb-avatar-frame{
	display:block;
	width:46px;
	height:46px;
	flex:0 0 46px;
	border-radius:50%;
	overflow:hidden;
	background:var(--app-surface,#282828);
}
.app-mobilwebb-avatar-button .app-mobilwebb-avatar-frame{width:100%;height:100%}
/* 7.41.21: ringar på vattnet — tunna cirklar som expanderar utåt och tonar
   bort, i stället för en fylld glow. Två ringar i följd (::before/::after,
   den ena fördröjd) ger samma intryck som ringar efter en sten i vattnet. Ligger på en egen omslagsspan
   utanför avatar-frame, som klipper sitt innehåll (overflow:hidden) för
   den runda bilden och annars skulle klippa bort ringarna innan de hann
   synas. */
.app-mobilwebb-avatar-ring{position:relative;display:block;width:46px;height:46px;flex:0 0 46px;align-self:center}
.app-mobilwebb-avatar-ring .app-mobilwebb-avatar-button,
.app-mobilwebb-avatar-ring .app-mobilwebb-avatar-frame{width:100%;height:100%}
.app-mobilwebb-avatar-ring.is-online::before,
.app-mobilwebb-avatar-ring.is-online::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	border:1.5px solid rgba(34,197,94,.75);
	pointer-events:none;
	/* 7.41.25: utan ett negativt z-index ritas ett positionerat pseudoelement
	   alltid ovanpå vanligt flödesinnehåll (som profilbilden) enligt CSS
	   stapelordning, oavsett var i koden det står. Ringen låg därför på
	   bilden i stället för bakom den. */
	/* 7.41.139: lagret ska ligga över färg- och mörktoningen men under innehållet. */
	z-index:0;
	animation:tmg-owner-online-ripple 2.8s ease-out infinite;
}
.app-mobilwebb-avatar-ring.is-online::after{animation-delay:1.4s}
@keyframes tmg-owner-online-ripple{
	0%{transform:scale(1);opacity:.75}
	70%{opacity:.25}
	100%{transform:scale(2.3);opacity:0}
}
/* 7.41.24: "Effekt över bakgrunden bakom profilbilden" — samma teknik som
   Ringar på vattnet i bakgrunden (@keyframes tmg-ripple, definierad nedan för
   .app-mobilwebb-bg-effect), grön och skalad till ringens egna 46px i stället
   för hela skärmen. inset:-50% gör pseudoelementet dubbelt så stort som
   ringen, samma proportion som bakgrundseffektens 150vmax mot skärmen. Vinner
   över .is-online-reglerna ovan tack vare den extra klassen i selektorn. */
.app-mobilwebb-avatar-ring.is-online.uses-bg-effect::before,
.app-mobilwebb-avatar-ring.is-online.uses-bg-effect::after{
	content:"";
	position:absolute;
	inset:-50%;
	border:0;
	border-radius:50%;
	background:radial-gradient(circle,transparent 0 38%,rgba(34,197,94,.6) 39% 41%,transparent 42%);
	/* 7.41.25: samma stapelordning-fix som .is-online ovan — annars ligger
	   den återanvända bakgrundseffekten också ovanpå profilbilden. */
	z-index:-1;
	animation:tmg-ripple 7s ease-out infinite;
}
.app-mobilwebb-avatar-ring.is-online.uses-bg-effect::after{animation-delay:3.5s}

/* Utsnittsdialogen i mörkt tema. Kortet var ljust med nästan osynliga
   etiketter, medan knapparna ärvde den mörka panelens färger. */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-editor{
	border-color:#4a4a4a!important;
	background:#282828!important;
	color:#f3f5fb!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content :is(.tmg-app-web-crop-title,.tmg-app-web-focal-control,.tmg-app-web-crop-help){
	color:#f3f5fb!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-help{
	opacity:.72;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-focal-control output{
	color:#9fb0ff!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-frame{
	border-color:#4a5578!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-editor input[type="range"]{
	accent-color:#7188ff!important;
	background:transparent!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-actions .button{
	border-color:rgba(243,245,251,.6)!important;
	background:#3a3a3a!important;
	color:#f3f5fb!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-crop-actions .button-primary{
	border-color:#4d63d8!important;
	background:#4057bd!important;
	color:#fff!important;
}

/* 7.5.42: Spara i panelens fot. Krysset uppe till vänster stänger redan
   panelen, så knappen nere gör mer nytta som sparknapp. */
.app-mobilwebb-user-panel-footer-save{
	min-height:46px;
	padding:0 20px;
	border:1px solid #4d63d8;
	border-radius:13px;
	background:#4057bd;
	color:#fff;
	font:inherit;
	font-weight:700;
	cursor:pointer;
}
.app-mobilwebb-user-panel-footer-save[hidden]{display:none!important}
.app-mobilwebb-user-panel-footer-save:focus-visible{
	outline:2px solid #9fb0ff;
	outline-offset:2px;
}

/* 7.5.46: foten innehåller bara Spara och Logga ut sedan Stäng tagits bort.
   Spara ligger till vänster, Logga ut till höger, som tidigare. */
.app-mobilwebb-user-panel-footer-save:only-of-type{margin-right:auto}
.app-mobilwebb-user-panel-footer-save[hidden]~*{margin-left:auto}

/* ============================================================
   7.5.47: förhandsbilden bredvid varje mediafält. Den saknade
   egen stil i panelen och visade hela filen inpassad i rutan,
   med genomskinliga fält över och under. Nu fyller den rutan
   och visar samma utsnitt som appen.
   ============================================================ */
.tmg-app-web-admin .tmg-app-web-media-preview{
	display:block;
	width:96px;
	height:96px;
	flex:0 0 96px;
	box-sizing:border-box;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:#111;
	overflow:hidden;
}
/* 7.41.137: en tom mediaförhandsvisning ska inte ha någon mörk reservfärg. */
.tmg-app-web-admin .tmg-app-web-media-preview.is-empty{
	background:transparent;
}
.tmg-app-web-admin .tmg-app-web-media-preview img,
.tmg-app-web-admin .tmg-app-web-media-preview video{
	display:block;
	width:100%;
	height:100%;
	border-radius:0;
	object-fit:cover;
	object-position:50% 50%;
}
/* Profilbilden visas rund, precis som i headern. */
.tmg-app-web-admin .tmg-app-web-media[data-crop-kind="profile"] .tmg-app-web-media-preview{
	border-radius:50%;
}
/* Headerbilden är en bred yta, men rutan får inte bli bredare än de andra
   fälten. 7.5.48: 150 px sprängde raden så att bilden hamnade under rubriken. */
.tmg-app-web-admin .tmg-app-web-media[data-crop-kind="header"] .tmg-app-web-media-preview{
	height:48px;
	border-radius:11px;
}
.tmg-app-web-admin .tmg-app-web-media{
	align-items:flex-start;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-media-preview{
	border-color:#4a4a4a!important;
	background:#0d1017!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-media-preview.is-empty{
	background:transparent!important;
}

/* ============================================================
   7.5.51: effektlager över portfolio-bakgrunden.
   Ligger ovanför bakgrundsbilden eller videon och under
   innehållet. Allt är CSS-animationer — ingen canvas och inga
   bildrutor att räkna, så batteriet påverkas knappt.
   ============================================================ */
.app-mobilwebb-bg-effect{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	top:var(--app-header-h,64px);
	z-index:-1;
	pointer-events:none;
	overflow:hidden;
	opacity:var(--app-effect-strength,.5);
	filter:var(--app-effect-tint-filter,none);
}

/* Ringar på vattnet: tre ringar som växer i otakt. */
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::before,
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::after,
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect{
	--tmg-ripple:radial-gradient(circle,transparent 0 38%,rgba(255,255,255,.22) 39% 41%,transparent 42%);
}
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::before,
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::after{
	content:"";
	position:absolute;
	left:50%;
	top:58%;
	width:150vmax;
	height:150vmax;
	margin:-75vmax 0 0 -75vmax;
	border-radius:50%;
	background:var(--tmg-ripple);
	animation:tmg-ripple 7s ease-out infinite;
}
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::after{
	animation-delay:3.5s;
}
@keyframes tmg-ripple{
	0%{transform:scale(.04);opacity:0}
	12%{opacity:1}
	100%{transform:scale(1);opacity:0}
}
/* Ringarna skapas av skriptet så storlek, takt och slumpning kan styras av
   reglagen. De äldre fasta reservringarna ska inte ligga ovanpå dem. */
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::before,
.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect::after{display:none}

/* Filmkorn: stillastående brus som flyttas några pixlar i taget. */
/* 7.5.52: mix-blend-mode overlay blandade mot fel lager och gjorde kornet
   nästan osynligt. Bruset ritas nu rakt av, grövre och ljusare. */
.app-mobilwebb.has-effect-grain .app-mobilwebb-bg-effect{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
	background-size:200px 200px;
	animation:tmg-grain .9s steps(5) infinite;
}
@keyframes tmg-grain{
	0%{transform:translate(0,0)}
	25%{transform:translate(-3%,2%)}
	50%{transform:translate(2%,-3%)}
	75%{transform:translate(-2%,-2%)}
	100%{transform:translate(0,0)}
}

/* Svävande damm: små ljuspunkter som driver uppåt. */
/* 7.5.52: fem punkter utspridda över hela skärmen blev i praktiken osynliga.
   Nu är det en liten bricka som upprepas, i två lager med olika hastighet så
   att dammet får djup. */
.app-mobilwebb.has-effect-dust .app-mobilwebb-bg-effect{
	background-image:
		radial-gradient(2.4px 2.4px at 30px 40px,rgba(255,255,255,.95),transparent 62%),
		radial-gradient(1.8px 1.8px at 150px 90px,rgba(255,255,255,.8),transparent 62%),
		radial-gradient(3px 3px at 90px 170px,rgba(255,255,255,.7),transparent 62%),
		radial-gradient(1.6px 1.6px at 200px 30px,rgba(255,255,255,.85),transparent 62%),
		radial-gradient(2px 2px at 240px 200px,rgba(255,255,255,.75),transparent 62%),
		radial-gradient(1.4px 1.4px at 60px 230px,rgba(255,255,255,.7),transparent 62%);
	background-size:280px 280px;
	background-repeat:repeat;
	animation:tmg-dust 26s linear infinite;
}
.app-mobilwebb.has-effect-dust .app-mobilwebb-bg-effect::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:
		radial-gradient(1.6px 1.6px at 110px 60px,rgba(255,255,255,.7),transparent 62%),
		radial-gradient(2.2px 2.2px at 20px 150px,rgba(255,255,255,.6),transparent 62%),
		radial-gradient(1.4px 1.4px at 180px 210px,rgba(255,255,255,.65),transparent 62%);
	background-size:190px 190px;
	background-repeat:repeat;
	opacity:.7;
	animation:tmg-dust 44s linear infinite reverse;
}
@keyframes tmg-dust{
	from{background-position:0 0}
	to{background-position:40px -560px}
}

/* Ljusstråk föds numera ett i taget med slumpad vinkel, bredd och takt.
   Se .tmg-bg-spark.is-sheen längre ned. */

/* Långsam zoom: rör bakgrunden i stället för att lägga något ovanpå. Målet
   och mittpunkten sätts som variabler, så varje etapp blir sin egen. */
.app-mobilwebb.has-effect-drift:before,
.app-mobilwebb.has-effect-drift .app-mobilwebb-bg-video{
	filter:var(--app-effect-tint-filter,none);
	transform:scale(var(--app-drift-scale,1.06));
	transform-origin:var(--app-drift-origin,50% 50%);
	transition:transform var(--app-drift-span,14s) ease-in-out;
	animation:tmg-drift 38s ease-in-out infinite alternate;
}
/* Så fort skriptet tagit över behövs ingen loop. */
.app-mobilwebb.has-effect-drift[style*="--app-drift-scale"]:before,
.app-mobilwebb.has-effect-drift[style*="--app-drift-scale"] .app-mobilwebb-bg-video{
	animation:none;
}
@keyframes tmg-drift{
	from{transform:scale(1)}
	to{transform:scale(1.12)}
}

@media(prefers-reduced-motion:reduce){
	.app-mobilwebb-bg-effect,
	.app-mobilwebb-bg-effect::before,
	.app-mobilwebb-bg-effect::after,
	.app-mobilwebb.has-effect-drift:before,
	.app-mobilwebb.has-effect-drift .app-mobilwebb-bg-video{
		animation:none!important;
	}
	.app-mobilwebb.has-effect-ripple .app-mobilwebb-bg-effect{opacity:0}
}

/* Reglagen i Min profil. */
.tmg-app-portfolio-effect{
	display:grid;
	gap:8px;
	margin-top:12px;
	padding:14px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-portfolio-effect select{
	min-height:46px;
	padding:8px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-portfolio-effect small{opacity:.7}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-effect{
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-effect select{
	border-color:rgba(243,245,251,.6)!important;
	background:#282828!important;
	color:#f3f5fb!important;
}

/* ============================================================
   7.5.52: slumpade effekter. Elementen skapas i JavaScript med
   slumpad plats, storlek och livslängd, och tar bort sig själva
   när animationen är klar.
   ============================================================ */
.tmg-bg-spark{
	position:absolute;
	display:block;
	width:var(--tmg-spark-size,10vmin);
	height:var(--tmg-spark-size,10vmin);
	margin:calc(var(--tmg-spark-size,10vmin) / -2) 0 0 calc(var(--tmg-spark-size,10vmin) / -2);
	border-radius:50%;
	pointer-events:none;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:both;
}
/* 7.5.57: ringarna speglar bakgrunden på samma sätt som bubblorna. Själva
   ringbandet maskas fram ur en förstorad kopia av bakgrunden som är låst till
   skärmen, så vattnet bryter det som ligger under. Ringen växer med bredd och
   höjd i stället för med transform — en transform hade låst spegelbilden till
   elementet och den hade åkt med i stället för att stå still. */
.tmg-bg-spark.is-ripple{
	border:0;
	background-image:var(--app-hero,none);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:calc(100vw * var(--tmg-lens-zoom,1.4)) calc(100vh * var(--tmg-lens-zoom,1.4));
	backdrop-filter:brightness(1.1) saturate(1.15);
	-webkit-backdrop-filter:brightness(1.1) saturate(1.15);
	box-shadow:inset 0 0 10px rgba(255,255,255,.16);
	-webkit-mask-image:radial-gradient(circle,transparent 0 57%,#000 62%,#000 76%,transparent 83%);
	mask-image:radial-gradient(circle,transparent 0 57%,#000 62%,#000 76%,transparent 83%);
	filter:blur(.4px);
	animation-name:tmg-spark-ripple;
}
/* 0.1.27: en CSS-bakgrund kan kopieras in i ringen, men en spelande video
   kan inte användas som background-image. På video bryter ringen därför
   den verkliga videon under sig med backdrop-filter och ett diskret ljust
   ringband. Effekten fungerar då utan att ersätta eller pausa videon. */
.app-mobilwebb.has-bg-video .tmg-bg-spark.is-ripple{
	background-image:none;
	background-color:rgb(255 255 255 / .025);
	backdrop-filter:brightness(1.16) saturate(1.2) contrast(1.06);
	-webkit-backdrop-filter:brightness(1.16) saturate(1.2) contrast(1.06);
	box-shadow:inset 0 0 11px rgb(255 255 255 / .34),0 0 8px rgb(255 255 255 / .12);
}
@keyframes tmg-spark-ripple{
	0%{width:0;height:0;margin:0;opacity:0}
	18%{opacity:1}
	100%{
		width:var(--tmg-spark-size,60vmin);
		height:var(--tmg-spark-size,60vmin);
		margin:calc(var(--tmg-spark-size,60vmin) / -2) 0 0 calc(var(--tmg-spark-size,60vmin) / -2);
		opacity:0;
	}
}
.tmg-bg-spark.is-sparkle{
	background:radial-gradient(circle,rgba(255,255,255,.95) 0 22%,rgba(255,255,255,.35) 38%,transparent 68%);
	animation-name:tmg-spark-glint;
}
@keyframes tmg-spark-glint{
	0%{transform:scale(.3) rotate(0deg);opacity:0}
	30%{transform:scale(1) rotate(20deg);opacity:1}
	100%{transform:scale(.5) rotate(45deg);opacity:0}
}
.tmg-bg-spark.is-bokeh{
	background:radial-gradient(circle,rgba(255,255,255,.34) 0 40%,rgba(255,255,255,.12) 62%,transparent 72%);
	filter:blur(1px);
	animation-name:tmg-spark-bokeh;
	animation-timing-function:ease-in-out;
}
@keyframes tmg-spark-bokeh{
	0%{transform:scale(.7) translateY(14px);opacity:0}
	40%{opacity:1}
	100%{transform:scale(1.15) translateY(-26px);opacity:0}
}
.tmg-bg-spark.is-sheen{
	left:0;
	top:50%;
	width:var(--tmg-spark-width,22vmin);
	height:220vmax;
	margin:-110vmax 0 0 0;
	border-radius:0;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.1) 70%,transparent);
	filter:blur(6px);
	animation-name:tmg-spark-sheen;
	animation-timing-function:ease-in-out;
}
@keyframes tmg-spark-sheen{
	0%{transform:translateX(var(--tmg-spark-from,-110%)) rotate(var(--tmg-spark-angle,0deg));opacity:0}
	22%{opacity:1}
	78%{opacity:1}
	100%{transform:translateX(var(--tmg-spark-to,110%)) rotate(var(--tmg-spark-angle,0deg));opacity:0}
}
@media(prefers-reduced-motion:reduce){
	.tmg-bg-spark{display:none!important}
}

/* ============================================================
   7.5.54: tio nya effekter. Rörelsebanan ligger i CSS, medan
   plats, storlek, hastighet, lutning och färg slumpas per
   element av skriptet.
   ============================================================ */

/* Regn: tunna streck som faller snett. */
.tmg-bg-spark.is-rain{
	top:-14%;
	width:1.5px;
	height:var(--tmg-spark-size,10vmin);
	margin:0;
	border-radius:2px;
	background:linear-gradient(180deg,transparent,rgba(255,255,255,.7));
	opacity:var(--tmg-spark-fade,.7);
	animation-name:tmg-fall-straight;
	animation-timing-function:linear;
}
@keyframes tmg-fall-straight{
	from{transform:translate3d(0,0,0) rotate(var(--tmg-spark-tilt,0deg))}
	to{transform:translate3d(calc(var(--tmg-spark-drift,0) / 3),128vh,0) rotate(var(--tmg-spark-tilt,0deg))}
}

/* Snöfall: mjuka flingor som vaggar ned. */
.tmg-bg-spark.is-snow{
	top:-8%;
	width:var(--tmg-spark-size,5vmin);
	height:var(--tmg-spark-size,5vmin);
	max-width:14px;
	max-height:14px;
	margin:0;
	background:radial-gradient(circle,rgba(255,255,255,.95) 0 45%,rgba(255,255,255,.3) 70%,transparent 78%);
	animation-name:tmg-fall-sway;
	animation-timing-function:linear;
}
@keyframes tmg-fall-sway{
	0%{transform:translate3d(0,0,0);opacity:0}
	12%{opacity:var(--tmg-spark-fade,.9)}
	50%{transform:translate3d(var(--tmg-spark-drift,0),62vh,0)}
	88%{opacity:var(--tmg-spark-fade,.9)}
	100%{transform:translate3d(calc(var(--tmg-spark-drift,0) * -.6),126vh,0);opacity:0}
}

/* Bubblor: 7.5.56 en riktig lins. Bakgrunden ritas en gång till inuti bubblan
   i förstorad skala och låses till skärmen i stället för till elementet, så
   bubblan visar just den yta den råkar glida över — och innehållet byts ut
   allteftersom den rör sig. Därför flyttas bubblan med top och margin i stället
   för med transform: en transform hade låst bakgrunden till elementet och
   förstoringen hade följt med i stället för att stå still. Ligger en video som
   bakgrund finns ingen bild att förstora, och då syns bara glasfiltreringen. */
.tmg-bg-spark.is-bubbles{
	top:106%;
	width:var(--tmg-spark-size,8vmin);
	height:var(--tmg-spark-size,8vmin);
	max-width:var(--tmg-spark-max,190px);
	max-height:var(--tmg-spark-max,190px);
	margin:0;
	border:0;
	background-image:var(--app-hero,none);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:calc(100vw * var(--tmg-lens-zoom,1.9)) calc(100vh * var(--tmg-lens-zoom,1.9));
	backdrop-filter:saturate(1.2) brightness(1.06) contrast(1.04);
	-webkit-backdrop-filter:saturate(1.2) brightness(1.06) contrast(1.04);
	box-shadow:inset 0 0 16px rgba(255,255,255,.13),inset 0 6px 12px rgba(255,255,255,.09);
	opacity:var(--tmg-spark-fade,.9);
	animation-name:tmg-rise-lens;
	animation-timing-function:ease-in;
}
/* Samma videokompatibla lins för Bubblor. Bildbakgrunder behåller den
   förstorade bildkopian; videobakgrunder använder videon direkt under. */
.app-mobilwebb.has-bg-video .tmg-bg-spark.is-bubbles{
	background-image:none;
	background-color:rgb(255 255 255 / .025);
	backdrop-filter:saturate(1.28) brightness(1.12) contrast(1.08);
	-webkit-backdrop-filter:saturate(1.28) brightness(1.12) contrast(1.08);
	box-shadow:inset 0 0 18px rgb(255 255 255 / .24),inset 0 6px 12px rgb(255 255 255 / .16),0 0 8px rgb(0 0 0 / .12);
}
/* En liten glansdagg högst upp gör att glaset läses som glas. */
.tmg-bg-spark.is-bubbles::after{
	content:"";
	position:absolute;
	left:26%;
	top:16%;
	width:22%;
	height:16%;
	border-radius:50%;
	background:rgba(255,255,255,.45);
	filter:blur(1px);
}
@keyframes tmg-rise-lens{
	0%{top:106%;margin-left:0;opacity:0}
	14%{opacity:var(--tmg-spark-fade,.9)}
	50%{margin-left:var(--tmg-spark-drift,0)}
	88%{opacity:var(--tmg-spark-fade,.9)}
	100%{top:-24%;margin-left:calc(var(--tmg-spark-drift,0) * -.4);opacity:0}
}

/* Stjärnfall: streck med svans, snett över ytan. */
.tmg-bg-spark.is-meteor{
	top:8%;
	width:var(--tmg-spark-size,30vmin);
	height:2px;
	margin:0;
	border-radius:2px;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
	filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
	animation-name:tmg-meteor;
	animation-timing-function:ease-in;
}
@keyframes tmg-meteor{
	0%{transform:translate3d(-20vw,-20vh,0) rotate(28deg);opacity:0}
	18%{opacity:1}
	100%{transform:translate3d(60vw,70vh,0) rotate(28deg);opacity:0}
}

/* Konfetti: små rektanglar som virvlar ned. */
.tmg-bg-spark.is-confetti{
	top:-10%;
	width:var(--tmg-spark-size,7vmin);
	height:calc(var(--tmg-spark-size,7vmin) * .45);
	max-width:14px;
	max-height:8px;
	margin:0;
	border-radius:1px;
	background:hsl(var(--tmg-spark-hue,0) 70% 72%);
	opacity:var(--tmg-spark-fade,.85);
	animation-name:tmg-tumble;
	animation-timing-function:linear;
}
@keyframes tmg-tumble{
	0%{transform:translate3d(0,0,0) rotate(0deg)}
	100%{transform:translate3d(var(--tmg-spark-drift,0),126vh,0) rotate(var(--tmg-spark-turn,360deg))}
}

/* Löv i vinden: ovaler som seglar ned i sidled. */
.tmg-bg-spark.is-leaves{
	top:-10%;
	width:var(--tmg-spark-size,12vmin);
	height:calc(var(--tmg-spark-size,12vmin) * .58);
	max-width:26px;
	max-height:16px;
	margin:0;
	border-radius:60% 20% 60% 20%;
	background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
	opacity:var(--tmg-spark-fade,.7);
	animation-name:tmg-leaf;
	animation-timing-function:ease-in-out;
}
@keyframes tmg-leaf{
	0%{transform:translate3d(0,0,0) rotate(0deg)}
	35%{transform:translate3d(var(--tmg-spark-drift,0),44vh,0) rotate(calc(var(--tmg-spark-turn,180deg) * .4))}
	70%{transform:translate3d(calc(var(--tmg-spark-drift,0) * -.7),86vh,0) rotate(calc(var(--tmg-spark-turn,180deg) * .8))}
	100%{transform:translate3d(var(--tmg-spark-drift,0),126vh,0) rotate(var(--tmg-spark-turn,180deg))}
}

/* Dimma: stora suddiga moln som driver i sidled. */
.tmg-bg-spark.is-fog{
	top:auto;
	bottom:-10%;
	width:var(--tmg-spark-size,80vmin);
	height:calc(var(--tmg-spark-size,80vmin) * .5);
	margin:0;
	background:radial-gradient(ellipse at center,rgba(255,255,255,.18) 0 38%,rgba(255,255,255,.07) 62%,transparent 76%);
	filter:blur(14px);
	animation-name:tmg-fog;
	animation-timing-function:ease-in-out;
}
@keyframes tmg-fog{
	0%{transform:translate3d(-30vw,0,0) scale(.9);opacity:0}
	25%{opacity:var(--tmg-spark-fade,.8)}
	75%{opacity:var(--tmg-spark-fade,.8)}
	100%{transform:translate3d(40vw,-12vh,0) scale(1.2);opacity:0}
}

/* Norrsken: höga färgslöjor som vandrar långsamt. */
.tmg-bg-spark.is-aurora{
	top:-20%;
	width:var(--tmg-spark-size,50vmin);
	height:150vh;
	margin:0;
	border-radius:50%;
	background:linear-gradient(180deg,transparent,hsl(var(--tmg-spark-hue,150) 80% 62% / .3) 35%,hsl(calc(var(--tmg-spark-hue,150) + 60deg) 80% 60% / .22) 65%,transparent);
	filter:blur(26px);
	animation-name:tmg-aurora;
	animation-timing-function:ease-in-out;
}
@keyframes tmg-aurora{
	0%{transform:translate3d(-10vw,0,0) skewX(-8deg) scaleY(.9);opacity:0}
	30%{opacity:var(--tmg-spark-fade,.8)}
	70%{opacity:var(--tmg-spark-fade,.8)}
	100%{transform:translate3d(18vw,0,0) skewX(10deg) scaleY(1.1);opacity:0}
}

/* Ljusblänk: hela ytan tänds mjukt en kort stund. */
.tmg-bg-spark.is-flash{
	left:0;
	top:0;
	width:100%;
	height:100%;
	margin:0;
	border-radius:0;
	background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.5),transparent 70%);
	animation-name:tmg-flash;
}
@keyframes tmg-flash{
	0%{opacity:0}
	12%{opacity:var(--tmg-spark-fade,.7)}
	26%{opacity:.08}
	38%{opacity:calc(var(--tmg-spark-fade,.7) * .7)}
	100%{opacity:0}
}

/* Skanningslinje: en ljus rad som vandrar nedåt. */
.tmg-bg-spark.is-scan{
	left:0;
	top:0;
	width:100%;
	height:calc(var(--tmg-spark-size,2vmin) * 1.4);
	max-height:10px;
	margin:0;
	border-radius:0;
	background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent);
	animation-name:tmg-scan;
	animation-timing-function:linear;
}
@keyframes tmg-scan{
	0%{transform:translate3d(0,-10vh,0);opacity:0}
	10%{opacity:var(--tmg-spark-fade,.8)}
	90%{opacity:var(--tmg-spark-fade,.8)}
	100%{transform:translate3d(0,110vh,0);opacity:0}
}

/* ============================================================
   7.5.59: temaknapparna sitter i panelens lilla header, längst
   till höger bredvid titeln. Raden som fanns under flikarna är
   borta, och knapparnas egen storlek är oförändrad.
   ============================================================ */
.app-mobilwebb-user-panel-header .app-mobilwebb-user-panel-theme{
	display:flex;
	align-items:center;
	gap:8px;
	flex:0 0 auto;
	margin-left:auto;
	padding:0;
	background:transparent;
	border-bottom:0;
}
.app-mobilwebb-user-panel-title{min-width:0}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-theme{
	background:transparent;
	border-color:transparent;
}
@media(max-width:620px){
	/* På smal skärm får titeln krympa i stället för att knapparna gör det. */
	.app-mobilwebb-user-panel-header{gap:8px}
	.app-mobilwebb-user-panel-title strong,
	.app-mobilwebb-user-panel-title small{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
}

/* ============================================================
   7.5.61: meddelanderutorna i mörkt tema. De hade bara ljus stil,
   så den bleka gröna plattan låg kvar mot den mörka panelen med
   nästan oläsbar text. Nu följer de panelens formspråk: mörk yta,
   rundade hörn och en färgad kant som visar vad det gäller.
   ============================================================ */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-admin .notice{
	border-color:#4a4a4a!important;
	border-left:3px solid #5a68a0!important;
	background:#282828!important;
	color:#dfe4f3!important;
	box-shadow:none!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-admin .notice p{
	color:inherit!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-admin .notice.notice-success{
	border-color:#2b4a3c!important;
	border-left:3px solid #47b482!important;
	background:#14201b!important;
	color:#bde9d1!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-admin .notice.notice-error{
	border-color:#4d2a32!important;
	border-left:3px solid #d9647d!important;
	background:#20141a!important;
	color:#f2c3cd!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-web-admin .notice.notice-warning{
	border-color:#4d4327!important;
	border-left:3px solid #d6a94a!important;
	background:#201c12!important;
	color:#f0dcae!important;
}
/* Samma färgade kant i ljust tema, så de två lägena ser lika ut. */
.tmg-app-web-admin .notice{border-left:3px solid #98a9e8!important}
.tmg-app-web-admin .notice.notice-success{border-left:3px solid #4aa87a!important}
.tmg-app-web-admin .notice.notice-error{
	border-color:#f2cdd6!important;
	border-left:3px solid #c95570!important;
	background:#fdf2f5;
	color:#8f2c45;
}
.tmg-app-web-admin .notice.notice-warning{
	border-color:#f0e2c0!important;
	border-left:3px solid #c99a34!important;
	background:#fdf8ec;
	color:#7d5c15;
}

/* 7.5.62: fält med en väljare bredvid för namn som redan används. */
.tmg-app-test-combo{
	display:grid;
	gap:6px;
}
.tmg-app-test-combo-pick{
	min-height:44px;
	padding:8px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	color:var(--tmg-test-muted,#77768a);
	font:inherit;
	font-size:14px;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-test-combo-pick{
	border-color:rgba(243,245,251,.6)!important;
	background:#282828!important;
	color:#aeb6c9!important;
}
@media(min-width:620px){
	.tmg-app-test-combo{grid-template-columns:minmax(0,1fr) minmax(0,180px)}
}

/* 7.5.64: kortet på Hem styrs nu även från Min profil. */
.tmg-app-portfolio-home{
	display:grid;
	gap:8px;
	margin-top:12px;
	padding:14px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-portfolio-home input[type="text"],
.tmg-app-portfolio-home textarea{
	width:100%;
	min-height:46px;
	padding:9px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-portfolio-home textarea{min-height:76px}
.tmg-app-portfolio-home-align{display:flex;gap:14px;flex-wrap:wrap}
.tmg-app-portfolio-home-align label{display:flex;align-items:center;gap:6px;font-weight:600}
.tmg-app-portfolio-home small{opacity:.7}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-home{
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content :is(.tmg-app-portfolio-home input[type="text"],.tmg-app-portfolio-home textarea){
	border-color:rgba(243,245,251,.6)!important;
	background:#282828!important;
	color:#f3f5fb!important;
}

/* ============================================================
   7.5.65: headerbilden ligger i en egen ram som klipper, så
   zoomen förstorar bilden inuti headern i stället för att spilla
   ut över innehållet. Ramen klipper bara bilden — inställnings-
   menyn är ett syskon och påverkas inte.
   ============================================================ */
.app-mobilwebb-header-image-frame{
	position:absolute;
	inset:0;
	display:block;
	z-index:0;
	overflow:hidden;
	pointer-events:none;
	border-radius:inherit;
}
.app-mobilwebb-header.has-header-image>.app-mobilwebb-header-image-frame{
	position:absolute;
	top:-10%;
	bottom:0;
	height:auto;
	z-index:0;
}

/* ============================================================
   7.5.68: statistikfliken. Ringen är ersatt av staplar — en ring
   som alltid står på 100 % säger ingenting, och staplarna visar
   i stället hur besöken fördelar sig över tid.
   ============================================================ */
.tmg-app-stat-total{
	display:grid;
	gap:2px;
	justify-items:center;
	margin:4px 0 14px;
	text-align:center;
}
.tmg-app-stat-total span{font-size:14px;opacity:.72}
.tmg-app-stat-total strong{
	/* 7.16.2: siffran tog för mycket plats. 7.23.2: halverad igen. */
	font-size:clamp(15px,4vw,18px);
	font-weight:800;
	line-height:1;
	letter-spacing:-.02em;
}
.tmg-app-stat-chart{
	position:relative;
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:minmax(0,1fr);
	align-items:end;
	gap:6px;
	height:200px;
	padding:14px 12px 0;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:16px;
	/* 7.5.70: stödlinjer bakom staplarna, som i ett riktigt diagram. */
	background-color:var(--tmg-test-field,#fbfbff);
	background-image:repeating-linear-gradient(to top,rgba(120,110,160,.14) 0 1px,transparent 1px 25%);
	background-position:left bottom 30px;
	background-size:100% calc(100% - 46px);
	background-repeat:no-repeat;
	overflow:hidden;
}
/* Golvet som staplarna står på, med perspektiv. */
.tmg-app-stat-chart::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:26px;
	height:10px;
	background:linear-gradient(180deg,rgba(120,110,160,.18),transparent);
	pointer-events:none;
}
.tmg-app-stat-bar{
	position:relative;
	display:grid;
	grid-template-rows:auto minmax(0,1fr) auto;
	align-items:end;
	justify-items:center;
	gap:5px;
	height:100%;
	min-width:0;
	z-index:1;
}
.tmg-app-stat-bar b{
	font-size:11px;
	font-weight:800;
	line-height:1;
	opacity:.9;
}
/* Stapeln: ljusare upptill, mörkare nedtill, med topplock och skuggad sida. */
.tmg-app-stat-bar i{
	position:relative;
	display:block;
	width:min(100%,24px);
	height:var(--tmg-bar,4%);
	align-self:end;
	border-radius:3px 3px 2px 2px;
	background:linear-gradient(180deg,rgba(150,140,190,.30),rgba(150,140,190,.16));
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
/* 7.10.6: staplarna växer en gång när Statistik monteras eller öppnas. */
@keyframes tmg-app-stat-grow{
	from{height:0}
	to{height:var(--tmg-bar,4%)}
}
.tmg-app-stat-chart.is-animated .tmg-app-stat-bar i{
	animation:tmg-app-stat-grow .82s cubic-bezier(.2,.72,.24,1) both;
	animation-delay:calc(var(--tmg-bar-index,0) * 45ms);
}
.tmg-app-stat-bar.has-value i{
	background:linear-gradient(180deg,#e468f2 0%,#c033c8 46%,#8d1e99 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset -2px 0 4px rgba(0,0,0,.18),
		0 6px 14px rgba(192,51,200,.28);
}
/* Topplocket ger stapeln en ovansida. */
.tmg-app-stat-bar.has-value i::before{
	content:"";
	position:absolute;
	left:-1px;
	right:-1px;
	top:-3px;
	height:7px;
	border-radius:50%;
	background:linear-gradient(180deg,#f6b0fb,#d552e0);
	box-shadow:0 1px 2px rgba(0,0,0,.14);
}
/* Sidan, snedställd så stapeln får djup. */
.tmg-app-stat-bar.has-value i::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:-4px;
	width:4px;
	border-radius:0 3px 2px 0;
	background:linear-gradient(180deg,#a1249c,#5f1268);
	opacity:.9;
}
.tmg-app-stat-bar small{
	font-size:10px;
	opacity:.6;
	white-space:nowrap;
}
@media(prefers-reduced-motion:reduce){.tmg-app-stat-chart.is-animated .tmg-app-stat-bar i{animation:none}}
.tmg-app-stat-caption{text-align:center;margin:0 0 16px}
.tmg-app-stat-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	margin:0 0 14px;
}
.tmg-app-stat-box{
	display:grid;
	gap:4px;
	padding:12px 14px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-stat-box span{font-size:12px;opacity:.7}
.tmg-app-stat-box strong{font-size:20px;font-weight:800;line-height:1.15}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-box{
	border-color:#4a4a4a!important;
	background:#282828!important;
}
/* 7.41.43: listan "Besökare — varifrån" i Statistik. */
.tmg-app-stat-places{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tmg-app-stat-places li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--tmg-test-border,#e3e5f0);border-radius:12px;background:var(--tmg-test-field,#fbfbff)}
.tmg-app-stat-flag{font-size:20px;line-height:1;flex:0 0 auto}
.tmg-app-stat-place-name{flex:1;min-width:0;font-weight:700}
.tmg-app-stat-place-name small{display:block;font-weight:400;opacity:.7;font-size:12px}
.tmg-app-stat-place-time{flex:0 0 auto;font-size:12px;opacity:.7;white-space:nowrap}

/* 7.5.68: staplarna i mörkt tema. */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-chart{
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-bar i{
	background:rgba(255,255,255,.12);
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-bar.has-value i{
	background:#c033c8;
}

/* 7.5.70: stödlinjer och golv i mörkt tema. */
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-chart{
	background-image:repeating-linear-gradient(to top,rgba(255,255,255,.09) 0 1px,transparent 1px 25%);
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-chart::after{
	background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-bar i{
	background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-stat-bar.has-value i{
	background:linear-gradient(180deg,#e468f2 0%,#c033c8 46%,#8d1e99 100%);
}

/* ============================================================
   7.5.71: en flik kan ligga kvar i menyn men vara stängd. Då
   göms panelens vanliga innehåll och meddelandet visas mitt på
   ytan, ovanpå bakgrunden — samma princip som när hela
   mobilwebben är avstängd.
   ============================================================ */
.app-mobilwebb-panel.is-closed>*:not(.app-mobilwebb-closed){display:none!important}
.app-mobilwebb-closed{
	display:grid;
	place-items:center;
	min-height:52vh;
	padding:28px 20px;
	text-align:center;
}
.app-mobilwebb-closed p{
	margin:0;
	max-width:22ch;
	font-size:clamp(20px,6vw,30px);
	font-weight:700;
	line-height:1.25;
	letter-spacing:-.01em;
	text-shadow:0 2px 18px rgba(0,0,0,.45);
}

/* Reglagen i Min profil. */
.tmg-app-portfolio-tabs{
	display:grid;
	gap:8px;
	margin-top:12px;
	padding:14px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:14px;
	background:var(--tmg-test-field,#fbfbff);
}
.tmg-app-portfolio-tab-row{
	display:grid;
	grid-template-columns:minmax(64px,1fr) auto auto;
	align-items:center;
	gap:10px;
	padding:8px 0;
	border-top:1px solid var(--tmg-test-border,#e3e5f0);
}
.tmg-app-portfolio-tab-row:first-of-type{border-top:0}
.tmg-app-portfolio-tab-row>span{font-weight:700}
/* 7.13.0: fältet för sidans egen informationstext ligger under sin flikrad
   och följer samma kompakta stil som resten av rutan. */
.tmg-app-portfolio-tab-text{
	display:grid;
	gap:4px;
	margin:0 0 4px;
	font-size:12px;
}
.tmg-app-portfolio-tab-text>span{opacity:.75}
.tmg-app-portfolio-tab-toggle{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:13px}

/* 7.16.0: hopfällbara block. Stängt visas bara ikon och namn, så panelen
   börjar som en kort lista i stället för ett långt formulär. */
.tmg-app-fold{margin:0 0 8px;border:1px solid var(--tmg-test-border,#e3e5f0);border-radius:14px;background:var(--tmg-test-field,#fbfbff);overflow:hidden}
.tmg-app-fold+.tmg-app-fold{margin-top:0}
.tmg-app-fold-head{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;font-size:14px}
.tmg-app-fold-head::-webkit-details-marker{display:none}
.tmg-app-fold-head strong{flex:1;font-weight:650}
.tmg-app-fold-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:rgba(120,132,175,.14)}
.tmg-app-fold-head::after{content:"";width:8px;height:8px;flex:0 0 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.5}
.tmg-app-fold[open]>.tmg-app-fold-head::after{transform:rotate(-135deg) translate(-2px,-2px)}
.tmg-app-fold[open]>.tmg-app-fold-head{border-bottom:1px solid var(--tmg-test-border,#e3e5f0)}
/* 7.23.0: mindre luft, eftersom strecken nu skiljer delarna åt. */
.tmg-app-fold-body{display:grid;gap:8px;padding:10px 12px 12px}
/* 7.16.1: när blocket omsluter ett helt kort tar kortet bort sin egen ram, så
   det inte blir en ram i en ram. */
.tmg-app-fold-body>.tmg-app-web-card{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
.tmg-app-fold-body>.tmg-app-web-card>h2:first-child{margin-top:0}
.tmg-app-fold .tmg-app-test-bulk{margin:0}
.tmg-app-portfolio-tab-row label{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tmg-app-portfolio-tabs input[type="text"]{
	width:100%;
	min-height:46px;
	padding:9px 12px;
	border:1px solid var(--tmg-test-border,#e3e5f0);
	border-radius:12px;
	background:#fff;
	font:inherit;
}
.tmg-app-portfolio-tabs small{opacity:.7}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-tabs{
	border-color:#4a4a4a!important;
	background:#282828!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-tab-row{
	border-top-color:#4a4a4a!important;
}
.app-mobilwebb-settings-menu.app-mobilwebb-admin-theme-dark .app-mobilwebb-user-panel-content .tmg-app-portfolio-tabs input[type="text"]{
	border-color:rgba(243,245,251,.6)!important;
	background:#282828!important;
	color:#f3f5fb!important;
}
/* 7.41.29: knappen "Senaste felen" i Min profil. */